From 824d4b3389b2584ee8b38e4b21fa1cc979c1903a Mon Sep 17 00:00:00 2001
From: Adrian Petrov <adrian.ptrv1@gmail.com>
Date: Wed, 29 Oct 2025 13:37:02 +0200
Subject: [PATCH 1/5] fix(tabs): resolve non-working Sass theme parameters

---
 src/components/tabs/themes/shared/tab/tab.bootstrap.scss | 4 ++--
 src/components/tabs/themes/shared/tab/tab.common.scss    | 1 +
 src/components/tabs/themes/shared/tab/tab.fluent.scss    | 2 +-
 src/components/tabs/themes/shared/tab/tab.indigo.scss    | 9 +++++++++
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/tabs/themes/shared/tab/tab.bootstrap.scss b/src/components/tabs/themes/shared/tab/tab.bootstrap.scss
index dccff6569..5a1c91ae6 100644
--- a/src/components/tabs/themes/shared/tab/tab.bootstrap.scss
+++ b/src/components/tabs/themes/shared/tab/tab.bootstrap.scss
@@ -64,6 +64,7 @@ $theme: $bootstrap;
 :host([selected]) {
     [part='tab-header'] {
         position: relative;
+        background: var-get($theme, 'item-active-background');
 
         &::before {
             box-shadow:
@@ -81,8 +82,7 @@ $theme: $bootstrap;
         &:focus,
         &:focus-within
         {
-            background: var-get($theme, 'item-hover-background');
-            z-index: 1;
+            background: var-get($theme, 'item-active-background');
         }
     }
 }
diff --git a/src/components/tabs/themes/shared/tab/tab.common.scss b/src/components/tabs/themes/shared/tab/tab.common.scss
index fb73b5ba7..2ad93d730 100644
--- a/src/components/tabs/themes/shared/tab/tab.common.scss
+++ b/src/components/tabs/themes/shared/tab/tab.common.scss
@@ -34,6 +34,7 @@ $theme: $material;
         &:hover,
         &:focus-within {
             color: var-get($theme, 'item-active-color');
+            background: var-get($theme, 'item-active-background');
 
             ::slotted(igc-icon) {
                 color: var-get($theme, 'item-active-icon-color');
diff --git a/src/components/tabs/themes/shared/tab/tab.fluent.scss b/src/components/tabs/themes/shared/tab/tab.fluent.scss
index 247bda866..875120f1b 100644
--- a/src/components/tabs/themes/shared/tab/tab.fluent.scss
+++ b/src/components/tabs/themes/shared/tab/tab.fluent.scss
@@ -23,7 +23,7 @@ $theme: $fluent;
             color: var-get($theme, 'item-hover-color');
 
             ::slotted(igc-icon) {
-                color: var-get($theme, 'item-hover-icon-color');
+                color: var-get($theme, 'item-active-icon-color');
             }
         }
     }
diff --git a/src/components/tabs/themes/shared/tab/tab.indigo.scss b/src/components/tabs/themes/shared/tab/tab.indigo.scss
index 8da76773e..81720fb33 100644
--- a/src/components/tabs/themes/shared/tab/tab.indigo.scss
+++ b/src/components/tabs/themes/shared/tab/tab.indigo.scss
@@ -20,3 +20,12 @@ $theme: $indigo;
 
     text-transform: uppercase;
 }
+
+:host([selected]) {
+    [part='tab-header'] {
+        &:hover,
+        &:focus-within {
+            background: var-get($theme, 'item-hover-background');
+        }
+    }
+}
\ No newline at end of file

From 17349b38c4b829fab05ae72e5ec3c8da4e22b4eb Mon Sep 17 00:00:00 2001
From: Adrian Petrov <adrian.ptrv1@gmail.com>
Date: Mon, 3 Nov 2025 00:09:43 +0200
Subject: [PATCH 2/5] fix(tabs): adress comments + additional theme parameter
 changes

---
 .../tabs/themes/shared/tab/tab.bootstrap.scss | 28 +++++++++++++++----
 .../tabs/themes/shared/tab/tab.common.scss    |  2 ++
 .../tabs/themes/shared/tab/tab.indigo.scss    |  9 ++++++
 .../themes/shared/tabs/tabs.bootstrap.scss    |  4 +++
 .../tabs/themes/shared/tabs/tabs.common.scss  |  2 +-
 .../tabs/themes/shared/tabs/tabs.indigo.scss  |  6 ++--
 .../themes/shared/tabs/tabs.material.scss     |  4 +++
 src/components/tabs/themes/tabs.base.scss     |  1 -
 8 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/src/components/tabs/themes/shared/tab/tab.bootstrap.scss b/src/components/tabs/themes/shared/tab/tab.bootstrap.scss
index 5a1c91ae6..f8481daab 100644
--- a/src/components/tabs/themes/shared/tab/tab.bootstrap.scss
+++ b/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;
+            }
         }
     }
 }
diff --git a/src/components/tabs/themes/shared/tab/tab.common.scss b/src/components/tabs/themes/shared/tab/tab.common.scss
index 2ad93d730..28ae0bc88 100644
--- a/src/components/tabs/themes/shared/tab/tab.common.scss
+++ b/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');
diff --git a/src/components/tabs/themes/shared/tab/tab.indigo.scss b/src/components/tabs/themes/shared/tab/tab.indigo.scss
index 81720fb33..4d7c6167b 100644
--- a/src/components/tabs/themes/shared/tab/tab.indigo.scss
+++ b/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'] {
diff --git a/src/components/tabs/themes/shared/tabs/tabs.bootstrap.scss b/src/components/tabs/themes/shared/tabs/tabs.bootstrap.scss
index ce199de98..39ba92c56 100644
--- a/src/components/tabs/themes/shared/tabs/tabs.bootstrap.scss
+++ b/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 {
diff --git a/src/components/tabs/themes/shared/tabs/tabs.common.scss b/src/components/tabs/themes/shared/tabs/tabs.common.scss
index ab17ee2e3..d9a234d4e 100644
--- a/src/components/tabs/themes/shared/tabs/tabs.common.scss
+++ b/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;
diff --git a/src/components/tabs/themes/shared/tabs/tabs.indigo.scss b/src/components/tabs/themes/shared/tabs/tabs.indigo.scss
index 3799e9e91..34629b031 100644
--- a/src/components/tabs/themes/shared/tabs/tabs.indigo.scss
+++ b/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) {
diff --git a/src/components/tabs/themes/shared/tabs/tabs.material.scss b/src/components/tabs/themes/shared/tabs/tabs.material.scss
index 52893229d..bc6935f21 100644
--- a/src/components/tabs/themes/shared/tabs/tabs.material.scss
+++ b/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);
+}
\ No newline at end of file
diff --git a/src/components/tabs/themes/tabs.base.scss b/src/components/tabs/themes/tabs.base.scss
index d07b6d173..2a56a7520 100644
--- a/src/components/tabs/themes/tabs.base.scss
+++ b/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;

From a98ce96470fc53d7c53654c504d5b879f3b45d6f Mon Sep 17 00:00:00 2001
From: Adrian Petrov <adrian.ptrv1@gmail.com>
Date: Mon, 3 Nov 2025 00:26:01 +0200
Subject: [PATCH 3/5] chore(tabs): fix lint errors

---
 src/components/tabs/themes/shared/tab/tab.bootstrap.scss   | 1 +
 src/components/tabs/themes/shared/tabs/tabs.bootstrap.scss | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/tabs/themes/shared/tab/tab.bootstrap.scss b/src/components/tabs/themes/shared/tab/tab.bootstrap.scss
index f8481daab..9cc955e79 100644
--- a/src/components/tabs/themes/shared/tab/tab.bootstrap.scss
+++ b/src/components/tabs/themes/shared/tab/tab.bootstrap.scss
@@ -42,6 +42,7 @@ $theme: $bootstrap;
                 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 */
+
             background: var-get($theme, 'item-hover-background');
         }
 
diff --git a/src/components/tabs/themes/shared/tabs/tabs.bootstrap.scss b/src/components/tabs/themes/shared/tabs/tabs.bootstrap.scss
index 39ba92c56..a664c440b 100644
--- a/src/components/tabs/themes/shared/tabs/tabs.bootstrap.scss
+++ b/src/components/tabs/themes/shared/tabs/tabs.bootstrap.scss
@@ -7,7 +7,7 @@ $theme: $bootstrap;
     --header-min-height: #{rem(48px)};
 }
 
-[part~=inner] {
+[part~='inner'] {
     flex-grow: 1;
 }
 

From 90f7694d4e3f078b9afc1bb09b0096b05056e96a Mon Sep 17 00:00:00 2001
From: Adrian Petrov <adrian.ptrv1@gmail.com>
Date: Mon, 10 Nov 2025 19:38:16 +0200
Subject: [PATCH 4/5] feat(tabs): set up the newly created 'active' parameters

---
 .../tabs/themes/shared/tab/tab.bootstrap.scss | 25 ++++++++++++++++---
 .../tabs/themes/shared/tab/tab.common.scss    |  7 +++---
 .../tabs/themes/shared/tab/tab.fluent.scss    | 11 --------
 .../tabs/themes/shared/tab/tab.indigo.scss    |  9 -------
 .../tabs/themes/shared/tabs/tabs.indigo.scss  |  4 +++
 5 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/components/tabs/themes/shared/tab/tab.bootstrap.scss b/src/components/tabs/themes/shared/tab/tab.bootstrap.scss
index 9cc955e79..7bfa4bdc0 100644
--- a/src/components/tabs/themes/shared/tab/tab.bootstrap.scss
+++ b/src/components/tabs/themes/shared/tab/tab.bootstrap.scss
@@ -67,7 +67,7 @@ $theme: $bootstrap;
             position: absolute;
             width: 100%;
             height: 100%;
-            box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'item-hover-color');
+            box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'item-active-hover-color');
             z-index: 2;
         }
     }
@@ -76,13 +76,16 @@ $theme: $bootstrap;
 :host([selected]) {
     [part='tab-header'] {
         position: relative;
+        background: var-get($theme, 'item-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 */
-                inset var(--_border-size) 0 0 0 var-get($theme, 'border-color'),  /* Right */
+                inset var(--_border-size) 0 0 0 var-get($theme, 'border-color');  /* Right */
+            background: var-get($theme, 'item-active-background');
+            border-start-start-radius: var-get($theme, 'border-radius');
+            border-start-end-radius: var-get($theme, 'border-radius');
         }
 
         &:hover {
@@ -90,17 +93,31 @@ $theme: $bootstrap;
             border-inline-color: var-get($theme, 'border-color');
             border-bottom-color: var-get($theme, 'item-background');
             background: var-get($theme, 'item-background');
+
+            &::before {
+                background: var-get($theme, 'item-active-hover-background');
+            }
         }
 
         &:focus,
         &:focus-within {
-            background: var-get($theme, 'item-active-background');
             border: none;
+            background: var-get($theme, 'item-background');
+
+            &::after{
+                border-top-left-radius: var-get($theme, 'border-radius');
+                border-top-right-radius: var-get($theme, 'border-radius');
+                border-bottom-left-radius: rem(4px);
+                border-bottom-right-radius: rem(4px);
+            }
         }
 
         &:focus-within {
             &::before {
                 box-shadow: none;
+                border-bottom-left-radius: rem(4px);
+                border-bottom-right-radius: rem(4px);
+                background: var-get($theme, 'item-active-hover-background');
             }
         }
     }
diff --git a/src/components/tabs/themes/shared/tab/tab.common.scss b/src/components/tabs/themes/shared/tab/tab.common.scss
index 28ae0bc88..910bfc9d7 100644
--- a/src/components/tabs/themes/shared/tab/tab.common.scss
+++ b/src/components/tabs/themes/shared/tab/tab.common.scss
@@ -28,6 +28,7 @@ $theme: $material;
 :host([selected]) {
     [part='tab-header'] {
         color: var-get($theme, 'item-active-color');
+        background: var-get($theme, 'item-active-background');
 
         ::slotted(igc-icon) {
             color: var-get($theme, 'item-active-icon-color');
@@ -35,11 +36,11 @@ $theme: $material;
 
         &:hover,
         &:focus-within {
-            color: var-get($theme, 'item-active-color');
-            background: var-get($theme, 'item-active-background');
+            color: var-get($theme, 'item-active-hover-color');
+            background: var-get($theme, 'item-active-hover-background');
 
             ::slotted(igc-icon) {
-                color: var-get($theme, 'item-active-icon-color');
+                color: var-get($theme, 'item-active-hover-icon-color');
             }
         }
     }
diff --git a/src/components/tabs/themes/shared/tab/tab.fluent.scss b/src/components/tabs/themes/shared/tab/tab.fluent.scss
index 875120f1b..c2c222ec7 100644
--- a/src/components/tabs/themes/shared/tab/tab.fluent.scss
+++ b/src/components/tabs/themes/shared/tab/tab.fluent.scss
@@ -16,15 +16,4 @@ $theme: $fluent;
     [part='content'] {
         font-weight: 700;
     }
-
-    [part='tab-header'] {
-        &:hover,
-        &:focus-within {
-            color: var-get($theme, 'item-hover-color');
-
-            ::slotted(igc-icon) {
-                color: var-get($theme, 'item-active-icon-color');
-            }
-        }
-    }
 }
diff --git a/src/components/tabs/themes/shared/tab/tab.indigo.scss b/src/components/tabs/themes/shared/tab/tab.indigo.scss
index 4d7c6167b..5f78fcb6c 100644
--- a/src/components/tabs/themes/shared/tab/tab.indigo.scss
+++ b/src/components/tabs/themes/shared/tab/tab.indigo.scss
@@ -28,13 +28,4 @@ $theme: $indigo;
     @include type-style('subtitle-2');
 
     text-transform: uppercase;
-}
-
-:host([selected]) {
-    [part='tab-header'] {
-        &:hover,
-        &:focus-within {
-            background: var-get($theme, 'item-hover-background');
-        }
-    }
 }
\ No newline at end of file
diff --git a/src/components/tabs/themes/shared/tabs/tabs.indigo.scss b/src/components/tabs/themes/shared/tabs/tabs.indigo.scss
index 34629b031..92319fbba 100644
--- a/src/components/tabs/themes/shared/tabs/tabs.indigo.scss
+++ b/src/components/tabs/themes/shared/tabs/tabs.indigo.scss
@@ -57,6 +57,10 @@ igc-icon-button:hover::part(base) {
 
 igc-icon-button::part(base) {
     overflow: hidden;
+}
+
+igc-icon-button[disabled]::part(base), 
+igc-icon-button:disabled::part(base) {
     border-bottom: rem(1px) solid var(--nav-btn-border-color);
 }
 

From 0b071dacdfb269b9110caa698b04d444e46f0ffb Mon Sep 17 00:00:00 2001
From: Adrian Petrov <adrian.ptrv1@gmail.com>
Date: Tue, 11 Nov 2025 08:56:57 +0200
Subject: [PATCH 5/5] chore(tabs): fix lint errors

---
 src/components/tabs/themes/shared/tab/tab.bootstrap.scss | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/tabs/themes/shared/tab/tab.bootstrap.scss b/src/components/tabs/themes/shared/tab/tab.bootstrap.scss
index 7bfa4bdc0..ccb74cffb 100644
--- a/src/components/tabs/themes/shared/tab/tab.bootstrap.scss
+++ b/src/components/tabs/themes/shared/tab/tab.bootstrap.scss
@@ -83,6 +83,7 @@ $theme: $bootstrap;
                 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 */
                 inset var(--_border-size) 0 0 0 var-get($theme, 'border-color');  /* Right */
+
             background: var-get($theme, 'item-active-background');
             border-start-start-radius: var-get($theme, 'border-radius');
             border-start-end-radius: var-get($theme, 'border-radius');
@@ -105,10 +106,7 @@ $theme: $bootstrap;
             background: var-get($theme, 'item-background');
 
             &::after{
-                border-top-left-radius: var-get($theme, 'border-radius');
-                border-top-right-radius: var-get($theme, 'border-radius');
-                border-bottom-left-radius: rem(4px);
-                border-bottom-right-radius: rem(4px);
+                border-radius: var-get($theme, 'border-radius') var-get($theme, 'border-radius') rem(4px) rem(4px);
             }
         }