@syncfusion/ej2-splitbuttons 27.2.2 → 28.1.37

package/styles/button-group/tailwind3.scss

@@ -0,0 +1,5 @@
+@import 'ej2-base/styles/definition/tailwind3.scss';
+@import 'ej2-buttons/styles/button/tailwind3-definition.scss';
+@import 'tailwind3-definition.scss';
+@import 'all.scss';
+@import 'bigger.scss';

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

@@ -19,6 +19,26 @@
         line-height: 1;
         padding: $drop-down-btn-vertical-bigger-padding;
       }
+      .e-btn-icon {
+        @if $skin-name == 'tailwind3' {
+          font-size: $drop-down-btn-icon-font-size-bigger;
+        }
+      }
+    }
+  }
+
+  .e-bigger .e-small.e-dropdown-popup ul,
+  .e-bigger.e-small.e-dropdown-popup ul {
+    & .e-item {
+      @if $skin-name == 'tailwind3' {
+        height: $drop-down-btn-bigger-small-li-height;
+        font-size: $drop-down-btn-bigger-font-size;
+        line-height: $drop-down-btn-bigger-small-li-height;
+        .e-menu-icon {
+          font-size: $drop-down-btn-icon-font-size-bigger;
+          line-height: $drop-down-btn-bigger-small-li-height;
+        }
+      }
     }
   }
 

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

@@ -1,7 +1,7 @@
 @include export-module('drop-down-button-layout') {
   .e-dropdown-btn,
   .e-dropdown-btn.e-btn {
-    @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'fluent2' {
+    @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'fluent2' and $skin-name != 'tailwind3' {
       box-shadow: none;
     }
     text-transform: none;
@@ -23,7 +23,9 @@
         box-shadow: $drop-down-btn-box-shadow;
       }
       @else {
-        box-shadow: none;
+        @if $skin-name != 'tailwind3' {
+          box-shadow: none;
+        }
       }
     }
 
@@ -76,6 +78,12 @@
         padding: $drop-down-btn-vertical-btn-padding;
       }
 
+      & .e-btn-icon {
+        @if $skin-name == 'tailwind3' {
+          font-size: $drop-down-btn-small-icon-font-size;
+        }
+      }
+
       & .e-btn-icon.e-caret {
         @if $skin-name == 'fluent2' {
           font-size: 12px;
@@ -84,6 +92,20 @@
     }
   }
 
+  .e-small.e-dropdown-popup ul {
+    & .e-item {
+      @if $skin-name == 'tailwind3' {
+        height: $drop-down-btn-small-li-height;
+        font-size: $drop-down-btn-small-font-size;
+        line-height: $drop-down-btn-small-li-height;
+        .e-menu-icon {
+          font-size: $drop-down-btn-small-icon-font-size;
+          line-height: $drop-down-btn-small-li-height;
+        }
+      }
+    }
+  }
+
   .e-dropdown-popup {
     position: absolute;
     @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $theme-name == 'tailwind-dark' or $theme-name == 'bootstrap5-dark' {
@@ -159,7 +181,7 @@
           @if $skin-name == 'Material3' {
             box-shadow: $drop-down-btn-sub-ul-box-shadow;
           }
-          @if $skin-name == 'fluent2' {
+          @if $skin-name == 'fluent2' or $skin-name == 'tailwind3' {
             color: $flyout-text-color-disabled;
             opacity: 1;
 
@@ -206,4 +228,15 @@
       margin-right: 0;
     }
   }
+
+  .e-dropdown-popup-width ul {
+    min-width: 0 !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-dropdown-popup-width ul li {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    display: block !important; /* stylelint-disable-line declaration-no-important */
+  }
 }

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

@@ -0,0 +1,53 @@
+$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-small-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;
+$drop-down-btn-li-height: 32px !default;
+$drop-down-btn-small-li-height: 24px !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: 16px !default;
+$drop-down-btn-menu-icon-font-size: $text-sm !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: 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-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;
+$drop-down-btn-bigger-popup-margin-top: 4px !default;
+$drop-down-btn-ul-border: 1px solid $border-light !default;
+$drop-down-btn-li-box-shadow: $shadow-focus-ring2 !default;
+$drop-down-btn-li-border-style: solid !default;
+$drop-down-btn-color: $content-text-color !default;
+$drop-down-btn-disable-text: $secondary-text-color-disabled !default;
+$drop-down-btn-font-size: $text-sm !default;
+$drop-down-btn-small-font-size: $text-xs !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-lg !default;
+$drop-down-btn-li-focus-bgcolor: $flyout-bg-color-hover !default;
+$drop-down-btn-li-selection-bgcolor: $flyout-bg-color-selected !default;
+$drop-down-btn-li-selection-font-color: $content-text-color !default;
+$drop-down-btn-menu-icon-color: $icon-color !default;
+$drop-down-btn-menu-icon-disabled-color: $secondary-text-color-disabled !default;
+$drop-down-btn-li-hover-bgcolor: $flyout-bg-color-hover !default;

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

@@ -55,6 +55,13 @@
           }
         }
 
+        &:focus {
+          @if $skin-name == 'tailwind3' {
+            background: $drop-down-btn-li-bgcolor;
+            color: $drop-down-btn-li-selection-font-color;
+          }
+        }
+
         &:focus-visible {
           @if $theme-name == 'fluent2' {
             background-color: $flyout-bg-color-focus;

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

@@ -0,0 +1,372 @@
+
+
+
+
+/* stylelint-disable */
+.e-btn.e-primary:focus {
+  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
+          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
+}
+
+.e-btn.e-success:focus {
+  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
+          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
+}
+
+.e-btn.e-info:focus {
+  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
+          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
+}
+
+.e-btn.e-warning:focus {
+  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
+          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
+}
+
+.e-btn.e-danger:focus {
+  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
+          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
+}
+
+.e-btn.e-outline.e-info {
+  background: transparent !important;
+  border-color: var(--color-sf-utility-info-border-color) !important;
+  color: var(--color-sf-utility-info-text) !important;
+}
+
+.e-btn.e-outline.e-info:hover {
+  background: var(--color-sf-utility-info-bg-color-hover) !important;
+  border-color: var(--color-sf-utility-info-border-color) !important;
+  color: var(--color-sf-utility-info-text-hover) !important;
+}
+
+.e-btn.e-outline.e-info:active {
+  background: var(--color-sf-utility-info-bg-color-pressed) !important;
+  border-color: var(--color-sf-utility-info-border-color) !important;
+  color: var(--color-sf-utility-info-text-hover) !important;
+}
+
+.e-btn.e-flat.e-info {
+  color: var(--color-sf-utility-info-text) !important;
+}
+
+.e-bigger .e-btn,
+.e-bigger .e-btn,
+.e-bigger .e-css.e-btn,
+.e-bigger.e-css.e-btn {
+  font-size: 14px;
+  line-height: 1.572em;
+  padding: 8px 15px;
+  border-radius: 8px !important;
+  font-weight: 600;
+}
+
+/* stylelint-disable-line no-empty-source */
+.e-dropdown-popup {
+  position: absolute;
+  border-radius: 8px;
+  margin-top: 4px;
+}
+.e-dropdown-popup ul {
+  border: 1px solid var(--color-sf-border-secondary);
+  border-radius: 8px;
+  -webkit-box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
+          box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  font-size: 14px;
+  font-weight: 500;
+  list-style-image: none;
+  list-style-position: outside;
+  list-style-type: none;
+  margin: 0;
+  min-width: 120px;
+  overflow: hidden;
+  padding: 4px 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  white-space: nowrap;
+}
+.e-dropdown-popup ul .e-item {
+  cursor: pointer;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 32px;
+  line-height: 32px;
+  padding: 0 12px;
+  margin: 0 6px;
+  border-radius: 6px;
+}
+.e-dropdown-popup ul .e-item.e-url {
+  padding: 0;
+}
+
+.e-dropdown-btn .e-caret::before,
+.e-dropdown-btn.e-btn .e-caret::before {
+  content: "\e729";
+}
+
+.e-dropdown-btn,
+.e-dropdown-btn.e-btn {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  text-transform: none;
+  white-space: normal;
+}
+.e-dropdown-btn:hover,
+.e-dropdown-btn.e-btn:hover {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.e-dropdown-btn:focus,
+.e-dropdown-btn.e-btn:focus {
+  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24);
+          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24);
+}
+.e-dropdown-btn:active,
+.e-dropdown-btn.e-btn:active {
+  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24);
+          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(102, 112, 133, 0.24);
+}
+.e-dropdown-btn .e-btn-icon,
+.e-dropdown-btn.e-btn .e-btn-icon {
+  font-size: 14px;
+}
+.e-dropdown-btn .e-caret,
+.e-dropdown-btn.e-btn .e-caret {
+  font-size: 18px;
+}
+.e-dropdown-btn.e-vertical,
+.e-dropdown-btn.e-btn.e-vertical {
+  line-height: 1;
+  padding: 6px 12px;
+}
+.e-dropdown-btn.e-caret-hide .e-caret,
+.e-dropdown-btn.e-btn.e-caret-hide .e-caret {
+  display: none;
+}
+.e-dropdown-btn.e-small .e-dropdown-popup ul,
+.e-dropdown-btn.e-btn.e-small .e-dropdown-popup ul {
+  padding: 4px 0;
+}
+.e-dropdown-btn.e-small .e-dropdown-popup ul .e-item,
+.e-dropdown-btn.e-btn.e-small .e-dropdown-popup ul .e-item {
+  padding: 0 8px;
+}
+.e-dropdown-btn.e-small.e-vertical,
+.e-dropdown-btn.e-btn.e-small.e-vertical {
+  line-height: 1;
+  padding: 6px 12px;
+}
+.e-dropdown-popup {
+  position: absolute;
+  border-radius: 8px;
+  margin-top: 4px;
+}
+.e-dropdown-popup ul {
+  border: 1px solid var(--color-sf-border-secondary);
+  border-radius: 8px;
+  -webkit-box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
+          box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  font-size: 14px;
+  font-weight: 500;
+  list-style-image: none;
+  list-style-position: outside;
+  list-style-type: none;
+  margin: 0;
+  min-width: 120px;
+  overflow: hidden;
+  padding: 4px 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  white-space: nowrap;
+}
+.e-dropdown-popup ul .e-item {
+  cursor: pointer;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 32px;
+  line-height: 32px;
+  padding: 0 12px;
+}
+.e-dropdown-popup ul .e-item.e-separator {
+  padding: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+.e-dropdown-popup ul .e-item.e-url {
+  padding: 0;
+}
+.e-dropdown-popup ul .e-item .e-menu-url {
+  display: block;
+  padding: 0 12px;
+  text-decoration: none;
+  width: 100%;
+}
+.e-dropdown-popup ul .e-item .e-menu-icon {
+  float: left;
+  font-size: 18px;
+  line-height: 32px;
+  margin-right: 12px;
+  vertical-align: middle;
+  width: 1em;
+}
+.e-dropdown-popup ul .e-item.e-disabled {
+  cursor: auto;
+  pointer-events: none;
+}
+.e-dropdown-popup ul .e-item.e-separator {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  cursor: auto;
+  height: auto;
+  line-height: normal;
+  margin: 3px 0;
+  pointer-events: none;
+}
+.e-dropdown-popup.e-transparent {
+  background: transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.e-dropdown-popup.e-transparent .e-dropdown-menu {
+  border: 0;
+  height: 1px;
+  min-width: 0;
+  padding: 0;
+  width: 1px;
+}
+.e-dropdown-popup.e-hidden {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-rtl.e-dropdown-popup .e-item .e-menu-icon {
+  float: right;
+  margin-left: 12px;
+  margin-right: 0;
+}
+
+.e-dropdown-popup-width ul {
+  min-width: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-dropdown-popup-width ul li {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-dropdown-popup {
+  background: var(--color-sf-bg-primary-alt);
+  color: var(--color-sf-utility-secondary-text-color);
+}
+.e-dropdown-popup ul .e-item .e-menu-url {
+  color: var(--color-sf-utility-secondary-text-color);
+}
+.e-dropdown-popup ul .e-item .e-menu-icon {
+  color: var(--color-sf-utility-secondary-text-color);
+}
+.e-dropdown-popup ul .e-item.e-focused {
+  background: var(--color-sf-bg-secondary-hover);
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.e-dropdown-popup ul .e-item:hover {
+  background: var(--color-sf-bg-secondary-hover);
+  color: var(--color-sf-text-primary);
+}
+.e-dropdown-popup ul .e-item:active, .e-dropdown-popup ul .e-item.e-selected {
+  background: var(--color-sf-bg-tertiary);
+  color: var(--color-sf-text-primary);
+}
+.e-dropdown-popup ul .e-item:active .e-menu-url, .e-dropdown-popup ul .e-item.e-selected .e-menu-url {
+  color: var(--color-sf-text-primary);
+}
+.e-dropdown-popup ul .e-item:active .e-menu-icon, .e-dropdown-popup ul .e-item.e-selected .e-menu-icon {
+  color: var(--color-sf-text-primary);
+}
+.e-dropdown-popup ul .e-separator {
+  border-bottom-color: var(--color-sf-border-secondary);
+}
+
+.e-dropdown-btn.e-inherit,
+.e-dropdown-btn.e-btn.e-inherit {
+  background: inherit;
+  border-color: transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  color: inherit;
+}
+.e-dropdown-btn.e-inherit:hover, .e-dropdown-btn.e-inherit:focus, .e-dropdown-btn.e-inherit:active, .e-dropdown-btn.e-inherit.e-active,
+.e-dropdown-btn.e-btn.e-inherit:hover,
+.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: rgba(0, 0, 0, 0.056);
+  border-color: transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  color: inherit;
+}
+
+.e-bigger .e-dropdown-btn .e-btn-icon,
+.e-bigger.e-dropdown-btn .e-btn-icon {
+  font-size: 16px;
+}
+.e-bigger .e-dropdown-btn .e-caret,
+.e-bigger.e-dropdown-btn .e-caret {
+  font-size: 22px;
+}
+.e-bigger .e-dropdown-btn.e-vertical,
+.e-bigger.e-dropdown-btn.e-vertical {
+  line-height: 1;
+  padding: 8px 16px;
+}
+.e-bigger .e-dropdown-btn.e-small.e-vertical,
+.e-bigger.e-dropdown-btn.e-small.e-vertical {
+  line-height: 1;
+  padding: 8px 16px;
+}
+*.e-bigger .e-dropdown-popup {
+  background-color: transparent;
+  border-radius: 8px;
+}
+
+*.e-bigger .e-dropdown-popup ul,
+*.e-bigger.e-dropdown-popup ul {
+  -webkit-box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
+          box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
+  font-size: 14px;
+  max-width: 240px;
+  min-width: 112px;
+  padding: 4px 0;
+  background-color: var(--color-sf-bg-primary-alt);
+  margin-top: 4px;
+}
+*.e-bigger .e-dropdown-popup ul .e-item,
+*.e-bigger.e-dropdown-popup ul .e-item {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+}
+*.e-bigger .e-dropdown-popup ul .e-item.e-url,
+*.e-bigger.e-dropdown-popup ul .e-item.e-url {
+  padding: 0;
+}
+*.e-bigger .e-dropdown-popup ul .e-item .e-menu-icon,
+*.e-bigger.e-dropdown-popup ul .e-item .e-menu-icon {
+  font-size: 22px;
+  line-height: 40px;
+}
+*.e-bigger .e-dropdown-popup ul .e-item.e-separator,
+*.e-bigger.e-dropdown-popup ul .e-item.e-separator {
+  height: auto;
+  line-height: normal;
+}

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

@@ -0,0 +1,7 @@
+@import 'ej2-base/styles/definition/bds.scss';
+@import 'ej2-buttons/styles/button/bds-definition.scss';
+@import 'ej2-popups/styles/popup/bds-definition.scss';
+@import 'bds-definition.scss';
+@import 'icons/bds.scss';
+@import 'all.scss';
+@import 'bigger.scss';

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

@@ -144,6 +144,17 @@
   margin-right: 0;
 }
 
+.e-dropdown-popup-width ul {
+  min-width: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-dropdown-popup-width ul li {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-dropdown-popup {
   background: #2a2a2a;
   color: #f0f0f0;
@@ -215,7 +226,6 @@
   line-height: 1;
   padding: 8px 16px;
 }
-
 *.e-bigger .e-dropdown-popup ul,
 *.e-bigger.e-dropdown-popup ul {
   -webkit-box-shadow: 0 6px 12px rgba(26, 26, 26, 0.175);

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

@@ -144,6 +144,17 @@
   margin-right: 0;
 }
 
+.e-dropdown-popup-width ul {
+  min-width: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-dropdown-popup-width ul li {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-dropdown-popup {
   background: #fff;
   color: #333;
@@ -215,7 +226,6 @@
   line-height: 1;
   padding: 8px 16px;
 }
-
 *.e-bigger .e-dropdown-popup ul,
 *.e-bigger.e-dropdown-popup ul {
   -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);

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

@@ -137,6 +137,17 @@
   margin-right: 0;
 }
 
+.e-dropdown-popup-width ul {
+  min-width: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-dropdown-popup-width ul li {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-dropdown-popup {
   background: #fff;
   color: #212529;
@@ -208,7 +219,6 @@
   line-height: 1;
   padding: 8px 16px;
 }
-
 *.e-bigger .e-dropdown-popup ul,
 *.e-bigger.e-dropdown-popup ul {
   -webkit-box-shadow: none;

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

@@ -140,6 +140,17 @@
   margin-right: 0;
 }
 
+.e-dropdown-popup-width ul {
+  min-width: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-dropdown-popup-width ul li {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-dropdown-popup {
   background: #343a40;
   color: #fff;
@@ -211,7 +222,6 @@
   line-height: 1;
   padding: 8px 16px;
 }
-
 *.e-bigger .e-dropdown-popup {
   background-color: transparent;
   border-radius: 4px;

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

@@ -144,6 +144,17 @@
   margin-right: 0;
 }
 
+.e-dropdown-popup-width ul {
+  min-width: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-dropdown-popup-width ul li {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-dropdown-popup {
   background: var(--color-sf-flyout-bg-color);
   color: var(--color-sf-content-text-color);
@@ -215,7 +226,6 @@
   line-height: 1;
   padding: 8px 16px;
 }
-
 *.e-bigger .e-dropdown-popup {
   background-color: transparent;
   border-radius: 4px;