@spw-ds/spw-stencil-library 1.10.2 → 1.12.0

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

@@ -0,0 +1,623 @@
+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 } from "../../../utils/utils";
+import "../../assets/css/components.css";
+const elementTag = 'spw-lightbox';
+const argTypes = withComponentControls(componentsData, { tag: elementTag });
+const meta = {
+    title: 'Organismes/Galerie photo (lightbox)',
+    component: elementTag,
+    argTypes,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: `
+<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
+
+Le composant Lightbox est une visionneuse d'images avec galerie, navigation, miniatures, légendes en superposition et API programmatique.
+
+## Fonctionnalités
+
+- Navigation au clavier (flèches gauche/droite, Escape pour fermer)
+- Swipe mobile pour passer d'une image à l'autre
+- Galerie de miniatures cliquables en bas de l'écran
+- Légendes avec titre, texte et copyright par image (props caption-title, caption-text)
+- Copyright superposé avec icône et lien optionnel (props copyright-text, copyright-href, copyright-icon)
+- Fermeture au clic sur le backdrop (configurable via close-on-backdrop-click)
+- Hover avec loupe activé par défaut sur spw-lightbox-item (désactivable via is-hover="false")
+- Gestion du focus et piège de focus pour l'accessibilité
+- Animations d'ouverture/fermeture (fade)
+- Méthodes programmatiques open(index) et close()
+- Événements spwLightboxOpen et spwLightboxClose
+- Slot personnalisable sur spw-lightbox-item pour utiliser n'importe quel déclencheur
+        `,
+            },
+        },
+    },
+};
+export default meta;
+// ─── Story 1 : Galerie mosaïque ────────────────────────────────────────────
+export const GalerieMosaique = () => {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = /* HTML */ `
+    <spw-lightbox>
+      <spw-grid gap="small" cols-mobile="2" cols-tablet="3" cols-desktop="3">
+        <spw-grid-item col-span-mobile="2" col-span-tablet="2" col-span-desktop="2" row-span-desktop="2">
+          <spw-lightbox-item
+            src="https://picsum.photos/seed/spw1/1200/800"
+            alt="Paysage 1"
+            caption-title="Ardennes belges"
+            caption-text="Vue sur les forêts et vallées ardennaises"
+          ></spw-lightbox-item>
+        </spw-grid-item>
+        <spw-grid-item>
+          <spw-lightbox-item src="https://picsum.photos/seed/spw2/1200/800" alt="Paysage 2" caption-title="La Meuse à Namur"></spw-lightbox-item>
+        </spw-grid-item>
+        <spw-grid-item>
+          <spw-lightbox-item src="https://picsum.photos/seed/spw3/1200/800" alt="Paysage 3" caption-title="Forêt de Saint-Hubert"></spw-lightbox-item>
+        </spw-grid-item>
+        <spw-grid-item>
+          <spw-lightbox-item src="https://picsum.photos/seed/spw4/1200/800" alt="Paysage 4" caption-title="La citadelle de Liège"></spw-lightbox-item>
+        </spw-grid-item>
+        <spw-grid-item>
+          <spw-lightbox-item src="https://picsum.photos/seed/spw5/1200/800" alt="Paysage 5" caption-title="Le Grand-Place de Mons"></spw-lightbox-item>
+        </spw-grid-item>
+        <spw-grid-item>
+          <spw-lightbox-item src="https://picsum.photos/seed/spw6/1200/800" alt="Paysage 6" caption-title="Le château de Bouillon"></spw-lightbox-item>
+        </spw-grid-item>
+      </spw-grid>
+    </spw-lightbox>
+  `;
+    return wrapper;
+};
+GalerieMosaique.parameters = {
+    docs: {
+        description: {
+            story: `Grille responsive avec item hero en col-span + row-span. Navigation clavier (flèches), fermeture via Échap ou backdrop. Cas d'usage principal pour une galerie photo éditoriale.`,
+        },
+        source: {
+            code: /* HTML */ `
+        <spw-lightbox>
+          <spw-grid gap="small" cols-mobile="2" cols-tablet="3" cols-desktop="3">
+            <spw-grid-item col-span-mobile="2" col-span-tablet="2" col-span-desktop="2" row-span-desktop="2">
+              <spw-lightbox-item src="..." alt="..." caption-title="..." caption-text="..."></spw-lightbox-item>
+            </spw-grid-item>
+            <spw-grid-item>
+              <spw-lightbox-item src="..." alt="..." caption-title="..."></spw-lightbox-item>
+            </spw-grid-item>
+            <!-- ... -->
+          </spw-grid>
+        </spw-lightbox>
+      `,
+        },
+    },
+};
+// ─── Story 2 : Caption ─────────────────────────────────────────────────────
+export const Caption = () => {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = /* HTML */ `
+    <spw-lightbox>
+      <spw-grid gap="small" cols-mobile="1" cols-tablet="3" cols-desktop="3">
+        <spw-grid-item>
+          <spw-lightbox-item src="https://picsum.photos/seed/cap1/800/600" alt="Titre seul" caption-title="Titre seul"></spw-lightbox-item>
+        </spw-grid-item>
+        <spw-grid-item>
+          <spw-lightbox-item
+            src="https://picsum.photos/seed/cap2/800/600"
+            alt="Texte seul"
+            caption-text="Un texte descriptif sans titre, idéal pour les légendes courtes."
+          ></spw-lightbox-item>
+        </spw-grid-item>
+        <spw-grid-item>
+          <spw-lightbox-item
+            src="https://picsum.photos/seed/cap3/800/600"
+            alt="Titre et texte"
+            caption-title="Titre et texte"
+            caption-text="Le titre est en gras, le texte en dessous est plus léger."
+          ></spw-lightbox-item>
+        </spw-grid-item>
+      </spw-grid>
+    </spw-lightbox>
+  `;
+    return wrapper;
+};
+Caption.parameters = {
+    docs: {
+        description: {
+            story: `Les props caption-title et caption-text sont indépendantes et optionnelles. La légende s'affiche en superposition de l'image (bas, gradient transparent → noir). De gauche à droite : titre seul, texte seul, titre + texte.`,
+        },
+        source: {
+            code: /* HTML */ `
+        <spw-lightbox>
+          <spw-grid gap="small" cols-mobile="1" cols-tablet="3" cols-desktop="3">
+            <spw-grid-item>
+              <spw-lightbox-item src="..." alt="..." caption-title="Titre seul"></spw-lightbox-item>
+            </spw-grid-item>
+            <spw-grid-item>
+              <spw-lightbox-item src="..." alt="..." caption-text="Texte descriptif sans titre."></spw-lightbox-item>
+            </spw-grid-item>
+            <spw-grid-item>
+              <spw-lightbox-item src="..." alt="..." caption-title="Titre et texte" caption-text="Le titre est en gras, le texte en dessous est plus léger."></spw-lightbox-item>
+            </spw-grid-item>
+          </spw-grid>
+        </spw-lightbox>
+      `,
+        },
+    },
+};
+// ─── Story 3 : Grille uniforme ─────────────────────────────────────────────
+export const GrilleUniforme = () => {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = /* HTML */ `
+    <spw-lightbox>
+      <spw-grid gap="small" cols-mobile="2" cols-tablet="3" cols-desktop="4">
+        <spw-grid-item><spw-lightbox-item src="https://picsum.photos/seed/sq1/600/600" alt="Photo 1"></spw-lightbox-item></spw-grid-item>
+        <spw-grid-item><spw-lightbox-item src="https://picsum.photos/seed/sq2/600/600" alt="Photo 2"></spw-lightbox-item></spw-grid-item>
+        <spw-grid-item><spw-lightbox-item src="https://picsum.photos/seed/sq3/600/600" alt="Photo 3"></spw-lightbox-item></spw-grid-item>
+        <spw-grid-item><spw-lightbox-item src="https://picsum.photos/seed/sq4/600/600" alt="Photo 4"></spw-lightbox-item></spw-grid-item>
+        <spw-grid-item><spw-lightbox-item src="https://picsum.photos/seed/sq5/600/600" alt="Photo 5"></spw-lightbox-item></spw-grid-item>
+        <spw-grid-item><spw-lightbox-item src="https://picsum.photos/seed/sq6/600/600" alt="Photo 6"></spw-lightbox-item></spw-grid-item>
+        <spw-grid-item><spw-lightbox-item src="https://picsum.photos/seed/sq7/600/600" alt="Photo 7"></spw-lightbox-item></spw-grid-item>
+        <spw-grid-item><spw-lightbox-item src="https://picsum.photos/seed/sq8/600/600" alt="Photo 8"></spw-lightbox-item></spw-grid-item>
+      </spw-grid>
+    </spw-lightbox>
+  `;
+    return wrapper;
+};
+GrilleUniforme.parameters = {
+    docs: {
+        description: {
+            story: `Grille 4 colonnes desktop, sans caption. Cas d'usage : portfolio photo, galerie de produits.`,
+        },
+        source: {
+            code: /* HTML */ `
+        <spw-lightbox>
+          <spw-grid gap="small" cols-mobile="2" cols-tablet="3" cols-desktop="4">
+            <spw-grid-item><spw-lightbox-item src="..." alt="..."></spw-lightbox-item></spw-grid-item>
+            <!-- ... -->
+          </spw-grid>
+        </spw-lightbox>
+      `,
+        },
+    },
+};
+// ─── Story 4 : Image unique ────────────────────────────────────────────────
+export const ImageUnique = () => {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = /* HTML */ `
+    <spw-lightbox>
+      <spw-lightbox-item
+        src="https://picsum.photos/seed/single/1200/800"
+        alt="Une belle photo"
+        caption-title="Photo unique"
+        caption-text="Pas de navigation ni de miniatures avec un seul item."
+        style="max-width: 400px; display: block"
+      ></spw-lightbox-item>
+    </spw-lightbox>
+  `;
+    return wrapper;
+};
+ImageUnique.parameters = {
+    docs: {
+        description: {
+            story: `Un seul spw-lightbox-item — les boutons de navigation et les miniatures sont automatiquement masqués. Cas d'usage : agrandissement d'une image unique dans un article ou une fiche produit.`,
+        },
+        source: {
+            code: /* HTML */ `
+        <spw-lightbox>
+          <spw-lightbox-item
+            src="..."
+            alt="..."
+            caption-title="Photo unique"
+            caption-text="Pas de navigation ni de miniatures avec un seul item."
+            style="max-width: 400px; display: block"
+          ></spw-lightbox-item>
+        </spw-lightbox>
+      `,
+        },
+    },
+};
+// ─── Story 5 : Sans thumbnails ─────────────────────────────────────────────
+export const SansThumbnails = () => {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = /* HTML */ `
+    <spw-lightbox show-thumbnails="false">
+      <spw-grid gap="small" cols-mobile="2" cols-tablet="3" cols-desktop="3">
+        <spw-grid-item>
+          <spw-lightbox-item src="https://picsum.photos/seed/nth1/1200/800" alt="Photo A" caption-title="Photo A"></spw-lightbox-item>
+        </spw-grid-item>
+        <spw-grid-item>
+          <spw-lightbox-item src="https://picsum.photos/seed/nth2/1200/800" alt="Photo B" caption-title="Photo B"></spw-lightbox-item>
+        </spw-grid-item>
+        <spw-grid-item>
+          <spw-lightbox-item src="https://picsum.photos/seed/nth3/1200/800" alt="Photo C" caption-title="Photo C"></spw-lightbox-item>
+        </spw-grid-item>
+      </spw-grid>
+    </spw-lightbox>
+  `;
+    return wrapper;
+};
+SansThumbnails.parameters = {
+    docs: {
+        description: {
+            story: `La barre de miniatures est masquée via show-thumbnails="false". La navigation (flèches, clavier, swipe) reste fonctionnelle. Cas d'usage : alléger l'interface ou galeries avec peu d'images.`,
+        },
+        source: {
+            code: /* HTML */ `
+        <spw-lightbox show-thumbnails="false">
+          <spw-grid gap="small" cols-mobile="2" cols-tablet="3" cols-desktop="3">
+            <spw-grid-item>
+              <spw-lightbox-item src="..." alt="..." caption-title="..."></spw-lightbox-item>
+            </spw-grid-item>
+            <!-- ... -->
+          </spw-grid>
+        </spw-lightbox>
+      `,
+        },
+    },
+};
+// ─── Story 6 : Sans fermeture au clic backdrop ─────────────────────────────
+export const SansBackdropClose = () => {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = /* HTML */ `
+    <spw-lightbox close-on-backdrop-click="false">
+      <spw-grid gap="small" cols-mobile="2" cols-tablet="3" cols-desktop="3">
+        <spw-grid-item>
+          <spw-lightbox-item src="https://picsum.photos/seed/nb1/1200/800" alt="Photo A"></spw-lightbox-item>
+        </spw-grid-item>
+        <spw-grid-item>
+          <spw-lightbox-item src="https://picsum.photos/seed/nb2/1200/800" alt="Photo B"></spw-lightbox-item>
+        </spw-grid-item>
+        <spw-grid-item>
+          <spw-lightbox-item src="https://picsum.photos/seed/nb3/1200/800" alt="Photo C"></spw-lightbox-item>
+        </spw-grid-item>
+      </spw-grid>
+    </spw-lightbox>
+  `;
+    return wrapper;
+};
+SansBackdropClose.parameters = {
+    docs: {
+        description: {
+            story: `Avec close-on-backdrop-click="false", seuls la croix et la touche Échap permettent de fermer la lightbox. Cas d'usage : galeries où l'on veut éviter les fermetures accidentelles.`,
+        },
+        source: {
+            code: /* HTML */ `
+        <spw-lightbox close-on-backdrop-click="false">
+          <!-- ... -->
+        </spw-lightbox>
+      `,
+        },
+    },
+};
+// ─── Story 7 : Textes aria customisés ─────────────────────────────────────
+export const TextesAriaCustomises = () => {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = /* HTML */ `
+    <spw-lightbox
+      text-dialog-label="Image gallery"
+      text-previous="Previous image"
+      text-next="Next image"
+      text-thumbnails-label="Thumbnails"
+      text-thumbnail-item="Thumbnail {index}"
+      close-button-text="Close"
+    >
+      <spw-grid gap="small" cols-mobile="2" cols-tablet="3" cols-desktop="3">
+        <spw-grid-item>
+          <spw-lightbox-item
+            src="https://picsum.photos/seed/aria1/1200/800"
+            alt="Aerial view of Namur"
+            caption-title="Aerial view of Namur"
+            caption-text="Wallonia, Belgium"
+            text-open-image="Open image"
+          ></spw-lightbox-item>
+        </spw-grid-item>
+        <spw-grid-item>
+          <spw-lightbox-item
+            src="https://picsum.photos/seed/aria2/1200/800"
+            alt="Walloon forest"
+            caption-title="Walloon forest"
+            caption-text="Autumn colours"
+            text-open-image="Open image"
+          ></spw-lightbox-item>
+        </spw-grid-item>
+        <spw-grid-item>
+          <spw-lightbox-item
+            src="https://picsum.photos/seed/aria3/1200/800"
+            alt="Bouillon castle"
+            caption-title="Bouillon castle"
+            caption-text="Province of Luxembourg"
+            text-open-image="Open image"
+          ></spw-lightbox-item>
+        </spw-grid-item>
+      </spw-grid>
+    </spw-lightbox>
+  `;
+    return wrapper;
+};
+TextesAriaCustomises.parameters = {
+    docs: {
+        description: {
+            story: `Toutes les chaînes accessibles sont surchargeables via props : text-dialog-label, text-previous, text-next, text-thumbnails-label, text-thumbnail-item (placeholder {index}), close-button-text sur la lightbox — text-open-image sur le lightbox-item. Ici toutes les chaînes sont en anglais.`,
+        },
+        source: {
+            code: /* HTML */ `
+        <spw-lightbox
+          text-dialog-label="Image gallery"
+          text-previous="Previous image"
+          text-next="Next image"
+          text-thumbnails-label="Thumbnails"
+          text-thumbnail-item="Thumbnail {index}"
+          close-button-text="Close"
+        >
+          <spw-grid gap="small" cols-mobile="2" cols-tablet="3" cols-desktop="3">
+            <spw-grid-item>
+              <spw-lightbox-item src="..." alt="..." text-open-image="Open image"></spw-lightbox-item>
+            </spw-grid-item>
+          </spw-grid>
+        </spw-lightbox>
+      `,
+        },
+    },
+};
+// ─── Story 8 : API programmatique ──────────────────────────────────────────
+export const APIProgrammatique = () => {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = /* HTML */ `
+    <spw-lightbox id="lightbox-api">
+      <spw-grid gap="small" cols-mobile="3" cols-tablet="3" cols-desktop="3">
+        <spw-grid-item>
+          <spw-lightbox-item src="https://picsum.photos/seed/api1/1200/800" alt="Image 1" caption-title="Image 1"></spw-lightbox-item>
+        </spw-grid-item>
+        <spw-grid-item>
+          <spw-lightbox-item src="https://picsum.photos/seed/api2/1200/800" alt="Image 2" caption-title="Image 2"></spw-lightbox-item>
+        </spw-grid-item>
+        <spw-grid-item>
+          <spw-lightbox-item src="https://picsum.photos/seed/api3/1200/800" alt="Image 3" caption-title="Image 3"></spw-lightbox-item>
+        </spw-grid-item>
+      </spw-grid>
+    </spw-lightbox>
+    <div style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;">
+      <spw-button size="small" variant="secondary" id="btn-open-0">open(0) — Image 1</spw-button>
+      <spw-button size="small" variant="secondary" id="btn-open-1">open(1) — Image 2</spw-button>
+      <spw-button size="small" variant="secondary" id="btn-open-2">open(2) — Image 3</spw-button>
+      <spw-button size="small" variant="secondary" id="btn-close">close()</spw-button>
+    </div>
+    <div
+      id="result-api"
+      style="margin-top:12px;padding:10px 14px;background:#e7f3ff;border-left:3px solid #0066cc;border-radius:4px;font-size:0.875rem;color:#004080;min-height:38px;"
+    >
+      —
+    </div>
+  `;
+    customElements.whenDefined('spw-lightbox').then(() => {
+        const lightboxApi = wrapper.querySelector('#lightbox-api');
+        const resultApi = wrapper.querySelector('#result-api');
+        wrapper.querySelector('#btn-open-0').addEventListener('click', () => lightboxApi.open(0));
+        wrapper.querySelector('#btn-open-1').addEventListener('click', () => lightboxApi.open(1));
+        wrapper.querySelector('#btn-open-2').addEventListener('click', () => lightboxApi.open(2));
+        wrapper.querySelector('#btn-close').addEventListener('click', () => lightboxApi.close());
+        lightboxApi.addEventListener('spwLightboxOpen', (e) => {
+            resultApi.innerHTML = `<code>spwLightboxOpen</code> — index : <strong>${e.detail.index}</strong>`;
+        });
+        lightboxApi.addEventListener('spwLightboxClose', () => {
+            resultApi.innerHTML = `<code>spwLightboxClose</code> — lightbox fermée`;
+        });
+    });
+    return wrapper;
+};
+APIProgrammatique.parameters = {
+    docs: {
+        description: {
+            story: `Ouverture et fermeture via les méthodes publiques open(index) et close(). Écoute des événements spwLightboxOpen (avec detail.index) et spwLightboxClose. La zone bleue affiche l'événement reçu.`,
+        },
+        source: {
+            code: /* HTML */ `
+        <spw-lightbox id="lightbox-api">
+          <!-- ... -->
+        </spw-lightbox>
+
+        <spw-button id="btn-open-0">open(0)</spw-button>
+        <spw-button id="btn-close">close()</spw-button>
+
+        <script>
+          const lb = document.getElementById('lightbox-api');
+          document.getElementById('btn-open-0').addEventListener('click', () => lb.open(0));
+          document.getElementById('btn-close').addEventListener('click', () => lb.close());
+          lb.addEventListener('spwLightboxOpen', e => console.log('opened at', e.detail.index));
+          lb.addEventListener('spwLightboxClose', () => console.log('closed'));
+        </script>
+      `,
+        },
+    },
+};
+// ─── Story 9 : Copyright ───────────────────────────────────────────────────
+export const Copyright = () => {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = /* HTML */ `
+    <spw-lightbox>
+      <spw-grid gap="small" cols-mobile="1" cols-tablet="3" cols-desktop="3">
+        <spw-grid-item>
+          <spw-lightbox-item
+            src="https://picsum.photos/seed/cr1/1200/800"
+            alt="Photo avec copyright texte seul"
+            caption-title="Copyright texte seul"
+            copyright-text="SPW — Tous droits réservés"
+          ></spw-lightbox-item>
+        </spw-grid-item>
+        <spw-grid-item>
+          <spw-lightbox-item
+            src="https://picsum.photos/seed/cr2/1200/800"
+            alt="Photo avec copyright lié"
+            caption-title="Copyright avec lien"
+            copyright-text="Unsplash"
+            copyright-href="https://unsplash.com"
+            copyright-target="_blank"
+          ></spw-lightbox-item>
+        </spw-grid-item>
+        <spw-grid-item>
+          <spw-lightbox-item
+            src="https://picsum.photos/seed/cr3/1200/800"
+            alt="Photo avec icône custom"
+            caption-title="Icône custom"
+            copyright-text="Picsum Photos"
+            copyright-icon="fa-camera"
+            copyright-icon-variant="fa-solid"
+            copyright-href="https://picsum.photos"
+          ></spw-lightbox-item>
+        </spw-grid-item>
+      </spw-grid>
+    </spw-lightbox>
+  `;
+    return wrapper;
+};
+Copyright.parameters = {
+    docs: {
+        description: {
+            story: `Chaque item peut afficher un tag de copyright superposé à l'image dans la visionneuse. De gauche à droite : texte seul, texte avec lien, icône FontAwesome custom (copyright-icon, copyright-icon-variant).`,
+        },
+        source: {
+            code: /* HTML */ `
+        <!-- Texte seul -->
+        <spw-lightbox-item src="..." copyright-text="SPW — Tous droits réservés"></spw-lightbox-item>
+
+        <!-- Avec lien -->
+        <spw-lightbox-item src="..." copyright-text="Unsplash" copyright-href="https://unsplash.com" copyright-target="_blank"></spw-lightbox-item>
+
+        <!-- Icône custom -->
+        <spw-lightbox-item
+          src="..."
+          copyright-text="Picsum Photos"
+          copyright-icon="fa-camera"
+          copyright-icon-variant="fa-solid"
+          copyright-href="https://picsum.photos"
+        ></spw-lightbox-item>
+      `,
+        },
+    },
+};
+// ─── Story 10 : Images de tailles différentes ─────────────────────────────
+export const ImagesDeTaillesDifferentes = () => {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = /* HTML */ `
+    <spw-lightbox>
+      <spw-grid gap="small" cols-mobile="2" cols-tablet="3" cols-desktop="4">
+        <spw-grid-item><spw-lightbox-item src="https://picsum.photos/seed/mix1/800/600" alt="Paysage 4/3" caption-title="Paysage 4/3"></spw-lightbox-item></spw-grid-item>
+        <spw-grid-item><spw-lightbox-item src="https://picsum.photos/seed/mix2/600/900" alt="Portrait 2/3" caption-title="Portrait 2/3"></spw-lightbox-item></spw-grid-item>
+        <spw-grid-item><spw-lightbox-item src="https://picsum.photos/seed/mix3/600/600" alt="Carré 1/1" caption-title="Carré 1/1"></spw-lightbox-item></spw-grid-item>
+        <spw-grid-item><spw-lightbox-item src="https://picsum.photos/seed/mix4/1200/400" alt="Panoramique 3/1" caption-title="Panoramique 3/1"></spw-lightbox-item></spw-grid-item>
+        <spw-grid-item><spw-lightbox-item src="https://picsum.photos/seed/mix5/1600/900" alt="Cinéma 16/9" caption-title="Cinéma 16/9"></spw-lightbox-item></spw-grid-item>
+        <spw-grid-item><spw-lightbox-item src="https://picsum.photos/seed/mix6/400/600" alt="Portrait serré" caption-title="Portrait serré"></spw-lightbox-item></spw-grid-item>
+        <spw-grid-item><spw-lightbox-item src="https://picsum.photos/seed/mix7/900/600" alt="Format 3/2" caption-title="Format 3/2"></spw-lightbox-item></spw-grid-item>
+        <spw-grid-item><spw-lightbox-item src="https://picsum.photos/seed/mix8/500/700" alt="Format 5/7" caption-title="Format 5/7"></spw-lightbox-item></spw-grid-item>
+      </spw-grid>
+    </spw-lightbox>
+  `;
+    return wrapper;
+};
+ImagesDeTaillesDifferentes.parameters = {
+    docs: {
+        description: {
+            story: `Galerie avec des images de formats variés : paysage, portrait, carré, panoramique, cinéma. Vérifie l'adaptation du composant à tous les ratios d'aspect.`,
+        },
+        source: {
+            code: /* HTML */ `
+        <spw-lightbox>
+          <spw-grid gap="small" cols-mobile="2" cols-tablet="3" cols-desktop="4">
+            <spw-grid-item><spw-lightbox-item src="...(800x600)" alt="Paysage 4/3" caption-title="Paysage 4/3"></spw-lightbox-item></spw-grid-item>
+            <spw-grid-item><spw-lightbox-item src="...(600x900)" alt="Portrait 2/3" caption-title="Portrait 2/3"></spw-lightbox-item></spw-grid-item>
+            <!-- ... -->
+          </spw-grid>
+        </spw-lightbox>
+      `,
+        },
+    },
+};
+// ─── Story 11 : Hover avec loupe ───────────────────────────────────────────
+export const HoverAvecLoupe = () => {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = /* HTML */ `
+    <spw-lightbox>
+      <spw-grid gap="small" cols-mobile="2" cols-tablet="3" cols-desktop="3">
+        <spw-grid-item>
+          <spw-lightbox-item src="https://picsum.photos/seed/hov1/1200/800" alt="Paysage 1" caption-title="Hover actif (défaut)"></spw-lightbox-item>
+        </spw-grid-item>
+        <spw-grid-item>
+          <spw-lightbox-item src="https://picsum.photos/seed/hov2/1200/800" alt="Paysage 2" caption-title="Hover actif (défaut)"></spw-lightbox-item>
+        </spw-grid-item>
+        <spw-grid-item>
+          <spw-lightbox-item src="https://picsum.photos/seed/hov3/1200/800" alt="Paysage 3" caption-title="Hover désactivé" is-hover="false"></spw-lightbox-item>
+        </spw-grid-item>
+      </spw-grid>
+    </spw-lightbox>
+  `;
+    return wrapper;
+};
+HoverAvecLoupe.parameters = {
+    docs: {
+        description: {
+            story: `Par défaut, une icône de loupe et un box-shadow apparaissent au survol de chaque item. Désactivable via is-hover="false" sur le spw-lightbox-item. La troisième image de cette story a le hover désactivé.`,
+        },
+        source: {
+            code: /* HTML */ `
+        <!-- Hover actif (défaut) -->
+        <spw-lightbox-item src="..." alt="..."></spw-lightbox-item>
+
+        <!-- Hover désactivé -->
+        <spw-lightbox-item src="..." alt="..." is-hover="false"></spw-lightbox-item>
+      `,
+        },
+    },
+};
+// ─── Story 12 : Thumbnail custom via slot ─────────────────────────────────
+export const ThumbnailCustomViaSlot = () => {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = /* HTML */ `
+    <spw-lightbox>
+      <div style="display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;">
+        <spw-lightbox-item
+          src="https://picsum.photos/seed/custom1/1200/800"
+          alt="Vue aérienne"
+          caption-title="Vue aérienne de Namur"
+          caption-text="Photo prise en été"
+          is-hover="false"
+        >
+          <spw-button variant="secondary" icon="fa-image" icon-position="left">Vue aérienne</spw-button>
+        </spw-lightbox-item>
+        <spw-lightbox-item src="https://picsum.photos/seed/custom2/1200/800" alt="Forêt" caption-title="Forêt wallonne" caption-text="En automne" is-hover="false">
+          <spw-button variant="secondary" icon="fa-image" icon-position="left">Forêt wallonne</spw-button>
+        </spw-lightbox-item>
+        <spw-lightbox-item src="https://picsum.photos/seed/custom3/1200/800" alt="Château" caption-title="Château de Bouillon" is-hover="false">
+          <spw-button variant="secondary" icon="fa-image" icon-position="left">Château de Bouillon</spw-button>
+        </spw-lightbox-item>
+      </div>
+    </spw-lightbox>
+  `;
+    return wrapper;
+};
+ThumbnailCustomViaSlot.parameters = {
+    docs: {
+        description: {
+            story: `Le slot de spw-lightbox-item accepte n'importe quel contenu en tant que déclencheur. Ici des spw-button remplacent les images de grille. Utiliser is-hover="false" pour désactiver l'effet loupe sur le déclencheur custom.`,
+        },
+        source: {
+            code: /* HTML */ `
+        <spw-lightbox>
+          <div style="display:flex;gap:12px;flex-wrap:wrap;">
+            <spw-lightbox-item src="..." alt="..." is-hover="false">
+              <spw-button variant="secondary" icon="fa-image" icon-position="left">Vue aérienne</spw-button>
+            </spw-lightbox-item>
+            <!-- ... -->
+          </div>
+        </spw-lightbox>
+      `,
+        },
+    },
+};