fix(tabs): adress comments + additional theme parameter changes

Author: adrianptrv

src/components/tabs/themes/shared/tab/tab.bootstrap.scss

@@ -31,12 +31,24 @@ $theme: $bootstrap;
 }
 
 [part='tab-header'] {
+    border: none;
+
     &:hover {
+        border: none;
+        background: var-get($theme, 'item-background');;
+
         &::before {
             box-shadow:
                 inset 0 var(--_border-size) 0 0 var-get($theme, 'border-color--hover'),  /* Top */
                 inset calc(var(--_border-size) * -1) 0 0 0 var-get($theme, 'border-color--hover'),  /* Left */
-                inset var(--_border-size) 0 0 0 var-get($theme, 'border-color--hover'),  /* Right */
+                inset var(--_border-size) 0 0 0 var-get($theme, 'border-color--hover');  /* Right */
+            background: var-get($theme, 'item-hover-background');
+        }
+
+        &:hover:focus-within {
+            &::before {
+                box-shadow: none;
+            }
         }
     }
 
@@ -55,7 +67,6 @@ $theme: $bootstrap;
             width: 100%;
             height: 100%;
             box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'item-hover-color');
-            border-radius: var-get($theme, 'border-radius');
             z-index: 2;
         }
     }
@@ -64,9 +75,9 @@ $theme: $bootstrap;
 :host([selected]) {
     [part='tab-header'] {
         position: relative;
-        background: var-get($theme, 'item-active-background');
 
         &::before {
+            background: var-get($theme, 'item-active-background');
             box-shadow:
                 inset 0 var(--_border-size) 0 0 var-get($theme, 'border-color'),  /* Top */
                 inset calc(var(--_border-size) * -1) 0 0 0 var-get($theme, 'border-color'),  /* Left */
@@ -77,12 +88,19 @@ $theme: $bootstrap;
             border-top-color: var-get($theme, 'border-color');
             border-inline-color: var-get($theme, 'border-color');
             border-bottom-color: var-get($theme, 'item-background');
+            background: var-get($theme, 'item-background');
         }
 
         &:focus,
-        &:focus-within
-        {
+        &:focus-within {
             background: var-get($theme, 'item-active-background');
+            border: none;
+        }
+
+        &:focus-within {
+            &::before {
+                box-shadow: none;
+            }
         }
     }
 }

src/components/tabs/themes/shared/tab/tab.common.scss

@@ -7,6 +7,7 @@ $theme: $material;
     color: var-get($theme, 'item-text-color');
     background: var-get($theme, 'item-background');
     border-radius: var-get($theme, 'border-radius');
+    border: rem(1px) solid var-get($theme, 'border-color');
 
     ::slotted(igc-icon) {
         color: var-get($theme, 'item-icon-color');
@@ -16,6 +17,7 @@ $theme: $material;
     &:focus-within {
         color: var-get($theme, 'item-hover-color');
         background: var-get($theme, 'item-hover-background');
+        border: rem(1px) solid var-get($theme, 'border-color--hover');
 
         ::slotted(igc-icon) {
             color: var-get($theme, 'item-hover-icon-color');

src/components/tabs/themes/shared/tab/tab.indigo.scss

@@ -13,6 +13,15 @@ $theme: $indigo;
 
 [part='tab-header'] {
     padding: pad-block(rem(12px)) pad-inline(rem(16px));
+    border-top: rem(1px) solid transparent;
+    border-inline: none;
+
+    &:hover,
+    &:focus-within {
+        border-top: rem(1px) solid transparent;
+        border-inline: none;
+        border-bottom: rem(1px) solid var-get($theme, 'border-color--hover');
+    }
 }
 
 [part='content'] {

src/components/tabs/themes/shared/tabs/tabs.bootstrap.scss

@@ -7,6 +7,10 @@ $theme: $bootstrap;
     --header-min-height: #{rem(48px)};
 }
 
+[part~=inner] {
+    flex-grow: 1;
+}
+
 :host([alignment='start']) {
     [part~='inner']:not([part~='scrollable']) {
         &::after {

src/components/tabs/themes/shared/tabs/tabs.common.scss

@@ -15,7 +15,7 @@ $theme: $material;
     --active-background: #{var-get($theme, 'button-hover-background')};
     --border-color: #{var-get($theme, 'button-background')};
     --disabled-foreground: #{var-get($theme, 'button-disabled-color')};
-    --disabled-background: #{var-get($theme, 'item-background')};
+    --disabled-background: #{var-get($theme, 'button-background')};
 
     [part~='base'] {
         transition: all 0ms;

src/components/tabs/themes/shared/tabs/tabs.indigo.scss

@@ -8,6 +8,7 @@ $theme: $indigo;
 :host {
     --header-min-height: #{rem(40px)};
     --scroll-btn-size: #{rem(40px)};
+    --nav-btn-border-color: #{var-get($theme, 'border-color')};
 }
 
 [part='selected-indicator'] {
@@ -27,7 +28,6 @@ $theme: $indigo;
         position: absolute;
         width: 100%;
         height: $indicator-height;
-        background-color: var-get($theme, 'border-color');
         inset-block-end: 100%;
     }
 }
@@ -45,17 +45,19 @@ $theme: $indigo;
 }
 
 igc-icon-button:hover::part(base) {
+    background-color: var-get($theme, 'button-hover-background');
+
     &::after {
         content: '';
         position: absolute;
         inset: 0;
-        background-color: var-get($theme, 'button-hover-background');
         z-index: 1;
     }
 }
 
 igc-icon-button::part(base) {
     overflow: hidden;
+    border-bottom: rem(1px) solid var(--nav-btn-border-color);
 }
 
 igc-icon-button::part(icon) {

src/components/tabs/themes/shared/tabs/tabs.material.scss

@@ -18,3 +18,7 @@ $theme: $material;
         background: var-get($theme, 'indicator-color');
     }
 }
+
+igc-icon-button:hover::part(icon) {
+    color: var(--hover-foreground);
+}

src/components/tabs/themes/tabs.base.scss

@@ -43,7 +43,6 @@
     grid-template-rows: minmax(var(--header-min-height), auto) auto 1fr;
     align-items: center;
     position: relative;
-    flex-grow: 1;
 
     ::slotted(igc-tab) {
         display: contents;