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

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

@@ -54,30 +54,35 @@ const Template = args => {
     return element;
 };
 export const WithInitials = Template.bind({});
+WithInitials.storyName = 'Avatar avec initiales';
 WithInitials.args = {
     initials: 'JD',
     size: 'medium',
     shape: 'rounded',
 };
 export const WithImage = Template.bind({});
+WithImage.storyName = 'Avatar avec image';
 WithImage.args = {
     image: 'https://i.pravatar.cc/150?img=3',
     size: 'medium',
     shape: 'rounded',
 };
 export const Small = Template.bind({});
+Small.storyName = 'Avatar petit';
 Small.args = {
     initials: 'SM',
     size: 'small',
     shape: 'rounded',
 };
 export const Large = Template.bind({});
+Large.storyName = 'Avatar grand';
 Large.args = {
     initials: 'LG',
     size: 'large',
     shape: 'rounded',
 };
 export const WithBubble = Template.bind({});
+WithBubble.storyName = 'Avatar avec bulle de notification';
 WithBubble.args = {
     initials: 'JD',
     size: 'medium',
@@ -105,6 +110,7 @@ const DropdownTemplate = args => {
     return container;
 };
 export const WithDropdown = DropdownTemplate.bind({});
+WithDropdown.storyName = 'Avatar avec menu déroulant';
 WithDropdown.args = {
     initials: 'JD',
     size: 'medium',

package/dist/collection/stories/components/spw-block-content/spw-block-content.stories.js

@@ -110,6 +110,7 @@ const Template = args => {
     return element;
 };
 export const Blockquote = Template.bind({});
+Blockquote.storyName = 'Citation';
 Blockquote.args = {
     variant: 'blockquote',
     topContent: 'Message du Ministre',
@@ -117,6 +118,7 @@ Blockquote.args = {
     bottomContent: 'John Doe, Ministre de la culture',
 };
 export const BlockquoteNeutral = Template.bind({});
+BlockquoteNeutral.storyName = 'Citation neutre';
 BlockquoteNeutral.args = {
     variant: 'blockquote',
     background: 'neutral',
@@ -125,6 +127,7 @@ BlockquoteNeutral.args = {
     bottomContent: 'John Doe, Ministre de la culture',
 };
 export const BannerLandscape = Template.bind({});
+BannerLandscape.storyName = 'Bannière horizontale';
 BannerLandscape.args = {
     variant: 'banner-landscape',
     imageSrc: 'https://images.unsplash.com/photo-1491557345352-5929e343eb89?q=80&w=2070&auto=format&fit=crop',
@@ -135,6 +138,7 @@ BannerLandscape.args = {
     buttonText: 'Découvrir',
 };
 export const BannerLandscapeWithLink = Template.bind({});
+BannerLandscapeWithLink.storyName = 'Bannière horizontale cliquable';
 BannerLandscapeWithLink.args = {
     variant: 'banner-landscape',
     imageSrc: 'https://images.unsplash.com/photo-1491557345352-5929e343eb89?q=80&w=2070&auto=format&fit=crop',
@@ -147,6 +151,7 @@ BannerLandscapeWithLink.args = {
     buttonText: 'Accéder au portail',
 };
 export const BannerPortrait = Template.bind({});
+BannerPortrait.storyName = 'Bannière verticale';
 BannerPortrait.args = {
     variant: 'banner-portrait',
     imageSrc: 'https://images.unsplash.com/photo-1491557345352-5929e343eb89?q=80&w=2070&auto=format&fit=crop',
@@ -157,6 +162,7 @@ BannerPortrait.args = {
     buttonText: 'Découvrir',
 };
 export const BannerPortraitWithLink = Template.bind({});
+BannerPortraitWithLink.storyName = 'Bannière verticale cliquable';
 BannerPortraitWithLink.args = {
     variant: 'banner-portrait',
     imageSrc: 'https://images.unsplash.com/photo-1491557345352-5929e343eb89?q=80&w=2070&auto=format&fit=crop',
@@ -228,6 +234,7 @@ export const Newsletter = () => {
   `;
     return wrapper;
 };
+Newsletter.storyName = "Bloc d'inscription newsletter";
 Newsletter.parameters = {
     docs: {
         description: {

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

@@ -16,6 +16,14 @@ const meta = {
     tags: ['autodocs'],
     parameters: {
         docs: {
+            source: {
+                transform: (src) => {
+                    return src
+                        .replace(/^<div[^>]*>\n?\s*/i, '')
+                        .replace(/\n?\s*<\/div>$/i, '')
+                        .replace(/ style="[^"]*"/g, '');
+                },
+            },
             description: {
                 component: `
 
@@ -23,8 +31,8 @@ La Box est un conteneur générique servant de structure d'accueil pour différe
 
 ## Styles
 
-- **Avec fond** : fond blanc, coins arrondis et ombre légère (has-radius + has-shadow + padding). Détache clairement le contenu du reste de la page et crée un point de focalisation visuel.
-- **Sans fond** : sans fond, sans ombre, sans bord arrondi, sans padding. S'intègre directement dans le flux de la page. À utiliser quand le cadre visuel n'est pas nécessaire mais qu'une structuration logique reste utile.
+- **Avec fond** : coins arrondis et ombre légère (has-radius + has-shadow + padding). Détache clairement le contenu du reste de la page et crée un point de focalisation visuel.
+- **Sans fond** : sans ombre, sans bord arrondi, sans padding. S'intègre directement dans le flux de la page. À utiliser quand le cadre visuel n'est pas nécessaire mais qu'une structuration logique reste utile.
 
 ## Fonctionnalités
 
@@ -69,6 +77,7 @@ const Template = args => {
     return element;
 };
 export const Default = Template.bind({});
+Default.storyName = 'Box par défaut';
 Default.args = {
     padding: 'medium',
     hasRadius: true,
@@ -117,6 +126,7 @@ export const Styles = () => {
   `;
     return container;
 };
+Styles.storyName = 'Styles de la box';
 Styles.parameters = {
     docs: {
         description: {
@@ -147,6 +157,7 @@ export const PaddingVariants = () => {
   `;
     return container;
 };
+PaddingVariants.storyName = 'Variantes de padding';
 PaddingVariants.parameters = {
     docs: {
         description: {
@@ -173,6 +184,7 @@ export const WithShadowAndRadius = () => {
   `;
     return container;
 };
+WithShadowAndRadius.storyName = 'Box avec ombre et coins arrondis';
 WithShadowAndRadius.parameters = {
     docs: {
         description: {
@@ -211,6 +223,7 @@ export const Collapsible = () => {
   `;
     return container;
 };
+Collapsible.storyName = 'Box repliable';
 Collapsible.parameters = {
     docs: {
         description: {
@@ -259,6 +272,7 @@ export const StickyWithContent = () => {
   `;
     return container;
 };
+StickyWithContent.storyName = 'Box sticky avec contenu';
 StickyWithContent.parameters = {
     docs: {
         description: {
@@ -302,6 +316,7 @@ export const SidebarPattern = () => {
   `;
     return container;
 };
+SidebarPattern.storyName = 'Pattern de barre latérale';
 SidebarPattern.parameters = {
     docs: {
         description: {
@@ -309,3 +324,17 @@ SidebarPattern.parameters = {
         },
     },
 };
+export const WithBorder = Template.bind({});
+WithBorder.storyName = 'Box avec bordure';
+WithBorder.args = {
+    padding: 'medium',
+    hasRadius: true,
+    hasBorder: true,
+};
+WithBorder.parameters = {
+    docs: {
+        description: {
+            story: `Box avec bordure (hasBorder). La couleur, l'épaisseur et le style sont personnalisables via les tokens --spw-box-border-color, --spw-box-border-width et --spw-box-border-style. Cas d'usage : encarts avec délimitation visuelle explicite sans ombre portée.`,
+        },
+    },
+};

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

@@ -75,10 +75,12 @@ const Template = args => {
     return element;
 };
 export const Default = Template.bind({});
+Default.storyName = "Fil d'Ariane par défaut";
 Default.args = {
     variant: 'default',
 };
 export const MultiLine = Template.bind({});
+MultiLine.storyName = "Fil d'Ariane multiligne";
 MultiLine.args = {
     variant: 'multiline',
 };

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

@@ -67,21 +67,25 @@ const Template = args => {
     return element;
 };
 export const Primary = Template.bind({});
+Primary.storyName = 'Bouton primary';
 Primary.args = {
     variant: 'primary',
     label: 'Primary Button',
 };
 export const Secondary = Template.bind({});
+Secondary.storyName = 'Bouton secondary';
 Secondary.args = {
     variant: 'secondary',
     label: 'Secondary Button',
 };
 export const Tertiary = Template.bind({});
+Tertiary.storyName = 'Bouton tertiary';
 Tertiary.args = {
     variant: 'tertiary',
     label: 'Tertiary Button',
 };
 export const WithIcon = Template.bind({});
+WithIcon.storyName = 'Bouton avec icône';
 WithIcon.args = {
     variant: 'primary',
     label: 'Button with icon',
@@ -89,6 +93,7 @@ WithIcon.args = {
     iconPosition: 'right',
 };
 export const WithLoader = Template.bind({});
+WithLoader.storyName = 'Bouton avec chargement';
 WithLoader.args = {
     variant: 'primary',
     label: 'Button with icon',
@@ -97,6 +102,7 @@ WithLoader.args = {
     isLoading: true,
 };
 export const IconOnly = Template.bind({});
+IconOnly.storyName = 'Bouton icône seule';
 IconOnly.args = {
     variant: 'primary',
     isIconOnly: true,

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

@@ -97,22 +97,84 @@ const ToggleTemplate = args => {
     return element;
 };
 export const Default = Template.bind({});
+Default.storyName = 'Cases à cocher horizontales';
 Default.args = {
     label: 'Mon label',
     type: 'checkboxes',
+    orientation: 'horizontal',
 };
-export const Toggle = ToggleTemplate.bind({});
-Toggle.args = {
-    label: 'Mon label toggle',
+Default.parameters = {
+    docs: {
+        description: {
+            story: `Groupe de cases à cocher en orientation horizontale. Les options sont disposées côte à côte sur une même ligne. Cas d'usage : choix courts (2-3 options), filtres rapides, sélection inline dans un formulaire compact.`,
+        },
+    },
+};
+export const Vertical = Template.bind({});
+Vertical.storyName = 'Cases à cocher verticales';
+Vertical.args = {
+    label: 'Mon label',
     type: 'checkboxes',
+    orientation: 'vertical',
 };
-Default.parameters = {
+Vertical.parameters = {
+    docs: {
+        description: {
+            story: `Groupe de cases à cocher 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 = 'Cases à cocher avec indice (hint)';
+WithHint.args = {
+    label: 'Mon label',
+    type: 'checkboxes',
+    orientation: 'vertical',
+    hint: "Ceci est un texte d'aide.",
+    showHintIcon: true,
+};
+WithHint.parameters = {
+    docs: {
+        description: {
+            story: `Groupe de cases à cocher 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', 'checkbox-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-checkbox name="checkbox-hint-expandable" value="1">Checkbox 1</spw-checkbox>
+    <spw-checkbox name="checkbox-hint-expandable" value="2">Checkbox 2</spw-checkbox>
+  `;
+    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 = 'Cases à cocher avec indice dépliable';
+WithHintExpandable.parameters = {
     docs: {
         description: {
-            story: `Groupe de checkboxes standard permettant la sélection multiple. Chaque checkbox est indépendante et peut être cochée ou décochée séparément. Cas d'usage : sélection de préférences, acceptation de conditions, filtres multiples, choix d'options dans formulaires.`,
+            story: `Groupe de cases à cocher 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.`,
         },
     },
 };
+export const Toggle = ToggleTemplate.bind({});
+Toggle.storyName = 'Interrupteur (toggle)';
+Toggle.args = {
+    label: 'Mon label toggle',
+    type: 'checkboxes',
+};
 Toggle.parameters = {
     docs: {
         description: {

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