@syncfusion/ej2-dropdowns 32.2.7 → 32.2.9

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 32.2.7
+*  version : 32.2.9
 *  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.9",
   "description": "Essential JS 2 DropDown Components",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,13 +8,13 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-dropdowns.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~32.2.6",
+    "@syncfusion/ej2-base": "~32.2.9",
     "@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.9",
     "@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

@@ -593,6 +593,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
     private isValueInList;
     private checkFieldValue;
     private checkAndFetchItemData;
+    private searchOfflineData;
     private updateActionCompleteDataValues;
     private addNewItem;
     protected updateActionCompleteData(li: HTMLElement, item: {
@@ -604,6 +605,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

@@ -2497,8 +2497,9 @@ var DropDownList = /** @class */ (function (_super) {
         });
         return checkField;
     };
-    DropDownList.prototype.checkAndFetchItemData = function (list, value, checkField) {
+    DropDownList.prototype.checkAndFetchItemData = function (list, value, checkField, isOffline) {
         var _this = this;
+        if (isOffline === void 0) { isOffline = false; }
         var fieldValue = this.fields.value.split('.');
         var checkVal = list.some(function (x) {
             return isNullOrUndefined(x[checkField]) && fieldValue.length > 1 ?
@@ -2511,27 +2512,67 @@ var DropDownList = /** @class */ (function (_super) {
             });
         }
         if (!checkVal && this.dataSource instanceof DataManager) {
-            (this.dataSource).executeQuery(this.getQuery(this.query).where(new Predicate(checkField, 'equal', value)))
-                .then(function (e) {
-                if (e.result.length > 0) {
-                    if (!_this.enableVirtualization) {
-                        _this.addItem(e.result, list.length);
+            if (isOffline) {
+                this.searchOfflineData(value, checkField);
+            }
+            else {
+                (this.dataSource).executeQuery(this.getQuery(this.query).where(new Predicate(checkField, 'equal', value)))
+                    .then(function (e) {
+                    if (e.result.length > 0) {
+                        if (!_this.enableVirtualization) {
+                            _this.addItem(e.result, list.length);
+                        }
+                        else {
+                            _this.itemData = e.result[0];
+                            var dataItem = _this.getItemData();
+                            if ((_this.value === dataItem.value && _this.text !== dataItem.text) ||
+                                (_this.value !== dataItem.value && _this.text === dataItem.text)) {
+                                _this.setProperties({ text: dataItem.text.toString() });
+                                Input.setValue(_this.text, _this.inputElement, _this.floatLabelType, _this.showClearButton);
+                            }
+                        }
+                        _this.updateValues();
                     }
                     else {
-                        _this.itemData = e.result[0];
-                        var dataItem = _this.getItemData();
-                        if ((_this.value === dataItem.value && _this.text !== dataItem.text) ||
-                            (_this.value !== dataItem.value && _this.text === dataItem.text)) {
-                            _this.setProperties({ text: dataItem.text.toString() });
-                            Input.setValue(_this.text, _this.inputElement, _this.floatLabelType, _this.showClearButton);
-                        }
+                        _this.updateValues();
                     }
-                    _this.updateValues();
-                }
-                else {
-                    _this.updateValues();
+                });
+            }
+        }
+        else {
+            this.updateValues();
+        }
+    };
+    DropDownList.prototype.searchOfflineData = function (value, checkField) {
+        var _this = this;
+        if (!(this.dataSource instanceof DataManager)) {
+            this.updateValues();
+            return;
+        }
+        var dataManager = this.dataSource;
+        var fullData = dataManager.dataSource.json || [];
+        if (fullData && fullData.length > 0) {
+            var foundItem = fullData.find(function (item) {
+                if (_this.fields.value && _this.fields.value.includes('.')) {
+                    var fieldValueArray = _this.fields.value.split('.');
+                    var fieldVal = _this.checkFieldValue(item, fieldValueArray);
+                    return fieldVal === value;
                 }
+                return item[checkField] === value;
             });
+            if (foundItem) {
+                this.itemData = foundItem;
+                var dataItem = this.getItemData();
+                if ((this.value === dataItem.value && this.text !== dataItem.text) ||
+                    (this.value !== dataItem.value && this.text === dataItem.text)) {
+                    this.setProperties({ text: dataItem.text.toString() });
+                    Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);
+                }
+                this.updateValues();
+            }
+            else {
+                this.updateValues();
+            }
         }
         else {
             this.updateValues();
@@ -2654,7 +2695,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 +2958,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 +3742,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);
@@ -3965,10 +4018,12 @@ var DropDownList = /** @class */ (function (_super) {
                     }
                     if (this_1.enableVirtualization) {
                         if (newProp.value && this_1.dataSource instanceof DataManager) {
+                            var isOfflineMode = this_1.dataSource instanceof DataManager &&
+                                this_1.dataSource.dataSource.offline === true;
                             var checkField = isNullOrUndefined(this_1.fields.value) ? this_1.fields.text : this_1.fields.value;
                             var value = this_1.allowObjectBinding && !isNullOrUndefined(newProp.value) ?
                                 getValue(checkField, newProp.value) : newProp.value;
-                            this_1.checkAndFetchItemData(this_1.listData, value, checkField);
+                            this_1.checkAndFetchItemData(this_1.listData, value, checkField, isOfflineMode);
                         }
                         this_1.updateValues();
                         this_1.updateInputFields();

package/src/multi-select/multi-select.js

@@ -2289,7 +2289,10 @@ var MultiSelect = /** @class */ (function (_super) {
                 }
             }
             else {
-                this.onActionComplete(list, this.mainData);
+                var listUl = this.list && this.list.querySelector('ul');
+                var isFullList = this.isReact && this.itemTemplate && listUl != null &&
+                    listUl.querySelectorAll('.e-list-item').length === this.mainData.length;
+                this.onActionComplete(isFullList ? listUl : list, this.mainData);
             }
             this.focusAtLastListItem(data);
             if (this.value && this.value.length) {
@@ -2521,9 +2524,13 @@ var MultiSelect = /** @class */ (function (_super) {
         addClass([element], CHIP_SELECTED);
         if (element) {
             element.setAttribute('id', this.element.id + '_chip_item');
-            if (!isNullOrUndefined(this.inputElement) && element.id && !this.inputElement.hasAttribute('aria-activedescendant')) {
+            if (!isNullOrUndefined(this.inputElement) && element.id) {
                 this.inputElement.setAttribute('aria-activedescendant', element.id);
             }
+            var chipClose = element.querySelector('span.' + CHIP_CLOSE.split(' ')[0]);
+            if (chipClose) {
+                chipClose.removeAttribute('aria-hidden');
+            }
         }
         this.trigger('chipSelection', e);
     };
@@ -2927,6 +2934,7 @@ var MultiSelect = /** @class */ (function (_super) {
         var _this = this;
         var list = this.listData;
         if (this.initStatus && !isNotTrigger && (!this.allowObjectBinding || (this.allowObjectBinding && value))) {
+            var selectAllArgsLocal_1 = null;
             value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
             var val_2 = dataValue ? dataValue : this.getDataByValue(value);
             var eventArgs = {
@@ -2943,15 +2951,13 @@ var MultiSelect = /** @class */ (function (_super) {
                         _this.selectAllEventEle.push(element);
                     }
                     if (length === 1) {
-                        var args = {
+                        selectAllArgsLocal_1 = {
                             event: eve,
                             items: _this.selectAllEventEle,
                             itemData: _this.selectAllEventData,
                             isInteracted: eve ? true : false,
                             isChecked: true
                         };
-                        _this.trigger('selectedAll', args);
-                        _this.selectAllEventData = [];
                     }
                     if (_this.allowCustomValue && _this.isServerRendered && _this.listData !== list) {
                         _this.listData = list;
@@ -2988,6 +2994,10 @@ var MultiSelect = /** @class */ (function (_super) {
                     if (_this.hideSelectedItem && _this.fixedHeaderElement && _this.fields.groupBy && _this.mode !== 'CheckBox') {
                         _super.prototype.scrollStop.call(_this);
                     }
+                    if (selectAllArgsLocal_1) {
+                        _this.trigger('selectedAll', selectAllArgsLocal_1);
+                        _this.selectAllEventData = [];
+                    }
                 }
             });
         }
@@ -3000,12 +3010,18 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.removeChipFocus = function () {
         var elements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP + '.' + CHIP_SELECTED);
         removeClass(elements, CHIP_SELECTED);
+        var closeElements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP_CLOSE.split(' ')[0]);
         if (Browser.isDevice) {
-            var closeElements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP_CLOSE.split(' ')[0]);
             for (var index = 0; index < closeElements.length; index++) {
+                closeElements[index].setAttribute('aria-hidden', 'true');
                 closeElements[index].style.display = 'none';
             }
         }
+        else {
+            for (var index = 0; index < closeElements.length; index++) {
+                closeElements[index].setAttribute('aria-hidden', 'true');
+            }
+        }
     };
     MultiSelect.prototype.onMobileChipInteraction = function (e) {
         var chipElem = closest(e.target, '.' + CHIP);
@@ -3046,7 +3062,7 @@ var MultiSelect = /** @class */ (function (_super) {
         });
         var compiledString;
         var chipContent = this.createElement('span', { className: CHIP_CONTENT });
-        var chipClose = this.createElement('span', { className: CHIP_CLOSE });
+        var chipClose = this.createElement('span', { className: CHIP_CLOSE, attrs: { 'aria-label': 'delete', 'aria-hidden': 'true', 'tabindex': '-1' } });
         if (this.mainData) {
             itemData = this.getDataByValue(value);
         }
@@ -4403,6 +4419,9 @@ var MultiSelect = /** @class */ (function (_super) {
                     }
                     else {
                         e.preventDefault();
+                        if (this.value.length === this.listData.length && this.isPopupOpen()) {
+                            this.hidePopup(e);
+                        }
                     }
                     var isFilterData = this.targetElement().trim() !== '' ? true : false;
                     this.makeTextBoxEmpty();
@@ -6048,7 +6067,7 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         else {
             this.chipCollectionWrapper = this.createElement('span', {
-                className: CHIP_WRAPPER
+                className: CHIP_WRAPPER, attrs: { role: 'listbox' }
             });
             this.chipCollectionWrapper.style.display = 'none';
             if (this.mode === 'Default') {

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));
 }