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

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

@@ -84,6 +84,7 @@ const Template = args => {
  * ------------------------------------------------------------------------------------------------- */
 // --- STORY PAR DÉFAUT ---
 export const Default = Template.bind({});
+Default.storyName = 'Sélection simple';
 Default.args = {
     label: 'Sélection simple',
     name: 'custom-select',
@@ -102,6 +103,7 @@ Default.args = {
 };
 // --- MULTI-SÉLECTION ---
 export const Multiple = Template.bind({});
+Multiple.storyName = 'Sélection multiple';
 Multiple.args = Object.assign(Object.assign({}, Default.args), { label: 'Sélection multiple', multiple: true, placeholder: 'Sélectionnez une ou plusieurs options', items: [
         { label: 'Pomme', value: 'apple' },
         { label: 'Banane', value: 'banana' },
@@ -110,6 +112,7 @@ Multiple.args = Object.assign(Object.assign({}, Default.args), { label: 'Sélect
     ] });
 // --- AVEC RECHERCHE ---
 export const AvecRecherche = Template.bind({});
+AvecRecherche.storyName = 'Sélection avec recherche';
 AvecRecherche.args = Object.assign(Object.assign({}, Default.args), { label: 'Sélection avec recherche', isSearch: true, placeholder: 'Rechercher une option...', items: [
         { label: 'Paris', value: 'paris' },
         { label: 'Londres', value: 'london' },
@@ -119,12 +122,15 @@ AvecRecherche.args = Object.assign(Object.assign({}, Default.args), { label: 'S
     ] });
 // --- AVEC ERREUR ---
 export const AvecErreur = Template.bind({});
+AvecErreur.storyName = 'Sélection avec erreur';
 AvecErreur.args = Object.assign(Object.assign({}, Default.args), { label: 'Champ avec erreur', error: 'Veuillez sélectionner une option valide' });
 // --- AVEC MESSAGE DE SUCCÈS ---
 export const AvecSucces = Template.bind({});
+AvecSucces.storyName = 'Sélection avec succès';
 AvecSucces.args = Object.assign(Object.assign({}, Default.args), { label: 'Champ avec succès', success: 'Sélection enregistrée avec succès !' });
 // --- AVEC WARNING ---
 export const AvecWarning = Template.bind({});
+AvecWarning.storyName = 'Sélection avec avertissement';
 AvecWarning.args = Object.assign(Object.assign({}, Default.args), { label: 'Champ avec avertissement', warning: 'Cette option peut avoir des conséquences inattendues' });
 Default.parameters = {
     docs: {
@@ -170,6 +176,7 @@ AvecWarning.parameters = {
 };
 // --- CRÉATION À LA VOLÉE (MULTIPLE) ---
 export const AllowCreateMultiple = Template.bind({});
+AllowCreateMultiple.storyName = "Création d'options à la volée";
 AllowCreateMultiple.args = Object.assign(Object.assign({}, Default.args), { label: 'Mots-clés', multiple: true, isSearch: true, allowCreate: true, isClear: true, searchPlaceholder: 'Rechercher ou créer un mot-clé...', noResultsText: 'Aucun mot-clé existant.', placeholder: 'Sélectionnez ou créez des mots-clés', hint: 'Saisissez un mot-clé absent de la liste et cliquez sur + pour le créer.', showHintIcon: false, items: [
         { label: 'Angular', value: 'angular' },
         { label: 'React', value: 'react' },
@@ -184,3 +191,32 @@ AllowCreateMultiple.parameters = {
         },
     },
 };
+export const HintExpandable = () => {
+    const element = document.createElement('spw-custom-select');
+    element.setAttribute('label', 'Mon label');
+    element.setAttribute('name', 'custom-select-hint-expandable');
+    element.setAttribute('placeholder', 'Choisissez une option');
+    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.setAttribute('items', JSON.stringify([
+        { label: 'Option 1', value: '1' },
+        { label: 'Option 2', value: '2' },
+        { label: 'Option 3', value: '3' },
+    ]));
+    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 = 'Sélection personnalisée avec indice dépliable';
+HintExpandable.parameters = {
+    docs: {
+        description: {
+            story: `Custom Select 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, critères de sélection, aides contextuelles facultatives.`,
+        },
+    },
+};

package/dist/collection/stories/components/spw-date-picker/spw-date-picker.stories.js

@@ -16,6 +16,9 @@ const meta = {
     tags: ['autodocs'],
     parameters: {
         docs: {
+            story: {
+                height: '400px',
+            },
             description: {
                 component: `
 
@@ -62,12 +65,14 @@ const Template = args => {
 };
 // Default
 export const Default = Template.bind({});
+Default.storyName = 'Sélecteur de date par défaut';
 Default.args = {
     label: 'Date de naissance',
     placeholder: 'JJ/MM/AAAA',
 };
 // WithValue
 export const WithValue = Template.bind({});
+WithValue.storyName = 'Sélecteur avec valeur préremplie';
 WithValue.args = {
     label: 'Date avec valeur',
     value: '2025-06-30',
@@ -75,6 +80,7 @@ WithValue.args = {
 };
 // WithConstraints
 export const WithConstraints = Template.bind({});
+WithConstraints.storyName = 'Sélecteur avec dates min/max';
 WithConstraints.args = {
     label: 'Date limitée',
     placeholder: 'JJ/MM/AAAA',
@@ -83,6 +89,7 @@ WithConstraints.args = {
 };
 // Disabled
 export const Disabled = Template.bind({});
+Disabled.storyName = 'Sélecteur désactivé';
 Disabled.args = {
     label: 'Date désactivée',
     placeholder: 'Non disponible',
@@ -115,6 +122,7 @@ const RangeTemplate = args => {
 };
 // DateRange
 export const DateRange = RangeTemplate.bind({});
+DateRange.storyName = 'Plage de dates';
 DateRange.args = {
     rangeId: 'range-story-1',
     startLabel: 'Date de début',
@@ -124,6 +132,7 @@ DateRange.args = {
 };
 // DateRangeWithValues
 export const DateRangeWithValues = RangeTemplate.bind({});
+DateRangeWithValues.storyName = 'Plage de dates préremplie';
 DateRangeWithValues.args = {
     rangeId: 'range-story-2',
     startLabel: 'Date de début',
@@ -175,3 +184,26 @@ DateRangeWithValues.parameters = {
         },
     },
 };
+export const HintExpandable = () => {
+    const element = document.createElement('spw-date-picker');
+    element.setAttribute('label', 'Mon label');
+    element.setAttribute('placeholder', 'JJ/MM/AAAA');
+    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 = 'Sélecteur de date avec indice dépliable';
+HintExpandable.parameters = {
+    docs: {
+        description: {
+            story: `Sélecteur de date 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 : format de date attendu, contraintes de saisie, aides contextuelles facultatives.`,
+        },
+    },
+};

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

@@ -75,4 +75,170 @@ const TemplateDefault = args => {
     return element;
 };
 export const Default = TemplateDefault.bind({});
+Default.storyName = 'Menu déroulant par défaut';
 Default.args = {};
+Default.parameters = {
+    docs: {
+        description: {
+            story: `Menu déroulant déclenché par un bouton icône. Affiche une liste d'actions au clic. Cas d'usage : actions contextuelles sur une ligne de tableau, menu kebab (trois points).`,
+        },
+    },
+};
+export const WithTextTrigger = () => {
+    const element = document.createElement('spw-dropdown');
+    element.innerHTML = `
+    <spw-button variant="secondary" icon-right="fa-chevron-down">
+      Mon compte
+      <div slot="dropdownContent">
+        <spw-group orientation="vertical" is-full-width>
+          <spw-button is-full-width variant="secondary" size="small" icon-left="fa-user">Mon profil</spw-button>
+          <spw-button is-full-width variant="secondary" size="small" icon-left="fa-gear">Paramètres</spw-button>
+          <spw-button is-full-width variant="secondary" size="small" icon-left="fa-right-from-bracket">Déconnexion</spw-button>
+        </spw-group>
+      </div>
+    </spw-button>
+  `;
+    return element;
+};
+WithTextTrigger.storyName = 'Menu déroulant avec texte déclencheur';
+WithTextTrigger.parameters = {
+    docs: {
+        description: {
+            story: `Menu déroulant déclenché par un bouton avec texte et icône chevron. Cas d'usage : menu utilisateur en header, navigation par catégorie, sélection de contexte.`,
+        },
+    },
+};
+export const WithLinks = () => {
+    const element = document.createElement('spw-dropdown');
+    element.innerHTML = `
+    <spw-button variant="secondary" size="small" icon-right="fa-chevron-down">
+      Navigation
+      <div slot="dropdownContent">
+        <spw-group orientation="vertical" is-full-width>
+          <spw-link href="#accueil" icon="fa-house" icon-position="left">Accueil</spw-link>
+          <spw-link href="#services" icon="fa-briefcase" icon-position="left">Services</spw-link>
+          <spw-link href="#contact" icon="fa-envelope" icon-position="left">Contact</spw-link>
+        </spw-group>
+      </div>
+    </spw-button>
+  `;
+    return element;
+};
+WithLinks.storyName = 'Menu déroulant avec liens';
+WithLinks.parameters = {
+    docs: {
+        description: {
+            story: `Menu déroulant contenant des liens de navigation. Cas d'usage : sous-menus de navigation, navigation contextuelle, raccourcis vers des sections.`,
+        },
+    },
+};
+export const AlignmentStart = () => {
+    const wrapper = document.createElement('div');
+    wrapper.style.display = 'flex';
+    wrapper.style.justifyContent = 'center';
+    const element = document.createElement('spw-dropdown');
+    element.setAttribute('alignment', 'start');
+    element.innerHTML = `
+    <spw-button variant="secondary" icon-right="fa-chevron-down">
+      Aligné à gauche
+      <div slot="dropdownContent">
+        <spw-group orientation="vertical" is-full-width>
+          <spw-button is-full-width variant="secondary" size="small">Action 1</spw-button>
+          <spw-button is-full-width variant="secondary" size="small">Action 2</spw-button>
+          <spw-button is-full-width variant="secondary" size="small">Action 3</spw-button>
+        </spw-group>
+      </div>
+    </spw-button>
+  `;
+    wrapper.appendChild(element);
+    return wrapper;
+};
+AlignmentStart.storyName = 'Menu déroulant aligné à gauche';
+AlignmentStart.parameters = {
+    docs: {
+        description: {
+            story: `Menu déroulant avec alignement start : le bord gauche du menu s'aligne sur le bord gauche du déclencheur. Cas d'usage : déclencheurs en milieu ou à droite de l'interface.`,
+        },
+    },
+};
+export const AlignmentEnd = () => {
+    const wrapper = document.createElement('div');
+    wrapper.style.display = 'flex';
+    wrapper.style.justifyContent = 'center';
+    const element = document.createElement('spw-dropdown');
+    element.setAttribute('alignment', 'end');
+    element.innerHTML = `
+    <spw-button variant="secondary" icon-right="fa-chevron-down">
+      Aligné à droite
+      <div slot="dropdownContent">
+        <spw-group orientation="vertical" is-full-width>
+          <spw-button is-full-width variant="secondary" size="small">Action 1</spw-button>
+          <spw-button is-full-width variant="secondary" size="small">Action 2</spw-button>
+          <spw-button is-full-width variant="secondary" size="small">Action 3</spw-button>
+        </spw-group>
+      </div>
+    </spw-button>
+  `;
+    wrapper.appendChild(element);
+    return wrapper;
+};
+AlignmentEnd.storyName = 'Menu déroulant aligné à droite';
+AlignmentEnd.parameters = {
+    docs: {
+        description: {
+            story: `Menu déroulant avec alignement end : le bord droit du menu s'aligne sur le bord droit du déclencheur. Cas d'usage : déclencheurs en milieu ou à gauche de l'interface.`,
+        },
+    },
+};
+export const DirectionTop = () => {
+    const wrapper = document.createElement('div');
+    wrapper.style.paddingTop = '120px';
+    const element = document.createElement('spw-dropdown');
+    element.setAttribute('direction', 'top');
+    element.innerHTML = `
+    <spw-button variant="secondary" icon-right="fa-chevron-up">
+      S'ouvre vers le haut
+      <div slot="dropdownContent">
+        <spw-group orientation="vertical" is-full-width>
+          <spw-button is-full-width variant="secondary" size="small">Action 1</spw-button>
+          <spw-button is-full-width variant="secondary" size="small">Action 2</spw-button>
+          <spw-button is-full-width variant="secondary" size="small">Action 3</spw-button>
+        </spw-group>
+      </div>
+    </spw-button>
+  `;
+    wrapper.appendChild(element);
+    return wrapper;
+};
+DirectionTop.storyName = 'Menu déroulant vers le haut';
+DirectionTop.parameters = {
+    docs: {
+        description: {
+            story: `Menu déroulant s'ouvrant vers le haut du déclencheur. Cas d'usage : éléments en bas de page ou de conteneur où le menu vers le bas sortirait du viewport.`,
+        },
+    },
+};
+export const WithScrollableContent = () => {
+    const element = document.createElement('spw-dropdown');
+    element.setAttribute('max-height', '200');
+    element.setAttribute('content-width', '250');
+    element.innerHTML = `
+    <spw-button variant="secondary" icon-right="fa-chevron-down">
+      Liste longue
+      <div slot="dropdownContent">
+        <spw-group orientation="vertical" is-full-width>
+          ${Array.from({ length: 10 }, (_, i) => `<spw-button is-full-width variant="secondary" size="small">Option ${i + 1}</spw-button>`).join('')}
+        </spw-group>
+      </div>
+    </spw-button>
+  `;
+    return element;
+};
+WithScrollableContent.storyName = 'Menu déroulant avec contenu défilant';
+WithScrollableContent.parameters = {
+    docs: {
+        description: {
+            story: `Menu déroulant avec hauteur maximale et défilement interne. Cas d'usage : listes longues d'options, sélection parmi de nombreux éléments sans occuper tout l'écran.`,
+        },
+    },
+};

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.`,
+        },
+    },
+};