Minor hover style and spacing updates to <sl-tab-group>

Author: slhinyc

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

@@ -299,11 +299,12 @@ export default class SlTabGroup extends ShoelaceElement {
     // 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
     const allTabs = this.getAllTabs();
+    const gap = 16;
     const precedingTabs = allTabs.slice(0, allTabs.indexOf(currentTab));
     const offset = precedingTabs.reduce(
       (previous, current) => ({
-        left: previous.left + current.clientWidth,
-        top: previous.top + current.clientHeight
+        left: previous.left + current.clientWidth + gap,
+        top: previous.top + current.clientHeight + gap
       }),
       { left: 0, top: 0 }
     );
@@ -330,6 +331,7 @@ export default class SlTabGroup extends ShoelaceElement {
     this.tabs = this.getAllTabs({ includeDisabled: false });
     this.panels = this.getAllPanels();
     this.syncIndicator();
+    this.addPlacementClasses();
 
     // After updating, show or hide scroll controls as needed
     this.updateComplete.then(() => this.updateScrollControls());
@@ -357,6 +359,29 @@ export default class SlTabGroup extends ShoelaceElement {
     }
   }
 
+  addPlacementClasses() {
+    if (!this.tabs || this.tabs.length === 0) return;
+
+    this.tabs.forEach(tab => {
+      tab.classList.remove('tab--top', 'tab--bottom', 'tab--start', 'tab--end');
+
+      switch (this.placement) {
+        case 'top':
+          tab.classList.add('tab--top');
+          break;
+        case 'bottom':
+          tab.classList.add('tab--bottom');
+          break;
+        case 'start':
+          tab.classList.add('tab--start');
+          break;
+        case 'end':
+          tab.classList.add('tab--end');
+          break;
+      }
+    });
+  }
+
   /** Shows the specified tab panel. */
   show(panel: string) {
     const tab = this.tabs.find(el => el.panel === panel);

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

@@ -17,6 +17,7 @@ export default css`
   .tab-group__tabs {
     display: flex;
     position: relative;
+    gap: var(--sl-spacing-medium);
   }
 
   .tab-group__indicator {

src/components/tab/tab.component.ts

@@ -28,6 +28,8 @@ let id = 0;
  * @csspart base - The component's base wrapper.
  * @csspart close-button - The close button, an `<sl-icon-button>`.
  * @csspart close-button__base - The close button's exported `base` part.
+ *
+ * @cssproperty --group-track-width - Used to calculate the tab's padding and border width. Must match the tab group's track width (default is 1px).
  */
 export default class SlTab extends ShoelaceElement {
   static styles: CSSResultGroup = [componentStyles, styles];

src/components/tab/tab.styles.ts

@@ -2,6 +2,8 @@ import { css } from 'lit';
 
 export default css`
   :host {
+    --group-track-width: 1px;
+
     display: inline-block;
   }
 
@@ -12,9 +14,8 @@ export default css`
     font-size: var(--sl-font-size-small);
     font-weight: var(--sl-font-weight-semibold);
     line-height: var(--ts-leading-6);
-    border-radius: var(--sl-border-radius-medium);
     color: var(--sl-color-neutral-700);
-    padding: var(--ts-spacing-large) var(--sl-spacing-medium) var(--sl-spacing-large);
+    padding: var(--sl-spacing-medium);
     white-space: nowrap;
     user-select: none;
     -webkit-user-select: none;
@@ -24,8 +25,37 @@ export default css`
       var(--transition-speed) color;
   }
 
-  .tab:hover:not(.tab--disabled) {
-    color: var(--sl-color-primary-600);
+  .tab:hover:not(.tab--disabled):not(.tab--active) {
+    color: var(--sl-color-neutral-900);
+  }
+
+  :host(.tab--top) .tab {
+    border-bottom: calc(var(--sl-spacing-2x-small) - var(--group-track-width)) solid transparent;
+    padding-bottom: calc(var(--sl-spacing-medium) + var(--group-track-width));
+    transition: var(--sl-transition-medium) border-color ease;
+  }
+
+  :host(.tab--bottom) .tab {
+    border-top: calc(var(--sl-spacing-2x-small) - var(--group-track-width)) solid transparent;
+    padding-top: calc(var(--sl-spacing-medium) + var(--group-track-width));
+    transition: var(--sl-transition-medium) border-color ease;
+  }
+
+  :host(.tab--start) .tab {
+    display: flex;
+    border-right: calc(var(--sl-spacing-2x-small) - var(--group-track-width)) solid transparent;
+    padding-right: calc(var(--sl-spacing-medium) + var(--group-track-width));
+    transition: var(--sl-transition-medium) border-color ease;
+  }
+
+  :host(.tab--end) .tab {
+    border-left: calc(var(--sl-spacing-2x-small) - var(--group-track-width)) solid transparent;
+    padding-left: calc(var(--sl-spacing-medium) + var(--group-track-width));
+    transition: var(--sl-transition-medium) border-color ease;
+  }
+
+  .tab:hover:not(.tab--disabled):not(.tab--active) {
+    border-color: var(--sl-color-neutral-400);
   }
 
   .tab:focus {
@@ -38,7 +68,7 @@ export default css`
 
   .tab:focus-visible {
     outline: var(--sl-focus-ring);
-    outline-offset: calc(-1 * var(--sl-focus-ring-width) - var(--sl-focus-ring-offset));
+    outline-offset: calc(-1 * var(--sl-focus-ring-width));
   }
 
   .tab.tab--active:not(.tab--disabled) {