Default

Plain CSS: Gallery.svelte and Trigger.svelte pair with lightbox.css, and index.ts exports the styled Lightbox namespace. Drop the Package files into a design-system entry, then compose triggers in your app. Gallery includes a top-right Theater / Peek toggle (desktop) to switch between full-width and aspect-sized slide tracks. The Example tab shows the live preview (+N crossfade, child morphRef, whole-trigger morph). It is app UI, not part of the skin.

See also: Lightbox overview

+N overlay with crossfade

Child morph via morphRef

Whole trigger morph

import { Lightbox as Primitives } from '@ramka/svelte';
import Gallery from './Gallery.svelte';
import Trigger from './Trigger.svelte';

export type { LightboxItem, SlidesLayout } from './Gallery.svelte';

/** Default skin: the library primitives with a styled Trigger and the composed Gallery. */
export const Lightbox = { ...Primitives, Trigger, Gallery };