Skip to content

Splitter: N panes with draggable, focusable dividers (WAI-ARIA window splitter) - #503

Merged
tannevaled merged 2 commits into
mainfrom
splitter
Oct 23, 2026
Merged

tannevaled merged 2 commits into
mainfrom
splitter

Conversation

@tannevaled

Copy link
Copy Markdown
Contributor

Adds Splitter: N panes (horizontal, or Vertical) with a draggable, focusable divider between each neighbouring pair, after the WAI-ARIA APG window-splitter pattern (opened before writing: keyboard Left/Right, Enter collapse/restore, Home/End, role separator with aria-valuemin/max/now).

  • Fixed panes sized by an mvvm.Observable[int] (logical px), flexible panes by an Observable weight, Min/Max per pane, Visible Observable switches a pane and its divider off.
  • A divider moves the pane before it by +d and the one after by -d inside their bounds; the other panes keep their pixels. A flexible pair changes its ratio, which survives a window resize.
  • Collapsible fixed panes collapse when dragged below half their Min and come back on double-click, Enter, or a drag out.
  • OnResized(changed) fires once per finished gesture, so a view-model persists what the person chose and nothing a layout produced.
  • Divider line, accent and focus ring >= 3:1 against Background and Surface in the default light and dark themes (SplitterColors, tested).
  • Cursor(x, y) for the host, RoleSeparator, Handle(j) for accessibility trees.

100% statement coverage; README updated. Release as a MINOR (v0.339.0) after merge.

🤖 Generated with Claude Code

tannevaled and others added 2 commits October 23, 2026 18:52
… splitter)

Paned has two panes, a fixed 10 px clamp and no keyboard. Splitter is the
general one:

- fixed panes sized by an mvvm.Observable (logical px), flexible panes by an
  Observable weight; Min and Max per pane; Visible Observable switches a pane
  (and its divider) off;
- a divider moves the pane before it by +d and the one after by -d within their
  bounds, the other panes keep their pixels; a flexible pair changes its ratio,
  which survives a window resize;
- Collapsible fixed panes go to nothing when dragged below half their Min, and
  come back on a double-click (a second press within 450 ms, or an EventClick
  tagged "double"), Enter, or a drag out; the divider stays;
- keyboard per the APG pattern: arrows (Shift = 4 steps), Home/End, Enter, Tab
  between dividers and panes; RoleSeparator with aria-valuemin/max/now and
  "Resize <pane>" as its name;
- the divider line, the accent and the focus ring are at least 3:1 against
  Background and Surface in both default themes (SplitterColors);
- Cursor(x, y) tells the host "col-resize" or "row-resize"; Vertical gives the
  stacked variant;
- OnResized reports, once per finished gesture, the panes the person changed, so
  a view-model can persist what was chosen and nothing that a layout produced.

100% statement coverage.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
@tannevaled
tannevaled merged commit 3d28543 into main Oct 23, 2026
1 check passed
@tannevaled
tannevaled deleted the splitter branch October 23, 2026 16:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant