@syncfusion/ej2-navigations 28.1.39 → 28.2.3-1479479

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 (880) hide show
  1. package/.eslintrc.json +243 -260
  2. package/README.md +301 -301
  3. package/blazorGlobalSrc/accordion/accordion-model.d.ts +285 -0
  4. package/blazorGlobalSrc/accordion/accordion.d.ts +458 -0
  5. package/blazorGlobalSrc/accordion/accordion.js +1411 -0
  6. package/blazorGlobalSrc/accordion/index.d.ts +5 -0
  7. package/blazorGlobalSrc/accordion/index.js +4 -0
  8. package/blazorGlobalSrc/appbar/appbar-model.d.ts +76 -0
  9. package/blazorGlobalSrc/appbar/appbar.d.ts +115 -0
  10. package/blazorGlobalSrc/appbar/appbar.js +221 -0
  11. package/blazorGlobalSrc/appbar/index.d.ts +3 -0
  12. package/blazorGlobalSrc/appbar/index.js +2 -0
  13. package/blazorGlobalSrc/breadcrumb/breadcrumb-model.d.ts +170 -0
  14. package/blazorGlobalSrc/breadcrumb/breadcrumb.d.ts +297 -0
  15. package/blazorGlobalSrc/breadcrumb/breadcrumb.js +833 -0
  16. package/blazorGlobalSrc/breadcrumb/index.d.ts +5 -0
  17. package/blazorGlobalSrc/breadcrumb/index.js +4 -0
  18. package/blazorGlobalSrc/carousel/carousel-model.d.ts +282 -0
  19. package/blazorGlobalSrc/carousel/carousel.d.ts +439 -0
  20. package/blazorGlobalSrc/carousel/carousel.js +1353 -0
  21. package/blazorGlobalSrc/carousel/index.d.ts +3 -0
  22. package/blazorGlobalSrc/carousel/index.js +2 -0
  23. package/blazorGlobalSrc/common/h-scroll-model.d.ts +16 -0
  24. package/blazorGlobalSrc/common/h-scroll.d.ts +105 -0
  25. package/blazorGlobalSrc/common/h-scroll.js +499 -0
  26. package/blazorGlobalSrc/common/index.d.ts +9 -0
  27. package/blazorGlobalSrc/common/index.js +8 -0
  28. package/blazorGlobalSrc/common/menu-base-model.d.ts +308 -0
  29. package/blazorGlobalSrc/common/menu-base.d.ts +553 -0
  30. package/blazorGlobalSrc/common/menu-base.js +2502 -0
  31. package/blazorGlobalSrc/common/menu-scroll.d.ts +29 -0
  32. package/blazorGlobalSrc/common/menu-scroll.js +103 -0
  33. package/blazorGlobalSrc/common/v-scroll-model.d.ts +16 -0
  34. package/blazorGlobalSrc/common/v-scroll.d.ts +106 -0
  35. package/blazorGlobalSrc/common/v-scroll.js +471 -0
  36. package/blazorGlobalSrc/context-menu/context-menu-model.d.ts +47 -0
  37. package/blazorGlobalSrc/context-menu/context-menu.d.ts +101 -0
  38. package/blazorGlobalSrc/context-menu/context-menu.js +143 -0
  39. package/blazorGlobalSrc/context-menu/index.d.ts +5 -0
  40. package/blazorGlobalSrc/context-menu/index.js +4 -0
  41. package/blazorGlobalSrc/global.js +1 -0
  42. package/blazorGlobalSrc/index.d.ts +16 -0
  43. package/blazorGlobalSrc/index.js +16 -0
  44. package/blazorGlobalSrc/menu/index.d.ts +5 -0
  45. package/blazorGlobalSrc/menu/index.js +4 -0
  46. package/blazorGlobalSrc/menu/menu-model.d.ts +70 -0
  47. package/blazorGlobalSrc/menu/menu.d.ts +127 -0
  48. package/blazorGlobalSrc/menu/menu.js +288 -0
  49. package/blazorGlobalSrc/sidebar/index.d.ts +5 -0
  50. package/blazorGlobalSrc/sidebar/index.js +4 -0
  51. package/blazorGlobalSrc/sidebar/sidebar-model.d.ts +200 -0
  52. package/blazorGlobalSrc/sidebar/sidebar.d.ts +335 -0
  53. package/blazorGlobalSrc/sidebar/sidebar.js +729 -0
  54. package/blazorGlobalSrc/stepper/index.d.ts +3 -0
  55. package/blazorGlobalSrc/stepper/index.js +2 -0
  56. package/blazorGlobalSrc/stepper/stepper-model.d.ts +159 -0
  57. package/blazorGlobalSrc/stepper/stepper.d.ts +381 -0
  58. package/blazorGlobalSrc/stepper/stepper.js +1305 -0
  59. package/blazorGlobalSrc/stepper-base/index.d.ts +5 -0
  60. package/blazorGlobalSrc/stepper-base/index.js +4 -0
  61. package/blazorGlobalSrc/stepper-base/stepper-base-model.d.ts +121 -0
  62. package/blazorGlobalSrc/stepper-base/stepper-base.d.ts +184 -0
  63. package/blazorGlobalSrc/stepper-base/stepper-base.js +230 -0
  64. package/blazorGlobalSrc/tab/index.d.ts +5 -0
  65. package/blazorGlobalSrc/tab/index.js +4 -0
  66. package/blazorGlobalSrc/tab/tab-model.d.ts +408 -0
  67. package/blazorGlobalSrc/tab/tab.d.ts +715 -0
  68. package/blazorGlobalSrc/tab/tab.js +2564 -0
  69. package/blazorGlobalSrc/toolbar/index.d.ts +5 -0
  70. package/blazorGlobalSrc/toolbar/index.js +4 -0
  71. package/blazorGlobalSrc/toolbar/toolbar-model.d.ts +287 -0
  72. package/blazorGlobalSrc/toolbar/toolbar.d.ts +522 -0
  73. package/blazorGlobalSrc/toolbar/toolbar.js +2408 -0
  74. package/blazorGlobalSrc/treeview/index.d.ts +5 -0
  75. package/blazorGlobalSrc/treeview/index.js +4 -0
  76. package/blazorGlobalSrc/treeview/treeview-model.d.ts +630 -0
  77. package/blazorGlobalSrc/treeview/treeview.d.ts +1509 -0
  78. package/blazorGlobalSrc/treeview/treeview.js +5766 -0
  79. package/dist/ej2-navigations.min.js +1 -10
  80. package/dist/ej2-navigations.umd.min.js +1 -10
  81. package/dist/ej2-navigations.umd.min.js.map +1 -1
  82. package/dist/es6/ej2-navigations.es2015.js +116 -97
  83. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  84. package/dist/es6/ej2-navigations.es5.js +310 -291
  85. package/dist/es6/ej2-navigations.es5.js.map +1 -1
  86. package/dist/global/ej2-navigations.min.js +1 -10
  87. package/dist/global/ej2-navigations.min.js.map +1 -1
  88. package/dist/global/index.d.ts +0 -9
  89. package/dist/ts/undefined +285 -0
  90. package/license +10 -10
  91. package/package.json +166 -166
  92. package/src/accordion/accordion-model.d.ts +199 -199
  93. package/src/accordion/accordion.js +19 -19
  94. package/src/appbar/appbar-model.d.ts +51 -51
  95. package/src/appbar/appbar.js +19 -19
  96. package/src/breadcrumb/breadcrumb-model.d.ts +114 -114
  97. package/src/breadcrumb/breadcrumb.js +19 -19
  98. package/src/carousel/carousel-model.d.ts +204 -204
  99. package/src/carousel/carousel.js +19 -19
  100. package/src/common/h-scroll-model.d.ts +6 -6
  101. package/src/common/h-scroll.js +19 -19
  102. package/src/common/menu-base-model.d.ts +234 -234
  103. package/src/common/menu-base.js +35 -20
  104. package/src/common/v-scroll-model.d.ts +6 -6
  105. package/src/common/v-scroll.js +19 -19
  106. package/src/context-menu/context-menu-model.d.ts +29 -29
  107. package/src/context-menu/context-menu.js +19 -19
  108. package/src/menu/menu-model.d.ts +45 -45
  109. package/src/menu/menu.js +19 -19
  110. package/src/sidebar/sidebar-model.d.ts +189 -189
  111. package/src/sidebar/sidebar.js +19 -19
  112. package/src/stepper/stepper.js +19 -19
  113. package/src/stepper-base/stepper-base.js +19 -19
  114. package/src/tab/tab-model.d.ts +305 -305
  115. package/src/tab/tab.js +19 -19
  116. package/src/toolbar/toolbar-model.d.ts +209 -209
  117. package/src/toolbar/toolbar.js +19 -19
  118. package/src/treeview/treeview-model.d.ts +520 -520
  119. package/src/treeview/treeview.d.ts +2 -1
  120. package/src/treeview/treeview.js +28 -24
  121. package/styles/accordion/_all.scss +2 -2
  122. package/styles/accordion/_bds-definition.scss +167 -167
  123. package/styles/accordion/_bigger.scss +121 -121
  124. package/styles/accordion/_bootstrap-dark-definition.scss +169 -167
  125. package/styles/accordion/_bootstrap-definition.scss +167 -167
  126. package/styles/accordion/_bootstrap4-definition.scss +177 -175
  127. package/styles/accordion/_bootstrap5-definition.scss +168 -168
  128. package/styles/accordion/_bootstrap5.3-definition.scss +168 -168
  129. package/styles/accordion/_fabric-dark-definition.scss +171 -171
  130. package/styles/accordion/_fabric-definition.scss +171 -171
  131. package/styles/accordion/_fluent-definition.scss +168 -168
  132. package/styles/accordion/_fluent2-definition.scss +167 -167
  133. package/styles/accordion/_fusionnew-definition.scss +168 -168
  134. package/styles/accordion/_highcontrast-definition.scss +193 -193
  135. package/styles/accordion/_highcontrast-light-definition.scss +193 -193
  136. package/styles/accordion/_layout.scss +236 -236
  137. package/styles/accordion/_material-dark-definition.scss +171 -171
  138. package/styles/accordion/_material-definition.scss +165 -165
  139. package/styles/accordion/_material3-definition.scss +168 -168
  140. package/styles/accordion/_tailwind-definition.scss +167 -167
  141. package/styles/accordion/_tailwind3-definition.scss +168 -168
  142. package/styles/accordion/_theme.scss +418 -418
  143. package/styles/accordion/bootstrap-dark.css +12 -12
  144. package/styles/accordion/bootstrap4.css +4 -4
  145. package/styles/accordion/bootstrap5-dark.css +37 -37
  146. package/styles/accordion/bootstrap5.css +16 -16
  147. package/styles/accordion/fabric.css +11 -11
  148. package/styles/accordion/icons/_bds.scss +15 -15
  149. package/styles/accordion/icons/_bootstrap-dark.scss +15 -15
  150. package/styles/accordion/icons/_bootstrap.scss +15 -15
  151. package/styles/accordion/icons/_bootstrap4.scss +15 -15
  152. package/styles/accordion/icons/_bootstrap5.3.scss +15 -15
  153. package/styles/accordion/icons/_bootstrap5.scss +15 -15
  154. package/styles/accordion/icons/_fabric-dark.scss +15 -15
  155. package/styles/accordion/icons/_fabric.scss +15 -15
  156. package/styles/accordion/icons/_fluent.scss +15 -15
  157. package/styles/accordion/icons/_fluent2.scss +15 -15
  158. package/styles/accordion/icons/_fusionnew.scss +15 -15
  159. package/styles/accordion/icons/_highcontrast-light.scss +15 -15
  160. package/styles/accordion/icons/_highcontrast.scss +15 -15
  161. package/styles/accordion/icons/_material-dark.scss +15 -15
  162. package/styles/accordion/icons/_material.scss +15 -15
  163. package/styles/accordion/icons/_material3.scss +15 -15
  164. package/styles/accordion/icons/_tailwind.scss +15 -15
  165. package/styles/accordion/icons/_tailwind3.scss +15 -15
  166. package/styles/accordion/material3-dark.scss +1 -1
  167. package/styles/accordion/material3.scss +1 -1
  168. package/styles/accordion/tailwind-dark.css +2 -2
  169. package/styles/appbar/_all.scss +2 -2
  170. package/styles/appbar/_bds-definition.scss +24 -24
  171. package/styles/appbar/_bigger.scss +15 -15
  172. package/styles/appbar/_bootstrap-dark-definition.scss +6 -6
  173. package/styles/appbar/_bootstrap-definition.scss +6 -6
  174. package/styles/appbar/_bootstrap4-definition.scss +6 -6
  175. package/styles/appbar/_bootstrap5-definition.scss +6 -6
  176. package/styles/appbar/_bootstrap5.3-definition.scss +6 -6
  177. package/styles/appbar/_fabric-dark-definition.scss +6 -6
  178. package/styles/appbar/_fabric-definition.scss +6 -6
  179. package/styles/appbar/_fluent-definition.scss +6 -6
  180. package/styles/appbar/_fluent2-definition.scss +23 -23
  181. package/styles/appbar/_fusionnew-definition.scss +6 -6
  182. package/styles/appbar/_highcontrast-definition.scss +6 -6
  183. package/styles/appbar/_highcontrast-light-definition.scss +6 -6
  184. package/styles/appbar/_layout.scss +76 -76
  185. package/styles/appbar/_material-dark-definition.scss +6 -6
  186. package/styles/appbar/_material-definition.scss +6 -6
  187. package/styles/appbar/_material3-definition.scss +6 -6
  188. package/styles/appbar/_tailwind-definition.scss +6 -6
  189. package/styles/appbar/_tailwind3-definition.scss +6 -6
  190. package/styles/appbar/_theme.scss +216 -216
  191. package/styles/appbar/material3-dark.scss +1 -1
  192. package/styles/appbar/material3.scss +1 -1
  193. package/styles/bds-lite.css +70 -5
  194. package/styles/bds.css +72 -7
  195. package/styles/bootstrap-dark-lite.css +120 -55
  196. package/styles/bootstrap-dark.css +124 -59
  197. package/styles/bootstrap-lite.css +72 -7
  198. package/styles/bootstrap.css +76 -11
  199. package/styles/bootstrap4-lite.css +153 -88
  200. package/styles/bootstrap4.css +156 -91
  201. package/styles/bootstrap5-dark-lite.css +288 -229
  202. package/styles/bootstrap5-dark.css +291 -232
  203. package/styles/bootstrap5-lite.css +150 -91
  204. package/styles/bootstrap5.3-lite.css +88 -27
  205. package/styles/bootstrap5.3.css +96 -29
  206. package/styles/bootstrap5.css +153 -94
  207. package/styles/breadcrumb/_all.scss +2 -2
  208. package/styles/breadcrumb/_bds-definition.scss +60 -60
  209. package/styles/breadcrumb/_bigger.scss +168 -166
  210. package/styles/breadcrumb/_bootstrap-dark-definition.scss +54 -54
  211. package/styles/breadcrumb/_bootstrap-definition.scss +54 -54
  212. package/styles/breadcrumb/_bootstrap4-definition.scss +56 -54
  213. package/styles/breadcrumb/_bootstrap5-definition.scss +65 -63
  214. package/styles/breadcrumb/_bootstrap5.3-definition.scss +61 -61
  215. package/styles/breadcrumb/_fabric-dark-definition.scss +59 -59
  216. package/styles/breadcrumb/_fabric-definition.scss +59 -59
  217. package/styles/breadcrumb/_fluent-definition.scss +63 -63
  218. package/styles/breadcrumb/_fluent2-definition.scss +61 -61
  219. package/styles/breadcrumb/_fusionnew-definition.scss +65 -59
  220. package/styles/breadcrumb/_highcontrast-definition.scss +61 -61
  221. package/styles/breadcrumb/_highcontrast-light-definition.scss +61 -61
  222. package/styles/breadcrumb/_layout.scss +465 -449
  223. package/styles/breadcrumb/_material-dark-definition.scss +50 -50
  224. package/styles/breadcrumb/_material-definition.scss +50 -50
  225. package/styles/breadcrumb/_material3-definition.scss +60 -60
  226. package/styles/breadcrumb/_tailwind-definition.scss +60 -60
  227. package/styles/breadcrumb/_tailwind3-definition.scss +61 -61
  228. package/styles/breadcrumb/_theme.scss +296 -296
  229. package/styles/breadcrumb/bds.css +15 -0
  230. package/styles/breadcrumb/bootstrap-dark.css +17 -2
  231. package/styles/breadcrumb/bootstrap.css +15 -0
  232. package/styles/breadcrumb/bootstrap4.css +19 -4
  233. package/styles/breadcrumb/bootstrap5-dark.css +27 -12
  234. package/styles/breadcrumb/bootstrap5.3.css +15 -0
  235. package/styles/breadcrumb/bootstrap5.css +18 -3
  236. package/styles/breadcrumb/fabric-dark.css +18 -3
  237. package/styles/breadcrumb/fabric.css +15 -0
  238. package/styles/breadcrumb/fluent-dark.css +15 -0
  239. package/styles/breadcrumb/fluent.css +15 -0
  240. package/styles/breadcrumb/fluent2.css +15 -0
  241. package/styles/breadcrumb/highcontrast-light.css +15 -0
  242. package/styles/breadcrumb/highcontrast.css +15 -0
  243. package/styles/breadcrumb/icons/_bds.scss +23 -23
  244. package/styles/breadcrumb/icons/_bootstrap-dark.scss +12 -12
  245. package/styles/breadcrumb/icons/_bootstrap.scss +12 -12
  246. package/styles/breadcrumb/icons/_bootstrap4.scss +12 -12
  247. package/styles/breadcrumb/icons/_bootstrap5.3.scss +23 -23
  248. package/styles/breadcrumb/icons/_bootstrap5.scss +23 -23
  249. package/styles/breadcrumb/icons/_fabric-dark.scss +12 -12
  250. package/styles/breadcrumb/icons/_fabric.scss +12 -12
  251. package/styles/breadcrumb/icons/_fluent.scss +23 -23
  252. package/styles/breadcrumb/icons/_fluent2.scss +23 -23
  253. package/styles/breadcrumb/icons/_fusionnew.scss +23 -23
  254. package/styles/breadcrumb/icons/_highcontrast-light.scss +12 -12
  255. package/styles/breadcrumb/icons/_highcontrast.scss +12 -12
  256. package/styles/breadcrumb/icons/_material-dark.scss +23 -23
  257. package/styles/breadcrumb/icons/_material.scss +23 -23
  258. package/styles/breadcrumb/icons/_material3.scss +12 -12
  259. package/styles/breadcrumb/icons/_tailwind-dark.scss +23 -23
  260. package/styles/breadcrumb/icons/_tailwind.scss +23 -23
  261. package/styles/breadcrumb/icons/_tailwind3.scss +23 -23
  262. package/styles/breadcrumb/material-dark.css +15 -0
  263. package/styles/breadcrumb/material.css +15 -0
  264. package/styles/breadcrumb/material3-dark.css +15 -0
  265. package/styles/breadcrumb/material3-dark.scss +1 -1
  266. package/styles/breadcrumb/material3.css +15 -0
  267. package/styles/breadcrumb/material3.scss +1 -1
  268. package/styles/breadcrumb/tailwind-dark.css +15 -0
  269. package/styles/breadcrumb/tailwind.css +15 -0
  270. package/styles/breadcrumb/tailwind3.css +15 -0
  271. package/styles/carousel/_all.scss +2 -2
  272. package/styles/carousel/_bds-definition.scss +20 -20
  273. package/styles/carousel/_bootstrap-dark-definition.scss +20 -20
  274. package/styles/carousel/_bootstrap-definition.scss +20 -20
  275. package/styles/carousel/_bootstrap4-definition.scss +20 -20
  276. package/styles/carousel/_bootstrap5-definition.scss +20 -20
  277. package/styles/carousel/_bootstrap5.3-definition.scss +20 -20
  278. package/styles/carousel/_fabric-dark-definition.scss +20 -20
  279. package/styles/carousel/_fabric-definition.scss +20 -20
  280. package/styles/carousel/_fluent-definition.scss +20 -20
  281. package/styles/carousel/_fluent2-definition.scss +23 -23
  282. package/styles/carousel/_fusionnew-definition.scss +20 -20
  283. package/styles/carousel/_highcontrast-definition.scss +20 -20
  284. package/styles/carousel/_highcontrast-light-definition.scss +20 -20
  285. package/styles/carousel/_layout.scss +257 -257
  286. package/styles/carousel/_material-dark-definition.scss +20 -20
  287. package/styles/carousel/_material-definition.scss +20 -20
  288. package/styles/carousel/_material3-definition.scss +21 -21
  289. package/styles/carousel/_tailwind-definition.scss +20 -20
  290. package/styles/carousel/_tailwind3-definition.scss +24 -24
  291. package/styles/carousel/_theme.scss +108 -108
  292. package/styles/carousel/icons/_bds.scss +30 -30
  293. package/styles/carousel/icons/_bootstrap-dark.scss +30 -30
  294. package/styles/carousel/icons/_bootstrap.scss +30 -30
  295. package/styles/carousel/icons/_bootstrap4.scss +30 -30
  296. package/styles/carousel/icons/_bootstrap5.3.scss +30 -30
  297. package/styles/carousel/icons/_bootstrap5.scss +30 -30
  298. package/styles/carousel/icons/_fabric-dark.scss +30 -30
  299. package/styles/carousel/icons/_fabric.scss +30 -30
  300. package/styles/carousel/icons/_fluent.scss +30 -30
  301. package/styles/carousel/icons/_fluent2.scss +30 -30
  302. package/styles/carousel/icons/_fusionnew.scss +30 -30
  303. package/styles/carousel/icons/_highcontrast-light.scss +30 -30
  304. package/styles/carousel/icons/_highcontrast.scss +30 -30
  305. package/styles/carousel/icons/_material-dark.scss +30 -30
  306. package/styles/carousel/icons/_material.scss +30 -30
  307. package/styles/carousel/icons/_material3.scss +30 -30
  308. package/styles/carousel/icons/_tailwind.scss +30 -30
  309. package/styles/carousel/icons/_tailwind3.scss +30 -30
  310. package/styles/carousel/material3-dark.scss +1 -1
  311. package/styles/carousel/material3.scss +1 -1
  312. package/styles/context-menu/_all.scss +2 -2
  313. package/styles/context-menu/_bds-definition.scss +67 -67
  314. package/styles/context-menu/_bigger.scss +111 -111
  315. package/styles/context-menu/_bootstrap-dark-definition.scss +50 -50
  316. package/styles/context-menu/_bootstrap-definition.scss +50 -50
  317. package/styles/context-menu/_bootstrap4-definition.scss +52 -50
  318. package/styles/context-menu/_bootstrap5-definition.scss +52 -52
  319. package/styles/context-menu/_bootstrap5.3-definition.scss +52 -52
  320. package/styles/context-menu/_fabric-dark-definition.scss +50 -50
  321. package/styles/context-menu/_fabric-definition.scss +50 -50
  322. package/styles/context-menu/_fluent-definition.scss +51 -51
  323. package/styles/context-menu/_fluent2-definition.scss +52 -52
  324. package/styles/context-menu/_fusionnew-definition.scss +52 -51
  325. package/styles/context-menu/_highcontrast-definition.scss +50 -50
  326. package/styles/context-menu/_highcontrast-light-definition.scss +50 -50
  327. package/styles/context-menu/_layout-mixin.scss +140 -140
  328. package/styles/context-menu/_layout.scss +179 -174
  329. package/styles/context-menu/_material-dark-definition.scss +50 -50
  330. package/styles/context-menu/_material-definition.scss +50 -50
  331. package/styles/context-menu/_material3-definition.scss +51 -51
  332. package/styles/context-menu/_tailwind-definition.scss +52 -52
  333. package/styles/context-menu/_tailwind3-definition.scss +55 -55
  334. package/styles/context-menu/_theme-mixin.scss +91 -91
  335. package/styles/context-menu/_theme.scss +77 -69
  336. package/styles/context-menu/bds.css +7 -1
  337. package/styles/context-menu/bootstrap-dark.css +7 -1
  338. package/styles/context-menu/bootstrap.css +7 -1
  339. package/styles/context-menu/bootstrap4.css +8 -2
  340. package/styles/context-menu/bootstrap5-dark.css +14 -8
  341. package/styles/context-menu/bootstrap5.3.css +7 -1
  342. package/styles/context-menu/bootstrap5.css +7 -1
  343. package/styles/context-menu/fabric-dark.css +7 -1
  344. package/styles/context-menu/fabric.css +7 -1
  345. package/styles/context-menu/fluent-dark.css +7 -1
  346. package/styles/context-menu/fluent.css +7 -1
  347. package/styles/context-menu/fluent2.css +7 -1
  348. package/styles/context-menu/highcontrast-light.css +7 -1
  349. package/styles/context-menu/highcontrast.css +7 -1
  350. package/styles/context-menu/icons/_bds.scss +31 -31
  351. package/styles/context-menu/icons/_bootstrap-dark.scss +31 -31
  352. package/styles/context-menu/icons/_bootstrap.scss +31 -31
  353. package/styles/context-menu/icons/_bootstrap4.scss +31 -31
  354. package/styles/context-menu/icons/_bootstrap5.3.scss +31 -31
  355. package/styles/context-menu/icons/_bootstrap5.scss +31 -31
  356. package/styles/context-menu/icons/_fabric-dark.scss +31 -31
  357. package/styles/context-menu/icons/_fabric.scss +31 -31
  358. package/styles/context-menu/icons/_fluent.scss +31 -31
  359. package/styles/context-menu/icons/_fluent2.scss +31 -31
  360. package/styles/context-menu/icons/_fusionnew.scss +31 -31
  361. package/styles/context-menu/icons/_highcontrast-light.scss +31 -31
  362. package/styles/context-menu/icons/_highcontrast.scss +31 -31
  363. package/styles/context-menu/icons/_material-dark.scss +31 -31
  364. package/styles/context-menu/icons/_material.scss +31 -31
  365. package/styles/context-menu/icons/_material3.scss +31 -31
  366. package/styles/context-menu/icons/_tailwind-dark.scss +31 -31
  367. package/styles/context-menu/icons/_tailwind.scss +31 -31
  368. package/styles/context-menu/icons/_tailwind3.scss +31 -31
  369. package/styles/context-menu/material-dark.css +8 -1
  370. package/styles/context-menu/material.css +7 -1
  371. package/styles/context-menu/material3-dark.css +8 -1
  372. package/styles/context-menu/material3-dark.scss +1 -1
  373. package/styles/context-menu/material3.css +8 -1
  374. package/styles/context-menu/material3.scss +1 -1
  375. package/styles/context-menu/tailwind-dark.css +7 -1
  376. package/styles/context-menu/tailwind.css +7 -1
  377. package/styles/context-menu/tailwind3.css +7 -1
  378. package/styles/fabric-dark-lite.css +76 -11
  379. package/styles/fabric-dark.css +78 -13
  380. package/styles/fabric-lite.css +108 -43
  381. package/styles/fabric.css +110 -45
  382. package/styles/fluent-dark-lite.css +88 -25
  383. package/styles/fluent-dark.css +91 -28
  384. package/styles/fluent-lite.css +88 -25
  385. package/styles/fluent.css +91 -28
  386. package/styles/fluent2-lite.css +94 -36
  387. package/styles/fluent2.css +96 -38
  388. package/styles/h-scroll/_all.scss +2 -2
  389. package/styles/h-scroll/_bds-definition.scss +83 -83
  390. package/styles/h-scroll/_bigger.scss +39 -39
  391. package/styles/h-scroll/_bootstrap-dark-definition.scss +57 -57
  392. package/styles/h-scroll/_bootstrap-definition.scss +56 -56
  393. package/styles/h-scroll/_bootstrap4-definition.scss +58 -56
  394. package/styles/h-scroll/_bootstrap5-definition.scss +83 -83
  395. package/styles/h-scroll/_bootstrap5.3-definition.scss +83 -83
  396. package/styles/h-scroll/_fabric-dark-definition.scss +58 -58
  397. package/styles/h-scroll/_fabric-definition.scss +55 -55
  398. package/styles/h-scroll/_fluent-definition.scss +83 -83
  399. package/styles/h-scroll/_fluent2-definition.scss +83 -83
  400. package/styles/h-scroll/_fusionnew-definition.scss +83 -83
  401. package/styles/h-scroll/_highcontrast-definition.scss +56 -56
  402. package/styles/h-scroll/_highcontrast-light-definition.scss +59 -59
  403. package/styles/h-scroll/_layout.scss +160 -160
  404. package/styles/h-scroll/_material-dark-definition.scss +85 -85
  405. package/styles/h-scroll/_material-definition.scss +82 -82
  406. package/styles/h-scroll/_material3-definition.scss +83 -83
  407. package/styles/h-scroll/_tailwind-definition.scss +83 -83
  408. package/styles/h-scroll/_tailwind3-definition.scss +83 -83
  409. package/styles/h-scroll/_theme.scss +146 -146
  410. package/styles/h-scroll/bds.css +1 -1
  411. package/styles/h-scroll/bootstrap-dark.css +1 -1
  412. package/styles/h-scroll/bootstrap.css +1 -1
  413. package/styles/h-scroll/bootstrap4.css +6 -6
  414. package/styles/h-scroll/bootstrap5-dark.css +7 -7
  415. package/styles/h-scroll/bootstrap5.3.css +1 -1
  416. package/styles/h-scroll/bootstrap5.css +1 -1
  417. package/styles/h-scroll/fabric-dark.css +1 -1
  418. package/styles/h-scroll/fabric.css +2 -2
  419. package/styles/h-scroll/fluent-dark.css +1 -1
  420. package/styles/h-scroll/fluent.css +1 -1
  421. package/styles/h-scroll/fluent2.css +1 -1
  422. package/styles/h-scroll/highcontrast-light.css +1 -1
  423. package/styles/h-scroll/highcontrast.css +1 -1
  424. package/styles/h-scroll/icons/_bds.scss +49 -49
  425. package/styles/h-scroll/icons/_bootstrap-dark.scss +49 -49
  426. package/styles/h-scroll/icons/_bootstrap.scss +49 -49
  427. package/styles/h-scroll/icons/_bootstrap4.scss +49 -49
  428. package/styles/h-scroll/icons/_bootstrap5.3.scss +49 -49
  429. package/styles/h-scroll/icons/_bootstrap5.scss +49 -49
  430. package/styles/h-scroll/icons/_fabric-dark.scss +49 -49
  431. package/styles/h-scroll/icons/_fabric.scss +49 -49
  432. package/styles/h-scroll/icons/_fluent.scss +49 -49
  433. package/styles/h-scroll/icons/_fluent2.scss +49 -49
  434. package/styles/h-scroll/icons/_fusionnew.scss +49 -49
  435. package/styles/h-scroll/icons/_highcontrast-light.scss +49 -49
  436. package/styles/h-scroll/icons/_highcontrast.scss +49 -49
  437. package/styles/h-scroll/icons/_material-dark.scss +49 -49
  438. package/styles/h-scroll/icons/_material.scss +49 -49
  439. package/styles/h-scroll/icons/_material3.scss +49 -49
  440. package/styles/h-scroll/icons/_tailwind.scss +49 -49
  441. package/styles/h-scroll/icons/_tailwind3.scss +49 -49
  442. package/styles/h-scroll/material-dark.css +1 -1
  443. package/styles/h-scroll/material.css +1 -1
  444. package/styles/h-scroll/material3-dark.css +1 -1
  445. package/styles/h-scroll/material3-dark.scss +1 -1
  446. package/styles/h-scroll/material3.css +1 -1
  447. package/styles/h-scroll/material3.scss +1 -1
  448. package/styles/h-scroll/tailwind-dark.css +1 -1
  449. package/styles/h-scroll/tailwind.css +1 -1
  450. package/styles/h-scroll/tailwind3.css +1 -1
  451. package/styles/highcontrast-light-lite.css +70 -5
  452. package/styles/highcontrast-light.css +72 -7
  453. package/styles/highcontrast-lite.css +73 -8
  454. package/styles/highcontrast.css +75 -10
  455. package/styles/material-dark-lite.css +75 -9
  456. package/styles/material-dark.css +77 -11
  457. package/styles/material-lite.css +81 -16
  458. package/styles/material.css +83 -18
  459. package/styles/material3-dark-lite.css +81 -15
  460. package/styles/material3-dark.css +91 -20
  461. package/styles/material3-dark.scss +1 -1
  462. package/styles/material3-lite.css +81 -15
  463. package/styles/material3.css +91 -20
  464. package/styles/material3.scss +1 -1
  465. package/styles/menu/_all.scss +2 -2
  466. package/styles/menu/_bds-definition.scss +65 -65
  467. package/styles/menu/_bigger.scss +381 -381
  468. package/styles/menu/_bootstrap-dark-definition.scss +61 -61
  469. package/styles/menu/_bootstrap-definition.scss +65 -65
  470. package/styles/menu/_bootstrap4-definition.scss +66 -64
  471. package/styles/menu/_bootstrap5-definition.scss +66 -66
  472. package/styles/menu/_bootstrap5.3-definition.scss +66 -66
  473. package/styles/menu/_fabric-dark-definition.scss +61 -61
  474. package/styles/menu/_fabric-definition.scss +64 -64
  475. package/styles/menu/_fluent-definition.scss +66 -66
  476. package/styles/menu/_fluent2-definition.scss +67 -67
  477. package/styles/menu/_fusionnew-definition.scss +66 -66
  478. package/styles/menu/_highcontrast-definition.scss +65 -65
  479. package/styles/menu/_highcontrast-light-definition.scss +61 -61
  480. package/styles/menu/_layout.scss +501 -501
  481. package/styles/menu/_material-dark-definition.scss +61 -61
  482. package/styles/menu/_material-definition.scss +64 -64
  483. package/styles/menu/_material3-definition.scss +66 -66
  484. package/styles/menu/_tailwind-definition.scss +65 -65
  485. package/styles/menu/_tailwind3-definition.scss +66 -66
  486. package/styles/menu/_theme.scss +428 -418
  487. package/styles/menu/bootstrap4.css +13 -13
  488. package/styles/menu/bootstrap5-dark.css +14 -14
  489. package/styles/menu/fluent2.css +12 -3
  490. package/styles/menu/icons/_bds.scss +104 -104
  491. package/styles/menu/icons/_bootstrap-dark.scss +105 -105
  492. package/styles/menu/icons/_bootstrap.scss +104 -104
  493. package/styles/menu/icons/_bootstrap4.scss +104 -104
  494. package/styles/menu/icons/_bootstrap5.3.scss +104 -104
  495. package/styles/menu/icons/_bootstrap5.scss +104 -104
  496. package/styles/menu/icons/_fabric-dark.scss +104 -104
  497. package/styles/menu/icons/_fabric.scss +104 -104
  498. package/styles/menu/icons/_fluent.scss +104 -104
  499. package/styles/menu/icons/_fluent2.scss +104 -104
  500. package/styles/menu/icons/_fusionnew.scss +104 -104
  501. package/styles/menu/icons/_highcontrast-light.scss +104 -104
  502. package/styles/menu/icons/_highcontrast.scss +104 -104
  503. package/styles/menu/icons/_material-dark.scss +104 -104
  504. package/styles/menu/icons/_material.scss +104 -104
  505. package/styles/menu/icons/_material3.scss +104 -104
  506. package/styles/menu/icons/_tailwind-dark.scss +104 -104
  507. package/styles/menu/icons/_tailwind.scss +104 -104
  508. package/styles/menu/icons/_tailwind3.scss +104 -104
  509. package/styles/menu/material3-dark.scss +1 -1
  510. package/styles/menu/material3.scss +1 -1
  511. package/styles/pager/_all.scss +2 -2
  512. package/styles/pager/_bds-definition.scss +152 -152
  513. package/styles/pager/_bigger.scss +364 -363
  514. package/styles/pager/_bootstrap-dark-definition.scss +152 -151
  515. package/styles/pager/_bootstrap-definition.scss +151 -151
  516. package/styles/pager/_bootstrap4-definition.scss +152 -151
  517. package/styles/pager/_bootstrap5-definition.scss +166 -166
  518. package/styles/pager/_bootstrap5.3-definition.scss +166 -166
  519. package/styles/pager/_fabric-dark-definition.scss +149 -149
  520. package/styles/pager/_fabric-definition.scss +149 -149
  521. package/styles/pager/_fluent-definition.scss +153 -153
  522. package/styles/pager/_fluent2-definition.scss +152 -152
  523. package/styles/pager/_fusionnew-definition.scss +166 -166
  524. package/styles/pager/_highcontrast-definition.scss +149 -149
  525. package/styles/pager/_highcontrast-light-definition.scss +149 -149
  526. package/styles/pager/_layout.scss +776 -762
  527. package/styles/pager/_material-dark-definition.scss +150 -150
  528. package/styles/pager/_material-definition.scss +150 -150
  529. package/styles/pager/_material3-definition.scss +166 -166
  530. package/styles/pager/_tailwind-definition.scss +152 -152
  531. package/styles/pager/_tailwind3-definition.scss +166 -166
  532. package/styles/pager/_theme.scss +189 -189
  533. package/styles/pager/bds.css +13 -3
  534. package/styles/pager/bootstrap-dark.css +17 -7
  535. package/styles/pager/bootstrap.css +13 -3
  536. package/styles/pager/bootstrap4.css +14 -4
  537. package/styles/pager/bootstrap5-dark.css +21 -17
  538. package/styles/pager/bootstrap5.3.css +7 -3
  539. package/styles/pager/bootstrap5.css +12 -8
  540. package/styles/pager/fabric-dark.css +13 -3
  541. package/styles/pager/fabric.css +15 -5
  542. package/styles/pager/fluent-dark.css +14 -4
  543. package/styles/pager/fluent.css +14 -4
  544. package/styles/pager/fluent2.css +16 -3
  545. package/styles/pager/highcontrast-light.css +13 -3
  546. package/styles/pager/highcontrast.css +13 -3
  547. package/styles/pager/icons/_bds.scss +50 -50
  548. package/styles/pager/icons/_bootstrap-dark.scss +50 -50
  549. package/styles/pager/icons/_bootstrap.scss +50 -50
  550. package/styles/pager/icons/_bootstrap4.scss +50 -50
  551. package/styles/pager/icons/_bootstrap5.3.scss +50 -50
  552. package/styles/pager/icons/_bootstrap5.scss +50 -50
  553. package/styles/pager/icons/_fabric-dark.scss +50 -50
  554. package/styles/pager/icons/_fabric.scss +50 -50
  555. package/styles/pager/icons/_fluent.scss +50 -50
  556. package/styles/pager/icons/_fluent2.scss +50 -50
  557. package/styles/pager/icons/_fusionnew.scss +50 -50
  558. package/styles/pager/icons/_highcontrast-light.scss +50 -50
  559. package/styles/pager/icons/_highcontrast.scss +46 -46
  560. package/styles/pager/icons/_material-dark.scss +50 -50
  561. package/styles/pager/icons/_material.scss +46 -46
  562. package/styles/pager/icons/_material3.scss +50 -50
  563. package/styles/pager/icons/_tailwind.scss +50 -50
  564. package/styles/pager/icons/_tailwind3.scss +50 -50
  565. package/styles/pager/material-dark.css +13 -3
  566. package/styles/pager/material.css +13 -3
  567. package/styles/pager/material3-dark.css +20 -5
  568. package/styles/pager/material3-dark.scss +1 -1
  569. package/styles/pager/material3.css +20 -5
  570. package/styles/pager/material3.scss +1 -1
  571. package/styles/pager/tailwind-dark.css +13 -3
  572. package/styles/pager/tailwind.css +13 -3
  573. package/styles/pager/tailwind3.css +14 -4
  574. package/styles/sidebar/_all.scss +3 -3
  575. package/styles/sidebar/_bds-definition.scss +53 -53
  576. package/styles/sidebar/_bootstrap-dark-definition.scss +4 -4
  577. package/styles/sidebar/_bootstrap-definition.scss +4 -4
  578. package/styles/sidebar/_bootstrap4-definition.scss +4 -4
  579. package/styles/sidebar/_bootstrap5-definition.scss +6 -6
  580. package/styles/sidebar/_bootstrap5.3-definition.scss +6 -6
  581. package/styles/sidebar/_fabric-dark-definition.scss +4 -4
  582. package/styles/sidebar/_fabric-definition.scss +4 -4
  583. package/styles/sidebar/_fluent-definition.scss +6 -6
  584. package/styles/sidebar/_fluent2-definition.scss +8 -8
  585. package/styles/sidebar/_fusionnew-definition.scss +6 -6
  586. package/styles/sidebar/_highcontrast-definition.scss +4 -4
  587. package/styles/sidebar/_highcontrast-light-definition.scss +4 -4
  588. package/styles/sidebar/_icons.scss +1 -1
  589. package/styles/sidebar/_layout.scss +1 -1
  590. package/styles/sidebar/_material-dark-definition.scss +4 -4
  591. package/styles/sidebar/_material-definition.scss +6 -6
  592. package/styles/sidebar/_material3-definition.scss +4 -4
  593. package/styles/sidebar/_tailwind-definition.scss +6 -6
  594. package/styles/sidebar/_tailwind3-definition.scss +6 -6
  595. package/styles/sidebar/_theme.scss +251 -251
  596. package/styles/sidebar/bootstrap5-dark.css +1 -1
  597. package/styles/sidebar/material3-dark.scss +1 -1
  598. package/styles/sidebar/material3.scss +1 -1
  599. package/styles/stepper/_bds-definition.scss +72 -72
  600. package/styles/stepper/_bigger.scss +53 -53
  601. package/styles/stepper/_bootstrap4-definition.scss +4 -2
  602. package/styles/stepper/_bootstrap5.3-definition.scss +72 -72
  603. package/styles/stepper/_fluent2-definition.scss +72 -72
  604. package/styles/stepper/_material-dark-definition.scss +4 -2
  605. package/styles/stepper/_material-definition.scss +7 -5
  606. package/styles/stepper/_tailwind3-definition.scss +72 -72
  607. package/styles/stepper/bootstrap-dark.css +2 -2
  608. package/styles/stepper/bootstrap4.css +2 -2
  609. package/styles/stepper/bootstrap5-dark.css +20 -20
  610. package/styles/stepper/bootstrap5.css +2 -2
  611. package/styles/stepper/fabric-dark.css +2 -2
  612. package/styles/stepper/fabric.css +2 -2
  613. package/styles/stepper/fluent-dark.css +1 -1
  614. package/styles/stepper/fluent.css +1 -1
  615. package/styles/stepper/icons/_bds.scss +5 -5
  616. package/styles/stepper/icons/_bootstrap5.3.scss +5 -5
  617. package/styles/stepper/icons/_fluent2.scss +5 -5
  618. package/styles/stepper/icons/_tailwind3.scss +5 -5
  619. package/styles/stepper/material-dark.css +2 -2
  620. package/styles/stepper/material.css +8 -8
  621. package/styles/stepper/material3-dark.scss +1 -1
  622. package/styles/stepper/material3.scss +1 -1
  623. package/styles/tab/_all.scss +2 -2
  624. package/styles/tab/_bds-definition.scss +661 -661
  625. package/styles/tab/_bigger.scss +1276 -1276
  626. package/styles/tab/_bootstrap-dark-definition.scss +630 -628
  627. package/styles/tab/_bootstrap-definition.scss +629 -629
  628. package/styles/tab/_bootstrap4-definition.scss +637 -635
  629. package/styles/tab/_bootstrap5-definition.scss +635 -633
  630. package/styles/tab/_bootstrap5.3-definition.scss +636 -634
  631. package/styles/tab/_fabric-dark-definition.scss +641 -641
  632. package/styles/tab/_fabric-definition.scss +643 -643
  633. package/styles/tab/_fluent-definition.scss +637 -635
  634. package/styles/tab/_fluent2-definition.scss +664 -664
  635. package/styles/tab/_fusionnew-definition.scss +632 -632
  636. package/styles/tab/_highcontrast-definition.scss +667 -667
  637. package/styles/tab/_highcontrast-light-definition.scss +666 -666
  638. package/styles/tab/_icons.scss +34 -34
  639. package/styles/tab/_layout.scss +2191 -2187
  640. package/styles/tab/_material-dark-definition.scss +646 -646
  641. package/styles/tab/_material-definition.scss +645 -645
  642. package/styles/tab/_material3-definition.scss +634 -634
  643. package/styles/tab/_tailwind-definition.scss +648 -648
  644. package/styles/tab/_tailwind3-definition.scss +634 -634
  645. package/styles/tab/_theme.scss +1580 -1580
  646. package/styles/tab/bds.css +5 -0
  647. package/styles/tab/bootstrap-dark.css +35 -30
  648. package/styles/tab/bootstrap.css +7 -2
  649. package/styles/tab/bootstrap4.css +38 -33
  650. package/styles/tab/bootstrap5-dark.css +60 -55
  651. package/styles/tab/bootstrap5.3.css +18 -13
  652. package/styles/tab/bootstrap5.css +40 -35
  653. package/styles/tab/fabric-dark.css +5 -0
  654. package/styles/tab/fabric.css +10 -5
  655. package/styles/tab/fluent-dark.css +19 -14
  656. package/styles/tab/fluent.css +19 -14
  657. package/styles/tab/fluent2.css +7 -2
  658. package/styles/tab/highcontrast-light.css +5 -0
  659. package/styles/tab/highcontrast.css +6 -1
  660. package/styles/tab/icons/_bds.scss +90 -90
  661. package/styles/tab/icons/_bootstrap-dark.scss +98 -98
  662. package/styles/tab/icons/_bootstrap.scss +98 -98
  663. package/styles/tab/icons/_bootstrap4.scss +101 -101
  664. package/styles/tab/icons/_bootstrap5.3.scss +90 -90
  665. package/styles/tab/icons/_bootstrap5.scss +90 -90
  666. package/styles/tab/icons/_fabric-dark.scss +98 -98
  667. package/styles/tab/icons/_fabric.scss +98 -98
  668. package/styles/tab/icons/_fluent.scss +98 -98
  669. package/styles/tab/icons/_fluent2.scss +98 -98
  670. package/styles/tab/icons/_fusionnew.scss +90 -90
  671. package/styles/tab/icons/_highcontrast-light.scss +90 -90
  672. package/styles/tab/icons/_highcontrast.scss +101 -101
  673. package/styles/tab/icons/_material-dark.scss +90 -90
  674. package/styles/tab/icons/_material.scss +90 -90
  675. package/styles/tab/icons/_material3.scss +90 -90
  676. package/styles/tab/icons/_tailwind.scss +90 -90
  677. package/styles/tab/icons/_tailwind3.scss +90 -90
  678. package/styles/tab/material-dark.css +5 -0
  679. package/styles/tab/material.css +6 -1
  680. package/styles/tab/material3-dark.css +15 -10
  681. package/styles/tab/material3-dark.scss +1 -1
  682. package/styles/tab/material3.css +15 -10
  683. package/styles/tab/material3.scss +1 -1
  684. package/styles/tab/tailwind-dark.css +13 -8
  685. package/styles/tab/tailwind.css +13 -8
  686. package/styles/tab/tailwind3.css +32 -26
  687. package/styles/tailwind-dark-lite.css +80 -15
  688. package/styles/tailwind-dark.css +84 -19
  689. package/styles/tailwind-lite.css +78 -13
  690. package/styles/tailwind.css +82 -17
  691. package/styles/tailwind3-lite.css +105 -58
  692. package/styles/tailwind3.css +109 -61
  693. package/styles/toolbar/_all.scss +2 -2
  694. package/styles/toolbar/_bds-definition.scss +197 -197
  695. package/styles/toolbar/_bigger.scss +323 -323
  696. package/styles/toolbar/_bootstrap-dark-definition.scss +193 -193
  697. package/styles/toolbar/_bootstrap-definition.scss +203 -203
  698. package/styles/toolbar/_bootstrap4-definition.scss +200 -198
  699. package/styles/toolbar/_bootstrap5-definition.scss +198 -198
  700. package/styles/toolbar/_bootstrap5.3-definition.scss +198 -198
  701. package/styles/toolbar/_fabric-dark-definition.scss +207 -207
  702. package/styles/toolbar/_fabric-definition.scss +195 -195
  703. package/styles/toolbar/_fluent-definition.scss +197 -197
  704. package/styles/toolbar/_fluent2-definition.scss +198 -198
  705. package/styles/toolbar/_fusionnew-definition.scss +198 -198
  706. package/styles/toolbar/_highcontrast-definition.scss +204 -204
  707. package/styles/toolbar/_highcontrast-light-definition.scss +218 -218
  708. package/styles/toolbar/_layout.scss +781 -748
  709. package/styles/toolbar/_material-dark-definition.scss +233 -231
  710. package/styles/toolbar/_material-definition.scss +221 -219
  711. package/styles/toolbar/_material3-definition.scss +199 -199
  712. package/styles/toolbar/_tailwind-definition.scss +197 -197
  713. package/styles/toolbar/_tailwind3-definition.scss +199 -199
  714. package/styles/toolbar/_theme.scss +410 -436
  715. package/styles/toolbar/bds.css +23 -2
  716. package/styles/toolbar/bootstrap-dark.css +25 -4
  717. package/styles/toolbar/bootstrap.css +25 -4
  718. package/styles/toolbar/bootstrap4.css +35 -14
  719. package/styles/toolbar/bootstrap5-dark.css +70 -49
  720. package/styles/toolbar/bootstrap5.3.css +33 -4
  721. package/styles/toolbar/bootstrap5.css +46 -25
  722. package/styles/toolbar/fabric-dark.css +23 -2
  723. package/styles/toolbar/fabric.css +32 -11
  724. package/styles/toolbar/fluent-dark.css +23 -2
  725. package/styles/toolbar/fluent.css +23 -2
  726. package/styles/toolbar/fluent2.css +30 -28
  727. package/styles/toolbar/highcontrast-light.css +23 -2
  728. package/styles/toolbar/highcontrast.css +25 -4
  729. package/styles/toolbar/icons/_bds.scss +14 -14
  730. package/styles/toolbar/icons/_bootstrap-dark.scss +14 -14
  731. package/styles/toolbar/icons/_bootstrap.scss +14 -14
  732. package/styles/toolbar/icons/_bootstrap4.scss +14 -14
  733. package/styles/toolbar/icons/_bootstrap5.3.scss +14 -14
  734. package/styles/toolbar/icons/_bootstrap5.scss +14 -14
  735. package/styles/toolbar/icons/_fabric-dark.scss +14 -14
  736. package/styles/toolbar/icons/_fabric.scss +14 -14
  737. package/styles/toolbar/icons/_fluent.scss +14 -14
  738. package/styles/toolbar/icons/_fluent2.scss +14 -14
  739. package/styles/toolbar/icons/_fusionnew.scss +14 -14
  740. package/styles/toolbar/icons/_highcontrast-light.scss +14 -14
  741. package/styles/toolbar/icons/_highcontrast.scss +14 -14
  742. package/styles/toolbar/icons/_material-dark.scss +14 -14
  743. package/styles/toolbar/icons/_material.scss +14 -14
  744. package/styles/toolbar/icons/_material3.scss +14 -14
  745. package/styles/toolbar/icons/_tailwind.scss +14 -14
  746. package/styles/toolbar/icons/_tailwind3.scss +14 -14
  747. package/styles/toolbar/material-dark.css +25 -4
  748. package/styles/toolbar/material.css +25 -4
  749. package/styles/toolbar/material3-dark.css +23 -2
  750. package/styles/toolbar/material3-dark.scss +1 -1
  751. package/styles/toolbar/material3.css +23 -2
  752. package/styles/toolbar/material3.scss +1 -1
  753. package/styles/toolbar/tailwind-dark.css +23 -2
  754. package/styles/toolbar/tailwind.css +23 -2
  755. package/styles/toolbar/tailwind3.css +30 -28
  756. package/styles/treeview/_all.scss +2 -2
  757. package/styles/treeview/_bds-definition.scss +131 -131
  758. package/styles/treeview/_bigger.scss +410 -406
  759. package/styles/treeview/_bootstrap-dark-definition.scss +118 -118
  760. package/styles/treeview/_bootstrap-definition.scss +113 -113
  761. package/styles/treeview/_bootstrap4-definition.scss +143 -141
  762. package/styles/treeview/_bootstrap5-definition.scss +122 -120
  763. package/styles/treeview/_bootstrap5.3-definition.scss +119 -119
  764. package/styles/treeview/_fabric-dark-definition.scss +116 -116
  765. package/styles/treeview/_fabric-definition.scss +112 -112
  766. package/styles/treeview/_fluent-definition.scss +122 -120
  767. package/styles/treeview/_fluent2-definition.scss +128 -128
  768. package/styles/treeview/_fusionnew-definition.scss +120 -120
  769. package/styles/treeview/_highcontrast-definition.scss +118 -118
  770. package/styles/treeview/_highcontrast-light-definition.scss +123 -123
  771. package/styles/treeview/_layout.scss +769 -761
  772. package/styles/treeview/_material-dark-definition.scss +114 -114
  773. package/styles/treeview/_material-definition.scss +112 -112
  774. package/styles/treeview/_material3-definition.scss +110 -110
  775. package/styles/treeview/_tailwind-definition.scss +126 -124
  776. package/styles/treeview/_tailwind3-definition.scss +126 -126
  777. package/styles/treeview/_theme.scss +352 -350
  778. package/styles/treeview/bds.css +8 -0
  779. package/styles/treeview/bootstrap-dark.css +8 -0
  780. package/styles/treeview/bootstrap.css +8 -0
  781. package/styles/treeview/bootstrap4.css +17 -9
  782. package/styles/treeview/bootstrap5-dark.css +20 -12
  783. package/styles/treeview/bootstrap5.3.css +15 -7
  784. package/styles/treeview/bootstrap5.css +11 -3
  785. package/styles/treeview/fabric-dark.css +8 -0
  786. package/styles/treeview/fabric.css +15 -7
  787. package/styles/treeview/fluent-dark.css +11 -5
  788. package/styles/treeview/fluent.css +11 -5
  789. package/styles/treeview/fluent2.css +8 -0
  790. package/styles/treeview/highcontrast-light.css +8 -0
  791. package/styles/treeview/highcontrast.css +8 -0
  792. package/styles/treeview/icons/_bds.scss +44 -44
  793. package/styles/treeview/icons/_bootstrap-dark.scss +40 -40
  794. package/styles/treeview/icons/_bootstrap.scss +40 -40
  795. package/styles/treeview/icons/_bootstrap4.scss +40 -40
  796. package/styles/treeview/icons/_bootstrap5.3.scss +44 -44
  797. package/styles/treeview/icons/_bootstrap5.scss +44 -44
  798. package/styles/treeview/icons/_fabric-dark.scss +44 -44
  799. package/styles/treeview/icons/_fabric.scss +44 -44
  800. package/styles/treeview/icons/_fluent.scss +44 -44
  801. package/styles/treeview/icons/_fluent2.scss +44 -44
  802. package/styles/treeview/icons/_fusionnew.scss +44 -44
  803. package/styles/treeview/icons/_highcontrast-light.scss +44 -44
  804. package/styles/treeview/icons/_highcontrast.scss +44 -44
  805. package/styles/treeview/icons/_material-dark.scss +44 -44
  806. package/styles/treeview/icons/_material.scss +44 -44
  807. package/styles/treeview/icons/_material3.scss +44 -44
  808. package/styles/treeview/icons/_tailwind-dark.scss +44 -44
  809. package/styles/treeview/icons/_tailwind.scss +44 -44
  810. package/styles/treeview/icons/_tailwind3.scss +44 -44
  811. package/styles/treeview/material-dark.css +8 -0
  812. package/styles/treeview/material.css +8 -0
  813. package/styles/treeview/material3-dark.css +9 -1
  814. package/styles/treeview/material3-dark.scss +1 -1
  815. package/styles/treeview/material3.css +9 -1
  816. package/styles/treeview/material3.scss +1 -1
  817. package/styles/treeview/tailwind-dark.css +10 -2
  818. package/styles/treeview/tailwind.css +10 -2
  819. package/styles/treeview/tailwind3.css +10 -1
  820. package/styles/v-scroll/_all.scss +2 -2
  821. package/styles/v-scroll/_bds-definition.scss +49 -49
  822. package/styles/v-scroll/_bigger.scss +28 -28
  823. package/styles/v-scroll/_bootstrap-dark-definition.scss +51 -51
  824. package/styles/v-scroll/_bootstrap-definition.scss +49 -49
  825. package/styles/v-scroll/_bootstrap4-definition.scss +49 -49
  826. package/styles/v-scroll/_bootstrap5-definition.scss +49 -49
  827. package/styles/v-scroll/_bootstrap5.3-definition.scss +49 -49
  828. package/styles/v-scroll/_fabric-dark-definition.scss +52 -52
  829. package/styles/v-scroll/_fabric-definition.scss +50 -50
  830. package/styles/v-scroll/_fluent-definition.scss +49 -49
  831. package/styles/v-scroll/_fluent2-definition.scss +49 -49
  832. package/styles/v-scroll/_fusionnew-definition.scss +49 -49
  833. package/styles/v-scroll/_highcontrast-definition.scss +50 -50
  834. package/styles/v-scroll/_highcontrast-light-definition.scss +52 -52
  835. package/styles/v-scroll/_layout.scss +135 -135
  836. package/styles/v-scroll/_material-dark-definition.scss +79 -79
  837. package/styles/v-scroll/_material-definition.scss +77 -77
  838. package/styles/v-scroll/_material3-definition.scss +49 -49
  839. package/styles/v-scroll/_tailwind-definition.scss +49 -49
  840. package/styles/v-scroll/_tailwind3-definition.scss +49 -49
  841. package/styles/v-scroll/_theme.scss +114 -114
  842. package/styles/v-scroll/fabric-dark.css +1 -1
  843. package/styles/v-scroll/fabric.css +1 -1
  844. package/styles/v-scroll/icons/_bds.scss +27 -27
  845. package/styles/v-scroll/icons/_bootstrap-dark.scss +27 -27
  846. package/styles/v-scroll/icons/_bootstrap.scss +27 -27
  847. package/styles/v-scroll/icons/_bootstrap4.scss +27 -27
  848. package/styles/v-scroll/icons/_bootstrap5.3.scss +27 -27
  849. package/styles/v-scroll/icons/_bootstrap5.scss +27 -27
  850. package/styles/v-scroll/icons/_fabric-dark.scss +27 -27
  851. package/styles/v-scroll/icons/_fabric.scss +27 -27
  852. package/styles/v-scroll/icons/_fluent.scss +27 -27
  853. package/styles/v-scroll/icons/_fluent2.scss +27 -27
  854. package/styles/v-scroll/icons/_fusionnew.scss +27 -27
  855. package/styles/v-scroll/icons/_highcontrast-light.scss +27 -27
  856. package/styles/v-scroll/icons/_highcontrast.scss +27 -27
  857. package/styles/v-scroll/icons/_material-dark.scss +27 -27
  858. package/styles/v-scroll/icons/_material.scss +27 -27
  859. package/styles/v-scroll/icons/_material3.scss +27 -27
  860. package/styles/v-scroll/icons/_tailwind.scss +27 -27
  861. package/styles/v-scroll/icons/_tailwind3.scss +27 -27
  862. package/styles/v-scroll/material3-dark.scss +1 -1
  863. package/styles/v-scroll/material3.scss +1 -1
  864. package/tslint.json +111 -111
  865. package/helpers/e2e/accordionHelper.d.ts +0 -56
  866. package/helpers/e2e/accordionHelper.js +0 -71
  867. package/helpers/e2e/contextmenuHelper.d.ts +0 -37
  868. package/helpers/e2e/contextmenuHelper.js +0 -53
  869. package/helpers/e2e/index.d.ts +0 -7
  870. package/helpers/e2e/index.js +0 -14
  871. package/helpers/e2e/menuHelper.d.ts +0 -37
  872. package/helpers/e2e/menuHelper.js +0 -53
  873. package/helpers/e2e/sidebarHelper.d.ts +0 -94
  874. package/helpers/e2e/sidebarHelper.js +0 -110
  875. package/helpers/e2e/tabHelper.d.ts +0 -60
  876. package/helpers/e2e/tabHelper.js +0 -74
  877. package/helpers/e2e/toolbarHelper.d.ts +0 -60
  878. package/helpers/e2e/toolbarHelper.js +0 -74
  879. package/helpers/e2e/treeview.d.ts +0 -50
  880. package/helpers/e2e/treeview.js +0 -80
package/README.md CHANGED
@@ -1,301 +1,301 @@
1
- # JavaScript Navigation Controls
2
-
3
- ## What's Included in the JavaScript Navigation Package
4
-
5
- The JavaScript Navigation package includes the following list of components.
6
-
7
- ### JavaScript Accordion
8
-
9
- The [JavaScript Accordion](https://www.syncfusion.com/javascript-ui-controls/js-accordion?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) is a container-based control with vertically collapsible panels (vertical accordion) and stacked headers that expand or collapse one or more panels at a time within the available space.
10
-
11
- <p align="center">
12
- <a href="https://ej2.syncfusion.com/documentation/accordion/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
13
- <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/accordion/default.html">Online demos</a> .
14
- <a href="https://www.syncfusion.com/javascript-ui-controls/js-accordion?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
15
- </p>
16
-
17
- <p align="center">
18
- <img alt="JavaScript Accordion Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-accordion.png">
19
- </p>
20
-
21
- #### Key features
22
-
23
- * [Rendering](https://ej2.syncfusion.com/documentation/accordion/expand-mode/) - Can be rendered based on the items collection and HTML elements.
24
- * [Expand mode](https://ej2.syncfusion.com/documentation/accordion/expand-mode/) - Supports to define single or multiple expand mode for Accordion panels.
25
- * RTL support - Supports right-to-left alignment.
26
- * [Accessibility](https://ej2.syncfusion.com/documentation/accordion/accessibility/) - Provides built-in compliance with the WAI-ARIA specifications and it is achieved through attributes. By default, it allows to interact with Accordion by using keyboard shortcuts.
27
-
28
- ### JavaScript AppBar
29
-
30
- The [JavaScript AppBar](https://www.syncfusion.com/javascript-ui-controls/js-appbar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) displays information and actions related to the current application screen. It is used to show branding, screen titles, navigation, and actions.
31
-
32
- <p align="center">
33
- <a href="https://ej2.syncfusion.com/documentation/appbar/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
34
- <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/appbar/default.html">Online demos</a> .
35
- <a href="https://www.syncfusion.com/javascript-ui-controls/js-appbar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
36
- </p>
37
-
38
- <p align="center">
39
- <img alt="JavaScript AppBar Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-appbar.PNG">
40
- </p>
41
-
42
- #### Key features
43
-
44
- * [Modes](https://ej2.syncfusion.com/documentation/appbar/size-and-color/) - `Regular`, `Prominent`, and `Dense` modes that define the AppBar height.
45
- * [Content arrangement](https://ej2.syncfusion.com/documentation/appbar/design/) - Spacer and separator options can be used to align the content based on the UI requirement with minimal effort.
46
- * [Color](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/appbar/color.html) - `Primary`, `Light`, `Dark`, and `Inherit` options to customize the AppBar color.
47
- * [Position](https://ej2.syncfusion.com/documentation/appbar/position/) - AppBars can be placed at the top or bottom of the screen. It can also be sticky.
48
-
49
- ### JavaScript Breadcrumb
50
-
51
- The [JavaScript Breadcrumb](https://www.syncfusion.com/javascript-ui-controls/js-breadcrumb?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) is a graphical user interface that serves as a navigation header for your web application or site. It helps to identify or highlight the current location within the hierarchical structure of a website. It has several built-in features such as templates, icons, binding to location, overflow mode, and UI customizations.
52
-
53
- <p align="center">
54
- <a href="https://ej2.syncfusion.com/documentation/breadcrumb/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
55
- <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/breadcrumb/default.html">Online demos</a> .
56
- <a href="https://www.syncfusion.com/javascript-ui-controls/js-breadcrumb?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
57
- </p>
58
-
59
- <p align="center">
60
- <img alt="JavaScript Breadcrumb Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-breadcrumb.png">
61
- </p>
62
-
63
- #### Key features
64
-
65
- * [Icons](https://ej2.syncfusion.com/documentation/breadcrumb/icons/) - Icons can be specified in Breadcrumb items.
66
- * [Template](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/breadcrumb/template-and-customization.html) - Supports template for item and separator.
67
- * [Bind to location](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/breadcrumb/bind-to-location.html) - Supports items to be rendered based on the URL or current location.
68
- * [Overflow mode](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/breadcrumb/overflow-modes.html) - Used to limit the number of breadcrumb items to be displayed.
69
- * [Accessibility](https://ej2.syncfusion.com/documentation/breadcrumb/accessibility/) - Provided with built-in accessibility support that helps to access all the Breadcrumb component features through the keyboard, screen readers, or other assistive technology devices.
70
-
71
- ### JavaScript Carousel
72
-
73
- The [JavaScript Carousel](https://www.syncfusion.com/javascript-ui-controls/js-carousel?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) component allows users to display images with content, links, etc., like a slide show. Typical uses of carousels include scrolling news headlines, featured articles on home pages, and image galleries.
74
-
75
- <p align="center">
76
- <a href="https://ej2.syncfusion.com/documentation/carousel/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
77
- <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/carousel/default.html">Online demos</a> .
78
- <a href="https://www.syncfusion.com/javascript-ui-controls/js-carousel?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
79
- </p>
80
-
81
- <p align="center">
82
- <img alt="JavaScript Carousel Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-carousel.PNG">
83
- </p>
84
-
85
- #### Key features
86
-
87
- * [Rendering](https://ej2.syncfusion.com/documentation/carousel/populating-items/) - The Carousel component can be rendered based on the items collection and data binding.
88
- * [Animation](https://ej2.syncfusion.com/documentation/carousel/animations-and-transitions/) - Supports animation effects for moving previous/next item of Carousel.
89
- * [Template support](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/carousel/templates.html) - The Carousel component items and buttons can also be rendered with custom templates.
90
- * [Keyboard support](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/carousel/keyboard-navigation.html) - By default, the Carousel allows interaction with commands by using keyboard shortcuts.
91
- * [Accessibility](https://ej2.syncfusion.com/documentation/carousel/accessibility/) - The Carousel provides built-in compliance with the `WAI-ARIA` specifications and it is achieved through attributes.
92
-
93
- ### JavaScript ContextMenu
94
-
95
- The [JavaScript ContextMenu](https://www.syncfusion.com/javascript-ui-controls/js-context-menu?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) is a graphical user interface control that appears when the user right-clicks or performs a touch and hold action.
96
-
97
- <p align="center">
98
- <a href="https://ej2.syncfusion.com/documentation/context-menu/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
99
- <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/context-menu/default.html">Online demos</a> .
100
- <a href="https://www.syncfusion.com/javascript-ui-controls/js-context-menu?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
101
- </p>
102
-
103
- <p align="center">
104
- <img alt="JavaScript ContextMenu Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-context-menu.png">
105
- </p>
106
-
107
- #### Key features
108
-
109
- * [Separator](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/context-menu/default.html) - Supports menu items grouping by using the Separator.
110
- * [Icons and Navigations](https://ej2.syncfusion.com/documentation/context-menu/icons-and-navigation/) - Supports items to have Icons and Navigation URL's.
111
- * [Template and Multilevel nesting](https://ej2.syncfusion.com/documentation/context-menu/template-and-multilevel-nesting/) - Supports template and multilevel nesting in ContextMenu.
112
- * [Accessibility](https://ej2.syncfusion.com/documentation/context-menu/accessibility/) - Provided with built-in accessibility support that helps to access all the ContextMenu component features through the keyboard, screen readers, or other assistive technology devices.
113
-
114
- ### JavaScript Sidebar
115
-
116
- The [JavaScript Sidebar](https://www.syncfusion.com/javascript-ui-controls/js-sidebar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) is an expandable and collapsible component that typically acts as a side container to place primary or secondary content alongside the main content.
117
-
118
- <p align="center">
119
- <a href="https://ej2.syncfusion.com/documentation/sidebar/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
120
- <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/sidebar/default.html">Online demos</a> .
121
- <a href="https://www.syncfusion.com/javascript-ui-controls/js-sidebar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
122
- </p>
123
-
124
- <p align="center">
125
- <img alt="JavaScript Sidebar Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-sidebar.png">
126
- </p>
127
-
128
- #### Key features
129
-
130
- * [Target](https://ej2.syncfusion.com/documentation/sidebar/custom-context/) - The sidebar can be initialized in any HTML element other than the body element.
131
- * [Types](https://ej2.syncfusion.com/documentation/sidebar/variations/) - Provides complete control over the appearance of the sidebar component. The different types of the sidebar control give flexibility to view or hide the content (primary/secondary) over/above the main content by pushing, sliding, or overlaying it.
132
- * [Left or right positions](https://ej2.syncfusion.com/documentation/sidebar/getting-started/#position) - The sidebar control can be positioned to the left or right side of the main content area. This option allows placement of two sidebars in a page, at the left and right, to show primary content and secondary content, simultaneously.
133
- * [Docking](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/sidebar/docking-sidebar.html) - Docking lets the sidebar occupy a small vertical area in a page always and typically contains shortened view of navigation options.
134
- * [Auto close](https://ej2.syncfusion.com/documentation/sidebar/auto-close/) - Auto closing the sidebar control’s content allows the main content area to be more readable based on screen resolution.
135
-
136
- ### JavaScript Tab
137
-
138
- The [JavaScript Tab](https://www.syncfusion.com/javascript-ui-controls/js-tabs?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) control is a simple user interface (tabs UI) for organizing related content and occupying a compact space. The tabs are aligned horizontally, and each tab is associated with its header.
139
-
140
- <p align="center">
141
- <a href="https://ej2.syncfusion.com/documentation/tab/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
142
- <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/tab/default.html">Online demos</a> .
143
- <a href="https://www.syncfusion.com/javascript-ui-controls/js-tabs?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
144
- </p>
145
-
146
- <p align="center">
147
- <img alt="JavaScript Tab Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-tabs.png">
148
- </p>
149
-
150
- #### Key features
151
-
152
- * [Rendering](https://ej2.syncfusion.com/documentation/tab/adaptive/) - Can be rendered based on the items collection and HTML elements.
153
- * [Adaptive](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/tab/responsive-modes.html) - Supports responsive rendering with scrollable Tabs and popup menu.
154
- * [Customization](https://ej2.syncfusion.com/documentation/tab/style/) - Provides customization support for header with icons and orientation.
155
- * [Animation](https://ej2.syncfusion.com/documentation/tab/how-to/set-custom-animation/) - Supports animation effects for moving previous/next contents of Tab.
156
- * [Accessibility](https://ej2.syncfusion.com/documentation/tab/accessibility/) - Provides built-in compliance with the WAI-ARIA specifications and it is achieved through attributes. By default, it allows to interact with Tab headers by using keyboard shortcuts.
157
-
158
- ### JavaScript Toolbar
159
-
160
- The [JavaScript Toolbar](https://www.syncfusion.com/javascript-ui-controls/js-toolbar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) is a feature-rich control that provides an interface for selecting a command from a collection of commands.
161
-
162
- <p align="center">
163
- <a href="https://ej2.syncfusion.com/documentation/toolbar/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
164
- <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/toolbar/default.html">Online demos</a> .
165
- <a href="https://www.syncfusion.com/javascript-ui-controls/js-toolbar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
166
- </p>
167
-
168
- <p align="center">
169
- <img alt="JavaScript Toolbar Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-toolbar.png">
170
- </p>
171
-
172
- #### Key features
173
-
174
- * [Scrollable](https://ej2.syncfusion.com/documentation/toolbar/responsive-mode/#scrollable) - Scrollable display mode displays Toolbar commands in a single line with horizontal scrolling enabled when the commands overflow available space.
175
- * [Popup](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/toolbar/popup.html) - Popup display mode displays commands in the popup when the commands overflow available space.
176
- * [Template support](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/toolbar/template.html) - The Toolbar component can also be rendered based on the given HTML element aside from item based collection rendering.
177
- * [Keyboard support](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/toolbar/keyboard-interaction.html) - By default, the Toolbar allows interaction with commands by using keyboard shortcuts.
178
- * RTL support - The Toolbar supports right-to-left alignment.
179
- * [Accessibility](https://ej2.syncfusion.com/documentation/toolbar/accessibility/) - The Toolbar provides built-in compliance with the WAI-ARIA specifications and it is achieved through attributes.
180
-
181
- ### JavaScript TreeView
182
-
183
- The [JavaScript TreeView](https://www.syncfusion.com/javascript-ui-controls/js-treeview?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) is a graphical user interface control that to represents hierarchical data in a tree structure.
184
-
185
- <p align="center">
186
- <a href="https://ej2.syncfusion.com/documentation/treeview/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
187
- <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/default.html">Online demos</a> .
188
- <a href="https://www.syncfusion.com/javascript-ui-controls/js-treeview?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
189
- </p>
190
-
191
- <p align="center">
192
- <img alt="JavaScript TreeView Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-treeview.png">
193
- </p>
194
-
195
- #### Key features
196
-
197
- * [Data binding](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/local-data.html) - Binds the TreeView component with an array of JavaScript objects or DataManager.
198
- * [CheckBox](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/check-box.html) - Allows you to select more than one node in TreeView without affecting the UI appearance.
199
- * [Drag and drop](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/drag-and-drop.html) - Allows you to drag and drop any node in TreeView.
200
- * [Multi selection](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/multiple-selection.html) - Allows you to select more than one node in TreeView.
201
- * [Node editing](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/node-editing.html) - Allows you to change the text of a node in TreeView.
202
- * [Sorting](https://ej2.syncfusion.com/documentation/treeview/how-to/sorting-treeview-level-wise/) - Allows display of the TreeView nodes in an ascending or a descending order.
203
- * [Template](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/template.html) - Allows you to customize the nodes in TreeView.
204
- * [Accessibility](https://ej2.syncfusion.com/documentation/treeview/accessibility/) - Provides built-in accessibility support that helps to access all the TreeView component features through the keyboard, on-screen readers, or other assistive technology devices.
205
-
206
- ### JavaScript Menu
207
-
208
- The [JavaScript Menu](https://www.syncfusion.com/javascript-ui-controls/js-menu-bar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) is a graphical user interface control that serves as a navigation header for your web application or site.
209
-
210
- <p align="center">
211
- <a href="https://ej2.syncfusion.com/documentation/menu/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
212
- <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/menu/default.html">Online demos</a> .
213
- <a href="https://www.syncfusion.com/javascript-ui-controls/js-menu-bar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
214
- </p>
215
-
216
- <p align="center">
217
- <img alt="JavaScript Menu Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-menu-bar.png">
218
- </p>
219
-
220
- #### Key features
221
-
222
- * [Rendering](https://ej2.syncfusion.com/documentation/menu/getting-started/#getting-started) - Supports to render based on the items collection (array of JavaScript objects) and HTML elements.
223
- * [Separator](https://ej2.syncfusion.com/documentation/menu/getting-started/#group-menu-items-with-separator) - Supports menu items grouping by using the Separator.
224
- * [Icons and Navigations](https://ej2.syncfusion.com/documentation/menu/icons-and-sub-menu-items/) - Supports items to have Icons and Navigation URL's.
225
- * [Template and Multilevel nesting](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/menu/template.html) - Supports template and multilevel nesting in Menu.
226
- * [Hamburger Menu](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/menu/hamburger-mode.html) - Supports Hamburger Menu that provides an adaptive view.
227
- * [Accessibility](https://ej2.syncfusion.com/documentation/menu/accessibility/) - Provided with built-in accessibility support that helps to access all the Menu component features through the keyboard, screen readers, or other assistive technology devices.
228
-
229
- ### JavaScript Stepper
230
-
231
- The [JavaScript Stepper](https://www.syncfusion.com/javascript-ui-controls/js-stepper?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) control enables users to navigate through a series of steps or stages in a process within a web application. Stepper displays a list of steps with the current step highlighted, allowing users to move between steps. It includes several built-in features, such as different step types, orientation, linear flow, label positions, and template customization.
232
-
233
- <p align="center">
234
- <a href="https://ej2.syncfusion.com/documentation/stepper/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
235
- <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/stepper/default.html">Online demos</a> .
236
- <a href="https://www.syncfusion.com/javascript-ui-controls/js-stepper?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
237
- </p>
238
-
239
- <p align="center">
240
- <img alt="JavaScript Stepper Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-stepper.png">
241
- </p>
242
-
243
- #### Key features
244
-
245
- * [Step Types](https://ej2.syncfusion.com/documentation/stepper/steptypes) - Display steps with indicators and labels, only indicators, or only labels.
246
- * [Orientation](https://ej2.syncfusion.com/documentation/stepper/orientations) - A layout to display steps in a horizontal or vertical orientation.
247
- * [Linear Flow](https://ej2.syncfusion.com/documentation/stepper/linear-flow) - Enable a step-by-step progression, completing one step before moving on to the next.
248
- * [Label Positioning](https://ej2.syncfusion.com/documentation/stepper/steptypes#label-positions) - Show the label at the top, bottom, left, or right.
249
- * [Tooltip](https://ej2.syncfusion.com/documentation/stepper/tooltip) - Show additional information when users hover over a step, such as a label or customized text.
250
- * [Templates](https://ej2.syncfusion.com/documentation/stepper/template) - Customize the default appearance and content of each step using templates.
251
-
252
- <p align="center">
253
- Trusted by the world's leading companies
254
- <a href="https://www.syncfusion.com/">
255
- <img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted-companies.webp" alt="Syncfusion logo">
256
- </a>
257
- </p>
258
-
259
- ## Setup
260
-
261
- To install `navigations` and its dependent packages, use the following command.
262
-
263
- ```sh
264
- npm install @syncfusion/ej2-navigations
265
- ```
266
-
267
- ## Supported frameworks
268
-
269
- Navigation controls are also offered in following list of frameworks.
270
-
271
- | [<img src="https://ej2.syncfusion.com/github/images/angular.svg" height="50" />](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Angular](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/react.svg" height="50" />](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[React](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/vue.svg" height="50" />](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netcore.svg" height="50" />](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netmvc.svg" height="50" />](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; |
272
- | :-----: | :-----: | :-----: | :-----: | :-----: |
273
-
274
- ## Showcase samples
275
-
276
- * Expanse Tracker - [Source](https://github.com/syncfusion/ej2-sample-ts-expensetracker), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/expensetracker/?utm_source=npm&utm_campaign=sidebar#/dashboard)
277
- * Web mail - [Source](https://github.com/syncfusion/ej2-sample-ts-webmail), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/webmail/?utm_source=npm&utm_campaign=sidebar)
278
-
279
- ## Support
280
-
281
- Product support is available through following mediums.
282
-
283
- * [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
284
- * [Community forum](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm)
285
- * [GitHub issues](https://github.com/syncfusion/ej2-javascript-ui-controls/issues/new)
286
- * [Request feature or report bug](https://www.syncfusion.com/feedback/javascript?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm)
287
- * Live chat
288
-
289
- ## Changelog
290
-
291
- Check the changelog [here](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/controls/navigations/CHANGELOG.md?utm_source=npm&utm_campaign=navigation). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
292
-
293
- ## License and copyright
294
-
295
- > This is a commercial product and requires a paid license for possession or use. Syncfusion<sup>®</sup> licensed software, including this component, is subject to the terms and conditions of Syncfusion<sup>®</sup> [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 80+ [JavaScript UI controls](https://www.syncfusion.com/javascript-ui-controls), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
296
-
297
- > A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
298
-
299
- See [LICENSE FILE](https://github.com/syncfusion/ej2/blob/master/license?utm_source=npm&utm_campaign=navigation) for more info.
300
-
301
- © Copyright 2025 Syncfusion<sup>®</sup> Inc. All Rights Reserved. The Syncfusion<sup>®</sup> Essential Studio<sup>®</sup> license and copyright applies to this distribution.
1
+ # JavaScript Navigation Controls
2
+
3
+ ## What's Included in the JavaScript Navigation Package
4
+
5
+ The JavaScript Navigation package includes the following list of components.
6
+
7
+ ### JavaScript Accordion
8
+
9
+ The [JavaScript Accordion](https://www.syncfusion.com/javascript-ui-controls/js-accordion?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) is a container-based control with vertically collapsible panels (vertical accordion) and stacked headers that expand or collapse one or more panels at a time within the available space.
10
+
11
+ <p align="center">
12
+ <a href="https://ej2.syncfusion.com/documentation/accordion/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
13
+ <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/accordion/default.html">Online demos</a> .
14
+ <a href="https://www.syncfusion.com/javascript-ui-controls/js-accordion?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
15
+ </p>
16
+
17
+ <p align="center">
18
+ <img alt="JavaScript Accordion Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-accordion.png">
19
+ </p>
20
+
21
+ #### Key features
22
+
23
+ * [Rendering](https://ej2.syncfusion.com/documentation/accordion/expand-mode/) - Can be rendered based on the items collection and HTML elements.
24
+ * [Expand mode](https://ej2.syncfusion.com/documentation/accordion/expand-mode/) - Supports to define single or multiple expand mode for Accordion panels.
25
+ * RTL support - Supports right-to-left alignment.
26
+ * [Accessibility](https://ej2.syncfusion.com/documentation/accordion/accessibility/) - Provides built-in compliance with the WAI-ARIA specifications and it is achieved through attributes. By default, it allows to interact with Accordion by using keyboard shortcuts.
27
+
28
+ ### JavaScript AppBar
29
+
30
+ The [JavaScript AppBar](https://www.syncfusion.com/javascript-ui-controls/js-appbar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) displays information and actions related to the current application screen. It is used to show branding, screen titles, navigation, and actions.
31
+
32
+ <p align="center">
33
+ <a href="https://ej2.syncfusion.com/documentation/appbar/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
34
+ <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/appbar/default.html">Online demos</a> .
35
+ <a href="https://www.syncfusion.com/javascript-ui-controls/js-appbar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
36
+ </p>
37
+
38
+ <p align="center">
39
+ <img alt="JavaScript AppBar Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-appbar.PNG">
40
+ </p>
41
+
42
+ #### Key features
43
+
44
+ * [Modes](https://ej2.syncfusion.com/documentation/appbar/size-and-color/) - `Regular`, `Prominent`, and `Dense` modes that define the AppBar height.
45
+ * [Content arrangement](https://ej2.syncfusion.com/documentation/appbar/design/) - Spacer and separator options can be used to align the content based on the UI requirement with minimal effort.
46
+ * [Color](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/appbar/color.html) - `Primary`, `Light`, `Dark`, and `Inherit` options to customize the AppBar color.
47
+ * [Position](https://ej2.syncfusion.com/documentation/appbar/position/) - AppBars can be placed at the top or bottom of the screen. It can also be sticky.
48
+
49
+ ### JavaScript Breadcrumb
50
+
51
+ The [JavaScript Breadcrumb](https://www.syncfusion.com/javascript-ui-controls/js-breadcrumb?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) is a graphical user interface that serves as a navigation header for your web application or site. It helps to identify or highlight the current location within the hierarchical structure of a website. It has several built-in features such as templates, icons, binding to location, overflow mode, and UI customizations.
52
+
53
+ <p align="center">
54
+ <a href="https://ej2.syncfusion.com/documentation/breadcrumb/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
55
+ <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/breadcrumb/default.html">Online demos</a> .
56
+ <a href="https://www.syncfusion.com/javascript-ui-controls/js-breadcrumb?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
57
+ </p>
58
+
59
+ <p align="center">
60
+ <img alt="JavaScript Breadcrumb Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-breadcrumb.png">
61
+ </p>
62
+
63
+ #### Key features
64
+
65
+ * [Icons](https://ej2.syncfusion.com/documentation/breadcrumb/icons/) - Icons can be specified in Breadcrumb items.
66
+ * [Template](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/breadcrumb/template-and-customization.html) - Supports template for item and separator.
67
+ * [Bind to location](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/breadcrumb/bind-to-location.html) - Supports items to be rendered based on the URL or current location.
68
+ * [Overflow mode](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/breadcrumb/overflow-modes.html) - Used to limit the number of breadcrumb items to be displayed.
69
+ * [Accessibility](https://ej2.syncfusion.com/documentation/breadcrumb/accessibility/) - Provided with built-in accessibility support that helps to access all the Breadcrumb component features through the keyboard, screen readers, or other assistive technology devices.
70
+
71
+ ### JavaScript Carousel
72
+
73
+ The [JavaScript Carousel](https://www.syncfusion.com/javascript-ui-controls/js-carousel?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) component allows users to display images with content, links, etc., like a slide show. Typical uses of carousels include scrolling news headlines, featured articles on home pages, and image galleries.
74
+
75
+ <p align="center">
76
+ <a href="https://ej2.syncfusion.com/documentation/carousel/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
77
+ <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/carousel/default.html">Online demos</a> .
78
+ <a href="https://www.syncfusion.com/javascript-ui-controls/js-carousel?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
79
+ </p>
80
+
81
+ <p align="center">
82
+ <img alt="JavaScript Carousel Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-carousel.PNG">
83
+ </p>
84
+
85
+ #### Key features
86
+
87
+ * [Rendering](https://ej2.syncfusion.com/documentation/carousel/populating-items/) - The Carousel component can be rendered based on the items collection and data binding.
88
+ * [Animation](https://ej2.syncfusion.com/documentation/carousel/animations-and-transitions/) - Supports animation effects for moving previous/next item of Carousel.
89
+ * [Template support](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/carousel/templates.html) - The Carousel component items and buttons can also be rendered with custom templates.
90
+ * [Keyboard support](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/carousel/keyboard-navigation.html) - By default, the Carousel allows interaction with commands by using keyboard shortcuts.
91
+ * [Accessibility](https://ej2.syncfusion.com/documentation/carousel/accessibility/) - The Carousel provides built-in compliance with the `WAI-ARIA` specifications and it is achieved through attributes.
92
+
93
+ ### JavaScript ContextMenu
94
+
95
+ The [JavaScript ContextMenu](https://www.syncfusion.com/javascript-ui-controls/js-context-menu?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) is a graphical user interface control that appears when the user right-clicks or performs a touch and hold action.
96
+
97
+ <p align="center">
98
+ <a href="https://ej2.syncfusion.com/documentation/context-menu/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
99
+ <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/context-menu/default.html">Online demos</a> .
100
+ <a href="https://www.syncfusion.com/javascript-ui-controls/js-context-menu?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
101
+ </p>
102
+
103
+ <p align="center">
104
+ <img alt="JavaScript ContextMenu Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-context-menu.png">
105
+ </p>
106
+
107
+ #### Key features
108
+
109
+ * [Separator](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/context-menu/default.html) - Supports menu items grouping by using the Separator.
110
+ * [Icons and Navigations](https://ej2.syncfusion.com/documentation/context-menu/icons-and-navigation/) - Supports items to have Icons and Navigation URL's.
111
+ * [Template and Multilevel nesting](https://ej2.syncfusion.com/documentation/context-menu/template-and-multilevel-nesting/) - Supports template and multilevel nesting in ContextMenu.
112
+ * [Accessibility](https://ej2.syncfusion.com/documentation/context-menu/accessibility/) - Provided with built-in accessibility support that helps to access all the ContextMenu component features through the keyboard, screen readers, or other assistive technology devices.
113
+
114
+ ### JavaScript Sidebar
115
+
116
+ The [JavaScript Sidebar](https://www.syncfusion.com/javascript-ui-controls/js-sidebar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) is an expandable and collapsible component that typically acts as a side container to place primary or secondary content alongside the main content.
117
+
118
+ <p align="center">
119
+ <a href="https://ej2.syncfusion.com/documentation/sidebar/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
120
+ <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/sidebar/default.html">Online demos</a> .
121
+ <a href="https://www.syncfusion.com/javascript-ui-controls/js-sidebar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
122
+ </p>
123
+
124
+ <p align="center">
125
+ <img alt="JavaScript Sidebar Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-sidebar.png">
126
+ </p>
127
+
128
+ #### Key features
129
+
130
+ * [Target](https://ej2.syncfusion.com/documentation/sidebar/custom-context/) - The sidebar can be initialized in any HTML element other than the body element.
131
+ * [Types](https://ej2.syncfusion.com/documentation/sidebar/variations/) - Provides complete control over the appearance of the sidebar component. The different types of the sidebar control give flexibility to view or hide the content (primary/secondary) over/above the main content by pushing, sliding, or overlaying it.
132
+ * [Left or right positions](https://ej2.syncfusion.com/documentation/sidebar/getting-started/#position) - The sidebar control can be positioned to the left or right side of the main content area. This option allows placement of two sidebars in a page, at the left and right, to show primary content and secondary content, simultaneously.
133
+ * [Docking](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/sidebar/docking-sidebar.html) - Docking lets the sidebar occupy a small vertical area in a page always and typically contains shortened view of navigation options.
134
+ * [Auto close](https://ej2.syncfusion.com/documentation/sidebar/auto-close/) - Auto closing the sidebar control’s content allows the main content area to be more readable based on screen resolution.
135
+
136
+ ### JavaScript Tab
137
+
138
+ The [JavaScript Tab](https://www.syncfusion.com/javascript-ui-controls/js-tabs?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) control is a simple user interface (tabs UI) for organizing related content and occupying a compact space. The tabs are aligned horizontally, and each tab is associated with its header.
139
+
140
+ <p align="center">
141
+ <a href="https://ej2.syncfusion.com/documentation/tab/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
142
+ <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/tab/default.html">Online demos</a> .
143
+ <a href="https://www.syncfusion.com/javascript-ui-controls/js-tabs?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
144
+ </p>
145
+
146
+ <p align="center">
147
+ <img alt="JavaScript Tab Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-tabs.png">
148
+ </p>
149
+
150
+ #### Key features
151
+
152
+ * [Rendering](https://ej2.syncfusion.com/documentation/tab/adaptive/) - Can be rendered based on the items collection and HTML elements.
153
+ * [Adaptive](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/tab/responsive-modes.html) - Supports responsive rendering with scrollable Tabs and popup menu.
154
+ * [Customization](https://ej2.syncfusion.com/documentation/tab/style/) - Provides customization support for header with icons and orientation.
155
+ * [Animation](https://ej2.syncfusion.com/documentation/tab/how-to/set-custom-animation/) - Supports animation effects for moving previous/next contents of Tab.
156
+ * [Accessibility](https://ej2.syncfusion.com/documentation/tab/accessibility/) - Provides built-in compliance with the WAI-ARIA specifications and it is achieved through attributes. By default, it allows to interact with Tab headers by using keyboard shortcuts.
157
+
158
+ ### JavaScript Toolbar
159
+
160
+ The [JavaScript Toolbar](https://www.syncfusion.com/javascript-ui-controls/js-toolbar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) is a feature-rich control that provides an interface for selecting a command from a collection of commands.
161
+
162
+ <p align="center">
163
+ <a href="https://ej2.syncfusion.com/documentation/toolbar/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
164
+ <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/toolbar/default.html">Online demos</a> .
165
+ <a href="https://www.syncfusion.com/javascript-ui-controls/js-toolbar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
166
+ </p>
167
+
168
+ <p align="center">
169
+ <img alt="JavaScript Toolbar Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-toolbar.png">
170
+ </p>
171
+
172
+ #### Key features
173
+
174
+ * [Scrollable](https://ej2.syncfusion.com/documentation/toolbar/responsive-mode/#scrollable) - Scrollable display mode displays Toolbar commands in a single line with horizontal scrolling enabled when the commands overflow available space.
175
+ * [Popup](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/toolbar/popup.html) - Popup display mode displays commands in the popup when the commands overflow available space.
176
+ * [Template support](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/toolbar/template.html) - The Toolbar component can also be rendered based on the given HTML element aside from item based collection rendering.
177
+ * [Keyboard support](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/toolbar/keyboard-interaction.html) - By default, the Toolbar allows interaction with commands by using keyboard shortcuts.
178
+ * RTL support - The Toolbar supports right-to-left alignment.
179
+ * [Accessibility](https://ej2.syncfusion.com/documentation/toolbar/accessibility/) - The Toolbar provides built-in compliance with the WAI-ARIA specifications and it is achieved through attributes.
180
+
181
+ ### JavaScript TreeView
182
+
183
+ The [JavaScript TreeView](https://www.syncfusion.com/javascript-ui-controls/js-treeview?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) is a graphical user interface control that to represents hierarchical data in a tree structure.
184
+
185
+ <p align="center">
186
+ <a href="https://ej2.syncfusion.com/documentation/treeview/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
187
+ <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/default.html">Online demos</a> .
188
+ <a href="https://www.syncfusion.com/javascript-ui-controls/js-treeview?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
189
+ </p>
190
+
191
+ <p align="center">
192
+ <img alt="JavaScript TreeView Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-treeview.png">
193
+ </p>
194
+
195
+ #### Key features
196
+
197
+ * [Data binding](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/local-data.html) - Binds the TreeView component with an array of JavaScript objects or DataManager.
198
+ * [CheckBox](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/check-box.html) - Allows you to select more than one node in TreeView without affecting the UI appearance.
199
+ * [Drag and drop](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/drag-and-drop.html) - Allows you to drag and drop any node in TreeView.
200
+ * [Multi selection](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/multiple-selection.html) - Allows you to select more than one node in TreeView.
201
+ * [Node editing](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/node-editing.html) - Allows you to change the text of a node in TreeView.
202
+ * [Sorting](https://ej2.syncfusion.com/documentation/treeview/how-to/sorting-treeview-level-wise/) - Allows display of the TreeView nodes in an ascending or a descending order.
203
+ * [Template](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/template.html) - Allows you to customize the nodes in TreeView.
204
+ * [Accessibility](https://ej2.syncfusion.com/documentation/treeview/accessibility/) - Provides built-in accessibility support that helps to access all the TreeView component features through the keyboard, on-screen readers, or other assistive technology devices.
205
+
206
+ ### JavaScript Menu
207
+
208
+ The [JavaScript Menu](https://www.syncfusion.com/javascript-ui-controls/js-menu-bar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) is a graphical user interface control that serves as a navigation header for your web application or site.
209
+
210
+ <p align="center">
211
+ <a href="https://ej2.syncfusion.com/documentation/menu/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
212
+ <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/menu/default.html">Online demos</a> .
213
+ <a href="https://www.syncfusion.com/javascript-ui-controls/js-menu-bar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
214
+ </p>
215
+
216
+ <p align="center">
217
+ <img alt="JavaScript Menu Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-menu-bar.png">
218
+ </p>
219
+
220
+ #### Key features
221
+
222
+ * [Rendering](https://ej2.syncfusion.com/documentation/menu/getting-started/#getting-started) - Supports to render based on the items collection (array of JavaScript objects) and HTML elements.
223
+ * [Separator](https://ej2.syncfusion.com/documentation/menu/getting-started/#group-menu-items-with-separator) - Supports menu items grouping by using the Separator.
224
+ * [Icons and Navigations](https://ej2.syncfusion.com/documentation/menu/icons-and-sub-menu-items/) - Supports items to have Icons and Navigation URL's.
225
+ * [Template and Multilevel nesting](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/menu/template.html) - Supports template and multilevel nesting in Menu.
226
+ * [Hamburger Menu](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/menu/hamburger-mode.html) - Supports Hamburger Menu that provides an adaptive view.
227
+ * [Accessibility](https://ej2.syncfusion.com/documentation/menu/accessibility/) - Provided with built-in accessibility support that helps to access all the Menu component features through the keyboard, screen readers, or other assistive technology devices.
228
+
229
+ ### JavaScript Stepper
230
+
231
+ The [JavaScript Stepper](https://www.syncfusion.com/javascript-ui-controls/js-stepper?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) control enables users to navigate through a series of steps or stages in a process within a web application. Stepper displays a list of steps with the current step highlighted, allowing users to move between steps. It includes several built-in features, such as different step types, orientation, linear flow, label positions, and template customization.
232
+
233
+ <p align="center">
234
+ <a href="https://ej2.syncfusion.com/documentation/stepper/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
235
+ <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/stepper/default.html">Online demos</a> .
236
+ <a href="https://www.syncfusion.com/javascript-ui-controls/js-stepper?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
237
+ </p>
238
+
239
+ <p align="center">
240
+ <img alt="JavaScript Stepper Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-stepper.png">
241
+ </p>
242
+
243
+ #### Key features
244
+
245
+ * [Step Types](https://ej2.syncfusion.com/documentation/stepper/steptypes) - Display steps with indicators and labels, only indicators, or only labels.
246
+ * [Orientation](https://ej2.syncfusion.com/documentation/stepper/orientations) - A layout to display steps in a horizontal or vertical orientation.
247
+ * [Linear Flow](https://ej2.syncfusion.com/documentation/stepper/linear-flow) - Enable a step-by-step progression, completing one step before moving on to the next.
248
+ * [Label Positioning](https://ej2.syncfusion.com/documentation/stepper/steptypes#label-positions) - Show the label at the top, bottom, left, or right.
249
+ * [Tooltip](https://ej2.syncfusion.com/documentation/stepper/tooltip) - Show additional information when users hover over a step, such as a label or customized text.
250
+ * [Templates](https://ej2.syncfusion.com/documentation/stepper/template) - Customize the default appearance and content of each step using templates.
251
+
252
+ <p align="center">
253
+ Trusted by the world's leading companies
254
+ <a href="https://www.syncfusion.com/">
255
+ <img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted-companies.webp" alt="Syncfusion logo">
256
+ </a>
257
+ </p>
258
+
259
+ ## Setup
260
+
261
+ To install `navigations` and its dependent packages, use the following command.
262
+
263
+ ```sh
264
+ npm install @syncfusion/ej2-navigations
265
+ ```
266
+
267
+ ## Supported frameworks
268
+
269
+ Navigation controls are also offered in following list of frameworks.
270
+
271
+ | [<img src="https://ej2.syncfusion.com/github/images/angular.svg" height="50" />](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Angular](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/react.svg" height="50" />](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[React](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/vue.svg" height="50" />](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netcore.svg" height="50" />](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netmvc.svg" height="50" />](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; |
272
+ | :-----: | :-----: | :-----: | :-----: | :-----: |
273
+
274
+ ## Showcase samples
275
+
276
+ * Expanse Tracker - [Source](https://github.com/syncfusion/ej2-sample-ts-expensetracker), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/expensetracker/?utm_source=npm&utm_campaign=sidebar#/dashboard)
277
+ * Web mail - [Source](https://github.com/syncfusion/ej2-sample-ts-webmail), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/webmail/?utm_source=npm&utm_campaign=sidebar)
278
+
279
+ ## Support
280
+
281
+ Product support is available through following mediums.
282
+
283
+ * [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
284
+ * [Community forum](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm)
285
+ * [GitHub issues](https://github.com/syncfusion/ej2-javascript-ui-controls/issues/new)
286
+ * [Request feature or report bug](https://www.syncfusion.com/feedback/javascript?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm)
287
+ * Live chat
288
+
289
+ ## Changelog
290
+
291
+ Check the changelog [here](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/controls/navigations/CHANGELOG.md?utm_source=npm&utm_campaign=navigation). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
292
+
293
+ ## License and copyright
294
+
295
+ > This is a commercial product and requires a paid license for possession or use. Syncfusion<sup>®</sup> licensed software, including this component, is subject to the terms and conditions of Syncfusion<sup>®</sup> [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 80+ [JavaScript UI controls](https://www.syncfusion.com/javascript-ui-controls), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
296
+
297
+ > A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
298
+
299
+ See [LICENSE FILE](https://github.com/syncfusion/ej2/blob/master/license?utm_source=npm&utm_campaign=navigation) for more info.
300
+
301
+ &copy; Copyright 2023 Syncfusion<sup>®</sup> Inc. All Rights Reserved. The Syncfusion<sup>®</sup> Essential Studio<sup>®</sup> license and copyright applies to this distribution.