@dnax/ui 0.0.72 → 0.0.75

package/components/QBtnDropdown.vue

@@ -31,6 +31,7 @@ export interface DropdownItem {
 import { computed } from "vue"
 import type { StyleValue } from "vue"
 import QBtnActions, { type DropdownPosition } from "./QBtnActions.vue"
+import { useRadius } from "../lib/useComponentProps"
 import type { RadiusProp } from "../lib/useComponentProps"
 
 interface Props {
@@ -115,6 +116,12 @@ const mappedActions = computed(() =>
 )
 
 const onSelectAction = (value: any) => emit("select", value)
+
+// radius : prop explicite > composantProps.QBtnDropdown > composantProps.default.
+// On transmet la valeur **résolue** (et non la prop brute) pour que
+// `componentProps.QBtnDropdown.radius` ne soit pas ignoré au profit de celui du
+// moteur QBtnActions.
+const effectiveRadius = useRadius("QBtnDropdown", () => props.radius)
 </script>
 
 <template>
@@ -134,7 +141,7 @@ const onSelectAction = (value: any) => emit("select", value)
     :color="color"
     :text-color="textColor"
     :size="size"
-    :radius="radius"
+    :radius="effectiveRadius"
     :flat="flat"
     :outline="outline"
     :unelevated="unelevated"

package/components/QCard.vue

@@ -3,7 +3,7 @@
 // Pas d'ombre par défaut ; elevated l'ajoute, flat la retire explicitement.
 // Slots : default, media (zone image en haut), actions (zone actions en bas)
 import { computed } from "vue"
-import { radiusStyle, useRadius } from "../lib/useComponentProps"
+import { radiusStyleNative, useRadius } from "../lib/useComponentProps"
 import type { RadiusProp } from "../lib/useComponentProps"
 
 interface Props {
@@ -35,9 +35,9 @@ const props = withDefaults(defineProps<Props>(), {
   hover: false,
 })
 
-// radius : prop explicite > composantProps.QCard.radius ; échelle → --q-radius
+// radius : prop explicite > composantProps.QCard.radius ; échelle → --q-radius (true = md)
 const effectiveRadius = useRadius("QCard", () => props.radius)
-const roundedStyle = computed(() => radiusStyle(effectiveRadius.value))
+const roundedStyle = computed(() => radiusStyleNative(effectiveRadius.value))
 </script>
 
 <template>

package/components/QDialog.vue

@@ -14,7 +14,7 @@ export const qDialogKey: InjectionKey<DialogContext> = Symbol("q-dialog")
 import { computed, onBeforeUnmount, onMounted, provide, watch } from "vue"
 import type { StyleValue } from "vue"
 import { cn } from "../lib/utils"
-import { radiusStyle, useRadius } from "../lib/useComponentProps"
+import { radiusStyleNative, useRadius } from "../lib/useComponentProps"
 import type { RadiusProp } from "../lib/useComponentProps"
 import { useOverlayBack } from "../lib/overlayBack"
 import { markOverlayClose } from "../lib/closeOverlay"
@@ -150,7 +150,7 @@ const overlayClasses = computed(() => cn("q-dialog__overlay", `q-dialog__overlay
 
 // radius : prop explicite > composantProps.QDialog.radius ; échelle → --q-radius
 const effectiveRadius = useRadius("QDialog", () => props.radius)
-const roundedStyle = computed(() => radiusStyle(effectiveRadius.value))
+const roundedStyle = computed(() => radiusStyleNative(effectiveRadius.value))
 
 const contentClasses = computed(() =>
   cn(

package/components/QGridItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-// QGridItem — cellule de la grille style Vant : <q-grid-item icon="lucide:photo" text="Photos" badge="3" />
+// QGridItem — cellule de la grille style Vant : <q-grid-item icon="lucide:image" text="Photos" badge="3" />
 // À utiliser dans <q-grid :column-num="…">. Affiche une icône (ou un slot) + un
 // texte, avec badge / point de notification, effet cliquable et navigation (href).
 import { computed } from "vue"

package/components/QImg.vue

@@ -77,8 +77,10 @@ const imageClasses = computed(() =>
 )
 
 // radius : prop explicite > composantProps.QImg > composantProps.default → --q-radius
+// `true` = pilule (forme native documentée) → classe dédiée, pas un `--q-radius`
 const effectiveRadius = useRadius("QImg", () => props.radius)
 const roundedStyle = computed(() => radiusStyle(effectiveRadius.value))
+const roundedClass = computed(() => (effectiveRadius.value === true ? "q-img--rounded" : undefined))
 
 const imageStyle = computed(() => `${props.imgStyle}; object-position: ${props.position}`)
 
@@ -101,7 +103,7 @@ const showLoading = computed(() => props.loading || imgLoading.value)
 </script>
 
 <template>
-  <div class="q-img" :style="[containerStyle, roundedStyle]">
+  <div class="q-img" :class="roundedClass" :style="[containerStyle, roundedStyle]">
     <!-- Placeholder basse résolution pendant le chargement -->
     <img
       v-if="placeholderSrc && imgLoading && !imgError"

package/components/QInput.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 // QInput — API Quasar : <q-input v-model="…" label="Email" outlined dense clearable counter maxlength="60" hint error error-message />
 // Variants : outlined (défaut) | filled | borderless ; le label est toujours affiché au-dessus du champ.
-import { computed, nextTick, ref, watch } from "vue"
+// Multiligne : `autogrow` (auto-extension plafonnée à `max-rows`), `rows` (lignes visibles)
+// ou `resize` — pour un champ multiligne complet, préférer `<q-input-textarea>`.
+import { computed, ref } from "vue"
 import { Icon } from "@iconify/vue"
 import { icons } from "../lib/icons"
 import { cn } from "../lib/utils"
 import { radiusStyle, useRadius } from "../lib/useComponentProps"
 import type { RadiusProp } from "../lib/useComponentProps"
+import { useTextareaAutosize } from "../lib/useTextareaAutosize"
 
 interface Props {
   modelValue?: string | number | null
@@ -33,7 +36,7 @@ interface Props {
   iconLeft?: string
   /** Icône Iconify à droite (remplacée par le slot #append s'il est fourni) */
   iconRight?: string
-  /** Masque de saisie : # = chiffre, A = lettre, N = alphanumérique, X = quelconque (ex. "##-##-##") */
+  /** Masque de saisie : # = chiffre, A = lettre, N = alphanumérique, X = quelconque (ex. "##-##-##") — ignoré en mode textarea */
   mask?: string
   /** Remplit les emplacements vides par "_" (défaut : la saisie s'arrête au dernier caractère) */
   fillMask?: boolean
@@ -51,8 +54,16 @@ interface Props {
   radius?: RadiusProp
   /** Hauteur réduite */
   dense?: boolean
-  /** Textarea à hauteur auto */
+  /** Textarea à hauteur auto, plafonné à `maxRows` lignes */
   autogrow?: boolean
+  /** Nombre de lignes visibles (textarea) — `> 1` bascule le champ en multiligne */
+  rows?: number
+  /** Plafond d'auto-extension en lignes, 0 = illimité : au-delà, le champ défile */
+  maxRows?: number
+  /** Redimensionnement manuel du textarea (sans effet en `autogrow`) */
+  resize?: "none" | "vertical" | "both"
+  /** Attribut autocomplete transmis au champ natif */
+  autocomplete?: string
   disable?: boolean
   readonly?: boolean
   placeholder?: string
@@ -69,6 +80,9 @@ const props = withDefaults(defineProps<Props>(), {
   borderless: false,
   dense: false,
   autogrow: false,
+  rows: 1,
+  maxRows: 0,
+  resize: "none",
   disable: false,
   readonly: false,
   fillMask: false,
@@ -93,6 +107,17 @@ const roundedStyle = computed(() => radiusStyle(effectiveRadius.value))
 
 const value = computed(() => props.modelValue ?? "")
 
+// Le champ est multiligne dès qu'on demande plusieurs lignes, une auto-extension ou
+// un redimensionnement manuel — un `<input>` n'a ni hauteur de plusieurs lignes ni
+// poignée de redimensionnement.
+const isTextarea = computed(
+  () => props.autogrow || props.rows > 1 || props.resize !== "none",
+)
+
+// Un masque de saisie n'a pas de sens sur du multiligne (il supprime les retours à
+// la ligne) : il est ignoré en mode textarea.
+const maskEnabled = computed(() => Boolean(props.mask) && !isTextarea.value)
+
 // ═════════ Masque de saisie : # chiffre, A lettre, N alphanumérique, X quelconque ═════════
 const isToken = (c: string): boolean => c === "#" || c === "A" || c === "N" || c === "X"
 
@@ -107,7 +132,7 @@ const matchesToken = (tok: string, c: string): boolean =>
 
 /** Extrait les caractères réels (emplacements tokens) d'une valeur affichée masquée. */
 const unmask = (v: string, fill: boolean): string => {
-  if (!props.mask) return v
+  if (!maskEnabled.value || !props.mask) return v
   let out = ""
   let vi = 0
   for (const ch of props.mask) {
@@ -126,7 +151,7 @@ const unmask = (v: string, fill: boolean): string => {
 
 /** Applique le masque à une chaîne de caractères bruts (littéraux insérés, caractères invalides sautés). */
 const mask = (raw: string, fill: boolean): string => {
-  if (!props.mask) return raw
+  if (!maskEnabled.value || !props.mask) return raw
   let out = ""
   let ri = 0
   for (const ch of props.mask) {
@@ -151,7 +176,7 @@ const mask = (raw: string, fill: boolean): string => {
 /** Valeur affichée dans le champ : applique le masque au modelValue (brut si unmaskedValue). */
 const displayValue = computed(() => {
   const v = String(props.modelValue ?? "")
-  if (!props.mask) return v
+  if (!maskEnabled.value) return v
   const raw = props.unmaskedValue ? v : unmask(v, props.fillMask)
   return mask(raw, props.fillMask)
 })
@@ -169,24 +194,33 @@ const fieldClasses = computed(() =>
     props.error && "q-field--error",
     props.disable && "q-field--disabled",
     floatActive.value && "q-field--float",
+    isTextarea.value && "q-input--textarea",
   ),
 )
 
-const resizeTextarea = async () => {
-  const el = nativeEl.value
-  if (el && props.autogrow) {
-    await nextTick()
-    el.style.height = "auto"
-    el.style.height = `${el.scrollHeight}px`
-  }
-}
+// Auto-extension : la mesure et le plafond `maxRows` sont délégués au composable
+// (calcul pur dans `lib/textarea.ts`). `observeWidth: false` — en mode `<input>`
+// l'élément observé serait remplacé au changement de mode.
+const { resize } = useTextareaAutosize(nativeEl, {
+  enabled: () => props.autogrow,
+  maxRows: () => props.maxRows,
+  sources: () => [value.value, props.rows, props.maxRows, props.autogrow],
+  observeWidth: false,
+})
+
+// `resize` exposé (onglet Methods de la doc) : re-mesure forcée après un
+// changement de contenu fait hors du cycle normal (ex. valeur posée par le parent).
+defineExpose({ resize })
 
-watch(value, resizeTextarea)
+// `resize` n'a de sens que sans auto-extension (sinon les deux pilotent la hauteur).
+const textareaStyle = computed(() =>
+  props.resize === "none" || props.autogrow ? undefined : { resize: props.resize },
+)
 
 const onInput = (e: Event) => {
   const el = e.target as HTMLInputElement | HTMLTextAreaElement
   const raw = el.value
-  if (!props.mask) {
+  if (!maskEnabled.value) {
     emit("update:modelValue", raw)
     return
   }
@@ -218,13 +252,17 @@ const showClear = computed(
   () => props.clearable && !props.disable && !props.readonly && value.value !== "",
 )
 
-const inputAttrs = computed(() => ({
-  type: props.type,
+const commonAttrs = computed(() => ({
   maxlength: props.maxlength,
   placeholder: props.placeholder,
+  autocomplete: props.autocomplete,
   disabled: props.disable || undefined,
   readonly: props.readonly || undefined,
 }))
+
+// `type` n'est valide que sur `<input>` : sur un `<textarea>` c'est un attribut
+// invalide (et sans effet) — on ne le transmet pas.
+const inputAttrs = computed(() => ({ ...commonAttrs.value, type: props.type }))
 </script>
 
 <template>
@@ -236,12 +274,13 @@ const inputAttrs = computed(() => ({
       </slot>
       <span v-if="prefix" class="q-field__prefix">{{ prefix }}</span>
       <textarea
-        v-if="autogrow"
+        v-if="isTextarea"
         ref="nativeEl"
         class="q-field__native"
         :value="displayValue"
-        rows="1"
-        v-bind="inputAttrs"
+        :rows="rows"
+        :style="textareaStyle"
+        v-bind="commonAttrs"
         @input="onInput"
         @focus="onFocus"
         @blur="onBlur"

package/components/QInputOtp.vue

@@ -190,6 +190,8 @@ const rootClasses = computed(() =>
     props.dense && "q-field--dense",
     props.error && "q-field--error",
     props.disable && "q-field--disabled",
+    // `radius: true` = pilule (forme native documentée)
+    effectiveRadius.value === true && "q-input-otp--rounded",
   ),
 )
 

package/components/QInputTextarea.vue

@@ -0,0 +1,211 @@
+<script setup lang="ts">
+// QInputTextarea — champ multiligne dédié : <q-input-textarea v-model="bio" label="Bio" :rows="3" />
+// Contrairement à `q-input` (qui bascule entre `<input>` et `<textarea>`), ce composant
+// est un textarea **seul** : lignes visibles (`rows`), plafond d'auto-extension
+// (`maxRows`), redimensionnement manuel (`resize`), compteur et états — avec le
+// vocabulaire de champ commun (outlined / filled / borderless / dense / radius / error).
+import { computed, ref } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import { cn } from "../lib/utils"
+import { radiusStyle, useRadius } from "../lib/useComponentProps"
+import type { RadiusProp } from "../lib/useComponentProps"
+import { useTextareaAutosize } from "../lib/useTextareaAutosize"
+
+interface Props {
+  modelValue?: string | number | null
+  /** Label affiché au-dessus du champ */
+  label?: string
+  /** Aide affichée sous le champ */
+  hint?: string
+  /** État d'erreur */
+  error?: boolean
+  /** Message d'erreur (affiché quand error) */
+  errorMessage?: string
+  /** Affiche le compteur de caractères (nécessite maxlength) */
+  counter?: boolean
+  maxlength?: number
+  /** Nombre de lignes visibles (hauteur du champ hors auto-extension) */
+  rows?: number
+  /** Plafond d'auto-extension en lignes, 0 = illimité : au-delà, le champ défile */
+  maxRows?: number
+  /** Le champ grandit avec le contenu jusqu'à `maxRows`, puis défile */
+  autogrow?: boolean
+  /** Redimensionnement manuel (sans effet en `autogrow`) */
+  resize?: "none" | "vertical" | "both"
+  /** Bouton d'effacement */
+  clearable?: boolean
+  /** Bordure visible */
+  outlined?: boolean
+  /** Fond gris, soulignement */
+  filled?: boolean
+  /** Aucune bordure */
+  borderless?: boolean
+  /** Coins arrondis : true = pilule, ou échelle xs|sm|md|lg (none = carré) */
+  radius?: RadiusProp
+  /** Hauteur réduite */
+  dense?: boolean
+  disable?: boolean
+  readonly?: boolean
+  placeholder?: string
+  /** Préfixe dans le champ */
+  prefix?: string
+  /** Suffixe dans le champ */
+  suffix?: string
+  /** Icône Iconify à gauche (remplacée par le slot #prepend s'il est fourni) */
+  iconLeft?: string
+  /** Icône Iconify à droite (remplacée par le slot #append s'il est fourni) */
+  iconRight?: string
+  /** Attribut autocomplete du champ natif */
+  autocomplete?: string
+  /** Correction orthographique du navigateur */
+  spellcheck?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  rows: 3,
+  maxRows: 0,
+  autogrow: false,
+  resize: "none",
+  error: false,
+  counter: false,
+  clearable: false,
+  outlined: false,
+  filled: false,
+  borderless: false,
+  dense: false,
+  disable: false,
+  readonly: false,
+  spellcheck: false,
+})
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string]
+  focus: [event: FocusEvent]
+  blur: [event: FocusEvent]
+  clear: []
+  keyup: [event: KeyboardEvent]
+  keydown: [event: KeyboardEvent]
+}>()
+
+const focused = ref(false)
+const nativeEl = ref<HTMLTextAreaElement | null>(null)
+
+// radius : prop explicite > composantProps.QInputTextarea ; échelle → --q-radius
+const effectiveRadius = useRadius("QInputTextarea", () => props.radius)
+const roundedStyle = computed(() => radiusStyle(effectiveRadius.value))
+
+const value = computed(() => String(props.modelValue ?? ""))
+
+const fieldClasses = computed(() =>
+  cn(
+    "q-input-textarea",
+    props.outlined && "q-field--outlined",
+    props.filled && "q-field--filled",
+    props.borderless && "q-field--borderless",
+    effectiveRadius.value === true && "q-field--rounded",
+    props.dense && "q-field--dense",
+    props.error && "q-field--error",
+    props.disable && "q-field--disabled",
+    focused.value && "q-field--float",
+    props.autogrow && "q-input-textarea--autogrow",
+  ),
+)
+
+// Auto-extension : mesure + plafond `maxRows` (calcul pur dans `lib/textarea.ts`),
+// re-mesurée au montage, à chaque changement de valeur/lignes et au changement de
+// largeur (le texte se replie autrement).
+const { resize } = useTextareaAutosize(nativeEl, {
+  enabled: () => props.autogrow,
+  maxRows: () => props.maxRows,
+  sources: () => [value.value, props.rows, props.maxRows, props.autogrow],
+})
+
+// `resize` manuel inutile en auto-extension : les deux pilotent la hauteur.
+const textareaStyle = computed(() =>
+  props.resize === "none" || props.autogrow ? undefined : { resize: props.resize },
+)
+
+const showClear = computed(
+  () => props.clearable && !props.disable && !props.readonly && value.value !== "",
+)
+
+const onInput = (e: Event) => emit("update:modelValue", (e.target as HTMLTextAreaElement).value)
+
+const onFocus = (e: FocusEvent) => {
+  focused.value = true
+  emit("focus", e)
+}
+
+const onBlur = (e: FocusEvent) => {
+  focused.value = false
+  emit("blur", e)
+}
+
+const onClear = () => {
+  emit("update:modelValue", "")
+  emit("clear")
+  void resize()
+  nativeEl.value?.focus()
+}
+
+defineExpose({
+  focus: () => nativeEl.value?.focus(),
+  blur: () => nativeEl.value?.blur(),
+  resize: () => void resize(),
+})
+</script>
+
+<template>
+  <div class="q-input-textarea" :class="fieldClasses" :style="roundedStyle">
+    <label v-if="label" class="q-field__label-stack">{{ label }}</label>
+    <div class="q-field__control">
+      <slot name="prepend">
+        <Icon v-if="iconLeft" :icon="iconLeft" class="q-field__icon" aria-hidden="true" />
+      </slot>
+      <span v-if="prefix" class="q-field__prefix">{{ prefix }}</span>
+      <textarea
+        ref="nativeEl"
+        class="q-field__native"
+        :value="value"
+        :rows="rows"
+        :style="textareaStyle"
+        :maxlength="maxlength"
+        :placeholder="placeholder"
+        :autocomplete="autocomplete"
+        :spellcheck="spellcheck"
+        :disabled="disable || undefined"
+        :readonly="readonly || undefined"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+        @keyup="(e) => emit('keyup', e)"
+        @keydown="(e) => emit('keydown', e)"
+      />
+      <span v-if="suffix" class="q-field__suffix">{{ suffix }}</span>
+      <button
+        v-if="showClear"
+        class="q-field__clear"
+        type="button"
+        aria-label="Effacer"
+        @click="onClear"
+      >
+        <Icon :icon="icons.x" aria-hidden="true" />
+      </button>
+      <slot name="append">
+        <Icon v-if="iconRight" :icon="iconRight" class="q-field__icon" aria-hidden="true" />
+      </slot>
+    </div>
+    <div class="q-field__bottom">
+      <div v-if="error" class="q-field__error">
+        <slot name="error">{{ errorMessage }}</slot>
+      </div>
+      <div v-else-if="hint || $slots.hint" class="q-field__hint">
+        <slot name="hint">{{ hint }}</slot>
+      </div>
+      <div v-if="counter && maxlength" class="q-field__counter">
+        {{ value.length }}/{{ maxlength }}
+      </div>
+    </div>
+  </div>
+</template>

package/components/QSyntax.vue

@@ -8,7 +8,7 @@ import { createHighlighter, type Highlighter } from "shiki"
 import { createJavaScriptRegexEngine } from "shiki/engine/javascript"
 import { Icon } from "@iconify/vue"
 import { icons } from "../lib/icons"
-import { radiusStyle, useRadius } from "../lib/useComponentProps"
+import { radiusStyleNative, useRadius } from "../lib/useComponentProps"
 import type { RadiusProp } from "../lib/useComponentProps"
 
 const DEFAULT_THEME = "github-dark-default"
@@ -44,7 +44,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 // radius : prop explicite > composantProps.QSyntax.radius > composantProps.default.radius
 const effectiveRadius = useRadius("QSyntax", () => props.radius)
-const roundedStyle = computed(() => radiusStyle(effectiveRadius.value))
+const roundedStyle = computed(() => radiusStyleNative(effectiveRadius.value))
 
 const slots = useSlots()
 

package/components/QTable.vue

@@ -33,7 +33,7 @@ import { computed, getCurrentInstance, onBeforeUnmount, onMounted, ref, watch }
 import { Icon } from "@iconify/vue"
 import { icons } from "../lib/icons"
 import { cn } from "../lib/utils"
-import { radiusStyle, useRadius } from "../lib/useComponentProps"
+import { radiusStyleNative, useRadius } from "../lib/useComponentProps"
 import type { RadiusProp } from "../lib/useComponentProps"
 import QSelect from "./QSelect.vue"
 
@@ -437,7 +437,7 @@ const tableClasses = computed(() =>
 
 // radius : prop explicite > composantProps.QTable.radius > composantProps.default.radius
 const effectiveRadius = useRadius("QTable", () => props.radius)
-const roundedStyle = computed(() => radiusStyle(effectiveRadius.value))
+const roundedStyle = computed(() => radiusStyleNative(effectiveRadius.value))
 
 const sortThClass = computed(() => "q-table__sort")
 

package/index.ts

@@ -72,6 +72,7 @@ export { default as QInputCurrency } from "./components/QInputCurrency.vue"
 export { default as QInputOtp } from "./components/QInputOtp.vue"
 export { default as QInputPassword } from "./components/QInputPassword.vue"
 export { default as QInputTag } from "./components/QInputTag.vue"
+export { default as QInputTextarea } from "./components/QInputTextarea.vue"
 export { default as QInteract } from "./components/QInteract.vue"
 export { default as QIntersection } from "./components/QIntersection.vue"
 export { default as QItem } from "./components/QItem.vue"
@@ -203,6 +204,14 @@ export { DEFAULT_LAYOUT_VIEW, parseView, qLayoutKey } from "./lib/layout"
 export type { LayoutView, LayoutZone, LayoutZonePlacement, QLayoutContext } from "./lib/layout"
 export { vRipple } from "./lib/ripple"
 export type { RippleOptions, RippleValue } from "./lib/ripple"
+export { textareaCap, textareaMetrics, textareaSizing } from "./lib/textarea"
+export type { TextareaMetrics, TextareaSizing, TextareaComputedStyle } from "./lib/textarea"
+export { useTextareaAutosize } from "./lib/useTextareaAutosize"
+export type { TextareaAutosize, UseTextareaAutosizeOptions } from "./lib/useTextareaAutosize"
+export { iconsRegistered, registerIconSet, registerIcons } from "./lib/registerIcons"
+export { lucideIconSet } from "./lib/iconSet"
+export { icons } from "./lib/icons"
+export type { IconSetJson } from "./lib/icons"
 export { chartToECharts, channelValue, pickFromEvent, tableCsv, tableModel, textValue, tokenCss } from "./lib/chart"
 export type {
   QChartAxis,

package/lib/iconSet.test.ts

@@ -0,0 +1,61 @@
+// Icônes embarquées — garde-fou contre la dérive du fichier généré.
+//
+// `lib/iconSet.ts` est produit par `bun scripts/gen-icon-set.ts`. Si quelqu'un ajoute
+// un `lucide:…` dans un composant sans relancer le script, l'icône repasse
+// silencieusement par l'API Iconify (donc : absente du SSR et du mode hors ligne).
+// Ces tests échouent dans ce cas, sans navigateur ni réseau.
+import { readdirSync, readFileSync } from "node:fs"
+import { join } from "node:path"
+import { describe, expect, it } from "bun:test"
+import { icons } from "./icons"
+import { lucideIconSet } from "./iconSet"
+
+const ICON_NAME_RE = /\blucide:[a-z0-9]+(?:-[a-z0-9]+)*/g
+const componentsDir = join(import.meta.dir, "..", "components")
+
+const has = (name: string): boolean =>
+  name in lucideIconSet.icons || Boolean(lucideIconSet.aliases && name in lucideIconSet.aliases)
+
+const strip = (value: string): string => value.slice("lucide:".length)
+
+describe("lucideIconSet (généré)", () => {
+  it("est une collection lucide valide", () => {
+    expect(lucideIconSet.prefix).toBe("lucide")
+    expect(lucideIconSet.width).toBe(24)
+    expect(lucideIconSet.height).toBe(24)
+    expect(Object.keys(lucideIconSet.icons).length).toBeGreaterThan(0)
+    for (const [name, icon] of Object.entries(lucideIconSet.icons)) {
+      expect(name).not.toContain(":")
+      expect(icon.body.length).toBeGreaterThan(0)
+    }
+  })
+
+  it("contient toutes les icônes de `lib/icons.ts`", () => {
+    const missing = Object.values(icons)
+      .map(strip)
+      .filter((name) => !has(name))
+    expect(missing).toEqual([])
+  })
+
+  it("contient tous les `lucide:…` référencés dans les composants", () => {
+    const files = readdirSync(componentsDir, { recursive: true })
+      .map(String)
+      .filter((path) => path.endsWith(".vue"))
+      .map((path) => join(componentsDir, path))
+
+    const missing = new Set<string>()
+    for (const file of files) {
+      for (const match of readFileSync(file, "utf8").matchAll(ICON_NAME_RE)) {
+        const name = strip(match[0])
+        if (!has(name)) missing.add(name)
+      }
+    }
+    expect([...missing]).toEqual([])
+  })
+
+  it("embarque la parente de chaque alias", () => {
+    for (const alias of Object.values(lucideIconSet.aliases ?? {})) {
+      expect(alias.parent in lucideIconSet.icons).toBe(true)
+    }
+  })
+})