@lab-anssi/ui-kit 1.61.2 → 1.62.0

package/dist/ui-kit-components.json

@@ -45,11 +45,11 @@
       "events": [],
       "slots": [
         {
-          "name": "default",
+          "name": "slotDefault",
           "description": "Contenu de l'accordéon (remplace la prop `content`)"
         }
       ],
-      "example": "<dsfr-accordion\n    is-expanded={args.isExpanded || undefined}\n    id={args.id}\n    label={args.label}\n    content={args.content}\n    title-markup-level={args.titleMarkupLevel}\n  >\n    {@html args.content}\n  </dsfr-accordion>"
+      "example": "<dsfr-accordion\n    is-expanded={args.isExpanded || undefined}\n    id={args.id}\n    label={args.label}\n    content={args.content}\n    title-markup-level={args.titleMarkupLevel}\n  >\n    <!-- eslint-disable-next-line svelte/no-at-html-tags -->\n    {@html args.content}\n  </dsfr-accordion>"
     },
     {
       "tagName": "dsfr-alert",
@@ -147,7 +147,11 @@
       "events": [],
       "slots": [
         {
-          "name": "description",
+          "name": "slotTitle",
+          "description": "Contenu du titre (remplace la prop `title` avec du HTML riche)"
+        },
+        {
+          "name": "slotDescription",
           "description": "Contenu de la description (remplace la prop `text` avec du HTML riche)"
         }
       ],
@@ -202,6 +206,12 @@
           "type": "Boolean",
           "tsType": "boolean"
         },
+        {
+          "name": "hasNoIcon",
+          "attribute": "has-no-icon",
+          "type": "Boolean",
+          "tsType": "boolean"
+        },
         {
           "name": "icon",
           "attribute": "icon",
@@ -244,7 +254,12 @@
         }
       ],
       "events": [],
-      "slots": [],
+      "slots": [
+        {
+          "name": "slotDefault",
+          "description": "Contenu du badge (remplace la prop `label`)"
+        }
+      ],
       "example": "<dsfr-badge\n    label={args.label}\n    accent={args.accent}\n    ellipsis={args.ellipsis || undefined}\n    has-icon={args.hasIcon || undefined}\n    has-no-icon={args.hasNoIcon || undefined}\n    icon={args.icon}\n    size={args.size}\n    status={args.status}\n    type={args.type}\n  ></dsfr-badge>"
     },
     {
@@ -497,7 +512,7 @@
       "events": [],
       "slots": [
         {
-          "name": "default",
+          "name": "slotDefault",
           "description": "Contenu personnalisé du bouton (remplace la prop `label`)"
         }
       ],
@@ -709,8 +724,16 @@
       "events": [],
       "slots": [
         {
-          "name": "button",
+          "name": "slotButton",
           "description": "Bouton d'action personnalisé (remplace le DsfrButton généré par défaut)"
+        },
+        {
+          "name": "slotDescription",
+          "description": "Contenu de la description (remplace la prop `text`)"
+        },
+        {
+          "name": "slotTitle",
+          "description": "Contenu du titre (remplace la prop `title`)"
         }
       ],
       "example": "<dsfr-callout\n    has-title={args.hasTitle || undefined}\n    title={args.title}\n    text={args.text}\n    id={args.id}\n    has-icon={args.hasIcon || undefined}\n    icon={args.icon}\n    title-markup={args.titleMarkup}\n    has-button={args.hasButton || undefined}\n    button-label={args.buttonLabel}\n    accent={args.accent}\n  ></dsfr-callout>"
@@ -1005,32 +1028,32 @@
       "events": [],
       "slots": [
         {
-          "name": "badgesgroup",
+          "name": "slotBadgesgroup",
           "description": "Groupe de badges affiché dans le contenu de la carte"
         },
         {
-          "name": "tagsgroup",
-          "description": "Groupe de tags affiché en pied de carte"
+          "name": "slotButtonsgroup",
+          "description": "Groupe de boutons d'action en pied de carte"
         },
         {
-          "name": "contentend",
+          "name": "slotContentend",
           "description": "Contenu supplémentaire après la description"
         },
         {
-          "name": "buttonsgroup",
-          "description": "Groupe de boutons d'action en pied de carte"
+          "name": "slotHeaderbadges",
+          "description": "Badges superposés à l'image d'en-tête"
         },
         {
-          "name": "linksgroup",
-          "description": "Groupe de liens en pied de carte"
+          "name": "slotImage",
+          "description": "Permet d'utiliser une image personnalisée (ex. <picture>, <svg>, ou <img>) en remplacement de l'image par défaut et des styles associées"
         },
         {
-          "name": "headerbadges",
-          "description": "Badges superposés à l'image d'en-tête"
+          "name": "slotLinksgroup",
+          "description": "Groupe de liens en pied de carte"
         },
         {
-          "name": "image",
-          "description": "Permet d'utiliser une image personnalisée (ex. <picture>, <svg>, ou <img>) en remplacement de l'image par défaut et des styles associées"
+          "name": "slotTagsgroup",
+          "description": "Groupe de tags affiché en pied de carte"
         }
       ],
       "example": "<dsfr-card\n    src={args.src}\n    alt={args.alt}\n    id={args.id}\n    title={args.title}\n    has-description={args.hasDescription || undefined}\n    description={args.description}\n    has-detail-start={args.hasDetailStart || undefined}\n    detail-start={args.detailStart}\n    has-detail-start-icon={args.hasDetailStartIcon || undefined}\n    detail-start-icon={args.detailStartIcon}\n    has-detail-end={args.hasDetailEnd || undefined}\n    detail-end={args.detailEnd}\n    has-detail-end-icon={args.hasDetailEndIcon || undefined}\n    detail-end-icon={args.detailEndIcon}\n    has-badge={args.hasBadge || undefined}\n    has-tag={args.hasTag || undefined}\n    markup={args.markup}\n    enlarge={args.enlarge || undefined}\n    action-markup={args.actionMarkup}\n    action-title={args.actionTitle}\n    href={args.href}\n    blank={args.blank || undefined}\n    no-link={args.noLink || undefined}\n    disabled={args.disabled || undefined}\n    size={args.size}\n    horizontal={args.horizontal || undefined}\n    horizontal-proportion={args.horizontalProportion}\n    has-header-badge={args.hasHeaderBadge || undefined}\n    image-ratio={args.imageRatio}\n    has-buttons={args.hasButtons || undefined}\n    has-links={args.hasLinks || undefined}\n    variations={args.variations}\n    download={args.download || undefined}\n    has-download-icon={args.hasDownloadIcon || undefined}\n    no-icon={args.noIcon || undefined}\n    lang={args.lang}\n  >\n    <!-- Badges Group (slot: badgesgroup) -->\n    <dsfr-badges-group\n      slot=\"badgesgroup\"\n      badges={[\n        { label: \"Libellé badge\", accent: \"purple-glycine\" },\n        { label: \"Libellé badge\", accent: \"purple-glycine\" },\n      ]}\n      size={args.size}\n    ></dsfr-badges-group>\n\n    <!-- Badges Group (slot: headerbadges) -->\n    <dsfr-badges-group\n      slot=\"headerbadges\"\n      badges={[\n        { label: \"Libellé badge\", accent: \"purple-glycine\" },\n        { label: \"Libellé badge\", accent: \"purple-glycine\" },\n      ]}\n      size={args.size}\n    ></dsfr-badges-group>\n\n    <!-- Tags Group (slot: tagsgroup) -->\n    <dsfr-tags-group\n      slot=\"tagsgroup\"\n      tags={[\n        { id: \"tag-1\", label: \"Libellé du tag\" },\n        { id: \"tag-2\", label: \"Libellé du tag\" },\n      ]}\n      size={args.size}\n      group-markup=\"div\"\n    ></dsfr-tags-group>\n\n    <!-- Tags Group (slot: contentend) -->\n    {#if args.hasContentEnd}\n      <dsfr-tags-group\n        slot=\"contentend\"\n        tags={[{ id: \"tag-1\", label: \"Libellé du tag\" }]}\n        size={args.size}\n        group-markup=\"div\"\n      ></dsfr-tags-group>\n    {/if}\n\n    <!-- Buttons Group (slot: buttonsgroup) -->\n    <dsfr-buttons-group slot=\"buttonsgroup\" buttons={args.buttons}></dsfr-buttons-group>\n  </dsfr-card>"
@@ -1156,7 +1179,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "slotDefault",
           "description": "Libellé personnalisé de la case à cocher (remplace la prop `label`)"
         }
       ],
@@ -1382,7 +1405,7 @@
       "events": [],
       "slots": [
         {
-          "name": "default",
+          "name": "slotDefault",
           "description": "Contenu principal du conteneur"
         }
       ],
@@ -1411,7 +1434,7 @@
           "attribute": "caption",
           "type": "String",
           "tsType": "string",
-          "description": "Texte de description ou source"
+          "description": "Texte de description ou source. Optionnel si le slot \"caption\" est utilisé."
         },
         {
           "name": "hasLink",
@@ -1499,19 +1522,19 @@
       "events": [],
       "slots": [
         {
-          "name": "image",
-          "description": "Élément image personnalisé (remplace le rendu par défaut quand `type='img'`)"
+          "name": "slotCaption",
+          "description": "Contenu de la légende (remplace la prop `caption`)"
         },
         {
-          "name": "svg",
-          "description": "Élément SVG personnalisé (remplace le rendu par défaut quand `type='svg'`)"
+          "name": "slotImage",
+          "description": "Élément image personnalisé (remplace le rendu par défaut quand `type='img'`)"
         },
         {
-          "name": "video",
+          "name": "slotVideo",
           "description": "Élément vidéo personnalisé (remplace le rendu par défaut quand `type='video'`)"
         }
       ],
-      "example": "<dsfr-content\n    size={args.size}\n    caption={args.caption}\n    has-link={args.hasLink || undefined}\n    link-label={args.linkLabel}\n    link-href={args.linkHref}\n    type={args.type}\n    img-ratio={args.imgRatio}\n    vid-ratio={args.vidRatio}\n    img={args.img}\n    vid={args.vid}\n    svg={args.svg}\n  ></dsfr-content>"
+      "example": "<dsfr-content\n    size={args.size}\n    caption={args.caption}\n    has-link={args.hasLink || undefined}\n    link-label={args.linkLabel}\n    link-href={args.linkHref}\n    type={args.type}\n    img-ratio={args.imgRatio}\n    vid-ratio={args.vidRatio}\n    img={args.img}\n    vid={args.vid}\n    svg={args.svg}\n    role=\"figure\"\n  ></dsfr-content>"
     },
     {
       "tagName": "dsfr-dropdown",
@@ -1634,12 +1657,12 @@
       ],
       "slots": [
         {
-          "name": "button",
-          "description": "Bouton déclencheur personnalisé (remplace le DsfrButton généré par défaut)"
+          "name": "slotDefault",
+          "description": "Contenu du panneau déroulant"
         },
         {
-          "name": "default",
-          "description": "Contenu du panneau déroulant"
+          "name": "slotButton",
+          "description": "Bouton déclencheur personnalisé (remplace le DsfrButton généré par défaut)"
         }
       ],
       "example": "<div class=\"dropdown-wrapper\">\n    <dsfr-dropdown\n      id={args.id}\n      collapse-id={args.collapseId}\n      button-id={args.buttonId}\n      button-title={args.buttonTitle}\n      button-kind={args.buttonKind}\n      button-size={args.buttonSize}\n      button-icon={args.buttonIcon}\n      button-icon-place={args.buttonIconPlace}\n      content-type={args.contentType}\n      align={args.align}\n      items={args.items}\n      disabled={args.disabled || undefined}\n    >\n    </dsfr-dropdown>\n  </div>"
@@ -2099,36 +2122,36 @@
       ],
       "slots": [
         {
-          "name": "beforenavbarbuttons",
+          "name": "slotBeforenavbarbuttons",
           "description": "Contenu inséré avant les boutons de la barre de navigation mobile (recherche, menu)"
         },
         {
-          "name": "headerbadge",
-          "description": "Badge affiché dans l'en-tête (ex : bêta, nouveau)"
-        },
-        {
-          "name": "beforetoolslinks",
+          "name": "slotBeforetoolslinks",
           "description": "Contenu inséré avant les liens d'accès rapide dans la barre d'outils"
         },
         {
-          "name": "toolLinks",
-          "description": "Liens d'accès rapide personnalisés (remplace la prop `toolLinks`)"
-        },
-        {
-          "name": "translate",
-          "description": "Bouton de traduction personnalisé"
+          "name": "slotHeaderbadge",
+          "description": "Badge affiché dans l'en-tête (ex : bêta, nouveau)"
         },
         {
-          "name": "searchbar",
+          "name": "slotSearchbar",
           "description": "Barre de recherche personnalisée (remplace le DsfrSearch par défaut)"
         },
         {
-          "name": "modalToolLinks",
+          "name": "slotModalToolLinks",
           "description": "Liens d'accès rapide dans la modale mobile"
         },
         {
-          "name": "navigation",
+          "name": "slotNavigation",
           "description": "Navigation principale personnalisée (remplace le DsfrNavigation par défaut)"
+        },
+        {
+          "name": "slotToolLinks",
+          "description": "Liens d'accès rapide personnalisés (remplace la prop `toolLinks`)"
+        },
+        {
+          "name": "slotTranslate",
+          "description": "Bouton de traduction personnalisé"
         }
       ],
       "example": "<dsfr-header\n    id={args.id}\n    is-mourning={args.isMourning || undefined}\n    menu-id={args.menuId}\n    menu-modal-id={args.menuModalId}\n    has-tool-links={args.hasToolLinks || undefined}\n    tool-links={JSON.stringify(args.toolLinks)}\n    duplicate-tool-links={args.duplicateToolLinks || undefined}\n    has-translate={args.hasTranslate || undefined}\n    translate-id={args.translateId}\n    translate-collapse-id={args.translateCollapseId}\n    translate-button-title={args.translateButtonTitle}\n    translate-button-kind={args.translateButtonKind}\n    translate-languages={args.translateLanguages}\n    has-search={args.hasSearch || undefined}\n    search-id={args.searchId}\n    search-modal-id={args.searchModalId}\n    search-btn-id={args.searchBtnId}\n    search-input-id={args.searchInputId}\n    search-label={args.searchLabel}\n    search-placeholder={args.searchPlaceholder}\n    search-title={args.searchTitle}\n    brand-logo-title={args.brandLogoTitle}\n    brand-service={args.brandService}\n    has-brand-tagline={args.hasBrandTagline || undefined}\n    brand-tagline={args.brandTagline}\n    brand-link-id={args.brandLinkId}\n    brand-link-title={args.brandLinkTitle}\n    brand-link-href={args.brandLinkHref}\n    has-brand-operator={args.hasBrandOperator || undefined}\n    brand-operator-alt={args.brandOperatorAlt}\n    brand-operator-src={args.brandOperatorSrc}\n    brand-operator-style={args.brandOperatorStyle}\n    has-navigation={args.hasNavigation || undefined}\n    navigation-id={args.navigationId}\n    navigation-aria-label={args.navigationAriaLabel}\n    navigation-items={JSON.stringify(args.navigationItems)}\n    has-header-tag={args.hasHeaderTag || undefined}\n    fluid={args.fluid || undefined}\n  ></dsfr-header>"
@@ -2195,12 +2218,12 @@
       "events": [],
       "slots": [
         {
-          "name": "title",
-          "description": "Titre personnalisé de la mise en avant"
+          "name": "slotText",
+          "description": "Texte personnalisé de la mise en avant (remplace la prop `text`)"
         },
         {
-          "name": "text",
-          "description": "Texte personnalisé de la mise en avant (remplace la prop `text`)"
+          "name": "slotTitle",
+          "description": "Titre personnalisé de la mise en avant"
         }
       ],
       "example": "<dsfr-highlight {...args}></dsfr-highlight>"
@@ -2574,7 +2597,7 @@
           "attribute": "label",
           "type": "String",
           "tsType": "string",
-          "description": "Libellé du lien"
+          "description": "Libellé du lien. Optionnel si le slot par défaut est utilisé."
         },
         {
           "name": "size",
@@ -2685,7 +2708,12 @@
         }
       ],
       "events": [],
-      "slots": [],
+      "slots": [
+        {
+          "name": "slotDefault",
+          "description": "Contenu du lien (remplace la prop `label`)"
+        }
+      ],
       "example": "<dsfr-link\n    label={args.label}\n    size={args.size}\n    id={args.id}\n    disabled={args.disabled || undefined}\n    blank={args.blank || undefined}\n    title={args.title}\n    href={args.href}\n    download={args.download || undefined}\n    detail={args.detail}\n    hreflang={args.hreflang}\n    assess={args.assess || undefined}\n    has-icon={args.hasIcon || undefined}\n    icon={args.icon}\n    icon-place={args.iconPlace}\n    neutral={args.neutral || undefined}\n  ></dsfr-link>"
     },
     {
@@ -2871,15 +2899,15 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "slotDefault",
           "description": "Contenu principal de la modale"
         },
         {
-          "name": "footerSlot",
+          "name": "slotFooter",
           "description": "Contenu du footer"
         }
       ],
-      "example": "<div class=\"story-container\">\n    <DsfrButton\n      class=\"fr-btn\"\n      onclick={() => (openModals[args.id] = true)}\n      label=\"Ouvrir la modale\"\n    />\n\n    <dsfr-modal\n      id={args.id}\n      title={args.title}\n      icon={args.icon}\n      size={args.size}\n      top={args.top || undefined}\n      concealing-backdrop={args.concealingBackdrop}\n      footer={args.footer || undefined}\n      opened={openModals[args.id] || undefined}\n      onclose={() => (openModals[args.id] = false)}\n    >\n      {@html body}\n\n      {#if args.footer}\n        {#if args.footerType === \"buttonsgroup\"}\n          <dsfr-buttons-group slot=\"footer\" {buttons} size=\"md\" inline=\"lg\" align=\"center\"\n          ></dsfr-buttons-group>\n        {/if}\n\n        {#if args.footerType === \"button\"}\n          <dsfr-button slot=\"footer\" label=\"Bouton simple\"></dsfr-button>\n        {/if}\n      {/if}\n    </dsfr-modal>\n  </div>"
+      "example": "<div class=\"story-container\">\n    <DsfrButton\n      class=\"fr-btn\"\n      onclick={() => (openModals[args.id] = true)}\n      label=\"Ouvrir la modale\"\n    />\n\n    <dsfr-modal\n      id={args.id}\n      title={args.title}\n      icon={args.icon}\n      size={args.size}\n      top={args.top || undefined}\n      concealing-backdrop={args.concealingBackdrop}\n      footer={args.footer || undefined}\n      opened={openModals[args.id] || undefined}\n      onclose={() => (openModals[args.id] = false)}\n    >\n      <!-- eslint-disable-next-line svelte/no-at-html-tags -->\n      {@html body}\n\n      {#if args.footer}\n        {#if args.footerType === \"buttonsgroup\"}\n          <dsfr-buttons-group slot=\"footer\" {buttons} size=\"md\" inline=\"lg\" align=\"center\"\n          ></dsfr-buttons-group>\n        {/if}\n\n        {#if args.footerType === \"button\"}\n          <dsfr-button slot=\"footer\" label=\"Bouton simple\"></dsfr-button>\n        {/if}\n      {/if}\n    </dsfr-modal>\n  </div>"
     },
     {
       "tagName": "dsfr-navigation",
@@ -3525,7 +3553,7 @@
         }
       ],
       "slots": [],
-      "example": "<dsfr-radios-group\n    id={args.id}\n    legend={args.legend}\n    radios={args.radios}\n    hint={args.hint}\n    size={args.size}\n    rich={args.rich || undefined}\n    has-pictogram={args.hasPictogram || undefined}\n    inline={args.inline || undefined}\n    disabled={args.disabled || undefined}\n    value={args.value || \"\"}\n    status={args.status}\n    error-message={args.errorMessage}\n    valid-message={args.validMessage}\n    legend-size={args.legendSize}\n    legend-weight={args.legendWeight}\n  ></dsfr-radios-group>"
+      "example": "<dsfr-radios-group\n    id={args.id}\n    legend={args.legend}\n    radios={args.radios}\n    hint={args.hint}\n    size={args.size}\n    rich={args.rich || undefined}\n    has-pictogram={args.hasPictogram || undefined}\n    inline={args.inline || undefined}\n    name={args.name}\n    disabled={args.disabled || undefined}\n    value={args.value || \"\"}\n    status={args.status}\n    error-message={args.errorMessage}\n    valid-message={args.validMessage}\n    legend-size={args.legendSize}\n    legend-weight={args.legendWeight}\n  ></dsfr-radios-group>"
     },
     {
       "tagName": "dsfr-range",
@@ -3676,6 +3704,7 @@
           "tsType": "RangeStatus",
           "description": "Statut du message",
           "options": [
+            "default",
             "error"
           ]
         },
@@ -3734,7 +3763,7 @@
       ],
       "slots": [
         {
-          "name": "messagesgroup",
+          "name": "slotMessagesgroup",
           "description": "Messages d'aide ou d'erreur personnalisés"
         }
       ],
@@ -3901,7 +3930,7 @@
         },
         {
           "name": "search",
-          "detail": "value"
+          "detail": "value ?? \"\""
         }
       ],
       "slots": [],
@@ -4156,7 +4185,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "slotDefault",
           "description": "Options `<option>` personnalisées (remplace les options générées par la prop `options`)"
         }
       ],
@@ -4199,7 +4228,7 @@
       "events": [],
       "slots": [
         {
-          "name": "text",
+          "name": "slotText",
           "description": "Contenu personnalisé du texte informatif, permettant d'utiliser des composants riches (ex: `DsfrLink`). Remplace la prop `text`."
         }
       ],
@@ -4604,43 +4633,43 @@
       ],
       "slots": [
         {
-          "name": "headersegmented",
-          "description": "Contrôles de segmentation dans l'en-tête du tableau"
+          "name": "slotEmpty",
+          "description": "Contenu affiché quand le tableau ne contient aucune ligne"
         },
         {
-          "name": "headersearch",
-          "description": "Barre de recherche dans l'en-tête du tableau"
+          "name": "slotFooterbuttons",
+          "description": "Boutons d'action dans le pied du tableau"
         },
         {
-          "name": "headerbuttons",
-          "description": "Boutons d'action dans l'en-tête du tableau"
+          "name": "slotFooterpagination",
+          "description": "Pagination personnalisée (remplace le DsfrPagination par défaut)"
         },
         {
-          "name": "tableheader",
-          "description": "En-tête personnalisé du tableau (remplace le rendu automatique)"
+          "name": "slotFooterselect",
+          "description": "Sélecteur du nombre d'éléments par page (remplace le DsfrSelect par défaut)"
         },
         {
-          "name": "tablecontent",
-          "description": "Corps personnalisé du tableau (remplace le rendu automatique des lignes)"
+          "name": "slotHeaderbuttons",
+          "description": "Boutons d'action dans l'en-tête du tableau"
         },
         {
-          "name": "empty",
-          "description": "Contenu affiché quand le tableau ne contient aucune ligne"
+          "name": "slotHeadersearch",
+          "description": "Barre de recherche dans l'en-tête du tableau"
         },
         {
-          "name": "footerselect",
-          "description": "Sélecteur du nombre d'éléments par page (remplace le DsfrSelect par défaut)"
+          "name": "slotHeadersegmented",
+          "description": "Contrôles de segmentation dans l'en-tête du tableau"
         },
         {
-          "name": "footerpagination",
-          "description": "Pagination personnalisée (remplace le DsfrPagination par défaut)"
+          "name": "slotTablecontent",
+          "description": "Corps personnalisé du tableau (remplace le rendu automatique des lignes)"
         },
         {
-          "name": "footerbuttons",
-          "description": "Boutons d'action dans le pied du tableau"
+          "name": "slotTableheader",
+          "description": "En-tête personnalisé du tableau (remplace le rendu automatique)"
         }
       ],
-      "example": "<dsfr-table\n    id={args.id}\n    caption={args.caption}\n    caption-detail={args.captionDetail}\n    no-caption={args.noCaption || undefined}\n    caption-bottom={args.captionBottom || undefined}\n    bordered={args.bordered || undefined}\n    no-scroll={args.noScroll || undefined}\n    multiline={args.multiline || undefined}\n    layout-fixed={args.layoutFixed || undefined}\n    size={args.size}\n    fixed-first-cell-head={args.fixedFirstCellHead || undefined}\n    has-header={args.hasHeader || undefined}\n    has-header-segmented={args.hasHeaderSegmented || undefined}\n    has-header-search={args.hasHeaderSearch || undefined}\n    has-header-details={args.hasHeaderDetails || undefined}\n    header-details={args.headerDetails}\n    has-header-buttons={args.hasHeaderButtons || undefined}\n    has-footer={args.hasFooter || undefined}\n    has-footer-select={args.hasFooterSelect || undefined}\n    has-footer-pagination={args.hasFooterPagination || undefined}\n    has-footer-buttons={args.hasFooterButtons || undefined}\n    table={args.table}\n    selectable={args.selectable || undefined}\n    select-all={args.selectAll || undefined}\n    selected-row-keys={args.selectedRowKeys ? JSON.stringify(args.selectedRowKeys) : undefined}\n  ></dsfr-table>"
+      "example": "<dsfr-table\n    id={args.id}\n    caption={args.caption}\n    caption-detail={args.captionDetail}\n    no-caption={args.noCaption || undefined}\n    caption-bottom={args.captionBottom || undefined}\n    bordered={args.bordered || undefined}\n    no-scroll={args.noScroll || undefined}\n    multiline={args.multiline || undefined}\n    layout-fixed={args.layoutFixed || undefined}\n    size={args.size}\n    fixed-first-cell-head={args.fixedFirstCellHead || undefined}\n    has-header={args.hasHeader || undefined}\n    has-header-segmented={args.hasHeaderSegmented || undefined}\n    has-header-search={args.hasHeaderSearch || undefined}\n    has-header-details={args.hasHeaderDetails || undefined}\n    header-details={args.headerDetails}\n    has-header-buttons={args.hasHeaderButtons || undefined}\n    has-footer={args.hasFooter || undefined}\n    has-footer-select={args.hasFooterSelect || undefined}\n    has-footer-pagination={args.hasFooterPagination || undefined}\n    has-footer-buttons={args.hasFooterButtons || undefined}\n    items-per-page={args.itemsPerPage ? JSON.stringify(args.itemsPerPage) : undefined}\n    table={args.table}\n    selectable={args.selectable || undefined}\n    select-all={args.selectAll || undefined}\n    selected-row-keys={args.selectedRowKeys ? JSON.stringify(args.selectedRowKeys) : undefined}\n  ></dsfr-table>"
     },
     {
       "tagName": "dsfr-tabnav",
@@ -4865,7 +4894,12 @@
           "detail": "button.id"
         }
       ],
-      "slots": [],
+      "slots": [
+        {
+          "name": "slotDefault",
+          "description": "Contenu du tag (remplace la prop `label`)"
+        }
+      ],
       "example": "<dsfr-tag\n    label={args.label}\n    type={args.type}\n    size={args.size}\n    href={args.href}\n    blank={args.blank || undefined}\n    title={args.title}\n    pressed={args.pressed || undefined}\n    disabled={args.disabled || undefined}\n    has-icon={args.hasIcon || undefined}\n    icon={args.icon}\n    accent={args.accent}\n  ></dsfr-tag>"
     },
     {
@@ -5328,23 +5362,23 @@
       "events": [],
       "slots": [
         {
-          "name": "description",
-          "description": "Description personnalisée de la tuile (remplace la prop `description`)"
-        },
-        {
-          "name": "badge",
+          "name": "slotBadge",
           "description": "Badge personnalisé dans la tuile"
         },
         {
-          "name": "tag",
-          "description": "Tag personnalisé dans la tuile"
+          "name": "slotDescription",
+          "description": "Description personnalisée de la tuile (remplace la prop `description`)"
         },
         {
-          "name": "pictogram",
+          "name": "slotPictogram",
           "description": "Pictogramme SVG personnalisé (remplace la prop `pictogramName`)"
+        },
+        {
+          "name": "slotTag",
+          "description": "Tag personnalisé dans la tuile"
         }
       ],
-      "example": "<dsfr-tile\n    title={args.title}\n    has-description={args.hasDescription || undefined}\n    description={args.description}\n    has-details={args.hasDetails || undefined}\n    details={args.details}\n    markup-level={args.markupLevel}\n    pictogram-name={args.pictogramName}\n    has-badge={args.hasBadge || undefined}\n    has-tag={args.hasTag || undefined}\n    enlarge={args.enlarge || undefined}\n    action-markup={args.actionMarkup}\n    href={args.href}\n    action-title={args.actionTitle}\n    no-link={args.noLink || undefined}\n    disabled={args.disabled || undefined}\n    blank={args.blank || undefined}\n    download={args.download || undefined}\n    lang={args.lang}\n    assess={args.assess || undefined}\n    assess-bytes={args.assessBytes || undefined}\n    size={args.size}\n    horizontal={args.horizontal || undefined}\n    vertical-breakpoint={args.verticalBreakpoint}\n    variations={args.variations}\n    no-icon={args.noIcon || undefined}\n  >\n    <dsfr-badge\n      slot=\"badge\"\n      label=\"Libellé Badge\"\n      type=\"accent\"\n      accent=\"purple-glycine\"\n      size={args.size}\n    ></dsfr-badge>\n\n    <dsfr-tag slot=\"tag\" label=\"Libellé Tag\" size={args.size}></dsfr-tag>\n\n    <span slot=\"pictogram\">\n      {@html CityHall}\n    </span>\n  </dsfr-tile>"
+      "example": "<dsfr-tile\n    title={args.title}\n    has-description={args.hasDescription || undefined}\n    description={args.description}\n    has-details={args.hasDetails || undefined}\n    details={args.details}\n    markup-level={args.markupLevel}\n    pictogram-name={args.pictogramName}\n    has-badge={args.hasBadge || undefined}\n    has-tag={args.hasTag || undefined}\n    enlarge={args.enlarge || undefined}\n    action-markup={args.actionMarkup}\n    href={args.href}\n    action-title={args.actionTitle}\n    no-link={args.noLink || undefined}\n    disabled={args.disabled || undefined}\n    blank={args.blank || undefined}\n    download={args.download || undefined}\n    lang={args.lang}\n    assess={args.assess || undefined}\n    assess-bytes={args.assessBytes || undefined}\n    size={args.size}\n    horizontal={args.horizontal || undefined}\n    vertical-breakpoint={args.verticalBreakpoint}\n    variations={args.variations}\n    no-icon={args.noIcon || undefined}\n  >\n    <dsfr-badge\n      slot=\"badge\"\n      label=\"Libellé Badge\"\n      type=\"accent\"\n      accent=\"purple-glycine\"\n      size={args.size}\n    ></dsfr-badge>\n\n    <dsfr-tag slot=\"tag\" label=\"Libellé Tag\" size={args.size}></dsfr-tag>\n\n    <span slot=\"pictogram\">\n      <!-- eslint-disable-next-line svelte/no-at-html-tags -->\n      {@html CityHall}\n    </span>\n  </dsfr-tile>"
     },
     {
       "tagName": "dsfr-toggle",
@@ -5463,7 +5497,7 @@
       ],
       "slots": [
         {
-          "name": "hint",
+          "name": "slotHint",
           "description": "Contenu du texte additionnel (remplace la prop `hint` avec du HTML riche)"
         }
       ],
@@ -5503,7 +5537,7 @@
       "events": [],
       "slots": [
         {
-          "name": "default",
+          "name": "slotDefault",
           "description": "Élément déclencheur de l'infobulle (élément focusable)"
         }
       ],
@@ -5553,7 +5587,7 @@
       "events": [],
       "slots": [
         {
-          "name": "default",
+          "name": "slotDefault",
           "description": "Contenu textuel de la transcription"
         }
       ],
@@ -5743,7 +5777,7 @@
       ],
       "slots": [
         {
-          "name": "logout",
+          "name": "slotLogout",
           "description": "Contenu personnalisé du bouton de déconnexion — remplace le `DsfrButton` généré par défaut lorsque `hasLogout` est `true`."
         }
       ],
@@ -5916,15 +5950,15 @@
       "events": [],
       "slots": [
         {
-          "name": "badgesgroup",
+          "name": "slotBadgesgroup",
           "description": "Groupe de badges affiché au-dessus du titre"
         },
         {
-          "name": "buttonsgroup",
+          "name": "slotButtonsgroup",
           "description": "Boutons ou liens d'action affichés sous la description du bandeau"
         },
         {
-          "name": "media",
+          "name": "slotMedia",
           "description": "Contenu média affiché dans la partie secondaire (image par défaut)"
         }
       ],
@@ -5932,7 +5966,7 @@
     },
     {
       "tagName": "lab-anssi-bandeau-titre",
-      "title": "Composants/Lab ANSSI/Legacy/BandeauTitre",
+      "title": "Composants/Lab ANSSI/Legacy/Bandeau Titre",
       "source": "src/lib/composants/blog/BandeauTitre.svelte",
       "props": [
         {
@@ -6237,7 +6271,7 @@
       "events": [],
       "slots": [
         {
-          "name": "default",
+          "name": "slotDefault",
           "description": "Tuiles personnalisées (remplace les tuiles générées par la prop `tuiles`)"
         }
       ],
@@ -6410,8 +6444,12 @@
       "events": [],
       "slots": [
         {
-          "name": "media",
+          "name": "slotMedia",
           "description": "Remplace tout le contenu de la zone média. L'attribut `data-active-item` sur le host reflète l'`id` de la fonctionnalité active."
+        },
+        {
+          "name": "slotMediaId",
+          "description": "Contenu personnalisé cloné dans la zone média quand la fonctionnalité correspondante est active. Nécessite `rich: true` et un `id` sur la fonctionnalité."
         }
       ],
       "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        taille-controle-segmente={args.tailleControleSegmente || 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>"
@@ -6636,8 +6674,12 @@
       "events": [],
       "slots": [
         {
-          "name": "default",
+          "name": "slotDefault",
           "description": "Étapes personnalisées (remplace les étapes générées par la prop `etapesmarelle`)"
+        },
+        {
+          "name": "slotMarelleTitre",
+          "description": "Titre personnalisé de la marelle (remplace la prop `titre`)"
         }
       ],
       "example": "<lab-anssi-marelle titre={args.titre} etapesmarelle={args.etapesmarelle} action={args.action}\n  ></lab-anssi-marelle>"

package/dist/utilitaires/createFormValidation.svelte.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Crée un état de validation pour les composants de formulaire.
+ * Encapsule la logique de validation des contraintes HTML pour les custom elements.
+ *
+ * @returns Un objet contenant l'état de validation et les méthodes associées
+ *
+ * @example
+ * ```typescript
+ * const validation = createFormValidation();
+ *
+ * // Dans un $effect
+ * validation.setup(internals, formControlElement, host, () => value);
+ *
+ * // Dans le template
+ * <input
+ *   bind:this={formControlElement}
+ *   onblur={validation.handleBlur}
+ *   oninvalid={validation.handleInvalid}
+ * />
+ * ```
+ */
+export declare function createFormValidation(): {
+    readonly customValidityMessage: string;
+    readonly hasInteracted: boolean;
+    readonly localStatus: "default" | "error";
+    readonly localErrorMessage: string;
+    setup: (internalsRef: ElementInternals | undefined, element: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | undefined, hostElement: HTMLElement | undefined, resetCallback: () => void) => void;
+    updateValidity: () => void;
+    handleBlur: (event: Event) => void;
+    handleInvalid: (event: Event) => void;
+    setCustomValidity: (message: string) => void;
+    syncFormValue: (value: string | undefined, bypassNativeValidation?: boolean) => void;
+    attachListeners: () => (() => void) | undefined;
+};