@lab-anssi/ui-kit 1.56.0 → 1.58.0

package/dist/ui-kit-components.json

@@ -373,7 +373,9 @@
             "tertiary",
             "tertiary-no-outline",
             "inverted-primary",
-            "inverted-secondary"
+            "inverted-secondary",
+            "inverted-tertiary",
+            "inverted-tertiary-no-outline"
           ]
         },
         {
@@ -5405,6 +5407,46 @@
       "slots": [],
       "example": "<dsfr-toggle\n    id={args.id}\n    label={args.label}\n    hint={args.hint}\n    hint-id={args.hintId}\n    disabled={args.disabled || undefined}\n    checked={args.checked || undefined}\n    border={args.border || undefined}\n    left={args.left || undefined}\n    state={args.state || undefined}\n    status={args.status}\n    error-message={args.errorMessage}\n    valid-message={args.validMessage}\n    form={args.form}\n    required={args.required || undefined}\n    hide-label={args.hideLabel || undefined}\n  ></dsfr-toggle>"
     },
+    {
+      "tagName": "dsfr-tooltip",
+      "title": "Composants/DSFR/Tooltip",
+      "source": "src/lib/dsfr/DsfrTooltip.svelte",
+      "props": [
+        {
+          "name": "id",
+          "attribute": "id",
+          "type": "String",
+          "tsType": "string",
+          "description": "Identifiant de l'infobulle"
+        },
+        {
+          "name": "content",
+          "attribute": "content",
+          "type": "String",
+          "tsType": "string",
+          "description": "Contenu texte de l'infobulle"
+        },
+        {
+          "name": "type",
+          "attribute": "type",
+          "type": "String",
+          "tsType": "TooltipType",
+          "description": "Type de déclenchement : 'hover' (information contextuelle) ou 'click' (infobulle)",
+          "options": [
+            "hover",
+            "click"
+          ]
+        }
+      ],
+      "events": [],
+      "slots": [
+        {
+          "name": "default",
+          "description": "Élément déclencheur de l'infobulle (élément focusable)"
+        }
+      ],
+      "example": "<dsfr-tooltip content={args.content} id={args.id} type={args.type}>\n    {#if args.type === \"click\"}\n      <DsfrButton label=\"infobulle\" preset=\"tooltip\" />\n    {:else}\n      <DsfrButton label=\"Information contextuelle\" />\n    {/if}\n  </dsfr-tooltip>"
+    },
     {
       "tagName": "dsfr-transcription",
       "title": "Composants/DSFR/Transcription",
@@ -5513,7 +5555,9 @@
             "tertiary",
             "tertiary-no-outline",
             "inverted-primary",
-            "inverted-secondary"
+            "inverted-secondary",
+            "inverted-tertiary",
+            "inverted-tertiary-no-outline"
           ]
         }
       ],
@@ -5710,82 +5754,119 @@
           "name": "titre",
           "attribute": "titre",
           "type": "String",
-          "tsType": "string"
+          "tsType": "string",
+          "description": "Titre du bandeau"
         },
         {
           "name": "baliseTitre",
           "attribute": "balise-titre",
           "type": "String",
-          "tsType": "string"
+          "tsType": "string",
+          "description": "Balise HTML (Hn) du titre"
         },
         {
           "name": "description",
           "attribute": "description",
           "type": "String",
-          "tsType": "string"
-        },
-        {
-          "name": "actions",
-          "attribute": "actions",
-          "type": "Object"
+          "tsType": "string",
+          "description": "Description du bandeau"
         },
         {
           "name": "mention",
           "attribute": "mention",
           "type": "String",
-          "tsType": "string"
-        },
-        {
-          "name": "inverse",
-          "attribute": "inverse",
-          "type": "Boolean",
-          "tsType": "boolean"
+          "tsType": "string",
+          "description": "Mention du bandeau"
         },
         {
           "name": "urlImage",
           "attribute": "url-image",
           "type": "String",
-          "tsType": "string | undefined"
+          "tsType": "string | undefined",
+          "description": "Url de l'image"
         },
         {
           "name": "sansImage",
           "attribute": "sans-image",
           "type": "Boolean",
-          "tsType": "boolean"
+          "tsType": "boolean",
+          "description": "Si \"vrai\", l'image n'est pas affichée"
         },
         {
           "name": "avecFilAriane",
           "attribute": "avec-fil-ariane",
           "type": "Boolean",
-          "tsType": "boolean"
+          "tsType": "boolean",
+          "description": "Si \"vrai\", le fil d'Ariane est affiché"
         },
         {
           "name": "liensFilAriane",
           "attribute": "liens-fil-ariane",
           "type": "Array",
-          "tsType": "BreadcrumbSegment[]"
+          "tsType": "BreadcrumbSegment[]",
+          "description": "Segments du fil d'Ariane"
+        },
+        {
+          "name": "type",
+          "attribute": "type",
+          "type": "String",
+          "tsType": "\"default\" | \"fiche\" | \"simple\"",
+          "description": "Type du bandeau",
+          "options": [
+            "default",
+            "fiche",
+            "simple"
+          ]
+        },
+        {
+          "name": "theme",
+          "attribute": "theme",
+          "type": "String",
+          "tsType": "\"clair\" | \"sombre\"",
+          "description": "Thème du bandeau",
+          "options": [
+            "clair",
+            "sombre"
+          ]
+        },
+        {
+          "name": "inverse",
+          "attribute": "inverse",
+          "type": "Boolean",
+          "tsType": "boolean",
+          "description": "Inversion du thème _(déprécié - préférer l'utilisation de la prop ``theme=\"inverse\"``)_"
         },
         {
           "name": "simple",
           "attribute": "simple",
           "type": "Boolean",
-          "tsType": "boolean"
+          "tsType": "boolean",
+          "description": "Variation \"Simple\" _(déprécié - préférer l'utilisation de la prop ``type=\"simple\"``)_"
         },
         {
           "name": "ficheCatalogue",
           "attribute": "fiche-catalogue",
           "type": "Boolean",
-          "tsType": "boolean"
+          "tsType": "boolean",
+          "description": "Variation \"Fiche Catalogue\" _(déprécié - préférer l'utilisation de la prop ``type=\"fiche\"``)_"
         }
       ],
       "events": [],
       "slots": [
         {
-          "name": "actions",
+          "name": "badgesgroup",
+          "description": "Groupe de badges affiché au-dessus du titre"
+        },
+        {
+          "name": "buttonsgroup",
           "description": "Boutons ou liens d'action affichés sous la description du bandeau"
+        },
+        {
+          "name": "media",
+          "description": "Contenu média affiché dans la partie secondaire (image par défaut)"
         }
       ],
-      "example": "<lab-anssi-bandeau-page\n    titre={args.titre}\n    balise-titre={args.baliseTitre}\n    description={args.description}\n    mention={args.mention}\n    inverse={args.inverse || undefined}\n    url-image={args.urlImage}\n    sans-image={args.sansImage || undefined}\n    avec-fil-ariane={args.avecFilAriane || undefined}\n    liens-fil-ariane={JSON.stringify(args.liensFilAriane)}\n    simple={args.simple || undefined}\n    fiche-catalogue={args.ficheCatalogue || undefined}\n  >\n    {#if args.avecBadges}\n      <dsfr-badges-group slot=\"badgesgroup\" badges={args.badges} size=\"md\"></dsfr-badges-group>\n    {/if}\n\n    <dsfr-buttons-group\n      slot=\"buttonsgroup\"\n      buttons={args.boutons}\n      inline=\"md\"\n      data-themeable=\"false\"\n    ></dsfr-buttons-group>\n  </lab-anssi-bandeau-page>"
+      "example": "<lab-anssi-bandeau-page\n    titre={args.titre}\n    balise-titre={args.baliseTitre}\n    description={args.description}\n    mention={args.mention}\n    url-image={args.urlImage}\n    sans-image={args.sansImage || undefined}\n    avec-fil-ariane={args.avecFilAriane || undefined}\n    liens-fil-ariane={JSON.stringify(args.liensFilAriane)}\n    type={args.type}\n    theme={args.theme}\n  >\n    {#if args.avecBadges}\n      <dsfr-badges-group slot=\"badgesgroup\" badges={args.badges} size=\"md\"></dsfr-badges-group>\n    {/if}\n\n    <dsfr-buttons-group\n      slot=\"buttonsgroup\"\n      buttons={args.theme === \"clair\" ? boutonsThemeClair : args.boutons || []}\n      inline=\"md\"\n      data-themeable=\"false\"\n    ></dsfr-buttons-group>\n  </lab-anssi-bandeau-page>"
     },
     {
       "tagName": "lab-anssi-bandeau-titre",
@@ -6053,8 +6134,8 @@
     },
     {
       "tagName": "lab-anssi-carrousel-tuiles",
-      "title": "Composants/Lab ANSSI/Legacy/Carrousel de tuiles",
-      "source": "src/lib/composants/vitrines-produits/briques/CarrouselTuiles/CarrouselTuiles.svelte",
+      "title": "Composants/Lab ANSSI/Carrousel Tuiles",
+      "source": "src/lib/composants/carrousel-tuiles/CarrouselTuiles.svelte",
       "props": [
         {
           "name": "tuiles",
@@ -6062,6 +6143,17 @@
           "type": "Array",
           "tsType": "Tuiles",
           "description": "Liste de tuiles affichées dans le carrousel."
+        },
+        {
+          "name": "fond",
+          "attribute": "fond",
+          "type": "String",
+          "tsType": "\"clair\" | \"sombre\"",
+          "options": [
+            "clair",
+            "sombre"
+          ],
+          "description": "Défini le type de fond du conteneur du carrousel."
         }
       ],
       "events": [],
@@ -6106,6 +6198,114 @@
       "slots": [],
       "example": "<lab-anssi-filtres\n    filtres={args.filtres}\n    horizontal={args.horizontal || undefined}\n    valeur={args.valeur}\n  ></lab-anssi-filtres>"
     },
+    {
+      "tagName": "lab-anssi-fonctionnalites",
+      "title": "Composants/Lab ANSSI/Bloc fonctionnalités",
+      "source": "src/lib/composants/BlocFonctionnalites.svelte",
+      "props": [
+        {
+          "name": "titre",
+          "attribute": "titre",
+          "type": "String",
+          "tsType": "string",
+          "description": "Titre principal"
+        },
+        {
+          "name": "description",
+          "attribute": "description",
+          "type": "String",
+          "tsType": "string",
+          "description": "Description du bloc fonctionnalités\n_(L'absence de contenu dans cette prop masque automatiquement la zone d'affichage associée)_"
+        },
+        {
+          "name": "baliseTitre",
+          "attribute": "balise-titre",
+          "type": "String",
+          "tsType": "\"h2\" | \"h3\" | \"h4\"",
+          "description": "Balise Hn du titre du composant (default: h3)",
+          "options": [
+            "h2",
+            "h3",
+            "h4"
+          ]
+        },
+        {
+          "name": "avecControleSegmente",
+          "attribute": "avec-controle-segmente",
+          "type": "Boolean",
+          "tsType": "boolean",
+          "description": "Permet d'afficher un contrôle segmenté pour filtrer les fonctionnalités"
+        },
+        {
+          "name": "elementsDuControleSegmente",
+          "attribute": "elements-du-controle-segmente",
+          "type": "Array",
+          "tsType": "Segmented[]",
+          "description": "Les éléments du contrôle segmenté"
+        },
+        {
+          "name": "fonctionnalites",
+          "attribute": "fonctionnalites",
+          "type": "Array",
+          "tsType": "Fonctionnalite[] | Fonctionnalite[][]",
+          "description": "Fonctionnalités de la carte"
+        },
+        {
+          "name": "baliseDesSousTitres",
+          "attribute": "balise-des-sous-titres",
+          "type": "String"
+        },
+        {
+          "name": "cliquable",
+          "attribute": "cliquable",
+          "type": "Boolean",
+          "tsType": "boolean",
+          "description": "Permet de définir les items du composant comme \"cliquable\" ou non"
+        },
+        {
+          "name": "avecCTA",
+          "attribute": "avec-cta",
+          "type": "Boolean",
+          "tsType": "boolean",
+          "description": "Permet d'afficher un bouton dans le pied de page du composant"
+        },
+        {
+          "name": "orientationMedia",
+          "attribute": "orientation-media",
+          "type": "String",
+          "tsType": "\"droite\" | \"gauche\"",
+          "description": "Orientation du visuel par rapport aux items de fonctionnalités (default: droite)",
+          "options": [
+            "droite",
+            "gauche"
+          ]
+        },
+        {
+          "name": "imagePlaceholder",
+          "attribute": "image-placeholder",
+          "type": "String",
+          "tsType": "string",
+          "description": "Image \"bouche trou\" qui s'affiche dans le cadre de la version non cliquable"
+        },
+        {
+          "name": "activeDefilement",
+          "attribute": "active-defilement",
+          "type": "Boolean",
+          "tsType": "boolean",
+          "description": "Active ou désactive le défilement automatique (default: false)"
+        },
+        {
+          "name": "delaiDefilement",
+          "attribute": "delai-defilement",
+          "type": "Number",
+          "tsType": "number",
+          "description": "Délai en millisecondes entre chaque transition automatique (default: 5000)"
+        }
+      ],
+      "events": [],
+      "slots": [],
+      "example": "<div class=\"conteneur-story\">\n    <DsfrContainer>\n      <lab-anssi-fonctionnalites\n        titre={args.titre}\n        description={args.description}\n        balise-titre={args.baliseTitre}\n        avec-controle-segmente={args.avecControleSegmente || undefined}\n        elements-du-controle-segmente={JSON.stringify(args.elementsDuControleSegmente)}\n        fonctionnalites={args.fonctionnalites}\n        balise-des-sous-titres={args.baliseDesSousTitres}\n        cliquable={args.cliquable || undefined}\n        avec-cta={args.avecCTA || undefined}\n        orientation-media={args.orientationMedia}\n        image-placeholder={args.imagePlaceholder}\n        active-defilement={args.activeDefilement}\n        delai-defilement={args.delaiDefilement}\n      >\n        {#if args.afficheSlotHautEntete}\n          <dsfr-tags-group slot=\"hautentete\" group-markup=\"ul\" {tags}></dsfr-tags-group>\n        {/if}\n\n        <dsfr-button label=\"Libellé\" slot=\"cta\"></dsfr-button>\n      </lab-anssi-fonctionnalites>\n    </DsfrContainer>\n  </div>\n\n  <style>\n    .conteneur-story {\n      padding-block: 96px;\n    }\n  </style>"
+    },
     {
       "tagName": "lab-anssi-icone",
       "title": "Composants/Lab ANSSI/Legacy/Icone",
@@ -6274,28 +6474,53 @@
     {
       "tagName": "lab-anssi-marelle",
       "title": "Composants/Lab ANSSI/Marelle",
-      "source": "src/lib/composants/vitrines-produits/briques/marelle/Marelle.svelte",
+      "source": "src/lib/composants/marelle/Marelle.svelte",
       "props": [
         {
           "name": "titre",
           "attribute": "titre",
           "type": "String",
           "tsType": "string",
-          "description": "Titre affiché en haut de la brique Marelle."
+          "description": "Titre affiché en haut de la brique Marelle"
+        },
+        {
+          "name": "baliseTitre",
+          "attribute": "balise-titre",
+          "type": "String",
+          "tsType": "\"h2\" | \"h3\" | \"h4\" | \"div\"",
+          "description": "Balise Hn du titre du composant (default: h3)",
+          "options": [
+            "h2",
+            "h3",
+            "h4",
+            "div"
+          ]
         },
         {
           "name": "etapesmarelle",
           "attribute": "etapesmarelle",
           "type": "Array",
           "tsType": "EtapeMarelle[]",
-          "description": "Liste des étapes de la marelle."
+          "description": "Étapes de la marelle"
+        },
+        {
+          "name": "baliseSousTitre",
+          "attribute": "balise-sous-titre",
+          "type": "String",
+          "tsType": "\"h3\" | \"h4\" | \"h5\"",
+          "description": "Balise Hn du sous-titre des étapes composant",
+          "options": [
+            "h3",
+            "h4",
+            "h5"
+          ]
         },
         {
           "name": "action",
           "attribute": "action",
           "type": "Object",
           "tsType": "Action",
-          "description": "Action associée à la brique Marelle."
+          "description": "Propriétés du bouton d'action"
         }
       ],
       "events": [],
@@ -6310,19 +6535,33 @@
     {
       "tagName": "lab-anssi-marelle-etape",
       "title": null,
-      "source": "src/lib/composants/vitrines-produits/briques/marelle/Etape.svelte",
+      "source": "src/lib/composants/marelle/Etape.svelte",
       "props": [
         {
           "name": "index",
           "attribute": "index",
           "type": "Number",
-          "tsType": "number"
+          "tsType": "number",
+          "description": "Index de l'étape"
         },
         {
           "name": "etapeMarelle",
           "attribute": "etape-marelle",
           "type": "Object",
-          "tsType": "EtapeMarelle"
+          "tsType": "EtapeMarelle",
+          "description": "Contenu de l'étape"
+        },
+        {
+          "name": "baliseTitre",
+          "attribute": "balise-titre",
+          "type": "String",
+          "tsType": "\"h3\" | \"h4\" | \"h5\"",
+          "description": "Balise Hn du titre des étapes",
+          "options": [
+            "h3",
+            "h4",
+            "h5"
+          ]
         }
       ],
       "events": [],