@syncfusion/ej2-navigations 33.2.7 → 33.2.8

package/dist/global/index.d.ts

@@ -1,12 +1,3 @@
-/*!
-*  filename: index.d.ts
-*  version : 33.2.7
-*  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": "33.2.7",
+  "version": "33.2.8",
   "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",

package/src/accordion/accordion.d.ts

@@ -206,6 +206,7 @@ export declare class Accordion extends Component<HTMLElement> implements INotify
     private headerTemplateFn;
     private itemTemplateFn;
     private removeRippleEffect;
+    private isKeyboardNavigation;
     /**
      * Contains the keyboard configuration of the Accordion.
      */
@@ -356,6 +357,8 @@ export declare class Accordion extends Component<HTMLElement> implements INotify
     private getItemTemplate;
     private focusIn;
     private focusOut;
+    private keyDownHandler;
+    private mouseDownHandler;
     private ctrlTemplate;
     private toggleIconGenerate;
     private initItemExpand;

package/src/accordion/accordion.js

@@ -28,6 +28,7 @@ var CLS_ACRDN_ROOT = 'e-acrdn-root';
 var CLS_ROOT = 'e-accordion';
 var CLS_ITEM = 'e-acrdn-item';
 var CLS_ITEMFOCUS = 'e-item-focus';
+var CLS_KEYBOARDFOCUS = 'e-focused';
 var CLS_ITEMHIDE = 'e-hide';
 var CLS_HEADER = 'e-acrdn-header';
 var CLS_HEADERICN = 'e-acrdn-header-icon';
@@ -140,6 +141,7 @@ var Accordion = /** @class */ (function (_super) {
      */
     function Accordion(options, element) {
         var _this = _super.call(this, options, element) || this;
+        _this.isKeyboardNavigation = false;
         /**
          * Contains the keyboard configuration of the Accordion.
          */
@@ -254,6 +256,9 @@ var Accordion = /** @class */ (function (_super) {
     };
     Accordion.prototype.unWireEvents = function () {
         EventHandler.remove(this.element, 'click', this.clickHandler);
+        EventHandler.remove(this.element, 'keydown', this.keyDownHandler);
+        EventHandler.remove(document, 'keydown', this.keyDownHandler);
+        EventHandler.remove(this.element, 'mousedown', this.mouseDownHandler);
         if (!isNOU(this.keyModule)) {
             this.keyModule.destroy();
         }
@@ -265,6 +270,9 @@ var Accordion = /** @class */ (function (_super) {
     };
     Accordion.prototype.wireEvents = function () {
         EventHandler.add(this.element, 'click', this.clickHandler, this);
+        EventHandler.add(this.element, 'keydown', this.keyDownHandler, this);
+        EventHandler.add(document, 'keydown', this.keyDownHandler, this);
+        EventHandler.add(this.element, 'mousedown', this.mouseDownHandler, this);
         if (!this.isNested && !this.isDestroy) {
             this.removeRippleEffect = rippleEffect(this.element, { selector: '.' + CLS_HEADER });
         }
@@ -309,10 +317,27 @@ var Accordion = /** @class */ (function (_super) {
         return this.itemTemplateFn;
     };
     Accordion.prototype.focusIn = function (e) {
-        e.target.parentElement.classList.add(CLS_ITEMFOCUS);
+        var targetItem = e.target.parentElement;
+        targetItem.classList.add(CLS_ITEMFOCUS);
+        if (this.isKeyboardNavigation) {
+            targetItem.classList.add(CLS_KEYBOARDFOCUS);
+            this.isKeyboardNavigation = false;
+        }
     };
     Accordion.prototype.focusOut = function (e) {
-        e.target.parentElement.classList.remove(CLS_ITEMFOCUS);
+        var targetItem = e.target.parentElement;
+        targetItem.classList.remove(CLS_ITEMFOCUS);
+        targetItem.classList.remove(CLS_KEYBOARDFOCUS);
+    };
+    Accordion.prototype.keyDownHandler = function (e) {
+        if (e.key === 'Tab' || e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+            this.isKeyboardNavigation = true;
+        }
+    };
+    Accordion.prototype.mouseDownHandler = function (e) {
+        this.isKeyboardNavigation = false;
+        var targetItem = e.target.parentElement;
+        targetItem.classList.remove(CLS_KEYBOARDFOCUS);
     };
     Accordion.prototype.ctrlTemplate = function () {
         this.ctrlTem = this.element.cloneNode(true);

package/src/sidebar/sidebar.d.ts

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

package/src/sidebar/sidebar.js

@@ -59,6 +59,7 @@ var Sidebar = /** @class */ (function (_super) {
         var _this = _super.call(this, options, element) || this;
         _this.documentClickContext = _this.documentclickHandler.bind(_this);
         _this.resizeHandler = _this.resize.bind(_this);
+        _this.preventClose = false;
         return _this;
     }
     Sidebar.prototype.preRender = function () {
@@ -255,6 +256,10 @@ var Sidebar = /** @class */ (function (_super) {
                     setTimeout(function () { return _this.setTimeOut(); }, 50);
                 }
                 EventHandler.add(_this.element, 'transitionend', _this.transitionEnd, _this);
+                _this.preventClose = false;
+            }
+            else {
+                _this.preventClose = true;
             }
         });
     };
@@ -512,9 +517,12 @@ var Sidebar = /** @class */ (function (_super) {
                 case 'type':
                     this.checkType(false);
                     removeClass([this.element], [VISIBILITY]);
-                    this.addClass();
+                    if (!this.preventClose) {
+                        this.addClass();
+                    }
                     addClass([this.element], this.type === 'Auto' ? (Browser.isDevice ? ['e-over'] :
                         ['e-push']) : ['e-' + this.type.toLowerCase()]);
+                    this.setType(this.type);
                     break;
                 case 'position':
                     this.element.style.transform = '';

package/src/tab/tab.d.ts

@@ -559,6 +559,7 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     protected render(): void;
     private renderContainer;
     private renderHeader;
+    private updatePopupIconAriaLabel;
     private createContentElement;
     private renderContent;
     private reRenderItems;

package/src/tab/tab.js

@@ -286,6 +286,7 @@ var Tab = /** @class */ (function (_super) {
     Tab.prototype.refreshOverflow = function () {
         if (!isNOU(this.tbObj)) {
             this.tbObj.refreshOverflow();
+            this.updatePopupIconAriaLabel();
         }
     };
     /**
@@ -452,6 +453,7 @@ var Tab = /** @class */ (function (_super) {
             this.hdrEle.setAttribute('aria-labelledby', this.element.getAttribute('aria-labelledby'));
             this.element.removeAttribute('aria-labelledby');
         }
+        this.updatePopupIconAriaLabel();
         this.setCloseButton(this.showCloseButton);
         var toolbarHeader = this.tbObj.element.querySelector('.' + CLS_TB_ITEMS);
         if (!isNOU(toolbarHeader)) {
@@ -460,6 +462,21 @@ var Tab = /** @class */ (function (_super) {
             }
         }
     };
+    Tab.prototype.updatePopupIconAriaLabel = function () {
+        if (isNOU(this.hdrEle) || isNOU(this.tbObj) || this.tbObj.overflowMode !== 'Popup') {
+            return;
+        }
+        var nav = this.hdrEle.querySelector('.' + CLS_HOR_NAV);
+        if (isNOU(nav)) {
+            return;
+        }
+        var raw = window.getComputedStyle(nav, '::before').getPropertyValue('content');
+        var beforeText = (raw || '').trim().replace(/^['"]|['"]$/g, '').replace(/\\(["'])/g, '$1').replace(/\\\\/g, '\\');
+        var label = (beforeText && beforeText !== 'none' && beforeText !== 'normal')
+            ? beforeText
+            : 'overflow';
+        nav.setAttribute('aria-label', label);
+    };
     Tab.prototype.createContentElement = function (index) {
         var contentElement = this.createElement('div', {
             id: CLS_CONTENT + this.tabId + '_' + index, className: CLS_ITEM,
@@ -1908,11 +1925,13 @@ var Tab = /** @class */ (function (_super) {
             this.trigger('adding', addArgs, function (tabAddingArgs) {
                 if (!tabAddingArgs.cancel) {
                     _this.addingTabContent(items, index);
+                    _this.updatePopupIconAriaLabel();
                 }
             });
         }
         else {
             this.addingTabContent(items, index);
+            this.updatePopupIconAriaLabel();
         }
         if (this.isReact) {
             this.renderReactTemplates();
@@ -2359,6 +2378,7 @@ var Tab = /** @class */ (function (_super) {
                     this.tbObj.overflowMode = newProp.overflowMode;
                     this.tbObj.dataBind();
                     this.refreshActiveTabBorder();
+                    this.updatePopupIconAriaLabel();
                     break;
                 case 'heightAdjustMode':
                     this.setContentHeight(false);
@@ -2527,6 +2547,7 @@ var Tab = /** @class */ (function (_super) {
             this.select(this.getEleIndex(activeEle));
         }
         this.refreshActiveBorder();
+        this.updatePopupIconAriaLabel();
     };
     __decorate([
         Collection([], TabItem)

package/styles/accordion/_layout.scss

@@ -76,6 +76,12 @@
         }
       }
 
+      &.e-focused {
+        >.e-acrdn-header {
+          box-shadow: $acrdn-item-header-focus-box-shadow;
+        }
+      }
+
       .e-acrdn-header {
         border-radius: $acrdn-item-hdr-border-radius;
         line-height: $acrdn-nrml-header-lineheight;
@@ -137,12 +143,12 @@
             padding: $acrdn-nest-nrml-content-padding;
           }
 
+          > .e-acrdn-content > .e-accordion > .e-acrdn-item.e-focused > .e-acrdn-header {
+            box-shadow: $acrdn-nested-item-header-focus-box-shadow;
+          }
+
           > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
             padding: $acrdn-nest-nrml-header-padding;
-
-            &:focus {
-              box-shadow: $acrdn-nested-item-header-focus-box-shadow;
-            }
           }
 
           > .e-acrdn-content {

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

@@ -45,7 +45,7 @@ $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: none !default;
+$acrdn-nested-item-header-focus-box-shadow: $shadow-focus-ring3 !default;
 $acrdn-nrml-content-padding: 12px !default;
 $acrdn-bgr-content-padding: 16px !default;
 $acrdn-nest-nrml-content-padding: 16px 16px 16px 26px !default;

package/styles/accordion/_material3-definition.scss

@@ -45,7 +45,7 @@ $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: none !default;
+$acrdn-nested-item-header-focus-box-shadow: $shadow-focus-ring3 !default;
 $acrdn-nrml-content-padding: 12px !default;
 $acrdn-bgr-content-padding: 16px !default;
 $acrdn-nest-nrml-content-padding: 16px 16px 16px 26px !default;

package/styles/accordion/_tailwind3-definition.scss

@@ -28,7 +28,7 @@ $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: none !default;
+$acrdn-nested-item-header-focus-box-shadow: $shadow-focus-ring2 !default;
 $acrdn-nrml-content-padding: 12px !default;
 $acrdn-bgr-content-padding: 16px !default;
 $acrdn-nest-nrml-content-padding: 16px 16px 16px 26px !default;

package/styles/accordion/_theme.scss

@@ -236,7 +236,6 @@
         &:focus {
           border: $acrdn-item-header-focus-border;
           background: $acrdn-item-header-focus-bg;
-          @include acrdn-item-header-focus-box-shadow;
 
           &:active {
 
@@ -247,7 +246,6 @@
             }
           }
         }
-        @include acrdn-item-header-focus-visible-box-shadow;
       }
 
       &.e-select {
@@ -356,9 +354,7 @@
           &:focus {
             position: relative;
             z-index: 2;
-            @include acrdn-item-header-focus-box-shadow;
           }
-          @include acrdn-item-header-focus-visible-box-shadow;
         }
 
         + .e-selected {

package/styles/accordion/bds.css

@@ -67,6 +67,10 @@
 .e-accordion .e-acrdn-item.e-select > .e-acrdn-header:hover .e-acrdn-header-content, .e-accordion .e-acrdn-item.e-select > .e-acrdn-header:focus .e-acrdn-header-content {
   text-decoration: none;
 }
+.e-accordion .e-acrdn-item.e-focused > .e-acrdn-header {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
 .e-accordion .e-acrdn-item .e-acrdn-header {
   border-radius: 0;
   line-height: 22px;
@@ -118,13 +122,13 @@
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content {
   padding: 16px 16px 16px 26px;
 }
-.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
-  padding: 8px 0 8px 26px;
-}
-.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header:focus {
+.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item.e-focused > .e-acrdn-header {
   -webkit-box-shadow: none;
           box-shadow: none;
 }
+.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+  padding: 8px 0 8px 26px;
+}
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content {
   padding: 0;
 }
@@ -334,8 +338,6 @@
 .e-accordion .e-acrdn-item .e-acrdn-header:focus {
   border: 0;
   background: var(--color-sf-bg-tertiary);
-  -webkit-box-shadow: none;
-          box-shadow: none;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header:focus:active .e-icons,
 .e-accordion .e-acrdn-item .e-acrdn-header:focus:active .e-acrdn-header-content,
@@ -414,8 +416,6 @@
 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header:focus {
   position: relative;
   z-index: 2;
-  -webkit-box-shadow: none;
-          box-shadow: none;
 }
 .e-accordion .e-acrdn-item.e-selected + .e-selected {
   border-color: var(--color-sf-border-secondary);

package/styles/accordion/bootstrap-dark.css

@@ -59,6 +59,10 @@
 .e-accordion .e-acrdn-item.e-select > .e-acrdn-header:hover .e-acrdn-header-content, .e-accordion .e-acrdn-item.e-select > .e-acrdn-header:focus .e-acrdn-header-content {
   text-decoration: underline;
 }
+.e-accordion .e-acrdn-item.e-focused > .e-acrdn-header {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
 .e-accordion .e-acrdn-item .e-acrdn-header {
   border-radius: 4px;
   line-height: 39px;
@@ -110,13 +114,13 @@
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content {
   padding: 15px 15px 15px 30px;
 }
-.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
-  padding: 0 30px;
-}
-.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header:focus {
+.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item.e-focused > .e-acrdn-header {
   -webkit-box-shadow: none;
           box-shadow: none;
 }
+.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+  padding: 0 30px;
+}
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content {
   padding: 0;
 }
@@ -322,8 +326,6 @@
 .e-accordion .e-acrdn-item .e-acrdn-header:focus {
   border: 0;
   background: transparent;
-  -webkit-box-shadow: none;
-          box-shadow: none;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header:focus:active .e-icons,
 .e-accordion .e-acrdn-item .e-acrdn-header:focus:active .e-acrdn-header-content,
@@ -402,8 +404,6 @@
 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header:focus {
   position: relative;
   z-index: 2;
-  -webkit-box-shadow: none;
-          box-shadow: none;
 }
 .e-accordion .e-acrdn-item.e-selected + .e-selected {
   border-color: #505050;

package/styles/accordion/bootstrap.css

@@ -59,6 +59,10 @@
 .e-accordion .e-acrdn-item.e-select > .e-acrdn-header:hover .e-acrdn-header-content, .e-accordion .e-acrdn-item.e-select > .e-acrdn-header:focus .e-acrdn-header-content {
   text-decoration: underline;
 }
+.e-accordion .e-acrdn-item.e-focused > .e-acrdn-header {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
 .e-accordion .e-acrdn-item .e-acrdn-header {
   border-radius: 4px;
   line-height: 39px;
@@ -110,13 +114,13 @@
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content {
   padding: 15px 15px 15px 30px;
 }
-.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
-  padding: 0 30px;
-}
-.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header:focus {
+.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item.e-focused > .e-acrdn-header {
   -webkit-box-shadow: none;
           box-shadow: none;
 }
+.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+  padding: 0 30px;
+}
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content {
   padding: 0;
 }
@@ -322,8 +326,6 @@
 .e-accordion .e-acrdn-item .e-acrdn-header:focus {
   border: 0;
   background: transparent;
-  -webkit-box-shadow: none;
-          box-shadow: none;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header:focus:active .e-icons,
 .e-accordion .e-acrdn-item .e-acrdn-header:focus:active .e-acrdn-header-content,
@@ -402,8 +404,6 @@
 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header:focus {
   position: relative;
   z-index: 2;
-  -webkit-box-shadow: none;
-          box-shadow: none;
 }
 .e-accordion .e-acrdn-item.e-selected + .e-selected {
   border-color: #ddd;

package/styles/accordion/bootstrap4.css

@@ -59,6 +59,10 @@
 .e-accordion .e-acrdn-item.e-select > .e-acrdn-header:hover .e-acrdn-header-content, .e-accordion .e-acrdn-item.e-select > .e-acrdn-header:focus .e-acrdn-header-content {
   text-decoration: underline;
 }
+.e-accordion .e-acrdn-item.e-focused > .e-acrdn-header {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
 .e-accordion .e-acrdn-item .e-acrdn-header {
   border-radius: 0;
   line-height: 39px;
@@ -110,13 +114,13 @@
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content {
   padding: 15px 15px 15px 30px;
 }
-.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
-  padding: 0 30px;
-}
-.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header:focus {
+.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item.e-focused > .e-acrdn-header {
   -webkit-box-shadow: none;
           box-shadow: none;
 }
+.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+  padding: 0 30px;
+}
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content {
   padding: 0;
 }
@@ -322,8 +326,6 @@
 .e-accordion .e-acrdn-item .e-acrdn-header:focus {
   border: 0;
   background: #f8f9fa;
-  -webkit-box-shadow: none;
-          box-shadow: none;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header:focus:active .e-icons,
 .e-accordion .e-acrdn-item .e-acrdn-header:focus:active .e-acrdn-header-content,
@@ -402,8 +404,6 @@
 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header:focus {
   position: relative;
   z-index: 2;
-  -webkit-box-shadow: none;
-          box-shadow: none;
 }
 .e-accordion .e-acrdn-item.e-selected + .e-selected {
   border-color: #000 #000 rgba(0, 0, 0, 0.13);

package/styles/accordion/bootstrap5-dark.css

@@ -59,6 +59,10 @@
 .e-accordion .e-acrdn-item.e-select > .e-acrdn-header:hover .e-acrdn-header-content, .e-accordion .e-acrdn-item.e-select > .e-acrdn-header:focus .e-acrdn-header-content {
   text-decoration: none;
 }
+.e-accordion .e-acrdn-item.e-focused > .e-acrdn-header {
+  -webkit-box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
+          box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
+}
 .e-accordion .e-acrdn-item .e-acrdn-header {
   border-radius: 0;
   line-height: 22px;
@@ -110,13 +114,13 @@
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content {
   padding: 16px 16px 16px 26px;
 }
-.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
-  padding: 10px 0 10px 26px;
-}
-.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header:focus {
+.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item.e-focused > .e-acrdn-header {
   -webkit-box-shadow: inset 0 0 0 4px rgba(13, 110, 253, 0.25);
           box-shadow: inset 0 0 0 4px rgba(13, 110, 253, 0.25);
 }
+.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+  padding: 10px 0 10px 26px;
+}
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content {
   padding: 0;
 }
@@ -322,8 +326,6 @@
 .e-accordion .e-acrdn-item .e-acrdn-header:focus {
   border: 0;
   background: none;
-  -webkit-box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
-          box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
 }
 .e-accordion .e-acrdn-item .e-acrdn-header:focus:active .e-icons,
 .e-accordion .e-acrdn-item .e-acrdn-header:focus:active .e-acrdn-header-content,
@@ -402,8 +404,6 @@
 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header:focus {
   position: relative;
   z-index: 2;
-  -webkit-box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
-          box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
 }
 .e-accordion .e-acrdn-item.e-selected + .e-selected {
   border-color: rgb(68.0034482759, 75.85, 83.6965517241);

package/styles/accordion/bootstrap5.3.css

@@ -227,6 +227,10 @@
 .e-accordion .e-acrdn-item.e-select > .e-acrdn-header:hover .e-acrdn-header-content, .e-accordion .e-acrdn-item.e-select > .e-acrdn-header:focus .e-acrdn-header-content {
   text-decoration: none;
 }
+.e-accordion .e-acrdn-item.e-focused > .e-acrdn-header {
+  -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-primary-shadow), 0.5);
+          box-shadow: 0 0 0 4px rgba(var(--color-sf-primary-shadow), 0.5);
+}
 .e-accordion .e-acrdn-item .e-acrdn-header {
   border-radius: calc(var(--e-radius) * 0);
   line-height: 22px;
@@ -278,13 +282,13 @@
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content {
   padding: 16px 16px 16px 26px;
 }
-.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
-  padding: 10px 0 10px 26px;
-}
-.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header:focus {
+.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item.e-focused > .e-acrdn-header {
   -webkit-box-shadow: inset 0 0 0 4px rgba(var(--color-sf-primary-shadow), 0.25);
           box-shadow: inset 0 0 0 4px rgba(var(--color-sf-primary-shadow), 0.25);
 }
+.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+  padding: 10px 0 10px 26px;
+}
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content {
   padding: 0;
 }
@@ -574,8 +578,6 @@
 .e-accordion .e-acrdn-item .e-acrdn-header:focus {
   border: 0;
   background: none;
-  -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-primary-shadow), 0.5);
-          box-shadow: 0 0 0 4px rgba(var(--color-sf-primary-shadow), 0.5);
 }
 .e-accordion .e-acrdn-item .e-acrdn-header:focus:active .e-icons,
 .e-accordion .e-acrdn-item .e-acrdn-header:focus:active .e-acrdn-header-content,
@@ -654,8 +656,6 @@
 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header:focus {
   position: relative;
   z-index: 2;
-  -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-primary-shadow), 0.5);
-          box-shadow: 0 0 0 4px rgba(var(--color-sf-primary-shadow), 0.5);
 }
 .e-accordion .e-acrdn-item.e-selected + .e-selected {
   border-color: var(--color-sf-border-light);

package/styles/accordion/bootstrap5.css

@@ -59,6 +59,10 @@
 .e-accordion .e-acrdn-item.e-select > .e-acrdn-header:hover .e-acrdn-header-content, .e-accordion .e-acrdn-item.e-select > .e-acrdn-header:focus .e-acrdn-header-content {
   text-decoration: none;
 }
+.e-accordion .e-acrdn-item.e-focused > .e-acrdn-header {
+  -webkit-box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
+          box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
+}
 .e-accordion .e-acrdn-item .e-acrdn-header {
   border-radius: 0;
   line-height: 22px;
@@ -110,13 +114,13 @@
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content {
   padding: 16px 16px 16px 26px;
 }
-.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
-  padding: 10px 0 10px 26px;
-}
-.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header:focus {
+.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item.e-focused > .e-acrdn-header {
   -webkit-box-shadow: inset 0 0 0 4px rgba(13, 110, 253, 0.25);
           box-shadow: inset 0 0 0 4px rgba(13, 110, 253, 0.25);
 }
+.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+  padding: 10px 0 10px 26px;
+}
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content {
   padding: 0;
 }
@@ -322,8 +326,6 @@
 .e-accordion .e-acrdn-item .e-acrdn-header:focus {
   border: 0;
   background: none;
-  -webkit-box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
-          box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
 }
 .e-accordion .e-acrdn-item .e-acrdn-header:focus:active .e-icons,
 .e-accordion .e-acrdn-item .e-acrdn-header:focus:active .e-acrdn-header-content,
@@ -402,8 +404,6 @@
 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header:focus {
   position: relative;
   z-index: 2;
-  -webkit-box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
-          box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
 }
 .e-accordion .e-acrdn-item.e-selected + .e-selected {
   border-color: #dee2e6;