@syncfusion/ej2-splitbuttons 24.1.45 → 24.2.3

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

@@ -6,7 +6,7 @@
       background: $drop-down-btn-ul-bgcolor;
     }
     @else {
-      background-color: $drop-down-btn-ul-bgcolor;
+      background: $drop-down-btn-ul-bgcolor;
     }
     color: $drop-down-btn-color;
 
@@ -21,23 +21,25 @@
         }
 
         &.e-focused {
-          background-color: $drop-down-btn-li-focus-bgcolor;
+          @if $skin-name != 'FluentUI' {
+            background: $drop-down-btn-li-focus-bgcolor;
+          }
           box-shadow: $drop-down-btn-li-box-shadow;
         }
 
         &:hover {
           @if $skin-name == 'bootstrap5' {
-            background-color: $drop-down-btn-li-hover-bgcolor;
+            background: $drop-down-btn-li-hover-bgcolor;
           }
           @else {
-            background-color: $drop-down-btn-li-bgcolor;
+            background: $drop-down-btn-li-bgcolor;
           }
           color: $drop-down-btn-li-selection-font-color;
         }
 
         &:active,
         &.e-selected {
-          background-color: $drop-down-btn-li-selection-bgcolor;
+          background: $drop-down-btn-li-selection-bgcolor;
           color: $drop-down-btn-selected-color;
 
           & .e-menu-url {
@@ -73,7 +75,7 @@
       &:focus,
       &:active,
       &.e-active {
-        background-color: rgba(transparent, .056);
+        background: rgba(transparent, .056);
         border-color: transparent;
         box-shadow: none;
         color: inherit;

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

@@ -181,7 +181,7 @@
 
 /*! drop-down button theme */
 .e-dropdown-popup {
-  background-color: #2a2a2a;
+  background: #2a2a2a;
   color: #f0f0f0;
 }
 .e-dropdown-popup ul .e-item .e-menu-url {
@@ -191,15 +191,15 @@
   color: #f0f0f0;
 }
 .e-dropdown-popup ul .e-item.e-focused {
-  background-color: transparent;
+  background: transparent;
   box-shadow: inset 0 0 0 1px #585858;
 }
 .e-dropdown-popup ul .e-item:hover {
-  background-color: #414141;
+  background: #414141;
   color: #fff;
 }
 .e-dropdown-popup ul .e-item:active, .e-dropdown-popup ul .e-item.e-selected {
-  background-color: #0070f0;
+  background: #0070f0;
   color: #fff;
 }
 .e-dropdown-popup ul .e-item:active .e-menu-url, .e-dropdown-popup ul .e-item.e-selected .e-menu-url {
@@ -224,7 +224,7 @@
 .e-dropdown-btn.e-btn.e-inherit:focus,
 .e-dropdown-btn.e-btn.e-inherit:active,
 .e-dropdown-btn.e-btn.e-inherit.e-active {
-  background-color: rgba(0, 0, 0, 0.056);
+  background: rgba(0, 0, 0, 0.056);
   border-color: transparent;
   box-shadow: none;
   color: inherit;