luxen-ui 0.25.0 → 0.26.0

package/dist/metadata/spinner.json

@@ -27,16 +27,16 @@
     }
   ],
   "cssProperties": [
-    {
-      "name": "--size",
-      "default": "1em",
-      "description": "The size of the spinner (width and height)."
-    },
     {
       "name": "--indicator-color",
       "default": null,
       "description": "The color of the spinner."
     },
+    {
+      "name": "--size",
+      "default": "1em",
+      "description": "The size of the spinner (width and height)."
+    },
     {
       "name": "--speed",
       "default": null,

package/dist/metadata/sticky-bar.json

@@ -23,14 +23,6 @@
       "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",
@@ -38,6 +30,14 @@
       "default": "'bottom'",
       "reflects": true,
       "description": "Edge to dock against."
+    },
+    {
+      "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)."
     }
   ],
   "attributes": [],
@@ -73,11 +73,6 @@
   "cssClasses": [],
   "cssParts": [],
   "cssProperties": [
-    {
-      "name": "--show-duration",
-      "default": "200ms",
-      "description": "Reveal animation duration."
-    },
     {
       "name": "--hide-duration",
       "default": "200ms",
@@ -87,6 +82,11 @@
       "name": "--offset",
       "default": "0px",
       "description": "Distance from the active edge. Use to clear a sticky header when `placement=\"top\"`."
+    },
+    {
+      "name": "--show-duration",
+      "default": "200ms",
+      "description": "Reveal animation duration."
     }
   ],
   "commands": [],

package/dist/metadata/stories-viewer.json

@@ -16,12 +16,20 @@
   },
   "properties": [
     {
-      "name": "open",
-      "attribute": "open",
+      "name": "autoAdvance",
+      "attribute": "auto-advance",
       "type": "boolean",
-      "default": "false",
+      "default": "true",
       "reflects": true,
-      "description": "Whether the viewer is open."
+      "description": "Move to the next story when the current one ends; close after the last story."
+    },
+    {
+      "name": "chapter",
+      "attribute": "chapter",
+      "type": "number",
+      "default": "0",
+      "reflects": true,
+      "description": "Active chapter index within the current story. Reflected."
     },
     {
       "name": "index",
@@ -32,12 +40,12 @@
       "description": "Active story index (0-based)."
     },
     {
-      "name": "muted",
-      "attribute": "muted",
+      "name": "lightDismiss",
+      "attribute": "light-dismiss",
       "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."
+      "description": "Close when the backdrop is clicked."
     },
     {
       "name": "loop",
@@ -48,28 +56,28 @@
       "description": "Loop the active story instead of advancing."
     },
     {
-      "name": "autoAdvance",
-      "attribute": "auto-advance",
+      "name": "muted",
+      "attribute": "muted",
       "type": "boolean",
       "default": "true",
       "reflects": true,
-      "description": "Move to the next story when the current one ends; close after the last story."
+      "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": "lightDismiss",
-      "attribute": "light-dismiss",
+      "name": "open",
+      "attribute": "open",
       "type": "boolean",
-      "default": "true",
+      "default": "false",
       "reflects": true,
-      "description": "Close when the backdrop is clicked."
+      "description": "Whether the viewer is open."
     },
     {
-      "name": "chapter",
-      "attribute": "chapter",
-      "type": "number",
-      "default": "0",
-      "reflects": true,
-      "description": "Active chapter index within the current story. Reflected."
+      "name": "source",
+      "attribute": null,
+      "type": "LuxenStories | null",
+      "default": "null",
+      "reflects": false,
+      "description": "Internal: the source `<l-stories>` element that opened the viewer."
     },
     {
       "name": "stories",
@@ -78,14 +86,6 @@
       "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": [],
@@ -111,27 +111,45 @@
       "cancelable": false
     },
     {
-      "name": "story-change",
-      "description": "Fired when the active story changes. Properties: `index: number`, `story: LuxenStory`.",
+      "name": "chapter-change",
+      "description": "Fired when the active chapter (within a story) changes. Properties: `chapter: number`, `story: LuxenStory`.",
       "cancelable": false
     },
     {
-      "name": "story-end",
-      "description": "Fired when the active story finishes playback. Properties: `index: number`.",
+      "name": "mute-change",
+      "description": "Fired when the mute state changes. Properties: `muted: boolean`.",
       "cancelable": false
     },
     {
-      "name": "chapter-change",
-      "description": "Fired when the active chapter (within a story) changes. Properties: `chapter: number`, `story: LuxenStory`.",
+      "name": "story-change",
+      "description": "Fired when the active story changes. Properties: `index: number`, `story: LuxenStory`.",
       "cancelable": false
     },
     {
-      "name": "mute-change",
-      "description": "Fired when the mute state changes. Properties: `muted: boolean`.",
+      "name": "story-end",
+      "description": "Fired when the active story finishes playback. Properties: `index: number`.",
       "cancelable": false
     }
   ],
   "methods": [
+    {
+      "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": "nextStory",
+      "params": [],
+      "returns": null,
+      "description": "Jump to the next story, skipping any remaining chapters in the current story."
+    },
     {
       "name": "openAt",
       "params": [
@@ -152,16 +170,16 @@
       "description": "Open the viewer at the given index with an explicit playlist."
     },
     {
-      "name": "close",
+      "name": "pause",
       "params": [],
       "returns": null,
       "description": ""
     },
     {
-      "name": "next",
+      "name": "play",
       "params": [],
       "returns": null,
-      "description": "Advance one chapter, or to the next story at the chapter boundary."
+      "description": ""
     },
     {
       "name": "previous",
@@ -169,32 +187,18 @@
       "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": "close",
+      "description": "Override the default close button."
+    },
     {
       "name": "cta",
       "description": "Default CTA overlay (e.g. shoppable card). Per-story `slot=\"cta\"` inside `<l-story>` overrides this when that story is active."
@@ -202,41 +206,41 @@
     {
       "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": "actions",
+      "description": "The top-right vertical button stack (close, play/pause, mute)."
     },
     {
-      "name": "frame",
-      "description": "The aspect-ratio video frame."
+      "name": "button-close",
+      "description": "The close button."
     },
     {
-      "name": "progress",
-      "description": "The progress bar wrapper."
+      "name": "button-mute",
+      "description": "The mute toggle."
     },
     {
-      "name": "progress-segment",
-      "description": "A single progress segment."
+      "name": "button-next",
+      "description": "The next story button."
     },
     {
-      "name": "progress-fill",
-      "description": "The fill element inside an active segment."
+      "name": "button-pause",
+      "description": "The play/pause toggle."
     },
     {
-      "name": "video",
-      "description": "The `<video>` element."
+      "name": "button-previous",
+      "description": "The previous story button."
     },
     {
-      "name": "overlay",
-      "description": "The overlay wrapper that hosts CTA/header slots."
+      "name": "dialog",
+      "description": "The native `<dialog>` element."
+    },
+    {
+      "name": "frame",
+      "description": "The aspect-ratio video frame."
     },
     {
       "name": "header",
@@ -247,50 +251,51 @@
       "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": "overlay",
+      "description": "The overlay wrapper that hosts CTA/header slots."
     },
     {
-      "name": "button-mute",
-      "description": "The mute toggle."
+      "name": "progress",
+      "description": "The progress bar wrapper."
     },
     {
-      "name": "button-previous",
-      "description": "The previous story button."
+      "name": "progress-fill",
+      "description": "The fill element inside an active segment."
     },
     {
-      "name": "button-next",
-      "description": "The next story button."
+      "name": "progress-segment",
+      "description": "A single progress segment."
     },
     {
       "name": "spinner",
       "description": "The loading spinner shown while the current video is buffering."
+    },
+    {
+      "name": "video",
+      "description": "The `<video>` element."
     }
   ],
   "cssProperties": [
     {
-      "name": "--width",
-      "default": "min(420px, 100vw)",
-      "description": "Frame width."
+      "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."
     },
     {
-      "name": "--progress-color",
-      "default": "white",
-      "description": "Active progress fill color."
+      "name": "--hide-duration",
+      "default": "200ms",
+      "description": "Close transition duration."
     },
     {
       "name": "--progress-bg",
       "default": "rgb(255 255 255 / 35%)",
       "description": "Inactive progress segment background."
     },
+    {
+      "name": "--progress-color",
+      "default": "white",
+      "description": "Active progress fill color."
+    },
     {
       "name": "--progress-gap",
       "default": "4px",
@@ -302,14 +307,9 @@
       "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."
+      "name": "--width",
+      "default": "min(420px, 100vw)",
+      "description": "Frame width."
     }
   ],
   "commands": [],

package/dist/metadata/stories.json

@@ -15,14 +15,6 @@
     "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",
@@ -30,6 +22,14 @@
       "default": "'rounded'",
       "reflects": true,
       "description": "Visual appearance of the thumbnails."
+    },
+    {
+      "name": "for",
+      "attribute": "for",
+      "type": "string",
+      "default": "''",
+      "reflects": true,
+      "description": "ID of the linked `<l-stories-viewer>`."
     }
   ],
   "attributes": [],
@@ -64,20 +64,20 @@
   "cssParts": [],
   "cssProperties": [
     {
-      "name": "--size",
+      "name": "--gap",
+      "default": "1rem",
+      "description": "Gap between thumbnails."
+    },
+    {
+      "name": "--label-color",
       "default": null,
-      "description": "Thumbnail size (width). Default per appearance."
+      "description": "Label text color."
     },
     {
       "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,
@@ -94,9 +94,9 @@
       "description": "Ring width."
     },
     {
-      "name": "--label-color",
+      "name": "--size",
       "default": null,
-      "description": "Label text color."
+      "description": "Thumbnail size (width). Default per appearance."
     }
   ],
   "commands": [],

package/dist/metadata/story.json

@@ -16,12 +16,28 @@
   },
   "properties": [
     {
-      "name": "src",
-      "attribute": "src",
+      "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": "duration",
+      "attribute": "duration",
+      "type": "number",
+      "default": "0",
+      "reflects": false,
+      "description": "Override the progress duration in seconds. Defaults to the video's metadata duration."
+    },
+    {
+      "name": "label",
+      "attribute": "label",
       "type": "string",
       "default": "''",
       "reflects": true,
-      "description": "Video URL."
+      "description": "Caption shown below the thumbnail (or overlaid, depending on appearance) and used as the trigger `aria-label`."
     },
     {
       "name": "poster",
@@ -40,20 +56,12 @@
       "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": "''",
+      "name": "pulse",
+      "attribute": "pulse",
+      "type": "boolean",
+      "default": "false",
       "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."
+      "description": "Pulse the thumbnail with an animated halo + a subtle scale tap to draw attention. Reflected."
     },
     {
       "name": "seen",
@@ -64,20 +72,12 @@
       "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",
+      "name": "src",
+      "attribute": "src",
       "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."
+      "reflects": true,
+      "description": "Video URL."
     },
     {
       "name": "tracks",
@@ -110,20 +110,20 @@
   ],
   "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-label",
+      "description": "The caption text below the thumbnail."
     },
     {
       "name": ".l-story-play",
       "description": "The centered play-icon overlay."
     },
     {
-      "name": ".l-story-label",
-      "description": "The caption text below the thumbnail."
+      "name": ".l-story-thumb",
+      "description": "The poster/video thumbnail frame (ring + offset)."
+    },
+    {
+      "name": ".l-story-trigger",
+      "description": "The clickable thumbnail button wrapper."
     }
   ],
   "cssParts": [],
@@ -133,15 +133,15 @@
       "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."
+    },
+    {
+      "name": "--pulse-scale",
+      "default": "1.2",
+      "description": "Peak scale of the pulse animation."
     }
   ],
   "commands": [],