snice 2.1.4 → 2.2.0

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 (370) hide show
  1. package/dist/components/accordion/snice-accordion-item.d.ts +25 -0
  2. package/dist/components/accordion/snice-accordion-item.js +255 -0
  3. package/dist/components/accordion/snice-accordion-item.js.map +1 -0
  4. package/dist/components/accordion/snice-accordion.d.ts +28 -0
  5. package/dist/components/accordion/snice-accordion.js +206 -0
  6. package/dist/components/accordion/snice-accordion.js.map +1 -0
  7. package/dist/components/accordion/snice-accordion.types.d.ts +29 -0
  8. package/dist/components/alert/snice-alert.d.ts +26 -0
  9. package/dist/components/alert/snice-alert.js +180 -0
  10. package/dist/components/alert/snice-alert.js.map +1 -0
  11. package/{components/alert/snice-alert.types.ts → dist/components/alert/snice-alert.types.d.ts} +8 -9
  12. package/dist/components/avatar/snice-avatar.d.ts +24 -0
  13. package/dist/components/avatar/snice-avatar.js +180 -0
  14. package/dist/components/avatar/snice-avatar.js.map +1 -0
  15. package/dist/components/avatar/snice-avatar.types.d.ts +12 -0
  16. package/dist/components/badge/snice-badge.d.ts +25 -0
  17. package/dist/components/badge/snice-badge.js +169 -0
  18. package/dist/components/badge/snice-badge.js.map +1 -0
  19. package/{components/badge/snice-badge.types.ts → dist/components/badge/snice-badge.types.d.ts} +11 -12
  20. package/dist/components/breadcrumbs/snice-breadcrumbs.d.ts +27 -0
  21. package/dist/components/breadcrumbs/snice-breadcrumbs.js +214 -0
  22. package/dist/components/breadcrumbs/snice-breadcrumbs.js.map +1 -0
  23. package/dist/components/breadcrumbs/snice-breadcrumbs.types.d.ts +23 -0
  24. package/dist/components/breadcrumbs/snice-crumb.d.ts +9 -0
  25. package/dist/components/breadcrumbs/snice-crumb.js +63 -0
  26. package/dist/components/breadcrumbs/snice-crumb.js.map +1 -0
  27. package/dist/components/button/snice-button.d.ts +32 -0
  28. package/dist/components/button/snice-button.js +232 -0
  29. package/dist/components/button/snice-button.js.map +1 -0
  30. package/dist/components/button/snice-button.types.d.ts +23 -0
  31. package/dist/components/card/snice-card.d.ts +19 -0
  32. package/dist/components/card/snice-card.js +136 -0
  33. package/dist/components/card/snice-card.js.map +1 -0
  34. package/{components/card/snice-card.types.ts → dist/components/card/snice-card.types.d.ts} +6 -7
  35. package/dist/components/checkbox/snice-checkbox.d.ts +34 -0
  36. package/dist/components/checkbox/snice-checkbox.js +286 -0
  37. package/dist/components/checkbox/snice-checkbox.js.map +1 -0
  38. package/dist/components/checkbox/snice-checkbox.types.d.ts +20 -0
  39. package/dist/components/chip/snice-chip.d.ts +28 -0
  40. package/dist/components/chip/snice-chip.js +199 -0
  41. package/dist/components/chip/snice-chip.js.map +1 -0
  42. package/dist/components/chip/snice-chip.types.d.ts +14 -0
  43. package/dist/components/date-picker/snice-date-picker.d.ts +82 -0
  44. package/dist/components/date-picker/snice-date-picker.js +847 -0
  45. package/dist/components/date-picker/snice-date-picker.js.map +1 -0
  46. package/dist/components/date-picker/snice-date-picker.types.d.ts +71 -0
  47. package/dist/components/divider/snice-divider.d.ts +17 -0
  48. package/dist/components/divider/snice-divider.js +122 -0
  49. package/dist/components/divider/snice-divider.js.map +1 -0
  50. package/{components/divider/snice-divider.types.ts → dist/components/divider/snice-divider.types.d.ts} +9 -10
  51. package/dist/components/drawer/snice-drawer.d.ts +37 -0
  52. package/dist/components/drawer/snice-drawer.js +337 -0
  53. package/dist/components/drawer/snice-drawer.js.map +1 -0
  54. package/dist/components/drawer/snice-drawer.types.d.ts +16 -0
  55. package/dist/components/input/snice-input.d.ts +65 -0
  56. package/dist/components/input/snice-input.js +567 -0
  57. package/dist/components/input/snice-input.js.map +1 -0
  58. package/dist/components/input/snice-input.types.d.ts +53 -0
  59. package/dist/components/layout/snice-layout-blog.d.ts +4 -0
  60. package/dist/components/layout/snice-layout-blog.js +67 -0
  61. package/dist/components/layout/snice-layout-blog.js.map +1 -0
  62. package/dist/components/layout/snice-layout-card.d.ts +6 -0
  63. package/dist/components/layout/snice-layout-card.js +64 -0
  64. package/dist/components/layout/snice-layout-card.js.map +1 -0
  65. package/dist/components/layout/snice-layout-centered.d.ts +5 -0
  66. package/dist/components/layout/snice-layout-centered.js +48 -0
  67. package/dist/components/layout/snice-layout-centered.js.map +1 -0
  68. package/dist/components/layout/snice-layout-dashboard.d.ts +4 -0
  69. package/dist/components/layout/snice-layout-dashboard.js +64 -0
  70. package/dist/components/layout/snice-layout-dashboard.js.map +1 -0
  71. package/dist/components/layout/snice-layout-fullscreen.d.ts +5 -0
  72. package/dist/components/layout/snice-layout-fullscreen.js +60 -0
  73. package/dist/components/layout/snice-layout-fullscreen.js.map +1 -0
  74. package/dist/components/layout/snice-layout-landing.d.ts +4 -0
  75. package/dist/components/layout/snice-layout-landing.js +66 -0
  76. package/dist/components/layout/snice-layout-landing.js.map +1 -0
  77. package/dist/components/layout/snice-layout-minimal.d.ts +4 -0
  78. package/dist/components/layout/snice-layout-minimal.js +38 -0
  79. package/dist/components/layout/snice-layout-minimal.js.map +1 -0
  80. package/dist/components/layout/snice-layout-sidebar.d.ts +5 -0
  81. package/dist/components/layout/snice-layout-sidebar.js +74 -0
  82. package/dist/components/layout/snice-layout-sidebar.js.map +1 -0
  83. package/dist/components/layout/snice-layout-split.d.ts +6 -0
  84. package/dist/components/layout/snice-layout-split.js +58 -0
  85. package/dist/components/layout/snice-layout-split.js.map +1 -0
  86. package/dist/components/layout/snice-layout.d.ts +4 -0
  87. package/dist/components/layout/snice-layout.js +54 -0
  88. package/dist/components/layout/snice-layout.js.map +1 -0
  89. package/{components/layout/snice-layout.types.ts → dist/components/layout/snice-layout.types.d.ts} +1 -3
  90. package/dist/components/login/snice-login.d.ts +44 -0
  91. package/dist/components/login/snice-login.js +382 -0
  92. package/dist/components/login/snice-login.js.map +1 -0
  93. package/dist/components/login/snice-login.types.d.ts +26 -0
  94. package/dist/components/modal/snice-modal.d.ts +32 -0
  95. package/dist/components/modal/snice-modal.js +280 -0
  96. package/dist/components/modal/snice-modal.js.map +1 -0
  97. package/dist/components/modal/snice-modal.types.d.ts +18 -0
  98. package/dist/components/pagination/snice-pagination.d.ts +26 -0
  99. package/dist/components/pagination/snice-pagination.js +373 -0
  100. package/dist/components/pagination/snice-pagination.js.map +1 -0
  101. package/dist/components/pagination/snice-pagination.types.d.ts +18 -0
  102. package/dist/components/progress/snice-progress.d.ts +35 -0
  103. package/dist/components/progress/snice-progress.js +305 -0
  104. package/dist/components/progress/snice-progress.js.map +1 -0
  105. package/dist/components/progress/snice-progress.types.d.ts +18 -0
  106. package/dist/components/radio/snice-radio.d.ts +33 -0
  107. package/dist/components/radio/snice-radio.js +279 -0
  108. package/dist/components/radio/snice-radio.js.map +1 -0
  109. package/dist/components/radio/snice-radio.types.d.ts +19 -0
  110. package/dist/components/select/snice-option.d.ts +17 -0
  111. package/dist/components/select/snice-option.js +88 -0
  112. package/dist/components/select/snice-option.js.map +1 -0
  113. package/{components/select/snice-option.types.ts → dist/components/select/snice-option.types.d.ts} +8 -8
  114. package/dist/components/select/snice-select.d.ts +89 -0
  115. package/dist/components/select/snice-select.js +864 -0
  116. package/dist/components/select/snice-select.js.map +1 -0
  117. package/dist/components/select/snice-select.types.d.ts +49 -0
  118. package/dist/components/skeleton/snice-skeleton.d.ts +16 -0
  119. package/dist/components/skeleton/snice-skeleton.js +166 -0
  120. package/dist/components/skeleton/snice-skeleton.js.map +1 -0
  121. package/{components/skeleton/snice-skeleton.types.ts → dist/components/skeleton/snice-skeleton.types.d.ts} +7 -8
  122. package/dist/components/snice-cell-C8aBfN72.js +4 -0
  123. package/dist/components/snice-cell-C8aBfN72.js.map +1 -0
  124. package/dist/components/switch/snice-switch.d.ts +38 -0
  125. package/dist/components/switch/snice-switch.js +305 -0
  126. package/dist/components/switch/snice-switch.js.map +1 -0
  127. package/dist/components/switch/snice-switch.types.d.ts +21 -0
  128. package/dist/components/symbols.d.ts +1 -0
  129. package/dist/components/symbols.js +22 -0
  130. package/dist/components/symbols.js.map +1 -0
  131. package/dist/components/table/snice-cell-boolean.d.ts +21 -0
  132. package/dist/components/table/snice-cell-boolean.js +164 -0
  133. package/dist/components/table/snice-cell-boolean.js.map +1 -0
  134. package/dist/components/table/snice-cell-date.d.ts +24 -0
  135. package/dist/components/table/snice-cell-date.js +253 -0
  136. package/dist/components/table/snice-cell-date.js.map +1 -0
  137. package/dist/components/table/snice-cell-duration.d.ts +16 -0
  138. package/dist/components/table/snice-cell-duration.js +130 -0
  139. package/dist/components/table/snice-cell-duration.js.map +1 -0
  140. package/dist/components/table/snice-cell-filesize.d.ts +16 -0
  141. package/dist/components/table/snice-cell-filesize.js +126 -0
  142. package/dist/components/table/snice-cell-filesize.js.map +1 -0
  143. package/dist/components/table/snice-cell-number.d.ts +23 -0
  144. package/dist/components/table/snice-cell-number.js +215 -0
  145. package/dist/components/table/snice-cell-number.js.map +1 -0
  146. package/dist/components/table/snice-cell-progress.d.ts +17 -0
  147. package/dist/components/table/snice-cell-progress.js +121 -0
  148. package/dist/components/table/snice-cell-progress.js.map +1 -0
  149. package/dist/components/table/snice-cell-rating.d.ts +17 -0
  150. package/dist/components/table/snice-cell-rating.js +120 -0
  151. package/dist/components/table/snice-cell-rating.js.map +1 -0
  152. package/dist/components/table/snice-cell-sparkline.d.ts +29 -0
  153. package/dist/components/table/snice-cell-sparkline.js +306 -0
  154. package/dist/components/table/snice-cell-sparkline.js.map +1 -0
  155. package/dist/components/table/snice-cell-text.d.ts +19 -0
  156. package/dist/components/table/snice-cell-text.js +161 -0
  157. package/dist/components/table/snice-cell-text.js.map +1 -0
  158. package/dist/components/table/snice-cell.d.ts +32 -0
  159. package/dist/components/table/snice-cell.js +458 -0
  160. package/dist/components/table/snice-cell.js.map +1 -0
  161. package/dist/components/table/snice-column.d.ts +62 -0
  162. package/dist/components/table/snice-column.js +506 -0
  163. package/dist/components/table/snice-column.js.map +1 -0
  164. package/dist/components/table/snice-header.d.ts +33 -0
  165. package/dist/components/table/snice-header.js +289 -0
  166. package/dist/components/table/snice-header.js.map +1 -0
  167. package/dist/components/table/snice-progress.d.ts +10 -0
  168. package/dist/components/table/snice-progress.js +105 -0
  169. package/dist/components/table/snice-progress.js.map +1 -0
  170. package/dist/components/table/snice-rating.d.ts +9 -0
  171. package/dist/components/table/snice-rating.js +81 -0
  172. package/dist/components/table/snice-rating.js.map +1 -0
  173. package/dist/components/table/snice-row.d.ts +43 -0
  174. package/dist/components/table/snice-row.js +353 -0
  175. package/dist/components/table/snice-row.js.map +1 -0
  176. package/dist/components/table/snice-table.d.ts +69 -0
  177. package/dist/components/table/snice-table.js +792 -0
  178. package/dist/components/table/snice-table.js.map +1 -0
  179. package/dist/components/table/snice-table.types.d.ts +137 -0
  180. package/dist/components/tabs/snice-tab-panel.d.ts +12 -0
  181. package/dist/components/tabs/snice-tab-panel.js +87 -0
  182. package/dist/components/tabs/snice-tab-panel.js.map +1 -0
  183. package/dist/components/tabs/snice-tab.d.ts +13 -0
  184. package/dist/components/tabs/snice-tab.js +98 -0
  185. package/dist/components/tabs/snice-tab.js.map +1 -0
  186. package/dist/components/tabs/snice-tabs.d.ts +34 -0
  187. package/dist/components/tabs/snice-tabs.js +375 -0
  188. package/dist/components/tabs/snice-tabs.js.map +1 -0
  189. package/dist/components/tabs/snice-tabs.types.d.ts +23 -0
  190. package/dist/components/toast/snice-toast-container.d.ts +25 -0
  191. package/dist/components/toast/snice-toast-container.js +252 -0
  192. package/dist/components/toast/snice-toast-container.js.map +1 -0
  193. package/dist/components/toast/snice-toast.d.ts +23 -0
  194. package/dist/components/toast/snice-toast.js +321 -0
  195. package/dist/components/toast/snice-toast.js.map +1 -0
  196. package/dist/components/toast/snice-toast.types.d.ts +30 -0
  197. package/dist/components/tooltip/snice-tooltip.d.ts +50 -0
  198. package/dist/components/tooltip/snice-tooltip.js +644 -0
  199. package/dist/components/tooltip/snice-tooltip.js.map +1 -0
  200. package/dist/components/tooltip/snice-tooltip.types.d.ts +18 -0
  201. package/dist/components/transitions.d.ts +11 -0
  202. package/dist/components/transitions.js +72 -0
  203. package/dist/components/transitions.js.map +1 -0
  204. package/dist/index.cjs +16 -20
  205. package/dist/index.cjs.map +1 -1
  206. package/dist/index.cjs.min.map +1 -1
  207. package/dist/index.esm.js +16 -20
  208. package/dist/index.esm.js.map +1 -1
  209. package/dist/index.esm.min.js +3 -3
  210. package/dist/index.esm.min.js.map +1 -1
  211. package/dist/index.iife.js +16 -20
  212. package/dist/index.iife.js.map +1 -1
  213. package/dist/index.iife.min.js +3 -3
  214. package/dist/index.iife.min.js.map +1 -1
  215. package/dist/symbols.esm.js +1 -1
  216. package/dist/transitions.esm.js +1 -1
  217. package/package.json +10 -6
  218. package/components/accordion/demo.html +0 -403
  219. package/components/accordion/snice-accordion-item.css +0 -85
  220. package/components/accordion/snice-accordion-item.ts +0 -226
  221. package/components/accordion/snice-accordion.css +0 -31
  222. package/components/accordion/snice-accordion.ts +0 -182
  223. package/components/accordion/snice-accordion.types.ts +0 -32
  224. package/components/alert/demo.html +0 -445
  225. package/components/alert/snice-alert.css +0 -195
  226. package/components/alert/snice-alert.ts +0 -141
  227. package/components/avatar/demo.html +0 -598
  228. package/components/avatar/snice-avatar.css +0 -131
  229. package/components/avatar/snice-avatar.ts +0 -136
  230. package/components/avatar/snice-avatar.types.ts +0 -13
  231. package/components/badge/demo.html +0 -523
  232. package/components/badge/snice-badge.css +0 -161
  233. package/components/badge/snice-badge.ts +0 -117
  234. package/components/breadcrumbs/demo.html +0 -404
  235. package/components/breadcrumbs/snice-breadcrumbs.css +0 -133
  236. package/components/breadcrumbs/snice-breadcrumbs.ts +0 -191
  237. package/components/breadcrumbs/snice-breadcrumbs.types.ts +0 -26
  238. package/components/breadcrumbs/snice-crumb.ts +0 -26
  239. package/components/button/demo.html +0 -42
  240. package/components/button/snice-button.css +0 -230
  241. package/components/button/snice-button.ts +0 -169
  242. package/components/button/snice-button.types.ts +0 -25
  243. package/components/card/demo.html +0 -525
  244. package/components/card/snice-card.css +0 -140
  245. package/components/card/snice-card.ts +0 -102
  246. package/components/checkbox/demo.html +0 -253
  247. package/components/checkbox/snice-checkbox.css +0 -164
  248. package/components/checkbox/snice-checkbox.ts +0 -223
  249. package/components/checkbox/snice-checkbox.types.ts +0 -22
  250. package/components/chip/demo.html +0 -383
  251. package/components/chip/snice-chip.css +0 -195
  252. package/components/chip/snice-chip.ts +0 -139
  253. package/components/chip/snice-chip.types.ts +0 -15
  254. package/components/date-picker/README.md +0 -233
  255. package/components/date-picker/demo.html +0 -191
  256. package/components/date-picker/snice-date-picker.css +0 -330
  257. package/components/date-picker/snice-date-picker.ts +0 -777
  258. package/components/date-picker/snice-date-picker.types.ts +0 -83
  259. package/components/divider/demo.html +0 -233
  260. package/components/divider/snice-divider.css +0 -155
  261. package/components/divider/snice-divider.ts +0 -69
  262. package/components/drawer/demo.html +0 -328
  263. package/components/drawer/snice-drawer.css +0 -476
  264. package/components/drawer/snice-drawer.ts +0 -287
  265. package/components/drawer/snice-drawer.types.ts +0 -17
  266. package/components/global.d.ts +0 -14
  267. package/components/input/demo.html +0 -303
  268. package/components/input/snice-input.css +0 -257
  269. package/components/input/snice-input.ts +0 -442
  270. package/components/input/snice-input.types.ts +0 -59
  271. package/components/input/test.html +0 -77
  272. package/components/layout/README.md +0 -260
  273. package/components/layout/demo.html +0 -538
  274. package/components/layout/snice-layout-blog.css +0 -129
  275. package/components/layout/snice-layout-blog.ts +0 -48
  276. package/components/layout/snice-layout-card.css +0 -104
  277. package/components/layout/snice-layout-card.ts +0 -35
  278. package/components/layout/snice-layout-centered.css +0 -51
  279. package/components/layout/snice-layout-centered.ts +0 -22
  280. package/components/layout/snice-layout-dashboard.css +0 -98
  281. package/components/layout/snice-layout-dashboard.ts +0 -45
  282. package/components/layout/snice-layout-fullscreen.css +0 -72
  283. package/components/layout/snice-layout-fullscreen.ts +0 -34
  284. package/components/layout/snice-layout-landing.css +0 -92
  285. package/components/layout/snice-layout-landing.ts +0 -47
  286. package/components/layout/snice-layout-minimal.css +0 -16
  287. package/components/layout/snice-layout-minimal.ts +0 -19
  288. package/components/layout/snice-layout-sidebar.css +0 -117
  289. package/components/layout/snice-layout-sidebar.ts +0 -48
  290. package/components/layout/snice-layout-split.css +0 -103
  291. package/components/layout/snice-layout-split.ts +0 -29
  292. package/components/layout/snice-layout.css +0 -72
  293. package/components/layout/snice-layout.ts +0 -35
  294. package/components/login/demo-auth-controller.ts +0 -185
  295. package/components/login/demo.html +0 -470
  296. package/components/login/snice-login.css +0 -204
  297. package/components/login/snice-login.ts +0 -326
  298. package/components/login/snice-login.types.ts +0 -29
  299. package/components/modal/demo.html +0 -291
  300. package/components/modal/snice-modal.css +0 -203
  301. package/components/modal/snice-modal.ts +0 -233
  302. package/components/modal/snice-modal.types.ts +0 -21
  303. package/components/pagination/demo.html +0 -395
  304. package/components/pagination/snice-pagination.ts +0 -333
  305. package/components/pagination/snice-pagination.types.ts +0 -21
  306. package/components/progress/demo.html +0 -510
  307. package/components/progress/snice-progress.css +0 -267
  308. package/components/progress/snice-progress.ts +0 -247
  309. package/components/progress/snice-progress.types.ts +0 -19
  310. package/components/radio/demo.html +0 -287
  311. package/components/radio/snice-radio.css +0 -171
  312. package/components/radio/snice-radio.ts +0 -218
  313. package/components/radio/snice-radio.types.ts +0 -21
  314. package/components/select/demo.html +0 -511
  315. package/components/select/snice-option.ts +0 -52
  316. package/components/select/snice-select.css +0 -392
  317. package/components/select/snice-select.ts +0 -796
  318. package/components/select/snice-select.types.ts +0 -55
  319. package/components/skeleton/demo.html +0 -514
  320. package/components/skeleton/snice-skeleton.css +0 -109
  321. package/components/skeleton/snice-skeleton.ts +0 -126
  322. package/components/switch/demo.html +0 -284
  323. package/components/switch/snice-switch.css +0 -221
  324. package/components/switch/snice-switch.ts +0 -229
  325. package/components/switch/snice-switch.types.ts +0 -23
  326. package/components/symbols.ts +0 -23
  327. package/components/table/demo-table-controller.ts +0 -100
  328. package/components/table/demo.html +0 -480
  329. package/components/table/snice-cell-boolean.ts +0 -112
  330. package/components/table/snice-cell-date.ts +0 -210
  331. package/components/table/snice-cell-duration.ts +0 -91
  332. package/components/table/snice-cell-filesize.ts +0 -90
  333. package/components/table/snice-cell-number.ts +0 -165
  334. package/components/table/snice-cell-progress.ts +0 -83
  335. package/components/table/snice-cell-rating.ts +0 -82
  336. package/components/table/snice-cell-sparkline.ts +0 -253
  337. package/components/table/snice-cell-text.ts +0 -125
  338. package/components/table/snice-cell.css +0 -296
  339. package/components/table/snice-cell.ts +0 -473
  340. package/components/table/snice-column.ts +0 -353
  341. package/components/table/snice-header.css +0 -243
  342. package/components/table/snice-header.ts +0 -261
  343. package/components/table/snice-progress.ts +0 -66
  344. package/components/table/snice-rating.ts +0 -45
  345. package/components/table/snice-row.css +0 -255
  346. package/components/table/snice-row.ts +0 -331
  347. package/components/table/snice-table.css +0 -241
  348. package/components/table/snice-table.ts +0 -737
  349. package/components/table/snice-table.types.ts +0 -158
  350. package/components/tabs/demo.html +0 -487
  351. package/components/tabs/snice-tab-panel.css +0 -264
  352. package/components/tabs/snice-tab-panel.ts +0 -47
  353. package/components/tabs/snice-tab.css +0 -96
  354. package/components/tabs/snice-tab.ts +0 -65
  355. package/components/tabs/snice-tabs.css +0 -189
  356. package/components/tabs/snice-tabs.ts +0 -332
  357. package/components/tabs/snice-tabs.types.ts +0 -28
  358. package/components/theme/theme.css +0 -234
  359. package/components/toast/demo.html +0 -329
  360. package/components/toast/snice-toast-container.ts +0 -256
  361. package/components/toast/snice-toast.css +0 -213
  362. package/components/toast/snice-toast.ts +0 -276
  363. package/components/toast/snice-toast.types.ts +0 -35
  364. package/components/tooltip/demo.html +0 -350
  365. package/components/tooltip/snice-tooltip-portal.css +0 -79
  366. package/components/tooltip/snice-tooltip.css +0 -117
  367. package/components/tooltip/snice-tooltip.ts +0 -612
  368. package/components/tooltip/snice-tooltip.types.ts +0 -32
  369. package/components/transitions.ts +0 -94
  370. package/components/tsconfig.json +0 -18
package/components/accordion/demo.html DELETED
@@ -1,403 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Snice Accordion Demo</title>
7
- <style>
8
- body {
9
- font-family: system-ui, -apple-system, sans-serif;
10
- padding: 40px;
11
- line-height: 1.6;
12
- background: #f5f5f5;
13
- }
14
-
15
- .container {
16
- max-width: 800px;
17
- margin: 0 auto;
18
- background: white;
19
- padding: 40px;
20
- border-radius: 8px;
21
- box-shadow: 0 2px 8px rgba(0,0,0,0.1);
22
- }
23
-
24
- h1 {
25
- color: #333;
26
- border-bottom: 2px solid #e0e0e0;
27
- padding-bottom: 10px;
28
- }
29
-
30
- h2 {
31
- color: #555;
32
- margin-top: 30px;
33
- }
34
-
35
- .demo-section {
36
- margin: 30px 0;
37
- }
38
-
39
- .controls {
40
- display: flex;
41
- gap: 10px;
42
- margin-bottom: 20px;
43
- flex-wrap: wrap;
44
- }
45
-
46
- button {
47
- padding: 8px 16px;
48
- background: #3b82f6;
49
- color: white;
50
- border: none;
51
- border-radius: 4px;
52
- cursor: pointer;
53
- font-size: 14px;
54
- }
55
-
56
- button:hover {
57
- background: #2563eb;
58
- }
59
-
60
- button:disabled {
61
- background: #9ca3af;
62
- cursor: not-allowed;
63
- }
64
-
65
- .custom-accordion {
66
- --accordion-border-color: #cbd5e1;
67
- --accordion-border-radius: 12px;
68
- --accordion-header-bg: #f8fafc;
69
- --accordion-header-bg-hover: #e2e8f0;
70
- --accordion-header-bg-active: #cbd5e1;
71
- --accordion-header-padding: 20px;
72
- --accordion-content-padding: 20px;
73
- --accordion-animation-duration: 0.4s;
74
- }
75
-
76
- .icon-example {
77
- display: flex;
78
- align-items: center;
79
- gap: 8px;
80
- }
81
-
82
- .icon-example svg {
83
- width: 20px;
84
- height: 20px;
85
- }
86
-
87
- code {
88
- background: #f0f0f0;
89
- padding: 2px 6px;
90
- border-radius: 3px;
91
- font-size: 0.9em;
92
- }
93
-
94
- pre {
95
- background: #f8f8f8;
96
- padding: 16px;
97
- border-radius: 4px;
98
- overflow-x: auto;
99
- }
100
-
101
- .status {
102
- margin-top: 20px;
103
- padding: 12px;
104
- background: #f0f9ff;
105
- border: 1px solid #0ea5e9;
106
- border-radius: 4px;
107
- color: #0369a1;
108
- }
109
- </style>
110
- </head>
111
- <body>
112
- <div class="container">
113
- <h1>Snice Accordion Component Demo</h1>
114
-
115
- <div class="demo-section">
116
- <h2>Basic Accordion (Single Mode)</h2>
117
- <p>Only one item can be expanded at a time.</p>
118
-
119
- <snice-accordion id="basic-accordion">
120
- <snice-accordion-item item-id="item-1" open>
121
- <span slot="header">What is Snice?</span>
122
- <p>Snice is a modern web component library that provides customizable, accessible UI components built with TypeScript and decorators. It focuses on simplicity, performance, and developer experience.</p>
123
- </snice-accordion-item>
124
-
125
- <snice-accordion-item item-id="item-2">
126
- <span slot="header">How do I install Snice?</span>
127
- <p>You can install Snice using npm:</p>
128
- <pre><code>npm install snice</code></pre>
129
- <p>Then import the components you need in your application.</p>
130
- </snice-accordion-item>
131
-
132
- <snice-accordion-item item-id="item-3">
133
- <span slot="header">Is Snice accessible?</span>
134
- <p>Yes! All Snice components are built with accessibility in mind. They include proper ARIA attributes, keyboard navigation, and follow WCAG guidelines.</p>
135
- <ul>
136
- <li>Full keyboard support</li>
137
- <li>Screen reader friendly</li>
138
- <li>ARIA compliant</li>
139
- <li>Focus management</li>
140
- </ul>
141
- </snice-accordion-item>
142
- </snice-accordion>
143
- </div>
144
-
145
- <div class="demo-section">
146
- <h2>Multiple Expansion Mode</h2>
147
- <p>Multiple items can be expanded simultaneously.</p>
148
-
149
- <div class="controls">
150
- <button onclick="openAll()">Open All</button>
151
- <button onclick="closeAll()">Close All</button>
152
- <button onclick="toggleSecond()">Toggle Second Item</button>
153
- </div>
154
-
155
- <snice-accordion id="multiple-accordion" multiple>
156
- <snice-accordion-item item-id="multi-1">
157
- <span slot="header">
158
- <span class="icon-example">
159
- <svg viewBox="0 0 24 24" fill="currentColor">
160
- <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
161
- </svg>
162
- Features
163
- </span>
164
- </span>
165
- <p>Snice offers a wide range of features:</p>
166
- <ul>
167
- <li>TypeScript support</li>
168
- <li>Custom elements</li>
169
- <li>Shadow DOM encapsulation</li>
170
- <li>Reactive properties</li>
171
- <li>Event handling</li>
172
- </ul>
173
- </snice-accordion-item>
174
-
175
- <snice-accordion-item item-id="multi-2">
176
- <span slot="header">
177
- <span class="icon-example">
178
- <svg viewBox="0 0 24 24" fill="currentColor">
179
- <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/>
180
- </svg>
181
- Code Example
182
- </span>
183
- </span>
184
- <pre><code>import { SniceAccordion } from 'snice/accordion';
185
-
186
- // Get accordion element
187
- const accordion = document.querySelector('snice-accordion');
188
-
189
- // Open specific item
190
- accordion.openItem('item-1');
191
-
192
- // Listen for events
193
- accordion.addEventListener('accordion-open', (e) => {
194
- console.log('Opened:', e.detail.itemId);
195
- });</code></pre>
196
- </snice-accordion-item>
197
-
198
- <snice-accordion-item item-id="multi-3">
199
- <span slot="header">
200
- <span class="icon-example">
201
- <svg viewBox="0 0 24 24" fill="currentColor">
202
- <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
203
- </svg>
204
- Benefits
205
- </span>
206
- </span>
207
- <p>Why choose Snice?</p>
208
- <ul>
209
- <li>Lightweight and performant</li>
210
- <li>Framework agnostic</li>
211
- <li>Customizable styling</li>
212
- <li>Well documented</li>
213
- <li>Active community</li>
214
- </ul>
215
- </snice-accordion-item>
216
- </snice-accordion>
217
- </div>
218
-
219
- <div class="demo-section">
220
- <h2>Custom Styled Accordion</h2>
221
- <p>Accordion with custom CSS variables for styling.</p>
222
-
223
- <snice-accordion class="custom-accordion">
224
- <snice-accordion-item item-id="custom-1">
225
- <span slot="header">Custom Styling</span>
226
- <p>This accordion uses custom CSS variables to change its appearance. You can customize:</p>
227
- <ul>
228
- <li>Border colors and radius</li>
229
- <li>Header background colors</li>
230
- <li>Padding and spacing</li>
231
- <li>Animation duration</li>
232
- </ul>
233
- </snice-accordion-item>
234
-
235
- <snice-accordion-item item-id="custom-2">
236
- <span slot="header">Dynamic Content</span>
237
- <p>Content height adjusts automatically.</p>
238
- <button onclick="addContent(this)">Add More Content</button>
239
- <div id="dynamic-content"></div>
240
- </snice-accordion-item>
241
-
242
- <snice-accordion-item item-id="custom-3" disabled>
243
- <span slot="header">Disabled Item</span>
244
- <p>This content cannot be accessed because the item is disabled.</p>
245
- </snice-accordion-item>
246
- </snice-accordion>
247
- </div>
248
-
249
- <div class="demo-section">
250
- <h2>Programmatic Control</h2>
251
- <p>Control the accordion programmatically.</p>
252
-
253
- <div class="controls">
254
- <button onclick="openItem('prog-1')">Open First</button>
255
- <button onclick="closeItem('prog-1')">Close First</button>
256
- <button onclick="toggleItem('prog-2')">Toggle Second</button>
257
- <button onclick="getActiveItems()">Get Active Items</button>
258
- </div>
259
-
260
- <snice-accordion id="programmatic-accordion">
261
- <snice-accordion-item item-id="prog-1">
262
- <span slot="header">First Item</span>
263
- <p>This item can be controlled programmatically using the accordion's API.</p>
264
- </snice-accordion-item>
265
-
266
- <snice-accordion-item item-id="prog-2">
267
- <span slot="header">Second Item</span>
268
- <p>Toggle this item using the button above.</p>
269
- </snice-accordion-item>
270
-
271
- <snice-accordion-item item-id="prog-3">
272
- <span slot="header">Third Item</span>
273
- <p>Another item with some content.</p>
274
- </snice-accordion-item>
275
- </snice-accordion>
276
-
277
- <div id="status" class="status"></div>
278
- </div>
279
-
280
- <div class="demo-section">
281
- <h2>Keyboard Navigation</h2>
282
- <p>Use arrow keys to navigate between items, Enter or Space to toggle.</p>
283
-
284
- <snice-accordion>
285
- <snice-accordion-item item-id="nav-1">
286
- <span slot="header">Keyboard Support</span>
287
- <p>Try these keyboard shortcuts:</p>
288
- <ul>
289
- <li><code>↓</code> - Move to next item</li>
290
- <li><code>↑</code> - Move to previous item</li>
291
- <li><code>Home</code> - Move to first item</li>
292
- <li><code>End</code> - Move to last item</li>
293
- <li><code>Enter</code> or <code>Space</code> - Toggle current item</li>
294
- </ul>
295
- </snice-accordion-item>
296
-
297
- <snice-accordion-item item-id="nav-2">
298
- <span slot="header">Focus Management</span>
299
- <p>Focus is properly managed when navigating with keyboard.</p>
300
- </snice-accordion-item>
301
-
302
- <snice-accordion-item item-id="nav-3">
303
- <span slot="header">Accessibility</span>
304
- <p>All items have proper ARIA attributes for screen readers.</p>
305
- </snice-accordion-item>
306
- </snice-accordion>
307
- </div>
308
-
309
- <div class="demo-section">
310
- <h2>Event Handling</h2>
311
- <p>Listen for accordion events.</p>
312
-
313
- <snice-accordion id="event-accordion">
314
- <snice-accordion-item item-id="event-1">
315
- <span slot="header">Click me and watch the console</span>
316
- <p>Events are logged to the console and displayed below.</p>
317
- </snice-accordion-item>
318
-
319
- <snice-accordion-item item-id="event-2">
320
- <span slot="header">Another item to test events</span>
321
- <p>Each open/close action triggers an event.</p>
322
- </snice-accordion-item>
323
- </snice-accordion>
324
-
325
- <div id="event-log" class="status">
326
- <strong>Event Log:</strong><br>
327
- <span id="log-content">No events yet...</span>
328
- </div>
329
- </div>
330
- </div>
331
-
332
- <script type="module">
333
- import './snice-accordion.ts';
334
- import './snice-accordion-item.ts';
335
-
336
- // Multiple mode controls
337
- window.openAll = function() {
338
- const accordion = document.getElementById('multiple-accordion');
339
- accordion.openAll();
340
- };
341
-
342
- window.closeAll = function() {
343
- const accordion = document.getElementById('multiple-accordion');
344
- accordion.closeAll();
345
- };
346
-
347
- window.toggleSecond = function() {
348
- const accordion = document.getElementById('multiple-accordion');
349
- accordion.toggleItem('multi-2');
350
- };
351
-
352
- // Dynamic content
353
- window.addContent = function(button) {
354
- const container = document.getElementById('dynamic-content');
355
- const p = document.createElement('p');
356
- p.textContent = `Added paragraph ${container.children.length + 1} at ${new Date().toLocaleTimeString()}`;
357
- container.appendChild(p);
358
- };
359
-
360
- // Programmatic control
361
- window.openItem = function(id) {
362
- const accordion = document.getElementById('programmatic-accordion');
363
- accordion.openItem(id);
364
- };
365
-
366
- window.closeItem = function(id) {
367
- const accordion = document.getElementById('programmatic-accordion');
368
- accordion.closeItem(id);
369
- };
370
-
371
- window.toggleItem = function(id) {
372
- const accordion = document.getElementById('programmatic-accordion');
373
- accordion.toggleItem(id);
374
- };
375
-
376
- window.getActiveItems = function() {
377
- const accordion = document.getElementById('programmatic-accordion');
378
- const status = document.getElementById('status');
379
- const active = Array.from(accordion.activeItems);
380
- status.textContent = `Active items: ${active.length > 0 ? active.join(', ') : 'None'}`;
381
- };
382
-
383
- // Event handling
384
- const eventAccordion = document.getElementById('event-accordion');
385
- const logContent = document.getElementById('log-content');
386
- let eventCount = 0;
387
-
388
- eventAccordion.addEventListener('accordion-open', (e) => {
389
- eventCount++;
390
- const message = `[${eventCount}] Opened: ${e.detail.itemId}`;
391
- console.log(message);
392
- logContent.textContent = message;
393
- });
394
-
395
- eventAccordion.addEventListener('accordion-close', (e) => {
396
- eventCount++;
397
- const message = `[${eventCount}] Closed: ${e.detail.itemId}`;
398
- console.log(message);
399
- logContent.textContent = message;
400
- });
401
- </script>
402
- </body>
403
- </html>
package/components/accordion/snice-accordion-item.css DELETED
@@ -1,85 +0,0 @@
1
- :host {
2
- display: block;
3
- overflow: hidden;
4
- }
5
-
6
- :host([disabled]) {
7
- opacity: 0.5;
8
- pointer-events: none;
9
- }
10
-
11
- .accordion-item__header {
12
- display: flex;
13
- align-items: center;
14
- justify-content: space-between;
15
- width: 100%;
16
- padding: var(--accordion-header-padding, 1rem); /* 16px */
17
- background: var(--accordion-header-bg, #ffffff);
18
- color: var(--accordion-header-color, #111827);
19
- border: none;
20
- font-family: inherit;
21
- font-size: 1rem; /* 16px */
22
- font-weight: 500;
23
- text-align: left;
24
- cursor: pointer;
25
- transition: background-color 0.2s;
26
- outline-offset: -2px;
27
- }
28
-
29
- .accordion-item__header:hover {
30
- background: var(--accordion-header-bg-hover, #f9fafb);
31
- }
32
-
33
- .accordion-item__header:active {
34
- background: var(--accordion-header-bg-active, #f3f4f6);
35
- }
36
-
37
- .accordion-item__header:focus-visible {
38
- outline: 2px solid #3b82f6;
39
- outline-offset: -2px;
40
- }
41
-
42
- .accordion-item__title {
43
- flex: 1;
44
- display: flex;
45
- align-items: center;
46
- gap: 0.75rem; /* 12px */
47
- }
48
-
49
- .accordion-item__icon {
50
- width: var(--accordion-icon-size, 1.25rem); /* 20px */
51
- height: var(--accordion-icon-size, 1.25rem); /* 20px */
52
- transition: transform var(--accordion-animation-duration, 0.3s) ease-out;
53
- flex-shrink: 0;
54
- will-change: transform;
55
- }
56
-
57
- :host([open]) .accordion-item__icon {
58
- transform: rotate(180deg);
59
- }
60
-
61
- .accordion-item__content {
62
- overflow: hidden;
63
- background: var(--accordion-content-bg, #ffffff);
64
- color: var(--accordion-content-color, #4b5563);
65
- max-height: 0;
66
- transition: max-height var(--accordion-animation-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1);
67
- will-change: max-height;
68
- }
69
-
70
- :host([open]) .accordion-item__content {
71
- max-height: var(--max-height, 62.5rem); /* 1000px */
72
- }
73
-
74
- .accordion-item__content-inner {
75
- padding: var(--accordion-content-padding, 1rem); /* 16px */
76
- }
77
-
78
- /* Smooth animation for content */
79
- .accordion-item__content.measuring {
80
- display: block !important;
81
- max-height: none !important;
82
- visibility: hidden;
83
- position: absolute;
84
- z-index: -1000;
85
- }