From 45f48fcd59c9383358619bad9941a7c88d9b09cf Mon Sep 17 00:00:00 2001
From: Marissa Huysentruyt <marissa.huysentruyt@heysparkbox.com>
Date: Wed, 3 Jul 2024 17:34:03 -0400
Subject: [PATCH 1/2] fix(splitview): add is-focused class for
 horizontally-focused variant styles

---
 components/splitview/index.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/splitview/index.css b/components/splitview/index.css
index 748e9faf336..30098506a15 100644
--- a/components/splitview/index.css
+++ b/components/splitview/index.css
@@ -143,6 +143,7 @@
 		outline: none;
 	}
 
+	&.is-focused,
 	&:focus-visible {
 		outline: none;
 		background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));

From b2c42c4c94025d28ec9bd0daad3fdb2363ad4257 Mon Sep 17 00:00:00 2001
From: Marissa Huysentruyt <marissa.huysentruyt@heysparkbox.com>
Date: Wed, 3 Jul 2024 17:33:33 -0400
Subject: [PATCH 2/2] docs(splitview): fix horizontally-focused variant to
 display properly

---
 components/splitview/stories/splitview.stories.js | 10 ++++++++++
 components/splitview/stories/template.js          |  2 ++
 2 files changed, 12 insertions(+)

diff --git a/components/splitview/stories/splitview.stories.js b/components/splitview/stories/splitview.stories.js
index 2ae5f7b60c1..17fd6f45007 100644
--- a/components/splitview/stories/splitview.stories.js
+++ b/components/splitview/stories/splitview.stories.js
@@ -35,6 +35,15 @@ export default {
 				disable: true,
 			},
 		},
+		isFocused: {
+			name: "Focusable",
+			type: "boolean",
+			table: {
+				type: { summary: "boolean" },
+				category: "Component",
+				disable: true,
+			},
+		},
 		collapsePosition: {
 			name: "Collapse position",
 			type: "string",
@@ -100,6 +109,7 @@ HorizontallyFocused.play = async ({ canvasElement }) => {
 };
 HorizontallyFocused.args = {
 	orientation: "horizontal",
+	isFocused: true,
 	isResizable: true,
 	isCollapsible: false,
 	panelLabels: ["Left", "Right"],
diff --git a/components/splitview/stories/template.js b/components/splitview/stories/template.js
index c116589abb4..7d8037d3dd2 100644
--- a/components/splitview/stories/template.js
+++ b/components/splitview/stories/template.js
@@ -9,6 +9,7 @@ export const Template = ({
 	customClasses = [],
 	orientation = "horizontal",
 	isResizable = false,
+	isFocused = false,
 	isCollapsible = false,
 	collapsePosition,
 	panelLabels = [],
@@ -44,6 +45,7 @@ export const Template = ({
 			<div
 				class=${classMap({
 					[`${rootClass}-splitter`]: true,
+					["is-focused"]: isFocused,
 					["is-draggable"]: isResizable,
 					[`is-collapsed-${collapsibleClassName}`]: isCollapsible,
 				})}