fixes #703

docs/resources/changelog.md

@@ -8,7 +8,8 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
-- Fixed a form submission bug
+- Fixed a bug that prevented form submission from working as expected in some cases
+- Fixed a bug that prevented `<sl-split-panel>` from toggling `vertical` properly [#703](https://github.com/shoelace-style/shoelace/issues/703)
 
 ## 2.0.0-beta.71
 

src/components/split-panel/split-panel.ts

@@ -185,6 +185,11 @@ export default class SlSplitPanel extends LitElement {
     this.position = this.pixelsToPercentage(this.positionInPixels);
   }
 
+  @watch('vertical')
+  handleVerticalChange() {
+    this.detectSize();
+  }
+
   handleResize(entries: ResizeObserverEntry[]) {
     const { width, height } = entries[0].contentRect;
     this.size = this.vertical ? height : width;
@@ -197,6 +202,7 @@ export default class SlSplitPanel extends LitElement {
 
   render() {
     const gridTemplate = this.vertical ? 'gridTemplateRows' : 'gridTemplateColumns';
+    const gridTemplateAlt = this.vertical ? 'gridTemplateColumns' : 'gridTemplateRows';
     const primary = `
       clamp(
         0%,
@@ -216,6 +222,9 @@ export default class SlSplitPanel extends LitElement {
       this.style[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;
     }
 
+    // Unset the alt grid template property
+    this.style[gridTemplateAlt] = '';
+
     return html`
       <div part="panel start" class="start">
         <slot name="start"></slot>