@syncfusion/ej2-navigations 33.2.10 → 34.1.29

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 33.2.10
+*  version : 34.1.29
 *  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.2.10",
+  "version": "34.1.29",
   "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": "~33.2.3",
-    "@syncfusion/ej2-buttons": "~33.2.5",
-    "@syncfusion/ej2-data": "~33.2.5",
-    "@syncfusion/ej2-inputs": "~33.2.10",
-    "@syncfusion/ej2-lists": "~33.2.3",
-    "@syncfusion/ej2-popups": "~33.2.7"
+    "@syncfusion/ej2-base": "~34.1.29",
+    "@syncfusion/ej2-buttons": "~34.1.29",
+    "@syncfusion/ej2-data": "~34.1.29",
+    "@syncfusion/ej2-inputs": "~34.1.29",
+    "@syncfusion/ej2-lists": "~34.1.29",
+    "@syncfusion/ej2-popups": "~34.1.29"
   },
   "devDependencies": {},
   "keywords": [

package/src/accordion/accordion.js

@@ -25,6 +25,7 @@ import { NotifyPropertyChanges, ChildProperty, Collection, Animation } from '@sy
 import { setStyleAttribute as setStyle, Complex } from '@syncfusion/ej2-base';
 import { isNullOrUndefined as isNOU, formatUnit, selectAll, SanitizeHtmlHelper, isRippleEnabled } from '@syncfusion/ej2-base';
 var CLS_ACRDN_ROOT = 'e-acrdn-root';
+var CLS_ACRDN_CTRL = 'e-acrdn-ctrl';
 var CLS_ROOT = 'e-accordion';
 var CLS_ITEM = 'e-acrdn-item';
 var CLS_ITEMFOCUS = 'e-item-focus';
@@ -180,6 +181,7 @@ var Accordion = /** @class */ (function (_super) {
             this.ctrlTem = null;
         }
         ele.classList.remove(CLS_ACRDN_ROOT);
+        ele.classList.remove(CLS_ACRDN_CTRL);
         ele.removeAttribute('style');
         this.element.removeAttribute('data-ripple');
         if (!this.isNested && isRippleEnabled) {
@@ -205,6 +207,7 @@ var Accordion = /** @class */ (function (_super) {
         if (this.enableRtl) {
             this.add(this.element, CLS_RTL);
         }
+        this.element.classList.add(CLS_ACRDN_CTRL);
     };
     Accordion.prototype.add = function (ele, val) {
         ele.classList.add(val);

package/src/sidebar/sidebar.js

@@ -579,6 +579,13 @@ var Sidebar = /** @class */ (function (_super) {
                     else {
                         addClass([this.element], DOCKER);
                     }
+                    if (!this.isOpen && sibling) {
+                        if (!this.enableDock) {
+                            this.element.style.transform = sibling.style.transform = '';
+                        }
+                        sibling.style[this.position === 'Left' ? 'marginLeft' : 'marginRight'] =
+                            this.enableDock ? this.setDimension(this.dockSize) : '0px';
+                    }
                     break;
                 case 'zIndex':
                     this.setZindex();
@@ -658,7 +665,10 @@ var Sidebar = /** @class */ (function (_super) {
     Sidebar.prototype.destroy = function () {
         _super.prototype.destroy.call(this);
         if (this.target) {
-            removeClass([this.target], CONTEXT);
+            var targetElement = this.target;
+            if (targetElement.querySelectorAll('.' + ROOT + '.' + SIDEBARABSOLUTE).length === 0) {
+                removeClass([targetElement], CONTEXT);
+            }
         }
         this.destroyBackDrop();
         if (this.element) {
@@ -677,8 +687,15 @@ var Sidebar = /** @class */ (function (_super) {
         this.windowWidth = null;
         var sibling = document.querySelector('.e-main-content') || this.targetEle;
         if (!isNullOrUndefined(sibling)) {
-            sibling.style.margin = '';
-            sibling.style.transform = '';
+            var anyOtherSidebarOpen = false;
+            if (this.target) {
+                var openSidebarElements = this.target.querySelectorAll('.' + ROOT + '.' + OPEN);
+                anyOtherSidebarOpen = openSidebarElements.length > 0;
+            }
+            if (!anyOtherSidebarOpen) {
+                sibling.style.margin = '';
+                sibling.style.transform = '';
+            }
         }
         this.unWireEvents();
     };

package/src/treeview/treeview.d.ts

@@ -547,6 +547,7 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
     private isInteracted;
     private isRightClick;
     private mouseDownStatus;
+    private isKeyboardFocus;
     private isDropIn;
     private DDTTreeData;
     private OldCheckedData;
@@ -1311,6 +1312,7 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
     private wireClickEvent;
     private wireExpandOnEvent;
     private mouseDownHandler;
+    private keyDownHandler;
     private preventContextMenu;
     private wireEvents;
     private unWireEvents;

package/src/treeview/treeview.js

@@ -220,6 +220,7 @@ var TreeView = /** @class */ (function (_super) {
         _this.isInteracted = false;
         _this.isRightClick = false;
         _this.mouseDownStatus = false;
+        _this.isKeyboardFocus = false;
         _this.isDropIn = false;
         _this.OldCheckedData = [];
         _this.isHiddenItem = false;
@@ -3153,8 +3154,11 @@ var TreeView = /** @class */ (function (_super) {
         this.element.setAttribute('aria-activedescendant', this.element.id + '_active');
     };
     TreeView.prototype.focusIn = function () {
+        var focusedElement = this.getFocusedNode();
+        if (!focusedElement) {
+            return;
+        }
         if (!this.mouseDownStatus) {
-            var focusedElement = this.getFocusedNode();
             if (focusedElement.classList.contains('e-disable')) {
                 focusedElement.setAttribute('tabindex', '-1');
                 this.navigateNode(true);
@@ -3162,11 +3166,17 @@ var TreeView = /** @class */ (function (_super) {
             else {
                 focusedElement.setAttribute('tabindex', '0');
                 addClass([focusedElement], FOCUS);
-                addClass([focusedElement], FOCUSED);
+                if (this.isKeyboardFocus) {
+                    addClass([focusedElement], FOCUSED);
+                }
                 EventHandler.add(focusedElement, 'blur', this.focusOut, this);
             }
             this.mouseDownStatus = false;
         }
+        else if (this.isKeyboardFocus && !focusedElement.classList.contains('e-disable')) {
+            addClass([focusedElement], FOCUSED);
+        }
+        this.isKeyboardFocus = false;
     };
     TreeView.prototype.focusOut = function (event) {
         var focusedElement = this.getFocusedNode();
@@ -4756,6 +4766,7 @@ var TreeView = /** @class */ (function (_super) {
     };
     TreeView.prototype.mouseDownHandler = function (e) {
         this.mouseDownStatus = true;
+        this.isKeyboardFocus = false;
         if (e.shiftKey || e.ctrlKey) {
             e.preventDefault();
         }
@@ -4763,11 +4774,17 @@ var TreeView = /** @class */ (function (_super) {
             EventHandler.add(this.element, 'contextmenu', this.preventContextMenu, this);
         }
     };
+    TreeView.prototype.keyDownHandler = function (e) {
+        if (e.key === 'Tab' || e.keyCode === 9) {
+            this.isKeyboardFocus = true;
+        }
+    };
     TreeView.prototype.preventContextMenu = function (e) {
         e.preventDefault();
     };
     TreeView.prototype.wireEvents = function () {
         EventHandler.add(this.element, 'mousedown', this.mouseDownHandler, this);
+        EventHandler.add(document, 'keydown', this.keyDownHandler, this);
         this.wireClickEvent(true);
         if (this.expandOnType !== 'None') {
             this.wireExpandOnEvent(true);
@@ -4782,6 +4799,7 @@ var TreeView = /** @class */ (function (_super) {
     };
     TreeView.prototype.unWireEvents = function () {
         EventHandler.remove(this.element, 'mousedown', this.mouseDownHandler);
+        EventHandler.remove(document, 'keydown', this.keyDownHandler);
         this.wireClickEvent(false);
         this.wireExpandOnEvent(false);
         EventHandler.remove(this.element, 'mouseover', this.onMouseOver);

package/styles/accordion/_all.scss

@@ -1,2 +1,2 @@
-@use 'layout' as *;
-@use 'theme' as *;
+@forward 'layout';
+@forward 'theme';

package/styles/accordion/_bds-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/bds' as *;
-@forward 'ej2-base/styles/definition/bds';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $acrdn-skin: $skin-name !default;
 $acrdn-slct-header-font-weight: $font-weight-semibold;
 $acrdn-nrml-header-minheight: 40px !default;

package/styles/accordion/_bigger.scss

@@ -1,4 +1,4 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 @include export-module('accordion-bigger') {
   .e-bigger .e-accordion,
   .e-accordion.e-bigger {

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

@@ -1,6 +1,5 @@
 @use 'sass:color';
-@use 'ej2-base/styles/definition/bootstrap-dark' as *;
-@forward 'ej2-base/styles/definition/bootstrap-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 $acrdn-skin: 'bootstrap' !default;
 $acrdn-header-font-weight: normal !default;

package/styles/accordion/_bootstrap-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/bootstrap' as *;
-@forward 'ej2-base/styles/definition/bootstrap';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $acrdn-skin: 'bootstrap' !default;
 $acrdn-header-font-weight: normal !default;
 $acrdn-icon-font-size: $font-size !default;

package/styles/accordion/_bootstrap4-definition.scss

@@ -1,6 +1,5 @@
 @use 'sass:color';
-@use 'ej2-base/styles/definition/bootstrap4' as *;
-@forward 'ej2-base/styles/definition/bootstrap4';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
 
 $acrdn-skin: 'bootstrap4' !default;
 $acrdn-border-size: 1px !default;

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

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
-@forward 'ej2-base/styles/definition/bootstrap5-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $acrdn-skin: 'bootstrap5' !default;
 $acrdn-icon-font-size: $text-lg !default;
 $acrdn-slct-header-font-weight: $font-weight-normal;

package/styles/accordion/_bootstrap5-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/bootstrap5' as *;
-@forward 'ej2-base/styles/definition/bootstrap5';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $acrdn-skin: 'bootstrap5' !default;
 $acrdn-icon-font-size: $text-lg !default;
 $acrdn-slct-header-font-weight: $font-weight-normal;

package/styles/accordion/_bootstrap5.3-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/bootstrap5.3' as *;
-@forward 'ej2-base/styles/definition/bootstrap5.3';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $acrdn-skin: 'bootstrap5' !default;
 $acrdn-icon-font-size: $text-lg !default;
 $acrdn-slct-header-font-weight: $font-weight-normal;

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

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/fabric-dark' as *;
-@forward 'ej2-base/styles/definition/fabric-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $acrdn-skin: 'fabric' !default;
 $acrdn-icon-font-size: $font-size !default;
 $acrdn-bgr-arrow-icon-font-size: 14px !default;

package/styles/accordion/_fabric-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/fabric' as *;
-@forward 'ej2-base/styles/definition/fabric';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $acrdn-skin: 'fabric' !default;
 $acrdn-header-font-bgr-size: 16px;
 $acrdn-content-font-bgr-size: 14px;

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

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/fluent-dark' as *;
-@forward 'ej2-base/styles/definition/fluent-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $acrdn-skin: 'FluentUI' !default;
 $acrdn-slct-header-font-weight: $font-weight-normal;
 $acrdn-border-radius: 2px !default;

package/styles/accordion/_fluent-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/fluent' as *;
-@forward 'ej2-base/styles/definition/fluent';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $acrdn-skin: 'FluentUI' !default;
 $acrdn-slct-header-font-weight: $font-weight-normal;
 $acrdn-border-radius: 2px !default;

package/styles/accordion/_fluent2-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/fluent2' as *;
-@forward 'ej2-base/styles/definition/fluent2';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $acrdn-skin: $skin-name !default;
 $acrdn-slct-header-font-weight: $font-weight-medium;
 $acrdn-nrml-header-minheight: 32px !default;

package/styles/accordion/_fusionnew-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/fusionnew' as *;
-@forward 'ej2-base/styles/definition/fusionnew';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $acrdn-skin: 'bootstrap5' !default;
 $acrdn-icon-font-size: $text-lg !default;
 $acrdn-slct-header-font-weight: $font-weight-normal;

package/styles/accordion/_highcontrast-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/highcontrast' as *;
-@forward 'ej2-base/styles/definition/highcontrast';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $acrdn-skin: 'highcontrast' !default;
 $acrdn-disable-color: $disable !default;
 $acrdn-header-font-bgr-size: 14px !default;

package/styles/accordion/_highcontrast-light-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/highcontrast-light' as *;
-@forward 'ej2-base/styles/definition/highcontrast-light';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $acrdn-skin: 'highcontrast' !default;
 $acrdn-disable-color: $disable !default;
 $acrdn-icon-font-size: $font-size !default;

package/styles/accordion/_layout.scss

@@ -1,4 +1,4 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 @include export-module('accordion-layout') {
   .e-accordion {
     display: block;
@@ -240,4 +240,10 @@
       }
     }
   }
+
+  .e-accordion:not(.e-acrdn-ctrl) > .e-acrdn-item > .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+    &:focus {
+      box-shadow: $acrdn-nested-item-header-focus-box-shadow;
+    }
+  }
 }

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

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/material-dark' as *;
-@forward 'ej2-base/styles/definition/material-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $acrdn-skin: 'material' !default;
 $acrdn-icon-font-size: $font-size !default;
 $acrdn-bgr-arrow-icon-font-size: 12px !default;

package/styles/accordion/_material-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/material' as *;
-@forward 'ej2-base/styles/definition/material';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $acrdn-skin: 'material' !default;
 $acrdn-slct-header-font-weight: normal;
 $acrdn-nrml-header-minheight: 36px !default;

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

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/material3-dark' as *;
-@forward 'ej2-base/styles/definition/material3-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $acrdn-header-bg-color: $transparent !default;
 $acrdn-header-text-color: $on-surface !default;
 $acrdn-header-text-color-selected: $on-surface !default;

package/styles/accordion/_material3-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/material3' as *;
-@forward 'ej2-base/styles/definition/material3';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $acrdn-header-bg-color: $transparent !default;
 $acrdn-header-text-color: $on-surface !default;
 $acrdn-header-text-color-selected: $on-surface !default;

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

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/tailwind-dark' as *;
-@forward 'ej2-base/styles/definition/tailwind-dark';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $acrdn-skin: 'tailwind' !default;
 $acrdn-slct-header-font-weight: $font-weight-medium;
 $acrdn-nrml-header-minheight: 38px !default;

package/styles/accordion/_tailwind-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/tailwind' as *;
-@forward 'ej2-base/styles/definition/tailwind';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $acrdn-skin: 'tailwind' !default;
 $acrdn-slct-header-font-weight: $font-weight-medium;
 $acrdn-nrml-header-minheight: 38px !default;

package/styles/accordion/_tailwind3-definition.scss

@@ -1,5 +1,5 @@
-@use 'ej2-base/styles/definition/tailwind3' as *;
-@forward 'ej2-base/styles/definition/tailwind3';
+@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
+
 $acrdn-skin: 'tailwind3' !default;
 $acrdn-icon-font-size: $text-lg !default;
 $acrdn-slct-header-font-weight: $font-weight-medium;

package/styles/accordion/_theme.scss

@@ -1,4 +1,4 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 @mixin acrdn-item-header-focus-box-shadow {
   @if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
     box-shadow: none;
@@ -412,4 +412,21 @@
       }
     }
   }
+  .e-accordion:not(.e-acrdn-ctrl) > .e-acrdn-item {
+    &.e-selected {
+      > .e-acrdn-header {
+        &:focus {
+          @include acrdn-item-header-focus-box-shadow;
+        }
+        @include acrdn-item-header-focus-visible-box-shadow;
+      }
+    }
+
+    > .e-acrdn-header {
+      &:focus {
+        @include acrdn-item-header-focus-box-shadow;
+      }
+      @include acrdn-item-header-focus-visible-box-shadow;
+    }
+  }
 }

package/styles/accordion/_variables.scss

@@ -0,0 +1,2 @@
+@forward '@syncfusion/ej2-base/styles/common/_base-variables';
+@forward '_material3-definition';

package/styles/accordion/bds.css

@@ -10,24 +10,20 @@
           transform: rotate(-180deg);
 }
 
-
-
-
-
 .e-accordion {
   display: block;
   position: relative;
 }
-.e-accordion .e-acrdn-item {
-  border-radius: 4px 4px 0 0;
-  margin-top: 0;
-}
 .e-accordion .e-acrdn-item.e-select.e-selected:first-child {
   border-top: 1px none var(--color-sf-border-secondary);
 }
 .e-accordion .e-acrdn-item.e-select.e-selected:last-child {
   border-bottom: 1px solid var(--color-sf-border-secondary);
 }
+.e-accordion .e-acrdn-item {
+  border-radius: 4px 4px 0 0;
+  margin-top: 0;
+}
 .e-accordion .e-acrdn-item:first-child {
   margin-top: 0;
 }
@@ -189,9 +185,10 @@
   padding: 0 0 0 8px;
 }
 
-
-
-
+.e-accordion:not(.e-acrdn-ctrl) > .e-acrdn-item > .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header:focus {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
 
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -454,9 +451,14 @@
   font-size: 14px;
 }
 
-
-
-
+.e-accordion:not(.e-acrdn-ctrl) > .e-acrdn-item.e-selected > .e-acrdn-header:focus {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.e-accordion:not(.e-acrdn-ctrl) > .e-acrdn-item > .e-acrdn-header:focus {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
 
 .e-bigger .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content,
 .e-accordion.e-bigger .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {

package/styles/accordion/bds.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/bds' as *;
 @use 'bds-definition' as *;
 @use 'icons/bds' as *;
-@use 'all.bds' as *;
-@use 'bigger.bds' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/accordion/bootstrap-dark.css

@@ -10,16 +10,16 @@
   display: block;
   position: relative;
 }
-.e-accordion .e-acrdn-item {
-  border-radius: 4px;
-  margin-top: 5px;
-}
 .e-accordion .e-acrdn-item.e-select.e-selected:first-child {
   border-top: 1px solid #505050;
 }
 .e-accordion .e-acrdn-item.e-select.e-selected:last-child {
   border-bottom: 1px solid #505050;
 }
+.e-accordion .e-acrdn-item {
+  border-radius: 4px;
+  margin-top: 5px;
+}
 .e-accordion .e-acrdn-item:first-child {
   margin-top: 0;
 }
@@ -181,6 +181,11 @@
   padding: 0 0 0 10px;
 }
 
+.e-accordion:not(.e-acrdn-ctrl) > .e-acrdn-item > .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header:focus {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #1a1a1a;
@@ -442,6 +447,15 @@
   font-size: 14px;
 }
 
+.e-accordion:not(.e-acrdn-ctrl) > .e-acrdn-item.e-selected > .e-acrdn-header:focus {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.e-accordion:not(.e-acrdn-ctrl) > .e-acrdn-item > .e-acrdn-header:focus {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
 .e-bigger .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content,
 .e-accordion.e-bigger .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   font-size: 16px;

package/styles/accordion/bootstrap-dark.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/bootstrap-dark' as *;
 @use 'bootstrap-dark-definition' as *;
 @use 'icons/bootstrap-dark' as *;
-@use 'all.bootstrap-dark' as *;
-@use 'bigger.bootstrap-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/accordion/bootstrap.css

@@ -10,16 +10,16 @@
   display: block;
   position: relative;
 }
-.e-accordion .e-acrdn-item {
-  border-radius: 4px;
-  margin-top: 5px;
-}
 .e-accordion .e-acrdn-item.e-select.e-selected:first-child {
   border-top: 1px solid #ddd;
 }
 .e-accordion .e-acrdn-item.e-select.e-selected:last-child {
   border-bottom: 1px solid #ddd;
 }
+.e-accordion .e-acrdn-item {
+  border-radius: 4px;
+  margin-top: 5px;
+}
 .e-accordion .e-acrdn-item:first-child {
   margin-top: 0;
 }
@@ -181,6 +181,11 @@
   padding: 0 0 0 10px;
 }
 
+.e-accordion:not(.e-acrdn-ctrl) > .e-acrdn-item > .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header:focus {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #fff;
@@ -442,6 +447,15 @@
   font-size: 14px;
 }
 
+.e-accordion:not(.e-acrdn-ctrl) > .e-acrdn-item.e-selected > .e-acrdn-header:focus {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.e-accordion:not(.e-acrdn-ctrl) > .e-acrdn-item > .e-acrdn-header:focus {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
 .e-bigger .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content,
 .e-accordion.e-bigger .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   font-size: 16px;

package/styles/accordion/bootstrap.scss

@@ -1,5 +1,4 @@
-@use 'ej2-base/styles/definition/bootstrap' as *;
 @use 'bootstrap-definition' as *;
 @use 'icons/bootstrap' as *;
-@use 'all.bootstrap' as *;
-@use 'bigger.bootstrap' as *;
+@use 'all' as *;
+@use 'bigger' as *;