{
  "name": "stories-viewer",
  "displayName": "Stories viewer",
  "type": "shadow",
  "isCustomElement": true,
  "tag": "l-stories-viewer",
  "nativeTag": null,
  "selector": "l-stories-viewer",
  "subItemOf": "stories",
  "summary": "Fullscreen modal that plays a sequence of `<l-story>` videos with an\nInstagram-style segmented progress bar, previous/next navigation, mute toggle,\nand auto-advance.\n\nLinked to one or more `<l-stories>` rows via matching `id` ↔ `for`. Open\nprogrammatically via `open()` or by clicking a thumbnail in a linked row.",
  "status": "experimental",
  "appearances": [],
  "import": {
    "css": null,
    "js": "luxen-ui/stories-viewer"
  },
  "properties": [
    {
      "name": "open",
      "attribute": "open",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Whether the viewer is open."
    },
    {
      "name": "index",
      "attribute": "index",
      "type": "number",
      "default": "0",
      "reflects": true,
      "description": "Active story index (0-based)."
    },
    {
      "name": "muted",
      "attribute": "muted",
      "type": "boolean",
      "default": "true",
      "reflects": true,
      "description": "Whether playback is muted. so autoplay always succeeds across browsers. The user can unmute via the dedicated button or the `m` keyboard shortcut."
    },
    {
      "name": "loop",
      "attribute": "loop",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Loop the active story instead of advancing."
    },
    {
      "name": "autoAdvance",
      "attribute": "auto-advance",
      "type": "boolean",
      "default": "true",
      "reflects": true,
      "description": "Move to the next story when the current one ends; close after the last story."
    },
    {
      "name": "lightDismiss",
      "attribute": "light-dismiss",
      "type": "boolean",
      "default": "true",
      "reflects": true,
      "description": "Close when the backdrop is clicked."
    },
    {
      "name": "chapter",
      "attribute": "chapter",
      "type": "number",
      "default": "0",
      "reflects": true,
      "description": "Active chapter index within the current story. Reflected."
    },
    {
      "name": "stories",
      "attribute": null,
      "type": "LuxenStory[]",
      "default": "[]",
      "reflects": false,
      "description": "Internal: the playlist set by the source `<l-stories>`."
    },
    {
      "name": "source",
      "attribute": null,
      "type": "LuxenStories | null",
      "default": "null",
      "reflects": false,
      "description": "Internal: the source `<l-stories>` element that opened the viewer."
    }
  ],
  "attributes": [],
  "events": [
    {
      "name": "show",
      "description": "Fired when the viewer is about to open. Cancelable — call `event.preventDefault()` to keep it closed.",
      "cancelable": true
    },
    {
      "name": "after-show",
      "description": "Fired after the open transition completes. Not cancelable.",
      "cancelable": false
    },
    {
      "name": "hide",
      "description": "Fired when the viewer is about to close. Cancelable.",
      "cancelable": true
    },
    {
      "name": "after-hide",
      "description": "Fired after the close transition completes. Not cancelable.",
      "cancelable": false
    },
    {
      "name": "story-change",
      "description": "Fired when the active story changes. Properties: `index: number`, `story: LuxenStory`.",
      "cancelable": false
    },
    {
      "name": "story-end",
      "description": "Fired when the active story finishes playback. Properties: `index: number`.",
      "cancelable": false
    },
    {
      "name": "chapter-change",
      "description": "Fired when the active chapter (within a story) changes. Properties: `chapter: number`, `story: LuxenStory`.",
      "cancelable": false
    },
    {
      "name": "mute-change",
      "description": "Fired when the mute state changes. Properties: `muted: boolean`.",
      "cancelable": false
    }
  ],
  "methods": [
    {
      "name": "openAt",
      "params": [
        {
          "name": "stories",
          "type": "LuxenStory[]"
        },
        {
          "name": "index",
          "type": null
        },
        {
          "name": "source",
          "type": "LuxenStories | null"
        }
      ],
      "returns": null,
      "description": "Open the viewer at the given index with an explicit playlist."
    },
    {
      "name": "close",
      "params": [],
      "returns": null,
      "description": ""
    },
    {
      "name": "next",
      "params": [],
      "returns": null,
      "description": "Advance one chapter, or to the next story at the chapter boundary."
    },
    {
      "name": "previous",
      "params": [],
      "returns": null,
      "description": "Retreat one chapter, restart the current chapter past 1s in, or cross into the previous story."
    },
    {
      "name": "nextStory",
      "params": [],
      "returns": null,
      "description": "Jump to the next story, skipping any remaining chapters in the current story."
    },
    {
      "name": "previousStory",
      "params": [],
      "returns": null,
      "description": "Jump to the previous story regardless of current chapter. Lands on chapter 0 of the previous story."
    },
    {
      "name": "play",
      "params": [],
      "returns": null,
      "description": ""
    },
    {
      "name": "pause",
      "params": [],
      "returns": null,
      "description": ""
    }
  ],
  "slots": [
    {
      "name": "cta",
      "description": "Default CTA overlay (e.g. shoppable card). Per-story `slot=\"cta\"` inside `<l-story>` overrides this when that story is active."
    },
    {
      "name": "header",
      "description": "Default header overlay (e.g. avatar + author). Per-story override available the same way."
    },
    {
      "name": "close",
      "description": "Override the default close button."
    }
  ],
  "cssClasses": [],
  "cssParts": [
    {
      "name": "dialog",
      "description": "The native `<dialog>` element."
    },
    {
      "name": "frame",
      "description": "The aspect-ratio video frame."
    },
    {
      "name": "progress",
      "description": "The progress bar wrapper."
    },
    {
      "name": "progress-segment",
      "description": "A single progress segment."
    },
    {
      "name": "progress-fill",
      "description": "The fill element inside an active segment."
    },
    {
      "name": "video",
      "description": "The `<video>` element."
    },
    {
      "name": "overlay",
      "description": "The overlay wrapper that hosts CTA/header slots."
    },
    {
      "name": "header",
      "description": "The top-left header area (story thumbnail + label fallback, or consumer-supplied content via the `header` slot)."
    },
    {
      "name": "header-label",
      "description": "The default story label inside the header."
    },
    {
      "name": "actions",
      "description": "The top-right vertical button stack (close, play/pause, mute)."
    },
    {
      "name": "button-close",
      "description": "The close button."
    },
    {
      "name": "button-pause",
      "description": "The play/pause toggle."
    },
    {
      "name": "button-mute",
      "description": "The mute toggle."
    },
    {
      "name": "button-previous",
      "description": "The previous story button."
    },
    {
      "name": "button-next",
      "description": "The next story button."
    },
    {
      "name": "spinner",
      "description": "The loading spinner shown while the current video is buffering."
    }
  ],
  "cssProperties": [
    {
      "name": "--width",
      "default": "min(420px, 100vw)",
      "description": "Frame width."
    },
    {
      "name": "--progress-color",
      "default": "white",
      "description": "Active progress fill color."
    },
    {
      "name": "--progress-bg",
      "default": "rgb(255 255 255 / 35%)",
      "description": "Inactive progress segment background."
    },
    {
      "name": "--progress-gap",
      "default": "4px",
      "description": "Gap between segments."
    },
    {
      "name": "--show-duration",
      "default": "200ms",
      "description": "Open transition duration."
    },
    {
      "name": "--hide-duration",
      "default": "200ms",
      "description": "Close transition duration."
    },
    {
      "name": "--backdrop",
      "default": "var(--l-backdrop-strong)",
      "description": "Backdrop color. — darker than `--l-backdrop` to focus attention on the immersive frame, but still translucent so the page stays perceptible."
    }
  ],
  "commands": [],
  "examples": []
}