HySplitter

A container that manages resizable panels separated by draggable handles. Uses CSS Grid internally for layout. Coordinates resize logic between child hy-splitter-panel and hy-splitter-handle elements.

Key Features

• Horizontal and vertical orientations
• Multiple panels (2+) in a single group
• Min/max size constraints on panels
• Collapsible panels
• Full keyboard navigation (WAI-ARIA Window Splitter pattern)
• SSR compatible

Examples

Basic sidebar layout

<hy-splitter>
  <hy-splitter-panel default-size="25" min-size="15" collapsible>
    <nav>Sidebar</nav>
  </hy-splitter-panel>
  <hy-splitter-handle></hy-splitter-handle>
  <hy-splitter-panel default-size="75">
    <main>Content</main>
  </hy-splitter-panel>
</hy-splitter>

Vertical split

<hy-splitter orientation="vertical">
  <hy-splitter-panel default-size="70"> Editor </hy-splitter-panel>
  <hy-splitter-handle></hy-splitter-handle>
  <hy-splitter-panel default-size="30" min-size="10" collapsible> Terminal </hy-splitter-panel>
</hy-splitter>

Three panels

<hy-splitter>
  <hy-splitter-panel default-size="20" min-size="10" collapsible> File tree </hy-splitter-panel>
  <hy-splitter-handle></hy-splitter-handle>
  <hy-splitter-panel default-size="60"> Editor </hy-splitter-panel>
  <hy-splitter-handle></hy-splitter-handle>
  <hy-splitter-panel default-size="20" min-size="10" collapsible> Properties </hy-splitter-panel>
</hy-splitter>

Programmatic control

const splitter = document.querySelector('hy-splitter');
splitter.getSizes(); // [25, 75]
splitter.setSizes([30, 70]);
splitter.resetSizes();

Events

• resize - Fires continuously during resize. Detail: { sizes: number[] }
• resize-end - Fires when resize completes. Detail: { sizes: number[] }

Slots

• default - Splitter panels and handles

Methods

getSizes()

Returns the current sizes of all panels as percentages.

setSizes()

Sets all panel sizes at once. Array length must match panel count.

resetSizes()

Resets panels to their initial default sizes.