feat: Improve styling for collapsed non interactive state

[rijkvanzanten]

This pull request updates the drag-to-toggle functionality and refines the styling logic for the SplitPanel component. The main focus is on improving how drag and toggle states are handled and styled, especially for collapsed panels and when toggling via drag. The changes ensure that visual cues and cursor styles are only applied in the correct interaction states.

Improved drag-to-toggle and collapsed state handling:

• Added the sp-drag-toggle class dynamically based on the dragToToggle state, allowing for more precise styling when toggling panels via drag.
• Updated the cursor style logic so that the ew-resize and ns-resize cursors are only shown when dragging is active and either drag-to-toggle is enabled or the panel is not collapsed. [1] [2]

Refined divider and root styling:

• Changed the CSS selectors so that divider styling (such as the after pseudo-element and sizing) only applies when the root has either sp-drag-toggle or is not collapsed, and the divider is not disabled. This prevents visual artifacts in inappropriate states. [1] [2]
• Removed redundant or incorrectly nested CSS, simplifying the style definitions for maintainability.

These changes collectively enhance the user experience by ensuring that drag and toggle interactions behave and appear consistently and intuitively.

[Copilot]

Pull request overview

This PR refines how SplitPanel exposes and applies interaction-state styling, with the goal of avoiding resize/toggle visual cues (cursor + divider hit-area affordances) when the panel is collapsed and non-interactive.

Changes:

• Adds a root-level sp-drag-toggle class tied to the dragToToggle prop to enable more targeted styling.
• Restricts root cursor styling (ew-resize / ns-resize) to only apply while dragging and when drag-to-toggle is enabled or the panel is not collapsed.
• Reworks divider ::after hit-area styling selectors so they only apply when interaction should be possible (root is drag-toggle-enabled or not collapsed) and when the divider is not disabled (.sp-disabled).

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.