---
title: Note de version 1.13
shortTitle: Note de version 1.13
description: Cette page documente les apports de la version 1.13 du Design Système de l’État avec notamment la mise à disposition de Storybook, des améliorations sur plusieurs composants et une évolution de l’API JS.
shortDescription: Nouveautés et correctifs de la version 1.13 du Design Système de l’État
keywords: version 1.13, Design Système de l’État, DSFR, Storybook, composants, API JS, pictogrammes, Figma, accessibilité, correctifs
excerpt: Présentation des nouveautés de la version 1.13 dont Storybook, de nouveaux composants et des ajustements dans le code et l’API JS.
summary: La version 1.13 introduit la mise à disposition des composants via Storybook et une nouvelle structure dans le dépôt. Elle apporte des évolutions comme le support de Bluesky, l’enrichissement de l’API JS avec de nouveaux événements et des correctifs sur de nombreux composants comme la modale, le tableau ou l’interrupteur. La page présente également les conseils liés à la montée de version Figma et les changements apportés dans les librairies et la documentation.
toc: 2
version: '1.13'
---

# Note de version - 1.13

## Général

La version 1.13.2 est disponible depuis le 15 mai 2025.

[Code en version 1.13.2](https://github.com/GouvernementFR/dsfr/releases/tag/v1.13.2)

La version 1.13.1 est disponible depuis le 26 mars 2025.

[Code en version 1.13.1](https://github.com/GouvernementFR/dsfr/releases/tag/v1.13.1)

La version 1.13.0 est disponible depuis le 04 décembre 2024.

[Code en version 1.13.0](https://github.com/GouvernementFR/dsfr/releases/tag/v1.13.0)

La version 1.13 met à disposition l'intégralité de [nos composants sur Storybook](https://storybook.systeme-de-design.gouv.fr/).

Elle apporte également une [nouvelle page à nos fondamentaux](path:/core/base) pour mieux vous accompagner dans l'utilisation du DSFR ainsi que la [zone d'expression visuelle](path:/component/composition) comme guide pour enrichir vos maquettes.

Nous publions en même temps [une extension au DSFR](https://github.com/GouvernementFR/dsfr-rtl) pour gérer le sens de lecture de droite à gauche pour les sites et langages qui le nécessitent.

Enfin nous ajoutons une nouvelle variation au bouton radio riche qui peut désormais s'utiliser sans pictogramme et tous les correctifs listés ci-dessous.

## Librairies Figma

> [!NOTE]
> **Montée de version sur Figma**
>
> Des instabilités dans la fonction "Swap Librairies" de Figma peuvent provoquer des interpolations de composants et affecter vos maquettes. Nous vous conseillons, autant que possible, de ne pas monter de version au cours d'un projet. Si toutefois cela s'avère nécessaire, veillez à bien créer un point de sauvegarde dans vos fichiers avant de faire une montée de version.

### 🧩 Composants

#### Barre de recherche

- ✨ Ajout d’une version en état rempli.

#### Bouton radio riche

- ✨ Bouton radio riche sans pictogramme.

### 📁 Blocs fonctionnels

#### Nom et Prénom

- 🐛 Correction de la taille des champs de saisi et du message d’erreur.

#### Téléphone

- 🐛 Correction du message d’erreur.

#### Adresse électronique

- 🐛 Correction du message d’erreur.

#### Date unique

- 🐛 Correction de la taille des champs de saisie et du message d’erreur.

### 📝 Modèles

#### Page d’erreur 404

- 🐛 Correction de l’en-tête dans les versions “sans recherche”.

#### Page de connexion

- 🐛 Correction du texte saisi dans les champs.

## Code v1.13.2

### 🎨 Fondamentaux

**Global**

- 📝 Correction coquille dans le README utility.scss => utility.css #1141

### 🧩 Composants

**En-tête - Header**

- 🐛 Correction du warning dans la console concernant l’aria-label manquant #1154

**Formulaire - form**

- 🐛 Corrige l'alignement des champs en ligne lorsque le nombre de lignes des labels est différent #1124

### 🔌 Analytics

- 💫 Ajout de la possibilité d'envoyer l'action d'un élément actionee en js via la méthode act() #1144 <br>
Exemples :<br>
`dsfr(element).buttonActionnee.act();`<br>
`dsfr(element).buttonActionnee.act({objet de données supplémentaires});`
- 📝 Correctifs sur la documentation analytics #1158 #1142

### 📖 Storybook

**Bandeau d’information importante - Notice**

- 🐛 fix(storybook): ajout bandeau alerte météo rouge dans le storybook #1129

**Modale - Modal**

- 💫 Retrait du blocage du scroll à l'ouverture d'une modale #1143
- 🐛 Correction de la hauteur de l’exemple avec footer #1143

**Bouton - Button**

- 🐛 Correction de la propriété “type” du bouton #1143

## Code v1.13.1

### 🎨 Fondamentaux

**Global**

- 🎉 Ajout de l’icône de Bluesky : `bluesky-fill` `bluesky-line` #1096
- 🎉 Ajout d’icônes d’editor et de partage #1110
  - system:
    - share (line/fill)
    - share-forward (line/fill)
  - Design:
    - eraser (line/fill)
  - Editor:
    - strikethrough
    - code-block
    - align-center
    - align-justify
    - align-left
    - align-right
    - format-clear
    - font-color
    - indent-decrease
    - indent-increase
    - list-check
    - text-direction-r
    - underline

**Core**

- 🐛 Correctif de la fonctionnalité de remplissage des informations de fichier de téléchargement `assess-file` #1095
  - Ajouts de messages d'erreurs dans la console en fonction du type d'erreurs retourné par le fetch du fichier à télécharger
  - Si le fichier est inaccessible (erreur 500), la fonction `assess-file` retourne au moins l'extension du fichier.

**Build**

- 💫 Retrait de storybook dans la release #1088

### 🧩 Composants

**Follow – Lettre d’information & réseaux sociaux**

- 🎉 Ajout du réseau social Bluesky fr-btn--bluesky #1096

**Form – Formulaire**

- 🐛 Correction CSS des fieldset-inline@md et des tailles year, number, postal #1089

**Input - Champ de saisie**

- 🐛 Correction du focus du date-picker sur le champ de type date #1076

**Modal - Modale**

- 🐛 Correction du focus piégé et du blocage du scroll sur certains navigateurs lors du clic sur les liens d’évitement “menu” et “recherche” #1103
- 💫 Évolution de la modale permettant de décorréler la modale d’un bouton d’ouverture. Une modale peut maintenant être ouverte programmatiquement sans bouton d’ouverture. À la fermeture de la modale, le focus est redirigé vers sa position initiale avant ouverture, ou sur le lien du logo du header à défaut. #1103

**Navigation – Navigation**

- 💫 Fermeture des menus au clavier #1091
  - La touche Échap ferme le menu ouvert
  - Lorsque le focus sort du menu au TAB, ferme le menu ouvert

**Select - Liste déroulante**

- 💥 Retrait de l'attribut hidden sur la première option du select rendant la navigation au clavier impossible sur Firefox #1090

**Share – Partage**

- 🎉 Ajout du bouton de partage Bluesky fr-btn--bluesky #1096

**Table – Tableau**

- 🎉 Les cellules fixées sur la première colonne peuvent maintenant être fixées à partir d'un breakpoint. Ajout des classes fr-cell--fixed@[bp] (sm, md, lg) #1097

**Tag – Tag**

- 🐛 Correction du hover des tags sélectionnables désactivés #1058

**Toggle – Interrupteur**

- 🐛 Corrige la taille du focus pour que la hauteur du focus corresponde à la hauteur du bouton #1078

### 🔌 API JS

- 🐛 Plus d’envoi de l’événement dsfr.conceal au chargement du composant #1092
  - Pour les composants de type closure, l'événement de fermeture n'est plus lancé au chargement du composant (accordion, modal, etc), uniquement à la fermeture.

### 📖 Storybook

- 🐛 Correction de duplication d’id #1089
- 💫 Remplacement de stories de base par la story "default" #1089
- 🎉 Ajout de stories #1089
  - messages de formulaire
  - variantes esthétiques de la carte
  - variantes de taille des champs de saisie et formulaire
  - radio boutons
  - tags sm et md séparés
  - tuiles avec tag et badge
  - translate avec bouton sans contour
  - ajout de fichiers
  - modale de consentement
  - tooltip

## Code v1.13.0

### 🎨 Fondamentaux

#### Global

- 🎉 Ajout de storybook #945
    - ajout d'un package storybook dans /dsfr-sb
    - ajout de stories dans le dossier template de chaque composant
    - accès au storybook en local dans le dossier /storybook généré via la commande yarn build-storybook
- ✨ Changement de structure #945
    - tous les dossiers de /src sont déplacés dans un sous-dossier dsfr
    - les dossiers module et i18n passent dans src
- 🐛 Correction des valeurs en dur dans les templates #945
- 🐛 Correction du nom du fichier utility.min.css dans le readme #1002
- ✨ Ajout du type button aux boutons par défaut #1005
    - Mise à jour des exemples des modèles de pages analytics et page de connexion
    - Mise à jour des snippets d'exemple des composants : accordéon, alerte, fil d'ariane, bouton, bouton France Connect, carte, gestionnaire de consentement, paramètres d'affichage, champ de saisie, lettre d'information, navigation principale, menu latéral, onglets, tag, tuile et transcription
    - Remplacement de l'attribut type par variant dans le template du Bouton France Connect et ajoute le type button par défaut

#### Core

- 🐛 Correction du retour du getter instance.node qui engendrait une boucle infinie #993
- 🐛 Ajout d'un overflow auto sur le collapse pour éviter le passage des menus sous des éléments survolés ou le texte surligné #1023

#### Build

- ✨ Mise à jour des dépendances
- ✨ Évolution de la version de BrowserSync dans le package.json, permettant l'utilisation d'une version plus récente. Et retrait de browserSync des peerDependencies #997
- Toute référence à polyfill-io a été retirée pour éviter une redirection vers ses noms de domaine qui ont été détournés #1038

#### Utility

- 🎉 Ajout des classes utilitaires de bordure (couleur et épaisseur) #1013
- 🎉 Ajout de pages d'exemples d'utilisation des classes utilitaires de background, de texte et de bordure #1013

### 🧩 Composants

#### Accordion – Accordéon

- 🐛 Correction lorsque tous les disclosures d'un groupe avec l'attribut group="false" sont ouverts au chargement #1032

#### Bouton radio riche - radio rich

- ✨ Modification du bouton radio pour une version compacte du radio riche sans pictogramme #1047

#### Form – Formulaire

- ✨ Ajout de la classe fr-message--warning et ajout d'exemples de messages dans la page d'exemple formulaire #1015

#### Header – En-tête

- 🐛 Correction du focus croppé sur le header en mobile #1008
- 🐛 Permet la duplication des attributs aria dans le menu mobile des accès rapides #976
- 🐛 Retrait des sélecteurs d'enfants directs “>” pour éviter les problèmes lors de l'ajout de balises intermédiaires (cas de création de sous-composants) #1049

#### Link – Lien

- 🐛 Correction de l'alignement vertical de l'icône du lien de fermeture déprécié (maintenant btn-close) #1007

#### Modal – Modale

- 🐛 Correction d'une erreur js liée au focus trap lorsqu'un champ de saisie n'a pas d'attribut "type" dans une modale #992
- 🐛 Passage du footer de la modale au niveau de z-index "overlap-above" permettant d'être au dessus du tooltip #1000
- 🐛 En desktop, lorsque les modales de menu et recherche sont désactivées, les attributs aria-label et aria-labelledby sont retirés #1018

#### Notice – Bandeau d’information importante

- 🐛 Correction du style du titre du bandeau lors de l'utilisation d'un niveau d'entête hx à la place de la balise p #1003
- ✨ Changement de l'icône par défaut du bandeau d'alerte météo rouge #1004
- 🐛 Retrait du padding à droite du bandeau lorsqu'il n'y a pas de bouton de fermeture #1019

#### Onglet - Tab

- 🐛 Correction de l'ombre au scroll en direction RTL #1051

#### Pagination – Pagination

- 🐛 Retrait du lien sur les points de suspension de la pagination #1001

#### Range - curseur

- 🐛 Amélioration du design du curseur en mode couleurs forcées #1011
- 🐛 Le composant est mis à jour graphiquement au changement de value des inputs en js, et ajout d'un accesseur "value" dans l'api du range #1025

#### Select – Liste déroulante

- 🐛 Correction de l'opacité du texte des listes déroulantes (select) désactivées #996

#### Sidemenu – Menu latéral

- 🐛 Correction du focus croppé sur la navigation latérale en mobile et sur la variante sticky

#### Table - Tableau

- 🐛 💥 Remplacement de l'attribut aria-sorting par aria-sort sur les boutons de tri avec comme valeurs descending et ascending et mise à jour de la page d'exemple des tableaux #1030
- 🐛 Correction de la bordure lorsqu'un rowspan est en dernière position #1041
- ✨ La sélection de ligne du tableau est implémentée via l'attribut data-fr-row-select="true" sur la case à cocher, le fonctionnement via l'attribut name="row-select" est déprécié #1053

#### Toggle – Interrupteur

- 🐛 Correction des espacements des groupes d'interrupteurs dépréciés #1006

#### Tooltip - Infobulle

- 🐛 Correction du positionnement du tooltip dans un élément possédant une propriété css “filter” (modal, header). Gestion du placement en position “absolute” plutôt que “fixed” #1010

### 🔌 API JS

- ✨ Ajout des événements suivants dans l’API : #1012
  - **Sur l’élément root (documentElement) :**
    - dsfr.ready : lorsque le js est chargé
    - dsfr.start : au démarrage du moteur js du dsfr
    - dsfr.stop : à l'arrêt du moteur js du dsfr
    - dsfr.render : lors du rendu d'une instance
    - dsfr.resize : lors du changement de taille du viewport
    - dsfr.scroll-lock : au blocage du scroll
    - dsfr.scroll-unlock : au déblocage du scroll
    - dsfr.scheme : au chargement et changement du scheme (dark, light, auto)
    - dsfr.theme : au chargement et changement du theme (light, dark)
  - **Au niveau des instances, et remontés aux parents jusqu'au documentElement :**
    - dsfr.click : au click sur un bouton
    - dsfr.disclose : à l'ouverture d'un disclosure
    - dsfr.conceal : à la fermeture d'un disclosure
    - dsfr.current : retourne l'élément ouvert d'un groupe de disclosure (accordions, tabs, etc.)
    - dsfr.dismiss : à la fermeture d'un tag supprimable
    - dsfr.toggle : au cochage d'un tag sélectionnable
    - dsfr.show : à l'affichage d'un tooltip
    - dsfr.hide : lorsque le tooltip est masqué

### 🔌 Analytics

- 🐛 Correction des collectes d'actions des pages d'exemples react et vue, le dsfr en manuel n'était pas lancé #995
- 🐛 Correction de la valeur, si non renseignée, du paramètre page.path dans la documentation analytics #998
- 🐛 Correction d'éléments manquants ou mal écrits dans la documentation analytics #1043
- ✨ La propriété isActionEnabled peut maintenant prendre la valeur reduce pour limiter la création d'instance de tracking aux éléments comportant l'attribut data-fr-analytics-action #1055
