From 080525f4f2b3da04925ca74cc8a45352a9dc98eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stanislas=20Ormi=C3=A8res?= <stan@stormier.ninja>
Date: Mon, 13 Jan 2025 19:18:49 +0100
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=F0=9F=90=9B=20r=C3=A9duit=20les=20m?=
 =?UTF-8?q?ismatch,=20notamment=20des=20id?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- corrige le mismatch de DsfrSearchBar du DsfrHeader
- utilise [useId() de vue 3.5](https://vuejs.org/api/composition-api-helpers.html#useid)
  dans getRandomId()
---
 src/components/DsfrAccordion/DsfrAccordion.md         |  2 +-
 src/components/DsfrAccordion/DsfrAccordion.vue        |  4 ++--
 src/components/DsfrAlert/DsfrAlert.vue                |  4 ++--
 src/components/DsfrBreadcrumb/DsfrBreadcrumb.md       |  2 +-
 src/components/DsfrBreadcrumb/DsfrBreadcrumb.vue      |  4 ++--
 src/components/DsfrCheckbox/DsfrCheckbox.vue          |  4 ++--
 src/components/DsfrCheckbox/DsfrCheckboxSet.vue       |  4 ++--
 src/components/DsfrDataTable/DsfrDataTable.vue        |  4 ++--
 src/components/DsfrFileUpload/DsfrFileUpload.md       |  2 +-
 src/components/DsfrFileUpload/DsfrFileUpload.vue      |  4 ++--
 src/components/DsfrHeader/DsfrHeader.vue              |  2 +-
 src/components/DsfrInput/DsfrInput.md                 |  2 +-
 src/components/DsfrInput/DsfrInput.vue                |  4 ++--
 src/components/DsfrInput/DsfrInputGroup.md            |  2 +-
 src/components/DsfrInput/DsfrInputGroup.vue           |  4 ++--
 .../DsfrLanguageSelector/DsfrLanguageSelector.md      |  2 +-
 .../DsfrLanguageSelector/DsfrLanguageSelector.vue     |  4 ++--
 src/components/DsfrModal/DsfrModal.md                 |  2 +-
 src/components/DsfrModal/DsfrModal.vue                |  4 ++--
 src/components/DsfrMultiselect/DsfrMultiselect.vue    |  4 ++--
 src/components/DsfrNavigation/DsfrNavigation.vue      |  4 ++--
 src/components/DsfrNavigation/DsfrNavigationItem.vue  |  4 ++--
 .../DsfrNavigation/DsfrNavigationMegaMenu.vue         |  4 ++--
 src/components/DsfrNavigation/DsfrNavigationMenu.vue  |  4 ++--
 .../DsfrNavigation/DsfrNavigationMenuItem.vue         |  4 ++--
 .../DsfrNavigation/DsfrNavigationMenuLink.vue         |  4 ++--
 src/components/DsfrRadioButton/DsfrRadioButton.vue    |  4 ++--
 src/components/DsfrRadioButton/DsfrRadioButtonSet.vue |  4 ++--
 src/components/DsfrRange/DsfrRange.md                 |  2 +-
 src/components/DsfrRange/DsfrRange.vue                |  4 ++--
 src/components/DsfrSearchBar/DsfrSearchBar.md         |  2 +-
 src/components/DsfrSearchBar/DsfrSearchBar.vue        |  4 ++--
 src/components/DsfrSegmented/DsfrSegmented.vue        |  4 ++--
 src/components/DsfrSegmented/DsfrSegmentedSet.vue     |  6 +++---
 src/components/DsfrSelect/DsfrSelect.md               |  2 +-
 src/components/DsfrSelect/DsfrSelect.vue              |  4 ++--
 src/components/DsfrSideMenu/DsfrSideMenu.vue          |  6 +++---
 src/components/DsfrTable/DsfrTable.vue                |  4 ++--
 src/components/DsfrTabs/DsfrTabs.vue                  |  4 ++--
 src/components/DsfrToggleSwitch/DsfrToggleSwitch.md   |  2 +-
 src/components/DsfrToggleSwitch/DsfrToggleSwitch.vue  |  4 ++--
 src/components/DsfrTooltip/DsfrTooltip.md             |  2 +-
 src/components/DsfrTooltip/DsfrTooltip.vue            |  4 ++--
 src/components/DsfrTranscription/DsfrTranscription.md |  2 +-
 .../DsfrTranscription/DsfrTranscription.vue           |  4 ++--
 src/utils/random-utils.ts                             | 11 +++++++++--
 46 files changed, 87 insertions(+), 80 deletions(-)

diff --git a/src/components/DsfrAccordion/DsfrAccordion.md b/src/components/DsfrAccordion/DsfrAccordion.md
index a9cedb05..0ecd9358 100644
--- a/src/components/DsfrAccordion/DsfrAccordion.md
+++ b/src/components/DsfrAccordion/DsfrAccordion.md
@@ -26,7 +26,7 @@ Autres props :
 
 |  Nom                    |   Type                                    |  Défaut          | Obligatoire  |
 | ----------------------- | ----------------------------------------- | ---------------- | -------------|
-| `title`                 | *`string`*                                | `getRandomId('accordion')`                 | ✅           |
+| `title`                 | *`string`*                                | `useRandomId('accordion')`                 | ✅           |
 | `titleTag`              | [*`TitleTag`*](/docs/types.md#title-tag)  |    `'h3'`        |              |
 | `id`                    | *`string`*                                | *random string*  |              |
 
diff --git a/src/components/DsfrAccordion/DsfrAccordion.vue b/src/components/DsfrAccordion/DsfrAccordion.vue
index c4203d10..e99b323c 100644
--- a/src/components/DsfrAccordion/DsfrAccordion.vue
+++ b/src/components/DsfrAccordion/DsfrAccordion.vue
@@ -2,7 +2,7 @@
 import { inject, onMounted, ref, toRef, watch } from 'vue'
 
 import { useCollapsable } from '../../composables'
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import { registerAccordionKey } from './injection-key'
 import type { DsfrAccordionProps } from './DsfrAccordion.types'
@@ -12,7 +12,7 @@ export type { DsfrAccordionProps }
 const props = withDefaults(
   defineProps<DsfrAccordionProps>(),
   {
-    id: () => getRandomId('accordion'),
+    id: () => useRandomId('accordion'),
     title: 'Sans intitulé',
     titleTag: 'h3',
   },
diff --git a/src/components/DsfrAlert/DsfrAlert.vue b/src/components/DsfrAlert/DsfrAlert.vue
index db486321..bc53a624 100644
--- a/src/components/DsfrAlert/DsfrAlert.vue
+++ b/src/components/DsfrAlert/DsfrAlert.vue
@@ -3,12 +3,12 @@ import { computed } from 'vue'
 
 import type { DsfrAlertProps } from './DsfrAlert.types.js'
 
-import { getRandomId } from '@/utils/random-utils'
+import { useRandomId } from '@/utils/random-utils'
 
 export type { DsfrAlertProps, DsfrAlertType } from './DsfrAlert.types.js'
 
 const props = withDefaults(defineProps<DsfrAlertProps>(), {
-  id: () => getRandomId('basic', 'alert'),
+  id: () => useRandomId('basic', 'alert'),
   title: '',
   titleTag: 'h3',
   type: 'info',
diff --git a/src/components/DsfrBreadcrumb/DsfrBreadcrumb.md b/src/components/DsfrBreadcrumb/DsfrBreadcrumb.md
index c6f7cecb..a8ce53a6 100644
--- a/src/components/DsfrBreadcrumb/DsfrBreadcrumb.md
+++ b/src/components/DsfrBreadcrumb/DsfrBreadcrumb.md
@@ -22,7 +22,7 @@ Dans l’ordre, il se compose des éléments suivants :
 
 | Nom                 | Type   | Défaut                          | Description                                                                                                                                              |
 |---------------------|--------|---------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
-| breadcrumbId        | String | () => getRandomId('breadcrumb') | Identifiant unique pour le composant breadcrumb, généré automatiquement pour assurer l'accessibilité.                                                    |
+| breadcrumbId        | String | () => useRandomId('breadcrumb') | Identifiant unique pour le composant breadcrumb, généré automatiquement pour assurer l'accessibilité.                                                    |
 | links               | Array  | () => [{ text: '' }]            | Un tableau d'objets représentant les liens dans le fil d'Ariane. Chaque objet peut avoir une propriété 'text' et, optionnellement, 'to' pour les routes. |
 | navigationLabel     | String | `'vous êtes ici :'`             | Label affiché sur la balise `nav` du fil d’Ariane.                                                                                                       |
 | showBreadcrumbLabel | String | `'Voir le fil d’Ariane'`        | Label du bouton d'affichage du fil d’Ariane.                                                                                                             |
diff --git a/src/components/DsfrBreadcrumb/DsfrBreadcrumb.vue b/src/components/DsfrBreadcrumb/DsfrBreadcrumb.vue
index d56f64b4..b23abec8 100644
--- a/src/components/DsfrBreadcrumb/DsfrBreadcrumb.vue
+++ b/src/components/DsfrBreadcrumb/DsfrBreadcrumb.vue
@@ -2,14 +2,14 @@
 import { ref, watch } from 'vue'
 
 import { useCollapsable } from '../../composables'
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import type { DsfrBreadcrumbProps } from './DsfrBreadcrumb.types'
 
 export type { DsfrBreadcrumbProps }
 
 withDefaults(defineProps<DsfrBreadcrumbProps>(), {
-  breadcrumbId: () => getRandomId('breadcrumb'),
+  breadcrumbId: () => useRandomId('breadcrumb'),
   links: () => [{ text: '' }],
   navigationLabel: 'vous êtes ici :',
   showBreadcrumbLabel: 'Voir le fil d’Ariane',
diff --git a/src/components/DsfrCheckbox/DsfrCheckbox.vue b/src/components/DsfrCheckbox/DsfrCheckbox.vue
index 3fccfb0e..2938f15e 100644
--- a/src/components/DsfrCheckbox/DsfrCheckbox.vue
+++ b/src/components/DsfrCheckbox/DsfrCheckbox.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import type { DsfrCheckboxProps } from './DsfrCheckbox.types'
 
@@ -12,7 +12,7 @@ defineOptions({
 })
 
 const props = withDefaults(defineProps<DsfrCheckboxProps>(), {
-  id: () => getRandomId('basic', 'checkbox'),
+  id: () => useRandomId('basic', 'checkbox'),
   hint: '',
   errorMessage: '',
   validMessage: '',
diff --git a/src/components/DsfrCheckbox/DsfrCheckboxSet.vue b/src/components/DsfrCheckbox/DsfrCheckboxSet.vue
index ae29b5c1..937c55e0 100644
--- a/src/components/DsfrCheckbox/DsfrCheckboxSet.vue
+++ b/src/components/DsfrCheckbox/DsfrCheckboxSet.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { computed } from 'vue'
 
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import DsfrCheckbox from './DsfrCheckbox.vue'
 import type { DsfrCheckboxSetProps } from './DsfrCheckbox.types'
@@ -11,7 +11,7 @@ export type { DsfrCheckboxSetProps }
 
 <script lang="ts" setup>
 const props = withDefaults(defineProps<DsfrCheckboxSetProps>(), {
-  titleId: () => getRandomId('checkbox', 'set'),
+  titleId: () => useRandomId('checkbox', 'set'),
   errorMessage: '',
   validMessage: '',
   legend: '',
diff --git a/src/components/DsfrDataTable/DsfrDataTable.vue b/src/components/DsfrDataTable/DsfrDataTable.vue
index 77df8924..de58ce1a 100644
--- a/src/components/DsfrDataTable/DsfrDataTable.vue
+++ b/src/components/DsfrDataTable/DsfrDataTable.vue
@@ -4,7 +4,7 @@ import { computed } from 'vue'
 import DsfrPagination from '../DsfrPagination/DsfrPagination.vue'
 import VIcon from '../VIcon/VIcon.vue'
 
-import { getRandomId } from '@/utils/random-utils'
+import { useRandomId } from '@/utils/random-utils'
 
 export type Page = { href?: string, label: string, title: string }
 
@@ -39,7 +39,7 @@ export type DsfrDataTableProps = {
 }
 
 const props = withDefaults(defineProps<DsfrDataTableProps>(), {
-  id: () => getRandomId('table'),
+  id: () => useRandomId('table'),
   topActionsRow: () => [],
   bottomActionsRow: () => [],
   currentPage: 0,
diff --git a/src/components/DsfrFileUpload/DsfrFileUpload.md b/src/components/DsfrFileUpload/DsfrFileUpload.md
index 6285b3a2..7ff9a892 100644
--- a/src/components/DsfrFileUpload/DsfrFileUpload.md
+++ b/src/components/DsfrFileUpload/DsfrFileUpload.md
@@ -12,7 +12,7 @@ Bienvenue dans la documentation du composant `DsfrFileUpload`. Ce composant est
 
 | Nom            | Type        | Défaut                  | Obligatoire   | Description                                                    |
 |----------------|-------------|-------------------------|---------------|----------------------------------------------------------------|
-| `id`           | `Function`  | `() => getRandomId(...)`|               | Identifiant unique pour le composant de téléchargement de fichier. Si non spécifié, un ID aléatoire est généré.    |
+| `id`           | `Function`  | `() => useRandomId(...)`|               | Identifiant unique pour le composant de téléchargement de fichier. Si non spécifié, un ID aléatoire est généré.    |
 | `label`        | `string`    | `'Ajouter un fichier'`  |               | Libellé pour le bouton de téléchargement de fichier.          |
 | `accept`       | `string \| string[]`  | `undefined`   |               | Types de fichiers acceptés, spécifiés sous forme de chaîne de caractères (comme l’attribut `accept` de HTML) ou d'un tableau de chaînes de caractères (qui sera transformé en chaîne).   |
 | `hint`         | `string`    | `''`                    |               | Texte d'indice pour guider l'utilisateur.                    |
diff --git a/src/components/DsfrFileUpload/DsfrFileUpload.vue b/src/components/DsfrFileUpload/DsfrFileUpload.vue
index 28665cc0..1b7b6c82 100644
--- a/src/components/DsfrFileUpload/DsfrFileUpload.vue
+++ b/src/components/DsfrFileUpload/DsfrFileUpload.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import type { DsfrFileUploadProps } from './DsfrFileUpload.types'
 
@@ -12,7 +12,7 @@ defineOptions({
 })
 
 const props = withDefaults(defineProps<DsfrFileUploadProps>(), {
-  id: () => getRandomId('file-upload'),
+  id: () => useRandomId('file-upload'),
   label: 'Ajouter un fichier',
   accept: undefined,
   hint: '',
diff --git a/src/components/DsfrHeader/DsfrHeader.vue b/src/components/DsfrHeader/DsfrHeader.vue
index d91fe96b..6259eab2 100644
--- a/src/components/DsfrHeader/DsfrHeader.vue
+++ b/src/components/DsfrHeader/DsfrHeader.vue
@@ -212,7 +212,7 @@ provide(registerNavigationLinkKey, () => {
               class="fr-header__search  fr-modal"
             >
               <DsfrSearchBar
-                :searchbar-id="searchbarId"
+                :id="searchbarId"
                 :label="searchLabel"
                 :model-value="modelValue"
                 :placeholder="placeholder"
diff --git a/src/components/DsfrInput/DsfrInput.md b/src/components/DsfrInput/DsfrInput.md
index f8171a25..4b9b2f19 100644
--- a/src/components/DsfrInput/DsfrInput.md
+++ b/src/components/DsfrInput/DsfrInput.md
@@ -8,7 +8,7 @@ Le composant `DsfrInput`, outil essentiel dans l'arsenal de tout développeur Vu
 
 | Nom             | Type          | Défaut                  | Obligatoire   | Description                                                                                                 |
 |-----------------|---------------|-------------------------|---------------|-------------------------------------------------------------------------------------------------------------|
-| `id`            | `Function`    | `() => getRandomId(...)`|               | Identifiant unique pour l'input. Si non spécifié, un ID aléatoire est généré.                               |
+| `id`            | `Function`    | `() => useRandomId(...)`|               | Identifiant unique pour l'input. Si non spécifié, un ID aléatoire est généré.                               |
 | `descriptionId` | `string`      | `undefined`             |               | ID pour la description associée à l'input. Utile pour l'accessibilité.                                      |
 | `hint`          | `string`      | `''`                    |               | Texte d'indice pour guider l'utilisateur.                                                                   |
 | `label`         | `string`      | `''`                    |               | Le libellé de l'input.                                                                                      |
diff --git a/src/components/DsfrInput/DsfrInput.vue b/src/components/DsfrInput/DsfrInput.vue
index be9303cc..ac2e659e 100644
--- a/src/components/DsfrInput/DsfrInput.vue
+++ b/src/components/DsfrInput/DsfrInput.vue
@@ -2,7 +2,7 @@
 import { computed, ref, useAttrs } from 'vue'
 import type { Ref } from 'vue'
 
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import type { DsfrInputProps } from './DsfrInput.types'
 
@@ -13,7 +13,7 @@ defineOptions({
 })
 
 const props = withDefaults(defineProps<DsfrInputProps>(), {
-  id: () => getRandomId('basic', 'input'),
+  id: () => useRandomId('basic', 'input'),
   descriptionId: undefined,
   hint: '',
   label: '',
diff --git a/src/components/DsfrInput/DsfrInputGroup.md b/src/components/DsfrInput/DsfrInputGroup.md
index 1f344333..d715d5e0 100644
--- a/src/components/DsfrInput/DsfrInputGroup.md
+++ b/src/components/DsfrInput/DsfrInputGroup.md
@@ -10,7 +10,7 @@ Ce composant est très utile si vous souhaitez afficher un message d’erreur ou
 
 | Nom             | Type        | Défaut                  | Obligatoire   | Description                                                   |
 |-----------------|-------------|-------------------------|---------------|---------------------------------------------------------------|
-| `descriptionId` | `Function`           | `() => getRandomId(...)`|               | ID unique pour la description du groupe, généré automatiquement si non spécifié. |
+| `descriptionId` | `Function`           | `() => useRandomId(...)`|               | ID unique pour la description du groupe, généré automatiquement si non spécifié. |
 | `hint`          | `string`             | `''`                    |               | Texte d'indice pour guider l'utilisateur dans le groupe de champs. |
 | `label`         | `string`             | `''`                    |               | Le libellé associé au groupe de champs.                       |
 | `labelClass`    | `string`             | `''`                    |               | Classe CSS personnalisée pour le style du libellé.            |
diff --git a/src/components/DsfrInput/DsfrInputGroup.vue b/src/components/DsfrInput/DsfrInputGroup.vue
index 96299336..dc66ddec 100644
--- a/src/components/DsfrInput/DsfrInputGroup.vue
+++ b/src/components/DsfrInput/DsfrInputGroup.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import DsfrInput from './DsfrInput.vue'
 import type { DsfrInputGroupProps } from './DsfrInput.types'
@@ -11,7 +11,7 @@ defineOptions({
 })
 
 withDefaults(defineProps<DsfrInputGroupProps>(), {
-  descriptionId: () => getRandomId('input', 'group'),
+  descriptionId: () => useRandomId('input', 'group'),
   hint: '',
   label: '',
   labelClass: '',
diff --git a/src/components/DsfrLanguageSelector/DsfrLanguageSelector.md b/src/components/DsfrLanguageSelector/DsfrLanguageSelector.md
index 35d92d7c..a0fcc05c 100644
--- a/src/components/DsfrLanguageSelector/DsfrLanguageSelector.md
+++ b/src/components/DsfrLanguageSelector/DsfrLanguageSelector.md
@@ -26,7 +26,7 @@ Ce composant est utilisé en interne dans [DsfrHeader](/composants/DsfrHeader) (
 
 | Propriété          | Type                          | Description                                                   | Valeur par défaut         |
 |--------------------|-------------------------------|---------------------------------------------------------------|---------------------------|
-| `id`               | `string`                      | Identifiant unique pour les éléments de contrôle d'accessibilité. | `getRandomId('language-selector')` |
+| `id`               | `string`                      | Identifiant unique pour les éléments de contrôle d'accessibilité. | `useRandomId('language-selector')` |
 | `languages`        | [`DsfrLanguageSelectorElement[]`](/types#dsfrlanguageselector) | Liste des langues disponibles. Chaque langue est représentée par un objet contenant un `codeIso` et un `label`. | `[]`                      |
 | `currentLanguage`  | `string`                      | Code ISO de la langue actuellement sélectionnée.              | `'fr'`                    |
 
diff --git a/src/components/DsfrLanguageSelector/DsfrLanguageSelector.vue b/src/components/DsfrLanguageSelector/DsfrLanguageSelector.vue
index 36c285cc..14d455c5 100644
--- a/src/components/DsfrLanguageSelector/DsfrLanguageSelector.vue
+++ b/src/components/DsfrLanguageSelector/DsfrLanguageSelector.vue
@@ -2,14 +2,14 @@
 import { computed, ref, watch } from 'vue'
 
 import { useCollapsable } from '../../composables'
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import type { DsfrLanguageSelectorElement, DsfrLanguageSelectorProps } from './DsfrLanguageSelector.types'
 
 export type { DsfrLanguageSelectorElement, DsfrLanguageSelectorProps }
 
 const props = withDefaults(defineProps<DsfrLanguageSelectorProps>(), {
-  id: () => getRandomId('language-selector'),
+  id: () => useRandomId('language-selector'),
   languages: () => [],
   currentLanguage: 'fr',
 })
diff --git a/src/components/DsfrModal/DsfrModal.md b/src/components/DsfrModal/DsfrModal.md
index 03f70bac..c6b26ee0 100644
--- a/src/components/DsfrModal/DsfrModal.md
+++ b/src/components/DsfrModal/DsfrModal.md
@@ -26,7 +26,7 @@ Elle se compose des éléments suivants :
 | Propriété            | Type                           | Description                                                                                                    | Valeur par défaut                                              | Obligatoire  |
 |----------------------|--------------------------------|----------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------|--------------|
 | `title`              | `string`                       | Titre de la modale.                                                                                            |                                                                | ✅            |
-| `modalId`            | `string`                       | Identifiant unique pour la modale.                                                                             | `getRandomId('modal', 'dialog')`                               |              |
+| `modalId`            | `string`                       | Identifiant unique pour la modale.                                                                             | `useRandomId('modal', 'dialog')`                               |              |
 | `opened`             | `boolean`                      | Indique si la modale est ouverte.                                                                              | `false`                                                        |              |
 | `actions`            | `DsfrButtonProps[]`            | Liste des boutons d'action pour le pied de page de la modale.                                                  | `[]`                                                           |              |
 | `isAlert`            | `boolean`                      | Spécifie si la modale est une alerte (rôle `"alertdialog"` si `true`) ou non (le rôle sera  alors `"dialog"`). | `false`                                                        |              |
diff --git a/src/components/DsfrModal/DsfrModal.vue b/src/components/DsfrModal/DsfrModal.vue
index 7734e50d..799f7e52 100644
--- a/src/components/DsfrModal/DsfrModal.vue
+++ b/src/components/DsfrModal/DsfrModal.vue
@@ -7,12 +7,12 @@ import VIcon from '../VIcon/VIcon.vue'
 
 import type { DsfrModalProps } from './DsfrModal.types'
 
-import { getRandomId } from '@/utils/random-utils'
+import { useRandomId } from '@/utils/random-utils'
 
 export type { DsfrModalProps }
 
 const props = withDefaults(defineProps<DsfrModalProps>(), {
-  modalId: () => getRandomId('modal', 'dialog'),
+  modalId: () => useRandomId('modal', 'dialog'),
   actions: () => [],
   origin: () => ({ focus () {} }),
   icon: undefined,
diff --git a/src/components/DsfrMultiselect/DsfrMultiselect.vue b/src/components/DsfrMultiselect/DsfrMultiselect.vue
index 98502bf1..0be880d7 100644
--- a/src/components/DsfrMultiselect/DsfrMultiselect.vue
+++ b/src/components/DsfrMultiselect/DsfrMultiselect.vue
@@ -9,7 +9,7 @@ import DsfrInput from '../DsfrInput/DsfrInput.vue'
 
 import type { DsfrMultiSelectProps, DsfrMultiSelectSlots } from './DsfrMultiselect.types'
 
-import { getRandomId } from '@/utils/random-utils'
+import { useRandomId } from '@/utils/random-utils'
 
 const props = withDefaults(
   defineProps<DsfrMultiSelectProps<T>>(),
@@ -18,7 +18,7 @@ const props = withDefaults(
     labelClass: '',
     hint: '',
     legend: '',
-    id: () => getRandomId('multiselect'),
+    id: () => useRandomId('multiselect'),
     buttonLabel: '',
     selectAll: false,
     errorMessage: '',
diff --git a/src/components/DsfrNavigation/DsfrNavigation.vue b/src/components/DsfrNavigation/DsfrNavigation.vue
index 7e0d28f8..6b11fbfc 100644
--- a/src/components/DsfrNavigation/DsfrNavigation.vue
+++ b/src/components/DsfrNavigation/DsfrNavigation.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref } from 'vue'
 
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import DsfrNavigationItem from './DsfrNavigationItem.vue'
 import DsfrNavigationMegaMenu from './DsfrNavigationMegaMenu.vue'
@@ -18,7 +18,7 @@ import type {
 export type { DsfrNavigationMenuLinks, DsfrNavigationProps }
 
 const props = withDefaults(defineProps<DsfrNavigationProps>(), {
-  id: () => getRandomId('nav'),
+  id: () => useRandomId('nav'),
   label: 'Menu principal',
   navItems: () => [],
 })
diff --git a/src/components/DsfrNavigation/DsfrNavigationItem.vue b/src/components/DsfrNavigation/DsfrNavigationItem.vue
index 5169da67..d53b6cca 100644
--- a/src/components/DsfrNavigation/DsfrNavigationItem.vue
+++ b/src/components/DsfrNavigation/DsfrNavigationItem.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import type { DsfrNavigationItemProps } from './DsfrNavigation.types'
 
 export type { DsfrNavigationItemProps }
 
 withDefaults(defineProps<DsfrNavigationItemProps>(), {
-  id: () => getRandomId('nav', 'item'),
+  id: () => useRandomId('nav', 'item'),
 })
 </script>
 
diff --git a/src/components/DsfrNavigation/DsfrNavigationMegaMenu.vue b/src/components/DsfrNavigation/DsfrNavigationMegaMenu.vue
index fb4b2e8f..5465570e 100644
--- a/src/components/DsfrNavigation/DsfrNavigationMegaMenu.vue
+++ b/src/components/DsfrNavigation/DsfrNavigationMegaMenu.vue
@@ -2,7 +2,7 @@
 import { computed, onMounted, watch } from 'vue'
 
 import { useCollapsable } from '../../composables'
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import DsfrNavigationMegaMenuCategory from './DsfrNavigationMegaMenuCategory.vue'
 import type { DsfrNavigationMegaMenuProps } from './DsfrNavigation.types'
@@ -10,7 +10,7 @@ import type { DsfrNavigationMegaMenuProps } from './DsfrNavigation.types'
 export type { DsfrNavigationMegaMenuProps }
 
 const props = withDefaults(defineProps<DsfrNavigationMegaMenuProps>(), {
-  id: () => getRandomId('mega-menu'),
+  id: () => useRandomId('mega-menu'),
   description: '',
   link: () => ({ to: '#', text: 'Voir toute la rubrique' }),
   menus: () => [],
diff --git a/src/components/DsfrNavigation/DsfrNavigationMenu.vue b/src/components/DsfrNavigation/DsfrNavigationMenu.vue
index b1513888..55bc7d29 100644
--- a/src/components/DsfrNavigation/DsfrNavigationMenu.vue
+++ b/src/components/DsfrNavigation/DsfrNavigationMenu.vue
@@ -2,7 +2,7 @@
 import { computed, onMounted, watch } from 'vue'
 
 import { useCollapsable } from '../../composables'
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import DsfrNavigationMenuItem from './DsfrNavigationMenuItem.vue'
 import DsfrNavigationMenuLink from './DsfrNavigationMenuLink.vue'
@@ -11,7 +11,7 @@ import type { DsfrNavigationMenuProps } from './DsfrNavigation.types'
 export type { DsfrNavigationMenuProps }
 
 const props = withDefaults(defineProps<DsfrNavigationMenuProps>(), {
-  id: () => getRandomId('menu'),
+  id: () => useRandomId('menu'),
   links: () => [],
   expandedId: '',
 })
diff --git a/src/components/DsfrNavigation/DsfrNavigationMenuItem.vue b/src/components/DsfrNavigation/DsfrNavigationMenuItem.vue
index 62a91b66..3375dd70 100644
--- a/src/components/DsfrNavigation/DsfrNavigationMenuItem.vue
+++ b/src/components/DsfrNavigation/DsfrNavigationMenuItem.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import type { DsfrNavigationMenuItemProps } from './DsfrNavigation.types'
 
 export type { DsfrNavigationMenuItemProps }
 
 withDefaults(defineProps<DsfrNavigationMenuItemProps>(), {
-  id: () => getRandomId('menu', 'item'),
+  id: () => useRandomId('menu', 'item'),
 })
 </script>
 
diff --git a/src/components/DsfrNavigation/DsfrNavigationMenuLink.vue b/src/components/DsfrNavigation/DsfrNavigationMenuLink.vue
index 329685a1..27af3d44 100644
--- a/src/components/DsfrNavigation/DsfrNavigationMenuLink.vue
+++ b/src/components/DsfrNavigation/DsfrNavigationMenuLink.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, hasInjectionContext, inject } from 'vue'
 
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 import { registerNavigationLinkKey } from '../DsfrHeader/injection-key'
 import VIcon from '../VIcon/VIcon.vue'
 
@@ -10,7 +10,7 @@ import type { DsfrNavigationMenuLinkProps } from './DsfrNavigation.types'
 export type { DsfrNavigationMenuLinkProps }
 
 const props = withDefaults(defineProps<DsfrNavigationMenuLinkProps>(), {
-  id: () => getRandomId('menu-link'),
+  id: () => useRandomId('menu-link'),
   icon: undefined,
   onClick: () => undefined,
   text: '',
diff --git a/src/components/DsfrRadioButton/DsfrRadioButton.vue b/src/components/DsfrRadioButton/DsfrRadioButton.vue
index 5d41c3cf..db9f6a56 100644
--- a/src/components/DsfrRadioButton/DsfrRadioButton.vue
+++ b/src/components/DsfrRadioButton/DsfrRadioButton.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import type { DsfrRadioButtonProps } from './DsfrRadioButton.types'
 
 export type { DsfrRadioButtonProps }
 
 const props = withDefaults(defineProps<DsfrRadioButtonProps>(), {
-  id: () => getRandomId('basic', 'radio'),
+  id: () => useRandomId('basic', 'radio'),
   modelValue: '',
   label: '',
   hint: '',
diff --git a/src/components/DsfrRadioButton/DsfrRadioButtonSet.vue b/src/components/DsfrRadioButton/DsfrRadioButtonSet.vue
index 37d28be4..4ddd3a7a 100644
--- a/src/components/DsfrRadioButton/DsfrRadioButtonSet.vue
+++ b/src/components/DsfrRadioButton/DsfrRadioButtonSet.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import DsfrRadioButton from './DsfrRadioButton.vue'
 import type { DsfrRadioButtonSetProps } from './DsfrRadioButton.types'
@@ -9,7 +9,7 @@ import type { DsfrRadioButtonSetProps } from './DsfrRadioButton.types'
 export type { DsfrRadioButtonSetProps }
 
 const props = withDefaults(defineProps<DsfrRadioButtonSetProps>(), {
-  titleId: () => getRandomId('radio-button', 'group'),
+  titleId: () => useRandomId('radio-button', 'group'),
   errorMessage: '',
   validMessage: '',
   legend: '',
diff --git a/src/components/DsfrRange/DsfrRange.md b/src/components/DsfrRange/DsfrRange.md
index 2513e402..3bd2cb41 100644
--- a/src/components/DsfrRange/DsfrRange.md
+++ b/src/components/DsfrRange/DsfrRange.md
@@ -23,7 +23,7 @@ Les curseurs sont des entrées numériques qui permettent de voir graphiquement
 
 | Nom | Type | Défaut | Description |
 | --- | --- | --- | --- |
-| `id` | `string` | `getRandomId('range')` | Identifiant unique du curseur. Si non fourni, un id est généré aléatoirement. |
+| `id` | `string` | `useRandomId('range')` | Identifiant unique du curseur. Si non fourni, un id est généré aléatoirement. |
 | `min` | `number` | `0` | Valeur minimale du curseur. |
 | `max` | `number` | `100` | Valeur maximale du curseur. |
 | `modelValue` | `number` | `0` | Valeur actuelle du curseur. |
diff --git a/src/components/DsfrRange/DsfrRange.vue b/src/components/DsfrRange/DsfrRange.vue
index 58a7339e..45cc7a33 100644
--- a/src/components/DsfrRange/DsfrRange.vue
+++ b/src/components/DsfrRange/DsfrRange.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref, watch } from 'vue'
 
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import type { DsfrRangeProps } from './DsfrRange.types'
 
 const props = withDefaults(defineProps<DsfrRangeProps>(), {
-  id: () => getRandomId('range'),
+  id: () => useRandomId('range'),
   min: 0,
   max: 100,
   modelValue: 0,
diff --git a/src/components/DsfrSearchBar/DsfrSearchBar.md b/src/components/DsfrSearchBar/DsfrSearchBar.md
index 90057075..42a1ac32 100644
--- a/src/components/DsfrSearchBar/DsfrSearchBar.md
+++ b/src/components/DsfrSearchBar/DsfrSearchBar.md
@@ -19,7 +19,7 @@ La barre de recherche se compose des éléments suivants :
 
 | Nom         | Type     | Défaut            | Obligatoire | Description                                                             |
 |-------------|----------|-------------------|-------------|-------------------------------------------------------------------------|
-| `id`        | `Function`| `() => getRandomId('search', 'input')`| | Identifiant unique pour la barre de recherche.                          |
+| `id`        | `Function`| `() => useRandomId('search', 'input')`| | Identifiant unique pour la barre de recherche.                          |
 | `label`     | `String` | `''`              |             | Libellé de la barre de recherche.                                       |
 | `buttonText`| `String` | `''`              |             | Texte du bouton de recherche.                                           |
 | `modelValue`| `String` | `''`              |             | Valeur liée à la barre de recherche.                                    |
diff --git a/src/components/DsfrSearchBar/DsfrSearchBar.vue b/src/components/DsfrSearchBar/DsfrSearchBar.vue
index 065e73f4..835cebc9 100644
--- a/src/components/DsfrSearchBar/DsfrSearchBar.vue
+++ b/src/components/DsfrSearchBar/DsfrSearchBar.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 import DsfrButton from '../DsfrButton/DsfrButton.vue'
 import DsfrInput from '../DsfrInput/DsfrInput.vue'
 
@@ -8,7 +8,7 @@ import type { DsfrSearchBarProps } from './DsfrSearchBar.types'
 export type { DsfrSearchBarProps }
 
 withDefaults(defineProps<DsfrSearchBarProps>(), {
-  id: () => getRandomId('search', 'input'),
+  id: () => useRandomId('search', 'input'),
   label: '',
   buttonText: '',
   modelValue: '',
diff --git a/src/components/DsfrSegmented/DsfrSegmented.vue b/src/components/DsfrSegmented/DsfrSegmented.vue
index a93fb5cb..198ac7a2 100644
--- a/src/components/DsfrSegmented/DsfrSegmented.vue
+++ b/src/components/DsfrSegmented/DsfrSegmented.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 import VIcon from '../VIcon/VIcon.vue'
 
 import type { DsfrSegmentedProps } from './DsfrSegmented.types'
@@ -9,7 +9,7 @@ import type { DsfrSegmentedProps } from './DsfrSegmented.types'
 export type { DsfrSegmentedProps }
 
 const props = withDefaults(defineProps<DsfrSegmentedProps>(), {
-  id: () => getRandomId('segmented'),
+  id: () => useRandomId('segmented'),
   hint: '',
   icon: undefined,
   label: '',
diff --git a/src/components/DsfrSegmented/DsfrSegmentedSet.vue b/src/components/DsfrSegmented/DsfrSegmentedSet.vue
index df545b10..74b6c7d5 100644
--- a/src/components/DsfrSegmented/DsfrSegmentedSet.vue
+++ b/src/components/DsfrSegmented/DsfrSegmentedSet.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import DsfrSegmented from './DsfrSegmented.vue'
 import type { DsfrSegmentedSetProps } from './DsfrSegmented.types'
@@ -7,9 +7,9 @@ import type { DsfrSegmentedSetProps } from './DsfrSegmented.types'
 export type { DsfrSegmentedSetProps }
 
 const props = withDefaults(defineProps<DsfrSegmentedSetProps>(), {
-  titleId: () => getRandomId('segmented-button', 'set'),
+  titleId: () => useRandomId('segmented-button', 'set'),
   legend: '',
-  name: () => getRandomId('segmented-button', 'set'),
+  name: () => useRandomId('segmented-button', 'set'),
   options: () => [],
 })
 
diff --git a/src/components/DsfrSelect/DsfrSelect.md b/src/components/DsfrSelect/DsfrSelect.md
index e4dd3418..fbb3934b 100644
--- a/src/components/DsfrSelect/DsfrSelect.md
+++ b/src/components/DsfrSelect/DsfrSelect.md
@@ -25,7 +25,7 @@ La liste déroulante fournit une liste d’option parmi lesquelles l’utilisate
 | `successMessage`         | `string`                                                                                    | `''`                        |             | Message de validation à afficher en dessous du select.           |
 | `errorMessage`           | `string`                                                                                    | `''`                        |             | Message d'erreur à afficher en dessous du select.                |
 | `defaultUnselectedText`  | `string`                                                                                    | `'Sélectionner une option'` |             | Si `true`, l'infobulle s'affiche au survol.                      |
-| `selectId`               | `string`                                                                                    | `getRandomId('select')`     |             | Identifiant unique pour le select. Utilisé pour l'accessibilité. |
+| `selectId`               | `string`                                                                                    | `useRandomId('select')`     |             | Identifiant unique pour le select. Utilisé pour l'accessibilité. |
 
 ## 📡 Évenements
 
diff --git a/src/components/DsfrSelect/DsfrSelect.vue b/src/components/DsfrSelect/DsfrSelect.vue
index 7981820f..be811106 100644
--- a/src/components/DsfrSelect/DsfrSelect.vue
+++ b/src/components/DsfrSelect/DsfrSelect.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import type { DsfrSelectProps } from './DsfrSelect.types'
 
@@ -12,7 +12,7 @@ defineOptions({
 })
 
 const props = withDefaults(defineProps<DsfrSelectProps>(), {
-  selectId: () => getRandomId('select'),
+  selectId: () => useRandomId('select'),
   modelValue: undefined,
   options: () => [],
   label: '',
diff --git a/src/components/DsfrSideMenu/DsfrSideMenu.vue b/src/components/DsfrSideMenu/DsfrSideMenu.vue
index 069e57e6..cc34b931 100644
--- a/src/components/DsfrSideMenu/DsfrSideMenu.vue
+++ b/src/components/DsfrSideMenu/DsfrSideMenu.vue
@@ -2,7 +2,7 @@
 import { ref, watch } from 'vue'
 
 import { useCollapsable } from '../../composables'
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import DsfrSideMenuList from './DsfrSideMenuList.vue'
 import type { DsfrSideMenuProps } from './DsfrSideMenu.types'
@@ -11,8 +11,8 @@ export type { DsfrSideMenuProps }
 
 withDefaults(defineProps<DsfrSideMenuProps>(), {
   buttonLabel: 'Dans cette rubrique',
-  id: () => getRandomId('sidemenu'),
-  sideMenuListId: () => getRandomId('sidemenu', 'list'),
+  id: () => useRandomId('sidemenu'),
+  sideMenuListId: () => useRandomId('sidemenu', 'list'),
   collapseValue: '-492px',
   // @ts-expect-error this is really undefined
   menuItems: () => undefined,
diff --git a/src/components/DsfrTable/DsfrTable.vue b/src/components/DsfrTable/DsfrTable.vue
index 553007bf..89fb6a51 100644
--- a/src/components/DsfrTable/DsfrTable.vue
+++ b/src/components/DsfrTable/DsfrTable.vue
@@ -5,7 +5,7 @@ import DsfrTableHeaders from './DsfrTableHeaders.vue'
 import DsfrTableRow, { type DsfrTableRowProps } from './DsfrTableRow.vue'
 import type { DsfrTableProps } from './DsfrTable.types'
 
-import { getRandomId } from '@/utils/random-utils'
+import { useRandomId } from '@/utils/random-utils'
 
 export type { DsfrTableProps }
 
@@ -25,7 +25,7 @@ const getRowData = (row: DsfrTableProps['rows']) => {
 }
 
 const currentPage = ref(props.currentPage)
-const selectId = getRandomId('resultPerPage')
+const selectId = useRandomId('resultPerPage')
 const optionSelected = ref(props.resultsDisplayed)
 const pageCount = computed(() =>
   props.rows.length > optionSelected.value
diff --git a/src/components/DsfrTabs/DsfrTabs.vue b/src/components/DsfrTabs/DsfrTabs.vue
index 4f2cc1c4..15c4d542 100644
--- a/src/components/DsfrTabs/DsfrTabs.vue
+++ b/src/components/DsfrTabs/DsfrTabs.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, onMounted, onUnmounted, provide, reactive, ref, type Ref, watch } from 'vue'
 
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import DsfrTabContent from './DsfrTabContent.vue'
 import DsfrTabItem from './DsfrTabItem.vue'
@@ -62,7 +62,7 @@ const getIdFromIndex = (idx: number) => {
   if (generatedIds[idx]) {
     return generatedIds[idx]
   }
-  const id = getRandomId('tab')
+  const id = useRandomId('tab')
   generatedIds[idx] = id
   return id
 }
diff --git a/src/components/DsfrToggleSwitch/DsfrToggleSwitch.md b/src/components/DsfrToggleSwitch/DsfrToggleSwitch.md
index 5ad5f479..de86e24d 100644
--- a/src/components/DsfrToggleSwitch/DsfrToggleSwitch.md
+++ b/src/components/DsfrToggleSwitch/DsfrToggleSwitch.md
@@ -19,7 +19,7 @@ Le `DsfrToggleSwitch` est un composant Vue versatile, conçu pour permettre à l
 | `name`         | `string`  | `undefined`             |             | Attribut `name` de l’input                                                |
 | `labelLeft`    | `boolean` | `false`                 |             | Permet d'afficher le label à gauche de l'interrupteur                     |
 | `borderBottom` | `boolean` | `false`                 |             | Affiche une bordure sous l'interrupteur et le label                       |
-| `inputId`      | `string`  | `getRandomId('toggle')` |             | Identifiant unique pour le toggle. Utilisé pour l'accessibilité.          |
+| `inputId`      | `string`  | `useRandomId('toggle')` |             | Identifiant unique pour le toggle. Utilisé pour l'accessibilité.          |
 | `activeText`   | `string`  | `Activé`                |             | Texte à afficher sous l'interrupteur lorsqu'il est activé                 |
 | `inactiveText` | `string`  | `Désactivé`             |             | Texte à afficher sous l'interrupteur lorsqu'il est désactivé              |
 | `noText`       | `boolean`  | `false`                |             | Désactive l'affichage de activeText et inactiveText                       |
diff --git a/src/components/DsfrToggleSwitch/DsfrToggleSwitch.vue b/src/components/DsfrToggleSwitch/DsfrToggleSwitch.vue
index d7e3e6c5..3c7afcaf 100644
--- a/src/components/DsfrToggleSwitch/DsfrToggleSwitch.vue
+++ b/src/components/DsfrToggleSwitch/DsfrToggleSwitch.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import type { DsfrToggleSwitchProps } from './DsfrToggleSwitch.types'
 
 export type { DsfrToggleSwitchProps }
 
 const props = withDefaults(defineProps<DsfrToggleSwitchProps>(), {
-  inputId: () => getRandomId('toggle'),
+  inputId: () => useRandomId('toggle'),
   hint: '',
   label: '',
   labelLeft: false,
diff --git a/src/components/DsfrTooltip/DsfrTooltip.md b/src/components/DsfrTooltip/DsfrTooltip.md
index f08fb6a8..4b326b76 100644
--- a/src/components/DsfrTooltip/DsfrTooltip.md
+++ b/src/components/DsfrTooltip/DsfrTooltip.md
@@ -10,7 +10,7 @@ Le `DsfrTooltip` est un composant Vue versatile, conçu pour fournir des infobul
 |------------|-----------|----------------------|:-----------:|-------------------------------------------------------------|
 | `content`  | `string`  |                      | ✅          | Le texte à afficher dans l'infobulle.                       |
 | `onHover`  | `boolean` | `false`              |             | Si `true`, l'infobulle s'affiche au survol.                 |
-| `id`       | `string`  | `getRandomId('tooltip')` |         | Identifiant unique pour l'infobulle. Utilisé pour l'accessibilité. |
+| `id`       | `string`  | `useRandomId('tooltip')` |         | Identifiant unique pour l'infobulle. Utilisé pour l'accessibilité. |
 
 ## 📡 Évenements
 
diff --git a/src/components/DsfrTooltip/DsfrTooltip.vue b/src/components/DsfrTooltip/DsfrTooltip.vue
index 4150e1cc..edecb0c2 100644
--- a/src/components/DsfrTooltip/DsfrTooltip.vue
+++ b/src/components/DsfrTooltip/DsfrTooltip.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import type { DsfrTooltipProps } from './DsfrTooltip.types'
 
 export type { DsfrTooltipProps }
 
 const props = withDefaults(defineProps<DsfrTooltipProps>(), {
-  id: () => getRandomId('tooltip'),
+  id: () => useRandomId('tooltip'),
 })
 
 const show = ref(false)
diff --git a/src/components/DsfrTranscription/DsfrTranscription.md b/src/components/DsfrTranscription/DsfrTranscription.md
index d03cdd95..a08de7cb 100644
--- a/src/components/DsfrTranscription/DsfrTranscription.md
+++ b/src/components/DsfrTranscription/DsfrTranscription.md
@@ -20,7 +20,7 @@ Le `DsfrTranscription` peut afficher la transcription dans une section extensibl
 
 | Propriété | Type     | Description                                                | Valeur par défaut                   |
 |-----------|----------|------------------------------------------------------------|-------------------------------------|
-| `id`      | `string` | ID unique pour le composant, utilisé pour l'accessibilité. | `getRandomId('transcription')`      |
+| `id`      | `string` | ID unique pour le composant, utilisé pour l'accessibilité. | `useRandomId('transcription')`      |
 | `title`   | `string` | Titre de la transcription.                                  | `'Titre de la vidéo'`               |
 | `content` | `string` | Contenu de la transcription.                                | `'Transcription du contenu de la vidéo'` |
 
diff --git a/src/components/DsfrTranscription/DsfrTranscription.vue b/src/components/DsfrTranscription/DsfrTranscription.vue
index 56b8124c..cf4dbe80 100644
--- a/src/components/DsfrTranscription/DsfrTranscription.vue
+++ b/src/components/DsfrTranscription/DsfrTranscription.vue
@@ -2,7 +2,7 @@
 import { computed, ref, watch } from 'vue'
 
 import { useCollapsable } from '../../composables'
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 import DsfrModal from '../DsfrModal/DsfrModal.vue'
 
 import type { DsfrTranscriptionProps } from './DsfrTranscription.types'
@@ -10,7 +10,7 @@ import type { DsfrTranscriptionProps } from './DsfrTranscription.types'
 export type { DsfrTranscriptionProps }
 
 const props = withDefaults(defineProps<DsfrTranscriptionProps>(), {
-  id: () => getRandomId('transcription'),
+  id: () => useRandomId('transcription'),
   title: 'Titre de la vidéo',
   content: 'Transcription du contenu de la vidéo',
 })
diff --git a/src/utils/random-utils.ts b/src/utils/random-utils.ts
index db152199..89211f89 100644
--- a/src/utils/random-utils.ts
+++ b/src/utils/random-utils.ts
@@ -1,3 +1,5 @@
+import { useId } from 'vue'
+
 const alphanumBase = 'abcdefghijklmnopqrstuvwyz0123456789'
 // We need to duplicate the base string to have a longer string
 // to avoid Math.random to return the same value twice
@@ -14,10 +16,15 @@ export const getRandomString = (length: number) => {
     .join('')
 }
 
-export const getRandomId = (prefix = '', suffix = '') => {
-  return (prefix ? `${prefix}-` : '') + getRandomString(5) + (suffix ? `-${suffix}` : '')
+export const useRandomId = (prefix = '', suffix = '') => {
+  return (prefix ? `${prefix}-` : '') + useId() + (suffix ? `-${suffix}` : '')
 }
 
+/**
+ * @deprecated use `useRandomId()` instead
+ */
+export const getRandomId = useRandomId
+
 export const repeatFn = <T, U>(
   length: number,
   func: (el?: T, i?: number, arr?: T[]) => U,

From 8c02e50d3f11fd7aad26efc09694c8637245afa3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stanislas=20Ormi=C3=A8res?= <stan@stormier.ninja>
Date: Tue, 14 Jan 2025 13:08:46 +0100
Subject: [PATCH 2/2] =?UTF-8?q?chore(meta):=20=F0=9F=90=9B=20corrige=20le?=
 =?UTF-8?q?=20code=20asynchrone?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 meta/custom-icon-collections-creator-bin.js | 32 ++++++++--
 meta/custom-icon-collections-creator.js     | 71 ++++++++++++++++++---
 2 files changed, 91 insertions(+), 12 deletions(-)

diff --git a/meta/custom-icon-collections-creator-bin.js b/meta/custom-icon-collections-creator-bin.js
index 7e09eb71..7d367456 100755
--- a/meta/custom-icon-collections-creator-bin.js
+++ b/meta/custom-icon-collections-creator-bin.js
@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-
+/* eslint-disable no-console */
 import path from 'node:path'
 import process from 'node:process'
 
@@ -17,7 +17,31 @@ program
 
 const options = program.opts()
 
-if (options.source && options.target) {
-  createCustomCollectionFile(path.resolve(process.cwd(), options.source), path.resolve(process.cwd(), options.target))
-  console.log(chalk.green('Les icônes ont été générées')) // eslint-disable-line no-console
+const resultMessages = {
+  COULD_NOT_GET_COLLECTIONS_ERROR: 'Impossible de récupérer les collections d’icônes (cf. erreur ci-dessus)',
+  COULD_NOT_WRITE_FILE_ERROR: 'Impossible d’écrire le fichier cible (cf. erreur ci-dessus)',
+  COULD_NOT_LINT_FILE_ERROR: 'Impossible de linter le fichier cible (cf. erreur ci-dessus)',
 }
+
+;(async (options) => {
+  if (!options.source || !options.target) {
+    console.log(chalk.yellow('Veuillez indiquer la source et la cible'))
+  }
+
+  const result = await createCustomCollectionFile(path.resolve(process.cwd(), options.source), path.resolve(process.cwd(), options.target))
+
+  if (!result) {
+    console.log(chalk.green('Les icônes ont été générées'))
+    return
+  }
+
+  if (result.status === 'COULD_NOT_LINT_FILE_ERROR') {
+    console.log(chalk.green('Les icônes ont été générées'))
+    console.log(chalk.yellow(resultMessages[result.status]))
+    return
+  }
+
+  console.error(result.error)
+
+  console.log(chalk.red(resultMessages[result.status]))
+})(options)
diff --git a/meta/custom-icon-collections-creator.js b/meta/custom-icon-collections-creator.js
index 9f99f236..bcf652e8 100644
--- a/meta/custom-icon-collections-creator.js
+++ b/meta/custom-icon-collections-creator.js
@@ -12,15 +12,21 @@ const execPromise = util.promisify(childProcess.exec)
  * Filtre les icônes d'une collection en fonction d'une liste de noms.
  * @function
  *
- * @param {string} sourcePath - Fichier source
- * @param {string} targetPath - Fichier destination
+ * @param {string} sourcePath - Chemin vers le fichier source
+ * @param {string} targetPath - Chemin vers le fichier destination
+ *
+ * @returns {Promise<{ status: 'COULD_NOT_GET_COLLECTIONS_ERROR' | 'COULD_NOT_WRITE_FILE_ERROR' | 'COULD_NOT_LINT_FILE_ERROR', error: Error } | undefined>} Le résultat si une erreur est survenue, undefined sinon
  *
  */
 export async function createCustomCollectionFile (sourcePath, targetPath) {
-  /**
-   * @type {[import('@iconify/vue').IconifyJSON, string[]][]}
-   */
-  const collectionsToFilter = await import(sourcePath).then(({ collectionsToFilter }) => collectionsToFilter)
+  const [error, collectionsToFilter] = await getCollectionsToFilter(sourcePath)
+
+  if (error) {
+    return {
+      status: 'COULD_NOT_GET_COLLECTIONS_ERROR',
+      error,
+    }
+  }
 
   const collections = collectionsToFilter.map(tuple => filterIcons(...tuple))
 
@@ -28,15 +34,64 @@ export async function createCustomCollectionFile (sourcePath, targetPath) {
 const collections: IconifyJSON[] = ${JSON.stringify(collections)}
 export default collections`
 
-  await fs.writeFile(targetPath, code)
+  try {
+    await fs.writeFile(targetPath, code)
+  } catch (error) {
+    console.error(error)
+    if (error instanceof Error) {
+      return {
+        status: 'COULD_NOT_WRITE_FILE_ERROR',
+        error,
+      }
+    }
+    return {
+      status: 'COULD_NOT_WRITE_FILE_ERROR',
+      error: new Error(`Erreur inconnue : ${error}`),
+    }
+  }
 
-  await runShellCommand(`npx eslint ${path.resolve(process.cwd(), targetPath)} --fix`)
+  try {
+    await runShellCommand(`npx eslint ${path.resolve(process.cwd(), targetPath)} --fix`)
+  } catch (error) {
+    if (error instanceof Error) {
+      return {
+        status: 'COULD_NOT_LINT_FILE_ERROR',
+        error,
+      }
+    }
+    return {
+      status: 'COULD_NOT_LINT_FILE_ERROR',
+      error: new Error(`Erreur inconnue : ${error}`),
+    }
+  }
 }
 
 /**
  * Fonctions utilitaires
  */
 
+/**
+ * @function
+ *
+ * @param {string} sourcePath - Chemin vers le fichier source
+ *
+ * @returns {Promise<[Error] | [null, [import('@iconify/vue').IconifyJSON, string[]][]]>}
+ */
+async function getCollectionsToFilter (sourcePath) {
+  try {
+    /**
+     * @type {[import('@iconify/vue').IconifyJSON, string[]][]}
+     */
+    const collectionsToFilter = await import(sourcePath).then(({ collectionsToFilter }) => collectionsToFilter)
+    return [null, collectionsToFilter]
+  } catch (error) {
+    if (error instanceof Error) {
+      return [error]
+    }
+    return [new Error(`Erreur inconnue : ${error}`)]
+  }
+}
+
 /**
  * Filtre les icônes d'une collection en fonction d'une liste de noms.
  * @function