@syncfusion/ej2-navigations 22.2.11 → 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 (366) hide show
  1. package/CHANGELOG.md +9 -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 +67 -58
  6. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  7. package/dist/es6/ej2-navigations.es5.js +65 -56
  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.js +1 -0
  18. package/src/carousel/carousel.js +3 -2
  19. package/src/common/menu-base.js +7 -6
  20. package/src/menu/menu-model.d.ts +1 -1
  21. package/src/tab/tab-model.d.ts +4 -2
  22. package/src/tab/tab.d.ts +5 -0
  23. package/src/tab/tab.js +14 -15
  24. package/src/toolbar/toolbar-model.d.ts +2 -0
  25. package/src/toolbar/toolbar.d.ts +2 -0
  26. package/src/toolbar/toolbar.js +6 -1
  27. package/src/treeview/treeview-model.d.ts +1 -1
  28. package/src/treeview/treeview.d.ts +1 -1
  29. package/src/treeview/treeview.js +5 -5
  30. package/styles/accordion/_theme.scss +1 -0
  31. package/styles/accordion/bootstrap-dark.scss +1 -1
  32. package/styles/accordion/bootstrap.scss +1 -1
  33. package/styles/accordion/bootstrap4.scss +1 -1
  34. package/styles/accordion/bootstrap5-dark.scss +1 -1
  35. package/styles/accordion/bootstrap5.scss +1 -1
  36. package/styles/accordion/fabric-dark.scss +1 -1
  37. package/styles/accordion/fabric.scss +1 -1
  38. package/styles/accordion/fluent-dark.scss +1 -1
  39. package/styles/accordion/fluent.scss +1 -1
  40. package/styles/accordion/highcontrast-light.scss +1 -1
  41. package/styles/accordion/highcontrast.scss +1 -1
  42. package/styles/accordion/material-dark.css +0 -1
  43. package/styles/accordion/material-dark.scss +1 -1
  44. package/styles/accordion/material.css +0 -1
  45. package/styles/accordion/material.scss +1 -1
  46. package/styles/accordion/material3-dark.css +0 -1
  47. package/styles/accordion/material3-dark.scss +1 -1
  48. package/styles/accordion/material3.css +0 -1
  49. package/styles/accordion/material3.scss +1 -1
  50. package/styles/accordion/tailwind-dark.css +0 -1
  51. package/styles/accordion/tailwind-dark.scss +1 -1
  52. package/styles/accordion/tailwind.css +0 -1
  53. package/styles/accordion/tailwind.scss +1 -1
  54. package/styles/appbar/bootstrap-dark.scss +1 -1
  55. package/styles/appbar/bootstrap.scss +1 -1
  56. package/styles/appbar/bootstrap4.scss +1 -1
  57. package/styles/appbar/bootstrap5-dark.scss +1 -1
  58. package/styles/appbar/bootstrap5.scss +1 -1
  59. package/styles/appbar/fabric-dark.scss +1 -1
  60. package/styles/appbar/fabric.scss +1 -1
  61. package/styles/appbar/fluent-dark.scss +1 -1
  62. package/styles/appbar/fluent.scss +1 -1
  63. package/styles/appbar/highcontrast-light.scss +1 -1
  64. package/styles/appbar/highcontrast.scss +1 -1
  65. package/styles/appbar/material-dark.css +0 -1
  66. package/styles/appbar/material-dark.scss +1 -1
  67. package/styles/appbar/material.css +0 -1
  68. package/styles/appbar/material.scss +1 -1
  69. package/styles/appbar/material3-dark.css +0 -1
  70. package/styles/appbar/material3-dark.scss +1 -1
  71. package/styles/appbar/material3.css +0 -1
  72. package/styles/appbar/material3.scss +1 -1
  73. package/styles/appbar/tailwind-dark.css +0 -1
  74. package/styles/appbar/tailwind-dark.scss +1 -1
  75. package/styles/appbar/tailwind.css +0 -1
  76. package/styles/appbar/tailwind.scss +1 -1
  77. package/styles/bootstrap-dark.css +14 -9
  78. package/styles/bootstrap.css +14 -9
  79. package/styles/bootstrap4.css +22 -14
  80. package/styles/bootstrap5-dark.css +18 -13
  81. package/styles/bootstrap5.css +18 -13
  82. package/styles/breadcrumb/bootstrap-dark.scss +1 -1
  83. package/styles/breadcrumb/bootstrap.scss +1 -1
  84. package/styles/breadcrumb/bootstrap4.scss +1 -1
  85. package/styles/breadcrumb/bootstrap5-dark.scss +1 -1
  86. package/styles/breadcrumb/bootstrap5.scss +1 -1
  87. package/styles/breadcrumb/fabric-dark.scss +1 -1
  88. package/styles/breadcrumb/fabric.scss +1 -1
  89. package/styles/breadcrumb/fluent-dark.scss +1 -1
  90. package/styles/breadcrumb/fluent.scss +1 -1
  91. package/styles/breadcrumb/highcontrast-light.scss +1 -1
  92. package/styles/breadcrumb/highcontrast.scss +1 -1
  93. package/styles/breadcrumb/material-dark.css +0 -1
  94. package/styles/breadcrumb/material-dark.scss +1 -1
  95. package/styles/breadcrumb/material.css +0 -1
  96. package/styles/breadcrumb/material.scss +1 -1
  97. package/styles/breadcrumb/material3-dark.css +0 -1
  98. package/styles/breadcrumb/material3-dark.scss +1 -1
  99. package/styles/breadcrumb/material3.css +0 -1
  100. package/styles/breadcrumb/material3.scss +1 -1
  101. package/styles/breadcrumb/tailwind-dark.css +0 -1
  102. package/styles/breadcrumb/tailwind-dark.scss +1 -1
  103. package/styles/breadcrumb/tailwind.css +0 -1
  104. package/styles/breadcrumb/tailwind.scss +1 -1
  105. package/styles/carousel/bootstrap-dark.scss +1 -1
  106. package/styles/carousel/bootstrap.scss +1 -1
  107. package/styles/carousel/bootstrap4.scss +1 -1
  108. package/styles/carousel/bootstrap5-dark.scss +1 -1
  109. package/styles/carousel/bootstrap5.scss +1 -1
  110. package/styles/carousel/fabric-dark.scss +1 -1
  111. package/styles/carousel/fabric.scss +1 -1
  112. package/styles/carousel/fluent-dark.scss +1 -1
  113. package/styles/carousel/fluent.scss +1 -1
  114. package/styles/carousel/highcontrast-light.scss +1 -1
  115. package/styles/carousel/highcontrast.scss +1 -1
  116. package/styles/carousel/material-dark.css +0 -1
  117. package/styles/carousel/material-dark.scss +1 -1
  118. package/styles/carousel/material.css +0 -1
  119. package/styles/carousel/material.scss +1 -1
  120. package/styles/carousel/material3-dark.css +0 -1
  121. package/styles/carousel/material3-dark.scss +1 -1
  122. package/styles/carousel/material3.css +0 -1
  123. package/styles/carousel/material3.scss +1 -1
  124. package/styles/carousel/tailwind-dark.css +0 -1
  125. package/styles/carousel/tailwind-dark.scss +1 -1
  126. package/styles/carousel/tailwind.css +0 -1
  127. package/styles/carousel/tailwind.scss +1 -1
  128. package/styles/context-menu/bootstrap-dark.scss +1 -1
  129. package/styles/context-menu/bootstrap.scss +1 -1
  130. package/styles/context-menu/bootstrap4.scss +1 -1
  131. package/styles/context-menu/bootstrap5-dark.scss +1 -1
  132. package/styles/context-menu/bootstrap5.scss +1 -1
  133. package/styles/context-menu/fabric-dark.scss +1 -1
  134. package/styles/context-menu/fabric.scss +1 -1
  135. package/styles/context-menu/fluent-dark.scss +1 -1
  136. package/styles/context-menu/fluent.scss +1 -1
  137. package/styles/context-menu/highcontrast-light.scss +1 -1
  138. package/styles/context-menu/highcontrast.scss +1 -1
  139. package/styles/context-menu/material-dark.css +0 -1
  140. package/styles/context-menu/material-dark.scss +1 -1
  141. package/styles/context-menu/material.css +0 -1
  142. package/styles/context-menu/material.scss +1 -1
  143. package/styles/context-menu/material3-dark.css +0 -1
  144. package/styles/context-menu/material3-dark.scss +1 -1
  145. package/styles/context-menu/material3.css +0 -1
  146. package/styles/context-menu/material3.scss +1 -1
  147. package/styles/context-menu/tailwind-dark.css +0 -1
  148. package/styles/context-menu/tailwind-dark.scss +1 -1
  149. package/styles/context-menu/tailwind.css +0 -1
  150. package/styles/context-menu/tailwind.scss +1 -1
  151. package/styles/fabric-dark.css +14 -9
  152. package/styles/fabric.css +14 -9
  153. package/styles/fluent-dark.css +14 -9
  154. package/styles/fluent.css +14 -9
  155. package/styles/h-scroll/bootstrap-dark.scss +1 -1
  156. package/styles/h-scroll/bootstrap.scss +1 -1
  157. package/styles/h-scroll/bootstrap4.scss +1 -1
  158. package/styles/h-scroll/bootstrap5-dark.scss +1 -1
  159. package/styles/h-scroll/bootstrap5.scss +1 -1
  160. package/styles/h-scroll/fabric-dark.scss +1 -1
  161. package/styles/h-scroll/fabric.scss +1 -1
  162. package/styles/h-scroll/fluent-dark.scss +1 -1
  163. package/styles/h-scroll/fluent.scss +1 -1
  164. package/styles/h-scroll/highcontrast-light.scss +1 -1
  165. package/styles/h-scroll/highcontrast.scss +1 -1
  166. package/styles/h-scroll/material-dark.css +0 -1
  167. package/styles/h-scroll/material-dark.scss +1 -1
  168. package/styles/h-scroll/material.css +0 -1
  169. package/styles/h-scroll/material.scss +1 -1
  170. package/styles/h-scroll/material3-dark.css +0 -1
  171. package/styles/h-scroll/material3-dark.scss +1 -1
  172. package/styles/h-scroll/material3.css +0 -1
  173. package/styles/h-scroll/material3.scss +1 -1
  174. package/styles/h-scroll/tailwind-dark.css +0 -1
  175. package/styles/h-scroll/tailwind-dark.scss +1 -1
  176. package/styles/h-scroll/tailwind.css +0 -1
  177. package/styles/h-scroll/tailwind.scss +1 -1
  178. package/styles/highcontrast-light.css +14 -9
  179. package/styles/highcontrast.css +14 -9
  180. package/styles/material-dark.css +14 -10
  181. package/styles/material.css +14 -10
  182. package/styles/material3-dark.css +15 -11
  183. package/styles/material3-dark.scss +1 -1
  184. package/styles/material3.css +15 -11
  185. package/styles/material3.scss +1 -1
  186. package/styles/menu/_theme.scss +8 -3
  187. package/styles/menu/bootstrap-dark.css +14 -9
  188. package/styles/menu/bootstrap-dark.scss +1 -1
  189. package/styles/menu/bootstrap.css +14 -9
  190. package/styles/menu/bootstrap.scss +1 -1
  191. package/styles/menu/bootstrap4.css +22 -14
  192. package/styles/menu/bootstrap4.scss +1 -1
  193. package/styles/menu/bootstrap5-dark.css +14 -9
  194. package/styles/menu/bootstrap5-dark.scss +1 -1
  195. package/styles/menu/bootstrap5.css +14 -9
  196. package/styles/menu/bootstrap5.scss +1 -1
  197. package/styles/menu/fabric-dark.css +14 -9
  198. package/styles/menu/fabric-dark.scss +1 -1
  199. package/styles/menu/fabric.css +14 -9
  200. package/styles/menu/fabric.scss +1 -1
  201. package/styles/menu/fluent-dark.css +14 -9
  202. package/styles/menu/fluent-dark.scss +1 -1
  203. package/styles/menu/fluent.css +14 -9
  204. package/styles/menu/fluent.scss +1 -1
  205. package/styles/menu/highcontrast-light.css +14 -9
  206. package/styles/menu/highcontrast-light.scss +1 -1
  207. package/styles/menu/highcontrast.css +14 -9
  208. package/styles/menu/highcontrast.scss +1 -1
  209. package/styles/menu/material-dark.css +14 -10
  210. package/styles/menu/material-dark.scss +1 -1
  211. package/styles/menu/material.css +14 -10
  212. package/styles/menu/material.scss +1 -1
  213. package/styles/menu/material3-dark.css +14 -10
  214. package/styles/menu/material3-dark.scss +1 -1
  215. package/styles/menu/material3.css +14 -10
  216. package/styles/menu/material3.scss +1 -1
  217. package/styles/menu/tailwind-dark.css +14 -10
  218. package/styles/menu/tailwind-dark.scss +1 -1
  219. package/styles/menu/tailwind.css +14 -10
  220. package/styles/menu/tailwind.scss +1 -1
  221. package/styles/pager/bootstrap-dark.scss +1 -1
  222. package/styles/pager/bootstrap.scss +1 -1
  223. package/styles/pager/bootstrap4.scss +1 -1
  224. package/styles/pager/bootstrap5-dark.scss +1 -1
  225. package/styles/pager/bootstrap5.scss +1 -1
  226. package/styles/pager/fabric-dark.scss +1 -1
  227. package/styles/pager/fabric.scss +1 -1
  228. package/styles/pager/fluent-dark.scss +1 -1
  229. package/styles/pager/fluent.scss +1 -1
  230. package/styles/pager/highcontrast-light.scss +1 -1
  231. package/styles/pager/highcontrast.scss +1 -1
  232. package/styles/pager/material-dark.css +0 -1
  233. package/styles/pager/material-dark.scss +1 -1
  234. package/styles/pager/material.css +0 -1
  235. package/styles/pager/material.scss +1 -1
  236. package/styles/pager/material3-dark.css +0 -1
  237. package/styles/pager/material3-dark.scss +1 -1
  238. package/styles/pager/material3.css +0 -1
  239. package/styles/pager/material3.scss +1 -1
  240. package/styles/pager/tailwind-dark.css +0 -1
  241. package/styles/pager/tailwind-dark.scss +1 -1
  242. package/styles/pager/tailwind.css +0 -1
  243. package/styles/pager/tailwind.scss +1 -1
  244. package/styles/sidebar/bootstrap-dark.scss +1 -1
  245. package/styles/sidebar/bootstrap.scss +1 -1
  246. package/styles/sidebar/bootstrap4.scss +1 -1
  247. package/styles/sidebar/bootstrap5-dark.scss +1 -1
  248. package/styles/sidebar/bootstrap5.scss +1 -1
  249. package/styles/sidebar/fabric-dark.scss +1 -1
  250. package/styles/sidebar/fabric.scss +1 -1
  251. package/styles/sidebar/fluent-dark.scss +1 -1
  252. package/styles/sidebar/fluent.scss +1 -1
  253. package/styles/sidebar/highcontrast-light.scss +1 -1
  254. package/styles/sidebar/highcontrast.scss +1 -1
  255. package/styles/sidebar/material-dark.css +0 -1
  256. package/styles/sidebar/material-dark.scss +1 -1
  257. package/styles/sidebar/material.css +0 -1
  258. package/styles/sidebar/material.scss +1 -1
  259. package/styles/sidebar/material3-dark.css +0 -1
  260. package/styles/sidebar/material3-dark.scss +1 -1
  261. package/styles/sidebar/material3.css +0 -1
  262. package/styles/sidebar/material3.scss +1 -1
  263. package/styles/sidebar/tailwind-dark.css +0 -1
  264. package/styles/sidebar/tailwind-dark.scss +1 -1
  265. package/styles/sidebar/tailwind.css +0 -1
  266. package/styles/sidebar/tailwind.scss +1 -1
  267. package/styles/tab/_tailwind-definition.scss +2 -2
  268. package/styles/tab/bootstrap-dark.scss +1 -1
  269. package/styles/tab/bootstrap.scss +1 -1
  270. package/styles/tab/bootstrap4.scss +1 -1
  271. package/styles/tab/bootstrap5-dark.scss +1 -1
  272. package/styles/tab/bootstrap5.scss +1 -1
  273. package/styles/tab/fabric-dark.scss +1 -1
  274. package/styles/tab/fabric.scss +1 -1
  275. package/styles/tab/fluent-dark.scss +1 -1
  276. package/styles/tab/fluent.scss +1 -1
  277. package/styles/tab/highcontrast-light.scss +1 -1
  278. package/styles/tab/highcontrast.scss +1 -1
  279. package/styles/tab/material-dark.css +0 -1
  280. package/styles/tab/material-dark.scss +1 -1
  281. package/styles/tab/material.css +0 -1
  282. package/styles/tab/material.scss +1 -1
  283. package/styles/tab/material3-dark.css +0 -1
  284. package/styles/tab/material3-dark.scss +1 -1
  285. package/styles/tab/material3.css +0 -1
  286. package/styles/tab/material3.scss +1 -1
  287. package/styles/tab/tailwind-dark.css +2 -3
  288. package/styles/tab/tailwind-dark.scss +1 -1
  289. package/styles/tab/tailwind.css +2 -3
  290. package/styles/tab/tailwind.scss +1 -1
  291. package/styles/tailwind-dark.css +18 -26
  292. package/styles/tailwind.css +18 -26
  293. package/styles/toolbar/_bootstrap5-definition.scss +4 -4
  294. package/styles/toolbar/_material3-definition.scss +1 -1
  295. package/styles/toolbar/_tailwind-definition.scss +2 -2
  296. package/styles/toolbar/bootstrap-dark.scss +1 -1
  297. package/styles/toolbar/bootstrap.scss +1 -1
  298. package/styles/toolbar/bootstrap4.scss +1 -1
  299. package/styles/toolbar/bootstrap5-dark.css +4 -4
  300. package/styles/toolbar/bootstrap5-dark.scss +1 -1
  301. package/styles/toolbar/bootstrap5.css +4 -4
  302. package/styles/toolbar/bootstrap5.scss +1 -1
  303. package/styles/toolbar/fabric-dark.scss +1 -1
  304. package/styles/toolbar/fabric.scss +1 -1
  305. package/styles/toolbar/fluent-dark.scss +1 -1
  306. package/styles/toolbar/fluent.scss +1 -1
  307. package/styles/toolbar/highcontrast-light.scss +1 -1
  308. package/styles/toolbar/highcontrast.scss +1 -1
  309. package/styles/toolbar/material-dark.css +0 -1
  310. package/styles/toolbar/material-dark.scss +1 -1
  311. package/styles/toolbar/material.css +0 -1
  312. package/styles/toolbar/material.scss +1 -1
  313. package/styles/toolbar/material3-dark.css +1 -2
  314. package/styles/toolbar/material3-dark.scss +1 -1
  315. package/styles/toolbar/material3.css +1 -2
  316. package/styles/toolbar/material3.scss +1 -1
  317. package/styles/toolbar/tailwind-dark.css +2 -3
  318. package/styles/toolbar/tailwind-dark.scss +1 -1
  319. package/styles/toolbar/tailwind.css +2 -3
  320. package/styles/toolbar/tailwind.scss +1 -1
  321. package/styles/treeview/bootstrap-dark.scss +1 -1
  322. package/styles/treeview/bootstrap.scss +1 -1
  323. package/styles/treeview/bootstrap4.scss +1 -1
  324. package/styles/treeview/bootstrap5-dark.scss +1 -1
  325. package/styles/treeview/bootstrap5.scss +1 -1
  326. package/styles/treeview/fabric-dark.scss +1 -1
  327. package/styles/treeview/fabric.scss +1 -1
  328. package/styles/treeview/fluent-dark.scss +1 -1
  329. package/styles/treeview/fluent.scss +1 -1
  330. package/styles/treeview/highcontrast-light.scss +1 -1
  331. package/styles/treeview/highcontrast.scss +1 -1
  332. package/styles/treeview/material-dark.css +0 -1
  333. package/styles/treeview/material-dark.scss +1 -1
  334. package/styles/treeview/material.css +0 -1
  335. package/styles/treeview/material.scss +1 -1
  336. package/styles/treeview/material3-dark.css +0 -1
  337. package/styles/treeview/material3-dark.scss +1 -1
  338. package/styles/treeview/material3.css +0 -1
  339. package/styles/treeview/material3.scss +1 -1
  340. package/styles/treeview/tailwind-dark.css +0 -1
  341. package/styles/treeview/tailwind-dark.scss +1 -1
  342. package/styles/treeview/tailwind.css +0 -1
  343. package/styles/treeview/tailwind.scss +1 -1
  344. package/styles/v-scroll/bootstrap-dark.scss +1 -1
  345. package/styles/v-scroll/bootstrap.scss +1 -1
  346. package/styles/v-scroll/bootstrap4.scss +1 -1
  347. package/styles/v-scroll/bootstrap5-dark.scss +1 -1
  348. package/styles/v-scroll/bootstrap5.scss +1 -1
  349. package/styles/v-scroll/fabric-dark.scss +1 -1
  350. package/styles/v-scroll/fabric.scss +1 -1
  351. package/styles/v-scroll/fluent-dark.scss +1 -1
  352. package/styles/v-scroll/fluent.scss +1 -1
  353. package/styles/v-scroll/highcontrast-light.scss +1 -1
  354. package/styles/v-scroll/highcontrast.scss +1 -1
  355. package/styles/v-scroll/material-dark.css +0 -1
  356. package/styles/v-scroll/material-dark.scss +1 -1
  357. package/styles/v-scroll/material.css +0 -1
  358. package/styles/v-scroll/material.scss +1 -1
  359. package/styles/v-scroll/material3-dark.css +0 -1
  360. package/styles/v-scroll/material3-dark.scss +1 -1
  361. package/styles/v-scroll/material3.css +0 -1
  362. package/styles/v-scroll/material3.scss +1 -1
  363. package/styles/v-scroll/tailwind-dark.css +0 -1
  364. package/styles/v-scroll/tailwind-dark.scss +1 -1
  365. package/styles/v-scroll/tailwind.css +0 -1
  366. package/styles/v-scroll/tailwind.scss +1 -1
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';
package/styles/menu/material.css CHANGED
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
2
1
  /*! component's theme wise override definitions and variables */
3
2
  @keyframes hscroll-popup-shadow {
4
3
  0% {
@@ -967,19 +966,22 @@
967
966
  .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
968
967
  color: rgba(0, 0, 0, 0.54);
969
968
  }
970
- .e-menu-wrapper .e-menu .e-menu-item.e-selected,
971
- .e-menu-container .e-menu .e-menu-item.e-selected {
969
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
970
+ .e-menu-container .e-menu .e-menu-item.e-selected,
971
+ .e-menu-container .e-menu .e-menu-item.e-active-item {
972
972
  color: rgba(0, 0, 0, 0.87);
973
973
  outline: 0 solid #e0e0e0;
974
974
  outline-offset: 0;
975
975
  background: #e0e0e0;
976
976
  }
977
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
978
- .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
977
+ .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,
978
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
979
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
979
980
  color: rgba(0, 0, 0, 0.54);
980
981
  }
981
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
982
- .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
982
+ .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,
983
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
984
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
983
985
  color: rgba(0, 0, 0, 0.54);
984
986
  }
985
987
  .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -1020,8 +1022,9 @@
1020
1022
  outline: 0 solid rgba(0, 0, 0, 0.12);
1021
1023
  outline-offset: 0;
1022
1024
  }
1023
- .e-menu-wrapper .e-ul .e-menu-item.e-selected,
1024
- .e-menu-container .e-ul .e-menu-item.e-selected {
1025
+ .e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
1026
+ .e-menu-container .e-ul .e-menu-item.e-selected,
1027
+ .e-menu-container .e-ul .e-menu-item.e-active-item {
1025
1028
  background-color: #eee;
1026
1029
  color: rgba(0, 0, 0, 0.87);
1027
1030
  outline: 0 solid #eee;
@@ -1092,8 +1095,9 @@
1092
1095
  .e-menu-container.e-inherit .e-menu {
1093
1096
  background: inherit;
1094
1097
  }
1095
- .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
1098
+ .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,
1096
1099
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
1100
+ .e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
1097
1101
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
1098
1102
  background: rgba(0, 0, 0, 0.056);
1099
1103
  color: inherit;
package/styles/menu/material.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/material-definition.scss';
1
+ @import 'ej2-base/styles/definition/material.scss';
2
2
  @import '../context-menu/material-definition.scss';
3
3
  @import '../h-scroll/material-definition.scss';
4
4
  @import '../v-scroll/material-definition.scss';
package/styles/menu/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;
@@ -1015,20 +1014,23 @@
1015
1014
  .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
1016
1015
  color: rgba(var(--color-sf-on-surface-variant));
1017
1016
  }
1018
- .e-menu-wrapper .e-menu .e-menu-item.e-selected,
1019
- .e-menu-container .e-menu .e-menu-item.e-selected {
1017
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
1018
+ .e-menu-container .e-menu .e-menu-item.e-selected,
1019
+ .e-menu-container .e-menu .e-menu-item.e-active-item {
1020
1020
  color: rgba(var(--color-sf-primary));
1021
1021
  outline: 0 solid rgba(var(--color-sf-primary), 0.08);
1022
1022
  outline-offset: 0;
1023
1023
  background: rgba(var(--color-sf-primary), 0.08);
1024
1024
  border-radius: 2px;
1025
1025
  }
1026
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
1027
- .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
1026
+ .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,
1027
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
1028
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
1028
1029
  color: rgba(var(--color-sf-primary));
1029
1030
  }
1030
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
1031
- .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
1031
+ .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,
1032
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
1033
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
1032
1034
  color: rgba(var(--color-sf-primary));
1033
1035
  }
1034
1036
  .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -1069,8 +1071,9 @@
1069
1071
  outline: 0 solid rgba(var(--color-sf-outline-variant));
1070
1072
  outline-offset: 0;
1071
1073
  }
1072
- .e-menu-wrapper .e-ul .e-menu-item.e-selected,
1073
- .e-menu-container .e-ul .e-menu-item.e-selected {
1074
+ .e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
1075
+ .e-menu-container .e-ul .e-menu-item.e-selected,
1076
+ .e-menu-container .e-ul .e-menu-item.e-active-item {
1074
1077
  background-color: rgba(var(--color-sf-primary-container), 0.65);
1075
1078
  color: rgba(var(--color-sf-on-surface));
1076
1079
  outline: 0 solid rgba(var(--color-sf-primary-container), 0.65);
@@ -1141,8 +1144,9 @@
1141
1144
  .e-menu-container.e-inherit .e-menu {
1142
1145
  background: inherit;
1143
1146
  }
1144
- .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
1147
+ .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,
1145
1148
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
1149
+ .e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
1146
1150
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
1147
1151
  background: rgba(0, 0, 0, 0.056);
1148
1152
  color: inherit;
package/styles/menu/material3-dark.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/material3-dark-definition.scss';
1
+
2
2
 
3
3
  @import '../context-menu/material3-dark-definition.scss';
4
4
  @import '../h-scroll/material3-dark-definition.scss';
package/styles/menu/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;
@@ -1071,20 +1070,23 @@
1071
1070
  .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
1072
1071
  color: rgba(var(--color-sf-on-surface-variant));
1073
1072
  }
1074
- .e-menu-wrapper .e-menu .e-menu-item.e-selected,
1075
- .e-menu-container .e-menu .e-menu-item.e-selected {
1073
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
1074
+ .e-menu-container .e-menu .e-menu-item.e-selected,
1075
+ .e-menu-container .e-menu .e-menu-item.e-active-item {
1076
1076
  color: rgba(var(--color-sf-primary));
1077
1077
  outline: 0 solid rgba(var(--color-sf-primary), 0.08);
1078
1078
  outline-offset: 0;
1079
1079
  background: rgba(var(--color-sf-primary), 0.08);
1080
1080
  border-radius: 2px;
1081
1081
  }
1082
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
1083
- .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
1082
+ .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,
1083
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
1084
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
1084
1085
  color: rgba(var(--color-sf-primary));
1085
1086
  }
1086
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
1087
- .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
1087
+ .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,
1088
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
1089
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
1088
1090
  color: rgba(var(--color-sf-primary));
1089
1091
  }
1090
1092
  .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -1125,8 +1127,9 @@
1125
1127
  outline: 0 solid rgba(var(--color-sf-outline-variant));
1126
1128
  outline-offset: 0;
1127
1129
  }
1128
- .e-menu-wrapper .e-ul .e-menu-item.e-selected,
1129
- .e-menu-container .e-ul .e-menu-item.e-selected {
1130
+ .e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
1131
+ .e-menu-container .e-ul .e-menu-item.e-selected,
1132
+ .e-menu-container .e-ul .e-menu-item.e-active-item {
1130
1133
  background-color: rgba(var(--color-sf-primary-container), 0.65);
1131
1134
  color: rgba(var(--color-sf-on-surface));
1132
1135
  outline: 0 solid rgba(var(--color-sf-primary-container), 0.65);
@@ -1197,8 +1200,9 @@
1197
1200
  .e-menu-container.e-inherit .e-menu {
1198
1201
  background: inherit;
1199
1202
  }
1200
- .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
1203
+ .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,
1201
1204
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
1205
+ .e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
1202
1206
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
1203
1207
  background: rgba(0, 0, 0, 0.056);
1204
1208
  color: inherit;
package/styles/menu/material3.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/material3-definition.scss';
1
+
2
2
 
3
3
  @import '../context-menu/material3-definition.scss';
4
4
  @import '../h-scroll/material3-definition.scss';
package/styles/menu/tailwind-dark.css CHANGED
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
2
1
  /*! component's theme wise override definitions and variables */
3
2
  @keyframes hscroll-popup-shadow {
4
3
  0% {
@@ -960,19 +959,22 @@
960
959
  .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
961
960
  color: #d1d5db;
962
961
  }
963
- .e-menu-wrapper .e-menu .e-menu-item.e-selected,
964
- .e-menu-container .e-menu .e-menu-item.e-selected {
962
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
963
+ .e-menu-container .e-menu .e-menu-item.e-selected,
964
+ .e-menu-container .e-menu .e-menu-item.e-active-item {
965
965
  color: #fff;
966
966
  outline: 0 solid #4b5563;
967
967
  outline-offset: 0;
968
968
  background: #4b5563;
969
969
  }
970
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
971
- .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
970
+ .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,
971
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
972
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
972
973
  color: #fff;
973
974
  }
974
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
975
- .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
975
+ .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,
976
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
977
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
976
978
  color: #fff;
977
979
  }
978
980
  .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -1013,8 +1015,9 @@
1013
1015
  outline: 0 solid #4b5563;
1014
1016
  outline-offset: 0;
1015
1017
  }
1016
- .e-menu-wrapper .e-ul .e-menu-item.e-selected,
1017
- .e-menu-container .e-ul .e-menu-item.e-selected {
1018
+ .e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
1019
+ .e-menu-container .e-ul .e-menu-item.e-selected,
1020
+ .e-menu-container .e-ul .e-menu-item.e-active-item {
1018
1021
  background-color: #4b5563;
1019
1022
  color: #fff;
1020
1023
  outline: 0 solid #4b5563;
@@ -1085,8 +1088,9 @@
1085
1088
  .e-menu-container.e-inherit .e-menu {
1086
1089
  background: inherit;
1087
1090
  }
1088
- .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
1091
+ .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,
1089
1092
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
1093
+ .e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
1090
1094
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
1091
1095
  background: rgba(0, 0, 0, 0.056);
1092
1096
  color: inherit;
package/styles/menu/tailwind-dark.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/tailwind-dark-definition.scss';
1
+ @import 'ej2-base/styles/definition/tailwind-dark.scss';
2
2
  @import '../context-menu/tailwind-dark-definition.scss';
3
3
  @import '../h-scroll/tailwind-dark-definition.scss';
4
4
  @import '../v-scroll/tailwind-dark-definition.scss';
package/styles/menu/tailwind.css CHANGED
@@ -1,4 +1,3 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
2
1
  /*! component's theme wise override definitions and variables */
3
2
  @keyframes hscroll-popup-shadow {
4
3
  0% {
@@ -960,19 +959,22 @@
960
959
  .e-menu-container .e-menu .e-menu-item.e-focused .e-menu-icon {
961
960
  color: #6b7280;
962
961
  }
963
- .e-menu-wrapper .e-menu .e-menu-item.e-selected,
964
- .e-menu-container .e-menu .e-menu-item.e-selected {
962
+ .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item,
963
+ .e-menu-container .e-menu .e-menu-item.e-selected,
964
+ .e-menu-container .e-menu .e-menu-item.e-active-item {
965
965
  color: #111827;
966
966
  outline: 0 solid #e5e7eb;
967
967
  outline-offset: 0;
968
968
  background: #e5e7eb;
969
969
  }
970
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret,
971
- .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
970
+ .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,
971
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
972
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-caret {
972
973
  color: #111827;
973
974
  }
974
- .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-menu-icon,
975
- .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon {
975
+ .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,
976
+ .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
977
+ .e-menu-container .e-menu .e-menu-item.e-active-item .e-menu-icon {
976
978
  color: #111827;
977
979
  }
978
980
  .e-menu-wrapper .e-menu .e-menu-item.e-separator,
@@ -1013,8 +1015,9 @@
1013
1015
  outline: 0 solid #e5e7eb;
1014
1016
  outline-offset: 0;
1015
1017
  }
1016
- .e-menu-wrapper .e-ul .e-menu-item.e-selected,
1017
- .e-menu-container .e-ul .e-menu-item.e-selected {
1018
+ .e-menu-wrapper .e-ul .e-menu-item.e-selected, .e-menu-wrapper .e-ul .e-menu-item.e-active-item,
1019
+ .e-menu-container .e-ul .e-menu-item.e-selected,
1020
+ .e-menu-container .e-ul .e-menu-item.e-active-item {
1018
1021
  background-color: #f3f4f6;
1019
1022
  color: #111827;
1020
1023
  outline: 0 solid #f3f4f6;
@@ -1085,8 +1088,9 @@
1085
1088
  .e-menu-container.e-inherit .e-menu {
1086
1089
  background: inherit;
1087
1090
  }
1088
- .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
1091
+ .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,
1089
1092
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,
1093
+ .e-menu-container.e-inherit .e-menu .e-menu-item.e-active-item,
1090
1094
  .e-menu-container.e-inherit .e-menu .e-menu-item.e-focused {
1091
1095
  background: rgba(0, 0, 0, 0.056);
1092
1096
  color: inherit;
package/styles/menu/tailwind.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import 'ej2-base/styles/tailwind-definition.scss';
1
+ @import 'ej2-base/styles/definition/tailwind.scss';
2
2
  @import '../context-menu/tailwind-definition.scss';
3
3
  @import '../h-scroll/tailwind-definition.scss';
4
4
  @import '../v-scroll/tailwind-definition.scss';
package/styles/pager/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 'bootstrap-dark-definition.scss';
3
3
  @import 'icons/bootstrap-dark.scss';
4
4
  @import 'all.scss';
package/styles/pager/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 'bootstrap-definition.scss';
3
3
  @import 'icons/bootstrap.scss';
4
4
  @import 'all.scss';
package/styles/pager/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 'bootstrap4-definition.scss';
3
3
  @import 'icons/bootstrap4.scss';
4
4
  @import 'all.scss';