@syncfusion/ej2-navigations 33.2.15 → 34.1.30

package/dist/global/index.d.ts

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

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

@@ -26,6 +26,7 @@ export declare class HScroll extends Component<HTMLElement> implements INotifyPr
     private browserCheck;
     private ieCheck;
     private customStep;
+    private resizeContext;
     /**
      * Specifies the left or right scrolling distance of the horizontal scrollbar moving.
      *
@@ -92,6 +93,7 @@ export declare class HScroll extends Component<HTMLElement> implements INotifyPr
     private frameScrollRequest;
     private touchHandler;
     private arrowDisabling;
+    private resizeHandler;
     private scrollHandler;
     /**
      * Gets called when the model property changes.The data that describes the old and new values of property that changed.

package/src/common/h-scroll.js

@@ -67,6 +67,7 @@ var HScroll = /** @class */ (function (_super) {
      */
     HScroll.prototype.preRender = function () {
         this.browser = Browser.info.name;
+        this.resizeContext = this.resizeHandler.bind(this);
         this.browserCheck = this.browser === 'mozilla';
         this.isDevice = Browser.isDevice;
         this.customStep = true;
@@ -91,6 +92,9 @@ var HScroll = /** @class */ (function (_super) {
     HScroll.prototype.render = function () {
         this.touchModule = new Touch(this.element, { scroll: this.touchHandler.bind(this), swipe: this.swipeHandler.bind(this) });
         EventHandler.add(this.scrollEle, 'scroll', this.scrollHandler, this);
+        if (this.element && this.element.closest('.e-toolbar')) {
+            window.addEventListener('resize', this.resizeContext);
+        }
         if (!this.isDevice) {
             this.createNavIcon(this.element);
         }
@@ -169,6 +173,10 @@ var HScroll = /** @class */ (function (_super) {
             }
         }
         EventHandler.remove(this.scrollEle, 'scroll', this.scrollHandler);
+        if (this.element && this.element.closest('.e-toolbar')) {
+            window.removeEventListener('resize', this.resizeContext);
+        }
+        this.resizeContext = null;
         this.touchModule.destroy();
         this.touchModule = null;
         _super.prototype.destroy.call(this);
@@ -422,6 +430,9 @@ var HScroll = /** @class */ (function (_super) {
         }
         this.repeatScroll();
     };
+    HScroll.prototype.resizeHandler = function (e) {
+        this.scrollHandler(e);
+    };
     HScroll.prototype.scrollHandler = function (e) {
         var target = e.target;
         var width = target.offsetWidth;

package/src/common/menu-base.js

@@ -415,6 +415,14 @@ var MenuBase = /** @class */ (function (_super) {
             this.leftEscKeyHandler(e);
         }
         var isDown = e.key ? (e.key === 'ArrowDown') : e.keyCode === 40;
+        var isUp = e.key ? (e.key === 'ArrowUp') : e.keyCode === 38;
+        if (isDown || isUp) {
+            var activeEl = document.activeElement;
+            if (activeEl && (closest(activeEl, '.e-' + this.getModuleName() + '-wrapper') === this.getWrapper()
+                || closest(activeEl, '.e-menu-item') || closest(activeEl, '.e-menu-parent'))) {
+                e.preventDefault();
+            }
+        }
         if (!isDown) {
             return;
         }

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/tab/tab.js

@@ -873,6 +873,8 @@ var Tab = /** @class */ (function (_super) {
     };
     Tab.prototype.compileElement = function (ele, val, prop, index) {
         var templateFn;
+        var heightAdjustMode = this.heightAdjustMode;
+        var templateType = prop;
         if (typeof val === 'string') {
             val = val.trim();
             if (this.isVue) {
@@ -891,6 +893,9 @@ var Tab = /** @class */ (function (_super) {
         }
         if (!isNOU(templateFn) && templateFUN.length > 0) {
             [].slice.call(templateFUN).forEach(function (el) {
+                if (templateType === 'content' && heightAdjustMode === 'Fill' && el.style) {
+                    el.style.height = "100%";
+                }
                 ele.appendChild(el);
             });
         }
@@ -1069,17 +1074,9 @@ var Tab = /** @class */ (function (_super) {
         }
         else if (this.heightAdjustMode === 'Fill') {
             addClass([this.element], [CLS_FILL]);
-            var parent_1 = this.element.parentElement;
-            var heightVal = parent_1.style.height || parent_1.getAttribute('height');
-            while (parent_1 && !heightVal) {
-                heightVal = parent_1.style.height || parent_1.getAttribute('height');
-                if (!heightVal) {
-                    parent_1 = parent_1.parentElement;
-                }
-            }
-            setStyle(this.element, { 'height': heightVal != null ? heightVal : '100%' });
+            setStyle(this.element, { 'height': '100%' });
             this.loadContentElement();
-            this.cntEle.style.height = heightVal != null ? "calc(" + heightVal + " - " + this.hdrEle.offsetHeight + "px)" : 'calc(100vh - ' + (this.hdrEle.offsetHeight + this.hdrEle.scrollHeight) + 'px)';
+            this.cntEle.style.height = 'calc(100% - ' + this.hdrEle.offsetHeight + 'px)';
         }
         else if (this.heightAdjustMode === 'Auto') {
             if (this.isTemplate === true) {

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,6 +240,7 @@
       }
     }
   }
+
   .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;

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;
 }
@@ -194,10 +190,6 @@
           box-shadow: none;
 }
 
-
-
-
-
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: var(--color-sf-bg-primary-alt);
@@ -468,10 +460,6 @@
           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/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;
 }

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