luxen-ui 0.25.0 → 0.26.0

package/dist/templates/elements/dialog.md

@@ -479,9 +479,9 @@ import 'luxen-ui/dialog';
 
 ### Attributes & Properties
 
-- **title**: `string` — Dialog title rendered in the header and used as the dialog's accessible name.
-- **open**: `boolean` (default: `false`) — Whether the dialog is open.
 - **light-dismiss**: `boolean` (default: `false`) — Close when the backdrop is clicked.
+- **open**: `boolean` (default: `false`) — Whether the dialog is open.
+- **title**: `string` — Dialog title rendered in the header and used as the dialog's accessible name.
 - **without-header**: `boolean` (default: `false`) — Hide the header entirely (title and close slot).
 
 ### Commands
@@ -509,25 +509,26 @@ Open and close the dialog by toggling its `open` property, or via the [Invoker C
 ### Slots
 
 - **(default)** — Body content.
-- **title** — Custom heading element. Overrides the default `<h2>` rendered from the `title` property. Also provides the dialog's accessible name.
 - **close** — Close button (typically `<button class="l-close">`).
 - **footer** — Footer actions.
+- **title** — Custom heading element. Overrides the default `<h2>` rendered from the `title` property. Also provides the dialog's accessible name.
 
 ### CSS parts
 
+- `body` — The body wrapper around the default slot.
 - `dialog` — The native `<dialog>` element.
+- `footer` — The footer wrapper around the footer slot.
 - `header` — The header wrapper containing the title and close slot.
 - `title` — The dialog title heading.
-- `body` — The body wrapper around the default slot.
-- `footer` — The footer wrapper around the footer slot.
 
 ### CSS custom properties
 
-- `--width` (default: `31rem`) — Dialog width.
+- `--backdrop` (default: `var(--l-backdrop)`) — Backdrop color.
+- `--backdrop-blur` (default: `0`) — Backdrop blur amount (any CSS length). `0` means no blur; set e.g. `4px` for a subtle frost.
 - `--border-radius` (default: `6px`) — Dialog border radius.
+- `--easing` (default: `cubic-bezier(0.32, 0.72, 0, 1)`) — Timing function of the open and close transitions, backdrop included.
+- `--hide-duration` (default: `200ms`) — Close transition duration.
 - `--padding` (default: `1.5rem`) — Padding applied to the header, footer, and inline-padding of the body. Set to `0` to remove all internal spacing (e.g. for edge-to-edge media).
+- `--shadow` (default: `none`) — Drop shadow of the dialog panel (any `box-shadow` value). Raise it when the backdrop is light, where the panel edge would otherwise fade into the page.
 - `--show-duration` (default: `200ms`) — Open transition duration.
-- `--hide-duration` (default: `200ms`) — Close transition duration.
-- `--easing` (default: `cubic-bezier(0.32, 0.72, 0, 1)`) — Timing function of the open and close transitions, backdrop included.
-- `--backdrop` — Backdrop color.
-- `--backdrop-blur` (default: `0`) — Backdrop blur amount (any CSS length). `0` means no blur; set e.g. `4px` for a subtle frost.
+- `--width` (default: `31rem`) — Dialog width.

package/dist/templates/elements/disclosure.md

@@ -180,12 +180,12 @@ Use the native `name` attribute to create an exclusive accordion — only one it
 
 ### Attributes & Properties
 
-- **open** — Native attribute — starts the disclosure expanded.
-- **name** — Native attribute — groups disclosures into an exclusive accordion.
 - **data-marker**: `arrow | plus` — Marker icon: `arrow` rotates 180° when open; `plus` rotates 45° into a cross.
 - **data-marker-placement**: `start | end` — Marker side. Defaults to `end`.
 - **data-variant** — bordered — Adds border, background, and border-radius.
 - **disabled** — Disables interaction (set on `<details>` or `<summary>`).
+- **name** — Native attribute — groups disclosures into an exclusive accordion.
+- **open** — Native attribute — starts the disclosure expanded.
 
 ### Events
 
@@ -197,5 +197,5 @@ Use the native `name` attribute to create an exclusive accordion — only one it
 
 ### CSS custom properties
 
-- `--marker-size` (default: `20px`) — Marker icon size.
 - `--marker-color` (default: `var(--l-color-text-tertiary)`) — Marker icon color ().
+- `--marker-size` (default: `20px`) — Marker icon size.

package/dist/templates/elements/divider.md

@@ -85,11 +85,11 @@ import 'luxen-ui/divider';
 
 ### Attributes & Properties
 
-- **orientation**: `DividerOrientation` (default: `'horizontal'`) — The divider's orientation.
 - **label**: `string | undefined` — Optional text label displayed over the divider line.
+- **orientation**: `DividerOrientation` (default: `'horizontal'`) — The divider's orientation.
 
 ### CSS custom properties
 
 - `--color` — The color of the divider line.
-- `--thickness` — The thickness of the divider line.
 - `--spacing` — The spacing between the divider and its neighboring elements.
+- `--thickness` — The thickness of the divider line.

package/dist/templates/elements/drawer.md

@@ -532,11 +532,11 @@ import 'luxen-ui/drawer';
 
 ### Attributes & Properties
 
-- **placement**: `'start' | 'end' | 'top' | 'bottom' | undefined` — Edge the drawer slides in from. Defaults to the start (inline-start) edge.
 - **inset**: `boolean` (default: `false`) — Detach the drawer from the viewport edges, floating it with a uniform gap and rounded corners.
-- **title**: `string` — Dialog title rendered in the header and used as the dialog's accessible name.
-- **open**: `boolean` (default: `false`) — Whether the dialog is open.
 - **light-dismiss**: `boolean` (default: `false`) — Close when the backdrop is clicked.
+- **open**: `boolean` (default: `false`) — Whether the dialog is open.
+- **placement**: `'start' | 'end' | 'top' | 'bottom' | undefined` — Edge the drawer slides in from. Defaults to the start (inline-start) edge.
+- **title**: `string` — Dialog title rendered in the header and used as the dialog's accessible name.
 - **without-header**: `boolean` (default: `false`) — Hide the header entirely (title and close slot).
 
 ### Commands
@@ -564,28 +564,28 @@ Open and close the drawer by toggling its `open` property, or via the [Invoker C
 ### Slots
 
 - **(default)** — Body content.
-- **title** — Custom heading element. Overrides the default `<h2>` rendered from the `title` property. Also provides the dialog's accessible name.
 - **close** — Close button (typically `<button class="l-close">`).
 - **footer** — Footer actions.
+- **title** — Custom heading element. Overrides the default `<h2>` rendered from the `title` property. Also provides the dialog's accessible name.
 
 ### CSS parts
 
+- `body` — The body wrapper around the default slot.
 - `dialog` — The native `<dialog>` element.
+- `footer` — The footer wrapper around the footer slot.
 - `header` — The header wrapper containing the title and close slot.
 - `title` — The drawer title heading.
-- `body` — The body wrapper around the default slot.
-- `footer` — The footer wrapper around the footer slot.
 
 ### CSS custom properties
 
-- `--size` (default: `320px`) — Drawer size on the axis perpendicular to its edge (width for `start`/`end`, height for `top`/`bottom`).
-- `--border-radius` (default: `6px`) — Drawer border radius on the inner edges (all corners when `inset`).
-- `--inset-gap` (default: `1rem`) — Gap between the drawer and the viewport edges when `inset` is set.
-- `--shadow` — Drop shadow applied to the floating panel when `inset` is set. Set to `none` to remove it.
-- `--show-duration` (default: `200ms`) — Open transition duration.
-- `--hide-duration` (default: `200ms`) — Close transition duration.
+- `--backdrop` (default: `var(--l-backdrop)`) — Backdrop color.
+- `--backdrop-blur` (default: `0`) — Backdrop blur amount (any CSS length). `0` means no blur; set e.g. `4px` for a subtle frost.
+- `--border-radius` (default: `0.375rem`) — Drawer border radius on the inner edges (all corners when `inset`).
 - `--easing` (default: `cubic-bezier(0.32, 0.72, 0, 1)`) — Timing function of the open and close transitions, backdrop included.
-- `--backdrop` — Backdrop color.
-- `--width` (default: `31rem`) — Dialog width.
+- `--hide-duration` (default: `200ms`) — Close transition duration.
+- `--inset-gap` (default: `1rem`) — Gap between the drawer and the viewport edges when `inset` is set.
 - `--padding` (default: `1.5rem`) — Padding applied to the header, footer, and inline-padding of the body. Set to `0` to remove all internal spacing (e.g. for edge-to-edge media).
-- `--backdrop-blur` (default: `0`) — Backdrop blur amount (any CSS length). `0` means no blur; set e.g. `4px` for a subtle frost.
+- `--shadow` (default: `var(--l-shadow-lg)`) — Drop shadow applied to the floating panel when `inset` is set (an edge drawer casts none). Set to `none` to remove it.
+- `--show-duration` (default: `300ms`) — Open transition duration.
+- `--size` (default: `320px`) — Drawer size on the axis perpendicular to its edge (width for `start`/`end`, height for `top`/`bottom`).
+- `--width` (default: `31rem`) — Dialog width.

package/dist/templates/elements/dropdown.md

@@ -400,7 +400,7 @@ A display setting belongs in the menu as a `type="checkbox"` item, not as a swit
 
 A checkbox item puts its check in the leading column, which leaves no room for an icon. Set `check-placement="end"` to move the check to the trailing edge and free that column, so the row keeps its icon **and** shows whether it is on — and its icon lines up with every other row in the menu.
 
-[`<l-color-scheme-icon>`](/elements/color-scheme-icon) in the `prefix` slot then morphs from sun to moon as the row toggles. It stays decorative: the row carries the name, the role and the state.
+[`<l-color-scheme-icon>`](https://luxen-ui.com/elements/color-scheme-icon) in the `prefix` slot then morphs from sun to moon as the row toggles. It stays decorative: the row carries the name, the role and the state.
 
 ```html
 <l-dropdown>
@@ -441,7 +441,7 @@ A checkbox item puts its check in the leading column, which leaves no room for a
 </l-dropdown>
 ```
 
-The row reflects and changes the page's [color scheme](/overview/color-scheme); the same glyph works in a header button, outside any menu.
+The row reflects and changes the page's [color scheme](https://luxen-ui.com/overview/color-scheme); the same glyph works in a header button, outside any menu.
 
 ## Accessibility
 
@@ -488,15 +488,15 @@ import 'luxen-ui/dropdown-label';
 
 ### Attributes & Properties
 
-- **open**: `boolean` (default: `false`) — Whether the dropdown is open.
-- **placement**: `Placement` (default: `'bottom-start'`) — Preferred placement of the panel.
-- **distance**: `number` (default: `4`) — Distance in pixels from the trigger.
 - **disabled**: `boolean` (default: `false`) — Disables the dropdown trigger.
+- **distance**: `number` (default: `4`) — Distance in pixels from the trigger.
 - **min-width**: `'trigger' | undefined` — Floor the panel's width at the trigger's width. Set to `trigger` so the
 panel is never narrower than the trigger; it still grows with its content.
 Useful for select-like triggers (a date-range or filter button) where the
 panel should line up with the control. Re-applies if the trigger resizes
 while open.
+- **open**: `boolean` (default: `false`) — Whether the dropdown is open.
+- **placement**: `Placement` (default: `'bottom-start'`) — Preferred placement of the panel.
 
 ### Methods
 
@@ -514,40 +514,40 @@ while open.
 
 ### Slots
 
-- **trigger** — The element that triggers the dropdown.
-- **header** — Optional content rendered above the menu items (e.g. a user profile row). Use an `<l-divider>` (or `<hr>`) after it to separate from items.
 - **(default)** — Menu content (`l-dropdown-item` elements). Drop an `<l-divider>` (or `<hr>`) between items to render a section separator, or an `<l-dropdown-label>` to caption a group of items. Nest items with `slot="submenu"` inside an item to create a submenu.
 - **footer** — Optional content rendered below the menu items (e.g. a version label or shortcut row). Use an `<l-divider>` (or `<hr>`) before it to separate from items.
+- **header** — Optional content rendered above the menu items (e.g. a user profile row). Use an `<l-divider>` (or `<hr>`) after it to separate from items.
+- **trigger** — The element that triggers the dropdown.
 
 ### CSS custom properties
 
 - `--background` (default: `var(--l-color-surface-overlay)`) — Panel background color.
 - `--border-radius` (default: `var(--l-popover-border-radius)`) — Panel border radius. (6px).
+- `--hide-duration` (default: `150ms`) — Hide animation duration.
 - `--padding` (default: `var(--l-popover-padding)`) — Panel inner padding. (0.25rem). Slotted `<l-divider>` elements bleed by this amount on each side to span the panel edges.
 - `--shadow` (default: `var(--l-popover-shadow)`) — Panel box shadow.
 - `--show-duration` (default: `150ms`) — Show animation duration.
-- `--hide-duration` (default: `150ms`) — Hide animation duration.
 
 ### `dropdown-item` Attributes & Properties
 
-- **value**: `string` — The value associated with this item.
-- **disabled**: `boolean` (default: `false`) — Disables the item.
-- **type**: `'normal' | 'checkbox'` (default: `'normal'`) — The type of item: `normal` or `checkbox`.
-- **variant**: `'destructive' | undefined` (default: `undefined`) — Visual variant. `destructive` marks a delete-style action in red.
-- **checked**: `boolean` (default: `false`) — Whether the checkbox item is checked.
-- **submenu-open**: `boolean` (default: `false`) — Whether this item's submenu is open. Managed by the parent `l-dropdown`.
 - **check-placement**: `'start' | 'end'` (default: `'start'`) — Which side of a `type="checkbox"` item carries the check mark. `start` (the
 default) puts it in the leading column, where it takes the place of any
 `prefix`. `end` moves it to the trailing edge, freeing that column so the
 item can show its own icon alongside the state.
+- **checked**: `boolean` (default: `false`) — Whether the checkbox item is checked.
+- **disabled**: `boolean` (default: `false`) — Disables the item.
 - **hasSubmenu**: `boolean` — Whether this item has nested `slot="submenu"` items.
+- **submenu-open**: `boolean` (default: `false`) — Whether this item's submenu is open. Managed by the parent `l-dropdown`.
+- **type**: `'normal' | 'checkbox'` (default: `'normal'`) — The type of item: `normal` or `checkbox`.
+- **value**: `string` — The value associated with this item.
+- **variant**: `'destructive' | undefined` (default: `undefined`) — Visual variant. `destructive` marks a delete-style action in red.
 
 ### `dropdown-item` Slots
 
 - **(default)** — Label text.
 - **prefix** — Leading content (e.g. icon). A `type="checkbox"` item ignores it unless `check-placement="end"` frees the leading column.
-- **suffix** — Trailing content.
 - **submenu** — Nested `l-dropdown-item` elements rendered in a submenu panel anchored to this item. Drop an `<hr>` between them for a separator.
+- **suffix** — Trailing content.
 
 ### `dropdown-label` Slots
 

package/dist/templates/elements/form-field.md

@@ -132,10 +132,10 @@ import 'luxen-ui/form-field';
 
 ### Attributes & Properties
 
+- **invalid**: `boolean` (default: `false`) — Reflected once the control is invalid after interaction (or set to force the invalid state).
 - **layout**: `'inline' | 'stacked' | undefined` — Layout, derived from the control type (`inline` for checkbox/radio/switch, otherwise `stacked`). Set one to force it.
-- **required**: `boolean` (default: `false`) — Reflected when the control is required. Drives the label marker.
 - **optional**: `boolean` (default: `false`) — Reflected when the control is not required.
-- **invalid**: `boolean` (default: `false`) — Reflected once the control is invalid after interaction (or set to force the invalid state).
+- **required**: `boolean` (default: `false`) — Reflected when the control is required. Drives the label marker.
 - **unstyled**: `boolean` (default: `false`) — Opt out of auto-styling the control; the ARIA wiring is preserved.
 
 ### Slots
@@ -144,5 +144,5 @@ import 'luxen-ui/form-field';
 
 ### CSS classes
 
-- `.l-hint` — Helper text element. Always visible; linked via `aria-describedby`.
 - `.l-error` — Error message element. Hidden until invalid, then revealed with `role="alert"` and linked via `aria-describedby`.
+- `.l-hint` — Helper text element. Always visible; linked via `aria-describedby`.

package/dist/templates/elements/icon.md

@@ -129,8 +129,8 @@ import 'luxen-ui/icon';
 
 ### Attributes & Properties
 
-- **name**: `string` — The icon name in Iconify format (e.g. `mdi:home`, `lucide:check`).
 - **label**: `string | undefined` — Accessible label. When set, the icon becomes meaningful (`role="img"` + `aria-label`). When absent, the icon is decorative.
+- **name**: `string` — The icon name in Iconify format (e.g. `mdi:home`, `lucide:check`).
 
 ### CSS custom properties
 

package/dist/templates/elements/input-otp.md

@@ -181,11 +181,11 @@ import 'luxen-ui/input-otp';
 
 Set `--digits` on `<l-input-otp>` to change the digit count.
 
-- `--digits` — Number of digit boxes (default: 6). Must match input's maxlength.
-- `--cell-size` — Cell width and height (default: 2.75rem). Font size scales automatically.
-- `--cell-gap` — Space between cells (default: 0.5rem).
 - `--cell-bg-color` — Cell background color (default: a faint ink tint over `--l-form-control-background-color`).
 - `--cell-border-color` — Cell border color (default: `var(--l-form-control-border-color)`).
 - `--cell-border-radius` — Cell border-radius (default: `var(--l-form-control-border-radius)`, like the other text fields).
-- `--cell-focus-color` — Border + ring color of the active (focused) cell.
-- `--cell-focus-ring` — `box-shadow` of the active cell ring (defaults to a 1px solid ring; set to `none` to disable).
+- `--cell-focus-color` (default: `--l-focus-ring-color`) — Border, stroke and halo color of the active (focused) cell.
+- `--cell-focus-ring` — `box-shadow` of the active cell (defaults to the text-field focus halo, `--l-form-control-focus-halo-width` wide; set to `none` to disable).
+- `--cell-gap` — Space between cells (default: 0.5rem).
+- `--cell-size` — Cell width and height (default: 2.75rem). Font size scales automatically.
+- `--digits` — Number of digit boxes (default: 6). Must match input's maxlength.

package/dist/templates/elements/input-stepper.md

@@ -358,13 +358,13 @@ import 'luxen-ui/input-stepper';
 
 ### Attributes & Properties
 
-- **min**: `number | undefined` — Minimum allowed value. Falls back to the input's `min` attribute.
+- **decrement-icon**: `string` (default: `'lucide:minus'`) — Icon name for the decrement button.
+- **increment-icon**: `string` (default: `'lucide:plus'`) — Icon name for the increment button.
 - **max**: `number | undefined` — Maximum allowed value. Falls back to the input's `max` attribute.
-- **step**: `number | undefined` — Step increment. Falls back to the input's `step` attribute.
+- **min**: `number | undefined` — Minimum allowed value. Falls back to the input's `min` attribute.
 - **size**: `InputStepperSize` (default: `'md'`) — Control size.
+- **step**: `number | undefined` — Step increment. Falls back to the input's `step` attribute.
 - **with-roller**: `boolean` (default: `false`) — Enable the animated number roller overlay.
-- **decrement-icon**: `string` (default: `'lucide:minus'`) — Icon name for the decrement button.
-- **increment-icon**: `string` (default: `'lucide:plus'`) — Icon name for the increment button.
 
 ### Events
 

package/dist/templates/elements/input.md

@@ -19,7 +19,7 @@ Inputs let users enter and edit text, numbers, dates, and other single-line valu
 </l-form-field>
 ```
 
-[`l-form-field`](/elements/form-field) auto-styles a bare text `<input>` and wires the accessibility (label, hint, error, `aria-*`). Standalone, apply `.l-input` to the input yourself.
+[`l-form-field`](https://luxen-ui.com/elements/form-field) auto-styles a bare text `<input>` and wires the accessibility (label, hint, error, `aria-*`). Standalone, apply `.l-input` to the input yourself.
 
 ## Options
 
@@ -226,13 +226,13 @@ The CSS covers everything except the password toggle; the JS import upgrades `l-
 
 ### Attributes & Properties
 
-- **type**: `text | search | number | password | email | url | tel | date | time` — Native input type. `date`/`time` get custom picker icons; `search` gets a custom clear button.
+- **aria-invalid** — Set to `true` to force the invalid style (otherwise applied via `:user-invalid`). `l-form-field` manages this automatically.
 - **data-size**: `xs | sm | md | lg | xl` — Control height on the shared `--l-size-control-*` scale (default `md`). Affects only the height, not the label or hint/error.
-- **placeholder** — Native placeholder text.
 - **disabled** — Disables the input.
-- **required** — Marks the input as required for form submission.
+- **placeholder** — Native placeholder text.
 - **readonly** — Makes the input read-only.
-- **aria-invalid** — Set to `true` to force the invalid style (otherwise applied via `:user-invalid`). `l-form-field` manages this automatically.
+- **required** — Marks the input as required for form submission.
+- **type**: `text | search | number | password | email | url | tel | date | time` — Native input type. `date`/`time` get custom picker icons; `search` gets a custom clear button.
 
 ### CSS classes
 
@@ -240,16 +240,23 @@ The CSS covers everything except the password toggle; the JS import upgrades `l-
 
 ### CSS custom properties
 
-- `--height` (default: `var(--l-form-control-height)`) — Control height.
 - `--border-radius` (default: `var(--l-form-control-border-radius)`) — Control border radius.
 - `--calendar-icon` — Date picker glyph as a `url()`. Masked, so color is taken from the control, not the image.
-- `--clock-icon` — Time picker glyph as a `url()`.
 - `--clear-icon` — Search clear glyph as a `url()`.
+- `--clock-icon` — Time picker glyph as a `url()`.
+- `--height` (default: `var(--l-form-control-height)`) — Control height.
 - `--l-form-control-icon-size` (default: `1em`) — Glyph size of the date/time picker icon and the search clear (global form-control token). Their hit area is a square of the control height (borders excluded).
 
-### Input group
+### `input-group` Attributes & Properties
 
 - **password-toggle**: `boolean` (default: `false`) — Inject a show/hide toggle button after the inner `input[type="password"]`.
 - **size**: `'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined` (default: `md`) — Control size — maps the height to the shared `--l-size-control-*` scale ().
 
+### `input-group` CSS classes
+
 - `.l-input-group-toggle` — The injected show/hide password button.
+
+### `input-group` CSS custom properties
+
+- `--border-radius` (default: `var(--l-form-control-border-radius)`) — Corner radius.
+- `--height` (default: `var(--l-form-control-height)`) — Control height.

package/dist/templates/elements/popover.md

@@ -365,30 +365,30 @@ import 'luxen-ui/popover';
 
 ### Attributes & Properties
 
-- **for**: `string` — The HTML id of the element triggering the popover.
-- **placement**: `Placement` (default: `'bottom'`) — The preferred placement of the popover.
 - **distance**: `number` (default: `8`) — The distance in pixels from the target element.
-- **open**: `boolean` (default: `false`) — Whether or not the popover is visible.
-- **without-arrow**: `boolean` (default: `false`) — Hide the directional arrow.
+- **for**: `string` — The HTML id of the element triggering the popover.
 - **full-width**: `boolean` (default: `false`) — Stretch the popover to the viewport width. Useful for mega menus.
+- **open**: `boolean` (default: `false`) — Whether or not the popover is visible.
+- **placement**: `Placement` (default: `'bottom'`) — The preferred placement of the popover.
 - **trigger**: `string` (default: `'click'`) — Space-separated list of trigger modes: `click`, `hover`, `focus`, `manual`.
+- **without-arrow**: `boolean` (default: `false`) — Hide the directional arrow.
 
 ### Methods
 
 - **show()**
 - **hide()**
-- **toggle()**
 - **reposition()** — Recompute the position against the current trigger. Use it when you move
 the anchor yourself and the panel has to follow. No-op when closed; hides
 if the anchor is gone.
+- **toggle()**
 
 ### CSS custom properties
 
+- `--arrow-size` (default: `8px`) — Arrow size.
 - `--background` (default: `var(--l-color-surface-overlay)`) — Background color.
-- `--color` — Text color. Default: inherited.
 - `--border-radius` (default: `var(--l-popover-border-radius)`) — Border radius. (6px).
+- `--color` — Text color. Default: inherited.
+- `--hide-duration` (default: `150ms`) — Hide animation duration.
 - `--max-width` (default: `320px`) — Maximum width.
 - `--shadow` (default: `var(--l-popover-shadow)`) — Box shadow.
-- `--arrow-size` (default: `8px`) — Arrow size.
 - `--show-duration` (default: `150ms`) — Show animation duration.
-- `--hide-duration` (default: `150ms`) — Hide animation duration.

package/dist/templates/elements/progress.md

@@ -108,8 +108,8 @@ Add `data-orientation="vertical"` attribute.
 
 ### Attributes & Properties
 
-- **value** — Current progress between `0` and `1` (omit for indeterminate).
 - **data-orientation** — vertical — Vertical orientation.
+- **value** — Current progress between `0` and `1` (omit for indeterminate).
 
 ### CSS classes
 
@@ -117,7 +117,7 @@ Add `data-orientation="vertical"` attribute.
 
 ### CSS custom properties
 
+- `--indeterminate-animation` — Animation name for the indeterminate state.
+- `--indicator-color` — Fill/indicator color.
 - `--size` (default: `4px`) — Bar thickness.
 - `--track-color` — Track background color.
-- `--indicator-color` — Fill/indicator color.
-- `--indeterminate-animation` — Animation name for the indeterminate state.

package/dist/templates/elements/prose-editor.md

@@ -146,79 +146,78 @@ import 'luxen-ui/prose-editor';
 
 ### Attributes & Properties
 
+- **autofocus**: `boolean` (default: `false`) — Focus the editor on creation.
 - **editor**: `Editor` — The Tiptap editor instance. Available after the first render.
-- **initial-html**: `string` — Initial HTML content.
-- **initial-json**: `string` — Initial content as a serialized ProseMirror JSON string.
 - **editor-class**: `string` (default: `'prose'`) — Class applied to the `.ProseMirror` editable element (e.g. for Tailwind Typography `prose`).
-- **toolbar**: `ToolbarCommandName[]` (default: `[]`) — Explicit list of toolbar commands. Overrides `toolbar-preset` when set.
-- **toolbar-preset**: `'default' | 'minimal'` (default: `'default'`) — Built-in toolbar layout used when `toolbar` is not set.
-- **toolbar-placement**: `'top' | 'bottom'` (default: `'top'`) — Where the toolbar sits relative to the content.
-- **autofocus**: `boolean` (default: `false`) — Focus the editor on creation.
-- **placeholder**: `string` — Placeholder shown when the editor is empty.
 - **emoji-data-source**: `string` — URL the emoji picker fetches its data from. Point this at a locally served
 `emojibase-data` JSON to run fully offline (no CDN). Defaults to the
 picker's bundled CDN source.
+- **initial-html**: `string` — Initial HTML content.
+- **initial-json**: `string` — Initial content as a serialized ProseMirror JSON string.
+- **placeholder**: `string` — Placeholder shown when the editor is empty.
+- **toolbar**: `ToolbarCommandName[]` (default: `[]`) — Explicit list of toolbar commands. Overrides `toolbar-preset` when set.
+- **toolbar-placement**: `'top' | 'bottom'` (default: `'top'`) — Where the toolbar sits relative to the content.
+- **toolbar-preset**: `'default' | 'minimal'` (default: `'default'`) — Built-in toolbar layout used when `toolbar` is not set.
 - **validationTarget**: `HTMLElement | undefined`
 
 ### Methods
 
-- **getHTML()** → `string` — Get the current content as an HTML string. Empty paragraph resolves to `''`.
-- **getJSON()** → `JSONContent` — Get the current content as ProseMirror JSON.
+- **blur()**
 - **clear()** — Remove all content.
 - **focus()**
-- **blur()**
+- **getHTML()** → `string` — Get the current content as an HTML string. Empty paragraph resolves to `''`.
+- **getJSON()** → `JSONContent` — Get the current content as ProseMirror JSON.
+- **redo()**
+- **setHorizontalRule()**
+- **toggleBlockquote()**
 - **toggleBold()**
-- **toggleItalic()**
-- **toggleUnderline()**
-- **toggleStrike()**
-- **toggleHighlight()**
-- **toggleHeading(level: 1 | 2 | 3)**
 - **toggleBulletList()**
-- **toggleOrderedList()**
-- **toggleBlockquote()**
 - **toggleCodeBlock()**
-- **setHorizontalRule()**
-- **undo()**
-- **redo()**
+- **toggleHeading(level: 1 | 2 | 3)**
+- **toggleHighlight()**
+- **toggleItalic()**
 - **toggleLink()**
-- **formResetCallback()**
+- **toggleOrderedList()**
+- **toggleStrike()**
+- **toggleUnderline()**
+- **undo()**
 
 ### Events
 
-- **change** — Fired when the content changes. Bubbles. Properties: `html: string`, `json: JSONContent`.
 - **add-file** — Fired when the attachment toolbar button is clicked.
+- **change** — Fired when the content changes. Bubbles. Properties: `html: string`, `json: JSONContent`.
 
 ### Slots
 
-- **toolbar-start** — Content placed before the generated toolbar buttons.
 - **toolbar-end** — Content placed after the generated toolbar buttons.
+- **toolbar-start** — Content placed before the generated toolbar buttons.
 
-### CSS Parts
+### CSS parts
 
-- `wrapper` — The editor frame wrapping the toolbar and content.
-- `toolbar` — The toolbar row.
-- `toolbar-button` — Any toolbar button.
 - `divider` — A toolbar divider.
 - `editor` — The container around the editable content.
+- `toolbar` — The toolbar row.
+- `toolbar-button` — Any toolbar button.
+- `wrapper` — The editor frame wrapping the toolbar and content.
 
 ### CSS custom properties
 
+- `--background` — Background color of the editor.
 - `--border-color` — Color of the editor frame border.
 - `--border-color-focus` — Color of the editor frame border while the editable area has focus.
-- `--border-width` — Width of the editor frame border.
 - `--border-radius` — Corner radius of the editor frame.
-- `--background` — Background color of the editor.
+- `--border-width` — Width of the editor frame border.
 - `--color` — Text color of the editor.
+- `--content-min-height` (default: `8rem`) — Minimum height of the editable content region.
+- `--content-padding` (default: `0.75rem 1rem`) — Padding inside the editable content region.
+- `--placeholder-color` — Placeholder text color.
 - `--toolbar-background` — Background color of the toolbar.
-- `--toolbar-padding` — Padding around the toolbar.
-- `--toolbar-gap` — Gap between toolbar buttons.
-- `--toolbar-divider-color` — Color of toolbar dividers.
-- `--toolbar-button-size` — Size of toolbar buttons.
-- `--toolbar-button-radius` — Corner radius of toolbar buttons.
+- `--toolbar-button-background-active` — Background of active toolbar buttons.
+- `--toolbar-button-background-hover` — Background of hovered toolbar buttons.
 - `--toolbar-button-color` — Icon color of inactive toolbar buttons.
 - `--toolbar-button-color-active` — Icon color of hovered/active toolbar buttons.
-- `--toolbar-button-background-hover` — Background of hovered toolbar buttons.
-- `--toolbar-button-background-active` — Background of active toolbar buttons.
-- `--content-padding` (default: `0.75rem 1rem`) — Padding inside the editable content region.
-- `--content-min-height` (default: `8rem`) — Minimum height of the editable content region.
-- `--placeholder-color` — Placeholder text color.
+- `--toolbar-button-radius` — Corner radius of toolbar buttons.
+- `--toolbar-button-size` — Size of toolbar buttons.
+- `--toolbar-divider-color` — Color of toolbar dividers.
+- `--toolbar-gap` — Gap between toolbar buttons.
+- `--toolbar-padding` — Padding around the toolbar.

package/dist/templates/elements/radio.md

@@ -31,9 +31,9 @@ Radios let users pick a single option from a set of mutually exclusive choices.
 </fieldset>
 ```
 
-[`l-form-field`](/elements/form-field) auto-styles a bare `<input type="radio">` and wires the accessibility (label, hint, error, `aria-*`); standalone, apply `.l-radio` to the input yourself. Radios that share a `name` form a group — selecting one deselects the others, and arrow keys move between them. Wrap the group in a `<fieldset>` with a `<legend>` for the shared question.
+[`l-form-field`](https://luxen-ui.com/elements/form-field) auto-styles a bare `<input type="radio">` and wires the accessibility (label, hint, error, `aria-*`); standalone, apply `.l-radio` to the input yourself. Radios that share a `name` form a group — selecting one deselects the others, and arrow keys move between them. Wrap the group in a `<fieldset>` with a `<legend>` for the shared question.
 
-For two opposite options where neither is a sensible default, prefer a single checkbox or a switch. For more than ~5 options, prefer a [select](/elements/select).
+For two opposite options where neither is a sensible default, prefer a single checkbox or a switch. For more than ~5 options, prefer a [select](https://luxen-ui.com/elements/select).
 
 ## Options
 
@@ -239,12 +239,12 @@ Wrap the group in a `<fieldset class="l-radio-group">` with a `<legend>` so assi
 
 ### Attributes & Properties
 
-- **name** — Groups radios so only one can be selected at a time. Every radio in a group shares the same `name`.
-- **value** — The value submitted with the form when this radio is the selected one in its group.
+- **aria-invalid** — Set to `true` to force the invalid style (otherwise applied via `:user-invalid`). `l-form-field` manages this automatically.
 - **checked** — Whether the radio is selected.
 - **disabled** — Disables the radio.
+- **name** — Groups radios so only one can be selected at a time. Every radio in a group shares the same `name`.
 - **required** — Marks the group 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.
+- **value** — The value submitted with the form when this radio is the selected one in its group.
 
 ### CSS classes
 
@@ -252,6 +252,6 @@ Wrap the group in a `<fieldset class="l-radio-group">` with a `<legend>` so assi
 
 ### CSS custom properties
 
-- `--size` (default: `1.25em`) — Box size.
 - `--accent` (default: `var(--l-form-control-activated-color)`) — Selected fill color.
 - `--dot` — Selected dot icon as a `url()`. Override to swap the SVG (color is baked into the image).
+- `--size` (default: `1.25em`) — Box size.

package/dist/templates/elements/rating.md

@@ -208,7 +208,7 @@ Avatar group + star rating as a trust badge.
 - **Role** — In edit mode, uses native `<input type="radio">` elements — built-in semantics
 - **Accessible name** — Provide an associated label via `<label>` or `aria-label` when in edit mode
 - **Non-text contrast** — Star colors must meet non-text contrast ratio against the background
-- **Focus** — Focus ring shown around the rating group via `:focus-within`
+- **Focus** — Keyboard focus draws the global focus ring around the focused star (`:focus-visible`)
 
 ### Rules
 
@@ -232,31 +232,23 @@ import 'luxen-ui/rating';
 ### Attributes & Properties
 
 - **edit-mode**: `boolean` (default: `false`)
-- **labels**: `string[]` (default: `[]`)
-- **value**: `number` (default: `0`)
-- **length**: `number` (default: `5`)
 - **getIcon**: `(value: number) => string | undefined` — Optional callback returning a CSS `url()` string for a given position (1-based).
-
-### Methods
-
-- **edit-mode**: `boolean` (default: `false`)
 - **labels**: `string[]` (default: `[]`)
-- **value**: `number` (default: `0`)
 - **length**: `number` (default: `5`)
-- **getIcon**: `(value: number) => string | undefined` — Optional callback returning a CSS `url()` string for a given position (1-based).
+- **value**: `number` (default: `0`)
 
 ### Events
 
 - **change** — Emitted when the rating value changes in edit mode. Bubbles. Properties: `name: string`, `value: string`, `checked: boolean`, `sourceEvent: Event`.
 
-### CSS Parts
+### CSS parts
 
 - `label` — The label element shown in edit mode.
 
 ### CSS custom properties
 
-- `--icon-size` (default: `20px`) — The size of each icon.
 - `--active-color` (default: `gold`) — The fill color for rated icons.
+- `--icon` — Custom SVG shape as a `url()`. Defaults to a 5-pointed star.
+- `--icon-size` (default: `20px`) — The size of each icon.
 - `--inactive-color` (default: `#ddd`) — The fill color for empty icons.
 - `--spacing` (default: `0px`) — The spacing between icons.
-- `--icon` — Custom SVG shape as a `url()`. Defaults to a 5-pointed star.