@syncfusion/ej2-navigations 24.1.41 → 24.1.46

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;
@@ -11103,12 +11103,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;
@@ -11103,12 +11103,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,7 +150,7 @@ $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;
@@ -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/bootstrap5-dark.css

@@ -854,16 +854,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;
@@ -877,7 +877,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;
@@ -1044,12 +1044,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;

package/styles/toolbar/bootstrap5.css

@@ -854,16 +854,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;
@@ -877,7 +877,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;
@@ -1044,12 +1044,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;

package/styles/toolbar/fluent-dark.css

@@ -853,13 +853,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;
@@ -1043,12 +1043,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;

package/styles/toolbar/fluent.css

@@ -853,13 +853,13 @@
   box-shadow: none;
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
-  background: #e1dfdd;
+  background: none;
   border-radius: 0;
   color: #201f1e;
   border-color: #605e5c;
   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: #605e5c;
@@ -1043,12 +1043,12 @@
   border: none;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus {
-  background: #e1dfdd;
+  background: none;
   border-radius: 0;
   border-color: #605e5c;
   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: #edebe9;

package/styles/toolbar/tailwind-dark.css

@@ -853,13 +853,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;
@@ -1043,12 +1043,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;

package/styles/toolbar/tailwind.css

@@ -853,13 +853,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;
@@ -1043,12 +1043,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;