Props

Name	Type	Default	Description
items	TreeListItemData[]	-	The tree. See the item fields below.
density	'compact' | 'balanced' | 'spacious'	'balanced'	Block padding of a row: 4px, 8px, or 12px.
variant	'lineGuides' | 'noGuides'	'lineGuides'	Whether parent and child rows are joined by a guide line.
header	string	-	Plain title above the tree. Use the header slot for rich content.
label	string	-	Accessible name of the tree when there is no visible header.

TreeListItemData

Field	Type	Description
id	string	Stable identity for focus and expansion.
label	string	Visible name.
description	string	Secondary line.
icon	string	Leading glyph name, or a CSS icon class starting with i-.
endIcon	string	Trailing glyph or CSS icon class.
badge	string	Trailing count.
children	TreeListItemData[]	Nested items. Present means the row can expand.
href / target	string	Renders the row as a link. target="_blank" adds rel="noopener noreferrer".
onClick	(event: MouseEvent) => void	Renders a leaf as a button.
isDisabled	boolean	The row does not take focus or activation.
isSelected	boolean	Callers mark the current item. The tree has no root selection value and does not force a single selected row.
isExpanded	boolean	Starting expansion. Later toggles are owned by the tree.
className	string	Extra class on that row.
style	CSSProperties	Inline style on that row.

The start and end slots receive { item } and replace icon and endIcon.

A row's accessible name is its label. The description is exposed with aria-describedby, so the chevron and icons stay out of the name. Typeahead matches the label only. A visible header names the tree and wins over a passed aria-label. A keydown listener on the root that calls preventDefault keeps arrow keys from moving focus inside the tree.

Theming

Indent is --astryx-spacing-4. Row content uses --astryx-spacing-2 of inline padding and the same gap. The guide is a 1px emphasized border. Focus uses the shared focus outline tokens. A selected row uses the accent muted fill.