@syncfusion/ej2-dropdowns 32.2.7 → 32.2.8

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 32.2.7
+*  version : 32.2.8
 *  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-dropdowns",
-  "version": "32.2.7",
+  "version": "32.2.8",
   "description": "Essential JS 2 DropDown Components",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -10,11 +10,11 @@
   "dependencies": {
     "@syncfusion/ej2-base": "~32.2.6",
     "@syncfusion/ej2-data": "~32.2.3",
-    "@syncfusion/ej2-inputs": "~32.2.7",
+    "@syncfusion/ej2-inputs": "~32.2.8",
     "@syncfusion/ej2-lists": "~32.2.7",
-    "@syncfusion/ej2-navigations": "~32.2.7",
+    "@syncfusion/ej2-navigations": "~32.2.8",
     "@syncfusion/ej2-notifications": "~32.2.3",
-    "@syncfusion/ej2-popups": "~32.2.7"
+    "@syncfusion/ej2-popups": "~32.2.8"
   },
   "devDependencies": {},
   "keywords": [

package/src/common/virtual-scroll.js

@@ -156,7 +156,7 @@ var VirtualScroll = /** @class */ (function () {
         if (this.component === 'combobox') {
             var totalData = 0;
             if (this.parent.dataSource instanceof DataManager) {
-                totalData = this.parent.remoteDataCount;
+                totalData = this.parent.dataSource.dataSource.json.length;
             }
             else if (this.parent.dataSource && this.parent.dataSource.length > 0) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/drop-down-list/drop-down-list.d.ts

@@ -604,6 +604,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
     private updateSelectionList;
     protected removeFocus(): void;
     protected renderPopup(e?: MouseEvent | KeyboardEventArgs | TouchEvent | Object): void;
+    protected getAppendToElement(): HTMLElement;
     private checkCollision;
     private getOffsetValue;
     private createPopup;

package/src/drop-down-list/drop-down-list.js

@@ -2654,7 +2654,8 @@ var DropDownList = /** @class */ (function (_super) {
                     _this.setFooterTemplate(popupEle_1);
                     _this.isUpdateFooterHeight = _this.footer.offsetHeight !== 0;
                 }
-                document.body.appendChild(popupEle_1);
+                var appendToElement = _this.getAppendToElement();
+                appendToElement.appendChild(popupEle_1);
                 popupEle_1.style.top = '0px';
                 initialPopupHeight = popupEle_1.clientHeight;
                 if (_this.enableVirtualization && (_this.itemTemplate || _this.isAngular)) {
@@ -2916,6 +2917,16 @@ var DropDownList = /** @class */ (function (_super) {
             }
         });
     };
+    DropDownList.prototype.getAppendToElement = function () {
+        if (this.isAngular) {
+            var cdkPane = this.element && this.element.closest ? this.element.closest('.cdk-overlay-pane') : null;
+            var popoverEl = this.element && this.element.closest ? this.element.closest('[popover]') : null;
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    };
     DropDownList.prototype.checkCollision = function (popupEle) {
         if (!Browser.isDevice || (Browser.isDevice && !(this.getModuleName() === 'dropdownlist' || this.isDropDownClick))) {
             var collision = isCollide(popupEle);
@@ -3690,7 +3701,8 @@ var DropDownList = /** @class */ (function (_super) {
         var listParentHeight = formatUnit(this.popupHeight);
         listParent.style.height = (parseInt(listParentHeight, 10)).toString() + 'px';
         listParent.appendChild(item);
-        document.body.appendChild(listParent);
+        var appendToElement = this.getAppendToElement();
+        appendToElement.appendChild(listParent);
         this.virtualListHeight = listParent.getBoundingClientRect().height;
         var listItemHeight = Math.ceil(item.getBoundingClientRect().height) +
             parseInt(window.getComputedStyle(item).marginBottom, 10);

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

@@ -230,7 +230,6 @@
 }
 
 .e-mention.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border: 0;
   -webkit-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
@@ -402,7 +401,6 @@
 }
 .e-dropdownbase {
   border-color: #e0e0e0;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-dropdownbase .e-list-item {
@@ -417,7 +415,6 @@
   min-height: 32px;
   padding-right: 16px;
   text-indent: 16px;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 
@@ -434,7 +431,6 @@
   padding-right: 16px;
   overflow: hidden;
   text-overflow: ellipsis;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 
@@ -483,7 +479,6 @@
 }
 
 .e-multi-column.e-ddl.e-popup.e-popup-open .e-ddl-header {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border-color: #e0e0e0;
   border-style: solid;
@@ -543,7 +538,6 @@
 }
 
 .e-ddl.e-popup.e-multiselect-group .e-list-group-item {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border-bottom: 0;
   border-color: rgba(var(--color-sf-surface));

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

@@ -234,7 +234,6 @@
 }
 
 .e-mention.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border: 0;
   -webkit-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
@@ -408,7 +407,6 @@
 }
 .e-dropdownbase {
   border-color: #e0e0e0;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-dropdownbase .e-list-item {
@@ -423,7 +421,6 @@
   min-height: 32px;
   padding-right: 16px;
   text-indent: 16px;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 
@@ -440,7 +437,6 @@
   padding-right: 16px;
   overflow: hidden;
   text-overflow: ellipsis;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 
@@ -489,7 +485,6 @@
 }
 
 .e-multi-column.e-ddl.e-popup.e-popup-open .e-ddl-header {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-color: #e0e0e0;
   border-style: solid;
@@ -549,7 +544,6 @@
 }
 
 .e-ddl.e-popup.e-multiselect-group .e-list-group-item {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-bottom: 0;
   border-color: rgba(var(--color-sf-surface));

package/styles/drop-down-list/material3-dark.css

@@ -643,7 +643,6 @@
 }
 
 .e-ddl.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border-radius: calc(var(--e-radius) * 0.25);
   position: absolute;

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

@@ -647,7 +647,6 @@
 }
 
 .e-ddl.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-radius: calc(var(--e-radius) * 0.25);
   position: absolute;

package/styles/drop-down-tree/material3-dark.css

@@ -641,7 +641,6 @@
 /* 15px */
 /* 16px */
 .e-ddt .e-chips {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   border-color: rgba(var(--color-sf-outline));
   border: 1px solid;
@@ -656,7 +655,6 @@
   color: #757575;
 }
 .e-ddt.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border-color: rgba(var(--color-sf-outline-variant));
 }

package/styles/drop-down-tree/material3.css

@@ -647,7 +647,6 @@
 
 
 .e-ddt .e-chips {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-color: rgba(var(--color-sf-outline));
   border: 1px solid;
@@ -662,7 +661,6 @@
   color: #757575;
 }
 .e-ddt.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-color: rgba(var(--color-sf-outline-variant));
 }

package/styles/material3-dark-lite.css

@@ -230,7 +230,6 @@
 }
 
 .e-mention.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border: 0;
   -webkit-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
@@ -402,7 +401,6 @@
 }
 .e-dropdownbase {
   border-color: #e0e0e0;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-dropdownbase .e-list-item {
@@ -417,7 +415,6 @@
   min-height: 32px;
   padding-right: 16px;
   text-indent: 16px;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 
@@ -434,7 +431,6 @@
   padding-right: 16px;
   overflow: hidden;
   text-overflow: ellipsis;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 
@@ -483,7 +479,6 @@
 }
 
 .e-multi-column.e-ddl.e-popup.e-popup-open .e-ddl-header {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border-color: #e0e0e0;
   border-style: solid;
@@ -543,7 +538,6 @@
 }
 
 .e-ddl.e-popup.e-multiselect-group .e-list-group-item {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border-bottom: 0;
   border-color: rgba(var(--color-sf-surface));
@@ -1130,7 +1124,6 @@
 }
 
 .e-ddl.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border-radius: calc(var(--e-radius) * 0.25);
   position: absolute;
@@ -2012,7 +2005,6 @@ ejs-dropdownlist {
 /* 15px */
 /* 16px */
 .e-ddt .e-chips {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   border-color: rgba(var(--color-sf-outline));
   border: 1px solid;
@@ -2027,7 +2019,6 @@ ejs-dropdownlist {
   color: #757575;
 }
 .e-ddt.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border-color: rgba(var(--color-sf-outline-variant));
 }

package/styles/material3-dark.css

@@ -230,7 +230,6 @@
 }
 
 .e-mention.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border: 0;
   -webkit-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
@@ -402,7 +401,6 @@
 }
 .e-dropdownbase {
   border-color: #e0e0e0;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-dropdownbase .e-list-item {
@@ -417,7 +415,6 @@
   min-height: 32px;
   padding-right: 16px;
   text-indent: 16px;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 
@@ -434,7 +431,6 @@
   padding-right: 16px;
   overflow: hidden;
   text-overflow: ellipsis;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 
@@ -483,7 +479,6 @@
 }
 
 .e-multi-column.e-ddl.e-popup.e-popup-open .e-ddl-header {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border-color: #e0e0e0;
   border-style: solid;
@@ -543,7 +538,6 @@
 }
 
 .e-ddl.e-popup.e-multiselect-group .e-list-group-item {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border-bottom: 0;
   border-color: rgba(var(--color-sf-surface));
@@ -1294,7 +1288,6 @@
 }
 
 .e-ddl.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border-radius: calc(var(--e-radius) * 0.25);
   position: absolute;
@@ -2462,7 +2455,6 @@ ejs-dropdownlist {
 /* 15px */
 /* 16px */
 .e-ddt .e-chips {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.05)), to(rgba(var(--color-sf-primary), 0.05))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
   border-color: rgba(var(--color-sf-outline));
   border: 1px solid;
@@ -2477,7 +2469,6 @@ ejs-dropdownlist {
   color: #757575;
 }
 .e-ddt.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border-color: rgba(var(--color-sf-outline-variant));
 }

package/styles/material3-lite.css

@@ -234,7 +234,6 @@
 }
 
 .e-mention.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border: 0;
   -webkit-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
@@ -408,7 +407,6 @@
 }
 .e-dropdownbase {
   border-color: #e0e0e0;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-dropdownbase .e-list-item {
@@ -423,7 +421,6 @@
   min-height: 32px;
   padding-right: 16px;
   text-indent: 16px;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 
@@ -440,7 +437,6 @@
   padding-right: 16px;
   overflow: hidden;
   text-overflow: ellipsis;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 
@@ -489,7 +485,6 @@
 }
 
 .e-multi-column.e-ddl.e-popup.e-popup-open .e-ddl-header {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-color: #e0e0e0;
   border-style: solid;
@@ -549,7 +544,6 @@
 }
 
 .e-ddl.e-popup.e-multiselect-group .e-list-group-item {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-bottom: 0;
   border-color: rgba(var(--color-sf-surface));
@@ -1138,7 +1132,6 @@
 }
 
 .e-ddl.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-radius: calc(var(--e-radius) * 0.25);
   position: absolute;
@@ -2026,7 +2019,6 @@ ejs-dropdownlist {
 
 
 .e-ddt .e-chips {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-color: rgba(var(--color-sf-outline));
   border: 1px solid;
@@ -2041,7 +2033,6 @@ ejs-dropdownlist {
   color: #757575;
 }
 .e-ddt.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-color: rgba(var(--color-sf-outline-variant));
 }

package/styles/material3.css

@@ -234,7 +234,6 @@
 }
 
 .e-mention.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border: 0;
   -webkit-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.21);
@@ -408,7 +407,6 @@
 }
 .e-dropdownbase {
   border-color: #e0e0e0;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-dropdownbase .e-list-item {
@@ -423,7 +421,6 @@
   min-height: 32px;
   padding-right: 16px;
   text-indent: 16px;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 
@@ -440,7 +437,6 @@
   padding-right: 16px;
   overflow: hidden;
   text-overflow: ellipsis;
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 
@@ -489,7 +485,6 @@
 }
 
 .e-multi-column.e-ddl.e-popup.e-popup-open .e-ddl-header {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-color: #e0e0e0;
   border-style: solid;
@@ -549,7 +544,6 @@
 }
 
 .e-ddl.e-popup.e-multiselect-group .e-list-group-item {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-bottom: 0;
   border-color: rgba(var(--color-sf-surface));
@@ -1304,7 +1298,6 @@
 }
 
 .e-ddl.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-radius: calc(var(--e-radius) * 0.25);
   position: absolute;
@@ -2480,7 +2473,6 @@ ejs-dropdownlist {
 
 
 .e-ddt .e-chips {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-color: rgba(var(--color-sf-outline));
   border: 1px solid;
@@ -2495,7 +2487,6 @@ ejs-dropdownlist {
   color: #757575;
 }
 .e-ddt.e-popup {
-  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-color: rgba(var(--color-sf-outline-variant));
 }