arieare ds

components / global

image lightbox

ImageLightbox centralizes the DS image-viewer pattern. It supports authored item arrays, DOM-discovered triggers, progressive HDR assets, keyboard navigation, and the same button contract used elsewhere in the system.

field value
group global
import @arieare/ds/ImageLightbox.astro
source packages/ds/src/components/lightbox/ImageLightbox.astro
packages/ds/src/components/lightbox/lightbox.css
A layered archive drawer with pinned design scraps.
Quiet archive. High-resolution image with an optional caption.

1 / 3

A layered archive drawer with pinned design scraps.
quiet archive

component tokens

token source description
--lightbox-backdrop / --lightbox-surface-bg / --lightbox-surface-border @arieare/ds/tokens.css Sets the dialog backdrop, viewer surface fill, and surface border.
--lightbox-surface-radius / --lightbox-surface-shadow @arieare/ds/tokens.css Controls the dialog surface rounding and elevation.
--lightbox-button-* @arieare/ds/tokens.css Provides the viewer navigation and close-button button tokens.

props

prop type default description
items ImageLightboxItem[] [] Explicit image source list for indexed lightbox triggers.
dialogLabel string "image viewer" Accessible label announced for the underlying dialog.
showCounter boolean false Shows the current index and total count when multiple items are present.
discoverItemsFromTriggers boolean false Collects child triggers marked with data-ds-lightbox-item instead of using the items prop.
moveSelectorsIntoDialog string[] [] Temporarily moves matching nodes into the open dialog for top-layer effects.
class / className string "" Adds extra class names to the outer lightbox wrapper.