Splitter

Splitter component specification

• Splitter component specification
  • Owned by
    • Requires approval from:
    • Signed off by:
    • Revision history
  • Overview
    • Acceptance criteria
  • User stories
    • End-user stories
    • Developer stories
  • Functionality
    • End-user experience
    • Developer experience
      • Initialization
      • Nested splitters
    • Localization
    • Keyboard interactions
  • API
    • Properties and attributes
    • Methods
    • Events
    • Slots
    • CSS Shadow parts
  • Test scenarios
  • Accessibility
    • ARIA roles and properties
    • Keyboard support
    • Right to Left support

Owned by

Team name: Astrea

Developer name: Bozhidara Pachilova, Monika Kirkova

Designer name: TBD

Requires approval from:

• Radoslav Karaivanov
• Svilen Dimchevski

Signed off by:

• Damyan Petev
• Radoslav Mirchev

Revision history

Version	Author	Date	Notes
1	Radoslav Karaivanov	2026-01-12	Initial draft

Overview

The igc-splitter component displays two adjacent panels, allowing the user to reposition, expand and collapse the panels.

Additionally, developers can configure the layout of the panels, either horizontal or vertical, as well as, min/max sizes for the panels, wether to disable the user interactions, etc.

Acceptance criteria

• The element must be integrated and themeable with the theming mechanism of the library.
• The element must be WAI-ARIA compliant, using the appropriate semantic elements and ARIA roles.

User stories

End-user stories

As and end-user, I expect to be able to:

• see two panels of content, side by side, with a divider bar between them.
• resize the panels by dragging the divider bar.
• focus the divider bar and use the keyboard to resize the panels.
• collapse and expand the panels.

Developer stories

As a developer, I expect to be able to:

• slot arbitrary content inside the panels of the element.
• slot another splitter inside one of the panels, allowing for more advanced layouts.
• control the display layout of the panels - either horizontal or vertical.
• set wether the panels can be resized by the end-user interaction.
• set wether a panel can be collapsed.
• set a default size for each panel.
• set a min and max sizes for a panel.

Functionality

End-user experience

[Design Handoff]

Developer experience

Initialization

<igc-splitter>
  <div slot="start">Start panel</div>
  <div slot="end">End panel</div>
</igc-splitter>

Nested splitters

<igc-splitter>
  <div slot="start">Start panel</div>
  <igc-splitter slot="end">
    <div slot="start">Nested start panel</div>
    <div slot="end">Nested end panel</div>
  </igc-splitter>
</igc-splitter>

Localization

None applicable.

Keyboard interactions

Key combination	Result
Arrow Up
Arrow Down
Arrow Left
Arrow Right
Ctrl + Arrow + direction

API

Properties and attributes

Property	Attribute	Reflected	Type	Default	Description
orientation	orientation	Yes	horizontal | vertical	horizontal	Orientation layout for the splitter panels.
disableCollapse	disable-collapse	Yes	boolean	false	Wether the user can collapse the panels of the splitter.
disableResize	disable-resize	Yes	boolean	false	Wether the user can resize the panels by interacting with the splitter bar.
startSize	start-size	No	string | undefined	-	The initial display size of the start panel.
endSize	end-size	No	string | undefined	-	The initial display size of the end panel.
startMinSize	start-min-size	No	string | undefined	-	The minimum display size for the start panel.
startMaxSize	start-max-size	No	string | undefined	-	The maximum display size for the start panel.
endMinSize	end-min-size	No	string | undefined	-	The minimum display size for the end panel.
endMaxSize	end-max-size	No	string | undefined	-	The maximum display size for the end panel.

Methods

Name	Type signature	Description
toggle	(panel: 'start' | 'end'): void	Toggles the collapsed state of the given panel.

Events

Name	Cancellable	Description
igcResizeStart	false	Fired when a user start resizing with the splitter bar.
igcResizing	false	Fired during user resizing.
igcResizeEnd	false	Fired when the user stops resizing.

Slots

Name	Description
start	The start panel ot the the splitter. In horizontal layout this is the leftmost panel and in vertical layout it is the topmost.
end	The end panel of the splitter. In horizontal layout this is the rightmost panel and in vertical layout it is the bottom one.
drag-handle?
expand-icon?
collapse-icon?

CSS Shadow parts

Part	Description

Test scenarios

Accessibility

ARIA roles and properties

Following the official guidelines the following ARIA properties must be present on the splitter's bar:

• it must have an ARIA role of separator.
• it must have aria-orientation equal to the orientation value of the splitter element.
• if the splitter is interactive (i.e. resizable or collapsible), it must have a tabindex of 0, otherwise it must be set to -1.
• Nice to have: consider using aria-value|now|min|max if appropriate.

Keyboard support

Already covered by the relevant section of the specification.

Right to Left support

The splitter element should work in Right-to-Left context without additional setup or configuration.