@spw-ds/spw-stencil-library 1.14.2 → 1.16.0

package/dist/collection/stories/components/spw-field-message/spw-field-message.stories.js

@@ -77,18 +77,22 @@ export const Hint = Template.bind({});
 export const Error = Template.bind({});
 export const Success = Template.bind({});
 export const Warning = Template.bind({});
+Hint.storyName = "Message d'aide";
 Hint.args = {
     label: 'Mon texte',
     variant: 'hint',
 };
+Error.storyName = "Message d'erreur";
 Error.args = {
     label: 'Mon texte',
     variant: 'error',
 };
+Success.storyName = 'Message de succès';
 Success.args = {
     label: 'Mon texte',
     variant: 'success',
 };
+Warning.storyName = "Message d'avertissement";
 Warning.args = {
     label: 'Mon texte',
     variant: 'warning',

package/dist/collection/stories/components/spw-file-upload/spw-file-upload.stories.js

@@ -62,6 +62,7 @@ const Template = args => {
     return element;
 };
 export const Default = Template.bind({});
+Default.storyName = 'Upload de fichiers';
 Default.args = {
     multiple: true,
     name: 'upload',
@@ -69,3 +70,124 @@ Default.args = {
     maxFileSize: 3,
     accept: '.pdf, .doc, .docx',
 };
+Default.parameters = {
+    docs: {
+        description: {
+            story: `Upload multiple de fichiers avec contraintes de type, taille et nombre. Cas d'usage : envoi de pièces jointes, dépôt de documents administratifs, ajout de fichiers dans un formulaire.`,
+        },
+    },
+};
+export const SingleFile = Template.bind({});
+SingleFile.storyName = 'Upload de fichier unique';
+SingleFile.args = {
+    multiple: false,
+    name: 'upload-single',
+    maxFileSize: 5,
+    accept: '.pdf',
+};
+SingleFile.parameters = {
+    docs: {
+        description: {
+            story: `Upload d'un seul fichier. Une fois un fichier sélectionné, il remplace le précédent. Cas d'usage : envoi d'un document unique (carte d'identité, attestation), import d'un seul fichier de configuration.`,
+        },
+    },
+};
+export const WithDropZone = Template.bind({});
+WithDropZone.storyName = 'Upload avec zone de dépôt';
+WithDropZone.args = {
+    multiple: true,
+    name: 'upload-dropzone',
+    maxFiles: 5,
+    maxFileSize: 10,
+    accept: '.jpg, .jpeg, .png, .gif',
+    enableDropZone: true,
+};
+WithDropZone.parameters = {
+    docs: {
+        description: {
+            story: `Upload avec zone de glisser-déposer (drag & drop). L'utilisateur peut déposer des fichiers directement ou cliquer pour parcourir. Cas d'usage : upload de photos, import de fichiers multiples, interface moderne avec interaction visuelle.`,
+        },
+    },
+};
+export const ImageUpload = Template.bind({});
+ImageUpload.storyName = "Upload d'images uniquement";
+ImageUpload.args = {
+    multiple: true,
+    name: 'upload-images',
+    maxFiles: 10,
+    maxFileSize: 5,
+    accept: '.jpg, .jpeg, .png, .webp',
+    enableDropZone: true,
+};
+ImageUpload.parameters = {
+    docs: {
+        description: {
+            story: `Upload limité aux formats image (JPG, PNG, WebP). Cas d'usage : galerie photo, avatar ou photo de profil, illustrations pour un article, pièces jointes visuelles.`,
+        },
+    },
+};
+export const SpreadsheetUpload = Template.bind({});
+SpreadsheetUpload.storyName = 'Upload de tableurs';
+SpreadsheetUpload.args = {
+    multiple: false,
+    name: 'upload-csv',
+    maxFileSize: 20,
+    accept: '.csv, .xls, .xlsx',
+};
+SpreadsheetUpload.parameters = {
+    docs: {
+        description: {
+            story: `Upload d'un fichier tableur (CSV, Excel) pour import de données. Cas d'usage : import de listes d'utilisateurs, chargement de données en masse, import de configuration.`,
+        },
+    },
+};
+export const WithRefusedFormats = Template.bind({});
+WithRefusedFormats.storyName = 'Upload avec formats refusés';
+WithRefusedFormats.args = {
+    multiple: true,
+    name: 'upload-refuse',
+    maxFiles: 5,
+    maxFileSize: 10,
+    refuse: '.exe, .bat, .sh, .js',
+};
+WithRefusedFormats.parameters = {
+    docs: {
+        description: {
+            story: `Upload avec liste noire de formats refusés (blacklist). Tous les fichiers sont acceptés sauf ceux dont l'extension est explicitement bloquée. Cas d'usage : sécurité renforcée, bloquer les fichiers exécutables ou scripts.`,
+        },
+    },
+};
+export const LargeFileLimit = Template.bind({});
+LargeFileLimit.storyName = 'Upload avec limite de taille élevée';
+LargeFileLimit.args = {
+    multiple: true,
+    name: 'upload-large',
+    maxFiles: 2,
+    maxFileSize: 1,
+    maxFileSizeUnit: 'go',
+    accept: '.zip, .tar, .gz',
+};
+LargeFileLimit.parameters = {
+    docs: {
+        description: {
+            story: `Upload avec limite de taille exprimée en Go. Cas d'usage : envoi d'archives ou fichiers volumineux, backup de données, dépôt de fichiers lourds.`,
+        },
+    },
+};
+export const Disabled = Template.bind({});
+Disabled.storyName = 'Upload désactivé';
+Disabled.args = {
+    multiple: true,
+    name: 'upload-disabled',
+    maxFiles: 3,
+    maxFileSize: 3,
+    accept: '.pdf',
+    disabled: true,
+};
+Disabled.parameters = {
+    docs: {
+        description: {
+            story: `Upload en état désactivé. Le champ n'est pas interactif. Cas d'usage : champ conditionnel (non disponible selon un autre choix), formulaire en lecture seule, upload verrouillé après soumission.`,
+        },
+    },
+};

package/dist/collection/stories/components/spw-icon/spw-icon.stories.js

@@ -62,6 +62,7 @@ const Template = args => {
     return element;
 };
 export const Default = Template.bind({});
+Default.storyName = 'Icône par défaut';
 Default.args = {
     icon: 'fa-arrow-right',
     label: '',
@@ -73,3 +74,45 @@ Default.parameters = {
         },
     },
 };
+export const Solid = () => {
+    const element = document.createElement('spw-icon');
+    element.setAttribute('icon', 'fa-star');
+    element.setAttribute('variant', 'fa-solid');
+    return element;
+};
+Solid.storyName = 'Icône variante solid';
+Solid.parameters = {
+    docs: {
+        description: {
+            story: `Icône avec la variante solid (remplie, par défaut). Style le plus lisible et le plus utilisé. Cas d'usage : actions principales, indicateurs de statut, navigation.`,
+        },
+    },
+};
+export const Regular = () => {
+    const element = document.createElement('spw-icon');
+    element.setAttribute('icon', 'fa-star');
+    element.setAttribute('variant', 'fa-regular');
+    return element;
+};
+Regular.storyName = 'Icône variante regular';
+Regular.parameters = {
+    docs: {
+        description: {
+            story: `Icône avec la variante regular (contours fins, non remplie). Cas d'usage : icônes moins accentuées visuellement, état inactif ou non sélectionné.`,
+        },
+    },
+};
+export const Brands = () => {
+    const element = document.createElement('spw-icon');
+    element.setAttribute('icon', 'fa-github');
+    element.setAttribute('variant', 'fa-brands');
+    return element;
+};
+Brands.storyName = 'Icône marque (brands)';
+Brands.parameters = {
+    docs: {
+        description: {
+            story: `Icône avec la variante brands pour afficher des logos de marques et services tiers. Cas d'usage : liens vers réseaux sociaux, authentification via tiers, badges de plateforme.`,
+        },
+    },
+};

package/dist/collection/stories/components/spw-input-slider/spw-input-slider.stories.js

@@ -84,6 +84,7 @@ const Template = args => {
     return element;
 };
 export const Default = Template.bind({});
+Default.storyName = 'Curseur simple';
 Default.args = {
     label: 'Volume',
     assistiveText: 'Ajustez le niveau sonore selon vos préférences',
@@ -105,6 +106,7 @@ Default.parameters = {
     },
 };
 export const Range = Template.bind({});
+Range.storyName = 'Curseur de plage';
 Range.args = {
     label: 'Fourchette de prix',
     assistiveText: 'Définissez votre budget minimum et maximum',
@@ -126,6 +128,7 @@ Range.parameters = {
     },
 };
 export const WithoutTooltip = Template.bind({});
+WithoutTooltip.storyName = 'Curseur sans infobulle';
 WithoutTooltip.args = {
     label: 'Opacité',
     min: 0,
@@ -146,6 +149,7 @@ WithoutTooltip.parameters = {
     },
 };
 export const Vertical = Template.bind({});
+Vertical.storyName = 'Curseur vertical';
 Vertical.args = {
     label: 'Hauteur',
     min: 0,
@@ -166,6 +170,7 @@ Vertical.parameters = {
     },
 };
 export const VerticalRange = Template.bind({});
+VerticalRange.storyName = 'Curseur vertical de plage';
 VerticalRange.args = {
     label: 'Plage de température',
     min: 0,
@@ -186,6 +191,7 @@ VerticalRange.parameters = {
     },
 };
 export const Disabled = Template.bind({});
+Disabled.storyName = 'Curseur désactivé';
 Disabled.args = {
     label: 'Volume (désactivé)',
     assistiveText: 'Le contrôle du volume est actuellement désactivé',
@@ -207,6 +213,7 @@ Disabled.parameters = {
     },
 };
 export const CustomStep = Template.bind({});
+CustomStep.storyName = 'Curseur avec pas personnalisé';
 CustomStep.args = {
     label: 'Budget',
     min: 0,
@@ -227,6 +234,7 @@ CustomStep.parameters = {
     },
 };
 export const WithError = Template.bind({});
+WithError.storyName = 'Curseur avec erreur';
 WithError.args = {
     label: 'Âge',
     assistiveText: 'Vous devez avoir au moins 18 ans',
@@ -250,6 +258,7 @@ WithError.parameters = {
     },
 };
 export const WithSuccess = Template.bind({});
+WithSuccess.storyName = 'Curseur avec succès';
 WithSuccess.args = {
     label: 'Température',
     success: 'Température optimale sélectionnée',
@@ -271,6 +280,7 @@ WithSuccess.parameters = {
     },
 };
 export const WithWarning = Template.bind({});
+WithWarning.storyName = 'Curseur avec avertissement';
 WithWarning.args = {
     label: 'Niveau de luminosité',
     warning: 'Une luminosité élevée peut affecter la batterie',
@@ -292,6 +302,7 @@ WithWarning.parameters = {
     },
 };
 export const WithHint = Template.bind({});
+WithHint.storyName = "Curseur avec message d'aide";
 WithHint.args = {
     label: 'Distance de recherche',
     hint: 'Plus la distance est grande, plus vous aurez de résultats',
@@ -313,6 +324,7 @@ WithHint.parameters = {
     },
 };
 export const Required = Template.bind({});
+Required.storyName = 'Curseur requis';
 Required.args = {
     label: 'Nombre de participants',
     assistiveText: 'Minimum 2 participants requis',
@@ -334,3 +346,30 @@ Required.parameters = {
         },
     },
 };
+export const HintExpandable = () => {
+    const element = document.createElement('spw-input-slider');
+    element.setAttribute('label', 'Mon label');
+    element.setAttribute('name', 'input-slider-hint-expandable');
+    element.setAttribute('min', '0');
+    element.setAttribute('max', '100');
+    element.setAttribute('step', '1');
+    element.setAttribute('value', '50');
+    element.setAttribute('hint', "Ceci est un texte d'aide.");
+    element.setAttribute('is-expandable', 'true');
+    element.setAttribute('expand-label', 'En savoir plus');
+    element.setAttribute('collapse-label', 'Réduire');
+    element.setAttribute('show-hint-icon', 'true');
+    const details = document.createElement('div');
+    details.setAttribute('slot', 'details');
+    details.innerHTML = '<div class="spw-ds-wysiwyg">Ceci est un message avec du <strong>texte en gras</strong>. Ainsi qu\'un <a href="#">lien</a></div>';
+    element.appendChild(details);
+    return element;
+};
+HintExpandable.storyName = 'Curseur avec indice dépliable';
+HintExpandable.parameters = {
+    docs: {
+        description: {
+            story: `Curseur avec hint dépliable. Le message d'aide est masqué par défaut et révélé au clic via isExpandable. Le slot details permet d'afficher du contenu riche (HTML) dans le panneau déplié. Cas d'usage : explications sur la plage de valeurs, conseils d'utilisation, aides contextuelles facultatives.`,
+        },
+    },
+};

package/dist/collection/stories/components/spw-link/spw-link.stories.js

@@ -67,12 +67,14 @@ const Template = args => {
     return element;
 };
 export const Primary = Template.bind({});
+Primary.storyName = 'Lien standard';
 Primary.args = {
     content: 'Mon super lien',
     href: 'http://google.com',
     target: '_blank',
 };
 export const WithIcon = Template.bind({});
+WithIcon.storyName = 'Lien avec icône';
 WithIcon.args = {
     content: 'Mon super lien avec icône',
     href: 'http://google.com',
@@ -94,3 +96,65 @@ WithIcon.parameters = {
         },
     },
 };
+export const WithIconLeft = Template.bind({});
+WithIconLeft.storyName = 'Lien avec icône à gauche';
+WithIconLeft.args = {
+    content: 'Retour à la liste',
+    href: '#',
+    icon: 'fa-arrow-left',
+    iconPosition: 'left',
+};
+WithIconLeft.parameters = {
+    docs: {
+        description: {
+            story: `Lien avec icône positionnée à gauche du texte. Cas d'usage : bouton retour, navigation précédente, liens de navigation secondaire.`,
+        },
+    },
+};
+export const ExternalLink = Template.bind({});
+ExternalLink.storyName = 'Lien externe';
+ExternalLink.args = {
+    content: 'Consulter le site externe',
+    href: 'https://www.wallonie.be',
+    target: '_blank',
+    rel: 'noopener noreferrer',
+    icon: 'fa-arrow-up-right-from-square',
+    iconPosition: 'right',
+};
+ExternalLink.parameters = {
+    docs: {
+        description: {
+            story: `Lien vers un site externe s'ouvrant dans un nouvel onglet, avec rel="noopener noreferrer" pour la sécurité. L'icône indique visuellement la redirection externe. Cas d'usage : références vers des ressources tierces, portails partenaires.`,
+        },
+    },
+};
+export const Download = Template.bind({});
+Download.storyName = 'Lien de téléchargement';
+Download.args = {
+    content: 'Télécharger le document',
+    href: '/document.pdf',
+    download: 'document.pdf',
+    icon: 'fa-download',
+    iconPosition: 'left',
+};
+Download.parameters = {
+    docs: {
+        description: {
+            story: `Lien déclenchant le téléchargement d'un fichier via l'attribut download. Cas d'usage : téléchargement de PDF, exports de données, ressources à sauvegarder.`,
+        },
+    },
+};
+export const Disabled = Template.bind({});
+Disabled.storyName = 'Lien désactivé';
+Disabled.args = {
+    content: 'Lien non disponible',
+    href: '#',
+    disabled: true,
+};
+Disabled.parameters = {
+    docs: {
+        description: {
+            story: `Lien en état désactivé. Non cliquable et visuellement différencié. Cas d'usage : actions conditionnelles, fonctionnalités non encore disponibles, liens selon droits utilisateur.`,
+        },
+    },
+};

package/dist/collection/stories/components/spw-loading/spw-loading.stories.js

@@ -67,6 +67,7 @@ const Template = args => {
     return element;
 };
 export const Default = Template.bind({});
+Default.storyName = 'Chargement par défaut';
 Default.args = {};
 Default.parameters = {
     docs: {
@@ -76,6 +77,7 @@ Default.parameters = {
     },
 };
 export const WithoutText = Template.bind({});
+WithoutText.storyName = 'Chargement sans texte';
 WithoutText.args = { text: '' };
 WithoutText.parameters = {
     docs: {
@@ -86,6 +88,7 @@ WithoutText.parameters = {
 };
 // --- TAILLES ---
 export const Small = Template.bind({});
+Small.storyName = 'Chargement petit';
 Small.args = { size: 'small' };
 Small.parameters = {
     docs: {
@@ -95,6 +98,7 @@ Small.parameters = {
     },
 };
 export const Medium = Template.bind({});
+Medium.storyName = 'Chargement moyen';
 Medium.args = { size: 'medium' };
 Medium.parameters = {
     docs: {
@@ -104,6 +108,7 @@ Medium.parameters = {
     },
 };
 export const Large = Template.bind({});
+Large.storyName = 'Chargement grand';
 Large.args = { size: 'large' };
 Large.parameters = {
     docs: {
@@ -113,6 +118,7 @@ Large.parameters = {
     },
 };
 export const ExtraLarge = Template.bind({});
+ExtraLarge.storyName = 'Chargement très grand';
 ExtraLarge.args = { size: 'extra-large' };
 ExtraLarge.parameters = {
     docs: {
@@ -122,6 +128,7 @@ ExtraLarge.parameters = {
     },
 };
 export const SurfaceDark = Template.bind({});
+SurfaceDark.storyName = 'Chargement sur fond sombre';
 SurfaceDark.args = { surface: 'dark' };
 SurfaceDark.parameters = {
     backgrounds: { default: 'dark' },
@@ -132,6 +139,7 @@ SurfaceDark.parameters = {
     },
 };
 export const Vertical = Template.bind({});
+Vertical.storyName = 'Chargement vertical';
 Vertical.args = { orientation: 'vertical' };
 Vertical.parameters = {
     docs: {

package/dist/collection/stories/components/spw-pagination/spw-pagination.stories.js

@@ -81,12 +81,14 @@ const Template = args => {
     return element;
 };
 export const Default = Template.bind({});
+Default.storyName = 'Pagination par boutons';
 Default.args = {
     totalItems: 90,
     itemsPerPage: 10,
     label: '',
 };
 export const Input = Template.bind({});
+Input.storyName = 'Pagination par champ de saisie';
 Input.args = {
     totalItems: 90,
     itemsPerPage: 10,

package/dist/collection/stories/components/spw-radio/spw-radio.stories.js

@@ -70,8 +70,78 @@ const Template = args => {
     return element;
 };
 export const Default = Template.bind({});
+Default.storyName = 'Boutons radio horizontaux';
 Default.args = {
     label: 'Mon label',
     type: 'checkboxes',
     name: 'radio',
+    orientation: 'horizontal',
+};
+Default.parameters = {
+    docs: {
+        description: {
+            story: `Groupe de boutons radio en orientation horizontale. Les options sont disposées côte à côte sur une même ligne. Cas d'usage : choix courts (Oui / Non, 2-3 options), filtres rapides, sélection inline dans un formulaire compact.`,
+        },
+    },
+};
+export const Vertical = Template.bind({});
+Vertical.storyName = 'Boutons radio verticaux';
+Vertical.args = {
+    label: 'Mon label',
+    type: 'checkboxes',
+    name: 'radio-vertical',
+    orientation: 'vertical',
+};
+Vertical.parameters = {
+    docs: {
+        description: {
+            story: `Groupe de boutons radio en orientation verticale. Les options sont empilées les unes sous les autres. Cas d'usage : listes d'options longues, labels multi-mots, formulaires standards.`,
+        },
+    },
+};
+export const WithHint = Template.bind({});
+WithHint.storyName = 'Boutons radio avec indice (hint)';
+WithHint.args = {
+    label: 'Mon label',
+    type: 'checkboxes',
+    name: 'radio-hint',
+    orientation: 'vertical',
+    hint: "Ceci est un texte d'aide.",
+    showHintIcon: true,
+};
+WithHint.parameters = {
+    docs: {
+        description: {
+            story: `Groupe de boutons radio avec un message d'aide (hint) affiché sous les options. Cas d'usage : préciser les critères de sélection, donner un contexte supplémentaire à l'utilisateur.`,
+        },
+    },
+};
+export const WithHintExpandable = () => {
+    const element = document.createElement('spw-group');
+    element.setAttribute('label', 'Mon label');
+    element.setAttribute('type', 'checkboxes');
+    element.setAttribute('name', 'radio-hint-expandable');
+    element.setAttribute('orientation', 'vertical');
+    element.setAttribute('hint', "Ceci est un texte d'aide.");
+    element.setAttribute('show-hint-icon', 'true');
+    element.setAttribute('is-expandable', 'true');
+    element.setAttribute('expand-label', 'En savoir plus');
+    element.setAttribute('collapse-label', 'Réduire');
+    element.innerHTML = `
+    <spw-radio name="radio-hint-expandable" value="1">Radio 1</spw-radio>
+    <spw-radio name="radio-hint-expandable" value="2">Radio 2</spw-radio>
+  `;
+    const details = document.createElement('div');
+    details.setAttribute('slot', 'details');
+    details.innerHTML = '<div class="spw-ds-wysiwyg">Ceci est un message avec du <strong>texte en gras</strong>. Ainsi qu\'un <a href="#">lien</a></div>';
+    element.appendChild(details);
+    return element;
+};
+WithHintExpandable.storyName = 'Boutons radio avec indice dépliable';
+WithHintExpandable.parameters = {
+    docs: {
+        description: {
+            story: `Groupe de boutons radio avec hint dépliable. Le message d'aide est masqué par défaut et révélé au clic via isExpandable. Le slot details permet d'afficher du contenu riche dans le panneau déplié. Cas d'usage : explications détaillées sur les options, règles de sélection complexes.`,
+        },
+    },
 };

package/dist/collection/stories/components/spw-scrolltop/spw-scrolltop.stories.js

@@ -79,14 +79,17 @@ const Template = args => {
     return container;
 };
 export const Default = Template.bind({});
+Default.storyName = 'Retour en haut par défaut';
 Default.args = {
     threshold: 300,
 };
 export const LowThreshold = Template.bind({});
+LowThreshold.storyName = "Retour en haut à seuil bas";
 LowThreshold.args = {
     threshold: 100,
 };
 export const HighThreshold = Template.bind({});
+HighThreshold.storyName = 'Retour en haut à seuil élevé';
 HighThreshold.args = {
     threshold: 500,
 };

package/dist/collection/stories/components/spw-search-field/spw-search-field.stories.js

@@ -239,6 +239,7 @@ const defaultItems = [
     { label: 'Environnement', value: 'environnement', url: '/nature/environnement', category: 'Nature', disabled: true },
 ];
 export const Default = Template.bind({});
+Default.storyName = 'Champ de recherche par défaut';
 Default.args = {
     size: 'medium',
     name: 'search-basic',
@@ -253,6 +254,7 @@ Default.parameters = {
     },
 };
 export const ViewMore = Template.bind({});
+ViewMore.storyName = 'Recherche avec lien « Voir plus »';
 ViewMore.args = {
     size: 'medium',
     name: 'search-with-links',
@@ -269,6 +271,7 @@ ViewMore.parameters = {
     },
 };
 export const FormSubmission = Template.bind({});
+FormSubmission.storyName = 'Recherche avec soumission de formulaire';
 FormSubmission.args = {
     size: 'medium',
     name: 'q',
@@ -284,6 +287,7 @@ FormSubmission.parameters = {
     },
 };
 export const HeroRounded = Template.bind({});
+HeroRounded.storyName = 'Recherche bannière arrondie';
 HeroRounded.args = {
     size: 'large',
     name: 'search-hero',
@@ -302,6 +306,7 @@ HeroRounded.parameters = {
     },
 };
 export const WithLabelAndHelp = Template.bind({});
+WithLabelAndHelp.storyName = "Recherche avec label et aide";
 WithLabelAndHelp.args = {
     size: 'medium',
     name: 'search-required',
@@ -319,6 +324,7 @@ WithLabelAndHelp.parameters = {
     },
 };
 export const Disabled = Template.bind({});
+Disabled.storyName = 'Recherche désactivée';
 Disabled.args = {
     size: 'medium',
     name: 'search-disabled',

package/dist/collection/stories/components/spw-select/spw-select.stories.js

@@ -72,6 +72,7 @@ const Template = args => {
     return element;
 };
 export const Default = Template.bind({});
+Default.storyName = 'Liste déroulante native';
 Default.args = {
     placeholder: 'Mon placeholder',
     label: 'Mon label',
@@ -80,3 +81,32 @@ Default.args = {
     required: true,
     showHintIcon: false,
 };
+export const HintExpandable = () => {
+    const element = document.createElement('spw-select');
+    element.setAttribute('label', 'Mon label');
+    element.setAttribute('name', 'select-hint-expandable');
+    element.setAttribute('hint', "Ceci est un texte d'aide.");
+    element.setAttribute('is-expandable', 'true');
+    element.setAttribute('expand-label', 'En savoir plus');
+    element.setAttribute('collapse-label', 'Réduire');
+    element.setAttribute('show-hint-icon', 'true');
+    element.innerHTML = `
+    <option value="">Choisissez une option</option>
+    <option value="1">Option 1</option>
+    <option value="2">Option 2</option>
+    <option value="3">Option 3</option>
+  `;
+    const details = document.createElement('div');
+    details.setAttribute('slot', 'details');
+    details.innerHTML = '<div class="spw-ds-wysiwyg">Ceci est un message avec du <strong>texte en gras</strong>. Ainsi qu\'un <a href="#">lien</a></div>';
+    element.appendChild(details);
+    return element;
+};
+HintExpandable.storyName = 'Liste déroulante avec indice dépliable';
+HintExpandable.parameters = {
+    docs: {
+        description: {
+            story: `Liste déroulante avec hint dépliable. Le message d'aide est masqué par défaut et révélé au clic via isExpandable. Le slot details permet d'afficher du contenu riche (HTML) dans le panneau déplié. Cas d'usage : explications longues, règles de sélection, aides contextuelles facultatives.`,
+        },
+    },
+};

package/dist/collection/stories/components/spw-separator/spw-separator.stories.js

@@ -69,11 +69,13 @@ const Template = args => {
     return element;
 };
 export const Horizontal = Template.bind({});
+Horizontal.storyName = 'Séparateur horizontal';
 Horizontal.args = {
     direction: 'horizontal',
     thickness: '1',
 };
 export const Vertical = Template.bind({});
+Vertical.storyName = 'Séparateur vertical';
 Vertical.args = {
     direction: 'vertical',
     thickness: '1',