@syncfusion/ej2-navigations 19.3.53 → 19.4.38

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 (256) hide show
  1. package/.github/PULL_REQUEST_TEMPLATE/Bug.md +63 -0
  2. package/.github/PULL_REQUEST_TEMPLATE/feature.md +39 -0
  3. package/CHANGELOG.md +56 -0
  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 +528 -150
  7. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  8. package/dist/es6/ej2-navigations.es5.js +535 -151
  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 +11 -11
  14. package/src/accordion/accordion-model.d.ts +5 -5
  15. package/src/accordion/accordion.d.ts +5 -5
  16. package/src/accordion/accordion.js +2 -19
  17. package/src/breadcrumb/breadcrumb-model.d.ts +23 -11
  18. package/src/breadcrumb/breadcrumb.d.ts +33 -10
  19. package/src/breadcrumb/breadcrumb.js +320 -78
  20. package/src/common/menu-base.js +2 -2
  21. package/src/common/v-scroll.js +1 -1
  22. package/src/sidebar/sidebar.js +4 -4
  23. package/src/tab/tab-model.d.ts +14 -6
  24. package/src/tab/tab.d.ts +26 -15
  25. package/src/tab/tab.js +59 -30
  26. package/src/toolbar/toolbar-model.d.ts +7 -7
  27. package/src/toolbar/toolbar.d.ts +6 -6
  28. package/src/toolbar/toolbar.js +81 -13
  29. package/src/treeview/treeview-model.d.ts +10 -0
  30. package/src/treeview/treeview.d.ts +13 -0
  31. package/src/treeview/treeview.js +68 -5
  32. package/styles/accordion/_bootstrap-dark-definition.scss +4 -0
  33. package/styles/accordion/_bootstrap-definition.scss +4 -0
  34. package/styles/accordion/_bootstrap4-definition.scss +4 -0
  35. package/styles/accordion/_bootstrap5-definition.scss +39 -35
  36. package/styles/accordion/_fabric-dark-definition.scss +4 -0
  37. package/styles/accordion/_fabric-definition.scss +4 -0
  38. package/styles/accordion/_fluent-definition.scss +85 -0
  39. package/styles/accordion/_highcontrast-definition.scss +5 -1
  40. package/styles/accordion/_highcontrast-light-definition.scss +4 -0
  41. package/styles/accordion/_layout.scss +6 -14
  42. package/styles/accordion/_material-dark-definition.scss +4 -0
  43. package/styles/accordion/_material-definition.scss +4 -0
  44. package/styles/accordion/_tailwind-definition.scss +83 -79
  45. package/styles/accordion/_theme.scss +12 -11
  46. package/styles/accordion/bootstrap4.css +1 -2
  47. package/styles/accordion/bootstrap5-dark.css +11 -2
  48. package/styles/accordion/bootstrap5.css +11 -2
  49. package/styles/accordion/highcontrast-light.css +0 -4
  50. package/styles/accordion/highcontrast.css +1 -5
  51. package/styles/accordion/icons/_fluent.scss +17 -0
  52. package/styles/accordion/icons/_tailwind.scss +17 -17
  53. package/styles/bootstrap-dark.css +317 -84
  54. package/styles/bootstrap.css +316 -83
  55. package/styles/bootstrap4.css +317 -76
  56. package/styles/bootstrap5-dark.css +340 -76
  57. package/styles/bootstrap5.css +342 -78
  58. package/styles/breadcrumb/_bootstrap-dark-definition.scss +14 -0
  59. package/styles/breadcrumb/_bootstrap-definition.scss +13 -0
  60. package/styles/breadcrumb/_bootstrap4-definition.scss +13 -0
  61. package/styles/breadcrumb/_bootstrap5-definition.scss +15 -2
  62. package/styles/breadcrumb/_fabric-dark-definition.scss +13 -0
  63. package/styles/breadcrumb/_fabric-definition.scss +13 -0
  64. package/styles/breadcrumb/_fluent-definition.scss +59 -0
  65. package/styles/breadcrumb/_highcontrast-definition.scss +13 -0
  66. package/styles/breadcrumb/_highcontrast-light-definition.scss +13 -0
  67. package/styles/breadcrumb/_layout.scss +171 -22
  68. package/styles/breadcrumb/_material-dark-definition.scss +13 -0
  69. package/styles/breadcrumb/_material-definition.scss +13 -0
  70. package/styles/breadcrumb/_tailwind-dark-definition.scss +13 -0
  71. package/styles/breadcrumb/_tailwind-definition.scss +13 -0
  72. package/styles/breadcrumb/_theme.scss +27 -8
  73. package/styles/breadcrumb/bootstrap-dark.css +194 -17
  74. package/styles/breadcrumb/bootstrap.css +194 -17
  75. package/styles/breadcrumb/bootstrap4.css +194 -17
  76. package/styles/breadcrumb/bootstrap5-dark.css +198 -24
  77. package/styles/breadcrumb/bootstrap5.css +198 -24
  78. package/styles/breadcrumb/fabric-dark.css +197 -20
  79. package/styles/breadcrumb/fabric.css +197 -20
  80. package/styles/breadcrumb/highcontrast-light.css +200 -22
  81. package/styles/breadcrumb/highcontrast.css +200 -22
  82. package/styles/breadcrumb/icons/_bootstrap-dark.scss +2 -1
  83. package/styles/breadcrumb/icons/_bootstrap.scss +2 -1
  84. package/styles/breadcrumb/icons/_bootstrap4.scss +2 -1
  85. package/styles/breadcrumb/icons/_bootstrap5.scss +2 -1
  86. package/styles/breadcrumb/icons/_fabric-dark.scss +2 -1
  87. package/styles/breadcrumb/icons/_fabric.scss +2 -1
  88. package/styles/breadcrumb/icons/_fluent.scss +25 -0
  89. package/styles/breadcrumb/icons/_highcontrast-light.scss +2 -1
  90. package/styles/breadcrumb/icons/_highcontrast.scss +2 -1
  91. package/styles/breadcrumb/icons/_material-dark.scss +2 -1
  92. package/styles/breadcrumb/icons/_material.scss +2 -1
  93. package/styles/breadcrumb/icons/_tailwind-dark.scss +2 -1
  94. package/styles/breadcrumb/icons/_tailwind.scss +2 -1
  95. package/styles/breadcrumb/material-dark.css +186 -13
  96. package/styles/breadcrumb/material.css +186 -13
  97. package/styles/breadcrumb/tailwind-dark.css +195 -22
  98. package/styles/breadcrumb/tailwind.css +195 -22
  99. package/styles/context-menu/_bootstrap-dark-definition.scss +1 -1
  100. package/styles/context-menu/_bootstrap-definition.scss +1 -1
  101. package/styles/context-menu/_bootstrap4-definition.scss +1 -1
  102. package/styles/context-menu/_bootstrap5-definition.scss +5 -5
  103. package/styles/context-menu/_fluent-definition.scss +52 -0
  104. package/styles/context-menu/_material-dark-definition.scss +1 -1
  105. package/styles/context-menu/_material-definition.scss +1 -1
  106. package/styles/context-menu/_tailwind-definition.scss +1 -1
  107. package/styles/context-menu/bootstrap-dark.css +1 -1
  108. package/styles/context-menu/bootstrap.css +1 -1
  109. package/styles/context-menu/bootstrap4.css +1 -1
  110. package/styles/context-menu/bootstrap5-dark.css +5 -5
  111. package/styles/context-menu/bootstrap5.css +6 -6
  112. package/styles/context-menu/icons/_fluent.scss +32 -0
  113. package/styles/context-menu/material-dark.css +1 -1
  114. package/styles/context-menu/material.css +1 -1
  115. package/styles/context-menu/tailwind-dark.css +1 -1
  116. package/styles/context-menu/tailwind.css +1 -1
  117. package/styles/fabric-dark.css +305 -41
  118. package/styles/fabric.css +308 -44
  119. package/styles/h-scroll/_fluent-definition.scss +78 -0
  120. package/styles/h-scroll/_tailwind-definition.scss +78 -78
  121. package/styles/h-scroll/_theme.scss +1 -1
  122. package/styles/h-scroll/bootstrap-dark.css +1 -1
  123. package/styles/h-scroll/bootstrap.css +1 -1
  124. package/styles/h-scroll/bootstrap4.css +1 -1
  125. package/styles/h-scroll/bootstrap5-dark.css +1 -1
  126. package/styles/h-scroll/bootstrap5.css +1 -1
  127. package/styles/h-scroll/fabric-dark.css +1 -1
  128. package/styles/h-scroll/fabric.css +1 -1
  129. package/styles/h-scroll/highcontrast-light.css +1 -1
  130. package/styles/h-scroll/highcontrast.css +1 -1
  131. package/styles/h-scroll/icons/_fluent.scss +49 -0
  132. package/styles/h-scroll/icons/_tailwind.scss +49 -49
  133. package/styles/h-scroll/material-dark.css +1 -1
  134. package/styles/h-scroll/material.css +1 -1
  135. package/styles/h-scroll/tailwind-dark.css +1 -1
  136. package/styles/h-scroll/tailwind.css +1 -1
  137. package/styles/highcontrast-light.css +317 -47
  138. package/styles/highcontrast.css +322 -52
  139. package/styles/material-dark.css +295 -32
  140. package/styles/material.css +296 -33
  141. package/styles/menu/_fluent-definition.scss +68 -0
  142. package/styles/menu/_layout.scss +1 -1
  143. package/styles/menu/_theme.scss +9 -0
  144. package/styles/menu/bootstrap-dark.css +1 -1
  145. package/styles/menu/bootstrap.css +1 -1
  146. package/styles/menu/bootstrap4.css +1 -1
  147. package/styles/menu/bootstrap5-dark.css +4 -4
  148. package/styles/menu/bootstrap5.css +5 -5
  149. package/styles/menu/icons/_fluent.scss +133 -0
  150. package/styles/menu/material-dark.css +1 -1
  151. package/styles/menu/material.css +1 -1
  152. package/styles/menu/tailwind-dark.css +1 -1
  153. package/styles/menu/tailwind.css +1 -1
  154. package/styles/sidebar/_bootstrap5-definition.scss +5 -5
  155. package/styles/sidebar/_fluent-definition.scss +5 -0
  156. package/styles/sidebar/_theme.scss +4 -2
  157. package/styles/sidebar/bootstrap5-dark.css +0 -1
  158. package/styles/sidebar/bootstrap5.css +0 -1
  159. package/styles/sidebar/tailwind-dark.css +0 -1
  160. package/styles/sidebar/tailwind.css +0 -1
  161. package/styles/tab/_bootstrap-dark-definition.scss +10 -1
  162. package/styles/tab/_bootstrap-definition.scss +10 -1
  163. package/styles/tab/_bootstrap4-definition.scss +9 -1
  164. package/styles/tab/_bootstrap5-definition.scss +401 -401
  165. package/styles/tab/_fabric-dark-definition.scss +10 -0
  166. package/styles/tab/_fabric-definition.scss +10 -0
  167. package/styles/tab/_fluent-definition.scss +409 -0
  168. package/styles/tab/_highcontrast-definition.scss +10 -0
  169. package/styles/tab/_highcontrast-light-definition.scss +10 -0
  170. package/styles/tab/_layout.scss +145 -0
  171. package/styles/tab/_material-dark-definition.scss +10 -0
  172. package/styles/tab/_material-definition.scss +10 -0
  173. package/styles/tab/_tailwind-definition.scss +431 -420
  174. package/styles/tab/_theme.scss +188 -113
  175. package/styles/tab/bootstrap-dark.css +43 -18
  176. package/styles/tab/bootstrap.css +42 -17
  177. package/styles/tab/bootstrap4.css +47 -28
  178. package/styles/tab/bootstrap5-dark.css +54 -31
  179. package/styles/tab/bootstrap5.css +54 -31
  180. package/styles/tab/fabric-dark.css +43 -20
  181. package/styles/tab/fabric.css +46 -23
  182. package/styles/tab/highcontrast-light.css +52 -19
  183. package/styles/tab/highcontrast.css +56 -23
  184. package/styles/tab/icons/_bootstrap-dark.scss +2 -2
  185. package/styles/tab/icons/_fabric-dark.scss +2 -2
  186. package/styles/tab/icons/_fluent.scss +140 -0
  187. package/styles/tab/icons/_tailwind.scss +140 -140
  188. package/styles/tab/material-dark.css +42 -15
  189. package/styles/tab/material.css +42 -15
  190. package/styles/tab/tailwind-dark.css +42 -17
  191. package/styles/tab/tailwind.css +42 -17
  192. package/styles/tailwind-dark.css +313 -50
  193. package/styles/tailwind.css +313 -50
  194. package/styles/toolbar/_bootstrap-dark-definition.scss +7 -1
  195. package/styles/toolbar/_bootstrap-definition.scss +7 -1
  196. package/styles/toolbar/_bootstrap4-definition.scss +8 -2
  197. package/styles/toolbar/_bootstrap5-definition.scss +104 -86
  198. package/styles/toolbar/_fabric-dark-definition.scss +7 -0
  199. package/styles/toolbar/_fabric-definition.scss +7 -0
  200. package/styles/toolbar/_fluent-definition.scss +149 -0
  201. package/styles/toolbar/_highcontrast-definition.scss +7 -0
  202. package/styles/toolbar/_highcontrast-light-definition.scss +7 -0
  203. package/styles/toolbar/_layout.scss +27 -72
  204. package/styles/toolbar/_material-dark-definition.scss +7 -1
  205. package/styles/toolbar/_material-definition.scss +7 -1
  206. package/styles/toolbar/_tailwind-definition.scss +149 -143
  207. package/styles/toolbar/_theme.scss +12 -15
  208. package/styles/toolbar/bootstrap-dark.css +17 -46
  209. package/styles/toolbar/bootstrap.css +17 -46
  210. package/styles/toolbar/bootstrap4.css +12 -26
  211. package/styles/toolbar/bootstrap5-dark.css +6 -7
  212. package/styles/toolbar/bootstrap5.css +6 -7
  213. package/styles/toolbar/fabric-dark.css +4 -0
  214. package/styles/toolbar/fabric.css +4 -0
  215. package/styles/toolbar/highcontrast-light.css +4 -1
  216. package/styles/toolbar/highcontrast.css +4 -1
  217. package/styles/toolbar/icons/_fluent.scss +16 -0
  218. package/styles/toolbar/icons/_tailwind.scss +16 -16
  219. package/styles/toolbar/material-dark.css +4 -1
  220. package/styles/toolbar/material.css +5 -2
  221. package/styles/toolbar/tailwind-dark.css +8 -6
  222. package/styles/toolbar/tailwind.css +8 -6
  223. package/styles/treeview/_bootstrap-dark-definition.scss +11 -0
  224. package/styles/treeview/_bootstrap-definition.scss +11 -0
  225. package/styles/treeview/_bootstrap4-definition.scss +11 -0
  226. package/styles/treeview/_bootstrap5-definition.scss +120 -109
  227. package/styles/treeview/_fabric-dark-definition.scss +11 -0
  228. package/styles/treeview/_fabric-definition.scss +11 -0
  229. package/styles/treeview/_fluent-definition.scss +120 -0
  230. package/styles/treeview/_highcontrast-definition.scss +11 -0
  231. package/styles/treeview/_highcontrast-light-definition.scss +11 -0
  232. package/styles/treeview/_layout.scss +116 -20
  233. package/styles/treeview/_material-dark-definition.scss +13 -0
  234. package/styles/treeview/_material-definition.scss +11 -0
  235. package/styles/treeview/_tailwind-definition.scss +12 -0
  236. package/styles/treeview/_theme.scss +5 -5
  237. package/styles/treeview/bootstrap-dark.css +60 -0
  238. package/styles/treeview/bootstrap.css +60 -0
  239. package/styles/treeview/bootstrap4.css +60 -0
  240. package/styles/treeview/bootstrap5-dark.css +61 -1
  241. package/styles/treeview/bootstrap5.css +61 -1
  242. package/styles/treeview/fabric-dark.css +60 -0
  243. package/styles/treeview/fabric.css +60 -0
  244. package/styles/treeview/highcontrast-light.css +60 -0
  245. package/styles/treeview/highcontrast.css +60 -0
  246. package/styles/treeview/icons/_bootstrap5.scss +43 -43
  247. package/styles/treeview/icons/_fluent.scss +43 -0
  248. package/styles/treeview/icons/_tailwind-dark.scss +43 -43
  249. package/styles/treeview/material-dark.css +60 -0
  250. package/styles/treeview/material.css +60 -0
  251. package/styles/treeview/tailwind-dark.css +65 -1
  252. package/styles/treeview/tailwind.css +65 -1
  253. package/styles/v-scroll/_fluent-definition.scss +49 -0
  254. package/styles/v-scroll/_tailwind-definition.scss +49 -49
  255. package/styles/v-scroll/icons/_fluent.scss +26 -0
  256. package/styles/v-scroll/icons/_tailwind.scss +26 -26
@@ -2069,6 +2069,10 @@
2069
2069
  top: 0;
2070
2070
  }
2071
2071
 
2072
+ .e-tab .e-tab-header.e-reorder-active-item .e-toolbar-pop .e-toolbar-item.e-active .e-text-wrap::before {
2073
+ display: none;
2074
+ }
2075
+
2072
2076
  .e-tab .e-tab-header.e-vertical {
2073
2077
  max-width: 150px;
2074
2078
  z-index: 1;
@@ -2326,6 +2330,11 @@
2326
2330
  min-height: 62px;
2327
2331
  }
2328
2332
 
2333
+ .e-tab.e-vertical-icon .e-tab-header.e-reorder-active-item .e-toolbar-pop .e-toolbar-item.e-active .e-tab-wrap::before,
2334
+ .e-tab.e-vertical-icon .e-tab-header.e-reorder-active-item .e-toolbar-pop .e-toolbar-item:not(.e-separator):last-child.e-active .e-tab-wrap::before {
2335
+ display: none;
2336
+ }
2337
+
2329
2338
  .e-tab.e-vertical-icon .e-tab-header .e-toolbar-items {
2330
2339
  height: 62px;
2331
2340
  }
@@ -3387,6 +3396,10 @@
3387
3396
  color: #6b7280;
3388
3397
  }
3389
3398
 
3399
+ .e-tab .e-tab-header.e-reorder-active-item:not(.e-vertical) .e-toolbar-pop .e-toolbar-item.e-active {
3400
+ border: initial;
3401
+ }
3402
+
3390
3403
  .e-tab .e-tab-header .e-toolbar-pop {
3391
3404
  background: #374151;
3392
3405
  border: 0;
@@ -3424,6 +3437,11 @@
3424
3437
  background: #374151;
3425
3438
  }
3426
3439
 
3440
+ .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item.e-active .e-tab-wrap .e-tab-text,
3441
+ .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item.e-active .e-tab-wrap .e-tab-icon {
3442
+ color: #22d3ee;
3443
+ }
3444
+
3427
3445
  .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item.e-disable.e-overlay .e-tab-text,
3428
3446
  .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item.e-disable.e-overlay .e-tab-icon {
3429
3447
  color: #6b7280;
@@ -3443,7 +3461,6 @@
3443
3461
  .e-tab .e-tab-header .e-hscroll:not(.e-scroll-device) .e-scroll-nav .e-nav-arrow:hover {
3444
3462
  background: #4b5563;
3445
3463
  color: #22d3ee;
3446
- background: #4b5563;
3447
3464
  }
3448
3465
 
3449
3466
  .e-tab .e-tab-header .e-scroll-nav .e-nav-arrow:active,
@@ -3580,6 +3597,10 @@
3580
3597
  border-top-color: #4b5563;
3581
3598
  }
3582
3599
 
3600
+ .e-tab .e-tab-header.e-vertical {
3601
+ border-bottom: 0;
3602
+ }
3603
+
3583
3604
  .e-tab .e-tab-header.e-vertical::before {
3584
3605
  border-width: 0 1px 0 0;
3585
3606
  }
@@ -3845,7 +3866,7 @@
3845
3866
  .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item .e-tab-wrap:focus .e-tab-icon,
3846
3867
  .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item .e-tab-wrap:focus .e-tab-text,
3847
3868
  .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item .e-tab-wrap:focus .e-close-icon {
3848
- color: #000;
3869
+ color: #22d3ee;
3849
3870
  }
3850
3871
 
3851
3872
  .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus {
@@ -3883,6 +3904,12 @@
3883
3904
  background: #22d3ee;
3884
3905
  }
3885
3906
 
3907
+ .e-tab.e-background .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-text,
3908
+ .e-tab.e-background .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-icon,
3909
+ .e-tab.e-background .e-tab-header .e-toolbar-item .e-tab-wrap .e-close-icon {
3910
+ color: #155e75;
3911
+ }
3912
+
3886
3913
  .e-tab.e-background .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
3887
3914
  background: inherit;
3888
3915
  }
@@ -3892,21 +3919,6 @@
3892
3919
  color: #000;
3893
3920
  }
3894
3921
 
3895
- .e-tab.e-background .e-tab-header .e-toolbar-item .e-tab-text,
3896
- .e-tab.e-background .e-tab-header .e-toolbar-item .e-tab-icon,
3897
- .e-tab.e-background .e-tab-header .e-toolbar-item .e-close-icon {
3898
- color: #155e75;
3899
- }
3900
-
3901
- .e-tab.e-background .e-tab-header .e-toolbar-item .e-close-icon {
3902
- color: #d1d5db;
3903
- color: #000;
3904
- }
3905
-
3906
- .e-tab.e-background .e-tab-header .e-toolbar-item .e-close-icon:hover {
3907
- color: #000;
3908
- }
3909
-
3910
3922
  .e-tab.e-background .e-tab-header .e-toolbar-item.e-active {
3911
3923
  border: 0;
3912
3924
  margin: 0;
@@ -3970,48 +3982,61 @@
3970
3982
  color: #000;
3971
3983
  }
3972
3984
 
3985
+ .e-tab.e-background .e-tab-header .e-hscroll:not(.e-scroll-device) .e-scroll-nav .e-nav-arrow,
3973
3986
  .e-tab.e-background .e-tab-header .e-scroll-nav .e-nav-arrow {
3974
3987
  color: #155e75;
3975
3988
  }
3976
3989
 
3990
+ .e-tab.e-background .e-tab-header .e-hscroll:not(.e-scroll-device) .e-scroll-nav .e-nav-arrow:hover,
3977
3991
  .e-tab.e-background .e-tab-header .e-scroll-nav .e-nav-arrow:hover {
3978
3992
  background: #4b5563;
3979
3993
  color: #d1d5db;
3980
3994
  }
3981
3995
 
3996
+ .e-tab.e-background .e-tab-header .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-nav-arrow,
3982
3997
  .e-tab.e-background .e-tab-header .e-scroll-nav:focus .e-nav-arrow {
3983
3998
  color: #d1d5db;
3984
3999
  }
3985
4000
 
4001
+ .e-tab.e-background .e-tab-header .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-nav-arrow:hover,
3986
4002
  .e-tab.e-background .e-tab-header .e-scroll-nav:focus .e-nav-arrow:hover {
3987
4003
  background: #4b5563;
3988
4004
  color: #d1d5db;
3989
4005
  }
3990
4006
 
4007
+ .e-tab.e-background .e-tab-header .e-hscroll:not(.e-scroll-device) .e-scroll-nav:active::after,
3991
4008
  .e-tab.e-background .e-tab-header .e-scroll-nav:active::after {
3992
4009
  animation: hscroll-alt-popup-shadow 1s ease-out 0ms;
3993
4010
  }
3994
4011
 
4012
+ .e-tab.e-background .e-tab-header .e-hor-nav:not(.e-expended-nav) .e-popup-up-icon,
4013
+ .e-tab.e-background .e-tab-header .e-hor-nav:not(.e-expended-nav) .e-popup-down-icon,
3995
4014
  .e-tab.e-background .e-tab-header .e-hor-nav .e-popup-up-icon,
3996
4015
  .e-tab.e-background .e-tab-header .e-hor-nav .e-popup-down-icon {
3997
4016
  color: #155e75;
3998
4017
  }
3999
4018
 
4019
+ .e-tab.e-background .e-tab-header .e-hor-nav:not(.e-expended-nav) .e-popup-up-icon:hover,
4020
+ .e-tab.e-background .e-tab-header .e-hor-nav:not(.e-expended-nav) .e-popup-down-icon:hover,
4000
4021
  .e-tab.e-background .e-tab-header .e-hor-nav .e-popup-up-icon:hover,
4001
4022
  .e-tab.e-background .e-tab-header .e-hor-nav .e-popup-down-icon:hover {
4002
4023
  background: #4b5563;
4003
4024
  color: #d1d5db;
4004
4025
  }
4005
4026
 
4027
+ .e-tab.e-background .e-tab-header .e-hor-nav:not(.e-expended-nav):focus .e-popup-up-icon,
4028
+ .e-tab.e-background .e-tab-header .e-hor-nav:not(.e-expended-nav):focus .e-popup-down-icon,
4006
4029
  .e-tab.e-background .e-tab-header .e-hor-nav:focus .e-popup-up-icon,
4007
4030
  .e-tab.e-background .e-tab-header .e-hor-nav:focus .e-popup-down-icon {
4008
4031
  color: #d1d5db;
4009
4032
  }
4010
4033
 
4034
+ .e-tab.e-background .e-tab-header .e-hor-nav:not(.e-expended-nav):active::after,
4011
4035
  .e-tab.e-background .e-tab-header .e-hor-nav:active::after {
4012
4036
  animation: tbar-alt-popup-shadow 1s ease-out 0ms;
4013
4037
  }
4014
4038
 
4039
+ .e-tab.e-background .e-tab-header .e-hor-nav:not(.e-expended-nav).e-nav-active .e-popup-up-icon,
4015
4040
  .e-tab.e-background .e-tab-header .e-hor-nav.e-nav-active .e-popup-up-icon {
4016
4041
  color: #d1d5db;
4017
4042
  }
@@ -2069,6 +2069,10 @@
2069
2069
  top: 0;
2070
2070
  }
2071
2071
 
2072
+ .e-tab .e-tab-header.e-reorder-active-item .e-toolbar-pop .e-toolbar-item.e-active .e-text-wrap::before {
2073
+ display: none;
2074
+ }
2075
+
2072
2076
  .e-tab .e-tab-header.e-vertical {
2073
2077
  max-width: 150px;
2074
2078
  z-index: 1;
@@ -2326,6 +2330,11 @@
2326
2330
  min-height: 62px;
2327
2331
  }
2328
2332
 
2333
+ .e-tab.e-vertical-icon .e-tab-header.e-reorder-active-item .e-toolbar-pop .e-toolbar-item.e-active .e-tab-wrap::before,
2334
+ .e-tab.e-vertical-icon .e-tab-header.e-reorder-active-item .e-toolbar-pop .e-toolbar-item:not(.e-separator):last-child.e-active .e-tab-wrap::before {
2335
+ display: none;
2336
+ }
2337
+
2329
2338
  .e-tab.e-vertical-icon .e-tab-header .e-toolbar-items {
2330
2339
  height: 62px;
2331
2340
  }
@@ -3387,6 +3396,10 @@
3387
3396
  color: #9ca3af;
3388
3397
  }
3389
3398
 
3399
+ .e-tab .e-tab-header.e-reorder-active-item:not(.e-vertical) .e-toolbar-pop .e-toolbar-item.e-active {
3400
+ border: initial;
3401
+ }
3402
+
3390
3403
  .e-tab .e-tab-header .e-toolbar-pop {
3391
3404
  background: #fff;
3392
3405
  border: 0;
@@ -3424,6 +3437,11 @@
3424
3437
  background: #f3f4f6;
3425
3438
  }
3426
3439
 
3440
+ .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item.e-active .e-tab-wrap .e-tab-text,
3441
+ .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item.e-active .e-tab-wrap .e-tab-icon {
3442
+ color: #4f46e5;
3443
+ }
3444
+
3427
3445
  .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item.e-disable.e-overlay .e-tab-text,
3428
3446
  .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item.e-disable.e-overlay .e-tab-icon {
3429
3447
  color: #9ca3af;
@@ -3443,7 +3461,6 @@
3443
3461
  .e-tab .e-tab-header .e-hscroll:not(.e-scroll-device) .e-scroll-nav .e-nav-arrow:hover {
3444
3462
  background: #e5e7eb;
3445
3463
  color: #4f46e5;
3446
- background: #e5e7eb;
3447
3464
  }
3448
3465
 
3449
3466
  .e-tab .e-tab-header .e-scroll-nav .e-nav-arrow:active,
@@ -3580,6 +3597,10 @@
3580
3597
  border-top-color: #e5e7eb;
3581
3598
  }
3582
3599
 
3600
+ .e-tab .e-tab-header.e-vertical {
3601
+ border-bottom: 0;
3602
+ }
3603
+
3583
3604
  .e-tab .e-tab-header.e-vertical::before {
3584
3605
  border-width: 0 1px 0 0;
3585
3606
  }
@@ -3845,7 +3866,7 @@
3845
3866
  .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item .e-tab-wrap:focus .e-tab-icon,
3846
3867
  .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item .e-tab-wrap:focus .e-tab-text,
3847
3868
  .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item .e-tab-wrap:focus .e-close-icon {
3848
- color: #fff;
3869
+ color: #4f46e5;
3849
3870
  }
3850
3871
 
3851
3872
  .e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus {
@@ -3883,6 +3904,12 @@
3883
3904
  background: #4f46e5;
3884
3905
  }
3885
3906
 
3907
+ .e-tab.e-background .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-text,
3908
+ .e-tab.e-background .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-icon,
3909
+ .e-tab.e-background .e-tab-header .e-toolbar-item .e-tab-wrap .e-close-icon {
3910
+ color: #e0e7ff;
3911
+ }
3912
+
3886
3913
  .e-tab.e-background .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
3887
3914
  background: inherit;
3888
3915
  }
@@ -3892,21 +3919,6 @@
3892
3919
  color: #fff;
3893
3920
  }
3894
3921
 
3895
- .e-tab.e-background .e-tab-header .e-toolbar-item .e-tab-text,
3896
- .e-tab.e-background .e-tab-header .e-toolbar-item .e-tab-icon,
3897
- .e-tab.e-background .e-tab-header .e-toolbar-item .e-close-icon {
3898
- color: #e0e7ff;
3899
- }
3900
-
3901
- .e-tab.e-background .e-tab-header .e-toolbar-item .e-close-icon {
3902
- color: #6b7280;
3903
- color: #fff;
3904
- }
3905
-
3906
- .e-tab.e-background .e-tab-header .e-toolbar-item .e-close-icon:hover {
3907
- color: #fff;
3908
- }
3909
-
3910
3922
  .e-tab.e-background .e-tab-header .e-toolbar-item.e-active {
3911
3923
  border: 0;
3912
3924
  margin: 0;
@@ -3970,48 +3982,61 @@
3970
3982
  color: #fff;
3971
3983
  }
3972
3984
 
3985
+ .e-tab.e-background .e-tab-header .e-hscroll:not(.e-scroll-device) .e-scroll-nav .e-nav-arrow,
3973
3986
  .e-tab.e-background .e-tab-header .e-scroll-nav .e-nav-arrow {
3974
3987
  color: #e0e7ff;
3975
3988
  }
3976
3989
 
3990
+ .e-tab.e-background .e-tab-header .e-hscroll:not(.e-scroll-device) .e-scroll-nav .e-nav-arrow:hover,
3977
3991
  .e-tab.e-background .e-tab-header .e-scroll-nav .e-nav-arrow:hover {
3978
3992
  background: #e5e7eb;
3979
3993
  color: #6b7280;
3980
3994
  }
3981
3995
 
3996
+ .e-tab.e-background .e-tab-header .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-nav-arrow,
3982
3997
  .e-tab.e-background .e-tab-header .e-scroll-nav:focus .e-nav-arrow {
3983
3998
  color: #6b7280;
3984
3999
  }
3985
4000
 
4001
+ .e-tab.e-background .e-tab-header .e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus .e-nav-arrow:hover,
3986
4002
  .e-tab.e-background .e-tab-header .e-scroll-nav:focus .e-nav-arrow:hover {
3987
4003
  background: #e5e7eb;
3988
4004
  color: #6b7280;
3989
4005
  }
3990
4006
 
4007
+ .e-tab.e-background .e-tab-header .e-hscroll:not(.e-scroll-device) .e-scroll-nav:active::after,
3991
4008
  .e-tab.e-background .e-tab-header .e-scroll-nav:active::after {
3992
4009
  animation: hscroll-alt-popup-shadow 1s ease-out 0ms;
3993
4010
  }
3994
4011
 
4012
+ .e-tab.e-background .e-tab-header .e-hor-nav:not(.e-expended-nav) .e-popup-up-icon,
4013
+ .e-tab.e-background .e-tab-header .e-hor-nav:not(.e-expended-nav) .e-popup-down-icon,
3995
4014
  .e-tab.e-background .e-tab-header .e-hor-nav .e-popup-up-icon,
3996
4015
  .e-tab.e-background .e-tab-header .e-hor-nav .e-popup-down-icon {
3997
4016
  color: #e0e7ff;
3998
4017
  }
3999
4018
 
4019
+ .e-tab.e-background .e-tab-header .e-hor-nav:not(.e-expended-nav) .e-popup-up-icon:hover,
4020
+ .e-tab.e-background .e-tab-header .e-hor-nav:not(.e-expended-nav) .e-popup-down-icon:hover,
4000
4021
  .e-tab.e-background .e-tab-header .e-hor-nav .e-popup-up-icon:hover,
4001
4022
  .e-tab.e-background .e-tab-header .e-hor-nav .e-popup-down-icon:hover {
4002
4023
  background: #e5e7eb;
4003
4024
  color: #6b7280;
4004
4025
  }
4005
4026
 
4027
+ .e-tab.e-background .e-tab-header .e-hor-nav:not(.e-expended-nav):focus .e-popup-up-icon,
4028
+ .e-tab.e-background .e-tab-header .e-hor-nav:not(.e-expended-nav):focus .e-popup-down-icon,
4006
4029
  .e-tab.e-background .e-tab-header .e-hor-nav:focus .e-popup-up-icon,
4007
4030
  .e-tab.e-background .e-tab-header .e-hor-nav:focus .e-popup-down-icon {
4008
4031
  color: #6b7280;
4009
4032
  }
4010
4033
 
4034
+ .e-tab.e-background .e-tab-header .e-hor-nav:not(.e-expended-nav):active::after,
4011
4035
  .e-tab.e-background .e-tab-header .e-hor-nav:active::after {
4012
4036
  animation: tbar-alt-popup-shadow 1s ease-out 0ms;
4013
4037
  }
4014
4038
 
4039
+ .e-tab.e-background .e-tab-header .e-hor-nav:not(.e-expended-nav).e-nav-active .e-popup-up-icon,
4015
4040
  .e-tab.e-background .e-tab-header .e-hor-nav.e-nav-active .e-popup-up-icon {
4016
4041
  color: #6b7280;
4017
4042
  }