@syncfusion/ej2-navigations 24.1.41 → 24.1.46

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 (75) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/README.md +1 -1
  3. package/dist/ej2-navigations.min.js +2 -2
  4. package/dist/ej2-navigations.umd.min.js +2 -2
  5. package/dist/ej2-navigations.umd.min.js.map +1 -1
  6. package/dist/es6/ej2-navigations.es2015.js +101 -14
  7. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  8. package/dist/es6/ej2-navigations.es5.js +110 -23
  9. package/dist/es6/ej2-navigations.es5.js.map +1 -1
  10. package/dist/global/ej2-navigations.min.js +2 -2
  11. package/dist/global/ej2-navigations.min.js.map +1 -1
  12. package/dist/global/index.d.ts +1 -1
  13. package/package.json +10 -10
  14. package/src/common/menu-base.js +21 -0
  15. package/src/stepper/stepper.js +26 -12
  16. package/src/treeview/treeview.d.ts +1 -0
  17. package/src/treeview/treeview.js +63 -11
  18. package/styles/bootstrap-dark.css +5 -3
  19. package/styles/bootstrap.css +5 -3
  20. package/styles/bootstrap4.css +5 -3
  21. package/styles/bootstrap5-dark.css +11 -9
  22. package/styles/bootstrap5.css +11 -9
  23. package/styles/fabric-dark.css +5 -3
  24. package/styles/fabric.css +5 -3
  25. package/styles/fluent-dark.css +9 -7
  26. package/styles/fluent.css +9 -7
  27. package/styles/highcontrast-light.css +5 -3
  28. package/styles/highcontrast.css +5 -3
  29. package/styles/material-dark.css +5 -3
  30. package/styles/material.css +5 -3
  31. package/styles/material3-dark.css +5 -3
  32. package/styles/material3.css +5 -3
  33. package/styles/stepper/_bootstrap-dark-definition.scss +1 -0
  34. package/styles/stepper/_bootstrap-definition.scss +1 -0
  35. package/styles/stepper/_bootstrap4-definition.scss +1 -0
  36. package/styles/stepper/_bootstrap5-definition.scss +1 -0
  37. package/styles/stepper/_fabric-dark-definition.scss +1 -0
  38. package/styles/stepper/_fabric-definition.scss +1 -0
  39. package/styles/stepper/_fluent-definition.scss +1 -0
  40. package/styles/stepper/_fusionnew-definition.scss +1 -0
  41. package/styles/stepper/_highcontrast-definition.scss +1 -0
  42. package/styles/stepper/_highcontrast-light-definition.scss +1 -0
  43. package/styles/stepper/_material-dark-definition.scss +1 -0
  44. package/styles/stepper/_material-definition.scss +1 -0
  45. package/styles/stepper/_material3-definition.scss +1 -0
  46. package/styles/stepper/_tailwind-definition.scss +1 -0
  47. package/styles/stepper/_theme.scss +9 -3
  48. package/styles/stepper/bootstrap-dark.css +5 -3
  49. package/styles/stepper/bootstrap.css +5 -3
  50. package/styles/stepper/bootstrap4.css +5 -3
  51. package/styles/stepper/bootstrap5-dark.css +5 -3
  52. package/styles/stepper/bootstrap5.css +5 -3
  53. package/styles/stepper/fabric-dark.css +5 -3
  54. package/styles/stepper/fabric.css +5 -3
  55. package/styles/stepper/fluent-dark.css +5 -3
  56. package/styles/stepper/fluent.css +5 -3
  57. package/styles/stepper/highcontrast-light.css +5 -3
  58. package/styles/stepper/highcontrast.css +5 -3
  59. package/styles/stepper/material-dark.css +5 -3
  60. package/styles/stepper/material.css +5 -3
  61. package/styles/stepper/material3-dark.css +5 -3
  62. package/styles/stepper/material3.css +5 -3
  63. package/styles/stepper/tailwind-dark.css +5 -3
  64. package/styles/stepper/tailwind.css +5 -3
  65. package/styles/tailwind-dark.css +9 -7
  66. package/styles/tailwind.css +9 -7
  67. package/styles/toolbar/_bootstrap5-definition.scss +3 -3
  68. package/styles/toolbar/_fluent-definition.scss +2 -2
  69. package/styles/toolbar/_tailwind-definition.scss +2 -2
  70. package/styles/toolbar/bootstrap5-dark.css +6 -6
  71. package/styles/toolbar/bootstrap5.css +6 -6
  72. package/styles/toolbar/fluent-dark.css +4 -4
  73. package/styles/toolbar/fluent.css +4 -4
  74. package/styles/toolbar/tailwind-dark.css +4 -4
  75. package/styles/toolbar/tailwind.css +4 -4
package/styles/fluent.css CHANGED
@@ -2109,13 +2109,13 @@
2109
2109
  box-shadow: none;
2110
2110
  }
2111
2111
  .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
2112
- background: #e1dfdd;
2112
+ background: none;
2113
2113
  border-radius: 0;
2114
2114
  color: #201f1e;
2115
2115
  border-color: #605e5c;
2116
2116
  border-style: solid;
2117
2117
  border-width: 0;
2118
- box-shadow: none;
2118
+ box-shadow: inset 0 0 0 1px;
2119
2119
  }
2120
2120
  .e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons {
2121
2121
  color: #605e5c;
@@ -2299,12 +2299,12 @@
2299
2299
  border: none;
2300
2300
  }
2301
2301
  .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus {
2302
- background: #e1dfdd;
2302
+ background: none;
2303
2303
  border-radius: 0;
2304
2304
  border-color: #605e5c;
2305
2305
  border-style: solid;
2306
2306
  border-width: 0;
2307
- box-shadow: none;
2307
+ box-shadow: inset 0 0 0 1px;
2308
2308
  }
2309
2309
  .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
2310
2310
  background: #edebe9;
@@ -10937,12 +10937,14 @@ ejs-sidebar {
10937
10937
  .e-stepper .e-stepper-progressbar > .e-progressbar-value {
10938
10938
  background-color: #0078d4;
10939
10939
  }
10940
- .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,
10940
+ .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 {
10941
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0078d4, 0 0 0 8px #fff;
10942
+ }
10941
10943
  .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
10942
10944
  .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
10943
10945
  .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
10944
- .e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
10945
- box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0078d4, 0 0 0 8px #fff;
10946
+ .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 {
10947
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px #201f1e, 0 0 0 8px #fff !important; /* stylelint-disable-line declaration-no-important */
10946
10948
  }
10947
10949
  .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,
10948
10950
  .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,
package/styles/highcontrast-light.css CHANGED
@@ -10794,12 +10794,14 @@ ejs-sidebar {
10794
10794
  .e-stepper .e-stepper-progressbar > .e-progressbar-value {
10795
10795
  background-color: #400074;
10796
10796
  }
10797
- .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,
10797
+ .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 {
10798
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px #400074, 0 0 0 8px #fff;
10799
+ }
10798
10800
  .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
10799
10801
  .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
10800
10802
  .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
10801
- .e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
10802
- box-shadow: 0 0 0 2px #fff, 0 0 0 4px #400074, 0 0 0 8px #fff;
10803
+ .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 {
10804
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000, 0 0 0 8px #fff !important; /* stylelint-disable-line declaration-no-important */
10803
10805
  }
10804
10806
  .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,
10805
10807
  .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,
package/styles/highcontrast.css CHANGED
@@ -10828,12 +10828,14 @@ ejs-sidebar {
10828
10828
  .e-stepper .e-stepper-progressbar > .e-progressbar-value {
10829
10829
  background-color: #ffd939;
10830
10830
  }
10831
- .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,
10831
+ .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 {
10832
+ box-shadow: 0 0 0 2px #000, 0 0 0 4px #ffd939, 0 0 0 8px #000;
10833
+ }
10832
10834
  .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
10833
10835
  .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
10834
10836
  .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
10835
- .e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
10836
- box-shadow: 0 0 0 2px #000, 0 0 0 4px #ffd939, 0 0 0 8px #000;
10837
+ .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 {
10838
+ box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff, 0 0 0 8px #000 !important; /* stylelint-disable-line declaration-no-important */
10837
10839
  }
10838
10840
  .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,
10839
10841
  .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,
package/styles/material-dark.css CHANGED
@@ -10917,12 +10917,14 @@ ejs-sidebar {
10917
10917
  .e-stepper .e-stepper-progressbar > .e-progressbar-value {
10918
10918
  background-color: #3f51b5;
10919
10919
  }
10920
- .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,
10920
+ .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 {
10921
+ box-shadow: 0 0 0 2px #383838, 0 0 0 4px #3f51b5, 0 0 0 8px #383838;
10922
+ }
10921
10923
  .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
10922
10924
  .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
10923
10925
  .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
10924
- .e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
10925
- box-shadow: 0 0 0 2px #383838, 0 0 0 4px #3f51b5, 0 0 0 8px #383838;
10926
+ .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 {
10927
+ box-shadow: 0 0 0 2px #383838, 0 0 0 4px #fff, 0 0 0 8px #383838 !important; /* stylelint-disable-line declaration-no-important */
10926
10928
  }
10927
10929
  .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,
10928
10930
  .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,
package/styles/material.css CHANGED
@@ -10937,12 +10937,14 @@ ejs-sidebar {
10937
10937
  .e-stepper .e-stepper-progressbar > .e-progressbar-value {
10938
10938
  background-color: #3f51b5;
10939
10939
  }
10940
- .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,
10940
+ .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 {
10941
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3f51b5, 0 0 0 8px #fff;
10942
+ }
10941
10943
  .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
10942
10944
  .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
10943
10945
  .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
10944
- .e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
10945
- box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3f51b5, 0 0 0 8px #fff;
10946
+ .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 {
10947
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000, 0 0 0 8px #fff !important; /* stylelint-disable-line declaration-no-important */
10946
10948
  }
10947
10949
  .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,
10948
10950
  .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,
package/styles/material3-dark.css CHANGED
@@ -11039,12 +11039,14 @@ ejs-sidebar {
11039
11039
  .e-stepper .e-stepper-progressbar > .e-progressbar-value {
11040
11040
  background-color: rgba(var(--color-sf-primary));
11041
11041
  }
11042
- .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,
11042
+ .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 {
11043
+ 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));
11044
+ }
11043
11045
  .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
11044
11046
  .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
11045
11047
  .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
11046
- .e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
11047
- 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));
11048
+ .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 {
11049
+ 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 */
11048
11050
  }
11049
11051
  .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,
11050
11052
  .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,
package/styles/material3.css CHANGED
@@ -11095,12 +11095,14 @@ ejs-sidebar {
11095
11095
  .e-stepper .e-stepper-progressbar > .e-progressbar-value {
11096
11096
  background-color: rgba(var(--color-sf-primary));
11097
11097
  }
11098
- .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,
11098
+ .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 {
11099
+ 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));
11100
+ }
11099
11101
  .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
11100
11102
  .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
11101
11103
  .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
11102
- .e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
11103
- 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));
11104
+ .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 {
11105
+ 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 */
11104
11106
  }
11105
11107
  .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,
11106
11108
  .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,
package/styles/stepper/_bootstrap-dark-definition.scss CHANGED
@@ -43,6 +43,7 @@ $stepper-bigger-small-optional-size: 12px !default;
43
43
  $stepper-bigger-small-text-size: 14px !default;
44
44
 
45
45
  $step-selected-li-shadow: 0 0 0 2px $gray-base, 0 0 0 4px $brand-primary, 0 0 0 8px $gray-base !default;
46
+ $step-keyboard-selected-li-shadow: 0 0 0 2px $gray-base, 0 0 0 4px $grey-light-font, 0 0 0 8px $gray-base !default;
46
47
  $step-valid-li-shadow: 0 0 0 2px $gray-base, 0 0 0 4px $brand-success, 0 0 0 8px $gray-base !default;
47
48
  $step-error-li-shadow: 0 0 0 2px $gray-base, 0 0 0 4px $brand-danger, 0 0 0 8px $gray-base !default;
48
49
  $step-li-shadow: 0 0 0 8px $gray-base !default;
package/styles/stepper/_bootstrap-definition.scss CHANGED
@@ -43,6 +43,7 @@ $stepper-bigger-small-optional-size: 12px !default;
43
43
  $stepper-bigger-small-text-size: 14px !default;
44
44
 
45
45
  $step-selected-li-shadow: 0 0 0 2px $grey-white, 0 0 0 4px $brand-primary, 0 0 0 8px $grey-white !default;
46
+ $step-keyboard-selected-li-shadow: 0 0 0 2px $grey-white, 0 0 0 4px $base-font, 0 0 0 8px $grey-white !default;
46
47
  $step-valid-li-shadow: 0 0 0 2px $grey-white, 0 0 0 4px $brand-success, 0 0 0 8px $grey-white !default;
47
48
  $step-error-li-shadow: 0 0 0 2px $grey-white, 0 0 0 4px $brand-danger, 0 0 0 8px $grey-white !default;
48
49
  $step-li-shadow: 0 0 0 8px $grey-white !default;
package/styles/stepper/_bootstrap4-definition.scss CHANGED
@@ -43,6 +43,7 @@ $stepper-bigger-small-optional-size: 12px !default;
43
43
  $stepper-bigger-small-text-size: 14px !default;
44
44
 
45
45
  $step-selected-li-shadow: 0 0 0 2px $white, 0 0 0 4px $primary, 0 0 0 8px $white !default;
46
+ $step-keyboard-selected-li-shadow: 0 0 0 2px $white, 0 0 0 4px $gray-700, 0 0 0 8px $white !default;
46
47
  $step-valid-li-shadow: 0 0 0 2px $white, 0 0 0 4px $success, 0 0 0 8px $white !default;
47
48
  $step-error-li-shadow: 0 0 0 2px $white, 0 0 0 4px $danger, 0 0 0 8px $white !default;
48
49
  $step-li-shadow: 0 0 0 8px $white !default;
package/styles/stepper/_bootstrap5-definition.scss CHANGED
@@ -44,6 +44,7 @@ $stepper-bigger-small-optional-size: 12px !default;
44
44
  $stepper-bigger-small-text-size: 14px !default;
45
45
 
46
46
  $step-selected-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $primary, 0 0 0 8px $content-bg-color !default;
47
+ $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;
47
48
  $step-valid-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $success, 0 0 0 8px $content-bg-color !default;
48
49
  $step-error-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $danger, 0 0 0 8px $content-bg-color !default;
49
50
  $step-li-shadow: 0 0 0 8px $content-bg-color !default;
package/styles/stepper/_fabric-dark-definition.scss CHANGED
@@ -43,6 +43,7 @@ $stepper-bigger-small-optional-size: 12px !default;
43
43
  $stepper-bigger-small-text-size: 14px !default;
44
44
 
45
45
  $step-selected-li-shadow: 0 0 0 2px $neutral-white, 0 0 0 4px $theme-primary, 0 0 0 8px $neutral-white !default;
46
+ $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;
46
47
  $step-valid-li-shadow: 0 0 0 2px $neutral-white, 0 0 0 4px $success-bg, 0 0 0 8px $neutral-white !default;
47
48
  $step-error-li-shadow: 0 0 0 2px $neutral-white, 0 0 0 4px $error-bg, 0 0 0 8px $neutral-white !default;
48
49
  $step-li-shadow: 0 0 0 8px $neutral-white !default;
package/styles/stepper/_fabric-definition.scss CHANGED
@@ -43,6 +43,7 @@ $stepper-bigger-small-optional-size: 12px !default;
43
43
  $stepper-bigger-small-text-size: 14px !default;
44
44
 
45
45
  $step-selected-li-shadow: 0 0 0 2px $neutral-white, 0 0 0 4px $theme-primary, 0 0 0 8px $neutral-white !default;
46
+ $step-keyboard-selected-li-shadow: 0 0 0 2px $neutral-white, 0 0 0 4px $base-font, 0 0 0 8px $neutral-white !default;
46
47
  $step-valid-li-shadow: 0 0 0 2px $neutral-white, 0 0 0 4px $success-bg, 0 0 0 8px $neutral-white !default;
47
48
  $step-error-li-shadow: 0 0 0 2px $neutral-white, 0 0 0 4px $error-bg, 0 0 0 8px $neutral-white !default;
48
49
  $step-li-shadow: 0 0 0 8px $neutral-white !default;
package/styles/stepper/_fluent-definition.scss CHANGED
@@ -43,6 +43,7 @@ $stepper-bigger-small-optional-size: 12px !default;
43
43
  $stepper-bigger-small-text-size: 14px !default;
44
44
 
45
45
  $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;
46
+ $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;
46
47
  $step-valid-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $success, 0 0 0 8px $content-bg-color !default;
47
48
  $step-error-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $danger, 0 0 0 8px $content-bg-color !default;
48
49
  $step-li-shadow: 0 0 0 8px $content-bg-color !default;
package/styles/stepper/_fusionnew-definition.scss CHANGED
@@ -43,6 +43,7 @@ $stepper-bigger-small-optional-size: 12px !default;
43
43
  $stepper-bigger-small-text-size: 14px !default;
44
44
 
45
45
  $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;
46
+ $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;
46
47
  $step-valid-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $success, 0 0 0 8px $content-bg-color !default;
47
48
  $step-error-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $danger, 0 0 0 8px $content-bg-color !default;
48
49
  $step-li-shadow: 0 0 0 8px $content-bg-color !default;
package/styles/stepper/_highcontrast-definition.scss CHANGED
@@ -43,6 +43,7 @@ $stepper-bigger-small-optional-size: 12px !default;
43
43
  $stepper-bigger-small-text-size: 14px !default;
44
44
 
45
45
  $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;
46
+ $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;
46
47
  $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;
47
48
  $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;
48
49
  $step-li-shadow: 0 0 0 8px $bg-base-0 !default;
package/styles/stepper/_highcontrast-light-definition.scss CHANGED
@@ -43,6 +43,7 @@ $stepper-bigger-small-optional-size: 12px !default;
43
43
  $stepper-bigger-small-text-size: 14px !default;
44
44
 
45
45
  $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;
46
+ $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;
46
47
  $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;
47
48
  $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;
48
49
  $step-li-shadow: 0 0 0 8px $bg-base-0 !default;
package/styles/stepper/_material-dark-definition.scss CHANGED
@@ -43,6 +43,7 @@ $stepper-bigger-small-optional-size: 12px !default;
43
43
  $stepper-bigger-small-text-size: 14px !default;
44
44
 
45
45
  $step-selected-li-shadow: 0 0 0 2px $overlay-bg-color, 0 0 0 4px $primary, 0 0 0 8px $overlay-bg-color !default;
46
+ $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;
46
47
  $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;
47
48
  $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;
48
49
  $step-li-shadow: 0 0 0 8px $overlay-bg-color !default;
package/styles/stepper/_material-definition.scss CHANGED
@@ -43,6 +43,7 @@ $stepper-bigger-small-optional-size: 12px !default;
43
43
  $stepper-bigger-small-text-size: 14px !default;
44
44
 
45
45
  $step-selected-li-shadow: 0 0 0 2px $grey-white, 0 0 0 4px $primary, 0 0 0 8px $grey-white !default;
46
+ $step-keyboard-selected-li-shadow: 0 0 0 2px $grey-white, 0 0 0 4px $base-font, 0 0 0 8px $grey-white !default;
46
47
  $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;
47
48
  $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;
48
49
  $step-li-shadow: 0 0 0 8px $grey-white !default;
package/styles/stepper/_material3-definition.scss CHANGED
@@ -43,6 +43,7 @@ $stepper-bigger-small-optional-size: 12px !default;
43
43
  $stepper-bigger-small-text-size: 14px !default;
44
44
 
45
45
  $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;
46
+ $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;
46
47
  $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;
47
48
  $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;
48
49
  $step-li-shadow: 0 0 0 8px rgba($content-bg-color) !default;
package/styles/stepper/_tailwind-definition.scss CHANGED
@@ -43,6 +43,7 @@ $stepper-bigger-small-optional-size: 12px !default;
43
43
  $stepper-bigger-small-text-size: 14px !default;
44
44
 
45
45
  $step-selected-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $primary, 0 0 0 8px $content-bg-color !default;
46
+ $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;
46
47
  $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;
47
48
  $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;
48
49
  $step-li-shadow: 0 0 0 8px $content-bg-color !default;
package/styles/stepper/_theme.scss CHANGED
@@ -132,12 +132,18 @@
132
132
  }
133
133
  }
134
134
 
135
- &: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,
135
+ &: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 {
136
+ box-shadow: $step-selected-li-shadow;
137
+ }
138
+
136
139
  .e-stepper-steps .e-step-container.e-step-focus .e-step,
137
140
  .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
138
141
  .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
139
- .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
140
- box-shadow: $step-selected-li-shadow;
142
+ .e-stepper-steps .e-step-container.e-step-template.e-step-focus,
143
+ &:not(.e-steps-focus) .e-stepper-steps .e-step-container:focus-visible .e-step,
144
+ &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-text-only:focus-visible .e-text,
145
+ &:not(.e-steps-focus) .e-stepper-steps .e-step-container.e-step-label-only:focus-visible .e-label {
146
+ box-shadow: $step-keyboard-selected-li-shadow !important; /* stylelint-disable-line declaration-no-important */
141
147
  }
142
148
 
143
149
  &: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/styles/stepper/bootstrap-dark.css CHANGED
@@ -579,12 +579,14 @@
579
579
  .e-stepper .e-stepper-progressbar > .e-progressbar-value {
580
580
  background-color: #0070f0;
581
581
  }
582
- .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,
582
+ .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 {
583
+ box-shadow: 0 0 0 2px #1a1a1a, 0 0 0 4px #0070f0, 0 0 0 8px #1a1a1a;
584
+ }
583
585
  .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
584
586
  .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
585
587
  .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
586
- .e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
587
- box-shadow: 0 0 0 2px #1a1a1a, 0 0 0 4px #0070f0, 0 0 0 8px #1a1a1a;
588
+ .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 {
589
+ box-shadow: 0 0 0 2px #1a1a1a, 0 0 0 4px #fff, 0 0 0 8px #1a1a1a !important; /* stylelint-disable-line declaration-no-important */
588
590
  }
589
591
  .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,
590
592
  .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,
package/styles/stepper/bootstrap.css CHANGED
@@ -579,12 +579,14 @@
579
579
  .e-stepper .e-stepper-progressbar > .e-progressbar-value {
580
580
  background-color: #317ab9;
581
581
  }
582
- .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,
582
+ .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 {
583
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px #317ab9, 0 0 0 8px #fff;
584
+ }
583
585
  .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
584
586
  .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
585
587
  .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
586
- .e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
587
- box-shadow: 0 0 0 2px #fff, 0 0 0 4px #317ab9, 0 0 0 8px #fff;
588
+ .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 {
589
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000, 0 0 0 8px #fff !important; /* stylelint-disable-line declaration-no-important */
588
590
  }
589
591
  .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,
590
592
  .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,
package/styles/stepper/bootstrap4.css CHANGED
@@ -579,12 +579,14 @@
579
579
  .e-stepper .e-stepper-progressbar > .e-progressbar-value {
580
580
  background-color: #007bff;
581
581
  }
582
- .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,
582
+ .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 {
583
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px #007bff, 0 0 0 8px #fff;
584
+ }
583
585
  .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
584
586
  .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
585
587
  .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
586
- .e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
587
- box-shadow: 0 0 0 2px #fff, 0 0 0 4px #007bff, 0 0 0 8px #fff;
588
+ .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 {
589
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px #495057, 0 0 0 8px #fff !important; /* stylelint-disable-line declaration-no-important */
588
590
  }
589
591
  .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,
590
592
  .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,
package/styles/stepper/bootstrap5-dark.css CHANGED
@@ -579,12 +579,14 @@
579
579
  .e-stepper .e-stepper-progressbar > .e-progressbar-value {
580
580
  background-color: #0d6efd;
581
581
  }
582
- .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,
582
+ .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 {
583
+ box-shadow: 0 0 0 2px #212529, 0 0 0 4px #0d6efd, 0 0 0 8px #212529;
584
+ }
583
585
  .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
584
586
  .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
585
587
  .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
586
- .e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
587
- box-shadow: 0 0 0 2px #212529, 0 0 0 4px #0d6efd, 0 0 0 8px #212529;
588
+ .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 {
589
+ box-shadow: 0 0 0 2px #212529, 0 0 0 4px #fff, 0 0 0 8px #212529 !important; /* stylelint-disable-line declaration-no-important */
588
590
  }
589
591
  .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,
590
592
  .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,
package/styles/stepper/bootstrap5.css CHANGED
@@ -579,12 +579,14 @@
579
579
  .e-stepper .e-stepper-progressbar > .e-progressbar-value {
580
580
  background-color: #0d6efd;
581
581
  }
582
- .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,
582
+ .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 {
583
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0d6efd, 0 0 0 8px #fff;
584
+ }
583
585
  .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
584
586
  .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
585
587
  .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
586
- .e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
587
- box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0d6efd, 0 0 0 8px #fff;
588
+ .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 {
589
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px #212529, 0 0 0 8px #fff !important; /* stylelint-disable-line declaration-no-important */
588
590
  }
589
591
  .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,
590
592
  .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,
package/styles/stepper/fabric-dark.css CHANGED
@@ -579,12 +579,14 @@
579
579
  .e-stepper .e-stepper-progressbar > .e-progressbar-value {
580
580
  background-color: #0074cc;
581
581
  }
582
- .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,
582
+ .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 {
583
+ box-shadow: 0 0 0 2px #201f1f, 0 0 0 4px #0074cc, 0 0 0 8px #201f1f;
584
+ }
583
585
  .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
584
586
  .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
585
587
  .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
586
- .e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
587
- box-shadow: 0 0 0 2px #201f1f, 0 0 0 4px #0074cc, 0 0 0 8px #201f1f;
588
+ .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 {
589
+ box-shadow: 0 0 0 2px #201f1f, 0 0 0 4px #fff, 0 0 0 8px #201f1f !important; /* stylelint-disable-line declaration-no-important */
588
590
  }
589
591
  .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,
590
592
  .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,
package/styles/stepper/fabric.css CHANGED
@@ -579,12 +579,14 @@
579
579
  .e-stepper .e-stepper-progressbar > .e-progressbar-value {
580
580
  background-color: #0078d6;
581
581
  }
582
- .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,
582
+ .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 {
583
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0078d6, 0 0 0 8px #fff;
584
+ }
583
585
  .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
584
586
  .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
585
587
  .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
586
- .e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
587
- box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0078d6, 0 0 0 8px #fff;
588
+ .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 {
589
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px #333, 0 0 0 8px #fff !important; /* stylelint-disable-line declaration-no-important */
588
590
  }
589
591
  .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,
590
592
  .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,
package/styles/stepper/fluent-dark.css CHANGED
@@ -579,12 +579,14 @@
579
579
  .e-stepper .e-stepper-progressbar > .e-progressbar-value {
580
580
  background-color: #0078d4;
581
581
  }
582
- .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,
582
+ .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 {
583
+ box-shadow: 0 0 0 2px #1b1a19, 0 0 0 4px #0078d4, 0 0 0 8px #1b1a19;
584
+ }
583
585
  .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
584
586
  .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
585
587
  .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
586
- .e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
587
- box-shadow: 0 0 0 2px #1b1a19, 0 0 0 4px #0078d4, 0 0 0 8px #1b1a19;
588
+ .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 {
589
+ box-shadow: 0 0 0 2px #1b1a19, 0 0 0 4px #f3f2f1, 0 0 0 8px #1b1a19 !important; /* stylelint-disable-line declaration-no-important */
588
590
  }
589
591
  .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,
590
592
  .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,
package/styles/stepper/fluent.css CHANGED
@@ -579,12 +579,14 @@
579
579
  .e-stepper .e-stepper-progressbar > .e-progressbar-value {
580
580
  background-color: #0078d4;
581
581
  }
582
- .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,
582
+ .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 {
583
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0078d4, 0 0 0 8px #fff;
584
+ }
583
585
  .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
584
586
  .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
585
587
  .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
586
- .e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
587
- box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0078d4, 0 0 0 8px #fff;
588
+ .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 {
589
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px #201f1e, 0 0 0 8px #fff !important; /* stylelint-disable-line declaration-no-important */
588
590
  }
589
591
  .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,
590
592
  .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,
package/styles/stepper/highcontrast-light.css CHANGED
@@ -579,12 +579,14 @@
579
579
  .e-stepper .e-stepper-progressbar > .e-progressbar-value {
580
580
  background-color: #400074;
581
581
  }
582
- .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,
582
+ .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 {
583
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px #400074, 0 0 0 8px #fff;
584
+ }
583
585
  .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
584
586
  .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
585
587
  .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
586
- .e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
587
- box-shadow: 0 0 0 2px #fff, 0 0 0 4px #400074, 0 0 0 8px #fff;
588
+ .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 {
589
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000, 0 0 0 8px #fff !important; /* stylelint-disable-line declaration-no-important */
588
590
  }
589
591
  .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,
590
592
  .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,
package/styles/stepper/highcontrast.css CHANGED
@@ -579,12 +579,14 @@
579
579
  .e-stepper .e-stepper-progressbar > .e-progressbar-value {
580
580
  background-color: #ffd939;
581
581
  }
582
- .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,
582
+ .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 {
583
+ box-shadow: 0 0 0 2px #000, 0 0 0 4px #ffd939, 0 0 0 8px #000;
584
+ }
583
585
  .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
584
586
  .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
585
587
  .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
586
- .e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
587
- box-shadow: 0 0 0 2px #000, 0 0 0 4px #ffd939, 0 0 0 8px #000;
588
+ .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 {
589
+ box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff, 0 0 0 8px #000 !important; /* stylelint-disable-line declaration-no-important */
588
590
  }
589
591
  .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,
590
592
  .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,
package/styles/stepper/material-dark.css CHANGED
@@ -579,12 +579,14 @@
579
579
  .e-stepper .e-stepper-progressbar > .e-progressbar-value {
580
580
  background-color: #3f51b5;
581
581
  }
582
- .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,
582
+ .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 {
583
+ box-shadow: 0 0 0 2px #383838, 0 0 0 4px #3f51b5, 0 0 0 8px #383838;
584
+ }
583
585
  .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
584
586
  .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
585
587
  .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
586
- .e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
587
- box-shadow: 0 0 0 2px #383838, 0 0 0 4px #3f51b5, 0 0 0 8px #383838;
588
+ .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 {
589
+ box-shadow: 0 0 0 2px #383838, 0 0 0 4px #fff, 0 0 0 8px #383838 !important; /* stylelint-disable-line declaration-no-important */
588
590
  }
589
591
  .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,
590
592
  .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,
package/styles/stepper/material.css CHANGED
@@ -579,12 +579,14 @@
579
579
  .e-stepper .e-stepper-progressbar > .e-progressbar-value {
580
580
  background-color: #3f51b5;
581
581
  }
582
- .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,
582
+ .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 {
583
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3f51b5, 0 0 0 8px #fff;
584
+ }
583
585
  .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
584
586
  .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
585
587
  .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
586
- .e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
587
- box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3f51b5, 0 0 0 8px #fff;
588
+ .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 {
589
+ box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000, 0 0 0 8px #fff !important; /* stylelint-disable-line declaration-no-important */
588
590
  }
589
591
  .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,
590
592
  .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,
package/styles/stepper/material3-dark.css CHANGED
@@ -634,12 +634,14 @@
634
634
  .e-stepper .e-stepper-progressbar > .e-progressbar-value {
635
635
  background-color: rgba(var(--color-sf-primary));
636
636
  }
637
- .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,
637
+ .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 {
638
+ 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));
639
+ }
638
640
  .e-stepper .e-stepper-steps .e-step-container.e-step-focus .e-step,
639
641
  .e-stepper .e-stepper-steps .e-step-container.e-step-label-only.e-step-focus .e-label,
640
642
  .e-stepper .e-stepper-steps .e-step-container.e-step-text-only.e-step-focus .e-text,
641
- .e-stepper .e-stepper-steps .e-step-container.e-step-template.e-step-focus {
642
- 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));
643
+ .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 {
644
+ 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 */
643
645
  }
644
646
  .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,
645
647
  .e-stepper .e-stepper-steps .e-step-container.e-step-valid.e-step-focus .e-step,