feature(splitter): Added support for collapsed panes state

[rkaraivanov]

Description

Added support for collapsed panes state in the splitter component. This enhancement allows developers to programmatically control the collapsed state of panes, enabling more dynamic and interactive layouts.
The feature includes methods to collapse and expand panes, as well as events to listen for state changes.

Type of Change

• New feature (non-breaking change that adds functionality)

Related Issues

Closes #2297

Checklist

• My code follows the project's coding standards
• I have tested my changes locally
• I have updated documentation if needed

[Copilot]

Pull request overview

Adds public API support for controlling and observing collapsed/expanded pane state in igc-splitter, aligning the component with the requested “persist/restore layout” scenarios.

Changes:

• Introduces startCollapsed / endCollapsed properties (reflected as attributes) to programmatically control pane collapsed state.
• Adds igcExpansionChanged event and corresponding event args types/exports.
• Updates Storybook stories, tests, and changelog to document and validate the new behavior.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
stories/splitter.stories.ts	Adds Storybook controls + a persisted-layout example using the new properties/event.
src/index.ts	Re-exports the new IgcSplitterExpansionChangedEventArgs type from the public entry.
src/components/splitter/types.ts	Adds the igcExpansionChanged event typing to the splitter event map.
src/components/splitter/splitter.ts	Implements collapsed-state properties and emits igcExpansionChanged for user interactions.
src/components/splitter/splitter.spec.ts	Adds unit tests for collapsed-state properties, attribute reflection, and the new event behavior.
CHANGELOG.md	Documents the new splitter collapsed-state API and event in the changelog.

Comments suppressed due to low confidence (2)

src/components/splitter/splitter.ts:513

• startCollapsed/endCollapsed are declared with reflect: true, but when collapsed state changes via toggle() / _handleExpanderAction() (i.e. by updating _collapsedPane), Lit will only consider _collapsedPane changed and will not re-reflect the start-collapsed / end-collapsed attributes. This can leave attributes stale (e.g. switching collapsed pane from start->end can keep start-collapsed present). Consider explicitly requesting updates for both public properties when _collapsedPane changes so attribute reflection stays consistent.

    this._collapsedPane = target;

    this._internals.setState('start-collapsed', this._isCollapsed('start'));
    this._internals.setState('end-collapsed', this._isCollapsed('end'));

src/components/splitter/splitter.ts:170

• Same as the other @query() fields above: consider re-enabling cached queries to avoid repeated DOM lookups during interaction (consistent with other components, e.g. src/components/button/button-base.ts:54).

  @query('[part~="end-pane"]')
  private readonly _endPane!: HTMLElement;

[Copilot]

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (2)

src/components/splitter/splitter.ts:163

• @query('[part~="base"]') is no longer cached, which is inconsistent with other components that query a stable base part (e.g. src/components/tile-manager/tile.ts:189 uses @query('[part~="base"]', true)). Since <div part="base"> is always rendered here, caching avoids repeated DOM queries on each access and matches established pattern.

  @query('[part~="base"]')

stories/splitter.stories.ts:379

• This demo reads persisted state with JSON.parse(saved) twice and will throw if the stored value is not valid JSON (or if localStorage is blocked). Parsing once and guarding errors makes the story more robust.

    const saved = localStorage.getItem(PERSISTED_LAYOUT_KEY);
    const startCollapsed = saved ? JSON.parse(saved).startCollapsed : false;
    const endCollapsed = saved ? JSON.parse(saved).endCollapsed : false;