From 7be226e5c00b9422418f04c23b407938db8345d7 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 18 Nov 2025 14:41:19 -0500
Subject: [PATCH] add min size and round track width; fixes #1206

---
 .../docs/docs/resources/changelog.md          |  1 +
 .../src/components/tab-group/tab-group.css    | 43 ++++++++++---------
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index f67dea039..4f0f694ce 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -17,6 +17,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed a bug in `<wa-slider>` that caused some touch devices to end up with the incorrect value [issue:1703]
 - Fixed a bug in `<wa-card>` that prevented some slots from being detected correctly [discuss:1450]
 - Fixed a bug in `<wa-dropdown>` that caused the browser to hang when cancelling the `wa-hide` event [issue:1483]
+- Fixed a bug in `<wa-tab-group>` that ensures the active indicator always shows [issue:1206]
 - Improved performance of `<wa-icon>` so initial rendering occurs faster, especially with multiple icons on the page [issue:1729]
 
 ## 3.0.0
diff --git a/packages/webawesome/src/components/tab-group/tab-group.css b/packages/webawesome/src/components/tab-group/tab-group.css
index 6606fa163..be05898c4 100644
--- a/packages/webawesome/src/components/tab-group/tab-group.css
+++ b/packages/webawesome/src/components/tab-group/tab-group.css
@@ -3,6 +3,9 @@
   --track-color: var(--wa-color-neutral-fill-normal);
   --track-width: 0.125rem;
 
+  /* Private */
+  --safe-track-width: max(0.5px, round(var(--track-width), 0.5px));
+
   display: block;
 }
 
@@ -77,12 +80,12 @@
   flex: 1 1 auto;
   position: relative;
   flex-direction: row;
-  border-bottom: solid var(--track-width) var(--track-color);
+  border-bottom: solid var(--safe-track-width) var(--track-color);
 }
 
 .tab-group-top .indicator {
-  bottom: calc(-1 * var(--track-width));
-  border-bottom: solid var(--track-width) var(--indicator-color);
+  bottom: calc(-1 * var(--safe-track-width));
+  border-bottom: solid var(--safe-track-width) var(--indicator-color);
 }
 
 .tab-group-top .body {
@@ -90,8 +93,8 @@
 }
 
 .tab-group-top ::slotted(wa-tab[active]) {
-  border-block-end: solid var(--track-width) var(--indicator-color);
-  margin-block-end: calc(-1 * var(--track-width));
+  border-block-end: solid var(--safe-track-width) var(--indicator-color);
+  margin-block-end: calc(-1 * var(--safe-track-width));
 }
 
 .tab-group-top ::slotted(wa-tab-panel) {
@@ -128,12 +131,12 @@
   flex: 1 1 auto;
   position: relative;
   flex-direction: row;
-  border-top: solid var(--track-width) var(--track-color);
+  border-top: solid var(--safe-track-width) var(--track-color);
 }
 
 .tab-group-bottom .indicator {
-  top: calc(-1 * var(--track-width));
-  border-top: solid var(--track-width) var(--indicator-color);
+  top: calc(-1 * var(--safe-track-width));
+  border-top: solid var(--safe-track-width) var(--indicator-color);
 }
 
 .tab-group-bottom .body {
@@ -141,8 +144,8 @@
 }
 
 .tab-group-bottom ::slotted(wa-tab[active]) {
-  border-block-start: solid var(--track-width) var(--indicator-color);
-  margin-block-start: calc(-1 * var(--track-width));
+  border-block-start: solid var(--safe-track-width) var(--indicator-color);
+  margin-block-start: calc(-1 * var(--safe-track-width));
 }
 
 .tab-group-bottom ::slotted(wa-tab-panel) {
@@ -164,12 +167,12 @@
 .tab-group-start .tabs {
   flex: 0 0 auto;
   flex-direction: column;
-  border-inline-end: solid var(--track-width) var(--track-color);
+  border-inline-end: solid var(--safe-track-width) var(--track-color);
 }
 
 .tab-group-start .indicator {
-  inset-inline-end: calc(-1 * var(--track-width));
-  border-right: solid var(--track-width) var(--indicator-color);
+  inset-inline-end: calc(-1 * var(--safe-track-width));
+  border-right: solid var(--safe-track-width) var(--indicator-color);
 }
 
 .tab-group-start .body {
@@ -178,8 +181,8 @@
 }
 
 .tab-group-start ::slotted(wa-tab[active]) {
-  border-inline-end: solid var(--track-width) var(--indicator-color);
-  margin-inline-end: calc(-1 * var(--track-width));
+  border-inline-end: solid var(--safe-track-width) var(--indicator-color);
+  margin-inline-end: calc(-1 * var(--safe-track-width));
 }
 
 .tab-group-start ::slotted(wa-tab-panel) {
@@ -201,12 +204,12 @@
 .tab-group-end .tabs {
   flex: 0 0 auto;
   flex-direction: column;
-  border-left: solid var(--track-width) var(--track-color);
+  border-left: solid var(--safe-track-width) var(--track-color);
 }
 
 .tab-group-end .indicator {
-  inset-inline-start: calc(-1 * var(--track-width));
-  border-inline-start: solid var(--track-width) var(--indicator-color);
+  inset-inline-start: calc(-1 * var(--safe-track-width));
+  border-inline-start: solid var(--safe-track-width) var(--indicator-color);
 }
 
 .tab-group-end .body {
@@ -215,8 +218,8 @@
 }
 
 .tab-group-end ::slotted(wa-tab[active]) {
-  border-inline-start: solid var(--track-width) var(--indicator-color);
-  margin-inline-start: calc(-1 * var(--track-width));
+  border-inline-start: solid var(--safe-track-width) var(--indicator-color);
+  margin-inline-start: calc(-1 * var(--safe-track-width));
 }
 
 .tab-group-end ::slotted(wa-tab-panel) {