Components · Tree

Tree

The TreeView primitive — a thin wrapper over the @phauna/ds WAI-ARIA <Tree>. A flat list of role="treeitem" rows where depth is drawn by leading guide rails, not DOM nesting, so keyboard nav and roving tabindex stay linear. A branch carries a rotating chevron (90° when open); a leaf gets an equal-size spacer so labels align. Selection reads by an inset accent rail plus the accent-soft fill (never colour alone); a trailing meta slot holds member counts.

framed · Teams · Save the Dogs

Working teams 12
Downtown Rescue 5
Foster network 38
Transport drivers 24
Intake & triage 11
Regional coalitions 5
Northeast chapter 41
Southwest chapter 19
Adopters & fosters 1.2k

selectedId: teams-foster-network

What's shown

Selected node — accent rail
Foster network is selected: accent-soft fill, accent icon, and an inset 2px left rail via box-shadow, with aria-selected. Single controlled selection — one node at a time.
Expand / collapse toggle
A chevron button that rotates 90° when the branch is open (Working teams, Regional). Collapsed branches (Harbor, Events) hide their subtree; aria-expanded tracks state.
Indent guide rails
One hairline --color-rule rail per ancestor level, keyed to the toggle box so it lines up under the parent chevron. Leaves get an equal-size spacer so labels align.
Counts & states
The trailing tree__meta slot holds member counts (tabular). Hover lifts a row to surface-2 (Intake & triage pinned); the roving-tabindex node shows the focus ring (Southwest pinned).

Source · ds/tree/TreeView.tsx (framed <Surface inset> well · selectedId/onSelect · defaultExpanded · type-ahead) over @phauna/ds/grid <Tree>. Chrome from @phauna/ds catalog/grid-tree.css — .tree__node--selected inset rail, .tree__guide rails, .tree__toggle--open/--leaf, .tree__meta.