refactor(stories): ♻️ convertit DsfrTags.stories.ts au format CSF3

## Pourquoi les changements ont été faits :
- Migration vers Storybook 9 nécessitant le format CSF3 moderne
- Amélioration de la maintenabilité avec TypeScript strict
- Alignement avec les conventions du projet (Composition API)

## Quelles modifications ont été apportées :
- Conversion de toutes les stories du format Options API vers CSF3
- Utilisation de Meta<typeof DsfrTags> et StoryObj pour le typage
- Migration de data()/this vers setup()/ref() (Composition API)
- Ajout des imports de types depuis @storybook/vue3-vite
- Correction des 7 stories : GroupeDEtiquettes, EtiquettesSimples,
  EtiquettesSimplesPetites, EtiquettesCliquables, EtiquettesCliquablesPetites,
  EtiquettesSelectionnables, EtiquettesFermables
- Respect des conventions typographiques françaises

Author: laruiss

.github/copilot-instructions.md

@@ -3,6 +3,10 @@
 ## Vue d'ensemble du projet
 VueDsfr est une bibliothèque de composants Vue 3 qui porte le Système de Design Français (DSFR) vers Vue.js. Elle fournit ~50 composants accessibles et prêts pour la production suivant les normes de design du gouvernement français.
 
+## Pour les tâches que je vais te demander
+
+Voir le fichier `.github/copilot-tasks.instructions.md` pour les instructions spécifiques aux tâches.
+
 ## Architecture et structure des fichiers
 
 ### Organisation des composants

package.json

@@ -176,4 +176,4 @@
   "volta": {
     "node": "22.13.1"
   }
-}
+}

src/components/DsfrMedia/DsfrVideo.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { expect, fn, within } from 'storybook/test'
 import { setup } from '@storybook/vue3-vite'
+import { expect, fn, within } from 'storybook/test'
 
 import DsfrModal from '../DsfrModal/DsfrModal.vue'
 import VIcon from '../VIcon/VIcon.vue'

src/components/DsfrModal/DsfrModal.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { expect, fn, userEvent, within } from 'storybook/test'
 import { setup } from '@storybook/vue3-vite'
+import { expect, fn, userEvent, within } from 'storybook/test'
 import { computed, ref } from 'vue'
 
 import DsfrButton from '../DsfrButton/DsfrButton.vue'

src/components/DsfrRadioButton/DsfrRadioButton.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
 import { expect, fn, within } from 'storybook/test'
 import { ref } from 'vue'
 

src/components/DsfrRadioButton/DsfrRadioButton.vue

@@ -24,11 +24,11 @@ defineSlots<{
   /**
    * Slot pour personnaliser tout le contenu de la balise <label>
    */
-  label(props: { label: string }): any
+  label: (props: { label: string }) => any
   /**
    * Slot pour indiquer que le champ est obligatoire. Par défaut, met une astérisque si `required` est à true (dans un `<span class="required">`)
    */
-  'required-tip'(props: Record<string, never>): any
+  'required-tip': (props: Record<string, never>) => any
 }>()
 
 const defaultSvgAttrs = { viewBox: '0 0 80 80', width: '80px', height: '80px' }

src/components/DsfrRange/DsfrRange.vue

@@ -23,6 +23,16 @@ const emit = defineEmits<{
   (e: 'update:lowerValue', payload: string | number): void
 }>()
 
+defineSlots<{
+  /** Pour un libellé plus personnalisé du champ */
+  label: (props: Record<string, never>) => any
+  /** Pour une indication plus personnalisée sur le champ */
+  hint: (props: Record<string, never>) => any
+  /** Pour remplacer l’astérisque par autre chose pour un champ requis */
+  'required-tip': (props: Record<string, never>) => any
+  /** Pour les messages d’erreur ou de succès */
+  messages: (props: Record<string, never>) => any
+}>()
 const input = ref<HTMLInputElement>()
 const output = ref<HTMLSpanElement>()
 const inputWidth = ref()
@@ -76,17 +86,6 @@ const outputValue = computed(() => {
     .concat(props.suffix ?? '')
 })
 
-defineSlots<{
-  /** Pour un libellé plus personnalisé du champ */
-  label(props: Record<string, never>): any
-  /** Pour une indication plus personnalisée sur le champ */
-  hint(props: Record<string, never>): any
-  /** Pour remplacer l’astérisque par autre chose pour un champ requis */
-  'required-tip'(props: Record<string, never>): any
-  /** Pour les messages d’erreur ou de succès */
-  messages(props: Record<string, never>): any
-}>()
-
 onMounted(() => {
   inputWidth.value = input.value?.offsetWidth
 })

src/components/DsfrSideMenu/DsfrSideMenu.vue

@@ -10,13 +10,6 @@ import DsfrSideMenuList from './DsfrSideMenuList.vue'
 
 export type { DsfrSideMenuProps }
 
-defineSlots<{
-  /**
-   * Contenu personnalisé du menu latéral (remplace la liste des éléments par défaut)
-   */
-  default?: any
-}>()
-
 withDefaults(defineProps<DsfrSideMenuProps>(), {
   buttonLabel: 'Dans cette rubrique',
   id: () => useRandomId('sidemenu'),
@@ -34,6 +27,13 @@ const emit = defineEmits<{
   toggleExpand: [payload: string]
 }>()
 
+defineSlots<{
+  /**
+   * Contenu personnalisé du menu latéral (remplace la liste des éléments par défaut)
+   */
+  default?: any
+}>()
+
 const {
   collapse,
   collapsing,

src/components/DsfrSideMenu/DsfrSideMenuButton.stories.ts

@@ -1,7 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 
-import { ref } from 'vue'
-
 import DsfrSideMenu from './DsfrSideMenu.vue'
 import DsfrSideMenuButton from './DsfrSideMenuButton.vue'
 import DsfrSideMenuLink from './DsfrSideMenuLink.vue'

src/components/DsfrTabs/DsfrTabContent.stories.ts

@@ -1,7 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 
-import { ref } from 'vue'
-
 import DsfrTabContent from './DsfrTabContent.vue'
 import DsfrTabs from './DsfrTabs.vue'