Keyboard navigation action for drawer/form rungs — up/down + left/right cycling
A Svelte action for form-like drawers where fields are "rungs" on a vertical rail. ↑/↓ step between fields; ←/→ cycle values.
Click the panel to focus: ↑/↓ move between fields · ←/→ cycle values · Esc exit
import { railNav } from 'jatui';
<div use:railNav={{
order: () => ['title', 'type', 'priority'],
onAction: (id, dir, host) => cycleField(id, dir),
onEscape: () => closeDrawer(),
}}>
<input data-rail-id="title" />
<div data-rail-id="type" tabindex="-1">…</div>
<div data-rail-id="priority" tabindex="-1">…</div>
</div>Two classes are applied to rung host elements — style them in your app or component scope:
| Class | When applied | Suggested style |
|---|---|---|
.rail-focus | Currently active rung | Outline ring (keyboard-only via :focus-visible) |
.rail-cycled | ~280ms after ← / → fires | Brief background pulse confirming value changed |