npm - @syncfusion/blazor-themes - Versions diffs - 24.1.45 → 24.1.47 - Mend

@syncfusion/blazor-themes 24.1.45 → 24.1.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (243) hide show

package/SCSS-Themes/navigations/stepper/bootstrap5-dark.scss CHANGED Viewed

@@ -44,6 +44,7 @@ $stepper-bigger-small-optional-size: 12px !default;
 $stepper-bigger-small-text-size: 14px !default;
 $step-selected-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $primary, 0 0 0 8px $content-bg-color !default;
+$step-keyboard-selected-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $content-text-color, 0 0 0 8px $content-bg-color !default;
 $step-valid-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $success, 0 0 0 8px $content-bg-color !default;
 $step-error-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $danger, 0 0 0 8px $content-bg-color !default;
 $step-li-shadow: 0 0 0 8px $content-bg-color !default;
@@ -778,12 +779,18 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
       }
     }
-    &: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,
+    &: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: $step-selected-li-shadow;
+    }
     .e-stepper-steps .e-step-container.e-step-focus .e-step,
     .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
     .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
-    .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
-      box-shadow: $step-selected-li-shadow;
+    .e-stepper-steps .e-step-container.e-step-template.e-step-focus,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container:focus-visible .e-step,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-text-only:focus-visible .e-text,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-label-only:focus-visible .e-label {
+      box-shadow: $step-keyboard-selected-li-shadow !important; /* stylelint-disable-line declaration-no-important */
     }
     &: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,

package/SCSS-Themes/navigations/stepper/bootstrap5.scss CHANGED Viewed

@@ -44,6 +44,7 @@ $stepper-bigger-small-optional-size: 12px !default;
 $stepper-bigger-small-text-size: 14px !default;
 $step-selected-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $primary, 0 0 0 8px $content-bg-color !default;
+$step-keyboard-selected-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $content-text-color, 0 0 0 8px $content-bg-color !default;
 $step-valid-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $success, 0 0 0 8px $content-bg-color !default;
 $step-error-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $danger, 0 0 0 8px $content-bg-color !default;
 $step-li-shadow: 0 0 0 8px $content-bg-color !default;
@@ -778,12 +779,18 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
       }
     }
-    &: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,
+    &: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: $step-selected-li-shadow;
+    }
     .e-stepper-steps .e-step-container.e-step-focus .e-step,
     .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
     .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
-    .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
-      box-shadow: $step-selected-li-shadow;
+    .e-stepper-steps .e-step-container.e-step-template.e-step-focus,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container:focus-visible .e-step,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-text-only:focus-visible .e-text,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-label-only:focus-visible .e-label {
+      box-shadow: $step-keyboard-selected-li-shadow !important; /* stylelint-disable-line declaration-no-important */
     }
     &: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,

package/SCSS-Themes/navigations/stepper/fabric-dark.scss CHANGED Viewed

@@ -43,6 +43,7 @@ $stepper-bigger-small-optional-size: 12px !default;
 $stepper-bigger-small-text-size: 14px !default;
 $step-selected-li-shadow: 0 0 0 2px $neutral-white, 0 0 0 4px $theme-primary, 0 0 0 8px $neutral-white !default;
+$step-keyboard-selected-li-shadow: 0 0 0 2px $neutral-white, 0 0 0 4px $neutral-light-fontalt, 0 0 0 8px $neutral-white !default;
 $step-valid-li-shadow: 0 0 0 2px $neutral-white, 0 0 0 4px $success-bg, 0 0 0 8px $neutral-white !default;
 $step-error-li-shadow: 0 0 0 2px $neutral-white, 0 0 0 4px $error-bg, 0 0 0 8px $neutral-white !default;
 $step-li-shadow: 0 0 0 8px $neutral-white !default;
@@ -777,12 +778,18 @@ $step-selected-active-color: $theme-dark !default;
       }
     }
-    &: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,
+    &: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: $step-selected-li-shadow;
+    }
     .e-stepper-steps .e-step-container.e-step-focus .e-step,
     .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
     .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
-    .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
-      box-shadow: $step-selected-li-shadow;
+    .e-stepper-steps .e-step-container.e-step-template.e-step-focus,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container:focus-visible .e-step,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-text-only:focus-visible .e-text,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-label-only:focus-visible .e-label {
+      box-shadow: $step-keyboard-selected-li-shadow !important; /* stylelint-disable-line declaration-no-important */
     }
     &: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,

package/SCSS-Themes/navigations/stepper/fabric.scss CHANGED Viewed

@@ -43,6 +43,7 @@ $stepper-bigger-small-optional-size: 12px !default;
 $stepper-bigger-small-text-size: 14px !default;
 $step-selected-li-shadow: 0 0 0 2px $neutral-white, 0 0 0 4px $theme-primary, 0 0 0 8px $neutral-white !default;
+$step-keyboard-selected-li-shadow: 0 0 0 2px $neutral-white, 0 0 0 4px $base-font, 0 0 0 8px $neutral-white !default;
 $step-valid-li-shadow: 0 0 0 2px $neutral-white, 0 0 0 4px $success-bg, 0 0 0 8px $neutral-white !default;
 $step-error-li-shadow: 0 0 0 2px $neutral-white, 0 0 0 4px $error-bg, 0 0 0 8px $neutral-white !default;
 $step-li-shadow: 0 0 0 8px $neutral-white !default;
@@ -777,12 +778,18 @@ $step-selected-active-color: $theme-dark !default;
       }
     }
-    &: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,
+    &: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: $step-selected-li-shadow;
+    }
     .e-stepper-steps .e-step-container.e-step-focus .e-step,
     .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
     .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
-    .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
-      box-shadow: $step-selected-li-shadow;
+    .e-stepper-steps .e-step-container.e-step-template.e-step-focus,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container:focus-visible .e-step,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-text-only:focus-visible .e-text,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-label-only:focus-visible .e-label {
+      box-shadow: $step-keyboard-selected-li-shadow !important; /* stylelint-disable-line declaration-no-important */
     }
     &: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,

package/SCSS-Themes/navigations/stepper/fluent-dark.scss CHANGED Viewed

@@ -43,6 +43,7 @@ $stepper-bigger-small-optional-size: 12px !default;
 $stepper-bigger-small-text-size: 14px !default;
 $step-selected-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $primary-border-color, 0 0 0 8px $content-bg-color !default;
+$step-keyboard-selected-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $content-text-color, 0 0 0 8px $content-bg-color !default;
 $step-valid-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $success, 0 0 0 8px $content-bg-color !default;
 $step-error-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $danger, 0 0 0 8px $content-bg-color !default;
 $step-li-shadow: 0 0 0 8px $content-bg-color !default;
@@ -777,12 +778,18 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
       }
     }
-    &: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,
+    &: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: $step-selected-li-shadow;
+    }
     .e-stepper-steps .e-step-container.e-step-focus .e-step,
     .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
     .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
-    .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
-      box-shadow: $step-selected-li-shadow;
+    .e-stepper-steps .e-step-container.e-step-template.e-step-focus,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container:focus-visible .e-step,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-text-only:focus-visible .e-text,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-label-only:focus-visible .e-label {
+      box-shadow: $step-keyboard-selected-li-shadow !important; /* stylelint-disable-line declaration-no-important */
     }
     &: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,

package/SCSS-Themes/navigations/stepper/fluent.scss CHANGED Viewed

@@ -43,6 +43,7 @@ $stepper-bigger-small-optional-size: 12px !default;
 $stepper-bigger-small-text-size: 14px !default;
 $step-selected-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $primary-border-color, 0 0 0 8px $content-bg-color !default;
+$step-keyboard-selected-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $content-text-color, 0 0 0 8px $content-bg-color !default;
 $step-valid-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $success, 0 0 0 8px $content-bg-color !default;
 $step-error-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $danger, 0 0 0 8px $content-bg-color !default;
 $step-li-shadow: 0 0 0 8px $content-bg-color !default;
@@ -777,12 +778,18 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
       }
     }
-    &: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,
+    &: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: $step-selected-li-shadow;
+    }
     .e-stepper-steps .e-step-container.e-step-focus .e-step,
     .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
     .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
-    .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
-      box-shadow: $step-selected-li-shadow;
+    .e-stepper-steps .e-step-container.e-step-template.e-step-focus,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container:focus-visible .e-step,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-text-only:focus-visible .e-text,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-label-only:focus-visible .e-label {
+      box-shadow: $step-keyboard-selected-li-shadow !important; /* stylelint-disable-line declaration-no-important */
     }
     &: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,

package/SCSS-Themes/navigations/stepper/highcontrast.scss CHANGED Viewed

@@ -43,6 +43,7 @@ $stepper-bigger-small-optional-size: 12px !default;
 $stepper-bigger-small-text-size: 14px !default;
 $step-selected-li-shadow: 0 0 0 2px $bg-base-0, 0 0 0 4px $selection-bg, 0 0 0 8px $bg-base-0 !default;
+$step-keyboard-selected-li-shadow: 0 0 0 2px $bg-base-0, 0 0 0 4px $content-font, 0 0 0 8px $bg-base-0 !default;
 $step-valid-li-shadow: 0 0 0 2px $bg-base-0, 0 0 0 4px $success-alt, 0 0 0 8px $bg-base-0 !default;
 $step-error-li-shadow: 0 0 0 2px $bg-base-0, 0 0 0 4px $error-alt, 0 0 0 8px $bg-base-0 !default;
 $step-li-shadow: 0 0 0 8px $bg-base-0 !default;
@@ -777,12 +778,18 @@ $step-selected-active-color: $selection-bg !default;
       }
     }
-    &: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,
+    &: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: $step-selected-li-shadow;
+    }
     .e-stepper-steps .e-step-container.e-step-focus .e-step,
     .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
     .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
-    .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
-      box-shadow: $step-selected-li-shadow;
+    .e-stepper-steps .e-step-container.e-step-template.e-step-focus,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container:focus-visible .e-step,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-text-only:focus-visible .e-text,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-label-only:focus-visible .e-label {
+      box-shadow: $step-keyboard-selected-li-shadow !important; /* stylelint-disable-line declaration-no-important */
     }
     &: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,

package/SCSS-Themes/navigations/stepper/material-dark.scss CHANGED Viewed

@@ -43,6 +43,7 @@ $stepper-bigger-small-optional-size: 12px !default;
 $stepper-bigger-small-text-size: 14px !default;
 $step-selected-li-shadow: 0 0 0 2px $overlay-bg-color, 0 0 0 4px $primary, 0 0 0 8px $overlay-bg-color !default;
+$step-keyboard-selected-li-shadow: 0 0 0 2px $overlay-bg-color, 0 0 0 4px $grey-dark-font, 0 0 0 8px $overlay-bg-color !default;
 $step-valid-li-shadow: 0 0 0 2px $overlay-bg-color, 0 0 0 4px $success-bg, 0 0 0 8px $overlay-bg-color !default;
 $step-error-li-shadow: 0 0 0 2px $overlay-bg-color, 0 0 0 4px $error-font, 0 0 0 8px $overlay-bg-color !default;
 $step-li-shadow: 0 0 0 8px $overlay-bg-color !default;
@@ -777,12 +778,18 @@ $step-selected-active-color: lighten($primary, 15%) !default;
       }
     }
-    &: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,
+    &: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: $step-selected-li-shadow;
+    }
     .e-stepper-steps .e-step-container.e-step-focus .e-step,
     .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
     .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
-    .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
-      box-shadow: $step-selected-li-shadow;
+    .e-stepper-steps .e-step-container.e-step-template.e-step-focus,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container:focus-visible .e-step,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-text-only:focus-visible .e-text,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-label-only:focus-visible .e-label {
+      box-shadow: $step-keyboard-selected-li-shadow !important; /* stylelint-disable-line declaration-no-important */
     }
     &: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,

package/SCSS-Themes/navigations/stepper/material.scss CHANGED Viewed

@@ -43,6 +43,7 @@ $stepper-bigger-small-optional-size: 12px !default;
 $stepper-bigger-small-text-size: 14px !default;
 $step-selected-li-shadow: 0 0 0 2px $grey-white, 0 0 0 4px $primary, 0 0 0 8px $grey-white !default;
+$step-keyboard-selected-li-shadow: 0 0 0 2px $grey-white, 0 0 0 4px $base-font, 0 0 0 8px $grey-white !default;
 $step-valid-li-shadow: 0 0 0 2px $grey-white, 0 0 0 4px $msg-success-color-alt1, 0 0 0 8px $grey-white !default;
 $step-error-li-shadow: 0 0 0 2px $grey-white, 0 0 0 4px darken($error-font, 11%), 0 0 0 8px $grey-white !default;
 $step-li-shadow: 0 0 0 8px $grey-white !default;
@@ -777,12 +778,18 @@ $step-selected-active-color: darken($primary, 15%) !default;
       }
     }
-    &: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,
+    &: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: $step-selected-li-shadow;
+    }
     .e-stepper-steps .e-step-container.e-step-focus .e-step,
     .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
     .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
-    .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
-      box-shadow: $step-selected-li-shadow;
+    .e-stepper-steps .e-step-container.e-step-template.e-step-focus,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container:focus-visible .e-step,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-text-only:focus-visible .e-text,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-label-only:focus-visible .e-label {
+      box-shadow: $step-keyboard-selected-li-shadow !important; /* stylelint-disable-line declaration-no-important */
     }
     &: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,

package/SCSS-Themes/navigations/stepper/material3-dark.scss CHANGED Viewed

@@ -43,6 +43,7 @@ $stepper-bigger-small-optional-size: 12px !default;
 $stepper-bigger-small-text-size: 14px !default;
 $step-selected-li-shadow: 0 0 0 2px rgba($content-bg-color), 0 0 0 4px rgba($primary), 0 0 0 8px rgba($content-bg-color) !default;
+$step-keyboard-selected-li-shadow: 0 0 0 2px rgba($content-bg-color), 0 0 0 4px rgba($content-text-color), 0 0 0 8px rgba($content-bg-color) !default;
 $step-valid-li-shadow: 0 0 0 2px rgba($content-bg-color), 0 0 0 4px rgba($success), 0 0 0 8px rgba($content-bg-color) !default;
 $step-error-li-shadow: 0 0 0 2px rgba($content-bg-color), 0 0 0 4px rgba($danger), 0 0 0 8px rgba($content-bg-color) !default;
 $step-li-shadow: 0 0 0 8px rgba($content-bg-color) !default;
@@ -777,12 +778,18 @@ $step-indicator-color: $content-bg-color-alt5 !default;
       }
     }
-    &: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,
+    &: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: $step-selected-li-shadow;
+    }
     .e-stepper-steps .e-step-container.e-step-focus .e-step,
     .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
     .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
-    .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
-      box-shadow: $step-selected-li-shadow;
+    .e-stepper-steps .e-step-container.e-step-template.e-step-focus,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container:focus-visible .e-step,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-text-only:focus-visible .e-text,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-label-only:focus-visible .e-label {
+      box-shadow: $step-keyboard-selected-li-shadow !important; /* stylelint-disable-line declaration-no-important */
     }
     &: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,

package/SCSS-Themes/navigations/stepper/material3.scss CHANGED Viewed

@@ -43,6 +43,7 @@ $stepper-bigger-small-optional-size: 12px !default;
 $stepper-bigger-small-text-size: 14px !default;
 $step-selected-li-shadow: 0 0 0 2px rgba($content-bg-color), 0 0 0 4px rgba($primary), 0 0 0 8px rgba($content-bg-color) !default;
+$step-keyboard-selected-li-shadow: 0 0 0 2px rgba($content-bg-color), 0 0 0 4px rgba($content-text-color), 0 0 0 8px rgba($content-bg-color) !default;
 $step-valid-li-shadow: 0 0 0 2px rgba($content-bg-color), 0 0 0 4px rgba($success), 0 0 0 8px rgba($content-bg-color) !default;
 $step-error-li-shadow: 0 0 0 2px rgba($content-bg-color), 0 0 0 4px rgba($danger), 0 0 0 8px rgba($content-bg-color) !default;
 $step-li-shadow: 0 0 0 8px rgba($content-bg-color) !default;
@@ -777,12 +778,18 @@ $step-indicator-color: $content-bg-color-alt5 !default;
       }
     }
-    &: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,
+    &: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: $step-selected-li-shadow;
+    }
     .e-stepper-steps .e-step-container.e-step-focus .e-step,
     .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
     .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
-    .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
-      box-shadow: $step-selected-li-shadow;
+    .e-stepper-steps .e-step-container.e-step-template.e-step-focus,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container:focus-visible .e-step,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-text-only:focus-visible .e-text,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-label-only:focus-visible .e-label {
+      box-shadow: $step-keyboard-selected-li-shadow !important; /* stylelint-disable-line declaration-no-important */
     }
     &: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,

package/SCSS-Themes/navigations/stepper/tailwind-dark.scss CHANGED Viewed

@@ -43,6 +43,7 @@ $stepper-bigger-small-optional-size: 12px !default;
 $stepper-bigger-small-text-size: 14px !default;
 $step-selected-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $primary, 0 0 0 8px $content-bg-color !default;
+$step-keyboard-selected-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $content-text-color, 0 0 0 8px $content-bg-color !default;
 $step-valid-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $success-border-color, 0 0 0 8px $content-bg-color !default;
 $step-error-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $border-error, 0 0 0 8px $content-bg-color !default;
 $step-li-shadow: 0 0 0 8px $content-bg-color !default;
@@ -777,12 +778,18 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
       }
     }
-    &: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,
+    &: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: $step-selected-li-shadow;
+    }
     .e-stepper-steps .e-step-container.e-step-focus .e-step,
     .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
     .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
-    .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
-      box-shadow: $step-selected-li-shadow;
+    .e-stepper-steps .e-step-container.e-step-template.e-step-focus,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container:focus-visible .e-step,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-text-only:focus-visible .e-text,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-label-only:focus-visible .e-label {
+      box-shadow: $step-keyboard-selected-li-shadow !important; /* stylelint-disable-line declaration-no-important */
     }
     &: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,

package/SCSS-Themes/navigations/stepper/tailwind.scss CHANGED Viewed

@@ -43,6 +43,7 @@ $stepper-bigger-small-optional-size: 12px !default;
 $stepper-bigger-small-text-size: 14px !default;
 $step-selected-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $primary, 0 0 0 8px $content-bg-color !default;
+$step-keyboard-selected-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $content-text-color, 0 0 0 8px $content-bg-color !default;
 $step-valid-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $success-border-color, 0 0 0 8px $content-bg-color !default;
 $step-error-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $border-error, 0 0 0 8px $content-bg-color !default;
 $step-li-shadow: 0 0 0 8px $content-bg-color !default;
@@ -777,12 +778,18 @@ $step-selected-active-color: $primary-bg-color-pressed !default;
       }
     }
-    &: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,
+    &: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: $step-selected-li-shadow;
+    }
     .e-stepper-steps .e-step-container.e-step-focus .e-step,
     .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
     .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
-    .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
-      box-shadow: $step-selected-li-shadow;
+    .e-stepper-steps .e-step-container.e-step-template.e-step-focus,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container:focus-visible .e-step,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-text-only:focus-visible .e-text,
+    &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-label-only:focus-visible .e-label {
+      box-shadow: $step-keyboard-selected-li-shadow !important; /* stylelint-disable-line declaration-no-important */
     }
     &: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,

package/SCSS-Themes/navigations/toolbar/bootstrap-dark.scss CHANGED Viewed

@@ -1301,6 +1301,10 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
           .e-tbar-btn-text {
             color: $tbar-btn-text-focus-color;
+            @if $skin-name == 'bootstrap5' {
+              color: $tbar-btn-icons-focus-color;
+            }
           }
         }
@@ -1314,6 +1318,10 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
           .e-icons {
             color: $tbar-btn-icons-focus-color;
+            @if $skin-name == 'bootstrap5' {
+              color: $tbar-btn-text-focus-color;
+            }
           }
           .e-tbar-btn-text {

package/SCSS-Themes/navigations/toolbar/bootstrap.scss CHANGED Viewed

@@ -1299,6 +1299,10 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
           .e-tbar-btn-text {
             color: $tbar-btn-text-focus-color;
+            @if $skin-name == 'bootstrap5' {
+              color: $tbar-btn-icons-focus-color;
+            }
           }
         }
@@ -1312,6 +1316,10 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
           .e-icons {
             color: $tbar-btn-icons-focus-color;
+            @if $skin-name == 'bootstrap5' {
+              color: $tbar-btn-text-focus-color;
+            }
           }
           .e-tbar-btn-text {

package/SCSS-Themes/navigations/toolbar/bootstrap4.scss CHANGED Viewed

@@ -1304,6 +1304,10 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
           .e-tbar-btn-text {
             color: $tbar-btn-text-focus-color;
+            @if $skin-name == 'bootstrap5' {
+              color: $tbar-btn-icons-focus-color;
+            }
           }
         }
@@ -1317,6 +1321,10 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
           .e-icons {
             color: $tbar-btn-icons-focus-color;
+            @if $skin-name == 'bootstrap5' {
+              color: $tbar-btn-text-focus-color;
+            }
           }
           .e-tbar-btn-text {

package/SCSS-Themes/navigations/toolbar/bootstrap5-dark.scss CHANGED Viewed

@@ -141,7 +141,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;
@@ -155,12 +155,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;
@@ -174,7 +174,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;
@@ -1313,6 +1313,10 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
           .e-tbar-btn-text {
             color: $tbar-btn-text-focus-color;
+            @if $skin-name == 'bootstrap5' {
+              color: $tbar-btn-icons-focus-color;
+            }
           }
         }
@@ -1326,6 +1330,10 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
           .e-icons {
             color: $tbar-btn-icons-focus-color;
+            @if $skin-name == 'bootstrap5' {
+              color: $tbar-btn-text-focus-color;
+            }
           }
           .e-tbar-btn-text {

package/SCSS-Themes/navigations/toolbar/bootstrap5.scss CHANGED Viewed

@@ -141,7 +141,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;
@@ -155,12 +155,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;
@@ -174,7 +174,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;
@@ -1313,6 +1313,10 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
           .e-tbar-btn-text {
             color: $tbar-btn-text-focus-color;
+            @if $skin-name == 'bootstrap5' {
+              color: $tbar-btn-icons-focus-color;
+            }
           }
         }
@@ -1326,6 +1330,10 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
           .e-icons {
             color: $tbar-btn-icons-focus-color;
+            @if $skin-name == 'bootstrap5' {
+              color: $tbar-btn-text-focus-color;
+            }
           }
           .e-tbar-btn-text {

package/SCSS-Themes/navigations/toolbar/fabric-dark.scss CHANGED Viewed

@@ -1315,6 +1315,10 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
           .e-tbar-btn-text {
             color: $tbar-btn-text-focus-color;
+            @if $skin-name == 'bootstrap5' {
+              color: $tbar-btn-icons-focus-color;
+            }
           }
         }
@@ -1328,6 +1332,10 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
           .e-icons {
             color: $tbar-btn-icons-focus-color;
+            @if $skin-name == 'bootstrap5' {
+              color: $tbar-btn-text-focus-color;
+            }
           }
           .e-tbar-btn-text {

package/SCSS-Themes/navigations/toolbar/fabric.scss CHANGED Viewed

@@ -1301,6 +1301,10 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
           .e-tbar-btn-text {
             color: $tbar-btn-text-focus-color;
+            @if $skin-name == 'bootstrap5' {
+              color: $tbar-btn-icons-focus-color;
+            }
           }
         }
@@ -1314,6 +1318,10 @@ $tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
           .e-icons {
             color: $tbar-btn-icons-focus-color;
+            @if $skin-name == 'bootstrap5' {
+              color: $tbar-btn-text-focus-color;
+            }
           }
           .e-tbar-btn-text {