@syncfusion/ej2-navigations 31.2.12 → 32.1.19

package/dist/global/index.d.ts

@@ -1,12 +1,3 @@
-/*!
-*  filename: index.d.ts
-*  version : 31.2.12
-*  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
-*  licensing@syncfusion.com. Any infringement will be prosecuted under
-*  applicable laws. 
-*/
 import * as _navigations from '@syncfusion/ej2-navigations';
 
 export declare namespace ej {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-navigations",
-  "version": "31.2.12",
+  "version": "32.1.19",
   "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": "~31.2.12",
-    "@syncfusion/ej2-buttons": "~31.2.12",
-    "@syncfusion/ej2-data": "~31.2.12",
-    "@syncfusion/ej2-inputs": "~31.2.12",
-    "@syncfusion/ej2-lists": "~31.2.12",
-    "@syncfusion/ej2-popups": "~31.2.12"
+    "@syncfusion/ej2-base": "~32.1.19",
+    "@syncfusion/ej2-buttons": "~32.1.19",
+    "@syncfusion/ej2-data": "~32.1.19",
+    "@syncfusion/ej2-inputs": "~32.1.19",
+    "@syncfusion/ej2-lists": "~32.1.19",
+    "@syncfusion/ej2-popups": "~32.1.19"
   },
   "devDependencies": {},
   "keywords": [

package/src/common/menu-base.js

@@ -1663,7 +1663,7 @@ var MenuBase = /** @class */ (function (_super) {
             else {
                 if (trgt.tagName !== 'UL' || (this.isMenu ? trgt.parentElement.classList.contains('e-menu-wrapper') &&
                     !this.getIndex(trgt.querySelector('.' + ITEM).id, true).length : trgt.parentElement !== wrapper)) {
-                    if (!cli) {
+                    if (!cli && !isNullOrUndefined(wrapper)) {
                         this.removeLIStateByClass([SELECTED], [wrapper]);
                     }
                     if (!this.isAnimationNone && !cli || (cli && !cli.querySelector('.' + CARET))) {

package/src/toolbar/toolbar.d.ts

@@ -265,6 +265,7 @@ export declare class Toolbar extends Component<HTMLElement> implements INotifyPr
     private isVertical;
     private tempId;
     private isExtendedOpen;
+    private popupTriggeredByToolbar;
     private clickEvent;
     private scrollEvent;
     private resizeContext;

package/src/toolbar/toolbar.js

@@ -306,6 +306,10 @@ var Toolbar = /** @class */ (function (_super) {
     };
     Toolbar.prototype.docEvent = function (e) {
         var popEle = closest(e.target, '.e-popup');
+        if (this.popupTriggeredByToolbar) {
+            this.popupTriggeredByToolbar = false;
+            return;
+        }
         if (this.popObj && isVisible(this.popObj.element) && !popEle && this.overflowMode === 'Popup') {
             this.popObj.hide({ name: 'FadeOut', duration: 100 });
         }
@@ -682,6 +686,10 @@ var Toolbar = /** @class */ (function (_super) {
         var isPopupElement = !isNOU(closest(trgt, '.' + CLS_POPUPCLASS));
         var clsList = trgt.classList;
         var popupNav = closest(trgt, ('.' + CLS_TBARNAV));
+        var popupDownIcon = closest(trgt, ('.' + CLS_POPUPDOWN));
+        if (popupDownIcon || popupNav) {
+            this.popupTriggeredByToolbar = true;
+        }
         if (!popupNav) {
             popupNav = trgt;
         }

package/src/treeview/treeview.d.ts

@@ -551,6 +551,7 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
     private DDTTreeData;
     private OldCheckedData;
     private isHiddenItem;
+    private nodeIndex;
     /**
      * Indicates whether the TreeView allows drag and drop of nodes. To drag and drop a node in
      * desktop, hold the mouse on the node, drag it to the target node and drop the node by releasing
@@ -1075,6 +1076,7 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
     private ensureIndeterminate;
     private ensureParentCheckState;
     private getSelectedChildNodeDetails;
+    private buildNodeIndex;
     private getAllChildNodes;
     private ensureChildCheckState;
     private doCheckBoxAction;

package/src/treeview/treeview.js

@@ -1081,25 +1081,23 @@ var TreeView = /** @class */ (function (_super) {
         var childKey = typeof this.fields.child === 'string' ? this.fields.child : null;
         var dataId = this.fields.id;
         var parentKey = this.fields.parentID;
+        if (!this.nodeIndex) {
+            this.nodeIndex = new Map();
+            this.buildNodeIndex(this.treeData);
+        }
         var matchesDataUid = function (childNode) {
             if (!isNOU(childKey) && childKey in childNode && Array.isArray(childNode[childKey])) {
                 var matchNode = childNode[dataId];
-                if (!isNOU(matchNode)) {
-                    return matchNode.toString() === dataUid;
-                }
+                return !isNOU(matchNode) &&
+                    matchNode.toString() === dataUid;
             }
             else {
                 var childNodePid = childNode[parentKey];
-                if (!isNOU(childNodePid)) {
-                    return childNodePid.toString() === dataUid;
-                }
+                return !isNOU(childNodePid) && childNodePid.toString() === dataUid;
             }
-            return false;
         };
         return this.checkedNodes
-            .map(function (checkedNodeId) {
-            return _this.getNodeObject(checkedNodeId);
-        })
+            .map(function (id) { return _this.nodeIndex.get(id); })
             .filter(function (childNode) {
             if (childNode && typeof childNode === 'object' && (childKey in childNode)) {
                 return matchesDataUid(childNode);
@@ -1110,6 +1108,25 @@ var TreeView = /** @class */ (function (_super) {
             return false;
         });
     };
+    TreeView.prototype.buildNodeIndex = function (nodes) {
+        var _this = this;
+        var childKey = typeof this.fields.child === 'string' ? this.fields.child : null;
+        nodes.forEach(function (node) {
+            var idVal = getValue(_this.fields.id, node);
+            if (idVal != null) {
+                if (!_this.nodeIndex) {
+                    _this.nodeIndex = new Map();
+                }
+                _this.nodeIndex.set(idVal.toString(), node);
+            }
+            if (childKey) {
+                var children = getValue(childKey, node);
+                if (Array.isArray(children)) {
+                    _this.buildNodeIndex(children);
+                }
+            }
+        });
+    };
     TreeView.prototype.getAllChildNodes = function (data, parentId) {
         if (isNOU(data) || isNOU(parentId)) {
             return [];

package/styles/accordion/_all.scss

@@ -1,2 +1,2 @@
-@import 'layout.scss';
-@import 'theme.scss';
+@use 'layout' as *;
+@use 'theme' as *;

package/styles/accordion/_bds-definition.scss

@@ -1,7 +1,11 @@
+@use 'ej2-base/styles/definition/bds' as *;
+@forward 'ej2-base/styles/definition/bds';
 $acrdn-skin: $skin-name !default;
 $acrdn-slct-header-font-weight: $font-weight-semibold;
 $acrdn-nrml-header-minheight: 40px !default;
+$acrdn-nrml-header-height: 40px !default;
 $acrdn-bgr-header-minheight: 48px !default;
+$acrdn-bgr-header-height: 48px !default;
 $acrdn-nrml-header-lineheight: 22px !default;
 $acrdn-bgr-header-lineheight: 24px !default;
 $acrdn-nrml-header-paddingpix: 16px !default;
@@ -165,3 +169,8 @@ $acrdn-item-nes-selected-exp-hover-hdr-con-font: $icon-color !default;
 $acrdn-item-exp-not-selected-hdr-focus-bg: $content-bg-color-focus !default;
 $acrdn-item-exp-not-selected-hdr-focus-border: 0 !default;
 $acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
+$acrdn-border-none: 0 !default;
+$acrdn-auto-height: auto !default;
+$acrdn-nested-header-content-font-weight: normal !default;
+$acrdn-padding-none: 0 !default;
+$acrdn-margin-none: 0 !default;

package/styles/accordion/_bigger.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('accordion-bigger') {
   .e-bigger .e-accordion,
   .e-accordion.e-bigger {
@@ -27,10 +29,10 @@
           }
 
           > .e-acrdn-content {
-            padding: 0;
+            padding: $acrdn-padding-none;
 
             > .e-accordion {
-              border: 0;
+              border: $acrdn-border-none;
             }
 
             .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
@@ -54,7 +56,7 @@
         padding: $acrdn-bgr-header-padding;
 
         .e-toggle-icon {
-          height: $acrdn-bgr-header-minheight;
+          height: $acrdn-bgr-header-height;
           min-height: $acrdn-bgr-header-minheight;
           min-width: $acrdn-bgr-icn-minwidth;
           right: $acrdn-bgr-header-paddingpix;
@@ -63,7 +65,7 @@
 
         .e-acrdn-header-icon {
           display: inline-block;
-          padding: 0 $acrdn-bgr-header-icon-padding 0 0;
+          padding: $acrdn-padding-none $acrdn-bgr-header-icon-padding $acrdn-padding-none $acrdn-padding-none;
 
           .e-acrdn-icons.e-icons {
             font-size: $acrdn-bgr-arrow-icon-font-size;
@@ -112,7 +114,7 @@
           }
 
           .e-acrdn-header-icon {
-            padding: 0 0 0 $acrdn-bgr-header-icon-padding;
+            padding: $acrdn-padding-none $acrdn-padding-none $acrdn-padding-none $acrdn-bgr-header-icon-padding;
           }
         }
       }

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

@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap-dark';
 
 $acrdn-skin: 'bootstrap' !default;
 $acrdn-header-font-weight: normal !default;
@@ -18,7 +20,9 @@ $acrdn-selected-border-size: $border-size !default;
 $acrdn-selected-border-color: $grey-99 !default;
 $acrdn-nested-header-font: $header-font-color !default;
 $acrdn-nrml-header-minheight: 40px !default;
+$acrdn-nrml-header-height: 40px !default;
 $acrdn-bgr-header-minheight: 50px !default;
+$acrdn-bgr-header-height: 50px !default;
 $acrdn-nrml-header-lineheight: 39px !default;
 $acrdn-bgr-header-lineheight: 48px !default;
 $acrdn-nrml-header-paddingpix: 15px !default;
@@ -167,3 +171,8 @@ $acrdn-item-nes-selected-exp-hover-hdr-con-font: $grey-dark-font !default;
 $acrdn-item-exp-not-selected-hdr-focus-bg: transparent !default;
 $acrdn-item-exp-not-selected-hdr-focus-border: 0 !default;
 $acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
+$acrdn-border-none: 0 !default;
+$acrdn-auto-height: auto !default;
+$acrdn-nested-header-content-font-weight: normal !default;
+$acrdn-padding-none: 0 !default;
+$acrdn-margin-none: 0 !default;

package/styles/accordion/_bootstrap-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@forward 'ej2-base/styles/definition/bootstrap';
 $acrdn-skin: 'bootstrap' !default;
 $acrdn-header-font-weight: normal !default;
 $acrdn-icon-font-size: $font-size !default;
@@ -22,7 +24,9 @@ $acrdn-selected-border-size: $border-size !default;
 $acrdn-selected-border-color: $default-border-color !default;
 $acrdn-nested-header-font: $header-font-color !default;
 $acrdn-nrml-header-minheight: 40px !default;
+$acrdn-nrml-header-height: 40px !default;
 $acrdn-bgr-header-minheight: 50px !default;
+$acrdn-bgr-header-height: 50px !default;
 $acrdn-nrml-header-lineheight: 39px !default;
 $acrdn-bgr-header-lineheight: 48px !default;
 $acrdn-nrml-header-paddingpix: 15px !default;
@@ -165,3 +169,8 @@ $acrdn-item-nes-selected-exp-hover-hdr-con-font: $gray-dark !default;
 $acrdn-item-exp-not-selected-hdr-focus-bg: transparent !default;
 $acrdn-item-exp-not-selected-hdr-focus-border: 0 !default;
 $acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
+$acrdn-border-none: 0 !default;
+$acrdn-auto-height: auto !default;
+$acrdn-nested-header-content-font-weight: normal !default;
+$acrdn-padding-none: 0 !default;
+$acrdn-margin-none: 0 !default;

package/styles/accordion/_bootstrap4-definition.scss

@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@forward 'ej2-base/styles/definition/bootstrap4';
 
 $acrdn-skin: 'bootstrap4' !default;
 $acrdn-border-size: 1px !default;
@@ -24,7 +26,9 @@ $acrdn-selected-border-size: $acrdn-border-size !default;
 $acrdn-selected-border-color: $black !default;
 $acrdn-nested-header-font: $primary !default;
 $acrdn-nrml-header-minheight: 40px !default;
+$acrdn-nrml-header-height: 40px !default;
 $acrdn-bgr-header-minheight: 50px !default;
+$acrdn-bgr-header-height: 50px !default;
 $acrdn-nrml-header-lineheight: 39px !default;
 $acrdn-bgr-header-lineheight: 48px !default;
 $acrdn-nrml-header-paddingpix: 15px !default;
@@ -175,3 +179,8 @@ $acrdn-item-nes-selected-exp-hover-hdr-con-font: $primary !default;
 $acrdn-item-exp-not-selected-hdr-focus-bg: $gray-100 !default;
 $acrdn-item-exp-not-selected-hdr-focus-border: 0 !default;
 $acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
+$acrdn-border-none: 0 !default;
+$acrdn-auto-height: auto !default;
+$acrdn-nested-header-content-font-weight: normal !default;
+$acrdn-padding-none: 0 !default;
+$acrdn-margin-none: 0 !default;

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

@@ -1 +1,177 @@
-@import './bootstrap5-definition.scss';
+@use 'ej2-base/styles/definition/bootstrap5-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap5-dark';
+$acrdn-skin: 'bootstrap5' !default;
+$acrdn-icon-font-size: $text-lg !default;
+$acrdn-slct-header-font-weight: $font-weight-normal;
+$acrdn-header-font: $content-text-color !default;
+$acrdn-nested-header-font: $content-text-color !default;
+$acrdn-header-font-weight: $font-weight-normal !default;
+$acrdn-header-font-size: $text-sm !default;
+$acrdn-nest-header-font-size: $text-sm !default;
+$acrdn-nest-header-content-font-size: $acrdn-nest-header-font-size !default;
+$acrdn-nest-header-content-font-weight: $font-weight-normal !default;
+$acrdn-content-font-size: $text-sm !default;
+$acrdn-header-font-bgr-size: $text-base !default;
+$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-lg !default;
+$acrdn-selected-header-font-color: $primary !default;
+$acrdn-nest-nrml-header-padding: 10px 0 10px 26px !default;
+$acrdn-nest-bgr-header-padding: 12px 0 12px 28px !default;
+$acrdn-nest-second-nrml-header-padding: 8px 0 8px 38px !default;
+$acrdn-nest-second-bgr-header-padding: 12px 0 12px 40px !default;
+$acrdn-nrml-header-padding: 10px 16px !default;
+$acrdn-bgr-header-padding: 13px 20px !default;
+$acrdn-rtl-nrml-header-padding: 7px 12px !default;
+$acrdn-rtl-bgr-header-padding: 11px 17px !default;
+$acrdn-rtl-nest-nrml-header-padding: 8px 26px 8px 0 !default;
+$acrdn-rtl-nest-bgr-header-padding: 12px 28px 12px 0 !default;
+$acrdn-rtl-nest-second-nrml-header-padding: 8px 38px 8px 0 !default;
+$acrdn-rtl-nest-second-bgr-header-padding: 12px 40px 12px 0 !default;
+$acrdn-nested-item-header-focus-box-shadow: inset $shadow-focus-ring1 !default;
+$acrdn-nrml-content-padding: 12px !default;
+$acrdn-bgr-content-padding: 16px !default;
+$acrdn-nest-nrml-content-padding: 16px 16px 16px 26px !default;
+$acrdn-nest-bgr-content-padding: 20px 20px 20px 28px !default;
+$acrdn-nest-second-nrml-content-padding: 20px 20px 20px 38px !default;
+$acrdn-nest-second-bgr-content-padding: 24px 24px 24px 40px !default;
+$acrdn-rtl-nest-nrml-content-padding: 16px 26px 16px 16px !default;
+$acrdn-rtl-nest-bgr-content-padding: 20px 28px 20px 20px !default;
+$acrdn-rtl-nest-second-nrml-content-padding: 20px 38px 20px 20px !default;
+$acrdn-rtl-nest-second-bgr-content-padding: 24px 40px 24px 24px !default;
+$acrdn-border-radius: 4px !default;
+$acrdn-nrml-header-minheight: 38px !default;
+$acrdn-nrml-header-height: 38px !default;
+$acrdn-bgr-header-minheight: 48px !default;
+$acrdn-bgr-header-height: 48px !default;
+$acrdn-nrml-header-lineheight: 22px !default;
+$acrdn-bgr-header-lineheight: 24px !default;
+$acrdn-nrml-header-paddingpix: 16px !default;
+$acrdn-bgr-header-paddingpix: 16px !default;
+$acrdn-content-line-height: 1.5 !default;
+$acrdn-nrml-header-icon-padding: 8px !default;
+$acrdn-bgr-header-icon-padding: 12px !default;
+$acrdn-nrml-icn-minwidth: 22px !default;
+$acrdn-bgr-icn-minwidth: 24px !default;
+$acrdn-selected-border-size: 1px !default;
+$acrdn-item-padding-size: 0 !default;
+$acrdn-selected-border-type: none !default;
+$acrdn-border-type: solid !default;
+$acrdn-border-size: 1px !default;
+$acrdn-item-hdr-con-lineheight: 22px !default;
+$acrdn-item-selected-first-child-border-top: 1px none $border-light !default;
+$acrdn-item-selected-last-child-border-bottom: 1px solid $border-light !default;
+$acrdn-item-border-radius: 0 !default;
+$acrdn-item-margin-top: 0 !default;
+$acrdn-item-nested-panel-item-select-margin: 0 !default;
+$acrdn-item-overflow: visible !default;
+$acrdn-item-hover-focus-hdr-con-text-decoration: none !default;
+$acrdn-item-hdr-border-radius: 0 !default;
+$acrdn-item-tgl-icon-display: table !default;
+$acrdn-item-arrow-icon-font-size: $text-lg !default;
+$acrdn-opacity: .5 !default;
+$acrdn-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
+$acrdn-active-bg: $content-bg-color !default;
+$acrdn-bg-color: $content-bg-color !default;
+$acrdn-default-bg-color: $acrdn-bg-color !default;
+$acrdn-active-bg-color: $acrdn-active-bg !default;
+$acrdn-selected-header-color: $content-bg-color !default;
+$acrdn-icon-color: $icon-color !default;
+$acrdn-selected-icon-color: $primary !default;
+$acrdn-content-color: $content-text-color !default;
+$acrdn-selected-border-color: $border-light !default;
+$acrdn-header-focus-bg: $primary-lighter !default;
+$acrdn-header-hover-bg: $primary-lighter !default;
+$acrdn-header-active-bg: $primary-lighter !default;
+$acrdn-item-header-focus-border-color: $primary !default;
+$acrdn-item-icon-disable-color: $icon-color-disabled;
+$acrdn-text-disable-color: $content-text-color-disabled;
+$acrdn-default-border: $acrdn-selected-border-color !default;
+$acrdn-item-border-color: $acrdn-default-border !default;
+$acrdn-item-border-nav-type: solid !default;
+$acrdn-item-border-size: 0 0 1px 0 !default;
+$acrdn-item-select-last-child-border-bottom: 0 !default;
+$acrdn-item-select-last-child-border-radius: 0 !default;
+$acrdn-item-first-child-hdr-focus-border-radius: 4px 4px 0 0 !default;
+$acrdn-item-last-child-border-bottom: 0 !default;
+$acrdn-item-last-child-not-exp-hdr-focus-border-radius: 0 0 4px 4px !default;
+$acrdn-item-focus-border-color: $acrdn-default-border !default;
+$acrdn-item-focus-border-size: 0 0 1px 0 !default;
+$acrdn-item-focus-selected-exp-border-top: 1px none $acrdn-default-border !default;
+$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: $primary-lighter !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;
+$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: $content-text-color !default;
+$acrdn-item-hdr-con-text-disabled-font: $content-text-color-disabled !default;
+$acrdn-item-selected-exp-hdr-focus-border-color: $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: $primary-lighter !default;
+$acrdn-item-selected-exp-hdr-hover-bg: $primary-lighter !default;
+$acrdn-item-selected-exp-hdr-active-bg: $primary-lighter !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: $border-light !default;
+$acrdn-item-select-border-size: 0 0 1px 0 !default;
+$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: none !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: none !default;
+$acrdn-item-header-focus-active-color: $content-text-color !default;
+$acrdn-item-select-exp-hdr-hover-color: $primary !default;
+$acrdn-item-selected-exp-hdr-border-color: $border-light !default;
+$acrdn-item-selected-exp-hdr-border-size: 0 0 1px 0 !default;
+$acrdn-item-selected-exp-hdr-bg: $primary-lighter !default;
+$acrdn-item-selected-exp-hdr-hover-color: $accordion-text-active-color !default;
+$acrdn-item-selected-exp-hdr-hover-focus-color: $accordion-text-active-color !default;
+$acrdn-item-selected-exp-hdr-icon-color: $icon-color !default;
+$acrdn-item-selected-exp-hdr-hover-border-color: $border-light !default;
+$acrdn-item-selected-tgl-icon-color: $accordion-text-active-color !default;
+$acrdn-item-selected-hdr-font: $accordion-text-active-color !default;
+$acrdn-item-select-hdr-focus-border-color: $border-light !default;
+$acrdn-item-selected-border-color: $border-light !default;
+$acrdn-item-selected-border-size: 0 0 1px 0 !default;
+$acrdn-item-selected-select-last-border-bottom: 1px none $border-light !default;
+$acrdn-item-selected-selected-border-color: $border-light !default;
+$acrdn-item-selected-selected-border-size: 0 0 1px 0 !default;
+$acrdn-item-selected-header-background: $primary-lighter !default;
+$acrdn-item-selected-hdr-border-color: $border-light !default;
+$acrdn-item-selected-hdr-border-size:  0 0 1px 0 !default;
+$acrdn-item-selected-header-border-radius: 0 !default;
+$acrdn-item-selected-hdr-con-font: $accordion-text-active-color !default;
+$acrdn-item-selected-select-border-color: $border-light !default;
+$acrdn-item-selected-select-border-size: 0 0 1px 0 !default;
+$acrdn-item-selected-hdr-icon-font: $accordion-text-active-color !default;
+$acrdn-item-selected-exp-hdr-con-hover-color: $accordion-text-active-color !default;
+$acrdn-item-selected-exp-hdr-icon-hover-color: $icon-color !default;
+$acrdn-item-selected-select-active-bg: $content-bg-color !default;
+$acrdn-item-nes-pan-exp-hdr-color: $content-text-color !default;
+$acrdn-item-selected-hdr-hover-border-color: $border-light !default;
+$acrdn-item-selected-hdr-tgl-icon-hover-font: $accordion-text-active-color !default;
+$acrdn-item-nes-selected-exp-hover-hdr-icons-font: $primary !default;
+$acrdn-item-nes-selected-exp-hover-hdr-con-font: $content-text-color !default;
+$acrdn-item-exp-not-selected-hdr-focus-bg: none !default;
+$acrdn-item-exp-not-selected-hdr-focus-border: 0 !default;
+$acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
+$acrdn-border-none: 0 !default;
+$acrdn-auto-height: auto !default;
+$acrdn-nested-header-content-font-weight: normal !default;
+$acrdn-padding-none: 0 !default;
+$acrdn-margin-none: 0 !default;

package/styles/accordion/_bootstrap5-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@forward 'ej2-base/styles/definition/bootstrap5';
 $acrdn-skin: 'bootstrap5' !default;
 $acrdn-icon-font-size: $text-lg !default;
 $acrdn-slct-header-font-weight: $font-weight-normal;
@@ -40,7 +42,9 @@ $acrdn-rtl-nest-second-nrml-content-padding: 20px 38px 20px 20px !default;
 $acrdn-rtl-nest-second-bgr-content-padding: 24px 40px 24px 24px !default;
 $acrdn-border-radius: 4px !default;
 $acrdn-nrml-header-minheight: 38px !default;
+$acrdn-nrml-header-height: 38px !default;
 $acrdn-bgr-header-minheight: 48px !default;
+$acrdn-bgr-header-height: 48px !default;
 $acrdn-nrml-header-lineheight: 22px !default;
 $acrdn-bgr-header-lineheight: 24px !default;
 $acrdn-nrml-header-paddingpix: 16px !default;
@@ -166,3 +170,8 @@ $acrdn-item-nes-selected-exp-hover-hdr-con-font: $content-text-color !default;
 $acrdn-item-exp-not-selected-hdr-focus-bg: none !default;
 $acrdn-item-exp-not-selected-hdr-focus-border: 0 !default;
 $acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
+$acrdn-border-none: 0 !default;
+$acrdn-auto-height: auto !default;
+$acrdn-nested-header-content-font-weight: normal !default;
+$acrdn-padding-none: 0 !default;
+$acrdn-margin-none: 0 !default;

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

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@forward 'ej2-base/styles/definition/bootstrap5.3';
 $acrdn-skin: 'bootstrap5' !default;
 $acrdn-icon-font-size: $text-lg !default;
 $acrdn-slct-header-font-weight: $font-weight-normal;
@@ -38,9 +40,11 @@ $acrdn-rtl-nest-nrml-content-padding: 16px 26px 16px 16px !default;
 $acrdn-rtl-nest-bgr-content-padding: 20px 28px 20px 20px !default;
 $acrdn-rtl-nest-second-nrml-content-padding: 20px 38px 20px 20px !default;
 $acrdn-rtl-nest-second-bgr-content-padding: 24px 40px 24px 24px !default;
-$acrdn-border-radius: 4px !default;
+$acrdn-border-radius: $radius-4 !default;
 $acrdn-nrml-header-minheight: 42px !default;
+$acrdn-nrml-header-height: 42px !default;
 $acrdn-bgr-header-minheight: 52px !default;
+$acrdn-bgr-header-height: 52px !default;
 $acrdn-nrml-header-lineheight: 22px !default;
 $acrdn-bgr-header-lineheight: 24px !default;
 $acrdn-nrml-header-paddingpix: 16px !default;
@@ -58,12 +62,12 @@ $acrdn-border-size: 1px !default;
 $acrdn-item-hdr-con-lineheight: 22px !default;
 $acrdn-item-selected-first-child-border-top: 1px none $border-light !default;
 $acrdn-item-selected-last-child-border-bottom: 1px solid $border-light !default;
-$acrdn-item-border-radius: 0 !default;
+$acrdn-item-border-radius: $radius-0 !default;
 $acrdn-item-margin-top: 0 !default;
 $acrdn-item-nested-panel-item-select-margin: 0 !default;
 $acrdn-item-overflow: visible !default;
 $acrdn-item-hover-focus-hdr-con-text-decoration: none !default;
-$acrdn-item-hdr-border-radius: 0 !default;
+$acrdn-item-hdr-border-radius: $radius-0 !default;
 $acrdn-item-tgl-icon-display: table !default;
 $acrdn-item-arrow-icon-font-size: $text-lg !default;
 $acrdn-opacity: .5 !default;
@@ -88,10 +92,10 @@ $acrdn-item-border-color: $acrdn-default-border !default;
 $acrdn-item-border-nav-type: solid !default;
 $acrdn-item-border-size: 0 0 1px 0 !default;
 $acrdn-item-select-last-child-border-bottom: 0 !default;
-$acrdn-item-select-last-child-border-radius: 0 !default;
-$acrdn-item-first-child-hdr-focus-border-radius: 4px 4px 0 0 !default;
+$acrdn-item-select-last-child-border-radius: $radius-0 !default;
+$acrdn-item-first-child-hdr-focus-border-radius: $radius-4 $radius-4 $radius-0 $radius-0 !default;
 $acrdn-item-last-child-border-bottom: 0 !default;
-$acrdn-item-last-child-not-exp-hdr-focus-border-radius: 0 0 4px 4px !default;
+$acrdn-item-last-child-not-exp-hdr-focus-border-radius: $radius-0 $radius-0 $radius-4 $radius-4 !default;
 $acrdn-item-focus-border-color: $acrdn-default-border !default;
 $acrdn-item-focus-border-size: 0 0 1px 0 !default;
 $acrdn-item-focus-selected-exp-border-top: 1px none $acrdn-default-border !default;
@@ -150,7 +154,7 @@ $acrdn-item-selected-selected-border-size: 0 0 1px 0 !default;
 $acrdn-item-selected-header-background: $primary-lighter !default;
 $acrdn-item-selected-hdr-border-color: $border-light !default;
 $acrdn-item-selected-hdr-border-size:  0 0 1px 0 !default;
-$acrdn-item-selected-header-border-radius: 0 !default;
+$acrdn-item-selected-header-border-radius: $radius-0 !default;
 $acrdn-item-selected-hdr-con-font: $accordion-text-active-color !default;
 $acrdn-item-selected-select-border-color: $border-light !default;
 $acrdn-item-selected-select-border-size: 0 0 1px 0 !default;
@@ -166,3 +170,8 @@ $acrdn-item-nes-selected-exp-hover-hdr-con-font: $content-text-color !default;
 $acrdn-item-exp-not-selected-hdr-focus-bg: none !default;
 $acrdn-item-exp-not-selected-hdr-focus-border: 0 !default;
 $acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
+$acrdn-border-none: 0 !default;
+$acrdn-auto-height: auto !default;
+$acrdn-nested-header-content-font-weight: normal !default;
+$acrdn-padding-none: 0 !default;
+$acrdn-margin-none: 0 !default;

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

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@forward 'ej2-base/styles/definition/fabric-dark';
 $acrdn-skin: 'fabric' !default;
 $acrdn-icon-font-size: $font-size !default;
 $acrdn-bgr-arrow-icon-font-size: 14px !default;
@@ -21,7 +23,9 @@ $acrdn-active-bg: $default-bg-color !default;
 $acrdn-active-bg-color: $acrdn-active-bg !default;
 $acrdn-nested-header-font: $neutral-light-font !default;
 $acrdn-nrml-header-minheight: 40px !default;
+$acrdn-nrml-header-height: 40px !default;
 $acrdn-bgr-header-minheight: 50px !default;
+$acrdn-bgr-header-height: 50px !default;
 $acrdn-nrml-header-lineheight: 39px !default;
 $acrdn-bgr-header-lineheight: 49px !default;
 $acrdn-nrml-header-paddingpix: 12px !default;
@@ -169,3 +173,8 @@ $acrdn-item-nes-selected-exp-hover-hdr-con-font: $neutral-primary !default;
 $acrdn-item-exp-not-selected-hdr-focus-bg: $neutral-quintenary !default;
 $acrdn-item-exp-not-selected-hdr-focus-border: 1px solid $acrdn-item-exp-hdr-focus-border-color !default;
 $acrdn-item-exp-not-selected-hdr-focus-border-color: $acrdn-item-exp-hdr-focus-border-color !default;
+$acrdn-border-none: 0 !default;
+$acrdn-auto-height: auto !default;
+$acrdn-nested-header-content-font-weight: normal !default;
+$acrdn-padding-none: 0 !default;
+$acrdn-margin-none: 0 !default;

package/styles/accordion/_fabric-definition.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/definition/fabric' as *;
+@forward 'ej2-base/styles/definition/fabric';
 $acrdn-skin: 'fabric' !default;
 $acrdn-header-font-bgr-size: 16px;
 $acrdn-content-font-bgr-size: 14px;
@@ -8,7 +10,9 @@ $acrdn-bgr-icn-minwidth: 30px;
 $acrdn-slct-header-font-weight: normal;
 $acrdn-nrml-icn-minwidth: 24px;
 $acrdn-nrml-header-minheight: 40px !default;
+$acrdn-nrml-header-height: 40px !default;
 $acrdn-bgr-header-minheight: 50px !default;
+$acrdn-bgr-header-height: 50px !default;
 $acrdn-nrml-header-lineheight: 39px !default;
 $acrdn-bgr-header-lineheight: 49px !default;
 $acrdn-icon-font-size: $font-size !default;
@@ -169,3 +173,8 @@ $acrdn-item-exp-not-selected-hdr-focus-bg: $theme-lighter !default;
 $acrdn-item-exp-not-selected-hdr-focus-border: 1px solid $acrdn-item-exp-hdr-focus-border-color !default;
 $acrdn-item-exp-not-selected-hdr-focus-border-color: $acrdn-item-exp-hdr-focus-border-color !default;
 $acrdn-nested-item-header-focus-box-shadow: none !default;
+$acrdn-border-none: 0 !default;
+$acrdn-auto-height: auto !default;
+$acrdn-nested-header-content-font-weight: normal !default;
+$acrdn-padding-none: 0 !default;
+$acrdn-margin-none: 0 !default;