---
title: Note de version 1.10
shortTitle: Note de version 1.10
description: Cette page détaille les nouveautés les plus récentes de la version 1.10 du Design Système de l’État incluant les évolutions des composants, pictogrammes et librairies Sketch, Figma et code.
shortDescription: Détail des nouveautés et évolutions de la version 1.10
keywords: version 1.10, note de version, Design Système de l’État, composants, Sketch, Figma, documentation, code, mise à jour, changelog
excerpt: Découvrez les nouvelles fonctionnalités, composants et ajustements apportés dans la version 1.10 du Design Système de l’État.
summary: Cette page présente les apports de la version 1.10 du Design Système de l’État. Elle couvre les nouveautés introduites comme le composant infobulle et les images d’en-tête, les évolutions majeures de composants tels que les tuiles ou les cartes, ainsi que les améliorations dans les librairies Sketch, Figma et le code. Elle propose également un suivi précis des corrections et optimisations apportées à l’ensemble du système. C’est une référence utile pour les équipes design et développement intégrant ou mettant à jour le système.
toc: 2
version: '1.10'
---

# Note de version 1.10

## Général

La version 1.10.2 est disponible depuis le 19 octobre 2023

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

La version 1.10.1 est disponible depuis le 4 septembre 2023

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

La version 1.10.0 est disponible depuis le 19 juillet 2023

[Code de la version 1.10.0](https://github.com/GouvernementFR/dsfr/releases/tag/v1.10.0)

### Nouveauté(s)

🎉 Infobulle (ou “bulle d’aide”, “aide contextuelle”) est un composant qui permet d’afficher du contenu après une interaction avec un élément précis de l’interface. Il est caché par défaut et s’affiche au survol ou au clic de l’élément associé par-dessus le reste de la page. Il est disponible en deux variations :

- Déclenchement au survol
- Déclenchement au clic

🎉 [Bêta] Image d’en-tête, disponible en deux variations :

- Desktop LG - 16:9 / Mobile LG - 2:3.
- Desktop MD - 8:3 / Mobile MD - 4:5

### Évolutions

✨ **Tuile** : plusieurs variations sur deux tailles, SM et MD avec le rajout d’une icône optionnelle, par défaut une flèche.

✨ Téléchargement de fichier :

- 🎉 Nouvelle variation disponible : **Tuile de téléchargement**
- ✨ Évolution de la variation **Carte** anciennement appelé “Bloc de téléchargement” avec la possibilité d’y inclure un média au ratio 3:4 ou 4:3 et de pouvoir afficher des tags ou badges.

✨ **Modale** : ajout d’un titre de niveau sur les modales ayant une zone libre

## Librairie Sketch, v1.10.0

### 🎨 Fondamentaux

#### Pictogramme

🎉 Ajout du pictogramme “Document-add” dans la librairie [Système de Design de l’État · Pictogrammes](https://www.sketch.com/s/29560974-7d35-4f3d-b878-01b398ea08f2)

#### Ratio médias

🎉 Ajout de deux nouveaux ratios : 8:3 et 4:5

#### Icônes

🎉 Ajout des icônes “refresh-fill” et “refresh-line” dans la partie “System” de la bibliothèque d’icônes

#### Styles de texte

✨ Évolution du style de texte du composant Tuile en taille MD, desktop et mobile

### 🧩 Composants

#### Accordéon

- 🎉 Ajout d’un fond $background-open-blue-france sur la zone interactive à l’état “Ouvert”
- 🛠️ Modification de l’espacement gauche du label et droite de l’icône

#### Carte

- 🛠️ Uniformisation de la taille des badges et des tags dans le composant (zone de contenu et zone média) :
- Taille SM (tag et badge) pour la carte SM
- Taille MD (tag et badge) pour les cartes MD et LG
- 🎉 Ajout d’un item Média “Avec tag” dans la zone média en plus de la version “Avec badge” existante
- ✨ Possibilité de choisir l’icône “external-link-line” à la place de “arrow-right-line”
- 🎉 Ajout et mise à jour des états sur desktop : Défaut, Désactivé, Survol, Focus, Cliqué
- 🎉 Ajout et mise à jour des états sur mobile : Défaut, Désactivé, Cliqué

#### Lettre d'information et réseaux sociaux

- 🛠️ Ajustement de l’espacement du groupe de boutons de réseaux sociaux sur desktop pour être aligné sur le titre
- 🛠️ Ajustement de l’espacement entre les boutons de réseaux sociaux à 16px sur mobile

#### Menu latéral

- ✨ Ajout d’un fond $background-open-blue-france sur les items N1 et N2 Dépliant à l’état ouvert.
- 🛠️ Correction de l’espacement à 16px en-dessous des derniers items N2 et N3 dans une liste.
- ✨ Sur mobile, changement de la couleur de l’intitulé du menu et des deux icônes en $text-action-high-blue-france et ajout d’un fond $background-open-blue-france sur l’item en état “Ouvert".

#### Modale

- 🚫 Suppression de l’ombre sur la zone d’action
- 🎉 Ajout d’un titre sur les versions de contenu libre (zone de contenu).

#### Navigation principale

- 🎉 Sur mobile, ajout d’un fond $background-open-blue-france sur l’état ouvert du N1 - Dépliant.

#### Pied de page

- ✨ Mise à jour du texte de la licence dans l’item “Mention”.

#### Partage

- 🛠️ Changement en taille MD des boutons de réseaux sociaux

#### Sélecteur de langue

- 🎉 Ajout d’un fond $background-open-blue-france sur l’état ouvert du menu dépliant.

#### Tag

- ✨ Évolution de la nomenclature des différents types de tag.
- 🎉 Ajout et mise à jour des états : Défaut, Désactivé, Survol, Focus, Cliqué, Groupe.

#### Téléchargement de fichier

**Carte de téléchargement**

- ✨ Changement du nom du composant “Bloc” par “Carte”
- 🎉 Ajout des tailles SM et MD sur desktop, avec et sans média et mise à jour des états : Défaut, Désactivé, Survol, Focus, Cliqué.
- 🎉 Ajout des tailles SM et MD sur mobile, avec et sans média et mise à jour des états : Défaut, Désactivé, Cliqué.

**Lien de téléchargement**

- 🎉 Ajout des items du lien sur deux lignes.
- 🛠️ Mise à jour des états en desktop : Défaut, Désactivé, Survol, Focus, Cliqué.
- 🎉 Ajout des items des états en version mobile : Défaut, Désactivé, Cliqué.

**Tuile de téléchargement**

- 🎉 Ajout de la variation Tuile en tailles SM et MD, avec et sans pictogramme
- 🎉 Ajout des états en desktop : Défaut, Désactivé, Survol, Focus, Cliqué.
- 🎉 Ajout des états en mobile : Défaut, Désactivé, Cliqué.

#### Transcription

- 🎉 Ajout d’un fond $background-open-blue-france sur la zone interactive à l’état “Ouvert”

#### Tuile

- 🛠️ Changement du style de texte des tuiles en taille MD par le style H6
- 🎉 Ajout d’une icône “arrow-right-line” en bas à droite dans le composant (optionnel)
- ✨ Possibilité de choisir l’icône “external-link-line” à la place de “arrow-right-line”
- 🎉 Ajout et mise à jour des états en desktop : Défaut, Désactivé, Survol, Focus, Cliqué
- 🎉 Ajout et mise à jour des états en mobile : Défaut, Désactivé, Cliqué

### 📁 Blocs fonctionnels

#### Demande d'une adresse postale, Société

- 🛠️ Ajustement de la largeur du champ “numéro” à 80px
- 🛠️ Ajustement de la largeur du champ “code postal” à 240px
- 🛠️ Ajustement de la disposition des champs “code postal” et “ville” l’un à côté de l’autre
- 🛠️ Correction des textes et intitulés

### 📝 Modèles

#### Création de compte, Connexion

- 🛠️ Ajustements des formulaires suite aux modifications des blocs fonctionnels
- 🛠️ Correction des textes et intitulés

#### Page d'erreur, Service indisponible

- 🚫 Suppression de la version en thème sombre

## Librairie Figma, v1.10.0

### 🎨 Fondamentaux

#### Pictogrammes

🎉 Ajout du pictogramme “Document-add” dans la librairie [Système de Design de l’État · Pictogrammes](https://www.figma.com/community/file/1098654384051611363/DSFR---Pictogrammes)

#### Ratio médias

🎉 Ajout de deux nouveaux ratios : 8:3 et 4:5

#### Icônes

🎉 Ajout des icônes “refresh-fill” et “refresh-line” dans la partie “System” de la bibliothèque d’icônes

### 🧩 Composants

#### Accordéon

- 🎉 Ajout d’un fond $background-open-blue-france sur la zone interactive à l’état “Ouvert”
- 🛠️ Modification de l’espacement gauche du label et droite de l’icône sur mobile

#### Badge

> [!NOTE]
> **Changements destructifs**
> - Liens à refaire pour les instances des badges
> - Tous les labels seront remplacés par “Label” (pour l’initialisation de la propriété “Label”)
> - Tous les icônes seront remplacés l’icône settings-3-line par défaut (pour permettre l’initialisation de la propriété “ Icône”)

🛠️ Remaniement de la classification éléments :

- Séparation des thèmes clairs et sombres
- Séparation par type (Succès, Erreur, Information, Avertissement, Nouveauté, Personnalisé)
- Séparation par taille (SM, MD)

🎉 Les labels sont maintenant des styles de texte

#### Carte

> [!NOTE]
> **Changements destructifs**
>
> Liens à refaire pour les instances des cartes

🛠️ Remaniement de la classification éléments :

- Séparation par type (verticale ou horizontale, avec média ou sans média)
- Séparation par taille (SM, MD, LG)

🛠️ Uniformisation de la taille des badges et des tags dans le composant (zone de contenu et zone média) :

- Taille SM (tag et badge) pour la carte SM
- Taille MD (tag et badge) pour les cartes MD et LG

🎉 Ajout de la variation des proportions du média en desktop (33-66, 40-60, 50-50)

🎉 Ajout d’un item Média “Avec tag” dans la zone média en plus de la version “Avec badge” existante

✨ Possibilité de choisir l’icône “external-link-line” à la place de “arrow-right-line”

🎉 Ajout et mise à jour des états en desktop : Défaut, Désactivé, Survol, Focus, Cliqué

🎉 Ajout et mise à jour des états : Défaut, Désactivé, Cliqué

#### Interrupteur

- ✨ Correction de l’alignement à droite du statut

#### Lettre d'information et réseaux sociaux

- 🛠️ Ajustement de l’espacement entre le groupe de boutons des réseaux sociaux pour être aligné sur le titre
- 🛠️ Ajustement de l’espacement entre les boutons de réseaux sociaux à 16px

#### Menu latéral

- ✨ Ajout d’un fond $background-open-blue-france sur les items N1 et N2 Dépliant à l’état ouvert
- 🛠️ Correction de l’espacement à 16px en-dessous des derniers items N2 et N3 dans une liste
- ✨ En mobile, changement de la couleur de l’intitulé du menu et des deux icônes en $text-action-high-blue-france et ajout d’un fond $background-open-blue-france sur l’item en état “Ouvert”

#### Modale

- 🚫 Suppression de l’ombre sur la zone d’action
- 🎉 Ajout d’un titre sur les versions de contenu libre (zone de contenu)

#### Partage

- 🛠️ Changement en taille MD des boutons de réseaux sociaux

#### Navigation principale

- 🎉 Ajout d’un fond $background-open-blue-france sur l’état ouvert du N1 - Dépliant en mobile
- 🎉 Ajout d’un séparateur sur le dernier item en mobile

#### Pied de page

- ✨ Mise à jour du texte de la licence dans l’item “Mention”

#### Sélecteur de langue

- 🎉 Ajout d’un fond $background-open-blue-france sur l’état ouvert du menu dépliant en mobile

#### Tag

> [!NOTE]
> **Changements destructifs**
> - Liens à refaire pour les instances des tags
> - Tous les labels seront remplacés par “Label” (pour l’initialisation de la propriété “Label”)
> - Tous les icônes seront remplacés l’icône settings-3-line par défaut (pour permettre l’initialisation de la propriété “ Icône”)

**🛠️ Remaniement de la classification éléments :**

- Séparation des thèmes clairs et sombres
- Séparation par taille (SM, MD)
- Séparation par type (Succès, Erreur, Information, Avertissement, Nouveauté, Personnalisé)

🎉 Les labels sont maintenant des styles de texte

🎉 Ajout des tags Sélectionné, Supprimable, Personnalisable

🎉 Ajout des groupes de tags Sélectionné, Supprimable, Personnalisable

#### Téléchargement de fichier

> [!NOTE]
> **Changements destructifs**
>
> Liens à refaire pour les instances Bloc de téléchargement vers Carte de téléchargement ou Tuile de téléchargement

**🛠️ Remaniement de la classification éléments :**

- Séparation des thèmes clairs et sombres
- Séparation par taille (SM, MD)
- Séparation par support (Desktop, mobile)
- Séparation par type (Avec média, Sans média)

**Carte de téléchargement :**

- Changement du nom du composant “Bloc” par “Carte”
- 🎉 Ajout des tailles SM et MD sur desktop, avec et sans média et mise à jour des états : Défaut, Désactivé, Survol, Focus, Cliqué
- 🎉 Ajout des tailles SM et MD sur mobile, avec et sans média et mise à jour des états : Défaut, Désactivé, Cliqué

**Lien de téléchargement :**

- 🎉 Ajout des items du lien sur deux lignes
- 🛠️ Mise à jour des états en desktop : Défaut, Désactivé, Survol, Focus, Cliqué
- 🎉 Ajout des états en version mobile : Défaut, Désactivé, Cliqué

**Tuile de téléchargement :**

- 🎉 Ajout de la variation Tuile en tailles SM et MD, avec et sans pictogramme
- 🎉 Ajout des états en desktop : Défaut, Désactivé, Survol, Focus, Cliqué
- 🎉 Ajout des états en mobile : Défaut, Désactivé, Cliqué

#### Transcription

- 🎉 Ajout d’un fond $background-open-blue-france sur la zone interactive à l’état “Ouvert”

#### Tuile

> [!NOTE]
> **Changements destructifs**
>
> Liens à refaire pour les instances des tuiles

- 🛠️ Remaniement de la classification éléments : séparation des thèmes clairs et sombres
- 🛠️ Changement du style de texte des tuiles en taille MD par le style H6
- 🎉 Ajout d’une icône “arrow-right-line” en bas à droite dans le composant (optionnel)
- ✨ Possibilité de choisir l’icône “external-link-line” à la place de “arrow-right-line”
- 🎉 Ajout et mise à jour des états en desktop : Défaut, Désactivé, Survol, Focus, Cliqué
- 🎉 Ajout et mise à jour des états en mobile : Défaut, Désactivé, Cliqué

### 📁 Blocs fonctionnels

#### Demande d’une adresse postale, Société

- 🛠️ Ajustement de la largeur du champ “numéro” à 80px
- 🛠️ Ajustement de la largeur du champ “code postal” à 240px
- 🛠️ Ajustement de la disposition des champs “code postal” et “ville” l’un à côté de l’autre
- 🛠️ Correction des textes et intitulés

### 📝 Modèles

#### Création de compte, Connexion

- 🛠️ Ajustements des formulaires suite aux modifications des blocs fonctionnels
- 🛠️ Correction des textes et intitulés
- 🎉 Ajout de la page “Activation de compte” et “Validation de création de compte”

#### Pages d’erreur, “Service indisponible”

- 🚫 Suppression de la version en thème sombre

## Code, v1.10.2

### 🔌 Analytics

> [!NOTE]
> **Information importante sur l'envoi de données et la facturation**
>
> La propriété de configuration `enableRating`, présente depuis la 1.9.2, entraîne des envois de données trop importants. Pour rappel, le modèle de facturation dépend du volume d'appels envoyés à Eulerian. Elle est retirée dans cette version 1.10.2. En remplacement, un attribut `data-fr-analytics-rating` peut être ajouté sur un élément dont on veut mesurer spécifiquement le taux de click. Il est important de s'assurer de la pertinence de chaque élément où cette fonctionnalité est activée afin d'optimiser l'envoi de données.

🛠️ fix(analytics): réduction d'envoi des données [#807](https://github.com/GouvernementFR/dsfr/pull/807) :

- Suppression du taux d'interaction global
- Ajout de l'attribut data-fr-analytics-rating qui permet de mesurer le taux d'interaction sur un élément particulier
- Suppression de l'impression des composants sans interactions
- Limitation de l'envoi de donnée à la première interaction
- Bouton associé à l'accordéon, l'onglet et la transcription rendu muet
- Recensement des composants de la page dans une nouvelle donnée de page `page_components`

## Code, v1.10.1

### 🎨 Fondamentaux

#### Utility

- 🎉 Ajout des icônes :
    - twitter-x-line / twitter-x-fill
    - threads-x-line / threads-x-fill

### 🧩 Composants

#### Bouton radio - radio

- 🛠️ Correction d’une couleur manquante engendrant un problème de compilation du CSS (#color2) [#725](https://github.com/GouvernementFR/dsfr/pull/725)

#### Lettre d’information & réseaux sociaux - follow

- 🎉 Ajout de la possibilité d’utiliser une classe utilitaire pour utiliser une icône du dsfr sur les réseaux sociaux [#752](https://github.com/GouvernementFR/dsfr/pull/752)
- 🎉 Ajout des variantes de bouton pour threads et twitter-x (twitter-x non recommandé pour l’instant) [#752](https://github.com/GouvernementFR/dsfr/pull/752)

#### Lien - link

- 🛠️ Correction du lien de téléchargement sur plusieurs ligne, sur Firefox [#755](https://github.com/GouvernementFR/dsfr/pull/755)
- 🛠️ Correction des groupes de liens de téléchargement sur Safari [#755](https://github.com/GouvernementFR/dsfr/pull/755)

#### Tuile - tile

- 🛠️ Correction de l'icône des tuiles avec liens externes (target=”_blank”) [#753](https://github.com/GouvernementFR/dsfr/pull/753)

## Code, V1.10.0

### 🎨 Fondamentaux

#### Global

- ✨ Monte la version minimale de NodeJS en 18.16.1
- 🛠️ Mise à jour du README.md [#643](https://github.com/GouvernementFR/dsfr/pull/643)
- 🛠️ Retrait de l’attribut file dans les balises <link> des pages d’exemple
- 🎉 Ajout d’une balise “meta” dans le header des pages html pour désactiver les liens téléphonique sur iOS [#707](https://github.com/GouvernementFR/dsfr/pull/707)

#### Core

- 🛠️ Correction de la taille minimum du soulignement des liens sur Firefox [#615](https://github.com/GouvernementFR/dsfr/pull/615)
- 🛠️ Ouverture des disclosures (accordéon, onglet, modal) à partir des ancres dans l’URL, l’état disabled désactive l’ouverture. [#532](https://github.com/GouvernementFR/dsfr/pull/532)
- 🛠️ Correctif iOS de la prise de focus au clic [#691](https://github.com/GouvernementFR/dsfr/pull/691)

#### Utility

- 🎉 Ajout des classes utilitaires de couleurs background-flat pour les tokens :
    - blue-france
    - toutes les couleurs d’accentuation

### 🧩 Composants

#### Accordéon - accordion

- 🛠️ Ajustements sur les états défaut et actif de l’accordéon [#564](https://github.com/GouvernementFR/dsfr/pull/564)
    - Les icônes “+” et “-” sont retirées au profit de l’icône “>” orientée vers le bas par défaut et vers le haut dans l’état actif.
    - La graisse du texte passe en médium dans les 2 états
    - Passage de l’icône et de l’intitulé en couleur : action-high-blue-france
    - Ajout d’un fond background-open-blue-france sur le bouton lorsque l’élément est ouvert
    - Ajout de marges intérieures (4v) sur les cotés [#678](https://github.com/GouvernementFR/dsfr/pull/678)

#### Barre de recherche - search

- 🛠️ Spécificité renforcée sur le sélecteur input[type=search] afin de conserver l’apparence malgré l’utilisation de librairies tierces telle que normalize.css
- 🛠️ Correction de la hauteur du champ sur IOS (1px de trop) [#632](https://github.com/GouvernementFR/dsfr/pull/632)

#### Bouton radio - radio

- ✨ Le contour devient bleu
- ✨ retrait du fond blanc du radio bouton (transparence)

#### Bouton radio riche - radio

- ✨ L’outline au focus englobe maintenant tout le radio riche [#502](https://github.com/GouvernementFR/dsfr/pull/502)
- ✨ Ajout du radio riche sans illustration [#540](https://github.com/GouvernementFR/dsfr/pull/540)
- ✨ Le radio-riche utilise maintenant des pictogrammes à la place d’images [#540](https://github.com/GouvernementFR/dsfr/pull/540)
    - La classe fr-radio-rich__img est dépréciée au profit de fr-radio-rich__pictogram et son contenu devient un fr-artwork

#### Carte - card

- 🎉 Ajout d’une version sans lien (titre en noir)
- 🛠️ Ajout de l’icône “lien externe” à la fin du titre dans le cas de lien non étendu

#### Case à cocher - checkbox

- ✨ Le contour de la checkbox devient bleu
- 🛠️ Correction du changement d’état coché/décoché, maintenant au relâchement du clic (mouse-up)
- 🛠️ Correction des cartes sur IE11 [#705](https://github.com/GouvernementFR/dsfr/pull/705)

#### Champ de saisie - input

- ✨ Ajuste la largeur des champs de code postal, d’année et de numéro de rue pour des multiples de 8v [#679](https://github.com/GouvernementFR/dsfr/pull/679)
- ✨ Ajout de la bordure à gauche des champs en erreur/succès/info [#635](https://github.com/GouvernementFR/dsfr/pull/635)
- 🛠️ Correction de modèle de champs d’adresse électronique
    - Correction attribut “autocomplete” en trop sur les input-group
    - Texte additionnel sur plusieurs lignes dans le modèle de champs d’adresse électronique
    - Correction des textes additionnels

#### En-tête - header

- 🛠️ L’ensemble des id présents dans les accès rapides du header sont maintenant suffixés par “-mobile” à la duplication [#637](https://github.com/GouvernementFR/dsfr/pull/637)

#### Formulaire - form

- ✨ Le texte de description additionnel des champs désactivés passe en couleur de texte désactivé
    - Lorsque le fieldset possède l’attribut “disabled”, la classe “hint-text” passe en couleur --text-disabled-grey
- 🛠️ Correction de l’alignement icône des messages d’erreur/succès [#670](https://github.com/GouvernementFR/dsfr/pull/670)
- ✨ Remplacement de l’attribut aria-live="assertive" par aria-live="polite" sur les messages d’erreur/succès [#654](https://github.com/GouvernementFR/dsfr/pull/654)
- 🛠️ Correction de la bordure des formulaire en erreur/succès sur iOS [#712](https://github.com/GouvernementFR/dsfr/pull/670)
- 🛠️ Correction du focus des radios riches dépréciés [#715](https://github.com/GouvernementFR/dsfr/pull/670)

#### Gestionnaire de consentement - consent

- ✨ Évolution du lien “voir plus de détail” [#662](https://github.com/GouvernementFR/dsfr/pull/662)
    - Retrait du soulignement
    - Passage du texte en bleu-france

#### Info-bulle - tooltip

- 🎉 Ajout du composant tooltip
    - Permet l’ouverture d’une info-bulle, au clic, ou d’une information contextuelle, au survol

#### Interrupteur - toggle

- 🎉 Ajout des variants d’interrupteur en erreur et valide
- 🛠️ Retrait du css appearance:none sur input
- ✨ Le toggle est maintenant placé dans un fieldset

#### Lettre d’information & réseaux sociaux - follow

- 🎉 Ajout d’un exemple de succès à l’abonnement à la lettre d’information

#### Liste déroulante - select

- ✨ Ajout de la bordure à gauche des select en erreur/succès/info [#635](https://github.com/GouvernementFR/dsfr/pull/635)

#### Mot de passe - password

- 🛠️ Retrait de l’icône native d’affichage du mot de passe sur edge [#669](https://github.com/GouvernementFR/dsfr/pull/669)
- 🛠️ Force l’état de la checkbox “afficher le mot de passe” en état par défaut, pour éviter qu’elle ne passe en erreur/succès [#667](https://github.com/GouvernementFR/dsfr/pull/667)
- 🛠️ Correction de l’accessibilité des messages d’erreur/succès [#694](https://github.com/GouvernementFR/dsfr/pull/694)

#### Modale - modal

- 🛠️ Correction du décalage du contenu en arrière plan à l’ouverture/fermeture de la modale [#519](https://github.com/GouvernementFR/dsfr/pull/519)
- 🛠️ Correction du scroll progressif du contenu en arrière plan à l’ouverture/fermeture de la modale dans le cas de pages utilisant la propriété CSS “scroll-behavior: smooth” [#519](https://github.com/GouvernementFR/dsfr/pull/519)
- 🛠️ Correction du z-index des composants link, button, tag, badge qui passaient au-dessus du footer de la modale [#630](https://github.com/GouvernementFR/dsfr/pull/630)
- 🛠️ Correction du placement de l’icône credential permettant d’accéder au trousseau sur Safari [#711](https://github.com/GouvernementFR/dsfr/pull/630)

#### Menu latéral - sidemenu

- ✨ Uniformisation du menu latéral, navigation et accordéon homogénéisation des espacements et indentation [#678](https://github.com/GouvernementFR/dsfr/pull/678)
    - ajout d’un fond background-open-blue-france et du texte en text-blue-france sur les boutons d’ouverture en état ouvert
    - ajout de marges pour indenter les sous menus
    - ajustement des espacements
- 🚫 Suppression de la variante avec bordure [#660](https://github.com/GouvernementFR/dsfr/pull/660)

#### Navigation

- 🛠️ Correction du focus des nav-items en mobile & ajustements [#609](https://github.com/GouvernementFR/dsfr/pull/609)
    - Ajustement de l’alignement du bouton fermé en desktop
    - Retrait du mega-menu__leader vide dans les exemples
- ✨ Uniformisation du menu latéral, navigation et accordéon homogénéisation des espacements et indentation [#678](https://github.com/GouvernementFR/dsfr/pull/678)
    - Ajout d’un fond open-blue-france et du texte en blue-france sur les boutons d’ouverture en état ouvert
    - Ajout de marges pour indenter les sous menus
    - Ajustement des espacements

#### Onglets - tab

- 🛠️ Correction de l’écoute des événements de clavier dans les tab-panel [#531](https://github.com/GouvernementFR/dsfr/pull/531)
    - L’utilisation des flèches du clavier en dehors de la liste d’onglet ne déclenche plus le changement d’onglet. Cela permet notamment l’utilisation des flèches sur les radios boutons dans un onglet.
- 🛠️ Ajustements pour Internet Explorer 11 [#613](https://github.com/GouvernementFR/dsfr/pull/613)

#### Pagination

- ✨ Ajustement de l’écart entre les boutons et de la taille des boutons de pagination [#549](https://github.com/GouvernementFR/dsfr/pull/549)

#### Sélecteur de langue - translate

- ✨ L’icône “arrow-down-s-fill” est remplacée par l’icône “arrow-down-s-line”

#### Transcription

- 🛠️ Ajustement sur l’état défaut et actif de la transcription [#564](https://github.com/GouvernementFR/dsfr/pull/564)
    - Les icônes “+” et “-” sont retirées au profit de l’icône “>” orientée vers le bas par défaut et vers le haut dans l’état actif.
    - La graisse du texte passe en médium dans les 2 états
    - Passage icône et intitulé en couleur : action-high-blue-france
    - Ajout d’un fond background-open-blue-france sur le bouton lorsque l’élément est ouvert

#### Téléchargement de fichier - download

- ✨ Séparation du download en carte, lien, et tuile de téléchargement (Changement destructif) [#487](https://github.com/GouvernementFR/dsfr/pull/487)
    - Le composant fr-download est retiré (déprécié)
    - Nouveau variant de la carte fr-card--download
    - Nouveau variant du lien fr-link--download
        - Diminution de la graisse du titre du lien de téléchargement [#658](https://github.com/GouvernementFR/dsfr/pull/658)
    - Ajout de la tuile de téléchargement fr-tile--download

#### Tuile - tile

- ✨ Évolution majeure du composant tuile (Changement destructif) [#493](https://github.com/GouvernementFR/dsfr/pull/493)
    - La structure html de la tuile est maintenant comparable à celle du composant carte
        - Ajout de wrapper "fr-tile__content" et "fr-tile__header" pour englober le contenu et l’image
    - L’image des tuiles est remplacée par un pictogramme "fr-artwork"
        - Le wrapper "fr-tile__img" devient "fr-tile__pictogram"
    - Ajout de la possibilité de placer un badge, un tag, un texte de détail, dans le contenu de la tuile
    - Ajout d’une taille de tuile SM
- ✨ Uniformisation de la tuile avec carte [#602](https://github.com/GouvernementFR/dsfr/pull/602) [#657](https://github.com/GouvernementFR/dsfr/pull/657)
    - Ajout d’une icône “arrow-right” par défaut, et “external-link” si lien en target=”_blank”
    - Ajout d’un variant tuile sans icône fr-tile--no-icon
    - Ajout d”un variant tuile de téléchargement fr-tile--download (mode horizontal, icône “download”, détails et assess-file)
    - Ajout de variants fr-tile--vertical@md et fr-tile--vertical@lg pour passer une tuile horizontale, ou download, en vertical à partir des breakpoints md et lg
    - Ajout des variants fr-tile--no-border, fr-tile--shadow, fr-tile--grey, et fr-tile--no-background
    - Correction de la version désactivé (lien sans href)
    - Ajout d’une version sans lien (titre en noir)
- 🛠️ Correction des tuiles sur IE11 [#705](https://github.com/GouvernementFR/dsfr/pull/705)

### 📝 Modèles

#### Nom - name

- 🎉 Ajout d’un exemple de bouton de suppression de champs [#493](https://github.com/GouvernementFR/dsfr/pull/493)
- 🎉 Ajout d’un exemple de gestion de déplacement du focus en js [#664](https://github.com/GouvernementFR/dsfr/pull/664)
  - au clic sur la checkbox de désactivation pour activer, le premier champ ou bouton prend le focus
  - au clic sur l’ajout d’un prénom, le champs ajouté prend le focus
  - au clic sur la suppression, le champ ou bouton suivant prend le focus

#### Civilité - civility

- 🛠️ Corrige la taille des boutons radio du titre d’appel en sm au lieu de md [#676](https://github.com/GouvernementFR/dsfr/pull/676)

#### Connexion / Enregistrement - login / register

- ✨ La mention “champs obligatoires” doit être placée dans une balise <p> [#652](https://github.com/GouvernementFR/dsfr/pull/652)

### 🔌 Analytics

- 🛠️ Corrige les liens cassés de la documentation
- 🛠️ Retrait du patch js des pages d’exemples
- 🛠️ Correctif du collect manuel au changement d’url
- 🛠️ Correction du taux de clic désactivé sur certains composants
- 🛠️ Correction de l’analyse de hiérarchie qui ignorait les headings présents dans un composant
- 🛠️ Ajustements pages d’exemple
- ✨ Retrait des limitation de valeurs sur la propriété user.profile
- 🎉 Ajouts de propriétés dans la configuration de page
  - page_id
  - page_author
  - page_tags
  - page_date
