add --track-width; fix rtl

docs/resources/changelog.md

@@ -10,6 +10,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 - Added Persian translation [#774](https://github.com/shoelace-style/shoelace/pull/774)
 - Added `color-scheme` to light and dark themes to improve rendering of browser-provided UI [#776](https://github.com/shoelace-style/shoelace/issues/776)
+- Added `--track-width` custom property to `<sl-tab-group>`
 - Fixed focus rings for `<sl-input>`, `<sl-select>`, and `<sl-textarea>` in Safari since they don't use `:focus-visible` [#767](https://github.com/shoelace-style/shoelace/issues/767)
 - Fixed a bug where calling `HTMLFormElement.reportValidity()` would skip Shoelace form controls [#772](https://github.com/shoelace-style/shoelace/issues/772)
 - Fixed a bug that prevented `<sl-tooltip>` from closing when disabled [#775](https://github.com/shoelace-style/shoelace/issues/775)

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

@@ -5,8 +5,9 @@ export default css`
   ${componentStyles}
 
   :host {
-    --track-color: var(--sl-color-neutral-200);
     --indicator-color: var(--sl-color-primary-600);
+    --track-color: var(--sl-color-neutral-200);
+    --track-width: 2px;
 
     display: block;
   }
@@ -80,12 +81,12 @@ export default css`
     flex: 1 1 auto;
     position: relative;
     flex-direction: row;
-    border-bottom: solid 2px var(--track-color);
+    border-bottom: solid var(--track-width) var(--track-color);
   }
 
   .tab-group--top .tab-group__indicator {
-    bottom: -2px;
-    border-bottom: solid 2px var(--indicator-color);
+    bottom: calc(-1 * var(--track-width));
+    border-bottom: solid var(--track-width) var(--indicator-color);
   }
 
   .tab-group--top .tab-group__body {
@@ -126,12 +127,12 @@ export default css`
     flex: 1 1 auto;
     position: relative;
     flex-direction: row;
-    border-top: solid 2px var(--track-color);
+    border-top: solid var(--track-width) var(--track-color);
   }
 
   .tab-group--bottom .tab-group__indicator {
-    top: calc(-1 * 2px);
-    border-top: solid 2px var(--indicator-color);
+    top: calc(-1 * var(--track-width));
+    border-top: solid var(--track-width) var(--indicator-color);
   }
 
   .tab-group--bottom .tab-group__body {
@@ -157,12 +158,17 @@ export default css`
   .tab-group--start .tab-group__tabs {
     flex: 0 0 auto;
     flex-direction: column;
-    border-right: solid 2px var(--track-color);
+    border-inline-end: solid var(--track-width) var(--track-color);
   }
 
   .tab-group--start .tab-group__indicator {
-    right: calc(-1 * 2px);
-    border-right: solid 2px var(--indicator-color);
+    right: calc(-1 * var(--track-width));
+    border-right: solid var(--track-width) var(--indicator-color);
+  }
+
+  .tab-group--start.tab-group--rtl .tab-group__indicator {
+    right: auto;
+    left: calc(-1 * var(--track-width));
   }
 
   .tab-group--start .tab-group__body {
@@ -189,12 +195,17 @@ export default css`
   .tab-group--end .tab-group__tabs {
     flex: 0 0 auto;
     flex-direction: column;
-    border-left: solid 2px var(--track-color);
+    border-right: solid var(--track-width) var(--track-color);
   }
 
   .tab-group--end .tab-group__indicator {
-    left: calc(-1 * 2px);
-    border-left: solid 2px var(--indicator-color);
+    left: calc(-1 * var(--track-width));
+    border-inline-start: solid var(--track-width) var(--indicator-color);
+  }
+
+  .tab-group--end.tab-group--rtl .tab-group__indicator {
+    right: calc(-1 * var(--track-width));
+    left: auto;
   }
 
   .tab-group--end .tab-group__body {

src/components/tab-group/tab-group.ts

@@ -34,6 +34,7 @@ import type SlTab from '../../components/tab/tab';
  *
  * @cssproperty --indicator-color - The color of the active tab indicator.
  * @cssproperty --track-color - The color of the indicator's track (i.e. the line that separates tabs from panels).
+ * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
  */
 @customElement('sl-tab-group')
 export default class SlTabGroup extends LitElement {
@@ -305,6 +306,7 @@ export default class SlTabGroup extends LitElement {
 
     const width = currentTab.clientWidth;
     const height = currentTab.clientHeight;
+    const isRtl = this.localize.dir() === 'rtl';
 
     // We can't used offsetLeft/offsetTop here due to a shadow parent issue where neither can getBoundingClientRect
     // because it provides invalid values for animating elements: https://bugs.chromium.org/p/chromium/issues/detail?id=920069
@@ -323,7 +325,7 @@ export default class SlTabGroup extends LitElement {
       case 'bottom':
         this.indicator.style.width = `${width}px`;
         this.indicator.style.height = 'auto';
-        this.indicator.style.transform = `translateX(${offset.left}px)`;
+        this.indicator.style.transform = isRtl ? `translateX(${-1 * offset.left}px)` : `translateX(${offset.left}px)`;
         break;
 
       case 'start':
@@ -363,6 +365,7 @@ export default class SlTabGroup extends LitElement {
           'tab-group--bottom': this.placement === 'bottom',
           'tab-group--start': this.placement === 'start',
           'tab-group--end': this.placement === 'end',
+          'tab-group--rtl': this.localize.dir() === 'rtl',
           'tab-group--has-scroll-controls': this.hasScrollControls
         })}
         @click=${this.handleClick}