@syncfusion/ej2-splitbuttons 24.1.45 → 24.1.46

package/CHANGELOG.md

@@ -6,6 +6,20 @@
 
 #### Bug Fixes
 
+- `#I863317` -  Issue in "DropDownButton list items do not meet WCAG AA standards for focus indicators" has been resolved.
+
+### ButtonGroup
+
+#### Bug Fixes
+
+- `#I534148` -  Issue in "Focus Css style not removed after clicking outside from button group button in bootstrap4 theme" has been resolved.
+
+## 24.1.45 (2024-01-09)
+
+### DropDownButton
+
+#### Bug Fixes
+
 - `#I863317` - `Dropdownitems` not disabled initially when updating the property dynamically has been resolved.
 
 ## 24.1.41 (2023-12-18)
@@ -306,4 +320,4 @@ SplitButton component has primary and secondary button. Primary button is used t
 
 - **Separator** - Supports Popup items grouping by using the Separator.
 
-- **Accessibility** - Provided with built-in accessibility support that helps to access all the SplitButton component features through the keyboard, screen readers, or other assistive technology devices.
+- **Accessibility** - Provided with built-in accessibility support that helps to access all the SplitButton component features through the keyboard, screen readers, or other assistive technology devices.

package/dist/ej2-splitbuttons.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-splitbuttons.min.js
-*  version : 24.1.45
+*  version : 24.1.46
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/dist/ej2-splitbuttons.umd.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-splitbuttons.umd.min.js
-*  version : 24.1.45
+*  version : 24.1.46
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/dist/global/ej2-splitbuttons.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-splitbuttons.min.js
-*  version : 24.1.45
+*  version : 24.1.46
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 24.1.45
+*  version : 24.1.46
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-splitbuttons@*",
-  "_id": "@syncfusion/ej2-splitbuttons@24.1.44",
+  "_id": "@syncfusion/ej2-splitbuttons@24.1.45",
   "_inBundle": false,
-  "_integrity": "sha512-SKKpNooboDsFPmWGU/g+uyT+0VELBwp03B5+9xuRlItyQxWa/nLCrvQbCnKF8wKfaccdgIsekjvmQe3Za5kwtQ==",
+  "_integrity": "sha512-3g9X0QK66N43R7ZNOW61czbpvqT2rCBJniRXh8JCLK5HEsNyS4+z9g5XvTT+42aQfJjnVMSLiIT+FKjGdHAJSQ==",
   "_location": "/@syncfusion/ej2-splitbuttons",
   "_phantomChildren": {},
   "_requested": {
@@ -33,8 +33,8 @@
     "/@syncfusion/ej2-richtexteditor",
     "/@syncfusion/ej2-vue-splitbuttons"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-24.1.44.tgz",
-  "_shasum": "2905a41c62ab7bf1066e2321e1b2e4dd58555d82",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-24.1.45.tgz",
+  "_shasum": "0d4046b0c8ee8c44787b50f7477bcfb3f3ab6cdf",
   "_spec": "@syncfusion/ej2-splitbuttons@*",
   "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
   "author": {
@@ -45,8 +45,8 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~24.1.42",
-    "@syncfusion/ej2-popups": "~24.1.44"
+    "@syncfusion/ej2-base": "~24.1.46",
+    "@syncfusion/ej2-popups": "~24.1.46"
   },
   "deprecated": false,
   "description": "A package of feature-rich Essential JS 2 components such as DropDownButton, SplitButton, ProgressButton and ButtonGroup.",
@@ -89,6 +89,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "24.1.45",
+  "version": "24.1.46",
   "sideEffects": false
 }

package/styles/bootstrap-dark.css

@@ -936,7 +936,6 @@
   color: #fff;
   outline: #393939 0 solid;
   outline-offset: 0;
-  box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
 }
 .e-btn-group .e-btn:active.e-primary,
 .e-btn-group input:active + label.e-btn.e-primary,

package/styles/bootstrap.css

@@ -936,7 +936,6 @@
   color: #333;
   outline: #fff 0 solid;
   outline-offset: 0;
-  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
 .e-btn-group .e-btn:active.e-primary,
 .e-btn-group input:active + label.e-btn.e-primary,

package/styles/bootstrap4.css

@@ -562,6 +562,14 @@
       flex-direction: row;
   position: relative;
 }
+*.e-btn-group input:focus + label.e-btn,
+*.e-btn-group .e-btn:focus,
+*.e-btn-group .e-btn:hover,
+*.e-css.e-btn-group input:focus + label.e-btn,
+*.e-css.e-btn-group .e-btn:focus,
+*.e-css.e-btn-group .e-btn:hover {
+  z-index: 2;
+}
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
   margin-bottom: 0;
@@ -794,10 +802,6 @@
 .e-css.e-btn-group:not(.e-outline) {
   box-shadow: none;
 }
-.e-btn-group .e-btn,
-.e-css.e-btn-group .e-btn {
-  box-shadow: none;
-}
 .e-btn-group .e-btn:hover,
 .e-css.e-btn-group .e-btn:hover {
   box-shadow: none;
@@ -806,69 +810,63 @@
 .e-btn-group input:focus + label.e-btn,
 .e-css.e-btn-group .e-btn:focus,
 .e-css.e-btn-group input:focus + label.e-btn {
-  background: #6c757d;
-  border-color: #6c757d;
+  background: #5b636a;
+  border-color: #60686f;
   color: #fff;
   outline: #6c757d 0 solid;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.25em rgba(128, 136, 143, 0.5);
-  box-shadow: none;
+  box-shadow: 0 0 0 0.25em rgba(115, 122, 129, 0.5);
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-primary,
 .e-btn-group input:focus + label.e-btn.e-primary,
 .e-css.e-btn-group .e-btn:focus.e-primary,
 .e-css.e-btn-group input:focus + label.e-btn.e-primary {
-  background: #007bff;
-  border-color: #007bff;
+  background: #006adb;
+  border-color: #006fe6;
   color: #fff;
   outline: #6c757d 0 solid;
-  box-shadow: 0 0 0 0.25em rgba(38, 143, 255, 0.5);
-  box-shadow: none;
+  box-shadow: 0 0 0 0.25em rgba(33, 130, 234, 0.5);
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-success,
 .e-btn-group input:focus + label.e-btn.e-success,
 .e-css.e-btn-group .e-btn:focus.e-success,
 .e-css.e-btn-group input:focus + label.e-btn.e-success {
-  background: #28a745;
-  border-color: #28a745;
+  background: #218a39;
+  border-color: #23923d;
   color: #fff;
-  box-shadow: 0 0 0 0.25em rgba(66, 179, 92, 0.5);
-  box-shadow: none;
+  box-shadow: 0 0 0 0.25em rgba(58, 160, 82, 0.5);
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-info,
 .e-btn-group input:focus + label.e-btn.e-info,
 .e-css.e-btn-group .e-btn:focus.e-info,
 .e-css.e-btn-group input:focus + label.e-btn.e-info {
-  background: #17a2b8;
-  border-color: #17a2b8;
+  background: #138698;
+  border-color: #148ea1;
   color: #fff;
-  box-shadow: 0 0 0 0.25em rgba(51, 174, 194, 0.5);
-  box-shadow: none;
+  box-shadow: 0 0 0 0.25em rgba(44, 156, 174, 0.5);
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-warning,
 .e-btn-group input:focus + label.e-btn.e-warning,
 .e-css.e-btn-group .e-btn:focus.e-warning,
 .e-css.e-btn-group input:focus + label.e-btn.e-warning {
-  background: #ffc107;
-  border-color: #ffc107;
+  background: #e2aa00;
+  border-color: #edb100;
   color: #212529;
-  box-shadow: 0 0 0 0.25em rgba(255, 202, 44, 0.5);
-  box-shadow: none;
+  box-shadow: 0 0 0 0.25em rgba(240, 188, 34, 0.5);
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-danger,
 .e-btn-group input:focus + label.e-btn.e-danger,
 .e-css.e-btn-group .e-btn:focus.e-danger,
 .e-css.e-btn-group input:focus + label.e-btn.e-danger {
-  background: #dc3545;
-  border-color: #dc3545;
+  background: #ca2333;
+  border-color: #d32535;
   color: #fff;
-  box-shadow: 0 0 0 0.25em rgba(225, 83, 97, 0.5);
-  box-shadow: none;
+  box-shadow: 0 0 0 0.25em rgba(217, 67, 81, 0.5);
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-link,
@@ -897,36 +895,31 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-primary,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-primary {
-  box-shadow: 0 0 0 0.25em rgba(38, 143, 255, 0.5);
-  box-shadow: none;
+  box-shadow: 0 0 0 0.25em rgba(38, 133, 234, 0.5);
 }
 .e-btn-group .e-btn:focus.e-outline.e-success,
 .e-btn-group input:focus + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-success,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-success {
-  box-shadow: 0 0 0 0.25em rgba(66, 179, 92, 0.5);
-  box-shadow: none;
+  box-shadow: 0 0 0 0.25em rgba(58, 160, 82, 0.5);
 }
 .e-btn-group .e-btn:focus.e-outline.e-info,
 .e-btn-group input:focus + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-info,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-info {
-  box-shadow: 0 0 0 0.25em rgba(46, 173, 193, 0.5);
-  box-shadow: none;
+  box-shadow: 0 0 0 0.25em rgba(44, 156, 174, 0.5);
 }
 .e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-btn-group input:focus + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-warning {
-  box-shadow: 0 0 0 0.25em rgba(255, 201, 40, 0.5);
-  box-shadow: none;
+  box-shadow: 0 0 0 0.25em rgba(240, 188, 34, 0.5);
 }
 .e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-btn-group input:focus + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-danger {
-  box-shadow: 0 0 0 0.25em rgba(225, 81, 95, 0.5);
-  box-shadow: none;
+  box-shadow: 0 0 0 0.25em rgba(217, 67, 81, 0.5);
 }
 .e-btn-group .e-btn:active,
 .e-btn-group input:active + label.e-btn,
@@ -939,7 +932,6 @@
   color: #fff;
   outline: #6c757d 0 solid;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.25em rgba(99, 105, 111, 0.5);
 }
 .e-btn-group .e-btn:active.e-primary,
 .e-btn-group input:active + label.e-btn.e-primary,
@@ -951,7 +943,6 @@
   border-color: #005cbf;
   color: #fff;
   outline: #6c757d 0 solid;
-  box-shadow: 0 0 0 0.25em rgba(31, 113, 201, 0.5);
 }
 .e-btn-group .e-btn:active.e-success,
 .e-btn-group input:active + label.e-btn.e-success,
@@ -962,7 +953,6 @@
   background: #1e7e34;
   border-color: #1c7430;
   color: #fff;
-  box-shadow: 0 0 0 0.25em rgba(50, 134, 69, 0.5);
 }
 .e-btn-group .e-btn:active.e-info,
 .e-btn-group input:active + label.e-btn.e-info,
@@ -973,7 +963,6 @@
   background: #117a8b;
   color: #fff;
   border-color: #10707f;
-  box-shadow: 0 0 0 0.25em rgba(39, 130, 145, 0.5);
 }
 .e-btn-group .e-btn:active.e-warning,
 .e-btn-group input:active + label.e-btn.e-warning,
@@ -984,7 +973,6 @@
   background: #d39e00;
   border-color: #c69500;
   color: #212529;
-  box-shadow: 0 0 0 0.25em rgba(207, 163, 32, 0.5);
 }
 .e-btn-group .e-btn:active.e-danger,
 .e-btn-group input:active + label.e-btn.e-danger,
@@ -995,7 +983,6 @@
   background: #bd2130;
   border-color: #b21f2d;
   color: #fff;
-  box-shadow: 0 0 0 0.25em rgba(189, 60, 73, 0.5);
 }
 .e-btn-group .e-btn:active.e-outline,
 .e-btn-group input:active + label.e-btn.e-outline,
@@ -1005,7 +992,6 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-outline {
   background: #6c757d;
   border-color: transparent;
-  box-shadow: 0 0 0 0.25em rgba(99, 105, 111, 0.5);
   color: #fff;
 }
 .e-btn-group .e-btn:active.e-outline.e-primary,
@@ -1016,7 +1002,6 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-primary {
   background: #007bff;
   border-color: transparent;
-  box-shadow: 0 0 0 0.25em rgba(31, 139, 255, 0.5);
   color: #fff;
 }
 .e-btn-group .e-btn:active.e-outline.e-success,
@@ -1027,7 +1012,6 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-success {
   background: #28a745;
   border-color: transparent;
-  box-shadow: 0 0 0 0.25em rgba(50, 134, 69, 0.5);
   color: #fff;
 }
 .e-btn-group .e-btn:active.e-outline.e-info,
@@ -1038,7 +1022,6 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-info {
   background: #17a2b8;
   border-color: transparent;
-  box-shadow: 0 0 0 0.25em rgba(39, 130, 145, 0.5);
   color: #fff;
 }
 .e-btn-group .e-btn:active.e-outline.e-warning,
@@ -1049,7 +1032,6 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-warning {
   background: #ffc107;
   border-color: transparent;
-  box-shadow: 0 0 0 0.25em rgba(207, 163, 32, 0.5);
   color: #212529;
 }
 .e-btn-group .e-btn:active.e-outline.e-danger,
@@ -1060,7 +1042,6 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-danger {
   background: #dc3545;
   border-color: transparent;
-  box-shadow: 0 0 0 0.25em rgba(189, 60, 73, 0.5);
   color: #fff;
 }
 .e-btn-group .e-btn:disabled,
@@ -1216,28 +1197,28 @@
 .e-btn-group:not(.e-vertical):not(.e-rtl) input:focus + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group:not(.e-vertical):not(.e-rtl) .e-btn:focus.e-outline.e-success,
 .e-css.e-btn-group:not(.e-vertical):not(.e-rtl) input:focus + label.e-btn.e-outline.e-success {
-  border-color: #28a745;
+  border-color: #23923d;
   outline-color: inherit;
 }
 .e-btn-group:not(.e-vertical):not(.e-rtl) .e-btn:focus.e-outline.e-info,
 .e-btn-group:not(.e-vertical):not(.e-rtl) input:focus + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group:not(.e-vertical):not(.e-rtl) .e-btn:focus.e-outline.e-info,
 .e-css.e-btn-group:not(.e-vertical):not(.e-rtl) input:focus + label.e-btn.e-outline.e-info {
-  border-color: #17a2b8;
+  border-color: #148ea1;
   outline-color: inherit;
 }
 .e-btn-group:not(.e-vertical):not(.e-rtl) .e-btn:focus.e-outline.e-warning,
 .e-btn-group:not(.e-vertical):not(.e-rtl) input:focus + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group:not(.e-vertical):not(.e-rtl) .e-btn:focus.e-outline.e-warning,
 .e-css.e-btn-group:not(.e-vertical):not(.e-rtl) input:focus + label.e-btn.e-outline.e-warning {
-  border-color: #ffc107;
+  border-color: #edb100;
   outline-color: inherit;
 }
 .e-btn-group:not(.e-vertical):not(.e-rtl) .e-btn:focus.e-outline.e-danger,
 .e-btn-group:not(.e-vertical):not(.e-rtl) input:focus + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group:not(.e-vertical):not(.e-rtl) .e-btn:focus.e-outline.e-danger,
 .e-css.e-btn-group:not(.e-vertical):not(.e-rtl) input:focus + label.e-btn.e-outline.e-danger {
-  border-color: #dc3545;
+  border-color: #d32535;
   outline-color: inherit;
 }
 .e-btn-group.e-vertical:not(.e-rtl) .e-outline:not(:first-of-type):not(:last-of-type),
@@ -1271,28 +1252,28 @@
 .e-btn-group.e-vertical:not(.e-rtl) input:focus + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group.e-vertical:not(.e-rtl) .e-btn:focus.e-outline.e-success,
 .e-css.e-btn-group.e-vertical:not(.e-rtl) input:focus + label.e-btn.e-outline.e-success {
-  border-color: #28a745;
+  border-color: #23923d;
   outline-color: inherit;
 }
 .e-btn-group.e-vertical:not(.e-rtl) .e-btn:focus.e-outline.e-info,
 .e-btn-group.e-vertical:not(.e-rtl) input:focus + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group.e-vertical:not(.e-rtl) .e-btn:focus.e-outline.e-info,
 .e-css.e-btn-group.e-vertical:not(.e-rtl) input:focus + label.e-btn.e-outline.e-info {
-  border-color: #17a2b8;
+  border-color: #148ea1;
   outline-color: inherit;
 }
 .e-btn-group.e-vertical:not(.e-rtl) .e-btn:focus.e-outline.e-warning,
 .e-btn-group.e-vertical:not(.e-rtl) input:focus + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group.e-vertical:not(.e-rtl) .e-btn:focus.e-outline.e-warning,
 .e-css.e-btn-group.e-vertical:not(.e-rtl) input:focus + label.e-btn.e-outline.e-warning {
-  border-color: #ffc107;
+  border-color: #edb100;
   outline-color: inherit;
 }
 .e-btn-group.e-vertical:not(.e-rtl) .e-btn:focus.e-outline.e-danger,
 .e-btn-group.e-vertical:not(.e-rtl) input:focus + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group.e-vertical:not(.e-rtl) .e-btn:focus.e-outline.e-danger,
 .e-css.e-btn-group.e-vertical:not(.e-rtl) input:focus + label.e-btn.e-outline.e-danger {
-  border-color: #dc3545;
+  border-color: #d32535;
   outline-color: inherit;
 }
 .e-btn-group.e-rtl .e-btn:not(:first-of-type):not(:last-of-type),

package/styles/bootstrap5-dark.css

@@ -899,6 +899,7 @@
 .e-css.e-btn-group .e-btn:focus.e-outline,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline {
   box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  box-shadow: none;
   border-color: #5c636a;
 }
 .e-btn-group .e-btn:focus.e-outline.e-primary,

package/styles/bootstrap5.css

@@ -899,6 +899,7 @@
 .e-css.e-btn-group .e-btn:focus.e-outline,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline {
   box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  box-shadow: none;
   border-color: #5c636a;
 }
 .e-btn-group .e-btn:focus.e-outline.e-primary,

package/styles/button-group/_layout.scss

@@ -16,7 +16,7 @@
     input:focus+label.e-btn,
     .e-btn:focus,
     .e-btn:hover {
-      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
+      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap4' {
         z-index: 2;
       }
     }

package/styles/button-group/_theme.scss

@@ -10,7 +10,7 @@
       }
     }
 
-    @if $skin-name == 'material' or $skin-name == 'bootstrap4' or $skin-name == 'Material3' {
+    @if $skin-name == 'material' or $skin-name == 'Material3' {
       .e-btn {
         box-shadow: none;
       }
@@ -54,7 +54,7 @@
     .e-btn:focus,
     input:focus+label.e-btn {
       @include button-focus;
-      @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
+      @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
         box-shadow: none;
       }
       @if $skin-name == 'bootstrap5' {
@@ -71,7 +71,7 @@
 
       &.e-primary {
         @include primary-focus;
-        @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
+        @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
           box-shadow: none;
         }
         @if $skin-name == 'bootstrap5' {
@@ -85,7 +85,7 @@
 
       &.e-success {
         @include success-focus;
-        @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
+        @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
           box-shadow: none;
         }
         @if $skin-name == 'bootstrap5' {
@@ -99,7 +99,7 @@
 
       &.e-info {
         @include info-focus;
-        @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
+        @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
           box-shadow: none;
         }
         @if $skin-name == 'bootstrap5' {
@@ -113,7 +113,7 @@
 
       &.e-warning {
         @include warning-focus;
-        @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
+        @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
           box-shadow: none;
         }
         @if $skin-name == 'bootstrap5' {
@@ -127,7 +127,7 @@
 
       &.e-danger {
         @include danger-focus;
-        @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
+        @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
           box-shadow: none;
         }
         @if $skin-name == 'bootstrap5' {
@@ -149,7 +149,7 @@
 
       &.e-outline {
         @include outline-focus;
-        @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
+        @if $skin-name != 'bootstrap5' $skin-name != 'bootstrap4' and and $skin-name != 'tailwind' {
           box-shadow: none;
         }
         @if $skin-name == 'bootstrap5' {
@@ -158,7 +158,7 @@
 
         &.e-primary {
           @include outline-primary-focus;
-          @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
+          @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
             box-shadow: none;
           }
           @if $skin-name == 'bootstrap5' {
@@ -168,7 +168,7 @@
 
         &.e-success {
           @include outline-success-focus;
-          @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
+          @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
             box-shadow: none;
           }
           @if $skin-name == 'bootstrap5' {
@@ -178,7 +178,7 @@
 
         &.e-info {
           @include outline-info-focus;
-          @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
+          @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
             box-shadow: none;
           }
           @if $skin-name == 'bootstrap5' {
@@ -188,7 +188,7 @@
 
         &.e-warning {
           @include outline-warning-focus;
-          @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
+          @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
             box-shadow: none;
           }
           @if $skin-name == 'bootstrap5' {
@@ -198,7 +198,7 @@
 
         &.e-danger {
           @include outline-danger-focus;
-          @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
+          @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' {
             box-shadow: none;
           }
           @if $skin-name == 'bootstrap5' {

package/styles/button-group/bootstrap-dark.css

@@ -373,7 +373,6 @@
   color: #fff;
   outline: #393939 0 solid;
   outline-offset: 0;
-  box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
 }
 .e-btn-group .e-btn:active.e-primary,
 .e-btn-group input:active + label.e-btn.e-primary,

package/styles/button-group/bootstrap.css

@@ -373,7 +373,6 @@
   color: #333;
   outline: #fff 0 solid;
   outline-offset: 0;
-  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
 .e-btn-group .e-btn:active.e-primary,
 .e-btn-group input:active + label.e-btn.e-primary,

package/styles/button-group/bootstrap4.css

@@ -8,6 +8,14 @@
       flex-direction: row;
   position: relative;
 }
+*.e-btn-group input:focus + label.e-btn,
+*.e-btn-group .e-btn:focus,
+*.e-btn-group .e-btn:hover,
+*.e-css.e-btn-group input:focus + label.e-btn,
+*.e-css.e-btn-group .e-btn:focus,
+*.e-css.e-btn-group .e-btn:hover {
+  z-index: 2;
+}
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
   margin-bottom: 0;
@@ -240,10 +248,6 @@
 .e-css.e-btn-group:not(.e-outline) {
   box-shadow: none;
 }
-.e-btn-group .e-btn,
-.e-css.e-btn-group .e-btn {
-  box-shadow: none;
-}
 .e-btn-group .e-btn:hover,
 .e-css.e-btn-group .e-btn:hover {
   box-shadow: none;
@@ -252,69 +256,63 @@
 .e-btn-group input:focus + label.e-btn,
 .e-css.e-btn-group .e-btn:focus,
 .e-css.e-btn-group input:focus + label.e-btn {
-  background: #6c757d;
-  border-color: #6c757d;
+  background: #5b636a;
+  border-color: #60686f;
   color: #fff;
   outline: #6c757d 0 solid;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.25em rgba(128, 136, 143, 0.5);
-  box-shadow: none;
+  box-shadow: 0 0 0 0.25em rgba(115, 122, 129, 0.5);
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-primary,
 .e-btn-group input:focus + label.e-btn.e-primary,
 .e-css.e-btn-group .e-btn:focus.e-primary,
 .e-css.e-btn-group input:focus + label.e-btn.e-primary {
-  background: #007bff;
-  border-color: #007bff;
+  background: #006adb;
+  border-color: #006fe6;
   color: #fff;
   outline: #6c757d 0 solid;
-  box-shadow: 0 0 0 0.25em rgba(38, 143, 255, 0.5);
-  box-shadow: none;
+  box-shadow: 0 0 0 0.25em rgba(33, 130, 234, 0.5);
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-success,
 .e-btn-group input:focus + label.e-btn.e-success,
 .e-css.e-btn-group .e-btn:focus.e-success,
 .e-css.e-btn-group input:focus + label.e-btn.e-success {
-  background: #28a745;
-  border-color: #28a745;
+  background: #218a39;
+  border-color: #23923d;
   color: #fff;
-  box-shadow: 0 0 0 0.25em rgba(66, 179, 92, 0.5);
-  box-shadow: none;
+  box-shadow: 0 0 0 0.25em rgba(58, 160, 82, 0.5);
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-info,
 .e-btn-group input:focus + label.e-btn.e-info,
 .e-css.e-btn-group .e-btn:focus.e-info,
 .e-css.e-btn-group input:focus + label.e-btn.e-info {
-  background: #17a2b8;
-  border-color: #17a2b8;
+  background: #138698;
+  border-color: #148ea1;
   color: #fff;
-  box-shadow: 0 0 0 0.25em rgba(51, 174, 194, 0.5);
-  box-shadow: none;
+  box-shadow: 0 0 0 0.25em rgba(44, 156, 174, 0.5);
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-warning,
 .e-btn-group input:focus + label.e-btn.e-warning,
 .e-css.e-btn-group .e-btn:focus.e-warning,
 .e-css.e-btn-group input:focus + label.e-btn.e-warning {
-  background: #ffc107;
-  border-color: #ffc107;
+  background: #e2aa00;
+  border-color: #edb100;
   color: #212529;
-  box-shadow: 0 0 0 0.25em rgba(255, 202, 44, 0.5);
-  box-shadow: none;
+  box-shadow: 0 0 0 0.25em rgba(240, 188, 34, 0.5);
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-danger,
 .e-btn-group input:focus + label.e-btn.e-danger,
 .e-css.e-btn-group .e-btn:focus.e-danger,
 .e-css.e-btn-group input:focus + label.e-btn.e-danger {
-  background: #dc3545;
-  border-color: #dc3545;
+  background: #ca2333;
+  border-color: #d32535;
   color: #fff;
-  box-shadow: 0 0 0 0.25em rgba(225, 83, 97, 0.5);
-  box-shadow: none;
+  box-shadow: 0 0 0 0.25em rgba(217, 67, 81, 0.5);
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-link,
@@ -343,36 +341,31 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-primary,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-primary {
-  box-shadow: 0 0 0 0.25em rgba(38, 143, 255, 0.5);
-  box-shadow: none;
+  box-shadow: 0 0 0 0.25em rgba(38, 133, 234, 0.5);
 }
 .e-btn-group .e-btn:focus.e-outline.e-success,
 .e-btn-group input:focus + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-success,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-success {
-  box-shadow: 0 0 0 0.25em rgba(66, 179, 92, 0.5);
-  box-shadow: none;
+  box-shadow: 0 0 0 0.25em rgba(58, 160, 82, 0.5);
 }
 .e-btn-group .e-btn:focus.e-outline.e-info,
 .e-btn-group input:focus + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-info,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-info {
-  box-shadow: 0 0 0 0.25em rgba(46, 173, 193, 0.5);
-  box-shadow: none;
+  box-shadow: 0 0 0 0.25em rgba(44, 156, 174, 0.5);
 }
 .e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-btn-group input:focus + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-warning {
-  box-shadow: 0 0 0 0.25em rgba(255, 201, 40, 0.5);
-  box-shadow: none;
+  box-shadow: 0 0 0 0.25em rgba(240, 188, 34, 0.5);
 }
 .e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-btn-group input:focus + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-danger {
-  box-shadow: 0 0 0 0.25em rgba(225, 81, 95, 0.5);
-  box-shadow: none;
+  box-shadow: 0 0 0 0.25em rgba(217, 67, 81, 0.5);
 }
 .e-btn-group .e-btn:active,
 .e-btn-group input:active + label.e-btn,
@@ -385,7 +378,6 @@
   color: #fff;
   outline: #6c757d 0 solid;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.25em rgba(99, 105, 111, 0.5);
 }
 .e-btn-group .e-btn:active.e-primary,
 .e-btn-group input:active + label.e-btn.e-primary,
@@ -397,7 +389,6 @@
   border-color: #005cbf;
   color: #fff;
   outline: #6c757d 0 solid;
-  box-shadow: 0 0 0 0.25em rgba(31, 113, 201, 0.5);
 }
 .e-btn-group .e-btn:active.e-success,
 .e-btn-group input:active + label.e-btn.e-success,
@@ -408,7 +399,6 @@
   background: #1e7e34;
   border-color: #1c7430;
   color: #fff;
-  box-shadow: 0 0 0 0.25em rgba(50, 134, 69, 0.5);
 }
 .e-btn-group .e-btn:active.e-info,
 .e-btn-group input:active + label.e-btn.e-info,
@@ -419,7 +409,6 @@
   background: #117a8b;
   color: #fff;
   border-color: #10707f;
-  box-shadow: 0 0 0 0.25em rgba(39, 130, 145, 0.5);
 }
 .e-btn-group .e-btn:active.e-warning,
 .e-btn-group input:active + label.e-btn.e-warning,
@@ -430,7 +419,6 @@
   background: #d39e00;
   border-color: #c69500;
   color: #212529;
-  box-shadow: 0 0 0 0.25em rgba(207, 163, 32, 0.5);
 }
 .e-btn-group .e-btn:active.e-danger,
 .e-btn-group input:active + label.e-btn.e-danger,
@@ -441,7 +429,6 @@
   background: #bd2130;
   border-color: #b21f2d;
   color: #fff;
-  box-shadow: 0 0 0 0.25em rgba(189, 60, 73, 0.5);
 }
 .e-btn-group .e-btn:active.e-outline,
 .e-btn-group input:active + label.e-btn.e-outline,
@@ -451,7 +438,6 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-outline {
   background: #6c757d;
   border-color: transparent;
-  box-shadow: 0 0 0 0.25em rgba(99, 105, 111, 0.5);
   color: #fff;
 }
 .e-btn-group .e-btn:active.e-outline.e-primary,
@@ -462,7 +448,6 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-primary {
   background: #007bff;
   border-color: transparent;
-  box-shadow: 0 0 0 0.25em rgba(31, 139, 255, 0.5);
   color: #fff;
 }
 .e-btn-group .e-btn:active.e-outline.e-success,
@@ -473,7 +458,6 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-success {
   background: #28a745;
   border-color: transparent;
-  box-shadow: 0 0 0 0.25em rgba(50, 134, 69, 0.5);
   color: #fff;
 }
 .e-btn-group .e-btn:active.e-outline.e-info,
@@ -484,7 +468,6 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-info {
   background: #17a2b8;
   border-color: transparent;
-  box-shadow: 0 0 0 0.25em rgba(39, 130, 145, 0.5);
   color: #fff;
 }
 .e-btn-group .e-btn:active.e-outline.e-warning,
@@ -495,7 +478,6 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-warning {
   background: #ffc107;
   border-color: transparent;
-  box-shadow: 0 0 0 0.25em rgba(207, 163, 32, 0.5);
   color: #212529;
 }
 .e-btn-group .e-btn:active.e-outline.e-danger,
@@ -506,7 +488,6 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-danger {
   background: #dc3545;
   border-color: transparent;
-  box-shadow: 0 0 0 0.25em rgba(189, 60, 73, 0.5);
   color: #fff;
 }
 .e-btn-group .e-btn:disabled,
@@ -662,28 +643,28 @@
 .e-btn-group:not(.e-vertical):not(.e-rtl) input:focus + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group:not(.e-vertical):not(.e-rtl) .e-btn:focus.e-outline.e-success,
 .e-css.e-btn-group:not(.e-vertical):not(.e-rtl) input:focus + label.e-btn.e-outline.e-success {
-  border-color: #28a745;
+  border-color: #23923d;
   outline-color: inherit;
 }
 .e-btn-group:not(.e-vertical):not(.e-rtl) .e-btn:focus.e-outline.e-info,
 .e-btn-group:not(.e-vertical):not(.e-rtl) input:focus + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group:not(.e-vertical):not(.e-rtl) .e-btn:focus.e-outline.e-info,
 .e-css.e-btn-group:not(.e-vertical):not(.e-rtl) input:focus + label.e-btn.e-outline.e-info {
-  border-color: #17a2b8;
+  border-color: #148ea1;
   outline-color: inherit;
 }
 .e-btn-group:not(.e-vertical):not(.e-rtl) .e-btn:focus.e-outline.e-warning,
 .e-btn-group:not(.e-vertical):not(.e-rtl) input:focus + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group:not(.e-vertical):not(.e-rtl) .e-btn:focus.e-outline.e-warning,
 .e-css.e-btn-group:not(.e-vertical):not(.e-rtl) input:focus + label.e-btn.e-outline.e-warning {
-  border-color: #ffc107;
+  border-color: #edb100;
   outline-color: inherit;
 }
 .e-btn-group:not(.e-vertical):not(.e-rtl) .e-btn:focus.e-outline.e-danger,
 .e-btn-group:not(.e-vertical):not(.e-rtl) input:focus + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group:not(.e-vertical):not(.e-rtl) .e-btn:focus.e-outline.e-danger,
 .e-css.e-btn-group:not(.e-vertical):not(.e-rtl) input:focus + label.e-btn.e-outline.e-danger {
-  border-color: #dc3545;
+  border-color: #d32535;
   outline-color: inherit;
 }
 .e-btn-group.e-vertical:not(.e-rtl) .e-outline:not(:first-of-type):not(:last-of-type),
@@ -717,28 +698,28 @@
 .e-btn-group.e-vertical:not(.e-rtl) input:focus + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group.e-vertical:not(.e-rtl) .e-btn:focus.e-outline.e-success,
 .e-css.e-btn-group.e-vertical:not(.e-rtl) input:focus + label.e-btn.e-outline.e-success {
-  border-color: #28a745;
+  border-color: #23923d;
   outline-color: inherit;
 }
 .e-btn-group.e-vertical:not(.e-rtl) .e-btn:focus.e-outline.e-info,
 .e-btn-group.e-vertical:not(.e-rtl) input:focus + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group.e-vertical:not(.e-rtl) .e-btn:focus.e-outline.e-info,
 .e-css.e-btn-group.e-vertical:not(.e-rtl) input:focus + label.e-btn.e-outline.e-info {
-  border-color: #17a2b8;
+  border-color: #148ea1;
   outline-color: inherit;
 }
 .e-btn-group.e-vertical:not(.e-rtl) .e-btn:focus.e-outline.e-warning,
 .e-btn-group.e-vertical:not(.e-rtl) input:focus + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group.e-vertical:not(.e-rtl) .e-btn:focus.e-outline.e-warning,
 .e-css.e-btn-group.e-vertical:not(.e-rtl) input:focus + label.e-btn.e-outline.e-warning {
-  border-color: #ffc107;
+  border-color: #edb100;
   outline-color: inherit;
 }
 .e-btn-group.e-vertical:not(.e-rtl) .e-btn:focus.e-outline.e-danger,
 .e-btn-group.e-vertical:not(.e-rtl) input:focus + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group.e-vertical:not(.e-rtl) .e-btn:focus.e-outline.e-danger,
 .e-css.e-btn-group.e-vertical:not(.e-rtl) input:focus + label.e-btn.e-outline.e-danger {
-  border-color: #dc3545;
+  border-color: #d32535;
   outline-color: inherit;
 }
 .e-btn-group.e-rtl .e-btn:not(:first-of-type):not(:last-of-type),

package/styles/button-group/bootstrap5-dark.css

@@ -338,6 +338,7 @@
 .e-css.e-btn-group .e-btn:focus.e-outline,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline {
   box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  box-shadow: none;
   border-color: #5c636a;
 }
 .e-btn-group .e-btn:focus.e-outline.e-primary,

package/styles/button-group/bootstrap5.css

@@ -338,6 +338,7 @@
 .e-css.e-btn-group .e-btn:focus.e-outline,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline {
   box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  box-shadow: none;
   border-color: #5c636a;
 }
 .e-btn-group .e-btn:focus.e-outline.e-primary,

package/styles/button-group/fabric-dark.css

@@ -373,7 +373,6 @@
   color: #fff;
   outline: #414040 0 solid;
   outline-offset: 0;
-  box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-primary,
 .e-btn-group input:active + label.e-btn.e-primary,

package/styles/button-group/fabric.css

@@ -379,7 +379,6 @@
   color: #000;
   outline: #eaeaea 0 solid;
   outline-offset: 0;
-  box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-primary,
 .e-btn-group input:active + label.e-btn.e-primary,

package/styles/button-group/highcontrast-light.css

@@ -373,7 +373,6 @@
   color: #fff;
   outline: #000 0 solid;
   outline-offset: 0;
-  box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-primary,
 .e-btn-group input:active + label.e-btn.e-primary,

package/styles/button-group/highcontrast.css

@@ -374,7 +374,6 @@
   color: #000;
   outline: #fff 0 solid;
   outline-offset: 0;
-  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
 }
 .e-btn-group .e-btn:active.e-primary,
 .e-btn-group input:active + label.e-btn.e-primary,

package/styles/button-group/material-dark.css

@@ -373,7 +373,6 @@
   color: #fff;
   outline: #616161 0 solid;
   outline-offset: 0;
-  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
 }
 .e-btn-group .e-btn:active.e-primary,
 .e-btn-group input:active + label.e-btn.e-primary,

package/styles/button-group/material.css

@@ -377,7 +377,6 @@
   color: rgba(0, 0, 0, 0.87);
   outline: #fafafa 0 solid;
   outline-offset: 0;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 .e-btn-group .e-btn:active.e-primary,
 .e-btn-group input:active + label.e-btn.e-primary,

package/styles/button-group/material3-dark.css

@@ -495,7 +495,6 @@
   color: rgba(var(--color-sf-on-surface));
   outline: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)) 0 solid;
   outline-offset: 0;
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-primary,

package/styles/button-group/material3.css

@@ -551,7 +551,6 @@
   color: rgba(var(--color-sf-on-surface));
   outline: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)) 0 solid;
   outline-offset: 0;
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-primary,

package/styles/button-group/tailwind-dark.css

@@ -332,6 +332,7 @@
 .e-css.e-btn-group .e-btn:focus.e-outline,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline {
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
+  box-shadow: none;
 }
 .e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-btn-group input:focus + label.e-btn.e-outline.e-primary,
@@ -374,7 +375,6 @@
   color: #fff;
   outline: #1f2937 0 solid;
   outline-offset: 0;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
 .e-btn-group .e-btn:active.e-primary,
 .e-btn-group input:active + label.e-btn.e-primary,

package/styles/button-group/tailwind.css

@@ -332,6 +332,7 @@
 .e-css.e-btn-group .e-btn:focus.e-outline,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline {
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
+  box-shadow: none;
 }
 .e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-btn-group input:focus + label.e-btn.e-outline.e-primary,
@@ -374,7 +375,6 @@
   color: #374151;
   outline: #fff 0 solid;
   outline-offset: 0;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
 .e-btn-group .e-btn:active.e-primary,
 .e-btn-group input:active + label.e-btn.e-primary,

package/styles/drop-down-button/_fluent-definition.scss

@@ -31,7 +31,7 @@ $drop-down-btn-box-shadow: $secondary-shadow-focus !default;
 $drop-down-btn-popup-margin-top: 4px !default;
 $drop-down-btn-bigger-popup-margin-top: 4px !default;
 $drop-down-btn-ul-border: 0 solid $border-light !default;
-$drop-down-btn-li-box-shadow: none !default;
+$drop-down-btn-li-box-shadow: inset 0 0 0 1px rgba($content-text-color, 1) !default;
 $drop-down-btn-li-border-style: solid !default;
 
 //Color

package/styles/drop-down-button/_theme.scss

@@ -21,7 +21,9 @@
         }
 
         &.e-focused {
-          background-color: $drop-down-btn-li-focus-bgcolor;
+          @if $skin-name != 'FluentUI' {
+            background-color: $drop-down-btn-li-focus-bgcolor;
+          }
           box-shadow: $drop-down-btn-li-box-shadow;
         }
 

package/styles/drop-down-button/fluent-dark.css

@@ -193,8 +193,7 @@
   color: #a19f9d;
 }
 .e-dropdown-popup ul .e-item.e-focused {
-  background-color: #3b3a39;
-  box-shadow: none;
+  box-shadow: inset 0 0 0 1px #f3f2f1;
 }
 .e-dropdown-popup ul .e-item:hover {
   background-color: #323130;

package/styles/drop-down-button/fluent.css

@@ -193,8 +193,7 @@
   color: #605e5c;
 }
 .e-dropdown-popup ul .e-item.e-focused {
-  background-color: #edebe9;
-  box-shadow: none;
+  box-shadow: inset 0 0 0 1px #201f1e;
 }
 .e-dropdown-popup ul .e-item:hover {
   background-color: #f3f2f1;

package/styles/fabric-dark.css

@@ -936,7 +936,6 @@
   color: #fff;
   outline: #414040 0 solid;
   outline-offset: 0;
-  box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-primary,
 .e-btn-group input:active + label.e-btn.e-primary,

package/styles/fabric.css

@@ -939,7 +939,6 @@
   color: #000;
   outline: #eaeaea 0 solid;
   outline-offset: 0;
-  box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-primary,
 .e-btn-group input:active + label.e-btn.e-primary,

package/styles/fluent-dark.css

@@ -193,8 +193,7 @@
   color: #a19f9d;
 }
 .e-dropdown-popup ul .e-item.e-focused {
-  background-color: #3b3a39;
-  box-shadow: none;
+  box-shadow: inset 0 0 0 1px #f3f2f1;
 }
 .e-dropdown-popup ul .e-item:hover {
   background-color: #323130;

package/styles/fluent.css

@@ -193,8 +193,7 @@
   color: #605e5c;
 }
 .e-dropdown-popup ul .e-item.e-focused {
-  background-color: #edebe9;
-  box-shadow: none;
+  box-shadow: inset 0 0 0 1px #201f1e;
 }
 .e-dropdown-popup ul .e-item:hover {
   background-color: #f3f2f1;

package/styles/highcontrast-light.css

@@ -936,7 +936,6 @@
   color: #fff;
   outline: #000 0 solid;
   outline-offset: 0;
-  box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-primary,
 .e-btn-group input:active + label.e-btn.e-primary,

package/styles/highcontrast.css

@@ -938,7 +938,6 @@
   color: #000;
   outline: #fff 0 solid;
   outline-offset: 0;
-  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
 }
 .e-btn-group .e-btn:active.e-primary,
 .e-btn-group input:active + label.e-btn.e-primary,

package/styles/material-dark.css

@@ -936,7 +936,6 @@
   color: #fff;
   outline: #616161 0 solid;
   outline-offset: 0;
-  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
 }
 .e-btn-group .e-btn:active.e-primary,
 .e-btn-group input:active + label.e-btn.e-primary,

package/styles/material.css

@@ -937,7 +937,6 @@
   color: rgba(0, 0, 0, 0.87);
   outline: #fafafa 0 solid;
   outline-offset: 0;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 .e-btn-group .e-btn:active.e-primary,
 .e-btn-group input:active + label.e-btn.e-primary,

package/styles/material3-dark.css

@@ -1091,7 +1091,6 @@
   color: rgba(var(--color-sf-on-surface));
   outline: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface)) 0 solid;
   outline-offset: 0;
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-primary,

package/styles/material3.css

@@ -1141,7 +1141,6 @@
   color: rgba(var(--color-sf-on-surface));
   outline: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)) 0 solid;
   outline-offset: 0;
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-primary,

package/styles/tailwind-dark.css

@@ -919,6 +919,7 @@
 .e-css.e-btn-group .e-btn:focus.e-outline,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline {
   box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.95), 0 0 0 4px #22d3ee;
+  box-shadow: none;
 }
 .e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-btn-group input:focus + label.e-btn.e-outline.e-primary,
@@ -961,7 +962,6 @@
   color: #fff;
   outline: #1f2937 0 solid;
   outline-offset: 0;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
 .e-btn-group .e-btn:active.e-primary,
 .e-btn-group input:active + label.e-btn.e-primary,

package/styles/tailwind.css

@@ -919,6 +919,7 @@
 .e-css.e-btn-group .e-btn:focus.e-outline,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline {
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px #4f46e5;
+  box-shadow: none;
 }
 .e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-btn-group input:focus + label.e-btn.e-outline.e-primary,
@@ -961,7 +962,6 @@
   color: #374151;
   outline: #fff 0 solid;
   outline-offset: 0;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
 .e-btn-group .e-btn:active.e-primary,
 .e-btn-group input:active + label.e-btn.e-primary,