Reference
QUICK REFERENCE / 02
Reference
These are browser-facing contracts. Action bindings, permissions and transport configuration belong to the consuming application.
All surfaces support unmodified arrow-key focus navigation and macOS Ctrl+n / Ctrl+p for next / previous focus; other platforms can opt in per host. List, group, grid and tree surfaces also support Home/End. Alt + arrows stage moves, where supported, without changing focus until the morph.
Keyboard attributes
Every host accepts space-separated data-key-<intent> bindings; an empty attribute disables that intent. Focus intents are focus-next, focus-previous,focus-left, focus-right, focus-first and focus-last; movement uses move-up/down/left/right and cancel. Each surface uses only its applicable directions. Bento also accepts resize-up/down/left/right andgrid-previous/next. The shared defaults are in core/keyboard.ts.
Kanban also accepts the original data-key-select-* aliases below; a corresponding data-key-focus-* takes precedence.
| Attribute | Default | Purpose |
|---|---|---|
data-key-select-next | ↓ / j | Focus next card |
data-key-select-previous | ↑ / k | Focus previous card |
data-key-select-left | ← / h | Focus card in previous lane |
data-key-select-right | → / l | Focus card in next lane |
data-key-move-up | Alt + ↑ / k | Move above previous card |
data-key-move-down | Alt + ↓ / j | Move below next card |
data-key-move-left | Alt + ← / h | Move to previous lane |
data-key-move-right | Alt + → / l | Move to next lane |
data-key-cancel | Esc | Clear target marks |
Override a slot with space-separated key tokens, e.g. data-key-select-next="ArrowDown j". Kanban compatibility defaults come from contracts/kanban.ts.
DOM and events
| Host | Descendants | Emitted event |
|---|---|---|
rocket-kanban-board | [data-kanban-lane][data-col], [data-kanban-card] | rocket-kanban-move { cardId, col, before }rocket-kanban-select { cardId } |
rocket-sortable-list | [data-sortable-item] | rocket-sortable-move { itemId, before } |
rocket-drag-group | [data-drop-list] + [data-drag-item] | rocket-drag-group-move { itemId, fromList, toList, before } |
rocket-bento-workspace | [data-bento-grid] + [data-bento-item] | rocket-bento-move / rocket-bento-resize |
rocket-sortable-tree | [data-tree-node] + [data-tree-children] | rocket-tree-move { itemId, fromParent, toParent, before } |
Events bubble and cross the custom-element boundary. before: "" means append. Keep IDs stable across renders so morph and FLIP can match items.