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/badge/demo.html DELETED
@@ -1,523 +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 Badge 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: 8px;
46
- font-weight: 500;
47
- color: #666;
48
- font-size: 14px;
49
- }
50
-
51
- .demo-item {
52
- margin: 20px 0;
53
- display: flex;
54
- align-items: center;
55
- gap: 30px;
56
- }
57
-
58
- .badge-target {
59
- display: inline-flex;
60
- align-items: center;
61
- justify-content: center;
62
- width: 50px;
63
- height: 50px;
64
- background: #3b82f6;
65
- color: white;
66
- border-radius: 8px;
67
- font-size: 24px;
68
- }
69
-
70
- .badge-avatar {
71
- width: 50px;
72
- height: 50px;
73
- border-radius: 50%;
74
- background: #6366f1;
75
- color: white;
76
- display: flex;
77
- align-items: center;
78
- justify-content: center;
79
- font-weight: 600;
80
- }
81
-
82
- .badge-button {
83
- padding: 10px 20px;
84
- background: #3b82f6;
85
- color: white;
86
- border: none;
87
- border-radius: 6px;
88
- font-size: 14px;
89
- cursor: pointer;
90
- transition: background 0.2s;
91
- }
92
-
93
- .badge-button:hover {
94
- background: #2563eb;
95
- }
96
-
97
- .grid {
98
- display: grid;
99
- grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
100
- gap: 30px;
101
- margin: 20px 0;
102
- }
103
-
104
- .inline-demo {
105
- display: flex;
106
- align-items: center;
107
- gap: 20px;
108
- flex-wrap: wrap;
109
- }
110
-
111
- .controls {
112
- display: flex;
113
- gap: 10px;
114
- margin: 20px 0;
115
- flex-wrap: wrap;
116
- }
117
-
118
- button {
119
- padding: 8px 16px;
120
- background: #f3f4f6;
121
- border: 1px solid #d1d5db;
122
- border-radius: 4px;
123
- cursor: pointer;
124
- font-size: 14px;
125
- transition: background 0.2s;
126
- }
127
-
128
- button:hover {
129
- background: #e5e7eb;
130
- }
131
-
132
- input[type="number"] {
133
- width: 80px;
134
- padding: 8px;
135
- border: 1px solid #d1d5db;
136
- border-radius: 4px;
137
- font-size: 14px;
138
- }
139
-
140
- code {
141
- background: #f0f0f0;
142
- padding: 2px 6px;
143
- border-radius: 3px;
144
- font-size: 0.9em;
145
- }
146
-
147
- .notification-icon {
148
- width: 30px;
149
- height: 30px;
150
- }
151
- </style>
152
- </head>
153
- <body>
154
- <div class="container">
155
- <h1>Snice Badge Component Demo</h1>
156
-
157
- <div class="demo-section">
158
- <h2>Basic Badges with Count</h2>
159
-
160
- <div class="grid">
161
- <div>
162
- <span class="demo-label">Default</span>
163
- <snice-badge count="5">
164
- <div class="badge-target">📧</div>
165
- </snice-badge>
166
- </div>
167
-
168
- <div>
169
- <span class="demo-label">Primary</span>
170
- <snice-badge count="12" variant="primary">
171
- <div class="badge-target">🔔</div>
172
- </snice-badge>
173
- </div>
174
-
175
- <div>
176
- <span class="demo-label">Success</span>
177
- <snice-badge count="3" variant="success">
178
- <div class="badge-target">✓</div>
179
- </snice-badge>
180
- </div>
181
-
182
- <div>
183
- <span class="demo-label">Warning</span>
184
- <snice-badge count="7" variant="warning">
185
- <div class="badge-target">⚠</div>
186
- </snice-badge>
187
- </div>
188
-
189
- <div>
190
- <span class="demo-label">Error</span>
191
- <snice-badge count="1" variant="error">
192
- <div class="badge-target">!</div>
193
- </snice-badge>
194
- </div>
195
-
196
- <div>
197
- <span class="demo-label">Info</span>
198
- <snice-badge count="99" variant="info">
199
- <div class="badge-target">ℹ</div>
200
- </snice-badge>
201
- </div>
202
- </div>
203
- </div>
204
-
205
- <div class="demo-section">
206
- <h2>Badge Positions</h2>
207
-
208
- <div class="grid">
209
- <div>
210
- <span class="demo-label">Top Right (Default)</span>
211
- <snice-badge count="5" position="top-right" variant="error">
212
- <div class="badge-avatar">JD</div>
213
- </snice-badge>
214
- </div>
215
-
216
- <div>
217
- <span class="demo-label">Top Left</span>
218
- <snice-badge count="3" position="top-left" variant="success">
219
- <div class="badge-avatar">AB</div>
220
- </snice-badge>
221
- </div>
222
-
223
- <div>
224
- <span class="demo-label">Bottom Right</span>
225
- <snice-badge count="7" position="bottom-right" variant="warning">
226
- <div class="badge-avatar">XY</div>
227
- </snice-badge>
228
- </div>
229
-
230
- <div>
231
- <span class="demo-label">Bottom Left</span>
232
- <snice-badge count="2" position="bottom-left" variant="info">
233
- <div class="badge-avatar">PQ</div>
234
- </snice-badge>
235
- </div>
236
- </div>
237
- </div>
238
-
239
- <div class="demo-section">
240
- <h2>Badge Sizes</h2>
241
-
242
- <div class="inline-demo">
243
- <div>
244
- <span class="demo-label">Small</span>
245
- <snice-badge count="5" size="small" variant="primary">
246
- <div class="badge-target">📧</div>
247
- </snice-badge>
248
- </div>
249
-
250
- <div>
251
- <span class="demo-label">Medium (Default)</span>
252
- <snice-badge count="10" size="medium" variant="primary">
253
- <div class="badge-target">📧</div>
254
- </snice-badge>
255
- </div>
256
-
257
- <div>
258
- <span class="demo-label">Large</span>
259
- <snice-badge count="15" size="large" variant="primary">
260
- <div class="badge-target">📧</div>
261
- </snice-badge>
262
- </div>
263
- </div>
264
- </div>
265
-
266
- <div class="demo-section">
267
- <h2>Dot Badge</h2>
268
-
269
- <div class="inline-demo">
270
- <div>
271
- <span class="demo-label">Simple Dot</span>
272
- <snice-badge dot variant="error">
273
- <div class="badge-target">🔔</div>
274
- </snice-badge>
275
- </div>
276
-
277
- <div>
278
- <span class="demo-label">Pulsing Dot</span>
279
- <snice-badge dot pulse variant="success">
280
- <div class="badge-target">💬</div>
281
- </snice-badge>
282
- </div>
283
-
284
- <div>
285
- <span class="demo-label">Different Sizes</span>
286
- <snice-badge dot size="small" variant="warning">
287
- <div class="badge-avatar">S</div>
288
- </snice-badge>
289
- <snice-badge dot size="medium" variant="warning">
290
- <div class="badge-avatar">M</div>
291
- </snice-badge>
292
- <snice-badge dot size="large" variant="warning">
293
- <div class="badge-avatar">L</div>
294
- </snice-badge>
295
- </div>
296
- </div>
297
- </div>
298
-
299
- <div class="demo-section">
300
- <h2>Max Count</h2>
301
-
302
- <div class="inline-demo">
303
- <div>
304
- <span class="demo-label">Under Max (50)</span>
305
- <snice-badge count="50" max="99" variant="primary">
306
- <div class="badge-target">📧</div>
307
- </snice-badge>
308
- </div>
309
-
310
- <div>
311
- <span class="demo-label">At Max (99)</span>
312
- <snice-badge count="99" max="99" variant="primary">
313
- <div class="badge-target">📧</div>
314
- </snice-badge>
315
- </div>
316
-
317
- <div>
318
- <span class="demo-label">Over Max (100+)</span>
319
- <snice-badge count="150" max="99" variant="primary">
320
- <div class="badge-target">📧</div>
321
- </snice-badge>
322
- </div>
323
-
324
- <div>
325
- <span class="demo-label">Custom Max (999+)</span>
326
- <snice-badge count="1234" max="999" variant="error">
327
- <div class="badge-target">🔔</div>
328
- </snice-badge>
329
- </div>
330
- </div>
331
- </div>
332
-
333
- <div class="demo-section">
334
- <h2>Custom Content</h2>
335
-
336
- <div class="inline-demo">
337
- <div>
338
- <span class="demo-label">Text Badge</span>
339
- <snice-badge content="NEW" variant="success">
340
- <button class="badge-button">Features</button>
341
- </snice-badge>
342
- </div>
343
-
344
- <div>
345
- <span class="demo-label">Short Text</span>
346
- <snice-badge content="HOT" variant="error">
347
- <button class="badge-button">Deals</button>
348
- </snice-badge>
349
- </div>
350
-
351
- <div>
352
- <span class="demo-label">Status</span>
353
- <snice-badge content="PRO" variant="info">
354
- <div class="badge-avatar">US</div>
355
- </snice-badge>
356
- </div>
357
- </div>
358
- </div>
359
-
360
- <div class="demo-section">
361
- <h2>Inline Badges</h2>
362
-
363
- <div>
364
- <p>
365
- Notifications
366
- <snice-badge count="5" inline variant="primary"></snice-badge>
367
- </p>
368
- <p>
369
- Messages
370
- <snice-badge count="12" inline variant="success"></snice-badge>
371
- </p>
372
- <p>
373
- Alerts
374
- <snice-badge count="3" inline variant="error"></snice-badge>
375
- </p>
376
- <p>
377
- Updates Available
378
- <snice-badge content="NEW" inline variant="info"></snice-badge>
379
- </p>
380
- </div>
381
- </div>
382
-
383
- <div class="demo-section">
384
- <h2>Badge with Offset</h2>
385
-
386
- <div class="inline-demo">
387
- <div>
388
- <span class="demo-label">No Offset</span>
389
- <snice-badge count="5" offset="0" variant="primary">
390
- <div class="badge-target">📧</div>
391
- </snice-badge>
392
- </div>
393
-
394
- <div>
395
- <span class="demo-label">Small Offset (4px)</span>
396
- <snice-badge count="5" offset="4" variant="primary">
397
- <div class="badge-target">📧</div>
398
- </snice-badge>
399
- </div>
400
-
401
- <div>
402
- <span class="demo-label">Large Offset (8px)</span>
403
- <snice-badge count="5" offset="8" variant="primary">
404
- <div class="badge-target">📧</div>
405
- </snice-badge>
406
- </div>
407
- </div>
408
- </div>
409
-
410
- <div class="demo-section">
411
- <h2>Interactive Demo</h2>
412
-
413
- <div class="demo-item">
414
- <snice-badge id="interactive-badge" count="0" variant="primary">
415
- <div class="badge-target">🔔</div>
416
- </snice-badge>
417
-
418
- <div class="controls">
419
- <button onclick="incrementCount()">+1</button>
420
- <button onclick="decrementCount()">-1</button>
421
- <button onclick="resetCount()">Reset</button>
422
- <button onclick="toggleDot()">Toggle Dot</button>
423
- <button onclick="togglePulse()">Toggle Pulse</button>
424
- <input type="number" id="count-input" value="0" onchange="setCount(this.value)">
425
- </div>
426
- </div>
427
-
428
- <div class="demo-item">
429
- <div class="controls">
430
- <button onclick="changeVariant('default')">Default</button>
431
- <button onclick="changeVariant('primary')">Primary</button>
432
- <button onclick="changeVariant('success')">Success</button>
433
- <button onclick="changeVariant('warning')">Warning</button>
434
- <button onclick="changeVariant('error')">Error</button>
435
- <button onclick="changeVariant('info')">Info</button>
436
- </div>
437
- </div>
438
- </div>
439
-
440
- <div class="demo-section">
441
- <h2>Real-world Examples</h2>
442
-
443
- <div class="inline-demo">
444
- <div>
445
- <span class="demo-label">Shopping Cart</span>
446
- <snice-badge count="3" variant="primary">
447
- <svg class="notification-icon" viewBox="0 0 24 24" fill="currentColor">
448
- <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>
449
- </svg>
450
- </snice-badge>
451
- </div>
452
-
453
- <div>
454
- <span class="demo-label">User Status</span>
455
- <snice-badge dot pulse variant="success" position="bottom-right">
456
- <div class="badge-avatar">JD</div>
457
- </snice-badge>
458
- </div>
459
-
460
- <div>
461
- <span class="demo-label">App Updates</span>
462
- <snice-badge content="UPDATE" variant="warning">
463
- <svg class="notification-icon" viewBox="0 0 24 24" fill="#6b7280">
464
- <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"/>
465
- </svg>
466
- </snice-badge>
467
- </div>
468
- </div>
469
- </div>
470
- </div>
471
-
472
- <script type="module">
473
- import './snice-badge.ts';
474
-
475
- let count = 0;
476
-
477
- window.incrementCount = function() {
478
- const badge = document.getElementById('interactive-badge');
479
- const input = document.getElementById('count-input');
480
- count++;
481
- badge.count = count;
482
- input.value = count;
483
- };
484
-
485
- window.decrementCount = function() {
486
- const badge = document.getElementById('interactive-badge');
487
- const input = document.getElementById('count-input');
488
- count = Math.max(0, count - 1);
489
- badge.count = count;
490
- input.value = count;
491
- };
492
-
493
- window.resetCount = function() {
494
- const badge = document.getElementById('interactive-badge');
495
- const input = document.getElementById('count-input');
496
- count = 0;
497
- badge.count = count;
498
- input.value = count;
499
- };
500
-
501
- window.setCount = function(value) {
502
- const badge = document.getElementById('interactive-badge');
503
- count = parseInt(value) || 0;
504
- badge.count = count;
505
- };
506
-
507
- window.toggleDot = function() {
508
- const badge = document.getElementById('interactive-badge');
509
- badge.dot = !badge.dot;
510
- };
511
-
512
- window.togglePulse = function() {
513
- const badge = document.getElementById('interactive-badge');
514
- badge.pulse = !badge.pulse;
515
- };
516
-
517
- window.changeVariant = function(variant) {
518
- const badge = document.getElementById('interactive-badge');
519
- badge.variant = variant;
520
- };
521
- </script>
522
- </body>
523
- </html>
package/components/badge/snice-badge.css DELETED
@@ -1,161 +0,0 @@
1
- :host {
2
- display: inline-block;
3
- --badge-offset: 0px;
4
- }
5
-
6
- .badge-wrapper {
7
- position: relative;
8
- display: inline-block;
9
- width: fit-content;
10
- height: fit-content;
11
- }
12
-
13
- .badge {
14
- position: absolute;
15
- display: inline-flex;
16
- align-items: center;
17
- justify-content: center;
18
- min-width: 1.25rem; /* 20px */
19
- height: 1.25rem; /* 20px */
20
- padding: 0 0.375rem; /* 0 6px */
21
- border-radius: 10px;
22
- font-size: 0.75rem; /* 12px */
23
- font-weight: 600;
24
- line-height: 1;
25
- white-space: nowrap;
26
- z-index: 1;
27
- transition: opacity 0.2s ease;
28
- box-shadow: var(--snice-shadow-sm);
29
- border: 2px solid rgba(255, 255, 255, 0.9);
30
- box-sizing: border-box;
31
- text-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.3);
32
- }
33
-
34
- .badge--dot {
35
- min-width: 0.5rem; /* 8px */
36
- height: 0.5rem; /* 8px */
37
- padding: 0;
38
- border-radius: 50%;
39
- border: none;
40
- }
41
-
42
- /* Sizes */
43
- :host([size="small"]) .badge {
44
- min-width: 1rem; /* 16px */
45
- height: 1rem; /* 16px */
46
- padding: 0 0.25rem; /* 0 4px */
47
- font-size: 0.625rem; /* 10px */
48
- }
49
-
50
- :host([size="small"]) .badge--dot {
51
- min-width: 0.375rem; /* 6px */
52
- height: 0.375rem; /* 6px */
53
- }
54
-
55
- :host([size="large"]) .badge {
56
- min-width: 1.5rem; /* 24px */
57
- height: 1.5rem; /* 24px */
58
- padding: 0 0.5rem; /* 0 8px */
59
- font-size: 0.875rem; /* 14px */
60
- }
61
-
62
- :host([size="large"]) .badge--dot {
63
- min-width: 0.625rem; /* 10px */
64
- height: 0.625rem; /* 10px */
65
- }
66
-
67
- /* Pulse animation */
68
- .badge--pulse {
69
- animation: pulse 2s infinite;
70
- }
71
-
72
- .badge--pulse.badge--dot::before {
73
- content: '';
74
- position: absolute;
75
- inset: 0;
76
- border-radius: 50%;
77
- background: inherit;
78
- animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
79
- }
80
-
81
- @keyframes pulse {
82
- 0%, 100% {
83
- opacity: 1;
84
- }
85
- 50% {
86
- opacity: 0.8;
87
- }
88
- }
89
-
90
- @keyframes ping {
91
- 75%, 100% {
92
- transform: scale(2);
93
- opacity: 0;
94
- }
95
- }
96
-
97
- /* Positions */
98
- :host([position="top-right"]) .badge,
99
- :host(:not([position])) .badge {
100
- top: var(--badge-offset);
101
- right: var(--badge-offset);
102
- transform: translate(50%, -50%);
103
- }
104
-
105
- :host([position="top-left"]) .badge {
106
- top: var(--badge-offset);
107
- left: var(--badge-offset);
108
- transform: translate(-50%, -50%);
109
- }
110
-
111
- :host([position="bottom-right"]) .badge {
112
- bottom: var(--badge-offset);
113
- right: var(--badge-offset);
114
- transform: translate(50%, 50%);
115
- }
116
-
117
- :host([position="bottom-left"]) .badge {
118
- bottom: var(--badge-offset);
119
- left: var(--badge-offset);
120
- transform: translate(-50%, 50%);
121
- }
122
-
123
- /* Inline mode */
124
- :host([inline]) .badge {
125
- position: static;
126
- transform: none;
127
- margin-left: 0.5rem; /* 8px */
128
- vertical-align: middle;
129
- }
130
-
131
- /* Variants - using standard colors with emphasized borders */
132
- :host([variant="default"]) .badge,
133
- :host(:not([variant])) .badge {
134
- background: rgb(var(--snice-color-gray-600));
135
- color: white;
136
- }
137
-
138
- :host([variant="primary"]) .badge {
139
- background: rgb(var(--snice-color-blue-600));
140
- color: white;
141
- }
142
-
143
- :host([variant="success"]) .badge {
144
- background: rgb(var(--snice-color-green-600));
145
- color: white;
146
- }
147
-
148
- :host([variant="warning"]) .badge {
149
- background: rgb(var(--snice-color-yellow-600));
150
- color: white;
151
- }
152
-
153
- :host([variant="error"]) .badge {
154
- background: rgb(var(--snice-color-red-600));
155
- color: white;
156
- }
157
-
158
- :host([variant="info"]) .badge {
159
- background: rgb(var(--snice-color-blue-600));
160
- color: white;
161
- }