From 7964c19061737c420ba3a287f2851346f443c863 Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Wed, 27 Mar 2024 15:59:32 +0200
Subject: [PATCH 1/8] fix(button/icon-button): focus styles and width
 improvements

---
 .../button/shared/button.bootstrap.scss       | 14 +++-----
 .../themes/button/shared/button.common.scss   | 12 ++-----
 .../themes/button/shared/button.indigo.scss   | 33 +++++++------------
 .../themes/button/shared/button.material.scss | 29 +++++++---------
 .../shared/icon-button.bootstrap.scss         | 21 ++++--------
 .../shared/icon-button.indigo.scss            | 17 +++++-----
 6 files changed, 45 insertions(+), 81 deletions(-)

diff --git a/src/components/button/themes/button/shared/button.bootstrap.scss b/src/components/button/themes/button/shared/button.bootstrap.scss
index 874d0ac5f..b9ba10d88 100644
--- a/src/components/button/themes/button/shared/button.bootstrap.scss
+++ b/src/components/button/themes/button/shared/button.bootstrap.scss
@@ -14,8 +14,6 @@ $outlined-theme: $bootstrap-outlined;
     --component-size: var(--ig-size, #{var-get($outlined-theme, 'default-size')});
 
     [part='base'] {
-        border: rem(1px) solid var-get($outlined-theme, 'border-color');
-
         &:focus {
             border: rem(1px) solid var-get($outlined-theme, 'focus-border-color');
         }
@@ -32,32 +30,28 @@ $outlined-theme: $bootstrap-outlined;
 
 :host(:not([disabled])[variant='flat']) [part='base'],
 :host(:not(:disabled)[variant='flat']) [part='base'] {
-    &:focus,
-    &:active {
+    &:focus-visible {
         box-shadow: 0 0 0 rem(4px) var-get($flat-theme, 'shadow-color');
     }
 }
 
 :host(:not([disabled])[variant='outlined']) [part='base'],
 :host(:not(:disabled)[variant='outlined']) [part='base'] {
-    &:focus,
-    &:active {
+    &:focus-visible {
         box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'shadow-color');
     }
 }
 
 :host(:not([disabled])[variant='contained']) [part='base'],
 :host(:not(:disabled)[variant='contained']) [part='base'] {
-    &:focus,
-    &:active {
+    &:focus-visible {
         box-shadow: 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color');
     }
 }
 
 :host(:not([disabled])[variant='fab']) [part='base'],
 :host(:not(:disabled)[variant='fab']) [part='base'] {
-    &:focus,
-    &:active {
+    &:focus-visible {
         box-shadow: 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color');
     }
 }
diff --git a/src/components/button/themes/button/shared/button.common.scss b/src/components/button/themes/button/shared/button.common.scss
index c2fa6c42e..9110f594a 100644
--- a/src/components/button/themes/button/shared/button.common.scss
+++ b/src/components/button/themes/button/shared/button.common.scss
@@ -10,16 +10,19 @@ $outlined-theme: $material-outlined;
 :host([variant='flat']) [part='base'] {
     border-radius: var-get($flat-theme, 'border-radius');
     height: var-get($flat-theme, 'size');
+    border: rem(1px) solid var-get($flat-theme, 'border-color');
 }
 
 :host([variant='outlined']) [part='base'] {
     border-radius: var-get($outlined-theme, 'border-radius');
     height: var-get($outlined-theme, 'size');
+    border: rem(1px) solid var-get($outlined-theme, 'border-color');
 }
 
 :host([variant='contained']) [part='base'] {
     border-radius: var-get($contained-theme, 'border-radius');
     height: var-get($contained-theme, 'size');
+    border: rem(1px) solid var-get($contained-theme, 'border-color');
 }
 
 :host([variant='fab']) [part='base'] {
@@ -216,15 +219,6 @@ $outlined-theme: $material-outlined;
         }
     }
 
-    &:focus {
-        color: var-get($fab-theme, 'focus-foreground');
-        background: var-get($fab-theme, 'focus-background');
-
-        ::slotted(igc-icon) {
-            color: var-get($fab-theme, 'icon-color');
-        }
-    }
-
     &:focus-visible {
         color: var-get($fab-theme, 'focus-visible-foreground');
         background: var-get($fab-theme, 'focus-visible-background');
diff --git a/src/components/button/themes/button/shared/button.indigo.scss b/src/components/button/themes/button/shared/button.indigo.scss
index 7a56167f4..4e840abf6 100644
--- a/src/components/button/themes/button/shared/button.indigo.scss
+++ b/src/components/button/themes/button/shared/button.indigo.scss
@@ -38,20 +38,23 @@ $outlined-theme: $indigo-outlined;
     }
 }
 
+:host([variant='flat']),
+:host([variant='contained']),
+:host([variant='outlined']) {
+    [part='base'] {
+        border-width: rem(2px);
+    }
+}
+
 :host(:not([disabled])[variant='flat']) [part='base'],
 :host(:not(:disabled)[variant='flat']) [part='base'] {
-    &:focus,
-    &:active {
+    &:focus-visible {
         box-shadow: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color');
     }
 }
 
 :host(:not([disabled])[variant='outlined']) [part='base'],
 :host(:not(:disabled)[variant='outlined']) [part='base'] {
-    border-style: solid;
-    border-color: var-get($outlined-theme, 'border-color');
-    border-width: rem(2px);
-
     &:hover {
         border-color: var-get($outlined-theme, 'hover-border-color');
     }
@@ -68,13 +71,9 @@ $outlined-theme: $indigo-outlined;
         border-color: var-get($outlined-theme, 'active-border-color');
     }
 
-    &:focus,
-    &:active {
-        box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'shadow-color');
-    }
-
     &:focus-visible {
         border-color: var-get($outlined-theme, 'focus-visible-border-color');
+        box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'shadow-color');
 
         &:hover {
             border-color: var-get($outlined-theme, 'hover-border-color');
@@ -106,12 +105,8 @@ $outlined-theme: $indigo-outlined;
         border-color: var-get($contained-theme, 'active-border-color');
     }
 
-    &:focus,
-    &:active {
-        box-shadow: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color');
-    }
-
     &:focus-visible {
+        box-shadow: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color');
         background: var-get($contained-theme, 'focus-visible-background');
         color: var-get($contained-theme, 'focus-visible-foreground');
         border-color: var-get($contained-theme, 'focus-visible-border-color');
@@ -150,13 +145,9 @@ $outlined-theme: $indigo-outlined;
         border-color: var-get($fab-theme, 'active-border-color');
     }
 
-    &:focus,
-    &:active {
-        box-shadow: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color');
-    }
-
     &:focus-visible {
         border-color: var-get($fab-theme, 'focus-visible-border-color');
+        box-shadow: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color');
 
         &:hover {
             border-color: var-get($fab-theme, 'hover-border-color');
diff --git a/src/components/button/themes/button/shared/button.material.scss b/src/components/button/themes/button/shared/button.material.scss
index 355233bf6..0b21e29e7 100644
--- a/src/components/button/themes/button/shared/button.material.scss
+++ b/src/components/button/themes/button/shared/button.material.scss
@@ -38,8 +38,6 @@ $outlined-theme: $material-outlined;
 
 :host(:not([disabled])[variant='outlined']) [part='base'],
 :host(:not(:disabled)[variant='outlined']) [part='base'] {
-    border: rem(1px) solid var-get($outlined-theme, 'border-color');
-
     &:hover {
         border-color: var-get($outlined-theme, 'hover-border-color');
     }
@@ -65,18 +63,20 @@ $outlined-theme: $material-outlined;
 
 :host(:not([disabled])[variant='contained']) [part='base'],
 :host(:not(:disabled)[variant='contained']) [part='base'] {
-    box-shadow: var(--ig-elevation-2);
+    box-shadow: var-get($contained-theme, 'resting-elevation');
 
     &:hover {
-        box-shadow: var(--ig-elevation-4);
+        box-shadow: var-get($contained-theme, 'hover-elevation');
     }
 
-    &:focus,
     &:active {
-        box-shadow: var(--ig-elevation-8);
+        color: var-get($contained-theme, 'active-foreground');
+        background: var-get($contained-theme, 'active-background');
     }
 
     &:focus-visible {
+        box-shadow: var-get($contained-theme, 'focus-elevation');
+
         &:active {
             color: var-get($contained-theme, 'active-foreground');
             background: var-get($contained-theme, 'active-background');
@@ -86,28 +86,23 @@ $outlined-theme: $material-outlined;
 
 :host(:not([disabled])[variant='fab']) [part='base'],
 :host(:not(:disabled)[variant='fab']) [part='base'] {
-    box-shadow: var(--ig-elevation-6);
+    box-shadow: var-get($fab-theme, 'resting-elevation');
 
     &:hover {
-        box-shadow: var(--ig-elevation-4);
+        box-shadow: var-get($fab-theme, 'hover-elevation');
     }
 
-    &:focus,
     &:active {
-        box-shadow: var(--ig-elevation-8);
+        color: var-get($fab-theme, 'active-foreground');
+        background: var-get($fab-theme, 'active-background');
     }
 
     &:focus-visible {
+        box-shadow: var-get($fab-theme, 'focus-elevation');
+
         &:active {
             color: var-get($fab-theme, 'active-foreground');
             background: var-get($fab-theme, 'active-background');
         }
     }
-
-    &:hover,
-    &:focus,
-    &:focus-visible,
-    &:active {
-        box-shadow: var(--ig-elevation-12);
-    }
 }
diff --git a/src/components/button/themes/icon-button/shared/icon-button.bootstrap.scss b/src/components/button/themes/icon-button/shared/icon-button.bootstrap.scss
index 0bdbfa693..69134204e 100644
--- a/src/components/button/themes/icon-button/shared/icon-button.bootstrap.scss
+++ b/src/components/button/themes/icon-button/shared/icon-button.bootstrap.scss
@@ -16,10 +16,8 @@ $outlined-theme: $bootstrap-outlined;
     --component-size: var(--ig-size, #{var-get($flat-theme, 'default-size')});
 
     [part='base'] {
-        &:focus,
-        &:focus-within,
-        &:active {
-            box-shadow: 0 0 0 rem(4px) var-get($flat-theme, 'focus-border-color');
+        &:focus-visible {
+            box-shadow: 0 0 0 rem(4px) var-get($flat-theme, 'shadow-color');
         }
 
         &:hover {    
@@ -49,13 +47,8 @@ $outlined-theme: $bootstrap-outlined;
     --component-size: var(--ig-size, #{var-get($contained-theme, 'default-size')});
 
     [part='base'] {
-        &:focus,
-        &:focus-within {
-            box-shadow: 0 0 0 rem(4px) var-get($contained-theme, 'focus-border-color');
-        }
-
-        &:active {
-            box-shadow: 0 0 0 rem(4px) var-get($contained-theme, 'focus-border-color');
+        &:focus-visible {
+            box-shadow: 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color');
         }
     }
 }
@@ -74,8 +67,6 @@ $outlined-theme: $bootstrap-outlined;
 
         &:focus,
         &:focus-within {
-            box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'focus-border-color');
-
             igc-icon {
                 color: var-get($outlined-theme, 'focus-foreground');
             }
@@ -87,8 +78,8 @@ $outlined-theme: $bootstrap-outlined;
             }
         }
 
-        &:active {
-            box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'focus-border-color');
+        &:focus-visible {
+            box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'shadow-color');
         }
     }
 }
diff --git a/src/components/button/themes/icon-button/shared/icon-button.indigo.scss b/src/components/button/themes/icon-button/shared/icon-button.indigo.scss
index 86ed06c48..51348d5dd 100644
--- a/src/components/button/themes/icon-button/shared/icon-button.indigo.scss
+++ b/src/components/button/themes/icon-button/shared/icon-button.indigo.scss
@@ -29,7 +29,10 @@ $icon-size: rem(16px);
         &:focus-within,
         &:active {
             border-color: var-get($flat-theme, 'border-color');
-            box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'focus-border-color');
+        }
+
+        &:focus-visible {
+            box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'shadow-color');
         }
     }
 }
@@ -40,10 +43,8 @@ $icon-size: rem(16px);
     --component-size: var(--ig-size, #{var-get($contained-theme, 'default-size')});
 
     [part='base'] {
-        &:focus,
-        &:focus-visible,
-        &:active {
-            box-shadow: 0 0 0 rem(3px) var-get($contained-theme, 'focus-border-color');
+        &:focus-visible {
+            box-shadow: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color');
         }
 
         &:hover {
@@ -75,10 +76,8 @@ $icon-size: rem(16px);
             }
         }
 
-        &:focus,
-        &:focus-visible,
-        &:active {
-            box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'focus-border-color');
+        &:focus-visible {
+            box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'shadow-color');
             
             &:hover {
                 &::after {

From 0c1544110c5709359969c3168447885e62a3ba3e Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Thu, 28 Mar 2024 17:05:41 +0200
Subject: [PATCH 2/8] refactor(button-group): style updates

---
 .../button-group/themes/button.base.scss      |  22 +---
 src/components/button-group/themes/button.ts  |   7 ++
 .../shared/button/button.bootstrap.scss       |  42 ++++++-
 .../themes/shared/button/button.common.scss   |  41 ++-----
 .../themes/shared/button/button.fluent.scss   |  61 +++++-----
 .../themes/shared/button/button.indigo.scss   |  14 ++-
 .../themes/shared/button/button.material.scss | 115 ++++++++++++++++++
 7 files changed, 215 insertions(+), 87 deletions(-)
 create mode 100644 src/components/button-group/themes/shared/button/button.material.scss

diff --git a/src/components/button-group/themes/button.base.scss b/src/components/button-group/themes/button.base.scss
index f0e4785ad..38d4380d5 100644
--- a/src/components/button-group/themes/button.base.scss
+++ b/src/components/button-group/themes/button.base.scss
@@ -58,26 +58,12 @@ $transition: all 140ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
     pointer-events: none;
 }
 
-:host([selected]:disabled),
-:host([selected][disabled]) {
-    [part~='toggle'] {
-        &::before {
-            position: absolute;
-            content: '';
-            inset: 0;
-            z-index: 3;
-
-            // this is implemented the same way as in igniteui-angular
-            background: color($color: 'gray', $variant: 500, $opacity: .12);
-        }
-    }
+:host(:focus-visible) {
+    outline: none;
 }
 
-:host(:focus-within),
-:host(:focus) {
-    [part~='toggle'] {
-        outline: none;
-    }
+[part~='toggle']:focus-visible {
+    outline: none;
 }
 
 :host([selected]) {
diff --git a/src/components/button-group/themes/button.ts b/src/components/button-group/themes/button.ts
index 4f90230d0..7929caaab 100644
--- a/src/components/button-group/themes/button.ts
+++ b/src/components/button-group/themes/button.ts
@@ -4,6 +4,7 @@ import { css } from 'lit';
 import { styles as bootstrap } from './shared/button/button.bootstrap.css.js';
 import { styles as fluent } from './shared/button/button.fluent.css.js';
 import { styles as indigo } from './shared/button/button.indigo.css.js';
+import { styles as material } from './shared/button/button.material.css.js';
 import type { Themes } from '../../../theming/types';
 
 const light = {
@@ -16,6 +17,9 @@ const light = {
   indigo: css`
     ${indigo}
   `,
+  material: css`
+    ${material}
+  `,
 };
 
 const dark = {
@@ -28,6 +32,9 @@ const dark = {
   indigo: css`
     ${indigo}
   `,
+  material: css`
+    ${material}
+  `,
 };
 
 export const all: Themes = { light, dark };
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 38cc5f03b..e584f6ddb 100644
--- a/src/components/button-group/themes/shared/button/button.bootstrap.scss
+++ b/src/components/button-group/themes/shared/button/button.bootstrap.scss
@@ -13,18 +13,50 @@ $group-item-border-thickness: rem(1px);
         padding-inline: pad-inline(rem(8px), rem(10px), rem(12px));
         padding-block: pad-block(rem(2px), rem(4px), rem(7px));
         min-width: var(--button-min-width);
+
+        &::before {
+            position: absolute;
+            pointer-events: none;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+        }
+    }
+
+    [part~='toggle']:focus-visible {
+        box-shadow: 0 0 0 rem(4px) var-get($theme, 'idle-shadow-color');
     }
 }
 
-:host(:hover),
-:host(:focus) {
+:host(:active) {
     [part~='toggle'] {
-        border-color: var-get($theme, 'item-border-color');
+        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(:focus) {
+:host([selected]:active) {
     [part~='toggle'] {
-        box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color');
+        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');
+        }
     }
 }
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 e2e3c0d3c..516e462b0 100644
--- a/src/components/button-group/themes/shared/button/button.common.scss
+++ b/src/components/button-group/themes/shared/button/button.common.scss
@@ -47,24 +47,6 @@ $theme: $material;
     }
 }
 
-:host(:focus) {
-    [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 {
-            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([selected]) {
     [part~='toggle'] {
         color: var-get($theme, 'item-selected-text-color');
@@ -89,16 +71,6 @@ $theme: $material;
     }
 }
 
-:host([selected]:focus) {
-    [part~='toggle'] {
-        &:hover {
-            ::slotted(igc-icon) {
-                color: var-get($theme, 'item-selected-hover-icon-color');
-            }
-        }
-    }
-}
-
 :host([disabled]),
 :host(:disabled) {
     @include disabled();
@@ -108,3 +80,16 @@ $theme: $material;
 :host-context(:disabled) {
     @include disabled();
 }
+
+:host([selected]:disabled),
+:host([selected][disabled]) {
+    [part~='toggle'] {
+        &::before {
+            position: absolute;
+            content: '';
+            inset: 0;
+            z-index: 3;
+            background: var-get($theme, 'disabled-selected-background');
+        }
+    }
+}
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 b6a12553c..3abe12287 100644
--- a/src/components/button-group/themes/shared/button/button.fluent.scss
+++ b/src/components/button-group/themes/shared/button/button.fluent.scss
@@ -5,18 +5,6 @@ $theme: $fluent;
 $group-item-border-thickness: rem(1px);
 $outline-btn-indent: rem(2px);
 
-:host(:focus) {
-    [part~='toggle'] {
-        background: var-get($theme, 'item-background');
-    }
-}
-
-:host(:active) {
-    [part~='toggle'] {
-        background: var-get($theme, 'item-focused-background');
-    }
-}
-
 :host {
     [part~='toggle'] {
         min-height: $fluent-flat-btn-size;
@@ -35,39 +23,50 @@ $outline-btn-indent: rem(2px);
                 height: calc(100% - (#{$outline-btn-indent} * 2));
                 box-shadow: 0 0 0 rem(1px) var-get($theme, 'item-focused-border-color');
             }
+        }
+    }
+}
 
-            &:hover {
-                background: var-get($theme, 'item-hover-background');
-            }
+:host(:hover) {
+    [part~='toggle']:focus-visible {
+        background: var-get($theme, 'item-hover-background');
+    }
+}
 
-            &:active {
-                background: var-get($theme, 'item-focused-background');
-            }
+:host(:active) {
+    [part~='toggle'] {
+        background: var-get($theme, 'item-focused-background');
+
+        &:focus-visible {
+            background: var-get($theme, 'item-focused-background');
         }
     }
 }
 
-:host([selected]:hover),
-:host([selected]:focus) {
+:host([selected]:hover) {
     [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');
+        }
     }
 }
 
-:host([selected]:active) {
-    [part~='toggle'] {
-        background: var-get($theme, 'item-selected-hover-background');
+:host([selected]) {
+    [part~='toggle']:focus-visible {
+        background: var-get($theme, 'item-selected-background');
     }
 }
 
-:host([selected]) {
+:host([selected]:active) {
     [part~='toggle'] {
-        &:focus-visible {
-            background: var-get($theme, 'item-selected-background');
-
-            &:active {
-                background: var-get($theme, 'item-selected-hover-background');
-            }
-        }
+        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 9cf25b316..ff7e755e4 100644
--- a/src/components/button-group/themes/shared/button/button.indigo.scss
+++ b/src/components/button-group/themes/shared/button/button.indigo.scss
@@ -20,10 +20,10 @@ $group-item-border-thickness: rem(1px);
     }
 
     [part~='toggle']:focus-visible {
-        outline: none;
         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');
     }
 }
 
@@ -34,6 +34,7 @@ $group-item-border-thickness: rem(1px);
 
     [part~='toggle']:focus-visible {
         border-color: var-get($theme, 'item-hover-border-color');
+        color: var-get($theme, 'item-hover-text-color');
     }
 }
 
@@ -50,14 +51,17 @@ $group-item-border-thickness: rem(1px);
     }
 }
 
+:host([selected]:hover) {
+    [part~='toggle']:focus-visible {
+        border-color: var-get($theme, 'item-selected-hover-border-color');
+    }
+}
+
 :host([selected]) {
     [part~='toggle']:focus-visible {
         box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color');
         border-color: var-get($theme, 'item-selected-border-color');
-
-        &:hover {
-            border-color: var-get($theme, 'item-selected-hover-border-color');
-        }
+        color: var-get($theme, 'item-selected-hover-text-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
new file mode 100644
index 000000000..87e7b5fc5
--- /dev/null
+++ b/src/components/button-group/themes/shared/button/button.material.scss
@@ -0,0 +1,115 @@
+@use 'styles/utilities' as *;
+@use '../../light/themes' as *;
+
+$theme: $material;
+
+:host {
+    [part~='toggle']::before {
+        position: absolute;
+        pointer-events: none;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+    }
+
+    [part~='toggle']:focus-visible {
+        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');
+        }
+
+        &:focus-visible {
+            &::before {
+                background: var-get($theme, 'item-focused-hover-background');
+            }
+        }
+    }
+}
+
+:host(:active) {
+    [part~='toggle'] {
+        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]:hover),
+:host([selected]:active) {
+    [part~='toggle'] {
+        background: var-get($theme, 'item-selected-background');
+    }
+}
+
+:host([selected]:hover) {
+    [part~='toggle'] {
+        background: var-get($theme, 'item-selected-background');
+
+        &::before {
+            background: var-get($theme, 'item-selected-hover-background');
+        }
+    }
+
+    [part~='toggle']:focus-visible {
+        &::before {
+            background: var-get($theme, 'item-selected-focus-hover-background');
+        }
+    }
+}
+
+:host([selected]) {
+    [part~='toggle']:focus-visible {
+        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]:active) {
+    [part~='toggle'] {
+        background: var-get($theme, 'item-selected-background');
+        color: var-get($theme, 'item-selected-text-color');
+        border-color: var-get($theme, 'item-selected-border-color');
+
+        ::slotted(igc-icon) {
+            color: var-get($theme, 'item-selected-icon-color');
+        }
+        
+        &::before {
+            background: var-get($theme, 'item-selected-focus-background');
+        }
+    }
+}

From c86a80e5bc1d2924a1a0e35fddcb7a4d9417329b Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Tue, 23 Apr 2024 14:22:44 +0300
Subject: [PATCH 3/8] refactor(button): implement latest design updates

---
 .../button/shared/button.bootstrap.scss       | 34 +++++++++++
 .../themes/button/shared/button.common.scss   | 57 +++++++------------
 .../themes/button/shared/button.fluent.scss   | 26 +--------
 .../themes/button/shared/button.indigo.scss   | 50 +++++++---------
 .../themes/button/shared/button.material.scss | 34 +----------
 5 files changed, 81 insertions(+), 120 deletions(-)

diff --git a/src/components/button/themes/button/shared/button.bootstrap.scss b/src/components/button/themes/button/shared/button.bootstrap.scss
index b9ba10d88..0e8c1b630 100644
--- a/src/components/button/themes/button/shared/button.bootstrap.scss
+++ b/src/components/button/themes/button/shared/button.bootstrap.scss
@@ -33,12 +33,34 @@ $outlined-theme: $bootstrap-outlined;
     &:focus-visible {
         box-shadow: 0 0 0 rem(4px) var-get($flat-theme, 'shadow-color');
     }
+
+    &:active {
+        ::slotted(igc-icon) {
+            color: var-get($flat-theme, 'active-foreground');
+        }
+    }
 }
 
 :host(:not([disabled])[variant='outlined']) [part='base'],
 :host(:not(:disabled)[variant='outlined']) [part='base'] {
     &:focus-visible {
         box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'shadow-color');
+
+        ::slotted(igc-icon) {
+            color: var-get($outlined-theme, 'icon-color-hover');
+        }
+
+        &:active {
+            border-color: var-get($outlined-theme, 'active-border-color');
+        }
+    }
+
+    &:active {
+        border-color: var-get($outlined-theme, 'active-border-color');
+
+        ::slotted(igc-icon) {
+            color: var-get($outlined-theme, 'active-foreground');
+        }
     }
 }
 
@@ -47,6 +69,12 @@ $outlined-theme: $bootstrap-outlined;
     &:focus-visible {
         box-shadow: 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color');
     }
+
+    &:active {
+        ::slotted(igc-icon) {
+            color: var-get($contained-theme, 'active-foreground');
+        }
+    }
 }
 
 :host(:not([disabled])[variant='fab']) [part='base'],
@@ -54,4 +82,10 @@ $outlined-theme: $bootstrap-outlined;
     &:focus-visible {
         box-shadow: 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color');
     }
+
+    &:active {
+        ::slotted(igc-icon) {
+            color: var-get($fab-theme, 'active-foreground');
+        }
+    }
 }
diff --git a/src/components/button/themes/button/shared/button.common.scss b/src/components/button/themes/button/shared/button.common.scss
index 9110f594a..c675e6785 100644
--- a/src/components/button/themes/button/shared/button.common.scss
+++ b/src/components/button/themes/button/shared/button.common.scss
@@ -26,6 +26,7 @@ $outlined-theme: $material-outlined;
 }
 
 :host([variant='fab']) [part='base'] {
+    border: rem(1px) solid var-get($fab-theme, 'border-color');
     border-radius: var-get($fab-theme, 'border-radius');
     min-height: var-get($fab-theme, 'size');
     min-width: var-get($fab-theme, 'size');
@@ -60,15 +61,6 @@ $outlined-theme: $material-outlined;
         }
     }
 
-    &:focus {
-        color: var-get($flat-theme, 'focus-foreground');
-        background: var-get($flat-theme, 'focus-background');
-
-        ::slotted(igc-icon) {
-            color: var-get($flat-theme, 'icon-color');
-        }
-    }
-
     &:focus-visible {
         color: var-get($flat-theme, 'focus-visible-foreground');
         background: var-get($flat-theme, 'focus-visible-background');
@@ -76,9 +68,7 @@ $outlined-theme: $material-outlined;
         ::slotted(igc-icon) {
             color: var-get($flat-theme, 'icon-color');
         }
-    }
 
-    &:focus, &:focus-visible {
         &:hover {
             color: var-get($flat-theme, 'focus-hover-foreground');
             background: var-get($flat-theme, 'focus-hover-background');
@@ -87,6 +77,11 @@ $outlined-theme: $material-outlined;
                 color: var-get($flat-theme, 'icon-color-hover');
             }
         }
+
+        &:active {
+            color: var-get($flat-theme, 'focus-foreground');
+            background: var-get($flat-theme, 'focus-background');
+        }
     }
 
     &:active {
@@ -113,15 +108,6 @@ $outlined-theme: $material-outlined;
         }
     }
 
-    &:focus {
-        color: var-get($outlined-theme, 'focus-foreground');
-        background: var-get($outlined-theme, 'focus-background');
-
-        ::slotted(igc-icon) {
-            color: var-get($outlined-theme, 'icon-color');
-        }
-    }
-
     &:focus-visible {
         color: var-get($outlined-theme, 'focus-visible-foreground');
         background: var-get($outlined-theme, 'focus-visible-background');
@@ -129,9 +115,7 @@ $outlined-theme: $material-outlined;
         ::slotted(igc-icon) {
             color: var-get($outlined-theme, 'icon-color');
         }
-    }
 
-    &:focus, &:focus-visible {
         &:hover {
             color: var-get($outlined-theme, 'focus-hover-foreground');
             background: var-get($outlined-theme, 'focus-hover-background');
@@ -140,6 +124,12 @@ $outlined-theme: $material-outlined;
                 color: var-get($outlined-theme, 'icon-color-hover');
             }
         }
+
+        &:active {
+            color: var-get($outlined-theme, 'focus-foreground');
+            background: var-get($outlined-theme, 'focus-background');
+            border-color: var-get($outlined-theme, 'focus-border-color');
+        }
     }
 
     &:active {
@@ -166,15 +156,6 @@ $outlined-theme: $material-outlined;
         }
     }
 
-    &:focus {
-        color: var-get($contained-theme, 'focus-foreground');
-        background: var-get($contained-theme, 'focus-background');
-
-        ::slotted(igc-icon) {
-            color: var-get($contained-theme, 'icon-color');
-        }
-    }
-
     &:focus-visible {
         color: var-get($contained-theme, 'focus-visible-foreground');
         background: var-get($contained-theme, 'focus-visible-background');
@@ -182,9 +163,7 @@ $outlined-theme: $material-outlined;
         ::slotted(igc-icon) {
             color: var-get($contained-theme, 'icon-color');
         }
-    }
 
-    &:focus, &:focus-visible {
         &:hover {
             color: var-get($contained-theme, 'focus-hover-foreground');
             background: var-get($contained-theme, 'focus-hover-background');
@@ -193,6 +172,11 @@ $outlined-theme: $material-outlined;
                 color: var-get($contained-theme, 'icon-color-hover');
             }
         }
+
+        &:active {
+            color: var-get($contained-theme, 'focus-foreground');
+            background: var-get($contained-theme, 'focus-background');
+        }
     }
 
     &:active {
@@ -226,9 +210,7 @@ $outlined-theme: $material-outlined;
         ::slotted(igc-icon) {
             color: var-get($fab-theme, 'icon-color');
         }
-    }
 
-    &:focus, &:focus-visible {
         &:hover {
             color: var-get($fab-theme, 'focus-hover-foreground');
             background: var-get($fab-theme, 'focus-hover-background');
@@ -237,6 +219,11 @@ $outlined-theme: $material-outlined;
                 color: var-get($fab-theme, 'icon-color-hover');
             }
         }
+
+        &:active {
+            color: var-get($fab-theme, 'focus-foreground');
+            background: var-get($fab-theme, 'focus-background');
+        }
     }
 
     &:active {
diff --git a/src/components/button/themes/button/shared/button.fluent.scss b/src/components/button/themes/button/shared/button.fluent.scss
index 66dc31ace..7778afc21 100644
--- a/src/components/button/themes/button/shared/button.fluent.scss
+++ b/src/components/button/themes/button/shared/button.fluent.scss
@@ -5,7 +5,7 @@ $flat-theme: $fluent-flat;
 $contained-theme: $fluent-contained;
 $fab-theme: $fluent-fab;
 $outlined-theme: $fluent-outlined;
-$btn-indent: rem(3px);
+$btn-indent: rem(2px);
 $outlined-btn-indent: rem(2px);
 
 :host([variant='flat']) {
@@ -70,16 +70,6 @@ $outlined-btn-indent: rem(2px);
             height: calc(100% - (#{$outlined-btn-indent} * 2));
             box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'focus-visible-border-color');
         }
-
-        &:active {
-            color: var-get($outlined-theme, 'active-foreground');
-            background: var-get($outlined-theme, 'active-background');
-            border-color: var-get($outlined-theme, 'active-border-color');
-
-            &::after {
-                box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'active-foreground');
-            }
-        }
     }
 }
 
@@ -91,12 +81,7 @@ $outlined-btn-indent: rem(2px);
         position: relative;
 
         &::after {
-            box-shadow: 0 0 0 1px var-get($contained-theme, 'focus-visible-foreground');
-        }
-
-        &:active {
-            color: var-get($contained-theme, 'active-foreground');
-            background: var-get($contained-theme, 'active-background');
+            box-shadow: 0 0 0 1px var-get($contained-theme, 'focus-visible-border-color');
         }
     }
 }
@@ -109,12 +94,7 @@ $outlined-btn-indent: rem(2px);
         position: relative;
 
         &::after {
-            box-shadow: 0 0 0 1px var-get($fab-theme, 'focus-visible-foreground');
-        }
-
-        &:active {
-            color: var-get($fab-theme, 'active-foreground');
-            background: var-get($fab-theme, 'active-background');
+            box-shadow: 0 0 0 1px var-get($fab-theme, 'focus-visible-border-color');
         }
     }
 }
diff --git a/src/components/button/themes/button/shared/button.indigo.scss b/src/components/button/themes/button/shared/button.indigo.scss
index 4e840abf6..dd2cb13c3 100644
--- a/src/components/button/themes/button/shared/button.indigo.scss
+++ b/src/components/button/themes/button/shared/button.indigo.scss
@@ -49,7 +49,13 @@ $outlined-theme: $indigo-outlined;
 :host(:not([disabled])[variant='flat']) [part='base'],
 :host(:not(:disabled)[variant='flat']) [part='base'] {
     &:focus-visible {
-        box-shadow: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color');
+        box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'shadow-color');
+    }
+
+    &:active {
+        ::slotted(igc-icon) {
+            color: var-get($flat-theme, 'icon-color-hover');
+        }
     }
 }
 
@@ -59,16 +65,12 @@ $outlined-theme: $indigo-outlined;
         border-color: var-get($outlined-theme, 'hover-border-color');
     }
 
-    &:focus {
-        border-color: var-get($outlined-theme, 'focus-border-color');
-
-        &:hover {
-            border-color: var-get($outlined-theme, 'hover-border-color');
-        }
-    }
-
     &:active {
         border-color: var-get($outlined-theme, 'active-border-color');
+
+        ::slotted(igc-icon) {
+            color: var-get($outlined-theme, 'icon-color-hover');
+        }
     }
 
     &:focus-visible {
@@ -80,8 +82,6 @@ $outlined-theme: $indigo-outlined;
         }
 
         &:active {
-            color: var-get($outlined-theme, 'active-foreground');
-            background: var-get($outlined-theme, 'active-background');
             border-color: var-get($outlined-theme, 'active-border-color');
         }
     }
@@ -93,22 +93,16 @@ $outlined-theme: $indigo-outlined;
         border-color: var-get($contained-theme, 'hover-border-color');
     }
 
-    &:focus {
-        border-color: var-get($contained-theme, 'focus-border-color');
-
-        &:hover {
-            border-color: var-get($contained-theme, 'hover-border-color');
-        }
-    }
-
     &:active {
         border-color: var-get($contained-theme, 'active-border-color');
+
+        ::slotted(igc-icon) {
+            color: var-get($contained-theme, 'icon-color-hover');
+        }
     }
 
     &:focus-visible {
         box-shadow: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color');
-        background: var-get($contained-theme, 'focus-visible-background');
-        color: var-get($contained-theme, 'focus-visible-foreground');
         border-color: var-get($contained-theme, 'focus-visible-border-color');
 
         &:hover {
@@ -116,8 +110,6 @@ $outlined-theme: $indigo-outlined;
         }
 
         &:active {
-            color: var-get($contained-theme, 'active-foreground');
-            background: var-get($contained-theme, 'active-background');
             border-color: var-get($contained-theme, 'active-border-color');
         }
     }
@@ -133,16 +125,12 @@ $outlined-theme: $indigo-outlined;
         border-color: var-get($fab-theme, 'hover-border-color');
     }
 
-    &:focus {
-        border-color: var-get($fab-theme, 'focus-border-color');
-
-        &:hover {
-            border-color: var-get($fab-theme, 'hover-border-color');
-        }
-    }
-
     &:active {
         border-color: var-get($fab-theme, 'active-border-color');
+
+        ::slotted(igc-icon) {
+            color: var-get($fab-theme, 'icon-color-hover');
+        }
     }
 
     &:focus-visible {
diff --git a/src/components/button/themes/button/shared/button.material.scss b/src/components/button/themes/button/shared/button.material.scss
index 0b21e29e7..a02ec6752 100644
--- a/src/components/button/themes/button/shared/button.material.scss
+++ b/src/components/button/themes/button/shared/button.material.scss
@@ -26,38 +26,18 @@ $outlined-theme: $material-outlined;
     transition: all .1s ease-in-out;
 }
 
-:host(:not([disabled])[variant='flat']) [part='base'],
-:host(:not(:disabled)[variant='flat']) [part='base'] {
-    &:focus-visible {
-        &:active {
-            color: var-get($flat-theme, 'active-foreground');
-            background: var-get($flat-theme, 'active-background');
-        }
-    }
-}
-
 :host(:not([disabled])[variant='outlined']) [part='base'],
 :host(:not(:disabled)[variant='outlined']) [part='base'] {
     &:hover {
         border-color: var-get($outlined-theme, 'hover-border-color');
     }
 
-    &:focus {
-        border-color: var-get($outlined-theme, 'focus-border-color');
-    }
-
     &:active {
         border-color: var-get($outlined-theme, 'active-border-color');
     }
 
     &:focus-visible {
         border-color: var-get($outlined-theme, 'focus-visible-border-color');
-
-        &:active {
-            color: var-get($outlined-theme, 'active-foreground');
-            background: var-get($outlined-theme, 'active-background');
-            border-color: var-get($outlined-theme, 'active-border-color');
-        }
     }
 }
 
@@ -70,16 +50,14 @@ $outlined-theme: $material-outlined;
     }
 
     &:active {
-        color: var-get($contained-theme, 'active-foreground');
-        background: var-get($contained-theme, 'active-background');
+        box-shadow: var-get($contained-theme, 'hover-elevation');
     }
 
     &:focus-visible {
         box-shadow: var-get($contained-theme, 'focus-elevation');
 
         &:active {
-            color: var-get($contained-theme, 'active-foreground');
-            background: var-get($contained-theme, 'active-background');
+            box-shadow: var-get($fab-theme, 'active-elevation');
         }
     }
 }
@@ -93,16 +71,10 @@ $outlined-theme: $material-outlined;
     }
 
     &:active {
-        color: var-get($fab-theme, 'active-foreground');
-        background: var-get($fab-theme, 'active-background');
+        box-shadow: var-get($contained-theme, 'active-elevation');
     }
 
     &:focus-visible {
         box-shadow: var-get($fab-theme, 'focus-elevation');
-
-        &:active {
-            color: var-get($fab-theme, 'active-foreground');
-            background: var-get($fab-theme, 'active-background');
-        }
     }
 }

From d7c0e710c3dd88b363ccf1551cbf45a531bdb68d Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Thu, 25 Apr 2024 18:01:00 +0300
Subject: [PATCH 4/8] deps(theming): bump to latest version

---
 package-lock.json                            | 8 ++++----
 package.json                                 | 2 +-
 src/components/button-group/themes/button.ts | 1 -
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 919a62496..4b467dade 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,7 +34,7 @@
         "globby": "^14.0.1",
         "husky": "^9.0.11",
         "ig-typedoc-theme": "^5.0.3",
-        "igniteui-theming": "^6.0.2",
+        "igniteui-theming": "^6.2.0",
         "keep-a-changelog": "^2.5.3",
         "lint-staged": "^15.2.2",
         "lit-analyzer": "^2.0.3",
@@ -10615,9 +10615,9 @@
       "dev": true
     },
     "node_modules/igniteui-theming": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-6.0.2.tgz",
-      "integrity": "sha512-O1R6Mih/5HdZBphYZns2LhInY6rXKgiuLuEdlUaB80BbYEsTG/wGrQAunrPSSCmmqL5hCqpjnpqtZhRGIbjS0w==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-6.2.0.tgz",
+      "integrity": "sha512-xdyYo1U1EvyQvl382BHDLpHfICmNdQOlYen9HlASFSJ+SqtpfcahKFFVRe+h8AZ1rIJruMRBeOKRMb3Kz2MG4g==",
       "dev": true,
       "peerDependencies": {
         "sass": "^1.58.1"
diff --git a/package.json b/package.json
index b1856d1b2..1673a2c92 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,7 @@
     "globby": "^14.0.1",
     "husky": "^9.0.11",
     "ig-typedoc-theme": "^5.0.3",
-    "igniteui-theming": "^6.0.2",
+    "igniteui-theming": "^6.2.0",
     "keep-a-changelog": "^2.5.3",
     "lint-staged": "^15.2.2",
     "lit-analyzer": "^2.0.3",
diff --git a/src/components/button-group/themes/button.ts b/src/components/button-group/themes/button.ts
index 0bdface80..3d9fa08e0 100644
--- a/src/components/button-group/themes/button.ts
+++ b/src/components/button-group/themes/button.ts
@@ -6,7 +6,6 @@ import { styles as bootstrap } from './shared/button/button.bootstrap.css.js';
 import { styles as fluent } from './shared/button/button.fluent.css.js';
 import { styles as indigo } from './shared/button/button.indigo.css.js';
 import { styles as material } from './shared/button/button.material.css.js';
-import type { Themes } from '../../../theming/types';
 
 const light = {
   bootstrap: css`

From 0730732b075dce0b811a24708a14d2680fb080c8 Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Fri, 26 Apr 2024 15:39:39 +0300
Subject: [PATCH 5/8] refactor(button): add focused part

---
 .../shared/button/button.bootstrap.scss       |  1 -
 .../themes/shared/button/button.common.scss   |  1 +
 .../themes/shared/group/group.bootstrap.scss  |  1 -
 .../themes/shared/group/group.common.scss     |  2 +-
 .../themes/shared/group/group.indigo.scss     |  1 +
 src/components/button/button-base.ts          | 31 ++++++++++++--
 .../button/themes/button/button.base.scss     |  6 +--
 .../button/shared/button.bootstrap.scss       | 18 ++++----
 .../themes/button/shared/button.common.scss   | 42 +++++++++----------
 .../themes/button/shared/button.fluent.scss   | 20 ++++-----
 .../themes/button/shared/button.indigo.scss   | 26 ++++++------
 .../themes/button/shared/button.material.scss | 14 +++----
 12 files changed, 94 insertions(+), 69 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 e584f6ddb..80d3fb3d1 100644
--- a/src/components/button-group/themes/shared/button/button.bootstrap.scss
+++ b/src/components/button-group/themes/shared/button/button.bootstrap.scss
@@ -12,7 +12,6 @@ $group-item-border-thickness: rem(1px);
         border-width: $group-item-border-thickness;
         padding-inline: pad-inline(rem(8px), rem(10px), rem(12px));
         padding-block: pad-block(rem(2px), rem(4px), rem(7px));
-        min-width: var(--button-min-width);
 
         &::before {
             position: absolute;
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 516e462b0..6498a42a7 100644
--- a/src/components/button-group/themes/shared/button/button.common.scss
+++ b/src/components/button-group/themes/shared/button/button.common.scss
@@ -23,6 +23,7 @@ $theme: $material;
         --igx-icon-size: #{$icon-size};
 
         min-height: $material-flat-btn-size;
+        min-width: var(--button-min-width);
         color: var-get($theme, 'item-text-color');
         background: var-get($theme, 'item-background');
         padding-inline: rem(16px);
diff --git a/src/components/button-group/themes/shared/group/group.bootstrap.scss b/src/components/button-group/themes/shared/group/group.bootstrap.scss
index bb5fb6d7f..769c3b85c 100644
--- a/src/components/button-group/themes/shared/group/group.bootstrap.scss
+++ b/src/components/button-group/themes/shared/group/group.bootstrap.scss
@@ -5,5 +5,4 @@ $theme: $bootstrap;
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
-    --button-min-width: #{rem(42px)};
 }
diff --git a/src/components/button-group/themes/shared/group/group.common.scss b/src/components/button-group/themes/shared/group/group.common.scss
index df7b2cf29..bbfbfe3ad 100644
--- a/src/components/button-group/themes/shared/group/group.common.scss
+++ b/src/components/button-group/themes/shared/group/group.common.scss
@@ -5,7 +5,7 @@ $theme: $material;
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
-    --button-min-width: #{rem(50px)};
+    --button-min-width: #{rem(42px)};
 }
 
 [part~='group'] {
diff --git a/src/components/button-group/themes/shared/group/group.indigo.scss b/src/components/button-group/themes/shared/group/group.indigo.scss
index 42c890488..4c7add300 100644
--- a/src/components/button-group/themes/shared/group/group.indigo.scss
+++ b/src/components/button-group/themes/shared/group/group.indigo.scss
@@ -5,4 +5,5 @@ $theme: $indigo;
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
+    --button-min-width: #{rem(32px)};
 }
diff --git a/src/components/button/button-base.ts b/src/components/button/button-base.ts
index 1398fc323..6468a4127 100644
--- a/src/components/button/button-base.ts
+++ b/src/components/button/button-base.ts
@@ -1,11 +1,12 @@
 import { LitElement, type TemplateResult, html, nothing } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { EventEmitterMixin } from '../common//mixins/event-emitter.js';
 import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { SizableMixin } from '../common/mixins/sizable.js';
+import { partNameMap } from '../common/util.js';
 
 export interface IgcButtonEventMap {
   igcFocus: CustomEvent<void>;
@@ -29,6 +30,9 @@ export abstract class IgcButtonBaseComponent extends SizableMixin(
   @query('[part="base"]', true)
   private _nativeButton!: HTMLButtonElement;
 
+  @state()
+  protected focused = false;
+
   /* alternateName: displayType */
   /**
    * The type of the button. Defaults to `button`.
@@ -90,6 +94,7 @@ export abstract class IgcButtonBaseComponent extends SizableMixin(
   constructor() {
     super();
     this.__internals = this.attachInternals();
+    this.addEventListener('keyup', this.handleKeyUp);
     this.size = 'medium';
   }
 
@@ -116,6 +121,7 @@ export abstract class IgcButtonBaseComponent extends SizableMixin(
 
   protected handleBlur() {
     this.emitEvent('igcBlur');
+    this.focused = false;
   }
 
   protected handleClick() {
@@ -129,6 +135,17 @@ export abstract class IgcButtonBaseComponent extends SizableMixin(
     }
   }
 
+  protected handleMouseDown(event: PointerEvent) {
+    event.preventDefault();
+    this.focused = false;
+  }
+
+  protected handleKeyUp() {
+    if (!this.focused) {
+      this.focused = true;
+    }
+  }
+
   protected formDisabledCallback(state: boolean) {
     this._disabled = state;
     this.requestUpdate();
@@ -137,13 +154,17 @@ export abstract class IgcButtonBaseComponent extends SizableMixin(
   private renderButton() {
     return html`
       <button
-        part="base"
+        part=${partNameMap({
+          base: true,
+          focused: this.focused,
+        })}
         aria-label=${ifDefined(this.ariaLabel ?? nothing)}
         ?disabled=${this.disabled}
         type=${ifDefined(this.type)}
         @click=${this.handleClick}
         @focus=${this.handleFocus}
         @blur=${this.handleBlur}
+        @pointerdown=${this.handleMouseDown}
       >
         ${this.renderContent()}
       </button>
@@ -153,7 +174,10 @@ export abstract class IgcButtonBaseComponent extends SizableMixin(
   private renderLinkButton() {
     return html`
       <a
-        part="base"
+        part=${partNameMap({
+          base: true,
+          focused: this.focused,
+        })}
         role="button"
         aria-label=${ifDefined(this.ariaLabel ?? nothing)}
         aria-disabled=${this.disabled ? 'true' : 'false'}
@@ -163,6 +187,7 @@ export abstract class IgcButtonBaseComponent extends SizableMixin(
         rel=${ifDefined(this.rel)}
         @focus=${this.disabled ? nothing : this.handleFocus}
         @blur=${this.disabled ? nothing : this.handleBlur}
+        @pointerdown=${this.disabled ? nothing : this.handleMouseDown}
       >
         ${this.renderContent()}
       </a>
diff --git a/src/components/button/themes/button/button.base.scss b/src/components/button/themes/button/button.base.scss
index f8450d670..ce5b4d902 100644
--- a/src/components/button/themes/button/button.base.scss
+++ b/src/components/button/themes/button/button.base.scss
@@ -20,7 +20,7 @@
     }
 }
 
-[part='base'] {
+[part~='base'] {
     @include type-style(button);
 
     position: relative;
@@ -41,8 +41,8 @@
     min-width: rem(88px);
 }
 
-:host(:not([disabled])) [part='base']:hover,
-:host(:not(:disabled)) [part='base']:hover {
+:host(:not([disabled])) [part~='base']:hover,
+:host(:not(:disabled)) [part~='base']:hover {
     cursor: pointer;
 }
 
diff --git a/src/components/button/themes/button/shared/button.bootstrap.scss b/src/components/button/themes/button/shared/button.bootstrap.scss
index 0e8c1b630..897987824 100644
--- a/src/components/button/themes/button/shared/button.bootstrap.scss
+++ b/src/components/button/themes/button/shared/button.bootstrap.scss
@@ -13,7 +13,7 @@ $outlined-theme: $bootstrap-outlined;
 :host([variant='outlined']) {
     --component-size: var(--ig-size, #{var-get($outlined-theme, 'default-size')});
 
-    [part='base'] {
+    [part~='base'] {
         &:focus {
             border: rem(1px) solid var-get($outlined-theme, 'focus-border-color');
         }
@@ -28,8 +28,8 @@ $outlined-theme: $bootstrap-outlined;
     --component-size: var(--ig-size, #{var-get($fab-theme, 'default-size')});
 }
 
-:host(:not([disabled])[variant='flat']) [part='base'],
-:host(:not(:disabled)[variant='flat']) [part='base'] {
+:host(:not([disabled])[variant='flat']) [part~='base'],
+:host(:not(:disabled)[variant='flat']) [part~='base'] {
     &:focus-visible {
         box-shadow: 0 0 0 rem(4px) var-get($flat-theme, 'shadow-color');
     }
@@ -41,8 +41,8 @@ $outlined-theme: $bootstrap-outlined;
     }
 }
 
-:host(:not([disabled])[variant='outlined']) [part='base'],
-:host(:not(:disabled)[variant='outlined']) [part='base'] {
+:host(:not([disabled])[variant='outlined']) [part~='base'],
+:host(:not(:disabled)[variant='outlined']) [part~='base'] {
     &:focus-visible {
         box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'shadow-color');
 
@@ -64,8 +64,8 @@ $outlined-theme: $bootstrap-outlined;
     }
 }
 
-:host(:not([disabled])[variant='contained']) [part='base'],
-:host(:not(:disabled)[variant='contained']) [part='base'] {
+:host(:not([disabled])[variant='contained']) [part~='base'],
+:host(:not(:disabled)[variant='contained']) [part~='base'] {
     &:focus-visible {
         box-shadow: 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color');
     }
@@ -77,8 +77,8 @@ $outlined-theme: $bootstrap-outlined;
     }
 }
 
-:host(:not([disabled])[variant='fab']) [part='base'],
-:host(:not(:disabled)[variant='fab']) [part='base'] {
+:host(:not([disabled])[variant='fab']) [part~='base'],
+:host(:not(:disabled)[variant='fab']) [part~='base'] {
     &:focus-visible {
         box-shadow: 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color');
     }
diff --git a/src/components/button/themes/button/shared/button.common.scss b/src/components/button/themes/button/shared/button.common.scss
index c675e6785..0c20733f2 100644
--- a/src/components/button/themes/button/shared/button.common.scss
+++ b/src/components/button/themes/button/shared/button.common.scss
@@ -7,25 +7,25 @@ $fab-theme: $material-fab;
 $outlined-theme: $material-outlined;
 
 /* stylelint-disable */
-:host([variant='flat']) [part='base'] {
+:host([variant='flat']) [part~='base'] {
     border-radius: var-get($flat-theme, 'border-radius');
     height: var-get($flat-theme, 'size');
     border: rem(1px) solid var-get($flat-theme, 'border-color');
 }
 
-:host([variant='outlined']) [part='base'] {
+:host([variant='outlined']) [part~='base'] {
     border-radius: var-get($outlined-theme, 'border-radius');
     height: var-get($outlined-theme, 'size');
     border: rem(1px) solid var-get($outlined-theme, 'border-color');
 }
 
-:host([variant='contained']) [part='base'] {
+:host([variant='contained']) [part~='base'] {
     border-radius: var-get($contained-theme, 'border-radius');
     height: var-get($contained-theme, 'size');
     border: rem(1px) solid var-get($contained-theme, 'border-color');
 }
 
-:host([variant='fab']) [part='base'] {
+:host([variant='fab']) [part~='base'] {
     border: rem(1px) solid var-get($fab-theme, 'border-color');
     border-radius: var-get($fab-theme, 'border-radius');
     min-height: var-get($fab-theme, 'size');
@@ -34,7 +34,7 @@ $outlined-theme: $material-outlined;
 }
 /* stylelint-enable */
 
-[part='base'] {
+[part~='base'] {
     transition: all .15s ease-in-out;
 
     ::slotted(igc-icon) {
@@ -43,8 +43,8 @@ $outlined-theme: $material-outlined;
     }
 }
 
-:host(:not([disabled])[variant='flat']) [part='base'],
-:host(:not(:disabled)[variant='flat']) [part='base'] {
+:host(:not([disabled])[variant='flat']) [part~='base'],
+:host(:not(:disabled)[variant='flat']) [part~='base'] {
     color: var-get($flat-theme, 'foreground');
     background: var-get($flat-theme, 'background');
 
@@ -90,8 +90,8 @@ $outlined-theme: $material-outlined;
     }
 }
 
-:host(:not([disabled])[variant='outlined']) [part='base'],
-:host(:not(:disabled)[variant='outlined']) [part='base'] {
+:host(:not([disabled])[variant='outlined']) [part~='base'],
+:host(:not(:disabled)[variant='outlined']) [part~='base'] {
     color: var-get($outlined-theme, 'foreground');
     background: var-get($outlined-theme, 'background');
 
@@ -138,8 +138,8 @@ $outlined-theme: $material-outlined;
     }
 }
 
-:host(:not([disabled])[variant='contained']) [part='base'],
-:host(:not(:disabled)[variant='contained']) [part='base'] {
+:host(:not([disabled])[variant='contained']) [part~='base'],
+:host(:not(:disabled)[variant='contained']) [part~='base'] {
     color: var-get($contained-theme, 'foreground');
     background: var-get($contained-theme, 'background');
 
@@ -185,8 +185,8 @@ $outlined-theme: $material-outlined;
     }
 }
 
-:host(:not([disabled])[variant='fab']) [part='base'],
-:host(:not(:disabled)[variant='fab']) [part='base'] {
+:host(:not([disabled])[variant='fab']) [part~='base'],
+:host(:not(:disabled)[variant='fab']) [part~='base'] {
     color: var-get($fab-theme, 'foreground');
     background: var-get($fab-theme, 'background');
 
@@ -232,8 +232,8 @@ $outlined-theme: $material-outlined;
     }
 }
 
-:host([disabled][variant='flat']) [part='base'],
-:host(:disabled[variant='flat']) [part='base'] {
+:host([disabled][variant='flat']) [part~='base'],
+:host(:disabled[variant='flat']) [part~='base'] {
     color: var-get($flat-theme, 'disabled-foreground');
     background: var-get($flat-theme, 'disabled-background');
 
@@ -242,8 +242,8 @@ $outlined-theme: $material-outlined;
     }
 }
 
-:host([disabled][variant='outlined']) [part='base'],
-:host(:disabled[variant='outlined']) [part='base'] {
+:host([disabled][variant='outlined']) [part~='base'],
+:host(:disabled[variant='outlined']) [part~='base'] {
     color: var-get($outlined-theme, 'disabled-foreground');
     background: var-get($outlined-theme, 'disabled-background');
     border: rem(1px) solid var-get($outlined-theme, 'disabled-border-color');
@@ -253,8 +253,8 @@ $outlined-theme: $material-outlined;
     }
 }
 
-:host([disabled][variant='contained']) [part='base'],
-:host(:disabled[variant='contained']) [part='base'] {
+:host([disabled][variant='contained']) [part~='base'],
+:host(:disabled[variant='contained']) [part~='base'] {
     color: var-get($contained-theme, 'disabled-foreground');
     background: var-get($contained-theme, 'disabled-background');
 
@@ -263,8 +263,8 @@ $outlined-theme: $material-outlined;
     }
 }
 
-:host([disabled][variant='fab']) [part='base'],
-:host(:disabled[variant='fab']) [part='base'] {
+:host([disabled][variant='fab']) [part~='base'],
+:host(:disabled[variant='fab']) [part~='base'] {
     color: var-get($fab-theme, 'disabled-foreground');
     background: var-get($fab-theme, 'disabled-background');
 
diff --git a/src/components/button/themes/button/shared/button.fluent.scss b/src/components/button/themes/button/shared/button.fluent.scss
index 7778afc21..e76084761 100644
--- a/src/components/button/themes/button/shared/button.fluent.scss
+++ b/src/components/button/themes/button/shared/button.fluent.scss
@@ -23,14 +23,14 @@ $outlined-btn-indent: rem(2px);
 :host([variant='fab']) {
     --component-size: var(--ig-size, #{var-get($fab-theme, 'default-size')});
 
-    [part='base'] {
+    [part~='base'] {
         &::after {
             border-radius: calc(#{var-get($fab-theme, 'border-radius')} - #{$btn-indent});
         }
     }
 }
 
-[part='base'] {
+[part~='base'] {
     padding: 0 pad(8px, 12px, 16px);
     transition: all .1s ease-in-out;
 
@@ -45,8 +45,8 @@ $outlined-btn-indent: rem(2px);
     }
 }
 
-:host(:not([disabled])[variant='flat']) [part='base'],
-:host(:not(:disabled)[variant='flat']) [part='base'] {
+:host(:not([disabled])[variant='flat']) [part~='base'],
+:host(:not(:disabled)[variant='flat']) [part~='base'] {
     &:focus-visible {
         &::after {
             box-shadow: 0 0 0 rem(1px) var-get($flat-theme, 'focus-visible-border-color');
@@ -54,8 +54,8 @@ $outlined-btn-indent: rem(2px);
     }
 }
 
-:host(:not([disabled])[variant='outlined']) [part='base'],
-:host(:not(:disabled)[variant='outlined']) [part='base'] {
+:host(:not([disabled])[variant='outlined']) [part~='base'],
+:host(:not(:disabled)[variant='outlined']) [part~='base'] {
     border: rem(1px) solid var-get($outlined-theme, 'border-color');
 
     &:active {
@@ -73,8 +73,8 @@ $outlined-btn-indent: rem(2px);
     }
 }
 
-:host(:not([disabled])[variant='contained']) [part='base'],
-:host(:not(:disabled)[variant='contained']) [part='base'] {
+:host(:not([disabled])[variant='contained']) [part~='base'],
+:host(:not(:disabled)[variant='contained']) [part~='base'] {
     &:focus-visible {
         color: var-get($contained-theme, 'focus-visible-foreground');
         background: var-get($contained-theme, 'focus-visible-background');
@@ -86,8 +86,8 @@ $outlined-btn-indent: rem(2px);
     }
 }
 
-:host(:not([disabled])[variant='fab']) [part='base'],
-:host(:not(:disabled)[variant='fab']) [part='base'] {
+:host(:not([disabled])[variant='fab']) [part~='base'],
+:host(:not(:disabled)[variant='fab']) [part~='base'] {
     &:focus-visible {
         color: var-get($fab-theme, 'focus-visible-foreground');
         background: var-get($fab-theme, 'focus-visible-background');
diff --git a/src/components/button/themes/button/shared/button.indigo.scss b/src/components/button/themes/button/shared/button.indigo.scss
index dd2cb13c3..47fedb957 100644
--- a/src/components/button/themes/button/shared/button.indigo.scss
+++ b/src/components/button/themes/button/shared/button.indigo.scss
@@ -6,7 +6,7 @@ $contained-theme: $indigo-contained;
 $fab-theme: $indigo-fab;
 $outlined-theme: $indigo-outlined;
 
-:host [part='base']{
+:host [part~='base']{
     min-width: rem(28px);
     padding: 0 pad(10px, 16px, 24px);
     
@@ -33,7 +33,7 @@ $outlined-theme: $indigo-outlined;
 :host([variant='fab']) {
     --component-size: var(--ig-size, #{var-get($fab-theme, 'default-size')});
 
-    [part='base'] {
+    [part~='base'] {
         padding: 0 pad(rem(6px), rem(8px), rem(10px));
     }
 }
@@ -41,13 +41,13 @@ $outlined-theme: $indigo-outlined;
 :host([variant='flat']),
 :host([variant='contained']),
 :host([variant='outlined']) {
-    [part='base'] {
+    [part~='base'] {
         border-width: rem(2px);
     }
 }
 
-:host(:not([disabled])[variant='flat']) [part='base'],
-:host(:not(:disabled)[variant='flat']) [part='base'] {
+:host(:not([disabled])[variant='flat']) [part~='base'],
+:host(:not(:disabled)[variant='flat']) [part~='base'] {
     &:focus-visible {
         box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'shadow-color');
     }
@@ -59,8 +59,8 @@ $outlined-theme: $indigo-outlined;
     }
 }
 
-:host(:not([disabled])[variant='outlined']) [part='base'],
-:host(:not(:disabled)[variant='outlined']) [part='base'] {
+:host(:not([disabled])[variant='outlined']) [part~='base'],
+:host(:not(:disabled)[variant='outlined']) [part~='base'] {
     &:hover {
         border-color: var-get($outlined-theme, 'hover-border-color');
     }
@@ -87,8 +87,8 @@ $outlined-theme: $indigo-outlined;
     }
 }
 
-:host(:not([disabled])[variant='contained']) [part='base'],
-:host(:not(:disabled)[variant='contained']) [part='base'] {
+:host(:not([disabled])[variant='contained']) [part~='base'],
+:host(:not(:disabled)[variant='contained']) [part~='base'] {
     &:hover {
         border-color: var-get($contained-theme, 'hover-border-color');
     }
@@ -115,8 +115,8 @@ $outlined-theme: $indigo-outlined;
     }
 }
 
-:host(:not([disabled])[variant='fab']) [part='base'],
-:host(:not(:disabled)[variant='fab']) [part='base'] {
+:host(:not([disabled])[variant='fab']) [part~='base'],
+:host(:not(:disabled)[variant='fab']) [part~='base'] {
     border-color: var-get($fab-theme, 'border-color');
     min-width: var(--size);
     min-height: var(--size);
@@ -147,8 +147,8 @@ $outlined-theme: $indigo-outlined;
     }
 }
 
-:host([disabled][variant='outlined']) [part='base'],
-:host(:disabled[variant='outlined']) [part='base'] {
+:host([disabled][variant='outlined']) [part~='base'],
+:host(:disabled[variant='outlined']) [part~='base'] {
     border-color: var-get($outlined-theme, 'disabled-border-color');
     border-width: rem(2px);
 }
diff --git a/src/components/button/themes/button/shared/button.material.scss b/src/components/button/themes/button/shared/button.material.scss
index a02ec6752..ed1b30bd5 100644
--- a/src/components/button/themes/button/shared/button.material.scss
+++ b/src/components/button/themes/button/shared/button.material.scss
@@ -22,12 +22,12 @@ $outlined-theme: $material-outlined;
     --component-size: var(--ig-size, #{var-get($fab-theme, 'default-size')});
 }
 
-[part='base'] {
+[part~='base'] {
     transition: all .1s ease-in-out;
 }
 
-:host(:not([disabled])[variant='outlined']) [part='base'],
-:host(:not(:disabled)[variant='outlined']) [part='base'] {
+:host(:not([disabled])[variant='outlined']) [part~='base'],
+:host(:not(:disabled)[variant='outlined']) [part~='base'] {
     &:hover {
         border-color: var-get($outlined-theme, 'hover-border-color');
     }
@@ -41,8 +41,8 @@ $outlined-theme: $material-outlined;
     }
 }
 
-:host(:not([disabled])[variant='contained']) [part='base'],
-:host(:not(:disabled)[variant='contained']) [part='base'] {
+:host(:not([disabled])[variant='contained']) [part~='base'],
+:host(:not(:disabled)[variant='contained']) [part~='base'] {
     box-shadow: var-get($contained-theme, 'resting-elevation');
 
     &:hover {
@@ -62,8 +62,8 @@ $outlined-theme: $material-outlined;
     }
 }
 
-:host(:not([disabled])[variant='fab']) [part='base'],
-:host(:not(:disabled)[variant='fab']) [part='base'] {
+:host(:not([disabled])[variant='fab']) [part~='base'],
+:host(:not(:disabled)[variant='fab']) [part~='base'] {
     box-shadow: var-get($fab-theme, 'resting-elevation');
 
     &:hover {

From 3e0cc94fe0d8bcb608a35dcb1ab8b4f9632b402a Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Fri, 26 Apr 2024 17:23:50 +0300
Subject: [PATCH 6/8] refactor(button): update focus styles

---
 src/components/button/button-base.ts          |   8 +-
 .../button/shared/button.bootstrap.scss       |  48 +++---
 .../themes/button/shared/button.common.scss   | 152 +++++++++---------
 .../themes/button/shared/button.fluent.scss   |  63 ++++----
 .../themes/button/shared/button.indigo.scss   |  66 ++++----
 .../themes/button/shared/button.material.scss |  25 +--
 6 files changed, 183 insertions(+), 179 deletions(-)

diff --git a/src/components/button/button-base.ts b/src/components/button/button-base.ts
index 6468a4127..5db7b0061 100644
--- a/src/components/button/button-base.ts
+++ b/src/components/button/button-base.ts
@@ -125,6 +125,7 @@ export abstract class IgcButtonBaseComponent extends SizableMixin(
   }
 
   protected handleClick() {
+    this.focused = false;
     switch (this.type) {
       case 'submit':
         return this.form?.requestSubmit();
@@ -135,11 +136,6 @@ export abstract class IgcButtonBaseComponent extends SizableMixin(
     }
   }
 
-  protected handleMouseDown(event: PointerEvent) {
-    event.preventDefault();
-    this.focused = false;
-  }
-
   protected handleKeyUp() {
     if (!this.focused) {
       this.focused = true;
@@ -164,7 +160,6 @@ export abstract class IgcButtonBaseComponent extends SizableMixin(
         @click=${this.handleClick}
         @focus=${this.handleFocus}
         @blur=${this.handleBlur}
-        @pointerdown=${this.handleMouseDown}
       >
         ${this.renderContent()}
       </button>
@@ -187,7 +182,6 @@ export abstract class IgcButtonBaseComponent extends SizableMixin(
         rel=${ifDefined(this.rel)}
         @focus=${this.disabled ? nothing : this.handleFocus}
         @blur=${this.disabled ? nothing : this.handleBlur}
-        @pointerdown=${this.disabled ? nothing : this.handleMouseDown}
       >
         ${this.renderContent()}
       </a>
diff --git a/src/components/button/themes/button/shared/button.bootstrap.scss b/src/components/button/themes/button/shared/button.bootstrap.scss
index 897987824..2b8759977 100644
--- a/src/components/button/themes/button/shared/button.bootstrap.scss
+++ b/src/components/button/themes/button/shared/button.bootstrap.scss
@@ -30,10 +30,6 @@ $outlined-theme: $bootstrap-outlined;
 
 :host(:not([disabled])[variant='flat']) [part~='base'],
 :host(:not(:disabled)[variant='flat']) [part~='base'] {
-    &:focus-visible {
-        box-shadow: 0 0 0 rem(4px) var-get($flat-theme, 'shadow-color');
-    }
-
     &:active {
         ::slotted(igc-icon) {
             color: var-get($flat-theme, 'active-foreground');
@@ -41,35 +37,37 @@ $outlined-theme: $bootstrap-outlined;
     }
 }
 
+:host(:not([disabled])[variant='flat']) [part='base focused'],
+:host(:not(:disabled)[variant='flat']) [part='base focused'] {
+    box-shadow: 0 0 0 rem(4px) var-get($flat-theme, 'shadow-color');
+}
+
 :host(:not([disabled])[variant='outlined']) [part~='base'],
 :host(:not(:disabled)[variant='outlined']) [part~='base'] {
-    &:focus-visible {
-        box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'shadow-color');
+    &:active {
+        border-color: var-get($outlined-theme, 'active-border-color');
 
         ::slotted(igc-icon) {
-            color: var-get($outlined-theme, 'icon-color-hover');
+            color: var-get($outlined-theme, 'active-foreground');
         }
+    }
+}
 
-        &:active {
-            border-color: var-get($outlined-theme, 'active-border-color');
-        }
+:host(:not([disabled])[variant='outlined']) [part='base focused'],
+:host(:not(:disabled)[variant='outlined']) [part='base focused'] {
+    box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'shadow-color');
+
+    ::slotted(igc-icon) {
+        color: var-get($outlined-theme, 'icon-color-hover');
     }
 
     &:active {
         border-color: var-get($outlined-theme, 'active-border-color');
-
-        ::slotted(igc-icon) {
-            color: var-get($outlined-theme, 'active-foreground');
-        }
     }
 }
 
 :host(:not([disabled])[variant='contained']) [part~='base'],
 :host(:not(:disabled)[variant='contained']) [part~='base'] {
-    &:focus-visible {
-        box-shadow: 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color');
-    }
-
     &:active {
         ::slotted(igc-icon) {
             color: var-get($contained-theme, 'active-foreground');
@@ -77,15 +75,21 @@ $outlined-theme: $bootstrap-outlined;
     }
 }
 
+:host(:not([disabled])[variant='contained']) [part='base focused'],
+:host(:not(:disabled)[variant='contained']) [part='base focused'] {
+    box-shadow: 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color');
+}
+
 :host(:not([disabled])[variant='fab']) [part~='base'],
 :host(:not(:disabled)[variant='fab']) [part~='base'] {
-    &:focus-visible {
-        box-shadow: 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color');
-    }
-
     &:active {
         ::slotted(igc-icon) {
             color: var-get($fab-theme, 'active-foreground');
         }
     }
 }
+
+:host(:not([disabled])[variant='fab']) [part='base focused'],
+:host(:not(:disabled)[variant='fab']) [part='base focused'] {
+    box-shadow: 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color');
+}
diff --git a/src/components/button/themes/button/shared/button.common.scss b/src/components/button/themes/button/shared/button.common.scss
index 0c20733f2..660f26a8b 100644
--- a/src/components/button/themes/button/shared/button.common.scss
+++ b/src/components/button/themes/button/shared/button.common.scss
@@ -61,32 +61,32 @@ $outlined-theme: $material-outlined;
         }
     }
 
-    &:focus-visible {
-        color: var-get($flat-theme, 'focus-visible-foreground');
-        background: var-get($flat-theme, 'focus-visible-background');
-
-        ::slotted(igc-icon) {
-            color: var-get($flat-theme, 'icon-color');
-        }
+    &:active {
+        color: var-get($flat-theme, 'active-foreground');
+        background: var-get($flat-theme, 'active-background');
+    }
+}
 
-        &:hover {
-            color: var-get($flat-theme, 'focus-hover-foreground');
-            background: var-get($flat-theme, 'focus-hover-background');
+:host(:not([disabled])[variant='flat']) [part='base focused'],
+:host(:not(:disabled)[variant='flat']) [part='base focused'] {
+    color: var-get($flat-theme, 'focus-visible-foreground');
+    background: var-get($flat-theme, 'focus-visible-background');
 
-            ::slotted(igc-icon) {
-                color: var-get($flat-theme, 'icon-color-hover');
-            }
-        }
+    ::slotted(igc-icon) {
+        color: var-get($flat-theme, 'icon-color');
+    }
 
-        &:active {
-            color: var-get($flat-theme, 'focus-foreground');
-            background: var-get($flat-theme, 'focus-background');
+    &:hover {
+        color: var-get($flat-theme, 'focus-hover-foreground');
+        background: var-get($flat-theme, 'focus-hover-background');
+        ::slotted(igc-icon) {
+            color: var-get($flat-theme, 'icon-color-hover');
         }
     }
 
     &:active {
-        color: var-get($flat-theme, 'active-foreground');
-        background: var-get($flat-theme, 'active-background');
+        color: var-get($flat-theme, 'focus-foreground');
+        background: var-get($flat-theme, 'focus-background');
     }
 }
 
@@ -108,33 +108,33 @@ $outlined-theme: $material-outlined;
         }
     }
 
-    &:focus-visible {
-        color: var-get($outlined-theme, 'focus-visible-foreground');
-        background: var-get($outlined-theme, 'focus-visible-background');
-
-        ::slotted(igc-icon) {
-            color: var-get($outlined-theme, 'icon-color');
-        }
+    &:active {
+        color: var-get($outlined-theme, 'active-foreground');
+        background: var-get($outlined-theme, 'active-background');
+    }
+}
 
-        &:hover {
-            color: var-get($outlined-theme, 'focus-hover-foreground');
-            background: var-get($outlined-theme, 'focus-hover-background');
+:host(:not([disabled])[variant='outlined']) [part='base focused'],
+:host(:not(:disabled)[variant='outlined']) [part='base focused'] {
+    color: var-get($outlined-theme, 'focus-visible-foreground');
+    background: var-get($outlined-theme, 'focus-visible-background');
 
-            ::slotted(igc-icon) {
-                color: var-get($outlined-theme, 'icon-color-hover');
-            }
-        }
+    ::slotted(igc-icon) {
+        color: var-get($outlined-theme, 'icon-color');
+    }
 
-        &:active {
-            color: var-get($outlined-theme, 'focus-foreground');
-            background: var-get($outlined-theme, 'focus-background');
-            border-color: var-get($outlined-theme, 'focus-border-color');
+    &:hover {
+        color: var-get($outlined-theme, 'focus-hover-foreground');
+        background: var-get($outlined-theme, 'focus-hover-background');
+        ::slotted(igc-icon) {
+            color: var-get($outlined-theme, 'icon-color-hover');
         }
     }
 
     &:active {
-        color: var-get($outlined-theme, 'active-foreground');
-        background: var-get($outlined-theme, 'active-background');
+        color: var-get($outlined-theme, 'focus-foreground');
+        background: var-get($outlined-theme, 'focus-background');
+        border-color: var-get($outlined-theme, 'focus-border-color');
     }
 }
 
@@ -156,32 +156,33 @@ $outlined-theme: $material-outlined;
         }
     }
 
-    &:focus-visible {
-        color: var-get($contained-theme, 'focus-visible-foreground');
-        background: var-get($contained-theme, 'focus-visible-background');
+    &:active {
+        color: var-get($contained-theme, 'active-foreground');
+        background: var-get($contained-theme, 'active-background');
+    }
+}
 
-        ::slotted(igc-icon) {
-            color: var-get($contained-theme, 'icon-color');
-        }
+:host(:not([disabled])[variant='contained']) [part='base focused'],
+:host(:not(:disabled)[variant='contained']) [part='base focused'] {
+    color: var-get($contained-theme, 'focus-visible-foreground');
+    background: var-get($contained-theme, 'focus-visible-background');
 
-        &:hover {
-            color: var-get($contained-theme, 'focus-hover-foreground');
-            background: var-get($contained-theme, 'focus-hover-background');
+    ::slotted(igc-icon) {
+        color: var-get($contained-theme, 'icon-color');
+    }
 
-            ::slotted(igc-icon) {
-                color: var-get($contained-theme, 'icon-color-hover');
-            }
-        }
+    &:hover {
+        color: var-get($contained-theme, 'focus-hover-foreground');
+        background: var-get($contained-theme, 'focus-hover-background');
 
-        &:active {
-            color: var-get($contained-theme, 'focus-foreground');
-            background: var-get($contained-theme, 'focus-background');
+        ::slotted(igc-icon) {
+            color: var-get($contained-theme, 'icon-color-hover');
         }
     }
 
     &:active {
-        color: var-get($contained-theme, 'active-foreground');
-        background: var-get($contained-theme, 'active-background');
+        color: var-get($contained-theme, 'focus-foreground');
+        background: var-get($contained-theme, 'focus-background');
     }
 }
 
@@ -203,32 +204,33 @@ $outlined-theme: $material-outlined;
         }
     }
 
-    &:focus-visible {
-        color: var-get($fab-theme, 'focus-visible-foreground');
-        background: var-get($fab-theme, 'focus-visible-background');
+    &:active {
+        color: var-get($fab-theme, 'active-foreground');
+        background: var-get($fab-theme, 'active-background');
+    }
+}
 
-        ::slotted(igc-icon) {
-            color: var-get($fab-theme, 'icon-color');
-        }
+:host(:not([disabled])[variant='fab']) [part='base focused'],
+:host(:not(:disabled)[variant='fab']) [part='base focused'] {
+    color: var-get($fab-theme, 'focus-visible-foreground');
+    background: var-get($fab-theme, 'focus-visible-background');
 
-        &:hover {
-            color: var-get($fab-theme, 'focus-hover-foreground');
-            background: var-get($fab-theme, 'focus-hover-background');
+    ::slotted(igc-icon) {
+        color: var-get($fab-theme, 'icon-color');
+    }
 
-            ::slotted(igc-icon) {
-                color: var-get($fab-theme, 'icon-color-hover');
-            }
-        }
+    &:hover {
+        color: var-get($fab-theme, 'focus-hover-foreground');
+        background: var-get($fab-theme, 'focus-hover-background');
 
-        &:active {
-            color: var-get($fab-theme, 'focus-foreground');
-            background: var-get($fab-theme, 'focus-background');
+        ::slotted(igc-icon) {
+            color: var-get($fab-theme, 'icon-color-hover');
         }
     }
 
     &:active {
-        color: var-get($fab-theme, 'active-foreground');
-        background: var-get($fab-theme, 'active-background');
+        color: var-get($fab-theme, 'focus-foreground');
+        background: var-get($fab-theme, 'focus-background');
     }
 }
 
diff --git a/src/components/button/themes/button/shared/button.fluent.scss b/src/components/button/themes/button/shared/button.fluent.scss
index e76084761..b0fe2dc6b 100644
--- a/src/components/button/themes/button/shared/button.fluent.scss
+++ b/src/components/button/themes/button/shared/button.fluent.scss
@@ -33,8 +33,10 @@ $outlined-btn-indent: rem(2px);
 [part~='base'] {
     padding: 0 pad(8px, 12px, 16px);
     transition: all .1s ease-in-out;
+}
 
-    &:focus-visible::after {
+[part='base focused'] {
+    &::after {
         content: '';
         position: absolute;
         inset-block-start: $btn-indent;
@@ -45,12 +47,10 @@ $outlined-btn-indent: rem(2px);
     }
 }
 
-:host(:not([disabled])[variant='flat']) [part~='base'],
-:host(:not(:disabled)[variant='flat']) [part~='base'] {
-    &:focus-visible {
-        &::after {
-            box-shadow: 0 0 0 rem(1px) var-get($flat-theme, 'focus-visible-border-color');
-        }
+:host(:not([disabled])[variant='flat']) [part='base focused'],
+:host(:not(:disabled)[variant='flat']) [part='base focused'] {
+    &::after {
+        box-shadow: 0 0 0 rem(1px) var-get($flat-theme, 'focus-visible-border-color');
     }
 }
 
@@ -61,40 +61,37 @@ $outlined-btn-indent: rem(2px);
     &:active {
         border-color: var-get($outlined-theme, 'active-border-color');
     }
+}
 
-    &:focus-visible {
-        &::after {
-            inset-block-start: $outlined-btn-indent;
-            inset-inline-start: $outlined-btn-indent;
-            width: calc(100% - (#{$outlined-btn-indent} * 2));
-            height: calc(100% - (#{$outlined-btn-indent} * 2));
-            box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'focus-visible-border-color');
-        }
+:host(:not([disabled])[variant='outlined']) [part='base focused'],
+:host(:not(:disabled)[variant='outlined']) [part='base focused'] {
+    &::after {
+        inset-block-start: $outlined-btn-indent;
+        inset-inline-start: $outlined-btn-indent;
+        width: calc(100% - (#{$outlined-btn-indent} * 2));
+        height: calc(100% - (#{$outlined-btn-indent} * 2));
+        box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'focus-visible-border-color');
     }
 }
 
-:host(:not([disabled])[variant='contained']) [part~='base'],
-:host(:not(:disabled)[variant='contained']) [part~='base'] {
-    &:focus-visible {
-        color: var-get($contained-theme, 'focus-visible-foreground');
-        background: var-get($contained-theme, 'focus-visible-background');
-        position: relative;
+:host(:not([disabled])[variant='contained']) [part='base focused'],
+:host(:not(:disabled)[variant='contained']) [part='base focused'] {
+    color: var-get($contained-theme, 'focus-visible-foreground');
+    background: var-get($contained-theme, 'focus-visible-background');
+    position: relative;
 
-        &::after {
-            box-shadow: 0 0 0 1px var-get($contained-theme, 'focus-visible-border-color');
-        }
+    &::after {
+        box-shadow: 0 0 0 1px var-get($contained-theme, 'focus-visible-border-color');
     }
 }
 
-:host(:not([disabled])[variant='fab']) [part~='base'],
-:host(:not(:disabled)[variant='fab']) [part~='base'] {
-    &:focus-visible {
-        color: var-get($fab-theme, 'focus-visible-foreground');
-        background: var-get($fab-theme, 'focus-visible-background');
-        position: relative;
+:host(:not([disabled])[variant='fab']) [part='base focused'],
+:host(:not(:disabled)[variant='fab']) [part='base focused'] {
+    color: var-get($fab-theme, 'focus-visible-foreground');
+    background: var-get($fab-theme, 'focus-visible-background');
+    position: relative;
 
-        &::after {
-            box-shadow: 0 0 0 1px var-get($fab-theme, 'focus-visible-border-color');
-        }
+    &::after {
+        box-shadow: 0 0 0 1px var-get($fab-theme, 'focus-visible-border-color');
     }
 }
diff --git a/src/components/button/themes/button/shared/button.indigo.scss b/src/components/button/themes/button/shared/button.indigo.scss
index 47fedb957..3a46e6a9b 100644
--- a/src/components/button/themes/button/shared/button.indigo.scss
+++ b/src/components/button/themes/button/shared/button.indigo.scss
@@ -48,10 +48,6 @@ $outlined-theme: $indigo-outlined;
 
 :host(:not([disabled])[variant='flat']) [part~='base'],
 :host(:not(:disabled)[variant='flat']) [part~='base'] {
-    &:focus-visible {
-        box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'shadow-color');
-    }
-
     &:active {
         ::slotted(igc-icon) {
             color: var-get($flat-theme, 'icon-color-hover');
@@ -59,6 +55,11 @@ $outlined-theme: $indigo-outlined;
     }
 }
 
+:host(:not([disabled])[variant='flat']) [part='base focused'],
+:host(:not(:disabled)[variant='flat']) [part='base focused'] {
+    box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'shadow-color');
+}
+
 :host(:not([disabled])[variant='outlined']) [part~='base'],
 :host(:not(:disabled)[variant='outlined']) [part~='base'] {
     &:hover {
@@ -72,18 +73,19 @@ $outlined-theme: $indigo-outlined;
             color: var-get($outlined-theme, 'icon-color-hover');
         }
     }
+}
 
-    &:focus-visible {
-        border-color: var-get($outlined-theme, 'focus-visible-border-color');
-        box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'shadow-color');
+:host(:not([disabled])[variant='outlined']) [part='base focused'],
+:host(:not(:disabled)[variant='outlined']) [part='base focused'] {
+    border-color: var-get($outlined-theme, 'focus-visible-border-color');
+    box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'shadow-color');
 
-        &:hover {
-            border-color: var-get($outlined-theme, 'hover-border-color');
-        }
+    &:hover {
+        border-color: var-get($outlined-theme, 'hover-border-color');
+    }
 
-        &:active {
-            border-color: var-get($outlined-theme, 'active-border-color');
-        }
+    &:active {
+        border-color: var-get($outlined-theme, 'active-border-color');
     }
 }
 
@@ -100,18 +102,19 @@ $outlined-theme: $indigo-outlined;
             color: var-get($contained-theme, 'icon-color-hover');
         }
     }
+}
 
-    &:focus-visible {
-        box-shadow: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color');
-        border-color: var-get($contained-theme, 'focus-visible-border-color');
+:host(:not([disabled])[variant='contained']) [part='base focused'],
+:host(:not(:disabled)[variant='contained']) [part='base focused'] {
+    box-shadow: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color');
+    border-color: var-get($contained-theme, 'focus-visible-border-color');
 
-        &:hover {
-            border-color: var-get($contained-theme, 'hover-border-color');
-        }
+    &:hover {
+        border-color: var-get($contained-theme, 'hover-border-color');
+    }
 
-        &:active {
-            border-color: var-get($contained-theme, 'active-border-color');
-        }
+    &:active {
+        border-color: var-get($contained-theme, 'active-border-color');
     }
 }
 
@@ -132,18 +135,19 @@ $outlined-theme: $indigo-outlined;
             color: var-get($fab-theme, 'icon-color-hover');
         }
     }
+}
 
-    &:focus-visible {
-        border-color: var-get($fab-theme, 'focus-visible-border-color');
-        box-shadow: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color');
+:host(:not([disabled])[variant='fab']) [part='base focused'],
+:host(:not(:disabled)[variant='fab']) [part='base focused'] {
+    border-color: var-get($fab-theme, 'focus-visible-border-color');
+    box-shadow: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color');
 
-        &:hover {
-            border-color: var-get($fab-theme, 'hover-border-color');
-        }
+    &:hover {
+        border-color: var-get($fab-theme, 'hover-border-color');
+    }
 
-        &:active {
-            border-color: var-get($fab-theme, 'active-border-color');
-        }
+    &:active {
+        border-color: var-get($fab-theme, 'active-border-color');
     }
 }
 
diff --git a/src/components/button/themes/button/shared/button.material.scss b/src/components/button/themes/button/shared/button.material.scss
index ed1b30bd5..8eecb1315 100644
--- a/src/components/button/themes/button/shared/button.material.scss
+++ b/src/components/button/themes/button/shared/button.material.scss
@@ -35,10 +35,11 @@ $outlined-theme: $material-outlined;
     &:active {
         border-color: var-get($outlined-theme, 'active-border-color');
     }
+}
 
-    &:focus-visible {
-        border-color: var-get($outlined-theme, 'focus-visible-border-color');
-    }
+:host(:not([disabled])[variant='outlined']) [part='base focused'],
+:host(:not(:disabled)[variant='outlined']) [part='base focused'] {
+    border-color: var-get($outlined-theme, 'focus-visible-border-color');
 }
 
 :host(:not([disabled])[variant='contained']) [part~='base'],
@@ -52,13 +53,14 @@ $outlined-theme: $material-outlined;
     &:active {
         box-shadow: var-get($contained-theme, 'hover-elevation');
     }
+}
 
-    &:focus-visible {
-        box-shadow: var-get($contained-theme, 'focus-elevation');
+:host(:not([disabled])[variant='contained']) [part='base focused'],
+:host(:not(:disabled)[variant='contained']) [part='base focused'] {
+    box-shadow: var-get($contained-theme, 'focus-elevation');
 
-        &:active {
-            box-shadow: var-get($fab-theme, 'active-elevation');
-        }
+    &:active {
+        box-shadow: var-get($fab-theme, 'active-elevation');
     }
 }
 
@@ -73,8 +75,9 @@ $outlined-theme: $material-outlined;
     &:active {
         box-shadow: var-get($contained-theme, 'active-elevation');
     }
+}
 
-    &:focus-visible {
-        box-shadow: var-get($fab-theme, 'focus-elevation');
-    }
+:host(:not([disabled])[variant='fab']) [part='base focused'],
+:host(:not(:disabled)[variant='fab']) [part='base focused'] {
+    box-shadow: var-get($fab-theme, 'focus-elevation');
 }

From f631dd339867de1ae7f4c6179fa9de9162c429e1 Mon Sep 17 00:00:00 2001
From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com>
Date: Fri, 26 Apr 2024 17:28:22 +0300
Subject: [PATCH 7/8] Update button.common.scss

---
 src/components/button/themes/button/shared/button.common.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/button/themes/button/shared/button.common.scss b/src/components/button/themes/button/shared/button.common.scss
index 660f26a8b..c8deee71c 100644
--- a/src/components/button/themes/button/shared/button.common.scss
+++ b/src/components/button/themes/button/shared/button.common.scss
@@ -79,6 +79,7 @@ $outlined-theme: $material-outlined;
     &:hover {
         color: var-get($flat-theme, 'focus-hover-foreground');
         background: var-get($flat-theme, 'focus-hover-background');
+
         ::slotted(igc-icon) {
             color: var-get($flat-theme, 'icon-color-hover');
         }
@@ -126,6 +127,7 @@ $outlined-theme: $material-outlined;
     &:hover {
         color: var-get($outlined-theme, 'focus-hover-foreground');
         background: var-get($outlined-theme, 'focus-hover-background');
+
         ::slotted(igc-icon) {
             color: var-get($outlined-theme, 'icon-color-hover');
         }

From ab0b81b79b2db7d9d5190822a229655459453c3a Mon Sep 17 00:00:00 2001
From: sivanova <sivanova@infragistics.com>
Date: Mon, 29 Apr 2024 13:15:48 +0300
Subject: [PATCH 8/8] refactor(btn-group): update focus styles

---
 src/components/button-group/button-group.ts   |  1 +
 .../shared/button/button.bootstrap.scss       |  3 +-
 .../themes/shared/button/button.fluent.scss   | 34 +++++++++----------
 .../themes/shared/button/button.indigo.scss   |  8 ++---
 .../themes/shared/button/button.material.scss | 14 ++++----
 src/components/button-group/toggle-button.ts  | 27 +++++++++++++--
 6 files changed, 56 insertions(+), 31 deletions(-)

diff --git a/src/components/button-group/button-group.ts b/src/components/button-group/button-group.ts
index 169bc1539..0ab8cfc28 100644
--- a/src/components/button-group/button-group.ts
+++ b/src/components/button-group/button-group.ts
@@ -171,6 +171,7 @@ export default class IgcButtonGroupComponent extends EventEmitterMixin<
     );
 
     if (button) {
+      button.focused = false;
       this.isMultiple
         ? this.handleMultipleSelection(button)
         : this.handleSingleSelection(button);
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 80d3fb3d1..ee687fc27 100644
--- a/src/components/button-group/themes/shared/button/button.bootstrap.scss
+++ b/src/components/button-group/themes/shared/button/button.bootstrap.scss
@@ -22,8 +22,9 @@ $group-item-border-thickness: rem(1px);
         }
     }
 
-    [part~='toggle']:focus-visible {
+    [part='toggle focused'] {
         box-shadow: 0 0 0 rem(4px) var-get($theme, 'idle-shadow-color');
+        z-index: 1;
     }
 }
 
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 3abe12287..bcbf557d0 100644
--- a/src/components/button-group/themes/shared/button/button.fluent.scss
+++ b/src/components/button-group/themes/shared/button/button.fluent.scss
@@ -9,26 +9,26 @@ $outline-btn-indent: rem(2px);
     [part~='toggle'] {
         min-height: $fluent-flat-btn-size;
         border-width: $group-item-border-thickness;
+    }
 
-        &:focus-visible {
-            background: var-get($theme, 'item-background');
+    [part='toggle focused'] {
+        background: var-get($theme, 'item-background');
 
-            &::after {
-                content: '';
-                position: absolute;
-                inset-block-start: $outline-btn-indent;
-                inset-inline-start: $outline-btn-indent;
-                pointer-events: none;
-                width: calc(100% - (#{$outline-btn-indent} * 2));
-                height: calc(100% - (#{$outline-btn-indent} * 2));
-                box-shadow: 0 0 0 rem(1px) var-get($theme, 'item-focused-border-color');
-            }
+        &::after {
+            content: '';
+            position: absolute;
+            inset-block-start: $outline-btn-indent;
+            inset-inline-start: $outline-btn-indent;
+            pointer-events: none;
+            width: calc(100% - (#{$outline-btn-indent} * 2));
+            height: calc(100% - (#{$outline-btn-indent} * 2));
+            box-shadow: 0 0 0 rem(1px) var-get($theme, 'item-focused-border-color');
         }
     }
 }
 
 :host(:hover) {
-    [part~='toggle']:focus-visible {
+    [part='toggle focused'] {
         background: var-get($theme, 'item-hover-background');
     }
 }
@@ -36,10 +36,10 @@ $outline-btn-indent: rem(2px);
 :host(:active) {
     [part~='toggle'] {
         background: var-get($theme, 'item-focused-background');
+    }
 
-        &:focus-visible {
-            background: var-get($theme, 'item-focused-background');
-        }
+    [part='toggle focused'] {
+        background: var-get($theme, 'item-focused-background');
     }
 }
 
@@ -60,7 +60,7 @@ $outline-btn-indent: rem(2px);
 }
 
 :host([selected]) {
-    [part~='toggle']:focus-visible {
+    [part='toggle focused'] {
         background: var-get($theme, 'item-selected-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 ff7e755e4..76bc4ea40 100644
--- a/src/components/button-group/themes/shared/button/button.indigo.scss
+++ b/src/components/button-group/themes/shared/button/button.indigo.scss
@@ -19,7 +19,7 @@ $group-item-border-thickness: rem(1px);
         --size: var(--button-icon) !important;
     }
 
-    [part~='toggle']:focus-visible {
+    [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');
@@ -32,7 +32,7 @@ $group-item-border-thickness: rem(1px);
         z-index: 1;
     }
 
-    [part~='toggle']:focus-visible {
+    [part='toggle focused'] {
         border-color: var-get($theme, 'item-hover-border-color');
         color: var-get($theme, 'item-hover-text-color');
     }
@@ -52,13 +52,13 @@ $group-item-border-thickness: rem(1px);
 }
 
 :host([selected]:hover) {
-    [part~='toggle']:focus-visible {
+    [part='toggle focused'] {
         border-color: var-get($theme, 'item-selected-hover-border-color');
     }
 }
 
 :host([selected]) {
-    [part~='toggle']:focus-visible {
+    [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');
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 87e7b5fc5..6e67cd6ec 100644
--- a/src/components/button-group/themes/shared/button/button.material.scss
+++ b/src/components/button-group/themes/shared/button/button.material.scss
@@ -12,7 +12,7 @@ $theme: $material;
         z-index: -1;
     }
 
-    [part~='toggle']:focus-visible {
+    [part='toggle focused'] {
         color: var-get($theme, 'item-hover-text-color');
         border-color: var-get($theme, 'item-hover-border-color');
 
@@ -35,11 +35,11 @@ $theme: $material;
             content: '';
             background: var-get($theme, 'item-hover-background');
         }
+    }
 
-        &:focus-visible {
-            &::before {
-                background: var-get($theme, 'item-focused-hover-background');
-            }
+    [part='toggle focused'] {
+        &::before {
+            background: var-get($theme, 'item-focused-hover-background');
         }
     }
 }
@@ -76,7 +76,7 @@ $theme: $material;
         }
     }
 
-    [part~='toggle']:focus-visible {
+    [part='toggle focused'] {
         &::before {
             background: var-get($theme, 'item-selected-focus-hover-background');
         }
@@ -84,7 +84,7 @@ $theme: $material;
 }
 
 :host([selected]) {
-    [part~='toggle']:focus-visible {
+    [part='toggle focused'] {
         color: var-get($theme, 'item-selected-hover-text-color');
         border-color: var-get($theme, 'item-selected-hover-border-color');
 
diff --git a/src/components/button-group/toggle-button.ts b/src/components/button-group/toggle-button.ts
index 4ca6d765a..e98f33011 100644
--- a/src/components/button-group/toggle-button.ts
+++ b/src/components/button-group/toggle-button.ts
@@ -1,8 +1,9 @@
 import { LitElement, html } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 
 import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
+import { partNameMap } from '../common/util.js';
 import { styles } from './themes/button.base.css.js';
 import { all } from './themes/button.js';
 import { styles as shared } from './themes/shared/button/button.common.css.js';
@@ -35,6 +36,9 @@ export default class IgcToggleButtonComponent extends LitElement {
   @query('[part="toggle"]', true)
   private _nativeButton!: HTMLButtonElement;
 
+  @state()
+  public focused = false;
+
   /**
    * The value attribute of the control.
    * @attr
@@ -56,6 +60,11 @@ export default class IgcToggleButtonComponent extends LitElement {
   @property({ type: Boolean, reflect: true })
   public disabled = false;
 
+  constructor() {
+    super();
+    this.addEventListener('keyup', this.handleKeyUp);
+  }
+
   /* alternateName: focusComponent */
   /** Sets focus on the button. */
   public override focus(options?: FocusOptions) {
@@ -73,15 +82,29 @@ export default class IgcToggleButtonComponent extends LitElement {
     this._nativeButton.click();
   }
 
+  protected handleBlur() {
+    this.focused = false;
+  }
+
+  protected handleKeyUp() {
+    if (!this.focused) {
+      this.focused = true;
+    }
+  }
+
   protected override render() {
     return html`
       <button
-        part="toggle"
+        part=${partNameMap({
+          toggle: true,
+          focused: this.focused,
+        })}
         type="button"
         ?disabled=${this.disabled}
         .ariaLabel=${this.ariaLabel}
         aria-pressed=${this.selected}
         aria-disabled=${this.disabled}
+        @blur=${this.handleBlur}
       >
         <slot></slot>
       </button>