From a75a6de8e227c42656a7f597ae322972f2461064 Mon Sep 17 00:00:00 2001
From: Josiah Ivey <josiah.ivey@gmail.com>
Date: Mon, 18 Aug 2025 14:08:10 -0700
Subject: [PATCH 1/2] update selected border styles

---
 src/components/Tabs.tsx                       |  1 +
 src/components/ToggleButtonGroup/styles.ts    |  2 ++
 .../__snapshots__/ButtonBar.spec.tsx.snap     |  6 ++--
 .../__snapshots__/Tabs.spec.tsx.snap          |  6 ++--
 .../ToggleButtonGroup.spec.tsx.snap           | 30 +++++++++----------
 5 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
index 7a2a032d5..ba25617df 100644
--- a/src/components/Tabs.tsx
+++ b/src/components/Tabs.tsx
@@ -58,6 +58,7 @@ export const buttonBarItemCss = css`
 
   &[data-selected=true] {
     background: ${colors.palette.neutralLight};
+    box-shadow: inset 0 0 0 0.1rem ${colors.palette.pale};
   }
   &:hover:not([data-selected=true]) {
     background: ${colors.palette.neutralLighter};
diff --git a/src/components/ToggleButtonGroup/styles.ts b/src/components/ToggleButtonGroup/styles.ts
index 2b8c3fde7..b52f823a4 100644
--- a/src/components/ToggleButtonGroup/styles.ts
+++ b/src/components/ToggleButtonGroup/styles.ts
@@ -25,6 +25,8 @@ export const StyledToggleButton = styled(ToggleButton)`
 
   &[data-selected] {
     background-color: ${colors.palette.neutralLighter};
+    // achieve a 2px border effect without disrupting layout
+    box-shadow: inset 0 0 0 0.1rem ${colors.palette.pale};
   }
 
   &[data-disabled] {
diff --git a/src/components/__snapshots__/ButtonBar.spec.tsx.snap b/src/components/__snapshots__/ButtonBar.spec.tsx.snap
index 970493657..ac3f4feda 100644
--- a/src/components/__snapshots__/ButtonBar.spec.tsx.snap
+++ b/src/components/__snapshots__/ButtonBar.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ButtonBar renders 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gsnTZi bqPtVr"
+    class="sc-gsnTZi hYiJLm"
   >
     <a>
       One
@@ -18,7 +18,7 @@ exports[`ButtonBar renders 1`] = `
 exports[`ButtonBar renders large size 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gsnTZi eOLdKk"
+    class="sc-gsnTZi hZAvUF"
   >
     <button>
       One
@@ -35,7 +35,7 @@ exports[`ButtonBar renders large size 1`] = `
 exports[`ButtonBar renders small size 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gsnTZi fgJhCT"
+    class="sc-gsnTZi gFPpQi"
   >
     <button>
       One
diff --git a/src/components/__snapshots__/Tabs.spec.tsx.snap b/src/components/__snapshots__/Tabs.spec.tsx.snap
index a42515279..7ab309304 100644
--- a/src/components/__snapshots__/Tabs.spec.tsx.snap
+++ b/src/components/__snapshots__/Tabs.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`Tabs component button-bar styling renders 1`] = `
     data-react-aria-hidden="true"
   />
   <div
-    class="sc-bczRLJ kWkDUg"
+    class="sc-bczRLJ iBDygX"
     data-orientation="horizontal"
     data-rac=""
   >
@@ -82,7 +82,7 @@ exports[`Tabs component button-bar styling renders large size 1`] = `
     data-react-aria-hidden="true"
   />
   <div
-    class="sc-bczRLJ kTnZrf"
+    class="sc-bczRLJ feXGds"
     data-orientation="horizontal"
     data-rac=""
   >
@@ -158,7 +158,7 @@ exports[`Tabs component button-bar styling renders small size 1`] = `
     data-react-aria-hidden="true"
   />
   <div
-    class="sc-bczRLJ kFnuyo"
+    class="sc-bczRLJ kAIoyP"
     data-orientation="horizontal"
     data-rac=""
   >
diff --git a/src/components/__snapshots__/ToggleButtonGroup.spec.tsx.snap b/src/components/__snapshots__/ToggleButtonGroup.spec.tsx.snap
index 0a07bbace..dff4f6518 100644
--- a/src/components/__snapshots__/ToggleButtonGroup.spec.tsx.snap
+++ b/src/components/__snapshots__/ToggleButtonGroup.spec.tsx.snap
@@ -13,7 +13,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode multiple 1`] = `
 >
   <button
     aria-pressed={true}
-    className="sc-dkzDqf ivRDBW"
+    className="sc-dkzDqf kCUTAu"
     data-button-id="red"
     data-rac=""
     data-react-aria-pressable={true}
@@ -39,7 +39,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode multiple 1`] = `
   </button>
   <button
     aria-pressed={false}
-    className="sc-dkzDqf ivRDBW"
+    className="sc-dkzDqf kCUTAu"
     data-button-id="green"
     data-rac=""
     data-react-aria-pressable={true}
@@ -64,7 +64,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode multiple 1`] = `
   </button>
   <button
     aria-pressed={false}
-    className="sc-dkzDqf ivRDBW"
+    className="sc-dkzDqf kCUTAu"
     data-button-id="blue"
     data-rac=""
     data-react-aria-pressable={true}
@@ -89,7 +89,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode multiple 1`] = `
   </button>
   <button
     aria-pressed={false}
-    className="sc-dkzDqf ivRDBW"
+    className="sc-dkzDqf kCUTAu"
     data-button-id="yellow"
     data-rac=""
     data-react-aria-pressable={true}
@@ -114,7 +114,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode multiple 1`] = `
   </button>
   <button
     aria-pressed={false}
-    className="sc-dkzDqf ivRDBW"
+    className="sc-dkzDqf kCUTAu"
     data-button-id="orange"
     data-rac=""
     data-react-aria-pressable={true}
@@ -153,7 +153,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode single 1`] = `
 >
   <button
     aria-checked={true}
-    className="sc-dkzDqf ivRDBW"
+    className="sc-dkzDqf kCUTAu"
     data-button-id="red"
     data-rac=""
     data-react-aria-pressable={true}
@@ -180,7 +180,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode single 1`] = `
   </button>
   <button
     aria-checked={false}
-    className="sc-dkzDqf ivRDBW"
+    className="sc-dkzDqf kCUTAu"
     data-button-id="green"
     data-rac=""
     data-react-aria-pressable={true}
@@ -206,7 +206,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode single 1`] = `
   </button>
   <button
     aria-checked={false}
-    className="sc-dkzDqf ivRDBW"
+    className="sc-dkzDqf kCUTAu"
     data-button-id="blue"
     data-rac=""
     data-react-aria-pressable={true}
@@ -232,7 +232,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode single 1`] = `
   </button>
   <button
     aria-checked={false}
-    className="sc-dkzDqf ivRDBW"
+    className="sc-dkzDqf kCUTAu"
     data-button-id="yellow"
     data-rac=""
     data-react-aria-pressable={true}
@@ -258,7 +258,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode single 1`] = `
   </button>
   <button
     aria-checked={false}
-    className="sc-dkzDqf ivRDBW"
+    className="sc-dkzDqf kCUTAu"
     data-button-id="orange"
     data-rac=""
     data-react-aria-pressable={true}
@@ -298,7 +298,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode undefined 1`] = `
 >
   <button
     aria-checked={true}
-    className="sc-dkzDqf ivRDBW"
+    className="sc-dkzDqf kCUTAu"
     data-button-id="red"
     data-rac=""
     data-react-aria-pressable={true}
@@ -325,7 +325,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode undefined 1`] = `
   </button>
   <button
     aria-checked={false}
-    className="sc-dkzDqf ivRDBW"
+    className="sc-dkzDqf kCUTAu"
     data-button-id="green"
     data-rac=""
     data-react-aria-pressable={true}
@@ -351,7 +351,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode undefined 1`] = `
   </button>
   <button
     aria-checked={false}
-    className="sc-dkzDqf ivRDBW"
+    className="sc-dkzDqf kCUTAu"
     data-button-id="blue"
     data-rac=""
     data-react-aria-pressable={true}
@@ -377,7 +377,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode undefined 1`] = `
   </button>
   <button
     aria-checked={false}
-    className="sc-dkzDqf ivRDBW"
+    className="sc-dkzDqf kCUTAu"
     data-button-id="yellow"
     data-rac=""
     data-react-aria-pressable={true}
@@ -403,7 +403,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode undefined 1`] = `
   </button>
   <button
     aria-checked={false}
-    className="sc-dkzDqf ivRDBW"
+    className="sc-dkzDqf kCUTAu"
     data-button-id="orange"
     data-rac=""
     data-react-aria-pressable={true}

From 15f647c009e53ceee4e75067c2aae40943876469 Mon Sep 17 00:00:00 2001
From: Josiah Ivey <josiah.ivey@gmail.com>
Date: Tue, 2 Sep 2025 12:08:45 -0700
Subject: [PATCH 2/2] bump package version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b5c6bf0b5..000db1b4e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openstax/ui-components",
-  "version": "1.18.3",
+  "version": "1.18.4",
   "license": "MIT",
   "source": "./src/index.ts",
   "types": "./dist/index.d.ts",