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

package/dist/collection/stories/organisms/spw-drawer/spw-drawer.stories.js

@@ -0,0 +1,627 @@
+let componentsData;
+try {
+    componentsData = require('../../../../dist/components_json.json');
+}
+catch (error) {
+    console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');
+    componentsData = {};
+}
+import { withComponentControls, toKebabCase } from "../../../utils/utils";
+import "../../assets/css/components.css";
+const elementTag = 'spw-drawer';
+const argTypes = withComponentControls(componentsData, { tag: elementTag });
+const meta = {
+    title: 'Organismes/Tiroir (drawer)',
+    component: elementTag,
+    argTypes: Object.assign(Object.assign({}, argTypes), { content: { control: 'text' }, footer: { control: 'text' } }),
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            story: {
+                height: '400px',
+            },
+            description: {
+                component: `
+
+Le composant Drawer est un panneau latéral (ou haut/bas) qui s'affiche par-dessus la page avec une animation de glissement. Il est conçu pour afficher du contenu contextuel sans quitter la page principale.
+
+## Positions disponibles
+
+- **right** : Glisse depuis la droite (défaut)
+- **left** : Glisse depuis la gauche
+- **top** : Glisse depuis le haut
+- **bottom** : Glisse depuis le bas, idéal pour les menus mobiles
+
+## Tailles disponibles
+
+- **small** : 300px de largeur (ou hauteur pour top/bottom)
+- **medium** : 480px — taille par défaut
+- **large** : 680px
+- **full** : Pleine largeur ou hauteur
+
+## Fonctionnalités
+
+- Ouverture via attribut data-drawer-trigger sur n'importe quel élément
+- Fermeture via attribut data-drawer-close, touche Échap, clic sur l'overlay, ou bouton de fermeture intégré
+- Focus trap pour l'accessibilité
+- Animations de slide configurables par position
+- Slot content pour le corps du drawer
+- Slot footer pour une zone d'actions fixe en bas
+- Méthodes programmatiques openDrawer() et closeDrawer()
+- Événements spwDrawerOpen et spwDrawerClose
+        `,
+            },
+        },
+    },
+};
+export default meta;
+const Template = args => {
+    const fragment = new DocumentFragment();
+    const button = document.createElement('spw-button');
+    button.textContent = args.triggerLabel || 'Ouvrir le drawer';
+    const element = document.createElement(elementTag);
+    Object.entries(args).forEach(([key, val]) => {
+        if (key.startsWith('on')) {
+            element.addEventListener(key.substring(2).toLowerCase(), val);
+        }
+        else if (key !== 'content' && key !== 'footer' && key !== 'triggerLabel' && key !== 'openDrawer' && key !== 'closeDrawer') {
+            element.setAttribute(toKebabCase(key), val);
+        }
+    });
+    button.setAttribute('data-drawer-trigger', args.id);
+    if (args.content) {
+        const contentDiv = document.createElement('div');
+        contentDiv.setAttribute('slot', 'content');
+        contentDiv.innerHTML = args.content;
+        element.appendChild(contentDiv);
+    }
+    if (args.footer) {
+        const footerDiv = document.createElement('div');
+        footerDiv.setAttribute('slot', 'footer');
+        footerDiv.innerHTML = args.footer;
+        element.appendChild(footerDiv);
+    }
+    fragment.appendChild(button);
+    fragment.appendChild(element);
+    return fragment;
+};
+// ─── 1. Position right (défaut) ───────────────────────────────────────────────
+export const PositionRight = Template.bind({});
+PositionRight.storyName = 'Position droite (défaut)';
+PositionRight.args = {
+    id: 'drawer-right',
+    caption: 'Drawer — droite',
+    position: 'right',
+    size: 'medium',
+    content: '<p>Contenu du drawer positionné à droite. La prop position="right" est la valeur par défaut.</p>',
+};
+PositionRight.parameters = {
+    docs: {
+        description: {
+            story: `Drawer glissant depuis la droite. C'est le comportement par défaut. Fermeture via le bouton intégré, la touche Échap ou un clic sur l'overlay.
+
+Cas d'usage : panneaux de détails, formulaires d'édition, filtres avancés, navigation secondaire contextuelle.`,
+        },
+        source: {
+            code: `<spw-button data-drawer-trigger="drawer-right">Ouvrir le drawer</spw-button>
+
+<spw-drawer id="drawer-right" caption="Drawer — droite" position="right" size="medium">
+  <div slot="content">
+    <p>Contenu du drawer positionné à droite.</p>
+  </div>
+</spw-drawer>`,
+        },
+    },
+};
+// ─── 2. Position left ─────────────────────────────────────────────────────────
+export const PositionLeft = Template.bind({});
+PositionLeft.storyName = 'Position gauche';
+PositionLeft.args = {
+    id: 'drawer-left',
+    caption: 'Drawer — gauche',
+    position: 'left',
+    size: 'medium',
+    content: '<p>Contenu du drawer positionné à gauche. Prop position="left".</p>',
+};
+PositionLeft.parameters = {
+    docs: {
+        description: {
+            story: `Drawer glissant depuis la gauche. Utile pour les panneaux de navigation ou de filtre ancrés à gauche de l'interface.
+
+Cas d'usage : menu de navigation latérale, arborescence de fichiers, filtres de recherche.`,
+        },
+        source: {
+            code: `<spw-button data-drawer-trigger="drawer-left">Ouvrir le drawer</spw-button>
+
+<spw-drawer id="drawer-left" caption="Drawer — gauche" position="left" size="medium">
+  <div slot="content">
+    <p>Contenu du drawer positionné à gauche.</p>
+  </div>
+</spw-drawer>`,
+        },
+    },
+};
+// ─── 3. Position top ──────────────────────────────────────────────────────────
+export const PositionTop = Template.bind({});
+PositionTop.storyName = 'Position haut';
+PositionTop.args = {
+    id: 'drawer-top',
+    caption: 'Drawer — haut',
+    position: 'top',
+    size: 'medium',
+    content: '<p>Contenu du drawer positionné en haut. Prop position="top". La prop size contrôle la hauteur.</p>',
+};
+PositionTop.parameters = {
+    docs: {
+        description: {
+            story: `Drawer glissant depuis le haut de l'écran. La prop size contrôle la hauteur plutôt que la largeur.
+
+Cas d'usage : barres de recherche étendues, bannières de contexte, notifications importantes, menus de navigation globaux.`,
+        },
+        source: {
+            code: `<spw-button data-drawer-trigger="drawer-top">Ouvrir le drawer</spw-button>
+
+<spw-drawer id="drawer-top" caption="Drawer — haut" position="top" size="medium">
+  <div slot="content">
+    <p>Contenu du drawer positionné en haut.</p>
+  </div>
+</spw-drawer>`,
+        },
+    },
+};
+// ─── 4. Position bottom ───────────────────────────────────────────────────────
+export const PositionBottom = Template.bind({});
+PositionBottom.storyName = 'Position bas';
+PositionBottom.args = {
+    id: 'drawer-bottom',
+    caption: 'Drawer — bas',
+    position: 'bottom',
+    size: 'medium',
+    content: '<p>Contenu du drawer positionné en bas. Prop position="bottom". Utile pour les menus mobiles.</p>',
+};
+PositionBottom.parameters = {
+    docs: {
+        description: {
+            story: `Drawer glissant depuis le bas de l'écran. Particulièrement adapté aux interfaces mobiles pour les menus d'actions et les "bottom sheets".
+
+Cas d'usage : menus d'actions mobiles, sélection d'options, partage de contenu, confirmations sur mobile.`,
+        },
+        source: {
+            code: `<spw-button data-drawer-trigger="drawer-bottom">Ouvrir le drawer</spw-button>
+
+<spw-drawer id="drawer-bottom" caption="Drawer — bas" position="bottom" size="medium">
+  <div slot="content">
+    <p>Contenu du drawer positionné en bas.</p>
+  </div>
+</spw-drawer>`,
+        },
+    },
+};
+// ─── 5a. Taille small ─────────────────────────────────────────────────────────
+export const SizeSmall = Template.bind({});
+SizeSmall.storyName = 'Taille small (300px)';
+SizeSmall.args = {
+    id: 'drawer-small',
+    caption: 'Small (300px)',
+    position: 'right',
+    size: 'small',
+    content: "<p>Taille small — 300px de large. Idéal pour les panneaux d'informations concises.</p>",
+};
+SizeSmall.parameters = {
+    docs: {
+        description: {
+            story: `Drawer en taille small (300px). La plus compacte, elle laisse davantage de place au contenu principal visible derrière l'overlay.
+
+Cas d'usage : panneaux d'aide contextuelle, informations succinctes, actions rapides sans formulaire.`,
+        },
+        source: {
+            code: `<spw-button data-drawer-trigger="drawer-small">Ouvrir le drawer</spw-button>
+
+<spw-drawer id="drawer-small" caption="Small (300px)" position="right" size="small">
+  <div slot="content">
+    <p>Taille small — 300px de large.</p>
+  </div>
+</spw-drawer>`,
+        },
+    },
+};
+// ─── 5b. Taille large ─────────────────────────────────────────────────────────
+export const SizeLarge = Template.bind({});
+SizeLarge.storyName = 'Taille large (680px)';
+SizeLarge.args = {
+    id: 'drawer-large',
+    caption: 'Large (680px)',
+    position: 'right',
+    size: 'large',
+    content: '<p>Taille large — 680px de large. Pour les formulaires complexes ou le contenu riche.</p>',
+};
+SizeLarge.parameters = {
+    docs: {
+        description: {
+            story: `Drawer en taille large (680px). Offre une grande surface pour afficher du contenu riche ou des formulaires multi-champs.
+
+Cas d'usage : formulaires complexes, édition de fiche détaillée, prévisualisation de document, tableaux de bord contextuels.`,
+        },
+        source: {
+            code: `<spw-button data-drawer-trigger="drawer-large">Ouvrir le drawer</spw-button>
+
+<spw-drawer id="drawer-large" caption="Large (680px)" position="right" size="large">
+  <div slot="content">
+    <p>Taille large — 680px de large.</p>
+  </div>
+</spw-drawer>`,
+        },
+    },
+};
+// ─── 5c. Taille full ──────────────────────────────────────────────────────────
+export const SizeFull = Template.bind({});
+SizeFull.storyName = 'Taille full (100%)';
+SizeFull.args = {
+    id: 'drawer-full',
+    caption: 'Full (100%)',
+    position: 'right',
+    size: 'full',
+    content: "<p>Taille full — pleine largeur. Occupe tout l'écran pour une expérience immersive.</p>",
+};
+SizeFull.parameters = {
+    docs: {
+        description: {
+            story: `Drawer en taille full (100% de la largeur). Occupe tout l'écran, proche d'une navigation complète ou d'une page superposée.
+
+Cas d'usage : éditeurs plein écran, galeries d'images, sous-applications contextuelles, flux d'onboarding.`,
+        },
+        source: {
+            code: `<spw-button data-drawer-trigger="drawer-full">Ouvrir le drawer</spw-button>
+
+<spw-drawer id="drawer-full" caption="Full (100%)" position="right" size="full">
+  <div slot="content">
+    <p>Taille full — pleine largeur.</p>
+  </div>
+</spw-drawer>`,
+        },
+    },
+};
+// ─── 6. Sans overlay (modal=false) ────────────────────────────────────────────
+export const NoModal = Template.bind({});
+NoModal.storyName = 'Sans overlay';
+NoModal.args = {
+    id: 'drawer-no-modal',
+    caption: 'Sans overlay',
+    position: 'right',
+    size: 'small',
+    modal: 'false',
+    content: '<p>Prop modal="false" : l\'overlay est absent, la page reste accessible derrière le drawer.</p>',
+};
+NoModal.parameters = {
+    docs: {
+        description: {
+            story: `Drawer sans overlay sombre (modal="false"). L'utilisateur peut continuer à interagir avec le contenu principal pendant que le drawer est ouvert. Fermeture via Échap ou le bouton intégré.
+
+Cas d'usage : panneaux d'aide ou documentation permanents, filtres qui s'appliquent en temps réel, aperçu de contenu non bloquant.`,
+        },
+        source: {
+            code: `<spw-button data-drawer-trigger="drawer-no-modal">Ouvrir sans overlay</spw-button>
+
+<spw-drawer id="drawer-no-modal" caption="Sans overlay" position="right" size="small" modal="false">
+  <div slot="content">
+    <p>L'overlay est absent, la page reste accessible.</p>
+  </div>
+</spw-drawer>`,
+        },
+    },
+};
+// ─── 7. Fermeture overlay désactivée ──────────────────────────────────────────
+export const NoOverlayClose = Template.bind({});
+NoOverlayClose.storyName = 'Fermeture overlay désactivée';
+NoOverlayClose.args = {
+    id: 'drawer-no-overlay-close',
+    caption: 'Fermeture verrouillée',
+    position: 'right',
+    size: 'medium',
+    closeOnOverlayClick: 'false',
+    content: '<p>Cliquer sur l\'overlay ne ferme <strong>pas</strong> ce drawer. Utilisez le bouton "Fermer" ou appuyez sur Échap.</p>',
+};
+NoOverlayClose.parameters = {
+    docs: {
+        description: {
+            story: `Drawer avec fermeture par overlay désactivée (close-on-overlay-click="false"). Seuls le bouton de fermeture et la touche Échap permettent de fermer le drawer.
+
+Cas d'usage : formulaires critiques où une fermeture accidentelle causerait une perte de données, flux multi-étapes, processus de paiement.`,
+        },
+        source: {
+            code: `<spw-button data-drawer-trigger="drawer-no-overlay-close">Ouvrir</spw-button>
+
+<spw-drawer id="drawer-no-overlay-close" caption="Fermeture verrouillée" position="right" close-on-overlay-click="false">
+  <div slot="content">
+    <p>Cliquer sur l'overlay ne ferme pas ce drawer.</p>
+  </div>
+</spw-drawer>`,
+        },
+    },
+};
+// ─── 8. Sans bouton de fermeture ──────────────────────────────────────────────
+export const NoCloseButton = Template.bind({});
+NoCloseButton.storyName = 'Sans bouton de fermeture';
+NoCloseButton.args = {
+    id: 'drawer-no-close-btn',
+    caption: 'Sans bouton de fermeture',
+    position: 'right',
+    size: 'medium',
+    showCloseButton: 'false',
+    content: `<p>Le bouton "Fermer" est masqué via show-close-button="false".</p>
+<spw-button data-drawer-close="drawer-no-close-btn" variant="secondary">Fermer via data-drawer-close</spw-button>`,
+};
+NoCloseButton.parameters = {
+    docs: {
+        description: {
+            story: `Drawer sans bouton de fermeture dans le header (show-close-button="false"). La fermeture est déléguée à un élément interne avec l'attribut data-drawer-close, à l'overlay, ou à la touche Échap.
+
+Cas d'usage : interfaces avec boutons d'action dédiés ("Valider" / "Annuler"), drawers où l'action est obligatoire avant fermeture.`,
+        },
+        source: {
+            code: `<spw-button data-drawer-trigger="drawer-no-close-btn">Ouvrir</spw-button>
+
+<spw-drawer id="drawer-no-close-btn" caption="Sans bouton de fermeture" position="right" show-close-button="false">
+  <div slot="content">
+    <p>Le bouton "Fermer" est masqué.</p>
+    <spw-button data-drawer-close="drawer-no-close-btn" variant="secondary">Fermer via data-drawer-close</spw-button>
+  </div>
+</spw-drawer>`,
+        },
+    },
+};
+// ─── 9. Sans titre ────────────────────────────────────────────────────────────
+export const NoCaption = Template.bind({});
+NoCaption.storyName = 'Sans titre';
+NoCaption.args = {
+    id: 'drawer-no-caption',
+    caption: 'Titre masqué',
+    position: 'right',
+    size: 'medium',
+    showCaption: 'false',
+    content: '<p>La prop show-caption="false" masque le titre. Le bouton de fermeture reste visible.</p>',
+};
+NoCaption.parameters = {
+    docs: {
+        description: {
+            story: `Drawer sans titre affiché dans le header (show-caption="false"). Le bouton de fermeture reste présent. Le titre reste accessible pour les lecteurs d'écran via l'attribut aria-label du panneau.
+
+Cas d'usage : drawers avec un contenu visuel évident, interfaces épurées, panneaux où le contexte est suffisamment clair sans titre.`,
+        },
+        source: {
+            code: `<spw-button data-drawer-trigger="drawer-no-caption">Ouvrir</spw-button>
+
+<spw-drawer id="drawer-no-caption" caption="Titre masqué" position="right" show-caption="false">
+  <div slot="content">
+    <p>Le titre est masqué visuellement mais reste accessible aux lecteurs d'écran.</p>
+  </div>
+</spw-drawer>`,
+        },
+    },
+};
+// ─── 10. Avec footer ──────────────────────────────────────────────────────────
+export const WithFooter = Template.bind({});
+WithFooter.storyName = 'Avec footer';
+WithFooter.args = {
+    id: 'drawer-footer',
+    caption: 'Drawer avec footer',
+    position: 'right',
+    size: 'medium',
+    content: `<div style="display:flex;flex-direction:column;gap:16px">
+  <p>Le contenu principal est scrollable. Le footer reste fixe en bas.</p>
+  <spw-text-field label="Nom"></spw-text-field>
+  <spw-text-field label="Prénom"></spw-text-field>
+  <spw-text-field label="Email" type="email"></spw-text-field>
+</div>`,
+    footer: `<spw-button>Confirmer</spw-button>
+<spw-button data-drawer-close="drawer-footer" variant="secondary">Annuler</spw-button>`,
+};
+WithFooter.parameters = {
+    docs: {
+        description: {
+            story: `Drawer avec un slot footer contenant des boutons d'action. Le footer reste fixe en bas pendant que le contenu principal reste scrollable. Une bordure sépare visuellement le footer du corps.
+
+Cas d'usage : formulaires avec validation, panneaux d'édition avec "Enregistrer" / "Annuler", assistants étape par étape.`,
+        },
+        source: {
+            code: `<spw-button data-drawer-trigger="drawer-footer">Ouvrir avec footer</spw-button>
+
+<spw-drawer id="drawer-footer" caption="Drawer avec footer" position="right" size="medium">
+  <div slot="content">
+    <spw-text-field label="Nom"></spw-text-field>
+    <spw-text-field label="Prénom"></spw-text-field>
+    <spw-text-field label="Email" type="email"></spw-text-field>
+  </div>
+  <div slot="footer">
+    <spw-button>Confirmer</spw-button>
+    <spw-button data-drawer-close="drawer-footer" variant="secondary">Annuler</spw-button>
+  </div>
+</spw-drawer>`,
+        },
+    },
+};
+// ─── 11. Contenu long (scroll) ────────────────────────────────────────────────
+export const ScrollContent = Template.bind({});
+ScrollContent.storyName = 'Contenu long (scroll)';
+ScrollContent.args = {
+    id: 'drawer-scroll',
+    caption: 'Contenu long',
+    position: 'right',
+    size: 'medium',
+    content: `<div style="display:flex;flex-direction:column;gap:16px">
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+  <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.</p>
+  <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
+  <p>Ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit.</p>
+  <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.</p>
+  <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti.</p>
+</div>`,
+    footer: `<spw-button data-drawer-close="drawer-scroll" variant="secondary">Fermer</spw-button>`,
+};
+ScrollContent.parameters = {
+    docs: {
+        description: {
+            story: `Drawer avec du contenu long qui nécessite un défilement. Le corps du drawer est scrollable tandis que le header et le footer restent fixes en haut et en bas.
+
+Cas d'usage : listes de résultats, historiques, CGU ou conditions à accepter, documentation longue affichée contextuellement.`,
+        },
+        source: {
+            code: `<spw-button data-drawer-trigger="drawer-scroll">Ouvrir</spw-button>
+
+<spw-drawer id="drawer-scroll" caption="Contenu long" position="right" size="medium">
+  <div slot="content">
+    <!-- Contenu long ici -->
+  </div>
+  <div slot="footer">
+    <spw-button data-drawer-close="drawer-scroll" variant="secondary">Fermer</spw-button>
+  </div>
+</spw-drawer>`,
+        },
+    },
+};
+// ─── 12. API programmatique ───────────────────────────────────────────────────
+const ProgrammaticTemplate = args => {
+    const fragment = new DocumentFragment();
+    const wrapper = document.createElement('div');
+    wrapper.style.display = 'flex';
+    wrapper.style.flexDirection = 'column';
+    wrapper.style.gap = '16px';
+    const buttonsRow = document.createElement('div');
+    buttonsRow.style.display = 'flex';
+    buttonsRow.style.gap = '8px';
+    const btnOpen = document.createElement('spw-button');
+    btnOpen.textContent = 'openDrawer()';
+    const btnClose = document.createElement('spw-button');
+    btnClose.setAttribute('variant', 'secondary');
+    btnClose.textContent = 'closeDrawer()';
+    const resultBox = document.createElement('div');
+    resultBox.style.cssText = 'padding:10px 14px;background:#e7f3ff;border-left:3px solid #0066cc;border-radius:4px;font-size:0.875rem;color:#004080;';
+    resultBox.textContent = 'Aucun événement.';
+    const element = document.createElement(elementTag);
+    element.setAttribute('id', args.id);
+    element.setAttribute('caption', args.caption || 'Contrôle programmatique');
+    element.setAttribute('position', 'right');
+    element.setAttribute('size', 'medium');
+    const contentDiv = document.createElement('div');
+    contentDiv.setAttribute('slot', 'content');
+    contentDiv.style.display = 'flex';
+    contentDiv.style.flexDirection = 'column';
+    contentDiv.style.gap = '16px';
+    contentDiv.innerHTML = `<p>Ce drawer est ouvert et fermé via l'API JavaScript (openDrawer() / closeDrawer()).</p>`;
+    const btnCloseInside = document.createElement('spw-button');
+    btnCloseInside.setAttribute('variant', 'secondary');
+    btnCloseInside.textContent = "closeDrawer() depuis l'intérieur";
+    contentDiv.appendChild(btnCloseInside);
+    element.appendChild(contentDiv);
+    customElements.whenDefined('spw-drawer').then(() => {
+        btnOpen.addEventListener('click', () => element.openDrawer());
+        btnClose.addEventListener('click', () => element.closeDrawer());
+        btnCloseInside.addEventListener('click', () => element.closeDrawer());
+        element.addEventListener('spwDrawerOpen', () => {
+            resultBox.innerHTML = 'Event : <strong>spwDrawerOpen</strong> reçu.';
+        });
+        element.addEventListener('spwDrawerClose', () => {
+            resultBox.innerHTML = 'Event : <strong>spwDrawerClose</strong> reçu.';
+        });
+    });
+    buttonsRow.appendChild(btnOpen);
+    buttonsRow.appendChild(btnClose);
+    wrapper.appendChild(buttonsRow);
+    wrapper.appendChild(resultBox);
+    wrapper.appendChild(element);
+    fragment.appendChild(wrapper);
+    return fragment;
+};
+export const Programmatic = ProgrammaticTemplate.bind({});
+Programmatic.storyName = 'API programmatique';
+Programmatic.args = {
+    id: 'drawer-api',
+    caption: 'Contrôle programmatique',
+};
+Programmatic.parameters = {
+    docs: {
+        description: {
+            story: `Contrôle du drawer via les méthodes JavaScript openDrawer() et closeDrawer(). Les événements spwDrawerOpen et spwDrawerClose sont émis à chaque changement d'état et affichés dans la zone de résultat.
+
+Cas d'usage : ouverture conditionnelle (après validation d'un formulaire), intégration dans des flux applicatifs complexes, déclenchement depuis un raccourci clavier ou une autre interaction.`,
+        },
+        source: {
+            code: `<spw-button id="btn-open">openDrawer()</spw-button>
+<spw-button id="btn-close" variant="secondary">closeDrawer()</spw-button>
+
+<spw-drawer id="drawer-api" caption="Contrôle programmatique" position="right" size="medium">
+  <div slot="content">
+    <p>Contrôlé via openDrawer() / closeDrawer().</p>
+  </div>
+</spw-drawer>
+
+<script>
+  customElements.whenDefined('spw-drawer').then(() => {
+    const drawer = document.getElementById('drawer-api');
+    document.getElementById('btn-open').addEventListener('click', () => drawer.openDrawer());
+    document.getElementById('btn-close').addEventListener('click', () => drawer.closeDrawer());
+    drawer.addEventListener('spwDrawerOpen', () => console.log('opened'));
+    drawer.addEventListener('spwDrawerClose', () => console.log('closed'));
+  });
+</script>`,
+        },
+    },
+};
+// ─── 13. Ouvert au chargement ─────────────────────────────────────────────────
+const OpenedTemplate = args => {
+    const fragment = new DocumentFragment();
+    const btnReopen = document.createElement('spw-button');
+    btnReopen.textContent = 'Ré-ouvrir';
+    const element = document.createElement(elementTag);
+    element.setAttribute('id', args.id);
+    element.setAttribute('caption', args.caption || 'Ouvert au chargement');
+    element.setAttribute('position', 'right');
+    element.setAttribute('size', 'small');
+    const contentDiv = document.createElement('div');
+    contentDiv.setAttribute('slot', 'content');
+    contentDiv.innerHTML = '<p>Ce drawer était ouvert dès le chargement grâce à opened="true".</p>';
+    element.appendChild(contentDiv);
+    customElements.whenDefined('spw-drawer').then(() => {
+        element.opened = true;
+        btnReopen.addEventListener('click', () => element.openDrawer());
+    });
+    fragment.appendChild(btnReopen);
+    fragment.appendChild(element);
+    return fragment;
+};
+export const InitiallyOpened = OpenedTemplate.bind({});
+InitiallyOpened.storyName = 'Ouvert au chargement';
+InitiallyOpened.args = {
+    id: 'drawer-initial',
+    caption: 'Ouvert au chargement',
+};
+InitiallyOpened.parameters = {
+    docs: {
+        description: {
+            story: `Drawer ouvert dès le rendu initial via la prop opened="true" (ou en définissant element.opened = true après customElements.whenDefined). Un bouton permet de le ré-ouvrir après fermeture.
+
+Cas d'usage : panneau d'accueil ou d'onboarding affiché à la première visite, guide contextuel au chargement d'une page complexe, sidebar ouverte par défaut dans les layouts desktop.`,
+        },
+        source: {
+            code: `<spw-button id="btn-reopen">Ré-ouvrir</spw-button>
+
+<spw-drawer id="drawer-initial" caption="Ouvert au chargement" position="right" size="small">
+  <div slot="content">
+    <p>Ce drawer était ouvert dès le chargement.</p>
+  </div>
+</spw-drawer>
+
+<script>
+  customElements.whenDefined('spw-drawer').then(() => {
+    const drawer = document.getElementById('drawer-initial');
+    drawer.opened = true;
+    document.getElementById('btn-reopen').addEventListener('click', () => drawer.openDrawer());
+  });
+</script>`,
+        },
+    },
+};

package/dist/collection/stories/organisms/spw-footer/spw-footer.stories.js

@@ -143,6 +143,7 @@ const TemplateLight = args => {
     return element;
 };
 export const Default = Template.bind({});
+Default.storyName = 'Pied de page complet';
 Default.args = {
     colTitle1: 'Accès rapides',
     colTitle2: 'Liens utiles',
@@ -165,6 +166,7 @@ Cas d'usage typique : footer principal d'un site avec accès rapides, liens util
     },
 };
 export const Light = TemplateLight.bind({});
+Light.storyName = 'Pied de page léger';
 Light.args = {
     siteTitle: 'Titre du site',
 };
@@ -198,6 +200,7 @@ const TemplateWithSocials = args => {
     return wrapper;
 };
 export const WithSocials = TemplateWithSocials.bind({});
+WithSocials.storyName = 'Pied de page avec réseaux sociaux';
 WithSocials.args = {
     socialsMainTitle: 'Restez connecté',
     colTitle1: 'Accès rapides',

package/dist/collection/stories/organisms/spw-grid/spw-grid.stories.js

@@ -403,6 +403,7 @@ const TemplateCards = args => {
     return element;
 };
 export const Default = TemplateBasic.bind({});
+Default.storyName = 'Grille de base (3 colonnes)';
 Default.args = {
     colsDesktop: 3,
     colsTablet: 2,