@syncfusion/ej2-splitbuttons 19.3.48 → 19.4.47

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-splitbuttons@*",
-  "_id": "@syncfusion/ej2-splitbuttons@19.3.47",
+  "_id": "@syncfusion/ej2-splitbuttons@19.4.40",
   "_inBundle": false,
-  "_integrity": "sha512-Q4pni89JtywN7Z6L1cgVTcJQjaOPHV53qsvN4ORxp9ljkWfnQNream8tOrGA44zPZBXdICTRAFoGKRWgXRmObA==",
+  "_integrity": "sha512-RUGdptI2vsIR2/sUC6Mfs4/+W8mfuVn2h0G2iqP3YxeFQ/elnDOVKduAriaGQncGavrKcxyz++gel5KRhjC1nA==",
   "_location": "/@syncfusion/ej2-splitbuttons",
   "_phantomChildren": {},
   "_requested": {
@@ -31,8 +31,8 @@
     "/@syncfusion/ej2-richtexteditor",
     "/@syncfusion/ej2-vue-splitbuttons"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-19.3.47.tgz",
-  "_shasum": "996f0ab20f02703ac3ce1e535d59bea62a231192",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-19.4.40.tgz",
+  "_shasum": "40d160e220f9f6369ea812000093789995ee66ef",
   "_spec": "@syncfusion/ej2-splitbuttons@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -43,8 +43,8 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.3.47",
-    "@syncfusion/ej2-popups": "~19.3.47"
+    "@syncfusion/ej2-base": "~19.4.42",
+    "@syncfusion/ej2-popups": "~19.4.47"
   },
   "deprecated": false,
   "description": "A package of feature-rich Essential JS 2 components such as DropDownButton, SplitButton, ProgressButton and ButtonGroup.",
@@ -87,6 +87,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "19.3.48",
+  "version": "19.4.47",
   "sideEffects": false
 }

package/src/common/common-model.d.ts

@@ -1,4 +1,4 @@
-import { ChildProperty, extend, deleteObject, Property, BaseEventArgs, addClass } from '@syncfusion/ej2-base';
+import { ChildProperty, extend, deleteObject, Property, BaseEventArgs, addClass, isNullOrUndefined } from '@syncfusion/ej2-base';
 
 /**
  * Interface for a class Item

package/src/common/common.js

@@ -17,7 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { ChildProperty, extend, deleteObject, Property, addClass } from '@syncfusion/ej2-base';
+import { ChildProperty, extend, deleteObject, Property, addClass, isNullOrUndefined } from '@syncfusion/ej2-base';
 /**
  * @param {Object} props - Specifies the properties
  * @param {string[]} model - Specifies the model
@@ -114,6 +114,9 @@ export function setBlankIconStyle(popup) {
         return;
     }
     var iconLi = popup.querySelector('.e-item:not(.e-blank-icon):not(.e-separator)');
+    if (isNullOrUndefined(iconLi)) {
+        return;
+    }
     if (iconLi.classList.contains('e-url')) {
         iconLi = iconLi.querySelector('.e-menu-url');
     }

package/styles/bootstrap-dark.css

@@ -260,7 +260,7 @@
   text-transform: none;
   z-index: 1;
   padding-left: 10px;
-  padding-right: 4px;
+  padding-right: 10px;
 }
 
 .e-split-btn-wrapper .e-split-btn:focus {

package/styles/bootstrap.css

@@ -260,7 +260,7 @@
   text-transform: none;
   z-index: 1;
   padding-left: 10px;
-  padding-right: 4px;
+  padding-right: 10px;
 }
 
 .e-split-btn-wrapper .e-split-btn:focus {

package/styles/bootstrap5-dark.css

@@ -108,8 +108,8 @@
   cursor: pointer;
   display: -ms-flexbox;
   display: flex;
-  height: 30px;
-  line-height: 30px;
+  height: 26px;
+  line-height: 26px;
   padding: 0 12px;
 }
 
@@ -127,7 +127,7 @@
 .e-dropdown-popup ul .e-item .e-menu-icon {
   float: left;
   font-size: 18px;
-  line-height: 30px;
+  line-height: 26px;
   margin-right: 11px;
   vertical-align: middle;
   width: 1em;
@@ -261,7 +261,7 @@
   text-transform: none;
   z-index: 1;
   padding-left: 10px;
-  padding-right: 4px;
+  padding-right: 10px;
 }
 
 .e-split-btn-wrapper .e-split-btn:focus {
@@ -2050,7 +2050,7 @@
 }
 
 .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(255, 255, 255, 0.75);
 }
 
 *.e-primary .e-progress,

package/styles/bootstrap5.css

@@ -108,8 +108,8 @@
   cursor: pointer;
   display: -ms-flexbox;
   display: flex;
-  height: 30px;
-  line-height: 30px;
+  height: 26px;
+  line-height: 26px;
   padding: 0 12px;
 }
 
@@ -127,7 +127,7 @@
 .e-dropdown-popup ul .e-item .e-menu-icon {
   float: left;
   font-size: 18px;
-  line-height: 30px;
+  line-height: 26px;
   margin-right: 11px;
   vertical-align: middle;
   width: 1em;
@@ -261,7 +261,7 @@
   text-transform: none;
   z-index: 1;
   padding-left: 10px;
-  padding-right: 4px;
+  padding-right: 10px;
 }
 
 .e-split-btn-wrapper .e-split-btn:focus {
@@ -2050,7 +2050,7 @@
 }
 
 .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(255, 255, 255, 0.75);
 }
 
 *.e-primary .e-progress,

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

@@ -0,0 +1,31 @@
+//layout variables
+$btn-grp-margin: -1px !default;
+$btn-grp-margin-left: -1px !default;
+$btn-grp-wrapper-border: 4px !default;
+$btn-grp-round-radius: 20px !default;
+$btn-grp-icon-font-size: 16px !default;
+$btn-grp-icon-font-size-bigger: 20px !default;
+
+//Normal Outline GroupButton
+$btn-grp-outline-focus-border-color: $secondary-border-color !default;
+$btn-grp-outline-focus-color: inherit !default;
+
+//Outline Primary
+$btn-grp-outline-primary-focus-border-color: $primary !default;
+$btn-grp-outline-focus-primary-color: inherit !default;
+
+//Outline Success
+$btn-grp-outline-success-focus-border-color: $btn-success-focus-border-color !default;
+$btn-grp-outline-focus-success-color: inherit !default;
+
+//Outline Info
+$btn-grp-outline-info-focus-border-color: $btn-info-focus-border-color !default;
+$btn-grp-outline-focus-info-color: inherit !default;
+
+//Outline warning
+$btn-grp-outline-warning-focus-border-color: $btn-warning-focus-border-color !default;
+$btn-grp-outline-focus-warning-color: inherit !default;
+
+//Outline danger
+$btn-grp-outline-danger-focus-border-color: $btn-danger-focus-border-color !default;
+$btn-grp-outline-focus-danger-color: inherit !default;

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

@@ -10,7 +10,7 @@ $drop-down-btn-icon-font-size: 14px !default;
 $drop-down-btn-icon-margin-right: 11px !default;
 $drop-down-btn-bigger-icon-margin-right: 12px !default;
 $drop-down-btn-li-border-width: 1px !default;
-$drop-down-btn-li-height: 30px !default;
+$drop-down-btn-li-height: 26px !default;
 $drop-down-btn-li-padding: 0 12px !default;
 $drop-down-btn-bigger-li-padding: 0 16px !default;
 $drop-down-btn-small-li-padding: 0 8px !default;

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

@@ -0,0 +1,52 @@
+//layout variables
+$drop-down-btn-arrow-content: '\e70d' !default;
+$drop-down-btn-vertical-btn-padding: 6px 12px !default;
+$drop-down-btn-vertical-bigger-padding: 8px 16px !default;
+$drop-down-btn-bigger-font-size: $text-base !default;
+$drop-down-btn-bigger-li-height: 40px !default;
+$drop-down-btn-bigger-max-width: 202px !default;
+$drop-down-btn-bigger-min-width: 112px !default;
+$drop-down-btn-icon-font-size: 14px !default;
+$drop-down-btn-icon-margin-right: 11px !default;
+$drop-down-btn-bigger-icon-margin-right: 12px !default;
+$drop-down-btn-li-border-width: 1px !default;
+$drop-down-btn-li-height: 36px !default;
+$drop-down-btn-li-padding: 0 12px !default;
+$drop-down-btn-bigger-li-padding: 0 16px !default;
+$drop-down-btn-small-li-padding: 0 8px !default;
+$drop-down-btn-max-width: 178px !default;
+$drop-down-btn-menu-icon-bigger-font-size: 22px !default;
+$drop-down-btn-menu-icon-font-size: 18px !default;
+$drop-down-btn-min-width: 120px !default;
+$drop-down-btn-seperator-padding: 3px 0 !default;
+$drop-down-btn-sub-ul-box-shadow: none !default;
+$drop-down-btn-ul-border-radius: 2px !default;
+$drop-down-btn-ul-padding: 6px 0 !default;
+$drop-down-btn-ul-bigger-padding: 8px 0 !default;
+$drop-down-btn-ul-small-padding: 4px 0 !default;
+$drop-down-btn-caret-icon-font-size: 16px !default;
+$drop-down-btn-icon-font-size-bigger: 16px !default;
+$drop-down-btn-caret-icon-font-size-bigger: 20px !default;
+$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-border-style: solid !default;
+//Color
+$drop-down-btn-color: $secondary-text-color !default;
+$drop-down-btn-disable-text: $secondary-text-color-disabled !default;
+$drop-down-btn-font-size: $text-sm !default;
+$drop-down-btn-font-weight: $font-weight-normal !default;
+$drop-down-btn-li-bgcolor: $flyout-bg-color-hover !default;
+$drop-down-btn-ul-bgcolor: $flyout-bg-color !default;
+$drop-down-btn-li-border-color: $border-light !default;
+$drop-down-btn-selected-color: $flyout-text-color-selected !default;
+$drop-down-btn-parent-ul-box-shadow: $shadow-md !default;
+$drop-down-btn-li-focus-bgcolor: $flyout-bg-color-focus !default;
+$drop-down-btn-li-selection-bgcolor: $flyout-bg-color-selected !default;
+$drop-down-btn-li-selection-font-color: $flyout-text-color-selected !default;
+$drop-down-btn-menu-icon-color: $primary-outline !default;
+$drop-down-btn-menu-icon-disabled-color: $primary-outline !default;
+$drop-down-btn-li-hover-bgcolor: $flyout-bg-color-hover !default;
+

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

@@ -10,7 +10,7 @@ $drop-down-btn-icon-font-size: 14px !default;
 $drop-down-btn-icon-margin-right: 11px !default;
 $drop-down-btn-bigger-icon-margin-right: 12px !default;
 $drop-down-btn-li-border-width: 1px !default;
-$drop-down-btn-li-height: 30px !default;
+$drop-down-btn-li-height: 28px !default;
 $drop-down-btn-li-padding: 0 12px !default;
 $drop-down-btn-bigger-li-padding: 0 16px !default;
 $drop-down-btn-small-li-padding: 0 8px !default;

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

@@ -39,7 +39,12 @@
           }
 
           & .e-menu-icon {
-            color: $drop-down-btn-selected-color;
+            @if $skin-name == 'FluentUI' or $theme-name == 'FluentUI' {
+              color: $drop-down-btn-menu-icon-color;
+            }
+            @else {
+              color: $drop-down-btn-selected-color;
+            }
           }
         }
       }

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

@@ -108,8 +108,8 @@
   cursor: pointer;
   display: -ms-flexbox;
   display: flex;
-  height: 30px;
-  line-height: 30px;
+  height: 26px;
+  line-height: 26px;
   padding: 0 12px;
 }
 
@@ -127,7 +127,7 @@
 .e-dropdown-popup ul .e-item .e-menu-icon {
   float: left;
   font-size: 18px;
-  line-height: 30px;
+  line-height: 26px;
   margin-right: 11px;
   vertical-align: middle;
   width: 1em;

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

@@ -108,8 +108,8 @@
   cursor: pointer;
   display: -ms-flexbox;
   display: flex;
-  height: 30px;
-  line-height: 30px;
+  height: 26px;
+  line-height: 26px;
   padding: 0 12px;
 }
 
@@ -127,7 +127,7 @@
 .e-dropdown-popup ul .e-item .e-menu-icon {
   float: left;
   font-size: 18px;
-  line-height: 30px;
+  line-height: 26px;
   margin-right: 11px;
   vertical-align: middle;
   width: 1em;

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

@@ -0,0 +1,10 @@
+@include export-module('drop-down-button-fluent-icons') {
+  .e-dropdown-btn,
+  .e-dropdown-btn.e-btn {
+    .e-caret {
+      &::before {
+        content: '\e7c3';
+      }
+    }
+  }
+}

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

@@ -115,8 +115,8 @@
   cursor: pointer;
   display: -ms-flexbox;
   display: flex;
-  height: 30px;
-  line-height: 30px;
+  height: 28px;
+  line-height: 28px;
   padding: 0 12px;
 }
 
@@ -134,7 +134,7 @@
 .e-dropdown-popup ul .e-item .e-menu-icon {
   float: left;
   font-size: 18px;
-  line-height: 30px;
+  line-height: 28px;
   margin-right: 11px;
   vertical-align: middle;
   width: 1em;

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

@@ -115,8 +115,8 @@
   cursor: pointer;
   display: -ms-flexbox;
   display: flex;
-  height: 30px;
-  line-height: 30px;
+  height: 28px;
+  line-height: 28px;
   padding: 0 12px;
 }
 
@@ -134,7 +134,7 @@
 .e-dropdown-popup ul .e-item .e-menu-icon {
   float: left;
   font-size: 18px;
-  line-height: 30px;
+  line-height: 28px;
   margin-right: 11px;
   vertical-align: middle;
   width: 1em;

package/styles/fabric-dark.css

@@ -260,7 +260,7 @@
   text-transform: none;
   z-index: 1;
   padding-left: 10px;
-  padding-right: 4px;
+  padding-right: 10px;
 }
 
 .e-split-btn-wrapper .e-split-btn:focus {

package/styles/fabric.css

@@ -260,7 +260,7 @@
   text-transform: none;
   z-index: 1;
   padding-left: 10px;
-  padding-right: 4px;
+  padding-right: 10px;
 }
 
 .e-split-btn-wrapper .e-split-btn:focus {

package/styles/highcontrast-light.css

@@ -260,7 +260,7 @@
   text-transform: none;
   z-index: 1;
   padding-left: 10px;
-  padding-right: 4px;
+  padding-right: 10px;
 }
 
 .e-split-btn-wrapper .e-split-btn:focus {

package/styles/highcontrast.css

@@ -260,7 +260,7 @@
   text-transform: none;
   z-index: 1;
   padding-left: 10px;
-  padding-right: 4px;
+  padding-right: 10px;
 }
 
 .e-split-btn-wrapper .e-split-btn:focus {

package/styles/material-dark.css

@@ -261,7 +261,7 @@
   text-transform: none;
   z-index: 1;
   padding-left: 10px;
-  padding-right: 4px;
+  padding-right: 10px;
 }
 
 .e-split-btn-wrapper .e-split-btn:focus {

package/styles/material.css

@@ -261,7 +261,7 @@
   text-transform: none;
   z-index: 1;
   padding-left: 10px;
-  padding-right: 4px;
+  padding-right: 10px;
 }
 
 .e-split-btn-wrapper .e-split-btn:focus {

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

@@ -11,7 +11,7 @@ $progress-btn-bigger-spin-btn-padding: 20px !default;
 $progress-btn-bigger-small-spin-btn-padding: 16px !default;
 $progress-btn-color: $secondary-text-color !default;
 $progress-btn-bgcolor: rgba($secondary-text-color, .2) !default;
-$progress-btn-bgcolor-normal: rgba($secondary-text-color, .2) !default;
+$progress-btn-bgcolor-normal: rgba($secondary-text-color, .75) !default;
 $progress-btn-warning-progress-color: $progress-btn-bgcolor !default;
 $progress-btn-flat-primary-progress-color: rgba($primary-text-color, 1) !default;
 $progress-btn-flat-success-progress-color: rgba($success-text, 1) !default;

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

@@ -0,0 +1,21 @@
+//layout variables
+$progress-btn-circle-opacity: .3 !default;
+$progress-btn-transition: all .3s linear !default;
+$progress-btn-spinner-padding: 12px !default;
+$progress-btn-spinner-padding-small: 10px !default;
+$progress-btn-spinner-padding-bigger: 14px !default;
+$progress-btn-spinner-padding-bigger-small: 12px !default;
+$progress-btn-spin-btn-padding: 16px !default;
+$progress-btn-small-spin-btn-padding: 14px !default;
+$progress-btn-bigger-spin-btn-padding: 20px !default;
+$progress-btn-bigger-small-spin-btn-padding: 16px !default;
+$progress-btn-color: $secondary-text-color !default;
+$progress-btn-bgcolor: rgba($secondary-text-color, .2) !default;
+$progress-btn-bgcolor-normal: rgba($secondary-text-color, .2) !default;
+$progress-btn-warning-progress-color: $progress-btn-bgcolor !default;
+$progress-btn-flat-primary-progress-color: rgba($primary-text-color, 1) !default;
+$progress-btn-flat-success-progress-color: rgba($success-text, 1) !default;
+$progress-btn-flat-info-progress-color: rgba($info-text, 1) !default;
+$progress-btn-flat-warning-progress-color: rgba($warning-text, 1) !default;
+$progress-btn-flat-danger-progress-color: rgba($danger-text, 1) !default;
+$btn-flat-primary-path-arc: $white;

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

@@ -590,7 +590,7 @@
 }
 
 .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(255, 255, 255, 0.75);
 }
 
 *.e-primary .e-progress,

package/styles/progress-button/bootstrap5.css

@@ -590,7 +590,7 @@
 }
 
 .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(255, 255, 255, 0.75);
 }
 
 *.e-primary .e-progress,

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

@@ -0,0 +1,25 @@
+//layout variables
+$split-btn-zindex: 2 !default;
+$split-btn-border-radius: 0 !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-disabled !default;
+$split-btn-active-box-shadow: $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/_layout.scss

@@ -18,9 +18,12 @@
         padding-left: 12px;
         padding-right: 12px;
       }
+      @else if $skin-name == 'FluentUI' or $theme-name == 'FluentUI' {
+        padding: 0 19px;
+      }
       @else {
         padding-left: 10px;
-        padding-right: 4px;
+        padding-right: 10px;
       }
 
       &:focus {
@@ -28,7 +31,7 @@
       }
 
       &:hover {
-        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' {
+        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' {
           box-shadow: none;
         }
       }
@@ -83,6 +86,9 @@
         padding-left: $split-btn-icon-btn-padding;
         padding-right: $split-btn-icon-btn-padding;
       }
+      @else if $skin-name == 'FluentUI' or $theme-name == 'FluentUI' {
+        padding: 4px;
+      }
       @else {
         padding-left: 4px;
         padding-right: 4px;
@@ -93,7 +99,7 @@
 
       &:focus,
       &:hover {
-        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' {
+        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' {
           box-shadow: none;
         }
       }
@@ -117,12 +123,12 @@
     }
 
     .e-btn {
-      @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' {
+      @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' {
         box-shadow: none;
       }
 
       &:hover {
-        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' {
+        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' {
           box-shadow: none;
         }
       }
@@ -146,6 +152,10 @@
 
       &:disabled {
         box-shadow: none;
+        @if $skin-name == 'FluentUI' or $theme-name == 'FluentUI' {
+          outline: 0;
+          outline-offset: 0;
+        }
       }
     }
 

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

@@ -12,7 +12,7 @@
   text-transform: none;
   z-index: 1;
   padding-left: 10px;
-  padding-right: 4px;
+  padding-right: 10px;
 }
 
 .e-split-btn-wrapper .e-split-btn:focus {

package/styles/split-button/bootstrap.css

@@ -12,7 +12,7 @@
   text-transform: none;
   z-index: 1;
   padding-left: 10px;
-  padding-right: 4px;
+  padding-right: 10px;
 }
 
 .e-split-btn-wrapper .e-split-btn:focus {

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

@@ -12,7 +12,7 @@
   text-transform: none;
   z-index: 1;
   padding-left: 10px;
-  padding-right: 4px;
+  padding-right: 10px;
 }
 
 .e-split-btn-wrapper .e-split-btn:focus {

package/styles/split-button/bootstrap5.css

@@ -12,7 +12,7 @@
   text-transform: none;
   z-index: 1;
   padding-left: 10px;
-  padding-right: 4px;
+  padding-right: 10px;
 }
 
 .e-split-btn-wrapper .e-split-btn:focus {

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

@@ -12,7 +12,7 @@
   text-transform: none;
   z-index: 1;
   padding-left: 10px;
-  padding-right: 4px;
+  padding-right: 10px;
 }
 
 .e-split-btn-wrapper .e-split-btn:focus {

package/styles/split-button/fabric.css

@@ -12,7 +12,7 @@
   text-transform: none;
   z-index: 1;
   padding-left: 10px;
-  padding-right: 4px;
+  padding-right: 10px;
 }
 
 .e-split-btn-wrapper .e-split-btn:focus {

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

@@ -12,7 +12,7 @@
   text-transform: none;
   z-index: 1;
   padding-left: 10px;
-  padding-right: 4px;
+  padding-right: 10px;
 }
 
 .e-split-btn-wrapper .e-split-btn:focus {