@syncfusion/ej2-navigations 33.1.45 → 33.1.47

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 33.1.45
+*  version : 33.1.47
 *  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": "33.1.45",
+  "version": "33.1.47",
   "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",
@@ -11,8 +11,8 @@
     "@syncfusion/ej2-base": "~33.1.45",
     "@syncfusion/ej2-buttons": "~33.1.44",
     "@syncfusion/ej2-data": "~33.1.45",
-    "@syncfusion/ej2-inputs": "~33.1.44",
-    "@syncfusion/ej2-lists": "~33.1.44",
+    "@syncfusion/ej2-inputs": "~33.1.47",
+    "@syncfusion/ej2-lists": "~33.1.47",
     "@syncfusion/ej2-popups": "~33.1.44"
   },
   "devDependencies": {},

package/src/accordion/accordion.js

@@ -257,6 +257,11 @@ var Accordion = /** @class */ (function (_super) {
         if (!isNOU(this.keyModule)) {
             this.keyModule.destroy();
         }
+        var headerEles = [].slice.call(this.element.querySelectorAll('.' + CLS_HEADER));
+        for (var _i = 0, headerEles_1 = headerEles; _i < headerEles_1.length; _i++) {
+            var hdr = headerEles_1[_i];
+            EventHandler.clearEvents(hdr);
+        }
     };
     Accordion.prototype.wireEvents = function () {
         EventHandler.add(this.element, 'click', this.clickHandler, this);
@@ -1178,6 +1183,10 @@ var Accordion = /** @class */ (function (_super) {
             this.clearTemplate();
         }
         [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) {
+            var hdr = select('.' + CLS_HEADER, el);
+            if (hdr) {
+                EventHandler.clearEvents(hdr);
+            }
             detach(el);
         });
     };

package/src/breadcrumb/breadcrumb.d.ts

@@ -121,6 +121,7 @@ export declare class Breadcrumb extends Component<HTMLElement> implements INotif
     private _maxItems;
     private popupObj;
     private popupUl;
+    private resizeHandler;
     private delegateClickHanlder;
     private isPopupCreated;
     /**

package/src/breadcrumb/breadcrumb.js

@@ -620,7 +620,7 @@ var Breadcrumb = /** @class */ (function (_super) {
             detach(this.popupObj.element);
         }
     };
-    Breadcrumb.prototype.resize = function () {
+    Breadcrumb.prototype.resize = function (e) {
         this._maxItems = this.maxItems;
         this.initPvtProps();
         this.reRenderItems();
@@ -711,7 +711,8 @@ var Breadcrumb = /** @class */ (function (_super) {
         this.delegateClickHanlder = this.documentClickHandler.bind(this);
         EventHandler.add(document, 'click', this.delegateClickHanlder, this);
         EventHandler.add(this.element, 'click', this.clickHandler, this);
-        window.addEventListener('resize', this.resize.bind(this));
+        this.resizeHandler = this.resize.bind(this);
+        window.addEventListener('resize', this.resizeHandler);
     };
     Breadcrumb.prototype.popupWireEvents = function () {
         EventHandler.add(this.popupObj.element, 'click', this.clickHandler, this);
@@ -720,7 +721,8 @@ var Breadcrumb = /** @class */ (function (_super) {
     Breadcrumb.prototype.unWireEvents = function () {
         EventHandler.remove(document, 'click', this.delegateClickHanlder);
         EventHandler.remove(this.element, 'click', this.clickHandler);
-        window.removeEventListener('resize', this.resize.bind(this));
+        window.removeEventListener('resize', this.resizeHandler);
+        this.resizeHandler = null;
         if (this.popupObj) {
             EventHandler.remove(this.popupObj.element, 'click', this.clickHandler);
             EventHandler.remove(this.popupObj.element, 'keydown', this.popupKeyDownHandler);

package/src/common/h-scroll.d.ts

@@ -22,6 +22,11 @@ export declare class HScroll extends Component<HTMLElement> implements INotifyPr
     private timeout;
     private keyTimeout;
     private keyTimer;
+    private onKeyPressBound;
+    private onKeyUpBound;
+    private repeatScrollBound;
+    private contextMenuBound;
+    private navTouchCollection;
     private browser;
     private browserCheck;
     private ieCheck;
@@ -82,6 +87,7 @@ export declare class HScroll extends Component<HTMLElement> implements INotifyPr
     private onKeyPress;
     private onKeyUp;
     private eventBinding;
+    private contextMenuHandler;
     private repeatScroll;
     private tabHoldHandler;
     private contains;

package/src/common/h-scroll.js

@@ -144,6 +144,7 @@ var HScroll = /** @class */ (function (_super) {
      * @returns {void}
      */
     HScroll.prototype.destroy = function () {
+        var _this = this;
         var ele = this.element;
         ele.style.display = '';
         ele.classList.remove(CLS_ROOT);
@@ -151,8 +152,22 @@ var HScroll = /** @class */ (function (_super) {
         ele.classList.remove(CLS_RTL);
         var nav = selectAll('.e-' + ele.id + '_nav.' + CLS_HSCROLLNAV, ele);
         var overlay = selectAll('.' + CLS_OVERLAY, ele);
-        [].slice.call(overlay).forEach(function (ele) {
-            detach(ele);
+        [].slice.call(overlay).forEach(function (oElem) {
+            if (_this.onKeyPressBound) {
+                oElem.removeEventListener('keydown', _this.onKeyPressBound);
+            }
+            if (_this.onKeyUpBound) {
+                oElem.removeEventListener('keyup', _this.onKeyUpBound);
+            }
+            if (_this.repeatScrollBound) {
+                oElem.removeEventListener('mouseup', _this.repeatScrollBound);
+                oElem.removeEventListener('touchend', _this.repeatScrollBound);
+            }
+            if (_this.contextMenuBound) {
+                oElem.removeEventListener('contextmenu', _this.contextMenuBound);
+            }
+            EventHandler.remove(oElem, 'click', _this.clickEventHandler);
+            detach(oElem);
         });
         for (var _i = 0, _a = [].slice.call(this.scrollItems.children); _i < _a.length; _i++) {
             var elem = _a[_i];
@@ -163,14 +178,37 @@ var HScroll = /** @class */ (function (_super) {
         }
         detach(this.scrollEle);
         if (nav.length > 0) {
-            detach(nav[0]);
-            if (!isNullOrUndefined(nav[1])) {
-                detach(nav[1]);
-            }
+            [].slice.call(nav).forEach(function (nElem) {
+                if (_this.onKeyPressBound) {
+                    nElem.removeEventListener('keydown', _this.onKeyPressBound);
+                }
+                if (_this.onKeyUpBound) {
+                    nElem.removeEventListener('keyup', _this.onKeyUpBound);
+                }
+                if (_this.repeatScrollBound) {
+                    nElem.removeEventListener('mouseup', _this.repeatScrollBound);
+                    nElem.removeEventListener('touchend', _this.repeatScrollBound);
+                }
+                if (_this.contextMenuBound) {
+                    nElem.removeEventListener('contextmenu', _this.contextMenuBound);
+                }
+                EventHandler.remove(nElem, 'click', _this.clickEventHandler);
+                detach(nElem);
+            });
         }
         EventHandler.remove(this.scrollEle, 'scroll', this.scrollHandler);
         this.touchModule.destroy();
         this.touchModule = null;
+        if (this.navTouchCollection) {
+            this.navTouchCollection.forEach(function (t) { if (t && typeof t.destroy === 'function') {
+                t.destroy();
+            } });
+            this.navTouchCollection = null;
+        }
+        this.onKeyPressBound = null;
+        this.onKeyUpBound = null;
+        this.repeatScrollBound = null;
+        this.contextMenuBound = null;
         _super.prototype.destroy.call(this);
     };
     /**
@@ -257,17 +295,34 @@ var HScroll = /** @class */ (function (_super) {
     HScroll.prototype.eventBinding = function (ele) {
         var _this = this;
         [].slice.call(ele).forEach(function (el) {
-            new Touch(el, { tapHold: _this.tabHoldHandler.bind(_this), tapHoldThreshold: 500 });
-            el.addEventListener('keydown', _this.onKeyPress.bind(_this));
-            el.addEventListener('keyup', _this.onKeyUp.bind(_this));
-            el.addEventListener('mouseup', _this.repeatScroll.bind(_this));
-            el.addEventListener('touchend', _this.repeatScroll.bind(_this));
-            el.addEventListener('contextmenu', function (e) {
-                e.preventDefault();
-            });
+            var navTouch = new Touch(el, { tapHold: _this.tabHoldHandler.bind(_this), tapHoldThreshold: 500 });
+            if (!_this.navTouchCollection) {
+                _this.navTouchCollection = [];
+            }
+            _this.navTouchCollection.push(navTouch);
+            if (!_this.onKeyPressBound) {
+                _this.onKeyPressBound = _this.onKeyPress.bind(_this);
+            }
+            if (!_this.onKeyUpBound) {
+                _this.onKeyUpBound = _this.onKeyUp.bind(_this);
+            }
+            if (!_this.repeatScrollBound) {
+                _this.repeatScrollBound = _this.repeatScroll.bind(_this);
+            }
+            if (!_this.contextMenuBound) {
+                _this.contextMenuBound = _this.contextMenuHandler.bind(_this);
+            }
+            el.addEventListener('keydown', _this.onKeyPressBound);
+            el.addEventListener('keyup', _this.onKeyUpBound);
+            el.addEventListener('mouseup', _this.repeatScrollBound);
+            el.addEventListener('touchend', _this.repeatScrollBound);
+            el.addEventListener('contextmenu', _this.contextMenuBound);
             EventHandler.add(el, 'click', _this.clickEventHandler, _this);
         });
     };
+    HScroll.prototype.contextMenuHandler = function (e) {
+        e.preventDefault();
+    };
     HScroll.prototype.repeatScroll = function () {
         clearInterval(this.timeout);
     };

package/src/common/menu-base.d.ts

@@ -156,7 +156,10 @@ export declare abstract class MenuBase extends Component<HTMLUListElement> imple
     private targetElement;
     private delegateClickHandler;
     private delegateMoverHandler;
+    private delegateDomKeyHandler;
+    private delegateScrollHandler;
     private delegateMouseDownHandler;
+    private delegateTouchOutsideHandler;
     private navIdx;
     private animation;
     private isTapHold;

package/src/common/menu-base.js

@@ -348,11 +348,13 @@ var MenuBase = /** @class */ (function (_super) {
         if (!Browser.isDevice) {
             this.delegateMoverHandler = this.moverHandler.bind(this);
             this.delegateMouseDownHandler = this.mouseDownHandler.bind(this);
+            this.delegateDomKeyHandler = this.domKeyHandler.bind(this);
             EventHandler.add(this.isMenu ? document : wrapper, 'mouseover', this.delegateMoverHandler, this);
             EventHandler.add(document, 'mousedown', this.delegateMouseDownHandler, this);
-            EventHandler.add(document, 'keydown', this.domKeyHandler, this);
+            EventHandler.add(document, 'keydown', this.delegateDomKeyHandler, this);
             if (!this.isMenu && !this.target) {
-                EventHandler.add(document, 'scroll', this.scrollHandler, this);
+                this.delegateScrollHandler = this.scrollHandler.bind(this);
+                EventHandler.add(document, 'scroll', this.delegateScrollHandler, this);
             }
         }
         this.delegateClickHandler = this.clickHandler.bind(this);
@@ -361,7 +363,8 @@ var MenuBase = /** @class */ (function (_super) {
         this.rippleFn = rippleEffect(wrapper, { selector: '.' + ITEM });
         if (!this.isMenu && this.enableScrolling) {
             this.enableTouchScroll(wrapper);
-            document.addEventListener('touchstart', this.touchOutsideHandler.bind(this), { passive: true });
+            this.delegateTouchOutsideHandler = this.touchOutsideHandler.bind(this);
+            document.addEventListener('touchstart', this.delegateTouchOutsideHandler, { passive: true });
         }
     };
     MenuBase.prototype.wireKeyboardEvent = function (element) {
@@ -2085,20 +2088,38 @@ var MenuBase = /** @class */ (function (_super) {
             }
         }
         if (!Browser.isDevice) {
-            EventHandler.remove(this.isMenu ? document : wrapper, 'mouseover', this.delegateMoverHandler);
-            EventHandler.remove(document, 'mousedown', this.delegateMouseDownHandler);
-            EventHandler.remove(document, 'keydown', this.domKeyHandler);
+            if (this.delegateMoverHandler) {
+                EventHandler.remove(this.isMenu ? document : wrapper, 'mouseover', this.delegateMoverHandler);
+                this.delegateMoverHandler = null;
+            }
+            if (this.delegateMouseDownHandler) {
+                EventHandler.remove(document, 'mousedown', this.delegateMouseDownHandler);
+                this.delegateMouseDownHandler = null;
+            }
+            if (this.delegateDomKeyHandler) {
+                EventHandler.remove(document, 'keydown', this.delegateDomKeyHandler);
+                this.delegateDomKeyHandler = null;
+            }
             if (!this.isMenu && !this.target) {
-                EventHandler.remove(document, 'scroll', this.scrollHandler);
+                if (this.delegateScrollHandler) {
+                    EventHandler.remove(document, 'scroll', this.delegateScrollHandler);
+                    this.delegateScrollHandler = null;
+                }
             }
         }
-        EventHandler.remove(document, 'click', this.delegateClickHandler);
+        if (this.delegateClickHandler) {
+            EventHandler.remove(document, 'click', this.delegateClickHandler);
+            this.delegateClickHandler = null;
+        }
         this.unWireKeyboardEvent(wrapper);
         this.rippleFn();
         if (!this.isMenu && this.enableScrolling) {
             wrapper.removeEventListener('touchstart', this.touchStartFn);
             wrapper.removeEventListener('touchmove', this.touchMoveFn);
-            document.removeEventListener('touchstart', this.touchOutsideHandler);
+            if (this.delegateTouchOutsideHandler) {
+                document.removeEventListener('touchstart', this.delegateTouchOutsideHandler);
+                this.delegateTouchOutsideHandler = null;
+            }
         }
     };
     MenuBase.prototype.unWireKeyboardEvent = function (element) {

package/src/sidebar/sidebar.d.ts

@@ -43,6 +43,7 @@ export declare class Sidebar extends Component<HTMLElement> implements INotifyPr
     private targetEle;
     private firstRender;
     private documentClickContext;
+    private resizeHandler;
     /**
      * Specifies the size of the Sidebar in dock state.
      * > For more details about dockSize refer to

package/src/sidebar/sidebar.js

@@ -58,6 +58,7 @@ var Sidebar = /** @class */ (function (_super) {
     function Sidebar(options, element) {
         var _this = _super.call(this, options, element) || this;
         _this.documentClickContext = _this.documentclickHandler.bind(_this);
+        _this.resizeHandler = _this.resize.bind(_this);
         return _this;
     }
     Sidebar.prototype.preRender = function () {
@@ -463,11 +464,12 @@ var Sidebar = /** @class */ (function (_super) {
     };
     Sidebar.prototype.wireEvents = function () {
         this.setEnableGestures();
-        EventHandler.add(window, 'resize', this.resize, this);
+        EventHandler.add(window, 'resize', this.resizeHandler);
     };
     Sidebar.prototype.unWireEvents = function () {
-        EventHandler.remove(window, 'resize', this.resize);
+        EventHandler.remove(window, 'resize', this.resizeHandler);
         EventHandler.remove(document, 'mousedown touchstart', this.documentclickHandler);
+        EventHandler.remove(this.element, 'transitionend', this.transitionEnd);
         if (this.mainContentEle) {
             this.mainContentEle.destroy();
         }

package/src/stepper/stepper.d.ts

@@ -268,6 +268,7 @@ export declare class Stepper extends StepperBase implements INotifyPropertyChang
     private keyConfigs;
     private l10n;
     private isKeyNavFocus;
+    private windowEventHandlers;
     /**
      * * Constructor for creating the Stepper component.
      *

package/src/stepper/stepper.js

@@ -253,12 +253,20 @@ var Stepper = /** @class */ (function (_super) {
         }
     };
     Stepper.prototype.wireEvents = function () {
-        EventHandler.add(window, 'resize', this.updateResize, this);
-        EventHandler.add(window, 'click', this.updateStepFocus, this);
+        this.windowEventHandlers = {};
+        this.windowEventHandlers.resize = this.updateResize.bind(this);
+        this.windowEventHandlers.click = this.updateStepFocus.bind(this);
+        EventHandler.add(window, 'resize', this.windowEventHandlers.resize);
+        EventHandler.add(window, 'click', this.windowEventHandlers.click);
     };
     Stepper.prototype.unWireEvents = function () {
-        EventHandler.remove(window, 'resize', this.updateResize);
-        EventHandler.remove(window, 'click', this.updateStepFocus);
+        EventHandler.remove(window, 'resize', this.windowEventHandlers && this.windowEventHandlers.resize);
+        EventHandler.remove(window, 'click', this.windowEventHandlers && this.windowEventHandlers.click);
+        if (this.windowEventHandlers) {
+            this.windowEventHandlers.resize = null;
+            this.windowEventHandlers.click = null;
+            this.windowEventHandlers = null;
+        }
     };
     Stepper.prototype.updateResize = function () {
         if (this.stepperItemList && this.progressbar && this.element.classList.contains(HORIZSTEP)) {

package/src/tab/tab.js

@@ -1540,12 +1540,20 @@ var Tab = /** @class */ (function (_super) {
                     }
                     if (properties[j] === 'cssClass') {
                         if (!isNOU(hdrItem)) {
-                            hdrItem.classList.remove(oldVal);
-                            hdrItem.classList.add(newVal);
+                            if (!isNOU(oldVal) && oldVal !== '') {
+                                hdrItem.classList.remove(oldVal);
+                            }
+                            if (!isNOU(newVal) && newVal !== '') {
+                                hdrItem.classList.add(newVal);
+                            }
                         }
                         if (!isNOU(cntItem)) {
-                            cntItem.classList.remove(oldVal);
-                            cntItem.classList.add(newVal);
+                            if (!isNOU(oldVal) && oldVal !== '') {
+                                cntItem.classList.remove(oldVal);
+                            }
+                            if (!isNOU(newVal) && newVal !== '') {
+                                cntItem.classList.add(newVal);
+                            }
                         }
                     }
                     if (properties[j] === 'disabled') {

package/src/toolbar/toolbar.js

@@ -324,14 +324,19 @@ var Toolbar = /** @class */ (function (_super) {
         }
     };
     Toolbar.prototype.destroyItems = function () {
+        var _this = this;
         if (this.element) {
-            [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) { detach(el); });
+            [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) {
+                EventHandler.remove(el, 'click', _this.itemClick);
+                detach(el);
+            });
         }
         if (this.tbarAlign) {
             var tbarItems = this.element.querySelector('.' + CLS_ITEMS);
             if (tbarItems) {
                 if (tbarItems.children) {
                     [].slice.call(tbarItems.children).forEach(function (el) {
+                        EventHandler.remove(el, 'click', _this.itemClick);
                         detach(el);
                     });
                 }
@@ -2076,7 +2081,7 @@ var Toolbar = /** @class */ (function (_super) {
                     dom.setAttribute('aria-label', (item.text || item.tooltipText));
                     dom.setAttribute('aria-disabled', 'false');
                     innerEle.appendChild(dom);
-                    innerEle.addEventListener('click', this.itemClick.bind(this));
+                    EventHandler.add(innerEle, 'click', this.itemClick, this);
                     break;
                 case 'Separator':
                     this.add(innerEle, CLS_SEPARATOR);

package/src/treeview/treeview.js

@@ -4766,6 +4766,18 @@ var TreeView = /** @class */ (function (_super) {
         this.wireExpandOnEvent(false);
         EventHandler.remove(this.element, 'mouseover', this.onMouseOver);
         EventHandler.remove(this.element, 'mouseout', this.onMouseLeave);
+        var liElements = selectAll('.' + LISTITEM, this.element);
+        for (var i = 0; i < liElements.length; i++) {
+            var li = liElements[parseInt(i.toString(), 10)];
+            EventHandler.remove(li, 'focus', this.focusIn);
+            EventHandler.remove(li, 'blur', this.focusOut);
+            var frame = select('.' + CHECKBOXFRAME, li);
+            if (frame) {
+                EventHandler.remove(frame, 'mousedown', this.frameMouseHandler);
+                EventHandler.remove(frame, 'mouseup', this.frameMouseHandler);
+                EventHandler.remove(frame, 'mouseleave', this.frameMouseHandler);
+            }
+        }
         if (!this.disabled) {
             this.keyboardModule.destroy();
         }

package/styles/appbar/bds.css

@@ -175,7 +175,7 @@
 .e-appbar.e-light .e-dropdown-btn.e-btn.e-inherit:focus,
 .e-appbar.e-light .e-dropdown-btn.e-btn.e-inherit:active,
 .e-appbar.e-light .e-dropdown-btn.e-btn.e-inherit.e-active {
-  background: var(--color-sf-utility-appbar-border-color-alt2);
+  background: var(--color-sf-utility-appbar-hover-bg-color-alt1);
 }
 .e-appbar.e-light .e-menu-wrapper.e-inherit,
 .e-appbar.e-light .e-menu-container.e-inherit {
@@ -188,7 +188,7 @@
 .e-appbar.e-light .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-appbar.e-light .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
 .e-appbar.e-light .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
 .e-appbar.e-light .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
-  background: var(--color-sf-utility-appbar-border-color-alt2);
+  background: var(--color-sf-utility-appbar-hover-bg-color-alt1);
 }
 .e-appbar.e-dark {
   background: var(--color-sf-utility-appbar-bg-color-alt2);

package/styles/bds-lite.css

@@ -8820,7 +8820,7 @@ ejs-sidebar {
 .e-appbar.e-light .e-dropdown-btn.e-btn.e-inherit:focus,
 .e-appbar.e-light .e-dropdown-btn.e-btn.e-inherit:active,
 .e-appbar.e-light .e-dropdown-btn.e-btn.e-inherit.e-active {
-  background: var(--color-sf-utility-appbar-border-color-alt2);
+  background: var(--color-sf-utility-appbar-hover-bg-color-alt1);
 }
 .e-appbar.e-light .e-menu-wrapper.e-inherit,
 .e-appbar.e-light .e-menu-container.e-inherit {
@@ -8833,7 +8833,7 @@ ejs-sidebar {
 .e-appbar.e-light .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-appbar.e-light .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
 .e-appbar.e-light .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
 .e-appbar.e-light .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
-  background: var(--color-sf-utility-appbar-border-color-alt2);
+  background: var(--color-sf-utility-appbar-hover-bg-color-alt1);
 }
 .e-appbar.e-dark {
   background: var(--color-sf-utility-appbar-bg-color-alt2);

package/styles/bds.css

@@ -11535,7 +11535,7 @@ ejs-sidebar {
 .e-appbar.e-light .e-dropdown-btn.e-btn.e-inherit:focus,
 .e-appbar.e-light .e-dropdown-btn.e-btn.e-inherit:active,
 .e-appbar.e-light .e-dropdown-btn.e-btn.e-inherit.e-active {
-  background: var(--color-sf-utility-appbar-border-color-alt2);
+  background: var(--color-sf-utility-appbar-hover-bg-color-alt1);
 }
 .e-appbar.e-light .e-menu-wrapper.e-inherit,
 .e-appbar.e-light .e-menu-container.e-inherit {
@@ -11548,7 +11548,7 @@ ejs-sidebar {
 .e-appbar.e-light .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-appbar.e-light .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
 .e-appbar.e-light .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
 .e-appbar.e-light .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
-  background: var(--color-sf-utility-appbar-border-color-alt2);
+  background: var(--color-sf-utility-appbar-hover-bg-color-alt1);
 }
 .e-appbar.e-dark {
   background: var(--color-sf-utility-appbar-bg-color-alt2);