update

packages/webawesome/docs/docs/resources/changelog.md

@@ -38,13 +38,14 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed a bug in `<wa-icon>` that caused some icon libraries to render with the incorrect SVG fill [issue:1733]
 - Fixed a bug in `<wa-tree-item>` that caused the spinner to not show when lazy loading [issue:1678]
 - 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]
 - Fixed a bug in `<wa-dropdown-item>` that prevented the icon dependency from being imported [issue:1825]
 - Fixed a bug in `<wa-select>` that prevented clicks on the tag's remove button from removing options in multiple mode
 - Fixed a bug in `<wa-select>` that caused tags to appear in alphabetical order instead of selection order when using `multiple`
-- Improved performance of `<wa-icon>` so initial rendering occurs faster, especially with multiple icons on the page [issue:1729]
-- Improved `<wa-slider>` to not throw an error when string values are passed to the `min`, `max`, and `step` properties [issue:1823]
 - Fixed a bug in Web Awesome form controls that caused `<wa-input form="foo">` to set the form property to equal `"foo"` instead of returning an `HTMLFormElement` breaking platform expectations. [pr:1815]
 - Fixed a bug in `<wa-button>` causing it to not copy over attributes for form submissions. [pr:1815]
+- Improved performance of `<wa-icon>` so initial rendering occurs faster, especially with multiple icons on the page [issue:1729]
+- Improved `<wa-slider>` to not throw an error when string values are passed to the `min`, `max`, and `step` properties [issue:1823]
 - Improved performance of all components by fixing how CSS is imported and reused [issue:1812]
 - Modified the default `transition` styles of `<wa-dropdown-item>` to use design tokens [pr:1693]
 

packages/webawesome/src/components/tab-group/tab-group.styles.ts

@@ -6,6 +6,9 @@ export default css`
     --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;
   }
 
@@ -51,8 +54,8 @@ export default css`
   }
 
   /*
-   * Top
-   */
+    * Top
+    */
 
   .tab-group-top {
     flex-direction: column;
@@ -80,12 +83,12 @@ export default css`
     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 {
@@ -93,8 +96,8 @@ export default css`
   }
 
   .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) {
@@ -102,8 +105,8 @@ export default css`
   }
 
   /*
-   * Bottom
-   */
+    * Bottom
+    */
 
   .tab-group-bottom {
     flex-direction: column;
@@ -131,12 +134,12 @@ export default css`
     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 {
@@ -144,8 +147,8 @@ export default css`
   }
 
   .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) {
@@ -153,8 +156,8 @@ export default css`
   }
 
   /*
-   * Start
-   */
+    * Start
+    */
 
   .tab-group-start {
     flex-direction: row;
@@ -167,12 +170,12 @@ export default css`
   .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 {
@@ -181,8 +184,8 @@ export default css`
   }
 
   .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) {
@@ -190,8 +193,8 @@ export default css`
   }
 
   /*
-   * End
-   */
+    * End
+    */
 
   .tab-group-end {
     flex-direction: row;
@@ -204,12 +207,12 @@ export default css`
   .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 {
@@ -218,8 +221,8 @@ export default css`
   }
 
   .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) {