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: `

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