@syncfusion/ej2-navigations 22.2.5 → 22.2.8-184993

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 (382) hide show
  1. package/CHANGELOG.md +97 -5
  2. package/README.md +1 -1
  3. package/dist/ej2-navigations.min.js +1 -10
  4. package/dist/ej2-navigations.umd.min.js +1 -10
  5. package/dist/ej2-navigations.umd.min.js.map +1 -1
  6. package/dist/es6/ej2-navigations.es2015.js +189 -96
  7. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  8. package/dist/es6/ej2-navigations.es5.js +191 -94
  9. package/dist/es6/ej2-navigations.es5.js.map +1 -1
  10. package/dist/global/ej2-navigations.min.js +1 -10
  11. package/dist/global/ej2-navigations.min.js.map +1 -1
  12. package/dist/global/index.d.ts +0 -9
  13. package/package.json +165 -165
  14. package/src/accordion/accordion-model.d.ts +1 -1
  15. package/src/accordion/accordion.d.ts +3 -2
  16. package/src/accordion/accordion.js +34 -31
  17. package/src/appbar/appbar.js +1 -0
  18. package/src/breadcrumb/breadcrumb-model.d.ts +1 -1
  19. package/src/breadcrumb/breadcrumb.js +10 -2
  20. package/src/carousel/carousel.d.ts +1 -0
  21. package/src/carousel/carousel.js +12 -2
  22. package/src/common/menu-base.js +24 -10
  23. package/src/menu/menu-model.d.ts +1 -1
  24. package/src/sidebar/sidebar.js +2 -2
  25. package/src/tab/tab-model.d.ts +10 -2
  26. package/src/tab/tab.d.ts +10 -0
  27. package/src/tab/tab.js +29 -16
  28. package/src/toolbar/toolbar-model.d.ts +2 -0
  29. package/src/toolbar/toolbar.d.ts +3 -0
  30. package/src/toolbar/toolbar.js +63 -29
  31. package/src/treeview/treeview-model.d.ts +2 -2
  32. package/src/treeview/treeview.d.ts +2 -2
  33. package/src/treeview/treeview.js +19 -5
  34. package/styles/accordion/_theme.scss +5 -0
  35. package/styles/accordion/bootstrap-dark.css +3 -0
  36. package/styles/accordion/bootstrap-dark.scss +1 -1
  37. package/styles/accordion/bootstrap.css +3 -0
  38. package/styles/accordion/bootstrap.scss +1 -1
  39. package/styles/accordion/bootstrap4.css +3 -0
  40. package/styles/accordion/bootstrap4.scss +1 -1
  41. package/styles/accordion/bootstrap5-dark.css +3 -0
  42. package/styles/accordion/bootstrap5-dark.scss +1 -1
  43. package/styles/accordion/bootstrap5.css +3 -0
  44. package/styles/accordion/bootstrap5.scss +1 -1
  45. package/styles/accordion/fabric-dark.css +3 -0
  46. package/styles/accordion/fabric-dark.scss +1 -1
  47. package/styles/accordion/fabric.css +3 -0
  48. package/styles/accordion/fabric.scss +1 -1
  49. package/styles/accordion/fluent-dark.css +3 -0
  50. package/styles/accordion/fluent-dark.scss +1 -1
  51. package/styles/accordion/fluent.css +3 -0
  52. package/styles/accordion/fluent.scss +1 -1
  53. package/styles/accordion/highcontrast-light.css +3 -0
  54. package/styles/accordion/highcontrast-light.scss +1 -1
  55. package/styles/accordion/highcontrast.css +3 -0
  56. package/styles/accordion/highcontrast.scss +1 -1
  57. package/styles/accordion/material-dark.css +3 -1
  58. package/styles/accordion/material-dark.scss +1 -1
  59. package/styles/accordion/material.css +3 -1
  60. package/styles/accordion/material.scss +1 -1
  61. package/styles/accordion/material3-dark.css +3 -1
  62. package/styles/accordion/material3-dark.scss +1 -1
  63. package/styles/accordion/material3.css +3 -1
  64. package/styles/accordion/material3.scss +1 -1
  65. package/styles/accordion/tailwind-dark.css +3 -1
  66. package/styles/accordion/tailwind-dark.scss +1 -1
  67. package/styles/accordion/tailwind.css +3 -1
  68. package/styles/accordion/tailwind.scss +1 -1
  69. package/styles/appbar/bootstrap-dark.scss +1 -1
  70. package/styles/appbar/bootstrap.scss +1 -1
  71. package/styles/appbar/bootstrap4.scss +1 -1
  72. package/styles/appbar/bootstrap5-dark.scss +1 -1
  73. package/styles/appbar/bootstrap5.scss +1 -1
  74. package/styles/appbar/fabric-dark.scss +1 -1
  75. package/styles/appbar/fabric.scss +1 -1
  76. package/styles/appbar/fluent-dark.scss +1 -1
  77. package/styles/appbar/fluent.scss +1 -1
  78. package/styles/appbar/highcontrast-light.scss +1 -1
  79. package/styles/appbar/highcontrast.scss +1 -1
  80. package/styles/appbar/material-dark.css +0 -1
  81. package/styles/appbar/material-dark.scss +1 -1
  82. package/styles/appbar/material.css +0 -1
  83. package/styles/appbar/material.scss +1 -1
  84. package/styles/appbar/material3-dark.css +0 -1
  85. package/styles/appbar/material3-dark.scss +1 -1
  86. package/styles/appbar/material3.css +0 -1
  87. package/styles/appbar/material3.scss +1 -1
  88. package/styles/appbar/tailwind-dark.css +0 -1
  89. package/styles/appbar/tailwind-dark.scss +1 -1
  90. package/styles/appbar/tailwind.css +0 -1
  91. package/styles/appbar/tailwind.scss +1 -1
  92. package/styles/bootstrap-dark.css +17 -9
  93. package/styles/bootstrap.css +17 -9
  94. package/styles/bootstrap4.css +25 -14
  95. package/styles/bootstrap5-dark.css +21 -13
  96. package/styles/bootstrap5.css +21 -13
  97. package/styles/breadcrumb/bootstrap-dark.scss +1 -1
  98. package/styles/breadcrumb/bootstrap.scss +1 -1
  99. package/styles/breadcrumb/bootstrap4.scss +1 -1
  100. package/styles/breadcrumb/bootstrap5-dark.scss +1 -1
  101. package/styles/breadcrumb/bootstrap5.scss +1 -1
  102. package/styles/breadcrumb/fabric-dark.scss +1 -1
  103. package/styles/breadcrumb/fabric.scss +1 -1
  104. package/styles/breadcrumb/fluent-dark.scss +1 -1
  105. package/styles/breadcrumb/fluent.scss +1 -1
  106. package/styles/breadcrumb/highcontrast-light.scss +1 -1
  107. package/styles/breadcrumb/highcontrast.scss +1 -1
  108. package/styles/breadcrumb/material-dark.css +0 -1
  109. package/styles/breadcrumb/material-dark.scss +1 -1
  110. package/styles/breadcrumb/material.css +0 -1
  111. package/styles/breadcrumb/material.scss +1 -1
  112. package/styles/breadcrumb/material3-dark.css +0 -1
  113. package/styles/breadcrumb/material3-dark.scss +1 -1
  114. package/styles/breadcrumb/material3.css +0 -1
  115. package/styles/breadcrumb/material3.scss +1 -1
  116. package/styles/breadcrumb/tailwind-dark.css +0 -1
  117. package/styles/breadcrumb/tailwind-dark.scss +1 -1
  118. package/styles/breadcrumb/tailwind.css +0 -1
  119. package/styles/breadcrumb/tailwind.scss +1 -1
  120. package/styles/carousel/bootstrap-dark.scss +1 -1
  121. package/styles/carousel/bootstrap.scss +1 -1
  122. package/styles/carousel/bootstrap4.scss +1 -1
  123. package/styles/carousel/bootstrap5-dark.scss +1 -1
  124. package/styles/carousel/bootstrap5.scss +1 -1
  125. package/styles/carousel/fabric-dark.scss +1 -1
  126. package/styles/carousel/fabric.scss +1 -1
  127. package/styles/carousel/fluent-dark.scss +1 -1
  128. package/styles/carousel/fluent.scss +1 -1
  129. package/styles/carousel/highcontrast-light.scss +1 -1
  130. package/styles/carousel/highcontrast.scss +1 -1
  131. package/styles/carousel/material-dark.css +0 -1
  132. package/styles/carousel/material-dark.scss +1 -1
  133. package/styles/carousel/material.css +0 -1
  134. package/styles/carousel/material.scss +1 -1
  135. package/styles/carousel/material3-dark.css +0 -1
  136. package/styles/carousel/material3-dark.scss +1 -1
  137. package/styles/carousel/material3.css +0 -1
  138. package/styles/carousel/material3.scss +1 -1
  139. package/styles/carousel/tailwind-dark.css +0 -1
  140. package/styles/carousel/tailwind-dark.scss +1 -1
  141. package/styles/carousel/tailwind.css +0 -1
  142. package/styles/carousel/tailwind.scss +1 -1
  143. package/styles/context-menu/bootstrap-dark.scss +1 -1
  144. package/styles/context-menu/bootstrap.scss +1 -1
  145. package/styles/context-menu/bootstrap4.scss +1 -1
  146. package/styles/context-menu/bootstrap5-dark.scss +1 -1
  147. package/styles/context-menu/bootstrap5.scss +1 -1
  148. package/styles/context-menu/fabric-dark.scss +1 -1
  149. package/styles/context-menu/fabric.scss +1 -1
  150. package/styles/context-menu/fluent-dark.scss +1 -1
  151. package/styles/context-menu/fluent.scss +1 -1
  152. package/styles/context-menu/highcontrast-light.scss +1 -1
  153. package/styles/context-menu/highcontrast.scss +1 -1
  154. package/styles/context-menu/material-dark.css +0 -1
  155. package/styles/context-menu/material-dark.scss +1 -1
  156. package/styles/context-menu/material.css +0 -1
  157. package/styles/context-menu/material.scss +1 -1
  158. package/styles/context-menu/material3-dark.css +0 -1
  159. package/styles/context-menu/material3-dark.scss +1 -1
  160. package/styles/context-menu/material3.css +0 -1
  161. package/styles/context-menu/material3.scss +1 -1
  162. package/styles/context-menu/tailwind-dark.css +0 -1
  163. package/styles/context-menu/tailwind-dark.scss +1 -1
  164. package/styles/context-menu/tailwind.css +0 -1
  165. package/styles/context-menu/tailwind.scss +1 -1
  166. package/styles/fabric-dark.css +17 -9
  167. package/styles/fabric.css +17 -9
  168. package/styles/fluent-dark.css +17 -9
  169. package/styles/fluent.css +17 -9
  170. package/styles/h-scroll/bootstrap-dark.scss +1 -1
  171. package/styles/h-scroll/bootstrap.scss +1 -1
  172. package/styles/h-scroll/bootstrap4.scss +1 -1
  173. package/styles/h-scroll/bootstrap5-dark.scss +1 -1
  174. package/styles/h-scroll/bootstrap5.scss +1 -1
  175. package/styles/h-scroll/fabric-dark.scss +1 -1
  176. package/styles/h-scroll/fabric.scss +1 -1
  177. package/styles/h-scroll/fluent-dark.scss +1 -1
  178. package/styles/h-scroll/fluent.scss +1 -1
  179. package/styles/h-scroll/highcontrast-light.scss +1 -1
  180. package/styles/h-scroll/highcontrast.scss +1 -1
  181. package/styles/h-scroll/material-dark.css +0 -1
  182. package/styles/h-scroll/material-dark.scss +1 -1
  183. package/styles/h-scroll/material.css +0 -1
  184. package/styles/h-scroll/material.scss +1 -1
  185. package/styles/h-scroll/material3-dark.css +0 -1
  186. package/styles/h-scroll/material3-dark.scss +1 -1
  187. package/styles/h-scroll/material3.css +0 -1
  188. package/styles/h-scroll/material3.scss +1 -1
  189. package/styles/h-scroll/tailwind-dark.css +0 -1
  190. package/styles/h-scroll/tailwind-dark.scss +1 -1
  191. package/styles/h-scroll/tailwind.css +0 -1
  192. package/styles/h-scroll/tailwind.scss +1 -1
  193. package/styles/highcontrast-light.css +17 -9
  194. package/styles/highcontrast.css +17 -9
  195. package/styles/material-dark.css +17 -10
  196. package/styles/material.css +17 -10
  197. package/styles/material3-dark.css +19 -12
  198. package/styles/material3-dark.scss +1 -1
  199. package/styles/material3.css +19 -12
  200. package/styles/material3.scss +1 -1
  201. package/styles/menu/_theme.scss +8 -3
  202. package/styles/menu/bootstrap-dark.css +14 -9
  203. package/styles/menu/bootstrap-dark.scss +1 -1
  204. package/styles/menu/bootstrap.css +14 -9
  205. package/styles/menu/bootstrap.scss +1 -1
  206. package/styles/menu/bootstrap4.css +22 -14
  207. package/styles/menu/bootstrap4.scss +1 -1
  208. package/styles/menu/bootstrap5-dark.css +14 -9
  209. package/styles/menu/bootstrap5-dark.scss +1 -1
  210. package/styles/menu/bootstrap5.css +14 -9
  211. package/styles/menu/bootstrap5.scss +1 -1
  212. package/styles/menu/fabric-dark.css +14 -9
  213. package/styles/menu/fabric-dark.scss +1 -1
  214. package/styles/menu/fabric.css +14 -9
  215. package/styles/menu/fabric.scss +1 -1
  216. package/styles/menu/fluent-dark.css +14 -9
  217. package/styles/menu/fluent-dark.scss +1 -1
  218. package/styles/menu/fluent.css +14 -9
  219. package/styles/menu/fluent.scss +1 -1
  220. package/styles/menu/highcontrast-light.css +14 -9
  221. package/styles/menu/highcontrast-light.scss +1 -1
  222. package/styles/menu/highcontrast.css +14 -9
  223. package/styles/menu/highcontrast.scss +1 -1
  224. package/styles/menu/material-dark.css +14 -10
  225. package/styles/menu/material-dark.scss +1 -1
  226. package/styles/menu/material.css +14 -10
  227. package/styles/menu/material.scss +1 -1
  228. package/styles/menu/material3-dark.css +14 -10
  229. package/styles/menu/material3-dark.scss +1 -1
  230. package/styles/menu/material3.css +14 -10
  231. package/styles/menu/material3.scss +1 -1
  232. package/styles/menu/tailwind-dark.css +14 -10
  233. package/styles/menu/tailwind-dark.scss +1 -1
  234. package/styles/menu/tailwind.css +14 -10
  235. package/styles/menu/tailwind.scss +1 -1
  236. package/styles/pager/bootstrap-dark.scss +1 -1
  237. package/styles/pager/bootstrap.scss +1 -1
  238. package/styles/pager/bootstrap4.scss +1 -1
  239. package/styles/pager/bootstrap5-dark.scss +1 -1
  240. package/styles/pager/bootstrap5.scss +1 -1
  241. package/styles/pager/fabric-dark.scss +1 -1
  242. package/styles/pager/fabric.scss +1 -1
  243. package/styles/pager/fluent-dark.scss +1 -1
  244. package/styles/pager/fluent.scss +1 -1
  245. package/styles/pager/highcontrast-light.scss +1 -1
  246. package/styles/pager/highcontrast.scss +1 -1
  247. package/styles/pager/material-dark.css +0 -1
  248. package/styles/pager/material-dark.scss +1 -1
  249. package/styles/pager/material.css +0 -1
  250. package/styles/pager/material.scss +1 -1
  251. package/styles/pager/material3-dark.css +0 -1
  252. package/styles/pager/material3-dark.scss +1 -1
  253. package/styles/pager/material3.css +0 -1
  254. package/styles/pager/material3.scss +1 -1
  255. package/styles/pager/tailwind-dark.css +0 -1
  256. package/styles/pager/tailwind-dark.scss +1 -1
  257. package/styles/pager/tailwind.css +0 -1
  258. package/styles/pager/tailwind.scss +1 -1
  259. package/styles/sidebar/bootstrap-dark.scss +1 -1
  260. package/styles/sidebar/bootstrap.scss +1 -1
  261. package/styles/sidebar/bootstrap4.scss +1 -1
  262. package/styles/sidebar/bootstrap5-dark.scss +1 -1
  263. package/styles/sidebar/bootstrap5.scss +1 -1
  264. package/styles/sidebar/fabric-dark.scss +1 -1
  265. package/styles/sidebar/fabric.scss +1 -1
  266. package/styles/sidebar/fluent-dark.scss +1 -1
  267. package/styles/sidebar/fluent.scss +1 -1
  268. package/styles/sidebar/highcontrast-light.scss +1 -1
  269. package/styles/sidebar/highcontrast.scss +1 -1
  270. package/styles/sidebar/material-dark.css +0 -1
  271. package/styles/sidebar/material-dark.scss +1 -1
  272. package/styles/sidebar/material.css +0 -1
  273. package/styles/sidebar/material.scss +1 -1
  274. package/styles/sidebar/material3-dark.css +0 -1
  275. package/styles/sidebar/material3-dark.scss +1 -1
  276. package/styles/sidebar/material3.css +0 -1
  277. package/styles/sidebar/material3.scss +1 -1
  278. package/styles/sidebar/tailwind-dark.css +0 -1
  279. package/styles/sidebar/tailwind-dark.scss +1 -1
  280. package/styles/sidebar/tailwind.css +0 -1
  281. package/styles/sidebar/tailwind.scss +1 -1
  282. package/styles/tab/_tailwind-definition.scss +2 -2
  283. package/styles/tab/bootstrap-dark.scss +1 -1
  284. package/styles/tab/bootstrap.scss +1 -1
  285. package/styles/tab/bootstrap4.scss +1 -1
  286. package/styles/tab/bootstrap5-dark.scss +1 -1
  287. package/styles/tab/bootstrap5.scss +1 -1
  288. package/styles/tab/fabric-dark.scss +1 -1
  289. package/styles/tab/fabric.scss +1 -1
  290. package/styles/tab/fluent-dark.scss +1 -1
  291. package/styles/tab/fluent.scss +1 -1
  292. package/styles/tab/highcontrast-light.scss +1 -1
  293. package/styles/tab/highcontrast.scss +1 -1
  294. package/styles/tab/material-dark.css +0 -1
  295. package/styles/tab/material-dark.scss +1 -1
  296. package/styles/tab/material.css +0 -1
  297. package/styles/tab/material.scss +1 -1
  298. package/styles/tab/material3-dark.css +0 -1
  299. package/styles/tab/material3-dark.scss +1 -1
  300. package/styles/tab/material3.css +0 -1
  301. package/styles/tab/material3.scss +1 -1
  302. package/styles/tab/tailwind-dark.css +2 -3
  303. package/styles/tab/tailwind-dark.scss +1 -1
  304. package/styles/tab/tailwind.css +2 -3
  305. package/styles/tab/tailwind.scss +1 -1
  306. package/styles/tailwind-dark.css +21 -26
  307. package/styles/tailwind.css +21 -26
  308. package/styles/toolbar/_bootstrap5-definition.scss +4 -4
  309. package/styles/toolbar/_material3-definition.scss +1 -1
  310. package/styles/toolbar/_tailwind-definition.scss +2 -2
  311. package/styles/toolbar/bootstrap-dark.scss +1 -1
  312. package/styles/toolbar/bootstrap.scss +1 -1
  313. package/styles/toolbar/bootstrap4.scss +1 -1
  314. package/styles/toolbar/bootstrap5-dark.css +4 -4
  315. package/styles/toolbar/bootstrap5-dark.scss +1 -1
  316. package/styles/toolbar/bootstrap5.css +4 -4
  317. package/styles/toolbar/bootstrap5.scss +1 -1
  318. package/styles/toolbar/fabric-dark.scss +1 -1
  319. package/styles/toolbar/fabric.scss +1 -1
  320. package/styles/toolbar/fluent-dark.scss +1 -1
  321. package/styles/toolbar/fluent.scss +1 -1
  322. package/styles/toolbar/highcontrast-light.scss +1 -1
  323. package/styles/toolbar/highcontrast.scss +1 -1
  324. package/styles/toolbar/material-dark.css +0 -1
  325. package/styles/toolbar/material-dark.scss +1 -1
  326. package/styles/toolbar/material.css +0 -1
  327. package/styles/toolbar/material.scss +1 -1
  328. package/styles/toolbar/material3-dark.css +1 -2
  329. package/styles/toolbar/material3-dark.scss +1 -1
  330. package/styles/toolbar/material3.css +1 -2
  331. package/styles/toolbar/material3.scss +1 -1
  332. package/styles/toolbar/tailwind-dark.css +2 -3
  333. package/styles/toolbar/tailwind-dark.scss +1 -1
  334. package/styles/toolbar/tailwind.css +2 -3
  335. package/styles/toolbar/tailwind.scss +1 -1
  336. package/styles/treeview/_layout.scss +4 -1
  337. package/styles/treeview/bootstrap-dark.scss +1 -1
  338. package/styles/treeview/bootstrap.scss +1 -1
  339. package/styles/treeview/bootstrap4.scss +1 -1
  340. package/styles/treeview/bootstrap5-dark.scss +1 -1
  341. package/styles/treeview/bootstrap5.scss +1 -1
  342. package/styles/treeview/fabric-dark.scss +1 -1
  343. package/styles/treeview/fabric.scss +1 -1
  344. package/styles/treeview/fluent-dark.scss +1 -1
  345. package/styles/treeview/fluent.scss +1 -1
  346. package/styles/treeview/highcontrast-light.scss +1 -1
  347. package/styles/treeview/highcontrast.scss +1 -1
  348. package/styles/treeview/material-dark.css +0 -1
  349. package/styles/treeview/material-dark.scss +1 -1
  350. package/styles/treeview/material.css +0 -1
  351. package/styles/treeview/material.scss +1 -1
  352. package/styles/treeview/material3-dark.css +1 -2
  353. package/styles/treeview/material3-dark.scss +1 -1
  354. package/styles/treeview/material3.css +1 -2
  355. package/styles/treeview/material3.scss +1 -1
  356. package/styles/treeview/tailwind-dark.css +0 -1
  357. package/styles/treeview/tailwind-dark.scss +1 -1
  358. package/styles/treeview/tailwind.css +0 -1
  359. package/styles/treeview/tailwind.scss +1 -1
  360. package/styles/v-scroll/bootstrap-dark.scss +1 -1
  361. package/styles/v-scroll/bootstrap.scss +1 -1
  362. package/styles/v-scroll/bootstrap4.scss +1 -1
  363. package/styles/v-scroll/bootstrap5-dark.scss +1 -1
  364. package/styles/v-scroll/bootstrap5.scss +1 -1
  365. package/styles/v-scroll/fabric-dark.scss +1 -1
  366. package/styles/v-scroll/fabric.scss +1 -1
  367. package/styles/v-scroll/fluent-dark.scss +1 -1
  368. package/styles/v-scroll/fluent.scss +1 -1
  369. package/styles/v-scroll/highcontrast-light.scss +1 -1
  370. package/styles/v-scroll/highcontrast.scss +1 -1
  371. package/styles/v-scroll/material-dark.css +0 -1
  372. package/styles/v-scroll/material-dark.scss +1 -1
  373. package/styles/v-scroll/material.css +0 -1
  374. package/styles/v-scroll/material.scss +1 -1
  375. package/styles/v-scroll/material3-dark.css +0 -1
  376. package/styles/v-scroll/material3-dark.scss +1 -1
  377. package/styles/v-scroll/material3.css +0 -1
  378. package/styles/v-scroll/material3.scss +1 -1
  379. package/styles/v-scroll/tailwind-dark.css +0 -1
  380. package/styles/v-scroll/tailwind-dark.scss +1 -1
  381. package/styles/v-scroll/tailwind.css +0 -1
  382. package/styles/v-scroll/tailwind.scss +1 -1
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';
package/styles/menu/fluent-dark.css CHANGED
@@ -956,19 +956,22 @@
956
956
  .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
957
957
  color: #a19f9d;
958
958
  }
959
- .e-menu-wrapper .e-menu .e-menu-item.e-selected,
960
- .e-menu-container .e-menu .e-menu-item.e-selected {
959
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
960
+ .e-menu-container .e-menu .e-menu-item.e-selected,
961
+ .e-menu-container .e-menu .e-menu-item.e-active-item {
961
962
  color: #f3f2f1;
962
963
  outline: 0 solid #292827;
963
964
  outline-offset: 0;
964
965
  background: #323130;
965
966
  }
966
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
967
- .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
967
+ .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,
968
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
969
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
968
970
  color: #a19f9d;
969
971
  }
970
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
971
- .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
972
+ .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,
973
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
974
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
972
975
  color: #a19f9d;
973
976
  }
974
977
  .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -1017,8 +1020,9 @@
1017
1020
  outline: 0 solid #292827;
1018
1021
  outline-offset: 0;
1019
1022
  }
1020
- .e-menu-wrapper .e-ul .e-menu-item.e-selected,
1021
- .e-menu-container .e-ul .e-menu-item.e-selected {
1023
+ .e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
1024
+ .e-menu-container .e-ul .e-menu-item.e-selected,
1025
+ .e-menu-container .e-ul .e-menu-item.e-active-item {
1022
1026
  background-color: #3b3a39;
1023
1027
  color: #f3f2f1;
1024
1028
  outline: 0 solid #3b3a39;
@@ -1089,8 +1093,9 @@
1089
1093
  .e-menu-container.e-inherit .e-menu {
1090
1094
  background: inherit;
1091
1095
  }
1092
- .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
1096
+ .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,
1093
1097
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
1098
+ .e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
1094
1099
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
1095
1100
  background: rgba(0, 0, 0, 0.056);
1096
1101
  color: inherit;
package/styles/menu/fluent-dark.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/fluent-dark-definition.scss';
1
+ @import 'ej2-base/styles/definition/fluent-dark.scss';
2
2
  @import '../context-menu/fluent-dark-definition.scss';
3
3
  @import '../h-scroll/fluent-dark-definition.scss';
4
4
  @import '../v-scroll/fluent-dark-definition.scss';
package/styles/menu/fluent.css CHANGED
@@ -956,19 +956,22 @@
956
956
  .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
957
957
  color: #605e5c;
958
958
  }
959
- .e-menu-wrapper .e-menu .e-menu-item.e-selected,
960
- .e-menu-container .e-menu .e-menu-item.e-selected {
959
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
960
+ .e-menu-container .e-menu .e-menu-item.e-selected,
961
+ .e-menu-container .e-menu .e-menu-item.e-active-item {
961
962
  color: #201f1e;
962
963
  outline: 0 solid #edebe9;
963
964
  outline-offset: 0;
964
965
  background: #f3f2f1;
965
966
  }
966
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
967
- .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
967
+ .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,
968
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
969
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
968
970
  color: #605e5c;
969
971
  }
970
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
971
- .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
972
+ .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,
973
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
974
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
972
975
  color: #605e5c;
973
976
  }
974
977
  .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -1017,8 +1020,9 @@
1017
1020
  outline: 0 solid #edebe9;
1018
1021
  outline-offset: 0;
1019
1022
  }
1020
- .e-menu-wrapper .e-ul .e-menu-item.e-selected,
1021
- .e-menu-container .e-ul .e-menu-item.e-selected {
1023
+ .e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
1024
+ .e-menu-container .e-ul .e-menu-item.e-selected,
1025
+ .e-menu-container .e-ul .e-menu-item.e-active-item {
1022
1026
  background-color: #edebe9;
1023
1027
  color: #201f1e;
1024
1028
  outline: 0 solid #edebe9;
@@ -1089,8 +1093,9 @@
1089
1093
  .e-menu-container.e-inherit .e-menu {
1090
1094
  background: inherit;
1091
1095
  }
1092
- .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
1096
+ .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,
1093
1097
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
1098
+ .e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
1094
1099
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
1095
1100
  background: rgba(0, 0, 0, 0.056);
1096
1101
  color: inherit;
package/styles/menu/fluent.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/fluent-definition.scss';
1
+ @import 'ej2-base/styles/definition/fluent.scss';
2
2
  @import '../context-menu/fluent-definition.scss';
3
3
  @import '../h-scroll/fluent-definition.scss';
4
4
  @import '../v-scroll/fluent-definition.scss';
package/styles/menu/highcontrast-light.css CHANGED
@@ -946,19 +946,22 @@
946
946
  .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
947
947
  color: #000;
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 #808080;
953
954
  outline-offset: 0;
954
955
  background: #808080;
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: #000;
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: #000;
963
966
  }
964
967
  .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -999,8 +1002,9 @@
999
1002
  outline: 1px solid #757575;
1000
1003
  outline-offset: -1px;
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: #400074;
1005
1009
  color: #fff;
1006
1010
  outline: 0 solid #400074;
@@ -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/highcontrast-light.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/highcontrast-light-definition.scss';
1
+ @import 'ej2-base/styles/definition/highcontrast-light.scss';
2
2
  @import '../context-menu/highcontrast-light-definition.scss';
3
3
  @import '../h-scroll/highcontrast-light-definition.scss';
4
4
  @import '../v-scroll/highcontrast-light-definition.scss';
package/styles/menu/highcontrast.css CHANGED
@@ -947,19 +947,22 @@
947
947
  .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
948
948
  color: #fff;
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 #ffd939;
954
955
  outline-offset: 0;
955
956
  background: #ffd939;
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: #fff;
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: #fff;
964
967
  }
965
968
  .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -1000,8 +1003,9 @@
1000
1003
  outline: 1px solid #969696;
1001
1004
  outline-offset: -1px;
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: #ffd939;
1006
1010
  color: #000;
1007
1011
  outline: 0 solid #ffd939;
@@ -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/highcontrast.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/highcontrast-definition.scss';
1
+ @import 'ej2-base/styles/definition/highcontrast.scss';
2
2
  @import '../context-menu/highcontrast-definition.scss';
3
3
  @import '../h-scroll/highcontrast-definition.scss';
4
4
  @import '../v-scroll/highcontrast-definition.scss';
package/styles/menu/material-dark.css CHANGED
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
2
1
  @keyframes hscroll-popup-shadow {
3
2
  0% {
4
3
  border-color: rgba(255, 255, 255, 0.5);
@@ -965,19 +964,22 @@
965
964
  .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
966
965
  color: rgba(255, 255, 255, 0.7);
967
966
  }
968
- .e-menu-wrapper .e-menu .e-menu-item.e-selected,
969
- .e-menu-container .e-menu .e-menu-item.e-selected {
967
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
968
+ .e-menu-container .e-menu .e-menu-item.e-selected,
969
+ .e-menu-container .e-menu .e-menu-item.e-active-item {
970
970
  color: #fff;
971
971
  outline: 0 solid rgba(255, 255, 255, 0.18);
972
972
  outline-offset: 0;
973
973
  background: rgba(255, 255, 255, 0.18);
974
974
  }
975
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
976
- .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
975
+ .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,
976
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
977
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
977
978
  color: rgba(255, 255, 255, 0.7);
978
979
  }
979
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
980
- .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
980
+ .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,
981
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
982
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
981
983
  color: rgba(255, 255, 255, 0.7);
982
984
  }
983
985
  .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -1018,8 +1020,9 @@
1018
1020
  outline: 0 solid #616161;
1019
1021
  outline-offset: 0;
1020
1022
  }
1021
- .e-menu-wrapper .e-ul .e-menu-item.e-selected,
1022
- .e-menu-container .e-ul .e-menu-item.e-selected {
1023
+ .e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
1024
+ .e-menu-container .e-ul .e-menu-item.e-selected,
1025
+ .e-menu-container .e-ul .e-menu-item.e-active-item {
1023
1026
  background-color: rgba(255, 255, 255, 0.18);
1024
1027
  color: #fff;
1025
1028
  outline: 0 solid rgba(255, 255, 255, 0.18);
@@ -1090,8 +1093,9 @@
1090
1093
  .e-menu-container.e-inherit .e-menu {
1091
1094
  background: inherit;
1092
1095
  }
1093
- .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
1096
+ .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,
1094
1097
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
1098
+ .e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
1095
1099
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
1096
1100
  background: rgba(0, 0, 0, 0.056);
1097
1101
  color: inherit;
package/styles/menu/material-dark.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/material-dark-definition.scss';
1
+ @import 'ej2-base/styles/definition/material-dark.scss';
2
2
  @import '../context-menu/material-dark-definition.scss';
3
3
  @import '../h-scroll/material-dark-definition.scss';
4
4
  @import '../v-scroll/material-dark-definition.scss';