From 094a2d67a7d9b5f6a8333f32d66f69c5546bf7f2 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Tue, 14 Apr 2026 09:25:24 +0300
Subject: [PATCH 01/10] feat(button-group): update button group styles

---
 .../shared/button/button.bootstrap.scss       |  37 -------
 .../themes/shared/button/button.common.scss   |  62 +++++++++--
 .../themes/shared/button/button.fluent.scss   |  46 +-------
 .../themes/shared/button/button.indigo.scss   |  53 ----------
 .../themes/shared/button/button.material.scss | 100 ------------------
 5 files changed, 58 insertions(+), 240 deletions(-)

diff --git a/src/components/button-group/themes/shared/button/button.bootstrap.scss b/src/components/button-group/themes/shared/button/button.bootstrap.scss
index 4b1905cbaa..e22e01befa 100644
--- a/src/components/button-group/themes/shared/button/button.bootstrap.scss
+++ b/src/components/button-group/themes/shared/button/button.bootstrap.scss
@@ -11,52 +11,15 @@ $group-item-border-thickness: rem(1px);
         min-height: $bootstrap-flat-btn-size;
         border-width: $group-item-border-thickness;
         padding-block: pad-block(rem(2px), rem(4px), rem(7px));
-
-        &::before {
-            position: absolute;
-            pointer-events: none;
-            width: 100%;
-            height: 100%;
-            z-index: -1;
-        }
     }
 
     [part='toggle focused'] {
         box-shadow: 0 0 0 rem(4px) var-get($theme, 'idle-shadow-color');
-        z-index: 1;
     }
 }
 
-[part~='toggle']:active {
-    background: var-get($theme, 'item-hover-background');
-    color: var-get($theme, 'item-hover-text-color');
-    border-color: var-get($theme, 'item-hover-border-color');
-
-    &::before {
-        content: '';
-        background: var-get($theme, 'item-focused-background');
-    }
-
-    ::slotted(igc-icon) {
-        color: var-get($theme, 'item-hover-icon-color');
-    }
-}
 
 :host([selected]) {
-    [part~='toggle']:active {
-        background: var-get($theme, 'item-selected-hover-background');
-        color: var-get($theme, 'item-selected-hover-text-color');
-        border-color: var-get($theme, 'item-selected-hover-border-color');
-
-        ::slotted(igc-icon) {
-            color: var-get($theme, 'item-selected-hover-icon-color');
-        }
-        
-        &::before {
-            background: var-get($theme, 'item-selected-focus-background');
-        }
-    }
-
     [part='toggle focused'] {
         box-shadow: 0 0 0 rem(4px) var-get($theme, 'selected-shadow-color');
     }
diff --git a/src/components/button-group/themes/shared/button/button.common.scss b/src/components/button-group/themes/shared/button/button.common.scss
index fb65275dd1..215cfdfc19 100644
--- a/src/components/button-group/themes/shared/button/button.common.scss
+++ b/src/components/button-group/themes/shared/button/button.common.scss
@@ -48,6 +48,31 @@ $theme: $material;
     }
 }
 
+:host([part='toggle focused']),
+:host(:focus-within) {
+    [part~='toggle'] {
+        color: var-get($theme, 'item-focused-text-color');
+        background: var-get($theme, 'item-focused-background');
+        border-color: var-get($theme, 'item-focused-border-color');
+
+        &:hover {
+            background: var-get($theme, 'item-focused-hover-background');
+            border-color: var-get($theme, 'item-focused-hover-border-color');
+        }
+
+        &:active {
+            background: var-get($theme, 'item-active-background');
+        }
+    }
+}
+
+:host(:active),
+[part~='toggle']:active {
+    [part~='toggle'] {
+        background: var-get($theme, 'item-active-background');
+    }
+}
+
 :host([selected]) {
     [part~='toggle'] {
         color: var-get($theme, 'item-selected-text-color');
@@ -72,6 +97,29 @@ $theme: $material;
     }
 }
 
+:host([selected][part='toggle focused']),
+:host([selected]:focus-within) {
+    [part~='toggle'] {
+        background: var-get($theme, 'item-selected-focus-background');
+        border-color: var-get($theme, 'item-focused-hover-border-color');
+
+        &:hover {
+            background: var-get($theme, 'item-selected-focus-hover-background');
+        }
+
+        &:active {
+            background: var-get($theme, 'item-selected-active-background');
+        }
+    }
+}
+
+:host([selected]:active),
+:host([selected]) [part~='toggle']:active {
+    [part~='toggle'] {
+        background: var-get($theme, 'item-selected-active-background');
+    }
+}
+
 :host([disabled]),
 :host(:disabled) {
     @include disabled();
@@ -85,12 +133,12 @@ $theme: $material;
 :host([selected]:disabled),
 :host([selected][disabled]) {
     [part~='toggle'] {
-        &::before {
-            position: absolute;
-            content: '';
-            inset: 0;
-            z-index: 3;
-            background: var-get($theme, 'disabled-selected-background');
-        }
+        color: var-get($theme, 'disabled-selected-text-color');
+        background: var-get($theme, 'disabled-selected-background');
+        border-color: var-get($theme, 'disabled-selected-border-color');
+    }
+
+    ::slotted(igc-icon) {
+        color: var-get($theme, 'disabled-selected-icon-color');
     }
 }
diff --git a/src/components/button-group/themes/shared/button/button.fluent.scss b/src/components/button-group/themes/shared/button/button.fluent.scss
index 4dbcdfefb0..1148a7c92c 100644
--- a/src/components/button-group/themes/shared/button/button.fluent.scss
+++ b/src/components/button-group/themes/shared/button/button.fluent.scss
@@ -12,8 +12,6 @@ $outline-btn-indent: rem(2px);
     }
 
     [part='toggle focused'] {
-        background: var-get($theme, 'item-background');
-
         &::after {
             content: '';
             position: absolute;
@@ -27,48 +25,10 @@ $outline-btn-indent: rem(2px);
     }
 }
 
-:host(:hover) {
-    [part='toggle focused'] {
-        background: var-get($theme, 'item-hover-background');
-    }
-}
-
-[part~='toggle']:active {
-    background: var-get($theme, 'item-focused-background');
-}
-
-[part='toggle focused'] {
-    &:active {
-        background: var-get($theme, 'item-focused-background');
-    }
-}
-
-:host([selected]:hover) {
+:host([part='toggle focused']),
+:host(:focus-within) {
     [part~='toggle'] {
-        background: var-get($theme, 'item-selected-background');
-
-        &::before {
-            content: '';
-            position: absolute;
-            pointer-events: none;
-            width: 100%;
-            height: 100%;
-            z-index: -1;
-            background: var-get($theme, 'item-selected-hover-background');
-        }
+        border-color: var-get($theme, 'item-border-color');
     }
 }
 
-:host([selected]) {
-    [part~='toggle']:active {
-        background: var-get($theme, 'item-selected-focus-background');
-    }
-
-    [part='toggle focused'] {
-        background: var-get($theme, 'item-selected-background');
-
-        &:active {
-            background: var-get($theme, 'item-selected-focus-background');
-        }
-    }
-}
diff --git a/src/components/button-group/themes/shared/button/button.indigo.scss b/src/components/button-group/themes/shared/button/button.indigo.scss
index 3d59107485..152142954f 100644
--- a/src/components/button-group/themes/shared/button/button.indigo.scss
+++ b/src/components/button-group/themes/shared/button/button.indigo.scss
@@ -20,72 +20,19 @@ $group-item-border-thickness: rem(1px);
     }
 
     [part='toggle focused'] {
-        z-index: 2;
         box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color');
-        border-color: var-get($theme, 'item-border-color');
-        color: var-get($theme, 'item-focused-text-color');
-    }
-}
-
-:host(:hover) {
-    [part~='toggle'] {
-        z-index: 1;
-    }
-
-    [part='toggle focused'] {
-        border-color: var-get($theme, 'item-hover-border-color');
-        color: var-get($theme, 'item-hover-text-color');
-    }
-}
-
-[part~='toggle']:active {
-    color: var-get($theme, 'item-hover-text-color');
-    background: var-get($theme, 'item-hover-background');
-    border-color: var-get($theme, 'item-hover-border-color');
-    z-index: 2;
-
-    ::slotted(igc-icon) {
-        color: var-get($theme, 'item-hover-icon-color');
-    }
-}
-
-:host([selected]:hover) {
-    [part='toggle focused'] {
-        border-color: var-get($theme, 'item-selected-hover-border-color');
     }
 }
 
 :host([selected]) {
     [part='toggle focused'] {
         box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color');
-        border-color: var-get($theme, 'item-selected-border-color');
-        color: var-get($theme, 'item-selected-hover-text-color');
-    }
-
-    [part~='toggle']:active {
-        color: var-get($theme, 'item-selected-hover-text-color');
-        background: var-get($theme, 'item-selected-hover-background');
-        border-color: var-get($theme, 'item-selected-hover-border-color');
-
-        ::slotted(igc-icon) {
-            color: var-get($theme, 'item-selected-hover-icon-color');
-        }
     }
 }
 
 :host([selected]:disabled),
 :host([selected][disabled]) {
     [part~='toggle'] {
-        color: var-get($theme, 'disabled-selected-text-color');
-        background: var-get($theme, 'disabled-selected-background');
         border: none;
-
-        &::before {
-            display: none;
-        }
-    }
-
-    ::slotted(igc-icon) {
-        color: var-get($theme, 'disabled-selected-icon-color');
     }
 }
diff --git a/src/components/button-group/themes/shared/button/button.material.scss b/src/components/button-group/themes/shared/button/button.material.scss
index e9be82e5aa..7596e00127 100644
--- a/src/components/button-group/themes/shared/button/button.material.scss
+++ b/src/components/button-group/themes/shared/button/button.material.scss
@@ -2,103 +2,3 @@
 @use '../../light/themes' as *;
 
 $theme: $material;
-
-:host {
-    [part~='toggle']::before {
-        position: absolute;
-        pointer-events: none;
-        width: 100%;
-        height: 100%;
-        z-index: -1;
-    }
-
-    [part='toggle focused'] {
-        color: var-get($theme, 'item-hover-text-color');
-        border-color: var-get($theme, 'item-hover-border-color');
-
-        ::slotted(igc-icon) {
-            color: var-get($theme, 'item-hover-icon-color');
-        }
-
-        &::before {
-            content: '';
-            background: var-get($theme, 'item-hover-background');
-        }
-    }
-}
-
-:host(:hover) {
-    [part~='toggle'] {
-        background: var-get($theme, 'item-background');
-
-        &::before {
-            content: '';
-            background: var-get($theme, 'item-hover-background');
-        }
-    }
-
-    [part='toggle focused'] {
-        &::before {
-            background: var-get($theme, 'item-focused-hover-background');
-        }
-    }
-}
-
-[part~='toggle']:active {
-    color: var-get($theme, 'item-hover-text-color');
-    border-color: var-get($theme, 'item-hover-border-color');
-
-    &::before {
-        content: '';
-        background: var-get($theme, 'item-focused-background');
-    }
-
-    ::slotted(igc-icon) {
-        color: var-get($theme, 'item-hover-icon-color');
-    }
-}
-
-:host([selected]) {
-    [part~='toggle']:active {
-        background: var-get($theme, 'item-selected-background');
-        color: var-get($theme, 'item-selected-hover-text-color');
-        border-color: var-get($theme, 'item-selected-border-color');
-
-        ::slotted(igc-icon) {
-            color: var-get($theme, 'item-selected-hover-icon-color');
-        }
-        
-        &::before {
-            background: var-get($theme, 'item-selected-focus-background');
-        }
-    }
-
-    [part='toggle focused'] {
-        color: var-get($theme, 'item-selected-hover-text-color');
-        border-color: var-get($theme, 'item-selected-hover-border-color');
-
-        ::slotted(igc-icon) {
-            color: var-get($theme, 'item-selected-hover-icon-color');
-        }
-
-        &::before {
-            background: var-get($theme, 'item-selected-hover-background');
-        }
-    }
-}
-
-:host([selected]:hover) {
-    [part~='toggle'] {
-        background: var-get($theme, 'item-selected-background');
-
-        &::before {
-            background: var-get($theme, 'item-selected-hover-background');
-        }
-    }
-
-    [part='toggle focused'] {
-        &::before {
-            background: var-get($theme, 'item-selected-focus-hover-background');
-        }
-    }
-}

From ea592b38160aff2d2ab9ff9e2fcc581bb2daa7c2 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Tue, 14 Apr 2026 15:33:49 +0300
Subject: [PATCH 02/10] feat(button-group): update button group styles

---
 .../themes/shared/button/button.common.scss   | 44 +++++++++++++++++++
 .../themes/shared/button/button.indigo.scss   | 21 +++++++++
 .../themes/shared/button/button.material.scss | 12 +++++
 3 files changed, 77 insertions(+)

diff --git a/src/components/button-group/themes/shared/button/button.common.scss b/src/components/button-group/themes/shared/button/button.common.scss
index 215cfdfc19..ac5d8b4591 100644
--- a/src/components/button-group/themes/shared/button/button.common.scss
+++ b/src/components/button-group/themes/shared/button/button.common.scss
@@ -38,6 +38,7 @@ $theme: $material;
 
 :host(:hover) {
     [part~='toggle'] {
+        z-index: 1;
         color: var-get($theme, 'item-hover-text-color');
         background: var-get($theme, 'item-hover-background');
         border-color: var-get($theme, 'item-hover-border-color');
@@ -51,6 +52,7 @@ $theme: $material;
 :host([part='toggle focused']),
 :host(:focus-within) {
     [part~='toggle'] {
+        z-index: 1;
         color: var-get($theme, 'item-focused-text-color');
         background: var-get($theme, 'item-focused-background');
         border-color: var-get($theme, 'item-focused-border-color');
@@ -58,23 +60,49 @@ $theme: $material;
         &:hover {
             background: var-get($theme, 'item-focused-hover-background');
             border-color: var-get($theme, 'item-focused-hover-border-color');
+            color: var-get($theme, 'item-focused-hover-text-color');
         }
 
         &:active {
             background: var-get($theme, 'item-active-background');
+            border-color: var-get($theme, 'item-active-border-color');
+            color: var-get($theme, 'item-hover-text-color');
+
+            ::slotted(igc-icon) {
+                color: var-get($theme, 'item-hover-icon-color');
+            }
         }
     }
+
+    ::slotted(igc-icon) {
+        color: var-get($theme, 'item-focused-text-color');
+    }
+}
+
+:host([part='toggle focused']:hover),
+:host(:focus-within:hover) {
+    ::slotted(igc-icon) {
+        color: var-get($theme, 'item-focused-hover-text-color');
+    }
 }
 
 :host(:active),
 [part~='toggle']:active {
     [part~='toggle'] {
+        z-index: 2;
         background: var-get($theme, 'item-active-background');
+        border-color: var-get($theme, 'item-active-border-color');
+        color: var-get($theme, 'item-hover-text-color');
+
+        ::slotted(igc-icon) {
+            color: var-get($theme, 'item-hover-icon-color');
+        }
     }
 }
 
 :host([selected]) {
     [part~='toggle'] {
+        z-index: 3;
         color: var-get($theme, 'item-selected-text-color');
         background: var-get($theme, 'item-selected-background');
         border-color: var-get($theme, 'item-selected-border-color');
@@ -100,23 +128,39 @@ $theme: $material;
 :host([selected][part='toggle focused']),
 :host([selected]:focus-within) {
     [part~='toggle'] {
+        color: var-get($theme, 'item-selected-text-color');
         background: var-get($theme, 'item-selected-focus-background');
         border-color: var-get($theme, 'item-focused-hover-border-color');
 
         &:hover {
             background: var-get($theme, 'item-selected-focus-hover-background');
+            color: var-get($theme, 'item-selected-hover-text-color');
+            border-color: var-get($theme, 'item-selected-border-color');
         }
 
         &:active {
             background: var-get($theme, 'item-selected-active-background');
+            border-color: var-get($theme, 'item-selected-active-border-color');
         }
     }
+
+    ::slotted(igc-icon) {
+        color: var-get($theme, 'item-selected-icon-color');
+    }
+}
+
+:host([selected][part='toggle focused']:hover),
+:host([selected]:focus-within:hover) {
+    ::slotted(igc-icon) {
+        color: var-get($theme, 'item-selected-hover-icon-color');
+    }
 }
 
 :host([selected]:active),
 :host([selected]) [part~='toggle']:active {
     [part~='toggle'] {
         background: var-get($theme, 'item-selected-active-background');
+        border-color: var-get($theme, 'item-selected-active-border-color');
     }
 }
 
diff --git a/src/components/button-group/themes/shared/button/button.indigo.scss b/src/components/button-group/themes/shared/button/button.indigo.scss
index 152142954f..a9269ebdf3 100644
--- a/src/components/button-group/themes/shared/button/button.indigo.scss
+++ b/src/components/button-group/themes/shared/button/button.indigo.scss
@@ -30,6 +30,27 @@ $group-item-border-thickness: rem(1px);
     }
 }
 
+:host([part='toggle focused']),
+:host(:focus-within) {
+    ::slotted(igc-icon) {
+        color: var-get($theme, 'item-icon-color');
+    }
+}
+
+:host([part='toggle focused']:hover),
+:host(:focus-within:hover) {
+    ::slotted(igc-icon) {
+        color: var-get($theme, 'item-hover-icon-color');
+    }
+}
+
+:host([selected][part='toggle focused']:hover),
+:host([selected]:focus-within:hover) {
+    [part~='toggle'] {
+        border-color: var-get($theme, 'item-selected-hover-border-color');
+    }
+}
+
 :host([selected]:disabled),
 :host([selected][disabled]) {
     [part~='toggle'] {
diff --git a/src/components/button-group/themes/shared/button/button.material.scss b/src/components/button-group/themes/shared/button/button.material.scss
index 7596e00127..361363789e 100644
--- a/src/components/button-group/themes/shared/button/button.material.scss
+++ b/src/components/button-group/themes/shared/button/button.material.scss
@@ -2,3 +2,15 @@
 @use '../../light/themes' as *;
 
 $theme: $material;
+
+:host([selected][part='toggle focused']),
+:host([selected]:focus-within) {
+    [part~='toggle'] {
+        color: var-get($theme, 'item-selected-hover-text-color');
+        border-color: var-get($theme, 'item-selected-hover-border-color');
+    }
+
+    ::slotted(igc-icon) {
+        color: var-get($theme, 'item-selected-hover-icon-color');
+    }
+}

From 824a25e82b2b2e627b5b428163b5d6467660cb44 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Tue, 14 Apr 2026 15:42:36 +0300
Subject: [PATCH 03/10] fix(button-group): fix selected + focused border

---
 .../button-group/themes/shared/button/button.common.scss        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/button-group/themes/shared/button/button.common.scss b/src/components/button-group/themes/shared/button/button.common.scss
index ac5d8b4591..6010dc252f 100644
--- a/src/components/button-group/themes/shared/button/button.common.scss
+++ b/src/components/button-group/themes/shared/button/button.common.scss
@@ -130,7 +130,7 @@ $theme: $material;
     [part~='toggle'] {
         color: var-get($theme, 'item-selected-text-color');
         background: var-get($theme, 'item-selected-focus-background');
-        border-color: var-get($theme, 'item-focused-hover-border-color');
+        border-color: var-get($theme, 'item-selected-border-color');
 
         &:hover {
             background: var-get($theme, 'item-selected-focus-hover-background');

From 81c4d1aaa414b83bbe5f9725b9497fa9655d6528 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Tue, 14 Apr 2026 15:51:22 +0300
Subject: [PATCH 04/10] fix(button-group): fix z-indexes

---
 .../button-group/themes/shared/button/button.common.scss     | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/button-group/themes/shared/button/button.common.scss b/src/components/button-group/themes/shared/button/button.common.scss
index 6010dc252f..2d3c9a8edc 100644
--- a/src/components/button-group/themes/shared/button/button.common.scss
+++ b/src/components/button-group/themes/shared/button/button.common.scss
@@ -52,7 +52,7 @@ $theme: $material;
 :host([part='toggle focused']),
 :host(:focus-within) {
     [part~='toggle'] {
-        z-index: 1;
+        z-index: 2;
         color: var-get($theme, 'item-focused-text-color');
         background: var-get($theme, 'item-focused-background');
         border-color: var-get($theme, 'item-focused-border-color');
@@ -89,7 +89,6 @@ $theme: $material;
 :host(:active),
 [part~='toggle']:active {
     [part~='toggle'] {
-        z-index: 2;
         background: var-get($theme, 'item-active-background');
         border-color: var-get($theme, 'item-active-border-color');
         color: var-get($theme, 'item-hover-text-color');
@@ -102,7 +101,6 @@ $theme: $material;
 
 :host([selected]) {
     [part~='toggle'] {
-        z-index: 3;
         color: var-get($theme, 'item-selected-text-color');
         background: var-get($theme, 'item-selected-background');
         border-color: var-get($theme, 'item-selected-border-color');
@@ -128,6 +126,7 @@ $theme: $material;
 :host([selected][part='toggle focused']),
 :host([selected]:focus-within) {
     [part~='toggle'] {
+        z-index: 2;
         color: var-get($theme, 'item-selected-text-color');
         background: var-get($theme, 'item-selected-focus-background');
         border-color: var-get($theme, 'item-selected-border-color');

From d33def3d895cd93245dd20db8a4ec3fb98b1dfe3 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Wed, 15 Apr 2026 09:58:54 +0300
Subject: [PATCH 05/10] feat(button-group): fix focused styles

---
 .../themes/shared/button/button.common.scss   | 47 +++++++++----------
 .../themes/shared/button/button.indigo.scss   | 34 +++++++++-----
 .../themes/shared/button/button.material.scss |  1 -
 3 files changed, 46 insertions(+), 36 deletions(-)

diff --git a/src/components/button-group/themes/shared/button/button.common.scss b/src/components/button-group/themes/shared/button/button.common.scss
index 2d3c9a8edc..5b2e75e1f6 100644
--- a/src/components/button-group/themes/shared/button/button.common.scss
+++ b/src/components/button-group/themes/shared/button/button.common.scss
@@ -57,33 +57,30 @@ $theme: $material;
         background: var-get($theme, 'item-focused-background');
         border-color: var-get($theme, 'item-focused-border-color');
 
+        ::slotted(igc-icon) {
+            color: var-get($theme, 'item-focused-text-color');
+        }
+
         &:hover {
             background: var-get($theme, 'item-focused-hover-background');
             border-color: var-get($theme, 'item-focused-hover-border-color');
             color: var-get($theme, 'item-focused-hover-text-color');
+
+            ::slotted(igc-icon) {
+                color: var-get($theme, 'item-focused-hover-text-color');
+            }
         }
 
         &:active {
             background: var-get($theme, 'item-active-background');
             border-color: var-get($theme, 'item-active-border-color');
-            color: var-get($theme, 'item-hover-text-color');
+            color: var-get($theme, 'item-focused-hover-text-color');
 
             ::slotted(igc-icon) {
-                color: var-get($theme, 'item-hover-icon-color');
+                color: var-get($theme, 'item-focused-hover-text-color');
             }
         }
     }
-
-    ::slotted(igc-icon) {
-        color: var-get($theme, 'item-focused-text-color');
-    }
-}
-
-:host([part='toggle focused']:hover),
-:host(:focus-within:hover) {
-    ::slotted(igc-icon) {
-        color: var-get($theme, 'item-focused-hover-text-color');
-    }
 }
 
 :host(:active),
@@ -131,27 +128,29 @@ $theme: $material;
         background: var-get($theme, 'item-selected-focus-background');
         border-color: var-get($theme, 'item-selected-border-color');
 
+        ::slotted(igc-icon) {
+            color: var-get($theme, 'item-selected-icon-color');
+        }
+
         &:hover {
             background: var-get($theme, 'item-selected-focus-hover-background');
             color: var-get($theme, 'item-selected-hover-text-color');
             border-color: var-get($theme, 'item-selected-border-color');
+
+            ::slotted(igc-icon) {
+                color: var-get($theme, 'item-selected-hover-icon-color');
+            }
         }
 
         &:active {
             background: var-get($theme, 'item-selected-active-background');
+            color: var-get($theme, 'item-selected-hover-text-color');
             border-color: var-get($theme, 'item-selected-active-border-color');
-        }
-    }
 
-    ::slotted(igc-icon) {
-        color: var-get($theme, 'item-selected-icon-color');
-    }
-}
-
-:host([selected][part='toggle focused']:hover),
-:host([selected]:focus-within:hover) {
-    ::slotted(igc-icon) {
-        color: var-get($theme, 'item-selected-hover-icon-color');
+            ::slotted(igc-icon) {
+                color: var-get($theme, 'item-selected-hover-icon-color');
+            }
+        }
     }
 }
 
diff --git a/src/components/button-group/themes/shared/button/button.indigo.scss b/src/components/button-group/themes/shared/button/button.indigo.scss
index a9269ebdf3..599436b47e 100644
--- a/src/components/button-group/themes/shared/button/button.indigo.scss
+++ b/src/components/button-group/themes/shared/button/button.indigo.scss
@@ -32,22 +32,34 @@ $group-item-border-thickness: rem(1px);
 
 :host([part='toggle focused']),
 :host(:focus-within) {
-    ::slotted(igc-icon) {
-        color: var-get($theme, 'item-icon-color');
-    }
-}
+    [part~='toggle'] {
+        ::slotted(igc-icon) {
+            color: var-get($theme, 'item-icon-color');
+        }
 
-:host([part='toggle focused']:hover),
-:host(:focus-within:hover) {
-    ::slotted(igc-icon) {
-        color: var-get($theme, 'item-hover-icon-color');
+        &:hover {
+            ::slotted(igc-icon) {
+                color: var-get($theme, 'item-hover-icon-color');
+            }
+        }
+
+        &:active {
+            ::slotted(igc-icon) {
+                color: var-get($theme, 'item-hover-icon-color');
+            }
+        }
     }
 }
 
-:host([selected][part='toggle focused']:hover),
-:host([selected]:focus-within:hover) {
+:host([selected][part='toggle focused']),
+:host([selected]:focus-within) {
     [part~='toggle'] {
-        border-color: var-get($theme, 'item-selected-hover-border-color');
+        border-color: var-get($theme, 'item-selected-border-color');
+
+        &:hover,
+        &:active {
+            border-color: var-get($theme, 'item-selected-hover-border-color');
+        }
     }
 }
 
diff --git a/src/components/button-group/themes/shared/button/button.material.scss b/src/components/button-group/themes/shared/button/button.material.scss
index 361363789e..2149b5989b 100644
--- a/src/components/button-group/themes/shared/button/button.material.scss
+++ b/src/components/button-group/themes/shared/button/button.material.scss
@@ -7,7 +7,6 @@ $theme: $material;
 :host([selected]:focus-within) {
     [part~='toggle'] {
         color: var-get($theme, 'item-selected-hover-text-color');
-        border-color: var-get($theme, 'item-selected-hover-border-color');
     }
 
     ::slotted(igc-icon) {

From 9992bf70f8c6ef7bffee07ca9d46ce5a0e22ab88 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Wed, 15 Apr 2026 10:21:16 +0300
Subject: [PATCH 06/10] chore(button-group): fix border in selected focus

---
 .../themes/shared/button/button.common.scss      | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/button-group/themes/shared/button/button.common.scss b/src/components/button-group/themes/shared/button/button.common.scss
index 5b2e75e1f6..476fb51e30 100644
--- a/src/components/button-group/themes/shared/button/button.common.scss
+++ b/src/components/button-group/themes/shared/button/button.common.scss
@@ -83,16 +83,14 @@ $theme: $material;
     }
 }
 
-:host(:active),
+:host(:active) [part~='toggle'],
 [part~='toggle']:active {
-    [part~='toggle'] {
-        background: var-get($theme, 'item-active-background');
-        border-color: var-get($theme, 'item-active-border-color');
-        color: var-get($theme, 'item-hover-text-color');
+    background: var-get($theme, 'item-active-background');
+    border-color: var-get($theme, 'item-active-border-color');
+    color: var-get($theme, 'item-hover-text-color');
 
-        ::slotted(igc-icon) {
-            color: var-get($theme, 'item-hover-icon-color');
-        }
+    ::slotted(igc-icon) {
+        color: var-get($theme, 'item-hover-icon-color');
     }
 }
 
@@ -126,7 +124,7 @@ $theme: $material;
         z-index: 2;
         color: var-get($theme, 'item-selected-text-color');
         background: var-get($theme, 'item-selected-focus-background');
-        border-color: var-get($theme, 'item-selected-border-color');
+        border-color: var-get($theme, 'item-selected-hover-border-color');
 
         ::slotted(igc-icon) {
             color: var-get($theme, 'item-selected-icon-color');

From 7cfffa071d0405d22a5daaddc05bc1404074d999 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Wed, 15 Apr 2026 13:54:12 +0300
Subject: [PATCH 07/10] chore(button-group): refactor button group styles

---
 .../themes/shared/button/button.common.scss   | 120 +++++++-----------
 .../themes/shared/button/button.fluent.scss   |  10 +-
 .../themes/shared/button/button.indigo.scss   |  44 ++-----
 .../themes/shared/button/button.material.scss |   7 +-
 4 files changed, 65 insertions(+), 116 deletions(-)

diff --git a/src/components/button-group/themes/shared/button/button.common.scss b/src/components/button-group/themes/shared/button/button.common.scss
index 476fb51e30..1d45ac0d6b 100644
--- a/src/components/button-group/themes/shared/button/button.common.scss
+++ b/src/components/button-group/themes/shared/button/button.common.scss
@@ -29,10 +29,21 @@ $theme: $material;
         padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
         padding-block: pad-block(rem(1px), rem(4px), rem(6px));
         border-color: var-get($theme, 'item-border-color');
+
+        ::slotted(igc-icon) {
+            color: var-get($theme, 'item-icon-color');
+        }
     }
 
-    ::slotted(igc-icon) {
-        color: var-get($theme, 'item-icon-color');
+    [part='toggle focused'] {
+        z-index: 2;
+        color: var-get($theme, 'item-focused-text-color');
+        background: var-get($theme, 'item-focused-background');
+        border-color: var-get($theme, 'item-focused-border-color');
+
+        ::slotted(igc-icon) {
+            color: var-get($theme, 'item-focused-text-color');
+        }
     }
 }
 
@@ -42,43 +53,19 @@ $theme: $material;
         color: var-get($theme, 'item-hover-text-color');
         background: var-get($theme, 'item-hover-background');
         border-color: var-get($theme, 'item-hover-border-color');
-    }
-
-    ::slotted(igc-icon) {
-        color: var-get($theme, 'item-hover-icon-color');
-    }
-}
-
-:host([part='toggle focused']),
-:host(:focus-within) {
-    [part~='toggle'] {
-        z-index: 2;
-        color: var-get($theme, 'item-focused-text-color');
-        background: var-get($theme, 'item-focused-background');
-        border-color: var-get($theme, 'item-focused-border-color');
 
         ::slotted(igc-icon) {
-            color: var-get($theme, 'item-focused-text-color');
+            color: var-get($theme, 'item-hover-icon-color');
         }
+    }
 
-        &:hover {
-            background: var-get($theme, 'item-focused-hover-background');
-            border-color: var-get($theme, 'item-focused-hover-border-color');
-            color: var-get($theme, 'item-focused-hover-text-color');
-
-            ::slotted(igc-icon) {
-                color: var-get($theme, 'item-focused-hover-text-color');
-            }
-        }
+    [part='toggle focused'] {
+        background: var-get($theme, 'item-focused-hover-background');
+        border-color: var-get($theme, 'item-focused-hover-border-color');
+        color: var-get($theme, 'item-focused-hover-text-color');
 
-        &:active {
-            background: var-get($theme, 'item-active-background');
-            border-color: var-get($theme, 'item-active-border-color');
+        ::slotted(igc-icon) {
             color: var-get($theme, 'item-focused-hover-text-color');
-
-            ::slotted(igc-icon) {
-                color: var-get($theme, 'item-focused-hover-text-color');
-            }
         }
     }
 }
@@ -94,15 +81,30 @@ $theme: $material;
     }
 }
 
+:host(:active) [part='toggle-focused'],
+[part='toggle focused']:active {
+    color: var-get($theme, 'item-focused-hover-text-color');
+
+    ::slotted(igc-icon) {
+        color: var-get($theme, 'item-focused-hover-text-color');
+    }
+}
+
 :host([selected]) {
     [part~='toggle'] {
         color: var-get($theme, 'item-selected-text-color');
         background: var-get($theme, 'item-selected-background');
         border-color: var-get($theme, 'item-selected-border-color');
+        z-index: 2;
+
+        ::slotted(igc-icon) {
+            color: var-get($theme, 'item-selected-icon-color');
+        }
     }
 
-    ::slotted(igc-icon) {
-        color: var-get($theme, 'item-selected-icon-color');
+    [part='toggle focused'] {
+        background: var-get($theme, 'item-selected-focus-background');
+        border-color: var-get($theme, 'item-selected-hover-border-color');
     }
 }
 
@@ -111,53 +113,27 @@ $theme: $material;
         color: var-get($theme, 'item-selected-hover-text-color');
         background: var-get($theme, 'item-selected-hover-background');
         border-color: var-get($theme, 'item-selected-hover-border-color');
-    }
-
-    ::slotted(igc-icon) {
-        color: var-get($theme, 'item-selected-hover-icon-color');
-    }
-}
-
-:host([selected][part='toggle focused']),
-:host([selected]:focus-within) {
-    [part~='toggle'] {
-        z-index: 2;
-        color: var-get($theme, 'item-selected-text-color');
-        background: var-get($theme, 'item-selected-focus-background');
-        border-color: var-get($theme, 'item-selected-hover-border-color');
 
         ::slotted(igc-icon) {
-            color: var-get($theme, 'item-selected-icon-color');
+            color: var-get($theme, 'item-selected-hover-icon-color');
         }
+    }
 
-        &:hover {
-            background: var-get($theme, 'item-selected-focus-hover-background');
-            color: var-get($theme, 'item-selected-hover-text-color');
-            border-color: var-get($theme, 'item-selected-border-color');
-
-            ::slotted(igc-icon) {
-                color: var-get($theme, 'item-selected-hover-icon-color');
-            }
-        }
-
-        &:active {
-            background: var-get($theme, 'item-selected-active-background');
-            color: var-get($theme, 'item-selected-hover-text-color');
-            border-color: var-get($theme, 'item-selected-active-border-color');
-
-            ::slotted(igc-icon) {
-                color: var-get($theme, 'item-selected-hover-icon-color');
-            }
-        }
+    [part='toggle focused'] {
+        background: var-get($theme, 'item-selected-focus-hover-background');
+        border-color: var-get($theme, 'item-selected-border-color');
     }
 }
 
-:host([selected]:active),
+:host([selected]:active) [part~='toggle'],
 :host([selected]) [part~='toggle']:active {
-    [part~='toggle'] {
         background: var-get($theme, 'item-selected-active-background');
+        color: var-get($theme, 'item-selected-hover-text-color');
         border-color: var-get($theme, 'item-selected-active-border-color');
-    }
+
+        ::slotted(igc-icon) {
+            color: var-get($theme, 'item-selected-hover-icon-color');
+        }
 }
 
 :host([disabled]),
diff --git a/src/components/button-group/themes/shared/button/button.fluent.scss b/src/components/button-group/themes/shared/button/button.fluent.scss
index 1148a7c92c..cdf77271d7 100644
--- a/src/components/button-group/themes/shared/button/button.fluent.scss
+++ b/src/components/button-group/themes/shared/button/button.fluent.scss
@@ -12,6 +12,8 @@ $outline-btn-indent: rem(2px);
     }
 
     [part='toggle focused'] {
+        border-color: var-get($theme, 'item-border-color');
+
         &::after {
             content: '';
             position: absolute;
@@ -24,11 +26,3 @@ $outline-btn-indent: rem(2px);
         }
     }
 }
-
-:host([part='toggle focused']),
-:host(:focus-within) {
-    [part~='toggle'] {
-        border-color: var-get($theme, 'item-border-color');
-    }
-}
-
diff --git a/src/components/button-group/themes/shared/button/button.indigo.scss b/src/components/button-group/themes/shared/button/button.indigo.scss
index 599436b47e..11cd49a83c 100644
--- a/src/components/button-group/themes/shared/button/button.indigo.scss
+++ b/src/components/button-group/themes/shared/button/button.indigo.scss
@@ -21,46 +21,28 @@ $group-item-border-thickness: rem(1px);
 
     [part='toggle focused'] {
         box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color');
-    }
-}
 
-:host([selected]) {
-    [part='toggle focused'] {
-        box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color');
-    }
-}
-
-:host([part='toggle focused']),
-:host(:focus-within) {
-    [part~='toggle'] {
         ::slotted(igc-icon) {
             color: var-get($theme, 'item-icon-color');
         }
+    }
+}
 
-        &:hover {
-            ::slotted(igc-icon) {
-                color: var-get($theme, 'item-hover-icon-color');
-            }
-        }
-
-        &:active {
-            ::slotted(igc-icon) {
-                color: var-get($theme, 'item-hover-icon-color');
-            }
-        }
+:host(:hover) [part='toggle focused'],
+[part='toggle focused']:active {
+    ::slotted(igc-icon) {
+        color: var-get($theme, 'item-hover-icon-color');
     }
 }
 
-:host([selected][part='toggle focused']),
-:host([selected]:focus-within) {
-    [part~='toggle'] {
-        border-color: var-get($theme, 'item-selected-border-color');
+:host([selected]) [part='toggle focused'] {
+    box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color');
+    border-color: var-get($theme, 'item-selected-border-color');
+}
 
-        &:hover,
-        &:active {
-            border-color: var-get($theme, 'item-selected-hover-border-color');
-        }
-    }
+:host([selected]:hover) [part='toggle focused'],
+:host([selected]) [part='toggle focused']:active {
+    border-color: var-get($theme, 'item-selected-hover-border-color');
 }
 
 :host([selected]:disabled),
diff --git a/src/components/button-group/themes/shared/button/button.material.scss b/src/components/button-group/themes/shared/button/button.material.scss
index 2149b5989b..a8470064cd 100644
--- a/src/components/button-group/themes/shared/button/button.material.scss
+++ b/src/components/button-group/themes/shared/button/button.material.scss
@@ -3,11 +3,8 @@
 
 $theme: $material;
 
-:host([selected][part='toggle focused']),
-:host([selected]:focus-within) {
-    [part~='toggle'] {
-        color: var-get($theme, 'item-selected-hover-text-color');
-    }
+:host([selected]) [part='toggle focused'] {
+    color: var-get($theme, 'item-selected-hover-text-color');
 
     ::slotted(igc-icon) {
         color: var-get($theme, 'item-selected-hover-icon-color');

From a030f0a18bc56cb5ff9ec537eef909ef6eade1a2 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Wed, 15 Apr 2026 14:51:40 +0300
Subject: [PATCH 08/10] chore(button-group): fix toggle focused hover z-index

---
 .../button-group/themes/shared/button/button.common.scss         | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/button-group/themes/shared/button/button.common.scss b/src/components/button-group/themes/shared/button/button.common.scss
index 1d45ac0d6b..46e14c1529 100644
--- a/src/components/button-group/themes/shared/button/button.common.scss
+++ b/src/components/button-group/themes/shared/button/button.common.scss
@@ -60,6 +60,7 @@ $theme: $material;
     }
 
     [part='toggle focused'] {
+        z-index: 2;
         background: var-get($theme, 'item-focused-hover-background');
         border-color: var-get($theme, 'item-focused-hover-border-color');
         color: var-get($theme, 'item-focused-hover-text-color');

From b5780dd5bb1bc697c9f2676b84a299d5f823553e Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Thu, 16 Apr 2026 11:08:55 +0300
Subject: [PATCH 09/10] chore(deps): bump theming version

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f1d0ed3ea4..12d261ee78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,7 +37,7 @@
         "husky": "^9.1.7",
         "ig-typedoc-theme": "^7.0.1",
         "igniteui-i18n-resources": "^1.0.4",
-        "igniteui-theming": "^25.1.0",
+        "igniteui-theming": "^25.2.0",
         "keep-a-changelog": "^3.0.2",
         "lint-staged": "^16.4.0",
         "lit-analyzer": "^2.0.3",
diff --git a/package.json b/package.json
index b0ee0adb6a..ee9fd7747d 100644
--- a/package.json
+++ b/package.json
@@ -81,7 +81,7 @@
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^7.0.1",
     "igniteui-i18n-resources": "^1.0.4",
-    "igniteui-theming": "^25.1.0",
+    "igniteui-theming": "^25.2.0",
     "keep-a-changelog": "^3.0.2",
     "lint-staged": "^16.4.0",
     "lit-analyzer": "^2.0.3",

From 6fc81638d2c7a2ea0b3aa53be586ea8aa637ed6c Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Thu, 16 Apr 2026 11:13:20 +0300
Subject: [PATCH 10/10] chore(deps): bump theming version

---
 package-lock.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 12d261ee78..65dfe15657 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8654,13 +8654,13 @@
       }
     },
     "node_modules/igniteui-theming": {
-      "version": "25.1.0",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-25.1.0.tgz",
-      "integrity": "sha512-qM55JURFepSLjU0cl1g8J7E05BXxTp7aQ6oUu4j5ZBZEhKAGCaxZZdMtBSkcKcyghjwkDvurpihzjdnvv76YAg==",
+      "version": "25.2.0",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-25.2.0.tgz",
+      "integrity": "sha512-bXRN379/vL05cDQl12jLABXALo+cXdD9zeYTlwURoEq1GrCkriYQnSqgwWmD/UdN/9Jc2MaMbsuXuYRZq5F71w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@modelcontextprotocol/sdk": "^1.25.0",
+        "@modelcontextprotocol/sdk": "^1.28.0",
         "sass-embedded": "~1.92.1",
         "zod": "^3.25.76"
       },