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 Experimental badge sh
- Fixed a bug in `` that caused some touch devices to end up with the incorrect value [issue:1703]
- Fixed a bug in `` that prevented some slots from being detected correctly [discuss:1450]
- Fixed a bug in `` that caused the browser to hang when cancelling the `wa-hide` event [issue:1483]
+- Fixed a bug in `` that ensures the active indicator always shows [issue:1206]
- Improved performance of `` 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) {