Lightbox 1.2.0

<velin-lightbox> is a fullscreen media overlay for slotted images and videos. In 1.2.0, open/close uses Fokus-manager for background inert and scroll lock; close fires velin-close. English: Lightbox

Reifegrad: Dokumentiert als stabil in VelinStyle 1.2.0. Design Intelligence (Plan / Review / Agent-Meta) ist separat und Beta / Grundlage wo entsprechend angegeben.

Wann verwenden

Image or video galleries where clicking a thumbnail should open a focused overlay viewer.
When you need Tastatur prev/next, a live counter, and modal Fokus behavior out of the box.

Wann nicht verwenden

Non-media dialogs — use Modal or Dialog.
Do not wrap thumbnails only in <a> without a slotted <img>/<video> — the Komponente collects those tags (or elements with data-velin-lightbox).
Constraint: media must be direct children of <velin-lightbox>. Nested wrappers (<a>, <figure>) are not walked — put <img>/<video> as immediate slotted children.

Einfache Galerie

Slot <img> (or <video>) children. Clicks call open(index). Optional data-velin-lightbox overrides the full-size URL (sanitized).

<velin-lightbox>
  <img src="photo-thumb-1.jpg"
       data-velin-lightbox="photo-full-1.jpg"
       alt="Mountain lake">
  <img src="photo-thumb-2.jpg"
       data-velin-lightbox="photo-full-2.jpg"
       alt="Dog portrait">
</velin-lightbox>

Tastaturnavigation

While open, Fokus starts on the close Button. ← / → change slides, Escape closes, and Tab is trapped in the overlay. A polite live region and announce() report the slide counter.

<!-- Built-in keys: ArrowLeft / ArrowRight / Escape / Tab trap -->
<velin-lightbox>
  <img src="thumb1.jpg" alt="Slide 1">
  <img src="thumb2.jpg" alt="Slide 2">
</velin-lightbox>

Video-Unterstützung

Slot a <video> (or point data-velin-lightbox at a media URL). Video items render with controls and autoplay inside the overlay.

<velin-lightbox>
  <img src="photo-thumb.jpg" alt="Photo">
  <video src="clip.mp4" poster="video-poster.jpg"
         aria-label="Short clip"></video>
</velin-lightbox>

Barrierefreiheit

Overlay: role="dialog", aria-modal="true", aria-label="Image lightbox", aria-roledescription="lightbox".
Zurück-/Weiter-/Schließen-Buttons haben zugängliche Namen.
Zähler uses aria-live="polite" / aria-atomic="true"; slide changes also call announce().
Beim Öffnen: setBackgroundInert(this); on close / disconnect: clearBackgroundInert(this); Fokus restored.
close() dispatches bubbling velin-close. Backdrop click (overlay target) closes.
Image alt is escaped into the enlarged view; URLs bestanden through sanitizeURL.

Dark Mode, Responsivität, Bewegung, RTL

Dark: overlay uses a dark translucent backdrop by design; controls are light on dark.
Responsiv: content capped at 90vw / 90vh; nav Buttons move inward below 48rem.
Bewegung: overlay opacity transition disabled under prefers-reduced-motion: reduce.
RTL: absolute prev/next use physical left/right offsets (arrows still follow Tastatur Links/Rechts).

API

Methoden & events

API	Beschreibung
`open(index = 0)`	Opens at slide index; sets `open`; applies inert
`close()`	Closes, clears inert, restores Fokus, fires `velin-close`
`velin-close`	Bubbling-Close-Event

Slots & parts

Name	Beschreibung
Standard slot	`IMG`, `VIDEO`, or elements with `data-velin-lightbox`
Parts	`overlay`, `content`, `counter`

CSS-Variablen

Variable	Beschreibung
`--velin-z-modal`	Overlay-Z-Index (Standard 500)
`--velin-radius-md`	Eckenradius der Medien
`--velin-color-Fokus`	Fokus-Outline an Bedienelementen

Best practices & pitfalls

Always set meaningful alt on images — it is reused in the enlarged view.
There is no data-caption, iframe/YouTube mode, Start/End, or touch-swipe API in the aktuell Komponente.
Prefer data-velin-lightbox when the thumbnail src differs from the full asset.

Carousel — in-Seite media rotation
Modal — general dialog overlay
Schublade — off-canvas panels