@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/SCSS-Themes/fluent2-highcontrast-lite.scss CHANGED
@@ -46640,6 +46640,13 @@ $menu-bigger-li-icon-height: 55px !default;
46640
46640
  }
46641
46641
  @if $skin-name == 'fluent2' {
46642
46642
  border-radius: 4px;
46643
+ &:focus-visible {
46644
+ color: $content-text-color;
46645
+ & .e-caret,
46646
+ & .e-menu-icon {
46647
+ color: $icon-color;
46648
+ }
46649
+ }
46643
46650
  }
46644
46651
  }
46645
46652
  }
@@ -46690,9 +46697,11 @@ $menu-bigger-li-icon-height: 55px !default;
46690
46697
 
46691
46698
  &:focus-visible {
46692
46699
  @if $skin-name == 'fluent2' {
46693
- border-radius: 4px;
46694
- background-color: $content-bg-color;
46695
- box-shadow: $shadow-focus-ring1;
46700
+ &:not(.e-selected) {
46701
+ border-radius: 4px;
46702
+ background-color: $content-bg-color;
46703
+ box-shadow: $shadow-focus-ring1;
46704
+ }
46696
46705
  }
46697
46706
  @if $skin-name == 'tailwind3' {
46698
46707
  box-shadow: $shadow-focus-ring2;
@@ -46783,7 +46792,7 @@ $menu-bigger-li-icon-height: 55px !default;
46783
46792
 
46784
46793
  &:focus-visible {
46785
46794
  @if $skin-name == 'fluent2' {
46786
- background-color: $content-bg-color;
46795
+ background-color: $flyout-bg-color-focus;
46787
46796
  box-shadow: $shadow-focus-ring1;
46788
46797
  border-radius: 4px;
46789
46798
  }
package/SCSS-Themes/fluent2-highcontrast.scss CHANGED
@@ -62889,6 +62889,13 @@ $menu-bigger-li-icon-height: 55px !default;
62889
62889
  }
62890
62890
  @if $skin-name == 'fluent2' {
62891
62891
  border-radius: 4px;
62892
+ &:focus-visible {
62893
+ color: $content-text-color;
62894
+ & .e-caret,
62895
+ & .e-menu-icon {
62896
+ color: $icon-color;
62897
+ }
62898
+ }
62892
62899
  }
62893
62900
  }
62894
62901
  }
@@ -62939,9 +62946,11 @@ $menu-bigger-li-icon-height: 55px !default;
62939
62946
 
62940
62947
  &:focus-visible {
62941
62948
  @if $skin-name == 'fluent2' {
62942
- border-radius: 4px;
62943
- background-color: $content-bg-color;
62944
- box-shadow: $shadow-focus-ring1;
62949
+ &:not(.e-selected) {
62950
+ border-radius: 4px;
62951
+ background-color: $content-bg-color;
62952
+ box-shadow: $shadow-focus-ring1;
62953
+ }
62945
62954
  }
62946
62955
  @if $skin-name == 'tailwind3' {
62947
62956
  box-shadow: $shadow-focus-ring2;
@@ -63032,7 +63041,7 @@ $menu-bigger-li-icon-height: 55px !default;
63032
63041
 
63033
63042
  &:focus-visible {
63034
63043
  @if $skin-name == 'fluent2' {
63035
- background-color: $content-bg-color;
63044
+ background-color: $flyout-bg-color-focus;
63036
63045
  box-shadow: $shadow-focus-ring1;
63037
63046
  border-radius: 4px;
63038
63047
  }
package/SCSS-Themes/fluent2-lite.scss CHANGED
@@ -47412,6 +47412,13 @@ $menu-bigger-li-icon-height: 55px !default;
47412
47412
  }
47413
47413
  @if $skin-name == 'fluent2' {
47414
47414
  border-radius: 4px;
47415
+ &:focus-visible {
47416
+ color: $content-text-color;
47417
+ & .e-caret,
47418
+ & .e-menu-icon {
47419
+ color: $icon-color;
47420
+ }
47421
+ }
47415
47422
  }
47416
47423
  }
47417
47424
  }
@@ -47462,9 +47469,11 @@ $menu-bigger-li-icon-height: 55px !default;
47462
47469
 
47463
47470
  &:focus-visible {
47464
47471
  @if $skin-name == 'fluent2' {
47465
- border-radius: 4px;
47466
- background-color: $content-bg-color;
47467
- box-shadow: $shadow-focus-ring1;
47472
+ &:not(.e-selected) {
47473
+ border-radius: 4px;
47474
+ background-color: $content-bg-color;
47475
+ box-shadow: $shadow-focus-ring1;
47476
+ }
47468
47477
  }
47469
47478
  @if $skin-name == 'tailwind3' {
47470
47479
  box-shadow: $shadow-focus-ring2;
@@ -47555,7 +47564,7 @@ $menu-bigger-li-icon-height: 55px !default;
47555
47564
 
47556
47565
  &:focus-visible {
47557
47566
  @if $skin-name == 'fluent2' {
47558
- background-color: $content-bg-color;
47567
+ background-color: $flyout-bg-color-focus;
47559
47568
  box-shadow: $shadow-focus-ring1;
47560
47569
  border-radius: 4px;
47561
47570
  }
package/SCSS-Themes/fluent2.scss CHANGED
@@ -63661,6 +63661,13 @@ $menu-bigger-li-icon-height: 55px !default;
63661
63661
  }
63662
63662
  @if $skin-name == 'fluent2' {
63663
63663
  border-radius: 4px;
63664
+ &:focus-visible {
63665
+ color: $content-text-color;
63666
+ & .e-caret,
63667
+ & .e-menu-icon {
63668
+ color: $icon-color;
63669
+ }
63670
+ }
63664
63671
  }
63665
63672
  }
63666
63673
  }
@@ -63711,9 +63718,11 @@ $menu-bigger-li-icon-height: 55px !default;
63711
63718
 
63712
63719
  &:focus-visible {
63713
63720
  @if $skin-name == 'fluent2' {
63714
- border-radius: 4px;
63715
- background-color: $content-bg-color;
63716
- box-shadow: $shadow-focus-ring1;
63721
+ &:not(.e-selected) {
63722
+ border-radius: 4px;
63723
+ background-color: $content-bg-color;
63724
+ box-shadow: $shadow-focus-ring1;
63725
+ }
63717
63726
  }
63718
63727
  @if $skin-name == 'tailwind3' {
63719
63728
  box-shadow: $shadow-focus-ring2;
@@ -63804,7 +63813,7 @@ $menu-bigger-li-icon-height: 55px !default;
63804
63813
 
63805
63814
  &:focus-visible {
63806
63815
  @if $skin-name == 'fluent2' {
63807
- background-color: $content-bg-color;
63816
+ background-color: $flyout-bg-color-focus;
63808
63817
  box-shadow: $shadow-focus-ring1;
63809
63818
  border-radius: 4px;
63810
63819
  }
package/SCSS-Themes/highcontrast-lite.scss CHANGED
@@ -44677,6 +44677,13 @@ $menu-header-icon-padding: 0 16px !default;
44677
44677
  }
44678
44678
  @if $skin-name == 'fluent2' {
44679
44679
  border-radius: 4px;
44680
+ &:focus-visible {
44681
+ color: $content-text-color;
44682
+ & .e-caret,
44683
+ & .e-menu-icon {
44684
+ color: $icon-color;
44685
+ }
44686
+ }
44680
44687
  }
44681
44688
  }
44682
44689
  }
@@ -44727,9 +44734,11 @@ $menu-header-icon-padding: 0 16px !default;
44727
44734
 
44728
44735
  &:focus-visible {
44729
44736
  @if $skin-name == 'fluent2' {
44730
- border-radius: 4px;
44731
- background-color: $content-bg-color;
44732
- box-shadow: $shadow-focus-ring1;
44737
+ &:not(.e-selected) {
44738
+ border-radius: 4px;
44739
+ background-color: $content-bg-color;
44740
+ box-shadow: $shadow-focus-ring1;
44741
+ }
44733
44742
  }
44734
44743
  @if $skin-name == 'tailwind3' {
44735
44744
  box-shadow: $shadow-focus-ring2;
@@ -44820,7 +44829,7 @@ $menu-header-icon-padding: 0 16px !default;
44820
44829
 
44821
44830
  &:focus-visible {
44822
44831
  @if $skin-name == 'fluent2' {
44823
- background-color: $content-bg-color;
44832
+ background-color: $flyout-bg-color-focus;
44824
44833
  box-shadow: $shadow-focus-ring1;
44825
44834
  border-radius: 4px;
44826
44835
  }
package/SCSS-Themes/highcontrast.scss CHANGED
@@ -60926,6 +60926,13 @@ $menu-header-icon-padding: 0 16px !default;
60926
60926
  }
60927
60927
  @if $skin-name == 'fluent2' {
60928
60928
  border-radius: 4px;
60929
+ &:focus-visible {
60930
+ color: $content-text-color;
60931
+ & .e-caret,
60932
+ & .e-menu-icon {
60933
+ color: $icon-color;
60934
+ }
60935
+ }
60929
60936
  }
60930
60937
  }
60931
60938
  }
@@ -60976,9 +60983,11 @@ $menu-header-icon-padding: 0 16px !default;
60976
60983
 
60977
60984
  &:focus-visible {
60978
60985
  @if $skin-name == 'fluent2' {
60979
- border-radius: 4px;
60980
- background-color: $content-bg-color;
60981
- box-shadow: $shadow-focus-ring1;
60986
+ &:not(.e-selected) {
60987
+ border-radius: 4px;
60988
+ background-color: $content-bg-color;
60989
+ box-shadow: $shadow-focus-ring1;
60990
+ }
60982
60991
  }
60983
60992
  @if $skin-name == 'tailwind3' {
60984
60993
  box-shadow: $shadow-focus-ring2;
@@ -61069,7 +61078,7 @@ $menu-header-icon-padding: 0 16px !default;
61069
61078
 
61070
61079
  &:focus-visible {
61071
61080
  @if $skin-name == 'fluent2' {
61072
- background-color: $content-bg-color;
61081
+ background-color: $flyout-bg-color-focus;
61073
61082
  box-shadow: $shadow-focus-ring1;
61074
61083
  border-radius: 4px;
61075
61084
  }
package/SCSS-Themes/material-dark-lite.scss CHANGED
@@ -45309,6 +45309,13 @@ $menu-header-icon-padding: 0 16px !default;
45309
45309
  }
45310
45310
  @if $skin-name == 'fluent2' {
45311
45311
  border-radius: 4px;
45312
+ &:focus-visible {
45313
+ color: $content-text-color;
45314
+ & .e-caret,
45315
+ & .e-menu-icon {
45316
+ color: $icon-color;
45317
+ }
45318
+ }
45312
45319
  }
45313
45320
  }
45314
45321
  }
@@ -45359,9 +45366,11 @@ $menu-header-icon-padding: 0 16px !default;
45359
45366
 
45360
45367
  &:focus-visible {
45361
45368
  @if $skin-name == 'fluent2' {
45362
- border-radius: 4px;
45363
- background-color: $content-bg-color;
45364
- box-shadow: $shadow-focus-ring1;
45369
+ &:not(.e-selected) {
45370
+ border-radius: 4px;
45371
+ background-color: $content-bg-color;
45372
+ box-shadow: $shadow-focus-ring1;
45373
+ }
45365
45374
  }
45366
45375
  @if $skin-name == 'tailwind3' {
45367
45376
  box-shadow: $shadow-focus-ring2;
@@ -45452,7 +45461,7 @@ $menu-header-icon-padding: 0 16px !default;
45452
45461
 
45453
45462
  &:focus-visible {
45454
45463
  @if $skin-name == 'fluent2' {
45455
- background-color: $content-bg-color;
45464
+ background-color: $flyout-bg-color-focus;
45456
45465
  box-shadow: $shadow-focus-ring1;
45457
45466
  border-radius: 4px;
45458
45467
  }
package/SCSS-Themes/material-dark.scss CHANGED
@@ -61558,6 +61558,13 @@ $menu-header-icon-padding: 0 16px !default;
61558
61558
  }
61559
61559
  @if $skin-name == 'fluent2' {
61560
61560
  border-radius: 4px;
61561
+ &:focus-visible {
61562
+ color: $content-text-color;
61563
+ & .e-caret,
61564
+ & .e-menu-icon {
61565
+ color: $icon-color;
61566
+ }
61567
+ }
61561
61568
  }
61562
61569
  }
61563
61570
  }
@@ -61608,9 +61615,11 @@ $menu-header-icon-padding: 0 16px !default;
61608
61615
 
61609
61616
  &:focus-visible {
61610
61617
  @if $skin-name == 'fluent2' {
61611
- border-radius: 4px;
61612
- background-color: $content-bg-color;
61613
- box-shadow: $shadow-focus-ring1;
61618
+ &:not(.e-selected) {
61619
+ border-radius: 4px;
61620
+ background-color: $content-bg-color;
61621
+ box-shadow: $shadow-focus-ring1;
61622
+ }
61614
61623
  }
61615
61624
  @if $skin-name == 'tailwind3' {
61616
61625
  box-shadow: $shadow-focus-ring2;
@@ -61701,7 +61710,7 @@ $menu-header-icon-padding: 0 16px !default;
61701
61710
 
61702
61711
  &:focus-visible {
61703
61712
  @if $skin-name == 'fluent2' {
61704
- background-color: $content-bg-color;
61713
+ background-color: $flyout-bg-color-focus;
61705
61714
  box-shadow: $shadow-focus-ring1;
61706
61715
  border-radius: 4px;
61707
61716
  }
package/SCSS-Themes/material-lite.scss CHANGED
@@ -45053,6 +45053,13 @@ $menu-header-icon-padding: 0 16px !default;
45053
45053
  }
45054
45054
  @if $skin-name == 'fluent2' {
45055
45055
  border-radius: 4px;
45056
+ &:focus-visible {
45057
+ color: $content-text-color;
45058
+ & .e-caret,
45059
+ & .e-menu-icon {
45060
+ color: $icon-color;
45061
+ }
45062
+ }
45056
45063
  }
45057
45064
  }
45058
45065
  }
@@ -45103,9 +45110,11 @@ $menu-header-icon-padding: 0 16px !default;
45103
45110
 
45104
45111
  &:focus-visible {
45105
45112
  @if $skin-name == 'fluent2' {
45106
- border-radius: 4px;
45107
- background-color: $content-bg-color;
45108
- box-shadow: $shadow-focus-ring1;
45113
+ &:not(.e-selected) {
45114
+ border-radius: 4px;
45115
+ background-color: $content-bg-color;
45116
+ box-shadow: $shadow-focus-ring1;
45117
+ }
45109
45118
  }
45110
45119
  @if $skin-name == 'tailwind3' {
45111
45120
  box-shadow: $shadow-focus-ring2;
@@ -45196,7 +45205,7 @@ $menu-header-icon-padding: 0 16px !default;
45196
45205
 
45197
45206
  &:focus-visible {
45198
45207
  @if $skin-name == 'fluent2' {
45199
- background-color: $content-bg-color;
45208
+ background-color: $flyout-bg-color-focus;
45200
45209
  box-shadow: $shadow-focus-ring1;
45201
45210
  border-radius: 4px;
45202
45211
  }
package/SCSS-Themes/material.scss CHANGED
@@ -61302,6 +61302,13 @@ $menu-header-icon-padding: 0 16px !default;
61302
61302
  }
61303
61303
  @if $skin-name == 'fluent2' {
61304
61304
  border-radius: 4px;
61305
+ &:focus-visible {
61306
+ color: $content-text-color;
61307
+ & .e-caret,
61308
+ & .e-menu-icon {
61309
+ color: $icon-color;
61310
+ }
61311
+ }
61305
61312
  }
61306
61313
  }
61307
61314
  }
@@ -61352,9 +61359,11 @@ $menu-header-icon-padding: 0 16px !default;
61352
61359
 
61353
61360
  &:focus-visible {
61354
61361
  @if $skin-name == 'fluent2' {
61355
- border-radius: 4px;
61356
- background-color: $content-bg-color;
61357
- box-shadow: $shadow-focus-ring1;
61362
+ &:not(.e-selected) {
61363
+ border-radius: 4px;
61364
+ background-color: $content-bg-color;
61365
+ box-shadow: $shadow-focus-ring1;
61366
+ }
61358
61367
  }
61359
61368
  @if $skin-name == 'tailwind3' {
61360
61369
  box-shadow: $shadow-focus-ring2;
@@ -61445,7 +61454,7 @@ $menu-header-icon-padding: 0 16px !default;
61445
61454
 
61446
61455
  &:focus-visible {
61447
61456
  @if $skin-name == 'fluent2' {
61448
- background-color: $content-bg-color;
61457
+ background-color: $flyout-bg-color-focus;
61449
61458
  box-shadow: $shadow-focus-ring1;
61450
61459
  border-radius: 4px;
61451
61460
  }
package/SCSS-Themes/material3-dark-lite.scss CHANGED
@@ -45049,6 +45049,13 @@ $menu-caret-color: $cmenu-caret-color !default;
45049
45049
  }
45050
45050
  @if $skin-name == 'fluent2' {
45051
45051
  border-radius: 4px;
45052
+ &:focus-visible {
45053
+ color: $content-text-color;
45054
+ & .e-caret,
45055
+ & .e-menu-icon {
45056
+ color: $icon-color;
45057
+ }
45058
+ }
45052
45059
  }
45053
45060
  }
45054
45061
  }
@@ -45099,9 +45106,11 @@ $menu-caret-color: $cmenu-caret-color !default;
45099
45106
 
45100
45107
  &:focus-visible {
45101
45108
  @if $skin-name == 'fluent2' {
45102
- border-radius: 4px;
45103
- background-color: $content-bg-color;
45104
- box-shadow: $shadow-focus-ring1;
45109
+ &:not(.e-selected) {
45110
+ border-radius: 4px;
45111
+ background-color: $content-bg-color;
45112
+ box-shadow: $shadow-focus-ring1;
45113
+ }
45105
45114
  }
45106
45115
  @if $skin-name == 'tailwind3' {
45107
45116
  box-shadow: $shadow-focus-ring2;
@@ -45192,7 +45201,7 @@ $menu-caret-color: $cmenu-caret-color !default;
45192
45201
 
45193
45202
  &:focus-visible {
45194
45203
  @if $skin-name == 'fluent2' {
45195
- background-color: $content-bg-color;
45204
+ background-color: $flyout-bg-color-focus;
45196
45205
  box-shadow: $shadow-focus-ring1;
45197
45206
  border-radius: 4px;
45198
45207
  }
package/SCSS-Themes/material3-dark.scss CHANGED
@@ -61298,6 +61298,13 @@ $menu-caret-color: $cmenu-caret-color !default;
61298
61298
  }
61299
61299
  @if $skin-name == 'fluent2' {
61300
61300
  border-radius: 4px;
61301
+ &:focus-visible {
61302
+ color: $content-text-color;
61303
+ & .e-caret,
61304
+ & .e-menu-icon {
61305
+ color: $icon-color;
61306
+ }
61307
+ }
61301
61308
  }
61302
61309
  }
61303
61310
  }
@@ -61348,9 +61355,11 @@ $menu-caret-color: $cmenu-caret-color !default;
61348
61355
 
61349
61356
  &:focus-visible {
61350
61357
  @if $skin-name == 'fluent2' {
61351
- border-radius: 4px;
61352
- background-color: $content-bg-color;
61353
- box-shadow: $shadow-focus-ring1;
61358
+ &:not(.e-selected) {
61359
+ border-radius: 4px;
61360
+ background-color: $content-bg-color;
61361
+ box-shadow: $shadow-focus-ring1;
61362
+ }
61354
61363
  }
61355
61364
  @if $skin-name == 'tailwind3' {
61356
61365
  box-shadow: $shadow-focus-ring2;
@@ -61441,7 +61450,7 @@ $menu-caret-color: $cmenu-caret-color !default;
61441
61450
 
61442
61451
  &:focus-visible {
61443
61452
  @if $skin-name == 'fluent2' {
61444
- background-color: $content-bg-color;
61453
+ background-color: $flyout-bg-color-focus;
61445
61454
  box-shadow: $shadow-focus-ring1;
61446
61455
  border-radius: 4px;
61447
61456
  }
package/SCSS-Themes/material3-lite.scss CHANGED
@@ -45119,6 +45119,13 @@ $menu-caret-color: $cmenu-caret-color !default;
45119
45119
  }
45120
45120
  @if $skin-name == 'fluent2' {
45121
45121
  border-radius: 4px;
45122
+ &:focus-visible {
45123
+ color: $content-text-color;
45124
+ & .e-caret,
45125
+ & .e-menu-icon {
45126
+ color: $icon-color;
45127
+ }
45128
+ }
45122
45129
  }
45123
45130
  }
45124
45131
  }
@@ -45169,9 +45176,11 @@ $menu-caret-color: $cmenu-caret-color !default;
45169
45176
 
45170
45177
  &:focus-visible {
45171
45178
  @if $skin-name == 'fluent2' {
45172
- border-radius: 4px;
45173
- background-color: $content-bg-color;
45174
- box-shadow: $shadow-focus-ring1;
45179
+ &:not(.e-selected) {
45180
+ border-radius: 4px;
45181
+ background-color: $content-bg-color;
45182
+ box-shadow: $shadow-focus-ring1;
45183
+ }
45175
45184
  }
45176
45185
  @if $skin-name == 'tailwind3' {
45177
45186
  box-shadow: $shadow-focus-ring2;
@@ -45262,7 +45271,7 @@ $menu-caret-color: $cmenu-caret-color !default;
45262
45271
 
45263
45272
  &:focus-visible {
45264
45273
  @if $skin-name == 'fluent2' {
45265
- background-color: $content-bg-color;
45274
+ background-color: $flyout-bg-color-focus;
45266
45275
  box-shadow: $shadow-focus-ring1;
45267
45276
  border-radius: 4px;
45268
45277
  }
package/SCSS-Themes/material3.scss CHANGED
@@ -61368,6 +61368,13 @@ $menu-caret-color: $cmenu-caret-color !default;
61368
61368
  }
61369
61369
  @if $skin-name == 'fluent2' {
61370
61370
  border-radius: 4px;
61371
+ &:focus-visible {
61372
+ color: $content-text-color;
61373
+ & .e-caret,
61374
+ & .e-menu-icon {
61375
+ color: $icon-color;
61376
+ }
61377
+ }
61371
61378
  }
61372
61379
  }
61373
61380
  }
@@ -61418,9 +61425,11 @@ $menu-caret-color: $cmenu-caret-color !default;
61418
61425
 
61419
61426
  &:focus-visible {
61420
61427
  @if $skin-name == 'fluent2' {
61421
- border-radius: 4px;
61422
- background-color: $content-bg-color;
61423
- box-shadow: $shadow-focus-ring1;
61428
+ &:not(.e-selected) {
61429
+ border-radius: 4px;
61430
+ background-color: $content-bg-color;
61431
+ box-shadow: $shadow-focus-ring1;
61432
+ }
61424
61433
  }
61425
61434
  @if $skin-name == 'tailwind3' {
61426
61435
  box-shadow: $shadow-focus-ring2;
@@ -61511,7 +61520,7 @@ $menu-caret-color: $cmenu-caret-color !default;
61511
61520
 
61512
61521
  &:focus-visible {
61513
61522
  @if $skin-name == 'fluent2' {
61514
- background-color: $content-bg-color;
61523
+ background-color: $flyout-bg-color-focus;
61515
61524
  box-shadow: $shadow-focus-ring1;
61516
61525
  border-radius: 4px;
61517
61526
  }
package/SCSS-Themes/navigations/menu/bds-dark-lite.scss CHANGED
@@ -646,6 +646,13 @@ $menu-caret-color: $cmenu-caret-color !default;
646
646
  }
647
647
  @if $skin-name == 'fluent2' {
648
648
  border-radius: 4px;
649
+ &:focus-visible {
650
+ color: $content-text-color;
651
+ & .e-caret,
652
+ & .e-menu-icon {
653
+ color: $icon-color;
654
+ }
655
+ }
649
656
  }
650
657
  }
651
658
  }
@@ -696,9 +703,11 @@ $menu-caret-color: $cmenu-caret-color !default;
696
703
 
697
704
  &:focus-visible {
698
705
  @if $skin-name == 'fluent2' {
699
- border-radius: 4px;
700
- background-color: $content-bg-color;
701
- box-shadow: $shadow-focus-ring1;
706
+ &:not(.e-selected) {
707
+ border-radius: 4px;
708
+ background-color: $content-bg-color;
709
+ box-shadow: $shadow-focus-ring1;
710
+ }
702
711
  }
703
712
  @if $skin-name == 'tailwind3' {
704
713
  box-shadow: $shadow-focus-ring2;
@@ -789,7 +798,7 @@ $menu-caret-color: $cmenu-caret-color !default;
789
798
 
790
799
  &:focus-visible {
791
800
  @if $skin-name == 'fluent2' {
792
- background-color: $content-bg-color;
801
+ background-color: $flyout-bg-color-focus;
793
802
  box-shadow: $shadow-focus-ring1;
794
803
  border-radius: 4px;
795
804
  }
package/SCSS-Themes/navigations/menu/bds-dark.scss CHANGED
@@ -646,6 +646,13 @@ $menu-caret-color: $cmenu-caret-color !default;
646
646
  }
647
647
  @if $skin-name == 'fluent2' {
648
648
  border-radius: 4px;
649
+ &:focus-visible {
650
+ color: $content-text-color;
651
+ & .e-caret,
652
+ & .e-menu-icon {
653
+ color: $icon-color;
654
+ }
655
+ }
649
656
  }
650
657
  }
651
658
  }
@@ -696,9 +703,11 @@ $menu-caret-color: $cmenu-caret-color !default;
696
703
 
697
704
  &:focus-visible {
698
705
  @if $skin-name == 'fluent2' {
699
- border-radius: 4px;
700
- background-color: $content-bg-color;
701
- box-shadow: $shadow-focus-ring1;
706
+ &:not(.e-selected) {
707
+ border-radius: 4px;
708
+ background-color: $content-bg-color;
709
+ box-shadow: $shadow-focus-ring1;
710
+ }
702
711
  }
703
712
  @if $skin-name == 'tailwind3' {
704
713
  box-shadow: $shadow-focus-ring2;
@@ -789,7 +798,7 @@ $menu-caret-color: $cmenu-caret-color !default;
789
798
 
790
799
  &:focus-visible {
791
800
  @if $skin-name == 'fluent2' {
792
- background-color: $content-bg-color;
801
+ background-color: $flyout-bg-color-focus;
793
802
  box-shadow: $shadow-focus-ring1;
794
803
  border-radius: 4px;
795
804
  }
package/SCSS-Themes/navigations/menu/bds-lite.scss CHANGED
@@ -646,6 +646,13 @@ $menu-caret-color: $cmenu-caret-color !default;
646
646
  }
647
647
  @if $skin-name == 'fluent2' {
648
648
  border-radius: 4px;
649
+ &:focus-visible {
650
+ color: $content-text-color;
651
+ & .e-caret,
652
+ & .e-menu-icon {
653
+ color: $icon-color;
654
+ }
655
+ }
649
656
  }
650
657
  }
651
658
  }
@@ -696,9 +703,11 @@ $menu-caret-color: $cmenu-caret-color !default;
696
703
 
697
704
  &:focus-visible {
698
705
  @if $skin-name == 'fluent2' {
699
- border-radius: 4px;
700
- background-color: $content-bg-color;
701
- box-shadow: $shadow-focus-ring1;
706
+ &:not(.e-selected) {
707
+ border-radius: 4px;
708
+ background-color: $content-bg-color;
709
+ box-shadow: $shadow-focus-ring1;
710
+ }
702
711
  }
703
712
  @if $skin-name == 'tailwind3' {
704
713
  box-shadow: $shadow-focus-ring2;
@@ -789,7 +798,7 @@ $menu-caret-color: $cmenu-caret-color !default;
789
798
 
790
799
  &:focus-visible {
791
800
  @if $skin-name == 'fluent2' {
792
- background-color: $content-bg-color;
801
+ background-color: $flyout-bg-color-focus;
793
802
  box-shadow: $shadow-focus-ring1;
794
803
  border-radius: 4px;
795
804
  }