snice 2.1.5 → 2.2.1

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 (367) 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-C9N6yGxQ.js +4 -0
  123. package/dist/components/snice-cell-C9N6yGxQ.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 +1 -1
  205. package/dist/index.esm.js +1 -1
  206. package/dist/index.iife.js +1 -1
  207. package/dist/symbols.esm.js +1 -1
  208. package/dist/transitions.esm.js +1 -1
  209. package/package.json +10 -6
  210. package/components/accordion/demo.html +0 -403
  211. package/components/accordion/snice-accordion-item.css +0 -85
  212. package/components/accordion/snice-accordion-item.ts +0 -226
  213. package/components/accordion/snice-accordion.css +0 -31
  214. package/components/accordion/snice-accordion.ts +0 -182
  215. package/components/accordion/snice-accordion.types.ts +0 -32
  216. package/components/alert/demo.html +0 -445
  217. package/components/alert/snice-alert.css +0 -195
  218. package/components/alert/snice-alert.ts +0 -141
  219. package/components/avatar/demo.html +0 -598
  220. package/components/avatar/snice-avatar.css +0 -131
  221. package/components/avatar/snice-avatar.ts +0 -136
  222. package/components/avatar/snice-avatar.types.ts +0 -13
  223. package/components/badge/demo.html +0 -523
  224. package/components/badge/snice-badge.css +0 -161
  225. package/components/badge/snice-badge.ts +0 -117
  226. package/components/breadcrumbs/demo.html +0 -404
  227. package/components/breadcrumbs/snice-breadcrumbs.css +0 -133
  228. package/components/breadcrumbs/snice-breadcrumbs.ts +0 -191
  229. package/components/breadcrumbs/snice-breadcrumbs.types.ts +0 -26
  230. package/components/breadcrumbs/snice-crumb.ts +0 -26
  231. package/components/button/demo.html +0 -42
  232. package/components/button/snice-button.css +0 -230
  233. package/components/button/snice-button.ts +0 -169
  234. package/components/button/snice-button.types.ts +0 -25
  235. package/components/card/demo.html +0 -525
  236. package/components/card/snice-card.css +0 -140
  237. package/components/card/snice-card.ts +0 -102
  238. package/components/checkbox/demo.html +0 -253
  239. package/components/checkbox/snice-checkbox.css +0 -164
  240. package/components/checkbox/snice-checkbox.ts +0 -223
  241. package/components/checkbox/snice-checkbox.types.ts +0 -22
  242. package/components/chip/demo.html +0 -383
  243. package/components/chip/snice-chip.css +0 -195
  244. package/components/chip/snice-chip.ts +0 -139
  245. package/components/chip/snice-chip.types.ts +0 -15
  246. package/components/date-picker/README.md +0 -233
  247. package/components/date-picker/demo.html +0 -191
  248. package/components/date-picker/snice-date-picker.css +0 -330
  249. package/components/date-picker/snice-date-picker.ts +0 -777
  250. package/components/date-picker/snice-date-picker.types.ts +0 -83
  251. package/components/divider/demo.html +0 -233
  252. package/components/divider/snice-divider.css +0 -155
  253. package/components/divider/snice-divider.ts +0 -69
  254. package/components/drawer/demo.html +0 -328
  255. package/components/drawer/snice-drawer.css +0 -476
  256. package/components/drawer/snice-drawer.ts +0 -287
  257. package/components/drawer/snice-drawer.types.ts +0 -17
  258. package/components/global.d.ts +0 -14
  259. package/components/input/demo.html +0 -303
  260. package/components/input/snice-input.css +0 -257
  261. package/components/input/snice-input.ts +0 -442
  262. package/components/input/snice-input.types.ts +0 -59
  263. package/components/input/test.html +0 -77
  264. package/components/layout/README.md +0 -260
  265. package/components/layout/demo.html +0 -538
  266. package/components/layout/snice-layout-blog.css +0 -129
  267. package/components/layout/snice-layout-blog.ts +0 -48
  268. package/components/layout/snice-layout-card.css +0 -104
  269. package/components/layout/snice-layout-card.ts +0 -35
  270. package/components/layout/snice-layout-centered.css +0 -51
  271. package/components/layout/snice-layout-centered.ts +0 -22
  272. package/components/layout/snice-layout-dashboard.css +0 -98
  273. package/components/layout/snice-layout-dashboard.ts +0 -45
  274. package/components/layout/snice-layout-fullscreen.css +0 -72
  275. package/components/layout/snice-layout-fullscreen.ts +0 -34
  276. package/components/layout/snice-layout-landing.css +0 -92
  277. package/components/layout/snice-layout-landing.ts +0 -47
  278. package/components/layout/snice-layout-minimal.css +0 -16
  279. package/components/layout/snice-layout-minimal.ts +0 -19
  280. package/components/layout/snice-layout-sidebar.css +0 -117
  281. package/components/layout/snice-layout-sidebar.ts +0 -48
  282. package/components/layout/snice-layout-split.css +0 -103
  283. package/components/layout/snice-layout-split.ts +0 -29
  284. package/components/layout/snice-layout.css +0 -72
  285. package/components/layout/snice-layout.ts +0 -35
  286. package/components/login/demo-auth-controller.ts +0 -185
  287. package/components/login/demo.html +0 -470
  288. package/components/login/snice-login.css +0 -204
  289. package/components/login/snice-login.ts +0 -326
  290. package/components/login/snice-login.types.ts +0 -29
  291. package/components/modal/demo.html +0 -291
  292. package/components/modal/snice-modal.css +0 -203
  293. package/components/modal/snice-modal.ts +0 -233
  294. package/components/modal/snice-modal.types.ts +0 -21
  295. package/components/pagination/demo.html +0 -395
  296. package/components/pagination/snice-pagination.ts +0 -333
  297. package/components/pagination/snice-pagination.types.ts +0 -21
  298. package/components/progress/demo.html +0 -510
  299. package/components/progress/snice-progress.css +0 -267
  300. package/components/progress/snice-progress.ts +0 -247
  301. package/components/progress/snice-progress.types.ts +0 -19
  302. package/components/radio/demo.html +0 -287
  303. package/components/radio/snice-radio.css +0 -171
  304. package/components/radio/snice-radio.ts +0 -218
  305. package/components/radio/snice-radio.types.ts +0 -21
  306. package/components/select/demo.html +0 -511
  307. package/components/select/snice-option.ts +0 -52
  308. package/components/select/snice-select.css +0 -392
  309. package/components/select/snice-select.ts +0 -796
  310. package/components/select/snice-select.types.ts +0 -55
  311. package/components/skeleton/demo.html +0 -514
  312. package/components/skeleton/snice-skeleton.css +0 -109
  313. package/components/skeleton/snice-skeleton.ts +0 -126
  314. package/components/switch/demo.html +0 -284
  315. package/components/switch/snice-switch.css +0 -221
  316. package/components/switch/snice-switch.ts +0 -229
  317. package/components/switch/snice-switch.types.ts +0 -23
  318. package/components/symbols.ts +0 -23
  319. package/components/table/demo-table-controller.ts +0 -100
  320. package/components/table/demo.html +0 -480
  321. package/components/table/snice-cell-boolean.ts +0 -112
  322. package/components/table/snice-cell-date.ts +0 -210
  323. package/components/table/snice-cell-duration.ts +0 -91
  324. package/components/table/snice-cell-filesize.ts +0 -90
  325. package/components/table/snice-cell-number.ts +0 -165
  326. package/components/table/snice-cell-progress.ts +0 -83
  327. package/components/table/snice-cell-rating.ts +0 -82
  328. package/components/table/snice-cell-sparkline.ts +0 -253
  329. package/components/table/snice-cell-text.ts +0 -125
  330. package/components/table/snice-cell.css +0 -296
  331. package/components/table/snice-cell.ts +0 -473
  332. package/components/table/snice-column.ts +0 -353
  333. package/components/table/snice-header.css +0 -243
  334. package/components/table/snice-header.ts +0 -261
  335. package/components/table/snice-progress.ts +0 -66
  336. package/components/table/snice-rating.ts +0 -45
  337. package/components/table/snice-row.css +0 -255
  338. package/components/table/snice-row.ts +0 -331
  339. package/components/table/snice-table.css +0 -241
  340. package/components/table/snice-table.ts +0 -737
  341. package/components/table/snice-table.types.ts +0 -158
  342. package/components/tabs/demo.html +0 -487
  343. package/components/tabs/snice-tab-panel.css +0 -264
  344. package/components/tabs/snice-tab-panel.ts +0 -47
  345. package/components/tabs/snice-tab.css +0 -96
  346. package/components/tabs/snice-tab.ts +0 -65
  347. package/components/tabs/snice-tabs.css +0 -189
  348. package/components/tabs/snice-tabs.ts +0 -332
  349. package/components/tabs/snice-tabs.types.ts +0 -28
  350. package/components/theme/theme.css +0 -234
  351. package/components/toast/demo.html +0 -329
  352. package/components/toast/snice-toast-container.ts +0 -256
  353. package/components/toast/snice-toast.css +0 -213
  354. package/components/toast/snice-toast.ts +0 -276
  355. package/components/toast/snice-toast.types.ts +0 -35
  356. package/components/tooltip/demo.html +0 -350
  357. package/components/tooltip/snice-tooltip-portal.css +0 -79
  358. package/components/tooltip/snice-tooltip.css +0 -117
  359. package/components/tooltip/snice-tooltip.ts +0 -612
  360. package/components/tooltip/snice-tooltip.types.ts +0 -32
  361. package/components/transitions.ts +0 -94
  362. package/components/tsconfig.json +0 -18
  363. package/dist/index.cjs.min.map +0 -1
  364. package/dist/index.esm.min.js +0 -14
  365. package/dist/index.esm.min.js.map +0 -1
  366. package/dist/index.iife.min.js +0 -15
  367. package/dist/index.iife.min.js.map +0 -1
package/components/alert/demo.html DELETED
@@ -1,445 +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 Alert Demo</title>
7
- <link rel="stylesheet" href="../theme/theme.css">
8
- <style>
9
- body {
10
- font-family: system-ui, -apple-system, sans-serif;
11
- padding: 40px;
12
- line-height: 1.6;
13
- background: #f5f5f5;
14
- }
15
-
16
- .container {
17
- max-width: 900px;
18
- margin: 0 auto;
19
- background: white;
20
- padding: 40px;
21
- border-radius: 8px;
22
- box-shadow: 0 2px 8px rgba(0,0,0,0.1);
23
- }
24
-
25
- h1 {
26
- color: #333;
27
- border-bottom: 2px solid #e0e0e0;
28
- padding-bottom: 10px;
29
- }
30
-
31
- h2 {
32
- color: #555;
33
- margin-top: 30px;
34
- }
35
-
36
- .demo-section {
37
- margin: 30px 0;
38
- padding: 20px;
39
- background: #fafafa;
40
- border-radius: 4px;
41
- }
42
-
43
- .demo-label {
44
- display: block;
45
- margin-bottom: 12px;
46
- font-weight: 500;
47
- color: #666;
48
- font-size: 14px;
49
- }
50
-
51
- .alert-demo {
52
- margin: 16px 0;
53
- }
54
-
55
- .controls {
56
- display: flex;
57
- gap: 10px;
58
- margin: 20px 0;
59
- flex-wrap: wrap;
60
- align-items: center;
61
- }
62
-
63
- button {
64
- padding: 8px 16px;
65
- background: #3b82f6;
66
- color: white;
67
- border: none;
68
- border-radius: 4px;
69
- cursor: pointer;
70
- font-size: 14px;
71
- transition: background 0.2s;
72
- }
73
-
74
- button:hover {
75
- background: #2563eb;
76
- }
77
-
78
- button.secondary {
79
- background: #6b7280;
80
- }
81
-
82
- button.secondary:hover {
83
- background: #4b5563;
84
- }
85
-
86
- select, input {
87
- padding: 8px 12px;
88
- border: 1px solid #d1d5db;
89
- border-radius: 4px;
90
- font-size: 14px;
91
- }
92
-
93
- code {
94
- background: #f0f0f0;
95
- padding: 2px 6px;
96
- border-radius: 3px;
97
- font-size: 0.9em;
98
- }
99
-
100
- .alert-stack {
101
- display: flex;
102
- flex-direction: column;
103
- gap: 12px;
104
- margin: 20px 0;
105
- }
106
-
107
- .event-log {
108
- margin-top: 16px;
109
- padding: 12px;
110
- background: #f0f9ff;
111
- border: 1px solid #0ea5e9;
112
- border-radius: 4px;
113
- font-family: monospace;
114
- font-size: 13px;
115
- max-height: 150px;
116
- overflow-y: auto;
117
- }
118
-
119
- .example-content {
120
- display: flex;
121
- flex-direction: column;
122
- gap: 8px;
123
- }
124
-
125
- .alert-link {
126
- color: inherit;
127
- font-weight: 600;
128
- }
129
- </style>
130
- </head>
131
- <body>
132
- <div class="container">
133
- <h1>Snice Alert Component Demo</h1>
134
-
135
- <div class="demo-section">
136
- <h2>Alert Variants</h2>
137
-
138
- <div class="alert-demo">
139
- <snice-alert variant="info" title="Information">
140
- This is an informational alert. Use it to provide helpful information to users.
141
- </snice-alert>
142
- </div>
143
-
144
- <div class="alert-demo">
145
- <snice-alert variant="success" title="Success">
146
- Operation completed successfully! Your changes have been saved.
147
- </snice-alert>
148
- </div>
149
-
150
- <div class="alert-demo">
151
- <snice-alert variant="warning" title="Warning">
152
- Please review your input. Some fields require your attention.
153
- </snice-alert>
154
- </div>
155
-
156
- <div class="alert-demo">
157
- <snice-alert variant="error" title="Error">
158
- An error occurred while processing your request. Please try again.
159
- </snice-alert>
160
- </div>
161
- </div>
162
-
163
- <div class="demo-section">
164
- <h2>Sizes</h2>
165
-
166
- <div class="alert-demo">
167
- <snice-alert variant="info" size="small" title="Small Alert">
168
- Compact alert with smaller text and padding.
169
- </snice-alert>
170
- </div>
171
-
172
- <div class="alert-demo">
173
- <snice-alert variant="info" size="medium" title="Medium Alert">
174
- Default size alert with standard spacing.
175
- </snice-alert>
176
- </div>
177
-
178
- <div class="alert-demo">
179
- <snice-alert variant="info" size="large" title="Large Alert">
180
- Larger alert with more padding and bigger text.
181
- </snice-alert>
182
- </div>
183
- </div>
184
-
185
- <div class="demo-section">
186
- <h2>Dismissible Alerts</h2>
187
-
188
- <div class="alert-stack">
189
- <snice-alert variant="info" title="Dismissible Info" dismissible>
190
- Click the X button to dismiss this alert. It will animate out smoothly.
191
- </snice-alert>
192
-
193
- <snice-alert variant="success" dismissible>
194
- This alert has no title but can still be dismissed. Great for simple notifications.
195
- </snice-alert>
196
-
197
- <snice-alert variant="warning" title="Session Expiring" dismissible>
198
- Your session will expire in 5 minutes. Please save your work.
199
- </snice-alert>
200
- </div>
201
- </div>
202
-
203
- <div class="demo-section">
204
- <h2>Without Icons</h2>
205
-
206
- <div class="alert-stack">
207
- <snice-alert variant="info" title="No Icon Alert" icon="none">
208
- This alert has the icon explicitly disabled with icon="none".
209
- </snice-alert>
210
-
211
- <snice-alert variant="success" icon="none">
212
- Simple success message without an icon or title.
213
- </snice-alert>
214
- </div>
215
- </div>
216
-
217
- <div class="demo-section">
218
- <h2>Custom Icons</h2>
219
-
220
- <div class="alert-stack">
221
- <snice-alert variant="info" title="Custom Icon" icon="🚀">
222
- Using an emoji as a custom icon.
223
- </snice-alert>
224
-
225
- <snice-alert variant="success" title="Download Complete" icon="⬇️">
226
- Your file has been downloaded successfully.
227
- </snice-alert>
228
-
229
- <snice-alert variant="warning" title="Low Battery" icon="🔋">
230
- Your device battery is running low. Please connect to power.
231
- </snice-alert>
232
-
233
- <snice-alert variant="error" title="Connection Lost" icon="📡">
234
- Unable to connect to the server. Check your internet connection.
235
- </snice-alert>
236
- </div>
237
- </div>
238
-
239
- <div class="demo-section">
240
- <h2>Complex Content</h2>
241
-
242
- <div class="alert-demo">
243
- <snice-alert variant="info" title="System Update Available" dismissible>
244
- <div class="example-content">
245
- <p style="margin: 0 0 8px 0;">Version 2.4.1 is now available with the following improvements:</p>
246
- <ul style="margin: 0; padding-left: 20px;">
247
- <li>Performance optimizations</li>
248
- <li>Bug fixes and stability improvements</li>
249
- <li>New features and enhancements</li>
250
- </ul>
251
- <p style="margin: 8px 0 0 0;">
252
- <a href="#" class="alert-link">View release notes</a> •
253
- <a href="#" class="alert-link">Update now</a>
254
- </p>
255
- </div>
256
- </snice-alert>
257
- </div>
258
-
259
- <div class="alert-demo">
260
- <snice-alert variant="warning" title="Action Required" dismissible>
261
- <div class="example-content">
262
- <p style="margin: 0 0 8px 0;">Please complete the following steps to secure your account:</p>
263
- <ol style="margin: 0; padding-left: 20px;">
264
- <li>Enable two-factor authentication</li>
265
- <li>Update your recovery email</li>
266
- <li>Review recent login activity</li>
267
- </ol>
268
- <div style="margin-top: 12px;">
269
- <button style="background: #f59e0b; font-size: 13px; padding: 6px 12px;">Go to Security Settings</button>
270
- </div>
271
- </div>
272
- </snice-alert>
273
- </div>
274
- </div>
275
-
276
- <div class="demo-section">
277
- <h2>Show/Hide Controls</h2>
278
-
279
- <div class="controls">
280
- <button onclick="showAlert()">Show Alert</button>
281
- <button onclick="hideAlert()">Hide Alert</button>
282
- <button onclick="toggleAlert()">Toggle Alert</button>
283
- </div>
284
-
285
- <div class="alert-demo">
286
- <snice-alert id="controlled-alert" variant="info" title="Controlled Alert" dismissible>
287
- This alert can be shown or hidden programmatically using the buttons above.
288
- </snice-alert>
289
- </div>
290
- </div>
291
-
292
- <div class="demo-section">
293
- <h2>Interactive Demo</h2>
294
-
295
- <div class="controls">
296
- <select id="variant-select">
297
- <option value="info">Info</option>
298
- <option value="success">Success</option>
299
- <option value="warning">Warning</option>
300
- <option value="error">Error</option>
301
- </select>
302
-
303
- <select id="size-select">
304
- <option value="small">Small</option>
305
- <option value="medium" selected>Medium</option>
306
- <option value="large">Large</option>
307
- </select>
308
-
309
- <input type="text" id="title-input" placeholder="Alert title" value="Custom Alert">
310
- <input type="text" id="icon-input" placeholder="Icon (emoji or 'none')">
311
-
312
- <button onclick="updateAlert()">Update Alert</button>
313
- <button onclick="toggleDismissible()">Toggle Dismissible</button>
314
- </div>
315
-
316
- <div class="alert-demo">
317
- <snice-alert id="demo-alert" variant="info" title="Custom Alert" dismissible>
318
- This is an interactive demo alert. Use the controls above to customize its appearance and behavior.
319
- </snice-alert>
320
- </div>
321
-
322
- <div class="event-log" id="event-log">
323
- Event log will appear here...
324
- </div>
325
- </div>
326
-
327
- <div class="demo-section">
328
- <h2>Real-world Examples</h2>
329
-
330
- <span class="demo-label">Form Validation</span>
331
- <div class="alert-demo">
332
- <snice-alert variant="error" title="Validation Error" dismissible>
333
- Please correct the following errors:
334
- • Email address is required
335
- • Password must be at least 8 characters
336
- • Please accept the terms and conditions
337
- </snice-alert>
338
- </div>
339
-
340
- <span class="demo-label">API Response</span>
341
- <div class="alert-demo">
342
- <snice-alert variant="success" dismissible>
343
- <strong>Profile updated!</strong> Your changes have been saved successfully.
344
- </snice-alert>
345
- </div>
346
-
347
- <span class="demo-label">System Notification</span>
348
- <div class="alert-demo">
349
- <snice-alert variant="warning" title="Maintenance Scheduled" icon="🔧" dismissible>
350
- System maintenance is scheduled for Sunday, March 24th from 2:00 AM to 4:00 AM EST. Some services may be temporarily unavailable.
351
- </snice-alert>
352
- </div>
353
-
354
- <span class="demo-label">Cookie Notice</span>
355
- <div class="alert-demo">
356
- <snice-alert variant="info" dismissible>
357
- We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.
358
- <a href="#" class="alert-link">Learn more</a>
359
- </snice-alert>
360
- </div>
361
-
362
- <span class="demo-label">Payment Error</span>
363
- <div class="alert-demo">
364
- <snice-alert variant="error" title="Payment Failed" icon="💳" dismissible>
365
- Your payment could not be processed. Please check your card details and try again. If the problem persists, contact support.
366
- </snice-alert>
367
- </div>
368
- </div>
369
- </div>
370
-
371
- <script type="module">
372
- import './snice-alert.ts';
373
-
374
- // Controlled alert
375
- const controlledAlert = document.getElementById('controlled-alert');
376
-
377
- window.showAlert = function() {
378
- controlledAlert.show();
379
- };
380
-
381
- window.hideAlert = function() {
382
- controlledAlert.hide();
383
- };
384
-
385
- window.toggleAlert = function() {
386
- const isHidden = controlledAlert.shadowRoot.querySelector('.alert').classList.contains('alert--hidden');
387
- if (isHidden) {
388
- controlledAlert.show();
389
- } else {
390
- controlledAlert.hide();
391
- }
392
- };
393
-
394
- // Interactive demo
395
- const demoAlert = document.getElementById('demo-alert');
396
-
397
- window.updateAlert = function() {
398
- demoAlert.variant = document.getElementById('variant-select').value;
399
- demoAlert.size = document.getElementById('size-select').value;
400
- demoAlert.title = document.getElementById('title-input').value;
401
- demoAlert.icon = document.getElementById('icon-input').value;
402
- };
403
-
404
- window.toggleDismissible = function() {
405
- demoAlert.dismissible = !demoAlert.dismissible;
406
- };
407
-
408
- // Event logging
409
- const eventLog = document.getElementById('event-log');
410
-
411
- demoAlert.addEventListener('alert-dismiss', (e) => {
412
- logEvent('Dismissed', e.detail);
413
- });
414
-
415
- demoAlert.addEventListener('alert-hidden', (e) => {
416
- logEvent('Hidden', e.detail);
417
- });
418
-
419
- demoAlert.addEventListener('alert-shown', (e) => {
420
- logEvent('Shown', e.detail);
421
- });
422
-
423
- function logEvent(type, detail) {
424
- const time = new Date().toLocaleTimeString();
425
- eventLog.innerHTML = `[${time}] ${type}: ${detail.variant} - "${detail.title}"<br>` + eventLog.innerHTML;
426
- }
427
-
428
- // Auto-dismiss example
429
- setTimeout(() => {
430
- const autoAlert = document.createElement('snice-alert');
431
- autoAlert.variant = 'success';
432
- autoAlert.title = 'Auto-dismiss Example';
433
- autoAlert.dismissible = true;
434
- autoAlert.innerHTML = 'This alert will automatically disappear in 5 seconds...';
435
-
436
- const firstSection = document.querySelector('.demo-section');
437
- firstSection.insertBefore(autoAlert, firstSection.firstChild);
438
-
439
- setTimeout(() => {
440
- autoAlert.hide();
441
- }, 5000);
442
- }, 1000);
443
- </script>
444
- </body>
445
- </html>
package/components/alert/snice-alert.css DELETED
@@ -1,195 +0,0 @@
1
- :host {
2
- display: block;
3
- --alert-padding: 0.75rem 1rem; /* 12px 16px */
4
- --alert-border-radius: 6px;
5
- --alert-font-size: 0.875rem; /* 14px */
6
- --alert-icon-size: 1.25rem; /* 20px */
7
- --alert-border-width: 1px;
8
- }
9
-
10
- .alert {
11
- display: flex;
12
- align-items: flex-start;
13
- padding: var(--alert-padding);
14
- border-radius: var(--alert-border-radius);
15
- font-size: var(--alert-font-size);
16
- line-height: 1.5;
17
- border: var(--alert-border-width) solid;
18
- position: relative;
19
- animation: slideIn 0.3s ease;
20
- }
21
-
22
- .alert--hidden {
23
- display: none;
24
- }
25
-
26
- @keyframes slideIn {
27
- from {
28
- opacity: 0;
29
- transform: translateY(-10px);
30
- }
31
- to {
32
- opacity: 1;
33
- transform: translateY(0);
34
- }
35
- }
36
-
37
- @keyframes slideOut {
38
- from {
39
- opacity: 1;
40
- transform: translateY(0);
41
- }
42
- to {
43
- opacity: 0;
44
- transform: translateY(-10px);
45
- }
46
- }
47
-
48
- .alert--hiding {
49
- animation: slideOut 0.3s ease forwards;
50
- }
51
-
52
- /* Variants */
53
- :host([variant="info"]) .alert {
54
- background: rgb(var(--snice-color-blue-50, 239 246 255));
55
- border-color: rgb(var(--snice-color-blue-200, 191 219 254));
56
- color: rgb(var(--snice-color-blue-900, 30 58 138));
57
- }
58
-
59
- :host([variant="success"]) .alert {
60
- background: rgb(var(--snice-color-green-50, 240 253 244));
61
- border-color: rgb(var(--snice-color-green-200, 187 247 208));
62
- color: rgb(var(--snice-color-green-900, 20 83 45));
63
- }
64
-
65
- :host([variant="warning"]) .alert {
66
- background: rgb(var(--snice-color-yellow-50, 254 252 232));
67
- border-color: rgb(var(--snice-color-yellow-200, 254 240 138));
68
- color: rgb(var(--snice-color-yellow-900, 113 63 18));
69
- }
70
-
71
- :host([variant="error"]) .alert {
72
- background: rgb(var(--snice-color-red-50, 254 242 242));
73
- border-color: rgb(var(--snice-color-red-200, 254 202 202));
74
- color: rgb(var(--snice-color-red-900, 127 29 29));
75
- }
76
-
77
- /* Icon */
78
- .alert-icon {
79
- flex-shrink: 0;
80
- width: var(--alert-icon-size);
81
- height: var(--alert-icon-size);
82
- margin-right: 0.75rem; /* 12px */
83
- display: flex;
84
- align-items: center;
85
- justify-content: center;
86
- }
87
-
88
- .alert-icon svg {
89
- width: 100%;
90
- height: 100%;
91
- }
92
-
93
- /* Default icons */
94
- :host([variant="info"]) .alert-icon--default::before {
95
- content: "ℹ";
96
- font-size: 1.125rem; /* 18px */
97
- font-weight: bold;
98
- }
99
-
100
- :host([variant="success"]) .alert-icon--default::before {
101
- content: "✓";
102
- font-size: 1rem; /* 16px */
103
- font-weight: bold;
104
- }
105
-
106
- :host([variant="warning"]) .alert-icon--default::before {
107
- content: "⚠";
108
- font-size: 1.125rem; /* 18px */
109
- }
110
-
111
- :host([variant="error"]) .alert-icon--default::before {
112
- content: "✕";
113
- font-size: 1rem; /* 16px */
114
- font-weight: bold;
115
- }
116
-
117
- /* Content */
118
- .alert-content {
119
- flex: 1;
120
- min-width: 0;
121
- }
122
-
123
- .alert-title {
124
- font-weight: 600;
125
- margin-bottom: 0.25rem; /* 4px */
126
- }
127
-
128
- .alert-title:empty {
129
- display: none;
130
- }
131
-
132
- .alert-description {
133
- color: inherit;
134
- opacity: 0.9;
135
- }
136
-
137
- /* Dismiss button */
138
- .alert-dismiss {
139
- flex-shrink: 0;
140
- margin-left: 0.75rem; /* 12px */
141
- margin-right: -0.25rem; /* -4px */
142
- padding: 0.25rem; /* 4px */
143
- background: none;
144
- border: none;
145
- cursor: pointer;
146
- opacity: 0.6;
147
- transition: opacity 0.2s ease;
148
- border-radius: 4px;
149
- display: flex;
150
- align-items: center;
151
- justify-content: center;
152
- color: inherit;
153
- }
154
-
155
- .alert-dismiss:hover {
156
- opacity: 1;
157
- }
158
-
159
- .alert-dismiss:focus-visible {
160
- outline: 2px solid currentColor;
161
- outline-offset: 2px; /* Keep px for crisp outline */
162
- }
163
-
164
- .alert-dismiss svg {
165
- width: 1rem; /* 16px */
166
- height: 1rem; /* 16px */
167
- }
168
-
169
- /* Sizes */
170
- :host([size="small"]) {
171
- --alert-padding: 0.5rem 0.75rem; /* 8px 12px */
172
- --alert-font-size: 0.75rem; /* 12px */
173
- --alert-icon-size: 1rem; /* 16px */
174
- --alert-border-radius: 4px;
175
- }
176
-
177
- :host([size="large"]) {
178
- --alert-padding: 1rem 1.25rem; /* 16px 20px */
179
- --alert-font-size: 1rem; /* 16px */
180
- --alert-icon-size: 1.5rem; /* 24px */
181
- --alert-border-radius: 8px;
182
- }
183
-
184
- /* Accessibility */
185
- .sr-only {
186
- position: absolute;
187
- width: 1px;
188
- height: 1px;
189
- padding: 0;
190
- margin: -1px;
191
- overflow: hidden;
192
- clip: rect(0, 0, 0, 0);
193
- white-space: nowrap;
194
- border: 0;
195
- }