---
title: Note de version 1.11
shortTitle: Note de version 1.11
description: Cette page présente les nouveautés, évolutions et correctifs introduits dans la version 1.11 du Design Système de l’État notamment les nouveaux composants Curseur et Contrôle segmenté ainsi que les ajustements dans les librairies Sketch, Figma et le code.
shortDescription: Nouveautés et correctifs de la version 1.11 du Design Système de l’État
keywords: version 1.11, note de version, Design Système de l’État, composants, Sketch, Figma, code, changelog, mise à jour, curseur, contrôle segmenté
excerpt: Découvrez les ajouts de composants et les nombreuses améliorations apportées dans la version 1.11 du Design Système de l’État.
summary: Cette note de version détaille les ajouts majeurs de la version 1.11 comme les composants Curseur et Contrôle segmenté ainsi que la mise à jour des tokens, styles et icônes. Elle présente la dépréciation progressive de la librairie Sketch au profit de Figma. De nombreuses évolutions touchent les composants existants ainsi que des correctifs apportés au code et à la documentation. Cette page constitue un point de référence pour les équipes intégrant la version 1.11 du système.
toc: 2
version: '1.11'
---

# Note de version 1.11

## Général

La version 1.11.2 est disponible depuis le 4 mars 2024

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

La version 1.11.1 est disponible depuis le 31 janvier 2024

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

La version 1.11.0 est disponible depuis le 11 décembre 2023

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

### Nouveautés

🎉 Ajout du composant Curseur - Range

🎉 Ajout du composant Contrôle segmenté - Segmented control

### Évolutions

✨ Mise à disposition de l’icône twitter-x. Note : l’ancienne icône twitter reste disponible dans la librairie des icônes du DSFR.

## Librairie Sketch, v1.11.0

> [!NOTE]
> **Dépréciation progressive de Sketch**
>
> Cette version amorce la dépréciation de la librairie DSFR sur Sketch. Celle-ci sera maintenue pour les prochaines versions, mais seuls les correctifs y seront apportés. Les prochains composants seront disponibles sur Figma uniquement.

### 🎨 Fondamentaux

#### Couleurs

- ✨ Ajout des tokens de décision (layer-style) de fond ($background) :
  - $background-action-high-blue-france-hover
  - $background-action-high-blue-france-active
  - $background-action-low-blue-france-hover
  - $background-action-low-blue-france-active
  - $background-open-blue-france-hover
  - $background-open-blue-france-active
  - $background-default-grey-hover
  - $background-default-grey-active
  - $background-alt-grey-hover
  - $background-alt-grey-active
  - $background-transparent
  - $background-transparent-active
  - $background-transparent-hover

#### Styles de texte

- 🐛 Correction des tokens de couleurs sur les styles de texte - 4. Composants - Bouton radio - Case à cocher, Champ de saisi et Interrupteur :
  - Icône (si cliquable) : $text-action-high-grey
  - Icône (non cliquable) : $text-label-grey
  - Placeholder : $text-mention-grey
  - Label (titre) : $text-label-grey
  - Texte (saisi) : $text-default-grey

> [!NOTE]
> Ces styles sont automatiquement mis à jour pour les éléments de formulaire inclus aux composants : Bouton radio riche, Liste déroulante, Barre de recherche, Lettre d’information et réseaux sociaux (formulaire).

#### Icônes

✨ Ajout des icônes twitter-x-fill et twitter-x-line dans la bibliothèque Logos

### 🧩 Composants

#### Bouton radio

- 🐛 Correction des tokens de couleurs sur le bouton radio :
  - Coché : fond en $background-active-blue-france et contour en $border-active-blue-france.
  - Décoché : contour en $border-action-high-blue-france.

#### Bouton radio riche

- 🐛 Correction des tokens de couleurs sur le bouton radio :
  - Coché : fond en $background-active-blue-france et contour en $border-active-blue-france.
  - Décoché : contour en $border-action-high-blue-france.

#### Case à cocher

- 🐛 Correction des tokens de couleurs sur la case à cocher :
  - Coché : fond en $background-active-blue-france.
  - Décoché : contour en $border-action-high-blue-france.

#### Champ de saisie

- 🐛 Correction des tokens de couleurs sur les textes :
  - Icône (si cliquable) : $text-action-high-grey
  - Icône (non cliquable) : $text-label-grey
  - Placeholder : $text-mention-grey
  - Label (titre) : $text-label-grey
  - Texte (saisi) : $text-default-grey

#### Contrôle segmenté

- 🎉 Ajout du composant contrôle segmenté en tailles SM et MD :
  - Texte seul, avec icône
  - Défaut, sélectionné
  - Horizontal, Vertical (mobile)
- 🎉 Ajout des états Défaut, Désactivé, Survol, Focus et Cliqué.
- 🎉 Ajout des variantes avec légende verticale et horizontale.
- 🎉 Ajout des variantes avec texte de description optionnel.

#### Curseur

- 🎉 Ajout du composant curseur en tailles SM et MD :
  - Cranté : 4 crans et 10 crans (à personnaliser selon l’utilisation)
  - Simple : 4 étapes et 10 étapes (à personnaliser selon l’utilisation)
  - Double : Avec deux poignées.
- 🎉 Ajout des états Défaut, Désactivé, Focus, Erreur et Valide.
- 🎉 Ajout des variantes avec valeurs et sans valeurs.
- 🎉 Ajout des variantes avec texte de description optionnel.

#### En-tête

- 🐛 DESKTOP Ajustement de l’espacement interne du bloc marque à 16px.
- 🐛 DESKTOP Ajustement de l’espacement du haut et du bas à 24px.
- 🐛 DESKTOP MOBILE Ajustement du format sur le logo opérateur au ratio 16/9 et de son espacement du bloc marque.
- 🐛 MOBILE Ajout de la bordure du bouton tertiaire du menu (burger).
- 🐛 MOBILE Modification du token de couleur du bouton de recherche et du bouton de menu (burger) en $text-action-high-blue-france.
- 🐛 MOBILE Ajustement de l’espacement à 16px entre le bouton de recherche et le bouton de menu (burger).

#### Fil d’Ariane

🐛 DESKTOP MOBILE Modification de la taille de la police du label des items à 12px.

#### Gestionnaire de consentement

🐛 Modale de gestion : modification du token de couleur du lien “Voir plus / moins de détails” en $text-action-high-blue-france et suppression du soulignement.

#### Image d’en-tête [Bêta]

🚫 Suppression du composant.

#### Interrupteur

- 🐛 Ajustement de l’espacement entre le séparateur du bas et le contenu du haut à 16px au lieu de 8px. Cela concerne les items avec statut (désactivé - activé).
- 🐛 Correction des tokens de couleurs sur le bouton interrupteur :
  - Coché : fond en $background-active-blue-france et contour en $border-active-blue-france.
  - Décoché : contour en $border-action-high-blue-france.

#### Indicateur d'étapes

🐛 Ajustement de l’espacement à 8px entre les crans d'étapes.

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

- ✨ Ajout d'une variation Erreur du formulaire.
- ✨ Ajout d'une variation Valide du formulaire pour la confirmation d'inscription.

#### Menu latéral

- 🐛 MOBILE Correction de la taille du texte “Dans cette rubrique” à 16px au lieu de 14px.
- 🐛 MOBILE Modification de la graisse du texte “Dans cette rubrique” en médium.

#### Mise en exergue

🐛 MOBILE Ajustement de la taille du composant (SM, MD et LG) à 288px au lieu de 320px.

#### Navigation principale

🐛 DESKTOP Mégamenu : ajustement de l’espacement interne des items de lien et catégorie à 16px gauche et droite et à 12px haut et bas.

#### Paramètre d’affichage

- ✨ DESKTOP Ajout du bouton item “Paramètres d’affichage” à ajouter dans les liens d’accès rapide depuis le composant en-tête.
- ✨ MOBILE Ajout du bouton item “Paramètres d’affichage” à ajouter dans les liens d’accès rapide depuis le composant navigation principale mobile.

#### Partage

✨ Mise à jour de l’icône Twitter par l’icône X.

#### Pied de page

- 🐛 DESKTOP MOBILE Modification du token de couleur des liens de navigation (sur fond gris) en $text-defaut-grey
- 🐛 DESKTOP MOBILE Ajustement de l’espacement du bloc marque.
- 🐛 DESKTOP Ajustement de l’espacement du haut (séparateur inclus) à 32px et celui du bas à 24px sur le composant de base.
- 🐛 DESKTOP MOBILE Ajustement du format sur le logo opérateur au ratio 16/9 et de son espacement du bloc marque.
- 🐛 DESKTOP MOBILE Correction du texte de description optionnel qui doit faire trois lignes maximum au format desktop.
- 🐛 MOBILE Correction de l’espacement à 16px sous les liens obligatoires (références écosystème).
- 🐛 MOBILE Correction de l’espacement à 24px entre chaque dernier “Lien de navigation” et “Nom de catégorie”.
- 🐛 MOBILE Ajustement de l’espacement à 32px entre le premier logo partenaire et les suivants, espacement à 16px entre chaque autre logo partenaire, espacement à 24px à la fin du dernier logo partenaire.
- 🐛 DESKTOP Ajustement de l’espacement à 16px en-dessous des logos partenaires.
- ✨ DESKTOP MOBILE Ajout du bouton Paramètres d’affichage (optionnel) à la suite des liens de mentions obligatoires.

#### Sommaire

- 🐛 DESKTOP MOBILE Modification du token de couleur des liens (ancres) en $text-action-high-grey.
- ✨ DESKTOP MOBILE Ajouter d’un item de sous-liste “Ancre imbriquée”.
- ✨ DESKTOP MOBILE Modification de l’aspect survol avec l’ajout d’un item Survol pour l’ancre par défaut et l’ancre imbriquée. Le fond est remplacé par un soulignement sous le label.
- 🐛 DESKTOP MOBILE Modification de la graisse des numéros de liste en bold au lieu de regular.

### 📝 Modèles

#### Page article [Bêta]

🚫 Suppression du modèle.

#### Création de compte

🐛 MOBILE Modification de l’ordre des boutons d’action, Valider et Précédent.

## Librairie Figma, v1.11.0

### 🎨 Fondamentaux

#### Couleurs

- ✨ Ajout des tokens d’options (color-style) Illustration dans les dossiers :
  - LIGHT $color-main, $color-975 : Hover et Active.
  - DARK $color-main, $color-75 : Hover et Active.
- 🐛 Correction des tokens de décisions (color-style) Artwork ($artwork) :
  - LIGHT $artwork-decorative-blue-france : $blue-france-950.
  - DARK $artwork-decorative-blue-france : $blue-france-100.
- 🐛 Ajout / Correction des tokens de décisions (color-style) Border ($border) :
  - LIGHT $border-action-low-blue-france : $blue-france-850.
  - DARK $border-action-low-blue-france : $blue-france-200.
- ✨ Ajout des tokens de décisions (color-style) de fond ($background) :
  - $background-action-high-blue-france-hover
  - $background-action-high-blue-france-active
  - $background-action-low-blue-france-hover
  - $background-action-low-blue-france-active
  - $background-open-blue-france-hover
  - $background-open-blue-france-active
  - $background-default-grey-hover
  - $background-default-grey-active
  - $background-alt-grey-hover
  - $background-alt-grey-active
  - $background-transparent
  - $background-transparent-active
  - $background-transparent-hover

#### Styles de texte

- 🐛 Correction des tokens de couleurs sur les styles de texte - 4. Composants - Bouton radio - Case à cocher, Champ de saisi et Interrupteur :
  - Icône (si cliquable) : $text-action-high-grey
  - Icône (non cliquable) : $text-label-grey
  - Placeholder : $text-mention-grey
  - Label (titre) : $text-label-grey
  - Texte (saisi) : $text-default-grey

> [!NOTE]
> Ces styles sont automatiquement mis à jour pour les éléments de formulaire inclus aux composants : Bouton radio riche, Liste déroulante, Barre de recherche, Lettre d’information et réseaux sociaux (formulaire).

#### Séparateur

- ✨ Déplacement du composant Séparateur (horizontal et vertical) depuis le fichier DSFR - Composants vers le fichier DSFR - Fondamentaux.

#### Icônes

- ✨ Déplacement du composant Icônes (taille XS, SM, MD et LG) depuis le fichier DSFR - Composants vers le fichier DSFR - Fondamentaux.

### 🧩 Composants

#### Bouton radio

- 🐛 Correction des tokens de couleurs sur le bouton radio :
  - Coché : fond en $background-active-blue-france et contour en $border-active-blue-france.
  - Décoché : contour en $border-action-high-blue-france.

#### Bouton radio riche

- 🐛 Correction des tokens de couleurs sur le bouton radio :
  - Coché : fond en $background-active-blue-france et contour en $border-active-blue-france.
  - Décoché : contour en $border-action-high-blue-france.

#### Case à cocher

- 🐛 Correction des tokens de couleurs sur la case à cocher :
  - Coché : fond en $background-active-blue-france.
  - Décoché : contour en $border-action-high-blue-france.

#### Champ de saisie

- 🐛 Correction des tokens de couleurs sur les textes :
  - Icône (si cliquable) : $text-action-high-grey
  - Icône (non cliquable) : $text-label-grey
  - Placeholder : $text-mention-grey
  - Label (titre) : $text-label-grey
  - Texte (saisi) : $text-default-grey

#### Information

Les icônes à l’intérieur des champs de saisie se sont possiblement cachées

#### Contrôle segmenté

- 🎉 Ajout du composant contrôle segmenté en tailles SM et MD :
  - Texte seul, avec icône
  - Défaut, sélectionné
  - Horizontal, Vertical (mobile)
- 🎉 Ajout des états Défaut, Désactivé, Survol, Focus et Cliqué.
- 🎉 Ajout des variantes avec légende verticale et horizontale.
- 🎉 Ajout des variantes avec texte de description optionnel.

#### Curseur

- 🎉 Ajout du composant curseur en tailles SM et MD :
  - Cranté : 4 crans et 10 crans (à personnaliser selon l’utilisation)
  - Simple : 4 étapes et 10 étapes (à personnaliser selon l’utilisation)
  - Double : Avec deux poignées.
- 🎉 Ajout des états Défaut, Désactivé, Focus, Erreur et Valide.
- 🎉 Ajout des variantes Avec valeurs et Sans valeurs.
- 🎉 Ajout des variantes avec texte de description optionnel.

#### En-tête

### Changements destructifs

Liens à refaire pour les instances des composants En-tête.

- 🐛 DESKTOP Ajustement de l’espacement interne du bloc marque à 16px.
- 🐛 DESKTOP Ajustement de l’espacement du haut et du bas à 24px.
- 🐛 DESKTOP MOBILE Ajustement du format sur le logo opérateur au ratio 16/9 et de son espacement du bloc marque.
- 🐛 MOBILE Ajout de la bordure du bouton tertiaire du menu (burger).
- 🐛 MOBILE Modification du token de couleur du bouton de recherche et du bouton de menu (burger) en $text-action-high-blue-france.
- 🐛 MOBILE Ajustement de l’espacement à 16px entre le bouton de recherche et le bouton de menu (burger).

#### Formulaires

- 🚫 Suppression de la page Formulaires et migration des éléments de formulaire (titre de section, légende, label et message) vers la page du composant Champ de saisie.

#### Gestionnaire de consentement

- 🐛 Modale de gestion : modification du token de couleur du lien “Voir plus / moins de détails” en $text-action-high-blue-france et suppression du soulignement.

#### Image d’en-tête [Bêta]

- 🚫 Suppression du composant.

#### Indicateur d'étapes

- 🐛 Ajustement de l’espacement à 8px entre les formes (crans) d'étapes.

#### Interrupteur

- 🐛 Ajustement de l’espacement entre le séparateur du bas et le contenu du haut à 16px au lieu de 8px. Cela concerne les items avec statut (désactivé - activé).
- 🐛 Correction des tokens de couleurs sur le bouton interrupteur :
  - Coché : fond en $background-active-blue-france et contour en $border-active-blue-france.
  - Décoché : contour en $border-action-high-blue-france.

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

> [!NOTE]
> **Changements destructifs**
>
> Liens à refaire sur le variant sans description du composant.

- ✨ Ajout d'une variation Erreur du formulaire.
- ✨ Ajout d'une variation Valide du formulaire pour la confirmation d'inscription.

#### Menu latéral

- 🐛 MOBILE Correction de la taille du texte “Dans cette rubrique” à 16px au lieu de 14px.
- 🐛 MOBILE Modification de la graisse du texte “Dans cette rubrique” en médium.

#### Mise en exergue

- 🐛 MOBILE Ajustement de la taille du composant (SM, MD et LG) à 288px au lieu de 320px.

#### Navigation principale

- 🐛 DESKTOP Mégamenu : ajustement de l’espacement interne des items de lien et catégorie à 16px gauche et droite et à 12px haut et bas.

#### Paramètres d’affichage

- ✨ DESKTOP Ajout du bouton item “Paramètres d’affichage” à ajouter dans les liens d’accès rapide depuis le composant en-tête.
- ✨ MOBILE Ajout du bouton item “Paramètres d’affichage” à ajouter dans les liens d’accès rapide depuis le composant navigation principale mobile.

#### Partage

- ✨ Mise à jour de l’icône Twitter par l’icône X.

#### Pied de page

> [!NOTE]
> **Changements destructifs**
>
> Liens à refaire pour les instances du pied de page.

- 🐛 DESKTOP MOBILE Modification du token de couleur des liens de navigation (sur fond gris) en $text-defaut-grey
- 🐛 DESKTOP MOBILE Ajustement de l’espacement du bloc marque.
- 🐛 DESKTOP Ajustement de l’espacement du haut (séparateur inclus) à 32px et celui du bas à 24px sur le composant de base.
- 🐛 DESKTOP MOBILE Ajustement du format sur le logo opérateur au ratio 16/9 et de son espacement du bloc marque.
- 🐛 DESKTOP MOBILE Correction du texte de description optionnel qui doit faire trois lignes maximum au format desktop.
- 🐛 MOBILE Correction de l’espacement à 16px sous les liens obligatoires (références écosystème).
- 🐛 MOBILE Correction de l’espacement à 24px entre chaque dernier “Lien de navigation” et “Nom de catégorie”.
- 🐛 MOBILE Ajustement de l’espacement à 32px entre le premier logo partenaire et les suivants, espacement à 16px entre chaque autre logo partenaire, espacement à 24px à la fin du dernier logo partenaire.
- 🐛 DESKTOP Ajustement de l’espacement à 16px en-dessous des logos partenaires.
- ✨ DESKTOP MOBILE Ajout du bouton Paramètres d’affichage (optionnel) à la suite des liens de mentions obligatoires.

#### Sommaire

- 🐛 DESKTOP MOBILE Modification du token de couleur des liens (ancres) en $text-action-high-grey.
- 🐛 DESKTOP MOBILE Correction du token de couleur de fond du composant en $background-contrast-grey.
- ✨ DESKTOP MOBILE Ajouter d’un item de sous-liste “Imbriqué”.
- ✨ DESKTOP MOBILE Modification de l’aspect survol avec l’ajout d’un item Survol pour l’ancre par défaut et l’ancre imbriquée. Le fond est remplacé par un soulignement sous le label.
- 🐛 DESKTOP MOBILE Modification de la graisse des numéros de liste en bold au lieu de regular.

### 📝 Modèles

#### Page article [Bêta]

- 🚫 Suppression du modèle.

#### Création de compte

- 🐛 MOBILE Modification de l’ordre des boutons d’action, Valider et Précédent.

## Code, v1.11.2

### 🎨 Fondamentaux

- 🎉 Ajout de la propriété overflow-wrap: world-break pour forcer le passage à la ligne des mots plus grands que leur conteneur #886

### 🧩 Composants

#### En-tête - header

- 🐛 Correction du focus caché sur le lien du bloc marque [#881](https://github.com/GouvernementFR/dsfr/issues/881)
- 🐛 Correction d’une erreur js sur les liens d’accès rapide sans id #[893](https://github.com/GouvernementFR/dsfr/issues/893)

#### Tag - tag

- 🐛 Correction du style au survol et au clic des tags cliquables #[887](https://github.com/GouvernementFR/dsfr/issues/887)

#### Pied de page - footer

- 🐛 Retrait de l’icône “lien externe” sur les liens des logos en target="_blank" #[872](https://github.com/GouvernementFR/dsfr/issues/872)

### 🔌 Analytics

- 🐛 Correction d’une erreur js liée à l'héritage de la fonction listenClick #[885](https://github.com/GouvernementFR/dsfr/issues/885)
- 🐛 Correctifs dans la version standalone #[895](https://github.com/GouvernementFR/dsfr/issues/895)
    - configuration appliquée au logging (verbose, production)
    - retrait de dépendances non requises
    - extraction de Modes du fichier de la class Options pour réduire les dépendances

### Documentation

- ✨ Ajout de la description des paramètres de configuration production et level dans la documentation de l’API JS
- ✨ Ajout d’informations sur la configuration dans la doc analytics #[888](https://github.com/GouvernementFR/dsfr/issues/888)
- ✨ Ajout de documentation sur la version standalone des analytics concernant son installation et les fonctionnalités disponibles #[895](https://github.com/GouvernementFR/dsfr/issues/895)

## Code, v1.11.1

### 🎨 Fondamentaux

- Retrait du tap highlight des éléments input, button, a, label, select, textarea sur IOS dans le reset du core #[846](https://github.com/GouvernementFR/dsfr/issues/846)

### 🧩 Composants

#### Accordéon - accordion

- ✨ Ajout d’un attribut data-fr-group="false" pour dissocier le comportement d'ouverture/fermeture des accordéons à l'intérieur d'un groupe d'accordéons #[860](https://github.com/GouvernementFR/dsfr/issues/860)
- 🐛 Corrige le focus coupé lorsque l’on on remonte sur un accordéon précédent dans un groupe d'accordéon #[867](https://github.com/GouvernementFR/dsfr/issues/867)

#### Alerte - alert

- ✨ Ajout d’exemples d’alerte MD sans titre, et d’alerte SM avec titre #[853](https://github.com/GouvernementFR/dsfr/issues/853)

#### Contenu média - content

- ✨ Mise à jour des exemples #[866](https://github.com/GouvernementFR/dsfr/issues/866) :
    - ajoute une transcription à l'exemple de “Média image en svg, porteur d’information”
    - met à jour l'exemple de “Média image avec une transcription” avec une image porteuse de sens et renseigne la transcription correspondante

#### En-tête - header

- 🐛 Correction de la tailles des boutons d’accès rapide en mobile #[859](https://github.com/GouvernementFR/dsfr/issues/859)
- 🐛 Retrait de l’attribut aria-haspopup="menu" sur le bouton burger du menu mobile #[856](https://github.com/GouvernementFR/dsfr/issues/856)
- 🐛 Correction du focus coupé de la barre de recherche dans le header #[864](https://github.com/GouvernementFR/dsfr/issues/864)
- 🐛 Correction de la duplication des collapses en accès rapide dans le menu mobile #[873](https://github.com/GouvernementFR/dsfr/issues/873)

#### Infobulle - tooltiip

- 🐛 Ajout d'un fallback en linear-gradiant pour les navigateurs qui ne supportent pas le conic-gradiant (ex: firefox < 83) #[863](https://github.com/GouvernementFR/dsfr/issues/863)

#### Liste déroulante - select

- 🐛 Correction de l'affichage du optgroup en italique sur firefox windows #[870](https://github.com/GouvernementFR/dsfr/issues/870)

#### Navigation - navigation

- 🐛 Correction d'un bug de fermeture au clic à l'extérieur du composant sur safari #[840](https://github.com/GouvernementFR/dsfr/issues/840)
- 🐛 Correction d'un bug de fermeture d'un volet au clic sur un lien ou un bouton à l'intérieur du composant #[840](https://github.com/GouvernementFR/dsfr/issues/840)

#### Pied de page - footer

- 🐛 Retrait de l’icône “lien externe” sur les liens des logos en target="_blank" #[872](https://github.com/GouvernementFR/dsfr/issues/872)

### 📝 Modèles

#### Connexion - login

- ✨ Ajout de la description du bouton franceConnect #[855](https://github.com/GouvernementFR/dsfr/issues/855)

#### Recover - récupération de mot de passe

- 🚫 Déplacement des exemples de récupération de mot de passe dans les modèles de page de connexion #[854](https://github.com/GouvernementFR/dsfr/issues/854)

### 🔌 Analytics

- ✨ Ajout de la propriété de site_version dans les données de mesure d'audience #[868](https://github.com/GouvernementFR/dsfr/issues/868)

### Documentation

- 🎉 Ajout d’une page sur ces utilitaires de masquage/affichage d'éléments.
- ✨ Ajout d’informations sur les attributs data-fr-valid et data-fr-error des messages d’erreur/succès du composant Mot de passe

## Code, v1.11.0

### 🎨 Fondamentaux

#### Global

- ✨ Ajout des l’attributs rel="noopener external" et title="intitulé - nouvelle fenêtre" à tous les liens en target="_blank" (voir les liens externes sur : tile, card, link, notice, footer, quote) #737
- Ajout de la balise meta format detection pour désactiver le style automatique des url, date, email, et tél sur IOS #833
    - ajouter dans le head : `<meta name="format-detection" content="telephone=no,date=no,address=no,email=no,url=no">`
- 🐛 Correctif lorsque la valeur de l'attribut [aria-current] est "false" (composants concernés : breadcrumb, navigation, pagination, sidemenu, translate) #747
- 🐛 Correction js sur les vielles versions de navigateurs : remplacement des selecteurs :not(.selecteurA, .selecteurB) par :not(.selecteurA):not(.selecteurB) dans le js des composants : accordion, navigation, sidemenu, translate, transcription #786
- 🐛 Correction d'une erreur de javascript liée au dark mode sur scheme.js, pour la version 14 de Safari macOS et inférieur #796
- 🐛 Retrait du saut de ligne entre la balise `<a>` et son libellé dans les templates de link, tile, card, pour corriger l’ajout d’un espace entre le libellé du lien et l'icône #818
- ✨ Ajout d'une feuille de style dist/dsfr.print.css à charger pour appliquer les règles d'impression du DSFR et ajout d’une classe utilitaire .fr-no-print pour retirer un élément de l'impression. #802
- ⬆️ Mise à jour des dépendances npm #815

#### Core

- ✨ Ajout du style par défaut des listes de description : dl dt dd #748
- 🐛 Mise à jour du lien vers la page Typographie du site de documentation #775
- 🐛 Retrait de la marge ‘top’ des paragraphes sur IE #825
- 🐛 Correction de l’ajout forcé de soulignement sur tous les liens et de l’alignement de l’icône des liens externes sur IE #825

#### Utility

- 🐛 Correction du contenu du svg de l'icone user-setting-line qui ne correspondait pas à la bonne icône → **Penser à remplacer le svg** user-setting-line.svg si le dossier "icons" a été dupliqué #797

### 🧩 Composants

#### Accordéon - accordion

#### Alerte - alert

- ♻️ Refactorisation de la bordure des alertes en background-image à la place de box-shadow #742

#### Bouton FranceConnect

- 🐛 Le bouton FranceConnect doit répondre aux critères d’accessibilité qui redéfinissent le letter-spacing et la taille de fonte #813
    - Passage des valeurs de tailles et d'espacements en 'em' pour les rendre relatives à la taille de fonte du bouton
    - **Retrait du '+' de 'FranceConnect+' dans l'intitulé de fr-connect__brand.** Celui-ci est désormais placé en contenu du pseudo-élément after du bouton

#### Bouton - button

- 🐛 Retire la marge négative sur le modifier .fr-btn--close et corrige l'impact sur les composants 'alert', 'navigation', et 'notice' #784

#### Carte - card

- 🐛 Corrige l'alignement du détail de la carte dans une grille de carte sur les anciennes version de safari macOS (inférieure à 14.0) #796
- 🐛 Correction du ratio d’image des cartes de téléchargement sur IE #825
- 🐛 Passage des tag/badge en taille md sur les cartes md #833

#### Case à cocher - checkbox

- ✨ Il n’est plus obligatoire d’avoir une liste dans le figcaption de la citation #721
- 🐛 Changement de la couleur de la coche en $text-inverted-blue-france #762
- 🐛 Mise à jour du token de couleur des bordures #760
- 🐛 Correction de l'alignement de la case des cases à cocher sur IE #825

#### Champ de saisie - input

- 🐛 Corrige le token de couleur de l'intitulé et des icones dans les champs de saisie #740
- ✨ Customisation de l'icône de suppression du champs de recherche sur chrome : close-circle-fill #740
- 🐛 Sur les champs de saisie avec icône le placement de l’icône passe à 16px du bord droit et ajustement du <span lang="en">padding-right</span> à 44px #766

#### Citation - quote

- ✨ Augmentation de la marge droite de l'image en desktop #833

#### Contrôle segmenté - segmented

- 🎉 Ajout du composant contrôle segmenté #805

#### Curseur - range

- 🎉 Ajout du composant curseur #817

#### En-tête - header

- ✨ Ajout d'exemples d’accès rapides #727
    - ajout des modifier de boutons fr-btn--tooltip, fr-btn--briefcase, fr-btn--team
    - ajout d'exemples avec un seul raccourcis (sans liste)
    - ajout exemple utilisateur connecté
- 🐛 Le token de couleur du titre de service passe en text-title-grey #745
- 🐛 Augmentation du z-index du header pour passer au dessus des cartes avec ombres, ajout du niveau d'élévation raised-over #830
- 🐛 Ajustements graphiques #791 :
    - change la couleur du menu burger en $action-high-bleu-france en mobile
    - passe l'écart entre bloc marque et logo opérateur à 32px et l'écart entre logo opérateur et nom du site à 32px
    - réduit la taille de la barre de recherche à 96v (24rem) au lieu de 25rem
    - bloque la taille du logo opérateur à 8rem max (144px)
    - passe la taille du texte de la tagline en sm (14px) au lieu de md
    - passe le bouton burger en tertiaire avec border

#### Fil d’Ariane - breadcrumb

- 🐛 Correction de la hauteur du composant fil d’arianne sur IE #825
- 🐛 Alignement vertical des chevrons du fil d'arianne #833

#### Formulaire - form

- 🐛 Correction de la largeur des classes fr-fieldset__content pour la version dépréciée #766
- 🐛 Le token de couleur de la légende du fieldset passe en en $text-label-grey à la place de $text-title-grey #783
- 🐛 Augmentation de la marge au dessus du message d'erreur sur checkbox, input, select (16px) #833

#### Gestionnaire de consentement - consent

- 🐛 Le titre de la bannière devient un `<h4>` à la place d'un `<p>` dans la structure HTML du composant #719
- 🐛 Coche les cookies obligatoires par défaut #754
- 🐛 Extension de la zone de clic du lien “voir plus de detail” #754
- 🐛 Le token de couleur des titres de finalité passe en $text-title-grey #767
- 🐛 Ajustement de la marge droite des boutons radios "accepter" #768

#### Indicateur d'étape - stepper

- 🐛 Inversion de l'étape et du titre dans la structure html #724
- ✨ Augmentation de l'épaisseur du stepper à 8px #833

#### Interrupteur - toggle

- 🐛 Utilisation du token de couleur $text-label-grey sur le label de l'interrupteur #771
- 🐛 Ajout de 4px de marge entre la coche et le texte “activer/désactiver” #771
- 🐛 Mise à jour du token de couleur des bordures #760
- 🐛 Augmentation de la largeur max du label, la marge de 10v passe à 8v #819
- 🐛 Correction de la taille de l'icône sur les tuiles md sans lien étendu #818
- 🐛 Retrait de l'icône arrow-right sur les tuiles sans lien étendu, pour être iso avec les cartes #818

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

- 🐛 Correction de la couleur de soulignement lorsque le champ newsletter de la lettre d'information est en erreur, en rouge et non en bleu #772
- 🐛 Sur les exemples "Lettre d'info seule" et "Réseaux sociaux et Lettre d'info mise en avant", place le bouton d'action dans un groupe de bouton fr-btns-group--inline-md pour que le bouton prenne l’ensemble de la largeur sur mobile #781
- 🐛 Inversion de l'ordre des boutons "Instagram" et "LinkedIn" #781
- ✨ Mise en place de l'icône twitter-x par défaut #824
- 🐛 Suppression des marges négatives du groupe de boutons des réseaux sociaux #781

#### Liens d'évitement - skiplink

- 🐛 Masquage des liens d'évitement lors du rebond du scroll sur ios #749
- 🐛 L'écart entre les liens d'évitement passe à 16px (4v) #789
- 🐛 En desktop la marge en haut et en bas du composant passe à 12px (3v) #789

#### Liste déroulante - select

- ✨ Ajout d'un example de select avec groupe d'options (optgroup) #734
- 🐛 Réduction de la taille de l’icône #736
- 🐛 correction de l’intitulé “Sélectionner une option” #736
- 🐛 Correction du token de couleur de l'intitulé du select #740

#### Logo - logo

- 🐛 Passage de la couleur du logo en noir absolu en thème clair #738
    - ✨ ajout du token $text-black-white-grey correspondant au noir absolu #000 en thème clair et blanc absolu #fff en thème sombre

#### Menu latéral - sidemenu

- 🐛 Retrait d'1v (4px) de <span lang="en">padding</span> à gauche et à droite sur fr-sidemenu__inner en desktop #793
- 🐛 Correction du token de couleur des liens du menu latéral en $text-action-high-grey #833

#### Mot de passe - password

- 🐛 Modification du token de couleur sur le label de la checkbox “afficher” en text-label-grey #750
- ✨ Changement de l'icône de message d'information pour info-fill #832
- 🐛 Corrige le placement de la checkbox #832

#### Mise en avant - highlight

- ♻️ Refactorisation de la bordure en background-image à la place de box-shadow #746
- 🐛 Ajustement du <span lang="en">padding</span> à 5v en mobile et 9v en desktop #777

#### Mise en exergue - callout

- ♻️ Refactorisation de la bordure en background-image à la place de box-shadow #746

#### Modale - modal

- 🐛 Retrait de la liste `<ul><li>` dans la structure HTML de la zone d'action (modale avec footer) #720

#### Navigation - navigation

- 🐛 Suppression de la classe fr-mb-4v de la colonne entourant le fr-mega-menu__leader #785
- 🐛 Ajout d'un margin-top: -1.25rem (-20px) sur le fr-mega-menu__leader #785
- 🐛 Passage du texte de description et le lien du fr-mega-menu__leader en taille sm #785
- 🐛 Passage du bouton de navigation en $text-action-high-blue-france à l'ouverture #785

#### Pagination - pagination

- 🐛 Correction des icônes prev/next de la pagination sur IE #825

#### Partage - share

- 🐛 Le token de couleur du texte lorsque les cookies sont désactivés passe en $text-mention-grey #778
- ✨ Mise en place de l'icône twitter-x par défaut #824

#### Pied de page - footer

- 🐛 Ajustements tailles et espacement #792
    - **corrige le niveau de titre des partenaires (h2 à la place de h4 par défaut)**
    - le texte de description fr-footer__content-desc doit faire maximum 3 lignes en desktop
    - passe les liens fr-footer__content-link en $text-default-grey
    - passe le <span lang="en">padding</span> top de fr-footer__bottom-list à 4v
    - correction des espacements autour de fr-footer-body : en mobile et en desktop (32px en haut et 24px en bas)
    - titre “nos partenaire“ → fr-footer__partners-title passe en graisse régular, couleur text-default-grey
    - écart de 12px sous “Nos partenaire” en mobile/desktop
    - enlève le <span lang="en">padding</span> sur fr-footer__partners fr-footer__logo, ajoute une border 1px en $border-default-grey + un background en background-default-grey
    - en desktop l’écart entre logo opérateur et bloc marque passe à 32px
    - passe le logo opérateur en ratio 16x9 dans les exemples
    - ajoute un margin bottom négatif de 8px sur le groupe de lien pour garder 24px en dessous
    - retire le <span lang="en">padding</span> sur les images des logos partenaires
    - passe à 16px entre les logos partenaires secondaires
    - corrige l’alignement du logo partenaire principal, lorsque qu’il n’y a pas de logo partenaires secondaires
    - corrige alignement des liens en bas du footer

#### Radio bouton - radio

- 🐛 Mise à jour du token de couleur des bordures #760

#### Sélecteur de langue - translate

- ✨ Passage en bleu du bouton d'ouverture du sélecteur de langue en mobile #833

#### Sommaire - summary

- 🐛 Ajout d'un <span lang="en">padding-left</span> de 8px pour aligner le titre avec le premier élément de la liste #779

#### Tag - tag

- 🐛 Utilisation du token $text-inverted-blue-france sur la couleur du texte des tags sélectionnables et supprimables à la place de $text-inverted-grey #780
- 🐛 Remplacement du token de couleur de fond des tags sélectionnables par $background-active-blue-france au lieu de $background-action-high-blue-france #780
- 🐛 Correction des couleurs du tag désactivé sur IE #825
- 🐛 Correction du token des tags désactivés #833

#### Téléchargement de fichier - download (déprécié)

- 🐛 Correction de la taille de l'icône du download--card #788

### 📝 Modèles

#### Nom - name

- **🐛 Les boutons d'ajout et de suppression de prénom passent en secondaire à la place de tertiaire #773**
    - **Utiliser la classe fr-btn--secondary à la place de fr-btn--tertiary**

#### Connexion - login

- 🐛 Correction d’espacements #759
    - corrige l'espace en trop entre le lien "Mot de passe oublié ?" et la checkbox "Se souvenir de moi"
    - ajoute une marge supplémentaire sous l’alerte d’erreur

#### Enregistrement - register

- 🐛 Correction de l'alignement des boutons #726 :
    - en mobile, les boutons sont alignés l’un au dessus de l’autre, bouton primaire en premier → Ajouter la classe : fr-btns-group--inline-reverse
    - en desktop, les boutons sont alignés à droite, bouton primaire à droite → Modier la classe : fr-btns-group--inline en fr-btns-group--inline-sm

#### Erreur 404 - unexpected

- 🐛 Inverse le texte principal et le texte de description du model de page #723

#### Erreur 500 - unavailable

- 🐛 Changement de la couleur de fond de page pour du $background-alt-blue-france #787
- ✨ Remplacement de l'image décorative par un SVG #787

### 🔌 Analytics

- 🐛 Correction de la fonction dispose sur Instance pour enlever les écouteurs sur la modification du hash de l'url #816
- ✨ Ajout de la propriété isActionEnabled dans la configuration et sur l'objet window.dsfr.analytics permettant d'activer l'envoi des données d'actions si nécessaire. #812
- ✨ Ajout de l'attribut data-fr-analytics-action permettant d'activer l'envoi d'action sur un élément particulier et de spécifier la partie title de l'actionName envoyé #812
- 🐛 Correctif sur les sélecteurs des card, title pour traquer des boutons #812

### Documentation

- Mise à jour des liens vers la documentation dans les pages d’exemple des composants #822

#### Readme

- 🐛 Correction d'espacements et de fautes de frappe #774
- 🐛 Précision de l'interdiction d'utilisation "pour des sites web ou des applications", sans interdire d'utiliser le DSFR pour créer, par exemple, un système de design entièrement différent (d'où l'intérêt de la licence libre). #774
- 🐛 Correction du lien vers la documentation des icônes #804

#### CGU

- 🐛 Ajout de "www" dans l'url du site de documentation #799

#### Contributing

- 🐛 Ajout du formatage shell pour les snippets de code et correction de fautes d'ortographe
