@syncfusion/ej2-dropdowns 20.2.39 → 20.2.43-1234

package/styles/drop-down-base/material.css

@@ -77,7 +77,8 @@
   position: relative;
 }
 
-.e-popup.e-ddl .e-dropdownbase.e-nodata {
+.e-popup.e-ddl .e-dropdownbase.e-nodata,
+.e-popup.e-mention .e-dropdownbase.e-nodata {
   color: #000;
   cursor: default;
   font-family: inherit;
@@ -86,6 +87,45 @@
   text-align: center;
 }
 
+.e-mention.e-popup {
+  background: #fff;
+  border: 0;
+  box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
+  margin-top: 2px;
+  position: absolute;
+}
+
+.e-mention .e-dropdownbase .e-list-item .e-highlight {
+  display: inline;
+  font-weight: bold;
+  vertical-align: baseline;
+}
+
+.e-mention .e-mention-chip,
+.e-mention .e-mention-chip:hover {
+  background: #eee;
+  border-radius: 2px;
+  border: none;
+  color: #e3165b;
+  cursor: default;
+}
+
+.e-mention .e-mention-chip::selection {
+  color: #fff;
+  background: #e3165b;
+}
+
+.e-mention.e-editable-element {
+  border: 2px solid #e0e0e0;
+  height: auto;
+  min-height: 120px;
+  width: 100%;
+}
+
+.e-form-mirror-div {
+  white-space: pre-wrap;
+}
+
 .e-rtl .e-dropdownbase.e-dd-group .e-list-item {
   padding-right: 2em;
 }
@@ -148,6 +188,7 @@
   border-color: #e0e0e0;
 }
 .e-dropdownbase .e-list-item {
+  /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
   background-color: #fff;
   border-bottom: 0;

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

@@ -112,7 +112,8 @@
   position: relative;
 }
 
-.e-popup.e-ddl .e-dropdownbase.e-nodata {
+.e-popup.e-ddl .e-dropdownbase.e-nodata,
+.e-popup.e-mention .e-dropdownbase.e-nodata {
   color: #fff;
   cursor: default;
   font-family: "Inter";
@@ -121,6 +122,45 @@
   text-align: center;
 }
 
+.e-mention.e-popup {
+  background: #1f2937;
+  border: 0;
+  box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
+  margin-top: 2px;
+  position: absolute;
+}
+
+.e-mention .e-dropdownbase .e-list-item .e-highlight {
+  display: inline;
+  font-weight: bold;
+  vertical-align: baseline;
+}
+
+.e-mention .e-mention-chip,
+.e-mention .e-mention-chip:hover {
+  background: #374151;
+  border-radius: 2px;
+  border: none;
+  color: #22d3ee;
+  cursor: default;
+}
+
+.e-mention .e-mention-chip::selection {
+  color: #fff;
+  background: #22d3ee;
+}
+
+.e-mention.e-editable-element {
+  border: 2px solid #4b5563;
+  height: auto;
+  min-height: 120px;
+  width: 100%;
+}
+
+.e-form-mirror-div {
+  white-space: pre-wrap;
+}
+
 .e-bigger.e-ddl .e-dropdownbase.e-nodata,
 .e-bigger .e-ddl .e-dropdownbase.e-nodata {
   font-size: 16px;
@@ -254,6 +294,7 @@
   border-color: #4b5563;
 }
 .e-dropdownbase .e-list-item {
+  /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
   background-color: #374151;
   border-bottom: 0;

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

@@ -112,7 +112,8 @@
   position: relative;
 }
 
-.e-popup.e-ddl .e-dropdownbase.e-nodata {
+.e-popup.e-ddl .e-dropdownbase.e-nodata,
+.e-popup.e-mention .e-dropdownbase.e-nodata {
   color: #111827;
   cursor: default;
   font-family: "Inter";
@@ -121,6 +122,45 @@
   text-align: center;
 }
 
+.e-mention.e-popup {
+  background: #fff;
+  border: 0;
+  box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
+  margin-top: 2px;
+  position: absolute;
+}
+
+.e-mention .e-dropdownbase .e-list-item .e-highlight {
+  display: inline;
+  font-weight: bold;
+  vertical-align: baseline;
+}
+
+.e-mention .e-mention-chip,
+.e-mention .e-mention-chip:hover {
+  background: #f3f4f6;
+  border-radius: 2px;
+  border: none;
+  color: #4f46e5;
+  cursor: default;
+}
+
+.e-mention .e-mention-chip::selection {
+  color: #fff;
+  background: #4f46e5;
+}
+
+.e-mention.e-editable-element {
+  border: 2px solid #e5e7eb;
+  height: auto;
+  min-height: 120px;
+  width: 100%;
+}
+
+.e-form-mirror-div {
+  white-space: pre-wrap;
+}
+
 .e-bigger.e-ddl .e-dropdownbase.e-nodata,
 .e-bigger .e-ddl .e-dropdownbase.e-nodata {
   font-size: 16px;
@@ -254,6 +294,7 @@
   border-color: #e5e7eb;
 }
 .e-dropdownbase .e-list-item {
+  /* stylelint-disable property-no-vendor-prefix */
   -webkit-tap-highlight-color: transparent;
   background-color: #fff;
   border-bottom: 0;

package/styles/drop-down-list/_all.scss

@@ -1,2 +1,3 @@
-@import 'layout.scss';
+@import 'layout.scss';
+
 @import 'theme.scss';

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

@@ -1,4 +1,4 @@
-//default 
+//default
 $ddl-input-font-size: 14px !default;
 $ddl-input-border: $border-size $border-type !default;
 $ddl-input-font-family: inherit !default;
@@ -24,6 +24,7 @@ $ddl-default-border-color: $grey-44 !default;
 $ddl-back-icon-margin: -2px 10px 0 -54px !default;
 $ddl-back-icon-padding: 0 !default;
 $ddl-filter-margin: 0 !default;
+
 // small size
 $ddl-small-list-font-size: 13px !default;
 

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

@@ -23,6 +23,7 @@ $ddl-default-border-color: $grey-cc !default;
 $ddl-back-icon-margin: -2px 10px 0 -54px !default;
 $ddl-back-icon-padding: 0 !default;
 $ddl-filter-margin: 0 !default;
+
 // small size
 $ddl-small-list-font-size: 13px !default;
 
@@ -32,7 +33,7 @@ $ddl-bigger-small-list-font-size: 14px !default;
 @include export-module('dropdownlist-bootstrap') {
   #{&}.e-popup.e-ddl {
     border-radius: 4px;
-    box-shadow:  0 6px 12px $ddl-list-box-shadow-color;
+    box-shadow: 0 6px 12px $ddl-list-box-shadow-color;
     margin-top: 3px;
     @at-root {
       #{if(&, '&', '*')} .e-input-group {

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

@@ -1,4 +1,5 @@
 $ddl-input-font-size: 14px !default;
+
 // $ddl-input-border: $border-size $border-type !default;
 $ddl-input-font-family: inherit !default;
 $ddl-zero-value: 0 !default;
@@ -25,6 +26,7 @@ $ddl-icon-color: rgba($black, .5) !default;
 $ddl-icon-hover-color: rgba($black, .4) !default;
 $ddl-readonly-bg-color: $gray-200 !default;
 $ddl-filter-margin: 0 !default;
+
 // small size
 $ddl-small-list-font-size: 13px !default;
 
@@ -34,7 +36,7 @@ $ddl-bigger-small-list-font-size: 14px !default;
 @include export-module('dropdownlist-bootstrap4') {
   #{&}.e-popup.e-ddl {
     border-radius: 4px;
-    box-shadow:  none;
+    box-shadow: none;
     margin-top: 3px;
     @at-root {
       #{if(&, '&', '*')} .e-input-group {

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

@@ -17,6 +17,7 @@ $ddl-back-icon-padding: 0 8px !default;
 $ddl-popup-shadow: $shadow-lg !default;
 $ddl-readonly-bg-color: $content-bg-color-alt2 !default;
 $ddl-filter-margin: 0 !default;
+
 // Small Size
 $ddl-small-list-font-size: $text-xs !default;
 
@@ -38,7 +39,7 @@ $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
 @include export-module('dropdownlist-bootstrap5') {
   #{&}.e-popup.e-ddl {
     border-radius: 4px;
-    box-shadow:  none;
+    box-shadow: none;
     margin-top: 3px;
     @at-root {
       #{if(&, '&', '*')} .e-input-group {
@@ -126,7 +127,7 @@ $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
 
   .e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
   .e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
-  .e-float-input.e-ddl input[readonly]  ~ span.e-input-group-icon.e-ddl-icon,
+  .e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
   .e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
     background: transparent;
     color: $ddl-list-icon-color;
@@ -139,7 +140,6 @@ $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
     background: $content-bg-color-alt2;
   }
 
-
   .e-input-group:not(.e-disabled) .e-control#{&}.e-dropdownlist ~ .e-ddl-icon,
   .e-input-group.e-disabled.e-ddl .e-control#{&}.e-dropdownlist ~ .e-input-group-icon,
   .e-control#{&}.e-dropdownlist .e-input-group.e-disabled.e-ddl .e-input-group-icon,

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

@@ -1,4 +1,4 @@
-//default 
+//default
 $ddl-input-font-size: 14px !default;
 $ddl-input-border: $border-size $border-type !default;
 $ddl-input-font-family: inherit !default;
@@ -24,6 +24,7 @@ $ddl-filter-background-color: $neutral-white !default;
 $ddl-back-icon-margin: -2px 10px 0 -54px !default;
 $ddl-back-icon-padding: 0 !default;
 $ddl-filter-margin: 0 !default;
+
 //small size
 $ddl-small-list-font-size: 13px !default;
 

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

@@ -23,8 +23,10 @@ $ddl-filter-background-color: $neutral-white !default;
 $ddl-back-icon-margin: -2px 10px 0 -54px !default;
 $ddl-back-icon-padding: 0 !default;
 $ddl-filter-margin: 0 !default;
+
 //small size
 $ddl-small-list-font-size: 13px !default;
+
 // touch size
 $ddl-bigger-small-list-font-size: 14px !default;
 

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

@@ -18,6 +18,7 @@ $ddl-popup-shadow: $shadow-lg !default;
 $ddl-readonly-bg-color: $content-bg-color !default;
 $ddl-filter-parent-border: 1px solid $flyout-border !default;
 $ddl-filter-margin: 0 !default;
+
 // Small Size
 $ddl-small-list-font-size: $text-xs !default;
 
@@ -39,7 +40,7 @@ $ddl-filter-box-shadow: none !default;
 @include export-module('dropdownlist-bootstrap5') {
   #{&}.e-popup.e-ddl {
     border-radius: 4px;
-    box-shadow:  none;
+    box-shadow: none;
     margin-top: 1px;
     @at-root {
       #{if(&, '&', '*')} .e-input-group {

package/styles/drop-down-list/_fusionnew-definition.scss

@@ -17,6 +17,7 @@ $ddl-back-icon-padding: 0 8px !default;
 $ddl-popup-shadow: $shadow-lg !default;
 $ddl-readonly-bg-color: $content-bg-color-alt2 !default;
 $ddl-filter-margin: 0 !default;
+
 // Small Size
 $ddl-small-list-font-size: $text-xs !default;
 
@@ -38,7 +39,7 @@ $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
 @include export-module('dropdownlist-bootstrap5') {
   #{&}.e-popup.e-ddl {
     border-radius: 4px;
-    box-shadow:  none;
+    box-shadow: none;
     margin-top: 3px;
     @at-root {
       #{if(&, '&', '*')} .e-input-group {
@@ -126,7 +127,7 @@ $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
 
   .e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
   .e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
-  .e-float-input.e-ddl input[readonly]  ~ span.e-input-group-icon.e-ddl-icon,
+  .e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
   .e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
     background: transparent;
     color: $ddl-list-icon-color;
@@ -139,7 +140,6 @@ $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
     background: $content-bg-color-alt2;
   }
 
-
   .e-input-group:not(.e-disabled) .e-control#{&}.e-dropdownlist ~ .e-ddl-icon,
   .e-input-group.e-disabled.e-ddl .e-control#{&}.e-dropdownlist ~ .e-input-group-icon,
   .e-control#{&}.e-dropdownlist .e-input-group.e-disabled.e-ddl .e-input-group-icon,

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

@@ -23,8 +23,10 @@ $ddl-filter-background-color: $bg-base-0 !default;
 $ddl-back-icon-margin: -2px 10px 0 -54px !default;
 $ddl-back-icon-padding: 0 !default;
 $ddl-filter-margin: 0 !default;
+
 //small size
 $ddl-small-list-font-size: 13px !default;
+
 // touch size
 $ddl-bigger-small-list-font-size: 14px !default;
 
@@ -41,40 +43,49 @@ $ddl-bigger-small-list-font-size: 14px !default;
     #{if(&, '&', '*')}.e-popup {
       border: 0;
       box-shadow: 0 0 5px 0 $ddl-list-box-shadow-color;
-      margin-top: 1px;#{if(&, '&', '*')} .e-content.e-nodata {
+      margin-top: 1px;
+      #{if(&, '&', '*')} .e-content.e-nodata {
         background-color: $bg-base-0;
-      }#{if(&, '&', '*')} .e-dropdownbase {
+      }
+      #{if(&, '&', '*')} .e-dropdownbase {
         #{if(&, '&', '*')} .e-list-item {
           #{if(&, '&', '*')} .e-highlight {
             color: $header-font;
           }
         }
-      }#{if(&, '&', '*')} .e-input-group {
+      }
+      #{if(&, '&', '*')} .e-input-group {
         display: flex;
         width: auto;
         @at-root {
           #{if(&, '&', '*')} input {
             line-height: 15px;
           }
-        }#{if(&, '&', '*')} .e-clear-icon {
+        }
+        #{if(&, '&', '*')} .e-clear-icon {
           border-radius: 20px;
           height: 20px;
           margin: 5px;
           min-width: 20px;
-        }#{if(&, '&', '*')} .e-clear-icon {
+        }
+        #{if(&, '&', '*')} .e-clear-icon {
           #{if(&, '&', '*')}::before {
             font-size: 10px;
+          }
         }
       }
-      }#{if(&, '&', '*')} .e-filter-parent {
+      #{if(&, '&', '*')} .e-filter-parent {
         border-left-width: 0;
-        border-right-width: 0;#{if(&, '&', '*')} .e-input-group.e-control-wrapper:hover:active {
+        border-right-width: 0;
+        #{if(&, '&', '*')} .e-input-group.e-control-wrapper:hover:active {
           border-color: $border-fg;
         }
-      }.e-bigger #{if(&, '&', '*')} {
+      }
+      .e-bigger #{if(&, '&', '*')} {
         #{if(&, '&', '*')}.e-ddl-device.e-ddl-device-filter {
           margin-top: 0;
-        }#{if(&, '&', '*')} .e-list-item,
+        }
+        #{if(&, '&', '*')} .e-list-item,
         #{if(&, '&', '*')} .e-list-group-item,
         #{if(&, '&', '*')} .e-fixed-head {
           font-size: 15px;
@@ -98,7 +109,7 @@ $ddl-bigger-small-list-font-size: 14px !default;
             height: 46px;
           }
         }
-        }
+      }
 
       .e-bigger.e-small #{if(&, '&', '*')} {
         #{if(&, '&', '*')} .e-list-item,

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

@@ -1,4 +1,4 @@
-//default 
+//default
 $ddl-input-font-size: 14px !default;
 $ddl-input-border: $border-size $border-type !default;
 $ddl-input-font-family: inherit !default;
@@ -24,8 +24,10 @@ $ddl-filter-background-color: $bg-base-0 !default;
 $ddl-back-icon-margin: -2px 10px 0 -54px !default;
 $ddl-back-icon-padding: 0 !default;
 $ddl-filter-margin: 0 !default;
+
 //small size
 $ddl-small-list-font-size: 13px !default;
+
 // touch size
 $ddl-bigger-small-list-font-size: 14px !default;
 
@@ -43,40 +45,49 @@ $ddl-bigger-small-list-font-size: 14px !default;
     #{if(&, '&', '*')}.e-popup {
       border: 0;
       box-shadow: 0 0 5px 0 $ddl-list-box-shadow-color;
-      margin-top: 1px;#{if(&, '&', '*')} .e-content.e-nodata {
+      margin-top: 1px;
+      #{if(&, '&', '*')} .e-content.e-nodata {
         background-color: $bg-base-0;
-      }#{if(&, '&', '*')} .e-dropdownbase {
+      }
+      #{if(&, '&', '*')} .e-dropdownbase {
         #{if(&, '&', '*')} .e-list-item {
           #{if(&, '&', '*')} .e-highlight {
             color: $header-font;
           }
         }
-      }#{if(&, '&', '*')} .e-input-group {
+      }
+      #{if(&, '&', '*')} .e-input-group {
         display: flex;
         width: auto;
         @at-root {
           #{if(&, '&', '*')} input {
             line-height: 15px;
           }
-        }#{if(&, '&', '*')} .e-clear-icon {
+        }
+        #{if(&, '&', '*')} .e-clear-icon {
           border-radius: 20px;
           height: 20px;
           margin: 5px;
           min-width: 20px;
-        }#{if(&, '&', '*')} .e-clear-icon {
+        }
+        #{if(&, '&', '*')} .e-clear-icon {
           #{if(&, '&', '*')}::before {
             font-size: 10px;
+          }
         }
       }
-      }#{if(&, '&', '*')} .e-filter-parent {
+      #{if(&, '&', '*')} .e-filter-parent {
         border-left-width: 0;
-        border-right-width: 0;#{if(&, '&', '*')} .e-input-group.e-control-wrapper:hover:active {
+        border-right-width: 0;
+        #{if(&, '&', '*')} .e-input-group.e-control-wrapper:hover:active {
           border-color: $border-fg;
         }
-      }.e-bigger #{if(&, '&', '*')} {
+      }
+      .e-bigger #{if(&, '&', '*')} {
         #{if(&, '&', '*')}.e-ddl-device.e-ddl-device-filter {
           margin-top: 0;
-        }#{if(&, '&', '*')} .e-list-item,
+        }
+        #{if(&, '&', '*')} .e-list-item,
         #{if(&, '&', '*')} .e-list-group-item,
         #{if(&, '&', '*')} .e-fixed-head {
           font-size: 15px;
@@ -100,7 +111,7 @@ $ddl-bigger-small-list-font-size: 14px !default;
             height: 30px;
           }
         }
-        }
+      }
 
       .e-bigger.e-small #{if(&, '&', '*')} {
         #{if(&, '&', '*')} .e-list-item,

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

@@ -1,4 +1,4 @@
-@include export-module('dropdownlist-layout') {
+@include export-module('dropdownlist-layout') {
   .e-bigger .e-input-group.e-ddl {
     #{if(&, '&', '*')} .e-input-filter,
     #{if(&, '&', '*')} .e-input-filter:focus {
@@ -54,6 +54,9 @@
     #{&}.e-ddl.e-popup.e-ddl-device-filter {
       margin: $ddl-filter-margin;
     }
+    #{&}.e-ios {
+      position: fixed;
+    }
   }
 
   .e-ddl.e-control-wrapper .e-ddl-disable-icon {
@@ -68,7 +71,7 @@
     background-color: $ddl-filter-background-color;
   }
 
-  // sass-lint:disable no-vendor-prefixes
+  /* stylelint-disable property-no-vendor-prefix */
   .e-ddl input.e-input::-webkit-contacts-auto-fill-button {
     display: none;
     pointer-events: none;
@@ -76,7 +79,7 @@
     right: 0;
     visibility: hidden;
   }
-  // sass-lint:enable no-vendor-prefixes
+  /* stylelint-enable property-no-vendor-prefix */
 
   .e-filter-parent {
     border: $ddl-filter-border;
@@ -98,9 +101,9 @@
       #{if(&, '&', '*')} .e-input-group.e-input-focus::before,
       #{if(&, '&', '*')} .e-input-group.e-input-focus::after {
         width: 0;
-       }
-     }
-   }
+      }
+    }
+  }
 
   .e-ddl#{&}.e-popup {
     background: $ddl-popup-background-color;
@@ -140,7 +143,7 @@
     }
   }
 
-  // sass-lint:disable no-vendor-prefixes
+  /* stylelint-disable property-no-vendor-prefix */
   .e-ddl.e-input-group .e-ddl-hidden,
   .e-ddl.e-float-input .e-ddl-hidden {
     -webkit-appearance: initial;
@@ -222,7 +225,7 @@
     display: block;
   }
 
-  // Small Size 
+  // Small Size
 
   .e-small .e-ddl#{&}.e-popup,
   .e-input-group.e-ddl.e-small {
@@ -294,4 +297,3 @@
     min-height: 40px;
   }
 }
-

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

@@ -1,4 +1,4 @@
-//default 
+//default
 $ddl-input-font-size: 14px !default;
 $ddl-zero-value: 0 !default;
 $ddl-default-border-color: transparent !default;
@@ -23,6 +23,7 @@ $ddl-clear-icon-margin-right: 66px !default;
 $ddl-back-icon-margin: 0 10px 0 -52px !default;
 $ddl-back-icon-padding: 0 8px !default;
 $ddl-filter-margin: 0 !default;
+
 // Small Size
 
 $ddl-small-list-font-size: 12px !default;
@@ -139,5 +140,4 @@ $ddl-bigger-small-list-font-size: 13px !default;
   #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
     padding: 5px 5px 5px 12px;
   }
-
 }

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

@@ -23,6 +23,7 @@ $ddl-back-icon-margin: 0 10px 0 -52px !default;
 $ddl-back-icon-padding: 0 8px !default;
 $ddl-popup-shadow: 0 5px 5px -3px rgba($grey-light-font, .2), 0 8px 10px 1px rgba($grey-light-font, .14), 0 3px 14px 2px rgba($grey-light-font, .12) !default;
 $ddl-filter-margin: 0 !default;
+
 // Small Size
 $ddl-small-list-font-size: 12px !default;
 

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

@@ -17,6 +17,7 @@ $ddl-back-icon-padding: 0 8px !default;
 $ddl-popup-shadow: $shadow-lg !default;
 $ddl-readonly-bg-color: $content-bg-color-alt2 !default;
 $ddl-filter-margin: 0 !default;
+
 // Small Size
 $ddl-small-list-font-size: $text-xs !default;
 
@@ -38,7 +39,7 @@ $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
 @include export-module('dropdownlist-bootstrap5') {
   #{&}.e-popup.e-ddl {
     border-radius: 4px;
-    box-shadow:  none;
+    box-shadow: none;
     margin-top: 3px;
     @at-root {
       #{if(&, '&', '*')} .e-input-group {
@@ -126,7 +127,7 @@ $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
 
   .e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
   .e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
-  .e-float-input.e-ddl input[readonly]  ~ span.e-input-group-icon.e-ddl-icon,
+  .e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
   .e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
     background: transparent;
     color: $ddl-list-icon-color;
@@ -139,7 +140,6 @@ $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
     background: $content-bg-color-alt2;
   }
 
-
   .e-input-group:not(.e-disabled) .e-control#{&}.e-dropdownlist ~ .e-ddl-icon,
   .e-input-group.e-disabled.e-ddl .e-control#{&}.e-dropdownlist ~ .e-input-group-icon,
   .e-control#{&}.e-dropdownlist .e-input-group.e-disabled.e-ddl .e-input-group-icon,

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

@@ -17,6 +17,7 @@ $ddl-popup-shadow: $shadow-lg !default;
 $ddl-bigger-list-font-size: $text-base !default;
 $ddl-bigger-group-list-font-size: $text-sm !default;
 $ddl-filter-margin: 0 !default;
+
 // Small Size
 $ddl-small-list-font-size: $text-xs !default;
 $ddl-small-group-list-font-size: $text-xxs !default;

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

@@ -1,10 +1,10 @@
-@include export-module('dropdownlist-theme') {
+@include export-module('dropdownlist-theme') {
   #{&}.e-popup {
     border-color: $ddl-default-border-color;
   }
 
-  .e-float-input.e-input-group.e-ddl.e-control.e-icon-anim>.e-float-text,
-  .e-float-input.e-input-focus.e-input-group.e-ddl.e-control.e-keyboard>.e-float-text {
+  .e-float-input.e-input-group.e-ddl.e-control.e-icon-anim > .e-float-text,
+  .e-float-input.e-input-focus.e-input-group.e-ddl.e-control.e-keyboard > .e-float-text {
     color: $ddl-active-font-color;
   }
 }