Splitter

Two panes, one handle: drag it, or focus it and use arrows. Home and End jump to the edges.

Example

Editor

Panels resize from 10 to 90 percent.

Preview

Drag the bar, or focus it and press arrows.

<Splitter>
  <div slot="first">Editor</div>
  <div slot="second">Preview</div>
</Splitter>

Prop	Type	Default	Description
`direction`	`horizontal \| vertical`	`horizontal`	Split axis.
`initial / min / max`	`number`	`50 / 10 / 90`	First-pane percent bounds.
`label`	`string`	`Resize panels`	Handle accessible name.

:root {
  --ink-split-pos: 50%;
}