luxen-ui 0.24.0 → 0.26.0

package/dist/templates/elements/segmented-control.md

@@ -179,10 +179,10 @@ import 'luxen-ui/segmented-control';
 
 ### Attributes & Properties
 
-- **value**: `string` — Value of the selected segment (its `value` attribute, else its index).
-- **size**: `SegmentedControlSize` (default: `'md'`) — Control height, aligned with buttons and form controls at the same size.
-- **label**: `string | undefined` — Accessible label announced for the group. Not displayed on screen.
 - **full-width**: `boolean` (default: `false`) — Stretch segments to fill the container width.
+- **label**: `string | undefined` — Accessible label announced for the group. Not displayed on screen.
+- **size**: `SegmentedControlSize` (default: `'md'`) — Control height, aligned with buttons and form controls at the same size.
+- **value**: `string` — Value of the selected segment (its `value` attribute, else its index).
 
 ### Events
 
@@ -190,5 +190,5 @@ import 'luxen-ui/segmented-control';
 
 ### CSS custom properties
 
-- `--indicator-color` (default: `var(--l-color-surface)`) — Background of the sliding pill behind the selected segment.
 - `--border-radius` (default: `var(--l-radius-lg)`) — Corner radius of the track.
+- `--indicator-color` (default: `var(--l-color-surface)`) — Background of the sliding pill behind the selected segment.

package/dist/templates/elements/select.md

@@ -145,7 +145,7 @@ Don't add a `label` attribute to native options: a labelled option paints its la
 
 ## Enhanced: `<l-select>`
 
-When the native tier isn't enough, the `<l-select>` custom element adds in-popover search, multi-select with removable chips, and async options. It needs its JS module (`import 'luxen-ui/select'`). Options are authored as a native `<datalist>` of `<option>` — the same surface as [`<l-combobox>`](/elements/combobox) — with `<option selected>` for pre-selection.
+When the native tier isn't enough, the `<l-select>` custom element adds in-popover search, multi-select with removable chips, and async options. It needs its JS module (`import 'luxen-ui/select'`). Options are authored as a native `<datalist>` of `<option>` — the same surface as [`<l-combobox>`](https://luxen-ui.com/elements/combobox) — with `<option selected>` for pre-selection.
 
 **`<l-select>`** — Custom Element · Shadow DOM
 
@@ -176,7 +176,7 @@ Add `searchable` for a filter box inside the popover — useful for long lists.
 
 ### Multiple
 
-Add `multiple` to select several values. The trigger shows a removable [`<l-tag>`](/elements/tag) chip per value and the form submits one entry per value under `name`.
+Add `multiple` to select several values. The trigger shows a removable [`<l-tag>`](https://luxen-ui.com/elements/tag) chip per value and the form submits one entry per value under `name`.
 
 ```html
 <div class="w-72">
@@ -250,7 +250,7 @@ With `searchable`, the query is highlighted inside `.l-select-item-title` and `.
 </div>
 ```
 
-The [`.l-select-item-suffix`](#suffix) works the same way, and stays out of the trigger, the chips and the search. Rich options are copied into the popover's shadow root: an [`<l-badge>`](/elements/badge) is styled there, but your page's own selectors don't reach that copy. To theme it, set the badge's CSS custom properties on the `<l-select>`: they inherit into the popover.
+The [`.l-select-item-suffix`](#suffix) works the same way, and stays out of the trigger, the chips and the search. Rich options are copied into the popover's shadow root: an [`<l-badge>`](https://luxen-ui.com/elements/badge) is styled there, but your page's own selectors don't reach that copy. To theme it, set the badge's CSS custom properties on the `<l-select>`: they inherit into the popover.
 
 ```html
 <div class="w-80">
@@ -476,50 +476,50 @@ import 'luxen-ui/select';
 
 ### Attributes & Properties
 
-- **placeholder**: `string` — Placeholder shown in the trigger when nothing is selected.
+- **filter**: `SelectFilter` (default: `defaultFilter`) — Override the option filter. `(item, query) => boolean`.
 - **label**: `string` — Accessible label for the trigger.
-- **size**: `SelectSize` (default: `'md'`) — Control size.
-- **searchable**: `boolean` (default: `false`) — Show a filter box inside the popover (opt-in, for long lists).
-- **with-clear**: `boolean` (default: `false`) — Show a button to clear the value.
-- **placement**: `Placement` (default: `'bottom-start'`) — Panel placement relative to the trigger.
 - **multiple**: `boolean` (default: `false`) — Allow selecting multiple values — renders chips and submits one entry per value.
-- **filter**: `SelectFilter` (default: `defaultFilter`) — Override the option filter. `(item, query) => boolean`.
-- **value**: `string | string[]` — The selected value (single mode) or array of values (multiple mode).
+- **placeholder**: `string` — Placeholder shown in the trigger when nothing is selected.
+- **placement**: `Placement` (default: `'bottom-start'`) — Panel placement relative to the trigger.
+- **searchable**: `boolean` (default: `false`) — Show a filter box inside the popover (opt-in, for long lists).
+- **size**: `SelectSize` (default: `'md'`) — Control size.
 - **validationTarget**
+- **value**: `string | string[]` — The selected value (single mode) or array of values (multiple mode).
+- **with-clear**: `boolean` (default: `false`) — Show a button to clear the value.
 
 ### Events
 
-- **change** — Fired when the selection changes. Bubbles. Not cancelable. Properties: `value: string | string[]`.
-- **input** — Fired as the user types in the search box. Bubbles. Not cancelable. Properties: `value: string` (the query).
 - **show** (cancelable) — Fired before the listbox opens. Cancelable.
 - **hide** (cancelable) — Fired before the listbox closes. Cancelable.
+- **change** — Fired when the selection changes. Bubbles. Not cancelable. Properties: `value: string | string[]`.
+- **input** — Fired as the user types in the search box. Bubbles. Not cancelable. Properties: `value: string` (the query).
 
 ### CSS parts
 
 - `base` — The host wrapper.
-- `trigger` — The button that opens the listbox.
-- `value` — The selection display inside the trigger.
 - `chevron` — The trigger chevron.
 - `clear` — The clear button.
-- `panel` — The floating popover panel.
-- `search` — The search input.
+- `empty` — The "no results" message.
 - `listbox` — The options container.
 - `option` — Each option row.
-- `empty` — The "no results" message.
+- `panel` — The floating popover panel.
+- `search` — The search input.
+- `trigger` — The button that opens the listbox.
+- `value` — The selection display inside the trigger.
 
 ### CSS classes
 
+- `.l-select-item-description` — Rich option: secondary line, shown in the listbox only.
 - `.l-select-item-media` — Rich option: leading image or icon.
+- `.l-select-item-suffix` — Rich option: trailing badge, count or status icon on the title's line. Kept out of the trigger, the chips and the search.
 - `.l-select-item-text` — Rich option: column holding the title and the description.
 - `.l-select-item-title` — Rich option: title, truncated with an ellipsis. Used as the label when the option has no `label`.
-- `.l-select-item-description` — Rich option: secondary line, shown in the listbox only.
-- `.l-select-item-suffix` — Rich option: trailing badge, count or status icon on the title's line. Kept out of the trigger, the chips and the search.
 
 ### CSS custom properties
 
-- `--height` (default: `var(--l-form-control-height)`) — Control height. The clear button and the chevron each take a square of this height (borders excluded), so their hit area and spacing follow it.
-- `--l-form-control-icon-size` (default: `1em`) — Glyph size of the clear button and the chevron (global form-control token; set it here or on any ancestor). Changes the glyph only — the hit area follows `--height`.
+- `--background` — Panel background.
+- `--border-radius` — Trigger + panel radius.
 - `--chevron-icon` — Chevron glyph as a `url()`. Masked, so its color comes from the control, not the image.
 - `--clear-icon` — Clear button glyph as a `url()`.
-- `--border-radius` — Trigger + panel radius.
-- `--background` — Panel background.
+- `--height` (default: `var(--l-form-control-height)`) — Control height. The clear button and the chevron each take a square of this height (borders excluded), so their hit area and spacing follow it.
+- `--l-form-control-icon-size` (default: `1em`) — Glyph size of the clear button and the chevron (global form-control token; set it here or on any ancestor). Changes the glyph only — the hit area follows `--height`.

package/dist/templates/elements/skeleton.md

@@ -103,10 +103,10 @@ import 'luxen-ui/skeleton';
 
 ### Attributes & Properties
 
-- **shape**: `circle | text` — Placeholder shape. Default is a block.
 - **animation**: `pulse | wave` — Loading animation. Default is `pulse`.
+- **shape**: `circle | text` — Placeholder shape. Default is a block.
 
 ### CSS custom properties
 
-- `--width` — Width of the skeleton
 - `--height` — Height of the skeleton
+- `--width` — Width of the skeleton

package/dist/templates/elements/slider.md

@@ -192,38 +192,38 @@ import 'luxen-ui/slider';
 
 ### Attributes & Properties
 
-- **min**: `number` (default: `0`) — Minimum value.
+- **label**: `string` — Accessible label for the slider (and base for the range thumbs' names).
 - **max**: `number` (default: `100`) — Maximum value.
-- **step**: `number` (default: `1`) — Step increment.
-- **value**: `number` (default: `0`) — Single-thumb value.
-- **range**: `boolean` (default: `false`) — Enable a two-thumb min–max range.
-- **min-value**: `number` (default: `0`) — Lower value (range mode).
 - **max-value**: `number` (default: `100`) — Upper value (range mode).
-- **label**: `string` — Accessible label for the slider (and base for the range thumbs' names).
-- **size**: `SliderSize` (default: `'md'`) — Control size.
+- **min**: `number` (default: `0`) — Minimum value.
+- **min-value**: `number` (default: `0`) — Lower value (range mode).
 - **orientation**: `SliderOrientation` (default: `'horizontal'`) — Layout axis. Vertical sliders increase upward.
-- **with-tooltip**: `boolean` (default: `false`) — Show a tooltip with the current value while a thumb is focused or dragged.
+- **range**: `boolean` (default: `false`) — Enable a two-thumb min–max range.
+- **size**: `SliderSize` (default: `'md'`) — Control size.
+- **step**: `number` (default: `1`) — Step increment.
+- **value**: `number` (default: `0`) — Single-thumb value.
 - **valueFormatter**: `(value: number) => string | undefined` — Formats a value for the tooltip and the `aria-valuetext` announcement.
 Assign a function `(value: number) => string`, e.g. to add a unit or currency.
 - **values**: `number[]` — Current thumb values, low to high.
+- **with-tooltip**: `boolean` (default: `false`) — Show a tooltip with the current value while a thumb is focused or dragged.
 
 ### Events
 
-- **input** — Fired continuously while a thumb moves. Bubbles. Not cancelable. Properties: `value: number`, `values: number[]`.
 - **change** — Fired when a thumb is released. Bubbles. Not cancelable. Properties: `value: number`, `values: number[]`.
+- **input** — Fired continuously while a thumb moves. Bubbles. Not cancelable. Properties: `value: number`, `values: number[]`.
 
 ### CSS parts
 
 - `base` — The slider container.
-- `track` — The full-width rail.
 - `indicator` — The filled portion of the rail.
 - `thumb` — Each draggable thumb.
 - `tooltip` — The value tooltip shown above a thumb when `with-tooltip` is set.
+- `track` — The full-width rail.
 
 ### CSS custom properties
 
-- `--track-size` — Thickness of the rail.
-- `--thumb-size` — Diameter of each thumb.
-- `--track-color` — Color of the unfilled rail.
 - `--indicator-color` — Color of the filled portion.
 - `--thumb-color` — Background color of the thumbs.
+- `--thumb-size` — Diameter of each thumb.
+- `--track-color` — Color of the unfilled rail.
+- `--track-size` — Thickness of the rail.

package/dist/templates/elements/spinner.md

@@ -58,6 +58,6 @@ import 'luxen-ui/spinner';
 
 ### CSS custom properties
 
-- `--size` (default: `1em`) — The size of the spinner (width and height).
 - `--indicator-color` — The color of the spinner.
+- `--size` (default: `1em`) — The size of the spinner (width and height).
 - `--speed` — The duration of one full spin cycle.

package/dist/templates/elements/sticky-bar.md

@@ -81,8 +81,8 @@ import 'luxen-ui/sticky-bar';
 ### Attributes & Properties
 
 - **for**: `string` — HTML id of the element to track. When that element leaves the viewport, the bar reveals. Omit for a permanently visible bar.
-- **root**: `string` — 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).
 - **placement**: `'bottom' | 'top'` (default: `'bottom'`) — Edge to dock against.
+- **root**: `string` — 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).
 
 ### Events
 
@@ -97,8 +97,8 @@ import 'luxen-ui/sticky-bar';
 
 ### CSS custom properties
 
-- `--show-duration` (default: `200ms`) — Reveal animation duration.
 - `--hide-duration` (default: `200ms`) — Dismiss animation duration.
 - `--offset` (default: `0px`) — Distance from the active edge. Use to clear a sticky header when `placement="top"`.
+- `--show-duration` (default: `200ms`) — Reveal animation duration.
 
 > **Top layer.** The bar uses `popover="manual"` internally, so it paints in the document's top layer — `z-index` is not needed and would be ignored. Target `l-sticky-bar:popover-open` to style the revealed state.

package/dist/templates/elements/stories-viewer.md

@@ -4,7 +4,7 @@ outline: deep
 
 # Stories viewer
 
-The fullscreen modal that plays a sequence of [`<l-story>`](/elements/story) videos. Linked to one or more [`<l-stories>`](/elements/stories) rows via matching `id` ↔ `for`. See [Stories](/elements/stories) for the full composition pattern, examples, and accessibility notes.
+The fullscreen modal that plays a sequence of [`<l-story>`](https://luxen-ui.com/elements/story) videos. Linked to one or more [`<l-stories>`](https://luxen-ui.com/elements/stories) rows via matching `id` ↔ `for`. See [Stories](https://luxen-ui.com/elements/stories) for the full composition pattern, examples, and accessibility notes.
 
 **`<l-stories-viewer>`** — Custom Element · Shadow DOM
 
@@ -18,26 +18,26 @@ import 'luxen-ui/stories-viewer';
 
 ### Attributes & Properties
 
-- **open**: `boolean` (default: `false`) — Whether the viewer is open.
-- **index**: `number` (default: `0`) — Active story index (0-based).
-- **muted**: `boolean` (default: `true`) — Whether playback is muted. so autoplay always succeeds across browsers. The user can unmute via the dedicated button or the `m` keyboard shortcut.
-- **loop**: `boolean` (default: `false`) — Loop the active story instead of advancing.
 - **auto-advance**: `boolean` (default: `true`) — Move to the next story when the current one ends; close after the last story.
-- **light-dismiss**: `boolean` (default: `true`) — Close when the backdrop is clicked.
 - **chapter**: `number` (default: `0`) — Active chapter index within the current story. Reflected.
-- **stories**: `LuxenStory[]` (default: `[]`) — Internal: the playlist set by the source `<l-stories>`.
+- **index**: `number` (default: `0`) — Active story index (0-based).
+- **light-dismiss**: `boolean` (default: `true`) — Close when the backdrop is clicked.
+- **loop**: `boolean` (default: `false`) — Loop the active story instead of advancing.
+- **muted**: `boolean` (default: `true`) — Whether playback is muted. so autoplay always succeeds across browsers. The user can unmute via the dedicated button or the `m` keyboard shortcut.
+- **open**: `boolean` (default: `false`) — Whether the viewer is open.
 - **source**: `LuxenStories | null` (default: `null`) — Internal: the source `<l-stories>` element that opened the viewer.
+- **stories**: `LuxenStory[]` (default: `[]`) — Internal: the playlist set by the source `<l-stories>`.
 
 ### Methods
 
-- **openAt(stories: LuxenStory[], index: unknown, source: LuxenStories | null)** — Open the viewer at the given index with an explicit playlist.
 - **close()**
 - **next()** — Advance one chapter, or to the next story at the chapter boundary.
-- **previous()** — Retreat one chapter, restart the current chapter past 1s in, or cross into the previous story.
 - **nextStory()** — Jump to the next story, skipping any remaining chapters in the current story.
-- **previousStory()** — Jump to the previous story regardless of current chapter. Lands on chapter 0 of the previous story.
-- **play()**
+- **openAt(stories: LuxenStory[], index: unknown, source: LuxenStories | null)** — Open the viewer at the given index with an explicit playlist.
 - **pause()**
+- **play()**
+- **previous()** — Retreat one chapter, restart the current chapter past 1s in, or cross into the previous story.
+- **previousStory()** — Jump to the previous story regardless of current chapter. Lands on chapter 0 of the previous story.
 
 ### Events
 
@@ -45,45 +45,45 @@ import 'luxen-ui/stories-viewer';
 - **after-show** — Fired after the open transition completes. Not cancelable.
 - **hide** (cancelable) — Fired when the viewer is about to close. Cancelable.
 - **after-hide** — Fired after the close transition completes. Not cancelable.
-- **story-change** — Fired when the active story changes. Properties: `index: number`, `story: LuxenStory`.
-- **story-end** — Fired when the active story finishes playback. Properties: `index: number`.
 - **chapter-change** — Fired when the active chapter (within a story) changes. Properties: `chapter: number`, `story: LuxenStory`.
 - **mute-change** — Fired when the mute state changes. Properties: `muted: boolean`.
+- **story-change** — Fired when the active story changes. Properties: `index: number`, `story: LuxenStory`.
+- **story-end** — Fired when the active story finishes playback. Properties: `index: number`.
 
 ### Slots
 
+- **close** — Override the default close button.
 - **cta** — Default CTA overlay (e.g. shoppable card). Per-story `slot="cta"` inside `<l-story>` overrides this when that story is active.
 - **header** — Default header overlay (e.g. avatar + author). Per-story override available the same way.
-- **close** — Override the default close button.
 
 ### CSS parts
 
-- `dialog` — The native `<dialog>` element.
-- `frame` — The aspect-ratio video frame.
-- `progress` — The progress bar wrapper.
-- `progress-segment` — A single progress segment.
-- `progress-fill` — The fill element inside an active segment.
-- `video` — The `<video>` element.
-- `overlay` — The overlay wrapper that hosts CTA/header slots.
-- `header` — The top-left header area (story thumbnail + label fallback, or consumer-supplied content via the `header` slot).
-- `header-label` — The default story label inside the header.
 - `actions` — The top-right vertical button stack (close, play/pause, mute).
 - `button-close` — The close button.
-- `button-pause` — The play/pause toggle.
 - `button-mute` — The mute toggle.
-- `button-previous` — The previous story button.
 - `button-next` — The next story button.
+- `button-pause` — The play/pause toggle.
+- `button-previous` — The previous story button.
+- `dialog` — The native `<dialog>` element.
+- `frame` — The aspect-ratio video frame.
+- `header` — The top-left header area (story thumbnail + label fallback, or consumer-supplied content via the `header` slot).
+- `header-label` — The default story label inside the header.
+- `overlay` — The overlay wrapper that hosts CTA/header slots.
+- `progress` — The progress bar wrapper.
+- `progress-fill` — The fill element inside an active segment.
+- `progress-segment` — A single progress segment.
 - `spinner` — The loading spinner shown while the current video is buffering.
+- `video` — The `<video>` element.
 
 ### CSS custom properties
 
-- `--width` (default: `min(420px, 100vw)`) — Frame width.
-- `--progress-color` (default: `white`) — Active progress fill color.
+- `--backdrop` (default: `var(--l-backdrop-strong)`) — Backdrop color. — darker than `--l-backdrop` to focus attention on the immersive frame, but still translucent so the page stays perceptible.
+- `--hide-duration` (default: `200ms`) — Close transition duration.
 - `--progress-bg` (default: `rgb(255 255 255 / 35%)`) — Inactive progress segment background.
+- `--progress-color` (default: `white`) — Active progress fill color.
 - `--progress-gap` (default: `4px`) — Gap between segments.
 - `--show-duration` (default: `200ms`) — Open transition duration.
-- `--hide-duration` (default: `200ms`) — Close transition duration.
-- `--backdrop` (default: `var(--l-backdrop-strong)`) — Backdrop color. — darker than `--l-backdrop` to focus attention on the immersive frame, but still translucent so the page stays perceptible.
+- `--width` (default: `min(420px, 100vw)`) — Frame width.
 
 To change the frame ratio (e.g. `4/5` or `1/1`), target the `frame` part:
 

package/dist/templates/elements/stories.md

@@ -252,8 +252,8 @@ import 'luxen-ui/stories-viewer';
 
 ### Attributes & Properties
 
-- **for**: `string` — ID of the linked `<l-stories-viewer>`.
 - **appearance**: `StoriesAppearance` (default: `'rounded'`) — Visual appearance of the thumbnails.
+- **for**: `string` — ID of the linked `<l-stories-viewer>`.
 
 To customize size, radius, gap, or hide labels, set the [CSS custom properties](#css-custom-properties) directly via inline `style` or external CSS — no extra attributes needed.
 
@@ -270,12 +270,12 @@ To customize size, radius, gap, or hide labels, set the [CSS custom properties](
 
 These tokens are set on `<l-stories>` and cascade to every `<l-story>` child.
 
-- `--size` — Thumbnail size (width). Default per appearance.
-- `--radius` — Thumbnail border radius. Default per appearance (`--radius-full` for rounded, `1rem` for portrait).
 - `--gap` (default: `1rem`) — Gap between thumbnails.
+- `--label-color` — Label text color.
+- `--radius` — Thumbnail border radius. Default per appearance (`--radius-full` for rounded, `1rem` for portrait).
 - `--ring-color` — Ring color around fresh thumbnails.
 - `--ring-color-seen` — Ring color for `[seen]` thumbnails.
 - `--ring-width` (default: `2px`) — Ring width.
-- `--label-color` — Label text color.
+- `--size` — Thumbnail size (width). Default per appearance.
 
 The play-icon disc inside `.l-story-play l-icon` is styled inline (white icon, 35 % black background). Override it directly via standard CSS: `l-story .l-story-play l-icon { background: …; color: … }`.

package/dist/templates/elements/story.md

@@ -4,7 +4,7 @@ outline: deep
 
 # Story
 
-A single story declaration inside [`<l-stories>`](/elements/stories). Renders the clickable thumbnail; the [viewer](/elements/stories-viewer) reads its `src`, `poster`, `label`, `chapters`, and `tracks` to play it. See [Stories](/elements/stories) for examples and the row layout.
+A single story declaration inside [`<l-stories>`](https://luxen-ui.com/elements/stories). Renders the clickable thumbnail; the [viewer](https://luxen-ui.com/elements/stories-viewer) reads its `src`, `poster`, `label`, `chapters`, and `tracks` to play it. See [Stories](https://luxen-ui.com/elements/stories) for examples and the row layout.
 
 **`<l-story>`** — Custom Element (no Shadow DOM)
 
@@ -22,14 +22,14 @@ import 'luxen-ui/story';
 
 ### Attributes & Properties
 
-- **src**: `string` — Video URL.
+- **chapters**: `string` — 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.
+- **duration**: `number` (default: `0`) — Override the progress duration in seconds. Defaults to the video's metadata duration.
+- **label**: `string` — Caption shown below the thumbnail (or overlaid, depending on appearance) and used as the trigger `aria-label`.
 - **poster**: `string` — Thumbnail poster image. Falls back to the first video frame.
 - **preview**: `string` — 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.
-- **label**: `string` — Caption shown below the thumbnail (or overlaid, depending on appearance) and used as the trigger `aria-label`.
-- **duration**: `number` (default: `0`) — Override the progress duration in seconds. Defaults to the video's metadata duration.
-- **seen**: `boolean` (default: `false`) — Mark this story as already viewed (faded ring). Reflected.
 - **pulse**: `boolean` (default: `false`) — Pulse the thumbnail with an animated halo + a subtle scale tap to draw attention. Reflected.
-- **chapters**: `string` — 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.
+- **seen**: `boolean` (default: `false`) — Mark this story as already viewed (faded ring). Reflected.
+- **src**: `string` — Video URL.
 - **tracks**: `string` — Comma-separated VTT track URLs for captions.
 
 ### Methods
@@ -43,17 +43,17 @@ import 'luxen-ui/story';
 
 ### CSS classes
 
-- `.l-story-trigger` — The clickable thumbnail button wrapper.
-- `.l-story-thumb` — The poster/video thumbnail frame (ring + offset).
-- `.l-story-play` — The centered play-icon overlay.
 - `.l-story-label` — The caption text below the thumbnail.
+- `.l-story-play` — The centered play-icon overlay.
+- `.l-story-thumb` — The poster/video thumbnail frame (ring + offset).
+- `.l-story-trigger` — The clickable thumbnail button wrapper.
 
 ### CSS custom properties
 
-The thumbnail layout tokens (`--size`, `--radius`, `--ring-color`, `--ring-color-seen`, `--ring-width`, `--ring-offset`, `--ring-offset-color`, `--label-color`) are declared on `<l-stories>` and cascade to every story. See [Stories › CSS custom properties](/elements/stories#css-custom-properties). The play-icon disc is styled inline; consumers can override it by targeting `.l-story-play l-icon`.
+The thumbnail layout tokens (`--size`, `--radius`, `--ring-color`, `--ring-color-seen`, `--ring-width`, `--ring-offset`, `--ring-offset-color`, `--label-color`) are declared on `<l-stories>` and cascade to every story. See [Stories › CSS custom properties](https://luxen-ui.com/elements/stories#css-custom-properties). The play-icon disc is styled inline; consumers can override it by targeting `.l-story-play l-icon`.
 
 The pulse animation has its own knobs:
 
 - `--pulse-color` — Color of the attention pulse ring (only with the `pulse` attribute).
-- `--pulse-scale` (default: `1.2`) — Peak scale of the pulse animation.
 - `--pulse-duration` (default: `1.6s`) — Duration of one pulse cycle.
+- `--pulse-scale` (default: `1.2`) — Peak scale of the pulse animation.

package/dist/templates/elements/switch.md

@@ -19,9 +19,9 @@ Switches toggle a single setting on or off, taking effect immediately.
 </l-form-field>
 ```
 
-A switch is a native `<input type="checkbox">` with `role="switch"` — keep the role so assistive tech announces "on/off" instead of "checked". [`l-form-field`](/elements/form-field) auto-styles a bare switch and wires the accessibility (label, hint, error, `aria-*`); standalone, apply `.l-switch` to the input yourself.
+A switch is a native `<input type="checkbox">` with `role="switch"` — keep the role so assistive tech announces "on/off" instead of "checked". [`l-form-field`](https://luxen-ui.com/elements/form-field) auto-styles a bare switch and wires the accessibility (label, hint, error, `aria-*`); standalone, apply `.l-switch` to the input yourself.
 
-Use a switch for a setting that applies instantly (no Save step). For an option that only takes effect on form submission, prefer a [checkbox](/elements/checkbox).
+Use a switch for a setting that applies instantly (no Save step). For an option that only takes effect on form submission, prefer a [checkbox](https://luxen-ui.com/elements/checkbox).
 
 ## Options
 
@@ -189,11 +189,11 @@ In a `dir="rtl"` context the thumb rests at the inline-start (right) and slides
 
 ### Attributes & Properties
 
-- **role** — Must be `switch`. Promotes the native checkbox to a switch for assistive tech and triggers the switch skin / inline field layout.
+- **aria-invalid** — Set to `true` to force the invalid style (otherwise applied via `:user-invalid`). `l-form-field` manages this automatically.
 - **checked** — Whether the switch is on.
 - **disabled** — Disables the switch.
 - **required** — Marks the switch as required for form submission.
-- **aria-invalid** — Set to `true` to force the invalid style (otherwise applied via `:user-invalid`). `l-form-field` manages this automatically.
+- **role** — Must be `switch`. Promotes the native checkbox to a switch for assistive tech and triggers the switch skin / inline field layout.
 
 ### CSS classes
 
@@ -201,5 +201,5 @@ In a `dir="rtl"` context the thumb rests at the inline-start (right) and slides
 
 ### CSS custom properties
 
-- `--size` (default: `1.25em`) — Track height; the whole control scales from it.
 - `--accent` (default: `var(--l-form-control-activated-color)`) — Track fill when on.
+- `--size` (default: `1.25em`) — Track height; the whole control scales from it.