Stories viewer <l-stories-viewer>

The fullscreen modal that plays a sequence of <l-story> videos. Linked to one or more <l-stories> rows via matching id ↔ for. See Stories for the full composition pattern, examples, and accessibility notes.

HTML tag<l-stories-viewer>

⏣Native HTML

⬡Progressive

◇Custom

⬢Shadow DOM

Custom Element · Shadow DOM

API reference

Importing

JS

import 'luxen-ui/stories-viewer';

Attributes & Properties

openAttribute

Whether the viewer is open. Reflects to attribute

indexAttribute

Active story index (0-based)

chapterAttribute

Active chapter index within the current story (0-based)

mutedAttribute

Whether playback is muted. Default true so autoplay always succeeds. Toggle via the mute button or m key

loopAttribute

Loop the active story instead of advancing

auto-advanceAttribute

Advance on story-end; close after the last story. Default true

light-dismissAttribute

Backdrop click closes the viewer. Default true

Methods

open(index?)Method

Open the viewer at the given story index

close()Method

Close the viewer

next()Method

Advance one chapter, or to the next story at the chapter boundary

previous()Method

Retreat one chapter, restart the current chapter past 1s in, or cross into the previous story

nextStory()Method

Jump to the next story, skipping any remaining chapters

previousStory()Method

Jump to the previous story regardless of current chapter

play()Method

Resume video playback

pause()Method

Pause video playback

Events

showEvent

Fired when the viewer opens

after-showEvent

Fired after the open transition

hideEvent

Fired when about to close. Cancelable

after-hideEvent

Fired after the close transition

story-changeEvent

Active story changed. Detail: { index, story }

chapter-changeEvent

Active chapter changed within a story. Detail: { chapter, story }

story-endEvent

Active story finished playback. Detail: { index }

mute-changeEvent

Mute state toggled. Detail: { muted }

Slots

ctaSlot

Default CTA overlay. Per-story <l-story slot="cta">…</l-story> overrides this when that story is active

headerSlot

Default header overlay (e.g. avatar + author). Per-story override available the same way

closeSlot

Override the default close button

CSS parts

dialogPart

The native <dialog> element

framePart

The aspect-ratio video frame

progressPart

The progress bar wrapper

progress-segmentPart

A single progress segment (one per chapter)

progress-fillPart

The fill element inside an active segment

videoPart

The <video> element

overlayPart

The overlay wrapper that hosts the CTA slot

headerPart

The top-left header area (story thumbnail + label fallback, or consumer-supplied content via the header slot)

header-labelPart

The default story label inside the header

actionsPart

The top-right vertical button stack (close, play/pause, mute)

button-closePart

The close button

button-pausePart

The play/pause toggle

button-mutePart

The mute toggle

button-previousPart

The previous-story button (hidden on mobile)

button-nextPart

The next-story button (hidden on mobile)

spinnerPart

The loading spinner shown while the current video is buffering. Hidden by default; appears with a 200ms delay so fast loads never flash

CSS custom properties

--widthName

Frame width. Default min(420px, 100vw)

--progress-colorName

Active progress fill color. Default white

--progress-bgName

Inactive progress segment background. Default rgb(255 255 255 / 35%)

--progress-gapName

Gap between segments. Default 4px

--show-durationName

Open transition duration. Default 200ms

--hide-durationName

Close transition duration. Default 200ms

--backdropName

Backdrop color. Default var(--l-backdrop-strong) — darker than the regular --l-backdrop since the viewer is an immersive overlay. Override to e.g. oklch(0% 0 0 / 90%) for an opaque blackout

To change the frame ratio (e.g. 4/5 or 1/1), target the frame part:

l-stories-viewer::part(frame) {
  aspect-ratio: 4/5;
}