From cff57b6562993f8d874849b0f0f31cd83fc5b2ef Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 11 Mar 2022 14:31:25 -0500
Subject: [PATCH] fixes #703

---
 docs/resources/changelog.md               | 3 ++-
 src/components/split-panel/split-panel.ts | 9 +++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 0e5a124d..09051a07 100644
--- a/docs/resources/changelog.md
+++ b/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
 
diff --git a/src/components/split-panel/split-panel.ts b/src/components/split-panel/split-panel.ts
index 2cf8e78c..9dee30a8 100644
--- a/src/components/split-panel/split-panel.ts
+++ b/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>