@syncfusion/ej2-navigations 24.1.41 → 24.2.3

package/styles/stepper/bootstrap.css

@@ -579,12 +579,14 @@
 .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/stepper/bootstrap4.css

@@ -579,12 +579,14 @@
 .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/stepper/bootstrap5-dark.css

@@ -579,12 +579,14 @@
 .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/stepper/bootstrap5.css

@@ -579,12 +579,14 @@
 .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/stepper/fabric-dark.css

@@ -579,12 +579,14 @@
 .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/stepper/fabric.css

@@ -579,12 +579,14 @@
 .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/stepper/fluent-dark.css

@@ -579,12 +579,14 @@
 .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,

package/styles/stepper/fluent.css

@@ -579,12 +579,14 @@
 .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 #fff, 0 0 0 4px #0078d4, 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 #0078d4, 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 #201f1e, 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/stepper/highcontrast-light.css

@@ -579,12 +579,14 @@
 .e-stepper .e-stepper-progressbar > .e-progressbar-value {
   background-color: #400074;
 }
-.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 #400074, 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 #400074, 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/stepper/highcontrast.css

@@ -579,12 +579,14 @@
 .e-stepper .e-stepper-progressbar > .e-progressbar-value {
   background-color: #ffd939;
 }
-.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 #000, 0 0 0 4px #ffd939, 0 0 0 8px #000;
+}
 .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 #000, 0 0 0 4px #ffd939, 0 0 0 8px #000;
+.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 #000, 0 0 0 4px #fff, 0 0 0 8px #000 !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/stepper/material-dark.css

@@ -579,12 +579,14 @@
 .e-stepper .e-stepper-progressbar > .e-progressbar-value {
   background-color: #3f51b5;
 }
-.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 #383838, 0 0 0 4px #3f51b5, 0 0 0 8px #383838;
+}
 .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 #383838, 0 0 0 4px #3f51b5, 0 0 0 8px #383838;
+.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 #383838, 0 0 0 4px #fff, 0 0 0 8px #383838 !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/stepper/material.css

@@ -579,12 +579,14 @@
 .e-stepper .e-stepper-progressbar > .e-progressbar-value {
   background-color: #3f51b5;
 }
-.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 #3f51b5, 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 #3f51b5, 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/stepper/material3-dark.css

@@ -634,12 +634,14 @@
 .e-stepper .e-stepper-progressbar > .e-progressbar-value {
   background-color: rgba(var(--color-sf-primary));
 }
-.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 rgba(var(--color-sf-surface)), 0 0 0 4px rgba(var(--color-sf-primary)), 0 0 0 8px rgba(var(--color-sf-surface));
+}
 .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 rgba(var(--color-sf-surface)), 0 0 0 4px rgba(var(--color-sf-primary)), 0 0 0 8px rgba(var(--color-sf-surface));
+.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 rgba(var(--color-sf-surface)), 0 0 0 4px rgba(var(--color-sf-on-surface)), 0 0 0 8px rgba(var(--color-sf-surface)) !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/stepper/material3.css

@@ -690,12 +690,14 @@
 .e-stepper .e-stepper-progressbar > .e-progressbar-value {
   background-color: rgba(var(--color-sf-primary));
 }
-.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 rgba(var(--color-sf-surface)), 0 0 0 4px rgba(var(--color-sf-primary)), 0 0 0 8px rgba(var(--color-sf-surface));
+}
 .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 rgba(var(--color-sf-surface)), 0 0 0 4px rgba(var(--color-sf-primary)), 0 0 0 8px rgba(var(--color-sf-surface));
+.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 rgba(var(--color-sf-surface)), 0 0 0 4px rgba(var(--color-sf-on-surface)), 0 0 0 8px rgba(var(--color-sf-surface)) !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/stepper/tailwind-dark.css

@@ -579,12 +579,14 @@
 .e-stepper .e-stepper-progressbar > .e-progressbar-value {
   background-color: #22d3ee;
 }
-.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 #1f2937, 0 0 0 4px #22d3ee, 0 0 0 8px #1f2937;
+}
 .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 #1f2937, 0 0 0 4px #22d3ee, 0 0 0 8px #1f2937;
+.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 #1f2937, 0 0 0 4px #fff, 0 0 0 8px #1f2937 !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/stepper/tailwind.css

@@ -579,12 +579,14 @@
 .e-stepper .e-stepper-progressbar > .e-progressbar-value {
   background-color: #4f46e5;
 }
-.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 #4f46e5, 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 #4f46e5, 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 #111827, 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/tailwind-dark.css

@@ -2233,13 +2233,13 @@
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
-  background: #4b5563;
+  background: none;
   border-radius: 4px;
   color: #9ca3af;
   border-color: #d1d5db;
   border-style: solid;
   border-width: 0;
-  box-shadow: none;
+  box-shadow: 0 0 0 1px #22d3ee;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons {
   color: #d1d5db;
@@ -2423,12 +2423,12 @@
   border: none;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus {
-  background: #4b5563;
+  background: none;
   border-radius: 4px;
   border-color: #d1d5db;
   border-style: solid;
   border-width: 0;
-  box-shadow: none;
+  box-shadow: 0 0 0 1px #22d3ee;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
   background: #4b5563;
@@ -9277,7 +9277,6 @@ ejs-sidebar {
   font-size: 16px;
   padding: 4px 0;
   white-space: nowrap;
-  max-width: 280px;
   min-width: 112px;
 }
 .e-bigger .e-menu-wrapper ul.e-ul .e-menu-item,
@@ -11103,12 +11102,14 @@ ejs-sidebar {
 .e-stepper .e-stepper-progressbar > .e-progressbar-value {
   background-color: #22d3ee;
 }
-.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 #1f2937, 0 0 0 4px #22d3ee, 0 0 0 8px #1f2937;
+}
 .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 #1f2937, 0 0 0 4px #22d3ee, 0 0 0 8px #1f2937;
+.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 #1f2937, 0 0 0 4px #fff, 0 0 0 8px #1f2937 !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/tailwind.css

@@ -2233,13 +2233,13 @@
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
-  background: #e5e7eb;
+  background: none;
   border-radius: 4px;
   color: #6b7280;
   border-color: #6b7280;
   border-style: solid;
   border-width: 0;
-  box-shadow: none;
+  box-shadow: 0 0 0 1px #4f46e5;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons {
   color: #6b7280;
@@ -2423,12 +2423,12 @@
   border: none;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus {
-  background: #e5e7eb;
+  background: none;
   border-radius: 4px;
   border-color: #6b7280;
   border-style: solid;
   border-width: 0;
-  box-shadow: none;
+  box-shadow: 0 0 0 1px #4f46e5;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
   background: #e5e7eb;
@@ -9277,7 +9277,6 @@ ejs-sidebar {
   font-size: 16px;
   padding: 4px 0;
   white-space: nowrap;
-  max-width: 280px;
   min-width: 112px;
 }
 .e-bigger .e-menu-wrapper ul.e-ul .e-menu-item,
@@ -11103,12 +11102,14 @@ ejs-sidebar {
 .e-stepper .e-stepper-progressbar > .e-progressbar-value {
   background-color: #4f46e5;
 }
-.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 #4f46e5, 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 #4f46e5, 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 #111827, 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/toolbar/_bootstrap5-definition.scss

@@ -136,7 +136,7 @@ $tbar-pressed-bg: $secondary-bg-color-focus !default;
 $tbar-pressed-font: $content-text-color-alt2 !default;
 $tbar-select-font: $content-text-color-alt2 !default;
 $tbar-default-icon-overlay: $content-text-color-alt2 !default;
-$tbar-focus-bg: $tbar-hover-bg !default;
+$tbar-focus-bg: none !default;
 $tbar-press-font: $content-text-color-alt2 !default;
 $tbar-default-font-overlay: $content-text-color-alt2 !default;
 $tbar-active-font-color: $primary-text-color !default;
@@ -150,12 +150,12 @@ $tbar-nrml-btn-border-radius: 4px !default;
 $tbar-nrml-btn-focus-padding: 0 4px !default;
 $tbar-nrml-btn-focus-outline: 0 !default;
 
-$tbar-btn-icons-focus-color: $primary-text-color !default;
+$tbar-btn-icons-focus-color: $icon-color !default;
 $tbar-btn-text-focus-color: $primary-text-color !default;
 $tbar-btn-focus-border-color: $tbar-focus-border-color !default;
 $tbar-btn-hover-border-size: $tbar-border-size !default;
-$tbar-btn-hover-active-icons-color: $tbar-default-icon-color !default;
-$tbar-btn-hover-active-text-color: $content-text-color-alt2 !default;
+$tbar-btn-hover-active-icons-color: $primary-text-color !default;
+$tbar-btn-hover-active-text-color: $primary-text-color !default;
 $tbar-btn-overlay-opacity: .5 !default;
 $tbar-btn-active-bg: $tbar-active-bg !default;
 $tbar-btn-active-icons-color: $tbar-default-icon-color !default;
@@ -169,7 +169,7 @@ $tbar-flat-btn-active-box-shadow: none !default;
 $tbar-ext-btn-focus-padding: 0 4px !default;
 $tbar-ext-btn-icon-padding: 5px 6px !default;
 $tbar-ext-btn-icon-font-size: $text-base !default;
-$tbar-ext-btn-focus-box-shadow: none !default;
+$tbar-ext-btn-focus-box-shadow: $secondary-shadow-focus !default;
 $tbar-ext-btn-hover-border-color: $tbar-hover-border-color !default;
 $tbar-ext-btn-border: none !default;
 

package/styles/toolbar/_fluent-definition.scss

@@ -38,7 +38,7 @@ $tbar-separator-border: $border-dark !default;
 $tbar-default-border: $border-light !default;
 $tbar-hover-border-color: $icon-color !default;
 $tbar-focus-border-color: $tbar-hover-border-color !default;
-$tbar-focus-bg: $content-bg-color-alt4 !default;
+$tbar-focus-bg: none !default;
 $tbar-press-font: $content-text-color !default;
 
 $tbar-default-font-overlay: $content-text-color !default;
@@ -159,7 +159,7 @@ $tbar-flat-btn-active-box-shadow: none !default;
 $tbar-ext-btn-focus-padding: 0 4px !default;
 $tbar-ext-btn-icon-padding: 0 !default;
 $tbar-ext-btn-icon-font-size: $text-sm !default;
-$tbar-ext-btn-focus-box-shadow: none !default;
+$tbar-ext-btn-focus-box-shadow: inset 0 0 0 1px !default;
 $tbar-ext-btn-hover-border-color: $tbar-hover-border-color !default;
 $tbar-ext-btn-border: none !default;
 

package/styles/toolbar/_tailwind-definition.scss

@@ -38,7 +38,7 @@ $tbar-separator-border: $border-light !default;
 $tbar-default-border: $border-light !default;
 $tbar-hover-border-color: $icon-color !default;
 $tbar-focus-border-color: $tbar-hover-border-color !default;
-$tbar-focus-bg: $tbar-hover-bg !default;
+$tbar-focus-bg: none !default;
 $tbar-press-font: $content-text-color-alt2 !default;
 
 $tbar-default-font-overlay: $content-text-color-alt2 !default;
@@ -159,7 +159,7 @@ $tbar-flat-btn-active-box-shadow: $shadow-sm !default;
 $tbar-ext-btn-focus-padding: 0 4px !default;
 $tbar-ext-btn-icon-padding: 5px 6px !default;
 $tbar-ext-btn-icon-font-size: $text-base !default;
-$tbar-ext-btn-focus-box-shadow: none !default;
+$tbar-ext-btn-focus-box-shadow: $shadow-focus-ring1 !default;
 $tbar-ext-btn-hover-border-color: $tbar-hover-border-color !default;
 $tbar-ext-btn-border: none !default;
 

package/styles/toolbar/_theme.scss

@@ -55,6 +55,10 @@
   
           .e-tbar-btn-text {
             color: $tbar-btn-text-focus-color;
+            
+            @if $skin-name == 'bootstrap5' {
+              color: $tbar-btn-icons-focus-color;
+            }
           }
         }
   
@@ -68,6 +72,10 @@
 
           .e-icons {
             color: $tbar-btn-icons-focus-color;
+            
+            @if $skin-name == 'bootstrap5' {
+              color: $tbar-btn-text-focus-color;
+            }
           }
 
           .e-tbar-btn-text {

package/styles/toolbar/bootstrap5-dark.css

@@ -854,19 +854,20 @@
   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;
+  color: #adb5bd;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover {
   background: #5c636a;
@@ -877,16 +878,17 @@
   color: #adb5bd;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-icons {
+  color: #adb5bd;
   color: #fff;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-tbar-btn-text {
   color: #fff;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover:active .e-icons {
-  color: #adb5bd;
+  color: #fff;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover:active .e-tbar-btn-text {
-  color: #ced4da;
+  color: #fff;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:active {
   background: #565e64;
@@ -1044,12 +1046,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;