From f0975115b983286c70f09713e7545ea9c03a398c Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Tue, 25 Nov 2025 11:18:01 +0200
Subject: [PATCH 1/5] refactor(buttons): refactor buttons themes

---
 .../button/shared/button.bootstrap.scss       | 52 --------------
 .../themes/button/shared/button.common.scss   | 53 +++++++++++++-
 .../themes/button/shared/button.fluent.scss   | 17 +++--
 .../themes/button/shared/button.indigo.scss   | 70 +++++++++++--------
 .../themes/button/shared/button.material.scss | 60 +++-------------
 .../common/controllers/focus-ring.ts          |  6 +-
 6 files changed, 117 insertions(+), 141 deletions(-)

diff --git a/src/components/button/themes/button/shared/button.bootstrap.scss b/src/components/button/themes/button/shared/button.bootstrap.scss
index 2b8759977..111937d37 100644
--- a/src/components/button/themes/button/shared/button.bootstrap.scss
+++ b/src/components/button/themes/button/shared/button.bootstrap.scss
@@ -12,12 +12,6 @@ $outlined-theme: $bootstrap-outlined;
 
 :host([variant='outlined']) {
     --component-size: var(--ig-size, #{var-get($outlined-theme, 'default-size')});
-
-    [part~='base'] {
-        &:focus {
-            border: rem(1px) solid var-get($outlined-theme, 'focus-border-color');
-        }
-    }
 }
 
 :host([variant='contained']) {
@@ -28,51 +22,14 @@ $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'] {
-    &:active {
-        ::slotted(igc-icon) {
-            color: var-get($flat-theme, 'active-foreground');
-        }
-    }
-}
-
 :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'] {
-    &:active {
-        border-color: var-get($outlined-theme, 'active-border-color');
-
-        ::slotted(igc-icon) {
-            color: var-get($outlined-theme, 'active-foreground');
-        }
-    }
-}
-
 :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');
-    }
-}
-
-:host(:not([disabled])[variant='contained']) [part~='base'],
-:host(:not(:disabled)[variant='contained']) [part~='base'] {
-    &:active {
-        ::slotted(igc-icon) {
-            color: var-get($contained-theme, 'active-foreground');
-        }
-    }
 }
 
 :host(:not([disabled])[variant='contained']) [part='base focused'],
@@ -80,15 +37,6 @@ $outlined-theme: $bootstrap-outlined;
     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'] {
-    &: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 e631c5303..bea692d25 100644
--- a/src/components/button/themes/button/shared/button.common.scss
+++ b/src/components/button/themes/button/shared/button.common.scss
@@ -55,6 +55,7 @@ $outlined-theme: $material-outlined;
     &:hover {
         color: var-get($flat-theme, 'hover-foreground');
         background: var-get($flat-theme, 'hover-background');
+        border-color: var-get($flat-theme, 'hover-border-color');
 
         ::slotted(igc-icon) {
             color: var-get($flat-theme, 'icon-color-hover');
@@ -64,6 +65,11 @@ $outlined-theme: $material-outlined;
     &:active {
         color: var-get($flat-theme, 'active-foreground');
         background: var-get($flat-theme, 'active-background');
+        border-color: var-get($flat-theme, 'active-border-color');
+
+        ::slotted(igc-icon) {
+            color: var-get($flat-theme, 'active-foreground');
+        }
     }
 }
 
@@ -71,6 +77,7 @@ $outlined-theme: $material-outlined;
 :host(:not(:disabled)[variant='flat']) [part='base focused'] {
     color: var-get($flat-theme, 'focus-visible-foreground');
     background: var-get($flat-theme, 'focus-visible-background');
+    border-color: var-get($flat-theme, 'focus-visible-border-color');
 
     ::slotted(igc-icon) {
         color: var-get($flat-theme, 'icon-color');
@@ -79,6 +86,7 @@ $outlined-theme: $material-outlined;
     &:hover {
         color: var-get($flat-theme, 'focus-hover-foreground');
         background: var-get($flat-theme, 'focus-hover-background');
+        border-color: var-get($flat-theme, 'focus-visible-border-color');
 
         ::slotted(igc-icon) {
             color: var-get($flat-theme, 'icon-color-hover');
@@ -88,6 +96,11 @@ $outlined-theme: $material-outlined;
     &:active {
         color: var-get($flat-theme, 'focus-foreground');
         background: var-get($flat-theme, 'focus-background');
+        border-color: var-get($flat-theme, 'focus-visible-border-color');
+
+        ::slotted(igc-icon) {
+            color: var-get($flat-theme, 'focus-foreground');
+        }
     }
 }
 
@@ -103,6 +116,7 @@ $outlined-theme: $material-outlined;
     &:hover {
         color: var-get($outlined-theme, 'hover-foreground');
         background: var-get($outlined-theme, 'hover-background');
+        border-color: var-get($outlined-theme, 'hover-border-color');
 
         ::slotted(igc-icon) {
             color: var-get($outlined-theme, 'icon-color-hover');
@@ -112,6 +126,11 @@ $outlined-theme: $material-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');
+
+        ::slotted(igc-icon) {
+            color: var-get($outlined-theme, 'active-foreground');
+        }
     }
 }
 
@@ -119,6 +138,7 @@ $outlined-theme: $material-outlined;
 :host(:not(:disabled)[variant='outlined']) [part='base focused'] {
     color: var-get($outlined-theme, 'focus-visible-foreground');
     background: var-get($outlined-theme, 'focus-visible-background');
+    border-color: var-get($outlined-theme, 'focus-visible-border-color');
 
     ::slotted(igc-icon) {
         color: var-get($outlined-theme, 'icon-color');
@@ -137,6 +157,10 @@ $outlined-theme: $material-outlined;
         color: var-get($outlined-theme, 'focus-foreground');
         background: var-get($outlined-theme, 'focus-background');
         border-color: var-get($outlined-theme, 'focus-border-color');
+
+        ::slotted(igc-icon) {
+            color: var-get($outlined-theme, 'focus-foreground');
+        }
     }
 }
 
@@ -152,6 +176,7 @@ $outlined-theme: $material-outlined;
     &:hover {
         color: var-get($contained-theme, 'hover-foreground');
         background: var-get($contained-theme, 'hover-background');
+        border-color: var-get($contained-theme, 'hover-border-color');
 
         ::slotted(igc-icon) {
             color: var-get($contained-theme, 'icon-color-hover');
@@ -161,6 +186,11 @@ $outlined-theme: $material-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');
+
+        ::slotted(igc-icon) {
+            color: var-get($contained-theme, 'active-foreground');
+        }
     }
 }
 
@@ -168,6 +198,7 @@ $outlined-theme: $material-outlined;
 :host(:not(:disabled)[variant='contained']) [part='base focused'] {
     color: var-get($contained-theme, 'focus-visible-foreground');
     background: var-get($contained-theme, 'focus-visible-background');
+    border-color: var-get($contained-theme, 'focus-visible-border-color');
 
     ::slotted(igc-icon) {
         color: var-get($contained-theme, 'icon-color');
@@ -185,6 +216,11 @@ $outlined-theme: $material-outlined;
     &:active {
         color: var-get($contained-theme, 'focus-foreground');
         background: var-get($contained-theme, 'focus-background');
+        border-color: var-get($contained-theme, 'focus-border-color');
+
+        ::slotted(igc-icon) {
+            color: var-get($contained-theme, 'focus-foreground');
+        }
     }
 }
 
@@ -200,6 +236,7 @@ $outlined-theme: $material-outlined;
     &:hover {
         color: var-get($fab-theme, 'hover-foreground');
         background: var-get($fab-theme, 'hover-background');
+        border-color: var-get($fab-theme, 'hover-border-color');
 
         ::slotted(igc-icon) {
             color: var-get($fab-theme, 'icon-color-hover');
@@ -209,6 +246,11 @@ $outlined-theme: $material-outlined;
     &:active {
         color: var-get($fab-theme, 'active-foreground');
         background: var-get($fab-theme, 'active-background');
+        border-color: var-get($fab-theme, 'active-border-color');
+
+        ::slotted(igc-icon) {
+            color: var-get($fab-theme, 'active-foreground');
+        }
     }
 }
 
@@ -216,6 +258,7 @@ $outlined-theme: $material-outlined;
 :host(:not(:disabled)[variant='fab']) [part='base focused'] {
     color: var-get($fab-theme, 'focus-visible-foreground');
     background: var-get($fab-theme, 'focus-visible-background');
+    border-color: var-get($fab-theme, 'focus-visible-border-color');
 
     ::slotted(igc-icon) {
         color: var-get($fab-theme, 'icon-color');
@@ -233,6 +276,11 @@ $outlined-theme: $material-outlined;
     &:active {
         color: var-get($fab-theme, 'focus-foreground');
         background: var-get($fab-theme, 'focus-background');
+        border-color: var-get($fab-theme, 'focus-border-color');
+
+        ::slotted(igc-icon) {
+            color: var-get($fab-theme, 'focus-foreground');
+        }
     }
 }
 
@@ -240,6 +288,7 @@ $outlined-theme: $material-outlined;
 :host(:disabled[variant='flat']) [part~='base'] {
     color: var-get($flat-theme, 'disabled-foreground');
     background: var-get($flat-theme, 'disabled-background');
+    border-color: var-get($flat-theme, 'disabled-border-color');
 
     ::slotted(igc-icon) {
         color: var-get($flat-theme, 'disabled-icon-color');
@@ -250,7 +299,7 @@ $outlined-theme: $material-outlined;
 :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');
+    border-color: var-get($outlined-theme, 'disabled-border-color');
 
     ::slotted(igc-icon) {
         color: var-get($outlined-theme, 'disabled-icon-color');
@@ -261,6 +310,7 @@ $outlined-theme: $material-outlined;
 :host(:disabled[variant='contained']) [part~='base'] {
     color: var-get($contained-theme, 'disabled-foreground');
     background: var-get($contained-theme, 'disabled-background');
+    border-color: var-get($contained-theme, 'disabled-border-color');
 
     ::slotted(igc-icon) {
         color: var-get($contained-theme, 'disabled-icon-color');
@@ -271,6 +321,7 @@ $outlined-theme: $material-outlined;
 :host(:disabled[variant='fab']) [part~='base'] {
     color: var-get($fab-theme, 'disabled-foreground');
     background: var-get($fab-theme, 'disabled-background');
+    border-color: var-get($fab-theme, 'disabled-border-color');
 
     ::slotted(igc-icon) {
         color: var-get($fab-theme, 'disabled-icon-color');
diff --git a/src/components/button/themes/button/shared/button.fluent.scss b/src/components/button/themes/button/shared/button.fluent.scss
index 0c7fb4df9..5a2036cfa 100644
--- a/src/components/button/themes/button/shared/button.fluent.scss
+++ b/src/components/button/themes/button/shared/button.fluent.scss
@@ -49,6 +49,12 @@ $outlined-btn-indent: rem(2px);
 
 :host(:not([disabled])[variant='flat']) [part='base focused'],
 :host(:not(:disabled)[variant='flat']) [part='base focused'] {
+    &,
+    &:hover,
+    &:active {
+        border: rem(1px) solid var-get($flat-theme, 'active-border-color');
+    }
+
     &::after {
         box-shadow: 0 0 0 rem(1px) var-get($flat-theme, 'focus-visible-border-color');
     }
@@ -65,6 +71,11 @@ $outlined-btn-indent: rem(2px);
 
 :host(:not([disabled])[variant='outlined']) [part='base focused'],
 :host(:not(:disabled)[variant='outlined']) [part='base focused'] {
+    &,
+    &:active {
+        border: rem(1px) solid var-get($outlined-theme, 'focus-border-color');
+    }
+
     &::after {
         inset-block-start: $outlined-btn-indent;
         inset-inline-start: $outlined-btn-indent;
@@ -76,8 +87,7 @@ $outlined-btn-indent: rem(2px);
 
 :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');
+    border: rem(1px) solid var-get($contained-theme, 'active-border-color');
     position: relative;
 
     &::after {
@@ -87,8 +97,7 @@ $outlined-btn-indent: rem(2px);
 
 :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');
+    border: rem(1px) solid var-get($fab-theme, 'active-border-color');
     position: relative;
 
     &::after {
diff --git a/src/components/button/themes/button/shared/button.indigo.scss b/src/components/button/themes/button/shared/button.indigo.scss
index cd2d4a779..540e7d57a 100644
--- a/src/components/button/themes/button/shared/button.indigo.scss
+++ b/src/components/button/themes/button/shared/button.indigo.scss
@@ -58,17 +58,22 @@ $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 {
-        border-color: var-get($outlined-theme, 'hover-border-color');
+    ::slotted(igc-icon) {
+        color: var-get($flat-theme, 'icon-color');
     }
 
+    &:hover,
     &:active {
-        border-color: var-get($outlined-theme, 'active-border-color');
+        ::slotted(igc-icon) {
+            color: var-get($flat-theme, 'icon-color-hover');
+        }
+    }
+}
 
+:host(:not([disabled])[variant='outlined']) [part~='base'],
+:host(:not(:disabled)[variant='outlined']) [part~='base'] {
+    &:active {
         ::slotted(igc-icon) {
             color: var-get($outlined-theme, 'icon-color-hover');
         }
@@ -77,27 +82,28 @@ $outlined-theme: $indigo-outlined;
 
 :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');
 
+    ::slotted(igc-icon) {
+        color: var-get($outlined-theme, 'icon-color');
+    }
+
     &:hover {
-        border-color: var-get($outlined-theme, 'hover-border-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, 'icon-color-hover');
+        }
     }
 }
 
 :host(:not([disabled])[variant='contained']) [part~='base'],
 :host(:not(:disabled)[variant='contained']) [part~='base'] {
-    &: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');
         }
@@ -107,30 +113,30 @@ $outlined-theme: $indigo-outlined;
 :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');
+
+    ::slotted(igc-icon) {
+        color: var-get($contained-theme, 'icon-color');
+    }
 
     &:hover {
-        border-color: var-get($contained-theme, 'hover-border-color');
+        ::slotted(igc-icon) {
+            color: var-get($contained-theme, 'icon-color-hover');
+        }
     }
 
     &:active {
-        border-color: var-get($contained-theme, 'active-border-color');
+        ::slotted(igc-icon) {
+            color: var-get($contained-theme, 'icon-color-hover');
+        }
     }
 }
 
 :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);
 
-    &: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');
         }
@@ -139,20 +145,26 @@ $outlined-theme: $indigo-outlined;
 
 :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');
 
+    ::slotted(igc-icon) {
+        color: var-get($fab-theme, 'icon-color');
+    }
+
     &:hover {
-        border-color: var-get($fab-theme, 'hover-border-color');
+        ::slotted(igc-icon) {
+            color: var-get($fab-theme, 'icon-color-hover');
+        }
     }
 
     &:active {
-        border-color: var-get($fab-theme, 'active-border-color');
+        ::slotted(igc-icon) {
+            color: var-get($fab-theme, 'icon-color-hover');
+        }
     }
 }
 
 :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 3816b17ae..6789449a3 100644
--- a/src/components/button/themes/button/shared/button.material.scss
+++ b/src/components/button/themes/button/shared/button.material.scss
@@ -26,57 +26,17 @@ $outlined-theme: $material-outlined;
     transition: all .1s ease-in-out;
 }
 
-:host(:not([disabled])[variant='flat']) [part~='base'],
-:host(:not(:disabled)[variant='flat']) [part~='base'] {
-    &:active {
-        ::slotted(igc-icon) {
-            color: var-get($flat-theme, 'active-foreground');
-        }
-    }
-}
-
 :host(:not([disabled])[variant='flat']) [part='base focused'],
 :host(:not(:disabled)[variant='flat']) [part='base focused'] {
     ::slotted(igc-icon) {
         color: var-get($flat-theme, 'icon-color-hover');
     }
-
-    &:active {
-        ::slotted(igc-icon) {
-            color: var-get($flat-theme, 'focus-foreground');
-        }
-    }
-}
-
-:host(:not([disabled])[variant='outlined']) [part~='base'],
-:host(:not(:disabled)[variant='outlined']) [part~='base'] {
-    &: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, 'active-foreground');
-        }
-    }
 }
 
 :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');
-
     ::slotted(igc-icon) {
-        color: var-get($outlined-theme, 'focus-visible-foreground');
-    }
-
-    &:active {
-        border-color: var-get($outlined-theme, 'focus-border-color');
-
-        ::slotted(igc-icon) {
-            color: var-get($outlined-theme, 'focus-foreground');
-        }
+        color: var-get($outlined-theme, 'icon-color-hover');
     }
 }
 
@@ -95,14 +55,10 @@ $outlined-theme: $material-outlined;
 
 :host(:not([disabled])[variant='contained']) [part='base focused'],
 :host(:not(:disabled)[variant='contained']) [part='base focused'] {
-    box-shadow: var-get($contained-theme, 'focus-elevation');
-
+    &,
+    &:hover,
     &:active {
-        box-shadow: var-get($fab-theme, 'active-elevation');
-    }
-
-    &:hover {
-        box-shadow: var-get($fab-theme, 'focus-elevation');
+        box-shadow: var-get($contained-theme, 'focus-elevation');
     }
 }
 
@@ -115,11 +71,15 @@ $outlined-theme: $material-outlined;
     }
 
     &:active {
-        box-shadow: var-get($contained-theme, 'active-elevation');
+        box-shadow: var-get($fab-theme, 'active-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');
+    &,
+    &:hover,
+    &:active {
+        box-shadow: var-get($fab-theme, 'focus-elevation');
+    }
 }
diff --git a/src/components/common/controllers/focus-ring.ts b/src/components/common/controllers/focus-ring.ts
index 19e65c456..b565d5430 100644
--- a/src/components/common/controllers/focus-ring.ts
+++ b/src/components/common/controllers/focus-ring.ts
@@ -19,11 +19,7 @@ import { createAbortHandle } from '../abort-handler.js';
  * strategies like ARIA attributes, managing `tabindex`, or a bespoke implementation if needed.
  */
 class KeyboardFocusRingController implements ReactiveController {
-  private static readonly _events = [
-    'keyup',
-    'focusout',
-    'pointerdown',
-  ] as const;
+  private static readonly _events = ['keyup', 'focusout', 'pointerup'] as const;
 
   private readonly _host: ReactiveControllerHost & HTMLElement;
   private readonly _abortHandle = createAbortHandle();

From 5716477878e9d88141883b39628987a28503489d Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Tue, 25 Nov 2025 11:55:49 +0200
Subject: [PATCH 2/5] test: Fixed tests for carousel indicator container and
 focus ring controller

---
 .../carousel-indicator-container.spec.ts        |  2 ++
 .../common/controllers/focus-ring.spec.ts       |  6 ++++++
 src/components/common/utils.spec.ts             | 17 +++++++++++++++++
 3 files changed, 25 insertions(+)

diff --git a/src/components/carousel/carousel-indicator-container.spec.ts b/src/components/carousel/carousel-indicator-container.spec.ts
index f193c7ab4..4294664c0 100644
--- a/src/components/carousel/carousel-indicator-container.spec.ts
+++ b/src/components/carousel/carousel-indicator-container.spec.ts
@@ -7,6 +7,7 @@ import {
   simulateClick,
   simulateKeyboard,
   simulatePointerDown,
+  simulatePointerUp,
 } from '../common/utils.spec.js';
 import IgcCarouselIndicatorComponent from './carousel-indicator.js';
 import IgcCarouselIndicatorContainerComponent from './carousel-indicator-container.js';
@@ -78,6 +79,7 @@ describe('Carousel Indicator Container', () => {
     );
 
     simulatePointerDown(first(buttons));
+    simulatePointerUp(first(buttons));
     simulateClick(first(buttons));
     await elementUpdated(container);
 
diff --git a/src/components/common/controllers/focus-ring.spec.ts b/src/components/common/controllers/focus-ring.spec.ts
index dab30bdce..cb3a9fb05 100644
--- a/src/components/common/controllers/focus-ring.spec.ts
+++ b/src/components/common/controllers/focus-ring.spec.ts
@@ -12,6 +12,7 @@ import {
   simulateClick,
   simulateKeyboard,
   simulatePointerDown,
+  simulatePointerUp,
 } from '../utils.spec.js';
 import { addKeyboardFocusRing } from './focus-ring.js';
 import { tabKey } from './key-bindings.js';
@@ -95,6 +96,11 @@ describe('Focus ring controller', () => {
     simulatePointerDown(instance.button);
     await elementUpdated(instance);
 
+    expect(hasKeyboardFocusStyles(instance.button)).to.be.true;
+
+    simulatePointerUp(instance.button);
+    await elementUpdated(instance);
+
     expect(hasKeyboardFocusStyles(instance.button)).to.be.false;
   });
 });
diff --git a/src/components/common/utils.spec.ts b/src/components/common/utils.spec.ts
index 3aec379d8..168267606 100644
--- a/src/components/common/utils.spec.ts
+++ b/src/components/common/utils.spec.ts
@@ -239,6 +239,23 @@ export function simulatePointerDown(
   }
 }
 
+export function simulatePointerUp(
+  node: Element,
+  options?: PointerEventInit,
+  times = 1
+): void {
+  for (let i = 0; i < times; i++) {
+    node.dispatchEvent(
+      new PointerEvent('pointerup', {
+        bubbles: true,
+        composed: true,
+        pointerId: 1,
+        ...options,
+      })
+    );
+  }
+}
+
 export function simulateLostPointerCapture(
   node: Element,
   options?: PointerEventInit

From ea427548d4551f703fee53e7bf6c263fc05a6063 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Wed, 26 Nov 2025 13:19:35 +0200
Subject: [PATCH 3/5] fix(buttons): revert bootstrap outlined button icon
 styles

---
 .../button/themes/button/shared/button.bootstrap.scss         | 4 ++++
 src/components/button/themes/button/shared/button.common.scss | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/button/themes/button/shared/button.bootstrap.scss b/src/components/button/themes/button/shared/button.bootstrap.scss
index 111937d37..c9f68d578 100644
--- a/src/components/button/themes/button/shared/button.bootstrap.scss
+++ b/src/components/button/themes/button/shared/button.bootstrap.scss
@@ -29,6 +29,10 @@ $outlined-theme: $bootstrap-outlined;
 
 :host(:not([disabled])[variant='outlined']) [part='base focused'],
 :host(:not(:disabled)[variant='outlined']) [part='base focused'] {
+    ::slotted(igc-icon) {
+        color: var-get($outlined-theme, 'icon-color-hover');
+    }
+
     box-shadow: 0 0 0 rem(4px) var-get($outlined-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 bea692d25..9f6351644 100644
--- a/src/components/button/themes/button/shared/button.common.scss
+++ b/src/components/button/themes/button/shared/button.common.scss
@@ -96,7 +96,7 @@ $outlined-theme: $material-outlined;
     &:active {
         color: var-get($flat-theme, 'focus-foreground');
         background: var-get($flat-theme, 'focus-background');
-        border-color: var-get($flat-theme, 'focus-visible-border-color');
+        border-color: var-get($flat-theme, 'focus-border-color');
 
         ::slotted(igc-icon) {
             color: var-get($flat-theme, 'focus-foreground');

From 32bf815814165067238d2c9b67316a16cc8adfd5 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Wed, 26 Nov 2025 13:28:46 +0200
Subject: [PATCH 4/5] chore(button): switch property places

---
 .../button/themes/button/shared/button.bootstrap.scss         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/button/themes/button/shared/button.bootstrap.scss b/src/components/button/themes/button/shared/button.bootstrap.scss
index c9f68d578..60cf9e1ea 100644
--- a/src/components/button/themes/button/shared/button.bootstrap.scss
+++ b/src/components/button/themes/button/shared/button.bootstrap.scss
@@ -29,11 +29,11 @@ $outlined-theme: $bootstrap-outlined;
 
 :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');
     }
-
-    box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'shadow-color');
 }
 
 :host(:not([disabled])[variant='contained']) [part='base focused'],

From 9afd1fb2b7b10fdb9eba0aad2e419ed7048a7215 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Thu, 27 Nov 2025 13:24:09 +0200
Subject: [PATCH 5/5] fix(buttons): address latest fluent comments and remove
 unnecessary icon styles

---
 .../themes/button/shared/button.common.scss   | 32 -------------------
 .../themes/button/shared/button.fluent.scss   |  7 ++--
 2 files changed, 5 insertions(+), 34 deletions(-)

diff --git a/src/components/button/themes/button/shared/button.common.scss b/src/components/button/themes/button/shared/button.common.scss
index 9f6351644..abfa89f27 100644
--- a/src/components/button/themes/button/shared/button.common.scss
+++ b/src/components/button/themes/button/shared/button.common.scss
@@ -79,18 +79,10 @@ $outlined-theme: $material-outlined;
     background: var-get($flat-theme, 'focus-visible-background');
     border-color: var-get($flat-theme, 'focus-visible-border-color');
 
-    ::slotted(igc-icon) {
-        color: var-get($flat-theme, 'icon-color');
-    }
-
     &:hover {
         color: var-get($flat-theme, 'focus-hover-foreground');
         background: var-get($flat-theme, 'focus-hover-background');
         border-color: var-get($flat-theme, 'focus-visible-border-color');
-
-        ::slotted(igc-icon) {
-            color: var-get($flat-theme, 'icon-color-hover');
-        }
     }
 
     &:active {
@@ -140,17 +132,9 @@ $outlined-theme: $material-outlined;
     background: var-get($outlined-theme, 'focus-visible-background');
     border-color: var-get($outlined-theme, 'focus-visible-border-color');
 
-    ::slotted(igc-icon) {
-        color: var-get($outlined-theme, 'icon-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 {
@@ -200,17 +184,9 @@ $outlined-theme: $material-outlined;
     background: var-get($contained-theme, 'focus-visible-background');
     border-color: var-get($contained-theme, 'focus-visible-border-color');
 
-    ::slotted(igc-icon) {
-        color: var-get($contained-theme, 'icon-color');
-    }
-
     &: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-hover');
-        }
     }
 
     &:active {
@@ -260,17 +236,9 @@ $outlined-theme: $material-outlined;
     background: var-get($fab-theme, 'focus-visible-background');
     border-color: var-get($fab-theme, 'focus-visible-border-color');
 
-    ::slotted(igc-icon) {
-        color: var-get($fab-theme, 'icon-color');
-    }
-
     &: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-hover');
-        }
     }
 
     &:active {
diff --git a/src/components/button/themes/button/shared/button.fluent.scss b/src/components/button/themes/button/shared/button.fluent.scss
index 5a2036cfa..7cf8370b6 100644
--- a/src/components/button/themes/button/shared/button.fluent.scss
+++ b/src/components/button/themes/button/shared/button.fluent.scss
@@ -50,11 +50,14 @@ $outlined-btn-indent: rem(2px);
 :host(:not([disabled])[variant='flat']) [part='base focused'],
 :host(:not(:disabled)[variant='flat']) [part='base focused'] {
     &,
-    &:hover,
-    &:active {
+    &:hover {
         border: rem(1px) solid var-get($flat-theme, 'active-border-color');
     }
 
+    &:active {
+        border: rem(1px) solid var-get($flat-theme, 'focus-border-color');
+    }
+
     &::after {
         box-shadow: 0 0 0 rem(1px) var-get($flat-theme, 'focus-visible-border-color');
     }