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/checkbox/demo.html ADDED
@@ -0,0 +1,253 @@
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>Checkbox Demo</title>
7
+ <link rel="stylesheet" href="../theme/theme.css">
8
+ <style>
9
+ body {
10
+ padding: 40px;
11
+ font-family: var(--snice-font-family);
12
+ background: var(--snice-color-background);
13
+ color: var(--snice-color-text);
14
+ max-width: 800px;
15
+ margin: 0 auto;
16
+ }
17
+
18
+ .section {
19
+ margin-bottom: 40px;
20
+ }
21
+
22
+ h2 {
23
+ color: var(--snice-color-text);
24
+ margin-bottom: 20px;
25
+ font-size: var(--snice-font-size-2xl);
26
+ }
27
+
28
+ h3 {
29
+ color: var(--snice-color-text-secondary);
30
+ margin-bottom: 16px;
31
+ font-size: var(--snice-font-size-lg);
32
+ }
33
+
34
+ .checkbox-group {
35
+ display: flex;
36
+ flex-direction: column;
37
+ gap: 12px;
38
+ margin-bottom: 20px;
39
+ }
40
+
41
+ .row {
42
+ display: flex;
43
+ gap: 20px;
44
+ align-items: center;
45
+ flex-wrap: wrap;
46
+ }
47
+
48
+ .output {
49
+ padding: 10px;
50
+ background: var(--snice-color-background-secondary);
51
+ border-radius: var(--snice-border-radius-md);
52
+ font-family: monospace;
53
+ font-size: var(--snice-font-size-sm);
54
+ margin-top: 10px;
55
+ }
56
+
57
+ button {
58
+ padding: 8px 16px;
59
+ background: var(--snice-color-primary);
60
+ color: white;
61
+ border: none;
62
+ border-radius: var(--snice-border-radius-md);
63
+ cursor: pointer;
64
+ font-size: var(--snice-font-size-md);
65
+ margin-right: 8px;
66
+ }
67
+
68
+ button:hover {
69
+ background: var(--snice-color-primary-hover);
70
+ }
71
+ </style>
72
+ </head>
73
+ <body>
74
+ <h2>Checkbox Component Demo</h2>
75
+
76
+ <div class="section">
77
+ <h3>Basic Checkboxes</h3>
78
+ <div class="checkbox-group">
79
+ <snice-checkbox label="Default checkbox"></snice-checkbox>
80
+ <snice-checkbox label="Pre-checked" checked></snice-checkbox>
81
+ <snice-checkbox label="Disabled" disabled></snice-checkbox>
82
+ <snice-checkbox label="Disabled checked" disabled checked></snice-checkbox>
83
+ </div>
84
+ </div>
85
+
86
+ <div class="section">
87
+ <h3>Sizes</h3>
88
+ <div class="checkbox-group">
89
+ <snice-checkbox size="small" label="Small checkbox"></snice-checkbox>
90
+ <snice-checkbox size="medium" label="Medium checkbox (default)"></snice-checkbox>
91
+ <snice-checkbox size="large" label="Large checkbox"></snice-checkbox>
92
+ </div>
93
+ </div>
94
+
95
+ <div class="section">
96
+ <h3>States</h3>
97
+ <div class="checkbox-group">
98
+ <snice-checkbox label="Required field" required></snice-checkbox>
99
+ <snice-checkbox label="Invalid state" invalid></snice-checkbox>
100
+ <snice-checkbox label="Invalid and checked" invalid checked></snice-checkbox>
101
+ <snice-checkbox id="indeterminate-checkbox" label="Indeterminate state" indeterminate></snice-checkbox>
102
+ </div>
103
+ <button onclick="document.getElementById('indeterminate-checkbox').setIndeterminate()">
104
+ Set Indeterminate
105
+ </button>
106
+ <button onclick="document.getElementById('indeterminate-checkbox').checked = true">
107
+ Check
108
+ </button>
109
+ <button onclick="document.getElementById('indeterminate-checkbox').checked = false">
110
+ Uncheck
111
+ </button>
112
+ </div>
113
+
114
+ <div class="section">
115
+ <h3>Checkbox Group Example</h3>
116
+ <div class="checkbox-group">
117
+ <strong>Select your interests:</strong>
118
+ <snice-checkbox name="interests" value="coding" label="Coding" checked></snice-checkbox>
119
+ <snice-checkbox name="interests" value="design" label="Design"></snice-checkbox>
120
+ <snice-checkbox name="interests" value="music" label="Music"></snice-checkbox>
121
+ <snice-checkbox name="interests" value="sports" label="Sports"></snice-checkbox>
122
+ <snice-checkbox name="interests" value="reading" label="Reading"></snice-checkbox>
123
+ </div>
124
+ <button onclick="getSelectedInterests()">Get Selected</button>
125
+ <div id="interests-output" class="output">Click button to see selected interests</div>
126
+ </div>
127
+
128
+ <div class="section">
129
+ <h3>Terms and Conditions Example</h3>
130
+ <div class="checkbox-group">
131
+ <snice-checkbox
132
+ id="terms-all"
133
+ label="Accept all terms"
134
+ indeterminate>
135
+ </snice-checkbox>
136
+ <div style="margin-left: 24px;">
137
+ <snice-checkbox
138
+ class="terms-item"
139
+ label="I accept the Terms of Service"
140
+ required>
141
+ </snice-checkbox>
142
+ <snice-checkbox
143
+ class="terms-item"
144
+ label="I accept the Privacy Policy"
145
+ required>
146
+ </snice-checkbox>
147
+ <snice-checkbox
148
+ class="terms-item"
149
+ label="I want to receive newsletters">
150
+ </snice-checkbox>
151
+ </div>
152
+ </div>
153
+ </div>
154
+
155
+ <div class="section">
156
+ <h3>Interactive Example</h3>
157
+ <div class="checkbox-group">
158
+ <snice-checkbox
159
+ id="interactive-checkbox"
160
+ label="Click me or press Space when focused">
161
+ </snice-checkbox>
162
+ </div>
163
+ <div class="row">
164
+ <button onclick="document.getElementById('interactive-checkbox').toggle()">Toggle</button>
165
+ <button onclick="document.getElementById('interactive-checkbox').focus()">Focus</button>
166
+ <button onclick="document.getElementById('interactive-checkbox').click()">Click</button>
167
+ </div>
168
+ <div id="event-output" class="output">Events will appear here...</div>
169
+ </div>
170
+
171
+ <div class="section">
172
+ <h3>Form Example</h3>
173
+ <form id="demo-form">
174
+ <div class="checkbox-group">
175
+ <snice-checkbox name="subscribe" label="Subscribe to newsletter"></snice-checkbox>
176
+ <snice-checkbox name="terms" label="I accept the terms" required></snice-checkbox>
177
+ <snice-checkbox name="privacy" label="I accept the privacy policy" required></snice-checkbox>
178
+ </div>
179
+ <button type="submit">Submit</button>
180
+ </form>
181
+ <div id="form-output" class="output">Form data will appear here...</div>
182
+ </div>
183
+
184
+ <script type="module">
185
+ import './snice-checkbox.ts';
186
+
187
+ // Interactive checkbox events
188
+ const interactiveCheckbox = document.getElementById('interactive-checkbox');
189
+ const eventOutput = document.getElementById('event-output');
190
+
191
+ interactiveCheckbox.addEventListener('@snice/checkbox-change', (e) => {
192
+ eventOutput.textContent = `Changed: checked=${e.detail.checked}, indeterminate=${e.detail.indeterminate}`;
193
+ });
194
+
195
+ // Get selected interests
196
+ window.getSelectedInterests = function() {
197
+ const checkboxes = document.querySelectorAll('snice-checkbox[name="interests"]');
198
+ const selected = Array.from(checkboxes)
199
+ .filter(cb => cb.checked)
200
+ .map(cb => cb.value);
201
+ document.getElementById('interests-output').textContent =
202
+ `Selected: ${selected.length > 0 ? selected.join(', ') : 'None'}`;
203
+ };
204
+
205
+ // Terms "select all" functionality
206
+ const termsAll = document.getElementById('terms-all');
207
+ const termsItems = document.querySelectorAll('.terms-item');
208
+
209
+ termsAll.addEventListener('@snice/checkbox-change', (e) => {
210
+ if (!e.detail.indeterminate) {
211
+ termsItems.forEach(item => {
212
+ item.checked = e.detail.checked;
213
+ });
214
+ }
215
+ });
216
+
217
+ termsItems.forEach(item => {
218
+ item.addEventListener('@snice/checkbox-change', updateTermsAll);
219
+ });
220
+
221
+ function updateTermsAll() {
222
+ const checkedCount = Array.from(termsItems).filter(item => item.checked).length;
223
+ if (checkedCount === 0) {
224
+ termsAll.checked = false;
225
+ termsAll.indeterminate = false;
226
+ } else if (checkedCount === termsItems.length) {
227
+ termsAll.checked = true;
228
+ termsAll.indeterminate = false;
229
+ } else {
230
+ termsAll.indeterminate = true;
231
+ }
232
+ }
233
+
234
+ // Form submission
235
+ document.getElementById('demo-form').addEventListener('submit', (e) => {
236
+ e.preventDefault();
237
+ const formData = new FormData(e.target);
238
+ const data = {};
239
+ const checkboxes = e.target.querySelectorAll('snice-checkbox');
240
+ checkboxes.forEach(cb => {
241
+ if (cb.name) {
242
+ data[cb.name] = cb.checked;
243
+ }
244
+ });
245
+ document.getElementById('form-output').textContent =
246
+ `Form data: ${JSON.stringify(data, null, 2)}`;
247
+ });
248
+
249
+ // Initialize terms state
250
+ updateTermsAll();
251
+ </script>
252
+ </body>
253
+ </html>
package/components/chip/demo.html ADDED
@@ -0,0 +1,383 @@
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 Chip 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
+ .chip-group {
52
+ display: flex;
53
+ flex-wrap: wrap;
54
+ gap: 8px;
55
+ margin: 16px 0;
56
+ }
57
+
58
+ .controls {
59
+ display: flex;
60
+ gap: 10px;
61
+ margin: 20px 0;
62
+ flex-wrap: wrap;
63
+ }
64
+
65
+ button {
66
+ padding: 8px 16px;
67
+ background: #f3f4f6;
68
+ border: 1px solid #d1d5db;
69
+ border-radius: 4px;
70
+ cursor: pointer;
71
+ font-size: 14px;
72
+ transition: background 0.2s;
73
+ }
74
+
75
+ button:hover {
76
+ background: #e5e7eb;
77
+ }
78
+
79
+ .selected-chips {
80
+ margin-top: 16px;
81
+ padding: 12px;
82
+ background: #f0f9ff;
83
+ border: 1px solid #0ea5e9;
84
+ border-radius: 4px;
85
+ min-height: 40px;
86
+ }
87
+
88
+ .selected-chips:empty::after {
89
+ content: 'No chips selected';
90
+ color: #94a3b8;
91
+ }
92
+
93
+ code {
94
+ background: #f0f0f0;
95
+ padding: 2px 6px;
96
+ border-radius: 3px;
97
+ font-size: 0.9em;
98
+ }
99
+
100
+ .event-log {
101
+ margin-top: 16px;
102
+ padding: 12px;
103
+ background: #fef3c7;
104
+ border: 1px solid #fbbf24;
105
+ border-radius: 4px;
106
+ font-size: 14px;
107
+ font-family: monospace;
108
+ max-height: 200px;
109
+ overflow-y: auto;
110
+ }
111
+
112
+ .input-group {
113
+ display: flex;
114
+ gap: 8px;
115
+ margin: 16px 0;
116
+ }
117
+
118
+ input[type="text"] {
119
+ flex: 1;
120
+ padding: 8px 12px;
121
+ border: 1px solid #d1d5db;
122
+ border-radius: 4px;
123
+ font-size: 14px;
124
+ }
125
+
126
+ .avatar-chip {
127
+ width: 20px;
128
+ height: 20px;
129
+ border-radius: 50%;
130
+ object-fit: cover;
131
+ }
132
+ </style>
133
+ </head>
134
+ <body>
135
+ <div class="container">
136
+ <h1>Snice Chip Component Demo</h1>
137
+
138
+ <div class="demo-section">
139
+ <h2>Basic Chips</h2>
140
+
141
+ <span class="demo-label">Default Chips</span>
142
+ <div class="chip-group">
143
+ <snice-chip label="JavaScript"></snice-chip>
144
+ <snice-chip label="TypeScript"></snice-chip>
145
+ <snice-chip label="React"></snice-chip>
146
+ <snice-chip label="Vue"></snice-chip>
147
+ <snice-chip label="Angular"></snice-chip>
148
+ </div>
149
+
150
+ <span class="demo-label">Selectable Chips</span>
151
+ <div class="chip-group">
152
+ <snice-chip label="Apple" selected></snice-chip>
153
+ <snice-chip label="Banana"></snice-chip>
154
+ <snice-chip label="Cherry"></snice-chip>
155
+ <snice-chip label="Date"></snice-chip>
156
+ <snice-chip label="Elderberry"></snice-chip>
157
+ </div>
158
+ </div>
159
+
160
+ <div class="demo-section">
161
+ <h2>Chip Variants</h2>
162
+
163
+ <div class="chip-group">
164
+ <snice-chip label="Default" variant="default"></snice-chip>
165
+ <snice-chip label="Primary" variant="primary"></snice-chip>
166
+ <snice-chip label="Success" variant="success"></snice-chip>
167
+ <snice-chip label="Warning" variant="warning"></snice-chip>
168
+ <snice-chip label="Error" variant="error"></snice-chip>
169
+ <snice-chip label="Info" variant="info"></snice-chip>
170
+ </div>
171
+
172
+ <span class="demo-label">Selected State in Different Variants</span>
173
+ <div class="chip-group">
174
+ <snice-chip label="Default" variant="default" selected></snice-chip>
175
+ <snice-chip label="Primary" variant="primary" selected></snice-chip>
176
+ <snice-chip label="Success" variant="success" selected></snice-chip>
177
+ <snice-chip label="Warning" variant="warning" selected></snice-chip>
178
+ <snice-chip label="Error" variant="error" selected></snice-chip>
179
+ <snice-chip label="Info" variant="info" selected></snice-chip>
180
+ </div>
181
+ </div>
182
+
183
+ <div class="demo-section">
184
+ <h2>Chip Sizes</h2>
185
+
186
+ <div class="chip-group">
187
+ <snice-chip label="Small Chip" size="small"></snice-chip>
188
+ <snice-chip label="Medium Chip" size="medium"></snice-chip>
189
+ <snice-chip label="Large Chip" size="large"></snice-chip>
190
+ </div>
191
+ </div>
192
+
193
+ <div class="demo-section">
194
+ <h2>Removable Chips</h2>
195
+
196
+ <span class="demo-label">Click the X to remove</span>
197
+ <div class="chip-group" id="removable-chips">
198
+ <snice-chip label="Remove me" removable></snice-chip>
199
+ <snice-chip label="Delete this" removable variant="primary"></snice-chip>
200
+ <snice-chip label="Clear me" removable variant="success"></snice-chip>
201
+ <snice-chip label="Dismiss" removable variant="warning"></snice-chip>
202
+ <snice-chip label="Close" removable variant="error"></snice-chip>
203
+ </div>
204
+ </div>
205
+
206
+ <div class="demo-section">
207
+ <h2>Chips with Icons</h2>
208
+
209
+ <div class="chip-group">
210
+ <snice-chip label="Star" icon="⭐"></snice-chip>
211
+ <snice-chip label="Heart" icon="❤️" variant="error"></snice-chip>
212
+ <snice-chip label="Check" icon="✓" variant="success"></snice-chip>
213
+ <snice-chip label="Warning" icon="⚠️" variant="warning"></snice-chip>
214
+ <snice-chip label="Info" icon="ℹ️" variant="info"></snice-chip>
215
+ <snice-chip label="Removable" icon="📁" removable></snice-chip>
216
+ </div>
217
+ </div>
218
+
219
+ <div class="demo-section">
220
+ <h2>Chips with Avatars</h2>
221
+
222
+ <div class="chip-group">
223
+ <snice-chip label="John Doe" avatar="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%234f46e5'/%3E%3Ctext x='50' y='50' text-anchor='middle' dy='0.35em' fill='white' font-size='40' font-family='sans-serif'%3EJD%3C/text%3E%3C/svg%3E"></snice-chip>
224
+ <snice-chip label="Jane Smith" avatar="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23ec4899'/%3E%3Ctext x='50' y='50' text-anchor='middle' dy='0.35em' fill='white' font-size='40' font-family='sans-serif'%3EJS%3C/text%3E%3C/svg%3E" removable></snice-chip>
225
+ <snice-chip label="Alex Brown" avatar="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%2310b981'/%3E%3Ctext x='50' y='50' text-anchor='middle' dy='0.35em' fill='white' font-size='40' font-family='sans-serif'%3EAB%3C/text%3E%3C/svg%3E"></snice-chip>
226
+ </div>
227
+ </div>
228
+
229
+ <div class="demo-section">
230
+ <h2>Disabled State</h2>
231
+
232
+ <div class="chip-group">
233
+ <snice-chip label="Disabled" disabled></snice-chip>
234
+ <snice-chip label="Disabled Primary" variant="primary" disabled></snice-chip>
235
+ <snice-chip label="Disabled Removable" removable disabled></snice-chip>
236
+ <snice-chip label="Disabled Selected" selected disabled></snice-chip>
237
+ </div>
238
+ </div>
239
+
240
+ <div class="demo-section">
241
+ <h2>Interactive Filter Example</h2>
242
+
243
+ <span class="demo-label">Select categories:</span>
244
+ <div class="chip-group" id="filter-chips">
245
+ <snice-chip label="Electronics"></snice-chip>
246
+ <snice-chip label="Clothing"></snice-chip>
247
+ <snice-chip label="Books"></snice-chip>
248
+ <snice-chip label="Home & Garden"></snice-chip>
249
+ <snice-chip label="Sports"></snice-chip>
250
+ <snice-chip label="Toys"></snice-chip>
251
+ <snice-chip label="Food"></snice-chip>
252
+ <snice-chip label="Beauty"></snice-chip>
253
+ </div>
254
+ <div class="selected-chips" id="selected-filters"></div>
255
+ </div>
256
+
257
+ <div class="demo-section">
258
+ <h2>Dynamic Chip Creation</h2>
259
+
260
+ <div class="input-group">
261
+ <input type="text" id="chip-input" placeholder="Type and press Enter to add chip">
262
+ <button onclick="addChip()">Add Chip</button>
263
+ </div>
264
+ <div class="chip-group" id="dynamic-chips"></div>
265
+ </div>
266
+
267
+ <div class="demo-section">
268
+ <h2>Events</h2>
269
+
270
+ <span class="demo-label">Interact with these chips and watch the event log:</span>
271
+ <div class="chip-group" id="event-chips">
272
+ <snice-chip label="Click me"></snice-chip>
273
+ <snice-chip label="Remove me" removable></snice-chip>
274
+ <snice-chip label="Select me"></snice-chip>
275
+ </div>
276
+ <div class="event-log" id="event-log">Event log will appear here...</div>
277
+ </div>
278
+
279
+ <div class="demo-section">
280
+ <h2>Real-world Examples</h2>
281
+
282
+ <span class="demo-label">Email Recipients</span>
283
+ <div class="chip-group">
284
+ <snice-chip label="john@example.com" removable variant="primary" avatar="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%234f46e5'/%3E%3Ctext x='50' y='50' text-anchor='middle' dy='0.35em' fill='white' font-size='40' font-family='sans-serif'%3EJ%3C/text%3E%3C/svg%3E"></snice-chip>
285
+ <snice-chip label="sarah@company.com" removable variant="primary" avatar="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23ec4899'/%3E%3Ctext x='50' y='50' text-anchor='middle' dy='0.35em' fill='white' font-size='40' font-family='sans-serif'%3ES%3C/text%3E%3C/svg%3E"></snice-chip>
286
+ <snice-chip label="team@startup.io" removable variant="primary" icon="👥"></snice-chip>
287
+ </div>
288
+
289
+ <span class="demo-label">Skills</span>
290
+ <div class="chip-group">
291
+ <snice-chip label="JavaScript" icon="💛" variant="warning"></snice-chip>
292
+ <snice-chip label="Python" icon="🐍" variant="info"></snice-chip>
293
+ <snice-chip label="React" icon="⚛️" variant="info"></snice-chip>
294
+ <snice-chip label="Node.js" icon="🟢" variant="success"></snice-chip>
295
+ <snice-chip label="Docker" icon="🐳" variant="primary"></snice-chip>
296
+ </div>
297
+
298
+ <span class="demo-label">Tags</span>
299
+ <div class="chip-group">
300
+ <snice-chip label="New" variant="success" size="small"></snice-chip>
301
+ <snice-chip label="Hot" variant="error" size="small"></snice-chip>
302
+ <snice-chip label="Sale" variant="warning" size="small"></snice-chip>
303
+ <snice-chip label="Limited" variant="info" size="small"></snice-chip>
304
+ </div>
305
+ </div>
306
+ </div>
307
+
308
+ <script type="module">
309
+ import './snice-chip.ts';
310
+
311
+ // Handle removable chips
312
+ document.getElementById('removable-chips').addEventListener('chip-remove', (e) => {
313
+ e.target.remove();
314
+ });
315
+
316
+ // Handle filter chips
317
+ const filterChips = document.querySelectorAll('#filter-chips snice-chip');
318
+ const selectedFilters = document.getElementById('selected-filters');
319
+
320
+ filterChips.forEach(chip => {
321
+ chip.addEventListener('chip-click', (e) => {
322
+ updateSelectedFilters();
323
+ });
324
+ });
325
+
326
+ function updateSelectedFilters() {
327
+ const selected = Array.from(filterChips)
328
+ .filter(chip => chip.selected)
329
+ .map(chip => chip.label);
330
+
331
+ selectedFilters.textContent = selected.length > 0
332
+ ? 'Selected: ' + selected.join(', ')
333
+ : '';
334
+ }
335
+
336
+ // Dynamic chip creation
337
+ const chipInput = document.getElementById('chip-input');
338
+ const dynamicChips = document.getElementById('dynamic-chips');
339
+
340
+ window.addChip = function() {
341
+ const value = chipInput.value.trim();
342
+ if (value) {
343
+ const chip = document.createElement('snice-chip');
344
+ chip.label = value;
345
+ chip.removable = true;
346
+ chip.variant = ['default', 'primary', 'success', 'warning', 'error', 'info'][Math.floor(Math.random() * 6)];
347
+ chip.addEventListener('chip-remove', (e) => {
348
+ e.target.remove();
349
+ });
350
+ dynamicChips.appendChild(chip);
351
+ chipInput.value = '';
352
+ }
353
+ };
354
+
355
+ chipInput.addEventListener('keypress', (e) => {
356
+ if (e.key === 'Enter') {
357
+ addChip();
358
+ }
359
+ });
360
+
361
+ // Event logging
362
+ const eventChips = document.getElementById('event-chips');
363
+ const eventLog = document.getElementById('event-log');
364
+ let logEntries = [];
365
+
366
+ eventChips.addEventListener('chip-click', (e) => {
367
+ addLogEntry(`Click: "${e.detail.label}" (selected: ${e.detail.selected})`);
368
+ });
369
+
370
+ eventChips.addEventListener('chip-remove', (e) => {
371
+ addLogEntry(`Remove: "${e.detail.label}"`);
372
+ e.target.remove();
373
+ });
374
+
375
+ function addLogEntry(message) {
376
+ const timestamp = new Date().toLocaleTimeString();
377
+ logEntries.unshift(`[${timestamp}] ${message}`);
378
+ logEntries = logEntries.slice(0, 10); // Keep last 10 entries
379
+ eventLog.innerHTML = logEntries.join('<br>');
380
+ }
381
+ </script>
382
+ </body>
383
+ </html>