From 2340256ee11310ffb2350429b6e759bf0e1f6bbe Mon Sep 17 00:00:00 2001
From: kevin <kevin@yuno.malio.fr>
Date: Fri, 20 Feb 2026 12:06:31 +0100
Subject: [PATCH 01/13] feat : 333 creation du composant inputtext

---
 .playground/pages/composant/inputText.vue | 132 +++++++++++++++
 .playground/pages/index.vue               | 106 +++++++++++-
 app/assets/css/malio.css                  |  18 +++
 app/components/malio/Input.vue            |  38 -----
 app/components/malio/InputText.vue        | 189 ++++++++++++++++++++++
 nuxt.config.ts                            |  30 +++-
 package-lock.json                         | 177 +++++++++-----------
 package.json                              |   7 +-
 tailwind.config.ts                        |  22 +++
 9 files changed, 568 insertions(+), 151 deletions(-)
 create mode 100644 .playground/pages/composant/inputText.vue
 create mode 100644 app/assets/css/malio.css
 delete mode 100644 app/components/malio/Input.vue
 create mode 100644 app/components/malio/InputText.vue
 create mode 100644 tailwind.config.ts

diff --git a/.playground/pages/composant/inputText.vue b/.playground/pages/composant/inputText.vue
new file mode 100644
index 0000000..aa18af6
--- /dev/null
+++ b/.playground/pages/composant/inputText.vue
@@ -0,0 +1,132 @@
+<template>
+  <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Simple</h2>
+      <MalioInputText v-model="simpleValue" />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec label</h2>
+      <MalioInputText
+        v-model="nameValue"
+        label="Nom d'utilisateur"
+        name="username"
+        autocomplete="username"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec icône</h2>
+      <MalioInputText
+        v-model="searchValue"
+        label="Recherche"
+        icon-name="mdi:magnify"
+        icon-size="20"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+      <MalioInputText
+        model-value="Valeur verrouillee"
+        disabled
+        label="Champ desactive"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+      <MalioInputText
+        model-value="Lecture seule"
+        readonly
+        label="Champ readonly"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Hint et erreur</h2>
+      <MalioInputText
+        v-model="emailValue"
+        label="Email"
+        hint="Format attendu: nom@domaine.com"
+      />
+      <div class="mt-4">
+        <MalioInputText
+          model-value="abc"
+          label="Code"
+          error="Le code doit contenir au moins 6 caracteres"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Largeurs</h2>
+      <div class="space-y-4">
+        <MalioInputText
+          label="Petit"
+          min-width="w-56"
+        />
+        <MalioInputText
+          label="Moyen"
+          min-width="w-72"
+        />
+        <MalioInputText
+          label="Large"
+          min-width="w-full"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Erreur + icône</h2>
+      <MalioInputText
+        model-value="ab"
+        label="Code promo"
+        icon-name="mdi:alert-circle-outline"
+        icon-size="20"
+        error="Le code est invalide"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Hint + icône</h2>
+      <MalioInputText
+        v-model="cityValue"
+        label="Ville"
+        icon-name="mdi:map-marker-outline"
+        icon-size="20"
+        hint="Commencez à taper le nom de la ville"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly + icône</h2>
+      <MalioInputText
+        model-value="Commande #A-2048"
+        label="Référence"
+        readonly
+        icon-name="mdi:lock-outline"
+        icon-size="20"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Désactivé + icône</h2>
+      <MalioInputText
+        model-value="Compte indisponible"
+        label="Compte"
+        disabled
+        icon-name="mdi:account-off-outline"
+        icon-size="20"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const simpleValue = ref('')
+const nameValue = ref('')
+const searchValue = ref('')
+const emailValue = ref('')
+const cityValue = ref('')
+</script>
diff --git a/.playground/pages/index.vue b/.playground/pages/index.vue
index 257a509..8fa3275 100644
--- a/.playground/pages/index.vue
+++ b/.playground/pages/index.vue
@@ -1,11 +1,107 @@
 <template>
-  <div class="p-6 space-y-4">
-    <MalioInput v-model="v" label="Email" placeholder="you@example.com" />
-    <pre class="text-xs">{{ v }}</pre>
+  <div class="flex min-h-screen">
+    <aside class="w-72 bg-m-bg p-6 text-white">
+      <button
+        type="button"
+        class="text-xl text-black font-semibold"
+        @click="clearSelection"
+      >
+        Liste des composants
+      </button>
+
+      <nav class="mt-6 flex flex-col gap-2">
+        <button
+          v-for="item in items"
+          :key="item.name"
+          type="button"
+          class="rounded px-3 py-2 text-left text-black font-bold hover:bg-primary-500 hover:text-white"
+          :class="selectedName === item.name ? 'bg-secondary-500 text-white ' : ''"
+          @click="selectOrToggle(item.name)"
+        >
+          {{ item.label }}
+        </button>
+      </nav>
+    </aside>
+
+    <main class="flex-1 p-6">
+      <component
+        :is="selectedDemoComponent"
+        v-if="selectedDemoComponent"
+      />
+      <p
+        v-else-if="selectedName"
+        class="text-gray-700"
+      >
+        Page de demo introuvable: <code>.playground/pages/composant/{{ selectedDemoFileName }}.vue</code>
+      </p>
+      <div v-else>
+        <h1 class="text-2xl font-semibold text-gray-900">Playground composants</h1>
+        <p class="mt-2 text-gray-600">
+          Selectionne un composant dans la liste pour afficher sa page de demo.
+        </p>
+      </div>
+    </main>
   </div>
 </template>
 
 <script setup lang="ts">
-const v = ref('')
-</script>
+type LoadedModule = {
+  default: unknown
+}
 
+type Item = {
+  name: string
+  label: string
+  demoComponent?: unknown
+}
+
+const componentModules = import.meta.glob('../../app/components/malio/*.vue', { eager: true }) as Record<string, LoadedModule>
+const demoModules = import.meta.glob('./composant/*.vue', { eager: true }) as Record<string, LoadedModule>
+
+const demoByName = Object.fromEntries(
+  Object.entries(demoModules).map(([file, mod]) => {
+    const name = file.split('/').pop()?.replace('.vue', '') ?? ''
+    return [name.toLowerCase(), mod.default]
+  }),
+)
+
+const items = computed(() =>
+  Object.entries(componentModules).map(([file]) => {
+    const name = file.split('/').pop()?.replace('.vue', '') ?? ''
+
+    return {
+      name,
+      label: name,
+      demoComponent: demoByName[name.toLowerCase()],
+    }
+  }) as Item[],
+)
+
+const selectedName = ref('')
+const hasInitializedSelection = ref(false)
+
+watchEffect(() => {
+  if (!hasInitializedSelection.value && items.value.length > 0) {
+    selectedName.value = items.value[0].name
+    hasInitializedSelection.value = true
+  }
+})
+
+function selectOrToggle(name: string) {
+  selectedName.value = selectedName.value === name ? '' : name
+}
+
+function clearSelection() {
+  selectedName.value = ''
+}
+
+const selectedDemoComponent = computed(() =>
+  items.value.find((item) => item.name === selectedName.value)?.demoComponent,
+)
+
+const selectedDemoFileName = computed(() => {
+  const name = selectedName.value
+  if (!name) return ''
+  return name.charAt(0).toLowerCase() + name.slice(1)
+})
+</script>
diff --git a/app/assets/css/malio.css b/app/assets/css/malio.css
new file mode 100644
index 0000000..97ff80e
--- /dev/null
+++ b/app/assets/css/malio.css
@@ -0,0 +1,18 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* Couleurs en RGB “space separated” pour Tailwind */
+    --m-primary: 34 39 131;       /* Couleur principal*/
+    --m-secondary: 48 73 152;     /* Couleur secondaire */
+    --m-tertiary: 243 244 248;    /* Couleur tertiaire (background) */
+    --m-border: 203 213 225;      /* Couleur des bordures */
+    --m-text: 15 23 42;           /*  Couleur du texte */
+    --m-muted: 100 116 139;       /* Couleur pour les éléments désactivés ou secondaires */
+    --m-bg: 243 244 248;          /* Couleur de fond générale */
+
+    --m-error: 155 17 30;         /* rouge pur pour les erreurs */
+  }
+}
diff --git a/app/components/malio/Input.vue b/app/components/malio/Input.vue
deleted file mode 100644
index 17119af..0000000
--- a/app/components/malio/Input.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <div class="space-y-1">
-    <label v-if="label" :for="id" class="text-sm font-medium text-gray-700">{{ label }}</label>
-    <input
-      :id="id"
-      :value="props.modelValue"
-      :type="props.type"
-      :placeholder="props.placeholder"
-      class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm outline-none transition focus:border-gray-500"
-      @input="onInput"
-    >
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(defineProps<{
-  modelValue?: string
-  type?: string
-  label?: string
-  placeholder?: string
-  id?: string
-}>(), {
-  modelValue: '',
-  type: 'text',
-  label: '',
-  placeholder: '',
-  id: undefined,
-})
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
-}>()
-
-function onInput(event: Event) {
-  const target = event.target as HTMLInputElement
-  emit('update:modelValue', target.value)
-}
-</script>
diff --git a/app/components/malio/InputText.vue b/app/components/malio/InputText.vue
new file mode 100644
index 0000000..2833115
--- /dev/null
+++ b/app/components/malio/InputText.vue
@@ -0,0 +1,189 @@
+<template>
+  <div
+    class="relative mt-4 w-full"
+    :class="[minWidth, maxWidth]"
+  >
+    <input
+      :id="inputId"
+      :name="name"
+      :autocomplete="autocomplete"
+      class="floating-input grow-height peer min-h-[40px] w-full border bg-white px-3 py-1 outline-none focus:border-2"
+      :class="[
+        disabled ? 'cursor-not-allowed bg-m-primary ' : 'cursor-text',
+        error
+          ? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
+          : 'border-m-border focus:border-m-primary [&:not(:placeholder-shown)]:border-m-primary',
+        text,
+        iconInputPaddingClass,
+        inputClass,
+        rounded,
+      ]"
+      :required="required"
+      :maxlength="maxLength"
+      :minlength="minLength"
+      :disabled="disabled"
+      :value="modelValue ?? ''"
+      :readonly="readonly"
+      :aria-invalid="!!error"
+      :aria-describedby="describedBy"
+      v-bind="attrs"
+      placeholder=" "
+      type="text"
+      @input="onInput"
+    >
+
+    <label
+      v-if="label"
+      :for="inputId"
+      class="floating-label absolute left-3 top-2 origin-left transition-transform duration-150 peer-focus:translate-y-[-1.15rem] peer-focus:scale-90"
+      :class="[
+        error
+          ? 'text-m-error peer-valid:text-m-error peer-focus:text-m-error'
+          : 'text-m-muted peer-valid:text-m-primary peer-focus:text-m-primary',
+        labelClass,
+        textSize,
+      ]"
+    >
+      {{ label }}
+    </label>
+
+    <Icon
+      v-if="iconName"
+      :name="iconName"
+      :size="iconSize"
+      :class="[
+        error
+          ? 'text-m-error'
+          : 'text-m-muted',
+        'pointer-events-none absolute right-2 top-1/2 -translate-y-1/2',
+        iconColor,
+      ]"
+    />
+
+  </div>
+    <p
+      v-if="hint && !error"
+      :id="`${inputId}-hint`"
+      class="mt-1 text-xs text-m-muted"
+    >
+      {{ hint }}
+    </p>
+
+    <p
+      v-if="error"
+      :id="`${inputId}-error`"
+      class="mt-1 text-xs text-m-error"
+    >
+      {{ error }}
+    </p>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    label?: string
+    name?: string
+    autocomplete?: string
+    modelValue?: string | null | undefined
+    minWidth?: string
+    maxWidth?: string
+    text?: string
+    textSize?: string
+    inputClass?: string
+    labelClass?: string
+    required?: boolean
+    maxLength?: number | string
+    minLength?: number | string
+    disabled?: boolean
+    readonly?: boolean
+    hint?: string
+    error?: string
+    iconName?: string
+    rounded?: string
+    iconSize?: string | number
+    iconColor?: string
+  }>(),
+  {
+    id: '',
+    name: '',
+    autocomplete: '',
+    modelValue: undefined,
+    iconName: '',
+    label: '',
+    minWidth: 'w-96',
+    maxWidth: '',
+    inputClass: '',
+    labelClass: '',
+    text: 'text-lg',
+    required: false,
+    maxLength: undefined,
+    minLength: undefined,
+    readonly: false,
+    textSize: 'text-sm',
+    disabled: false,
+    rounded: 'rounded-md',
+    hint: '',
+    error: '',
+    iconSize: 24,
+    iconColor: '',
+  },
+)
+
+const attrs = useAttrs()
+const generatedId = `malio-input-text-${Math.random().toString(36).slice(2, 10)}`
+
+const inputId = computed(() => props.id?.toString() || generatedId)
+
+const describedBy = computed(() => {
+  const ids: string[] = []
+  if (props.hint) ids.push(`${inputId.value}-hint`)
+  if (props.error) ids.push(`${inputId.value}-error`)
+  return ids.length ? ids.join(' ') : undefined
+})
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void
+}>()
+
+const onInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  emit('update:modelValue', target.value)
+}
+
+const iconInputPaddingClass = computed(() => {
+  return props.iconName ? 'pr-10' : ''
+})
+</script>
+
+<style scoped>
+.floating-input:focus + label,
+.floating-input:not(:placeholder-shown) + label {
+  transform: translateY(-1.15rem) scale(0.9);
+}
+
+.floating-label {
+  background: white;
+  padding: 0 0.25rem;
+}
+
+.grow-height {
+  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
+  transform-origin: center;
+}
+
+.grow-height:focus {
+  transform: scaleY(1.2);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .grow-height {
+    transition: none;
+  }
+}
+</style>
+
diff --git a/nuxt.config.ts b/nuxt.config.ts
index daa8552..d16e834 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,9 +1,33 @@
 import { fileURLToPath } from 'node:url'
 import { dirname, join } from 'node:path'
 
-const currentDir = dirname(fileURLToPath(import.meta.url))
+const dir = dirname(fileURLToPath(import.meta.url))
 
 export default defineNuxtConfig({
-  modules: ['@nuxtjs/tailwindcss'],
-  css: [join(currentDir, './app/assets/css/tailwind.css')],
+  modules: ['@nuxtjs/tailwindcss','@nuxt/icon'],
+  css: [join(dir, 'app/assets/css/malio.css')],
+
+  tailwindcss: {
+    config: {
+      theme: {
+        extend: {
+          borderRadius: {
+            malio: 'var(--m-radius)',
+          },
+          colors: {
+            m: {
+              primary: 'rgb(var(--m-primary) / <alpha-value>)',
+              secondary: 'rgb(var(--m-secondary) / <alpha-value>)',
+              tertiary: 'rgb(var(--m-tertiary) / <alpha-value>)',
+              border: 'rgb(var(--m-border) / <alpha-value>)',
+              text: 'rgb(var(--m-text) / <alpha-value>)',
+              muted: 'rgb(var(--m-muted) / <alpha-value>)',
+              bg: 'rgb(var(--m-bg) / <alpha-value>)',
+              error: 'rgb(var(--m-error) / <alpha-value>)',
+            }
+          }
+        }
+      }
+    }
+  }
 })
diff --git a/package-lock.json b/package-lock.json
index c854fd4..e21bbc0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "@malio/layer-ui",
       "version": "0.0.1",
       "dependencies": {
+        "@nuxt/icon": "^2.2.1",
         "@nuxtjs/tailwindcss": "^6.14.0"
       },
       "devDependencies": {
@@ -38,7 +39,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.1.0.tgz",
       "integrity": "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "package-manager-detector": "^1.3.0",
@@ -337,7 +337,6 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
       "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
-      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -347,7 +346,6 @@
       "version": "7.28.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
       "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
-      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -381,7 +379,6 @@
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
       "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.29.0"
@@ -483,7 +480,6 @@
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
       "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.27.1",
@@ -685,7 +681,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -702,7 +697,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -719,7 +713,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -736,7 +729,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -753,7 +745,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -770,7 +761,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -787,7 +777,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -804,7 +793,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -821,7 +809,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -838,7 +825,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -855,7 +841,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -872,7 +857,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -889,7 +873,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -906,7 +889,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -923,7 +905,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -940,7 +921,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -957,7 +937,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -974,7 +953,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -991,7 +969,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1008,7 +985,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1025,7 +1001,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1042,7 +1017,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1059,7 +1033,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1076,7 +1049,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1093,7 +1065,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1110,7 +1081,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1318,6 +1288,47 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@iconify/collections": {
+      "version": "1.0.652",
+      "resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.652.tgz",
+      "integrity": "sha512-RJhGvFA27VPidZPewkSPHncr1NgAo7qnaO+aUA2vEfFTnYvAfVoZGn1CPIK1y2J+N+3w/KHpEHAEf1pQAHiNDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-3.1.0.tgz",
+      "integrity": "sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw==",
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^1.1.0",
+        "@iconify/types": "^2.0.0",
+        "mlly": "^1.8.0"
+      }
+    },
+    "node_modules/@iconify/vue": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-5.0.0.tgz",
+      "integrity": "sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": ">=3"
+      }
+    },
     "node_modules/@ioredis/commands": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.5.0.tgz",
@@ -1474,7 +1485,7 @@
       "version": "0.3.11",
       "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.11.tgz",
       "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -1740,7 +1751,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/@nuxt/devtools-kit/-/devtools-kit-3.2.1.tgz",
       "integrity": "sha512-lwCtTgqH2izU/d+mAmddnPG3mBaia9BsknxYkMFAPbxtph/ex5tPkmQjKACPQU5q4Tl5bTgWgZWo9pa3oz4LMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nuxt/kit": "^4.3.1",
@@ -2081,11 +2091,32 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/@nuxt/icon": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/icon/-/icon-2.2.1.tgz",
+      "integrity": "sha512-GI840yYGuvHI0BGDQ63d6rAxGzG96jQcWrnaWIQKlyQo/7sx9PjXkSHckXUXyX1MCr9zY6U25Td6OatfY6Hklw==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/collections": "^1.0.641",
+        "@iconify/types": "^2.0.0",
+        "@iconify/utils": "^3.1.0",
+        "@iconify/vue": "^5.0.0",
+        "@nuxt/devtools-kit": "^3.1.1",
+        "@nuxt/kit": "^4.2.2",
+        "consola": "^3.4.2",
+        "local-pkg": "^1.1.2",
+        "mlly": "^1.8.0",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "std-env": "^3.10.0",
+        "tinyglobby": "^0.2.15"
+      }
+    },
     "node_modules/@nuxt/kit": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.3.1.tgz",
       "integrity": "sha512-UjBFt72dnpc+83BV3OIbCT0YHLevJtgJCHpxMX0YRKWLDhhbcDdUse87GtsQBrjvOzK7WUNUYLDS/hQLYev5rA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "c12": "^3.3.3",
@@ -3962,7 +3993,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3976,7 +4006,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3990,7 +4019,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4004,7 +4032,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4018,7 +4045,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4032,7 +4058,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4046,7 +4071,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4060,7 +4084,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4074,7 +4097,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4088,7 +4110,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4102,7 +4123,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4116,7 +4136,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4130,7 +4149,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4144,7 +4162,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4158,7 +4175,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4172,7 +4188,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4186,7 +4201,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4200,7 +4214,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4214,7 +4227,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4228,7 +4240,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4242,7 +4253,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4256,7 +4266,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4270,7 +4279,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4284,7 +4292,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4298,7 +4305,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4438,7 +4444,7 @@
       "version": "24.10.13",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.13.tgz",
       "integrity": "sha512-oH72nZRfDv9lADUBSo104Aq7gPHpQZc4BTx38r9xf9pg5LfP6EzSyH2n7qFmmxRQXh7YlUXODcYsg6PuTDSxGg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~7.16.0"
@@ -5174,7 +5180,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.28.tgz",
       "integrity": "sha512-kviccYxTgoE8n6OCw96BNdYlBg2GOWfBuOW4Vqwrt7mSKWKwFVvI8egdTltqRgITGPsTFYtKYfxIG8ptX2PJHQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.29.0",
@@ -5188,7 +5193,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.28.tgz",
       "integrity": "sha512-/1ZepxAb159jKR1btkefDP+J2xuWL5V3WtleRmxaT+K2Aqiek/Ab/+Ebrw2pPj0sdHO8ViAyyJWfhXXOP/+LQA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-core": "3.5.28",
@@ -5199,7 +5203,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.28.tgz",
       "integrity": "sha512-6TnKMiNkd6u6VeVDhZn/07KhEZuBSn43Wd2No5zaP5s3xm8IqFTHBj84HJah4UepSUJTro5SoqqlOY22FKY96g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.29.0",
@@ -5217,7 +5220,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.28.tgz",
       "integrity": "sha512-JCq//9w1qmC6UGLWJX7RXzrGpKkroubey/ZFqTpvEIDJEKGgntuDMqkuWiZvzTzTA5h2qZvFBFHY7fAAa9475g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-dom": "3.5.28",
@@ -5305,7 +5307,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.28.tgz",
       "integrity": "sha512-gr5hEsxvn+RNyu9/9o1WtdYdwDjg5FgjUSBEkZWqgTKlo/fvwZ2+8W6AfKsc9YN2k/+iHYdS9vZYAhpi10kNaw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/shared": "3.5.28"
@@ -5315,7 +5316,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.28.tgz",
       "integrity": "sha512-POVHTdbgnrBBIpnbYU4y7pOMNlPn2QVxVzkvEA2pEgvzbelQq4ZOUxbp2oiyo+BOtiYlm8Q44wShHJoBvDPAjQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/reactivity": "3.5.28",
@@ -5326,7 +5326,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.28.tgz",
       "integrity": "sha512-4SXxSF8SXYMuhAIkT+eBRqOkWEfPu6nhccrzrkioA6l0boiq7sp18HCOov9qWJA5HML61kW8p/cB4MmBiG9dSA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/reactivity": "3.5.28",
@@ -5339,7 +5338,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.28.tgz",
       "integrity": "sha512-pf+5ECKGj8fX95bNincbzJ6yp6nyzuLDhYZCeFxUNp8EBrQpPpQaLX3nNCp49+UbgbPun3CeVE+5CXVV1Xydfg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-ssr": "3.5.28",
@@ -5353,7 +5351,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.28.tgz",
       "integrity": "sha512-cfWa1fCGBxrvaHRhvV3Is0MgmrbSCxYTXCSCau2I0a1Xw1N1pHAvkWCiXPRAqjvToILvguNyEwjevUqAuBQWvQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/abbrev": {
@@ -5955,7 +5952,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/builtin-modules": {
@@ -6551,7 +6548,6 @@
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
@@ -6759,7 +6755,6 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/db0": {
@@ -7123,7 +7118,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
       "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -7189,7 +7183,6 @@
       "version": "0.27.3",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.3.tgz",
       "integrity": "sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -7763,7 +7756,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/esutils": {
@@ -7820,7 +7812,6 @@
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
       "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "cross-spawn": "^7.0.3",
@@ -8198,7 +8189,6 @@
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
       "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=16"
@@ -8601,7 +8591,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
       "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
-      "dev": true,
       "license": "Apache-2.0",
       "engines": {
         "node": ">=16.17.0"
@@ -8976,7 +8965,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
       "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
@@ -9041,7 +9029,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/jackspeak": {
@@ -9532,7 +9519,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.2.tgz",
       "integrity": "sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "mlly": "^1.7.4",
@@ -9715,7 +9701,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
       "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/merge2": {
@@ -9808,7 +9793,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
       "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -10212,7 +10196,6 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
       "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "path-key": "^4.0.0"
@@ -10228,7 +10211,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
       "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -10463,7 +10445,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
       "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "mimic-fn": "^4.0.0"
@@ -10709,7 +10690,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.6.0.tgz",
       "integrity": "sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/parse-imports-exports": {
@@ -10768,7 +10748,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -11615,7 +11594,6 @@
       "version": "0.2.11",
       "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
       "integrity": "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -12020,7 +11998,6 @@
       "version": "4.57.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
       "integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.8"
@@ -12309,7 +12286,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
@@ -12322,7 +12298,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -12345,7 +12320,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
       "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">=14"
@@ -12438,7 +12412,7 @@
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "buffer-from": "^1.0.0",
@@ -12449,7 +12423,7 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -12533,7 +12507,6 @@
       "version": "3.10.0",
       "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz",
       "integrity": "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/streamx": {
@@ -12618,7 +12591,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
       "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -13055,7 +13027,7 @@
       "version": "5.46.0",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.46.0.tgz",
       "integrity": "sha512-jTwoImyr/QbOWFFso3YoU3ik0jBBDJ6JTOQiy/J2YxVJdZCc+5u7skhNwiOR3FQIygFqVUPHl7qbbxtjW2K3Qg==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
@@ -13074,7 +13046,7 @@
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/text-decoder": {
@@ -13305,7 +13277,7 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -13374,7 +13346,7 @@
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
       "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/unenv": {
@@ -13872,7 +13844,6 @@
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.27.0",
@@ -14254,7 +14225,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.28.tgz",
       "integrity": "sha512-BRdrNfeoccSoIZeIhyPBfvWSLFP4q8J3u8Ju8Ug5vu3LdD+yTM13Sg4sKtljxozbnuMu1NB1X5HBHRYUzFocKg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-dom": "3.5.28",
@@ -14370,7 +14340,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
diff --git a/package.json b/package.json
index 6167cc3..1465a96 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,11 @@
   "type": "module",
   "version": "0.0.1",
   "main": "./nuxt.config.ts",
-  "files": ["app/**", "nuxt.config.ts", "README.md"],
+  "files": [
+    "app/**",
+    "nuxt.config.ts",
+    "README.md"
+  ],
   "scripts": {
     "dev": "nuxi dev .playground",
     "dev:prepare": "nuxt prepare .playground",
@@ -24,6 +28,7 @@
     "vue": "latest"
   },
   "dependencies": {
+    "@nuxt/icon": "^2.2.1",
     "@nuxtjs/tailwindcss": "^6.14.0"
   }
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..6f76011
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,22 @@
+import type {Config} from 'tailwindcss'
+
+export default <Partial<Config>>{
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['"Helvetica Neue"', 'Helvetica', 'Arial', 'sans-serif']
+      },
+      colors: {
+        primary: {
+          500: '#222783',
+        },
+        secondary: {
+          500: '#304998'
+        },
+        5: {
+          500: '#F3F4F8'
+        }
+      }
+    }
+  }
+}
-- 
2.39.5


From 75a3912727c27ab41801a68d415e8d5f8c8431b9 Mon Sep 17 00:00:00 2001
From: kevin <kevin@yuno.malio.fr>
Date: Mon, 23 Feb 2026 08:56:27 +0100
Subject: [PATCH 02/13] feat : ajout du masque et de l'etat succes sur le texte

---
 .playground/pages/composant/inputText.vue | 50 ++++++++++------
 app/assets/css/malio.css                  |  1 +
 app/components/malio/InputText.vue        | 73 +++++++++++++++--------
 nuxt.config.ts                            |  1 +
 package-lock.json                         |  9 ++-
 package.json                              |  3 +-
 6 files changed, 93 insertions(+), 44 deletions(-)

diff --git a/.playground/pages/composant/inputText.vue b/.playground/pages/composant/inputText.vue
index aa18af6..56f1032 100644
--- a/.playground/pages/composant/inputText.vue
+++ b/.playground/pages/composant/inputText.vue
@@ -2,7 +2,7 @@
   <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Simple</h2>
-      <MalioInputText v-model="simpleValue" />
+      <MalioInputText v-model="simpleValue"/>
     </div>
 
     <div class="rounded-lg border p-4">
@@ -44,7 +44,7 @@
     </div>
 
     <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Hint et erreur</h2>
+      <h2 class="mb-4 text-xl font-bold">Hint,erreur et succes</h2>
       <MalioInputText
         v-model="emailValue"
         label="Email"
@@ -57,26 +57,14 @@
           error="Le code doit contenir au moins 6 caracteres"
         />
       </div>
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Largeurs</h2>
-      <div class="space-y-4">
+      <div class="mt-4">
         <MalioInputText
-          label="Petit"
-          min-width="w-56"
-        />
-        <MalioInputText
-          label="Moyen"
-          min-width="w-72"
-        />
-        <MalioInputText
-          label="Large"
-          min-width="w-full"
+          model-value="abcabc"
+          label="Code"
+          success="Le code est valide"
         />
       </div>
     </div>
-
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Erreur + icône</h2>
       <MalioInputText
@@ -87,6 +75,15 @@
         error="Le code est invalide"
       />
     </div>
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Succes + icône</h2>
+      <MalioInputText
+        label="Email"
+        success="Adresse valide"
+        icon-name="mdi:alert-circle-outline"
+        icon-size="20"
+      />
+    </div>
 
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Hint + icône</h2>
@@ -120,6 +117,13 @@
         icon-size="20"
       />
     </div>
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec masque</h2>
+      <MalioInputText
+        label="Plaque d'immatriculation"
+        :mask="maskOptions"
+      />
+    </div>
   </div>
 </template>
 
@@ -129,4 +133,14 @@ const nameValue = ref('')
 const searchValue = ref('')
 const emailValue = ref('')
 const cityValue = ref('')
+
+const maskOptions = {
+  mask: '@@-###-@@',
+  tokens: {
+    '@': {
+      pattern: /[A-Za-z]/,
+      transform: (char: string) => char.toUpperCase()
+    }
+  }
+}
 </script>
diff --git a/app/assets/css/malio.css b/app/assets/css/malio.css
index 97ff80e..69ff193 100644
--- a/app/assets/css/malio.css
+++ b/app/assets/css/malio.css
@@ -14,5 +14,6 @@
     --m-bg: 243 244 248;          /* Couleur de fond générale */
 
     --m-error: 155 17 30;         /* rouge pur pour les erreurs */
+    --m-success: 15 149 70;         /* rouge pur pour les erreurs */
   }
 }
diff --git a/app/components/malio/InputText.vue b/app/components/malio/InputText.vue
index 2833115..9683165 100644
--- a/app/components/malio/InputText.vue
+++ b/app/components/malio/InputText.vue
@@ -5,14 +5,17 @@
   >
     <input
       :id="inputId"
+      v-maska="mask"
       :name="name"
       :autocomplete="autocomplete"
       class="floating-input grow-height peer min-h-[40px] w-full border bg-white px-3 py-1 outline-none focus:border-2"
       :class="[
         disabled ? 'cursor-not-allowed bg-m-primary ' : 'cursor-text',
-        error
+        hasError
           ? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
-          : 'border-m-border focus:border-m-primary [&:not(:placeholder-shown)]:border-m-primary',
+          : hasSuccess
+            ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
+            : 'border-m-border focus:border-m-primary [&:not(:placeholder-shown)]:border-m-primary',
         text,
         iconInputPaddingClass,
         inputClass,
@@ -37,9 +40,11 @@
       :for="inputId"
       class="floating-label absolute left-3 top-2 origin-left transition-transform duration-150 peer-focus:translate-y-[-1.15rem] peer-focus:scale-90"
       :class="[
-        error
+        hasError
           ? 'text-m-error peer-valid:text-m-error peer-focus:text-m-error'
-          : 'text-m-muted peer-valid:text-m-primary peer-focus:text-m-primary',
+          : hasSuccess
+            ? 'text-m-success peer-valid:text-m-success peer-focus:text-m-success'
+            : 'text-m-muted peer-valid:text-m-primary peer-focus:text-m-primary',
         labelClass,
         textSize,
       ]"
@@ -52,36 +57,47 @@
       :name="iconName"
       :size="iconSize"
       :class="[
-        error
+        hasError
           ? 'text-m-error'
-          : 'text-m-muted',
+          : hasSuccess
+            ? 'text-m-success'
+            : 'text-m-muted',
         'pointer-events-none absolute right-2 top-1/2 -translate-y-1/2',
         iconColor,
       ]"
     />
 
   </div>
-    <p
-      v-if="hint && !error"
-      :id="`${inputId}-hint`"
-      class="mt-1 text-xs text-m-muted"
-    >
-      {{ hint }}
-    </p>
+  <p
+    v-if="hint && !hasError"
+    :id="`${inputId}-hint`"
+    class="mt-1 text-xs text-m-muted"
+  >
+    {{ hint }}
+  </p>
 
-    <p
-      v-if="error"
-      :id="`${inputId}-error`"
-      class="mt-1 text-xs text-m-error"
-    >
-      {{ error }}
-    </p>
+  <p
+    v-if="hasError"
+    :id="`${inputId}-error`"
+    class="mt-1 text-xs text-m-error"
+  >
+    {{ error }}
+  </p>
+
+  <p v-if="hasSuccess && !hasError"
+    :id="`${inputId}-success`"
+    class="mt-1 text-xs text-m-success"
+  >
+    {{ successMessage }}
+  </p>
 </template>
 
 <script setup lang="ts">
-import { computed, useAttrs } from 'vue'
+import type {MaskInputOptions} from 'maska'
+import {vMaska} from 'maska/vue'
+import {computed, useAttrs} from 'vue'
 
-defineOptions({ inheritAttrs: false })
+defineOptions({inheritAttrs: false})
 
 const props = withDefaults(
   defineProps<{
@@ -103,10 +119,13 @@ const props = withDefaults(
     readonly?: boolean
     hint?: string
     error?: string
+    success?: string
+    succes?: string
     iconName?: string
     rounded?: string
     iconSize?: string | number
     iconColor?: string
+    mask?: string | MaskInputOptions
   }>(),
   {
     id: '',
@@ -129,8 +148,11 @@ const props = withDefaults(
     rounded: 'rounded-md',
     hint: '',
     error: '',
+    success: '',
+    succes: '',
     iconSize: 24,
     iconColor: '',
+    mask: undefined,
   },
 )
 
@@ -138,11 +160,15 @@ const attrs = useAttrs()
 const generatedId = `malio-input-text-${Math.random().toString(36).slice(2, 10)}`
 
 const inputId = computed(() => props.id?.toString() || generatedId)
+const successMessage = computed(() => props.success || props.succes || '')
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!successMessage.value)
 
 const describedBy = computed(() => {
   const ids: string[] = []
   if (props.hint) ids.push(`${inputId.value}-hint`)
-  if (props.error) ids.push(`${inputId.value}-error`)
+  if (hasError.value) ids.push(`${inputId.value}-error`)
+  if (hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-success`)
   return ids.length ? ids.join(' ') : undefined
 })
 
@@ -186,4 +212,3 @@ const iconInputPaddingClass = computed(() => {
   }
 }
 </style>
-
diff --git a/nuxt.config.ts b/nuxt.config.ts
index d16e834..a9302c3 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -24,6 +24,7 @@ export default defineNuxtConfig({
               muted: 'rgb(var(--m-muted) / <alpha-value>)',
               bg: 'rgb(var(--m-bg) / <alpha-value>)',
               error: 'rgb(var(--m-error) / <alpha-value>)',
+              success: 'rgb(var(--m-success) / <alpha-value>)',
             }
           }
         }
diff --git a/package-lock.json b/package-lock.json
index e21bbc0..cc01c95 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
       "version": "0.0.1",
       "dependencies": {
         "@nuxt/icon": "^2.2.1",
-        "@nuxtjs/tailwindcss": "^6.14.0"
+        "@nuxtjs/tailwindcss": "^6.14.0",
+        "maska": "^3.2.0"
       },
       "devDependencies": {
         "@nuxt/eslint": "latest",
@@ -9672,6 +9673,12 @@
         "source-map-js": "^1.2.1"
       }
     },
+    "node_modules/maska": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/maska/-/maska-3.2.0.tgz",
+      "integrity": "sha512-zSmSgs5/q9vMSmrdZT3rKOv9uLznNWR/niuuAdBZDTvB3SMKOX9vhMtDijFyExz+B4UClu2rvksylUh/ea1bLA==",
+      "license": "MIT"
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
diff --git a/package.json b/package.json
index 1465a96..aa8112f 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "@nuxt/icon": "^2.2.1",
-    "@nuxtjs/tailwindcss": "^6.14.0"
+    "@nuxtjs/tailwindcss": "^6.14.0",
+    "maska": "^3.2.0"
   }
 }
-- 
2.39.5


From 9710fd63d7e75a9ee0cb2c12240d34860106050f Mon Sep 17 00:00:00 2001
From: kevin <kevin@yuno.malio.fr>
Date: Mon, 23 Feb 2026 09:01:16 +0100
Subject: [PATCH 03/13] fix : lint

---
 app/components/malio/InputText.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/components/malio/InputText.vue b/app/components/malio/InputText.vue
index 9683165..982d052 100644
--- a/app/components/malio/InputText.vue
+++ b/app/components/malio/InputText.vue
@@ -84,7 +84,8 @@
     {{ error }}
   </p>
 
-  <p v-if="hasSuccess && !hasError"
+  <p
+    v-if="hasSuccess && !hasError"
     :id="`${inputId}-success`"
     class="mt-1 text-xs text-m-success"
   >
-- 
2.39.5


From 1013c8301814b4a496d5d1967ac5003136f856b5 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Mon, 23 Feb 2026 11:01:37 +0100
Subject: [PATCH 04/13] feat : ajout du masque et de l'etat succes sur le texte

---
 .playground/pages/composant/inputText.vue | 95 ++++++++++++++---------
 app/components/malio/InputText.vue        | 10 +--
 2 files changed, 64 insertions(+), 41 deletions(-)

diff --git a/.playground/pages/composant/inputText.vue b/.playground/pages/composant/inputText.vue
index 56f1032..0f501a6 100644
--- a/.playground/pages/composant/inputText.vue
+++ b/.playground/pages/composant/inputText.vue
@@ -28,9 +28,9 @@
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
       <MalioInputText
-        model-value="Valeur verrouillee"
+        model-value="Valeur verrouillée"
         disabled
-        label="Champ desactive"
+        label="Champ désactivé"
       />
     </div>
 
@@ -44,26 +44,14 @@
     </div>
 
     <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Hint,erreur et succes</h2>
+      <h2 class="mb-4 text-xl font-bold">Hint + icône</h2>
       <MalioInputText
-        v-model="emailValue"
-        label="Email"
-        hint="Format attendu: nom@domaine.com"
+        v-model="cityValue"
+        label="Ville"
+        icon-name="mdi:map-marker-outline"
+        icon-size="20"
+        hint="Commencez à taper le nom de la ville"
       />
-      <div class="mt-4">
-        <MalioInputText
-          model-value="abc"
-          label="Code"
-          error="Le code doit contenir au moins 6 caracteres"
-        />
-      </div>
-      <div class="mt-4">
-        <MalioInputText
-          model-value="abcabc"
-          label="Code"
-          success="Le code est valide"
-        />
-      </div>
     </div>
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Erreur + icône</h2>
@@ -76,26 +64,14 @@
       />
     </div>
     <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Succes + icône</h2>
+      <h2 class="mb-4 text-xl font-bold">Succès + icône</h2>
       <MalioInputText
-        label="Email"
-        success="Adresse valide"
+        label="Code"
+        success="Code valide"
         icon-name="mdi:alert-circle-outline"
         icon-size="20"
       />
     </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Hint + icône</h2>
-      <MalioInputText
-        v-model="cityValue"
-        label="Ville"
-        icon-name="mdi:map-marker-outline"
-        icon-size="20"
-        hint="Commencez à taper le nom de la ville"
-      />
-    </div>
-
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Readonly + icône</h2>
       <MalioInputText
@@ -124,6 +100,40 @@
         :mask="maskOptions"
       />
     </div>
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Code dynamique</h2>
+      <MalioInputText
+        v-model="dynamicCodeValue"
+        label="Code d'accès"
+        hint="Format attendu: 6 à 10 caractères alphanumériques"
+        :error="dynamicCodeError"
+        :success="dynamicCodeSuccess"
+        icon-name="mdi:key-outline"
+        icon-size="20"
+      />
+    </div>
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Hint,erreur et succès</h2>
+      <MalioInputText
+        v-model="codeValue"
+        label="Code"
+        hint="Format attendu: 6 à 10 caractères alphanumériques"
+      />
+      <div class="mt-4">
+        <MalioInputText
+          model-value="invalide"
+          label="Code"
+          error="Le code doit contenir au moins 6 caractères"
+        />
+      </div>
+      <div class="mt-4">
+        <MalioInputText
+          model-value="valide"
+          label="Code"
+          success="Le code est valide"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -131,8 +141,21 @@
 const simpleValue = ref('')
 const nameValue = ref('')
 const searchValue = ref('')
-const emailValue = ref('')
+const codeValue = ref('')
 const cityValue = ref('')
+const dynamicCodeValue = ref('')
+
+const codeRegex = /^[A-Z0-9]{6,10}$/
+const normalizedDynamicCode = computed(() => dynamicCodeValue.value.toUpperCase())
+const isDynamicCodeValid = computed(() => codeRegex.test(normalizedDynamicCode.value))
+const dynamicCodeError = computed(() => {
+  if (!dynamicCodeValue.value) return ''
+  return isDynamicCodeValid.value ? '' : 'Code invalide (6 à 10 caractères alphanumériques)'
+})
+const dynamicCodeSuccess = computed(() => {
+  if (!dynamicCodeValue.value) return ''
+  return isDynamicCodeValid.value ? 'Code valide' : ''
+})
 
 const maskOptions = {
   mask: '@@-###-@@',
diff --git a/app/components/malio/InputText.vue b/app/components/malio/InputText.vue
index 982d052..3d0616a 100644
--- a/app/components/malio/InputText.vue
+++ b/app/components/malio/InputText.vue
@@ -69,7 +69,7 @@
 
   </div>
   <p
-    v-if="hint && !hasError"
+    v-if="hint && !hasError && !hasSuccess"
     :id="`${inputId}-hint`"
     class="mt-1 text-xs text-m-muted"
   >
@@ -96,7 +96,7 @@
 <script setup lang="ts">
 import type {MaskInputOptions} from 'maska'
 import {vMaska} from 'maska/vue'
-import {computed, useAttrs} from 'vue'
+import {computed, useAttrs, useId} from 'vue'
 
 defineOptions({inheritAttrs: false})
 
@@ -158,16 +158,16 @@ const props = withDefaults(
 )
 
 const attrs = useAttrs()
-const generatedId = `malio-input-text-${Math.random().toString(36).slice(2, 10)}`
+const generatedId = useId()
 
-const inputId = computed(() => props.id?.toString() || generatedId)
+const inputId = computed(() => props.id?.toString() || `malio-input-text-${generatedId}`)
 const successMessage = computed(() => props.success || props.succes || '')
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!successMessage.value)
 
 const describedBy = computed(() => {
   const ids: string[] = []
-  if (props.hint) ids.push(`${inputId.value}-hint`)
+  if (props.hint && !hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-hint`)
   if (hasError.value) ids.push(`${inputId.value}-error`)
   if (hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-success`)
   return ids.length ? ids.join(' ') : undefined
-- 
2.39.5


From a9627a68757e845ae58b7a24c58c159a0f0df2a8 Mon Sep 17 00:00:00 2001
From: kevin <kevin@yuno.malio.fr>
Date: Mon, 23 Feb 2026 11:14:24 +0100
Subject: [PATCH 05/13] feat CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f230edc..4b688f4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@ Liste des évolutions de la librairie Malio layer UI
 ### Parameters
 
 ### Added
+* [#333] Création d'un composant text
 
 ### Changed
 
-- 
2.39.5


From 480defcd820e27cef0fde993408ff32ae18bb475 Mon Sep 17 00:00:00 2001
From: kevin <kevin@yuno.malio.fr>
Date: Tue, 24 Feb 2026 10:48:46 +0100
Subject: [PATCH 06/13] feat : ajout des tests et retour sur le composant

---
 .playground/pages/composant/inputText.vue |   4 +
 app/components/malio/Input.test.ts        | 318 +++++++++++++++++++++-
 app/components/malio/InputText.vue        |  95 +++----
 pre-commit                                |  26 +-
 4 files changed, 362 insertions(+), 81 deletions(-)

diff --git a/.playground/pages/composant/inputText.vue b/.playground/pages/composant/inputText.vue
index 0f501a6..e1d478f 100644
--- a/.playground/pages/composant/inputText.vue
+++ b/.playground/pages/composant/inputText.vue
@@ -32,6 +32,10 @@
         disabled
         label="Champ désactivé"
       />
+      <MalioInputText
+        disabled
+        label="Champ désactivé"
+      />
     </div>
 
     <div class="rounded-lg border p-4">
diff --git a/app/components/malio/Input.test.ts b/app/components/malio/Input.test.ts
index aefc9fb..c067744 100644
--- a/app/components/malio/Input.test.ts
+++ b/app/components/malio/Input.test.ts
@@ -1,23 +1,319 @@
-import { describe, expect, it } from 'vitest'
-import { mount } from '@vue/test-utils'
-import Input from './Input.vue'
+import {describe, expect, it} from 'vitest'
+import {config, mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import Input from './InputText.vue'
+
+
+type InputProps = {
+  id?: string
+  label?: string
+  name?: string
+  autocomplete?: string
+  modelValue?: string | null
+  textSize?: string
+  labelClass?: string
+  required?: boolean
+  maxLength?: number | string
+  minLength?: number | string
+  disabled?: boolean
+  readonly?: boolean
+  hint?: string
+  error?: string
+  success?: string
+  iconName?: string
+  iconSize?: string | number
+  iconColor?: string
+}
+
+const InputForTest = Input as DefineComponent<InputProps>
+const iconStub = {
+  template: '<span data-test="icon" v-bind="$attrs" />',
+}
+config.global.stubs = {
+  ...(config.global.stubs ?? {}),
+  Icon: iconStub,
+}
 
 describe('MalioInput', () => {
-  it('affiche la valeur initiale', () => {
-    const wrapper = mount(Input, {
-      props: { modelValue: 'hello' },
+  // Props de base: valeur, label, name, id, autocomplete
+  it('renders the initial input value', () => {
+    const wrapper = mount(InputForTest, {
+      props: {modelValue: 'initialValueTest'},
     })
-
-    expect(wrapper.get('input').element.value).toBe('hello')
+    expect(wrapper.get('input').element.value).toBe('initialValueTest')
   })
 
-  it('emet update:modelValue au changement', async () => {
-    const wrapper = mount(Input, {
-      props: { modelValue: '' },
+  it('renders the label text', () => {
+    const wrapper = mount(InputForTest, {
+      props: {label: 'labelTest'},
     })
+    expect(wrapper.get('label').text()).toBe('labelTest')
+  })
 
+  it('applies the name attribute', () => {
+    const wrapper = mount(InputForTest, {
+      props: {name: 'nameTest'},
+    })
+    expect(wrapper.get('input').attributes('name')).toBe('nameTest')
+  })
+
+  it('uses provided id on input and label', () => {
+    const wrapper = mount(InputForTest, {
+      props: {id: 'custom-id', label: 'Label'},
+    })
+    expect(wrapper.get('input').attributes('id')).toBe('custom-id')
+    expect(wrapper.get('label').attributes('for')).toBe('custom-id')
+  })
+
+  it('applies a different size of rounded', () => {
+    const wrapper = mount(InputForTest, {
+      props: {rounded: 'rounded-md'},
+    })
+    expect(wrapper.get('input').classes()).toContain('rounded-md')
+  })
+
+  it('generates an id when missing and reuses it on label', () => {
+    const wrapper = mount(InputForTest, {
+      props: {label: 'Label'},
+    })
+    const inputId = wrapper.get('input').attributes('id')
+    expect(inputId).toBeDefined()
+    expect(inputId?.startsWith('malio-input-text-')).toBe(true)
+    expect(wrapper.get('label').attributes('for')).toBe(inputId)
+  })
+
+  it('applies the autocomplete attribute', () => {
+    const wrapper = mount(InputForTest, {
+      props: {autocomplete: 'autocompleteTest'},
+    })
+    expect(wrapper.get('input').attributes('autocomplete')).toBe('autocompleteTest')
+  })
+
+  // États HTML: required, readonly, disabled
+  it('does not set required when false', () => {
+    const wrapper = mount(InputForTest, {
+      props: {required: false},
+    })
+    expect(wrapper.get('input').attributes('required')).toBeUndefined()
+  })
+
+  it('sets required when true', () => {
+    const wrapper = mount(InputForTest, {
+      props: {required: true},
+    })
+    expect(wrapper.get('input').attributes('required')).toBeDefined()
+  })
+
+  it('does not set readonly when false', () => {
+    const wrapper = mount(InputForTest, {
+      props: {readonly: false},
+    })
+    expect(wrapper.get('input').attributes('readonly')).toBeUndefined()
+  })
+
+  it('sets readonly when true', () => {
+    const wrapper = mount(InputForTest, {
+      props: {readonly: true},
+    })
+    expect(wrapper.get('input').attributes('readonly')).toBeDefined()
+  })
+
+  it('does not set disabled and keeps text cursor when false', () => {
+    const wrapper = mount(InputForTest, {
+      props: {disabled: false},
+    })
+    expect(wrapper.get('input').attributes('disabled')).toBeUndefined()
+    expect(wrapper.get('input').classes()).toContain('cursor-text')
+  })
+
+  it('sets disabled styles when true', () => {
+    const wrapper = mount(InputForTest, {
+      props: {disabled: true},
+    })
+    expect(wrapper.get('input').attributes('disabled')).toBeDefined()
+    expect(wrapper.get('input').classes()).toContain('cursor-not-allowed')
+    expect(wrapper.get('input').classes()).toContain('text-black/60')
+  })
+
+  // Émission d'événements
+  it('emits update:modelValue on input change', async () => {
+    const wrapper = mount(InputForTest, {
+      props: {modelValue: ''},
+    })
     await wrapper.get('input').setValue('new value')
 
     expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new value'])
   })
+
+  // Contraintes et classes de texte
+  it('applies maxLength to input', () => {
+    const wrapper = mount(InputForTest, {
+      props: {maxLength: 25},
+    })
+    expect(wrapper.get('input').attributes('maxlength')).toBe('25')
+  })
+
+  it('applies minLength to input', () => {
+    const wrapper = mount(InputForTest, {
+      props: {minLength: 25},
+    })
+    expect(wrapper.get('input').attributes('minlength')).toBe('25')
+  })
+
+  it('applies textSize class on label', () => {
+    const wrapper = mount(InputForTest, {
+      props: {label: 'Label', textLabel: 'text-sm'},
+    })
+    expect(wrapper.get('label').classes()).toContain('text-sm')
+  })
+
+  // États visuels: erreur et succès
+  it('shows error message without label and icon', () => {
+    const wrapper = mount(InputForTest, {
+      props: {error: 'Error message test'},
+    })
+    expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
+    expect(wrapper.get('input').classes()).toContain('border-m-error')
+    expect(wrapper.get('p').classes()).toContain('text-m-error')
+  })
+
+  it('shows error message with label and without icon', () => {
+    const wrapper = mount(InputForTest, {
+      props: {error: 'Error message test', label: 'Error message'},
+    })
+    expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
+    expect(wrapper.get('input').classes()).toContain('border-m-error')
+    expect(wrapper.get('label').classes()).toContain('text-m-error')
+    expect(wrapper.get('label').classes()).toContain('text-m-error')
+    expect(wrapper.get('label').classes()).toContain('text-m-error')
+    expect(wrapper.get('p').classes()).toContain('text-m-error')
+
+  })
+
+  it('shows error message with label and icon', () => {
+    const wrapper = mount(InputForTest, {
+      props: {error: 'Error message test', label: 'Error message', iconName: 'mdi:key-outline'},
+    })
+    expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
+    expect(wrapper.get('input').classes()).toContain('border-m-error')
+    expect(wrapper.get('label').classes()).toContain('text-m-error')
+    expect(wrapper.get('label').classes()).toContain('text-m-error')
+    expect(wrapper.get('label').classes()).toContain('text-m-error')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-error')
+    expect(wrapper.get('p').classes()).toContain('text-m-error')
+
+  })
+
+  it('shows error message with icon and without label', () => {
+    const wrapper = mount(InputForTest, {
+      props: {error: 'Error message test', iconName: 'mdi:key-outline'},
+    })
+    expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
+    expect(wrapper.get('input').classes()).toContain('border-m-error')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-error')
+  })
+
+  it('shows success message without label and icon', () => {
+    const wrapper = mount(InputForTest, {
+      props: {success: 'Success message test'},
+    })
+    expect(wrapper.get('p.text-m-success').text()).toBe('Success message test')
+    expect(wrapper.get('input').classes()).toContain('border-m-success')
+  })
+
+  it('shows success message with label and without icon', () => {
+    const wrapper = mount(InputForTest, {
+      props: {success: 'Success message test', label: 'Success message'},
+    })
+    expect(wrapper.get('p.text-m-success').text()).toBe('Success message test')
+    expect(wrapper.get('input').classes()).toContain('border-m-success')
+    expect(wrapper.get('label').classes()).toContain('text-m-success')
+    expect(wrapper.get('label').classes()).toContain('text-m-success')
+    expect(wrapper.get('label').classes()).toContain('text-m-success')
+  })
+
+  it('shows success message with label and icon', () => {
+    const wrapper = mount(InputForTest, {
+      props: {success: 'Success message test', label: 'Success message', iconName: 'mdi:key-outline'},
+    })
+    expect(wrapper.get('p.text-m-success').text()).toBe('Success message test')
+    expect(wrapper.get('input').classes()).toContain('border-m-success')
+    expect(wrapper.get('label').classes()).toContain('text-m-success')
+    expect(wrapper.get('label').classes()).toContain('text-m-success')
+    expect(wrapper.get('label').classes()).toContain('text-m-success')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-success')
+  })
+
+  it('shows success message with icon and without label', () => {
+    const wrapper = mount(InputForTest, {
+      props: {success: 'Success message test', iconName: 'mdi:key-outline'},
+    })
+    expect(wrapper.get('p.text-m-success').text()).toBe('Success message test')
+    expect(wrapper.get('input').classes()).toContain('border-m-success')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-success')
+  })
+
+  it('prioritizes error over success when both are provided', () => {
+    const wrapper = mount(InputForTest, {
+      props: {
+        error: 'Error message test',
+        success: 'Success message test',
+      },
+    })
+    expect(wrapper.find('p.text-m-error').exists()).toBe(true)
+    expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
+    expect(wrapper.find('p.text-m-success').exists()).toBe(false)
+    expect(wrapper.get('input').classes()).toContain('border-m-error')
+    expect(wrapper.get('input').classes()).not.toContain('border-m-success')
+  })
+
+  // Aide et classes de label
+  it('shows hint message', () => {
+    const wrapper = mount(InputForTest, {
+      props: {hint: 'Hint message test'},
+    })
+    expect(wrapper.get('p.text-m-muted').text()).toBe('Hint message test')
+  })
+
+  it('applies labelClass on label', () => {
+    const wrapper = mount(InputForTest, {
+      props: {label: 'Label', labelClass: 'text-red-500'},
+    })
+    expect(wrapper.get('label').classes()).toContain('text-red-500')
+  })
+
+  it('does not render label when label prop is missing', () => {
+    const wrapper = mount(InputForTest, {
+      props: {labelClass: 'text-red-500'},
+    })
+
+    expect(wrapper.find('label').exists()).toBe(false)
+  })
+
+  // Icône : rendu et options
+  it('renders icon with default positioning and muted color', () => {
+    const wrapper = mount(InputForTest, {
+      props: {iconName: 'mdi:key-outline'},
+    })
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('pointer-events-none')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('absolute')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-2')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('top-1/2')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('-translate-y-1/2')
+  })
+
+  it('passes icon size prop to icon component', () => {
+    const wrapper = mount(InputForTest, {
+      props: {iconName: 'mdi:key-outline', iconSize: 'text-2xl'},
+    })
+    expect(wrapper.get('[data-test="icon"]').attributes('size')).toBe('text-2xl')
+  })
+
+  it('applies icon color class', () => {
+    const wrapper = mount(InputForTest, {
+      props: {iconName: 'mdi:key-outline', iconColor: 'text-m-primary'},
+    })
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
+  })
 })
diff --git a/app/components/malio/InputText.vue b/app/components/malio/InputText.vue
index 3d0616a..cb9374e 100644
--- a/app/components/malio/InputText.vue
+++ b/app/components/malio/InputText.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative mt-4 w-full"
+    class="relative mt-4 flex h-12 w-full items-center"
     :class="[minWidth, maxWidth]"
   >
     <input
@@ -8,19 +8,19 @@
       v-maska="mask"
       :name="name"
       :autocomplete="autocomplete"
-      class="floating-input grow-height peer min-h-[40px] w-full border bg-white px-3 py-1 outline-none focus:border-2"
+      class="floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none border-m-muted focus:border-2"
       :class="[
-        disabled ? 'cursor-not-allowed bg-m-primary ' : 'cursor-text',
-        hasError
-          ? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
-          : hasSuccess
-            ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
-            : 'border-m-border focus:border-m-primary [&:not(:placeholder-shown)]:border-m-primary',
-        text,
-        iconInputPaddingClass,
-        inputClass,
-        rounded,
-      ]"
+      disabled ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
+      hasError
+        ? 'border-m-error focus:border-m-error focus:pl-[11px] [&:not(:placeholder-shown)]:border-m-error'
+        : hasSuccess
+          ? 'border-m-success focus:border-m-success focus:pl-[11px] [&:not(:placeholder-shown)]:border-m-success'
+          : 'border-m-border focus:border-m-primary focus:pl-[11px]',
+      textInput,
+      iconInputPaddingClass,
+      inputClass,
+      rounded,
+    ]"
       :required="required"
       :maxlength="maxLength"
       :minlength="minLength"
@@ -38,18 +38,19 @@
     <label
       v-if="label"
       :for="inputId"
-      class="floating-label absolute left-3 top-2 origin-left transition-transform duration-150 peer-focus:translate-y-[-1.15rem] peer-focus:scale-90"
+      class="floating-label absolute left-3 top-2 mt-1 origin-left transition-transform duration-150 font-medium"
       :class="[
-        hasError
-          ? 'text-m-error peer-valid:text-m-error peer-focus:text-m-error'
-          : hasSuccess
-            ? 'text-m-success peer-valid:text-m-success peer-focus:text-m-success'
-            : 'text-m-muted peer-valid:text-m-primary peer-focus:text-m-primary',
-        labelClass,
-        textSize,
+    disabled ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
+    hasError
+      ? 'text-m-error'
+      : hasSuccess
+        ? 'text-m-success'
+        : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
+      labelClass,
+      textLabel,
       ]"
     >
-      {{ label }}
+    {{ label }}
     </label>
 
     <Icon
@@ -69,27 +70,18 @@
 
   </div>
   <p
-    v-if="hint && !hasError && !hasSuccess"
-    :id="`${inputId}-hint`"
-    class="mt-1 text-xs text-m-muted"
+    v-if="hint || hasError || hasSuccess"
+    :id="`${inputId}-describedby`"
+    :class="[
+        hasError
+          ? 'text-m-error'
+          : hasSuccess
+            ? 'text-m-success'
+            : 'text-m-muted',
+        'mt-1 text-xs ml-[2px] ',
+      ]"
   >
-    {{ hint }}
-  </p>
-
-  <p
-    v-if="hasError"
-    :id="`${inputId}-error`"
-    class="mt-1 text-xs text-m-error"
-  >
-    {{ error }}
-  </p>
-
-  <p
-    v-if="hasSuccess && !hasError"
-    :id="`${inputId}-success`"
-    class="mt-1 text-xs text-m-success"
-  >
-    {{ successMessage }}
+    {{ hint || error || successMessage }}
   </p>
 </template>
 
@@ -109,8 +101,8 @@ const props = withDefaults(
     modelValue?: string | null | undefined
     minWidth?: string
     maxWidth?: string
-    text?: string
-    textSize?: string
+    textInput?: string
+    textLabel?: string
     inputClass?: string
     labelClass?: string
     required?: boolean
@@ -139,12 +131,12 @@ const props = withDefaults(
     maxWidth: '',
     inputClass: '',
     labelClass: '',
-    text: 'text-lg',
+    textInput: 'text-lg',
     required: false,
     maxLength: undefined,
     minLength: undefined,
     readonly: false,
-    textSize: 'text-sm',
+    textLabel: 'text-sml',
     disabled: false,
     rounded: 'rounded-md',
     hint: '',
@@ -199,17 +191,14 @@ const iconInputPaddingClass = computed(() => {
 }
 
 .grow-height {
-  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
-  transform-origin: center;
+  transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
 }
 
 .grow-height:focus {
-  transform: scaleY(1.2);
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
 }
-
 @media (prefers-reduced-motion: reduce) {
-  .grow-height {
-    transition: none;
-  }
+  .grow-height { transition: none; }
 }
 </style>
diff --git a/pre-commit b/pre-commit
index b616324..cf4eeee 100644
--- a/pre-commit
+++ b/pre-commit
@@ -3,23 +3,14 @@ set -e
 
 echo "######### Pre-commit hook start #############"
 
-if ! command -v npm >/dev/null 2>&1; then
-  if [ -f ".nvmrc" ]; then
-    NVM_VERSION="$(tr -d '\r\n' < .nvmrc)"
-    NVM_VERSION="${NVM_VERSION#v}"
-    NPM_BIN="$HOME/.nvm/versions/node/v$NVM_VERSION/bin"
-    if [ -x "$NPM_BIN/npm" ]; then
-      PATH="$NPM_BIN:$PATH"
-      export PATH
-    fi
-  fi
-fi
-
-if ! command -v npm >/dev/null 2>&1; then
-  if [ -s "$HOME/.nvm/nvm.sh" ]; then
-    # shellcheck disable=SC1090
-    . "$HOME/.nvm/nvm.sh"
-    nvm use >/dev/null 2>&1 || true
+# Prefer the exact Node version from .nvmrc for hooks (IDE + CLI consistency).
+if [ -f ".nvmrc" ]; then
+  NVM_VERSION="$(tr -d '\r\n' < .nvmrc)"
+  NVM_VERSION="${NVM_VERSION#v}"
+  NVM_BIN="$HOME/.nvm/versions/node/v$NVM_VERSION/bin"
+  if [ -x "$NVM_BIN/node" ] && [ -x "$NVM_BIN/npm" ]; then
+    PATH="$NVM_BIN:$PATH"
+    export PATH
   fi
 fi
 
@@ -28,6 +19,7 @@ if ! command -v npm >/dev/null 2>&1; then
   exit 1
 fi
 
+echo "Node $(node -v) / npm $(npm -v)"
 echo "--- make pre-commit start ---"
 make pre-commit
 echo "--- make pre-commit finished ---"
-- 
2.39.5


From a5ced1456ea1a3a54ebba5bc463846156081469b Mon Sep 17 00:00:00 2001
From: Kevin Boudet <kevin@yuno.malio.fr>
Date: Tue, 24 Feb 2026 10:24:07 +0000
Subject: [PATCH 07/13] Actualiser app/assets/css/malio.css

---
 app/assets/css/malio.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/css/malio.css b/app/assets/css/malio.css
index 69ff193..0fa1352 100644
--- a/app/assets/css/malio.css
+++ b/app/assets/css/malio.css
@@ -13,7 +13,7 @@
     --m-muted: 100 116 139;       /* Couleur pour les éléments désactivés ou secondaires */
     --m-bg: 243 244 248;          /* Couleur de fond générale */
 
-    --m-error: 155 17 30;         /* rouge pur pour les erreurs */
-    --m-success: 15 149 70;         /* rouge pur pour les erreurs */
+    --m-error: 155 17 30;         /* rouge pour les erreurs */
+    --m-success: 15 149 70;       /* vert pour les succès  */
   }
 }
-- 
2.39.5


From a8e5f2e05ad8031603dc9c28f16b193f9024d798 Mon Sep 17 00:00:00 2001
From: kevin <kevin@yuno.malio.fr>
Date: Wed, 25 Feb 2026 10:26:39 +0100
Subject: [PATCH 08/13] feat : ajout d'histoire et d'une story

---
 app/story/inputText.story.vue |   56 ++
 histoire.config.ts            |   24 +
 histoire.setup.ts             |    4 +
 makefile                      |    3 +
 package-lock.json             | 1677 ++++++++++++++++++++++++++++++---
 package.json                  |   15 +-
 pre-commit                    |   26 +-
 tailwind.config.ts            |   38 +
 tsconfig.json                 |   20 +-
 9 files changed, 1735 insertions(+), 128 deletions(-)
 create mode 100644 app/story/inputText.story.vue
 create mode 100644 histoire.config.ts
 create mode 100644 histoire.setup.ts
 create mode 100644 tailwind.config.ts

diff --git a/app/story/inputText.story.vue b/app/story/inputText.story.vue
new file mode 100644
index 0000000..b79b23f
--- /dev/null
+++ b/app/story/inputText.story.vue
@@ -0,0 +1,56 @@
+<template>
+  <Story title="Input/Text">
+      <MalioInputText/>
+  </Story>
+</template>
+
+<docs lang="md">
+# Input Text
+
+## Liste des props
+
+Le composant Input Text permet de saisir du texte. Il peut afficher des messages d'erreur, de succès ou d'information.
+On peut lui passer plusieurs props pour personnaliser son comportement et son apparence.
+  - id: Identifiant HTML du champ. Si non fourni, un id est généré automatiquement.
+  - label: Texte du label affiché au-dessus du champ (floating label).
+  - name: Attribut name de l’input.
+  - autocomplete: Attribut autocomplete de l’input.
+  - modelValue: Valeur du champ (utilisée avec v-model) ou si valeur brut mettre des " ".
+  - minWidth: Classe utilitaire pour la largeur minimale du conteneur. Classe Tailwind de largeur (ex: w-64, w-full).
+  - maxWidth: Classe utilitaire pour la largeur maximale du conteneur. Classe Tailwind de largeur maximale.
+  - textInput: Classe(s) de style du texte de l’input. Classe(s) Tailwind de couleur ou de typographie (ex : text-gray-700, text-sm).
+  - textLabel: Classe(s) de style du texte du label. Classe(s) Tailwind de couleur ou de typographie (ex : text-gray-700, text-sm).
+  - required: Rend le champ obligatoire (required).
+  - maxLength: Nombre de caractère maximal autorisé.
+  - minLength: Nombre de caractère minimal autorisé.
+  - disabled: Désactive le champ et applique le style désactivé.
+  - readonly: Met le champ en lecture seule.
+  - hint: Message informatif affiché sous le champ.
+  - error: Message d’erreur affiché sous le champ. Active le style erreur.
+  - success: Message de succès affiché sous le champ. Active le style succès.
+  - iconName: Nom de l’icône affichée à droite dans le champ.
+  - rounded: Classe utilitaire pour le rayon des coins ( rounded- ).
+  - iconSize: Taille de l’icône. (ex : 24, 26, 85 ,99, ... ).
+  - iconColor: Classe(s) personnalisée(s) de couleur pour l’icône ( text- ).
+  - mask: Masque de saisie pour formater la valeur :
+      - \# : chiffre
+      - A : lettre majuscule
+      - a : lettre minuscule
+      - \* : chiffre ou lettre
+
+Événement émis :
+
+- update:modelValue: Émis à chaque saisie pour mettre à jour v-model.
+
+Règles d’affichage des messages :
+
+Priorité d’affichage :
+  1) error
+  2) success
+  3) hint
+
+
+</docs>
+<script setup lang="ts">
+import MalioInputText from '../components/malio/InputText.vue'
+</script>
diff --git a/histoire.config.ts b/histoire.config.ts
new file mode 100644
index 0000000..1b7f862
--- /dev/null
+++ b/histoire.config.ts
@@ -0,0 +1,24 @@
+import { defineConfig } from 'histoire'
+import { HstVue } from '@histoire/plugin-vue'
+import vue from '@vitejs/plugin-vue'
+import tailwindcss from 'tailwindcss'
+import autoprefixer from 'autoprefixer'
+import path from 'path'
+
+export default defineConfig({
+  setupFile: './histoire.setup.ts',
+  vite: {
+    plugins: [vue()],
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './'),
+      },
+    },
+    css: {
+      postcss: {
+        plugins: [tailwindcss(), autoprefixer()],
+      },
+    },
+  },
+  plugins: [HstVue()],
+})
diff --git a/histoire.setup.ts b/histoire.setup.ts
new file mode 100644
index 0000000..c20f9c0
--- /dev/null
+++ b/histoire.setup.ts
@@ -0,0 +1,4 @@
+import './app/assets/css/malio.css'
+
+export function setupVue3() {}
+export function setupVanilla() {}
diff --git a/makefile b/makefile
index b9e3c60..fbbe5c5 100644
--- a/makefile
+++ b/makefile
@@ -8,6 +8,9 @@ install:
 dev:
 	npm run dev
 
+dev-histoire:
+	npm run story:dev
+
 dev-prepare:
 	npm run dev:prepare
 
diff --git a/package-lock.json b/package-lock.json
index b6bae17..4d9267a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,14 +8,18 @@
       "name": "@malio/layer-ui",
       "version": "0.0.1",
       "dependencies": {
-        "@nuxtjs/tailwindcss": "^6.14.0"
+        "@nuxt/icon": "^2.2.1",
+        "@nuxtjs/tailwindcss": "^6.14.0",
+        "maska": "^3.2.0"
       },
       "devDependencies": {
+        "@histoire/plugin-vue": "^1.0.0-beta.1",
         "@nuxt/eslint": "latest",
         "@types/node": "^24.10.13",
-        "@vitejs/plugin-vue": "^6.0.1",
+        "@vitejs/plugin-vue": "^6.0.4",
         "@vue/test-utils": "^2.4.6",
         "eslint": "^10.0.0",
+        "histoire": "^1.0.0-beta.1",
         "jsdom": "^27.0.1",
         "nuxt": "^4.3.1",
         "typescript": "^5.9.3",
@@ -33,6 +37,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@akryum/tinypool": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@akryum/tinypool/-/tinypool-0.3.1.tgz",
+      "integrity": "sha512-nznEC1ZA/m3hQDEnrGQ4c5gkaa9pcaVnw4LFJyzBAaR7E3nfiAPEHS3otnSafpZouVnoKeITl5D+2LsnwlnK8g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -49,7 +63,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.1.0.tgz",
       "integrity": "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "package-manager-detector": "^1.3.0",
@@ -403,7 +416,6 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
       "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
-      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -413,7 +425,6 @@
       "version": "7.28.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
       "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
-      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -447,7 +458,6 @@
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
       "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.29.0"
@@ -549,7 +559,6 @@
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
       "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.27.1",
@@ -618,6 +627,93 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/@codemirror/commands": {
+      "version": "6.10.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.10.2.tgz",
+      "integrity": "sha512-vvX1fsih9HledO1c9zdotZYUZnE4xV0m6i3m25s5DIfXofuprk6cRcLUZvSk3CASUbwjQX21tOGbkY2BH8TpnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.4.0",
+        "@codemirror/view": "^6.27.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "node_modules/@codemirror/lang-json": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.2.tgz",
+      "integrity": "sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/json": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/language": {
+      "version": "6.12.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.12.1.tgz",
+      "integrity": "sha512-Fa6xkSiuGKc8XC8Cn96T+TQHYj4ZZ7RdFmXA3i9xe/3hLHfwPZdM+dqfX0Cp0zQklBKhVD8Yzc8LS45rkqcwpQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.5.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/lint": {
+      "version": "6.9.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.4.tgz",
+      "integrity": "sha512-ABc9vJ8DEmvOWuH26P3i8FpMWPQkduD9Rvba5iwb6O3hxASgclm3T3krGo8NASXkHCidz6b++LWlzWIUfEPSWw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.35.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.4.tgz",
+      "integrity": "sha512-8y7xqG/hpB53l25CIoit9/ngxdfoG+fx+V3SHBrinnhOtLvKHRyAJJuHzkWrR4YXXLX8eXBsejgAAxHUOdW1yw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@marijn/find-cluster-break": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/theme-one-dark": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.3.tgz",
+      "integrity": "sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.39.15",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.39.15.tgz",
+      "integrity": "sha512-aCWjgweIIXLBHh7bY6cACvXuyrZ0xGafjQ2VInjp4RM4gMfscK5uESiNdrH0pE+e1lZr2B4ONGsjchl2KsKZzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.5.0",
+        "crelt": "^1.0.6",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
     "node_modules/@csstools/color-helpers": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.0.2.tgz",
@@ -883,7 +979,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -900,7 +995,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -917,7 +1011,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -934,7 +1027,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -951,7 +1043,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -968,7 +1059,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -985,7 +1075,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1002,7 +1091,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1019,7 +1107,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1036,7 +1123,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1053,7 +1139,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1070,7 +1155,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1087,7 +1171,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1104,7 +1187,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1121,7 +1203,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1138,7 +1219,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1155,7 +1235,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1172,7 +1251,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1189,7 +1267,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1206,7 +1283,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1223,7 +1299,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1240,7 +1315,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1257,7 +1331,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1274,7 +1347,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1291,7 +1363,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1308,7 +1379,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1482,6 +1552,161 @@
         }
       }
     },
+    "node_modules/@histoire/app": {
+      "version": "1.0.0-beta.1",
+      "resolved": "https://registry.npmjs.org/@histoire/app/-/app-1.0.0-beta.1.tgz",
+      "integrity": "sha512-6HoGrFFGIMkY+YGvvKaQYE83Y02IRNqWgqCSTctAMRErhz1gZVdRdl747pjEud8d4YMZ4nUjhJOm6fVXY7yG4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@histoire/controls": "^1.0.0-beta.1",
+        "@histoire/shared": "^1.0.0-beta.1",
+        "@histoire/vendors": "^1.0.0-beta.1",
+        "fuse.js": "^7.0.0",
+        "shiki": "^3.0.0"
+      }
+    },
+    "node_modules/@histoire/controls": {
+      "version": "1.0.0-beta.1",
+      "resolved": "https://registry.npmjs.org/@histoire/controls/-/controls-1.0.0-beta.1.tgz",
+      "integrity": "sha512-j7E7nJSXdIdBiBidjGR817Q1+HTefXsaARlwm68gtCYvGJllEEVpSKIUQJf5hfyvF2dETN9l9JsCigynpNV9PA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/commands": "^6.7.1",
+        "@codemirror/lang-json": "^6.0.1",
+        "@codemirror/language": "^6.10.6",
+        "@codemirror/lint": "^6.8.4",
+        "@codemirror/state": "^6.4.1",
+        "@codemirror/theme-one-dark": "^6.1.2",
+        "@codemirror/view": "^6.35.0",
+        "@histoire/shared": "^1.0.0-beta.1",
+        "@histoire/vendors": "^1.0.0-beta.1"
+      }
+    },
+    "node_modules/@histoire/plugin-vue": {
+      "version": "1.0.0-beta.1",
+      "resolved": "https://registry.npmjs.org/@histoire/plugin-vue/-/plugin-vue-1.0.0-beta.1.tgz",
+      "integrity": "sha512-woIdvVcpaPqAaXqD8MT70YQujoqRwmE4NuW5n01xRfe/PCfnF3XT4kSIJQN4/ACx8JWUyGy2k/OmWL52EDPVuw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@histoire/controls": "^1.0.0-beta.1",
+        "@histoire/shared": "^1.0.0-beta.1",
+        "@histoire/vendors": "^1.0.0-beta.1",
+        "change-case": "^5.4.4",
+        "globby": "^14.0.2",
+        "launch-editor": "^2.9.1",
+        "pathe": "^1.1.2"
+      },
+      "peerDependencies": {
+        "histoire": "^1.0.0-beta.1",
+        "vue": "^3.5.26"
+      }
+    },
+    "node_modules/@histoire/plugin-vue/node_modules/@sindresorhus/merge-streams": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz",
+      "integrity": "sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@histoire/plugin-vue/node_modules/globby": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-14.1.0.tgz",
+      "integrity": "sha512-0Ia46fDOaT7k4og1PDW4YbodWWr3scS2vAr2lTbsplOt2WkKp0vQbkI9wKis/T5LV/dqPjO3bpS/z6GTJB82LA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@sindresorhus/merge-streams": "^2.1.0",
+        "fast-glob": "^3.3.3",
+        "ignore": "^7.0.3",
+        "path-type": "^6.0.0",
+        "slash": "^5.1.0",
+        "unicorn-magic": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@histoire/plugin-vue/node_modules/pathe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@histoire/shared": {
+      "version": "1.0.0-beta.1",
+      "resolved": "https://registry.npmjs.org/@histoire/shared/-/shared-1.0.0-beta.1.tgz",
+      "integrity": "sha512-kODClhelUYWAoBrq1Qfw5t+PIW5NqvtzLp9d55quB43YAGPHyXUinoKskDdKXexc39rg2edcL5yHH0HLKJ7yzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@histoire/vendors": "^1.0.0-beta.1",
+        "@types/fs-extra": "^11.0.4",
+        "@types/markdown-it": "^14.1.2",
+        "chokidar": "^4.0.1",
+        "pathe": "^1.1.2",
+        "picocolors": "^1.1.1"
+      },
+      "peerDependencies": {
+        "vite": "^7.3.0"
+      }
+    },
+    "node_modules/@histoire/shared/node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/@histoire/shared/node_modules/pathe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@histoire/shared/node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/@histoire/vendors": {
+      "version": "1.0.0-beta.1",
+      "resolved": "https://registry.npmjs.org/@histoire/vendors/-/vendors-1.0.0-beta.1.tgz",
+      "integrity": "sha512-ahUCJ0DPsn3waULYfmz9bMNO/bg8PiCc+dDE/VmzaJyV2kvEjxD88rK9nwzI6MRs8Drqo6QqUXIr/4CQEaIouw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1534,6 +1759,47 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@iconify/collections": {
+      "version": "1.0.653",
+      "resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.653.tgz",
+      "integrity": "sha512-XT+u9JpO+o8dB2qrcI2FrNAZlDH0+flUqcOye4HkYnB+nPLjBXjFbJJTfODOCJzonSw/5axd5w/8fyY1g52d/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-3.1.0.tgz",
+      "integrity": "sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw==",
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^1.1.0",
+        "@iconify/types": "^2.0.0",
+        "mlly": "^1.8.0"
+      }
+    },
+    "node_modules/@iconify/vue": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-5.0.0.tgz",
+      "integrity": "sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": ">=3"
+      }
+    },
     "node_modules/@ioredis/commands": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.5.0.tgz",
@@ -1690,7 +1956,7 @@
       "version": "0.3.11",
       "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.11.tgz",
       "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -1747,6 +2013,45 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@lezer/common": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.5.1.tgz",
+      "integrity": "sha512-6YRVG9vBkaY7p1IVxL4s44n5nUnaNnGM2/AckNgYOnxTG2kWh1vR8BMxPseWPjRNpb5VtXnMpeYAEAADoRV1Iw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.3.tgz",
+      "integrity": "sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/json": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.3.tgz",
+      "integrity": "sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/lr": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.8.tgz",
+      "integrity": "sha512-bPWa0Pgx69ylNlMlPvBPryqeLYQjyJjqPx+Aupm5zydLIF3NE+6MMLT8Yi23Bd9cif9VS00aUebn+6fDIGBcDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
     "node_modules/@mapbox/node-pre-gyp": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-2.0.3.tgz",
@@ -1769,6 +2074,13 @@
         "node": ">=18"
       }
     },
+    "node_modules/@marijn/find-cluster-break": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
+      "integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.1.tgz",
@@ -1956,7 +2268,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/@nuxt/devtools-kit/-/devtools-kit-3.2.1.tgz",
       "integrity": "sha512-lwCtTgqH2izU/d+mAmddnPG3mBaia9BsknxYkMFAPbxtph/ex5tPkmQjKACPQU5q4Tl5bTgWgZWo9pa3oz4LMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nuxt/kit": "^4.3.1",
@@ -2297,11 +2608,32 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/@nuxt/icon": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/icon/-/icon-2.2.1.tgz",
+      "integrity": "sha512-GI840yYGuvHI0BGDQ63d6rAxGzG96jQcWrnaWIQKlyQo/7sx9PjXkSHckXUXyX1MCr9zY6U25Td6OatfY6Hklw==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/collections": "^1.0.641",
+        "@iconify/types": "^2.0.0",
+        "@iconify/utils": "^3.1.0",
+        "@iconify/vue": "^5.0.0",
+        "@nuxt/devtools-kit": "^3.1.1",
+        "@nuxt/kit": "^4.2.2",
+        "consola": "^3.4.2",
+        "local-pkg": "^1.1.2",
+        "mlly": "^1.8.0",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "std-env": "^3.10.0",
+        "tinyglobby": "^0.2.15"
+      }
+    },
     "node_modules/@nuxt/kit": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.3.1.tgz",
       "integrity": "sha512-UjBFt72dnpc+83BV3OIbCT0YHLevJtgJCHpxMX0YRKWLDhhbcDdUse87GtsQBrjvOzK7WUNUYLDS/hQLYev5rA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "c12": "^3.3.3",
@@ -4185,7 +4517,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4199,7 +4530,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4213,7 +4543,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4227,7 +4556,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4241,7 +4569,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4255,7 +4582,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4269,7 +4595,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4283,7 +4608,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4297,7 +4621,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4311,7 +4634,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4325,7 +4647,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4339,7 +4660,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4353,7 +4673,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4367,7 +4686,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4381,7 +4699,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4395,7 +4712,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4409,7 +4725,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4423,7 +4738,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4437,7 +4751,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4451,7 +4764,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4465,7 +4777,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4479,7 +4790,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4493,7 +4803,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4507,7 +4816,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4521,13 +4829,86 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ]
     },
+    "node_modules/@shikijs/core": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.22.0.tgz",
+      "integrity": "sha512-iAlTtSDDbJiRpvgL5ugKEATDtHdUVkqgHDm/gbD2ZS9c88mx7G1zSYjjOxp5Qa0eaW0MAQosFRmJSk354PRoQA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "3.22.0",
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "@types/hast": "^3.0.4",
+        "hast-util-to-html": "^9.0.5"
+      }
+    },
+    "node_modules/@shikijs/engine-javascript": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-3.22.0.tgz",
+      "integrity": "sha512-jdKhfgW9CRtj3Tor0L7+yPwdG3CgP7W+ZEqSsojrMzCjD1e0IxIbwUMDDpYlVBlC08TACg4puwFGkZfLS+56Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "3.22.0",
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "oniguruma-to-es": "^4.3.4"
+      }
+    },
+    "node_modules/@shikijs/engine-oniguruma": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-3.22.0.tgz",
+      "integrity": "sha512-DyXsOG0vGtNtl7ygvabHd7Mt5EY8gCNqR9Y7Lpbbd/PbJvgWrqaKzH1JW6H6qFkuUa8aCxoiYVv8/YfFljiQxA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "3.22.0",
+        "@shikijs/vscode-textmate": "^10.0.2"
+      }
+    },
+    "node_modules/@shikijs/langs": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.22.0.tgz",
+      "integrity": "sha512-x/42TfhWmp6H00T6uwVrdTJGKgNdFbrEdhaDwSR5fd5zhQ1Q46bHq9EO61SCEWJR0HY7z2HNDMaBZp8JRmKiIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "3.22.0"
+      }
+    },
+    "node_modules/@shikijs/themes": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.22.0.tgz",
+      "integrity": "sha512-o+tlOKqsr6FE4+mYJG08tfCFDS+3CG20HbldXeVoyP+cYSUxDhrFf3GPjE60U55iOkkjbpY2uC3It/eeja35/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "3.22.0"
+      }
+    },
+    "node_modules/@shikijs/types": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.22.0.tgz",
+      "integrity": "sha512-491iAekgKDBFE67z70Ok5a8KBMsQ2IJwOWw3us/7ffQkIBCyOQfm/aNwVMBUriP02QshIfgHCBSIYAl3u2eWjg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "@types/hast": "^3.0.4"
+      }
+    },
+    "node_modules/@shikijs/vscode-textmate": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz",
+      "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@sindresorhus/base62": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/base62/-/base62-1.0.0.tgz",
@@ -4668,6 +5049,27 @@
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
       "license": "MIT"
     },
+    "node_modules/@types/fs-extra": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-11.0.4.tgz",
+      "integrity": "sha512-yTbItCNreRooED33qjunPthRcSjERP1r4MqCZc7wv0u2sUkzTFp45tgUfS5+r7FrZPdmCCNflLhVSP/o+SemsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/jsonfile": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -4675,11 +5077,56 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/jsonfile": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/@types/jsonfile/-/jsonfile-6.1.4.tgz",
+      "integrity": "sha512-D5qGUYwjvnNNextdU59/+fI+spnwtTFmyQP0h+PfIOSkNfpU6AOICUOkm4i0OnSk+NyjdPJrxCDro0sJsWlRpQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/markdown-it": {
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
+      "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/linkify-it": "^5",
+        "@types/mdurl": "^2"
+      }
+    },
+    "node_modules/@types/mdast": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "24.10.13",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.13.tgz",
       "integrity": "sha512-oH72nZRfDv9lADUBSo104Aq7gPHpQZc4BTx38r9xf9pg5LfP6EzSyH2n7qFmmxRQXh7YlUXODcYsg6PuTDSxGg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~7.16.0"
@@ -4692,6 +5139,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.56.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.56.0.tgz",
@@ -4925,6 +5379,13 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
+      "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/@unhead/vue": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-2.1.4.tgz",
@@ -5540,7 +6001,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.28.tgz",
       "integrity": "sha512-kviccYxTgoE8n6OCw96BNdYlBg2GOWfBuOW4Vqwrt7mSKWKwFVvI8egdTltqRgITGPsTFYtKYfxIG8ptX2PJHQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.29.0",
@@ -5554,7 +6014,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.28.tgz",
       "integrity": "sha512-/1ZepxAb159jKR1btkefDP+J2xuWL5V3WtleRmxaT+K2Aqiek/Ab/+Ebrw2pPj0sdHO8ViAyyJWfhXXOP/+LQA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-core": "3.5.28",
@@ -5565,7 +6024,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.28.tgz",
       "integrity": "sha512-6TnKMiNkd6u6VeVDhZn/07KhEZuBSn43Wd2No5zaP5s3xm8IqFTHBj84HJah4UepSUJTro5SoqqlOY22FKY96g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.29.0",
@@ -5583,7 +6041,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.28.tgz",
       "integrity": "sha512-JCq//9w1qmC6UGLWJX7RXzrGpKkroubey/ZFqTpvEIDJEKGgntuDMqkuWiZvzTzTA5h2qZvFBFHY7fAAa9475g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-dom": "3.5.28",
@@ -5671,7 +6128,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.28.tgz",
       "integrity": "sha512-gr5hEsxvn+RNyu9/9o1WtdYdwDjg5FgjUSBEkZWqgTKlo/fvwZ2+8W6AfKsc9YN2k/+iHYdS9vZYAhpi10kNaw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/shared": "3.5.28"
@@ -5681,7 +6137,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.28.tgz",
       "integrity": "sha512-POVHTdbgnrBBIpnbYU4y7pOMNlPn2QVxVzkvEA2pEgvzbelQq4ZOUxbp2oiyo+BOtiYlm8Q44wShHJoBvDPAjQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/reactivity": "3.5.28",
@@ -5692,7 +6147,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.28.tgz",
       "integrity": "sha512-4SXxSF8SXYMuhAIkT+eBRqOkWEfPu6nhccrzrkioA6l0boiq7sp18HCOov9qWJA5HML61kW8p/cB4MmBiG9dSA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/reactivity": "3.5.28",
@@ -5705,7 +6159,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.28.tgz",
       "integrity": "sha512-pf+5ECKGj8fX95bNincbzJ6yp6nyzuLDhYZCeFxUNp8EBrQpPpQaLX3nNCp49+UbgbPun3CeVE+5CXVV1Xydfg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-ssr": "3.5.28",
@@ -5719,7 +6172,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.28.tgz",
       "integrity": "sha512-cfWa1fCGBxrvaHRhvV3Is0MgmrbSCxYTXCSCau2I0a1Xw1N1pHAvkWCiXPRAqjvToILvguNyEwjevUqAuBQWvQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@vue/test-utils": {
@@ -6352,7 +6804,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/builtin-modules": {
@@ -6553,6 +7005,17 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chai": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/chai/-/chai-5.3.3.tgz",
@@ -6605,6 +7068,28 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/check-error": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.3.tgz",
@@ -6765,6 +7250,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/comment-parser": {
       "version": "1.4.5",
       "resolved": "https://registry.npmjs.org/comment-parser/-/comment-parser-1.4.5.tgz",
@@ -6849,6 +7345,39 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/connect": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/connect/-/connect-3.7.0.tgz",
+      "integrity": "sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "2.6.9",
+        "finalhandler": "1.1.2",
+        "parseurl": "~1.3.3",
+        "utils-merge": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/connect/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/connect/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/consola": {
       "version": "3.4.2",
       "resolved": "https://registry.npmjs.org/consola/-/consola-3.4.2.tgz",
@@ -6979,6 +7508,13 @@
         "node": ">= 14"
       }
     },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/croner": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/croner/-/croner-9.1.0.tgz",
@@ -6993,7 +7529,6 @@
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
@@ -7227,7 +7762,6 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/data-urls": {
@@ -7454,6 +7988,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/destr": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/destr/-/destr-2.0.5.tgz",
@@ -7487,6 +8031,27 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/diacritics": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/diacritics/-/diacritics-1.3.0.tgz",
+      "integrity": "sha512-wlwEkqcsaxvPJML+rDh/2iS824jbREk6DUMUKkEaSlxdYHeS43cClJtsWglvw2RfeXGm6ohKDqsXteJ5sP5enA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -7714,7 +8279,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
       "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -7780,7 +8344,6 @@
       "version": "0.27.3",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.3.tgz",
       "integrity": "sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -8314,6 +8877,20 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/esquery": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
@@ -8354,7 +8931,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/esutils": {
@@ -8411,7 +8987,6 @@
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
       "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "cross-spawn": "^7.0.3",
@@ -8447,6 +9022,19 @@
       "integrity": "sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==",
       "license": "MIT"
     },
+    "node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -8571,6 +9159,75 @@
         "node": ">=8"
       }
     },
+    "node_modules/finalhandler": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "statuses": "~1.5.0",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/finalhandler/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/finalhandler/node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/finalhandler/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/finalhandler/node_modules/on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/finalhandler/node_modules/statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/find-up": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-8.0.0.tgz",
@@ -8799,7 +9456,6 @@
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
       "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=16"
@@ -8988,6 +9644,46 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "license": "ISC"
     },
+    "node_modules/gray-matter": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz",
+      "integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-yaml": "^3.13.1",
+        "kind-of": "^6.0.2",
+        "section-matter": "^1.0.0",
+        "strip-bom-string": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/gray-matter/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/gray-matter/node_modules/js-yaml": {
+      "version": "3.14.2",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.2.tgz",
+      "integrity": "sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/gzip-size": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-7.0.0.tgz",
@@ -9075,6 +9771,221 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-to-html": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz",
+      "integrity": "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "html-void-elements": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "stringify-entities": "^4.0.0",
+        "zwitch": "^2.0.4"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/histoire": {
+      "version": "1.0.0-beta.1",
+      "resolved": "https://registry.npmjs.org/histoire/-/histoire-1.0.0-beta.1.tgz",
+      "integrity": "sha512-hzhFiqlL9Ko1B2APCamGIchM3Bjng5+CTX7kLL1q/NB2Lp4Uqpe4ZZicc7RU4CTCe4Vj7Q/Eb3UE/IacL1Ta5g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@akryum/tinypool": "^0.3.1",
+        "@histoire/app": "^1.0.0-beta.1",
+        "@histoire/controls": "^1.0.0-beta.1",
+        "@histoire/shared": "^1.0.0-beta.1",
+        "@histoire/vendors": "^1.0.0-beta.1",
+        "@types/markdown-it": "^14.1.2",
+        "birpc": "^0.2.19",
+        "change-case": "^5.4.4",
+        "chokidar": "^4.0.1",
+        "connect": "^3.7.0",
+        "defu": "^6.1.4",
+        "diacritics": "^1.3.0",
+        "fs-extra": "^11.2.0",
+        "globby": "^14.0.2",
+        "gray-matter": "^4.0.3",
+        "jiti": "^2.4.1",
+        "jsdom": "^27.4.0",
+        "markdown-it": "^14.1.0",
+        "markdown-it-anchor": "^9.2.0",
+        "markdown-it-attrs": "^4.3.0",
+        "markdown-it-emoji": "^3.0.0",
+        "micromatch": "^4.0.8",
+        "mrmime": "^2.0.0",
+        "pathe": "^1.1.2",
+        "picocolors": "^1.1.1",
+        "sade": "^1.8.1",
+        "shiki": "^3.0.0",
+        "sirv": "^3.0.0",
+        "vite-node": "3.2.4"
+      },
+      "bin": {
+        "histoire": "bin.mjs"
+      },
+      "peerDependencies": {
+        "vite": "^7.3.0"
+      }
+    },
+    "node_modules/histoire/node_modules/@sindresorhus/merge-streams": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz",
+      "integrity": "sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/histoire/node_modules/birpc": {
+      "version": "0.2.19",
+      "resolved": "https://registry.npmjs.org/birpc/-/birpc-0.2.19.tgz",
+      "integrity": "sha512-5WeXXAvTmitV1RqJFppT5QtUiz2p1mRSYU000Jkft5ZUCLJIk4uQriYNO50HknxKwM6jd8utNc66K1qGIwwWBQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/histoire/node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/histoire/node_modules/es-module-lexer": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
+      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/histoire/node_modules/fs-extra": {
+      "version": "11.3.3",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.3.tgz",
+      "integrity": "sha512-VWSRii4t0AFm6ixFFmLLx1t7wS1gh+ckoa84aOeapGum0h+EZd1EhEumSB+ZdDLnEPuucsVB9oB7cxJHap6Afg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/histoire/node_modules/globby": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-14.1.0.tgz",
+      "integrity": "sha512-0Ia46fDOaT7k4og1PDW4YbodWWr3scS2vAr2lTbsplOt2WkKp0vQbkI9wKis/T5LV/dqPjO3bpS/z6GTJB82LA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@sindresorhus/merge-streams": "^2.1.0",
+        "fast-glob": "^3.3.3",
+        "ignore": "^7.0.3",
+        "path-type": "^6.0.0",
+        "slash": "^5.1.0",
+        "unicorn-magic": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/histoire/node_modules/pathe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/histoire/node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/histoire/node_modules/vite-node": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-3.2.4.tgz",
+      "integrity": "sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cac": "^6.7.14",
+        "debug": "^4.4.1",
+        "es-module-lexer": "^1.7.0",
+        "pathe": "^2.0.3",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
+      },
+      "bin": {
+        "vite-node": "vite-node.mjs"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/histoire/node_modules/vite-node/node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
@@ -9112,6 +10023,17 @@
       ],
       "license": "MIT"
     },
+    "node_modules/html-void-elements": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+      "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/http-assert": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/http-assert/-/http-assert-1.5.0.tgz",
@@ -9229,7 +10151,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
       "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
-      "dev": true,
       "license": "Apache-2.0",
       "engines": {
         "node": ">=16.17.0"
@@ -9458,6 +10379,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -9611,7 +10542,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
       "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
@@ -9676,7 +10606,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/jackspeak": {
@@ -10017,6 +10946,16 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/kleur": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
@@ -10306,6 +11245,16 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "license": "MIT"
     },
+    "node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
     "node_modules/listhen": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/listhen/-/listhen-1.9.0.tgz",
@@ -10358,7 +11307,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.2.tgz",
       "integrity": "sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "mlly": "^1.7.4",
@@ -10519,6 +11467,74 @@
         "source-map-js": "^1.2.1"
       }
     },
+    "node_modules/markdown-it": {
+      "version": "14.1.1",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.1.tgz",
+      "integrity": "sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
+    "node_modules/markdown-it-anchor": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-9.2.0.tgz",
+      "integrity": "sha512-sa2ErMQ6kKOA4l31gLGYliFQrMKkqSO0ZJgGhDHKijPf0pNFM9vghjAh3gn26pS4JDRs7Iwa9S36gxm3vgZTzg==",
+      "dev": true,
+      "license": "Unlicense",
+      "peerDependencies": {
+        "@types/markdown-it": "*",
+        "markdown-it": "*"
+      }
+    },
+    "node_modules/markdown-it-attrs": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/markdown-it-attrs/-/markdown-it-attrs-4.3.1.tgz",
+      "integrity": "sha512-/ko6cba+H6gdZ0DOw7BbNMZtfuJTRp9g/IrGIuz8lYc/EfnmWRpaR3CFPnNbVz0LDvF8Gf1hFGPqrQqq7De0rg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "peerDependencies": {
+        "markdown-it": ">= 9.0.0"
+      }
+    },
+    "node_modules/markdown-it-emoji": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-emoji/-/markdown-it-emoji-3.0.0.tgz",
+      "integrity": "sha512-+rUD93bXHubA4arpEZO3q80so0qgoFJEKRkRbjKX8RTdca89v2kfyF+xR3i2sQTwql9tpPZPOQN5B+PunspXRg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/markdown-it/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/maska": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/maska/-/maska-3.2.0.tgz",
+      "integrity": "sha512-zSmSgs5/q9vMSmrdZT3rKOv9uLznNWR/niuuAdBZDTvB3SMKOX9vhMtDijFyExz+B4UClu2rvksylUh/ea1bLA==",
+      "license": "MIT"
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -10528,6 +11544,28 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.1.tgz",
+      "integrity": "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.12.2",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz",
@@ -10535,6 +11573,13 @@
       "dev": true,
       "license": "CC0-1.0"
     },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -10548,7 +11593,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
       "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/merge2": {
@@ -10569,6 +11613,100 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/micromark-util-character": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz",
+      "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-encode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz",
+      "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz",
+      "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-symbol": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz",
+      "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-types": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz",
+      "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -10641,7 +11779,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
       "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -10732,6 +11869,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/mri": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+      "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/mrmime": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
@@ -11045,7 +12192,6 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
       "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "path-key": "^4.0.0"
@@ -11061,7 +12207,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
       "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -11296,7 +12441,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
       "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "mimic-fn": "^4.0.0"
@@ -11308,6 +12452,25 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/oniguruma-parser": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/oniguruma-parser/-/oniguruma-parser-0.12.1.tgz",
+      "integrity": "sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/oniguruma-to-es": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-4.3.4.tgz",
+      "integrity": "sha512-3VhUGN3w2eYxnTzHn+ikMI+fp/96KoRSVK9/kMTcFqj1NRDh2IhQCKvYxDnWePKRXY/AqH+Fuiyb7VHSzBjHfA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "oniguruma-parser": "^0.12.1",
+        "regex": "^6.0.1",
+        "regex-recursion": "^6.0.2"
+      }
+    },
     "node_modules/only": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/only/-/only-0.0.2.tgz",
@@ -11542,7 +12705,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.6.0.tgz",
       "integrity": "sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/parse-imports-exports": {
@@ -11627,7 +12789,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -11672,6 +12833,19 @@
       "integrity": "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==",
       "license": "MIT"
     },
+    "node_modules/path-type": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-6.0.0.tgz",
+      "integrity": "sha512-Vj7sf++t5pBD637NSfkxpHSMfWaeig5+DKWLhcqIYx6mWQz5hdJTGDVMQiJcw1ZYkhs7AazKDGpRVji1LJCZUQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/pathe": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
@@ -12470,6 +13644,17 @@
         "node": ">= 6"
       }
     },
+    "node_modules/property-information": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz",
+      "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -12487,11 +13672,20 @@
         "node": ">=6"
       }
     },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/quansync": {
       "version": "0.2.11",
       "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
       "integrity": "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -12658,6 +13852,33 @@
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
     },
+    "node_modules/regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/regex/-/regex-6.1.0.tgz",
+      "integrity": "sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "regex-utilities": "^2.3.0"
+      }
+    },
+    "node_modules/regex-recursion": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/regex-recursion/-/regex-recursion-6.0.2.tgz",
+      "integrity": "sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "regex-utilities": "^2.3.0"
+      }
+    },
+    "node_modules/regex-utilities": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/regex-utilities/-/regex-utilities-2.3.0.tgz",
+      "integrity": "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/regexp-ast-analysis": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/regexp-ast-analysis/-/regexp-ast-analysis-0.7.1.tgz",
@@ -12906,7 +14127,6 @@
       "version": "4.57.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
       "integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.8"
@@ -13021,6 +14241,19 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/sade": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
+      "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mri": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -13109,6 +14342,20 @@
       "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
       "license": "MIT"
     },
+    "node_modules/section-matter": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
+      "integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/semver": {
       "version": "7.7.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
@@ -13208,7 +14455,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
@@ -13221,7 +14467,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -13240,6 +14485,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/shiki": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-3.22.0.tgz",
+      "integrity": "sha512-LBnhsoYEe0Eou4e1VgJACes+O6S6QC0w71fCSp5Oya79inkwkm15gQ1UF6VtQ8j/taMDh79hAB49WUk8ALQW3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/core": "3.22.0",
+        "@shikijs/engine-javascript": "3.22.0",
+        "@shikijs/engine-oniguruma": "3.22.0",
+        "@shikijs/langs": "3.22.0",
+        "@shikijs/themes": "3.22.0",
+        "@shikijs/types": "3.22.0",
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "@types/hast": "^3.0.4"
+      }
+    },
     "node_modules/siginfo": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
@@ -13251,7 +14513,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
       "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">=14"
@@ -13344,7 +14605,7 @@
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "buffer-from": "^1.0.0",
@@ -13355,12 +14616,23 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/spdx-exceptions": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz",
@@ -13396,6 +14668,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
     "node_modules/srvx": {
       "version": "0.11.7",
       "resolved": "https://registry.npmjs.org/srvx/-/srvx-0.11.7.tgz",
@@ -13446,7 +14725,6 @@
       "version": "3.10.0",
       "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz",
       "integrity": "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/streamx": {
@@ -13501,6 +14779,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -13527,11 +14820,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-bom-string": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
+      "integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/strip-final-newline": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
       "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -13580,6 +14882,13 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/style-mod": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.3.tgz",
+      "integrity": "sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/stylehacks": {
       "version": "7.0.7",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-7.0.7.tgz",
@@ -13975,7 +15284,7 @@
       "version": "5.46.0",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.46.0.tgz",
       "integrity": "sha512-jTwoImyr/QbOWFFso3YoU3ik0jBBDJ6JTOQiy/J2YxVJdZCc+5u7skhNwiOR3FQIygFqVUPHl7qbbxtjW2K3Qg==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
@@ -13994,7 +15303,7 @@
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/text-decoder": {
@@ -14185,6 +15494,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.4.0.tgz",
@@ -14295,7 +15615,7 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -14305,6 +15625,13 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/ufo": {
       "version": "1.6.3",
       "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.3.tgz",
@@ -14364,7 +15691,7 @@
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
       "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/unenv": {
@@ -14492,6 +15819,79 @@
         "url": "https://github.com/sponsors/sxzz"
       }
     },
+    "node_modules/unist-util-is": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
+      "integrity": "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.1.0.tgz",
+      "integrity": "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.2.tgz",
+      "integrity": "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/universalify": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
@@ -14501,6 +15901,16 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/unplugin": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-3.0.0.tgz",
@@ -14849,6 +16259,16 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "license": "MIT"
     },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -14858,11 +16278,40 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vfile": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+      "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
+      "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/vite": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.27.0",
@@ -15354,7 +16803,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.28.tgz",
       "integrity": "sha512-BRdrNfeoccSoIZeIhyPBfvWSLFP4q8J3u8Ju8Ug5vu3LdD+yTM13Sg4sKtljxozbnuMu1NB1X5HBHRYUzFocKg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-dom": "3.5.28",
@@ -15449,6 +16897,13 @@
         "vue": "^3.5.0"
       }
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
@@ -15510,7 +16965,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
@@ -15766,6 +17220,17 @@
       "engines": {
         "node": ">= 14"
       }
+    },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 005d5b3..b41f9ad 100644
--- a/package.json
+++ b/package.json
@@ -11,17 +11,22 @@
     "generate": "nuxt generate .playground",
     "preview": "nuxt preview .playground",
     "lint": "eslint .",
-    "test": "vitest run"
+    "test": "vitest run",
+    "story:dev": "histoire dev",
+    "story:build": "histoire build",
+    "story:preview": "histoire preview"
   },
   "peerDependencies": {
     "nuxt": "^4.0.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.1",
-    "@vue/test-utils": "^2.4.6",
+    "@histoire/plugin-vue": "^1.0.0-beta.1",
     "@nuxt/eslint": "latest",
     "@types/node": "^24.10.13",
+    "@vitejs/plugin-vue": "^6.0.4",
+    "@vue/test-utils": "^2.4.6",
     "eslint": "^10.0.0",
+    "histoire": "^1.0.0-beta.1",
     "jsdom": "^27.0.1",
     "nuxt": "^4.3.1",
     "typescript": "^5.9.3",
@@ -29,6 +34,8 @@
     "vue": "latest"
   },
   "dependencies": {
-    "@nuxtjs/tailwindcss": "^6.14.0"
+    "@nuxt/icon": "^2.2.1",
+    "@nuxtjs/tailwindcss": "^6.14.0",
+    "maska": "^3.2.0"
   }
 }
diff --git a/pre-commit b/pre-commit
index b616324..cf4eeee 100644
--- a/pre-commit
+++ b/pre-commit
@@ -3,23 +3,14 @@ set -e
 
 echo "######### Pre-commit hook start #############"
 
-if ! command -v npm >/dev/null 2>&1; then
-  if [ -f ".nvmrc" ]; then
-    NVM_VERSION="$(tr -d '\r\n' < .nvmrc)"
-    NVM_VERSION="${NVM_VERSION#v}"
-    NPM_BIN="$HOME/.nvm/versions/node/v$NVM_VERSION/bin"
-    if [ -x "$NPM_BIN/npm" ]; then
-      PATH="$NPM_BIN:$PATH"
-      export PATH
-    fi
-  fi
-fi
-
-if ! command -v npm >/dev/null 2>&1; then
-  if [ -s "$HOME/.nvm/nvm.sh" ]; then
-    # shellcheck disable=SC1090
-    . "$HOME/.nvm/nvm.sh"
-    nvm use >/dev/null 2>&1 || true
+# Prefer the exact Node version from .nvmrc for hooks (IDE + CLI consistency).
+if [ -f ".nvmrc" ]; then
+  NVM_VERSION="$(tr -d '\r\n' < .nvmrc)"
+  NVM_VERSION="${NVM_VERSION#v}"
+  NVM_BIN="$HOME/.nvm/versions/node/v$NVM_VERSION/bin"
+  if [ -x "$NVM_BIN/node" ] && [ -x "$NVM_BIN/npm" ]; then
+    PATH="$NVM_BIN:$PATH"
+    export PATH
   fi
 fi
 
@@ -28,6 +19,7 @@ if ! command -v npm >/dev/null 2>&1; then
   exit 1
 fi
 
+echo "Node $(node -v) / npm $(npm -v)"
 echo "--- make pre-commit start ---"
 make pre-commit
 echo "--- make pre-commit finished ---"
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..29d8599
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,38 @@
+import type { Config } from 'tailwindcss'
+
+export default {
+  content: [
+    './app/**/*.{vue,js,ts}',
+    './**/*.story.{vue,js,ts}',
+    './histoire.setup.ts',
+    './histoire.config.ts',
+  ],
+  safelist: [
+    {
+      pattern: /(sm:|md:|lg:|xl:|2xl:)?(text|rounded|w)-.+/,
+    },
+  ],
+  theme: {
+    extend: {
+      borderRadius: {
+        malio: 'var(--m-radius)',
+      },
+      colors: {
+        m: {
+          primary: 'rgb(var(--m-primary) / <alpha-value>)',
+          secondary: 'rgb(var(--m-secondary) / <alpha-value>)',
+          tertiary: 'rgb(var(--m-tertiary) / <alpha-value>)',
+          border: 'rgb(var(--m-border) / <alpha-value>)',
+          text: 'rgb(var(--m-text) / <alpha-value>)',
+          muted: 'rgb(var(--m-muted) / <alpha-value>)',
+          bg: 'rgb(var(--m-bg) / <alpha-value>)',
+          error: 'rgb(var(--m-error) / <alpha-value>)',
+          success: 'rgb(var(--m-success) / <alpha-value>)',
+        },
+      },
+      fontFamily: {
+        sans: ['"Helvetica Neue"', 'Helvetica', 'Arial', 'sans-serif'],
+      },
+    },
+  },
+} satisfies Partial<Config>
diff --git a/tsconfig.json b/tsconfig.json
index 1d746c1..7624e84 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,3 +1,21 @@
 {
-  "extends": "./.playground/.nuxt/tsconfig.json"
+  "extends": "./.playground/.nuxt/tsconfig.json",
+  "compilerOptions": {
+    "target": "es2017",
+    "module": "esnext",
+    "lib": [
+      "esnext"
+    ],
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "resolveJsonModule": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "env.d.ts",
+    "src/**/*",
+    "src/**/*.vue"
+  ]
 }
-- 
2.39.5


From 67436a0025f36dd373d88ab4dd948ef912459d7d Mon Sep 17 00:00:00 2001
From: kevin <kevin@yuno.malio.fr>
Date: Wed, 25 Feb 2026 10:36:50 +0100
Subject: [PATCH 09/13] fix : correction du composant

---
 app/components/malio/Input.test.ts |  4 +--
 app/components/malio/InputText.vue | 46 +++++++++++++-----------------
 2 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/app/components/malio/Input.test.ts b/app/components/malio/Input.test.ts
index c067744..ccb7ba1 100644
--- a/app/components/malio/Input.test.ts
+++ b/app/components/malio/Input.test.ts
@@ -305,9 +305,9 @@ describe('MalioInput', () => {
 
   it('passes icon size prop to icon component', () => {
     const wrapper = mount(InputForTest, {
-      props: {iconName: 'mdi:key-outline', iconSize: 'text-2xl'},
+      props: {iconName: 'mdi:key-outline', iconSize: '24'},
     })
-    expect(wrapper.get('[data-test="icon"]').attributes('size')).toBe('text-2xl')
+    expect(wrapper.get('[data-test="icon"]').attributes('height')).toBe('24')
   })
 
   it('applies icon color class', () => {
diff --git a/app/components/malio/InputText.vue b/app/components/malio/InputText.vue
index cb9374e..c6e4da2 100644
--- a/app/components/malio/InputText.vue
+++ b/app/components/malio/InputText.vue
@@ -8,17 +8,16 @@
       v-maska="mask"
       :name="name"
       :autocomplete="autocomplete"
-      class="floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none border-m-muted focus:border-2"
+      class="floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none  focus:border-2"
       :class="[
       disabled ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
       hasError
         ? 'border-m-error focus:border-m-error focus:pl-[11px] [&:not(:placeholder-shown)]:border-m-error'
         : hasSuccess
           ? 'border-m-success focus:border-m-success focus:pl-[11px] [&:not(:placeholder-shown)]:border-m-success'
-          : 'border-m-border focus:border-m-primary focus:pl-[11px]',
+          : 'border-m-muted focus:border-m-primary focus:pl-[11px]',
       textInput,
       iconInputPaddingClass,
-      inputClass,
       rounded,
     ]"
       :required="required"
@@ -50,22 +49,20 @@
       textLabel,
       ]"
     >
-    {{ label }}
+      {{ label }}
     </label>
 
-    <Icon
+    <IconifyIcon
       v-if="iconName"
-      :name="iconName"
-      :size="iconSize"
+      :icon="iconName"
+      :width="iconSize"
+      :height="iconSize"
+      data-test="icon"
       :class="[
-        hasError
-          ? 'text-m-error'
-          : hasSuccess
-            ? 'text-m-success'
-            : 'text-m-muted',
-        'pointer-events-none absolute right-2 top-1/2 -translate-y-1/2',
-        iconColor,
-      ]"
+      hasError ? 'text-m-error' : hasSuccess ? 'text-m-success' : '',
+      'pointer-events-none absolute right-2 top-1/2 -translate-y-1/2',
+      iconColor,
+    ]"
     />
 
   </div>
@@ -81,16 +78,18 @@
         'mt-1 text-xs ml-[2px] ',
       ]"
   >
-    {{ hint || error || successMessage }}
+    {{ hint || error || success }}
   </p>
 </template>
 
 <script setup lang="ts">
+
 import type {MaskInputOptions} from 'maska'
 import {vMaska} from 'maska/vue'
 import {computed, useAttrs, useId} from 'vue'
+import { Icon as IconifyIcon } from '@iconify/vue'
 
-defineOptions({inheritAttrs: false})
+defineOptions({name: 'MalioInputText', inheritAttrs: false})
 
 const props = withDefaults(
   defineProps<{
@@ -103,7 +102,6 @@ const props = withDefaults(
     maxWidth?: string
     textInput?: string
     textLabel?: string
-    inputClass?: string
     labelClass?: string
     required?: boolean
     maxLength?: number | string
@@ -113,7 +111,6 @@ const props = withDefaults(
     hint?: string
     error?: string
     success?: string
-    succes?: string
     iconName?: string
     rounded?: string
     iconSize?: string | number
@@ -129,22 +126,20 @@ const props = withDefaults(
     label: '',
     minWidth: 'w-96',
     maxWidth: '',
-    inputClass: '',
-    labelClass: '',
     textInput: 'text-lg',
+    labelClass: '',
     required: false,
     maxLength: undefined,
     minLength: undefined,
     readonly: false,
-    textLabel: 'text-sml',
+    textLabel: 'text-sm',
     disabled: false,
     rounded: 'rounded-md',
     hint: '',
     error: '',
     success: '',
-    succes: '',
     iconSize: 24,
-    iconColor: '',
+    iconColor: 'text-m-muted',
     mask: undefined,
   },
 )
@@ -153,9 +148,8 @@ const attrs = useAttrs()
 const generatedId = useId()
 
 const inputId = computed(() => props.id?.toString() || `malio-input-text-${generatedId}`)
-const successMessage = computed(() => props.success || props.succes || '')
 const hasError = computed(() => !!props.error)
-const hasSuccess = computed(() => !!successMessage.value)
+const hasSuccess = computed(() => !!props.success)
 
 const describedBy = computed(() => {
   const ids: string[] = []
-- 
2.39.5


From 0a3cf505766875a58474271a0454d9d801cdefaa Mon Sep 17 00:00:00 2001
From: kevin <kevin@yuno.malio.fr>
Date: Wed, 25 Feb 2026 11:34:19 +0100
Subject: [PATCH 10/13] Merge branch 'feat/333-creation-text-input' into
 feat/335-ajout-package-histoire

---
 app/components/malio/Input.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/malio/Input.test.ts b/app/components/malio/Input.test.ts
index ccb7ba1..cea94e3 100644
--- a/app/components/malio/Input.test.ts
+++ b/app/components/malio/Input.test.ts
@@ -277,7 +277,7 @@ describe('MalioInput', () => {
 
   it('applies labelClass on label', () => {
     const wrapper = mount(InputForTest, {
-      props: {label: 'Label', labelClass: 'text-red-500'},
+      props: {label: 'Label', textLabel: 'text-red-500'},
     })
     expect(wrapper.get('label').classes()).toContain('text-red-500')
   })
-- 
2.39.5


From 594708e71cbb1bd5fee614e822a32f950240c004 Mon Sep 17 00:00:00 2001
From: kevin <kevin@yuno.malio.fr>
Date: Fri, 27 Feb 2026 09:24:37 +0100
Subject: [PATCH 11/13] feat : ajouts du composant input text area et fix sur
 le input text

---
 .playground/pages/composant/inputText.vue     |  16 +-
 .playground/pages/composant/inputTextArea.vue | 104 +++++++++
 .playground/pages/index.vue                   |  75 +++---
 app/components/malio/InputText.vue            |  58 +++--
 app/components/malio/InputTextArea.vue        | 185 +++++++++++++++
 app/story/inputText.story.vue                 | 220 +++++++++++++++---
 app/story/inputTextArea.story.vue             | 192 +++++++++++++++
 tailwind.config.ts                            |   2 +-
 8 files changed, 767 insertions(+), 85 deletions(-)
 create mode 100644 .playground/pages/composant/inputTextArea.vue
 create mode 100644 app/components/malio/InputTextArea.vue
 create mode 100644 app/story/inputTextArea.story.vue

diff --git a/.playground/pages/composant/inputText.vue b/.playground/pages/composant/inputText.vue
index e1d478f..7c00b7c 100644
--- a/.playground/pages/composant/inputText.vue
+++ b/.playground/pages/composant/inputText.vue
@@ -2,7 +2,7 @@
   <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Simple</h2>
-      <MalioInputText v-model="simpleValue"/>
+      <MalioInputText/>
     </div>
 
     <div class="rounded-lg border p-4">
@@ -16,7 +16,7 @@
     </div>
 
     <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Avec icône</h2>
+      <h2 class="mb-4 text-xl font-bold">Avec icône à droite</h2>
       <MalioInputText
         v-model="searchValue"
         label="Recherche"
@@ -25,6 +25,16 @@
       />
     </div>
 
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec icône à gauche</h2>
+      <MalioInputText
+        label="Recherche"
+        icon-name="mdi:magnify"
+        icon-size="20"
+        icon-position="left"
+      />
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
       <MalioInputText
@@ -142,7 +152,7 @@
 </template>
 
 <script setup lang="ts">
-const simpleValue = ref('')
+import { computed, ref } from 'vue'
 const nameValue = ref('')
 const searchValue = ref('')
 const codeValue = ref('')
diff --git a/.playground/pages/composant/inputTextArea.vue b/.playground/pages/composant/inputTextArea.vue
new file mode 100644
index 0000000..e093158
--- /dev/null
+++ b/.playground/pages/composant/inputTextArea.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="grid grid-cols-1 items-start gap-6 p-4 md:grid-cols-2">
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Simple</h2>
+      <MalioInputTextArea/>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec label + hint</h2>
+      <MalioInputTextArea
+        v-model="hintValue"
+        label="Description"
+        hint="Ajoutez un contexte clair"
+        :size="4"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec icône</h2>
+      <MalioInputTextArea
+        v-model="iconValue"
+        label="Commentaire"
+        icon-name="mdi:comment-text-outline"
+        :size="3"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Erreur / Succès</h2>
+      <div class="space-y-4">
+        <MalioInputTextArea
+          v-model="errorValue"
+          label="Message"
+          error="Le message est trop court"
+          :size="3"
+        />
+        <MalioInputTextArea
+          v-model="successValue"
+          label="Message"
+          success="Message valide"
+          :size="3"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly / Disabled</h2>
+      <div class="space-y-4">
+        <MalioInputTextArea
+          model-value="Contenu en lecture seule"
+          label="Readonly"
+          readonly
+          :size="3"
+        />
+        <MalioInputTextArea
+          model-value="Champ indisponible"
+          label="Disabled"
+          disabled
+          :size="3"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Resize avec limites</h2>
+      <MalioInputTextArea
+        v-model="resizeValue"
+        label="Notes"
+        resize="both"
+        :size="4"
+        :min-resize-width="300"
+        :max-resize-width="700"
+        :min-resize-height="120"
+        :max-resize-height="280"
+        hint="Resize limite en largeur et hauteur"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Compteur (interne au composant)</h2>
+      <MalioInputTextArea
+        v-model="counterValue"
+        label="Message"
+        :size="5"
+        :max-length="120"
+        :show-counter="true"
+        hint="Le compteur est en bas a gauche"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioInputTextArea from '../../../app/components/malio/InputTextArea.vue'
+
+const hintValue = ref('')
+const iconValue = ref('')
+const errorValue = ref('abc')
+const successValue = ref('Contenu ok')
+const resizeValue = ref('Vous pouvez redimensionner ce champ.')
+const counterValue = ref('')
+
+</script>
diff --git a/.playground/pages/index.vue b/.playground/pages/index.vue
index ccf06c3..17e7186 100644
--- a/.playground/pages/index.vue
+++ b/.playground/pages/index.vue
@@ -15,7 +15,7 @@
           :key="item.name"
           type="button"
           class="rounded px-3 py-2 text-left text-black font-bold hover:bg-m-primary hover:text-white"
-          :class="selectedName === item.name ? 'bg-m-secondary text-white ' : ''"
+          :class="selectedName === item.name ? 'bg-m-secondary text-white' : ''"
           @click="selectOrToggle(item.name)"
         >
           {{ item.label }}
@@ -32,10 +32,13 @@
         v-else-if="selectedName"
         class="text-gray-700"
       >
-        Page de demo introuvable: <code>.playground/pages/composant/{{ selectedDemoFileName }}.vue</code>
+        Page de demo introuvable:
+        <code>.playground/pages/composant/{{ selectedDemoFileName }}.vue</code>
       </p>
       <div v-else>
-        <h1 class="text-2xl font-semibold text-gray-900">Playground composants</h1>
+        <h1 class="text-2xl font-semibold text-gray-900">
+          Playground composants
+        </h1>
         <p class="mt-2 text-gray-600">
           Selectionne un composant dans la liste pour afficher sa page de demo.
         </p>
@@ -45,6 +48,8 @@
 </template>
 
 <script setup lang="ts">
+import { computed, ref, watch, shallowRef } from 'vue'
+
 type LoadedModule = {
   default: unknown
 }
@@ -52,40 +57,42 @@ type LoadedModule = {
 type Item = {
   name: string
   label: string
-  demoComponent?: unknown
 }
 
-const componentModules = import.meta.glob('../../app/components/malio/*.vue', { eager: true }) as Record<string, LoadedModule>
-const demoModules = import.meta.glob('./composant/*.vue', { eager: true }) as Record<string, LoadedModule>
+const componentModules = import.meta.glob('../../app/components/malio/*.vue')
+const demoModules = import.meta.glob('./composant/*.vue')
 
-const demoByName = Object.fromEntries(
-  Object.entries(demoModules).map(([file, mod]) => {
+const demoByName: Record<string, () => Promise<LoadedModule>> =
+  Object.fromEntries(
+    Object.entries(demoModules).map(([file, loader]) => {
+      const name = file.split('/').pop()?.replace('.vue', '') ?? ''
+      return [name.toLowerCase(), loader as () => Promise<LoadedModule>]
+    }),
+  )
+
+const items = computed<Item[]>(() =>
+  Object.keys(componentModules).map((file) => {
     const name = file.split('/').pop()?.replace('.vue', '') ?? ''
-    return [name.toLowerCase(), mod.default]
-  }),
-)
-
-const items = computed(() =>
-  Object.entries(componentModules).map(([file]) => {
-    const name = file.split('/').pop()?.replace('.vue', '') ?? ''
-
     return {
       name,
       label: name,
-      demoComponent: demoByName[name.toLowerCase()],
     }
-  }) as Item[],
+  }),
 )
 
 const selectedName = ref('')
 const hasInitializedSelection = ref(false)
 
-watchEffect(() => {
-  if (!hasInitializedSelection.value && items.value.length > 0) {
-    selectedName.value = items.value[0].name
-    hasInitializedSelection.value = true
-  }
-})
+watch(
+  items,
+  (val) => {
+    if (!hasInitializedSelection.value && val.length > 0) {
+      selectedName.value = val[0].name
+      hasInitializedSelection.value = true
+    }
+  },
+  { immediate: true },
+)
 
 function selectOrToggle(name: string) {
   selectedName.value = selectedName.value === name ? '' : name
@@ -95,9 +102,23 @@ function clearSelection() {
   selectedName.value = ''
 }
 
-const selectedDemoComponent = computed(() =>
-  items.value.find((item) => item.name === selectedName.value)?.demoComponent,
-)
+const selectedDemoComponent = shallowRef<unknown>(null)
+
+watch(selectedName, async (name) => {
+  if (!name) {
+    selectedDemoComponent.value = null
+    return
+  }
+
+  const loader = demoByName[name.toLowerCase()]
+  if (!loader) {
+    selectedDemoComponent.value = null
+    return
+  }
+
+  const mod = await loader()
+  selectedDemoComponent.value = mod.default
+})
 
 const selectedDemoFileName = computed(() => {
   const name = selectedName.value
diff --git a/app/components/malio/InputText.vue b/app/components/malio/InputText.vue
index 38c2091..6a9e0bb 100644
--- a/app/components/malio/InputText.vue
+++ b/app/components/malio/InputText.vue
@@ -8,37 +8,42 @@
       v-maska="mask"
       :name="name"
       :autocomplete="autocomplete"
-      class="floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none  focus:border-2"
+      class="floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent focus:border-2 "
       :class="[
       disabled ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
       hasError
-        ? 'border-m-error focus:border-m-error focus:pl-[11px] [&:not(:placeholder-shown)]:border-m-error'
+        ? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
         : hasSuccess
-          ? 'border-m-success focus:border-m-success focus:pl-[11px] [&:not(:placeholder-shown)]:border-m-success'
-          : 'border-m-muted focus:border-m-primary focus:pl-[11px]',
+          ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
+          : 'border-m-muted focus:border-m-primary',
       textInput,
       iconInputPaddingClass,
+      focusPaddingClass,
       rounded,
     ]"
       :required="required"
       :maxlength="maxLength"
       :minlength="minLength"
       :disabled="disabled"
-      :value="modelValue ?? ''"
+      :value="currentValue"
       :readonly="readonly"
       :aria-invalid="!!error"
       :aria-describedby="describedBy"
       v-bind="attrs"
-      placeholder=" "
+      placeholder="_"
       type="text"
       @input="onInput"
+      @focus="isFocused = true"
+      @blur="isFocused = false"
     >
 
     <label
       v-if="label"
       :for="inputId"
-      class="floating-label absolute left-3 top-2 mt-1 origin-left transition-transform duration-150 font-medium"
+      class="floating-label absolute top-2 mt-1 inline-block origin-left transition-transform duration-150 font-medium"
       :class="[
+    labelPositionClass,
+    shouldFloatLabel ? '-translate-y-[1.15rem] scale-90' : '',
     disabled ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
     hasError
       ? 'text-m-error'
@@ -59,7 +64,7 @@
       data-test="icon"
       :class="[
       hasError ? 'text-m-error' : hasSuccess ? 'text-m-success' : '',
-      'pointer-events-none absolute right-2 top-1/2 -translate-y-1/2',
+      iconPositionClass,
       iconColor,
     ]"
     />
@@ -85,7 +90,7 @@
 
 import type {MaskInputOptions} from 'maska'
 import {vMaska} from 'maska/vue'
-import {computed, useAttrs, useId} from 'vue'
+import {computed, ref, useAttrs, useId} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 
 defineOptions({name: 'MalioInputText', inheritAttrs: false})
@@ -110,6 +115,7 @@ const props = withDefaults(
     error?: string
     success?: string
     iconName?: string
+    iconPosition?: 'left' | 'right'
     rounded?: string
     iconSize?: string | number
     iconColor?: string
@@ -118,9 +124,10 @@ const props = withDefaults(
   {
     id: '',
     name: '',
-    autocomplete: '',
+    autocomplete: 'off',
     modelValue: undefined,
     iconName: '',
+    iconPosition: 'right',
     label: '',
     minWidth: 'w-96',
     maxWidth: '',
@@ -143,8 +150,13 @@ const props = withDefaults(
 
 const attrs = useAttrs()
 const generatedId = useId()
+const localValue = ref('')
+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)
 
@@ -162,20 +174,34 @@ const emit = defineEmits<{
 
 const onInput = (event: Event) => {
   const target = event.target as HTMLInputElement
+  if (!isControlled.value) {
+    localValue.value = target.value
+  }
   emit('update:modelValue', target.value)
 }
 
 const iconInputPaddingClass = computed(() => {
-  return props.iconName ? 'pr-10' : ''
+  if (!props.iconName) return ''
+  return props.iconPosition === 'left' ? '!pl-11 !pr-3' : '!pl-3'
+})
+
+const labelPositionClass = computed(() => {
+  if (props.iconName && props.iconPosition === 'left') return 'left-8'
+  return 'left-3'
+})
+
+const focusPaddingClass = computed(() => {
+  if (props.iconName && props.iconPosition === 'left') return 'focus:!pl-11'
+  return 'focus:pl-[11px]'
+})
+
+const iconPositionClass = computed(() => {
+  const sideClass = props.iconPosition === 'left' ? 'left-2' : 'right-2'
+  return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
 })
 </script>
 
 <style scoped>
-.floating-input:focus + label,
-.floating-input:not(:placeholder-shown) + label {
-  transform: translateY(-1.15rem) scale(0.9);
-}
-
 .floating-label {
   background: white;
   padding: 0 0.25rem;
diff --git a/app/components/malio/InputTextArea.vue b/app/components/malio/InputTextArea.vue
new file mode 100644
index 0000000..67fed47
--- /dev/null
+++ b/app/components/malio/InputTextArea.vue
@@ -0,0 +1,185 @@
+<template>
+  <div
+    class="relative mt-4 w-full"
+  >
+    <textarea
+      :id="inputId"
+      :name="name"
+
+      :autocomplete="autocomplete"
+      class="floating-input peer w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent focus:border-2 overflow-auto"
+      :class="[
+      disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : 'cursor-text',
+      hasError
+        ? 'border-m-error focus:border-m-error focus:pl-[11px]'
+        : hasSuccess
+          ? 'border-m-success focus:border-m-success focus:pl-[11px]'
+          : 'border-m-muted focus:border-m-primary focus:pl-[11px]',
+      textInput,
+      showCounterComputed ? 'pb-6' : '',
+      rounded,
+    ]"
+      :required="required"
+      :maxlength="maxLength"
+      :rows="rowsCount"
+      :disabled="disabled"
+      :value="currentValue"
+      :readonly="readonly"
+      :aria-invalid="hasError"
+      :aria-describedby="describedBy"
+      :style="textareaStyle"
+      v-bind="attrs"
+      placeholder="_"
+      @input="onInput"
+      @focus="isFocused = true"
+      @blur="isFocused = false"
+    />
+    <label
+      v-if="label"
+      :for="inputId"
+      class="floating-label absolute left-3 top-2 mt-1 inline-block origin-left transition-transform duration-150 font-medium"
+      :class="[
+    shouldFloatLabel ? '-translate-y-[1.15rem] scale-90' : '',
+    disabled ? 'text-black/60' : '',
+    hasError
+      ? 'text-m-error'
+      : hasSuccess
+        ? 'text-m-success'
+        : isFocused ? 'text-m-primary' : shouldFloatLabel ? 'text-black' : 'text-m-muted',
+      textLabel,
+      ]"
+    >
+      {{ label }}
+    </label>
+    <span
+      v-if="showCounterComputed"
+      class="pointer-events-none absolute bottom-2 left-3 text-xs text-m-muted"
+    >
+      {{ currentLength }}/{{ maxLength }}
+    </span>
+  </div>
+  <div
+    v-if="hasError || hasSuccess || hint"
+    class="mt-1 flex items-center justify-between gap-2 text-xs"
+  >
+    <p
+      :id="`${inputId}-describedby`"
+      :class="[
+        hasError
+          ? 'text-m-error'
+          : hasSuccess
+            ? 'text-m-success'
+            : 'text-m-muted',
+        'ml-[2px]',
+      ]"
+    >
+      {{ error || success || hint }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, useAttrs, useId} from 'vue'
+
+defineOptions({name: 'MalioInputTextArea', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    label?: string
+    name?: string
+    autocomplete?: string
+    modelValue?: string | null | undefined
+    size?: number | string
+    textInput?: string
+    textLabel?: string
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical'
+    minResizeWidth?: number
+    maxResizeWidth?: number
+    minResizeHeight?: number
+    maxResizeHeight?: number
+    required?: boolean
+    maxLength?: number
+    showCounter?: boolean
+    disabled?: boolean
+    readonly?: boolean
+    hint?: string
+    error?: string
+    success?: string
+    rounded?: string
+
+  }>(),
+  {
+    id: '',
+    name: '',
+    autocomplete: 'off',
+    modelValue: undefined,
+    label: '',
+    size: 2,
+    textInput: 'text-lg',
+    required: false,
+    maxLength: 800,
+    showCounter: false,
+    readonly: false,
+    textLabel: 'text-sm',
+    disabled: false,
+    rounded: 'rounded-md',
+    hint: '',
+    error: '',
+    success: '',
+    resize: 'both',
+    minResizeWidth: 280,
+    maxResizeWidth: 640,
+    minResizeHeight: 40,
+    maxResizeHeight: 320,
+  },
+)
+
+const attrs = useAttrs()
+const generatedId = useId()
+const localValue = ref('')
+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 rowsCount = computed(() => Math.max(1, Number(props.size || 3)))
+const currentLength = computed(() => (currentValue.value ?? '').length)
+const showCounterComputed = computed(() =>
+  props.showCounter && Number(props.maxLength) > 0
+)
+const toCssSize = (value: number | string) => (typeof value === 'number' ? `${value}px` : value)
+const textareaStyle = computed(() => ({
+  resize: props.resize,
+  minWidth: toCssSize(props.minResizeWidth),
+  maxWidth: toCssSize(props.maxResizeWidth),
+  minHeight: toCssSize(props.minResizeHeight),
+  maxHeight: toCssSize(props.maxResizeHeight),
+}))
+
+const describedBy = computed(() =>
+  (hasError.value || hasSuccess.value || !!props.hint) ? `${inputId.value}-describedby` : undefined,
+)
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void
+}>()
+
+const onInput = (event: Event) => {
+  const target = event.target as HTMLTextAreaElement
+  if (!isControlled.value) {
+    localValue.value = target.value
+  }
+  emit('update:modelValue', target.value)
+}
+</script>
+
+<style scoped>
+.floating-label {
+  background: white;
+  padding: 0 0.25rem;
+}
+</style>
diff --git a/app/story/inputText.story.vue b/app/story/inputText.story.vue
index b79b23f..e6db366 100644
--- a/app/story/inputText.story.vue
+++ b/app/story/inputText.story.vue
@@ -1,56 +1,200 @@
 <template>
-  <Story title="Input/Text">
+  <Story
+    title="Input/Text"
+  >
       <MalioInputText/>
   </Story>
 </template>
 
 <docs lang="md">
-# Input Text
+# MalioInputText
 
-## Liste des props
+Composant input texte avec masque optionnel (maska), label flottant,
+états visuels (erreur / succès) et icône configurable.
 
-Le composant Input Text permet de saisir du texte. Il peut afficher des messages d'erreur, de succès ou d'information.
-On peut lui passer plusieurs props pour personnaliser son comportement et son apparence.
-  - id: Identifiant HTML du champ. Si non fourni, un id est généré automatiquement.
-  - label: Texte du label affiché au-dessus du champ (floating label).
-  - name: Attribut name de l’input.
-  - autocomplete: Attribut autocomplete de l’input.
-  - modelValue: Valeur du champ (utilisée avec v-model) ou si valeur brut mettre des " ".
-  - minWidth: Classe utilitaire pour la largeur minimale du conteneur. Classe Tailwind de largeur (ex: w-64, w-full).
-  - maxWidth: Classe utilitaire pour la largeur maximale du conteneur. Classe Tailwind de largeur maximale.
-  - textInput: Classe(s) de style du texte de l’input. Classe(s) Tailwind de couleur ou de typographie (ex : text-gray-700, text-sm).
-  - textLabel: Classe(s) de style du texte du label. Classe(s) Tailwind de couleur ou de typographie (ex : text-gray-700, text-sm).
-  - required: Rend le champ obligatoire (required).
-  - maxLength: Nombre de caractère maximal autorisé.
-  - minLength: Nombre de caractère minimal autorisé.
-  - disabled: Désactive le champ et applique le style désactivé.
-  - readonly: Met le champ en lecture seule.
-  - hint: Message informatif affiché sous le champ.
-  - error: Message d’erreur affiché sous le champ. Active le style erreur.
-  - success: Message de succès affiché sous le champ. Active le style succès.
-  - iconName: Nom de l’icône affichée à droite dans le champ.
-  - rounded: Classe utilitaire pour le rayon des coins ( rounded- ).
-  - iconSize: Taille de l’icône. (ex : 24, 26, 85 ,99, ... ).
-  - iconColor: Classe(s) personnalisée(s) de couleur pour l’icône ( text- ).
-  - mask: Masque de saisie pour formater la valeur :
-      - \# : chiffre
-      - A : lettre majuscule
-      - a : lettre minuscule
-      - \* : chiffre ou lettre
+------------------------------------------------------------------------
 
-Événement émis :
+## Props détaillées
 
-- update:modelValue: Émis à chaque saisie pour mettre à jour v-model.
+### id
 
-Règles d’affichage des messages :
+-   Type: string
+-   Description: Identifiant HTML de l’input.
+-   Comportement: Si non fourni, un id unique est généré
+automatiquement.
 
-Priorité d’affichage :
-  1) error
-  2) success
-  3) hint
+### label
 
+-   Type: string
+-   Description: Texte affiché comme label flottant.
+-   Comportement: Si absent, aucun label n’est rendu.
+
+### name
+
+-   Type: string
+-   Description: Attribut name de l’input (utile pour les formulaires).
+
+### autocomplete
+
+-   Type: string
+-   Description: Active ou configure l’autocomplétion navigateur.
+-   Défaut: vide
+
+### modelValue
+
+-   Type: string | null | undefined
+-   Description: Valeur contrôlée du composant.
+-   Comportement:
+-   Si défini → composant contrôlé (v-model).
+-   Sinon → gestion interne de l’état.
+
+### mask
+
+-   Type: string | undefined
+-   Description: Masque appliqué via la directive maska.
+-   Comportement: Formate la saisie selon les tokens définis.
+
+------------------------------------------------------------------------
+
+## Apparence & Style
+
+### textInput
+
+-   Type: string
+-   Description: Classes CSS appliquées à l’input (taille de texte,
+etc.).
+
+### textLabel
+
+-   Type: string
+-   Description: Classes CSS appliquées au label.
+
+### rounded
+
+-   Type: string
+-   Description: Classe Tailwind pour le border-radius.
+-   Défaut: rounded-md
+
+### minWidth / maxWidth
+
+-   Type: string
+-   Description: Classes utilitaires Tailwind pour contraindre la
+largeur.
+
+------------------------------------------------------------------------
+
+## Validation & Contraintes
+
+### required
+
+-   Type: boolean
+-   Description: Ajoute l’attribut HTML required.
+
+### maxLength
+
+-   Type: number | string
+-   Description: Longueur maximale autorisée.
+
+### minLength
+
+-   Type: number | string
+-   Description: Longueur minimale autorisée.
+
+### disabled
+
+-   Type: boolean
+-   Description: Désactive complètement le champ.
+
+### readonly
+
+-   Type: boolean
+-   Description: Rend le champ non modifiable mais focusable.
+
+------------------------------------------------------------------------
+
+## États & Messages
+
+### hint
+
+-   Type: string
+-   Description: Message d’aide affiché sous le champ.
+
+### error
+
+-   Type: string
+-   Description: Message d’erreur.
+-   Effet:
+-   Active l’état visuel erreur.
+-   aria-invalid=true
+-   Prioritaire sur success et hint.
+
+### success
+
+-   Type: string
+-   Description: Message de succès.
+-   Effet:
+-   Actif uniquement si error est absent.
+
+------------------------------------------------------------------------
+
+## Icône
+
+### iconName
+
+-   Type: string
+-   Description: Nom de l’icône (ex: mdi:magnify).
+
+### iconSize
+
+-   Type: string | number
+-   Description: Taille de l’icône.
+
+### iconColor
+
+-   Type: string
+-   Description: Couleur de l’icône.
+
+------------------------------------------------------------------------
+
+## Comportement de validation
+
+-   Aucune validation interne.
+-   Les états sont pilotés uniquement par les props.
+
+## Priorité visuelle
+
+1.  error
+2.  success
+3.  neutre
+
+------------------------------------------------------------------------
+
+## Tokens de masque
+
+-   \# : chiffre
+-   A : lettre majuscule
+-   a : lettre minuscule
+-   \* : chiffre ou lettre
+
+------------------------------------------------------------------------
+
+## Accessibilité
+
+-   aria-invalid est activé si error existe.
+-   aria-describedby référence dynamiquement le message affiché.
+-   Fonctionne avec ou sans v-model.
+
+------------------------------------------------------------------------
+
+## Events
+
+### update:modelValue
+
+-   Émis à chaque modification de l’input.
+-   Permet l’utilisation avec v-model.
 
 </docs>
+
 <script setup lang="ts">
 import MalioInputText from '../components/malio/InputText.vue'
 </script>
diff --git a/app/story/inputTextArea.story.vue b/app/story/inputTextArea.story.vue
new file mode 100644
index 0000000..ef903ed
--- /dev/null
+++ b/app/story/inputTextArea.story.vue
@@ -0,0 +1,192 @@
+<template>
+  <Story
+    title="Input/TextArea"
+  >
+      <MalioInputTextArea/>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioInputTextArea
+
+Composant textarea avec label flottant, états visuels (erreur / succès),
+gestion du redimensionnement et compteur optionnel.
+
+------------------------------------------------------------------------
+
+## Props détaillées
+
+### id
+
+-   Type: string
+-   Description: Identifiant HTML du textarea.
+-   Comportement: Si non fourni, un id unique est généré
+automatiquement.
+
+### label
+
+-   Type: string
+-   Description: Texte affiché comme label flottant.
+-   Comportement: Si absent, aucun label n’est rendu.
+
+### name
+
+-   Type: string
+-   Description: Attribut name du textarea (utile pour les formulaires).
+
+### autocomplete
+
+-   Type: string
+-   Description: Active ou configure l’autocomplétion navigateur.
+
+### modelValue
+
+-   Type: string | null | undefined
+-   Description: Valeur contrôlée du composant.
+-   Comportement:
+-   Si défini → composant contrôlé (v-model).
+-   Sinon → gestion interne de l’état.
+
+------------------------------------------------------------------------
+
+## Apparence & Style
+
+### textInput
+
+-   Type: string
+-   Description: Classes CSS appliquées au textarea (taille de texte,
+etc.).
+-   Défaut: text-lg
+
+### textLabel
+
+-   Type: string
+-   Description: Classes CSS appliquées au label.
+-   Défaut: text-sm
+
+### rounded
+
+-   Type: string
+-   Description: Classe Tailwind pour le border-radius.
+-   Défaut: rounded-md
+
+------------------------------------------------------------------------
+
+## Dimensions
+
+### size
+
+-   Type: number | string
+-   Description: Nombre de lignes initiales (rows).
+-   Défaut: 2
+
+### minResizeWidth / maxResizeWidth
+
+-   Type: number | string
+-   Description: Largeur minimale / maximale autorisée lors du
+redimensionnement.
+
+### minResizeHeight / maxResizeHeight
+
+-   Type: number | string
+-   Description: Hauteur minimale / maximale autorisée lors du
+redimensionnement.
+
+### resize
+-   Type: 'none' | 'both' | 'horizontal' | 'vertical'
+-   Description: Définit le comportement de redimensionnement CSS.
+-   Défaut: both
+
+------------------------------------------------------------------------
+
+## Validation & États
+
+### required
+
+-   Type: boolean
+-   Description: Ajoute l’attribut HTML required.
+
+### maxLength
+
+-   Type: number | string
+-   Description: Longueur maximale autorisée.
+-   Effet: Limite la saisie et alimente le compteur.
+
+### disabled
+
+-   Type: boolean
+-   Description: Désactive complètement le champ.
+
+### readonly
+
+-   Type: boolean
+-   Description: Rend le champ non modifiable mais focusable.
+
+### hint
+
+-   Type: string
+-   Description: Message d’aide affiché sous le champ.
+
+### error
+
+-   Type: string
+-   Description: Message d’erreur.
+-   Effet:
+-   Active l’état visuel erreur.
+-   aria-invalid=true
+-   Prioritaire sur success et hint.
+
+### success
+
+-   Type: string
+-   Description: Message de succès.
+-   Effet:
+-   Actif uniquement si error est absent.
+
+------------------------------------------------------------------------
+
+## Compteur
+
+### showCounter
+
+-   Type: boolean
+-   Description: Affiche le compteur x / maxLength.
+-   Condition:
+-   showCounter = true
+-   maxLength défini et > 0
+-   Position: Bas gauche du textarea.
+-   Mise à jour: Dynamique à chaque saisie.
+
+------------------------------------------------------------------------
+
+## Priorité d’affichage
+
+### Messages
+
+1.  error
+2.  success
+3.  hint
+
+
+------------------------------------------------------------------------
+
+## Accessibilité
+
+-   aria-invalid est activé si error existe.
+-   aria-describedby référence le message affiché.
+-   Fonctionne avec ou sans v-model.
+
+------------------------------------------------------------------------
+
+## Events
+
+### update:modelValue
+
+-   Émis à chaque modification du textarea.
+-   Permet l’utilisation avec v-model.
+
+</docs>
+
+<script setup lang="ts">
+import MalioInputTextArea from '../components/malio/InputTextArea.vue'
+</script>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index bc5b42e..4d24081 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -9,7 +9,7 @@ export default {
   ],
   safelist: [
     {
-      pattern: /(sm:|md:|lg:|xl:|2xl:)?(text|rounded|w|min-w|max-w)-.+/,
+      pattern: /^(?:(?:sm|md|lg|xl|2xl):)?(?:text|rounded|w|min-w|max-w)-[^\s]+$/,
     },
   ],
   theme: {
-- 
2.39.5


From b4ffe0d29e52387cd518b146fa0e77e01ac972d6 Mon Sep 17 00:00:00 2001
From: Kevin Boudet <kevin@yuno.malio.fr>
Date: Fri, 27 Feb 2026 08:48:11 +0000
Subject: [PATCH 12/13] Actualiser tailwind.config.ts

---
 tailwind.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tailwind.config.ts b/tailwind.config.ts
index 4d24081..bc5b42e 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -9,7 +9,7 @@ export default {
   ],
   safelist: [
     {
-      pattern: /^(?:(?:sm|md|lg|xl|2xl):)?(?:text|rounded|w|min-w|max-w)-[^\s]+$/,
+      pattern: /(sm:|md:|lg:|xl:|2xl:)?(text|rounded|w|min-w|max-w)-.+/,
     },
   ],
   theme: {
-- 
2.39.5


From 6e70bc4d3e76643a465b427c1c8ada1927fff09d Mon Sep 17 00:00:00 2001
From: kevin <kevin@yuno.malio.fr>
Date: Mon, 2 Mar 2026 14:05:40 +0100
Subject: [PATCH 13/13] feat : ajouts du composant select

---
 .playground/pages/composant/inputText.vue  |   3 +-
 .playground/pages/composant/select.vue     | 149 +++++++++
 app/components/malio/Input.test.ts         | 242 +++++++--------
 app/components/malio/InputText.vue         |  92 +++---
 app/components/malio/InputTextArea.test.ts | 152 ++++++++++
 app/components/malio/InputTextArea.vue     |   7 +-
 app/components/malio/Select.test.ts        | 177 +++++++++++
 app/components/malio/Select.vue            | 333 +++++++++++++++++++++
 app/story/InputSelect.story.vue            | 148 +++++++++
 package-lock.json                          |  13 +-
 package.json                               |   3 +-
 tailwind.config.ts                         |   5 -
 12 files changed, 1142 insertions(+), 182 deletions(-)
 create mode 100644 .playground/pages/composant/select.vue
 create mode 100644 app/components/malio/InputTextArea.test.ts
 create mode 100644 app/components/malio/Select.test.ts
 create mode 100644 app/components/malio/Select.vue
 create mode 100644 app/story/InputSelect.story.vue

diff --git a/.playground/pages/composant/inputText.vue b/.playground/pages/composant/inputText.vue
index 7c00b7c..e329107 100644
--- a/.playground/pages/composant/inputText.vue
+++ b/.playground/pages/composant/inputText.vue
@@ -2,7 +2,8 @@
   <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Simple</h2>
-      <MalioInputText/>
+      <MalioInputText
+      />
     </div>
 
     <div class="rounded-lg border p-4">
diff --git a/.playground/pages/composant/select.vue b/.playground/pages/composant/select.vue
new file mode 100644
index 0000000..8b4cc0c
--- /dev/null
+++ b/.playground/pages/composant/select.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Simple</h2>
+      <MalioSelect
+        v-model="basicValue"
+        :options="options"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec label</h2>
+      <MalioSelect
+        v-model="labelValue"
+        :options="options"
+        label="Pays"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Valeur preselectionnee</h2>
+      <MalioSelect
+        v-model="selectedValue"
+        :options="options"
+        label="Pays"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Hint</h2>
+      <MalioSelect
+        v-model="hintValue"
+        :options="options"
+        label="Pays"
+        hint="Choisissez votre pays"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+      <MalioSelect
+        v-model="errorValue"
+        :options="options"
+        label="Pays"
+        error="Ce champ est obligatoire"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Succes</h2>
+      <MalioSelect
+        v-model="successValue"
+        :options="options"
+        label="Pays"
+        success="Selection validee"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Desactive</h2>
+      <MalioSelect
+        v-model="disabledValue"
+        :options="options"
+        label="Pays"
+        disabled
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Sans options</h2>
+      <MalioSelect
+        v-model="emptyValue"
+        label="Pays"
+        empty-option-label="Aucun pays disponible"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4 md:col-span-2">
+      <h2 class="mb-4 text-xl font-bold">Liste longue</h2>
+      <MalioSelect
+        v-model="longListValue"
+        :options="longOptions"
+        label="Pays"
+        hint="Permet de verifier la scrollbar"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4 md:col-span-2">
+      <h2 class="mb-4 text-xl font-bold">Ouverture en bas de page</h2>
+      <div class="h-64" />
+      <MalioSelect
+        v-model="bottomValue"
+        :options="longOptions"
+        label="Ouverture adaptative"
+        hint="A ouvrir pres du bas de la page"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const options = [
+  {label: 'France', value: 'fr'},
+  {label: 'Belgique', value: 'be'},
+  {label: 'Suisse', value: 'ch'},
+  {label: 'Canada', value: 'ca'},
+  {label: 'Allemagne', value: 'de'},
+  {label: 'Espagne', value: 'es'},
+  {label: 'Italie', value: 'it'},
+  {label: 'Portugal', value: 'pt'},
+]
+
+const longOptions = [
+  ...options,
+  {label: 'Pays-Bas', value: 'nl'},
+  {label: 'Suede', value: 'se'},
+  {label: 'Norvege', value: 'no'},
+  {label: 'Danemark', value: 'dk'},
+  {label: 'Finlande', value: 'fi'},
+  {label: 'Autriche', value: 'at'},
+  {label: 'Irlande', value: 'ie'},
+  {label: 'Grece', value: 'gr'},
+  {label: 'Pologne', value: 'pl'},
+  {label: 'Hongrie', value: 'hu'},
+  {label: 'Republique tcheque', value: 'cz'},
+]
+
+const basicValue = ref<string | number | null>(null)
+const labelValue = ref<string | number | null>(null)
+const selectedValue = ref<string | number | null>('fr')
+const hintValue = ref<string | number | null>(null)
+const errorValue = ref<string | number | null>(null)
+const successValue = ref<string | number | null>('be')
+const disabledValue = ref<string | number | null>('ca')
+const emptyValue = ref<string | number | null>(null)
+const longListValue = ref<string | number | null>(null)
+const bottomValue = ref<string | number | null>(null)
+</script>
diff --git a/app/components/malio/Input.test.ts b/app/components/malio/Input.test.ts
index cea94e3..317dcf5 100644
--- a/app/components/malio/Input.test.ts
+++ b/app/components/malio/Input.test.ts
@@ -1,17 +1,17 @@
 import {describe, expect, it} from 'vitest'
-import {config, mount} from '@vue/test-utils'
+import {mount} from '@vue/test-utils'
 import type {DefineComponent} from 'vue'
 import Input from './InputText.vue'
 
-
 type InputProps = {
   id?: string
   label?: string
   name?: string
   autocomplete?: string
   modelValue?: string | null
-  textSize?: string
+  inputClass?: string
   labelClass?: string
+  groupClass?: string
   required?: boolean
   maxLength?: number | string
   minLength?: number | string
@@ -21,245 +21,225 @@ type InputProps = {
   error?: string
   success?: string
   iconName?: string
+  iconPosition?: 'left' | 'right'
   iconSize?: string | number
   iconColor?: string
 }
 
 const InputForTest = Input as DefineComponent<InputProps>
-const iconStub = {
-  template: '<span data-test="icon" v-bind="$attrs" />',
-}
-config.global.stubs = {
-  ...(config.global.stubs ?? {}),
-  Icon: iconStub,
-}
 
-describe('MalioInput', () => {
-  // Props de base: valeur, label, name, id, autocomplete
+const mountInput = (props: InputProps = {}) =>
+  mount(InputForTest, {
+    props,
+    global: {
+      stubs: {
+        IconifyIcon: {
+          template: '<span data-test="icon" v-bind="$attrs" />',
+        },
+      },
+    },
+  })
+
+describe('MalioInputText', () => {
   it('renders the initial input value', () => {
-    const wrapper = mount(InputForTest, {
-      props: {modelValue: 'initialValueTest'},
-    })
+    const wrapper = mountInput({modelValue: 'initialValueTest'})
+
     expect(wrapper.get('input').element.value).toBe('initialValueTest')
   })
 
   it('renders the label text', () => {
-    const wrapper = mount(InputForTest, {
-      props: {label: 'labelTest'},
-    })
+    const wrapper = mountInput({label: 'labelTest'})
+
     expect(wrapper.get('label').text()).toBe('labelTest')
   })
 
   it('applies the name attribute', () => {
-    const wrapper = mount(InputForTest, {
-      props: {name: 'nameTest'},
-    })
+    const wrapper = mountInput({name: 'nameTest'})
+
     expect(wrapper.get('input').attributes('name')).toBe('nameTest')
   })
 
   it('uses provided id on input and label', () => {
-    const wrapper = mount(InputForTest, {
-      props: {id: 'custom-id', label: 'Label'},
-    })
+    const wrapper = mountInput({id: 'custom-id', label: 'Label'})
+
     expect(wrapper.get('input').attributes('id')).toBe('custom-id')
     expect(wrapper.get('label').attributes('for')).toBe('custom-id')
   })
 
-  it('applies a different size of rounded', () => {
-    const wrapper = mount(InputForTest, {
-      props: {rounded: 'rounded-md'},
-    })
+  it('keeps the default rounded class on input', () => {
+    const wrapper = mountInput()
+
     expect(wrapper.get('input').classes()).toContain('rounded-md')
   })
 
   it('generates an id when missing and reuses it on label', () => {
-    const wrapper = mount(InputForTest, {
-      props: {label: 'Label'},
-    })
+    const wrapper = mountInput({label: 'Label'})
+
     const inputId = wrapper.get('input').attributes('id')
-    expect(inputId).toBeDefined()
+
     expect(inputId?.startsWith('malio-input-text-')).toBe(true)
     expect(wrapper.get('label').attributes('for')).toBe(inputId)
   })
 
   it('applies the autocomplete attribute', () => {
-    const wrapper = mount(InputForTest, {
-      props: {autocomplete: 'autocompleteTest'},
-    })
+    const wrapper = mountInput({autocomplete: 'autocompleteTest'})
+
     expect(wrapper.get('input').attributes('autocomplete')).toBe('autocompleteTest')
   })
 
-  // États HTML: required, readonly, disabled
   it('does not set required when false', () => {
-    const wrapper = mount(InputForTest, {
-      props: {required: false},
-    })
+    const wrapper = mountInput({required: false})
+
     expect(wrapper.get('input').attributes('required')).toBeUndefined()
   })
 
   it('sets required when true', () => {
-    const wrapper = mount(InputForTest, {
-      props: {required: true},
-    })
+    const wrapper = mountInput({required: true})
+
     expect(wrapper.get('input').attributes('required')).toBeDefined()
   })
 
   it('does not set readonly when false', () => {
-    const wrapper = mount(InputForTest, {
-      props: {readonly: false},
-    })
+    const wrapper = mountInput({readonly: false})
+
     expect(wrapper.get('input').attributes('readonly')).toBeUndefined()
   })
 
   it('sets readonly when true', () => {
-    const wrapper = mount(InputForTest, {
-      props: {readonly: true},
-    })
+    const wrapper = mountInput({readonly: true})
+
     expect(wrapper.get('input').attributes('readonly')).toBeDefined()
   })
 
   it('does not set disabled and keeps text cursor when false', () => {
-    const wrapper = mount(InputForTest, {
-      props: {disabled: false},
-    })
+    const wrapper = mountInput({disabled: false})
+
     expect(wrapper.get('input').attributes('disabled')).toBeUndefined()
     expect(wrapper.get('input').classes()).toContain('cursor-text')
   })
 
   it('sets disabled styles when true', () => {
-    const wrapper = mount(InputForTest, {
-      props: {disabled: true},
-    })
+    const wrapper = mountInput({disabled: true})
+
     expect(wrapper.get('input').attributes('disabled')).toBeDefined()
     expect(wrapper.get('input').classes()).toContain('cursor-not-allowed')
     expect(wrapper.get('input').classes()).toContain('text-black/60')
   })
 
-  // Émission d'événements
   it('emits update:modelValue on input change', async () => {
-    const wrapper = mount(InputForTest, {
-      props: {modelValue: ''},
-    })
+    const wrapper = mountInput({modelValue: ''})
+
     await wrapper.get('input').setValue('new value')
 
     expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new value'])
   })
 
-  // Contraintes et classes de texte
   it('applies maxLength to input', () => {
-    const wrapper = mount(InputForTest, {
-      props: {maxLength: 25},
-    })
+    const wrapper = mountInput({maxLength: 25})
+
     expect(wrapper.get('input').attributes('maxlength')).toBe('25')
   })
 
   it('applies minLength to input', () => {
-    const wrapper = mount(InputForTest, {
-      props: {minLength: 25},
-    })
+    const wrapper = mountInput({minLength: 25})
+
     expect(wrapper.get('input').attributes('minlength')).toBe('25')
   })
 
-  it('applies textSize class on label', () => {
-    const wrapper = mount(InputForTest, {
-      props: {label: 'Label', textLabel: 'text-sm'},
-    })
-    expect(wrapper.get('label').classes()).toContain('text-sm')
+  it('applies labelClass on label', () => {
+    const wrapper = mountInput({label: 'Label', labelClass: 'text-red-500'})
+
+    expect(wrapper.get('label').classes()).toContain('text-red-500')
+  })
+
+  it('applies inputClass on input', () => {
+    const wrapper = mountInput({inputClass: 'text-sm'})
+
+    expect(wrapper.get('input').classes()).toContain('text-sm')
   })
 
-  // États visuels: erreur et succès
   it('shows error message without label and icon', () => {
-    const wrapper = mount(InputForTest, {
-      props: {error: 'Error message test'},
-    })
+    const wrapper = mountInput({error: 'Error message test'})
+
     expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
     expect(wrapper.get('input').classes()).toContain('border-m-error')
+    expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
     expect(wrapper.get('p').classes()).toContain('text-m-error')
   })
 
   it('shows error message with label and without icon', () => {
-    const wrapper = mount(InputForTest, {
-      props: {error: 'Error message test', label: 'Error message'},
-    })
+    const wrapper = mountInput({error: 'Error message test', label: 'Error message'})
+
     expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
     expect(wrapper.get('input').classes()).toContain('border-m-error')
     expect(wrapper.get('label').classes()).toContain('text-m-error')
-    expect(wrapper.get('label').classes()).toContain('text-m-error')
-    expect(wrapper.get('label').classes()).toContain('text-m-error')
     expect(wrapper.get('p').classes()).toContain('text-m-error')
-
   })
 
   it('shows error message with label and icon', () => {
-    const wrapper = mount(InputForTest, {
-      props: {error: 'Error message test', label: 'Error message', iconName: 'mdi:key-outline'},
+    const wrapper = mountInput({
+      error: 'Error message test',
+      label: 'Error message',
+      iconName: 'mdi:key-outline',
     })
+
     expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
     expect(wrapper.get('input').classes()).toContain('border-m-error')
     expect(wrapper.get('label').classes()).toContain('text-m-error')
-    expect(wrapper.get('label').classes()).toContain('text-m-error')
-    expect(wrapper.get('label').classes()).toContain('text-m-error')
     expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-error')
     expect(wrapper.get('p').classes()).toContain('text-m-error')
-
   })
 
   it('shows error message with icon and without label', () => {
-    const wrapper = mount(InputForTest, {
-      props: {error: 'Error message test', iconName: 'mdi:key-outline'},
-    })
+    const wrapper = mountInput({error: 'Error message test', iconName: 'mdi:key-outline'})
+
     expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
     expect(wrapper.get('input').classes()).toContain('border-m-error')
     expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-error')
   })
 
   it('shows success message without label and icon', () => {
-    const wrapper = mount(InputForTest, {
-      props: {success: 'Success message test'},
-    })
+    const wrapper = mountInput({success: 'Success message test'})
+
     expect(wrapper.get('p.text-m-success').text()).toBe('Success message test')
     expect(wrapper.get('input').classes()).toContain('border-m-success')
   })
 
   it('shows success message with label and without icon', () => {
-    const wrapper = mount(InputForTest, {
-      props: {success: 'Success message test', label: 'Success message'},
-    })
+    const wrapper = mountInput({success: 'Success message test', label: 'Success message'})
+
     expect(wrapper.get('p.text-m-success').text()).toBe('Success message test')
     expect(wrapper.get('input').classes()).toContain('border-m-success')
     expect(wrapper.get('label').classes()).toContain('text-m-success')
-    expect(wrapper.get('label').classes()).toContain('text-m-success')
-    expect(wrapper.get('label').classes()).toContain('text-m-success')
   })
 
   it('shows success message with label and icon', () => {
-    const wrapper = mount(InputForTest, {
-      props: {success: 'Success message test', label: 'Success message', iconName: 'mdi:key-outline'},
+    const wrapper = mountInput({
+      success: 'Success message test',
+      label: 'Success message',
+      iconName: 'mdi:key-outline',
     })
+
     expect(wrapper.get('p.text-m-success').text()).toBe('Success message test')
     expect(wrapper.get('input').classes()).toContain('border-m-success')
     expect(wrapper.get('label').classes()).toContain('text-m-success')
-    expect(wrapper.get('label').classes()).toContain('text-m-success')
-    expect(wrapper.get('label').classes()).toContain('text-m-success')
     expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-success')
   })
 
   it('shows success message with icon and without label', () => {
-    const wrapper = mount(InputForTest, {
-      props: {success: 'Success message test', iconName: 'mdi:key-outline'},
-    })
+    const wrapper = mountInput({success: 'Success message test', iconName: 'mdi:key-outline'})
+
     expect(wrapper.get('p.text-m-success').text()).toBe('Success message test')
     expect(wrapper.get('input').classes()).toContain('border-m-success')
     expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-success')
   })
 
   it('prioritizes error over success when both are provided', () => {
-    const wrapper = mount(InputForTest, {
-      props: {
-        error: 'Error message test',
-        success: 'Success message test',
-      },
+    const wrapper = mountInput({
+      error: 'Error message test',
+      success: 'Success message test',
     })
+
     expect(wrapper.find('p.text-m-error').exists()).toBe(true)
     expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
     expect(wrapper.find('p.text-m-success').exists()).toBe(false)
@@ -267,34 +247,21 @@ describe('MalioInput', () => {
     expect(wrapper.get('input').classes()).not.toContain('border-m-success')
   })
 
-  // Aide et classes de label
   it('shows hint message', () => {
-    const wrapper = mount(InputForTest, {
-      props: {hint: 'Hint message test'},
-    })
+    const wrapper = mountInput({hint: 'Hint message test'})
+
     expect(wrapper.get('p.text-m-muted').text()).toBe('Hint message test')
   })
 
-  it('applies labelClass on label', () => {
-    const wrapper = mount(InputForTest, {
-      props: {label: 'Label', textLabel: 'text-red-500'},
-    })
-    expect(wrapper.get('label').classes()).toContain('text-red-500')
-  })
-
   it('does not render label when label prop is missing', () => {
-    const wrapper = mount(InputForTest, {
-      props: {labelClass: 'text-red-500'},
-    })
+    const wrapper = mountInput({labelClass: 'text-red-500'})
 
     expect(wrapper.find('label').exists()).toBe(false)
   })
 
-  // Icône : rendu et options
   it('renders icon with default positioning and muted color', () => {
-    const wrapper = mount(InputForTest, {
-      props: {iconName: 'mdi:key-outline'},
-    })
+    const wrapper = mountInput({iconName: 'mdi:key-outline'})
+
     expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
     expect(wrapper.get('[data-test="icon"]').classes()).toContain('pointer-events-none')
     expect(wrapper.get('[data-test="icon"]').classes()).toContain('absolute')
@@ -303,17 +270,28 @@ describe('MalioInput', () => {
     expect(wrapper.get('[data-test="icon"]').classes()).toContain('-translate-y-1/2')
   })
 
-  it('passes icon size prop to icon component', () => {
-    const wrapper = mount(InputForTest, {
-      props: {iconName: 'mdi:key-outline', iconSize: '24'},
+  it('renders icon on the left when requested', () => {
+    const wrapper = mountInput({
+      iconName: 'mdi:key-outline',
+      iconPosition: 'left',
+      label: 'Password',
     })
+
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('left-2')
+    expect(wrapper.get('input').classes()).toContain('!pl-11')
+    expect(wrapper.get('label').classes()).toContain('left-8')
+  })
+
+  it('passes icon size props to icon component', () => {
+    const wrapper = mountInput({iconName: 'mdi:key-outline', iconSize: '24'})
+
+    expect(wrapper.get('[data-test="icon"]').attributes('width')).toBe('24')
     expect(wrapper.get('[data-test="icon"]').attributes('height')).toBe('24')
   })
 
   it('applies icon color class', () => {
-    const wrapper = mount(InputForTest, {
-      props: {iconName: 'mdi:key-outline', iconColor: 'text-m-primary'},
-    })
+    const wrapper = mountInput({iconName: 'mdi:key-outline', iconColor: 'text-m-primary'})
+
     expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
   })
 })
diff --git a/app/components/malio/InputText.vue b/app/components/malio/InputText.vue
index 6a9e0bb..d1dc77d 100644
--- a/app/components/malio/InputText.vue
+++ b/app/components/malio/InputText.vue
@@ -1,26 +1,13 @@
 <template>
   <div
-    class="relative mt-4 flex h-12 w-full items-center"
-    :class="[minWidth, maxWidth]"
+    :class="mergedGroupClass"
   >
     <input
       :id="inputId"
       v-maska="mask"
       :name="name"
       :autocomplete="autocomplete"
-      class="floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent focus:border-2 "
-      :class="[
-      disabled ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
-      hasError
-        ? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
-        : hasSuccess
-          ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
-          : 'border-m-muted focus:border-m-primary',
-      textInput,
-      iconInputPaddingClass,
-      focusPaddingClass,
-      rounded,
-    ]"
+      :class="mergedInputClass"
       :required="required"
       :maxlength="maxLength"
       :minlength="minLength"
@@ -40,18 +27,7 @@
     <label
       v-if="label"
       :for="inputId"
-      class="floating-label absolute top-2 mt-1 inline-block origin-left transition-transform duration-150 font-medium"
-      :class="[
-    labelPositionClass,
-    shouldFloatLabel ? '-translate-y-[1.15rem] scale-90' : '',
-    disabled ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
-    hasError
-      ? 'text-m-error'
-      : hasSuccess
-        ? 'text-m-success'
-        : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
-      textLabel,
-      ]"
+      :class="mergedLabelClass"
     >
       {{ label }}
     </label>
@@ -63,9 +39,11 @@
       :height="iconSize"
       data-test="icon"
       :class="[
-      hasError ? 'text-m-error' : hasSuccess ? 'text-m-success' : '',
+      hasError
+        ? 'text-m-error'
+        : hasSuccess
+          ? 'text-m-success' : iconColor,
       iconPositionClass,
-      iconColor,
     ]"
     />
 
@@ -92,6 +70,7 @@ import type {MaskInputOptions} from 'maska'
 import {vMaska} from 'maska/vue'
 import {computed, ref, useAttrs, useId} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
+import {twMerge} from 'tailwind-merge'
 
 defineOptions({name: 'MalioInputText', inheritAttrs: false})
 
@@ -102,10 +81,9 @@ const props = withDefaults(
     name?: string
     autocomplete?: string
     modelValue?: string | null | undefined
-    minWidth?: string
-    maxWidth?: string
-    textInput?: string
-    textLabel?: string
+    inputClass?: string
+    labelClass?: string
+    groupClass?: string
     required?: boolean
     maxLength?: number | string
     minLength?: number | string
@@ -116,7 +94,7 @@ const props = withDefaults(
     success?: string
     iconName?: string
     iconPosition?: 'left' | 'right'
-    rounded?: string
+
     iconSize?: string | number
     iconColor?: string
     mask?: string | MaskInputOptions
@@ -129,16 +107,14 @@ const props = withDefaults(
     iconName: '',
     iconPosition: 'right',
     label: '',
-    minWidth: 'w-96',
-    maxWidth: '',
-    textInput: 'text-lg',
+    inputClass: '',
+    labelClass: '',
+    groupClass: '',
     required: false,
     maxLength: undefined,
     minLength: undefined,
     readonly: false,
-    textLabel: 'text-sm',
     disabled: false,
-    rounded: 'rounded-md',
     hint: '',
     error: '',
     success: '',
@@ -159,6 +135,42 @@ const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '
 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 mergedGroupClass = computed(() =>
+  twMerge(
+    'relative mt-4 flex h-12 w-full items-center',
+    props.groupClass,
+  ),
+)
+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 focus:border-2 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-text',
+    hasError.value
+      ? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
+      : hasSuccess.value
+        ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
+        : 'focus:border-m-primary',
+    props.inputClass,
+    iconInputPaddingClass.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' : '',
+    disabled.value ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
+    hasError.value
+      ? 'text-m-error'
+      : hasSuccess.value
+        ? 'text-m-success'
+        : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
+    props.labelClass,
+  ),
+)
 
 const describedBy = computed(() => {
   const ids: string[] = []
@@ -185,6 +197,8 @@ const iconInputPaddingClass = computed(() => {
   return props.iconPosition === 'left' ? '!pl-11 !pr-3' : '!pl-3'
 })
 
+const disabled = computed(() => props.disabled)
+
 const labelPositionClass = computed(() => {
   if (props.iconName && props.iconPosition === 'left') return 'left-8'
   return 'left-3'
diff --git a/app/components/malio/InputTextArea.test.ts b/app/components/malio/InputTextArea.test.ts
new file mode 100644
index 0000000..5398e6c
--- /dev/null
+++ b/app/components/malio/InputTextArea.test.ts
@@ -0,0 +1,152 @@
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import InputTextArea from './InputTextArea.vue'
+
+type InputTextAreaProps = {
+  id?: string
+  label?: string
+  name?: string
+  autocomplete?: string
+  modelValue?: string | null
+  size?: number | string
+  textInput?: string
+  textLabel?: string
+  required?: boolean
+  maxLength?: number
+  showCounter?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  hint?: string
+  error?: string
+  success?: string
+  rounded?: string
+}
+
+const InputTextAreaForTest = InputTextArea as DefineComponent<InputTextAreaProps>
+
+describe('MalioInputTextArea', () => {
+  it('renders the initial textarea value', () => {
+    const wrapper = mount(InputTextAreaForTest, {
+      props: {modelValue: 'initial textarea value'},
+    })
+
+    expect(wrapper.get('textarea').element.value).toBe('initial textarea value')
+  })
+
+  it('renders the label text and reuses a provided id', () => {
+    const wrapper = mount(InputTextAreaForTest, {
+      props: {id: 'custom-textarea-id', label: 'Description'},
+    })
+
+    expect(wrapper.get('textarea').attributes('id')).toBe('custom-textarea-id')
+    expect(wrapper.get('label').attributes('for')).toBe('custom-textarea-id')
+    expect(wrapper.get('label').text()).toBe('Description')
+  })
+
+  it('generates an id when missing', () => {
+    const wrapper = mount(InputTextAreaForTest, {
+      props: {label: 'Description'},
+    })
+
+    const textareaId = wrapper.get('textarea').attributes('id')
+    expect(textareaId?.startsWith('malio-input-textarea-')).toBe(true)
+    expect(wrapper.get('label').attributes('for')).toBe(textareaId)
+  })
+
+  it('applies name, autocomplete and rows attributes', () => {
+    const wrapper = mount(InputTextAreaForTest, {
+      props: {name: 'bio', autocomplete: 'on', size: 4},
+    })
+
+    expect(wrapper.get('textarea').attributes('name')).toBe('bio')
+    expect(wrapper.get('textarea').attributes('autocomplete')).toBe('on')
+    expect(wrapper.get('textarea').attributes('rows')).toBe('4')
+  })
+
+  it('sets required, readonly and disabled attributes', () => {
+    const wrapper = mount(InputTextAreaForTest, {
+      props: {
+        required: true,
+        readonly: true,
+        disabled: true,
+      },
+    })
+
+    expect(wrapper.get('textarea').attributes('required')).toBeDefined()
+    expect(wrapper.get('textarea').attributes('readonly')).toBeDefined()
+    expect(wrapper.get('textarea').attributes('disabled')).toBeDefined()
+    expect(wrapper.get('textarea').classes()).toContain('cursor-not-allowed')
+  })
+
+  it('emits update:modelValue on input change', async () => {
+    const wrapper = mount(InputTextAreaForTest, {
+      props: {modelValue: ''},
+    })
+
+    await wrapper.get('textarea').setValue('new textarea value')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new textarea value'])
+  })
+
+  it('shows the character counter when enabled', () => {
+    const wrapper = mount(InputTextAreaForTest, {
+      props: {
+        modelValue: 'hello',
+        showCounter: true,
+        maxLength: 20,
+      },
+    })
+
+    expect(wrapper.get('span.text-xs').text()).toBe('5/20')
+    expect(wrapper.get('textarea').classes()).toContain('pb-6')
+  })
+
+  it('shows hint message in muted color', () => {
+    const wrapper = mount(InputTextAreaForTest, {
+      props: {hint: 'Helpful hint'},
+    })
+
+    expect(wrapper.get('p.text-m-muted').text()).toBe('Helpful hint')
+  })
+
+  it('shows error state on textarea and label', () => {
+    const wrapper = mount(InputTextAreaForTest, {
+      props: {
+        label: 'Description',
+        error: 'Textarea error',
+      },
+    })
+
+    expect(wrapper.get('textarea').classes()).toContain('border-m-error')
+    expect(wrapper.get('label').classes()).toContain('text-m-error')
+    expect(wrapper.get('p.text-m-error').text()).toBe('Textarea error')
+    expect(wrapper.get('textarea').attributes('aria-invalid')).toBe('true')
+  })
+
+  it('shows success state on textarea and label', () => {
+    const wrapper = mount(InputTextAreaForTest, {
+      props: {
+        label: 'Description',
+        success: 'Textarea success',
+      },
+    })
+
+    expect(wrapper.get('textarea').classes()).toContain('border-m-success')
+    expect(wrapper.get('label').classes()).toContain('text-m-success')
+    expect(wrapper.get('p.text-m-success').text()).toBe('Textarea success')
+  })
+
+  it('prioritizes error over success', () => {
+    const wrapper = mount(InputTextAreaForTest, {
+      props: {
+        error: 'Textarea error',
+        success: 'Textarea success',
+      },
+    })
+
+    expect(wrapper.get('textarea').classes()).toContain('border-m-error')
+    expect(wrapper.find('p.text-m-success').exists()).toBe(false)
+    expect(wrapper.get('p.text-m-error').text()).toBe('Textarea error')
+  })
+})
diff --git a/app/components/malio/InputTextArea.vue b/app/components/malio/InputTextArea.vue
index 67fed47..c3294f5 100644
--- a/app/components/malio/InputTextArea.vue
+++ b/app/components/malio/InputTextArea.vue
@@ -9,12 +9,13 @@
       :autocomplete="autocomplete"
       class="floating-input peer w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent focus:border-2 overflow-auto"
       :class="[
+      isFilled ? 'border-black' : 'border-m-muted',
       disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : 'cursor-text',
       hasError
         ? 'border-m-error focus:border-m-error focus:pl-[11px]'
         : hasSuccess
           ? 'border-m-success focus:border-m-success focus:pl-[11px]'
-          : 'border-m-muted focus:border-m-primary focus:pl-[11px]',
+          : 'focus:border-m-primary focus:pl-[11px]',
       textInput,
       showCounterComputed ? 'pb-6' : '',
       rounded,
@@ -39,7 +40,7 @@
       :for="inputId"
       class="floating-label absolute left-3 top-2 mt-1 inline-block origin-left transition-transform duration-150 font-medium"
       :class="[
-    shouldFloatLabel ? '-translate-y-[1.15rem] scale-90' : '',
+    shouldFloatLabel ? '-translate-y-[1.30rem] scale-90' : '',
     disabled ? 'text-black/60' : '',
     hasError
       ? 'text-m-error'
@@ -159,7 +160,7 @@ 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,
 )
diff --git a/app/components/malio/Select.test.ts b/app/components/malio/Select.test.ts
new file mode 100644
index 0000000..b629c15
--- /dev/null
+++ b/app/components/malio/Select.test.ts
@@ -0,0 +1,177 @@
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import Select from './Select.vue'
+
+type Option = {
+  label: string
+  value: string | number | null
+}
+
+type SelectProps = {
+  modelValue?: string | number | null
+  options?: Option[]
+  emptyOptionLabel?: string
+  label?: string
+  hint?: string
+  error?: string
+  success?: string
+  minWidth?: string
+  maxWidth?: string
+  textField?: string
+  textValue?: string
+  textLabel?: string
+  rounded?: string
+  disabled?: boolean
+}
+
+const SelectForTest = Select as DefineComponent<SelectProps>
+
+const options: Option[] = [
+  {label: 'France', value: 'fr'},
+  {label: 'Belgique', value: 'be'},
+  {label: 'Canada', value: 'ca'},
+]
+
+describe('MalioSelect', () => {
+  it('renders the label text', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, label: 'Country'},
+    })
+
+    expect(wrapper.get('label').text()).toBe('Country')
+  })
+
+  it('generates button and listbox ids and links them together', async () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, options},
+    })
+
+    const button = wrapper.get('button')
+    expect(button.attributes('id')?.startsWith('custom-select-btn-')).toBe(true)
+    expect(button.attributes('aria-controls')?.startsWith('custom-select-listbox-')).toBe(true)
+
+    await button.trigger('click')
+
+    expect(wrapper.get('ul').attributes('id')).toBe(button.attributes('aria-controls'))
+  })
+
+  it('uses disabled styles and prevents opening when disabled', async () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, disabled: true, options},
+    })
+
+    const button = wrapper.get('button')
+    expect(button.attributes('disabled')).toBeDefined()
+    expect(button.classes()).toContain('cursor-not-allowed')
+
+    await button.trigger('click')
+
+    expect(wrapper.find('ul').exists()).toBe(false)
+  })
+
+  it('opens the list and rotates the icon on click', async () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, options},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.get('ul').exists()).toBe(true)
+    expect(wrapper.get('button').attributes('aria-expanded')).toBe('true')
+    expect(wrapper.get('svg').classes()).toContain('rotate-180')
+  })
+
+  it('emits update:modelValue when selecting an option', async () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, options},
+    })
+
+    await wrapper.get('button').trigger('click')
+    await wrapper.findAll('li')[2].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['be'])
+  })
+
+  it('renders the empty option with muted text style', async () => {
+    const wrapper = mount(SelectForTest, {
+      props: {
+        modelValue: null,
+        options,
+        emptyOptionLabel: 'Aucune selection',
+      },
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    const firstOption = wrapper.findAll('li')[0]
+    expect(firstOption.text()).toBe('Aucune selection')
+    expect(firstOption.classes()).toContain('text-black/40')
+  })
+
+  it('shows the selected value text when an option is selected', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {
+        options,
+        modelValue: 'fr',
+      },
+    })
+
+    expect(wrapper.text()).toContain('France')
+    expect(wrapper.get('button').classes()).toContain('border-black')
+  })
+
+  it('shows hint message in muted color', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, hint: 'Select a country'},
+    })
+
+    expect(wrapper.get('p.text-m-muted').text()).toBe('Select a country')
+  })
+
+  it('shows error state on button, label and helper text', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {
+        modelValue: null,
+        options,
+        label: 'Country',
+        error: 'Selection error',
+      },
+    })
+
+    expect(wrapper.get('button').classes()).toContain('border-m-error')
+    expect(wrapper.get('label').classes()).toContain('text-m-error')
+    expect(wrapper.get('p.text-m-error').text()).toBe('Selection error')
+    expect(wrapper.get('button').attributes('aria-invalid')).toBe('true')
+  })
+
+  it('shows success state on button, label and helper text', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {
+        modelValue: null,
+        options,
+        label: 'Country',
+        success: 'Selection success',
+      },
+    })
+
+    expect(wrapper.get('button').classes()).toContain('border-m-success')
+    expect(wrapper.get('label').classes()).toContain('text-m-success')
+    expect(wrapper.get('p.text-m-success').text()).toBe('Selection success')
+  })
+
+  it('prioritizes error over success', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {
+        modelValue: null,
+        options,
+        error: 'Selection error',
+        success: 'Selection success',
+      },
+    })
+
+    expect(wrapper.get('button').classes()).toContain('border-m-error')
+    expect(wrapper.find('p.text-m-success').exists()).toBe(false)
+    expect(wrapper.get('p.text-m-error').text()).toBe('Selection error')
+  })
+})
diff --git a/app/components/malio/Select.vue b/app/components/malio/Select.vue
new file mode 100644
index 0000000..67a5215
--- /dev/null
+++ b/app/components/malio/Select.vue
@@ -0,0 +1,333 @@
+<template>
+  <div
+    ref="root"
+    class="relative mt-4 w-full"
+    :class="[minWidth, maxWidth]"
+  >
+    <button
+      :id="buttonId"
+      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-2 focus-visible:border-m-primary"
+      :class="[
+          hasError
+            ? isOpen
+              ? openDirection === 'down'
+                ? 'rounded-b-none !border-2 !border-m-error !border-b-0'
+                : 'rounded-t-none !border-2 !border-m-error !border-t-0'
+              : 'border-m-error'
+            : hasSuccess
+              ? isOpen
+                ? openDirection === 'down'
+                  ? 'rounded-b-none !border-2 !border-m-success !border-b-0'
+                  : 'rounded-t-none !border-2 !border-m-success !border-t-0'
+                : 'border-m-success'
+              : isOpen
+                ? openDirection === 'down'
+                  ? 'rounded-b-none !border-2 !border-m-primary !border-b-0'
+                  : 'rounded-t-none !border-2 !border-m-primary !border-t-0'
+                : 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',
+          rounded,
+          textField,
+  ]"
+      :aria-expanded="isOpen"
+      :aria-controls="listboxId"
+      :aria-invalid="hasError"
+      :aria-describedby="describedBy"
+      :disabled="disabled"
+      @click="toggle"
+    >
+      <label
+        v-if="label"
+        class="floating-label pointer-events-none absolute left-3 inline-block origin-left transition-transform duration-150 font-medium"
+        :class="[
+          isOpen ? 'top-2  z-30' : 'top-2',
+          hasError
+            ? 'text-m-error'
+            : hasSuccess
+              ? 'text-m-success'
+              : isOpen
+                ? 'text-m-primary'
+                : isOptionSelected
+                  ? 'text-black'
+                  : 'text-m-muted',
+          textLabel,
+        ]"
+        :style="labelTransformStyle"
+      >
+        {{ label }}
+      </label>
+
+      <span
+        class="block truncate"
+        :class="[
+          textValue,
+          isOptionSelected ? 'text-black' : 'select-none text-transparent'
+        ]"
+      >
+        {{ selectedLabel || '\u00A0' }}
+      </span>
+
+      <span
+        class="absolute right-3 top-1/2 -translate-y-1/2"
+        :class="[
+          hasError
+            ? 'text-m-error'
+            : hasSuccess
+              ? 'text-m-success'
+              : 'text-current'
+        ]"
+      >
+      <slot name="icon">
+        <IconifyIcon
+          icon="mdi:chevron-down"
+          width="20"
+          class="transition-transform duration-300"
+          :class="isOpen ? 'rotate-180' : 'rotate-0'"
+        />
+      </slot>
+    </span>
+    </button>
+
+    <ul
+      v-if="isOpen"
+      :id="listboxId"
+      ref="listRef"
+      role="listbox"
+      :aria-labelledby="buttonId"
+      class="absolute left-0 right-0 z-20 max-h-60 w-full overflow-auto border-2 bg-white"
+      :class="[
+        openDirection === 'down'
+          ? 'top-[calc(100%-2px)] rounded-b-md border-t-0'
+          : 'bottom-[calc(100%-2px)] rounded-t-md border-b-0',
+        hasError
+          ? 'select-scrollbar-error'
+          : hasSuccess
+            ? 'select-scrollbar-success'
+            : 'select-scrollbar-primary',
+        hasError
+          ? 'border-m-error'
+          : hasSuccess
+            ? 'border-m-success'
+            : 'border-m-primary'
+      ]"
+    >
+      <li
+        v-for="(opt, index) in normalizedOptions"
+        :id="optionId(index)"
+        :key="String(opt.value)"
+        role="option"
+        :aria-selected="opt.value === modelValue"
+        class="cursor-pointer px-3 py-2"
+        :class="[
+            index === activeIndex ? 'bg-m-muted/10' : '',
+            opt.value === modelValue ? 'bg-m-muted/10 font-semibold' : '',
+            opt.value === null ? 'text-black/40' : 'text-black'
+          ]"
+        @mouseenter="activeIndex = index"
+        @mousedown.prevent
+        @click="select(opt.value)"
+      >
+        {{ opt.label || '\u00A0' }}
+      </li>
+    </ul>
+  </div>
+  <p
+    v-if="hint || hasError || hasSuccess"
+    :id="`${buttonId}-describedby`"
+    :class="[
+      hasError
+        ? 'text-m-error'
+        : hasSuccess
+          ? 'text-m-success'
+          : 'text-m-muted',
+      'mt-1 ml-[2px] text-xs',
+    ]"
+  >
+    {{ error || success || hint }}
+  </p>
+</template>
+
+<script setup lang="ts">
+import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick} from 'vue'
+import {Icon as IconifyIcon} from '@iconify/vue'
+
+defineOptions({name: 'MalioSelect', inheritAttrs: false})
+
+type Option = {
+  label: string;
+  value: string | number | null
+}
+const props = withDefaults(defineProps<{
+  modelValue: string | number | null
+  options?: Option[]
+  emptyOptionLabel?: string
+  label?: string
+  hint?: string
+  error?: string
+  success?: string
+  minWidth?: string
+  maxWidth?: string
+  textField?: string
+  textValue?: string
+  textLabel?: string
+  rounded?: string
+  disabled?: boolean
+}>(), {
+  options: () => [],
+  emptyOptionLabel: '',
+  label: '',
+  hint: '',
+  error: '',
+  success: '',
+  minWidth: 'w-96',
+  maxWidth: '',
+  textField: 'text-lg',
+  textValue: 'text-lg',
+  textLabel: 'text-sm',
+  rounded: 'rounded-md',
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: string | number | null): void
+}>()
+const root = ref<HTMLElement | null>(null)
+const isOpen = ref(false)
+const activeIndex = ref(-1)
+const openDirection = ref<'down' | 'up'>('down')
+const uid = useId()
+const buttonId = `custom-select-btn-${uid}`
+const listboxId = `custom-select-listbox-${uid}`
+const listRef = ref<HTMLElement | null>(null)
+const listHeight = ref(0)
+const normalizedOptions = computed<Option[]>(() => [
+  {label: props.emptyOptionLabel, value: null},
+  ...props.options,
+])
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!props.success && !hasError.value)
+const isOptionSelected = computed(() =>
+  props.options.some(o => o.value === props.modelValue)
+)
+const shouldFloatLabel = computed(() =>
+  isOpen.value || isOptionSelected.value
+)
+const selectedLabel = computed(() =>
+  props.options.find(o => o.value === props.modelValue)?.label ?? ''
+)
+const describedBy = computed(() =>
+  (hasError.value || hasSuccess.value || !!props.hint) ? `${buttonId}-describedby` : undefined,
+)
+
+function optionId(index: number) {
+  return `custom-select-opt-${uid}-${index}`
+}
+
+function updateOpenDirection() {
+  if (!root.value) return
+
+  const rect = root.value.getBoundingClientRect()
+  const estimatedListHeight = Math.min(normalizedOptions.value.length * 40, 240)
+  const spaceBelow = window.innerHeight - rect.bottom
+  const spaceAbove = rect.top
+
+  openDirection.value =
+    spaceBelow >= estimatedListHeight || spaceBelow >= spaceAbove
+      ? 'down'
+      : 'up'
+}
+
+function open() {
+  updateOpenDirection()
+  isOpen.value = true
+
+  const selectedIndex = normalizedOptions.value.findIndex(o => o.value === props.modelValue)
+  activeIndex.value = selectedIndex >= 0 ? selectedIndex : 0
+
+  nextTick(() => {
+    if (openDirection.value === 'up' && listRef.value) {
+      listHeight.value = listRef.value.offsetHeight
+    } else {
+      listHeight.value = 0
+    }
+  })
+}
+
+const labelTransformStyle = computed(() => {
+  // label non flottant
+  if (!shouldFloatLabel.value) {
+    return {}
+  }
+
+  // fermé ou ouverture vers le bas : comportement classique
+  if (!isOpen.value || openDirection.value === 'down') {
+    return {
+      transform: 'translateY(-1.15rem) scale(0.9)',
+    }
+  }
+
+  // ouverture vers le haut : on remonte en fonction de la hauteur de la liste
+  const extraOffset = 8 // marge visuelle au-dessus de la liste en px
+  const total = 4 +listHeight.value + extraOffset
+  // 18 ≈ 1.15rem pour garder la même base que votre flottant actuel
+
+  return {
+    transform: `translateY(-${total}px) scale(0.9)`,
+  }
+})
+
+function close() {
+  isOpen.value = false
+}
+
+function toggle() {
+  if (props.disabled) return
+  if (isOpen.value) {
+    close()
+    return
+  }
+  open()
+}
+
+function select(value: string | number | null) {
+  emit('update:modelValue', value)
+  close()
+}
+
+function onClickOutside(e: MouseEvent) {
+  if (!root.value) return
+  if (!root.value.contains(e.target as Node)) close()
+}
+
+onMounted(() => document.addEventListener('mousedown', onClickOutside))
+onBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))
+</script>
+
+<style scoped>
+.floating-label {
+  background: white;
+  padding: 0 0.25rem;
+}
+
+:deep(ul[role="listbox"]) {
+  scrollbar-width: auto;
+  scrollbar-gutter: stable;
+}
+
+:deep(.select-scrollbar-primary) {
+  scrollbar-color: rgb(var(--m-primary)) transparent;
+}
+
+:deep(.select-scrollbar-error) {
+  scrollbar-color: #000000 transparent;
+}
+
+:deep(.select-scrollbar-success) {
+  scrollbar-color: #000000 transparent;
+}
+
+</style>
diff --git a/app/story/InputSelect.story.vue b/app/story/InputSelect.story.vue
new file mode 100644
index 0000000..7939beb
--- /dev/null
+++ b/app/story/InputSelect.story.vue
@@ -0,0 +1,148 @@
+<template>
+  <Story
+    title="Select"
+  >
+      <MalioSelect
+        v-model="value"
+        :options="options"
+      />
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioSelect
+
+Composant select personnalisé avec label flottant, option vide,
+états visuels selon la sélection et ouverture/fermeture contrôlée.
+
+------------------------------------------------------------------------
+
+## Props détaillées
+
+### modelValue
+
+-   Type: string | number | null
+-   Description: Valeur actuellement sélectionnée.
+-   Comportement:
+-   Compatible avec `v-model`.
+-   Peut valoir `null` pour représenter l’option vide.
+
+### options
+
+-   Type: Array<{ label: string; value: string | number | null }>
+-   Description: Liste des options affichées dans le menu.
+-   Défaut: tableau vide.
+
+### emptyOptionLabel
+
+-   Type: string
+-   Description: Texte de l’option vide injectée automatiquement.
+-   Comportement:
+-   Cette option porte toujours la valeur `null`.
+-   Si la prop est vide, l’option reste visuellement discrète.
+
+### label
+
+-   Type: string
+-   Description: Texte affiché comme label flottant au-dessus du champ.
+-   Comportement: Si absent, aucun label n’est rendu.
+
+------------------------------------------------------------------------
+
+## Apparence & Style
+
+### textField
+
+-   Type: string
+-   Description: Classes CSS appliquées au bouton du select.
+
+### textValue
+
+-   Type: string
+-   Description: Classes CSS appliquées à la valeur affichée.
+
+### textLabel
+
+-   Type: string
+-   Description: Classes CSS appliquées au label flottant.
+
+### rounded
+
+-   Type: string
+-   Description: Classe Tailwind pour le border-radius.
+-   Défaut: rounded-md
+
+### minWidth / maxWidth
+
+-   Type: string
+-   Description: Classes utilitaires Tailwind pour contraindre la
+largeur.
+
+------------------------------------------------------------------------
+
+## Interaction
+
+### disabled
+
+-   Type: boolean
+-   Description: Désactive complètement le composant.
+-   Effet:
+-   Empêche l’ouverture du menu.
+-   Applique un style visuel désactivé.
+
+------------------------------------------------------------------------
+
+## Comportement visuel
+
+-   Au repos sans sélection: bordure grise.
+-   Ouvert: bordure et label en couleur primaire.
+-   Fermé avec valeur sélectionnée: bordure et texte en noir.
+-   L’option vide dans la liste peut être stylée différemment pour être
+    distinguée des autres.
+
+------------------------------------------------------------------------
+
+## Accessibilité
+
+-   Le bouton porte `aria-expanded` et `aria-controls`.
+-   La liste utilise `role="listbox"`.
+-   Chaque option utilise `role="option"` et `aria-selected`.
+
+------------------------------------------------------------------------
+
+## Events
+
+### update:modelValue
+
+-   Émis à chaque sélection dans la liste.
+-   Permet l’utilisation avec v-model.
+-   Peut émettre `null` si l’option vide est sélectionnée.
+
+</docs>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import MalioSelect from '../components/malio/Select.vue'
+const value = ref<string | number | null>(null)
+const options = [
+  { label: 'France', value: 'fr' },
+  { label: 'Belgique', value: 'be' },
+  { label: 'Suisse', value: 'ch' },
+  { label: 'Canada', value: 'ca' },
+  { label: 'Allemagne', value: 'de' },
+  { label: 'Espagne', value: 'es' },
+  { label: 'Italie', value: 'it' },
+  { label: 'Portugal', value: 'pt' },
+  { label: 'Pays-Bas', value: 'nl' },
+  { label: 'Suède', value: 'se' },
+  { label: 'Norvège', value: 'no' },
+  { label: 'Danemark', value: 'dk' },
+  { label: 'Finlande', value: 'fi' },
+  { label: 'Autriche', value: 'at' },
+  { label: 'Irlande', value: 'ie' },
+  { label: 'Grèce', value: 'gr' },
+  { label: 'Pologne', value: 'pl' },
+  { label: 'Hongrie', value: 'hu' },
+  { label: 'République tchèque', value: 'cz' },
+]
+</script>
diff --git a/package-lock.json b/package-lock.json
index 4d9267a..0d4c941 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,8 @@
       "dependencies": {
         "@nuxt/icon": "^2.2.1",
         "@nuxtjs/tailwindcss": "^6.14.0",
-        "maska": "^3.2.0"
+        "maska": "^3.2.0",
+        "tailwind-merge": "^3.3.1"
       },
       "devDependencies": {
         "@histoire/plugin-vue": "^1.0.0-beta.1",
@@ -15122,6 +15123,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.5.0.tgz",
+      "integrity": "sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.19",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
diff --git a/package.json b/package.json
index 49cf44f..0fa4b2d 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
   "dependencies": {
     "@nuxt/icon": "^2.2.1",
     "@nuxtjs/tailwindcss": "^6.14.0",
-    "maska": "^3.2.0"
+    "maska": "^3.2.0",
+    "tailwind-merge": "^3.3.1"
   }
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index bc5b42e..61735b1 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -7,11 +7,6 @@ export default {
     './histoire.setup.ts',
     './histoire.config.ts',
   ],
-  safelist: [
-    {
-      pattern: /(sm:|md:|lg:|xl:|2xl:)?(text|rounded|w|min-w|max-w)-.+/,
-    },
-  ],
   theme: {
     extend: {
       borderRadius: {
-- 
2.39.5