Work in progress - do not use in production. This component is still being built: it is not flagged Ready for Dev, so its markup, attributes, events and styles can all still change without notice, it is not covered by the accessibility gate, and it is not published to npm. It is on this site so the work can be seen and reviewed - nothing more.

Resizable

Draggable split panes, rendered as <section is="root-resizable">.

Usage

Each child becomes a pane; a resize handle is inserted between them.

Left pane

Right pane

Left pane

Right pane

<section is="root-resizable">
  <section>Left pane</section>
  <section>Right pane</section>
</section>

Keyboard (on a separator)

Key	Action
`ArrowRight` / `ArrowLeft` (horizontal)	Grow / shrink the leading pane
`ArrowDown` / `ArrowUp` (vertical)	Grow / shrink the leading pane
`Home` / `End`	Minimum / maximum split

Attributes

Attribute	Type	Default	Description
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`	Split axis

Events

Event	Detail	Description
`root-resizable.change`	`{ sizes }`	Fired after a drag or keyboard resize (pane grow weights)

Extends

HTMLElement - use with <section is="root-resizable">. Separators are role="separator" with aria-orientation and aria-valuenow/min/max.