@syncfusion/ej2-dropdowns 32.1.23 → 32.1.24

package/styles/drop-down-list/_bigger.material-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.material-dark';
+@import './_bigger';

package/styles/drop-down-list/_bigger.material.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.material';
+@import './_bigger';

package/styles/drop-down-list/_bigger.material3-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.material3-dark';
+@import './_bigger';

package/styles/drop-down-list/_bigger.material3.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.material3';
+@import './_bigger';

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

@@ -1,5 +1,4 @@
 @use 'ej2-base/styles/common/mixin' as *;
-@use './theme-variables' as *;
 @include export-module('dropdownlist-bigger') {
 
   .e-bigger .e-input-group.e-ddl {

package/styles/drop-down-list/_bigger.tailwind-dark.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.tailwind-dark';
+@import './_bigger';

package/styles/drop-down-list/_bigger.tailwind.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.tailwind';
+@import './_bigger';

package/styles/drop-down-list/_bigger.tailwind3.scss

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.tailwind3';
+@import './_bigger';

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

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.bds';
+@import './_layout';

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

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.bootstrap-dark';
+@import './_layout';

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

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.bootstrap';
+@import './_layout';

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

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.bootstrap4';
+@import './_layout';

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

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.bootstrap5-dark';
+@import './_layout';

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

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.bootstrap5.3';
+@import './_layout';

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

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.bootstrap5';
+@import './_layout';

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

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.fabric-dark';
+@import './_layout';

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

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.fabric';
+@import './_layout';

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

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.fluent-dark';
+@import './_layout';

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

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.fluent';
+@import './_layout';

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

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.fluent2';
+@import './_layout';

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

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.highcontrast-light';
+@import './_layout';

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

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.highcontrast';
+@import './_layout';

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

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.material-dark';
+@import './_layout';

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

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.material';
+@import './_layout';

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

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.material3-dark';
+@import './_layout';

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

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.material3';
+@import './_layout';

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

@@ -1,5 +1,4 @@
 @use 'ej2-base/styles/common/mixin' as *;
-@use './theme-variables' as *;
 @include export-module('dropdownlist-layout') {
 
   .e-ddl#{&}.e-popup {

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

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.tailwind-dark';
+@import './_layout';

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

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.tailwind';
+@import './_layout';

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

@@ -0,0 +1,3 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@import './_theme-variables.tailwind3';
+@import './_layout';

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

@@ -0,0 +1 @@
+@forward './_bds-definition';

package/styles/drop-down-list/_theme-variables.bootstrap-dark.scss

@@ -0,0 +1 @@
+@forward './_bootstrap-dark-definition';

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

@@ -0,0 +1 @@
+@forward './_bootstrap-definition';

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

@@ -0,0 +1 @@
+@forward './_bootstrap4-definition';

package/styles/drop-down-list/_theme-variables.bootstrap5-dark.scss

@@ -0,0 +1 @@
+@forward './_bootstrap5-dark-definition';

package/styles/drop-down-list/_theme-variables.bootstrap5.3.scss

@@ -0,0 +1 @@
+@forward './_bootstrap5.3-definition';

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

@@ -0,0 +1 @@
+@forward './_bootstrap5-definition';

package/styles/drop-down-list/_theme-variables.fabric-dark.scss

@@ -0,0 +1 @@
+@forward './_fabric-dark-definition';

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

@@ -0,0 +1 @@
+@forward './_fabric-definition';

package/styles/drop-down-list/_theme-variables.fluent-dark.scss

@@ -0,0 +1 @@
+@forward './_fluent-dark-definition';

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

@@ -0,0 +1 @@
+@forward './_fluent-definition';

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

@@ -0,0 +1 @@
+@forward './_fluent2-definition';

package/styles/drop-down-list/_theme-variables.highcontrast-light.scss

@@ -0,0 +1 @@
+@forward './_highcontrast-light-definition';

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

@@ -0,0 +1 @@
+@forward './_highcontrast-definition';

package/styles/drop-down-list/_theme-variables.material-dark.scss

@@ -0,0 +1 @@
+@forward './_material-dark-definition';

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

@@ -0,0 +1 @@
+@forward './_material-definition';

package/styles/drop-down-list/_theme-variables.material3-dark.scss

@@ -0,0 +1 @@
+@forward './_material3-dark-definition';

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

@@ -0,0 +1 @@
+@forward './_material3-definition';

package/styles/drop-down-list/_theme-variables.tailwind-dark.scss

@@ -0,0 +1 @@
+@forward './_tailwind-dark-definition';

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

@@ -0,0 +1 @@
+@forward './_tailwind-definition';

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

@@ -0,0 +1,4 @@
+@use 'sass:color';
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bds';
+@import './_theme';

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

@@ -0,0 +1,4 @@
+@use 'sass:color';
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bootstrap-dark';
+@import './_theme';

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

@@ -0,0 +1,4 @@
+@use 'sass:color';
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bootstrap';
+@import './_theme';

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

@@ -0,0 +1,4 @@
+@use 'sass:color';
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bootstrap4';
+@import './_theme';

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

@@ -0,0 +1,4 @@
+@use 'sass:color';
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bootstrap5-dark';
+@import './_theme';

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

@@ -0,0 +1,4 @@
+@use 'sass:color';
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bootstrap5.3';
+@import './_theme';

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

@@ -0,0 +1,4 @@
+@use 'sass:color';
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.bootstrap5';
+@import './_theme';

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

@@ -0,0 +1,4 @@
+@use 'sass:color';
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.fabric-dark';
+@import './_theme';

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

@@ -0,0 +1,4 @@
+@use 'sass:color';
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.fabric';
+@import './_theme';

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

@@ -0,0 +1,4 @@
+@use 'sass:color';
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.fluent-dark';
+@import './_theme';

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

@@ -0,0 +1,4 @@
+@use 'sass:color';
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.fluent';
+@import './_theme';

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

@@ -0,0 +1,4 @@
+@use 'sass:color';
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.fluent2';
+@import './_theme';

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

@@ -0,0 +1,4 @@
+@use 'sass:color';
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.highcontrast-light';
+@import './_theme';

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

@@ -0,0 +1,4 @@
+@use 'sass:color';
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.highcontrast';
+@import './_theme';

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

@@ -0,0 +1,4 @@
+@use 'sass:color';
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.material-dark';
+@import './_theme';

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

@@ -0,0 +1,4 @@
+@use 'sass:color';
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.material';
+@import './_theme';

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

@@ -0,0 +1,4 @@
+@use 'sass:color';
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.material3-dark';
+@import './_theme';

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

@@ -0,0 +1,4 @@
+@use 'sass:color';
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.material3';
+@import './_theme';

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

@@ -1,5 +1,4 @@
 @use 'ej2-base/styles/common/mixin' as *;
-@use './theme-variables' as *;
 @include export-module('dropdownlist-theme') {
   #{&}.e-popup {
     border-color: $ddl-default-border-color;

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

@@ -0,0 +1,4 @@
+@use 'sass:color';
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.tailwind-dark';
+@import './_theme';

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

@@ -0,0 +1,4 @@
+@use 'sass:color';
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.tailwind';
+@import './_theme';

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

@@ -0,0 +1,4 @@
+@use 'sass:color';
+@use 'ej2-base/styles/common/mixin' as *;
+@import './theme-variables.tailwind3';
+@import './_theme';

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

@@ -304,6 +304,167 @@
   font-family: "e-icons";
 }
 
+
+
+
+
+.e-ddl.e-control-wrapper .e-ddl-icon::before {
+  -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+  -webkit-transition: -webkit-transform 300ms ease;
+  transition: -webkit-transform 300ms ease;
+  transition: transform 300ms ease;
+  transition: transform 300ms ease, -webkit-transform 300ms ease;
+}
+
+.e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+  -webkit-transition: -webkit-transform 300ms ease;
+  transition: -webkit-transform 300ms ease;
+  transition: transform 300ms ease;
+  transition: transform 300ms ease, -webkit-transform 300ms ease;
+}
+
+.e-dropdownbase .e-list-item.e-active.e-hover {
+  color: var(--color-sf-text-primary);
+}
+
+.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
+.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
+.e-input-group:not(.e-disabled) .e-back-icon:active,
+.e-input-group:not(.e-disabled) .e-back-icon:hover,
+.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:active,
+.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:hover {
+  background: transparent;
+}
+
+.e-input-group .e-ddl-icon:not(:active)::after {
+  -webkit-animation: none;
+          animation: none;
+}
+
+.e-ddl.e-popup {
+  border: 0;
+  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);
+  margin-top: 4px;
+}
+
+.e-small .e-ddl.e-popup,
+.e-small.e-ddl.e-popup {
+  border-radius: 4px;
+  margin-top: 2px;
+}
+
+.e-popup.e-ddl .e-dropdownbase {
+  min-height: 26px;
+  padding: 4px 6px;
+}
+
+.e-input-group.e-ddl,
+.e-input-group.e-ddl .e-input,
+.e-input-group.e-ddl .e-ddl-icon {
+  background: var(--color-sf-bg-primary);
+}
+
+.e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group:hover:not(.e-disabled):not(.e-float-icon-left),
+.e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group.e-control-wrapper:hover:not(.e-disabled):not(.e-float-icon-left) {
+  border-bottom-width: 0;
+}
+
+.e-ddl.e-popup.e-outline .e-filter-parent {
+  padding: 4px 8px;
+}
+
+.e-popup {
+  border-color: var(--color-sf-border-secondary);
+}
+
+.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: var(--color-sf-text-primary);
+}
+
+.e-ddl.e-popup .e-filter-parent .e-input-group input.e-input-filter {
+  border-color: transparent;
+}
+
+
+
+
+
+.e-ddl.e-control-wrapper .e-ddl-icon::before {
+  -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+  -webkit-transition: -webkit-transform 300ms ease;
+  transition: -webkit-transform 300ms ease;
+  transition: transform 300ms ease;
+  transition: transform 300ms ease, -webkit-transform 300ms ease;
+}
+
+.e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+  -webkit-transition: -webkit-transform 300ms ease;
+  transition: -webkit-transform 300ms ease;
+  transition: transform 300ms ease;
+  transition: transform 300ms ease, -webkit-transform 300ms ease;
+}
+
+.e-dropdownbase .e-list-item.e-active.e-hover {
+  color: var(--color-sf-text-primary);
+}
+
+.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
+.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
+.e-input-group:not(.e-disabled) .e-back-icon:active,
+.e-input-group:not(.e-disabled) .e-back-icon:hover,
+.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:active,
+.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:hover {
+  background: transparent;
+}
+
+.e-input-group .e-ddl-icon:not(:active)::after {
+  -webkit-animation: none;
+          animation: none;
+}
+
+.e-ddl.e-popup {
+  border: 0;
+  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);
+  margin-top: 4px;
+}
+
+.e-small .e-ddl.e-popup,
+.e-small.e-ddl.e-popup {
+  border-radius: 4px;
+  margin-top: 2px;
+}
+
+.e-popup.e-ddl .e-dropdownbase {
+  min-height: 26px;
+  padding: 4px 6px;
+}
+
+.e-input-group.e-ddl,
+.e-input-group.e-ddl .e-input,
+.e-input-group.e-ddl .e-ddl-icon {
+  background: var(--color-sf-bg-primary);
+}
+
+.e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group:hover:not(.e-disabled):not(.e-float-icon-left),
+.e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group.e-control-wrapper:hover:not(.e-disabled):not(.e-float-icon-left) {
+  border-bottom-width: 0;
+}
+
+.e-ddl.e-popup.e-outline .e-filter-parent {
+  padding: 4px 8px;
+}
+
 .e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
   width: 100%;
   border: 0 solid;
@@ -519,17 +680,78 @@ ejs-dropdownlist {
   width: 15px;
 }
 
-.e-popup {
-  border-color: var(--color-sf-border-secondary);
+
+
+
+
+.e-ddl.e-control-wrapper .e-ddl-icon::before {
+  -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+  -webkit-transition: -webkit-transform 300ms ease;
+  transition: -webkit-transform 300ms ease;
+  transition: transform 300ms ease;
+  transition: transform 300ms ease, -webkit-transform 300ms ease;
 }
 
-.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-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+  -webkit-transition: -webkit-transform 300ms ease;
+  transition: -webkit-transform 300ms ease;
+  transition: transform 300ms ease;
+  transition: transform 300ms ease, -webkit-transform 300ms ease;
+}
+
+.e-dropdownbase .e-list-item.e-active.e-hover {
   color: var(--color-sf-text-primary);
 }
 
-.e-ddl.e-popup .e-filter-parent .e-input-group input.e-input-filter {
-  border-color: transparent;
+.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
+.e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
+.e-input-group:not(.e-disabled) .e-back-icon:active,
+.e-input-group:not(.e-disabled) .e-back-icon:hover,
+.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:active,
+.e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:hover {
+  background: transparent;
+}
+
+.e-input-group .e-ddl-icon:not(:active)::after {
+  -webkit-animation: none;
+          animation: none;
+}
+
+.e-ddl.e-popup {
+  border: 0;
+  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);
+  margin-top: 4px;
+}
+
+.e-small .e-ddl.e-popup,
+.e-small.e-ddl.e-popup {
+  border-radius: 4px;
+  margin-top: 2px;
+}
+
+.e-popup.e-ddl .e-dropdownbase {
+  min-height: 26px;
+  padding: 4px 6px;
+}
+
+.e-input-group.e-ddl,
+.e-input-group.e-ddl .e-input,
+.e-input-group.e-ddl .e-ddl-icon {
+  background: var(--color-sf-bg-primary);
+}
+
+.e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group:hover:not(.e-disabled):not(.e-float-icon-left),
+.e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group.e-control-wrapper:hover:not(.e-disabled):not(.e-float-icon-left) {
+  border-bottom-width: 0;
+}
+
+.e-ddl.e-popup.e-outline .e-filter-parent {
+  padding: 4px 8px;
 }
 
 .e-bigger .e-input-group.e-ddl .e-input-filter, .e-bigger .e-input-group.e-ddl .e-input-filter:focus {

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

@@ -6,5 +6,5 @@
 @use '../drop-down-base/bds-definition' as *;
 @use 'bds-definition' as *;
 @use 'icons/bds' as *;
-@use 'all' as *;
-@use 'bigger' as *;
+@use 'all.bds' as *;
+@use 'bigger.bds' as *;