Controllers are plain JavaScript objects that manage interaction state — which item is focused, what is selected, whether groups are expanded. They have no DOM dependency and can be tested without a browser.
Available controllers
- ListController — flat and grouped list navigation with single/multi-select;
supports nested tree navigation when used with the
navigatoraction - NestedController — tree navigation with expand/collapse
- TabularController — row/column navigation for data tables
ListController
Manages a flat or grouped list. Items are identified by a value field. Supports single
selection (default), multi-selection, and type-ahead search.
| Method | Description |
|---|---|
setItems(items, fields) | Load items with field mapping |
focusNext() | Move focus to next item |
focusPrev() | Move focus to previous item |
focusFirst() | Move focus to first item |
focusLast() | Move focus to last item |
select(value) | Select item by value |
search(char) | Type-ahead: jump to matching item |
NestedController
Extends ListController for hierarchical data. Tracks expanded/collapsed state per group using path keys. Follows WAI-ARIA TreeView keyboard patterns.
| Method | Description |
|---|---|
expand(path) | Expand group; if already expanded, move focus to first child |
collapse(path) | Collapse group; if on a child, move focus to parent |
toggle(path) | Toggle expand/collapse state |
See @rokkit/states for full API reference and usage examples.