@syncfusion/ej2-navigations 32.1.24 → 32.2.6

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 32.1.24
+*  version : 32.2.3
 *  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-navigations",
-  "version": "32.1.24",
+  "version": "32.2.6",
   "description": "A package of Essential JS 2 navigation components such as Tree-view, Tab, Toolbar, Context-menu, and Accordion which is used to navigate from one page to another",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,12 +8,12 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-navigations.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~32.1.24",
-    "@syncfusion/ej2-buttons": "~32.1.24",
-    "@syncfusion/ej2-data": "~32.1.24",
-    "@syncfusion/ej2-inputs": "~32.1.24",
-    "@syncfusion/ej2-lists": "~32.1.24",
-    "@syncfusion/ej2-popups": "~32.1.24"
+    "@syncfusion/ej2-base": "~32.2.6",
+    "@syncfusion/ej2-buttons": "~32.2.3",
+    "@syncfusion/ej2-data": "~32.2.3",
+    "@syncfusion/ej2-inputs": "~32.2.3",
+    "@syncfusion/ej2-lists": "~32.2.6",
+    "@syncfusion/ej2-popups": "~32.2.6"
   },
   "devDependencies": {},
   "keywords": [

package/src/treeview/treeview.d.ts

@@ -1518,4 +1518,5 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
      */
     uncheckAll(nodes?: string[] | Element[]): void;
     private setNodeFocusable;
+    private escapeHashInUid;
 }

package/src/treeview/treeview.js

@@ -847,7 +847,7 @@ var TreeView = /** @class */ (function (_super) {
         };
         if (!this.isRefreshed) {
             this.trigger('drawNode', eventArgs);
-            if (e.curData[this.fields.selectable] === false && !this.showCheckBox) {
+            if (e.curData[this.fields.selectable] === false) {
                 e.item.classList.add(PREVENTSELECT);
                 var firstChild = e.item.firstElementChild;
                 firstChild.style.cursor = 'not-allowed';
@@ -1659,7 +1659,8 @@ var TreeView = /** @class */ (function (_super) {
             }
             else {
                 for (var i = 0; i < eUids.length; i++) {
-                    var eNode = select('[data-uid="' + eUids[parseInt(i.toString(), 10)] + '"]', this.element);
+                    var uid = this.escapeHashInUid(eUids[parseInt(i.toString(), 10)]);
+                    var eNode = select('[data-uid="' + uid + '"]', this.element);
                     if (!isNOU(eNode)) {
                         var icon = select('.' + EXPANDABLE, select('.' + TEXTWRAP, eNode));
                         if (!isNOU(icon)) {
@@ -1696,7 +1697,8 @@ var TreeView = /** @class */ (function (_super) {
         }
     };
     TreeView.prototype.expandCallback = function (eUid, callback) {
-        var eNode = select('[data-uid="' + eUid + '"]', this.element);
+        var uid = this.escapeHashInUid(eUid);
+        var eNode = select('[data-uid="' + uid + '"]', this.element);
         if (!isNOU(eNode)) {
             var icon = select('.' + EXPANDABLE, select('.' + TEXTWRAP, eNode));
             if (!isNOU(icon)) {
@@ -1726,7 +1728,8 @@ var TreeView = /** @class */ (function (_super) {
         if (sUids.length > 0) {
             this.setProperties({ selectedNodes: [] }, true);
             for (var i = 0; i < sUids.length; i++) {
-                var sNode = select('[data-uid="' + sUids[parseInt(i.toString(), 10)] + '"]', this.element);
+                var uid = this.escapeHashInUid(sUids[parseInt(i.toString(), 10)]);
+                var sNode = select('[data-uid="' + uid + '"]', this.element);
                 if (sNode && !(sNode.classList.contains('e-active'))) {
                     this.selectNode(sNode, null, true);
                 }
@@ -2695,6 +2698,12 @@ var TreeView = /** @class */ (function (_super) {
     TreeView.prototype.validateCheckNode = function (checkWrap, isCheck, li, e) {
         var _this = this;
         var currLi = closest(checkWrap, '.' + LISTITEM);
+        if (currLi && currLi.classList.contains(PREVENTSELECT) && this.showCheckBox) {
+            if (e && e.preventDefault) {
+                e.preventDefault();
+            }
+            return;
+        }
         this.checkActionNodes = [];
         var ariaState = !isCheck ? 'true' : 'false';
         if (!isNOU(ariaState)) {
@@ -5772,6 +5781,15 @@ var TreeView = /** @class */ (function (_super) {
             this.updateIdAttr(null, firstNode);
         }
     };
+    TreeView.prototype.escapeHashInUid = function (uid) {
+        if (isNOU(uid)) {
+            return uid;
+        }
+        if (typeof uid === 'string' && uid.indexOf(' #') !== -1) {
+            return uid.split(' #').join(' \\#');
+        }
+        return uid;
+    };
     var TreeView_1;
     __decorate([
         Property(false)

package/styles/accordion/_material3-dark-definition.scss

@@ -1,10 +1,26 @@
 @use 'ej2-base/styles/definition/material3-dark' as *;
 @forward 'ej2-base/styles/definition/material3-dark';
+$acrdn-header-bg-color: $transparent !default;
+$acrdn-header-text-color: $on-surface !default;
+$acrdn-header-text-color-selected: $on-surface !default;
+$acrdn-header-icon-color: $icon-color !default;
+$acrdn-header-bg-color-hover: $content-bg-color-hover !default;
+$acrdn-header-text-color-hover: $on-surface !default;
+$acrdn-header-icon-color-hover: $primary !default;
+$acrdn-header-bg-color-focus: $content-bg-color-focus !default;
+$acrdn-header-text-color-focus: $on-surface !default;
+$acrdn-header-icon-color-focus: $icon-color-hover !default;
+$acrdn-header-bg-color-active: $transparent !default;
+$acrdn-header-text-color-active: $primary !default;
+$acrdn-header-icon-color-active: $on-surface !default;
+$acrdn-header-bg-color-disabled: $transparent !default;
+$acrdn-header-text-color-disabled: $content-text-color-disabled !default;
+$acrdn-header-icon-color-disabled: $icon-color-disabled !default;
 $acrdn-skin: 'material3' !default;
 $acrdn-icon-font-size: $text-base !default;
 $acrdn-slct-header-font-weight: 500;
-$acrdn-header-font: rgba($content-text-color) !default;
-$acrdn-nested-header-font: rgba($content-text-color) !default;
+$acrdn-header-font: rgba($acrdn-header-text-color) !default;
+$acrdn-nested-header-font: rgba($acrdn-header-text-color-selected) !default;
 $acrdn-header-font-weight: 500 !default;
 $acrdn-header-font-size: $text-sm !default;
 $acrdn-nest-header-font-size: $text-sm !default;
@@ -16,7 +32,7 @@ $acrdn-content-font-bgr-size: $text-base !default;
 $acrdn-bgr-arrow-icon-font-size: $text-xl;
 $acrdn-bgr-item-header-content-font-size: $text-base !default;
 $acrdn-icon-font-size: $text-base !default;
-$acrdn-selected-header-font-color: rgba($content-text-color) !default;
+$acrdn-selected-header-font-color: rgba($acrdn-header-text-color-selected) !default;
 $acrdn-nest-nrml-header-padding: 8px 0 8px 26px !default;
 $acrdn-nest-bgr-header-padding: 12px 0 12px 28px !default;
 $acrdn-nest-second-nrml-header-padding: 8px 0 8px 38px !default;
@@ -76,16 +92,16 @@ $acrdn-active-bg: rgba($content-bg-color, .0001) !default;
 $acrdn-bg-color: $transparent !default;
 $acrdn-default-bg-color: $acrdn-bg-color !default;
 $acrdn-active-bg-color: $acrdn-active-bg !default;
-$acrdn-selected-header-color: $transparent !default;
-$acrdn-icon-color: rgba($icon-color) !default;
-$acrdn-selected-icon-color: rgba($icon-color) !default;
+$acrdn-selected-header-color: $acrdn-header-bg-color !default;
+$acrdn-icon-color: rgba($acrdn-header-icon-color) !default;
+$acrdn-selected-icon-color: rgba($acrdn-header-icon-color) !default;
 $acrdn-content-color: rgba($content-text-color) !default;
 $acrdn-selected-border-color: rgba($border-light) !default;
-$acrdn-header-focus-bg: $content-bg-color-focus !default;
-$acrdn-header-hover-bg: $content-bg-color-hover !default;
-$acrdn-header-active-bg: $transparent !default;
+$acrdn-header-focus-bg: $acrdn-header-bg-color-focus !default;
+$acrdn-header-hover-bg: $acrdn-header-bg-color-hover !default;
+$acrdn-header-active-bg: $acrdn-header-bg-color-active !default;
 $acrdn-item-header-focus-border-color: rgba($border-light) !default;
-$acrdn-item-icon-disable-color: $icon-color-disabled !default;
+$acrdn-item-icon-disable-color: $acrdn-header-icon-color-disabled !default;
 $acrdn-text-disable-color: $content-text-color-disabled !default;
 $acrdn-default-border: $acrdn-selected-border-color !default;
 $acrdn-item-border-color: $acrdn-default-border !default;
@@ -102,7 +118,7 @@ $acrdn-item-focus-selected-exp-border-top: 1px none $acrdn-default-border !defau
 $acrdn-item-focus-selected-exp-hdr-focus-border-color: $acrdn-default-border !default;
 $acrdn-item-focus-selected-exp-hdr-focus-border-type: solid !default;
 $acrdn-item-focus-selected-exp-hdr-focus-border-size:  0 0 1px 0 !default;
-$acrdn-item-focus-exp-hdr-hover-focus-bg-color: $content-bg-color-hover !default;
+$acrdn-item-focus-exp-hdr-hover-focus-bg-color: $acrdn-header-bg-color-hover !default;
 $acrdn-item-focus-exp-hdr-hover-focus-color: $acrdn-selected-header-font-color !default;
 $acrdn-item-focus-selected-hdr-icons-font: $acrdn-selected-header-font-color !default;
 $acrdn-item-focus-exp-hdricon-hover-font: $acrdn-icon-color !default;
@@ -110,15 +126,15 @@ $acrdn-item-focus-selected-exp-border-color: $acrdn-default-border !default;
 $acrdn-item-exp-select-border-color: $acrdn-default-border !default;
 $acrdn-item-exp-select-border-size: 0 0 1px 0 !default;
 $acrdn-item-header-border: 0 !default;
-$acrdn-item-select-exp-hdr-con-disable-font: $content-text-color-disabled !default;
-$acrdn-item-header-content-disable-color: rgba($content-text-color) !default;
-$acrdn-item-hdr-con-text-disabled-font: $content-text-color-disabled !default;
+$acrdn-item-select-exp-hdr-con-disable-font: $acrdn-header-text-color-disabled !default;
+$acrdn-item-header-content-disable-color: rgba($acrdn-header-text-color) !default;
+$acrdn-item-hdr-con-text-disabled-font: $acrdn-header-text-color-disabled !default;
 $acrdn-item-selected-exp-hdr-focus-border-color: rgba($border-light) !default;
 $acrdn-item-selected-exp-hdr-focus-border-type: solid !default;
 $acrdn-item-selected-exp-hdr-focus-border-size: 0 0 1px 0 !default;
-$acrdn-item-selected-exp-hdr-focus-bg: $content-bg-color-focus !default;
-$acrdn-item-selected-exp-hdr-hover-bg: $content-bg-color-hover !default;
-$acrdn-item-selected-exp-hdr-active-bg: $transparent !default;
+$acrdn-item-selected-exp-hdr-focus-bg: $acrdn-header-bg-color-focus !default;
+$acrdn-item-selected-exp-hdr-hover-bg: $acrdn-header-bg-color-hover !default;
+$acrdn-item-selected-exp-hdr-active-bg: $acrdn-header-bg-color-active !default;
 $acrdn-item-nes-pan-con-last-child-border-bottom: 1px none $acrdn-selected-border-color !default;
 $acrdn-item-select-bg: none !default;
 $acrdn-item-select-border-color: rgba($border-light) !default;
@@ -127,45 +143,45 @@ $acrdn-item-panel-content-select-bg: none !default;
 $acrdn-item-panel-content-select-border-top: 0 !default;
 $acrdn-item-panel-content-select-border-bottom: 0 !default;
 $acrdn-item-header-hover-border: 0 !default;
-$acrdn-item-header-hover-bg: $content-bg-color-hover !default;
+$acrdn-item-header-hover-bg: $acrdn-header-bg-color-hover !default;
 $acrdn-item-header-hover-border-color: initial !default;
 $acrdn-item-header-active-border: 0 !default;
 $acrdn-item-header-active-border-color: initial !default;
 $acrdn-item-header-focus-border: 0 !default;
 $acrdn-item-header-focus-box-shadow: $shadow-focus-ring1 !default;
-$acrdn-item-header-focus-bg: $content-bg-color-focus !default;
-$acrdn-item-header-focus-active-color: rgba($content-text-color) !default;
-$acrdn-item-select-exp-hdr-hover-color: rgba($content-text-color) !default;
+$acrdn-item-header-focus-bg: $acrdn-header-bg-color-focus !default;
+$acrdn-item-header-focus-active-color: rgba($acrdn-header-text-color-focus) !default;
+$acrdn-item-select-exp-hdr-hover-color: rgba($acrdn-header-text-color-hover) !default;
 $acrdn-item-selected-exp-hdr-border-color: rgba($border-light) !default;
 $acrdn-item-selected-exp-hdr-border-size: 0 !default;
-$acrdn-item-selected-exp-hdr-bg: $transparent !default;
-$acrdn-item-selected-exp-hdr-hover-color: rgba($content-text-color) !default;
-$acrdn-item-selected-exp-hdr-hover-focus-color: rgba($content-text-color) !default;
-$acrdn-item-selected-exp-hdr-icon-color: rgba($icon-color) !default;
+$acrdn-item-selected-exp-hdr-bg: $acrdn-header-bg-color !default;
+$acrdn-item-selected-exp-hdr-hover-color: rgba($acrdn-header-text-color-hover) !default;
+$acrdn-item-selected-exp-hdr-hover-focus-color: rgba($acrdn-header-text-color-focus) !default;
+$acrdn-item-selected-exp-hdr-icon-color: rgba($acrdn-header-icon-color) !default;
 $acrdn-item-selected-exp-hdr-hover-border-color: rgba($border-light) !default;
 $acrdn-item-selected-tgl-icon-color: rgba($content-text-color) !default;
-$acrdn-item-selected-hdr-font: rgba($content-text-color) !default;
+$acrdn-item-selected-hdr-font: rgba($acrdn-header-text-color-selected) !default;
 $acrdn-item-select-hdr-focus-border-color: rgba($border-light) !default;
 $acrdn-item-selected-border-color: rgba($border-light) !default;
 $acrdn-item-selected-border-size: 0 0 1px 0 !default;
 $acrdn-item-selected-select-last-border-bottom: 1px none rgba($border-light) !default;
 $acrdn-item-selected-selected-border-color: rgba($border-light) !default;
 $acrdn-item-selected-selected-border-size: 0 0 1px 0 !default;
-$acrdn-item-selected-header-background: $transparent !default;
+$acrdn-item-selected-header-background: $acrdn-header-bg-color !default;
 $acrdn-item-selected-hdr-border-color: rgba($border-light) !default;
 $acrdn-item-selected-hdr-border-size:  0 !default;
 $acrdn-item-selected-header-border-radius: 0 !default;
-$acrdn-item-selected-hdr-con-font: rgba($primary) !default;
+$acrdn-item-selected-hdr-con-font: rgba($acrdn-header-text-color-active) !default;
 $acrdn-item-selected-select-border-color: rgba($border-light) !default;
 $acrdn-item-selected-select-border-size: 0 0 1px 0 !default;
-$acrdn-item-selected-hdr-icon-font: rgba($primary) !default;
-$acrdn-item-selected-exp-hdr-con-hover-color: rgba($content-text-color) !default;
-$acrdn-item-selected-exp-hdr-icon-hover-color: rgba($icon-color) !default;
-$acrdn-item-selected-select-active-bg: $transparent !default;
-$acrdn-item-nes-pan-exp-hdr-color: rgba($content-text-color) !default;
+$acrdn-item-selected-hdr-icon-font: rgba($acrdn-header-icon-color-hover) !default;
+$acrdn-item-selected-exp-hdr-con-hover-color: rgba($acrdn-header-text-color-hover) !default;
+$acrdn-item-selected-exp-hdr-icon-hover-color: rgba($acrdn-header-icon-color) !default;
+$acrdn-item-selected-select-active-bg: $acrdn-header-bg-color-active !default;
+$acrdn-item-nes-pan-exp-hdr-color: rgba($acrdn-header-text-color-selected) !default;
 $acrdn-item-selected-hdr-hover-border-color: rgba($border-light) !default;
-$acrdn-item-selected-hdr-tgl-icon-hover-font: rgba($primary) !default;
-$acrdn-item-nes-selected-exp-hover-hdr-icons-font: rgba($primary) !default;
+$acrdn-item-selected-hdr-tgl-icon-hover-font: rgba($acrdn-header-icon-color-hover) !default;
+$acrdn-item-nes-selected-exp-hover-hdr-icons-font: rgba($acrdn-header-icon-color-hover) !default;
 $acrdn-item-nes-selected-exp-hover-hdr-con-font: rgba($content-text-color) !default;
 $acrdn-item-exp-not-selected-hdr-focus-bg: none !default;
 $acrdn-item-exp-not-selected-hdr-focus-border: 0 !default;

package/styles/accordion/_material3-definition.scss

@@ -1,10 +1,26 @@
 @use 'ej2-base/styles/definition/material3' as *;
 @forward 'ej2-base/styles/definition/material3';
+$acrdn-header-bg-color: $transparent !default;
+$acrdn-header-text-color: $on-surface !default;
+$acrdn-header-text-color-selected: $on-surface !default;
+$acrdn-header-icon-color: $icon-color !default;
+$acrdn-header-bg-color-hover: $content-bg-color-hover !default;
+$acrdn-header-text-color-hover: $on-surface !default;
+$acrdn-header-icon-color-hover: $primary !default;
+$acrdn-header-bg-color-focus: $content-bg-color-focus !default;
+$acrdn-header-text-color-focus: $on-surface !default;
+$acrdn-header-icon-color-focus: $icon-color-hover !default;
+$acrdn-header-bg-color-active: $transparent !default;
+$acrdn-header-text-color-active: $primary !default;
+$acrdn-header-icon-color-active: $on-surface !default;
+$acrdn-header-bg-color-disabled: $transparent !default;
+$acrdn-header-text-color-disabled: $content-text-color-disabled !default;
+$acrdn-header-icon-color-disabled: $icon-color-disabled !default;
 $acrdn-skin: 'material3' !default;
 $acrdn-icon-font-size: $text-base !default;
 $acrdn-slct-header-font-weight: 500;
-$acrdn-header-font: rgba($content-text-color) !default;
-$acrdn-nested-header-font: rgba($content-text-color) !default;
+$acrdn-header-font: rgba($acrdn-header-text-color) !default;
+$acrdn-nested-header-font: rgba($acrdn-header-text-color-selected) !default;
 $acrdn-header-font-weight: 500 !default;
 $acrdn-header-font-size: $text-sm !default;
 $acrdn-nest-header-font-size: $text-sm !default;
@@ -16,7 +32,7 @@ $acrdn-content-font-bgr-size: $text-base !default;
 $acrdn-bgr-arrow-icon-font-size: $text-xl;
 $acrdn-bgr-item-header-content-font-size: $text-base !default;
 $acrdn-icon-font-size: $text-base !default;
-$acrdn-selected-header-font-color: rgba($content-text-color) !default;
+$acrdn-selected-header-font-color: rgba($acrdn-header-text-color-selected) !default;
 $acrdn-nest-nrml-header-padding: 8px 0 8px 26px !default;
 $acrdn-nest-bgr-header-padding: 12px 0 12px 28px !default;
 $acrdn-nest-second-nrml-header-padding: 8px 0 8px 38px !default;
@@ -76,16 +92,16 @@ $acrdn-active-bg: rgba($content-bg-color, .0001) !default;
 $acrdn-bg-color: $transparent !default;
 $acrdn-default-bg-color: $acrdn-bg-color !default;
 $acrdn-active-bg-color: $acrdn-active-bg !default;
-$acrdn-selected-header-color: $transparent !default;
-$acrdn-icon-color: rgba($icon-color) !default;
-$acrdn-selected-icon-color: rgba($icon-color) !default;
+$acrdn-selected-header-color: $acrdn-header-bg-color !default;
+$acrdn-icon-color: rgba($acrdn-header-icon-color) !default;
+$acrdn-selected-icon-color: rgba($acrdn-header-icon-color) !default;
 $acrdn-content-color: rgba($content-text-color) !default;
 $acrdn-selected-border-color: rgba($border-light) !default;
-$acrdn-header-focus-bg: $content-bg-color-focus !default;
-$acrdn-header-hover-bg: $content-bg-color-hover !default;
-$acrdn-header-active-bg: $transparent !default;
+$acrdn-header-focus-bg: $acrdn-header-bg-color-focus !default;
+$acrdn-header-hover-bg: $acrdn-header-bg-color-hover !default;
+$acrdn-header-active-bg: $acrdn-header-bg-color-active !default;
 $acrdn-item-header-focus-border-color: rgba($border-light) !default;
-$acrdn-item-icon-disable-color: $icon-color-disabled !default;
+$acrdn-item-icon-disable-color: $acrdn-header-icon-color-disabled !default;
 $acrdn-text-disable-color: $content-text-color-disabled !default;
 $acrdn-default-border: $acrdn-selected-border-color !default;
 $acrdn-item-border-color: $acrdn-default-border !default;
@@ -102,7 +118,7 @@ $acrdn-item-focus-selected-exp-border-top: 1px none $acrdn-default-border !defau
 $acrdn-item-focus-selected-exp-hdr-focus-border-color: $acrdn-default-border !default;
 $acrdn-item-focus-selected-exp-hdr-focus-border-type: solid !default;
 $acrdn-item-focus-selected-exp-hdr-focus-border-size:  0 0 1px 0 !default;
-$acrdn-item-focus-exp-hdr-hover-focus-bg-color: $content-bg-color-hover !default;
+$acrdn-item-focus-exp-hdr-hover-focus-bg-color: $acrdn-header-bg-color-hover !default;
 $acrdn-item-focus-exp-hdr-hover-focus-color: $acrdn-selected-header-font-color !default;
 $acrdn-item-focus-selected-hdr-icons-font: $acrdn-selected-header-font-color !default;
 $acrdn-item-focus-exp-hdricon-hover-font: $acrdn-icon-color !default;
@@ -110,15 +126,15 @@ $acrdn-item-focus-selected-exp-border-color: $acrdn-default-border !default;
 $acrdn-item-exp-select-border-color: $acrdn-default-border !default;
 $acrdn-item-exp-select-border-size: 0 0 1px 0 !default;
 $acrdn-item-header-border: 0 !default;
-$acrdn-item-select-exp-hdr-con-disable-font: $content-text-color-disabled !default;
-$acrdn-item-header-content-disable-color: rgba($content-text-color) !default;
-$acrdn-item-hdr-con-text-disabled-font: $content-text-color-disabled !default;
+$acrdn-item-select-exp-hdr-con-disable-font: $acrdn-header-text-color-disabled !default;
+$acrdn-item-header-content-disable-color: rgba($acrdn-header-text-color) !default;
+$acrdn-item-hdr-con-text-disabled-font: $acrdn-header-text-color-disabled !default;
 $acrdn-item-selected-exp-hdr-focus-border-color: rgba($border-light) !default;
 $acrdn-item-selected-exp-hdr-focus-border-type: solid !default;
 $acrdn-item-selected-exp-hdr-focus-border-size: 0 0 1px 0 !default;
-$acrdn-item-selected-exp-hdr-focus-bg: $content-bg-color-focus !default;
-$acrdn-item-selected-exp-hdr-hover-bg: $content-bg-color-hover !default;
-$acrdn-item-selected-exp-hdr-active-bg: $transparent !default;
+$acrdn-item-selected-exp-hdr-focus-bg: $acrdn-header-bg-color-focus !default;
+$acrdn-item-selected-exp-hdr-hover-bg: $acrdn-header-bg-color-hover !default;
+$acrdn-item-selected-exp-hdr-active-bg: $acrdn-header-bg-color-active !default;
 $acrdn-item-nes-pan-con-last-child-border-bottom: 1px none $acrdn-selected-border-color !default;
 $acrdn-item-select-bg: none !default;
 $acrdn-item-select-border-color: rgba($border-light) !default;
@@ -127,45 +143,45 @@ $acrdn-item-panel-content-select-bg: none !default;
 $acrdn-item-panel-content-select-border-top: 0 !default;
 $acrdn-item-panel-content-select-border-bottom: 0 !default;
 $acrdn-item-header-hover-border: 0 !default;
-$acrdn-item-header-hover-bg: $content-bg-color-hover !default;
+$acrdn-item-header-hover-bg: $acrdn-header-bg-color-hover !default;
 $acrdn-item-header-hover-border-color: initial !default;
 $acrdn-item-header-active-border: 0 !default;
 $acrdn-item-header-active-border-color: initial !default;
 $acrdn-item-header-focus-border: 0 !default;
 $acrdn-item-header-focus-box-shadow: $shadow-focus-ring1 !default;
-$acrdn-item-header-focus-bg: $content-bg-color-focus !default;
-$acrdn-item-header-focus-active-color: rgba($content-text-color) !default;
-$acrdn-item-select-exp-hdr-hover-color: rgba($content-text-color) !default;
+$acrdn-item-header-focus-bg: $acrdn-header-bg-color-focus !default;
+$acrdn-item-header-focus-active-color: rgba($acrdn-header-text-color-focus) !default;
+$acrdn-item-select-exp-hdr-hover-color: rgba($acrdn-header-text-color-hover) !default;
 $acrdn-item-selected-exp-hdr-border-color: rgba($border-light) !default;
 $acrdn-item-selected-exp-hdr-border-size: 0 !default;
-$acrdn-item-selected-exp-hdr-bg: $transparent !default;
-$acrdn-item-selected-exp-hdr-hover-color: rgba($content-text-color) !default;
-$acrdn-item-selected-exp-hdr-hover-focus-color: rgba($content-text-color) !default;
-$acrdn-item-selected-exp-hdr-icon-color: rgba($icon-color) !default;
+$acrdn-item-selected-exp-hdr-bg: $acrdn-header-bg-color !default;
+$acrdn-item-selected-exp-hdr-hover-color: rgba($acrdn-header-text-color-hover) !default;
+$acrdn-item-selected-exp-hdr-hover-focus-color: rgba($acrdn-header-text-color-focus) !default;
+$acrdn-item-selected-exp-hdr-icon-color: rgba($acrdn-header-icon-color) !default;
 $acrdn-item-selected-exp-hdr-hover-border-color: rgba($border-light) !default;
 $acrdn-item-selected-tgl-icon-color: rgba($content-text-color) !default;
-$acrdn-item-selected-hdr-font: rgba($content-text-color) !default;
+$acrdn-item-selected-hdr-font: rgba($acrdn-header-text-color-selected) !default;
 $acrdn-item-select-hdr-focus-border-color: rgba($border-light) !default;
 $acrdn-item-selected-border-color: rgba($border-light) !default;
 $acrdn-item-selected-border-size: 0 0 1px 0 !default;
 $acrdn-item-selected-select-last-border-bottom: 1px none rgba($border-light) !default;
 $acrdn-item-selected-selected-border-color: rgba($border-light) !default;
 $acrdn-item-selected-selected-border-size: 0 0 1px 0 !default;
-$acrdn-item-selected-header-background: $transparent !default;
+$acrdn-item-selected-header-background: $acrdn-header-bg-color !default;
 $acrdn-item-selected-hdr-border-color: rgba($border-light) !default;
 $acrdn-item-selected-hdr-border-size:  0 !default;
 $acrdn-item-selected-header-border-radius: $radius-0 !default;
-$acrdn-item-selected-hdr-con-font: rgba($primary) !default;
+$acrdn-item-selected-hdr-con-font: rgba($acrdn-header-text-color-active) !default;
 $acrdn-item-selected-select-border-color: rgba($border-light) !default;
 $acrdn-item-selected-select-border-size: 0 0 1px 0 !default;
-$acrdn-item-selected-hdr-icon-font: rgba($primary) !default;
-$acrdn-item-selected-exp-hdr-con-hover-color: rgba($content-text-color) !default;
-$acrdn-item-selected-exp-hdr-icon-hover-color: rgba($icon-color) !default;
-$acrdn-item-selected-select-active-bg: $transparent !default;
-$acrdn-item-nes-pan-exp-hdr-color: rgba($content-text-color) !default;
+$acrdn-item-selected-hdr-icon-font: rgba($acrdn-header-icon-color-hover) !default;
+$acrdn-item-selected-exp-hdr-con-hover-color: rgba($acrdn-header-text-color-hover) !default;
+$acrdn-item-selected-exp-hdr-icon-hover-color: rgba($acrdn-header-icon-color) !default;
+$acrdn-item-selected-select-active-bg: $acrdn-header-bg-color-active !default;
+$acrdn-item-nes-pan-exp-hdr-color: rgba($acrdn-header-text-color-selected) !default;
 $acrdn-item-selected-hdr-hover-border-color: rgba($border-light) !default;
-$acrdn-item-selected-hdr-tgl-icon-hover-font: rgba($primary) !default;
-$acrdn-item-nes-selected-exp-hover-hdr-icons-font: rgba($primary) !default;
+$acrdn-item-selected-hdr-tgl-icon-hover-font: rgba($acrdn-header-icon-color-hover) !default;
+$acrdn-item-nes-selected-exp-hover-hdr-icons-font: rgba($acrdn-header-icon-color-hover) !default;
 $acrdn-item-nes-selected-exp-hover-hdr-con-font: rgba($content-text-color) !default;
 $acrdn-item-exp-not-selected-hdr-focus-bg: none !default;
 $acrdn-item-exp-not-selected-hdr-focus-border: 0 !default;

package/styles/bds-lite.css

@@ -3081,6 +3081,8 @@
 .e-contextmenu-container ul .e-menu-item .e-menu-icon {
   display: inline-block;
   vertical-align: middle;
+  position: relative;
+  top: -1px;
 }
 .e-contextmenu-wrapper ul .e-menu-item.e-separator,
 .e-contextmenu-container ul .e-menu-item.e-separator {
@@ -3232,8 +3234,8 @@
   padding-left: 36px;
 }
 
-.e-contextmenu-wrapper .e-menu-item,
-.e-contextmenu-container .e-menu-item {
+.e-contextmenu-wrapper .e-menu-item:not(.e-control),
+.e-contextmenu-container .e-menu-item:not(.e-control) {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -7670,6 +7672,8 @@ ejs-sidebar {
 .e-menu-container ul .e-menu-item .e-menu-icon {
   display: inline-block;
   vertical-align: middle;
+  position: relative;
+  top: -1px;
 }
 .e-menu-wrapper ul .e-menu-item.e-separator,
 .e-menu-container ul .e-menu-item.e-separator {

package/styles/bds.css

@@ -3794,6 +3794,8 @@
 .e-contextmenu-container ul .e-menu-item .e-menu-icon {
   display: inline-block;
   vertical-align: middle;
+  position: relative;
+  top: -1px;
 }
 .e-contextmenu-wrapper ul .e-menu-item.e-separator,
 .e-contextmenu-container ul .e-menu-item.e-separator {
@@ -3945,8 +3947,8 @@
   padding-left: 36px;
 }
 
-.e-contextmenu-wrapper .e-menu-item,
-.e-contextmenu-container .e-menu-item {
+.e-contextmenu-wrapper .e-menu-item:not(.e-control),
+.e-contextmenu-container .e-menu-item:not(.e-control) {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -9940,6 +9942,8 @@ ejs-sidebar {
 .e-menu-container ul .e-menu-item .e-menu-icon {
   display: inline-block;
   vertical-align: middle;
+  position: relative;
+  top: -1px;
 }
 .e-menu-wrapper ul .e-menu-item.e-separator,
 .e-menu-container ul .e-menu-item.e-separator {

package/styles/bootstrap-dark-lite.css

@@ -2826,6 +2826,8 @@
 .e-contextmenu-container ul .e-menu-item .e-menu-icon {
   display: inline-block;
   vertical-align: middle;
+  position: relative;
+  top: -1px;
 }
 .e-contextmenu-wrapper ul .e-menu-item.e-separator,
 .e-contextmenu-container ul .e-menu-item.e-separator {
@@ -2977,8 +2979,8 @@
   padding-left: 36px;
 }
 
-.e-contextmenu-wrapper .e-menu-item,
-.e-contextmenu-container .e-menu-item {
+.e-contextmenu-wrapper .e-menu-item:not(.e-control),
+.e-contextmenu-container .e-menu-item:not(.e-control) {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -7026,6 +7028,8 @@ ejs-sidebar {
 .e-menu-container ul .e-menu-item .e-menu-icon {
   display: inline-block;
   vertical-align: middle;
+  position: relative;
+  top: -1px;
 }
 .e-menu-wrapper ul .e-menu-item.e-separator,
 .e-menu-container ul .e-menu-item.e-separator {

package/styles/bootstrap-dark.css

@@ -3452,6 +3452,8 @@
 .e-contextmenu-container ul .e-menu-item .e-menu-icon {
   display: inline-block;
   vertical-align: middle;
+  position: relative;
+  top: -1px;
 }
 .e-contextmenu-wrapper ul .e-menu-item.e-separator,
 .e-contextmenu-container ul .e-menu-item.e-separator {
@@ -3603,8 +3605,8 @@
   padding-left: 36px;
 }
 
-.e-contextmenu-wrapper .e-menu-item,
-.e-contextmenu-container .e-menu-item {
+.e-contextmenu-wrapper .e-menu-item:not(.e-control),
+.e-contextmenu-container .e-menu-item:not(.e-control) {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -9063,6 +9065,8 @@ ejs-sidebar {
 .e-menu-container ul .e-menu-item .e-menu-icon {
   display: inline-block;
   vertical-align: middle;
+  position: relative;
+  top: -1px;
 }
 .e-menu-wrapper ul .e-menu-item.e-separator,
 .e-menu-container ul .e-menu-item.e-separator {

package/styles/bootstrap-lite.css

@@ -2832,6 +2832,8 @@
 .e-contextmenu-container ul .e-menu-item .e-menu-icon {
   display: inline-block;
   vertical-align: middle;
+  position: relative;
+  top: -1px;
 }
 .e-contextmenu-wrapper ul .e-menu-item.e-separator,
 .e-contextmenu-container ul .e-menu-item.e-separator {
@@ -2983,8 +2985,8 @@
   padding-left: 36px;
 }
 
-.e-contextmenu-wrapper .e-menu-item,
-.e-contextmenu-container .e-menu-item {
+.e-contextmenu-wrapper .e-menu-item:not(.e-control),
+.e-contextmenu-container .e-menu-item:not(.e-control) {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -7043,6 +7045,8 @@ ejs-sidebar {
 .e-menu-container ul .e-menu-item .e-menu-icon {
   display: inline-block;
   vertical-align: middle;
+  position: relative;
+  top: -1px;
 }
 .e-menu-wrapper ul .e-menu-item.e-separator,
 .e-menu-container ul .e-menu-item.e-separator {

package/styles/bootstrap.css

@@ -3460,6 +3460,8 @@
 .e-contextmenu-container ul .e-menu-item .e-menu-icon {
   display: inline-block;
   vertical-align: middle;
+  position: relative;
+  top: -1px;
 }
 .e-contextmenu-wrapper ul .e-menu-item.e-separator,
 .e-contextmenu-container ul .e-menu-item.e-separator {
@@ -3611,8 +3613,8 @@
   padding-left: 36px;
 }
 
-.e-contextmenu-wrapper .e-menu-item,
-.e-contextmenu-container .e-menu-item {
+.e-contextmenu-wrapper .e-menu-item:not(.e-control),
+.e-contextmenu-container .e-menu-item:not(.e-control) {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -9083,6 +9085,8 @@ ejs-sidebar {
 .e-menu-container ul .e-menu-item .e-menu-icon {
   display: inline-block;
   vertical-align: middle;
+  position: relative;
+  top: -1px;
 }
 .e-menu-wrapper ul .e-menu-item.e-separator,
 .e-menu-container ul .e-menu-item.e-separator {

package/styles/bootstrap4-lite.css

@@ -2832,6 +2832,8 @@
 .e-contextmenu-container ul .e-menu-item .e-menu-icon {
   display: inline-block;
   vertical-align: middle;
+  position: relative;
+  top: -1px;
 }
 .e-contextmenu-wrapper ul .e-menu-item.e-separator,
 .e-contextmenu-container ul .e-menu-item.e-separator {
@@ -2983,8 +2985,8 @@
   padding-left: 36px;
 }
 
-.e-contextmenu-wrapper .e-menu-item,
-.e-contextmenu-container .e-menu-item {
+.e-contextmenu-wrapper .e-menu-item:not(.e-control),
+.e-contextmenu-container .e-menu-item:not(.e-control) {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -7054,6 +7056,8 @@ ejs-sidebar {
 .e-menu-container ul .e-menu-item .e-menu-icon {
   display: inline-block;
   vertical-align: middle;
+  position: relative;
+  top: -1px;
 }
 .e-menu-wrapper ul .e-menu-item.e-separator,
 .e-menu-container ul .e-menu-item.e-separator {