From f84d8ee4fe281f07b1f7ce851405f263e60ab6bc Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Wed, 31 Jan 2024 15:26:02 +0200
Subject: [PATCH 1/9] feat(button/icon-button): update buttons schemas

---
 .../button/shared/button.bootstrap.scss       |  4 +++
 .../themes/button/shared/button.common.scss   | 20 +++++++++++++
 .../shared/icon-button.bootstrap.scss         | 29 ++++++++++++++++++-
 .../shared/icon-button.common.scss            | 15 ++++++++++
 4 files changed, 67 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 67270c9e9..ea4890710 100644
--- a/src/components/button/themes/button/shared/button.bootstrap.scss
+++ b/src/components/button/themes/button/shared/button.bootstrap.scss
@@ -15,6 +15,10 @@ $outlined-theme: $bootstrap-outlined;
 
     [part='base'] {
         border: rem(1px) solid var-get($outlined-theme, 'border-color');
+
+        &:focus {
+            border: rem(1px) solid var-get($outlined-theme, 'focus-border-color');
+        }
     }
 }
 
diff --git a/src/components/button/themes/button/shared/button.common.scss b/src/components/button/themes/button/shared/button.common.scss
index d36b6dd3b..2b65ead11 100644
--- a/src/components/button/themes/button/shared/button.common.scss
+++ b/src/components/button/themes/button/shared/button.common.scss
@@ -45,6 +45,11 @@ $outlined-theme: $material-outlined;
     &:focus {
         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');
+        }
     }
 
     &:active {
@@ -71,6 +76,11 @@ $outlined-theme: $material-outlined;
     &:focus {
         color: var-get($outlined-theme, 'focus-foreground');
         background: var-get($outlined-theme, 'focus-background');
+
+        &:hover {
+            color: var-get($outlined-theme, 'focus-hover-foreground');
+            background: var-get($outlined-theme, 'focus-hover-background');
+        }
     }
 
     &:active {
@@ -97,6 +107,11 @@ $outlined-theme: $material-outlined;
     &:focus {
         color: var-get($contained-theme, 'focus-foreground');
         background: var-get($contained-theme, 'focus-background');
+
+        &:hover {
+            color: var-get($contained-theme, 'focus-hover-foreground');
+            background: var-get($contained-theme, 'focus-hover-background');
+        }
     }
 
     &:active {
@@ -118,6 +133,11 @@ $outlined-theme: $material-outlined;
     &:focus {
         color: var-get($fab-theme, 'focus-foreground');
         background: var-get($fab-theme, 'focus-background');
+
+        &:hover {
+            color: var-get($fab-theme, 'focus-hover-foreground');
+            background: var-get($fab-theme, 'focus-hover-background');
+        }
     }
 
     &:active {
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 8b9359ea9..0bdbfa693 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,8 +16,29 @@ $outlined-theme: $bootstrap-outlined;
     --component-size: var(--ig-size, #{var-get($flat-theme, 'default-size')});
 
     [part='base'] {
+        &:focus,
+        &:focus-within,
         &:active {
-            box-shadow: none;
+            box-shadow: 0 0 0 rem(4px) var-get($flat-theme, 'focus-border-color');
+        }
+
+        &:hover {    
+            igc-icon {
+                color: var-get($flat-theme, 'hover-foreground');
+            }
+        }
+
+        &:focus,
+        &:focus-within {
+            igc-icon {
+                color: var-get($flat-theme, 'focus-foreground');
+            }
+
+            &:hover {
+                igc-icon {
+                    color: var-get($flat-theme, 'focus-hover-foreground');
+                }
+            }
         }
     }
 }
@@ -58,6 +79,12 @@ $outlined-theme: $bootstrap-outlined;
             igc-icon {
                 color: var-get($outlined-theme, 'focus-foreground');
             }
+
+            &:hover {
+                igc-icon {
+                    color: var-get($outlined-theme, 'focus-hover-foreground');
+                }
+            }
         }
 
         &:active {
diff --git a/src/components/button/themes/icon-button/shared/icon-button.common.scss b/src/components/button/themes/icon-button/shared/icon-button.common.scss
index 2941ae13d..e204ea8e1 100644
--- a/src/components/button/themes/icon-button/shared/icon-button.common.scss
+++ b/src/components/button/themes/icon-button/shared/icon-button.common.scss
@@ -29,6 +29,11 @@ $outlined-theme: $material-outlined;
         &:focus-within {
             background: var-get($flat-theme, 'focus-background');
             color: var-get($flat-theme, 'focus-foreground');
+
+            &:hover {
+                background: var-get($flat-theme, 'focus-hover-background');
+                color: var-get($flat-theme, 'focus-hover-foreground');
+            }
         }
 
         &:active {
@@ -64,6 +69,11 @@ $outlined-theme: $material-outlined;
         &:focus-within {
             background: var-get($contained-theme, 'focus-background');
             color: var-get($contained-theme, 'focus-foreground');
+
+            &:hover {
+                background: var-get($contained-theme, 'focus-hover-background');
+                color: var-get($contained-theme, 'focus-hover-foreground');
+            }
         }
 
         &:active {
@@ -100,6 +110,11 @@ $outlined-theme: $material-outlined;
         &:focus-within {
             background: var-get($outlined-theme, 'focus-background');
             color: var-get($outlined-theme, 'focus-foreground');
+
+            &:hover {
+                background: var-get($outlined-theme, 'focus-hover-background');
+                color: var-get($outlined-theme, 'focus-hover-foreground');
+            }
         }
 
         &:active {

From 8df37e3b2f3c2bdcd23af957cad08e7f29039263 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Tue, 6 Feb 2024 15:42:18 +0200
Subject: [PATCH 2/9] feat(button): fix fluent flat button and focus visible
 hover states

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

diff --git a/src/components/button/themes/button/shared/button.common.scss b/src/components/button/themes/button/shared/button.common.scss
index 2b65ead11..ef90e1345 100644
--- a/src/components/button/themes/button/shared/button.common.scss
+++ b/src/components/button/themes/button/shared/button.common.scss
@@ -60,6 +60,11 @@ $outlined-theme: $material-outlined;
     &:focus-visible {
         color: var-get($flat-theme, 'focus-visible-foreground');
         background: var-get($flat-theme, 'focus-visible-background');
+
+        &:hover {
+            color: var-get($flat-theme, 'focus-hover-foreground');
+            background: var-get($flat-theme, 'focus-hover-background');
+        }
     }
 }
 
diff --git a/src/components/button/themes/button/shared/button.fluent.scss b/src/components/button/themes/button/shared/button.fluent.scss
index f5ce4b8dd..ec0df2c2e 100644
--- a/src/components/button/themes/button/shared/button.fluent.scss
+++ b/src/components/button/themes/button/shared/button.fluent.scss
@@ -63,7 +63,18 @@ $outline-btn-indent: rem(2px);
     }
 
     &:focus-visible {
-        border-color: var-get($flat-theme, 'focus-visible-border-color');
+        border-color: transparent;
+
+        &::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($outlined-theme, 'focus-visible-border-color');
+        }
     }
 }
 
@@ -84,7 +95,7 @@ $outline-btn-indent: rem(2px);
     }
 
     &:focus-visible {
-        border-color: var-get($outlined-theme, 'focus-visible-border-color');
+        border-color: var-get($outlined-theme, 'focus-border-color');
 
         &::after {
             content: '';
@@ -94,17 +105,13 @@ $outline-btn-indent: rem(2px);
             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($outlined-theme, 'focus-visible-foreground');
+            box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'focus-visible-border-color');
         }
 
         &:hover {
             color: var-get($outlined-theme, 'hover-foreground');
             background: var-get($outlined-theme, 'hover-background');
             border-color: var-get($outlined-theme, 'hover-border-color');
-
-            &::after {
-                box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'hover-foreground');
-            }
         }
 
         &:active {

From 5cba7848a09749399ca76f41d88920d60dec170f Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Tue, 6 Feb 2024 19:29:54 +0200
Subject: [PATCH 3/9] fix(button): fix fluent button paddings

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

diff --git a/src/components/button/themes/button/shared/button.fluent.scss b/src/components/button/themes/button/shared/button.fluent.scss
index ec0df2c2e..6f43cc522 100644
--- a/src/components/button/themes/button/shared/button.fluent.scss
+++ b/src/components/button/themes/button/shared/button.fluent.scss
@@ -42,7 +42,7 @@ $outline-btn-indent: rem(2px);
 }
 
 [part='base'] {
-    padding: 0 pad(8px, 16px, 16px);
+    padding: 0 pad(8px, 12px, 16px);
     transition: all .1s ease-in-out;
 }
 
@@ -73,7 +73,7 @@ $outline-btn-indent: rem(2px);
             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($outlined-theme, 'focus-visible-border-color');
+            box-shadow: 0 0 0 rem(1px) var-get($flat-theme, 'focus-visible-border-color');
         }
     }
 }

From c8695997e1ffc66fcbb91ce850eb49d57efc430d Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Thu, 8 Feb 2024 09:43:17 +0200
Subject: [PATCH 4/9] feat(button/icon-button): fix borders in fluent buttons

---
 .../themes/button/shared/button.fluent.scss   | 130 +++---------------
 .../shared/icon-button.common.scss            |   3 +-
 .../shared/icon-button.fluent.scss            |  19 +--
 3 files changed, 26 insertions(+), 126 deletions(-)

diff --git a/src/components/button/themes/button/shared/button.fluent.scss b/src/components/button/themes/button/shared/button.fluent.scss
index 6f43cc522..b18f65848 100644
--- a/src/components/button/themes/button/shared/button.fluent.scss
+++ b/src/components/button/themes/button/shared/button.fluent.scss
@@ -5,7 +5,8 @@ $flat-theme: $fluent-flat;
 $contained-theme: $fluent-contained;
 $fab-theme: $fluent-fab;
 $outlined-theme: $fluent-outlined;
-$outline-btn-indent: rem(2px);
+$btn-indent: rem(3px);
+$outlined-btn-indent: rem(2px);
 
 :host([variant='flat']) {
     --component-size: var(--ig-size, #{var-get($flat-theme, 'default-size')});
@@ -13,22 +14,10 @@ $outline-btn-indent: rem(2px);
 
 :host([variant='outlined']) {
     --component-size: var(--ig-size, #{var-get($outlined-theme, 'default-size')});
-
-    [part='base'] {
-        &::after {
-            border-radius: calc(#{var-get($outlined-theme, 'border-radius')} - #{$outline-btn-indent * 2});
-        }
-    }
 }
 
 :host([variant='contained']) {
     --component-size: var(--ig-size, #{var-get($contained-theme, 'default-size')});
-
-    [part='base'] {
-        &::after {
-            border-radius: calc(#{var-get($contained-theme, 'border-radius')} - #{$outline-btn-indent * 2});
-        }
-    }
 }
 
 :host([variant='fab']) {
@@ -36,7 +25,7 @@ $outline-btn-indent: rem(2px);
 
     [part='base'] {
         &::after {
-            border-radius: calc(#{var-get($fab-theme, 'border-radius')} - #{$outline-btn-indent * 2});
+            border-radius: calc(#{var-get($fab-theme, 'border-radius')} - #{$btn-indent});
         }
     }
 }
@@ -44,35 +33,22 @@ $outline-btn-indent: rem(2px);
 [part='base'] {
     padding: 0 pad(8px, 12px, 16px);
     transition: all .1s ease-in-out;
+
+    &:focus-visible::after {
+        content: '';
+        position: absolute;
+        inset-block-start: $btn-indent;
+        inset-inline-start: $btn-indent;
+        pointer-events: none;
+        width: calc(100% - (#{$btn-indent} * 2));
+        height: calc(100% - (#{$btn-indent} * 2));
+    }
 }
 
 :host(:not([disabled])[variant='flat']) [part='base'],
 :host(:not(:disabled)[variant='flat']) [part='base'] {
-    border: 1px solid var-get($flat-theme, 'border-color');
-
-    &:hover {
-        border-color: var-get($flat-theme, 'hover-border-color');
-    }
-
-    &:focus {
-        border-color: var-get($flat-theme, 'focus-border-color');
-    }
-
-    &:active {
-        border-color: var-get($flat-theme, 'active-border-color');
-    }
-
     &:focus-visible {
-        border-color: transparent;
-
         &::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($flat-theme, 'focus-visible-border-color');
         }
     }
@@ -82,36 +58,22 @@ $outline-btn-indent: rem(2px);
 :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');
-    }
-
-    &: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-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));
+            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');
         }
 
         &:hover {
             color: var-get($outlined-theme, 'hover-foreground');
             background: var-get($outlined-theme, 'hover-background');
-            border-color: var-get($outlined-theme, 'hover-border-color');
         }
 
         &:active {
@@ -128,104 +90,46 @@ $outline-btn-indent: rem(2px);
 
 :host(:not([disabled])[variant='contained']) [part='base'],
 :host(:not(:disabled)[variant='contained']) [part='base'] {
-    border: rem(1px) solid var-get($contained-theme, 'border-color');
-
-    &:hover {
-        border-color: var-get($contained-theme, 'hover-border-color');
-    }
-
-    &:focus {
-        border-color: var-get($contained-theme, 'focus-border-color');
-    }
-
-    &:active {
-        border-color: var-get($contained-theme, 'active-border-color');
-    }
-
     &:focus-visible {
         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');
         position: relative;
 
         &::after {
-            content: '';
             box-shadow: 0 0 0 1px var-get($contained-theme, 'focus-visible-foreground');
-            position: absolute;
-            inset-block-start: 3px;
-            inset-inline-start: 3px;
-            pointer-events: none;
-            width: calc(100% - 6px);
-            height: calc(100% - 6px);
         }
 
         &:hover {
             color: var-get($contained-theme, 'hover-foreground');
             background: var-get($contained-theme, 'hover-background');
-            border-color: var-get($contained-theme, 'hover-border-color');
         }
 
         &:active {
             color: var-get($contained-theme, 'active-foreground');
             background: var-get($contained-theme, 'active-background');
-            border-color: var-get($contained-theme, 'active-border-color');
         }
     }
 }
 
 :host(:not([disabled])[variant='fab']) [part='base'],
 :host(:not(:disabled)[variant='fab']) [part='base'] {
-    border: rem(1px) solid var-get($fab-theme, 'border-color');
-
-    &:hover {
-        border-color: var-get($fab-theme, 'hover-border-color');
-    }
-
-    &:focus {
-        border-color: var-get($fab-theme, 'focus-border-color');
-    }
-
-    &:active {
-        border-color: var-get($fab-theme, 'active-border-color');
-    }
-
     &:focus-visible {
         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');
         position: relative;
 
         &::after {
-            content: '';
             box-shadow: 0 0 0 1px var-get($fab-theme, 'focus-visible-foreground');
-            position: absolute;
-            inset-block-start: 3px;
-            inset-inline-start: 3px;
-            pointer-events: none;
-            width: calc(100% - 6px);
-            height: calc(100% - 6px);
         }
 
         &:hover {
             color: var-get($fab-theme, 'hover-foreground');
             background: var-get($fab-theme, 'hover-background');
-            border-color: var-get($fab-theme, 'hover-border-color');
         }
 
         &:active {
             color: var-get($fab-theme, 'active-foreground');
             background: var-get($fab-theme, 'active-background');
-            border-color: var-get($fab-theme, 'active-border-color');
         }
     }
 }
-
-:host([disabled][variant='outlined']) [part='base'],
-:host(:disabled[variant='outlined']) [part='base'] {
-    border-color: var-get($outlined-theme, 'disabled-border-color');
-}
-
-:host([disabled][variant='contained']) [part='base'],
-:host(:disabled[variant='contained']) [part='base'] {
-    border: rem(1px) solid var-get($contained-theme, 'disabled-border-color');
-}
diff --git a/src/components/button/themes/icon-button/shared/icon-button.common.scss b/src/components/button/themes/icon-button/shared/icon-button.common.scss
index e204ea8e1..c87517758 100644
--- a/src/components/button/themes/icon-button/shared/icon-button.common.scss
+++ b/src/components/button/themes/icon-button/shared/icon-button.common.scss
@@ -99,7 +99,7 @@ $outlined-theme: $material-outlined;
     [part='base'] {
         color: var-get($outlined-theme, 'foreground');
         background: var-get($outlined-theme, 'background');
-        box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'border-color');
+        border: rem(1px) solid var-get($outlined-theme, 'border-color');
 
         &:hover {
             background: var-get($outlined-theme, 'hover-background');
@@ -161,6 +161,7 @@ $outlined-theme: $material-outlined;
     [part='base'] {
         background: var-get($outlined-theme, 'disabled-background');
         color: var-get($outlined-theme, 'disabled-foreground');
+        border: rem(1px) solid var-get($outlined-theme, 'disabled-border-color');
     }
 
     igc-icon {
diff --git a/src/components/button/themes/icon-button/shared/icon-button.fluent.scss b/src/components/button/themes/icon-button/shared/icon-button.fluent.scss
index cc6e31e5a..9d356b301 100644
--- a/src/components/button/themes/icon-button/shared/icon-button.fluent.scss
+++ b/src/components/button/themes/icon-button/shared/icon-button.fluent.scss
@@ -4,22 +4,21 @@
 $flat-theme: $fluent-flat;
 $contained-theme: $fluent-contained;
 $outlined-theme: $fluent-outlined;
-$outline-btn-indent: rem(2px);
+$btn-indent: rem(3px);
 
 [part='base'] {
     transition: color .15s ease-out, background .15s ease-out;
     box-shadow: none;
-    padding: pad(4px, 6px, 7px);
+    padding: pad(3px, 7px, 10px);
 
-    &::after {
+    &:focus-visible::after {
         position: absolute;
         content: '';
         pointer-events: none;
-        top: 2px;
-        left: 2px;
-        width: calc(100% - (#{$outline-btn-indent} * 2));
-        height: calc(100% - (#{$outline-btn-indent} * 2));
-        border-radius: calc(#{var-get($flat-theme, 'border-radius')} - #{$outline-btn-indent * 2});
+        inset-block-start: $btn-indent;
+        inset-inline-start: $btn-indent;
+        width: calc(100% - (#{$btn-indent} * 2));
+        height: calc(100% - (#{$btn-indent} * 2));
     }
 }
 
@@ -53,10 +52,6 @@ $outline-btn-indent: rem(2px);
     --component-size: var(--ig-size, #{var-get($outlined-theme, 'default-size')});
 
     [part='base'] {
-        &:focus {
-            border-color: var-get($outlined-theme, 'focus-border-color');
-        }
-
         &:hover,
         &:focus:hover,
         &:focus:active {

From 07ef999565186994602dfbeee335abdf8794049c Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Fri, 9 Feb 2024 11:09:22 +0200
Subject: [PATCH 5/9] fix(button): remove double border in disabled material
 button

---
 src/components/button/themes/button/shared/button.material.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/button/themes/button/shared/button.material.scss b/src/components/button/themes/button/shared/button.material.scss
index d8da27f89..8684feff7 100644
--- a/src/components/button/themes/button/shared/button.material.scss
+++ b/src/components/button/themes/button/shared/button.material.scss
@@ -147,7 +147,6 @@ $outlined-theme: $material-outlined;
 :host([disabled][variant='outlined']) [part='base'],
 :host(:disabled[variant='outlined']) [part='base'] {
     box-shadow: inset 0 0 0 rem(1px) var-get($outlined-theme, 'disabled-border-color');
-    border: rem(1px) solid var-get($outlined-theme, 'disabled-border-color');
 }
 
 :host([disabled][variant='contained']) [part='base'],

From fe4343215de548332f23c2087cf0116865f82597 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Mon, 12 Feb 2024 16:18:06 +0200
Subject: [PATCH 6/9] fix(button): update fab button size and removed material
 disabled box-shadow

---
 .../themes/button/shared/button.common.scss   |  3 ++-
 .../themes/button/shared/button.material.scss | 20 -------------------
 2 files changed, 2 insertions(+), 21 deletions(-)

diff --git a/src/components/button/themes/button/shared/button.common.scss b/src/components/button/themes/button/shared/button.common.scss
index ef90e1345..719fce0b3 100644
--- a/src/components/button/themes/button/shared/button.common.scss
+++ b/src/components/button/themes/button/shared/button.common.scss
@@ -24,7 +24,8 @@ $outlined-theme: $material-outlined;
 
 :host([variant='fab']) [part='base'] {
     border-radius: var-get($fab-theme, 'border-radius');
-    height: var-get($fab-theme, 'size');
+    min-height: var-get($fab-theme, 'size');
+    min-width: var-get($fab-theme, 'size');
 }
 /* stylelint-enable */
 
diff --git a/src/components/button/themes/button/shared/button.material.scss b/src/components/button/themes/button/shared/button.material.scss
index 8684feff7..804f37b80 100644
--- a/src/components/button/themes/button/shared/button.material.scss
+++ b/src/components/button/themes/button/shared/button.material.scss
@@ -138,23 +138,3 @@ $outlined-theme: $material-outlined;
         box-shadow: var(--ig-elevation-12);
     }
 }
-
-:host([disabled][variant='flat']) [part='base'],
-:host(:disabled[variant='flat']) [part='base'] {
-    box-shadow: inset 0 0 0 rem(1px) var-get($flat-theme, 'disabled-border-color');
-}
-
-:host([disabled][variant='outlined']) [part='base'],
-:host(:disabled[variant='outlined']) [part='base'] {
-    box-shadow: inset 0 0 0 rem(1px) var-get($outlined-theme, 'disabled-border-color');
-}
-
-:host([disabled][variant='contained']) [part='base'],
-:host(:disabled[variant='contained']) [part='base'] {
-    box-shadow: inset 0 0 0 rem(1px) var-get($contained-theme, 'disabled-border-color');
-}
-
-:host([disabled][variant='fab']) [part='base'],
-:host(:disabled[variant='fab']) [part='base'] {
-    box-shadow: inset 0 0 0 rem(1px) var-get($fab-theme, 'disabled-border-color');
-}

From 85615bdb835f035a397336767cd9548597f87f4b Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Tue, 13 Feb 2024 14:00:52 +0200
Subject: [PATCH 7/9] fix(button): fix fab button padding

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

diff --git a/src/components/button/themes/button/shared/button.common.scss b/src/components/button/themes/button/shared/button.common.scss
index 719fce0b3..1e75c12db 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;
     border-radius: var-get($fab-theme, 'border-radius');
     min-height: var-get($fab-theme, 'size');
     min-width: var-get($fab-theme, 'size');
+    padding: 0 pad(6px, 10px, 14px);
 }
 /* stylelint-enable */
 

From b3345f2f3cb97e44180b41091fe6ab56c89b5fe8 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Wed, 14 Feb 2024 11:44:03 +0200
Subject: [PATCH 8/9] fix(button): fix focus and focus visible styles

---
 .../button/shared/button.bootstrap.scss       | 27 ------------
 .../themes/button/shared/button.common.scss   | 43 ++++++++++++-------
 .../themes/button/shared/button.fluent.scss   | 15 -------
 .../themes/button/shared/button.indigo.scss   |  8 ----
 .../themes/button/shared/button.material.scss | 27 ------------
 .../shared/icon-button.indigo.scss            |  6 ---
 6 files changed, 28 insertions(+), 98 deletions(-)

diff --git a/src/components/button/themes/button/shared/button.bootstrap.scss b/src/components/button/themes/button/shared/button.bootstrap.scss
index ea4890710..874d0ac5f 100644
--- a/src/components/button/themes/button/shared/button.bootstrap.scss
+++ b/src/components/button/themes/button/shared/button.bootstrap.scss
@@ -40,16 +40,6 @@ $outlined-theme: $bootstrap-outlined;
 
 :host(:not([disabled])[variant='outlined']) [part='base'],
 :host(:not(:disabled)[variant='outlined']) [part='base'] {
-    &:hover {
-        color: var-get($outlined-theme, 'hover-foreground');
-        background: var-get($outlined-theme, 'hover-background');
-    }
-
-    &:active {
-        color: var-get($outlined-theme, 'active-foreground');
-        background: var-get($outlined-theme, 'active-background');
-    }
-
     &:focus,
     &:active {
         box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'shadow-color');
@@ -62,11 +52,6 @@ $outlined-theme: $bootstrap-outlined;
     &:active {
         box-shadow: 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color');
     }
-
-    &:focus-visible {
-        color: var-get($contained-theme, 'focus-visible-foreground');
-        background: var-get($contained-theme, 'focus-visible-background');
-    }
 }
 
 :host(:not([disabled])[variant='fab']) [part='base'],
@@ -75,16 +60,4 @@ $outlined-theme: $bootstrap-outlined;
     &:active {
         box-shadow: 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color');
     }
-
-    &:focus-visible {
-        color: var-get($fab-theme, 'focus-visible-foreground');
-        background: var-get($fab-theme, 'focus-visible-background');
-    }
-}
-
-:host([disabled][variant='outlined']) [part='base'],
-:host(:disabled[variant='outlined']) [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');
 }
diff --git a/src/components/button/themes/button/shared/button.common.scss b/src/components/button/themes/button/shared/button.common.scss
index 1e75c12db..2d0a10792 100644
--- a/src/components/button/themes/button/shared/button.common.scss
+++ b/src/components/button/themes/button/shared/button.common.scss
@@ -47,27 +47,24 @@ $outlined-theme: $material-outlined;
     &:focus {
         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');
-        }
-    }
-
-    &:active {
-        color: var-get($flat-theme, 'active-foreground');
-        background: var-get($flat-theme, 'active-background');
     }
 
     &:focus-visible {
         color: var-get($flat-theme, 'focus-visible-foreground');
         background: var-get($flat-theme, 'focus-visible-background');
+    }
 
+    &:focus, &:focus-visible {
         &:hover {
             color: var-get($flat-theme, 'focus-hover-foreground');
             background: var-get($flat-theme, 'focus-hover-background');
         }
     }
+
+    &:active {
+        color: var-get($flat-theme, 'active-foreground');
+        background: var-get($flat-theme, 'active-background');
+    }
 }
 
 :host(:not([disabled])[variant='outlined']) [part='base'],
@@ -83,7 +80,14 @@ $outlined-theme: $material-outlined;
     &:focus {
         color: var-get($outlined-theme, 'focus-foreground');
         background: var-get($outlined-theme, 'focus-background');
+    }
 
+    &:focus-visible {
+        color: var-get($outlined-theme, 'focus-visible-foreground');
+        background: var-get($outlined-theme, 'focus-visible-background');
+    }
+
+    &:focus, &:focus-visible {
         &:hover {
             color: var-get($outlined-theme, 'focus-hover-foreground');
             background: var-get($outlined-theme, 'focus-hover-background');
@@ -94,11 +98,6 @@ $outlined-theme: $material-outlined;
         color: var-get($outlined-theme, 'active-foreground');
         background: var-get($outlined-theme, 'active-background');
     }
-
-    &:focus-visible {
-        color: var-get($outlined-theme, 'focus-visible-foreground');
-        background: var-get($outlined-theme, 'focus-visible-background');
-    }
 }
 
 :host(:not([disabled])[variant='contained']) [part='base'],
@@ -114,7 +113,14 @@ $outlined-theme: $material-outlined;
     &:focus {
         color: var-get($contained-theme, 'focus-foreground');
         background: var-get($contained-theme, 'focus-background');
+    }
+
+    &:focus-visible {
+        color: var-get($contained-theme, 'focus-visible-foreground');
+        background: var-get($contained-theme, 'focus-visible-background');
+    }
 
+    &:focus, &:focus-visible {
         &:hover {
             color: var-get($contained-theme, 'focus-hover-foreground');
             background: var-get($contained-theme, 'focus-hover-background');
@@ -140,7 +146,14 @@ $outlined-theme: $material-outlined;
     &:focus {
         color: var-get($fab-theme, 'focus-foreground');
         background: var-get($fab-theme, 'focus-background');
+    }
+
+    &:focus-visible {
+        color: var-get($fab-theme, 'focus-visible-foreground');
+        background: var-get($fab-theme, 'focus-visible-background');
+    }
 
+    &:focus, &:focus-visible {
         &:hover {
             color: var-get($fab-theme, 'focus-hover-foreground');
             background: var-get($fab-theme, 'focus-hover-background');
diff --git a/src/components/button/themes/button/shared/button.fluent.scss b/src/components/button/themes/button/shared/button.fluent.scss
index b18f65848..66dc31ace 100644
--- a/src/components/button/themes/button/shared/button.fluent.scss
+++ b/src/components/button/themes/button/shared/button.fluent.scss
@@ -71,11 +71,6 @@ $outlined-btn-indent: rem(2px);
             box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'focus-visible-border-color');
         }
 
-        &:hover {
-            color: var-get($outlined-theme, 'hover-foreground');
-            background: var-get($outlined-theme, 'hover-background');
-        }
-
         &:active {
             color: var-get($outlined-theme, 'active-foreground');
             background: var-get($outlined-theme, 'active-background');
@@ -99,11 +94,6 @@ $outlined-btn-indent: rem(2px);
             box-shadow: 0 0 0 1px var-get($contained-theme, 'focus-visible-foreground');
         }
 
-        &:hover {
-            color: var-get($contained-theme, 'hover-foreground');
-            background: var-get($contained-theme, 'hover-background');
-        }
-
         &:active {
             color: var-get($contained-theme, 'active-foreground');
             background: var-get($contained-theme, 'active-background');
@@ -122,11 +112,6 @@ $outlined-btn-indent: rem(2px);
             box-shadow: 0 0 0 1px var-get($fab-theme, 'focus-visible-foreground');
         }
 
-        &:hover {
-            color: var-get($fab-theme, 'hover-foreground');
-            background: var-get($fab-theme, 'hover-background');
-        }
-
         &:active {
             color: var-get($fab-theme, 'active-foreground');
             background: var-get($fab-theme, 'active-background');
diff --git a/src/components/button/themes/button/shared/button.indigo.scss b/src/components/button/themes/button/shared/button.indigo.scss
index fa844d914..d053e23c5 100644
--- a/src/components/button/themes/button/shared/button.indigo.scss
+++ b/src/components/button/themes/button/shared/button.indigo.scss
@@ -57,8 +57,6 @@ $outlined-theme: $indigo-outlined;
         border-color: var-get($outlined-theme, 'focus-visible-border-color');
 
         &:hover {
-            color: var-get($outlined-theme, 'hover-foreground');
-            background: var-get($outlined-theme, 'hover-background');
             border-color: var-get($outlined-theme, 'hover-border-color');
         }
 
@@ -95,8 +93,6 @@ $outlined-theme: $indigo-outlined;
         border-color: var-get($contained-theme, 'focus-visible-border-color');
 
         &:hover {
-            color: var-get($contained-theme, 'hover-foreground');
-            background: var-get($contained-theme, 'hover-background');
             border-color: var-get($contained-theme, 'hover-border-color');
         }
 
@@ -132,13 +128,9 @@ $outlined-theme: $indigo-outlined;
     }
 
     &:focus-visible {
-        background: var-get($fab-theme, 'focus-visible-background');
-        color: var-get($fab-theme, 'focus-visible-foreground');
         border-color: var-get($fab-theme, 'focus-visible-border-color');
 
         &:hover {
-            color: var-get($fab-theme, 'hover-foreground');
-            background: var-get($fab-theme, 'hover-background');
             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 804f37b80..355233bf6 100644
--- a/src/components/button/themes/button/shared/button.material.scss
+++ b/src/components/button/themes/button/shared/button.material.scss
@@ -29,11 +29,6 @@ $outlined-theme: $material-outlined;
 :host(:not([disabled])[variant='flat']) [part='base'],
 :host(:not(:disabled)[variant='flat']) [part='base'] {
     &:focus-visible {
-        &:hover {
-            color: var-get($flat-theme, 'hover-foreground');
-            background: var-get($flat-theme, 'hover-background');
-        }
-
         &:active {
             color: var-get($flat-theme, 'active-foreground');
             background: var-get($flat-theme, 'active-background');
@@ -60,12 +55,6 @@ $outlined-theme: $material-outlined;
     &:focus-visible {
         border-color: var-get($outlined-theme, 'focus-visible-border-color');
 
-        &:hover {
-            color: var-get($outlined-theme, 'hover-foreground');
-            background: var-get($outlined-theme, 'hover-background');
-            border-color: var-get($outlined-theme, 'hover-border-color');
-        }
-
         &:active {
             color: var-get($outlined-theme, 'active-foreground');
             background: var-get($outlined-theme, 'active-background');
@@ -88,14 +77,6 @@ $outlined-theme: $material-outlined;
     }
 
     &:focus-visible {
-        color: var-get($contained-theme, 'focus-foreground');
-        background: var-get($contained-theme, 'focus-background');
-
-        &:hover {
-            color: var-get($contained-theme, 'hover-foreground');
-            background: var-get($contained-theme, 'hover-background');
-        }
-
         &:active {
             color: var-get($contained-theme, 'active-foreground');
             background: var-get($contained-theme, 'active-background');
@@ -117,14 +98,6 @@ $outlined-theme: $material-outlined;
     }
 
     &:focus-visible {
-        color: var-get($fab-theme, 'focus-foreground');
-        background: var-get($fab-theme, 'focus-background');
-
-        &:hover {
-            color: var-get($fab-theme, 'hover-foreground');
-            background: var-get($fab-theme, 'hover-background');
-        }
-
         &:active {
             color: var-get($fab-theme, 'active-foreground');
             background: var-get($fab-theme, 'active-background');
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 36dcfd4ce..3bbe99b63 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
@@ -64,12 +64,6 @@ $outlined-theme: $indigo-outlined;
             border-radius: inherit;
         }
 
-        &:hover,
-        &:focus:hover {
-            background: var-get($outlined-theme, 'hover-background');
-            color: var-get($outlined-theme, 'hover-foreground');
-        }
-
         &:focus,
         &:focus-within {
             border-color: var-get($outlined-theme, 'focus-border-color');

From 97133fd372704a58acf077b7b615a6a14a9a424e Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Wed, 14 Feb 2024 17:29:40 +0200
Subject: [PATCH 9/9] update igniteui-theming version

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

diff --git a/package-lock.json b/package-lock.json
index e2bd03900..e88030ce2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,7 +42,7 @@
         "globby": "^14.0.1",
         "husky": "^9.0.10",
         "ig-typedoc-theme": "^5.0.3",
-        "igniteui-theming": "^4.3.0",
+        "igniteui-theming": "^4.4.0",
         "keep-a-changelog": "^2.5.3",
         "lint-staged": "^15.2.2",
         "lit-analyzer": "^2.0.3",
@@ -13695,9 +13695,9 @@
       "dev": true
     },
     "node_modules/igniteui-theming": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-4.3.0.tgz",
-      "integrity": "sha512-5/d7EV6N5nVwNRYf3dZjYivCHmn/rXY1iJ7jC7JQ0ixAwDO7GVTYOfpCnsxCnQEXxNc5hiKPE0hVwnD1/J7hQQ==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-4.4.0.tgz",
+      "integrity": "sha512-NqyTSNxqj0ZRMbYoOSL+KEQJsBWg6eJGvSiVmI4NIrA+pDuATyyRZGaECBGK7nWnvX0EFiXP5Wv4kCcakpkNSg==",
       "dev": true,
       "peerDependencies": {
         "sass": "^1.58.1"
diff --git a/package.json b/package.json
index e185f25fd..51d8ade65 100644
--- a/package.json
+++ b/package.json
@@ -85,7 +85,7 @@
     "globby": "^14.0.1",
     "husky": "^9.0.10",
     "ig-typedoc-theme": "^5.0.3",
-    "igniteui-theming": "^4.3.0",
+    "igniteui-theming": "^4.4.0",
     "keep-a-changelog": "^2.5.3",
     "lint-staged": "^15.2.2",
     "lit-analyzer": "^2.0.3",