@syncfusion/ej2-navigations 22.2.8 → 23.1.36

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 (368) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/ej2-navigations.min.js +2 -2
  3. package/dist/ej2-navigations.umd.min.js +2 -2
  4. package/dist/ej2-navigations.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-navigations.es2015.js +96 -57
  6. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  7. package/dist/es6/ej2-navigations.es5.js +96 -55
  8. package/dist/es6/ej2-navigations.es5.js.map +1 -1
  9. package/dist/global/ej2-navigations.min.js +2 -2
  10. package/dist/global/ej2-navigations.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +12 -12
  13. package/src/accordion/accordion-model.d.ts +1 -1
  14. package/src/accordion/accordion.d.ts +3 -2
  15. package/src/accordion/accordion.js +30 -29
  16. package/src/appbar/appbar.js +1 -0
  17. package/src/breadcrumb/breadcrumb-model.d.ts +1 -1
  18. package/src/breadcrumb/breadcrumb.js +10 -2
  19. package/src/carousel/carousel.d.ts +1 -0
  20. package/src/carousel/carousel.js +12 -2
  21. package/src/common/menu-base.js +7 -6
  22. package/src/menu/menu-model.d.ts +1 -1
  23. package/src/tab/tab-model.d.ts +4 -2
  24. package/src/tab/tab.d.ts +5 -0
  25. package/src/tab/tab.js +19 -15
  26. package/src/toolbar/toolbar-model.d.ts +2 -0
  27. package/src/toolbar/toolbar.d.ts +2 -0
  28. package/src/toolbar/toolbar.js +6 -1
  29. package/src/treeview/treeview-model.d.ts +1 -1
  30. package/src/treeview/treeview.d.ts +1 -1
  31. package/src/treeview/treeview.js +14 -3
  32. package/styles/accordion/_theme.scss +1 -0
  33. package/styles/accordion/bootstrap-dark.scss +1 -1
  34. package/styles/accordion/bootstrap.scss +1 -1
  35. package/styles/accordion/bootstrap4.scss +1 -1
  36. package/styles/accordion/bootstrap5-dark.scss +1 -1
  37. package/styles/accordion/bootstrap5.scss +1 -1
  38. package/styles/accordion/fabric-dark.scss +1 -1
  39. package/styles/accordion/fabric.scss +1 -1
  40. package/styles/accordion/fluent-dark.scss +1 -1
  41. package/styles/accordion/fluent.scss +1 -1
  42. package/styles/accordion/highcontrast-light.scss +1 -1
  43. package/styles/accordion/highcontrast.scss +1 -1
  44. package/styles/accordion/material-dark.css +0 -1
  45. package/styles/accordion/material-dark.scss +1 -1
  46. package/styles/accordion/material.css +0 -1
  47. package/styles/accordion/material.scss +1 -1
  48. package/styles/accordion/material3-dark.css +0 -1
  49. package/styles/accordion/material3-dark.scss +1 -1
  50. package/styles/accordion/material3.css +0 -1
  51. package/styles/accordion/material3.scss +1 -1
  52. package/styles/accordion/tailwind-dark.css +0 -1
  53. package/styles/accordion/tailwind-dark.scss +1 -1
  54. package/styles/accordion/tailwind.css +0 -1
  55. package/styles/accordion/tailwind.scss +1 -1
  56. package/styles/appbar/bootstrap-dark.scss +1 -1
  57. package/styles/appbar/bootstrap.scss +1 -1
  58. package/styles/appbar/bootstrap4.scss +1 -1
  59. package/styles/appbar/bootstrap5-dark.scss +1 -1
  60. package/styles/appbar/bootstrap5.scss +1 -1
  61. package/styles/appbar/fabric-dark.scss +1 -1
  62. package/styles/appbar/fabric.scss +1 -1
  63. package/styles/appbar/fluent-dark.scss +1 -1
  64. package/styles/appbar/fluent.scss +1 -1
  65. package/styles/appbar/highcontrast-light.scss +1 -1
  66. package/styles/appbar/highcontrast.scss +1 -1
  67. package/styles/appbar/material-dark.css +0 -1
  68. package/styles/appbar/material-dark.scss +1 -1
  69. package/styles/appbar/material.css +0 -1
  70. package/styles/appbar/material.scss +1 -1
  71. package/styles/appbar/material3-dark.css +0 -1
  72. package/styles/appbar/material3-dark.scss +1 -1
  73. package/styles/appbar/material3.css +0 -1
  74. package/styles/appbar/material3.scss +1 -1
  75. package/styles/appbar/tailwind-dark.css +0 -1
  76. package/styles/appbar/tailwind-dark.scss +1 -1
  77. package/styles/appbar/tailwind.css +0 -1
  78. package/styles/appbar/tailwind.scss +1 -1
  79. package/styles/bootstrap-dark.css +14 -9
  80. package/styles/bootstrap.css +14 -9
  81. package/styles/bootstrap4.css +22 -14
  82. package/styles/bootstrap5-dark.css +18 -13
  83. package/styles/bootstrap5.css +18 -13
  84. package/styles/breadcrumb/bootstrap-dark.scss +1 -1
  85. package/styles/breadcrumb/bootstrap.scss +1 -1
  86. package/styles/breadcrumb/bootstrap4.scss +1 -1
  87. package/styles/breadcrumb/bootstrap5-dark.scss +1 -1
  88. package/styles/breadcrumb/bootstrap5.scss +1 -1
  89. package/styles/breadcrumb/fabric-dark.scss +1 -1
  90. package/styles/breadcrumb/fabric.scss +1 -1
  91. package/styles/breadcrumb/fluent-dark.scss +1 -1
  92. package/styles/breadcrumb/fluent.scss +1 -1
  93. package/styles/breadcrumb/highcontrast-light.scss +1 -1
  94. package/styles/breadcrumb/highcontrast.scss +1 -1
  95. package/styles/breadcrumb/material-dark.css +0 -1
  96. package/styles/breadcrumb/material-dark.scss +1 -1
  97. package/styles/breadcrumb/material.css +0 -1
  98. package/styles/breadcrumb/material.scss +1 -1
  99. package/styles/breadcrumb/material3-dark.css +0 -1
  100. package/styles/breadcrumb/material3-dark.scss +1 -1
  101. package/styles/breadcrumb/material3.css +0 -1
  102. package/styles/breadcrumb/material3.scss +1 -1
  103. package/styles/breadcrumb/tailwind-dark.css +0 -1
  104. package/styles/breadcrumb/tailwind-dark.scss +1 -1
  105. package/styles/breadcrumb/tailwind.css +0 -1
  106. package/styles/breadcrumb/tailwind.scss +1 -1
  107. package/styles/carousel/bootstrap-dark.scss +1 -1
  108. package/styles/carousel/bootstrap.scss +1 -1
  109. package/styles/carousel/bootstrap4.scss +1 -1
  110. package/styles/carousel/bootstrap5-dark.scss +1 -1
  111. package/styles/carousel/bootstrap5.scss +1 -1
  112. package/styles/carousel/fabric-dark.scss +1 -1
  113. package/styles/carousel/fabric.scss +1 -1
  114. package/styles/carousel/fluent-dark.scss +1 -1
  115. package/styles/carousel/fluent.scss +1 -1
  116. package/styles/carousel/highcontrast-light.scss +1 -1
  117. package/styles/carousel/highcontrast.scss +1 -1
  118. package/styles/carousel/material-dark.css +0 -1
  119. package/styles/carousel/material-dark.scss +1 -1
  120. package/styles/carousel/material.css +0 -1
  121. package/styles/carousel/material.scss +1 -1
  122. package/styles/carousel/material3-dark.css +0 -1
  123. package/styles/carousel/material3-dark.scss +1 -1
  124. package/styles/carousel/material3.css +0 -1
  125. package/styles/carousel/material3.scss +1 -1
  126. package/styles/carousel/tailwind-dark.css +0 -1
  127. package/styles/carousel/tailwind-dark.scss +1 -1
  128. package/styles/carousel/tailwind.css +0 -1
  129. package/styles/carousel/tailwind.scss +1 -1
  130. package/styles/context-menu/bootstrap-dark.scss +1 -1
  131. package/styles/context-menu/bootstrap.scss +1 -1
  132. package/styles/context-menu/bootstrap4.scss +1 -1
  133. package/styles/context-menu/bootstrap5-dark.scss +1 -1
  134. package/styles/context-menu/bootstrap5.scss +1 -1
  135. package/styles/context-menu/fabric-dark.scss +1 -1
  136. package/styles/context-menu/fabric.scss +1 -1
  137. package/styles/context-menu/fluent-dark.scss +1 -1
  138. package/styles/context-menu/fluent.scss +1 -1
  139. package/styles/context-menu/highcontrast-light.scss +1 -1
  140. package/styles/context-menu/highcontrast.scss +1 -1
  141. package/styles/context-menu/material-dark.css +0 -1
  142. package/styles/context-menu/material-dark.scss +1 -1
  143. package/styles/context-menu/material.css +0 -1
  144. package/styles/context-menu/material.scss +1 -1
  145. package/styles/context-menu/material3-dark.css +0 -1
  146. package/styles/context-menu/material3-dark.scss +1 -1
  147. package/styles/context-menu/material3.css +0 -1
  148. package/styles/context-menu/material3.scss +1 -1
  149. package/styles/context-menu/tailwind-dark.css +0 -1
  150. package/styles/context-menu/tailwind-dark.scss +1 -1
  151. package/styles/context-menu/tailwind.css +0 -1
  152. package/styles/context-menu/tailwind.scss +1 -1
  153. package/styles/fabric-dark.css +14 -9
  154. package/styles/fabric.css +14 -9
  155. package/styles/fluent-dark.css +14 -9
  156. package/styles/fluent.css +14 -9
  157. package/styles/h-scroll/bootstrap-dark.scss +1 -1
  158. package/styles/h-scroll/bootstrap.scss +1 -1
  159. package/styles/h-scroll/bootstrap4.scss +1 -1
  160. package/styles/h-scroll/bootstrap5-dark.scss +1 -1
  161. package/styles/h-scroll/bootstrap5.scss +1 -1
  162. package/styles/h-scroll/fabric-dark.scss +1 -1
  163. package/styles/h-scroll/fabric.scss +1 -1
  164. package/styles/h-scroll/fluent-dark.scss +1 -1
  165. package/styles/h-scroll/fluent.scss +1 -1
  166. package/styles/h-scroll/highcontrast-light.scss +1 -1
  167. package/styles/h-scroll/highcontrast.scss +1 -1
  168. package/styles/h-scroll/material-dark.css +0 -1
  169. package/styles/h-scroll/material-dark.scss +1 -1
  170. package/styles/h-scroll/material.css +0 -1
  171. package/styles/h-scroll/material.scss +1 -1
  172. package/styles/h-scroll/material3-dark.css +0 -1
  173. package/styles/h-scroll/material3-dark.scss +1 -1
  174. package/styles/h-scroll/material3.css +0 -1
  175. package/styles/h-scroll/material3.scss +1 -1
  176. package/styles/h-scroll/tailwind-dark.css +0 -1
  177. package/styles/h-scroll/tailwind-dark.scss +1 -1
  178. package/styles/h-scroll/tailwind.css +0 -1
  179. package/styles/h-scroll/tailwind.scss +1 -1
  180. package/styles/highcontrast-light.css +14 -9
  181. package/styles/highcontrast.css +14 -9
  182. package/styles/material-dark.css +14 -10
  183. package/styles/material.css +14 -10
  184. package/styles/material3-dark.css +15 -11
  185. package/styles/material3-dark.scss +1 -1
  186. package/styles/material3.css +15 -11
  187. package/styles/material3.scss +1 -1
  188. package/styles/menu/_theme.scss +8 -3
  189. package/styles/menu/bootstrap-dark.css +14 -9
  190. package/styles/menu/bootstrap-dark.scss +1 -1
  191. package/styles/menu/bootstrap.css +14 -9
  192. package/styles/menu/bootstrap.scss +1 -1
  193. package/styles/menu/bootstrap4.css +22 -14
  194. package/styles/menu/bootstrap4.scss +1 -1
  195. package/styles/menu/bootstrap5-dark.css +14 -9
  196. package/styles/menu/bootstrap5-dark.scss +1 -1
  197. package/styles/menu/bootstrap5.css +14 -9
  198. package/styles/menu/bootstrap5.scss +1 -1
  199. package/styles/menu/fabric-dark.css +14 -9
  200. package/styles/menu/fabric-dark.scss +1 -1
  201. package/styles/menu/fabric.css +14 -9
  202. package/styles/menu/fabric.scss +1 -1
  203. package/styles/menu/fluent-dark.css +14 -9
  204. package/styles/menu/fluent-dark.scss +1 -1
  205. package/styles/menu/fluent.css +14 -9
  206. package/styles/menu/fluent.scss +1 -1
  207. package/styles/menu/highcontrast-light.css +14 -9
  208. package/styles/menu/highcontrast-light.scss +1 -1
  209. package/styles/menu/highcontrast.css +14 -9
  210. package/styles/menu/highcontrast.scss +1 -1
  211. package/styles/menu/material-dark.css +14 -10
  212. package/styles/menu/material-dark.scss +1 -1
  213. package/styles/menu/material.css +14 -10
  214. package/styles/menu/material.scss +1 -1
  215. package/styles/menu/material3-dark.css +14 -10
  216. package/styles/menu/material3-dark.scss +1 -1
  217. package/styles/menu/material3.css +14 -10
  218. package/styles/menu/material3.scss +1 -1
  219. package/styles/menu/tailwind-dark.css +14 -10
  220. package/styles/menu/tailwind-dark.scss +1 -1
  221. package/styles/menu/tailwind.css +14 -10
  222. package/styles/menu/tailwind.scss +1 -1
  223. package/styles/pager/bootstrap-dark.scss +1 -1
  224. package/styles/pager/bootstrap.scss +1 -1
  225. package/styles/pager/bootstrap4.scss +1 -1
  226. package/styles/pager/bootstrap5-dark.scss +1 -1
  227. package/styles/pager/bootstrap5.scss +1 -1
  228. package/styles/pager/fabric-dark.scss +1 -1
  229. package/styles/pager/fabric.scss +1 -1
  230. package/styles/pager/fluent-dark.scss +1 -1
  231. package/styles/pager/fluent.scss +1 -1
  232. package/styles/pager/highcontrast-light.scss +1 -1
  233. package/styles/pager/highcontrast.scss +1 -1
  234. package/styles/pager/material-dark.css +0 -1
  235. package/styles/pager/material-dark.scss +1 -1
  236. package/styles/pager/material.css +0 -1
  237. package/styles/pager/material.scss +1 -1
  238. package/styles/pager/material3-dark.css +0 -1
  239. package/styles/pager/material3-dark.scss +1 -1
  240. package/styles/pager/material3.css +0 -1
  241. package/styles/pager/material3.scss +1 -1
  242. package/styles/pager/tailwind-dark.css +0 -1
  243. package/styles/pager/tailwind-dark.scss +1 -1
  244. package/styles/pager/tailwind.css +0 -1
  245. package/styles/pager/tailwind.scss +1 -1
  246. package/styles/sidebar/bootstrap-dark.scss +1 -1
  247. package/styles/sidebar/bootstrap.scss +1 -1
  248. package/styles/sidebar/bootstrap4.scss +1 -1
  249. package/styles/sidebar/bootstrap5-dark.scss +1 -1
  250. package/styles/sidebar/bootstrap5.scss +1 -1
  251. package/styles/sidebar/fabric-dark.scss +1 -1
  252. package/styles/sidebar/fabric.scss +1 -1
  253. package/styles/sidebar/fluent-dark.scss +1 -1
  254. package/styles/sidebar/fluent.scss +1 -1
  255. package/styles/sidebar/highcontrast-light.scss +1 -1
  256. package/styles/sidebar/highcontrast.scss +1 -1
  257. package/styles/sidebar/material-dark.css +0 -1
  258. package/styles/sidebar/material-dark.scss +1 -1
  259. package/styles/sidebar/material.css +0 -1
  260. package/styles/sidebar/material.scss +1 -1
  261. package/styles/sidebar/material3-dark.css +0 -1
  262. package/styles/sidebar/material3-dark.scss +1 -1
  263. package/styles/sidebar/material3.css +0 -1
  264. package/styles/sidebar/material3.scss +1 -1
  265. package/styles/sidebar/tailwind-dark.css +0 -1
  266. package/styles/sidebar/tailwind-dark.scss +1 -1
  267. package/styles/sidebar/tailwind.css +0 -1
  268. package/styles/sidebar/tailwind.scss +1 -1
  269. package/styles/tab/_tailwind-definition.scss +2 -2
  270. package/styles/tab/bootstrap-dark.scss +1 -1
  271. package/styles/tab/bootstrap.scss +1 -1
  272. package/styles/tab/bootstrap4.scss +1 -1
  273. package/styles/tab/bootstrap5-dark.scss +1 -1
  274. package/styles/tab/bootstrap5.scss +1 -1
  275. package/styles/tab/fabric-dark.scss +1 -1
  276. package/styles/tab/fabric.scss +1 -1
  277. package/styles/tab/fluent-dark.scss +1 -1
  278. package/styles/tab/fluent.scss +1 -1
  279. package/styles/tab/highcontrast-light.scss +1 -1
  280. package/styles/tab/highcontrast.scss +1 -1
  281. package/styles/tab/material-dark.css +0 -1
  282. package/styles/tab/material-dark.scss +1 -1
  283. package/styles/tab/material.css +0 -1
  284. package/styles/tab/material.scss +1 -1
  285. package/styles/tab/material3-dark.css +0 -1
  286. package/styles/tab/material3-dark.scss +1 -1
  287. package/styles/tab/material3.css +0 -1
  288. package/styles/tab/material3.scss +1 -1
  289. package/styles/tab/tailwind-dark.css +2 -3
  290. package/styles/tab/tailwind-dark.scss +1 -1
  291. package/styles/tab/tailwind.css +2 -3
  292. package/styles/tab/tailwind.scss +1 -1
  293. package/styles/tailwind-dark.css +18 -26
  294. package/styles/tailwind.css +18 -26
  295. package/styles/toolbar/_bootstrap5-definition.scss +4 -4
  296. package/styles/toolbar/_material3-definition.scss +1 -1
  297. package/styles/toolbar/_tailwind-definition.scss +2 -2
  298. package/styles/toolbar/bootstrap-dark.scss +1 -1
  299. package/styles/toolbar/bootstrap.scss +1 -1
  300. package/styles/toolbar/bootstrap4.scss +1 -1
  301. package/styles/toolbar/bootstrap5-dark.css +4 -4
  302. package/styles/toolbar/bootstrap5-dark.scss +1 -1
  303. package/styles/toolbar/bootstrap5.css +4 -4
  304. package/styles/toolbar/bootstrap5.scss +1 -1
  305. package/styles/toolbar/fabric-dark.scss +1 -1
  306. package/styles/toolbar/fabric.scss +1 -1
  307. package/styles/toolbar/fluent-dark.scss +1 -1
  308. package/styles/toolbar/fluent.scss +1 -1
  309. package/styles/toolbar/highcontrast-light.scss +1 -1
  310. package/styles/toolbar/highcontrast.scss +1 -1
  311. package/styles/toolbar/material-dark.css +0 -1
  312. package/styles/toolbar/material-dark.scss +1 -1
  313. package/styles/toolbar/material.css +0 -1
  314. package/styles/toolbar/material.scss +1 -1
  315. package/styles/toolbar/material3-dark.css +1 -2
  316. package/styles/toolbar/material3-dark.scss +1 -1
  317. package/styles/toolbar/material3.css +1 -2
  318. package/styles/toolbar/material3.scss +1 -1
  319. package/styles/toolbar/tailwind-dark.css +2 -3
  320. package/styles/toolbar/tailwind-dark.scss +1 -1
  321. package/styles/toolbar/tailwind.css +2 -3
  322. package/styles/toolbar/tailwind.scss +1 -1
  323. package/styles/treeview/bootstrap-dark.scss +1 -1
  324. package/styles/treeview/bootstrap.scss +1 -1
  325. package/styles/treeview/bootstrap4.scss +1 -1
  326. package/styles/treeview/bootstrap5-dark.scss +1 -1
  327. package/styles/treeview/bootstrap5.scss +1 -1
  328. package/styles/treeview/fabric-dark.scss +1 -1
  329. package/styles/treeview/fabric.scss +1 -1
  330. package/styles/treeview/fluent-dark.scss +1 -1
  331. package/styles/treeview/fluent.scss +1 -1
  332. package/styles/treeview/highcontrast-light.scss +1 -1
  333. package/styles/treeview/highcontrast.scss +1 -1
  334. package/styles/treeview/material-dark.css +0 -1
  335. package/styles/treeview/material-dark.scss +1 -1
  336. package/styles/treeview/material.css +0 -1
  337. package/styles/treeview/material.scss +1 -1
  338. package/styles/treeview/material3-dark.css +0 -1
  339. package/styles/treeview/material3-dark.scss +1 -1
  340. package/styles/treeview/material3.css +0 -1
  341. package/styles/treeview/material3.scss +1 -1
  342. package/styles/treeview/tailwind-dark.css +0 -1
  343. package/styles/treeview/tailwind-dark.scss +1 -1
  344. package/styles/treeview/tailwind.css +0 -1
  345. package/styles/treeview/tailwind.scss +1 -1
  346. package/styles/v-scroll/bootstrap-dark.scss +1 -1
  347. package/styles/v-scroll/bootstrap.scss +1 -1
  348. package/styles/v-scroll/bootstrap4.scss +1 -1
  349. package/styles/v-scroll/bootstrap5-dark.scss +1 -1
  350. package/styles/v-scroll/bootstrap5.scss +1 -1
  351. package/styles/v-scroll/fabric-dark.scss +1 -1
  352. package/styles/v-scroll/fabric.scss +1 -1
  353. package/styles/v-scroll/fluent-dark.scss +1 -1
  354. package/styles/v-scroll/fluent.scss +1 -1
  355. package/styles/v-scroll/highcontrast-light.scss +1 -1
  356. package/styles/v-scroll/highcontrast.scss +1 -1
  357. package/styles/v-scroll/material-dark.css +0 -1
  358. package/styles/v-scroll/material-dark.scss +1 -1
  359. package/styles/v-scroll/material.css +0 -1
  360. package/styles/v-scroll/material.scss +1 -1
  361. package/styles/v-scroll/material3-dark.css +0 -1
  362. package/styles/v-scroll/material3-dark.scss +1 -1
  363. package/styles/v-scroll/material3.css +0 -1
  364. package/styles/v-scroll/material3.scss +1 -1
  365. package/styles/v-scroll/tailwind-dark.css +0 -1
  366. package/styles/v-scroll/tailwind-dark.scss +1 -1
  367. package/styles/v-scroll/tailwind.css +0 -1
  368. package/styles/v-scroll/tailwind.scss +1 -1
package/styles/material3-dark.css CHANGED
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
2
1
  :root {
3
2
  --color-sf-black: 0, 0, 0;
4
3
  --color-sf-white: 255, 255, 255;
@@ -1689,7 +1688,7 @@
1689
1688
  min-width: 18px;
1690
1689
  width: auto;
1691
1690
  font-size: 18px;
1692
- line-height: 18px;
1691
+ line-height: 16px;
1693
1692
  }
1694
1693
  .e-toolbar .e-toolbar-item .e-tbar-btn:hover, .e-toolbar .e-toolbar-item .e-tbar-btn:focus, .e-toolbar .e-toolbar-item .e-tbar-btn:active {
1695
1694
  padding: 0 7px;
@@ -9580,20 +9579,23 @@ ejs-sidebar {
9580
9579
  .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
9581
9580
  color: rgba(var(--color-sf-on-surface-variant));
9582
9581
  }
9583
- .e-menu-wrapper .e-menu .e-menu-item.e-selected,
9584
- .e-menu-container .e-menu .e-menu-item.e-selected {
9582
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
9583
+ .e-menu-container .e-menu .e-menu-item.e-selected,
9584
+ .e-menu-container .e-menu .e-menu-item.e-active-item {
9585
9585
  color: rgba(var(--color-sf-primary));
9586
9586
  outline: 0 solid rgba(var(--color-sf-primary), 0.08);
9587
9587
  outline-offset: 0;
9588
9588
  background: rgba(var(--color-sf-primary), 0.08);
9589
9589
  border-radius: 2px;
9590
9590
  }
9591
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
9592
- .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
9591
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-caret,
9592
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
9593
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
9593
9594
  color: rgba(var(--color-sf-primary));
9594
9595
  }
9595
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
9596
- .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
9596
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-menu-icon,
9597
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
9598
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
9597
9599
  color: rgba(var(--color-sf-primary));
9598
9600
  }
9599
9601
  .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -9634,8 +9636,9 @@ ejs-sidebar {
9634
9636
  outline: 0 solid rgba(var(--color-sf-outline-variant));
9635
9637
  outline-offset: 0;
9636
9638
  }
9637
- .e-menu-wrapper .e-ul .e-menu-item.e-selected,
9638
- .e-menu-container .e-ul .e-menu-item.e-selected {
9639
+ .e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
9640
+ .e-menu-container .e-ul .e-menu-item.e-selected,
9641
+ .e-menu-container .e-ul .e-menu-item.e-active-item {
9639
9642
  background-color: rgba(var(--color-sf-primary-container), 0.65);
9640
9643
  color: rgba(var(--color-sf-on-surface));
9641
9644
  outline: 0 solid rgba(var(--color-sf-primary-container), 0.65);
@@ -9706,8 +9709,9 @@ ejs-sidebar {
9706
9709
  .e-menu-container.e-inherit .e-menu {
9707
9710
  background: inherit;
9708
9711
  }
9709
- .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
9712
+ .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-active-item, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
9710
9713
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
9714
+ .e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
9711
9715
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
9712
9716
  background: rgba(0, 0, 0, 0.056);
9713
9717
  color: inherit;
package/styles/material3-dark.scss CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- @import 'ej2-base/styles/material3-dark-definition.scss';
2
+
3
3
  @import 'pager/material3-dark.scss';
4
4
  @import 'h-scroll/material3-dark.scss';
5
5
  @import 'v-scroll/material3-dark.scss';
package/styles/material3.css CHANGED
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
2
1
  :root {
3
2
  --color-sf-black: 0, 0, 0;
4
3
  --color-sf-white: 255, 255, 255;
@@ -1745,7 +1744,7 @@
1745
1744
  min-width: 18px;
1746
1745
  width: auto;
1747
1746
  font-size: 18px;
1748
- line-height: 18px;
1747
+ line-height: 16px;
1749
1748
  }
1750
1749
  .e-toolbar .e-toolbar-item .e-tbar-btn:hover, .e-toolbar .e-toolbar-item .e-tbar-btn:focus, .e-toolbar .e-toolbar-item .e-tbar-btn:active {
1751
1750
  padding: 0 7px;
@@ -9636,20 +9635,23 @@ ejs-sidebar {
9636
9635
  .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
9637
9636
  color: rgba(var(--color-sf-on-surface-variant));
9638
9637
  }
9639
- .e-menu-wrapper .e-menu .e-menu-item.e-selected,
9640
- .e-menu-container .e-menu .e-menu-item.e-selected {
9638
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
9639
+ .e-menu-container .e-menu .e-menu-item.e-selected,
9640
+ .e-menu-container .e-menu .e-menu-item.e-active-item {
9641
9641
  color: rgba(var(--color-sf-primary));
9642
9642
  outline: 0 solid rgba(var(--color-sf-primary), 0.08);
9643
9643
  outline-offset: 0;
9644
9644
  background: rgba(var(--color-sf-primary), 0.08);
9645
9645
  border-radius: 2px;
9646
9646
  }
9647
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
9648
- .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
9647
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-caret,
9648
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
9649
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
9649
9650
  color: rgba(var(--color-sf-primary));
9650
9651
  }
9651
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
9652
- .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
9652
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-menu-icon,
9653
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
9654
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
9653
9655
  color: rgba(var(--color-sf-primary));
9654
9656
  }
9655
9657
  .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -9690,8 +9692,9 @@ ejs-sidebar {
9690
9692
  outline: 0 solid rgba(var(--color-sf-outline-variant));
9691
9693
  outline-offset: 0;
9692
9694
  }
9693
- .e-menu-wrapper .e-ul .e-menu-item.e-selected,
9694
- .e-menu-container .e-ul .e-menu-item.e-selected {
9695
+ .e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
9696
+ .e-menu-container .e-ul .e-menu-item.e-selected,
9697
+ .e-menu-container .e-ul .e-menu-item.e-active-item {
9695
9698
  background-color: rgba(var(--color-sf-primary-container), 0.65);
9696
9699
  color: rgba(var(--color-sf-on-surface));
9697
9700
  outline: 0 solid rgba(var(--color-sf-primary-container), 0.65);
@@ -9762,8 +9765,9 @@ ejs-sidebar {
9762
9765
  .e-menu-container.e-inherit .e-menu {
9763
9766
  background: inherit;
9764
9767
  }
9765
- .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
9768
+ .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-active-item, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
9766
9769
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
9770
+ .e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
9767
9771
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
9768
9772
  background: rgba(0, 0, 0, 0.056);
9769
9773
  color: inherit;
package/styles/material3.scss CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- @import 'ej2-base/styles/material3-definition.scss';
2
+
3
3
  @import 'pager/material3.scss';
4
4
  @import 'h-scroll/material3.scss';
5
5
  @import 'v-scroll/material3.scss';
package/styles/menu/_theme.scss CHANGED
@@ -70,7 +70,8 @@
70
70
  }
71
71
  }
72
72
 
73
- &.e-selected {
73
+ &.e-selected,
74
+ &.e-active-item {
74
75
  color: $menu-selected-color;
75
76
  outline: $menu-li-selected-outline;
76
77
  outline-offset: $menu-li-selected-outline-offset;
@@ -150,7 +151,8 @@
150
151
  }
151
152
  }
152
153
 
153
- &.e-selected {
154
+ &.e-selected,
155
+ &.e-active-item {
154
156
  @if $skin-name == 'bootstrap4' {
155
157
  & .e-caret {
156
158
  color: $menu-icon-focussed-color;
@@ -170,7 +172,8 @@
170
172
  @include focused-color;
171
173
  }
172
174
 
173
- &.e-selected {
175
+ &.e-selected,
176
+ &.e-active-item {
174
177
  @include selected-color;
175
178
  }
176
179
 
@@ -270,6 +273,7 @@
270
273
  }
271
274
 
272
275
  & .e-menu .e-menu-item.e-selected,
276
+ & .e-menu .e-menu-item.e-active-item,
273
277
  & .e-menu .e-menu-item.e-focused {
274
278
  background: rgba(transparent, .056);
275
279
  color: inherit;
@@ -292,6 +296,7 @@
292
296
 
293
297
  @if $skin-name == 'bootstrap4' {
294
298
  & .e-selected .e-caret,
299
+ & .e-active-item .e-caret,
295
300
  & .e-caret {
296
301
  color: $submenu-color;
297
302
  }
package/styles/menu/bootstrap-dark.css CHANGED
@@ -946,19 +946,22 @@
946
946
  .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
947
947
  color: #f0f0f0;
948
948
  }
949
- .e-menu-wrapper .e-menu .e-menu-item.e-selected,
950
- .e-menu-container .e-menu .e-menu-item.e-selected {
949
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
950
+ .e-menu-container .e-menu .e-menu-item.e-selected,
951
+ .e-menu-container .e-menu .e-menu-item.e-active-item {
951
952
  color: #f0f0f0;
952
953
  outline: 0 solid #313131;
953
954
  outline-offset: 0;
954
955
  background: #313131;
955
956
  }
956
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
957
- .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
957
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-caret,
958
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
959
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
958
960
  color: #f0f0f0;
959
961
  }
960
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
961
- .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
962
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-menu-icon,
963
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
964
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
962
965
  color: #f0f0f0;
963
966
  }
964
967
  .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -999,8 +1002,9 @@
999
1002
  outline: 0 solid #505050;
1000
1003
  outline-offset: 0;
1001
1004
  }
1002
- .e-menu-wrapper .e-ul .e-menu-item.e-selected,
1003
- .e-menu-container .e-ul .e-menu-item.e-selected {
1005
+ .e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
1006
+ .e-menu-container .e-ul .e-menu-item.e-selected,
1007
+ .e-menu-container .e-ul .e-menu-item.e-active-item {
1004
1008
  background-color: #505050;
1005
1009
  color: #f0f0f0;
1006
1010
  outline: 0 solid #505050;
@@ -1071,8 +1075,9 @@
1071
1075
  .e-menu-container.e-inherit .e-menu {
1072
1076
  background: inherit;
1073
1077
  }
1074
- .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
1078
+ .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-active-item, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
1075
1079
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
1080
+ .e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
1076
1081
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
1077
1082
  background: rgba(0, 0, 0, 0.056);
1078
1083
  color: inherit;
package/styles/menu/bootstrap-dark.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/bootstrap-dark-definition.scss';
1
+ @import 'ej2-base/styles/definition/bootstrap-dark.scss';
2
2
  @import '../context-menu/bootstrap-dark-definition.scss';
3
3
  @import '../h-scroll/bootstrap-dark-definition.scss';
4
4
  @import '../v-scroll/bootstrap-dark-definition.scss';
package/styles/menu/bootstrap.css CHANGED
@@ -947,19 +947,22 @@
947
947
  .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
948
948
  color: #333;
949
949
  }
950
- .e-menu-wrapper .e-menu .e-menu-item.e-selected,
951
- .e-menu-container .e-menu .e-menu-item.e-selected {
950
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
951
+ .e-menu-container .e-menu .e-menu-item.e-selected,
952
+ .e-menu-container .e-menu .e-menu-item.e-active-item {
952
953
  color: #333;
953
954
  outline: 0 solid #ddd;
954
955
  outline-offset: 0;
955
956
  background: #ddd;
956
957
  }
957
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
958
- .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
958
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-caret,
959
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
960
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
959
961
  color: #333;
960
962
  }
961
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
962
- .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
963
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-menu-icon,
964
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
965
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
963
966
  color: #333;
964
967
  }
965
968
  .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -1000,8 +1003,9 @@
1000
1003
  outline: 0 solid #e6e6e6;
1001
1004
  outline-offset: 0;
1002
1005
  }
1003
- .e-menu-wrapper .e-ul .e-menu-item.e-selected,
1004
- .e-menu-container .e-ul .e-menu-item.e-selected {
1006
+ .e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
1007
+ .e-menu-container .e-ul .e-menu-item.e-selected,
1008
+ .e-menu-container .e-ul .e-menu-item.e-active-item {
1005
1009
  background-color: #e6e6e6;
1006
1010
  color: #555;
1007
1011
  outline: 0 solid #e6e6e6;
@@ -1072,8 +1076,9 @@
1072
1076
  .e-menu-container.e-inherit .e-menu {
1073
1077
  background: inherit;
1074
1078
  }
1075
- .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
1079
+ .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-active-item, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
1076
1080
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
1081
+ .e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
1077
1082
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
1078
1083
  background: rgba(0, 0, 0, 0.056);
1079
1084
  color: inherit;
package/styles/menu/bootstrap.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/bootstrap-definition.scss';
1
+ @import 'ej2-base/styles/definition/bootstrap.scss';
2
2
  @import '../context-menu/bootstrap-definition.scss';
3
3
  @import '../h-scroll/bootstrap-definition.scss';
4
4
  @import '../v-scroll/bootstrap-definition.scss';
package/styles/menu/bootstrap4.css CHANGED
@@ -943,20 +943,23 @@
943
943
  .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
944
944
  color: #0056b3;
945
945
  }
946
- .e-menu-wrapper .e-menu .e-menu-item.e-selected,
947
- .e-menu-container .e-menu .e-menu-item.e-selected {
946
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
947
+ .e-menu-container .e-menu .e-menu-item.e-selected,
948
+ .e-menu-container .e-menu .e-menu-item.e-active-item {
948
949
  color: #0056b3;
949
950
  outline: 0 solid #f2f4f6;
950
951
  outline-offset: 0;
951
952
  background: transparent;
952
953
  background: #f2f4f6;
953
954
  }
954
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
955
- .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
955
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-caret,
956
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
957
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
956
958
  color: #007bff;
957
959
  }
958
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
959
- .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
960
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-menu-icon,
961
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
962
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
960
963
  color: #007bff;
961
964
  }
962
965
  .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -1002,12 +1005,14 @@
1002
1005
  .e-menu-container .e-ul .e-menu-item.e-focused .e-menu-icon {
1003
1006
  color: #212529;
1004
1007
  }
1005
- .e-menu-wrapper .e-ul .e-menu-item.e-selected .e-caret,
1006
- .e-menu-container .e-ul .e-menu-item.e-selected .e-caret {
1008
+ .e-menu-wrapper .e-ul .e-menu-item.e-selected .e-caret, .e-menu-wrapper .e-ul .e-menu-item.e-active-item .e-caret,
1009
+ .e-menu-container .e-ul .e-menu-item.e-selected .e-caret,
1010
+ .e-menu-container .e-ul .e-menu-item.e-active-item .e-caret {
1007
1011
  color: #fff;
1008
1012
  }
1009
- .e-menu-wrapper .e-ul .e-menu-item.e-selected .e-menu-icon,
1010
- .e-menu-container .e-ul .e-menu-item.e-selected .e-menu-icon {
1013
+ .e-menu-wrapper .e-ul .e-menu-item.e-selected .e-menu-icon, .e-menu-wrapper .e-ul .e-menu-item.e-active-item .e-menu-icon,
1014
+ .e-menu-container .e-ul .e-menu-item.e-selected .e-menu-icon,
1015
+ .e-menu-container .e-ul .e-menu-item.e-active-item .e-menu-icon {
1011
1016
  color: #fff;
1012
1017
  }
1013
1018
  .e-menu-wrapper .e-ul .e-menu-item .e-menu-url,
@@ -1021,8 +1026,9 @@
1021
1026
  outline: 0 solid #e9ecef;
1022
1027
  outline-offset: 0;
1023
1028
  }
1024
- .e-menu-wrapper .e-ul .e-menu-item.e-selected,
1025
- .e-menu-container .e-ul .e-menu-item.e-selected {
1029
+ .e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
1030
+ .e-menu-container .e-ul .e-menu-item.e-selected,
1031
+ .e-menu-container .e-ul .e-menu-item.e-active-item {
1026
1032
  background-color: #007bff;
1027
1033
  color: #fff;
1028
1034
  outline: 0 solid #007bff;
@@ -1104,8 +1110,9 @@
1104
1110
  .e-menu-container.e-inherit .e-menu {
1105
1111
  background: inherit;
1106
1112
  }
1107
- .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
1113
+ .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-active-item, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
1108
1114
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
1115
+ .e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
1109
1116
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
1110
1117
  background: rgba(0, 0, 0, 0.056);
1111
1118
  color: inherit;
@@ -1123,8 +1130,9 @@
1123
1130
  .e-menu-container.e-hamburger ul {
1124
1131
  color: #212529;
1125
1132
  }
1126
- .e-menu-wrapper.e-hamburger ul .e-selected .e-caret, .e-menu-wrapper.e-hamburger ul .e-caret,
1133
+ .e-menu-wrapper.e-hamburger ul .e-selected .e-caret, .e-menu-wrapper.e-hamburger ul .e-active-item .e-caret, .e-menu-wrapper.e-hamburger ul .e-caret,
1127
1134
  .e-menu-container.e-hamburger ul .e-selected .e-caret,
1135
+ .e-menu-container.e-hamburger ul .e-active-item .e-caret,
1128
1136
  .e-menu-container.e-hamburger ul .e-caret {
1129
1137
  color: #212529;
1130
1138
  }
package/styles/menu/bootstrap4.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/bootstrap4-definition.scss';
1
+ @import 'ej2-base/styles/definition/bootstrap4.scss';
2
2
  @import '../context-menu/bootstrap4-definition.scss';
3
3
  @import '../h-scroll/bootstrap4-definition.scss';
4
4
  @import '../v-scroll/bootstrap4-definition.scss';
package/styles/menu/bootstrap5-dark.css CHANGED
@@ -941,19 +941,22 @@
941
941
  outline-offset: 0;
942
942
  background: #495057;
943
943
  }
944
- .e-menu-wrapper .e-menu .e-menu-item.e-selected,
945
- .e-menu-container .e-menu .e-menu-item.e-selected {
944
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
945
+ .e-menu-container .e-menu .e-menu-item.e-selected,
946
+ .e-menu-container .e-menu .e-menu-item.e-active-item {
946
947
  color: #fff;
947
948
  outline: 0 solid #495057;
948
949
  outline-offset: 0;
949
950
  background: #495057;
950
951
  }
951
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
952
- .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
952
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-caret,
953
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
954
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
953
955
  color: #adb5bd;
954
956
  }
955
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
956
- .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
957
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-menu-icon,
958
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
959
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
957
960
  color: #adb5bd;
958
961
  }
959
962
  .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -994,8 +997,9 @@
994
997
  outline: 0 solid #444c54;
995
998
  outline-offset: 0;
996
999
  }
997
- .e-menu-wrapper .e-ul .e-menu-item.e-selected,
998
- .e-menu-container .e-ul .e-menu-item.e-selected {
1000
+ .e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
1001
+ .e-menu-container .e-ul .e-menu-item.e-selected,
1002
+ .e-menu-container .e-ul .e-menu-item.e-active-item {
999
1003
  background-color: #0d6efd;
1000
1004
  color: #fff;
1001
1005
  outline: 0 solid #0d6efd;
@@ -1066,8 +1070,9 @@
1066
1070
  .e-menu-container.e-inherit .e-menu {
1067
1071
  background: inherit;
1068
1072
  }
1069
- .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
1073
+ .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-active-item, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
1070
1074
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
1075
+ .e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
1071
1076
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
1072
1077
  background: rgba(0, 0, 0, 0.056);
1073
1078
  color: inherit;
package/styles/menu/bootstrap5-dark.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/bootstrap5-dark-definition.scss';
1
+ @import 'ej2-base/styles/definition/bootstrap5-dark.scss';
2
2
  @import '../context-menu/bootstrap5-dark-definition.scss';
3
3
  @import '../h-scroll/bootstrap5-dark-definition.scss';
4
4
  @import '../v-scroll/bootstrap5-dark-definition.scss';
package/styles/menu/bootstrap5.css CHANGED
@@ -941,19 +941,22 @@
941
941
  outline-offset: 0;
942
942
  background: #dee2e6;
943
943
  }
944
- .e-menu-wrapper .e-menu .e-menu-item.e-selected,
945
- .e-menu-container .e-menu .e-menu-item.e-selected {
944
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
945
+ .e-menu-container .e-menu .e-menu-item.e-selected,
946
+ .e-menu-container .e-menu .e-menu-item.e-active-item {
946
947
  color: #212529;
947
948
  outline: 0 solid #dee2e6;
948
949
  outline-offset: 0;
949
950
  background: #dee2e6;
950
951
  }
951
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
952
- .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
952
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-caret,
953
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
954
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
953
955
  color: #6c757d;
954
956
  }
955
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
956
- .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
957
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-menu-icon,
958
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
959
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
957
960
  color: #6c757d;
958
961
  }
959
962
  .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -994,8 +997,9 @@
994
997
  outline: 0 solid #dee2e6;
995
998
  outline-offset: 0;
996
999
  }
997
- .e-menu-wrapper .e-ul .e-menu-item.e-selected,
998
- .e-menu-container .e-ul .e-menu-item.e-selected {
1000
+ .e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
1001
+ .e-menu-container .e-ul .e-menu-item.e-selected,
1002
+ .e-menu-container .e-ul .e-menu-item.e-active-item {
999
1003
  background-color: #0d6efd;
1000
1004
  color: #fff;
1001
1005
  outline: 0 solid #0d6efd;
@@ -1066,8 +1070,9 @@
1066
1070
  .e-menu-container.e-inherit .e-menu {
1067
1071
  background: inherit;
1068
1072
  }
1069
- .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
1073
+ .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-active-item, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
1070
1074
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
1075
+ .e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
1071
1076
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
1072
1077
  background: rgba(0, 0, 0, 0.056);
1073
1078
  color: inherit;
package/styles/menu/bootstrap5.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/bootstrap5-definition.scss';
1
+ @import 'ej2-base/styles/definition/bootstrap5.scss';
2
2
  @import '../context-menu/bootstrap5-definition.scss';
3
3
  @import '../h-scroll/bootstrap5-definition.scss';
4
4
  @import '../v-scroll/bootstrap5-definition.scss';
package/styles/menu/fabric-dark.css CHANGED
@@ -946,19 +946,22 @@
946
946
  .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
947
947
  color: #dadada;
948
948
  }
949
- .e-menu-wrapper .e-menu .e-menu-item.e-selected,
950
- .e-menu-container .e-menu .e-menu-item.e-selected {
949
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
950
+ .e-menu-container .e-menu .e-menu-item.e-selected,
951
+ .e-menu-container .e-menu .e-menu-item.e-active-item {
951
952
  color: #fff;
952
953
  outline: 0 solid #514f4f;
953
954
  outline-offset: 0;
954
955
  background: #514f4f;
955
956
  }
956
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
957
- .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
957
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-caret,
958
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
959
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
958
960
  color: #dadada;
959
961
  }
960
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
961
- .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
962
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-menu-icon,
963
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
964
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
962
965
  color: #dadada;
963
966
  }
964
967
  .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -999,8 +1002,9 @@
999
1002
  outline: 0 solid #414040;
1000
1003
  outline-offset: 0;
1001
1004
  }
1002
- .e-menu-wrapper .e-ul .e-menu-item.e-selected,
1003
- .e-menu-container .e-ul .e-menu-item.e-selected {
1005
+ .e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
1006
+ .e-menu-container .e-ul .e-menu-item.e-selected,
1007
+ .e-menu-container .e-ul .e-menu-item.e-active-item {
1004
1008
  background-color: #514f4f;
1005
1009
  color: #fff;
1006
1010
  outline: 0 solid #514f4f;
@@ -1071,8 +1075,9 @@
1071
1075
  .e-menu-container.e-inherit .e-menu {
1072
1076
  background: inherit;
1073
1077
  }
1074
- .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
1078
+ .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-active-item, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
1075
1079
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
1080
+ .e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
1076
1081
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
1077
1082
  background: rgba(0, 0, 0, 0.056);
1078
1083
  color: inherit;
package/styles/menu/fabric-dark.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/fabric-dark-definition.scss';
1
+ @import 'ej2-base/styles/definition/fabric-dark.scss';
2
2
  @import '../context-menu/fabric-dark-definition.scss';
3
3
  @import '../h-scroll/fabric-dark-definition.scss';
4
4
  @import '../v-scroll/fabric-dark-definition.scss';
package/styles/menu/fabric.css CHANGED
@@ -947,19 +947,22 @@
947
947
  .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
948
948
  color: #333;
949
949
  }
950
- .e-menu-wrapper .e-menu .e-menu-item.e-selected,
951
- .e-menu-container .e-menu .e-menu-item.e-selected {
950
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
951
+ .e-menu-container .e-menu .e-menu-item.e-selected,
952
+ .e-menu-container .e-menu .e-menu-item.e-active-item {
952
953
  color: #000;
953
954
  outline: 0 solid #dadada;
954
955
  outline-offset: 0;
955
956
  background: #dadada;
956
957
  }
957
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
958
- .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
958
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-caret,
959
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
960
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
959
961
  color: #333;
960
962
  }
961
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
962
- .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
963
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-menu-icon,
964
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
965
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
963
966
  color: #333;
964
967
  }
965
968
  .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -1000,8 +1003,9 @@
1000
1003
  outline: 0 solid #eaeaea;
1001
1004
  outline-offset: 0;
1002
1005
  }
1003
- .e-menu-wrapper .e-ul .e-menu-item.e-selected,
1004
- .e-menu-container .e-ul .e-menu-item.e-selected {
1006
+ .e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
1007
+ .e-menu-container .e-ul .e-menu-item.e-selected,
1008
+ .e-menu-container .e-ul .e-menu-item.e-active-item {
1005
1009
  background-color: #f4f4f4;
1006
1010
  color: #000;
1007
1011
  outline: 0 solid #f4f4f4;
@@ -1072,8 +1076,9 @@
1072
1076
  .e-menu-container.e-inherit .e-menu {
1073
1077
  background: inherit;
1074
1078
  }
1075
- .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
1079
+ .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-active-item, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
1076
1080
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
1081
+ .e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
1077
1082
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
1078
1083
  background: rgba(0, 0, 0, 0.056);
1079
1084
  color: inherit;
package/styles/menu/fabric.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/fabric-definition.scss';
1
+ @import 'ej2-base/styles/definition/fabric.scss';
2
2
  @import '../context-menu/fabric-definition.scss';
3
3
  @import '../h-scroll/fabric-definition.scss';
4
4
  @import '../v-scroll/fabric-definition.scss';