snice 1.14.2 → 2.1.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 (311) hide show
  1. package/bin/templates/base/tsconfig.json +5 -4
  2. package/components/accordion/demo.html +403 -0
  3. package/components/alert/demo.html +445 -0
  4. package/components/avatar/demo.html +598 -0
  5. package/components/badge/demo.html +523 -0
  6. package/components/breadcrumbs/demo.html +404 -0
  7. package/components/button/demo.html +42 -0
  8. package/components/card/demo.html +525 -0
  9. package/components/checkbox/demo.html +253 -0
  10. package/components/chip/demo.html +383 -0
  11. package/components/date-picker/demo.html +191 -0
  12. package/components/divider/demo.html +233 -0
  13. package/components/drawer/demo.html +328 -0
  14. package/components/input/demo.html +303 -0
  15. package/components/input/test.html +77 -0
  16. package/components/layout/demo.html +538 -0
  17. package/components/login/demo-auth-controller.ts +185 -0
  18. package/components/login/demo.html +470 -0
  19. package/components/login/snice-login.ts +2 -2
  20. package/components/modal/demo.html +291 -0
  21. package/components/pagination/demo.html +395 -0
  22. package/components/progress/demo.html +510 -0
  23. package/components/radio/demo.html +287 -0
  24. package/components/select/demo.html +511 -0
  25. package/components/skeleton/demo.html +514 -0
  26. package/components/switch/demo.html +284 -0
  27. package/components/table/demo-table-controller.ts +100 -0
  28. package/components/table/demo.html +480 -0
  29. package/components/table/snice-table.ts +2 -2
  30. package/components/tabs/demo.html +487 -0
  31. package/components/toast/demo.html +329 -0
  32. package/components/tooltip/demo.html +350 -0
  33. package/dist/index.cjs +441 -329
  34. package/dist/index.cjs.map +1 -1
  35. package/dist/index.cjs.min.map +1 -1
  36. package/dist/index.esm.js +441 -329
  37. package/dist/index.esm.js.map +1 -1
  38. package/dist/index.esm.min.js +3 -3
  39. package/dist/index.esm.min.js.map +1 -1
  40. package/dist/index.iife.js +441 -329
  41. package/dist/index.iife.js.map +1 -1
  42. package/dist/index.iife.min.js +3 -3
  43. package/dist/index.iife.min.js.map +1 -1
  44. package/dist/symbols.esm.js +1 -1
  45. package/dist/transitions.esm.js +1 -1
  46. package/dist/types/controller.d.ts +1 -1
  47. package/dist/types/element.d.ts +10 -10
  48. package/dist/types/events.d.ts +2 -2
  49. package/dist/types/index.d.ts +1 -1
  50. package/dist/types/observe.d.ts +1 -1
  51. package/dist/types/request-response.d.ts +2 -3
  52. package/dist/types/router.d.ts +1 -1
  53. package/package.json +9 -10
  54. package/dist/components/accordion/snice-accordion-item.d.ts +0 -25
  55. package/dist/components/accordion/snice-accordion-item.js +0 -260
  56. package/dist/components/accordion/snice-accordion-item.js.map +0 -1
  57. package/dist/components/accordion/snice-accordion.d.ts +0 -28
  58. package/dist/components/accordion/snice-accordion.js +0 -221
  59. package/dist/components/accordion/snice-accordion.js.map +0 -1
  60. package/dist/components/accordion/snice-accordion.types.d.ts +0 -29
  61. package/dist/components/accordion/snice-accordion.types.js +0 -2
  62. package/dist/components/accordion/snice-accordion.types.js.map +0 -1
  63. package/dist/components/alert/snice-alert.d.ts +0 -26
  64. package/dist/components/alert/snice-alert.js +0 -191
  65. package/dist/components/alert/snice-alert.js.map +0 -1
  66. package/dist/components/alert/snice-alert.types.d.ts +0 -11
  67. package/dist/components/alert/snice-alert.types.js +0 -2
  68. package/dist/components/alert/snice-alert.types.js.map +0 -1
  69. package/dist/components/avatar/snice-avatar.d.ts +0 -24
  70. package/dist/components/avatar/snice-avatar.js +0 -177
  71. package/dist/components/avatar/snice-avatar.js.map +0 -1
  72. package/dist/components/avatar/snice-avatar.types.d.ts +0 -12
  73. package/dist/components/avatar/snice-avatar.types.js +0 -2
  74. package/dist/components/avatar/snice-avatar.types.js.map +0 -1
  75. package/dist/components/badge/snice-badge.d.ts +0 -25
  76. package/dist/components/badge/snice-badge.js +0 -157
  77. package/dist/components/badge/snice-badge.js.map +0 -1
  78. package/dist/components/badge/snice-badge.types.d.ts +0 -15
  79. package/dist/components/badge/snice-badge.types.js +0 -2
  80. package/dist/components/badge/snice-badge.types.js.map +0 -1
  81. package/dist/components/breadcrumbs/snice-breadcrumbs.d.ts +0 -27
  82. package/dist/components/breadcrumbs/snice-breadcrumbs.js +0 -212
  83. package/dist/components/breadcrumbs/snice-breadcrumbs.js.map +0 -1
  84. package/dist/components/breadcrumbs/snice-breadcrumbs.types.d.ts +0 -23
  85. package/dist/components/breadcrumbs/snice-breadcrumbs.types.js +0 -2
  86. package/dist/components/breadcrumbs/snice-breadcrumbs.types.js.map +0 -1
  87. package/dist/components/breadcrumbs/snice-crumb.d.ts +0 -9
  88. package/dist/components/breadcrumbs/snice-crumb.js +0 -50
  89. package/dist/components/breadcrumbs/snice-crumb.js.map +0 -1
  90. package/dist/components/button/snice-button.d.ts +0 -32
  91. package/dist/components/button/snice-button.js +0 -212
  92. package/dist/components/button/snice-button.js.map +0 -1
  93. package/dist/components/button/snice-button.types.d.ts +0 -23
  94. package/dist/components/button/snice-button.types.js +0 -2
  95. package/dist/components/button/snice-button.types.js.map +0 -1
  96. package/dist/components/card/snice-card.d.ts +0 -19
  97. package/dist/components/card/snice-card.js +0 -132
  98. package/dist/components/card/snice-card.js.map +0 -1
  99. package/dist/components/card/snice-card.types.d.ts +0 -9
  100. package/dist/components/card/snice-card.types.js +0 -2
  101. package/dist/components/card/snice-card.types.js.map +0 -1
  102. package/dist/components/checkbox/snice-checkbox.d.ts +0 -34
  103. package/dist/components/checkbox/snice-checkbox.js +0 -289
  104. package/dist/components/checkbox/snice-checkbox.js.map +0 -1
  105. package/dist/components/checkbox/snice-checkbox.types.d.ts +0 -20
  106. package/dist/components/checkbox/snice-checkbox.types.js +0 -2
  107. package/dist/components/checkbox/snice-checkbox.types.js.map +0 -1
  108. package/dist/components/chip/snice-chip.d.ts +0 -28
  109. package/dist/components/chip/snice-chip.js +0 -203
  110. package/dist/components/chip/snice-chip.js.map +0 -1
  111. package/dist/components/chip/snice-chip.types.d.ts +0 -14
  112. package/dist/components/chip/snice-chip.types.js +0 -2
  113. package/dist/components/chip/snice-chip.types.js.map +0 -1
  114. package/dist/components/date-picker/snice-date-picker.d.ts +0 -82
  115. package/dist/components/date-picker/snice-date-picker.js +0 -880
  116. package/dist/components/date-picker/snice-date-picker.js.map +0 -1
  117. package/dist/components/date-picker/snice-date-picker.types.d.ts +0 -71
  118. package/dist/components/date-picker/snice-date-picker.types.js +0 -2
  119. package/dist/components/date-picker/snice-date-picker.types.js.map +0 -1
  120. package/dist/components/divider/snice-divider.d.ts +0 -17
  121. package/dist/components/divider/snice-divider.js +0 -111
  122. package/dist/components/divider/snice-divider.js.map +0 -1
  123. package/dist/components/divider/snice-divider.types.d.ts +0 -14
  124. package/dist/components/divider/snice-divider.types.js +0 -2
  125. package/dist/components/divider/snice-divider.types.js.map +0 -1
  126. package/dist/components/drawer/snice-drawer.d.ts +0 -37
  127. package/dist/components/drawer/snice-drawer.js +0 -335
  128. package/dist/components/drawer/snice-drawer.js.map +0 -1
  129. package/dist/components/drawer/snice-drawer.types.d.ts +0 -16
  130. package/dist/components/drawer/snice-drawer.types.js +0 -2
  131. package/dist/components/drawer/snice-drawer.types.js.map +0 -1
  132. package/dist/components/input/snice-input.d.ts +0 -65
  133. package/dist/components/input/snice-input.js +0 -603
  134. package/dist/components/input/snice-input.js.map +0 -1
  135. package/dist/components/input/snice-input.types.d.ts +0 -53
  136. package/dist/components/input/snice-input.types.js +0 -2
  137. package/dist/components/input/snice-input.types.js.map +0 -1
  138. package/dist/components/layout/snice-layout-blog.d.ts +0 -4
  139. package/dist/components/layout/snice-layout-blog.js +0 -56
  140. package/dist/components/layout/snice-layout-blog.js.map +0 -1
  141. package/dist/components/layout/snice-layout-card.d.ts +0 -6
  142. package/dist/components/layout/snice-layout-card.js +0 -53
  143. package/dist/components/layout/snice-layout-card.js.map +0 -1
  144. package/dist/components/layout/snice-layout-centered.d.ts +0 -5
  145. package/dist/components/layout/snice-layout-centered.js +0 -38
  146. package/dist/components/layout/snice-layout-centered.js.map +0 -1
  147. package/dist/components/layout/snice-layout-dashboard.d.ts +0 -4
  148. package/dist/components/layout/snice-layout-dashboard.js +0 -53
  149. package/dist/components/layout/snice-layout-dashboard.js.map +0 -1
  150. package/dist/components/layout/snice-layout-fullscreen.d.ts +0 -5
  151. package/dist/components/layout/snice-layout-fullscreen.js +0 -50
  152. package/dist/components/layout/snice-layout-fullscreen.js.map +0 -1
  153. package/dist/components/layout/snice-layout-landing.d.ts +0 -4
  154. package/dist/components/layout/snice-layout-landing.js +0 -55
  155. package/dist/components/layout/snice-layout-landing.js.map +0 -1
  156. package/dist/components/layout/snice-layout-minimal.d.ts +0 -4
  157. package/dist/components/layout/snice-layout-minimal.js +0 -27
  158. package/dist/components/layout/snice-layout-minimal.js.map +0 -1
  159. package/dist/components/layout/snice-layout-sidebar.d.ts +0 -5
  160. package/dist/components/layout/snice-layout-sidebar.js +0 -64
  161. package/dist/components/layout/snice-layout-sidebar.js.map +0 -1
  162. package/dist/components/layout/snice-layout-split.d.ts +0 -6
  163. package/dist/components/layout/snice-layout-split.js +0 -47
  164. package/dist/components/layout/snice-layout-split.js.map +0 -1
  165. package/dist/components/layout/snice-layout.d.ts +0 -4
  166. package/dist/components/layout/snice-layout.js +0 -43
  167. package/dist/components/layout/snice-layout.js.map +0 -1
  168. package/dist/components/layout/snice-layout.types.d.ts +0 -3
  169. package/dist/components/layout/snice-layout.types.js +0 -2
  170. package/dist/components/layout/snice-layout.types.js.map +0 -1
  171. package/dist/components/login/snice-login.d.ts +0 -45
  172. package/dist/components/login/snice-login.js +0 -385
  173. package/dist/components/login/snice-login.js.map +0 -1
  174. package/dist/components/login/snice-login.types.d.ts +0 -31
  175. package/dist/components/login/snice-login.types.js +0 -2
  176. package/dist/components/login/snice-login.types.js.map +0 -1
  177. package/dist/components/modal/snice-modal.d.ts +0 -32
  178. package/dist/components/modal/snice-modal.js +0 -288
  179. package/dist/components/modal/snice-modal.js.map +0 -1
  180. package/dist/components/modal/snice-modal.types.d.ts +0 -18
  181. package/dist/components/modal/snice-modal.types.js +0 -2
  182. package/dist/components/modal/snice-modal.types.js.map +0 -1
  183. package/dist/components/pagination/snice-pagination.d.ts +0 -26
  184. package/dist/components/pagination/snice-pagination.js +0 -373
  185. package/dist/components/pagination/snice-pagination.js.map +0 -1
  186. package/dist/components/pagination/snice-pagination.types.d.ts +0 -18
  187. package/dist/components/pagination/snice-pagination.types.js +0 -2
  188. package/dist/components/pagination/snice-pagination.types.js.map +0 -1
  189. package/dist/components/progress/snice-progress.d.ts +0 -35
  190. package/dist/components/progress/snice-progress.js +0 -295
  191. package/dist/components/progress/snice-progress.js.map +0 -1
  192. package/dist/components/progress/snice-progress.types.d.ts +0 -18
  193. package/dist/components/progress/snice-progress.types.js +0 -2
  194. package/dist/components/progress/snice-progress.types.js.map +0 -1
  195. package/dist/components/radio/snice-radio.d.ts +0 -33
  196. package/dist/components/radio/snice-radio.js +0 -286
  197. package/dist/components/radio/snice-radio.js.map +0 -1
  198. package/dist/components/radio/snice-radio.types.d.ts +0 -19
  199. package/dist/components/radio/snice-radio.types.js +0 -2
  200. package/dist/components/radio/snice-radio.types.js.map +0 -1
  201. package/dist/components/select/snice-option.d.ts +0 -17
  202. package/dist/components/select/snice-option.js +0 -77
  203. package/dist/components/select/snice-option.js.map +0 -1
  204. package/dist/components/select/snice-option.types.d.ts +0 -14
  205. package/dist/components/select/snice-option.types.js +0 -2
  206. package/dist/components/select/snice-option.types.js.map +0 -1
  207. package/dist/components/select/snice-select.d.ts +0 -89
  208. package/dist/components/select/snice-select.js +0 -900
  209. package/dist/components/select/snice-select.js.map +0 -1
  210. package/dist/components/select/snice-select.types.d.ts +0 -49
  211. package/dist/components/select/snice-select.types.js +0 -2
  212. package/dist/components/select/snice-select.types.js.map +0 -1
  213. package/dist/components/skeleton/snice-skeleton.d.ts +0 -16
  214. package/dist/components/skeleton/snice-skeleton.js +0 -159
  215. package/dist/components/skeleton/snice-skeleton.js.map +0 -1
  216. package/dist/components/skeleton/snice-skeleton.types.d.ts +0 -10
  217. package/dist/components/skeleton/snice-skeleton.types.js +0 -2
  218. package/dist/components/skeleton/snice-skeleton.types.js.map +0 -1
  219. package/dist/components/switch/snice-switch.d.ts +0 -38
  220. package/dist/components/switch/snice-switch.js +0 -309
  221. package/dist/components/switch/snice-switch.js.map +0 -1
  222. package/dist/components/switch/snice-switch.types.d.ts +0 -21
  223. package/dist/components/switch/snice-switch.types.js +0 -2
  224. package/dist/components/switch/snice-switch.types.js.map +0 -1
  225. package/dist/components/symbols.d.ts +0 -1
  226. package/dist/components/symbols.js +0 -20
  227. package/dist/components/symbols.js.map +0 -1
  228. package/dist/components/table/snice-cell-boolean.d.ts +0 -21
  229. package/dist/components/table/snice-cell-boolean.js +0 -152
  230. package/dist/components/table/snice-cell-boolean.js.map +0 -1
  231. package/dist/components/table/snice-cell-date.d.ts +0 -24
  232. package/dist/components/table/snice-cell-date.js +0 -240
  233. package/dist/components/table/snice-cell-date.js.map +0 -1
  234. package/dist/components/table/snice-cell-duration.d.ts +0 -16
  235. package/dist/components/table/snice-cell-duration.js +0 -123
  236. package/dist/components/table/snice-cell-duration.js.map +0 -1
  237. package/dist/components/table/snice-cell-filesize.d.ts +0 -16
  238. package/dist/components/table/snice-cell-filesize.js +0 -119
  239. package/dist/components/table/snice-cell-filesize.js.map +0 -1
  240. package/dist/components/table/snice-cell-number.d.ts +0 -23
  241. package/dist/components/table/snice-cell-number.js +0 -202
  242. package/dist/components/table/snice-cell-number.js.map +0 -1
  243. package/dist/components/table/snice-cell-progress.d.ts +0 -17
  244. package/dist/components/table/snice-cell-progress.js +0 -114
  245. package/dist/components/table/snice-cell-progress.js.map +0 -1
  246. package/dist/components/table/snice-cell-rating.d.ts +0 -17
  247. package/dist/components/table/snice-cell-rating.js +0 -113
  248. package/dist/components/table/snice-cell-rating.js.map +0 -1
  249. package/dist/components/table/snice-cell-sparkline.d.ts +0 -29
  250. package/dist/components/table/snice-cell-sparkline.js +0 -290
  251. package/dist/components/table/snice-cell-sparkline.js.map +0 -1
  252. package/dist/components/table/snice-cell-text.d.ts +0 -19
  253. package/dist/components/table/snice-cell-text.js +0 -153
  254. package/dist/components/table/snice-cell-text.js.map +0 -1
  255. package/dist/components/table/snice-cell.d.ts +0 -32
  256. package/dist/components/table/snice-cell.js +0 -451
  257. package/dist/components/table/snice-cell.js.map +0 -1
  258. package/dist/components/table/snice-column.d.ts +0 -62
  259. package/dist/components/table/snice-column.js +0 -440
  260. package/dist/components/table/snice-column.js.map +0 -1
  261. package/dist/components/table/snice-header.d.ts +0 -33
  262. package/dist/components/table/snice-header.js +0 -303
  263. package/dist/components/table/snice-header.js.map +0 -1
  264. package/dist/components/table/snice-progress.d.ts +0 -10
  265. package/dist/components/table/snice-progress.js +0 -91
  266. package/dist/components/table/snice-progress.js.map +0 -1
  267. package/dist/components/table/snice-rating.d.ts +0 -9
  268. package/dist/components/table/snice-rating.js +0 -68
  269. package/dist/components/table/snice-rating.js.map +0 -1
  270. package/dist/components/table/snice-row.d.ts +0 -43
  271. package/dist/components/table/snice-row.js +0 -365
  272. package/dist/components/table/snice-row.js.map +0 -1
  273. package/dist/components/table/snice-table.d.ts +0 -69
  274. package/dist/components/table/snice-table.js +0 -814
  275. package/dist/components/table/snice-table.js.map +0 -1
  276. package/dist/components/table/snice-table.types.d.ts +0 -137
  277. package/dist/components/table/snice-table.types.js +0 -2
  278. package/dist/components/table/snice-table.types.js.map +0 -1
  279. package/dist/components/tabs/snice-tab-panel.d.ts +0 -12
  280. package/dist/components/tabs/snice-tab-panel.js +0 -78
  281. package/dist/components/tabs/snice-tab-panel.js.map +0 -1
  282. package/dist/components/tabs/snice-tab.d.ts +0 -13
  283. package/dist/components/tabs/snice-tab.js +0 -90
  284. package/dist/components/tabs/snice-tab.js.map +0 -1
  285. package/dist/components/tabs/snice-tabs.d.ts +0 -34
  286. package/dist/components/tabs/snice-tabs.js +0 -367
  287. package/dist/components/tabs/snice-tabs.js.map +0 -1
  288. package/dist/components/tabs/snice-tabs.types.d.ts +0 -23
  289. package/dist/components/tabs/snice-tabs.types.js +0 -2
  290. package/dist/components/tabs/snice-tabs.types.js.map +0 -1
  291. package/dist/components/toast/snice-toast-container.d.ts +0 -25
  292. package/dist/components/toast/snice-toast-container.js +0 -251
  293. package/dist/components/toast/snice-toast-container.js.map +0 -1
  294. package/dist/components/toast/snice-toast.d.ts +0 -23
  295. package/dist/components/toast/snice-toast.js +0 -316
  296. package/dist/components/toast/snice-toast.js.map +0 -1
  297. package/dist/components/toast/snice-toast.types.d.ts +0 -30
  298. package/dist/components/toast/snice-toast.types.js +0 -2
  299. package/dist/components/toast/snice-toast.types.js.map +0 -1
  300. package/dist/components/tooltip/snice-tooltip.d.ts +0 -50
  301. package/dist/components/tooltip/snice-tooltip.js +0 -656
  302. package/dist/components/tooltip/snice-tooltip.js.map +0 -1
  303. package/dist/components/tooltip/snice-tooltip.types.d.ts +0 -18
  304. package/dist/components/tooltip/snice-tooltip.types.js +0 -2
  305. package/dist/components/tooltip/snice-tooltip.types.js.map +0 -1
  306. package/dist/components/transitions.d.ts +0 -11
  307. package/dist/components/transitions.js +0 -69
  308. package/dist/components/transitions.js.map +0 -1
  309. package/dist/index.cjs.min +0 -15
  310. package/dist/symbols.cjs +0 -103
  311. package/dist/transitions.cjs +0 -219
package/components/badge/demo.html ADDED
@@ -0,0 +1,523 @@
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>