<sl-split-panel>.vertical cannot be toggled (by property or attribute).

[CetinSert]

Describe the bug

<sl-split-panel> vertical (property and attribute) cannot be toggled.

To Reproduce

Steps to reproduce the behavior:

1. Navigate to https://shoelace.style/components/split-panel
2. Select any <sl-split-panel> element in developer tools so that it is $0 in console.
3. Evaluate $0.vertical = !$0.vertical once.
4. Evaluate $0.vertical = !$0.vertical again.

Notice issues with sizing and the component getting stuck in one orientation.

Demo

See above.

Screenshots

N/A

Browser / OS

• OS: all
• Browser: all
• Browser version: all

Additional information

N/A

[CetinSert]

Here is a Sync℠ with a workaround using 2 <sl-split-panel>s!

---

@claviska – syncHTML.io is the no-reload playground I am building; I would love to invite you over from the likes of CodePen and JSFiddle. Here is more info: https://elefunc.blog/sync/ (please note a lot more happened since last post).

[claviska]

The vertical toggle is working, but a couple things weren't happening:

1. The size needed to be updated when orientation changes
2. The grid-template-rows|columns style wasn't being unset when toggling between horizontal and vertical

This has been fixed in cff57b6 and will be available in the next release.