@syncfusion/ej2-navigations 24.1.41 → 24.1.46

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 24.1.41
+*  version : 24.1.46
 *  Copyright Syncfusion Inc. 2001 - 2023. 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,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-navigations@*",
-  "_id": "@syncfusion/ej2-navigations@22.41.2",
+  "_id": "@syncfusion/ej2-navigations@24.1.41",
   "_inBundle": false,
-  "_integrity": "sha512-b3KXfky3ZmIlLFaIktMCIBAljYf+fcwzAVfffACt0yKbZjrAstPSX0sacmik/l8rDhZBuKyLA+8AeIpITMKDIg==",
+  "_integrity": "sha512-kXAQii6XynPPhUCd3d6S/IhpzlLkW+VgSX7dF+ZtrX7PCmA/Qw9kGIoOmFycz6pyLek7aTdRsQF9AwwK/a62fQ==",
   "_location": "/@syncfusion/ej2-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -39,8 +39,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-navigations"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-navigations/-/ej2-navigations-22.41.2.tgz",
-  "_shasum": "7c8e8a2249c22f6e3c5799e28f824826fa0ebd6c",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-24.1.41.tgz",
+  "_shasum": "b96f68d3d0f7381c0f660fb09a55add4f2068e81",
   "_spec": "@syncfusion/ej2-navigations@*",
   "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
   "author": {
@@ -51,12 +51,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~24.1.41",
-    "@syncfusion/ej2-buttons": "~24.1.41",
+    "@syncfusion/ej2-base": "~24.1.46",
+    "@syncfusion/ej2-buttons": "~24.1.46",
     "@syncfusion/ej2-data": "~24.1.41",
-    "@syncfusion/ej2-inputs": "~24.1.41",
-    "@syncfusion/ej2-lists": "~24.1.41",
-    "@syncfusion/ej2-popups": "~24.1.41"
+    "@syncfusion/ej2-inputs": "~24.1.45",
+    "@syncfusion/ej2-lists": "~24.1.46",
+    "@syncfusion/ej2-popups": "~24.1.46"
   },
   "deprecated": false,
   "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",
@@ -161,6 +161,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "24.1.41",
+  "version": "24.1.46",
   "sideEffects": false
 }

package/src/common/menu-base.js

@@ -523,7 +523,25 @@ var MenuBase = /** @class */ (function (_super) {
                     fli.classList.add(SELECTED);
                     eventArgs = { element: fli, item: item, event: e };
                     this.trigger('select', eventArgs);
+                    var aEle = fli.querySelector('.e-menu-url');
+                    if (item.url && aEle) {
+                        switch (aEle.getAttribute('target')) {
+                            case '_blank':
+                                window.open(item.url, '_blank');
+                                break;
+                            case '_parent':
+                                window.parent.location.href = item.url;
+                                break;
+                            default:
+                                window.location.href = item.url;
+                        }
+                    }
                     this.closeMenu(null, e);
+                    var sli = this.getLIByClass(this.getUlByNavIdx(), SELECTED);
+                    if (sli) {
+                        sli.classList.add(FOCUSED);
+                        sli.focus();
+                    }
                 }
             }
         }
@@ -621,6 +639,9 @@ var MenuBase = /** @class */ (function (_super) {
                         closeArgs = { element: ul_1, parentItem: item_1, items: items_1 };
                         _this.trigger('onClose', closeArgs);
                         _this.navIdx.pop();
+                        if (_this.navIdx.length === 0) {
+                            _this.showSubMenu = false;
+                        }
                         if (!_this.isMenu) {
                             EventHandler.remove(ul_1, 'keydown', _this.keyHandler);
                             if (_this.keyType === 'right') {

package/src/stepper/stepper.js

@@ -155,6 +155,7 @@ var Stepper = /** @class */ (function (_super) {
             home: 'home',
             end: 'end',
             tab: 'tab',
+            shiftTab: 'shift+tab',
             escape: 'escape'
         };
         this.tooltipOpen = false;
@@ -752,7 +753,7 @@ var Stepper = /** @class */ (function (_super) {
             var itemElement = this.stepperItemElements[parseInt(i.toString(), 10)];
             var item = this.steps[parseInt(i.toString(), 10)];
             itemElement.classList.remove(SELECTED, INPROGRESS, COMPLETED, NOTSTARTED);
-            if (i === this.activeStep || this.activeStep === this.steps.length - 1) {
+            if (i === this.activeStep) {
                 itemElement.classList.add(SELECTED);
             }
             if (this.activeStep >= 0 && this.progressbar) {
@@ -814,7 +815,7 @@ var Stepper = /** @class */ (function (_super) {
             }
             var prevOnChange_1 = this.isProtectedOnChange;
             this.isProtectedOnChange = true;
-            if (isUpdated != false) {
+            if (isUpdated !== false) {
                 if (i < this.activeStep || (this.steps.length - 1 === this.activeStep && item.status.toLowerCase() === "completed")) {
                     item.status = StepStatus.Completed;
                 }
@@ -924,17 +925,12 @@ var Stepper = /** @class */ (function (_super) {
         switch (e.action) {
             case 'uparrow':
             case 'downarrow':
-                if (this.element.classList.contains(VERTICALSTEP)) {
-                    this.handleNavigation(e.action === 'uparrow' ? false : true, e);
-                }
-                break;
             case 'leftarrow':
             case 'rightarrow':
-                if (this.element.classList.contains(HORIZSTEP)) {
-                    this.handleNavigation(this.enableRtl ? e.action === 'leftarrow' : e.action === 'rightarrow', e);
-                }
-                break;
             case 'tab':
+            case 'shiftTab':
+                this.handleNavigation(this.enableRtl && this.element.classList.contains(HORIZSTEP) ? (e.action === 'leftarrow' || e.action === 'shiftTab' || e.action === 'uparrow') : (e.action === 'rightarrow' || e.action === 'tab' || e.action === 'downarrow'), e);
+                break;
             case 'space':
             case 'enter':
             case 'escape':
@@ -955,11 +951,22 @@ var Stepper = /** @class */ (function (_super) {
         }
         var stepItems = Array.prototype.slice.call(this.stepperItemList.children);
         var index = stepItems.indexOf(focusedEle);
-        if (e.action === 'tab' || e.action === 'escape') {
+        if (e.action === 'tab' || e.action === 'shiftTab' || e.action === 'downarrow' || e.action === 'uparrow' || e.action === 'space' || e.action === 'home' || e.action === 'end') {
+            if ((e.action === 'tab' && index === stepItems.length - 1) || (e.action === 'shiftTab' && index === 0)) {
+                if (focusedEle.classList.contains(FOCUS)) {
+                    this.updateStepFocus();
+                    return;
+                }
+            }
+            else {
+                e.preventDefault();
+            }
+        }
+        if (e.action === 'escape') {
             stepItems[parseInt(index.toString(), 10)].classList.remove(FOCUS);
             this.element.classList.remove('e-steps-focus');
         }
-        if (!(e.action === 'space' || e.action === 'enter' || e.action === 'tab')) {
+        if (!(e.action === 'space' || e.action === 'enter')) {
             var prevIndex = index;
             index = isNextStep ? index + 1 : index - 1;
             while ((index >= 0 && index < stepItems.length) && stepItems[parseInt(index.toString(), 10)].classList.contains(DISABLED)) {
@@ -982,14 +989,21 @@ var Stepper = /** @class */ (function (_super) {
             }
         }
         else if ((e.action === 'space' || e.action === 'enter')) {
+            var isupdateFocus = false;
             if (this.linear) {
                 var linearModeValue = this.activeStep - index;
                 if (Math.abs(linearModeValue) === 1) {
                     this.navigateToStep(index, null, null, true);
+                    isupdateFocus = true;
                 }
             }
             else {
                 this.navigateToStep(index, null, null, true);
+                isupdateFocus = true;
+            }
+            if (isupdateFocus) {
+                this.updateStepFocus();
+                this.stepperItemElements[index].focus();
             }
         }
     };

package/src/treeview/treeview.d.ts

@@ -996,6 +996,7 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
     private getQuery;
     private getType;
     private setRootData;
+    private isChildObject;
     private renderItems;
     /**
      * Update the checkedNodes from datasource at initial rendering

package/src/treeview/treeview.js

@@ -512,6 +512,14 @@ var TreeView = /** @class */ (function (_super) {
             this.rootData = this.treeData;
         }
     };
+    TreeView.prototype.isChildObject = function () {
+        if (typeof this.fields.child === 'object') {
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
     TreeView.prototype.renderItems = function (isSorted) {
         /* eslint-disable */
         this.listBaseOption.ariaAttributes.level = 1;
@@ -831,6 +839,9 @@ var TreeView = /** @class */ (function (_super) {
             if ((typeof mapper.child === 'string') && !isNOU(getValue(mapper.child, ds[i]))) {
                 return 2;
             }
+            if (this.isChildObject()) {
+                return 2;
+            }
             if (!isNOU(getValue(mapper.parentID, ds[i])) || !isNOU(getValue(mapper.hasChildren, ds[i]))) {
                 return 1;
             }
@@ -1778,7 +1789,7 @@ var TreeView = /** @class */ (function (_super) {
             }
         }
         else {
-            childItems = this.getChildNodes(this.treeData, parentLi.getAttribute('data-uid'));
+            childItems = this.getChildNodes(this.treeData, parentLi.getAttribute('data-uid'), false, parseFloat(parentLi.getAttribute('aria-level')) + 1);
             this.currentLoadData = this.getSortedData(childItems);
             if (isNOU(childItems) || childItems.length === 0) {
                 detach(eicon);
@@ -1881,7 +1892,7 @@ var TreeView = /** @class */ (function (_super) {
     TreeView.prototype.getChildMapper = function (mapper) {
         return (typeof mapper.child === 'string' || isNOU(mapper.child)) ? mapper : mapper.child;
     };
-    TreeView.prototype.getChildNodes = function (obj, parentId, isRoot) {
+    TreeView.prototype.getChildNodes = function (obj, parentId, isRoot, level) {
         var _this = this;
         if (isRoot === void 0) { isRoot = false; }
         var childNodes;
@@ -1913,6 +1924,39 @@ var TreeView = /** @class */ (function (_super) {
                     }
                 }
             }
+            else if (this.isChildObject()) {
+                var tempField = !isNOU(level) ? this.fields : this.fields.child;
+                var i = 1;
+                while (i < level) {
+                    if (!isNOU(tempField.child)) {
+                        tempField = tempField.child;
+                    }
+                    else {
+                        break;
+                    }
+                    i++;
+                }
+                this.updateListProp(tempField);
+                var index = obj.findIndex(function (data) { return getValue(_this.fields.id, data) && getValue(_this.fields.id, data).toString() === parentId; });
+                if (index !== -1) {
+                    return getValue('child', obj[index]);
+                }
+                if (index === -1) {
+                    for (var i_1 = 0, objlen = obj.length; i_1 < objlen; i_1++) {
+                        var tempArray = getValue('child', obj[i_1]);
+                        var childIndex = !isNOU(tempArray) ? tempArray.findIndex(function (data) { return getValue(_this.fields.child.id, data) && getValue(_this.fields.child.id, data).toString() === parentId; }) : -1;
+                        if (childIndex !== -1) {
+                            return getValue('child', tempArray[childIndex]);
+                        }
+                        else if (!isNOU(tempArray)) {
+                            childNodes = this.getChildNodes(tempArray, parentId, false, level);
+                            if (childNodes !== undefined) {
+                                break;
+                            }
+                        }
+                    }
+                }
+            }
         }
         return childNodes;
     };
@@ -2952,6 +2996,14 @@ var TreeView = /** @class */ (function (_super) {
                     break;
                 }
             }
+            else if (this.isChildObject()) {
+                var children = 'child';
+                var childData = getValue(children, obj[i]);
+                newList = this.getChildNodeObject(childData, this.getChildMapper(mapper), id);
+                if (newList !== undefined) {
+                    break;
+                }
+            }
         }
         return newList;
     };
@@ -3175,9 +3227,9 @@ var TreeView = /** @class */ (function (_super) {
         var nodeData = [];
         var liArray = [];
         dragInstance = e.dragData.draggable;
-        for (var i_1 = 0; i_1 < dragInstance.ej2_instances.length; i_1++) {
-            if (dragInstance.ej2_instances[i_1] instanceof TreeView_1) {
-                dragObj = dragInstance.ej2_instances[i_1];
+        for (var i_2 = 0; i_2 < dragInstance.ej2_instances.length; i_2++) {
+            if (dragInstance.ej2_instances[i_2] instanceof TreeView_1) {
+                dragObj = dragInstance.ej2_instances[i_2];
                 break;
             }
         }
@@ -3201,19 +3253,19 @@ var TreeView = /** @class */ (function (_super) {
                 var sNodes = selectAll('.' + ACTIVE, dragObj.element);
                 liArray = sNodes;
                 if (e.target.offsetHeight <= 33 && offsetY > e.target.offsetHeight - 10 && offsetY > 6) {
-                    for (var i_2 = sNodes.length - 1; i_2 >= 0; i_2--) {
-                        if (dropLi.isSameNode(sNodes[i_2]) || this.isDescendant(sNodes[i_2], dropLi)) {
+                    for (var i_3 = sNodes.length - 1; i_3 >= 0; i_3--) {
+                        if (dropLi.isSameNode(sNodes[i_3]) || this.isDescendant(sNodes[i_3], dropLi)) {
                             continue;
                         }
-                        this.appendNode(dropTarget, sNodes[i_2], dropLi, e, dragObj, offsetY);
+                        this.appendNode(dropTarget, sNodes[i_3], dropLi, e, dragObj, offsetY);
                     }
                 }
                 else {
-                    for (var i_3 = 0; i_3 < sNodes.length; i_3++) {
-                        if (dropLi.isSameNode(sNodes[i_3]) || this.isDescendant(sNodes[i_3], dropLi)) {
+                    for (var i_4 = 0; i_4 < sNodes.length; i_4++) {
+                        if (dropLi.isSameNode(sNodes[i_4]) || this.isDescendant(sNodes[i_4], dropLi)) {
                             continue;
                         }
-                        this.appendNode(dropTarget, sNodes[i_3], dropLi, e, dragObj, offsetY);
+                        this.appendNode(dropTarget, sNodes[i_4], dropLi, e, dragObj, offsetY);
                     }
                 }
             }

package/styles/bootstrap-dark.css

@@ -10793,12 +10793,14 @@ ejs-sidebar {
 .e-stepper .e-stepper-progressbar > .e-progressbar-value {
   background-color: #0070f0;
 }
-.e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step,
+.e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step {
+  box-shadow: 0 0 0 2px #1a1a1a, 0 0 0 4px #0070f0, 0 0 0 8px #1a1a1a;
+}
 .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
 .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
 .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
-.e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
-  box-shadow: 0 0 0 2px #1a1a1a, 0 0 0 4px #0070f0, 0 0 0 8px #1a1a1a;
+.e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus, .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container:focus-visible .e-step, .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-text-only:focus-visible .e-text, .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-label-only:focus-visible .e-label {
+  box-shadow: 0 0 0 2px #1a1a1a, 0 0 0 4px #fff, 0 0 0 8px #1a1a1a !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-valid.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step,
 .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,

package/styles/bootstrap.css

@@ -10809,12 +10809,14 @@ ejs-sidebar {
 .e-stepper .e-stepper-progressbar > .e-progressbar-value {
   background-color: #317ab9;
 }
-.e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step,
+.e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step {
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #317ab9, 0 0 0 8px #fff;
+}
 .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
 .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
 .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
-.e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #317ab9, 0 0 0 8px #fff;
+.e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus, .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container:focus-visible .e-step, .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-text-only:focus-visible .e-text, .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-label-only:focus-visible .e-label {
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000, 0 0 0 8px #fff !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-valid.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step,
 .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,

package/styles/bootstrap4.css

@@ -10934,12 +10934,14 @@ ejs-sidebar {
 .e-stepper .e-stepper-progressbar > .e-progressbar-value {
   background-color: #007bff;
 }
-.e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step,
+.e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step {
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #007bff, 0 0 0 8px #fff;
+}
 .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
 .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
 .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
-.e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #007bff, 0 0 0 8px #fff;
+.e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus, .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container:focus-visible .e-step, .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-text-only:focus-visible .e-text, .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-label-only:focus-visible .e-label {
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #495057, 0 0 0 8px #fff !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-valid.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step,
 .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,

package/styles/bootstrap5-dark.css

@@ -2143,16 +2143,16 @@
   box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
-  background: #5c636a;
+  background: none;
   border-radius: 4px;
   color: #adb5bd;
   border-color: #adb5bd;
   border-style: solid;
   border-width: 0;
-  box-shadow: none;
+  box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons {
-  color: #fff;
+  color: #adb5bd;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
   color: #fff;
@@ -2166,7 +2166,7 @@
   color: #adb5bd;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-icons {
-  color: #fff;
+  color: #adb5bd;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-tbar-btn-text {
   color: #fff;
@@ -2333,12 +2333,12 @@
   border: none;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus {
-  background: #5c636a;
+  background: none;
   border-radius: 4px;
   border-color: #adb5bd;
   border-style: solid;
   border-width: 0;
-  box-shadow: none;
+  box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
   background: #5c636a;
@@ -10972,12 +10972,14 @@ ejs-sidebar {
 .e-stepper .e-stepper-progressbar > .e-progressbar-value {
   background-color: #0d6efd;
 }
-.e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step,
+.e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step {
+  box-shadow: 0 0 0 2px #212529, 0 0 0 4px #0d6efd, 0 0 0 8px #212529;
+}
 .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
 .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
 .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
-.e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
-  box-shadow: 0 0 0 2px #212529, 0 0 0 4px #0d6efd, 0 0 0 8px #212529;
+.e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus, .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container:focus-visible .e-step, .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-text-only:focus-visible .e-text, .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-label-only:focus-visible .e-label {
+  box-shadow: 0 0 0 2px #212529, 0 0 0 4px #fff, 0 0 0 8px #212529 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-valid.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step,
 .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,

package/styles/bootstrap5.css

@@ -2143,16 +2143,16 @@
   box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
-  background: #5c636a;
+  background: none;
   border-radius: 4px;
   color: #6c757d;
   border-color: #6c757d;
   border-style: solid;
   border-width: 0;
-  box-shadow: none;
+  box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons {
-  color: #fff;
+  color: #6c757d;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
   color: #fff;
@@ -2166,7 +2166,7 @@
   color: #6c757d;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-icons {
-  color: #fff;
+  color: #6c757d;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-tbar-btn-text {
   color: #fff;
@@ -2333,12 +2333,12 @@
   border: none;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus {
-  background: #5c636a;
+  background: none;
   border-radius: 4px;
   border-color: #6c757d;
   border-style: solid;
   border-width: 0;
-  box-shadow: none;
+  box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
   background: #5c636a;
@@ -10972,12 +10972,14 @@ ejs-sidebar {
 .e-stepper .e-stepper-progressbar > .e-progressbar-value {
   background-color: #0d6efd;
 }
-.e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step,
+.e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step {
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0d6efd, 0 0 0 8px #fff;
+}
 .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
 .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
 .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
-.e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0d6efd, 0 0 0 8px #fff;
+.e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus, .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container:focus-visible .e-step, .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-text-only:focus-visible .e-text, .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-label-only:focus-visible .e-label {
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #212529, 0 0 0 8px #fff !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-valid.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step,
 .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,

package/styles/fabric-dark.css

@@ -10793,12 +10793,14 @@ ejs-sidebar {
 .e-stepper .e-stepper-progressbar > .e-progressbar-value {
   background-color: #0074cc;
 }
-.e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step,
+.e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step {
+  box-shadow: 0 0 0 2px #201f1f, 0 0 0 4px #0074cc, 0 0 0 8px #201f1f;
+}
 .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
 .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
 .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
-.e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
-  box-shadow: 0 0 0 2px #201f1f, 0 0 0 4px #0074cc, 0 0 0 8px #201f1f;
+.e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus, .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container:focus-visible .e-step, .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-text-only:focus-visible .e-text, .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-label-only:focus-visible .e-label {
+  box-shadow: 0 0 0 2px #201f1f, 0 0 0 4px #fff, 0 0 0 8px #201f1f !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-valid.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step,
 .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,

package/styles/fabric.css

@@ -10804,12 +10804,14 @@ ejs-sidebar {
 .e-stepper .e-stepper-progressbar > .e-progressbar-value {
   background-color: #0078d6;
 }
-.e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step,
+.e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step {
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0078d6, 0 0 0 8px #fff;
+}
 .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
 .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
 .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
-.e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0078d6, 0 0 0 8px #fff;
+.e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus, .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container:focus-visible .e-step, .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-text-only:focus-visible .e-text, .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-label-only:focus-visible .e-label {
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #333, 0 0 0 8px #fff !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-valid.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step,
 .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,

package/styles/fluent-dark.css

@@ -2109,13 +2109,13 @@
   box-shadow: none;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
-  background: #323130;
+  background: none;
   border-radius: 0;
   color: #f3f2f1;
   border-color: #a19f9d;
   border-style: solid;
   border-width: 0;
-  box-shadow: none;
+  box-shadow: inset 0 0 0 1px;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons {
   color: #a19f9d;
@@ -2299,12 +2299,12 @@
   border: none;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus {
-  background: #323130;
+  background: none;
   border-radius: 0;
   border-color: #a19f9d;
   border-style: solid;
   border-width: 0;
-  box-shadow: none;
+  box-shadow: inset 0 0 0 1px;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
   background: #292827;
@@ -10937,12 +10937,14 @@ ejs-sidebar {
 .e-stepper .e-stepper-progressbar > .e-progressbar-value {
   background-color: #0078d4;
 }
-.e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step,
+.e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step {
+  box-shadow: 0 0 0 2px #1b1a19, 0 0 0 4px #0078d4, 0 0 0 8px #1b1a19;
+}
 .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
 .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
 .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
-.e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
-  box-shadow: 0 0 0 2px #1b1a19, 0 0 0 4px #0078d4, 0 0 0 8px #1b1a19;
+.e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus, .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container:focus-visible .e-step, .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-text-only:focus-visible .e-text, .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-label-only:focus-visible .e-label {
+  box-shadow: 0 0 0 2px #1b1a19, 0 0 0 4px #f3f2f1, 0 0 0 8px #1b1a19 !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-stepper:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-valid.e-step-selected:not(.e-step-text-only):not(.e-step-label-only) .e-step,
 .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,