@lab-anssi/ui-kit 1.61.3 → 1.62.0

package/dist/styles/dsfr-icons.scss

@@ -0,0 +1,4 @@
+// Feuille de style partagée pour les icônes DSFR
+// Destinée à être importée une seule fois dans le bundle via adoptedStyleSheets
+// Ne pas importer directement dans un <style> de composant Svelte
+@import "@gouvfr/dsfr/src/dsfr/utility/icons/main";

package/dist/styles/dsfr-variables.scss

@@ -0,0 +1,28 @@
+@use "@gouvfr/dsfr/src/module/color";
+@import "@gouvfr/dsfr/src/dsfr/core/index";
+@import "@gouvfr/dsfr/src/dsfr/core/style/display/module/no-scroll";
+@import "@gouvfr/dsfr/src/dsfr/core/style/spacing/module/elevation";
+@import "@gouvfr/dsfr/src/dsfr/core/style/color/module"; // Light Theme
+@import "@gouvfr/dsfr/src/dsfr/scheme/style/module"; // Dark Theme
+
+@include generate-margin-vars();
+
+:root {
+  @include init-underline;
+  @include enable-underline;
+  @include enable-external;
+
+  --text-decoration: none;
+}
+
+[data-themeable="false"] {
+  @include color.define();
+}
+
+dsfr-container:not(:defined) {
+  display: block;
+  margin: 0 auto;
+  max-width: 78rem;
+  padding-inline: 1rem;
+  width: 100%;
+}

package/dist/styles/mixins-dsfr.scss

@@ -0,0 +1,226 @@
+@use "src/module/color";
+@use "@gouvfr/dsfr/src/dsfr/core/index" as *;
+
+$checkmark-scale: var(--checkmark-scale, 0.7) !default;
+$checkmark-size: var(--checkmark-size, 24px) !default;
+$dash-height: var(--dash-height, 2px) !default;
+
+/// Ajoute un style `display` au composant hôte dans le Shadow DOM.
+/// Permet également d'injecter du contenu CSS supplémentaire via `@content`.
+///
+/// @param {String} $display [block] - La valeur de la propriété CSS `display` à appliquer au `:host`.
+/// @content - Contenu CSS additionnel à insérer dans le bloc `:host`.
+///
+@mixin set-shadow-host($display: "block", $font-size: true, $tag: null) {
+  $host: ":host";
+
+  @if $tag {
+    $host: "#{$host}(#{$tag})";
+  }
+
+  #{$host} {
+    display: #{$display};
+    @include text-adjustments();
+    @if $font-size {
+      @include text-style(md);
+    }
+    @include color.background(
+      default grey,
+      (
+        legacy: false,
+      )
+    );
+    @include color.text(
+      default grey,
+      (
+        legacy: false,
+      )
+    );
+    background-color: transparent;
+
+    @content;
+  }
+}
+
+/// Applique `box-sizing: border-box` au composant spécifié et à tous ses descendants.
+///
+/// @param {String} $component - Le nom du composant à cibler (utilisé dans la classe `.fr-#{$component}`).
+/// @content Permet d'injecter du contenu additionnel à l'intérieur du bloc du composant.
+///
+@mixin set-dsfr-sizing($component) {
+  .fr-#{$component} {
+    box-sizing: border-box;
+
+    @content;
+  }
+}
+
+/// Reproduis une coche (checkmark) en pure CSS via des bordures.
+///
+/// @param {Color} $color [var(--border-action-high-blue-france)] - Couleur de la coche.
+///
+@mixin set-icon-check($icon-color: var(--border-action-high-blue-france)) {
+  content: "";
+  display: inline-block;
+  width: $checkmark-size;
+  height: $checkmark-size;
+  background-color: var(--icon-check-color, $icon-color);
+  clip-path: polygon(41.7% 63.2%, 80% 24.9%, 85.8% 30.8%, 41.7% 75%, 15.2% 48.5%, 21% 42.6%);
+
+  @content;
+}
+
+/// Reproduis un tiret (indéterminé) en pure CSS via un arrière-plan.
+///
+/// @param {Color} $icon-color [var(--border-action-high-blue-france)] - Couleur du tiret.
+///
+@mixin set-icon-indeterminate($icon-color: var(--border-action-high-blue-france)) {
+  content: "";
+  display: inline-block;
+  background-color: $icon-color;
+  width: calc($checkmark-size * 0.38);
+  height: $dash-height;
+
+  @content;
+}
+
+/// Applique des styles personnalisés à une case à cocher en affichant une coche personnalisée.
+///
+/// Cette mixin masque l'icône par défaut de la case à cocher et ajoute une coche stylisée
+/// en pure CSS lorsque la case est cochée.
+///
+@mixin set-themeable-checkbox() {
+  input[type="checkbox"] {
+    &:checked + label,
+    &:disabled + label,
+    &:indeterminate + label {
+      &::before {
+        --data-uri-svg: none;
+      }
+
+      &::after {
+        position: absolute;
+        z-index: 1;
+      }
+    }
+
+    &:checked:not(:indeterminate) + label {
+      &::after {
+        @include set-icon-check(var(--text-inverted-blue-france)) {
+          left: var(--checkbox-gap, -2rem);
+          top: calc((#{$checkmark-size} * #{$checkmark-scale}) / 2);
+          transform: translateY(-50%);
+          scale: $checkmark-scale;
+        }
+      }
+    }
+
+    &:disabled + label {
+      &::after {
+        --icon-check-color: currentColor;
+      }
+    }
+
+    &:indeterminate + label {
+      &::before {
+        background-color: var(--background-active-blue-france);
+      }
+
+      &::after {
+        @include set-icon-indeterminate(var(--text-inverted-blue-france)) {
+          top: calc(($checkmark-size - $dash-height) / 2);
+          left: calc(var(--checkbox-gap, -2rem) + (#{$checkmark-size} / 2));
+          transform: translateX(-50%);
+        }
+      }
+    }
+  }
+
+  .fr-label {
+    &::before {
+      --data-uri-svg: none;
+    }
+  }
+}
+
+/// Applique les styles pour les cases à cocher en taille "small" (sm)
+///
+/// Cette mixin ajuste les variables CSS pour
+/// réduire l'écart entre les éléments, la taille de la coche et le positionnement vertical du label.
+///
+@mixin set-themeable-checkbox-sm() {
+  &--sm {
+    --checkbox-gap: var(--checkbox-gap-sm, -1.5rem);
+    --checkmark-size: 1rem;
+    --checkmark-scale: 1;
+
+    label::after {
+      margin-top: 0.25rem;
+    }
+  }
+}
+
+/// Applique des styles personnalisés pour différentes variantes de boutons.
+///
+/// Cette mixin définit les styles pour les variantes secondary, inverted-primary et inverted-secondary,
+/// en gérant les états hover, active et disabled avec des couleurs et des bordures appropriées.
+///
+@mixin set-custom-button-kind() {
+  &--secondary {
+    --hover: var(--background-default-grey-hover);
+    --active: var(--background-default-grey-active);
+  }
+
+  &--inverted-primary {
+    --hover: var(--background-default-grey-hover);
+    --active: var(--background-default-grey-active);
+    background-color: var(--background-default-grey);
+    box-shadow: inset 0 0 0 1px var(--background-default-grey);
+    color: var(--text-action-high-blue-france);
+
+    &:disabled {
+      box-shadow: inset 0 0 0 1px var(--border-disabled-grey);
+    }
+  }
+
+  &--inverted-secondary,
+  &--inverted-tertiary,
+  &--inverted-tertiary-no-outline {
+    --hover: var(--background-transparent-hover, rgb(255 255 255 / 8%));
+    --active: var(--background-transparent-active, rgb(255 255 255 / 16%));
+    --background-action-high-blue-france: transparent;
+    --background-disabled-grey: transparent;
+
+    color: var(--text-inverted-grey);
+  }
+
+  &--inverted-secondary {
+    box-shadow: inset 0 0 0 1px var(--background-default-grey);
+
+    &:disabled {
+      box-shadow: inset 0 0 0 1px var(--border-disabled-grey);
+    }
+  }
+
+  &--inverted-tertiary {
+    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 40%);
+    box-shadow: inset 0 0 0 1px rgb(from var(--background-default-grey) r g b / 0.4);
+
+    &:disabled {
+      box-shadow: inset 0 0 0 1px rgb(255 255 255 / 40%);
+      box-shadow: inset 0 0 0 1px rgb(from var(--background-default-grey) r g b / 0.4);
+      opacity: 0.6;
+    }
+
+    &-no-outline {
+      &,
+      &:disabled {
+        box-shadow: none;
+      }
+
+      &:disabled {
+        opacity: 0.6;
+      }
+    }
+  }
+}

package/dist/styles/mixins.scss

@@ -0,0 +1,51 @@
+@use "sass:math";
+
+/// Ajoute un style d'outline personnalisé lors du focus clavier (`:focus-visible`).
+@mixin set-focus() {
+  outline: {
+    color: #0a76f6;
+    offset: 2px;
+    style: solid;
+    width: 2px;
+  }
+}
+
+/// Réinitialise le style de base d'un bouton pour supprimer les styles par défaut du navigateur.
+@mixin reset-bouton() {
+  background-color: transparent;
+  font-family: inherit;
+  appearance: none;
+  cursor: pointer;
+}
+
+/// Mixin pour cacher visuellement un élément tout en le gardant accessible aux lecteurs d'écran.
+///
+/// @author [WCAG 2.2 Technique C7](https://www.w3.org/WAI/WCAG22/Techniques/css/C7)
+///
+@mixin visually-hidden() {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  padding: 0;
+  width: 1px;
+}
+
+/// Applique un rayon de bordure personnalisable via une variable CSS avec une valeur par défaut.
+///
+/// @param {Number} $radius [0] - La valeur par défaut du rayon de bordure en cas où la variable CSS `--lab-border-radius` n'est pas définie.
+///
+@mixin set-border-radius($radius: 0) {
+  border-radius: var(--lab-border-radius, #{$radius});
+}
+
+/// Convertit une valeur en pixels en unité rem.
+///
+/// @param {Number} $size - La valeur en pixels à convertir en rem.
+/// @return {Number} La valeur convertie en rem (basée sur une taille de base de 16px).
+///
+@function rem($size) {
+  @return math.div($size, 16px) * 1rem;
+}

package/dist/types/commun.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Le fichier `commun.ts` contient des types communs partagés entre plusieurs composants d'un même "scope".
+ * Ces `types` peuvent être utilisés pour assurer la cohérence et la réutilisabilité au sein de ce scope.
+ */
+import type { Image } from "./global";
+export type Action = {
+    titre: string;
+    lien: string;
+    target?: "_self" | "_blank" | "_parent" | "_top";
+};
+export type Tuiles = {
+    titre: string;
+    contenu?: string;
+    illustration?: Image;
+}[];
+export type EtapeMarelle = {
+    titre: string;
+    description: string;
+    lien?: {
+        href: string;
+        texte: string;
+        target: "_self" | "_blank" | "_parent" | "_top";
+    };
+    illustration: Image;
+};
+export type Temoignage = {
+    auteur: string;
+    citation: string;
+    source: string;
+};
+export type Lien = {
+    label: string;
+    href: string;
+};
+type Feuille = {
+    label: string;
+};
+export type NoeudFilAriane = Lien | Feuille;
+export type InfosTag = {
+    label: string;
+    couleurTexte: string;
+    couleurFond: string;
+};
+export type TableDesMatieres = {
+    profondeur: number;
+    texte: string;
+    id: string;
+}[];
+export type ResumeArticle = {
+    idCategorie: string;
+    titre: string;
+    href: string;
+};
+export type CategoriesArticle = Record<string, InfosTag>;
+export type Kind = "primary" | "secondary" | "tertiary" | "tertiary-no-outline" | "inverted-primary" | "inverted-secondary" | "inverted-tertiary" | "inverted-tertiary-no-outline";
+export type TranslateLanguage = {
+    active: boolean;
+    id: string;
+    name: string;
+    locale: string;
+    href: string;
+};
+export {};

package/dist/types/commun.js

@@ -0,0 +1 @@
+export {};

package/dist/types/global.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Le fichier `global.ts` contient les `types` globaux utilisés dans l'application.
+ * Il regroupe les `types` pouvant être utilisés par l'ensemble des éléments de l'application (DSFR & LAB).
+ * Ces `types` peuvent être étendus, modifiés ou être combinés pour créer des `types` plus complexes selon les besoins de l'application.
+ *
+ * > [!NOTE] : Les `types` définis ici respectent les conventions de nommage propre au contexte qui ont engendrés leurs créations.
+ * > Cela signifie que les `types` en provenance du DSFR sont nommés selon les conventions du DSFR et il est en de même pour les `types` en provenance du LAB.
+ */
+export type Accent = "défaut" | "green-tilleul-verveine" | "green-bourgeon" | "green-emeraude" | "green-menthe" | "green-archipel" | "blue-ecume" | "blue-cumulus" | "purple-glycine" | "pink-macaron" | "pink-tuile" | "yellow-tournesol" | "yellow-moutarde" | "orange-terre-battue" | "brown-cafe-creme" | "brown-caramel" | "brown-opera" | "beige-gris-galet";
+export type iconPlace = "only" | "left" | "right";
+export type Size = "sm" | "md" | "lg" | "xl";
+export type Status = "success" | "warning" | "error" | "info" | "new";
+export type TextSize = "xs" | "sm" | "md" | "lg" | "xl" | "lead";
+export type TextWeight = "light" | "regular" | "bold" | "heavy";
+export type Target = "self" | "blank";
+export type Image = {
+    lien: string;
+    alt: string;
+};
+export type Video = {
+    source: string;
+    sourcesoustitres?: string;
+    imagedecouverture?: string;
+};

package/dist/types/global.js

@@ -0,0 +1,9 @@
+/**
+ * Le fichier `global.ts` contient les `types` globaux utilisés dans l'application.
+ * Il regroupe les `types` pouvant être utilisés par l'ensemble des éléments de l'application (DSFR & LAB).
+ * Ces `types` peuvent être étendus, modifiés ou être combinés pour créer des `types` plus complexes selon les besoins de l'application.
+ *
+ * > [!NOTE] : Les `types` définis ici respectent les conventions de nommage propre au contexte qui ont engendrés leurs créations.
+ * > Cela signifie que les `types` en provenance du DSFR sont nommés selon les conventions du DSFR et il est en de même pour les `types` en provenance du LAB.
+ */
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export type * from "./global";
+export type * from "./commun";

package/dist/types/index.js

@@ -0,0 +1 @@
+export {};