HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
LightboxView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA viewer that opens one thing over the page.StableSince 0.100.0MediaUsageimport'@fusion.dev/helix/lightbox'import'@fusion.dev/helix-headless/lightbox'Preview
API ReferenceRoothelix-lightboxA viewer that opens one thing over the page.
PropTypeDefaultDescriptionactivestringWhich item is current, by its `value`.defaultActivestring""Which item the markup declared current.defaultOpenbooleanfalseWhether the markup declared it open. Ignored once `open` is written.idleDelaynumber0How long the reader may be still before the chrome hides, in milliseconds.labelstring""Accessible name for the viewer.loopbooleanfalseWhether walking past the end comes back to the beginning.openbooleanWhether the element is open.statusLabelstring"{index} of {count}"The reading that says where in the set the reader is, with `{index}` and
`{count}` filled in.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The items, which are `<helix-headless-lightbox-item>` elements.footerChrome below the item, such as a counter or a thumbnail strip.headerChrome above the item, such as a title and a close button.
EventTypeDescriptioncloseEventRelayed, because the platform's own does not escape.helix-activateHelixActivateEventFired once the shown item has moved, so the element already holds it.helix-before-activateHelixBeforeActivateEventFired before the shown item changes, and cancelable. The only way to refuse one.helix-before-closeHelixBeforeCloseEventFired before it closes, and cancelable.helix-before-openHelixBeforeOpenEventFired before it opens, and cancelable.toggleEventSays the state moved, carrying `newState` and `oldState`.
MethodTypeDescriptionclose() => voidAsks to close, which a consumer may refuse.next() => voidShows the next item, or the first where it is past the end and looping.previous() => voidShows the previous item, or the last where it is past the start and looping.requestActive(next: string) => booleanRequests a new current item, and reports whether the request stood.requestOpen(next: boolean) => booleanRequests an open-state change, and reports whether it was applied.show() => voidOpens the viewer, which makes the rest of the page inert.toggleFullscreen() => voidFills the screen with the viewer, or comes back.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptiondialogThe native dialog element.liveThe region that says which item is shown.viewportThe box the current item is shown in.
CSS PropertyDescription--lightbox-foregroundColor of the chrome drawn over the content.--lightbox-gapSpace between the chrome and the content.--lightbox-paddingInset from the edges of the screen.--lightbox-scrimThe wash over the page behind the viewer. Set on the host, where a token still resolves: a `var()` written inside `::backdrop` cannot see one.
Custom stateDescriptionfullscreenWhile the viewer fills the screen.idleWhile the reader has been still long enough to hide the chrome.openWhile the viewer is open.settledSet a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
Itemhelix-lightbox-itemOne thing a lightbox can show.
PropTypeDefaultDescriptioncurrentbooleanfalseWhether this is the one being shown.labelstring""What this item is called, for the reading that says where the reader is.valuestring""What names this item, and what `active` on the root is compared against.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)What is being shown.descriptionA line under it saying what it is.
PartDescriptionitemThe box the content is shown in.
CSS PropertyDescription--lightbox-item-description-colorColor of the line under the content.--lightbox-item-gapSpace between the content and the line under it.
Custom stateDescriptioncurrentWhile this is the item the lightbox is showing.settledSet a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
Roothelix-headless-lightboxA viewer that opens one thing over the page.
PropTypeDefaultDescriptionactivestringWhich item is current, by its `value`.defaultActivestring""Which item the markup declared current.defaultOpenbooleanfalseWhether the markup declared it open. Ignored once `open` is written.idleDelaynumber0How long the reader may be still before the chrome hides, in milliseconds.labelstring""Accessible name for the viewer.loopbooleanfalseWhether walking past the end comes back to the beginning.openbooleanWhether the element is open.statusLabelstring"{index} of {count}"The reading that says where in the set the reader is, with `{index}` and
`{count}` filled in.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The items, which are `<helix-headless-lightbox-item>` elements.footerChrome below the item, such as a counter or a thumbnail strip.headerChrome above the item, such as a title and a close button.
EventTypeDescriptioncloseEventRelayed, because the platform's own does not escape.helix-activateHelixActivateEventFired once the shown item has moved, so the element already holds it.helix-before-activateHelixBeforeActivateEventFired before the shown item changes, and cancelable. The only way to refuse one.helix-before-closeHelixBeforeCloseEventFired before it closes, and cancelable.helix-before-openHelixBeforeOpenEventFired before it opens, and cancelable.toggleEventSays the state moved, carrying `newState` and `oldState`.
MethodTypeDescriptionclose() => voidAsks to close, which a consumer may refuse.next() => voidShows the next item, or the first where it is past the end and looping.previous() => voidShows the previous item, or the last where it is past the start and looping.requestActive(next: string) => booleanRequests a new current item, and reports whether the request stood.requestOpen(next: boolean) => booleanRequests an open-state change, and reports whether it was applied.show() => voidOpens the viewer, which makes the rest of the page inert.toggleFullscreen() => voidFills the screen with the viewer, or comes back.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptiondialogThe native dialog element.liveThe region that says which item is shown.viewportThe box the current item is shown in.
Custom stateDescriptionfullscreenWhile the viewer fills the screen.idleWhile the reader has been still long enough to hide the chrome.openWhile the viewer is open.settledSet a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
Itemhelix-headless-lightbox-itemOne thing a lightbox can show.
PropTypeDefaultDescriptioncurrentbooleanfalseWhether this is the one being shown.labelstring""What this item is called, for the reading that says where the reader is.valuestring""What names this item, and what `active` on the root is compared against.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)What is being shown.descriptionA line under it saying what it is.
PartDescriptionitemThe box the content is shown in.
Custom stateDescriptioncurrentWhile this is the item the lightbox is showing.settledSet a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
ExamplesNameDescriptionGalleryA set of pictures opened over the page, walked with the arrow keys.