luxen-ui 0.24.0 → 0.26.0

package/dist/templates/elements/table.md

@@ -0,0 +1,210 @@
+---
+outline: deep
+---
+
+# Table
+
+Tables display data in rows and columns, so it is easy to scan and compare. Commonly used for lists of records, reports, and settings.
+
+**`.l-table`** — Native HTML Element
+
+A stylesheet, no JavaScript. The sort state it shows is written in the markup, with `aria-sort`. The same markup works in a server-rendered page and in a framework template.
+
+## Options
+
+### Basic
+
+Add `class="l-table"` to a `<table>`. Name it with a `<caption>`, head each column with `<th scope="col">` and each row with the `<th scope="row">` that identifies it. Add `data-align="end"` to the header and cells of a column of figures; digits are tabular across the table, so they line up. The header sticks to the top of its scroll container. Totals go in a `<tfoot>`, set apart by a stronger rule; several `<tbody>` elements group rows.
+
+```html
+<table class="l-table">
+  <caption>
+    Products
+  </caption>
+  <thead>
+    <tr>
+      <th scope="col">SKU</th>
+      <th scope="col">Name</th>
+      <th
+        scope="col"
+        data-align="end"
+      >
+        In stock
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">SKU-1042</th>
+      <td>Desk lamp</td>
+      <td data-align="end">4,210</td>
+    </tr>
+    <tr>
+      <th scope="row">SKU-2087</th>
+      <td>Office chair</td>
+      <td data-align="end">12,004</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+### Sizes
+
+Add `data-size="sm"` or `data-size="lg"`. Rows follow the control size scale, so an `.l-button` of the same `data-size` fits a row. A row is a minimum height: content taller than it grows the row.
+
+```html
+<div class="flex w-full flex-col gap-6">
+  <table
+    class="l-table"
+    data-size="sm"
+  >
+    <caption>
+      Products
+    </caption>
+    <thead>
+      <tr>
+        <th scope="col">SKU</th>
+        <th scope="col">Name</th>
+        <th
+          scope="col"
+          data-align="end"
+        >
+          In stock
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th scope="row">SKU-1042</th>
+        <td>Desk lamp</td>
+        <td data-align="end">4,210</td>
+      </tr>
+      <tr>
+        <th scope="row">SKU-2087</th>
+        <td>Office chair</td>
+        <td data-align="end">12,004</td>
+      </tr>
+    </tbody>
+  </table>
+  <table
+    class="l-table"
+    data-size="lg"
+  >
+    <caption>
+      Products
+    </caption>
+    <thead>
+      <tr>
+        <th scope="col">SKU</th>
+        <th scope="col">Name</th>
+        <th
+          scope="col"
+          data-align="end"
+        >
+          In stock
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th scope="row">SKU-1042</th>
+        <td>Desk lamp</td>
+        <td data-align="end">4,210</td>
+      </tr>
+      <tr>
+        <th scope="row">SKU-2087</th>
+        <td>Office chair</td>
+        <td data-align="end">12,004</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+```
+
+### Sortable columns
+
+Put a `<button>` in each sortable header, and `aria-sort="ascending"` or `"descending"` on the sorted one. The stylesheet shows the state written in the markup; it does not reorder rows. When the server sorts, use a link to the sorted URL instead of the button (`<a href="?sort=-sku">`). Disable the button of a column the current query cannot sort by. Any other action in a header is an `.l-button` and keeps its own look.
+
+```html
+<table class="l-table">
+  <caption>
+    Products
+  </caption>
+  <thead>
+    <tr>
+      <th scope="col"><button type="button">SKU</button></th>
+      <th scope="col"><button type="button">Name</button></th>
+      <th
+        scope="col"
+        data-align="end"
+        aria-sort="descending"
+      >
+        <button type="button">In stock</button>
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">SKU-2087</th>
+      <td>Office chair</td>
+      <td data-align="end">12,004</td>
+    </tr>
+    <tr>
+      <th scope="row">SKU-1042</th>
+      <td>Desk lamp</td>
+      <td data-align="end">4,210</td>
+    </tr>
+    <tr>
+      <th scope="row">SKU-3110</th>
+      <td>Standing desk</td>
+      <td data-align="end">865</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+## Accessibility
+
+### Criteria
+
+- **Table name** — A `<caption>` (visible or `.l-visually-hidden`) or `aria-label` names the table
+- **Headers** — Column headers are `<th scope="col">` and each row has a `<th scope="row">`, so a screen reader announces the column and the record with every cell
+- **Sort state** — `aria-sort` on the sorted `<th>` is announced with the header; the control is a native `<button>`, as in the APG sortable table example
+- **Sort glyph** — The direction glyph of an unsorted column uses the tertiary text color, above 3:1 against the surface in both schemes
+- **Focus ring** — Header buttons show the Luxen focus ring
+
+### Rules
+
+- Name the table with a `<caption>` or `aria-label`
+- Use `<th scope="col">` for column headers and `<th scope="row">` for the cell that identifies each row
+- Put the sort control in a `<button>` (or a link, when the server sorts) inside the header, and `aria-sort` on the sorted `<th>` only
+
+### Keyboard interactions
+
+- `Tab` — Moves through the header controls, then the controls in each row
+- `Enter` — Activates the focused header button
+- `Space` — Activates the focused header button
+
+## API reference
+
+### Importing
+
+```css
+@import 'luxen-ui/css/table';
+```
+
+### Attributes & Properties
+
+- **aria-sort**: `ascending | descending` — On the sorted column's `<th>`, which holds a `<button>` (or a link, when the server sorts): shows the direction. A disabled button marks a column the current query cannot sort by; an `.l-button` in a header is another action and keeps its own look.
+- **data-align**: `start | center | end` — On a column's `<th>` and `<td>`s: aligns the column. Use `end` for figures; digits are tabular across the table, so they line up. A sort button in an `end` header puts its glyph before the label, keeping the label flush with the figures.
+- **data-size**: `sm | lg` — Row height, on the control size scale: a control of the same size fits a row. Defaults to the medium size.
+
+### CSS classes
+
+- `.l-table` — Applied to the `<table>`. Name it with a `<caption>` (visible or `.l-visually-hidden`) or `aria-label`; head the columns with `<th scope="col">` and each row with the `<th scope="row">` that identifies it.
+
+### CSS custom properties
+
+- `--background-color` (default: `var(--l-color-surface)`) — Background of the table. The sticky header repeats it, so it stays opaque over the rows scrolling under it.
+- `--border-color` (default: `var(--l-color-divider)`) — Rules between rows. The stronger rules under the header and above the totals use `--l-color-border`.
+- `--row-height` (default: `calc(var(--l-size-control-md) + 2 * var(--l-spacing-1))`) — Minimum row height; content taller than it grows the row.

package/dist/templates/elements/tabs.md

@@ -253,10 +253,10 @@ import 'luxen-ui/tabs';
 
 ### Attributes & Properties
 
-- **variant**: `TabsVariant` (default: `'line'`) — Visual variant.
-- **value**: `string` (default: `'0'`) — Index of the active tab (0-based).
 - **full-width**: `boolean` (default: `false`) — Stretch tabs to fill container width.
 - **orientation**: `TabsOrientation` (default: `'horizontal'`) — Tab orientation.
+- **value**: `string` (default: `'0'`) — Index of the active tab (0-based).
+- **variant**: `TabsVariant` (default: `'line'`) — Visual variant.
 
 ### Events
 
@@ -264,9 +264,9 @@ import 'luxen-ui/tabs';
 
 ### CSS custom properties
 
+- `--hover-color` (default: `var(--l-color-bg-state-hover)`) — `line` variant: fill of the pill that appears behind a hovered tab label.
+- `--hover-inset` (default: `4px`) — `line` variant: block-axis gap between the hover pill and the tab edges, keeping it detached from the bottom border.
 - `--indicator-color` (default: `var(--l-color-text-primary)`) — `line` variant: color of the active underline that slides under the selected tab.
 - `--indicator-thickness` (default: `2px`) — `line` variant: thickness of the active underline.
 - `--track-color` (default: `var(--l-color-border)`) — `line` variant: color of the static bottom border the tabs sit on.
 - `--track-thickness` (default: `1px`) — `line` variant: thickness of the static bottom border.
-- `--hover-color` (default: `var(--l-color-bg-state-hover)`) — `line` variant: fill of the pill that appears behind a hovered tab label.
-- `--hover-inset` (default: `4px`) — `line` variant: block-axis gap between the hover pill and the tab edges, keeping it detached from the bottom border.

package/dist/templates/elements/tag.md

@@ -14,7 +14,7 @@ Tags are compact chips for tokens, filters, and selected values, with an optiona
 
 > **Tag or badge?**
 >
-> A tag is a chip the user **operates** — selects, removes. For a chip the user only **reads**, including a categorizing one, use [`<l-badge>`](/elements/badge): it is lighter (light DOM, so it renders without its script), shorter by 2px, and it takes the same `--text-color` / `--background-color` / `--border-color` trio.
+> A tag is a chip the user **operates** — selects, removes. For a chip the user only **reads**, including a categorizing one, use [`<l-badge>`](https://luxen-ui.com/elements/badge): it is lighter (light DOM, so it renders without its script), shorter by 2px, and it takes the same `--text-color` / `--background-color` / `--border-color` trio.
 
 ## Options
 
@@ -375,19 +375,19 @@ import 'luxen-ui/tag';
 
 ### Attributes & Properties
 
-- **size**: `TagSize` (default: `'md'`) — Tag size: `sm`, `md` (default), or `lg`.
-- **removable**: `boolean` (default: `false`) — Show a remove button (and enable Backspace/Delete removal).
-- **selectable**: `boolean` (default: `false`) — Make the tag a filter control the user can toggle on and off.
-- **selected**: `boolean` (default: `false`) — Whether the tag is selected. Reflected, so `[selected]` is styleable.
 - **control**: `TagControl` (default: `'none'`) — What drives the selection: `none` (default) makes the chip itself a toggle
 button; `checkbox` renders a checkbox inside and makes the chip its label —
 the right choice for a multi-select facet. Implies `selectable`.
 - **disabled**: `boolean` (default: `false`) — Disable the tag — dims it and blocks selection and removal.
+- **removable**: `boolean` (default: `false`) — Show a remove button (and enable Backspace/Delete removal).
+- **selectable**: `boolean` (default: `false`) — Make the tag a filter control the user can toggle on and off.
+- **selected**: `boolean` (default: `false`) — Whether the tag is selected. Reflected, so `[selected]` is styleable.
+- **size**: `TagSize` (default: `'md'`) — Tag size: `sm`, `md` (default), or `lg`.
 
 ### Events
 
-- **remove** (cancelable) — Fired when the user removes the tag (× click or Backspace/Delete). Cancelable; if not prevented the tag removes itself. Not composed, does not bubble.
 - **change** — Fired when a `selectable` tag is toggled. Not cancelable — like the platform's own `change`, and like `l-segmented-control`. Bubbles. Properties: `selected: boolean`. The chip is uncontrolled: it applies the new state before dispatching, so a host that vetoes a toggle (a "max 3 filters" rule, an async guard) sets `selected` back in the listener — the revert lands in the same render and is never painted.
+- **remove** (cancelable) — Fired when the user removes the tag (× click or Backspace/Delete). Cancelable; if not prevented the tag removes itself. Not composed, does not bubble.
 
 ### Slots
 
@@ -398,20 +398,20 @@ the right choice for a multi-select facet. Implies `selectable`.
 ### CSS parts
 
 - `base` — The chip container.
-- `content` — The label wrapper.
-- `toggle` — The toggle button rendered by `selectable` (not with `control="checkbox"`).
 - `checkbox` — The native checkbox rendered by `control="checkbox"`.
+- `content` — The label wrapper.
 - `remove` — The remove button — a full-height segment at the end of the chip.
+- `toggle` — The toggle button rendered by `selectable` (not with `control="checkbox"`).
 
 ### CSS custom properties
 
-- `--text-color` — Label color.
 - `--background-color` — Chip fill.
 - `--border-color` — Chip border, and the rule that splits off the remove button. Defaults to a tint of `--text-color`; setting it pins the line in every state, so a token-based theme keeps its own value on hover.
-- `--selected-text-color` — Label, border, and checkbox accent when selected. Defaults to the library's form-control accent, lightened in dark mode.
-- `--selected-background-color` — Chip fill when selected. Defaults to a tint of `--selected-text-color`.
-- `--selected-border-color` — Chip border when selected. Defaults to a 45% tint of `--selected-text-color`. Selection replaces the line the same way it replaces the fill and the ink, so a chip themed with `--border-color` still gets its emphasis step; set this to theme that step too.
-- `--height` — Chip height. Defaults to the `size` step (a selectable chip is taller, to keep a comfortable target).
+- `--border-radius` — Corner radius. Defaults to a full pill.
 - `--font-size` — Label size. Defaults to the `size` step — 12px, or 14px at `size="lg"`. Set it with `--height` to land between the two steps in a dense filter panel.
+- `--height` — Chip height. Defaults to the `size` step (a selectable chip is taller, to keep a comfortable target).
 - `--padding-inline` — Horizontal padding. Defaults to the `size` step.
-- `--border-radius` — Corner radius. Defaults to a full pill.
+- `--selected-background-color` — Chip fill when selected. Defaults to a tint of `--selected-text-color`.
+- `--selected-border-color` — Chip border when selected. Defaults to a 45% tint of `--selected-text-color`. Selection replaces the line the same way it replaces the fill and the ink, so a chip themed with `--border-color` still gets its emphasis step; set this to theme that step too.
+- `--selected-text-color` — Label, border, and checkbox accent when selected. Defaults to the library's form-control accent, lightened in dark mode.
+- `--text-color` — Label color.

package/dist/templates/elements/textarea.md

@@ -19,7 +19,7 @@ Textareas let users enter and edit multi-line text.
 </l-form-field>
 ```
 
-[`l-form-field`](/elements/form-field) auto-styles a bare `<textarea>` and wires the accessibility (label, hint, error, `aria-*`). Standalone, apply `.l-textarea` to the textarea yourself.
+[`l-form-field`](https://luxen-ui.com/elements/form-field) auto-styles a bare `<textarea>` and wires the accessibility (label, hint, error, `aria-*`). Standalone, apply `.l-textarea` to the textarea yourself.
 
 ## Options
 
@@ -187,15 +187,15 @@ The textarea is CSS-only — no JavaScript import.
 
 ### Attributes & Properties
 
-- **rows** — Number of visible text lines — sets the initial height.
-- **data-size**: `xs | sm | md | lg | xl` — Single-line min-height on the shared `--l-size-control-*` scale (default `md`). Affects only the control, not the label or hint/error.
+- **aria-invalid** — Set to `true` to force the invalid style (otherwise applied via `:user-invalid`). `l-form-field` manages this automatically.
 - **data-resize**: `vertical | none | both | auto` — User resize handle. Defaults to `vertical`. `auto` grows the box with its content via `field-sizing` (progressive: falls back to the `rows` height where unsupported).
-- **placeholder** — Native placeholder text.
+- **data-size**: `xs | sm | md | lg | xl` — Single-line min-height on the shared `--l-size-control-*` scale (default `md`). Affects only the control, not the label or hint/error.
 - **disabled** — Disables the textarea.
-- **required** — Marks the textarea as required for form submission.
-- **readonly** — Makes the textarea read-only.
 - **maxlength** — Native maximum character count.
-- **aria-invalid** — Set to `true` to force the invalid style (otherwise applied via `:user-invalid`). `l-form-field` manages this automatically.
+- **placeholder** — Native placeholder text.
+- **readonly** — Makes the textarea read-only.
+- **required** — Marks the textarea as required for form submission.
+- **rows** — Number of visible text lines — sets the initial height.
 
 ### CSS classes
 
@@ -203,5 +203,5 @@ The textarea is CSS-only — no JavaScript import.
 
 ### CSS custom properties
 
-- `--height` (default: `var(--l-form-control-height)`) — Single-line min-height; `rows` grows the control from here.
 - `--border-radius` (default: `var(--l-form-control-border-radius)`) — Control border radius.
+- `--height` (default: `var(--l-form-control-height)`) — Single-line min-height; `rows` grows the control from here.

package/dist/templates/elements/toast.md

@@ -336,8 +336,8 @@ toast({ text: 'Hello!' });
 
 ### Attributes & Properties
 
-- **placement**: `ToastPlacement` (default: `'top-end'`) — Position of the toast stack on the screen.
 - **duration**: `number` (default: `5000`) — Default auto-dismiss delay in milliseconds. 0 disables auto-dismiss.
+- **placement**: `ToastPlacement` (default: `'top-end'`) — Position of the toast stack on the screen.
 - **variant**: `ToastVariant | undefined` — Default variant for toast items: `info`, `success`, `warning`, `danger`.
 
 ### Methods
@@ -364,13 +364,13 @@ toast({ text: 'Hello!' });
 ### CSS classes
 
 - `.l-toast-accent` — The left accent bar, colored by variant.
-- `.l-toast-icon` — The leading icon, colored by variant (replaces the accent bar).
 - `.l-toast-content` — The content column wrapping the heading and message.
+- `.l-toast-icon` — The leading icon, colored by variant (replaces the accent bar).
 - `.l-toast-timer` — The countdown progress bar (for timed toasts).
 
 ### CSS custom properties
 
 - `--gap` — Gap between stacked toast items.
-- `--width` — Width of the toast stack.
-- `--show-duration` — Duration of the show animation.
 - `--hide-duration` — Duration of the hide animation.
+- `--show-duration` — Duration of the show animation.
+- `--width` — Width of the toast stack.

package/dist/templates/elements/tooltip.md

@@ -462,33 +462,33 @@ import 'luxen-ui/tooltip';
 
 ### Attributes & Properties
 
-- **for**: `string` — The HTML id of the element triggering the tooltip.
-- **placement**: `Placement` (default: `'top'`) — The preferred placement of the tooltip.
 - **distance**: `number` (default: `8`) — The distance in pixels from the target element.
-- **show-delay**: `number` (default: `0`) — Milliseconds the pointer must dwell on the trigger before the tooltip
-shows. Applies to `hover` only — focus shows immediately.
+- **for**: `string` — The HTML id of the element triggering the tooltip.
 - **hide-delay**: `number` (default: `0`) — Milliseconds to wait after the pointer leaves the trigger (and its safe
 polygon) before hiding. Bridges a brief exit-and-return without flicker.
 Applies to `hover` only.
 - **open**: `boolean` (default: `false`) — Whether or not the tooltip is visible.
-- **without-arrow**: `boolean` (default: `false`) — Hide the directional arrow.
+- **placement**: `Placement` (default: `'top'`) — The preferred placement of the tooltip.
+- **show-delay**: `number` (default: `0`) — Milliseconds the pointer must dwell on the trigger before the tooltip
+shows. Applies to `hover` only — focus shows immediately.
 - **trigger**: `string` (default: `'hover focus'`) — Space-separated list of trigger modes: `hover`, `focus`, `click`, `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 tooltip has to follow. No-op when closed;
 hides if the anchor is gone.
+- **toggle()**
 
 ### CSS custom properties
 
+- `--arrow-size` (default: `6px`) — Arrow size.
 - `--background-color` — Background color for this tooltip instance. Defaults to the global `--l-tooltip-background-color` token (a neutral inverse surface, dark in light mode / light in dark mode) — override that token to re-skin every tooltip at once.
-- `--text-color` — Text color. If unset, auto-derived from `--background-color` luminance.
 - `--border-radius` (default: `4px`) — Border radius.
+- `--hide-duration` (default: `150ms`) — Hide animation duration.
 - `--max-width` (default: `180px`) — Maximum width.
-- `--arrow-size` (default: `6px`) — Arrow size.
 - `--show-duration` (default: `150ms`) — Show animation duration.
-- `--hide-duration` (default: `150ms`) — Hide animation duration.
+- `--text-color` — Text color. If unset, auto-derived from `--background-color` luminance.

package/dist/templates/elements/tree-item.md

@@ -4,9 +4,9 @@ outline: deep
 
 # Tree item
 
-A single node inside [`<l-tree>`](/elements/tree). Nested `<l-tree-item>` children become sub-nodes. See [Tree](/elements/tree) for examples, selection modes, and keyboard behaviour.
+A single node inside [`<l-tree>`](https://luxen-ui.com/elements/tree). Nested `<l-tree-item>` children become sub-nodes. See [Tree](https://luxen-ui.com/elements/tree) for examples, selection modes, and keyboard behaviour.
 
-Roles and ARIA states are set on `ElementInternals` and mirrored to DOM attributes, so both `[role="treeitem"]` and `[aria-selected]`/`[aria-expanded]`/`[aria-disabled]` selectors match. See [Tree › Selectors & testing](/elements/tree#selectors-testing).
+Roles and ARIA states are set on `ElementInternals` and mirrored to DOM attributes, so both `[role="treeitem"]` and `[aria-selected]`/`[aria-expanded]`/`[aria-disabled]` selectors match. See [Tree › Selectors & testing](https://luxen-ui.com/elements/tree#selectors-testing).
 
 **`<l-tree-item>`** — Custom Element · Shadow DOM
 
@@ -20,53 +20,53 @@ import 'luxen-ui/tree-item';
 
 ### Attributes & Properties
 
+- **depth**: `number` — Set by `<l-tree>`: depth of the item in the tree (0 = root).
+- **disabled**: `boolean` (default: `false`) — Whether the item is disabled.
 - **expanded**: `boolean` (default: `false`) — Whether the item is expanded.
-- **selected**: `boolean` (default: `false`) — Whether the item is selected.
+- **hasChildren**: `boolean` — Whether this item has nested tree-item children.
 - **indeterminate**: `boolean` (default: `false`) — Whether the checkbox is indeterminate (some descendants selected). Managed by
 `<l-tree>` in cascade mode; set it yourself with `independent`.
-- **disabled**: `boolean` (default: `false`) — Whether the item is disabled.
 - **lazy**: `boolean` (default: `false`) — Marks this item as having children that will be loaded on first expand.
 - **loading**: `boolean` (default: `false`) — Whether the item is currently loading (shows a spinner).
+- **selected**: `boolean` (default: `false`) — Whether the item is selected.
 - **showCheckbox**: `boolean` — Set by `<l-tree>`: whether a checkbox is shown.
-- **depth**: `number` — Set by `<l-tree>`: depth of the item in the tree (0 = root).
-- **hasChildren**: `boolean` — Whether this item has nested tree-item children.
 
 ### Methods
 
+- **getChildrenItems({ includeDisabled = true }: unknown)** → `TreeItem[]` — Returns the child `<l-tree-item>` elements directly under this one.
+- **getTextLabel()** → `string` — Returns the text label of this item.
+- **isLeaf()** → `boolean` — Returns true if this item has no expandable children.
 - **setPosition(level: number, posInSet: number, setSize: number)** — Set by `<l-tree>`: ARIA position within the tree. `level` is 1-based depth,
 `posInSet`/`setSize` describe the item's rank among its siblings. These let
 screen readers announce "level 2, 3 of 5" even when `lazy` children keep the
 full set out of the DOM.
-- **getChildrenItems({ includeDisabled = true }: unknown)** → `TreeItem[]` — Returns the child `<l-tree-item>` elements directly under this one.
-- **isLeaf()** → `boolean` — Returns true if this item has no expandable children.
-- **getTextLabel()** → `string` — Returns the text label of this item.
 - **toggle()** — Toggle expand state. Opening a `lazy` item emits `lazy-load` (via `updated`).
 
 ### Events
 
-- **expand** — Fired when the item is expanded.
 - **collapse** — Fired when the item is collapsed.
+- **expand** — Fired when the item is expanded.
 - **lazy-load** — Fired when a lazy item is expanded for the first time. Consumers should append children and set `lazy=false`.
 
 ### Slots
 
 - **(default)** — Label content (kept to a single row).
-- **prefix** — Leading content before the label (e.g. icon).
-- **suffix** — Trailing content.
-- **expand-icon** — Icon shown when the item is collapsed.
 - **collapse-icon** — Icon shown when the item is expanded.
 - **content** — Block content that belongs to the item but not to its header row (e.g. comment body, action bar). Hidden when a branch is collapsed.
+- **expand-icon** — Icon shown when the item is collapsed.
+- **prefix** — Leading content before the label (e.g. icon).
+- **suffix** — Trailing content.
 
 ### CSS parts
 
 - `base` — The item row.
-- `expand-button` — The chevron toggle area.
-- `checkbox` — The native checkbox input.
-- `label` — The label container.
 - `branch` — Wrapper around the content and children slots; carries the indent guide.
-- `content` — The content slot wrapper (block area between the row and the children).
+- `checkbox` — The native checkbox input.
 - `children` — The nested items container.
+- `content` — The content slot wrapper (block area between the row and the children).
+- `expand-button` — The chevron toggle area.
+- `label` — The label container.
 
 ### CSS custom properties
 
-All layout tokens (`--row-height`, `--row-padding-inline`, `--chevron-size`, `--item-gap`, `--indent-*`) are declared on `<l-tree>` and cascade to every item. See [Tree › CSS custom properties](/elements/tree#css-custom-properties).
+All layout tokens (`--row-height`, `--row-padding-inline`, `--chevron-size`, `--item-gap`, `--indent-*`) are declared on `<l-tree>` and cascade to every item. See [Tree › CSS custom properties](https://luxen-ui.com/elements/tree#css-custom-properties).

package/dist/templates/elements/tree.md

@@ -322,11 +322,6 @@ import 'luxen-ui/tree-item';
 
 ### Attributes & Properties
 
-- **selection**: `TreeSelection` (default: `'single'`) — Selection behaviour:
-- `single` (default): at most one item selected via `aria-selected`.
-- `multiple`: any number of items selected. Checkboxes are rendered.
-- `leaf`: only leaf items can be selected (single). Branches just toggle.
-- `none`: purely navigable, no selection state.
 - **independent**: `boolean` (default: `false`) — When set with `selection="multiple"`, parent and children selection are decoupled:
 toggling a parent does NOT toggle its descendants and vice versa.
 Without it, selection cascades both ways and branches may become indeterminate.
@@ -334,13 +329,18 @@ Without it, selection cascades both ways and branches may become indeterminate.
 In independent mode the tree never writes `indeterminate`: the consumer owns
 it (e.g. to show a partial state computed from rows not in the DOM). On
 leaving the cascade, the tree clears only the flags its cascade wrote.
+- **selection**: `TreeSelection` (default: `'single'`) — Selection behaviour:
+- `single` (default): at most one item selected via `aria-selected`.
+- `multiple`: any number of items selected. Checkboxes are rendered.
+- `leaf`: only leaf items can be selected (single). Branches just toggle.
+- `none`: purely navigable, no selection state.
 
 ### Methods
 
+- **collapseAll()** — Collapses every item.
+- **expandAll()** — Expands every item that has children.
 - **getAllItems({ includeDisabled = true }: unknown)** → `TreeItem[]` — Returns all items in document (flat) order, including nested ones.
 - **getSelection()** → `TreeItem[]` — Returns currently selected items.
-- **expandAll()** — Expands every item that has children.
-- **collapseAll()** — Collapses every item.
 
 ### Events
 
@@ -348,13 +348,13 @@ leaving the cascade, the tree clears only the flags its cascade wrote.
 
 ### CSS custom properties
 
-- `--indent-size` (default: `1rem`) — Horizontal indent per depth level.
-- `--indent-guide-width` (default: `1px`) — Thickness of the vertical guide line between a parent and its children. Set to `0` to hide guides.
-- `--indent-guide-style` (default: `solid`) — Line style of the guide (`solid`, `dashed`, `dotted`, `double`…).
+- `--chevron-size` (default: `1.125rem`) — Size of the expand/collapse chevron box.
 - `--indent-guide-color` — Color of the guide line.
+- `--indent-guide-style` (default: `solid`) — Line style of the guide (`solid`, `dashed`, `dotted`, `double`…).
+- `--indent-guide-width` (default: `1px`) — Thickness of the vertical guide line between a parent and its children. Set to `0` to hide guides.
+- `--indent-size` (default: `1rem`) — Horizontal indent per depth level.
+- `--item-gap` (default: `0.375rem`) — Horizontal gap between chevron, prefix, label and suffix on the row; also drives the content slot left indent.
 - `--row-height` (default: `1.75rem`) — Minimum row height.
 - `--row-padding-inline` (default: `0.25rem`) — Inner inline padding of the row; also drives the content slot left indent and the indent guide column.
-- `--chevron-size` (default: `1.125rem`) — Size of the expand/collapse chevron box.
-- `--item-gap` (default: `0.375rem`) — Horizontal gap between chevron, prefix, label and suffix on the row; also drives the content slot left indent.
 
-See [`<l-tree-item>`](/elements/tree-item) for the per-item API.
+See [`<l-tree-item>`](https://luxen-ui.com/elements/tree-item) for the per-item API.