luxen-ui 0.6.2 → 0.8.0

package/dist/templates/elements/select.md

@@ -6,10 +6,7 @@ outline: deep
 
 Selects are used to pick a single option from a dropdown list. Commonly used in forms for choosing categories, countries, or any predefined set of values.
 
-<ElementSpec
-  tag="select"
-  type="native"
-/>
+**`.l-select`** — Native HTML Element
 
 ## Options
 
@@ -44,26 +41,23 @@ Selects are used to pick a single option from a dropdown list. Commonly used in
 
 ### Criteria
 
-| Check | Description |
-|-------|-------------|
-| Role | Uses native `<select>` — built-in `combobox`/`listbox` semantics |
-| Accessible name | Must have an associated `<label>` element |
-| Disabled state | Native `disabled` attribute prevents interaction and announces as disabled |
-| Required state | Native `required` attribute communicates mandatory field to assistive tech |
+- **Role** — Uses native `<select>` — built-in `combobox`/`listbox` semantics
+- **Accessible name** — Must have an associated `<label>` element
+- **Disabled state** — Native `disabled` attribute prevents interaction and announces as disabled
+- **Required state** — Native `required` attribute communicates mandatory field to assistive tech
 
 ### Rules
+
 - Always pair the `<select>` with a visible `<label>` element using `for`/`id`
 - Use native `<option>` elements for choices — the browser handles all ARIA semantics
 
 ### Keyboard interactions
 
-| Key | Description |
-|-----|-------------|
-| Enter | Opens the option list or confirms selection |
-| Space | Opens the option list |
-| ArrowDown | Moves to the next option |
-| ArrowUp | Moves to the previous option |
-| Tab | Moves focus to the next focusable element |
+- `Enter` — Opens the option list or confirms selection
+- `Space` — Opens the option list
+- `ArrowDown` — Moves to the next option
+- `ArrowUp` — Moves to the previous option
+- `Tab` — Moves focus to the next focusable element
 
 ## API reference
 
@@ -75,26 +69,21 @@ Selects are used to pick a single option from a dropdown list. Commonly used in
 
 ### Attributes & Properties
 
-<ApiTable :data="[
-  { Attribute: 'disabled', Description: 'Disables the select' },
-  { Attribute: 'required', Description: 'Marks the field as required' },
-  { Attribute: 'multiple', Description: 'Allows multiple selections' },
-]" />
+- **disabled** — Disables the select.
+- **required** — Marks the field as required.
+- **multiple** — Allows multiple selections.
 
 ### Events
 
-<ApiTable :data="events" />
+- **change** — Fires when an option is selected.
+- **input** — Fires when the value changes.
 
 ### CSS classes
 
-<ApiTable :data="[
-  { Class: '.l-select', Description: 'Base select element with `appearance: base-select`' },
-  { Class: '.l-select-item', Description: 'Option styling with checkmark indicator' },
-]" />
+- `.l-select` — Base select element with `appearance: base-select`.
+- `.l-select-item` — Option styling with checkmark indicator.
 
 ### CSS custom properties
 
-<ApiTable :data="[
-  { Name: '--border-radius', Description: 'Border radius (default: 4px)' },
-  { Name: '--border-color', Description: 'Border color (adapts to light/dark)' },
-]" />
+- `--border-radius` (default: `4px`) — Border radius.
+- `--border-color` — Border color (adapts to light/dark).

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

@@ -2,48 +2,13 @@
 outline: deep
 ---
 
-<style scoped>
-.phone-deck {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 24px;
-  justify-content: center;
-  padding: 24px 0;
-}
-.phone {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-}
-.phone .label {
-  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
-  font-size: 11px;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--vp-c-text-2);
-}
-.phone iframe {
-  width: 340px;
-  height: 640px;
-  border: 10px solid #18181b;
-  border-radius: 40px;
-  background: var(--vp-c-bg);
-  box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.25);
-}
-</style>
-
 # Sticky Bar
 
 A bar docked to the viewport edge, painted in the document's **top layer**. Pass `for="<id>"` to track an element; the bar reveals when that element scrolls out of view (e.g. an Add to cart button on a mobile product page). Omit `for` for a permanently visible bar.
 
 Common use cases: mobile product Add to cart, sticky save action on long forms, post-form newsletter signup, cookie banners, environment indicators, promo announcements.
 
-<ElementSpec
-  tag="l-sticky-bar"
-  type="shadow"
-/>
+**`<l-sticky-bar>`** — Custom Element · Shadow DOM
 
 ## Examples
 
@@ -95,13 +60,12 @@ Both demos start with the bar **revealed** (the Add to cart button sits below th
 
 The element is a positioning shell — it adds no role of its own. Slotted content keeps its native semantics: a `<button>` stays a button, a `<form>` stays a form, links remain in the focus order.
 
-| Check | Description |
-|-------|-------------|
-| Motion | Respects `prefers-reduced-motion` — the slide animation collapses to instant |
-| Focus order | Slotted content stays in the natural focus order. Do not focus-trap inside the bar — it is not a dialog |
-| Contrast | The bar inherits text and background from slotted content — apply your own contrast tokens |
+- **Motion** — Respects `prefers-reduced-motion` — the slide animation collapses to instant
+- **Focus order** — Slotted content stays in the natural focus order. Do not focus-trap inside the bar — it is not a dialog
+- **Contrast** — The bar inherits text and background from slotted content — apply your own contrast tokens
 
 ### Rules
+
 - Keep the bar action self-explanatory (e.g. duplicate the in-page button label, do not introduce a new verb)
 - Use `--offset` to clear a sticky header when `placement="top"` to avoid overlap
 - Do not nest live regions or modal-like behavior inside the bar
@@ -116,33 +80,25 @@ import 'luxen-ui/sticky-bar';
 
 ### Attributes & Properties
 
-<ApiTable :data="[
-  { Attribute: 'for', Description: 'HTML id of the element to track. The bar reveals when it leaves the viewport. Omit for a permanently visible bar' },
-  { Attribute: 'placement', Description: '`bottom` (default) or `top`. Edge to dock against' },
-  { Attribute: 'root', Description: 'HTML id of the scrolling ancestor used as the IntersectionObserver root. Omit to use the viewport. Useful for nested scroll containers' },
-]" />
+- **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.
 
 ### Events
 
-<ApiTable :data="[
-  { Event: 'show', Description: 'Fired before the bar reveals. Cancelable' },
-  { Event: 'after-show', Description: 'Fired after the reveal animation completes' },
-  { Event: 'hide', Description: 'Fired before the bar hides. Cancelable' },
-  { Event: 'after-hide', Description: 'Fired after the hide animation completes' },
-]" />
+- **show** (cancelable) — Fired before the bar reveals. Cancelable.
+- **after-show** — Fired after the reveal animation completes.
+- **hide** (cancelable) — Fired before the bar hides. Cancelable.
+- **after-hide** — Fired after the hide animation completes.
 
 ### Slots
 
-<ApiTable :data="[
-  { Slot: '(default)', Description: 'Bar content. Owns its own background, padding, and typography' },
-]" />
+- **(default)** — Bar content. Owns its own background, padding, and typography.
 
 ### CSS custom properties
 
-<ApiTable :data="[
-  { Name: '--show-duration', Description: 'Reveal animation duration. Default `200ms`' },
-  { Name: '--hide-duration', Description: 'Dismiss animation duration. Default `200ms`' },
-  { Name: '--offset', Description: 'Distance from the active edge. Default `0px`. Use to clear a sticky header when `placement=&quot;top&quot;`' },
-]" />
+- `--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"`.
 
 > **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/toast.md

@@ -6,10 +6,7 @@ outline: deep
 
 Toasts are used to display brief, non-blocking notifications that auto-dismiss. Commonly used to confirm actions, report errors, or surface system messages without interrupting the user's workflow.
 
-<ElementSpec
-  tag="l-toast"
-  type="custom"
-/>
+**`<l-toast>`** — Custom Element (no Shadow DOM)
 
 ## Options
 
@@ -299,16 +296,15 @@ toast({
 
 ### Criteria
 
-| Check | Description |
-|-------|-------------|
-| Live region | Container uses `role="log"` with `aria-live="polite"` for screen reader announcements |
-| Role | Items use `role="status"` (`role="alert"` for `danger` variant) |
-| Accessible name | Heading and message linked via `aria-labelledby` / `aria-describedby` |
-| Decorative elements | Icons, accent bar, and timer bar are hidden with `aria-hidden="true"` |
-| Timer pausing | Timer pauses on hover and focus, providing keyboard parity |
-| Motion | Respects `prefers-reduced-motion` |
+- **Live region** — Container uses `role="log"` with `aria-live="polite"` for screen reader announcements
+- **Role** — Items use `role="status"` (`role="alert"` for `danger` variant)
+- **Accessible name** — Heading and message linked via `aria-labelledby` / `aria-describedby`
+- **Decorative elements** — Icons, accent bar, and timer bar are hidden with `aria-hidden="true"`
+- **Timer pausing** — Timer pauses on hover and focus, providing keyboard parity
+- **Motion** — Respects `prefers-reduced-motion`
 
 ### Rules
+
 - Keep messages short and readable within the auto-dismiss duration
 - Set `duration` to `5000` or longer for readability
 - Use `variant="danger"` for critical alerts — it promotes the toast to `role="alert"`
@@ -317,10 +313,8 @@ toast({
 
 ### Keyboard interactions
 
-| Key | Description |
-|-----|-------------|
-| Escape | Dismisses the most recent toast |
-| Tab | Moves focus into the toast (pauses the auto-dismiss timer) |
+- `Escape` — Dismisses the most recent toast
+- `Tab` — Moves focus into the toast (pauses the auto-dismiss timer)
 
 ## API reference
 
@@ -342,55 +336,41 @@ toast({ text: 'Hello!' });
 
 ### Attributes & Properties
 
-<ApiTable :data="[
-  { Attribute: 'placement', Description: 'Position of the toast stack: `top-start`, `top-center`, `top-end` (default), `bottom-start`, `bottom-center`, `bottom-end`' },
-  { Attribute: 'duration', Description: 'Default auto-dismiss delay in ms. Default `5000`. Set to `0` or `Infinity` to keep open until dismissed' },
-  { Attribute: 'variant', Description: 'Default variant for toast items: `info`, `success`, `warning`, `danger`' },
-]" />
+- **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.
+- **variant**: `ToastVariant | undefined` — Default variant for toast items: `info`, `success`, `warning`, `danger`.
 
 ### Methods
 
-<ApiTable :data="[
-  { Method: 'toast()', Arguments: '`options: ToastOptions`', Returns: '`HTMLElement`', Description: 'Creates and shows a toast notification' },
-]" />
+- **toast(options: ToastOptions)** → `HTMLElement` — Create and show a toast notification.
 
 ### ToastOptions
 
-<ApiTable :data="[
-  { Property: 'text', Type: '`string`', Default: '—', Description: 'The message text to display. Required unless `html` is provided' },
-  { Property: 'html', Type: '`string`', Default: '—', Description: 'HTML content for the message, sanitized via the [Sanitizer API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API). Ignored if `text` is provided' },
-  { Property: 'heading', Type: '`string`', Default: '—', Description: 'Heading text displayed above the message' },
-  { Property: 'icon', Type: '`string`', Default: '—', Description: 'Iconify icon name (e.g. `lucide:check`). Replaces the accent bar, colored by variant' },
-  { Property: 'variant', Type: '`string`', Default: 'Element\'s `variant`', Description: 'Override variant for this toast' },
-  { Property: 'duration', Type: '`number`', Default: 'Element\'s `duration`', Description: 'Override auto-dismiss delay in ms. `0` or `Infinity` to keep open until dismissed' },
-  { Property: 'timer', Type: '`boolean`', Default: '`false`', Description: 'Show a countdown progress bar at the bottom' },
-]" />
+- **text**: `string` — The message text to display. Required unless `html` is provided
+- **html**: `string` — HTML content for the message, sanitized via the [Sanitizer API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API). Ignored if `text` is provided
+- **heading**: `string` — Heading text displayed above the message
+- **icon**: `string` — Iconify icon name (e.g. `lucide:check`). Replaces the accent bar, colored by variant
+- **variant**: `string` (default: Element's `variant`) — Override variant for this toast
+- **duration**: `number` (default: Element's `duration`) — Override auto-dismiss delay in ms. `0` or `Infinity` to keep open until dismissed
+- **timer**: `boolean` (default: `false`) — Show a countdown progress bar at the bottom
 
 ### Events
 
-<ApiTable :data="[
-  { Event: 'l-show', Detail: '`{ toast }`', Description: 'Emitted when a toast begins to show. Cancelable' },
-  { Event: 'l-after-show', Detail: '`{ toast }`', Description: 'Emitted after the show animation completes' },
-  { Event: 'l-hide', Detail: '`{ toast }`', Description: 'Emitted when a toast begins to hide. Cancelable' },
-  { Event: 'l-after-hide', Detail: '`{ toast }`', Description: 'Emitted after the hide animation completes and toast is removed' },
-]" />
+- **show** (cancelable) — Emitted when a toast begins to show. Cancelable.
+- **after-show** — Emitted after the show animation completes.
+- **hide** (cancelable) — Emitted when a toast begins to hide. Cancelable.
+- **after-hide** — Emitted after the hide animation completes and toast is removed.
 
 ### CSS classes
 
-<ApiTable :data="[
-  { Class: 'l-toast-item', Description: 'Toast item custom element (generated internally)' },
-  { Class: '.l-toast-accent', Description: 'Left accent bar, colored by variant' },
-  { Class: '.l-toast-content', Description: 'Content area' },
-  { Class: '.l-toast-heading', Description: 'Heading text' },
-  { Class: '.l-toast-message', Description: 'Message text' },
-  { Class: '.l-toast-timer', Description: 'Countdown progress bar (auto-added for timed toasts)' },
-]" />
+- `.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-timer` — The countdown progress bar (for timed toasts).
 
 ### CSS custom properties
 
-<ApiTable :data="[
-  { Property: '--gap', Description: 'Gap between stacked items. Default `0.5rem`' },
-  { Property: '--width', Description: 'Width of the toast stack. Default `28rem`' },
-  { Property: '--show-duration', Description: 'Show animation duration. Default `200ms`' },
-  { Property: '--hide-duration', Description: 'Hide animation duration. Default `200ms`' },
-]" />
+- `--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.

package/dist/templates/elements/tree.md

@@ -6,10 +6,7 @@ outline: deep
 
 Tree views present hierarchical data like file explorers, navigation menus, and taxonomies. Each node expands/collapses to reveal nested items and can be selected in several ways.
 
-<ElementSpec
-  tag="l-tree"
-  type="shadow"
-/>
+**`<l-tree>`** — Custom Element · Shadow DOM
 
 ## Options
 
@@ -17,8 +14,6 @@ Tree views present hierarchical data like file explorers, navigation menus, and
 
 Wrap `<l-tree-item>` nodes inside `<l-tree>`. Nested `<l-tree-item>` children become sub-nodes automatically.
 
-<ComponentWrapper vertical :html="treeBasic" />
-
 ```html
 <l-tree>
   <l-tree-item>
@@ -47,8 +42,6 @@ Wrap `<l-tree-item>` nodes inside `<l-tree>`. Nested `<l-tree-item>` children be
 
 Place any element in the `prefix` slot to render a leading icon before the label. Icons inherit the current text color.
 
-<ComponentWrapper vertical :html="treeIcons" />
-
 ```html
 <l-tree>
   <l-tree-item expanded>
@@ -114,8 +107,6 @@ Place any element in the `prefix` slot to render a leading icon before the label
 
 Override the `expand-icon` and `collapse-icon` slots to show a different icon per state — e.g. a closed folder when the branch is collapsed and an open folder when expanded. Leaves keep the `prefix` slot for their own icon.
 
-<ComponentWrapper vertical :html="treeExpandIcons" />
-
 ```html
 <l-tree>
   <l-tree-item expanded>
@@ -177,14 +168,10 @@ Place any interactive element inside a `<l-tree-item>` to expose per-row actions
 
 This demo is controlled from Vue state: the yellow `…` trigger is rendered only on the selected row via `v-if`, so clicking another row moves the button there without duplicating it in the DOM.
 
-<TreeActionsDemo />
-
 ### Multiple selection
 
 Set `selection="multiple"` to render a native checkbox on every item. Toggling a parent cascades the selection to its descendants and sets the indeterminate state when only some children are selected.
 
-<ComponentWrapper vertical :html="treeMultiple" />
-
 ```html
 <l-tree selection="multiple">
   <l-tree-item expanded>
@@ -205,8 +192,6 @@ Set `selection="multiple"` to render a native checkbox on every item. Toggling a
 
 Add `independent` to decouple parents and children: a parent can be selected without ticking any of its descendants and vice-versa. Useful when nodes represent independent concepts (categories, tags, permissions) rather than aggregations.
 
-<ComponentWrapper vertical :html="treeIndependent" />
-
 ```html
 <l-tree
   selection="multiple"
@@ -230,8 +215,6 @@ Add `independent` to decouple parents and children: a parent can be selected wit
 
 Set `selection="leaf"` when only terminal nodes represent selectable values. Clicking a branch only toggles its expansion.
 
-<ComponentWrapper vertical :html="treeLeaf" />
-
 ```html
 <l-tree selection="leaf">
   <l-tree-item expanded>
@@ -252,8 +235,6 @@ Set `selection="leaf"` when only terminal nodes represent selectable values. Cli
 
 Add `disabled` to any item to prevent selection and interaction. The item remains visible and part of the structure.
 
-<ComponentWrapper vertical :html="treeDisabled" />
-
 ```html
 <l-tree selection="multiple">
   <l-tree-item expanded>
@@ -269,48 +250,41 @@ Add `disabled` to any item to prevent selection and interaction. The item remain
 
 Add `lazy` to an item whose children will be fetched on first expand. The component emits `lazy-load`; set `loading` to render a spinner in place of the chevron, then append children and remove `lazy`.
 
-<TreeLazyDemo />
-
 ## Examples
 
 ### Comment thread
 
 A discussion tree styled like a Reddit comment thread. Demonstrates stacking `prefix` (avatar), the default slot (multi-line content + action buttons), and swapped `expand-icon` / `collapse-icon` slots (`lucide:circle-plus` / `lucide:circle-minus`). The `::part(base)` and `::part(label)` are overridden to align content to the top and allow wrapping; `--indent-size` and `--indent-guide-width` are tuned for the denser look.
 
-<TreeRedditDemo />
-
 ## Accessibility
 
 ### Criteria
 
-| Check | Description |
-|-------|-------------|
-| Role | Container has `role="tree"`, items have `role="treeitem"`, groups have `role="group"` |
-| Expanded state | Branches expose `aria-expanded` reflecting open state. Leaf nodes omit the attribute. |
-| Selected state | Selected items expose `aria-selected="true"` |
-| Multi-selectable | Container sets `aria-multiselectable="true"` when `selection="multiple"` |
-| Disabled state | Disabled items expose `aria-disabled="true"` and stay in the DOM for discoverability |
-| Focus management | Roving tabindex: only one item is in the tab order at a time; arrow keys move focus within the tree |
-| Motion | Chevron rotation and spinner respect `prefers-reduced-motion` |
+- **Role** — Container has `role="tree"`, items have `role="treeitem"`, groups have `role="group"`
+- **Expanded state** — Branches expose `aria-expanded` reflecting open state. Leaf nodes omit the attribute.
+- **Selected state** — Selected items expose `aria-selected="true"`
+- **Multi-selectable** — Container sets `aria-multiselectable="true"` when `selection="multiple"`
+- **Disabled state** — Disabled items expose `aria-disabled="true"` and stay in the DOM for discoverability
+- **Focus management** — Roving tabindex: only one item is in the tab order at a time; arrow keys move focus within the tree
+- **Motion** — Chevron rotation and spinner respect `prefers-reduced-motion`
 
 ### Rules
+
 - Every item needs visible text content for its accessible name
 - Use `selection="leaf"` when branches are never valid values — this prevents keyboard users from accidentally selecting aggregations
 - Prefer `selection="multiple" independent` for forms where parent selection is a distinct choice from the children
 
 ### Keyboard interactions
 
-| Key | Description |
-|-----|-------------|
-| ArrowDown | Moves focus to the next visible item |
-| ArrowUp | Moves focus to the previous visible item |
-| ArrowRight | Expands a collapsed branch, or moves to the first child when already expanded |
-| ArrowLeft | Collapses an expanded branch, or moves to the parent item |
-| Home | Moves focus to the first visible item |
-| End | Moves focus to the last visible item |
-| Enter | Activates the item (selects or toggles expansion depending on mode) |
-| Space | Activates the item (selects or toggles expansion depending on mode) |
-| * | Expands all sibling branches of the focused item |
+- `ArrowDown` — Moves focus to the next visible item
+- `ArrowUp` — Moves focus to the previous visible item
+- `ArrowRight` — Expands a collapsed branch, or moves to the first child when already expanded
+- `ArrowLeft` — Collapses an expanded branch, or moves to the parent item
+- `Home` — Moves focus to the first visible item
+- `End` — Moves focus to the last visible item
+- `Enter` — Activates the item (selects or toggles expansion depending on mode)
+- `Space` — Activates the item (selects or toggles expansion depending on mode)
+- `*` — Expands all sibling branches of the focused item
 
 ## API reference
 
@@ -323,37 +297,35 @@ import 'luxen-ui/tree-item';
 
 ### Attributes & Properties
 
-<ApiTable :data="[
-  { Attribute: 'selection', Description: 'Selection mode: `single` (default), `multiple`, `leaf`, or `none`' },
-  { Attribute: 'independent', Description: 'When set with `selection=&quot;multiple&quot;`, parent and descendants selection are decoupled (no cascade, no indeterminate)' },
-]" />
+- **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.
 
 ### Methods
 
-<ApiTable :data="[
-  { Method: 'getAllItems()', Description: 'Returns every `<l-tree-item>` in document order (including nested)' },
-  { Method: 'getSelection()', Description: 'Returns the currently selected items' },
-  { Method: 'expandAll()', Description: 'Expands every branch' },
-  { Method: 'collapseAll()', Description: 'Collapses every item' },
-]" />
+- **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
 
-<ApiTable :data="[
-  { Event: 'selection-change', Description: 'Fired when the selection changes. Detail: `{ selection }`' },
-]" />
+- **selection-change** — Fired when the selected items change. Detail: `{ selection: TreeItem[] }`.
 
 ### CSS custom properties
 
-<ApiTable :data="[
-  { Name: '--indent-size', Description: 'Horizontal indent per depth level. Default `1rem`' },
-  { Name: '--indent-guide-width', Description: 'Thickness of the vertical guide line between a parent and its children. Default `1px`. Set to `0` to hide guides' },
-  { Name: '--indent-guide-style', Description: 'Line style of the guide: `solid` (default), `dashed`, `dotted`, `double`' },
-  { Name: '--indent-guide-color', Description: 'Color of the guide line' },
-  { Name: '--row-height', Description: 'Minimum row height. Default `1.75rem`' },
-  { Name: '--row-padding-inline', Description: 'Inner inline padding of the row; also drives the content slot left indent and the guide column. Default `0.25rem`' },
-  { Name: '--chevron-size', Description: 'Size of the expand/collapse chevron/avatar box. Default `1.125rem`' },
-  { Name: '--item-gap', Description: 'Horizontal gap between chevron, prefix, label and suffix on the row; also drives the content slot left indent. Default `0.375rem`' },
-]" />
+- `--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`…).
+- `--indent-guide-color` — Color of the guide line.
+- `--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.