luxen-ui 0.6.2 → 0.8.0

package/dist/metadata/sticky-bar.json

@@ -0,0 +1,93 @@
+{
+  "name": "sticky-bar",
+  "displayName": "Sticky bar",
+  "type": "shadow",
+  "isCustomElement": true,
+  "tag": "l-sticky-bar",
+  "nativeTag": null,
+  "selector": "l-sticky-bar",
+  "summary": "A bar docked to the viewport edge, revealed in the top layer when a referenced element scrolls out of view.",
+  "status": "stable",
+  "appearances": [],
+  "import": {
+    "css": null,
+    "js": "luxen-ui/sticky-bar"
+  },
+  "properties": [
+    {
+      "name": "for",
+      "attribute": "for",
+      "type": "string",
+      "default": "''",
+      "reflects": false,
+      "description": "HTML id of the element to track. When that element leaves the viewport, the bar reveals. Omit for a permanently visible bar."
+    },
+    {
+      "name": "root",
+      "attribute": "root",
+      "type": "string",
+      "default": "''",
+      "reflects": false,
+      "description": "HTML id of the scrolling ancestor used as the IntersectionObserver root. Omit to use the viewport. Useful for nested scroll containers (CMS preview panes, modals)."
+    },
+    {
+      "name": "placement",
+      "attribute": "placement",
+      "type": "'bottom' | 'top'",
+      "default": "'bottom'",
+      "reflects": true,
+      "description": "Edge to dock against."
+    }
+  ],
+  "attributes": [],
+  "events": [
+    {
+      "name": "show",
+      "description": "Fired before the bar reveals. Cancelable.",
+      "cancelable": true
+    },
+    {
+      "name": "after-show",
+      "description": "Fired after the reveal animation completes.",
+      "cancelable": false
+    },
+    {
+      "name": "hide",
+      "description": "Fired before the bar hides. Cancelable.",
+      "cancelable": true
+    },
+    {
+      "name": "after-hide",
+      "description": "Fired after the hide animation completes.",
+      "cancelable": false
+    }
+  ],
+  "methods": [],
+  "slots": [
+    {
+      "name": "",
+      "description": "Bar content. Owns its own background, padding, and typography."
+    }
+  ],
+  "cssClasses": [],
+  "cssParts": [],
+  "cssProperties": [
+    {
+      "name": "--show-duration",
+      "default": "200ms",
+      "description": "Reveal animation duration."
+    },
+    {
+      "name": "--hide-duration",
+      "default": "200ms",
+      "description": "Dismiss animation duration."
+    },
+    {
+      "name": "--offset",
+      "default": "0px",
+      "description": "Distance from the active edge. Use to clear a sticky header when `placement=\"top\"`."
+    }
+  ],
+  "commands": [],
+  "examples": []
+}

package/dist/metadata/stories-viewer.json

@@ -0,0 +1,316 @@
+{
+  "name": "stories-viewer",
+  "displayName": "Stories viewer",
+  "type": "shadow",
+  "isCustomElement": true,
+  "tag": "l-stories-viewer",
+  "nativeTag": null,
+  "selector": "l-stories-viewer",
+  "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 opens.",
+      "cancelable": false
+    },
+    {
+      "name": "after-show",
+      "description": "Fired after the open transition completes.",
+      "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.",
+      "cancelable": false
+    },
+    {
+      "name": "story-change",
+      "description": "Fired when the active story changes. Detail: `{ index: number, story: LuxenStory }`.",
+      "cancelable": false
+    },
+    {
+      "name": "story-end",
+      "description": "Fired when the active story finishes playback. Detail: `{ index: number }`.",
+      "cancelable": false
+    },
+    {
+      "name": "chapter-change",
+      "description": "Fired when the active chapter (within a story) changes. Detail: `{ chapter: number, story: LuxenStory }`.",
+      "cancelable": false
+    },
+    {
+      "name": "mute-change",
+      "description": "Fired when the mute state changes. Detail: `{ 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": []
+}

package/dist/metadata/stories.json

@@ -0,0 +1,109 @@
+{
+  "name": "stories",
+  "displayName": "Stories",
+  "type": "custom",
+  "isCustomElement": true,
+  "tag": "l-stories",
+  "nativeTag": null,
+  "selector": "l-stories",
+  "summary": "A horizontal row of `<l-story>` thumbnails. Click opens the linked\n`<l-stories-viewer>` (matched by `for` → `id`). If `for` is omitted and no\nviewer exists, a singleton viewer is appended to `<body>` on first click.",
+  "status": "experimental",
+  "appearances": [],
+  "import": {
+    "css": "luxen-ui/css/stories",
+    "js": "luxen-ui/stories"
+  },
+  "properties": [
+    {
+      "name": "for",
+      "attribute": "for",
+      "type": "string",
+      "default": "''",
+      "reflects": true,
+      "description": "ID of the linked `<l-stories-viewer>`."
+    },
+    {
+      "name": "appearance",
+      "attribute": "appearance",
+      "type": "StoriesAppearance",
+      "default": "'rounded'",
+      "reflects": true,
+      "description": "Visual appearance of the thumbnails."
+    }
+  ],
+  "attributes": [],
+  "events": [
+    {
+      "name": "story-open",
+      "description": "Fired when the viewer opens. Detail: `{ index: number, story: LuxenStory }`.",
+      "cancelable": false
+    }
+  ],
+  "methods": [
+    {
+      "name": "open",
+      "params": [
+        {
+          "name": "index",
+          "type": null
+        }
+      ],
+      "returns": null,
+      "description": "Open the linked viewer at the given index."
+    },
+    {
+      "name": "stories",
+      "params": [],
+      "returns": "LuxenStory[]",
+      "description": "All `<l-story>` children."
+    }
+  ],
+  "slots": [],
+  "cssClasses": [],
+  "cssParts": [],
+  "cssProperties": [
+    {
+      "name": "--size",
+      "default": null,
+      "description": "Thumbnail size (width). Default per appearance."
+    },
+    {
+      "name": "--radius",
+      "default": null,
+      "description": "Thumbnail border radius. Default per appearance (`--radius-full` for rounded, `1rem` for portrait)."
+    },
+    {
+      "name": "--gap",
+      "default": "1rem",
+      "description": "Gap between thumbnails."
+    },
+    {
+      "name": "--ring-color",
+      "default": null,
+      "description": "Ring color around fresh thumbnails."
+    },
+    {
+      "name": "--ring-color-seen",
+      "default": null,
+      "description": "Ring color for `[seen]` thumbnails."
+    },
+    {
+      "name": "--ring-width",
+      "default": "2px",
+      "description": "Ring width."
+    },
+    {
+      "name": "--label-color",
+      "default": null,
+      "description": "Label text color."
+    }
+  ],
+  "commands": [],
+  "examples": [
+    {
+      "title": null,
+      "language": "html",
+      "code": "<l-stories for=\"brand\">\n  <l-story src=\"…video.mp4\" poster=\"…jpg\" label=\"Notre concept\"></l-story>\n  <l-story src=\"…video2.mp4\" label=\"Collant Essentiel\"></l-story>\n</l-stories>\n<l-stories-viewer id=\"brand\"></l-stories-viewer>"
+    }
+  ]
+}

package/dist/metadata/story.json

@@ -0,0 +1,148 @@
+{
+  "name": "story",
+  "displayName": "Story",
+  "type": "custom",
+  "isCustomElement": true,
+  "tag": "l-story",
+  "nativeTag": null,
+  "selector": "l-story",
+  "summary": "A single story declaration inside an `<l-stories>` row.\n\nRenders the clickable thumbnail (poster image + centered play overlay).\nThe viewer reads `src`, `poster`, `label`, `handle`, `duration`, and\n`tracks` to play this story when opened.",
+  "status": "experimental",
+  "appearances": [],
+  "import": {
+    "css": "luxen-ui/css/story",
+    "js": "luxen-ui/story"
+  },
+  "properties": [
+    {
+      "name": "src",
+      "attribute": "src",
+      "type": "string",
+      "default": "''",
+      "reflects": true,
+      "description": "Video URL."
+    },
+    {
+      "name": "poster",
+      "attribute": "poster",
+      "type": "string",
+      "default": "''",
+      "reflects": true,
+      "description": "Thumbnail poster image. Falls back to the first video frame."
+    },
+    {
+      "name": "preview",
+      "attribute": "preview",
+      "type": "string",
+      "default": "''",
+      "reflects": true,
+      "description": "Optional short looping preview video (URL of a small dedicated MP4, typically 2-3s, 480p, no audio). When set, the thumbnail renders this video muted+looped+autoplayed in place of `poster`. Gated by an `IntersectionObserver` so off-screen previews don't play."
+    },
+    {
+      "name": "label",
+      "attribute": "label",
+      "type": "string",
+      "default": "''",
+      "reflects": true,
+      "description": "Caption shown below the thumbnail (or overlaid, depending on appearance) and used as the trigger `aria-label`."
+    },
+    {
+      "name": "duration",
+      "attribute": "duration",
+      "type": "number",
+      "default": "0",
+      "reflects": false,
+      "description": "Override the progress duration in seconds. Defaults to the video's metadata duration."
+    },
+    {
+      "name": "seen",
+      "attribute": "seen",
+      "type": "boolean",
+      "default": "false",
+      "reflects": true,
+      "description": "Mark this story as already viewed (faded ring). Reflected."
+    },
+    {
+      "name": "pulse",
+      "attribute": "pulse",
+      "type": "boolean",
+      "default": "false",
+      "reflects": true,
+      "description": "Pulse the thumbnail with an animated halo + a subtle scale tap to draw attention. Reflected."
+    },
+    {
+      "name": "chapters",
+      "attribute": "chapters",
+      "type": "string",
+      "default": "''",
+      "reflects": false,
+      "description": "Chapter start times within the video, comma-separated seconds (e.g. `0,5,12,20`). `0` is implicit if omitted. Empty = single chapter spanning the full video."
+    },
+    {
+      "name": "tracks",
+      "attribute": "tracks",
+      "type": "string",
+      "default": "''",
+      "reflects": false,
+      "description": "Comma-separated VTT track URLs for captions."
+    }
+  ],
+  "attributes": [],
+  "events": [],
+  "methods": [
+    {
+      "name": "getChapterStarts",
+      "params": [],
+      "returns": "number[]",
+      "description": "Parsed chapter start times. Always begins with `0`, sorted, deduplicated. Empty `chapters` returns `[0]`."
+    }
+  ],
+  "slots": [
+    {
+      "name": "cta",
+      "description": "Overlay surfaced by the viewer when this story is active (e.g. product card, link)."
+    },
+    {
+      "name": "header",
+      "description": "Header overlay (e.g. avatar + author)."
+    }
+  ],
+  "cssClasses": [
+    {
+      "name": ".l-story-trigger",
+      "description": "The clickable thumbnail button wrapper."
+    },
+    {
+      "name": ".l-story-thumb",
+      "description": "The poster/video thumbnail frame (ring + offset)."
+    },
+    {
+      "name": ".l-story-play",
+      "description": "The centered play-icon overlay."
+    },
+    {
+      "name": ".l-story-label",
+      "description": "The caption text below the thumbnail."
+    }
+  ],
+  "cssParts": [],
+  "cssProperties": [
+    {
+      "name": "--pulse-color",
+      "default": null,
+      "description": "Color of the attention pulse ring (only with the `pulse` attribute)."
+    },
+    {
+      "name": "--pulse-scale",
+      "default": "1.2",
+      "description": "Peak scale of the pulse animation."
+    },
+    {
+      "name": "--pulse-duration",
+      "default": "1.6s",
+      "description": "Duration of one pulse cycle."
+    }
+  ],
+  "commands": [],
+  "examples": []
+}