@syncfusion/blazor-themes 28.2.3 → 28.2.4

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 (107) hide show
  1. package/Compiled-Themes/fluent2-dark-lite.css +12 -3
  2. package/Compiled-Themes/fluent2-dark.css +12 -3
  3. package/Compiled-Themes/fluent2-highcontrast-lite.css +12 -3
  4. package/Compiled-Themes/fluent2-highcontrast.css +12 -3
  5. package/Compiled-Themes/fluent2-lite.css +12 -3
  6. package/Compiled-Themes/fluent2.css +12 -3
  7. package/SCSS-Themes/bds-dark-lite.scss +13 -4
  8. package/SCSS-Themes/bds-dark.scss +13 -4
  9. package/SCSS-Themes/bds-lite.scss +13 -4
  10. package/SCSS-Themes/bds.scss +13 -4
  11. package/SCSS-Themes/bootstrap-dark-lite.scss +13 -4
  12. package/SCSS-Themes/bootstrap-dark.scss +13 -4
  13. package/SCSS-Themes/bootstrap-lite.scss +13 -4
  14. package/SCSS-Themes/bootstrap.scss +13 -4
  15. package/SCSS-Themes/bootstrap4-lite.scss +13 -4
  16. package/SCSS-Themes/bootstrap4.scss +13 -4
  17. package/SCSS-Themes/bootstrap5-dark-lite.scss +13 -4
  18. package/SCSS-Themes/bootstrap5-dark.scss +13 -4
  19. package/SCSS-Themes/bootstrap5-lite.scss +13 -4
  20. package/SCSS-Themes/bootstrap5.3-dark-lite.scss +13 -4
  21. package/SCSS-Themes/bootstrap5.3-dark.scss +13 -4
  22. package/SCSS-Themes/bootstrap5.3-lite.scss +13 -4
  23. package/SCSS-Themes/bootstrap5.3.scss +13 -4
  24. package/SCSS-Themes/bootstrap5.scss +13 -4
  25. package/SCSS-Themes/fabric-dark-lite.scss +13 -4
  26. package/SCSS-Themes/fabric-dark.scss +13 -4
  27. package/SCSS-Themes/fabric-lite.scss +13 -4
  28. package/SCSS-Themes/fabric.scss +13 -4
  29. package/SCSS-Themes/fluent-dark-lite.scss +13 -4
  30. package/SCSS-Themes/fluent-dark.scss +13 -4
  31. package/SCSS-Themes/fluent-lite.scss +13 -4
  32. package/SCSS-Themes/fluent.scss +13 -4
  33. package/SCSS-Themes/fluent2-dark-lite.scss +13 -4
  34. package/SCSS-Themes/fluent2-dark.scss +13 -4
  35. package/SCSS-Themes/fluent2-highcontrast-lite.scss +13 -4
  36. package/SCSS-Themes/fluent2-highcontrast.scss +13 -4
  37. package/SCSS-Themes/fluent2-lite.scss +13 -4
  38. package/SCSS-Themes/fluent2.scss +13 -4
  39. package/SCSS-Themes/highcontrast-lite.scss +13 -4
  40. package/SCSS-Themes/highcontrast.scss +13 -4
  41. package/SCSS-Themes/material-dark-lite.scss +13 -4
  42. package/SCSS-Themes/material-dark.scss +13 -4
  43. package/SCSS-Themes/material-lite.scss +13 -4
  44. package/SCSS-Themes/material.scss +13 -4
  45. package/SCSS-Themes/material3-dark-lite.scss +13 -4
  46. package/SCSS-Themes/material3-dark.scss +13 -4
  47. package/SCSS-Themes/material3-lite.scss +13 -4
  48. package/SCSS-Themes/material3.scss +13 -4
  49. package/SCSS-Themes/navigations/menu/bds-dark-lite.scss +13 -4
  50. package/SCSS-Themes/navigations/menu/bds-dark.scss +13 -4
  51. package/SCSS-Themes/navigations/menu/bds-lite.scss +13 -4
  52. package/SCSS-Themes/navigations/menu/bds.scss +13 -4
  53. package/SCSS-Themes/navigations/menu/bootstrap-dark-lite.scss +13 -4
  54. package/SCSS-Themes/navigations/menu/bootstrap-dark.scss +13 -4
  55. package/SCSS-Themes/navigations/menu/bootstrap-lite.scss +13 -4
  56. package/SCSS-Themes/navigations/menu/bootstrap.scss +13 -4
  57. package/SCSS-Themes/navigations/menu/bootstrap4-lite.scss +13 -4
  58. package/SCSS-Themes/navigations/menu/bootstrap4.scss +13 -4
  59. package/SCSS-Themes/navigations/menu/bootstrap5-dark-lite.scss +13 -4
  60. package/SCSS-Themes/navigations/menu/bootstrap5-dark.scss +13 -4
  61. package/SCSS-Themes/navigations/menu/bootstrap5-lite.scss +13 -4
  62. package/SCSS-Themes/navigations/menu/bootstrap5.3-dark-lite.scss +13 -4
  63. package/SCSS-Themes/navigations/menu/bootstrap5.3-dark.scss +13 -4
  64. package/SCSS-Themes/navigations/menu/bootstrap5.3-lite.scss +13 -4
  65. package/SCSS-Themes/navigations/menu/bootstrap5.3.scss +13 -4
  66. package/SCSS-Themes/navigations/menu/bootstrap5.scss +13 -4
  67. package/SCSS-Themes/navigations/menu/fabric-dark-lite.scss +13 -4
  68. package/SCSS-Themes/navigations/menu/fabric-dark.scss +13 -4
  69. package/SCSS-Themes/navigations/menu/fabric-lite.scss +13 -4
  70. package/SCSS-Themes/navigations/menu/fabric.scss +13 -4
  71. package/SCSS-Themes/navigations/menu/fluent-dark-lite.scss +13 -4
  72. package/SCSS-Themes/navigations/menu/fluent-dark.scss +13 -4
  73. package/SCSS-Themes/navigations/menu/fluent-lite.scss +13 -4
  74. package/SCSS-Themes/navigations/menu/fluent.scss +13 -4
  75. package/SCSS-Themes/navigations/menu/fluent2-dark-lite.scss +13 -4
  76. package/SCSS-Themes/navigations/menu/fluent2-dark.scss +13 -4
  77. package/SCSS-Themes/navigations/menu/fluent2-highcontrast-lite.scss +13 -4
  78. package/SCSS-Themes/navigations/menu/fluent2-highcontrast.scss +13 -4
  79. package/SCSS-Themes/navigations/menu/fluent2-lite.scss +13 -4
  80. package/SCSS-Themes/navigations/menu/fluent2.scss +13 -4
  81. package/SCSS-Themes/navigations/menu/highcontrast-lite.scss +13 -4
  82. package/SCSS-Themes/navigations/menu/highcontrast.scss +13 -4
  83. package/SCSS-Themes/navigations/menu/material-dark-lite.scss +13 -4
  84. package/SCSS-Themes/navigations/menu/material-dark.scss +13 -4
  85. package/SCSS-Themes/navigations/menu/material-lite.scss +13 -4
  86. package/SCSS-Themes/navigations/menu/material.scss +13 -4
  87. package/SCSS-Themes/navigations/menu/material3-dark-lite.scss +13 -4
  88. package/SCSS-Themes/navigations/menu/material3-dark.scss +13 -4
  89. package/SCSS-Themes/navigations/menu/material3-lite.scss +13 -4
  90. package/SCSS-Themes/navigations/menu/material3.scss +13 -4
  91. package/SCSS-Themes/navigations/menu/tailwind-dark-lite.scss +13 -4
  92. package/SCSS-Themes/navigations/menu/tailwind-dark.scss +13 -4
  93. package/SCSS-Themes/navigations/menu/tailwind-lite.scss +13 -4
  94. package/SCSS-Themes/navigations/menu/tailwind.scss +13 -4
  95. package/SCSS-Themes/navigations/menu/tailwind3-dark-lite.scss +13 -4
  96. package/SCSS-Themes/navigations/menu/tailwind3-dark.scss +13 -4
  97. package/SCSS-Themes/navigations/menu/tailwind3-lite.scss +13 -4
  98. package/SCSS-Themes/navigations/menu/tailwind3.scss +13 -4
  99. package/SCSS-Themes/tailwind-dark-lite.scss +13 -4
  100. package/SCSS-Themes/tailwind-dark.scss +13 -4
  101. package/SCSS-Themes/tailwind-lite.scss +13 -4
  102. package/SCSS-Themes/tailwind.scss +13 -4
  103. package/SCSS-Themes/tailwind3-dark-lite.scss +13 -4
  104. package/SCSS-Themes/tailwind3-dark.scss +13 -4
  105. package/SCSS-Themes/tailwind3-lite.scss +13 -4
  106. package/SCSS-Themes/tailwind3.scss +13 -4
  107. package/package.json +1 -1
package/Compiled-Themes/fluent2-dark-lite.css CHANGED
@@ -26283,6 +26283,15 @@ ejs-sidebar {
26283
26283
  .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
26284
26284
  color: var(--color-sf-icon-color-pressed);
26285
26285
  }
26286
+ .e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible,
26287
+ .e-menu-container .e-menu .e-menu-item.e-focused:focus-visible {
26288
+ color: var(--color-sf-content-text-color);
26289
+ }
26290
+ .e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible .e-menu-icon,
26291
+ .e-menu-container .e-menu .e-menu-item.e-focused:focus-visible .e-caret,
26292
+ .e-menu-container .e-menu .e-menu-item.e-focused:focus-visible .e-menu-icon {
26293
+ color: var(--color-sf-icon-color);
26294
+ }
26286
26295
  .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
26287
26296
  .e-menu-container .e-menu .e-menu-item.e-selected,
26288
26297
  .e-menu-container .e-menu .e-menu-item.e-active-item {
@@ -26306,8 +26315,8 @@ ejs-sidebar {
26306
26315
  .e-menu-container .e-menu .e-menu-item.e-separator {
26307
26316
  border-bottom-color: var(--color-sf-border-light);
26308
26317
  }
26309
- .e-menu-wrapper .e-menu .e-menu-item:focus-visible,
26310
- .e-menu-container .e-menu .e-menu-item:focus-visible {
26318
+ .e-menu-wrapper .e-menu .e-menu-item:focus-visible:not(.e-selected),
26319
+ .e-menu-container .e-menu .e-menu-item:focus-visible:not(.e-selected) {
26311
26320
  border-radius: 4px;
26312
26321
  background-color: var(--color-sf-content-bg-color);
26313
26322
  box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
@@ -26373,7 +26382,7 @@ ejs-sidebar {
26373
26382
  }
26374
26383
  .e-menu-wrapper .e-ul .e-menu-item:focus-visible,
26375
26384
  .e-menu-container .e-ul .e-menu-item:focus-visible {
26376
- background-color: var(--color-sf-content-bg-color);
26385
+ background-color: var(--color-sf-flyout-bg-color-focus);
26377
26386
  box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
26378
26387
  border-radius: 4px;
26379
26388
  }
package/Compiled-Themes/fluent2-dark.css CHANGED
@@ -36387,6 +36387,15 @@ ejs-sidebar {
36387
36387
  .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
36388
36388
  color: var(--color-sf-icon-color-pressed);
36389
36389
  }
36390
+ .e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible,
36391
+ .e-menu-container .e-menu .e-menu-item.e-focused:focus-visible {
36392
+ color: var(--color-sf-content-text-color);
36393
+ }
36394
+ .e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible .e-menu-icon,
36395
+ .e-menu-container .e-menu .e-menu-item.e-focused:focus-visible .e-caret,
36396
+ .e-menu-container .e-menu .e-menu-item.e-focused:focus-visible .e-menu-icon {
36397
+ color: var(--color-sf-icon-color);
36398
+ }
36390
36399
  .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
36391
36400
  .e-menu-container .e-menu .e-menu-item.e-selected,
36392
36401
  .e-menu-container .e-menu .e-menu-item.e-active-item {
@@ -36410,8 +36419,8 @@ ejs-sidebar {
36410
36419
  .e-menu-container .e-menu .e-menu-item.e-separator {
36411
36420
  border-bottom-color: var(--color-sf-border-light);
36412
36421
  }
36413
- .e-menu-wrapper .e-menu .e-menu-item:focus-visible,
36414
- .e-menu-container .e-menu .e-menu-item:focus-visible {
36422
+ .e-menu-wrapper .e-menu .e-menu-item:focus-visible:not(.e-selected),
36423
+ .e-menu-container .e-menu .e-menu-item:focus-visible:not(.e-selected) {
36415
36424
  border-radius: 4px;
36416
36425
  background-color: var(--color-sf-content-bg-color);
36417
36426
  box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
@@ -36477,7 +36486,7 @@ ejs-sidebar {
36477
36486
  }
36478
36487
  .e-menu-wrapper .e-ul .e-menu-item:focus-visible,
36479
36488
  .e-menu-container .e-ul .e-menu-item:focus-visible {
36480
- background-color: var(--color-sf-content-bg-color);
36489
+ background-color: var(--color-sf-flyout-bg-color-focus);
36481
36490
  box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
36482
36491
  border-radius: 4px;
36483
36492
  }
package/Compiled-Themes/fluent2-highcontrast-lite.css CHANGED
@@ -26291,6 +26291,15 @@ ejs-sidebar {
26291
26291
  .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
26292
26292
  color: var(--color-sf-icon-color-pressed);
26293
26293
  }
26294
+ .e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible,
26295
+ .e-menu-container .e-menu .e-menu-item.e-focused:focus-visible {
26296
+ color: var(--color-sf-content-text-color);
26297
+ }
26298
+ .e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible .e-menu-icon,
26299
+ .e-menu-container .e-menu .e-menu-item.e-focused:focus-visible .e-caret,
26300
+ .e-menu-container .e-menu .e-menu-item.e-focused:focus-visible .e-menu-icon {
26301
+ color: var(--color-sf-icon-color);
26302
+ }
26294
26303
  .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
26295
26304
  .e-menu-container .e-menu .e-menu-item.e-selected,
26296
26305
  .e-menu-container .e-menu .e-menu-item.e-active-item {
@@ -26314,8 +26323,8 @@ ejs-sidebar {
26314
26323
  .e-menu-container .e-menu .e-menu-item.e-separator {
26315
26324
  border-bottom-color: var(--color-sf-border-light);
26316
26325
  }
26317
- .e-menu-wrapper .e-menu .e-menu-item:focus-visible,
26318
- .e-menu-container .e-menu .e-menu-item:focus-visible {
26326
+ .e-menu-wrapper .e-menu .e-menu-item:focus-visible:not(.e-selected),
26327
+ .e-menu-container .e-menu .e-menu-item:focus-visible:not(.e-selected) {
26319
26328
  border-radius: 4px;
26320
26329
  background-color: var(--color-sf-content-bg-color);
26321
26330
  box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
@@ -26381,7 +26390,7 @@ ejs-sidebar {
26381
26390
  }
26382
26391
  .e-menu-wrapper .e-ul .e-menu-item:focus-visible,
26383
26392
  .e-menu-container .e-ul .e-menu-item:focus-visible {
26384
- background-color: var(--color-sf-content-bg-color);
26393
+ background-color: var(--color-sf-flyout-bg-color-focus);
26385
26394
  box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
26386
26395
  border-radius: 4px;
26387
26396
  }
package/Compiled-Themes/fluent2-highcontrast.css CHANGED
@@ -36395,6 +36395,15 @@ ejs-sidebar {
36395
36395
  .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
36396
36396
  color: var(--color-sf-icon-color-pressed);
36397
36397
  }
36398
+ .e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible,
36399
+ .e-menu-container .e-menu .e-menu-item.e-focused:focus-visible {
36400
+ color: var(--color-sf-content-text-color);
36401
+ }
36402
+ .e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible .e-menu-icon,
36403
+ .e-menu-container .e-menu .e-menu-item.e-focused:focus-visible .e-caret,
36404
+ .e-menu-container .e-menu .e-menu-item.e-focused:focus-visible .e-menu-icon {
36405
+ color: var(--color-sf-icon-color);
36406
+ }
36398
36407
  .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
36399
36408
  .e-menu-container .e-menu .e-menu-item.e-selected,
36400
36409
  .e-menu-container .e-menu .e-menu-item.e-active-item {
@@ -36418,8 +36427,8 @@ ejs-sidebar {
36418
36427
  .e-menu-container .e-menu .e-menu-item.e-separator {
36419
36428
  border-bottom-color: var(--color-sf-border-light);
36420
36429
  }
36421
- .e-menu-wrapper .e-menu .e-menu-item:focus-visible,
36422
- .e-menu-container .e-menu .e-menu-item:focus-visible {
36430
+ .e-menu-wrapper .e-menu .e-menu-item:focus-visible:not(.e-selected),
36431
+ .e-menu-container .e-menu .e-menu-item:focus-visible:not(.e-selected) {
36423
36432
  border-radius: 4px;
36424
36433
  background-color: var(--color-sf-content-bg-color);
36425
36434
  box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
@@ -36485,7 +36494,7 @@ ejs-sidebar {
36485
36494
  }
36486
36495
  .e-menu-wrapper .e-ul .e-menu-item:focus-visible,
36487
36496
  .e-menu-container .e-ul .e-menu-item:focus-visible {
36488
- background-color: var(--color-sf-content-bg-color);
36497
+ background-color: var(--color-sf-flyout-bg-color-focus);
36489
36498
  box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
36490
36499
  border-radius: 4px;
36491
36500
  }
package/Compiled-Themes/fluent2-lite.css CHANGED
@@ -26991,6 +26991,15 @@ ejs-sidebar {
26991
26991
  .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
26992
26992
  color: var(--color-sf-icon-color-pressed);
26993
26993
  }
26994
+ .e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible,
26995
+ .e-menu-container .e-menu .e-menu-item.e-focused:focus-visible {
26996
+ color: var(--color-sf-content-text-color);
26997
+ }
26998
+ .e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible .e-menu-icon,
26999
+ .e-menu-container .e-menu .e-menu-item.e-focused:focus-visible .e-caret,
27000
+ .e-menu-container .e-menu .e-menu-item.e-focused:focus-visible .e-menu-icon {
27001
+ color: var(--color-sf-icon-color);
27002
+ }
26994
27003
  .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
26995
27004
  .e-menu-container .e-menu .e-menu-item.e-selected,
26996
27005
  .e-menu-container .e-menu .e-menu-item.e-active-item {
@@ -27014,8 +27023,8 @@ ejs-sidebar {
27014
27023
  .e-menu-container .e-menu .e-menu-item.e-separator {
27015
27024
  border-bottom-color: var(--color-sf-border-light);
27016
27025
  }
27017
- .e-menu-wrapper .e-menu .e-menu-item:focus-visible,
27018
- .e-menu-container .e-menu .e-menu-item:focus-visible {
27026
+ .e-menu-wrapper .e-menu .e-menu-item:focus-visible:not(.e-selected),
27027
+ .e-menu-container .e-menu .e-menu-item:focus-visible:not(.e-selected) {
27019
27028
  border-radius: 4px;
27020
27029
  background-color: var(--color-sf-content-bg-color);
27021
27030
  box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
@@ -27081,7 +27090,7 @@ ejs-sidebar {
27081
27090
  }
27082
27091
  .e-menu-wrapper .e-ul .e-menu-item:focus-visible,
27083
27092
  .e-menu-container .e-ul .e-menu-item:focus-visible {
27084
- background-color: var(--color-sf-content-bg-color);
27093
+ background-color: var(--color-sf-flyout-bg-color-focus);
27085
27094
  box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
27086
27095
  border-radius: 4px;
27087
27096
  }
package/Compiled-Themes/fluent2.css CHANGED
@@ -37095,6 +37095,15 @@ ejs-sidebar {
37095
37095
  .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
37096
37096
  color: var(--color-sf-icon-color-pressed);
37097
37097
  }
37098
+ .e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible,
37099
+ .e-menu-container .e-menu .e-menu-item.e-focused:focus-visible {
37100
+ color: var(--color-sf-content-text-color);
37101
+ }
37102
+ .e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-focused:focus-visible .e-menu-icon,
37103
+ .e-menu-container .e-menu .e-menu-item.e-focused:focus-visible .e-caret,
37104
+ .e-menu-container .e-menu .e-menu-item.e-focused:focus-visible .e-menu-icon {
37105
+ color: var(--color-sf-icon-color);
37106
+ }
37098
37107
  .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
37099
37108
  .e-menu-container .e-menu .e-menu-item.e-selected,
37100
37109
  .e-menu-container .e-menu .e-menu-item.e-active-item {
@@ -37118,8 +37127,8 @@ ejs-sidebar {
37118
37127
  .e-menu-container .e-menu .e-menu-item.e-separator {
37119
37128
  border-bottom-color: var(--color-sf-border-light);
37120
37129
  }
37121
- .e-menu-wrapper .e-menu .e-menu-item:focus-visible,
37122
- .e-menu-container .e-menu .e-menu-item:focus-visible {
37130
+ .e-menu-wrapper .e-menu .e-menu-item:focus-visible:not(.e-selected),
37131
+ .e-menu-container .e-menu .e-menu-item:focus-visible:not(.e-selected) {
37123
37132
  border-radius: 4px;
37124
37133
  background-color: var(--color-sf-content-bg-color);
37125
37134
  box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
@@ -37185,7 +37194,7 @@ ejs-sidebar {
37185
37194
  }
37186
37195
  .e-menu-wrapper .e-ul .e-menu-item:focus-visible,
37187
37196
  .e-menu-container .e-ul .e-menu-item:focus-visible {
37188
- background-color: var(--color-sf-content-bg-color);
37197
+ background-color: var(--color-sf-flyout-bg-color-focus);
37189
37198
  box-shadow: inset 0 0 0 1px var(--color-sf-shadow-color), inset 0 0 0 2px var(--color-sf-shadow-color1);
37190
37199
  border-radius: 4px;
37191
37200
  }
package/SCSS-Themes/bds-dark-lite.scss CHANGED
@@ -46238,6 +46238,13 @@ $menu-caret-color: $cmenu-caret-color !default;
46238
46238
  }
46239
46239
  @if $skin-name == 'fluent2' {
46240
46240
  border-radius: 4px;
46241
+ &:focus-visible {
46242
+ color: $content-text-color;
46243
+ & .e-caret,
46244
+ & .e-menu-icon {
46245
+ color: $icon-color;
46246
+ }
46247
+ }
46241
46248
  }
46242
46249
  }
46243
46250
  }
@@ -46288,9 +46295,11 @@ $menu-caret-color: $cmenu-caret-color !default;
46288
46295
 
46289
46296
  &:focus-visible {
46290
46297
  @if $skin-name == 'fluent2' {
46291
- border-radius: 4px;
46292
- background-color: $content-bg-color;
46293
- box-shadow: $shadow-focus-ring1;
46298
+ &:not(.e-selected) {
46299
+ border-radius: 4px;
46300
+ background-color: $content-bg-color;
46301
+ box-shadow: $shadow-focus-ring1;
46302
+ }
46294
46303
  }
46295
46304
  @if $skin-name == 'tailwind3' {
46296
46305
  box-shadow: $shadow-focus-ring2;
@@ -46381,7 +46390,7 @@ $menu-caret-color: $cmenu-caret-color !default;
46381
46390
 
46382
46391
  &:focus-visible {
46383
46392
  @if $skin-name == 'fluent2' {
46384
- background-color: $content-bg-color;
46393
+ background-color: $flyout-bg-color-focus;
46385
46394
  box-shadow: $shadow-focus-ring1;
46386
46395
  border-radius: 4px;
46387
46396
  }
package/SCSS-Themes/bds-dark.scss CHANGED
@@ -62487,6 +62487,13 @@ $menu-caret-color: $cmenu-caret-color !default;
62487
62487
  }
62488
62488
  @if $skin-name == 'fluent2' {
62489
62489
  border-radius: 4px;
62490
+ &:focus-visible {
62491
+ color: $content-text-color;
62492
+ & .e-caret,
62493
+ & .e-menu-icon {
62494
+ color: $icon-color;
62495
+ }
62496
+ }
62490
62497
  }
62491
62498
  }
62492
62499
  }
@@ -62537,9 +62544,11 @@ $menu-caret-color: $cmenu-caret-color !default;
62537
62544
 
62538
62545
  &:focus-visible {
62539
62546
  @if $skin-name == 'fluent2' {
62540
- border-radius: 4px;
62541
- background-color: $content-bg-color;
62542
- box-shadow: $shadow-focus-ring1;
62547
+ &:not(.e-selected) {
62548
+ border-radius: 4px;
62549
+ background-color: $content-bg-color;
62550
+ box-shadow: $shadow-focus-ring1;
62551
+ }
62543
62552
  }
62544
62553
  @if $skin-name == 'tailwind3' {
62545
62554
  box-shadow: $shadow-focus-ring2;
@@ -62630,7 +62639,7 @@ $menu-caret-color: $cmenu-caret-color !default;
62630
62639
 
62631
62640
  &:focus-visible {
62632
62641
  @if $skin-name == 'fluent2' {
62633
- background-color: $content-bg-color;
62642
+ background-color: $flyout-bg-color-focus;
62634
62643
  box-shadow: $shadow-focus-ring1;
62635
62644
  border-radius: 4px;
62636
62645
  }
package/SCSS-Themes/bds-lite.scss CHANGED
@@ -46533,6 +46533,13 @@ $menu-caret-color: $cmenu-caret-color !default;
46533
46533
  }
46534
46534
  @if $skin-name == 'fluent2' {
46535
46535
  border-radius: 4px;
46536
+ &:focus-visible {
46537
+ color: $content-text-color;
46538
+ & .e-caret,
46539
+ & .e-menu-icon {
46540
+ color: $icon-color;
46541
+ }
46542
+ }
46536
46543
  }
46537
46544
  }
46538
46545
  }
@@ -46583,9 +46590,11 @@ $menu-caret-color: $cmenu-caret-color !default;
46583
46590
 
46584
46591
  &:focus-visible {
46585
46592
  @if $skin-name == 'fluent2' {
46586
- border-radius: 4px;
46587
- background-color: $content-bg-color;
46588
- box-shadow: $shadow-focus-ring1;
46593
+ &:not(.e-selected) {
46594
+ border-radius: 4px;
46595
+ background-color: $content-bg-color;
46596
+ box-shadow: $shadow-focus-ring1;
46597
+ }
46589
46598
  }
46590
46599
  @if $skin-name == 'tailwind3' {
46591
46600
  box-shadow: $shadow-focus-ring2;
@@ -46676,7 +46685,7 @@ $menu-caret-color: $cmenu-caret-color !default;
46676
46685
 
46677
46686
  &:focus-visible {
46678
46687
  @if $skin-name == 'fluent2' {
46679
- background-color: $content-bg-color;
46688
+ background-color: $flyout-bg-color-focus;
46680
46689
  box-shadow: $shadow-focus-ring1;
46681
46690
  border-radius: 4px;
46682
46691
  }
package/SCSS-Themes/bds.scss CHANGED
@@ -62782,6 +62782,13 @@ $menu-caret-color: $cmenu-caret-color !default;
62782
62782
  }
62783
62783
  @if $skin-name == 'fluent2' {
62784
62784
  border-radius: 4px;
62785
+ &:focus-visible {
62786
+ color: $content-text-color;
62787
+ & .e-caret,
62788
+ & .e-menu-icon {
62789
+ color: $icon-color;
62790
+ }
62791
+ }
62785
62792
  }
62786
62793
  }
62787
62794
  }
@@ -62832,9 +62839,11 @@ $menu-caret-color: $cmenu-caret-color !default;
62832
62839
 
62833
62840
  &:focus-visible {
62834
62841
  @if $skin-name == 'fluent2' {
62835
- border-radius: 4px;
62836
- background-color: $content-bg-color;
62837
- box-shadow: $shadow-focus-ring1;
62842
+ &:not(.e-selected) {
62843
+ border-radius: 4px;
62844
+ background-color: $content-bg-color;
62845
+ box-shadow: $shadow-focus-ring1;
62846
+ }
62838
62847
  }
62839
62848
  @if $skin-name == 'tailwind3' {
62840
62849
  box-shadow: $shadow-focus-ring2;
@@ -62925,7 +62934,7 @@ $menu-caret-color: $cmenu-caret-color !default;
62925
62934
 
62926
62935
  &:focus-visible {
62927
62936
  @if $skin-name == 'fluent2' {
62928
- background-color: $content-bg-color;
62937
+ background-color: $flyout-bg-color-focus;
62929
62938
  box-shadow: $shadow-focus-ring1;
62930
62939
  border-radius: 4px;
62931
62940
  }
package/SCSS-Themes/bootstrap-dark-lite.scss CHANGED
@@ -44855,6 +44855,13 @@ $menu-header-icon-padding: 0 16px !default;
44855
44855
  }
44856
44856
  @if $skin-name == 'fluent2' {
44857
44857
  border-radius: 4px;
44858
+ &:focus-visible {
44859
+ color: $content-text-color;
44860
+ & .e-caret,
44861
+ & .e-menu-icon {
44862
+ color: $icon-color;
44863
+ }
44864
+ }
44858
44865
  }
44859
44866
  }
44860
44867
  }
@@ -44905,9 +44912,11 @@ $menu-header-icon-padding: 0 16px !default;
44905
44912
 
44906
44913
  &:focus-visible {
44907
44914
  @if $skin-name == 'fluent2' {
44908
- border-radius: 4px;
44909
- background-color: $content-bg-color;
44910
- box-shadow: $shadow-focus-ring1;
44915
+ &:not(.e-selected) {
44916
+ border-radius: 4px;
44917
+ background-color: $content-bg-color;
44918
+ box-shadow: $shadow-focus-ring1;
44919
+ }
44911
44920
  }
44912
44921
  @if $skin-name == 'tailwind3' {
44913
44922
  box-shadow: $shadow-focus-ring2;
@@ -44998,7 +45007,7 @@ $menu-header-icon-padding: 0 16px !default;
44998
45007
 
44999
45008
  &:focus-visible {
45000
45009
  @if $skin-name == 'fluent2' {
45001
- background-color: $content-bg-color;
45010
+ background-color: $flyout-bg-color-focus;
45002
45011
  box-shadow: $shadow-focus-ring1;
45003
45012
  border-radius: 4px;
45004
45013
  }
package/SCSS-Themes/bootstrap-dark.scss CHANGED
@@ -61104,6 +61104,13 @@ $menu-header-icon-padding: 0 16px !default;
61104
61104
  }
61105
61105
  @if $skin-name == 'fluent2' {
61106
61106
  border-radius: 4px;
61107
+ &:focus-visible {
61108
+ color: $content-text-color;
61109
+ & .e-caret,
61110
+ & .e-menu-icon {
61111
+ color: $icon-color;
61112
+ }
61113
+ }
61107
61114
  }
61108
61115
  }
61109
61116
  }
@@ -61154,9 +61161,11 @@ $menu-header-icon-padding: 0 16px !default;
61154
61161
 
61155
61162
  &:focus-visible {
61156
61163
  @if $skin-name == 'fluent2' {
61157
- border-radius: 4px;
61158
- background-color: $content-bg-color;
61159
- box-shadow: $shadow-focus-ring1;
61164
+ &:not(.e-selected) {
61165
+ border-radius: 4px;
61166
+ background-color: $content-bg-color;
61167
+ box-shadow: $shadow-focus-ring1;
61168
+ }
61160
61169
  }
61161
61170
  @if $skin-name == 'tailwind3' {
61162
61171
  box-shadow: $shadow-focus-ring2;
@@ -61247,7 +61256,7 @@ $menu-header-icon-padding: 0 16px !default;
61247
61256
 
61248
61257
  &:focus-visible {
61249
61258
  @if $skin-name == 'fluent2' {
61250
- background-color: $content-bg-color;
61259
+ background-color: $flyout-bg-color-focus;
61251
61260
  box-shadow: $shadow-focus-ring1;
61252
61261
  border-radius: 4px;
61253
61262
  }
package/SCSS-Themes/bootstrap-lite.scss CHANGED
@@ -44629,6 +44629,13 @@ $menu-header-icon-padding: 0 16px !default;
44629
44629
  }
44630
44630
  @if $skin-name == 'fluent2' {
44631
44631
  border-radius: 4px;
44632
+ &:focus-visible {
44633
+ color: $content-text-color;
44634
+ & .e-caret,
44635
+ & .e-menu-icon {
44636
+ color: $icon-color;
44637
+ }
44638
+ }
44632
44639
  }
44633
44640
  }
44634
44641
  }
@@ -44679,9 +44686,11 @@ $menu-header-icon-padding: 0 16px !default;
44679
44686
 
44680
44687
  &:focus-visible {
44681
44688
  @if $skin-name == 'fluent2' {
44682
- border-radius: 4px;
44683
- background-color: $content-bg-color;
44684
- box-shadow: $shadow-focus-ring1;
44689
+ &:not(.e-selected) {
44690
+ border-radius: 4px;
44691
+ background-color: $content-bg-color;
44692
+ box-shadow: $shadow-focus-ring1;
44693
+ }
44685
44694
  }
44686
44695
  @if $skin-name == 'tailwind3' {
44687
44696
  box-shadow: $shadow-focus-ring2;
@@ -44772,7 +44781,7 @@ $menu-header-icon-padding: 0 16px !default;
44772
44781
 
44773
44782
  &:focus-visible {
44774
44783
  @if $skin-name == 'fluent2' {
44775
- background-color: $content-bg-color;
44784
+ background-color: $flyout-bg-color-focus;
44776
44785
  box-shadow: $shadow-focus-ring1;
44777
44786
  border-radius: 4px;
44778
44787
  }
package/SCSS-Themes/bootstrap.scss CHANGED
@@ -60878,6 +60878,13 @@ $menu-header-icon-padding: 0 16px !default;
60878
60878
  }
60879
60879
  @if $skin-name == 'fluent2' {
60880
60880
  border-radius: 4px;
60881
+ &:focus-visible {
60882
+ color: $content-text-color;
60883
+ & .e-caret,
60884
+ & .e-menu-icon {
60885
+ color: $icon-color;
60886
+ }
60887
+ }
60881
60888
  }
60882
60889
  }
60883
60890
  }
@@ -60928,9 +60935,11 @@ $menu-header-icon-padding: 0 16px !default;
60928
60935
 
60929
60936
  &:focus-visible {
60930
60937
  @if $skin-name == 'fluent2' {
60931
- border-radius: 4px;
60932
- background-color: $content-bg-color;
60933
- box-shadow: $shadow-focus-ring1;
60938
+ &:not(.e-selected) {
60939
+ border-radius: 4px;
60940
+ background-color: $content-bg-color;
60941
+ box-shadow: $shadow-focus-ring1;
60942
+ }
60934
60943
  }
60935
60944
  @if $skin-name == 'tailwind3' {
60936
60945
  box-shadow: $shadow-focus-ring2;
@@ -61021,7 +61030,7 @@ $menu-header-icon-padding: 0 16px !default;
61021
61030
 
61022
61031
  &:focus-visible {
61023
61032
  @if $skin-name == 'fluent2' {
61024
- background-color: $content-bg-color;
61033
+ background-color: $flyout-bg-color-focus;
61025
61034
  box-shadow: $shadow-focus-ring1;
61026
61035
  border-radius: 4px;
61027
61036
  }
package/SCSS-Themes/bootstrap4-lite.scss CHANGED
@@ -44636,6 +44636,13 @@ $menu-header-icon-padding: 0 16px !default;
44636
44636
  }
44637
44637
  @if $skin-name == 'fluent2' {
44638
44638
  border-radius: 4px;
44639
+ &:focus-visible {
44640
+ color: $content-text-color;
44641
+ & .e-caret,
44642
+ & .e-menu-icon {
44643
+ color: $icon-color;
44644
+ }
44645
+ }
44639
44646
  }
44640
44647
  }
44641
44648
  }
@@ -44686,9 +44693,11 @@ $menu-header-icon-padding: 0 16px !default;
44686
44693
 
44687
44694
  &:focus-visible {
44688
44695
  @if $skin-name == 'fluent2' {
44689
- border-radius: 4px;
44690
- background-color: $content-bg-color;
44691
- box-shadow: $shadow-focus-ring1;
44696
+ &:not(.e-selected) {
44697
+ border-radius: 4px;
44698
+ background-color: $content-bg-color;
44699
+ box-shadow: $shadow-focus-ring1;
44700
+ }
44692
44701
  }
44693
44702
  @if $skin-name == 'tailwind3' {
44694
44703
  box-shadow: $shadow-focus-ring2;
@@ -44779,7 +44788,7 @@ $menu-header-icon-padding: 0 16px !default;
44779
44788
 
44780
44789
  &:focus-visible {
44781
44790
  @if $skin-name == 'fluent2' {
44782
- background-color: $content-bg-color;
44791
+ background-color: $flyout-bg-color-focus;
44783
44792
  box-shadow: $shadow-focus-ring1;
44784
44793
  border-radius: 4px;
44785
44794
  }
package/SCSS-Themes/bootstrap4.scss CHANGED
@@ -60885,6 +60885,13 @@ $menu-header-icon-padding: 0 16px !default;
60885
60885
  }
60886
60886
  @if $skin-name == 'fluent2' {
60887
60887
  border-radius: 4px;
60888
+ &:focus-visible {
60889
+ color: $content-text-color;
60890
+ & .e-caret,
60891
+ & .e-menu-icon {
60892
+ color: $icon-color;
60893
+ }
60894
+ }
60888
60895
  }
60889
60896
  }
60890
60897
  }
@@ -60935,9 +60942,11 @@ $menu-header-icon-padding: 0 16px !default;
60935
60942
 
60936
60943
  &:focus-visible {
60937
60944
  @if $skin-name == 'fluent2' {
60938
- border-radius: 4px;
60939
- background-color: $content-bg-color;
60940
- box-shadow: $shadow-focus-ring1;
60945
+ &:not(.e-selected) {
60946
+ border-radius: 4px;
60947
+ background-color: $content-bg-color;
60948
+ box-shadow: $shadow-focus-ring1;
60949
+ }
60941
60950
  }
60942
60951
  @if $skin-name == 'tailwind3' {
60943
60952
  box-shadow: $shadow-focus-ring2;
@@ -61028,7 +61037,7 @@ $menu-header-icon-padding: 0 16px !default;
61028
61037
 
61029
61038
  &:focus-visible {
61030
61039
  @if $skin-name == 'fluent2' {
61031
- background-color: $content-bg-color;
61040
+ background-color: $flyout-bg-color-focus;
61032
61041
  box-shadow: $shadow-focus-ring1;
61033
61042
  border-radius: 4px;
61034
61043
  }
package/SCSS-Themes/bootstrap5-dark-lite.scss CHANGED
@@ -44967,6 +44967,13 @@ $menu-caret-color: $cmenu-caret-color !default;
44967
44967
  }
44968
44968
  @if $skin-name == 'fluent2' {
44969
44969
  border-radius: 4px;
44970
+ &:focus-visible {
44971
+ color: $content-text-color;
44972
+ & .e-caret,
44973
+ & .e-menu-icon {
44974
+ color: $icon-color;
44975
+ }
44976
+ }
44970
44977
  }
44971
44978
  }
44972
44979
  }
@@ -45017,9 +45024,11 @@ $menu-caret-color: $cmenu-caret-color !default;
45017
45024
 
45018
45025
  &:focus-visible {
45019
45026
  @if $skin-name == 'fluent2' {
45020
- border-radius: 4px;
45021
- background-color: $content-bg-color;
45022
- box-shadow: $shadow-focus-ring1;
45027
+ &:not(.e-selected) {
45028
+ border-radius: 4px;
45029
+ background-color: $content-bg-color;
45030
+ box-shadow: $shadow-focus-ring1;
45031
+ }
45023
45032
  }
45024
45033
  @if $skin-name == 'tailwind3' {
45025
45034
  box-shadow: $shadow-focus-ring2;
@@ -45110,7 +45119,7 @@ $menu-caret-color: $cmenu-caret-color !default;
45110
45119
 
45111
45120
  &:focus-visible {
45112
45121
  @if $skin-name == 'fluent2' {
45113
- background-color: $content-bg-color;
45122
+ background-color: $flyout-bg-color-focus;
45114
45123
  box-shadow: $shadow-focus-ring1;
45115
45124
  border-radius: 4px;
45116
45125
  }