API reference
Headless tree exposes four small directives: a root controller, tree items, nested groups, and an optional indicator. The behavior layer handles focus movement, expansion, selection, and typeahead, while the owner controls DOM shape and visuals.
tngTree
Root controller for selection mode, roving focus, visible node calculation, and typeahead.
| Input | Type | Default | Notes |
|---|
selectionMode | 'single' | 'multiple' | 'none' | 'none' | Controls whether item clicks update selection. |
orientation | 'vertical' | 'horizontal' | 'vertical' | Adjusts orientation metadata and horizontal key semantics. |
value | TngTreeValue | readonly TngTreeValue[] | null | undefined | Controlled selection value. |
defaultValue | TngTreeValue | readonly TngTreeValue[] | null | undefined | Initial uncontrolled selection. |
disabled | boolean | false | Disables traversal and interaction for the whole tree. |
| Output | Type | Notes |
|---|
valueChange | TngTreeValue | readonly TngTreeValue[] | null | Emits when selection changes. |
| Host attribute | Value | Purpose |
|---|
data-slot | "tree" | Stable root styling hook. |
role | "tree" | ARIA tree role. |
aria-orientation | "vertical" | "horizontal" | Reflects the normalized orientation input. |
aria-multiselectable | "true" | "false" | null | Reflected whenever selection mode is not 'none'. |
tabindex | "0" | "-1" | Keeps the composite focus entry on the active tree surface. |
tngTreeItem
Focus target and state container for one node in the hierarchy.
| Input | Type | Default | Notes |
|---|
value | TngTreeValue | Required | Unique node identity used for selection and traversal. |
expanded | boolean | undefined | undefined | Controlled expansion state. |
defaultExpanded | boolean | false | Initial uncontrolled branch state. |
disabled | boolean | false | Disables selection, expansion, and focus entry for the node. |
| Output | Type | Notes |
|---|
expandedChange | boolean | Emits when branch expansion toggles. |
| Host attribute | Value | Purpose |
|---|
data-slot | "tree-item" | Stable node styling hook. |
role | "treeitem" | ARIA role for each node. |
tabindex | "0" | "-1" | Managed by the root roving-focus controller. |
data-expanded | "true" | "false" | State hook for branch visibility. |
data-selected | "true" | "false" | Selection styling hook. |
data-disabled | "true" | "false" | Disabled styling hook. |
aria-expanded | "true" | "false" | null | Only present for expandable branch items. |
aria-selected | "true" | "false" | null | Only present when the tree selection mode is not 'none'. |
tngTreeGroup and tngTreeIndicator
Groups register branch children with the parent item. Indicators mirror expansion state and forward click toggles back to the tree controller.
| Directive | State / host attrs | Notes |
|---|
tngTreeGroup | data-slot="tree-group", role="group" | Wraps child items and tells the parent item it can expand. |
tngTreeIndicator | data-slot="tree-indicator", data-expanded="true|false" | Mirrors parent expansion state and toggles that state on click. |
Selection and typeahead
ArrowUp and ArrowDown move through visible enabled nodes.ArrowRight expands a collapsed branch or moves to its first visible child.ArrowLeft collapses an expanded branch or moves back to the nearest selectable parent.Home and End jump to the first or last visible enabled node.Enter and Space toggle selection according to the active selection mode.- Printable keys run typeahead using item
aria-label first, then text content, then the node value.