@syncfusion/ej2-splitbuttons 25.2.3 → 26.1.35

package/styles/split-button/_bootstrap-dark-definition.scss

@@ -1,4 +1,3 @@
-//default
 $split-btn-zindex: 2;
 $split-btn-border-radius: 4px;
 $split-btn-focus-border-color: $grey-8c;
@@ -22,5 +21,3 @@ $split-btn-active-left-border-color: $grey-ad;
 $split-btn-sec-btn-margin-left: -1px;
 $split-btn-icon-btn-padding: 10px;
 $split-btn-icon-btn-padding-bigger: 12px;
-
-//enddefault

package/styles/split-button/_bootstrap4-definition.scss

@@ -1,4 +1,3 @@
-//default
 $split-btn-zindex: 2;
 $split-btn-border-radius: 4px;
 $split-btn-focus-border-color: $gray-600;
@@ -22,5 +21,3 @@ $split-btn-active-left-border-color: $gray-600;
 $split-btn-sec-btn-margin-left: -1px;
 $split-btn-icon-btn-padding: 8px;
 $split-btn-icon-btn-padding-bigger: 12px;
-
-//enddefault

package/styles/split-button/_bootstrap5-definition.scss

@@ -1,4 +1,3 @@
-//layout variables
 $split-btn-zindex: 2 !default;
 $split-btn-border-radius: 4px !default;
 $split-btn-focus-outline-offset: 0 !default;

package/styles/split-button/_bootstrap5.3-definition.scss

@@ -0,0 +1,23 @@
+$split-btn-zindex: 2 !default;
+$split-btn-border-radius: 4px !default;
+$split-btn-focus-outline-offset: 0 !default;
+$split-btn-vertical-secondary-icon-line-height: .334em !default;
+$split-btn-seperator-border: 1px solid !default;
+$split-btn-sec-btn-margin-left: -1px !default;
+$split-btn-icon-btn-padding: 10px !default;
+$split-btn-icon-btn-padding-bigger: 12px !default;
+$split-btn-focus-border-color: $secondary-border-color !default;
+$split-btn-focus-vertical-border-color: $secondary-border-color !default;
+$split-btn-seperator-border-color: $secondary-border-color !default;
+$split-btn-seperator-default-border-color: $secondary-border-color !default;
+$split-btn-seperator-vertical-border-color: $secondary-border-color !default;
+$split-btn-hover-border-color: $secondary-border-color !default;
+$split-btn-hover-vertical-border-color: $secondary-border-color !default;
+$split-btn-active-border-color: $secondary-bg-color-pressed !default;
+$split-btn-active-vertical-border-color: $secondary-bg-color-pressed !default;
+$split-btn-disabled-vertical-border-color: $secondary-border-color !default;
+$split-btn-active-box-shadow: $secondary-shadow-focus !default;
+$split-btn-disabled-left-border-color: $secondary-border-color !default;
+$split-btn-hover-left-border-color: $secondary-border-color !default;
+$split-btn-focus-left-border-color: $secondary-border-color !default;
+$split-btn-active-left-border-color: $secondary-border-color !default;

package/styles/split-button/_fabric-dark-definition.scss

@@ -1,4 +1,3 @@
-//default
 $split-btn-zindex: 2;
 $split-btn-border-radius: 0;
 $split-btn-focus-border-color: $neutral-tertiary-alt;
@@ -22,5 +21,3 @@ $split-btn-active-left-border-color: transparent;
 $split-btn-sec-btn-margin-left: 0;
 $split-btn-icon-btn-padding: 8px;
 $split-btn-icon-btn-padding-bigger: 11px;
-
-//enddefault

package/styles/split-button/_fluent-definition.scss

@@ -1,4 +1,3 @@
-//layout variables
 $split-btn-zindex: 2 !default;
 $split-btn-border-radius: 0 !default;
 $split-btn-focus-outline-offset: -3px !default;

package/styles/split-button/_fluent2-definition.scss

@@ -0,0 +1,23 @@
+$split-btn-zindex: 2 !default;
+$split-btn-border-radius: 4px !default;
+$split-btn-focus-outline-offset: 0 !default;
+$split-btn-vertical-secondary-icon-line-height: .334em !default;
+$split-btn-seperator-border: 1px solid !default;
+$split-btn-sec-btn-margin-left: -1px !default;
+$split-btn-icon-btn-padding: 10px !default;
+$split-btn-icon-btn-padding-bigger: 12px !default;
+$split-btn-focus-border-color: $secondary-border-color !default;
+$split-btn-focus-vertical-border-color: $secondary-border-color !default;
+$split-btn-seperator-border-color: $secondary-border-color !default;
+$split-btn-seperator-default-border-color: $secondary-border-color !default;
+$split-btn-seperator-vertical-border-color: $secondary-border-color !default;
+$split-btn-hover-border-color: $secondary-border-color !default;
+$split-btn-hover-vertical-border-color: $secondary-border-color !default;
+$split-btn-active-border-color: $secondary-bg-color-pressed !default;
+$split-btn-active-vertical-border-color: $secondary-bg-color-pressed !default;
+$split-btn-disabled-vertical-border-color: $secondary-border-color !default;
+$split-btn-active-box-shadow: none !default;
+$split-btn-disabled-left-border-color: $secondary-border-color !default;
+$split-btn-hover-left-border-color: $secondary-border-color !default;
+$split-btn-focus-left-border-color: $secondary-border-color !default;
+$split-btn-active-left-border-color: $secondary-border-color !default;

package/styles/split-button/_fusionnew-definition.scss

@@ -1,4 +1,3 @@
-//layout variables
 $split-btn-zindex: 2 !default;
 $split-btn-border-radius: 4px !default;
 $split-btn-focus-outline-offset: 0 !default;

package/styles/split-button/_highcontrast-light-definition.scss

@@ -1,4 +1,3 @@
-//default
 $split-btn-zindex: 2;
 $split-btn-border-radius: 0;
 $split-btn-focus-border-color: $border-fg;
@@ -22,5 +21,3 @@ $split-btn-active-left-border-color: $selection-bg;
 $split-btn-sec-btn-margin-left: -1px;
 $split-btn-icon-btn-padding: 8px;
 $split-btn-icon-btn-padding-bigger: 11px;
-
-//enddefault

package/styles/split-button/_layout.scss

@@ -1,6 +1,4 @@
 @include export-module('split-button-layout') {
-
-  /*! splitbutton layout */
   .e-split-btn-wrapper {
     display: inline-flex;
     white-space: nowrap;
@@ -60,6 +58,13 @@
         }
       }
 
+      &.e-btn:focus-visible { // only for keybord
+        @if $skin-name == 'fluent2' {
+          border-right-color: $grey-black !important; /* stylelint-disable-line declaration-no-important */
+          box-shadow: $btn-keyboard-focus-box-shadow;
+        }
+      }
+
       &:active {
         box-shadow: $split-btn-active-box-shadow;
         z-index: $split-btn-zindex;
@@ -145,15 +150,22 @@
       &:focus {
         outline-offset: $split-btn-focus-outline-offset;
       }
+
+      &.e-btn:focus-visible { // only for keybord
+        @if $skin-name == 'fluent2' {
+          margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
+          box-shadow: $btn-keyboard-focus-box-shadow;
+        }
+      }
     }
 
     .e-btn {
-      @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' and $theme-name != 'Material3' {
+      @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'fluent2' and $theme-name != 'Material3' {
         box-shadow: none;
       }
 
       &:hover {
-        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' {
+        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'fluent2' {
           box-shadow: none;
         }
       }

package/styles/split-button/_theme.scss

@@ -1,6 +1,4 @@
 @include export-module('split-button-theme') {
-
-  /*! splitbutton theme */
   .e-split-btn-wrapper {
     .e-split-btn {
       @if $skin-name == 'Material3' {

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

@@ -1,8 +1,10 @@
-/*! splitbutton layout */
 .e-split-btn-wrapper {
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   white-space: nowrap;
+  width: -webkit-min-content;
+  width: -moz-min-content;
   width: min-content;
 }
 .e-split-btn-wrapper .e-split-btn {
@@ -17,13 +19,16 @@
   outline-offset: 0;
 }
 .e-split-btn-wrapper .e-split-btn:hover {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-split-btn:focus {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-split-btn:active {
-  box-shadow: inset 0 3px 5px rgba(26, 26, 26, 0.125);
+  -webkit-box-shadow: inset 0 3px 5px rgba(26, 26, 26, 0.125);
+          box-shadow: inset 0 3px 5px rgba(26, 26, 26, 0.125);
   z-index: 2;
 }
 .e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
@@ -55,10 +60,12 @@
   padding-right: 4px;
 }
 .e-split-btn-wrapper .e-dropdown-btn:focus, .e-split-btn-wrapper .e-dropdown-btn:hover {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-dropdown-btn:active {
-  box-shadow: inset 0 3px 5px rgba(26, 26, 26, 0.125);
+  -webkit-box-shadow: inset 0 3px 5px rgba(26, 26, 26, 0.125);
+          box-shadow: inset 0 3px 5px rgba(26, 26, 26, 0.125);
   z-index: 2;
 }
 .e-split-btn-wrapper .e-dropdown-btn:disabled:focus, .e-split-btn-wrapper .e-dropdown-btn:disabled:hover, .e-split-btn-wrapper .e-dropdown-btn:disabled:active {
@@ -68,22 +75,28 @@
   outline-offset: 0;
 }
 .e-split-btn-wrapper .e-btn {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-btn:hover {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-btn:focus {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-btn:active {
-  box-shadow: inset 0 3px 5px rgba(26, 26, 26, 0.125);
+  -webkit-box-shadow: inset 0 3px 5px rgba(26, 26, 26, 0.125);
+          box-shadow: inset 0 3px 5px rgba(26, 26, 26, 0.125);
 }
 .e-split-btn-wrapper .e-btn:disabled {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-btn.e-inherit:focus, .e-split-btn-wrapper .e-btn.e-inherit:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper.e-rtl .e-split-btn {
   border-bottom-left-radius: 0;
@@ -230,7 +243,6 @@
   padding-top: 0;
 }
 
-/*! splitbutton theme */
 .e-split-btn-wrapper .e-split-btn {
   border-right-color: #585858;
 }

package/styles/split-button/bootstrap.css

@@ -1,8 +1,10 @@
-/*! splitbutton layout */
 .e-split-btn-wrapper {
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   white-space: nowrap;
+  width: -webkit-min-content;
+  width: -moz-min-content;
   width: min-content;
 }
 .e-split-btn-wrapper .e-split-btn {
@@ -17,13 +19,16 @@
   outline-offset: 0;
 }
 .e-split-btn-wrapper .e-split-btn:hover {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-split-btn:focus {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-split-btn:active {
-  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   z-index: 2;
 }
 .e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
@@ -55,10 +60,12 @@
   padding-right: 4px;
 }
 .e-split-btn-wrapper .e-dropdown-btn:focus, .e-split-btn-wrapper .e-dropdown-btn:hover {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-dropdown-btn:active {
-  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   z-index: 2;
 }
 .e-split-btn-wrapper .e-dropdown-btn:disabled:focus, .e-split-btn-wrapper .e-dropdown-btn:disabled:hover, .e-split-btn-wrapper .e-dropdown-btn:disabled:active {
@@ -68,22 +75,28 @@
   outline-offset: 0;
 }
 .e-split-btn-wrapper .e-btn {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-btn:hover {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-btn:focus {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-btn:active {
-  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
 .e-split-btn-wrapper .e-btn:disabled {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-btn.e-inherit:focus, .e-split-btn-wrapper .e-btn.e-inherit:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper.e-rtl .e-split-btn {
   border-bottom-left-radius: 0;
@@ -230,7 +243,6 @@
   padding-top: 0;
 }
 
-/*! splitbutton theme */
 .e-split-btn-wrapper .e-split-btn {
   border-right-color: #ccc;
 }

package/styles/split-button/bootstrap4.css

@@ -1,8 +1,10 @@
-/*! splitbutton layout */
 .e-split-btn-wrapper {
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   white-space: nowrap;
+  width: -webkit-min-content;
+  width: -moz-min-content;
   width: min-content;
 }
 .e-split-btn-wrapper .e-split-btn {
@@ -19,10 +21,12 @@
   outline-offset: 0;
 }
 .e-split-btn-wrapper .e-split-btn:focus {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-split-btn:active {
-  box-shadow: 0 0 0 0.2rem rgba(99, 105, 111, 0.5);
+  -webkit-box-shadow: 0 0 0 0.2rem rgba(99, 105, 111, 0.5);
+          box-shadow: 0 0 0 0.2rem rgba(99, 105, 111, 0.5);
   z-index: 2;
 }
 .e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
@@ -54,7 +58,8 @@
   padding-right: 8px;
 }
 .e-split-btn-wrapper .e-dropdown-btn:active {
-  box-shadow: 0 0 0 0.2rem rgba(99, 105, 111, 0.5);
+  -webkit-box-shadow: 0 0 0 0.2rem rgba(99, 105, 111, 0.5);
+          box-shadow: 0 0 0 0.2rem rgba(99, 105, 111, 0.5);
   z-index: 2;
 }
 .e-split-btn-wrapper .e-dropdown-btn:disabled:focus, .e-split-btn-wrapper .e-dropdown-btn:disabled:hover, .e-split-btn-wrapper .e-dropdown-btn:disabled:active {
@@ -64,16 +69,20 @@
   outline-offset: 0;
 }
 .e-split-btn-wrapper .e-btn:focus {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-btn:active {
-  box-shadow: 0 0 0 0.2rem rgba(99, 105, 111, 0.5);
+  -webkit-box-shadow: 0 0 0 0.2rem rgba(99, 105, 111, 0.5);
+          box-shadow: 0 0 0 0.2rem rgba(99, 105, 111, 0.5);
 }
 .e-split-btn-wrapper .e-btn:disabled {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-btn.e-inherit:focus, .e-split-btn-wrapper .e-btn.e-inherit:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper.e-rtl .e-split-btn {
   border-bottom-left-radius: 0;
@@ -226,7 +235,6 @@
   padding-top: 0;
 }
 
-/*! splitbutton theme */
 .e-split-btn-wrapper .e-split-btn {
   border-right-color: #6c757d;
 }

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

@@ -1,9 +1,11 @@
 /* stylelint-disable-line no-empty-source */
-/*! splitbutton layout */
 .e-split-btn-wrapper {
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   white-space: nowrap;
+  width: -webkit-min-content;
+  width: -moz-min-content;
   width: min-content;
 }
 .e-split-btn-wrapper .e-split-btn {
@@ -18,11 +20,13 @@
   outline-offset: 0;
 }
 .e-split-btn-wrapper .e-split-btn:focus {
-  box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  -webkit-box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+          box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
   z-index: 2;
 }
 .e-split-btn-wrapper .e-split-btn:active {
-  box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  -webkit-box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+          box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
   z-index: 2;
 }
 .e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
@@ -55,7 +59,8 @@
   z-index: 1;
 }
 .e-split-btn-wrapper .e-dropdown-btn:active {
-  box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  -webkit-box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+          box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
   z-index: 2;
 }
 .e-split-btn-wrapper .e-dropdown-btn:disabled:focus, .e-split-btn-wrapper .e-dropdown-btn:disabled:hover, .e-split-btn-wrapper .e-dropdown-btn:disabled:active {
@@ -65,18 +70,22 @@
   outline-offset: 0;
 }
 .e-split-btn-wrapper .e-btn:focus {
-  box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  -webkit-box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+          box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
   z-index: 2;
 }
 .e-split-btn-wrapper .e-btn:active {
-  box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  -webkit-box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+          box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
   z-index: 2;
 }
 .e-split-btn-wrapper .e-btn:disabled {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-btn.e-inherit:focus, .e-split-btn-wrapper .e-btn.e-inherit:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper.e-rtl .e-split-btn {
   border-bottom-left-radius: 0;
@@ -223,7 +232,6 @@
   padding-top: 0;
 }
 
-/*! splitbutton theme */
 .e-split-btn-wrapper .e-split-btn {
   border-right-color: #6c757d;
 }

package/styles/split-button/bootstrap5.css

@@ -1,9 +1,11 @@
 /* stylelint-disable-line no-empty-source */
-/*! splitbutton layout */
 .e-split-btn-wrapper {
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   white-space: nowrap;
+  width: -webkit-min-content;
+  width: -moz-min-content;
   width: min-content;
 }
 .e-split-btn-wrapper .e-split-btn {
@@ -18,11 +20,13 @@
   outline-offset: 0;
 }
 .e-split-btn-wrapper .e-split-btn:focus {
-  box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  -webkit-box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+          box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
   z-index: 2;
 }
 .e-split-btn-wrapper .e-split-btn:active {
-  box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  -webkit-box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+          box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
   z-index: 2;
 }
 .e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
@@ -55,7 +59,8 @@
   z-index: 1;
 }
 .e-split-btn-wrapper .e-dropdown-btn:active {
-  box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  -webkit-box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+          box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
   z-index: 2;
 }
 .e-split-btn-wrapper .e-dropdown-btn:disabled:focus, .e-split-btn-wrapper .e-dropdown-btn:disabled:hover, .e-split-btn-wrapper .e-dropdown-btn:disabled:active {
@@ -65,18 +70,22 @@
   outline-offset: 0;
 }
 .e-split-btn-wrapper .e-btn:focus {
-  box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  -webkit-box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+          box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
   z-index: 2;
 }
 .e-split-btn-wrapper .e-btn:active {
-  box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  -webkit-box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+          box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
   z-index: 2;
 }
 .e-split-btn-wrapper .e-btn:disabled {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-btn.e-inherit:focus, .e-split-btn-wrapper .e-btn.e-inherit:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper.e-rtl .e-split-btn {
   border-bottom-left-radius: 0;
@@ -223,7 +232,6 @@
   padding-top: 0;
 }
 
-/*! splitbutton theme */
 .e-split-btn-wrapper .e-split-btn {
   border-right-color: #6c757d;
 }

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

@@ -1,8 +1,10 @@
-/*! splitbutton layout */
 .e-split-btn-wrapper {
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   white-space: nowrap;
+  width: -webkit-min-content;
+  width: -moz-min-content;
   width: min-content;
 }
 .e-split-btn-wrapper .e-split-btn {
@@ -17,13 +19,16 @@
   outline-offset: -4px;
 }
 .e-split-btn-wrapper .e-split-btn:hover {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-split-btn:focus {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-split-btn:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   z-index: 2;
 }
 .e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
@@ -55,10 +60,12 @@
   padding-right: 4px;
 }
 .e-split-btn-wrapper .e-dropdown-btn:focus, .e-split-btn-wrapper .e-dropdown-btn:hover {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-dropdown-btn:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   z-index: 2;
 }
 .e-split-btn-wrapper .e-dropdown-btn:disabled:focus, .e-split-btn-wrapper .e-dropdown-btn:disabled:hover, .e-split-btn-wrapper .e-dropdown-btn:disabled:active {
@@ -68,22 +75,28 @@
   outline-offset: -4px;
 }
 .e-split-btn-wrapper .e-btn {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-btn:hover {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-btn:focus {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-btn:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-btn:disabled {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-btn.e-inherit:focus, .e-split-btn-wrapper .e-btn.e-inherit:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper.e-rtl .e-split-btn {
   border-bottom-left-radius: 0;
@@ -230,7 +243,6 @@
   padding-top: 0;
 }
 
-/*! splitbutton theme */
 .e-split-btn-wrapper .e-split-btn {
   border-right-color: transparent;
 }