From 55f7674ad63b66ea2aa35e335c0eb24446cf4533 Mon Sep 17 00:00:00 2001
From: Adrian Petrov <adrian.ptrv1@gmail.com>
Date: Wed, 29 Oct 2025 13:05:10 +0200
Subject: [PATCH 1/4] fix(tabs): change icon in WC demo to be igc-icon, instead
 of igx-icon

---
 src/app/tabs-showcase/tabs-showcase.sample.html | 2 +-
 src/app/tabs-showcase/tabs-showcase.sample.ts   | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/app/tabs-showcase/tabs-showcase.sample.html b/src/app/tabs-showcase/tabs-showcase.sample.html
index f90f445539c..bd9df358a8a 100644
--- a/src/app/tabs-showcase/tabs-showcase.sample.html
+++ b/src/app/tabs-showcase/tabs-showcase.sample.html
@@ -32,7 +32,7 @@
             @for (contact of contacts; track contact.id) {
                 <igc-tab [selected]="contact.id === selectedTabId">
                     @if(!properties.hideIcon) {
-                        <igx-icon slot="label">folder</igx-icon>
+                        <igc-icon name="folder" slot="label"></igc-icon>
                     }
                     @if(!properties.hideText) {
                     <span slot="label">{{ contact.text }}</span>
diff --git a/src/app/tabs-showcase/tabs-showcase.sample.ts b/src/app/tabs-showcase/tabs-showcase.sample.ts
index b271789cfb2..fcf308b106f 100644
--- a/src/app/tabs-showcase/tabs-showcase.sample.ts
+++ b/src/app/tabs-showcase/tabs-showcase.sample.ts
@@ -20,13 +20,20 @@ import {
     defineComponents,
     IgcTabsComponent,
     IgcTabComponent,
+    IgcIconComponent,
+    registerIconFromText
 } from 'igniteui-webcomponents';
 import {
     PropertyChangeService,
     Properties,
 } from '../properties-panel/property-change.service';
 
-defineComponents(IgcTabsComponent, IgcTabComponent);
+defineComponents(IgcTabsComponent, IgcTabComponent, IgcIconComponent);
+
+registerIconFromText(
+    'folder',
+    '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Z"/></svg>'
+);
 
 @Component({
     selector: 'app-tabs-showcase-sample',

From e226239939782cac4c3588f775874a1732513c79 Mon Sep 17 00:00:00 2001
From: Adrian Petrov <adrian.ptrv1@gmail.com>
Date: Mon, 3 Nov 2025 19:07:32 +0200
Subject: [PATCH 2/4] fix(tabs): material border-radius not working + move
 background from tabs header to tab items

---
 .../src/lib/tabs/tabs/header/themes/shared/_fluent.scss          | 1 +
 .../src/lib/tabs/tabs/header/themes/shared/_indigo.scss          | 1 +
 .../src/lib/tabs/tabs/header/themes/shared/_material.scss        | 1 +
 .../igniteui-angular/src/lib/tabs/tabs/item/themes/_base.scss    | 1 -
 .../src/lib/tabs/tabs/item/themes/shared/_bootstrap.scss         | 1 +
 5 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_fluent.scss
index 926f8a230f3..d1a4c9522e3 100644
--- a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_fluent.scss
+++ b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_fluent.scss
@@ -14,6 +14,7 @@ $_theme: $fluent;
         min-height: rem(44px);
         transition: all .3s $tabs-animation-function;
         border: rem(1px) solid var-get($_theme, 'border-color');
+        border-radius: var-get($_theme, 'border-radius');
 
         &:hover,
         &:focus {
diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_indigo.scss
index 9c513b56cd1..c3ab4913143 100644
--- a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_indigo.scss
+++ b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_indigo.scss
@@ -17,6 +17,7 @@ $_theme: $indigo;
 
         transition: all .3s $tabs-animation-function;
         border: rem(1px) solid var-get($_theme, 'border-color');
+        border-radius: var-get($_theme, 'border-radius');
 
         border-top: rem(1px) solid transparent;
         border-inline: none;
diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_material.scss b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_material.scss
index dda9e832beb..98e5e81b32f 100644
--- a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_material.scss
+++ b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_material.scss
@@ -12,6 +12,7 @@ $_theme: $material;
         min-height: rem(48px);
         transition: all .3s $tabs-animation-function;
         border: rem(1px) solid var-get($_theme, 'border-color');
+        border-radius: var-get($_theme, 'border-radius');
 
         &:hover,
         &:focus {
diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/_base.scss b/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/_base.scss
index 8fa2e62baf3..fbc6b042008 100644
--- a/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/_base.scss
+++ b/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/_base.scss
@@ -16,7 +16,6 @@ $theme: $material;
         align-items: center;
         overflow: hidden;
         flex: 0 0 auto;
-        background: var-get($theme, 'item-background');
         z-index: 1;
 
         @include e(content) {
diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_bootstrap.scss
index feea13a2d60..df5410783a6 100644
--- a/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_bootstrap.scss
+++ b/projects/igniteui-angular/src/lib/tabs/tabs/item/themes/shared/_bootstrap.scss
@@ -8,6 +8,7 @@ $_theme: $bootstrap;
 @include themed-block(igx-tabs, bootstrap) {
     @include b(igx-tabs-header) {
         position: relative;
+        background: var-get($_theme, 'item-background');
 
         &::after {
             content: '';

From e9e6f5321f1b47c7b5f21891246865032f1f4e64 Mon Sep 17 00:00:00 2001
From: Adrian Petrov <adrian.ptrv1@gmail.com>
Date: Tue, 11 Nov 2025 15:48:18 +0200
Subject: [PATCH 3/4] feat(tabs): set up the newly added 'active' theme
 parameters

---
 .../src/lib/tabs/tabs/header/themes/_base.scss    |  9 +++++----
 .../tabs/header/themes/shared/_bootstrap.scss     | 15 ++++++++++++---
 .../tabs/tabs/header/themes/shared/_indigo.scss   |  7 -------
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/_base.scss b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/_base.scss
index 56bbcc14ccd..1795572cdef 100644
--- a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/_base.scss
+++ b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/_base.scss
@@ -45,7 +45,7 @@ $theme-variant: map.get($theme, '_meta', 'theme-variant');
         }
 
         &:focus {
-            background: var-get($theme, 'item-active-background');
+            background: var-get($theme, 'item-hover-background');
             color: var-get($theme, 'item-hover-color');
             border-bottom-color: transparent;
         }
@@ -71,14 +71,15 @@ $theme-variant: map.get($theme, '_meta', 'theme-variant');
         @include m(selected) {
             outline: 0;
             color: var-get($theme, 'item-active-color');
+            background: var-get($theme, 'item-active-background');
 
             &:hover,
             &:focus {
-                background: var-get($theme, 'item-active-background');
-                color: if($variant == 'fluent', var-get($theme, 'item-hover-color'), var-get($theme, 'item-active-color'));
+                background: var-get($theme, 'item-active-hover-background');
+                color: var-get($theme, 'item-active-hover-color');
 
                 igx-icon {
-                    color: var-get($theme, 'item-active-icon-color');
+                    color: var-get($theme, 'item-active-hover-icon-color');
                 }
             }
 
diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_bootstrap.scss
index 6a3bc7d9254..8f35604f4e4 100644
--- a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_bootstrap.scss
+++ b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_bootstrap.scss
@@ -8,8 +8,8 @@ $_theme: $bootstrap;
 @include themed-block(igx-tabs, bootstrap) {
     %igx-tab-header--focus {
         border: none;
-        box-shadow: inset 0 0 0 rem(2px) var-get($_theme, 'item-hover-color');
-        border-radius: rem(4px);
+        box-shadow: inset 0 0 0 rem(2px) var-get($_theme, 'item-active-hover-color');
+        border-radius: var-get($_theme, 'border-radius') var-get($_theme, 'border-radius') rem(4px) rem(4px);
         z-index: 1;
 
         &::after {
@@ -32,7 +32,6 @@ $_theme: $bootstrap;
         }
 
         @include m(selected) {
-            background: var-get($_theme, 'item-active-background');
             position: relative;
             box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'border-color');
             z-index: 1;
@@ -62,6 +61,16 @@ $_theme: $bootstrap;
 
             &:hover {
                 box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'border-color');
+
+                &::before {
+                    background: linear-gradient(
+                            to right,
+                            var-get($_theme, 'border-color') 1px,
+                            var-get($_theme, 'item-active-hover-background') 1px,
+                            var-get($_theme, 'item-active-hover-background') calc(100% - 1px),
+                            var-get($_theme, 'border-color') calc(100% - 1px)
+                    );								
+                }
             }
         }
     }
diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_indigo.scss
index c3ab4913143..f94565e2ed4 100644
--- a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_indigo.scss
+++ b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_indigo.scss
@@ -29,13 +29,6 @@ $_theme: $indigo;
             border-bottom: rem(1px) solid var-get($_theme, 'border-color');
         }
 
-        @include m(selected) {
-            &:hover,
-            &:focus-visible {
-                background: var-get($_theme, 'item-hover-background');
-            }
-        }
-
         @include e(inner) {
             > [igxtabheaderlabel] {
                 @include type-style(subtitle-2) {

From 2268ac128eb324f81d89ccfa3f07d94b9c78a6ac Mon Sep 17 00:00:00 2001
From: Adrian Petrov <adrian.ptrv1@gmail.com>
Date: Tue, 11 Nov 2025 23:51:10 +0200
Subject: [PATCH 4/4] chore(tabs): remove unnecessary code

---
 .../src/lib/tabs/tabs/header/themes/shared/_bootstrap.scss     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_bootstrap.scss
index 8f35604f4e4..245d44a689f 100644
--- a/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_bootstrap.scss
+++ b/projects/igniteui-angular/src/lib/tabs/tabs/header/themes/shared/_bootstrap.scss
@@ -9,7 +9,8 @@ $_theme: $bootstrap;
     %igx-tab-header--focus {
         border: none;
         box-shadow: inset 0 0 0 rem(2px) var-get($_theme, 'item-active-hover-color');
-        border-radius: var-get($_theme, 'border-radius') var-get($_theme, 'border-radius') rem(4px) rem(4px);
+        border-bottom-left-radius: rem(4px);
+        border-bottom-right-radius: rem(4px);
         z-index: 1;
 
         &::after {