Minor style fixes to tabs and improved scroll behaviour

src/components/hy-tabs/hy-tabs.scss

@@ -17,7 +17,7 @@
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    z-index: 3;
+    z-index: 4;
 
     &.is-hidden {
       display: none;
@@ -58,7 +58,7 @@
     }
 
     &__left {
-      left: 0;
+      left: 8px;
 
       svg {
         left: -1.5px;
@@ -66,7 +66,7 @@
     }
 
     &__right {
-      right: 0;
+      right: 8px;
 
       svg {
         left: 1.5px;
@@ -138,11 +138,12 @@
     background: var(--grayscale-white);
     border: 1px solid var(--grayscale-tabs-border);
     border-bottom-width: 0;
-    box-shadow: inset 0 1px 0 0 var(--grayscale-medium), inset -1px 1px 0 0 var(--grayscale-medium),
-      inset 1px 1px 0 0 var(--grayscale-medium), 0 -4px 8px -4px rgba(0, 0, 0, 0.1);
+    box-shadow: inset 0 1px 0 0 #d2d2d2, inset -1px 1px 0 0 #d2d2d2, inset 1px 1px 0 0 #d2d2d2,
+      0 -4px 8px -4px rgba(0, 0, 0, 0.1);
     font-weight: bold;
     margin-bottom: -1px;
     padding-bottom: 9px;
+    z-index: 3;
   }
 
   [role='tab']:hover,
@@ -159,6 +160,7 @@
   }
 
   [role='tabpanel'] {
+    border-top: 1px solid var(--grayscale-medium);
     padding: 1.5em 0.5em 0.7em;
     position: relative;
     z-index: 2;

src/components/hy-tabs/hy-tabs.tsx

@@ -19,6 +19,7 @@ let direction = {
 };
 let checkTimeout;
 let focusTimeout;
+let scrollTimeout;
 
 @Component({
   tag: 'hy-tabs',
@@ -55,8 +56,20 @@ export class HyTabs implements ComponentInterface {
       const leftButton = this.el.querySelectorAll('.hy-tab-scroll__left')[0];
       const rightButton = this.el.querySelectorAll('.hy-tab-scroll__right')[0];
       const tabList = this.tabList as any;
+
       this.checkScrollHidden(tabList, leftButton, rightButton);
 
+      tabList.addEventListener(
+        'scroll',
+        () => {
+          scrollTimeout = setTimeout(() => {
+            window.clearTimeout(scrollTimeout);
+            this.checkScrollHidden(tabList, leftButton, rightButton);
+          }, 250);
+        },
+        false
+      );
+
       if (tabList.offSetWidth <= document.body.scrollWidth) {
         leftButton.classList.add('is-hidden');
         rightButton.classList.add('is-hidden');
@@ -72,6 +85,7 @@ export class HyTabs implements ComponentInterface {
           behavior: 'smooth',
         });
         checkTimeout = window.setTimeout(() => {
+          window.clearTimeout(checkTimeout);
           this.checkScrollHidden(tabList, leftButton, rightButton);
           rightButton.classList.remove('is-disabled');
         }, 250);
@@ -86,6 +100,7 @@ export class HyTabs implements ComponentInterface {
           behavior: 'smooth',
         });
         checkTimeout = window.setTimeout(() => {
+          window.clearTimeout(checkTimeout);
           this.checkScrollHidden(tabList, leftButton, rightButton);
           leftButton.classList.remove('is-disabled');
         }, 250);
@@ -126,7 +141,6 @@ export class HyTabs implements ComponentInterface {
     } else {
       rightButton.classList.remove('is-hidden');
     }
-    window.clearTimeout(checkTimeout);
   }
 
   // When a tab is clicked, activateTab is fired to activate it
@@ -182,6 +196,7 @@ export class HyTabs implements ComponentInterface {
     switch (key) {
       case keys.left:
       case keys.right:
+        event.preventDefault();
         if (this.focusTimeoutCleared) {
           this.determineOrientation(event);
         }
@@ -259,8 +274,6 @@ export class HyTabs implements ComponentInterface {
     if (setFocus) {
       tab.focus();
     }
-    window.clearTimeout(focusTimeout);
-    this.focusTimeoutCleared = true;
   }
 
   // Deactivate all tabs and tab panels
@@ -281,11 +294,13 @@ export class HyTabs implements ComponentInterface {
     const target = tab;
     this.focusTimeoutCleared = false;
     focusTimeout = window.setTimeout(() => {
+      window.clearTimeout(focusTimeout);
+      this.focusTimeoutCleared = true;
       const focused = document.activeElement;
       if (target === focused) {
         this.activateTab(target, false);
       }
-    }, 300);
+    }, 250);
   }
 
   render() {