@syncfusion/ej2-splitbuttons 28.2.3 → 29.2.4

package/styles/button-group/material.css

@@ -264,7 +264,7 @@
 .e-css.e-btn-group .e-btn:focus.e-primary,
 .e-css.e-btn-group input:focus-visible + label.e-btn.e-primary,
 .e-css.e-btn-group input:focus + label.e-btn.e-primary {
-  background: #ea4e82;
+  background: rgb(233.72, 77.92, 130.36);
   border-color: transparent;
   color: #fff;
   outline: #fafafa 0 solid;
@@ -280,7 +280,7 @@
 .e-css.e-btn-group .e-btn:focus.e-success,
 .e-css.e-btn-group input:focus-visible + label.e-btn.e-success,
 .e-css.e-btn-group input:focus + label.e-btn.e-success {
-  background: #78a253;
+  background: rgb(119.72, 161.52, 83.24);
   border-color: transparent;
   color: #fff;
   -webkit-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
@@ -295,7 +295,7 @@
 .e-css.e-btn-group .e-btn:focus.e-info,
 .e-css.e-btn-group input:focus-visible + label.e-btn.e-info,
 .e-css.e-btn-group input:focus + label.e-btn.e-info {
-  background: #3f98df;
+  background: rgb(63.48, 152.4, 223.08);
   border-color: transparent;
   color: #fff;
   -webkit-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
@@ -310,7 +310,7 @@
 .e-css.e-btn-group .e-btn:focus.e-warning,
 .e-css.e-btn-group input:focus-visible + label.e-btn.e-warning,
 .e-css.e-btn-group input:focus + label.e-btn.e-warning {
-  background: #d07f3d;
+  background: rgb(207.88, 127.32, 61.2);
   border-color: transparent;
   color: #fff;
   -webkit-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
@@ -325,7 +325,7 @@
 .e-css.e-btn-group .e-btn:focus.e-danger,
 .e-css.e-btn-group input:focus-visible + label.e-btn.e-danger,
 .e-css.e-btn-group input:focus + label.e-btn.e-danger {
-  background: #e06f4c;
+  background: rgb(223.84, 110.6, 75.64);
   border-color: transparent;
   color: #fff;
   -webkit-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
@@ -409,7 +409,7 @@
 .e-css.e-btn-group .e-btn:active,
 .e-css.e-btn-group input:active + label.e-btn,
 .e-css.e-btn-group input:checked + label.e-btn {
-  background: rgba(184, 184, 184, 0.9584);
+  background: rgba(183.5116545663, 183.5116545663, 183.5116545663, 0.9584);
   border-color: transparent;
   color: rgba(0, 0, 0, 0.87);
   outline: #fafafa 0 solid;
@@ -421,7 +421,7 @@
 .e-css.e-btn-group .e-btn:active.e-primary,
 .e-css.e-btn-group input:active + label.e-btn.e-primary,
 .e-css.e-btn-group input:checked + label.e-btn.e-primary {
-  background: #ec618f;
+  background: rgb(235.96, 96.56, 143.48);
   border-color: transparent;
   color: #fff;
   outline: #fafafa 0 solid;
@@ -434,7 +434,7 @@
 .e-css.e-btn-group .e-btn:active.e-success,
 .e-css.e-btn-group input:active + label.e-btn.e-success,
 .e-css.e-btn-group input:checked + label.e-btn.e-success {
-  background: #86ab65;
+  background: rgb(133.96, 171.36, 101.32);
   border-color: transparent;
   color: #fff;
   -webkit-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);
@@ -446,7 +446,7 @@
 .e-css.e-btn-group .e-btn:active.e-info,
 .e-css.e-btn-group input:active + label.e-btn.e-info,
 .e-css.e-btn-group input:checked + label.e-btn.e-info {
-  background: #54a3e2;
+  background: rgb(83.64, 163.2, 226.44);
   color: #fff;
   border-color: transparent;
   -webkit-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);
@@ -458,7 +458,7 @@
 .e-css.e-btn-group .e-btn:active.e-warning,
 .e-css.e-btn-group input:active + label.e-btn.e-warning,
 .e-css.e-btn-group input:checked + label.e-btn.e-warning {
-  background: #d58d52;
+  background: rgb(212.84, 140.76, 81.6);
   border-color: transparent;
   color: #fff;
   -webkit-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);
@@ -470,7 +470,7 @@
 .e-css.e-btn-group .e-btn:active.e-danger,
 .e-css.e-btn-group input:active + label.e-btn.e-danger,
 .e-css.e-btn-group input:checked + label.e-btn.e-danger {
-  background: #e37e5f;
+  background: rgb(227.12, 125.8, 94.52);
   border-color: transparent;
   color: #fff;
   -webkit-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);
@@ -494,7 +494,7 @@
 .e-css.e-btn-group .e-btn:active.e-outline.e-primary,
 .e-css.e-btn-group input:active + label.e-btn.e-outline.e-primary,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-primary {
-  background: #ec618f;
+  background: rgb(235.96, 96.56, 143.48);
   border-color: transparent;
   -webkit-box-shadow: none;
           box-shadow: none;
@@ -506,7 +506,7 @@
 .e-css.e-btn-group .e-btn:active.e-outline.e-success,
 .e-css.e-btn-group input:active + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-success {
-  background: #86ab65;
+  background: rgb(133.96, 171.36, 101.32);
   border-color: transparent;
   -webkit-box-shadow: none;
           box-shadow: none;
@@ -518,7 +518,7 @@
 .e-css.e-btn-group .e-btn:active.e-outline.e-info,
 .e-css.e-btn-group input:active + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-info {
-  background: #54a3e2;
+  background: rgb(83.64, 163.2, 226.44);
   border-color: transparent;
   -webkit-box-shadow: none;
           box-shadow: none;
@@ -530,7 +530,7 @@
 .e-css.e-btn-group .e-btn:active.e-outline.e-warning,
 .e-css.e-btn-group input:active + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-warning {
-  background: #d58d52;
+  background: rgb(212.84, 140.76, 81.6);
   border-color: transparent;
   -webkit-box-shadow: none;
           box-shadow: none;
@@ -542,7 +542,7 @@
 .e-css.e-btn-group .e-btn:active.e-outline.e-danger,
 .e-css.e-btn-group input:active + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-danger {
-  background: #e37e5f;
+  background: rgb(227.12, 125.8, 94.52);
   border-color: transparent;
   -webkit-box-shadow: none;
           box-shadow: none;

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

@@ -7,6 +7,7 @@ $drop-down-btn-bigger-li-height: 40px !default;
 $drop-down-btn-bigger-max-width: 240px !default;
 $drop-down-btn-bigger-min-width: 112px !default;
 $drop-down-btn-icon-font-size: $text-sm !default;
+$drop-down-btn-small-icon-font-size: $text-xs !default;
 $drop-down-btn-icon-margin-right: 12px !default;
 $drop-down-btn-bigger-icon-margin-right: 12px !default;
 $drop-down-btn-li-border-width: 1px !default;
@@ -24,9 +25,12 @@ $drop-down-btn-ul-border-radius: 8px !default;
 $drop-down-btn-ul-padding: 4px 0 !default;
 $drop-down-btn-ul-bigger-padding: 4px 0 !default;
 $drop-down-btn-ul-small-padding: 4px 0 !default;
-$drop-down-btn-caret-icon-font-size: $text-lg !default;
-$drop-down-btn-icon-font-size-bigger: $text-base !default;
-$drop-down-btn-caret-icon-font-size-bigger: 22px !default;
+$drop-down-btn-caret-icon-font-size: $text-sm !default;
+$drop-down-btn-small-caret-icon-font-size: $text-xs !default;
+$drop-down-btn-icon-font-size-bigger: $text-lg !default;
+$drop-down-btn-small-icon-font-size-bigger: $text-base !default;
+$drop-down-btn-caret-icon-font-size-bigger: $text-lg !default;
+$drop-down-btn-small-caret-icon-font-size-bigger: $text-base !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;

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

@@ -20,8 +20,13 @@
         padding: $drop-down-btn-vertical-bigger-padding;
       }
       .e-btn-icon {
-        @if $skin-name == 'tailwind3' {
-          font-size: $drop-down-btn-icon-font-size-bigger;
+        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'tailwind3' or $skin-name == 'Material3' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' {
+          font-size: $drop-down-btn-small-icon-font-size-bigger;
+        }
+      }
+      .e-btn-icon.e-caret {
+        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' or $skin-name == 'fluent2' {
+          font-size: $drop-down-btn-small-caret-icon-font-size-bigger;
         }
       }
     }

package/styles/drop-down-button/_bootstrap-dark-definition.scss

@@ -24,7 +24,8 @@ $drop-down-btn-small-li-padding: 0 14px !default;
 $drop-down-btn-li-selection-bgcolor: $brand-primary !default;
 $drop-down-btn-li-selection-font-color: $brand-primary-font !default;
 $drop-down-btn-max-width: 240px !default;
-$drop-down-btn-icon-font-size: 14px !default;
+$drop-down-btn-icon-font-size: 16px !default;
+$drop-down-btn-small-icon-font-size: 14px !default;
 $drop-down-btn-menu-icon-bigger-font-size: 16px !default;
 $drop-down-btn-menu-icon-color: $grey-dark-font !default;
 $drop-down-btn-menu-icon-disabled-color: rgba($grey-dark-font, .65) !default;
@@ -41,8 +42,11 @@ $drop-down-btn-ul-padding: 3px 0 !default;
 $drop-down-btn-ul-bigger-padding: 5px 0 !default;
 $drop-down-btn-ul-small-padding: 5px 0 !default;
 $drop-down-btn-caret-icon-font-size: 8px !default;
-$drop-down-btn-icon-font-size-bigger: 16px !default;
+$drop-down-btn-small-caret-icon-font-size: 8px !default;
+$drop-down-btn-icon-font-size-bigger: 20px !default;
+$drop-down-btn-small-icon-font-size-bigger: 18px !default;
 $drop-down-btn-caret-icon-font-size-bigger: 10px !default;
+$drop-down-btn-small-caret-icon-font-size-bigger: 10px !default;
 $drop-down-btn-box-shadow: none !default;
 $drop-down-btn-popup-margin-top: 0 !default;
 $drop-down-btn-bigger-popup-margin-top: 0 !default;

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

@@ -9,7 +9,8 @@ $drop-down-btn-color: $grey-dark !default;
 $drop-down-btn-disable-text: rgba($grey, .65) !default;
 $drop-down-btn-font-size: 14px !default;
 $drop-down-btn-font-weight: normal !default;
-$drop-down-btn-icon-font-size: 14px !default;
+$drop-down-btn-icon-font-size: 16px !default;
+$drop-down-btn-small-icon-font-size: 14px !default;
 $drop-down-btn-icon-margin-right: 12px !default;
 $drop-down-btn-bigger-icon-margin-right: 12px !default;
 $drop-down-btn-li-bgcolor: $grey-e6 !default;
@@ -41,8 +42,11 @@ $drop-down-btn-ul-padding: 3px 0 !default;
 $drop-down-btn-ul-bigger-padding: 5px 0 !default;
 $drop-down-btn-ul-small-padding: 5px 0 !default;
 $drop-down-btn-caret-icon-font-size: 8px !default;
-$drop-down-btn-icon-font-size-bigger: 16px !default;
+$drop-down-btn-small-caret-icon-font-size: 8px !default;
+$drop-down-btn-icon-font-size-bigger: 20px !default;
+$drop-down-btn-small-icon-font-size-bigger: 18px !default;
 $drop-down-btn-caret-icon-font-size-bigger: 10px !default;
+$drop-down-btn-small-caret-icon-font-size-bigger: 10px !default;
 $drop-down-btn-box-shadow: none !default;
 $drop-down-btn-popup-margin-top: 0 !default;
 $drop-down-btn-bigger-popup-margin-top: 0 !default;

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

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $drop-down-btn-arrow-content: '\e969' !default;
 $drop-down-btn-vertical-btn-padding: 6px 12px !default;
 $drop-down-btn-vertical-bigger-padding: 8px 16px !default;
@@ -9,15 +11,16 @@ $drop-down-btn-color: $gray-900 !default;
 $drop-down-btn-disable-text: rgba($gray-600, .65) !default;
 $drop-down-btn-font-size: 14px !default;
 $drop-down-btn-font-weight: normal !default;
-$drop-down-btn-icon-font-size: 14px !default;
+$drop-down-btn-icon-font-size: 16px !default;
+$drop-down-btn-small-icon-font-size: 12px !default;
 $drop-down-btn-icon-margin-right: 8px !default;
 $drop-down-btn-bigger-icon-margin-right: 0 !default;
-$drop-down-btn-li-bgcolor: darken($gray-100, 2%) !default;
+$drop-down-btn-li-bgcolor: color.adjust($gray-100, $lightness: -2%) !default;
 $drop-down-btn-li-box-shadow: none !default;
 $drop-down-btn-li-border-color: $gray-600 !default;
 $drop-down-btn-li-border-style: solid !default;
 $drop-down-btn-li-border-width: 1px !default;
-$drop-down-btn-li-focus-bgcolor: darken($gray-100, 2%) !default;
+$drop-down-btn-li-focus-bgcolor: color.adjust($gray-100, $lightness: -2%) !default;
 $drop-down-btn-li-height: 26px !default;
 $drop-down-btn-li-padding: 0 20px !default;
 $drop-down-btn-bigger-li-padding: 0 24px !default;
@@ -41,8 +44,11 @@ $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: 8px !default;
-$drop-down-btn-icon-font-size-bigger: 16px !default;
+$drop-down-btn-small-caret-icon-font-size: 8px !default;
+$drop-down-btn-icon-font-size-bigger: 20px !default;
+$drop-down-btn-small-icon-font-size-bigger: 18px !default;
 $drop-down-btn-caret-icon-font-size-bigger: 10px !default;
+$drop-down-btn-small-caret-icon-font-size-bigger: 10px !default;
 $drop-down-btn-box-shadow: none !default;
 $drop-down-btn-popup-margin-top: 0 !default;
 $drop-down-btn-bigger-popup-margin-top: 0 !default;

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

@@ -6,6 +6,7 @@ $drop-down-btn-bigger-li-height: 32px !default;
 $drop-down-btn-bigger-max-width: 202px !default;
 $drop-down-btn-bigger-min-width: 112px !default;
 $drop-down-btn-icon-font-size: $text-sm !default;
+$drop-down-btn-small-icon-font-size: $text-xs !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;
@@ -23,9 +24,12 @@ $drop-down-btn-ul-border-radius: 4px !default;
 $drop-down-btn-ul-padding: 4px 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: $text-xxs !default;
+$drop-down-btn-caret-icon-font-size: $text-xs !default;
+$drop-down-btn-small-caret-icon-font-size: 8px !default;
 $drop-down-btn-icon-font-size-bigger: $text-base !default;
-$drop-down-btn-caret-icon-font-size-bigger: $text-xs !default;
+$drop-down-btn-small-icon-font-size-bigger: $text-sm !default;
+$drop-down-btn-caret-icon-font-size-bigger: $text-sm !default;
+$drop-down-btn-small-caret-icon-font-size-bigger: $text-xs !default;
 $drop-down-btn-box-shadow: $secondary-shadow-focus !default;
 $drop-down-btn-popup-margin-top: 2px !default;
 $drop-down-btn-bigger-popup-margin-top: 4px !default;

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

@@ -6,6 +6,7 @@ $drop-down-btn-bigger-li-height: 32px !default;
 $drop-down-btn-bigger-max-width: 202px !default;
 $drop-down-btn-bigger-min-width: 112px !default;
 $drop-down-btn-icon-font-size: $text-sm !default;
+$drop-down-btn-small-icon-font-size: $text-xs !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;
@@ -23,9 +24,12 @@ $drop-down-btn-ul-border-radius: 4px !default;
 $drop-down-btn-ul-padding: 4px 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: $text-xxs !default;
+$drop-down-btn-caret-icon-font-size: $text-xs !default;
+$drop-down-btn-small-caret-icon-font-size: 8px !default;
 $drop-down-btn-icon-font-size-bigger: $text-base !default;
-$drop-down-btn-caret-icon-font-size-bigger: $text-xs !default;
+$drop-down-btn-small-icon-font-size-bigger: $text-sm !default;
+$drop-down-btn-caret-icon-font-size-bigger: $text-sm !default;
+$drop-down-btn-small-caret-icon-font-size-bigger: $text-xs !default;
 $drop-down-btn-box-shadow: $secondary-shadow-focus !default;
 $drop-down-btn-popup-margin-top: 2px !default;
 $drop-down-btn-bigger-popup-margin-top: 4px !default;

package/styles/drop-down-button/_fabric-dark-definition.scss

@@ -10,6 +10,7 @@ $drop-down-btn-disable-text: $neutral-tertiary-alt !default;
 $drop-down-btn-font-size: 14px !default;
 $drop-down-btn-font-weight: normal !default;
 $drop-down-btn-icon-font-size: 14px !default;
+$drop-down-btn-small-icon-font-size: 12px !default;
 $drop-down-btn-icon-margin-right: 10px !default;
 $drop-down-btn-bigger-icon-margin-right: 10px !default;
 $drop-down-btn-li-bgcolor: $neutral-light !default;
@@ -40,9 +41,12 @@ $drop-down-btn-ul-border-radius: 0 !default;
 $drop-down-btn-ul-padding: 0 !default;
 $drop-down-btn-ul-bigger-padding: 0 !default;
 $drop-down-btn-ul-small-padding: 0 !default;
-$drop-down-btn-caret-icon-font-size: 10px !default;
-$drop-down-btn-caret-icon-font-size-bigger: 10px !default;
-$drop-down-btn-icon-font-size-bigger: 16px !default;
+$drop-down-btn-caret-icon-font-size: 14px !default;
+$drop-down-btn-small-caret-icon-font-size: 12px !default;
+$drop-down-btn-caret-icon-font-size-bigger: 18px !default;
+$drop-down-btn-small-caret-icon-font-size-bigger: 16px !default;
+$drop-down-btn-icon-font-size-bigger: 18px !default;
+$drop-down-btn-small-icon-font-size-bigger: 16px !default;
 $drop-down-btn-box-shadow: none !default;
 $drop-down-btn-popup-margin-top: 0 !default;
 $drop-down-btn-bigger-popup-margin-top: 0 !default;

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

@@ -10,6 +10,7 @@ $drop-down-btn-disable-text: $neutral-tertiary-alt !default;
 $drop-down-btn-font-size: 14px !default;
 $drop-down-btn-font-weight: normal !default;
 $drop-down-btn-icon-font-size: 14px !default;
+$drop-down-btn-small-icon-font-size: 12px !default;
 $drop-down-btn-icon-margin-right: 10px !default;
 $drop-down-btn-bigger-icon-margin-right: 10px !default;
 $drop-down-btn-li-bgcolor: $neutral-lighter !default;
@@ -40,9 +41,12 @@ $drop-down-btn-ul-border-radius: 0 !default;
 $drop-down-btn-ul-padding: 0 !default;
 $drop-down-btn-ul-bigger-padding: 0 !default;
 $drop-down-btn-ul-small-padding: 0 !default;
-$drop-down-btn-caret-icon-font-size: 10px !default;
-$drop-down-btn-caret-icon-font-size-bigger: 10px !default;
-$drop-down-btn-icon-font-size-bigger: 16px !default;
+$drop-down-btn-caret-icon-font-size: 14px !default;
+$drop-down-btn-small-caret-icon-font-size: 12px !default;
+$drop-down-btn-caret-icon-font-size-bigger: 18px !default;
+$drop-down-btn-small-caret-icon-font-size-bigger: 16px !default;
+$drop-down-btn-icon-font-size-bigger: 18px !default;
+$drop-down-btn-small-icon-font-size-bigger: 16px !default;
 $drop-down-btn-box-shadow: none !default;
 $drop-down-btn-popup-margin-top: 0 !default;
 $drop-down-btn-bigger-popup-margin-top: 0 !default;

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

@@ -5,7 +5,8 @@ $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: $text-sm !default;
+$drop-down-btn-icon-font-size: $text-base !default;
+$drop-down-btn-small-icon-font-size: $text-sm !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;
@@ -23,9 +24,12 @@ $drop-down-btn-ul-border-radius: 2px !default;
 $drop-down-btn-ul-padding: 0 0 !default;
 $drop-down-btn-ul-bigger-padding: 0 0 !default;
 $drop-down-btn-ul-small-padding: 0 0 !default;
-$drop-down-btn-caret-icon-font-size: $text-base !default;
-$drop-down-btn-icon-font-size-bigger: $text-base !default;
-$drop-down-btn-caret-icon-font-size-bigger: $text-xl !default;
+$drop-down-btn-caret-icon-font-size: $text-sm !default;
+$drop-down-btn-small-caret-icon-font-size: $text-xs !default;
+$drop-down-btn-icon-font-size-bigger: $text-xl !default;
+$drop-down-btn-small-icon-font-size-bigger: $text-lg !default;
+$drop-down-btn-caret-icon-font-size-bigger: $text-base !default;
+$drop-down-btn-small-caret-icon-font-size-bigger: $text-sm !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;

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

@@ -26,6 +26,7 @@ $drop-down-btn-ul-small-padding: 4px 0 !default;
 $drop-down-btn-caret-icon-font-size: $text-sm !default;
 $drop-down-btn-icon-font-size-bigger: $text-base !default;
 $drop-down-btn-caret-icon-font-size-bigger: 16px !default;
+$drop-down-btn-small-caret-icon-font-size-bigger: 14px !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;

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

@@ -10,6 +10,7 @@ $drop-down-btn-disable-text: $disable !default;
 $drop-down-btn-font-size: 14px !default;
 $drop-down-btn-font-weight: normal !default;
 $drop-down-btn-icon-font-size: 14px !default;
+$drop-down-btn-small-icon-font-size: 12px !default;
 $drop-down-btn-icon-margin-right: 10px !default;
 $drop-down-btn-bigger-icon-margin-right: 10px !default;
 $drop-down-btn-li-bgcolor: $hover-bg !default;
@@ -39,9 +40,12 @@ $drop-down-btn-ul-border-radius: 0 !default;
 $drop-down-btn-ul-padding: 0 !default;
 $drop-down-btn-ul-bigger-padding: 0 !default;
 $drop-down-btn-ul-small-padding: 0 !default;
-$drop-down-btn-caret-icon-font-size: 8px !default;
-$drop-down-btn-icon-font-size-bigger: 16px !default;
-$drop-down-btn-caret-icon-font-size-bigger: 10px !default;
+$drop-down-btn-caret-icon-font-size: 14px !default;
+$drop-down-btn-small-caret-icon-font-size: 12px !default;
+$drop-down-btn-icon-font-size-bigger: 18px !default;
+$drop-down-btn-small-icon-font-size-bigger: 16px !default;
+$drop-down-btn-caret-icon-font-size-bigger: 18px !default;
+$drop-down-btn-small-caret-icon-font-size-bigger: 16px !default;
 $drop-down-btn-box-shadow: none !default;
 $drop-down-btn-popup-margin-top: 0 !default;
 $drop-down-btn-bigger-popup-margin-top: 0 !default;

package/styles/drop-down-button/_highcontrast-light-definition.scss

@@ -8,6 +8,7 @@ $drop-down-btn-bigger-min-width: 112px !default;
 $drop-down-btn-color: $content-font !default;
 $drop-down-btn-disable-text: $disable !default;
 $drop-down-btn-font-size: 14px !default;
+$drop-down-btn-small-icon-font-size: 12px !default;
 $drop-down-btn-font-weight: normal !default;
 $drop-down-btn-icon-font-size: 14px !default;
 $drop-down-btn-icon-margin-right: 10px !default;
@@ -39,9 +40,12 @@ $drop-down-btn-ul-border-radius: 0 !default;
 $drop-down-btn-ul-padding: 0 !default;
 $drop-down-btn-ul-bigger-padding: 0 !default;
 $drop-down-btn-ul-small-padding: 0 !default;
-$drop-down-btn-caret-icon-font-size: 8px !default;
-$drop-down-btn-icon-font-size-bigger: 16px !default;
-$drop-down-btn-caret-icon-font-size-bigger: 10px !default;
+$drop-down-btn-caret-icon-font-size: 14px !default;
+$drop-down-btn-small-caret-icon-font-size: 12px !default;
+$drop-down-btn-icon-font-size-bigger: 18px !default;
+$drop-down-btn-small-icon-font-size-bigger: 16px !default;
+$drop-down-btn-caret-icon-font-size-bigger: 18px !default;
+$drop-down-btn-small-caret-icon-font-size-bigger: 16px !default;
 $drop-down-btn-box-shadow: none !default;
 $drop-down-btn-popup-margin-top: 0 !default;
 $drop-down-btn-bigger-popup-margin-top: 0 !default;

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

@@ -79,7 +79,7 @@
       }
 
       & .e-btn-icon {
-        @if $skin-name == 'tailwind3' {
+        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'tailwind3' or $skin-name == 'Material3' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
           font-size: $drop-down-btn-small-icon-font-size;
         }
       }
@@ -88,6 +88,9 @@
         @if $skin-name == 'fluent2' {
           font-size: 12px;
         }
+        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
+          font-size: $drop-down-btn-small-caret-icon-font-size;
+        }
       }
     }
   }

package/styles/drop-down-button/_material-dark-definition.scss

@@ -10,6 +10,7 @@ $drop-down-btn-disable-text: rgba($grey-dark-font, .3) !default;
 $drop-down-btn-font-size: 14px !default;
 $drop-down-btn-font-weight: normal !default;
 $drop-down-btn-icon-font-size: 14px !default;
+$drop-down-btn-small-icon-font-size: 12px !default;
 $drop-down-btn-icon-margin-right: 10px !default;
 $drop-down-btn-bigger-icon-margin-right: 10px !default;
 $drop-down-btn-li-bgcolor: rgba($grey-white, .1) !default;
@@ -40,9 +41,12 @@ $drop-down-btn-ul-border: none !default;
 $drop-down-btn-ul-padding: 8px 0 !default;
 $drop-down-btn-ul-bigger-padding: 8px 0 !default;
 $drop-down-btn-ul-small-padding: 8px 0 !default;
-$drop-down-btn-caret-icon-font-size: 8px !default;
-$drop-down-btn-icon-font-size-bigger: 16px !default;
-$drop-down-btn-caret-icon-font-size-bigger: 10px !default;
+$drop-down-btn-caret-icon-font-size: 14px !default;
+$drop-down-btn-small-caret-icon-font-size: 12px !default;
+$drop-down-btn-icon-font-size-bigger: 18px !default;
+$drop-down-btn-small-icon-font-size-bigger: 18px !default;
+$drop-down-btn-caret-icon-font-size-bigger: 16px !default;
+$drop-down-btn-small-caret-icon-font-size-bigger: 16px !default;
 $drop-down-btn-box-shadow: none !default;
 $drop-down-btn-popup-margin-top: 0 !default;
 $drop-down-btn-bigger-popup-margin-top: 0 !default;

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

@@ -10,6 +10,7 @@ $drop-down-btn-disable-text: rgba($grey-light-font, .38) !default;
 $drop-down-btn-font-size: 14px !default;
 $drop-down-btn-font-weight: normal !default;
 $drop-down-btn-icon-font-size: 14px !default;
+$drop-down-btn-small-icon-font-size: 12px !default;
 $drop-down-btn-icon-margin-right: 10px !default;
 $drop-down-btn-bigger-icon-margin-right: 10px !default;
 $drop-down-btn-li-bgcolor: $grey-300 !default;
@@ -40,9 +41,12 @@ $drop-down-btn-ul-border: none !default;
 $drop-down-btn-ul-padding: 8px 0 !default;
 $drop-down-btn-ul-bigger-padding: 8px 0 !default;
 $drop-down-btn-ul-small-padding: 8px 0 !default;
-$drop-down-btn-caret-icon-font-size: 8px !default;
-$drop-down-btn-icon-font-size-bigger: 16px !default;
-$drop-down-btn-caret-icon-font-size-bigger: 10px !default;
+$drop-down-btn-caret-icon-font-size: 14px !default;
+$drop-down-btn-small-caret-icon-font-size: 12px !default;
+$drop-down-btn-icon-font-size-bigger: 18px !default;
+$drop-down-btn-small-icon-font-size-bigger: 18px !default;
+$drop-down-btn-caret-icon-font-size-bigger: 16px !default;
+$drop-down-btn-small-caret-icon-font-size-bigger: 16px !default;
 $drop-down-btn-box-shadow: none !default;
 $drop-down-btn-popup-margin-top: 0 !default;
 $drop-down-btn-bigger-popup-margin-top: 0 !default;

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

@@ -6,6 +6,7 @@ $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: $text-base !default;
+$drop-down-btn-small-icon-font-size: $text-xs !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;
@@ -24,9 +25,12 @@ $drop-down-btn-ul-border-radius: 4px !default;
 $drop-down-btn-ul-padding: 4px 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: $text-sm !default;
+$drop-down-btn-caret-icon-font-size: $text-base !default;
+$drop-down-btn-small-caret-icon-font-size: $text-xs !default;
 $drop-down-btn-icon-font-size-bigger: $text-lg !default;
-$drop-down-btn-caret-icon-font-size-bigger: $text-base !default;
+$drop-down-btn-small-icon-font-size-bigger: $text-lg !default;
+$drop-down-btn-caret-icon-font-size-bigger: $text-xl !default;
+$drop-down-btn-small-caret-icon-font-size-bigger: $text-lg !default;
 $drop-down-btn-box-shadow: $shadow-sm !default;
 $drop-down-btn-popup-margin-top: 0 !default;
 $drop-down-btn-bigger-popup-margin-top: 0 !default;

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

@@ -5,7 +5,8 @@ $drop-down-btn-bigger-font-size: $text-base !default;
 $drop-down-btn-bigger-li-height: 36px !default;
 $drop-down-btn-bigger-max-width: 202px !default;
 $drop-down-btn-bigger-min-width: 112px !default;
-$drop-down-btn-icon-font-size: $text-sm !default;
+$drop-down-btn-icon-font-size: $text-base !default;
+$drop-down-btn-small-icon-font-size: $text-xs !default;
 $drop-down-btn-icon-margin-right: 12px !default;
 $drop-down-btn-bigger-icon-margin-right: 12px !default;
 $drop-down-btn-li-border-width: 1px !default;
@@ -23,9 +24,12 @@ $drop-down-btn-ul-border-radius: 4px !default;
 $drop-down-btn-ul-padding: 4px 0 !default;
 $drop-down-btn-ul-bigger-padding: 4px 0 !default;
 $drop-down-btn-ul-small-padding: 4px 0 !default;
-$drop-down-btn-caret-icon-font-size: $text-lg !default;
-$drop-down-btn-icon-font-size-bigger: $text-base !default;
-$drop-down-btn-caret-icon-font-size-bigger: 22px !default;
+$drop-down-btn-caret-icon-font-size: $text-base !default;
+$drop-down-btn-small-caret-icon-font-size: $text-base !default;
+$drop-down-btn-icon-font-size-bigger: $text-lg !default;
+$drop-down-btn-small-icon-font-size-bigger: $text-lg !default;
+$drop-down-btn-caret-icon-font-size-bigger: $text-xl !default;
+$drop-down-btn-small-caret-icon-font-size-bigger: $text-xl !default;
 $drop-down-btn-box-shadow: $shadow-focus-ring2 !default;
 $drop-down-btn-popup-margin-top: 4px !default;
 $drop-down-btn-bigger-popup-margin-top: 4px !default;

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

@@ -28,6 +28,7 @@ $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: $text-sm !default;
 $drop-down-btn-icon-font-size-bigger: $text-base !default;
+$drop-down-btn-small-icon-font-size-bigger: $text-base !default;
 $drop-down-btn-caret-icon-font-size-bigger: $text-base !default;
 $drop-down-btn-box-shadow: $secondary-shadow-focus !default;
 $drop-down-btn-popup-margin-top: 2px !default;

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

@@ -137,7 +137,7 @@
 }
 .e-dropdown-btn .e-caret,
 .e-dropdown-btn.e-btn .e-caret {
-  font-size: 18px;
+  font-size: 14px;
 }
 .e-dropdown-btn.e-vertical,
 .e-dropdown-btn.e-btn.e-vertical {
@@ -161,6 +161,15 @@
   line-height: 1;
   padding: 6px 12px;
 }
+.e-dropdown-btn.e-small .e-btn-icon,
+.e-dropdown-btn.e-btn.e-small .e-btn-icon {
+  font-size: 12px;
+}
+.e-dropdown-btn.e-small .e-btn-icon.e-caret,
+.e-dropdown-btn.e-btn.e-small .e-btn-icon.e-caret {
+  font-size: 12px;
+}
+
 .e-dropdown-popup {
   position: absolute;
   border-radius: 8px;
@@ -318,11 +327,11 @@
 
 .e-bigger .e-dropdown-btn .e-btn-icon,
 .e-bigger.e-dropdown-btn .e-btn-icon {
-  font-size: 16px;
+  font-size: 18px;
 }
 .e-bigger .e-dropdown-btn .e-caret,
 .e-bigger.e-dropdown-btn .e-caret {
-  font-size: 22px;
+  font-size: 18px;
 }
 .e-bigger .e-dropdown-btn.e-vertical,
 .e-bigger.e-dropdown-btn.e-vertical {
@@ -334,6 +343,15 @@
   line-height: 1;
   padding: 8px 16px;
 }
+.e-bigger .e-dropdown-btn.e-small .e-btn-icon,
+.e-bigger.e-dropdown-btn.e-small .e-btn-icon {
+  font-size: 16px;
+}
+.e-bigger .e-dropdown-btn.e-small .e-btn-icon.e-caret,
+.e-bigger.e-dropdown-btn.e-small .e-btn-icon.e-caret {
+  font-size: 16px;
+}
+
 *.e-bigger .e-dropdown-popup {
   background-color: transparent;
   border-radius: 8px;