snice 2.1.5 → 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 (364) 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 +1 -1
  205. package/dist/index.esm.js +1 -1
  206. package/dist/index.esm.min.js +1 -1
  207. package/dist/index.iife.js +1 -1
  208. package/dist/index.iife.min.js +1 -1
  209. package/dist/symbols.esm.js +1 -1
  210. package/dist/transitions.esm.js +1 -1
  211. package/package.json +10 -6
  212. package/components/accordion/demo.html +0 -403
  213. package/components/accordion/snice-accordion-item.css +0 -85
  214. package/components/accordion/snice-accordion-item.ts +0 -226
  215. package/components/accordion/snice-accordion.css +0 -31
  216. package/components/accordion/snice-accordion.ts +0 -182
  217. package/components/accordion/snice-accordion.types.ts +0 -32
  218. package/components/alert/demo.html +0 -445
  219. package/components/alert/snice-alert.css +0 -195
  220. package/components/alert/snice-alert.ts +0 -141
  221. package/components/avatar/demo.html +0 -598
  222. package/components/avatar/snice-avatar.css +0 -131
  223. package/components/avatar/snice-avatar.ts +0 -136
  224. package/components/avatar/snice-avatar.types.ts +0 -13
  225. package/components/badge/demo.html +0 -523
  226. package/components/badge/snice-badge.css +0 -161
  227. package/components/badge/snice-badge.ts +0 -117
  228. package/components/breadcrumbs/demo.html +0 -404
  229. package/components/breadcrumbs/snice-breadcrumbs.css +0 -133
  230. package/components/breadcrumbs/snice-breadcrumbs.ts +0 -191
  231. package/components/breadcrumbs/snice-breadcrumbs.types.ts +0 -26
  232. package/components/breadcrumbs/snice-crumb.ts +0 -26
  233. package/components/button/demo.html +0 -42
  234. package/components/button/snice-button.css +0 -230
  235. package/components/button/snice-button.ts +0 -169
  236. package/components/button/snice-button.types.ts +0 -25
  237. package/components/card/demo.html +0 -525
  238. package/components/card/snice-card.css +0 -140
  239. package/components/card/snice-card.ts +0 -102
  240. package/components/checkbox/demo.html +0 -253
  241. package/components/checkbox/snice-checkbox.css +0 -164
  242. package/components/checkbox/snice-checkbox.ts +0 -223
  243. package/components/checkbox/snice-checkbox.types.ts +0 -22
  244. package/components/chip/demo.html +0 -383
  245. package/components/chip/snice-chip.css +0 -195
  246. package/components/chip/snice-chip.ts +0 -139
  247. package/components/chip/snice-chip.types.ts +0 -15
  248. package/components/date-picker/README.md +0 -233
  249. package/components/date-picker/demo.html +0 -191
  250. package/components/date-picker/snice-date-picker.css +0 -330
  251. package/components/date-picker/snice-date-picker.ts +0 -777
  252. package/components/date-picker/snice-date-picker.types.ts +0 -83
  253. package/components/divider/demo.html +0 -233
  254. package/components/divider/snice-divider.css +0 -155
  255. package/components/divider/snice-divider.ts +0 -69
  256. package/components/drawer/demo.html +0 -328
  257. package/components/drawer/snice-drawer.css +0 -476
  258. package/components/drawer/snice-drawer.ts +0 -287
  259. package/components/drawer/snice-drawer.types.ts +0 -17
  260. package/components/global.d.ts +0 -14
  261. package/components/input/demo.html +0 -303
  262. package/components/input/snice-input.css +0 -257
  263. package/components/input/snice-input.ts +0 -442
  264. package/components/input/snice-input.types.ts +0 -59
  265. package/components/input/test.html +0 -77
  266. package/components/layout/README.md +0 -260
  267. package/components/layout/demo.html +0 -538
  268. package/components/layout/snice-layout-blog.css +0 -129
  269. package/components/layout/snice-layout-blog.ts +0 -48
  270. package/components/layout/snice-layout-card.css +0 -104
  271. package/components/layout/snice-layout-card.ts +0 -35
  272. package/components/layout/snice-layout-centered.css +0 -51
  273. package/components/layout/snice-layout-centered.ts +0 -22
  274. package/components/layout/snice-layout-dashboard.css +0 -98
  275. package/components/layout/snice-layout-dashboard.ts +0 -45
  276. package/components/layout/snice-layout-fullscreen.css +0 -72
  277. package/components/layout/snice-layout-fullscreen.ts +0 -34
  278. package/components/layout/snice-layout-landing.css +0 -92
  279. package/components/layout/snice-layout-landing.ts +0 -47
  280. package/components/layout/snice-layout-minimal.css +0 -16
  281. package/components/layout/snice-layout-minimal.ts +0 -19
  282. package/components/layout/snice-layout-sidebar.css +0 -117
  283. package/components/layout/snice-layout-sidebar.ts +0 -48
  284. package/components/layout/snice-layout-split.css +0 -103
  285. package/components/layout/snice-layout-split.ts +0 -29
  286. package/components/layout/snice-layout.css +0 -72
  287. package/components/layout/snice-layout.ts +0 -35
  288. package/components/login/demo-auth-controller.ts +0 -185
  289. package/components/login/demo.html +0 -470
  290. package/components/login/snice-login.css +0 -204
  291. package/components/login/snice-login.ts +0 -326
  292. package/components/login/snice-login.types.ts +0 -29
  293. package/components/modal/demo.html +0 -291
  294. package/components/modal/snice-modal.css +0 -203
  295. package/components/modal/snice-modal.ts +0 -233
  296. package/components/modal/snice-modal.types.ts +0 -21
  297. package/components/pagination/demo.html +0 -395
  298. package/components/pagination/snice-pagination.ts +0 -333
  299. package/components/pagination/snice-pagination.types.ts +0 -21
  300. package/components/progress/demo.html +0 -510
  301. package/components/progress/snice-progress.css +0 -267
  302. package/components/progress/snice-progress.ts +0 -247
  303. package/components/progress/snice-progress.types.ts +0 -19
  304. package/components/radio/demo.html +0 -287
  305. package/components/radio/snice-radio.css +0 -171
  306. package/components/radio/snice-radio.ts +0 -218
  307. package/components/radio/snice-radio.types.ts +0 -21
  308. package/components/select/demo.html +0 -511
  309. package/components/select/snice-option.ts +0 -52
  310. package/components/select/snice-select.css +0 -392
  311. package/components/select/snice-select.ts +0 -796
  312. package/components/select/snice-select.types.ts +0 -55
  313. package/components/skeleton/demo.html +0 -514
  314. package/components/skeleton/snice-skeleton.css +0 -109
  315. package/components/skeleton/snice-skeleton.ts +0 -126
  316. package/components/switch/demo.html +0 -284
  317. package/components/switch/snice-switch.css +0 -221
  318. package/components/switch/snice-switch.ts +0 -229
  319. package/components/switch/snice-switch.types.ts +0 -23
  320. package/components/symbols.ts +0 -23
  321. package/components/table/demo-table-controller.ts +0 -100
  322. package/components/table/demo.html +0 -480
  323. package/components/table/snice-cell-boolean.ts +0 -112
  324. package/components/table/snice-cell-date.ts +0 -210
  325. package/components/table/snice-cell-duration.ts +0 -91
  326. package/components/table/snice-cell-filesize.ts +0 -90
  327. package/components/table/snice-cell-number.ts +0 -165
  328. package/components/table/snice-cell-progress.ts +0 -83
  329. package/components/table/snice-cell-rating.ts +0 -82
  330. package/components/table/snice-cell-sparkline.ts +0 -253
  331. package/components/table/snice-cell-text.ts +0 -125
  332. package/components/table/snice-cell.css +0 -296
  333. package/components/table/snice-cell.ts +0 -473
  334. package/components/table/snice-column.ts +0 -353
  335. package/components/table/snice-header.css +0 -243
  336. package/components/table/snice-header.ts +0 -261
  337. package/components/table/snice-progress.ts +0 -66
  338. package/components/table/snice-rating.ts +0 -45
  339. package/components/table/snice-row.css +0 -255
  340. package/components/table/snice-row.ts +0 -331
  341. package/components/table/snice-table.css +0 -241
  342. package/components/table/snice-table.ts +0 -737
  343. package/components/table/snice-table.types.ts +0 -158
  344. package/components/tabs/demo.html +0 -487
  345. package/components/tabs/snice-tab-panel.css +0 -264
  346. package/components/tabs/snice-tab-panel.ts +0 -47
  347. package/components/tabs/snice-tab.css +0 -96
  348. package/components/tabs/snice-tab.ts +0 -65
  349. package/components/tabs/snice-tabs.css +0 -189
  350. package/components/tabs/snice-tabs.ts +0 -332
  351. package/components/tabs/snice-tabs.types.ts +0 -28
  352. package/components/theme/theme.css +0 -234
  353. package/components/toast/demo.html +0 -329
  354. package/components/toast/snice-toast-container.ts +0 -256
  355. package/components/toast/snice-toast.css +0 -213
  356. package/components/toast/snice-toast.ts +0 -276
  357. package/components/toast/snice-toast.types.ts +0 -35
  358. package/components/tooltip/demo.html +0 -350
  359. package/components/tooltip/snice-tooltip-portal.css +0 -79
  360. package/components/tooltip/snice-tooltip.css +0 -117
  361. package/components/tooltip/snice-tooltip.ts +0 -612
  362. package/components/tooltip/snice-tooltip.types.ts +0 -32
  363. package/components/transitions.ts +0 -94
  364. package/components/tsconfig.json +0 -18
package/components/radio/demo.html DELETED
@@ -1,287 +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>Radio Button 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
- .radio-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
-
72
- fieldset {
73
- border: 1px solid var(--snice-color-border);
74
- border-radius: var(--snice-border-radius-md);
75
- padding: 16px;
76
- margin: 0;
77
- }
78
-
79
- legend {
80
- padding: 0 8px;
81
- font-weight: 500;
82
- }
83
- </style>
84
- </head>
85
- <body>
86
- <h2>Radio Button Component Demo</h2>
87
-
88
- <div class="section">
89
- <h3>Basic Radio Buttons</h3>
90
- <div class="radio-group">
91
- <snice-radio name="basic" value="option1" label="Option 1" checked></snice-radio>
92
- <snice-radio name="basic" value="option2" label="Option 2"></snice-radio>
93
- <snice-radio name="basic" value="option3" label="Option 3"></snice-radio>
94
- <snice-radio name="basic" value="option4" label="Option 4" disabled></snice-radio>
95
- </div>
96
- </div>
97
-
98
- <div class="section">
99
- <h3>Sizes</h3>
100
- <fieldset>
101
- <legend>Small</legend>
102
- <div class="radio-group">
103
- <snice-radio size="small" name="size-small" value="1" label="Small Option 1"></snice-radio>
104
- <snice-radio size="small" name="size-small" value="2" label="Small Option 2"></snice-radio>
105
- </div>
106
- </fieldset>
107
-
108
- <fieldset style="margin-top: 16px;">
109
- <legend>Medium (Default)</legend>
110
- <div class="radio-group">
111
- <snice-radio size="medium" name="size-medium" value="1" label="Medium Option 1"></snice-radio>
112
- <snice-radio size="medium" name="size-medium" value="2" label="Medium Option 2"></snice-radio>
113
- </div>
114
- </fieldset>
115
-
116
- <fieldset style="margin-top: 16px;">
117
- <legend>Large</legend>
118
- <div class="radio-group">
119
- <snice-radio size="large" name="size-large" value="1" label="Large Option 1"></snice-radio>
120
- <snice-radio size="large" name="size-large" value="2" label="Large Option 2"></snice-radio>
121
- </div>
122
- </fieldset>
123
- </div>
124
-
125
- <div class="section">
126
- <h3>States</h3>
127
- <div class="radio-group">
128
- <snice-radio name="states" value="required" label="Required field" required></snice-radio>
129
- <snice-radio name="states" value="invalid" label="Invalid state" invalid></snice-radio>
130
- <snice-radio name="states" value="disabled" label="Disabled" disabled></snice-radio>
131
- <snice-radio name="states" value="disabled-checked" label="Disabled checked" disabled checked></snice-radio>
132
- </div>
133
- </div>
134
-
135
- <div class="section">
136
- <h3>Payment Method Example</h3>
137
- <fieldset>
138
- <legend>Select Payment Method</legend>
139
- <div class="radio-group">
140
- <snice-radio name="payment" value="card" label="Credit/Debit Card" checked></snice-radio>
141
- <snice-radio name="payment" value="paypal" label="PayPal"></snice-radio>
142
- <snice-radio name="payment" value="bank" label="Bank Transfer"></snice-radio>
143
- <snice-radio name="payment" value="crypto" label="Cryptocurrency"></snice-radio>
144
- </div>
145
- </fieldset>
146
- <button onclick="getPaymentMethod()">Get Selected Payment</button>
147
- <div id="payment-output" class="output">Selected: Credit/Debit Card</div>
148
- </div>
149
-
150
- <div class="section">
151
- <h3>Theme Selection</h3>
152
- <fieldset>
153
- <legend>Choose Theme</legend>
154
- <div class="radio-group">
155
- <snice-radio id="theme-light" name="theme" value="light" label="Light" checked></snice-radio>
156
- <snice-radio id="theme-dark" name="theme" value="dark" label="Dark"></snice-radio>
157
- <snice-radio id="theme-auto" name="theme" value="auto" label="System"></snice-radio>
158
- </div>
159
- </fieldset>
160
- <div id="theme-output" class="output">Current theme: light</div>
161
- </div>
162
-
163
- <div class="section">
164
- <h3>Interactive Example</h3>
165
- <div class="radio-group">
166
- <snice-radio id="interactive-1" name="interactive" value="option1" label="Option 1"></snice-radio>
167
- <snice-radio id="interactive-2" name="interactive" value="option2" label="Option 2"></snice-radio>
168
- <snice-radio id="interactive-3" name="interactive" value="option3" label="Option 3"></snice-radio>
169
- </div>
170
- <div class="row">
171
- <button onclick="document.getElementById('interactive-2').select()">Select Option 2</button>
172
- <button onclick="document.getElementById('interactive-1').focus()">Focus Option 1</button>
173
- <button onclick="getInteractiveValue()">Get Value</button>
174
- </div>
175
- <div id="interactive-output" class="output">Events will appear here...</div>
176
- </div>
177
-
178
- <div class="section">
179
- <h3>Form Example</h3>
180
- <form id="demo-form">
181
- <fieldset>
182
- <legend>Survey</legend>
183
- <div style="margin-bottom: 16px;">
184
- <strong>How satisfied are you?</strong>
185
- <div class="radio-group" style="margin-top: 8px;">
186
- <snice-radio name="satisfaction" value="very-satisfied" label="Very Satisfied" required></snice-radio>
187
- <snice-radio name="satisfaction" value="satisfied" label="Satisfied" required></snice-radio>
188
- <snice-radio name="satisfaction" value="neutral" label="Neutral" required></snice-radio>
189
- <snice-radio name="satisfaction" value="dissatisfied" label="Dissatisfied" required></snice-radio>
190
- <snice-radio name="satisfaction" value="very-dissatisfied" label="Very Dissatisfied" required></snice-radio>
191
- </div>
192
- </div>
193
-
194
- <div>
195
- <strong>Would you recommend us?</strong>
196
- <div class="radio-group" style="margin-top: 8px;">
197
- <snice-radio name="recommend" value="yes" label="Yes" required></snice-radio>
198
- <snice-radio name="recommend" value="no" label="No" required></snice-radio>
199
- <snice-radio name="recommend" value="maybe" label="Maybe" required></snice-radio>
200
- </div>
201
- </div>
202
- </fieldset>
203
- <button type="submit" style="margin-top: 16px;">Submit Survey</button>
204
- </form>
205
- <div id="form-output" class="output">Form data will appear here...</div>
206
- </div>
207
-
208
- <script type="module">
209
- import './snice-radio.ts';
210
-
211
- // Payment method
212
- window.getPaymentMethod = function() {
213
- const radios = document.querySelectorAll('snice-radio[name="payment"]');
214
- let selected = null;
215
- radios.forEach(radio => {
216
- if (radio.checked) {
217
- selected = radio;
218
- }
219
- });
220
- const output = document.getElementById('payment-output');
221
- if (selected) {
222
- output.textContent = `Selected: ${selected.label}`;
223
- }
224
- };
225
-
226
- // Theme selection
227
- const themeRadios = document.querySelectorAll('snice-radio[name="theme"]');
228
- themeRadios.forEach(radio => {
229
- radio.addEventListener('@snice/radio-change', (e) => {
230
- if (e.detail.checked) {
231
- document.getElementById('theme-output').textContent =
232
- `Current theme: ${e.detail.value}`;
233
- }
234
- });
235
- });
236
-
237
- // Interactive example
238
- const interactiveRadios = document.querySelectorAll('snice-radio[name="interactive"]');
239
- interactiveRadios.forEach(radio => {
240
- radio.addEventListener('@snice/radio-change', (e) => {
241
- document.getElementById('interactive-output').textContent =
242
- `Changed: value=${e.detail.value}, checked=${e.detail.checked}`;
243
- });
244
- });
245
-
246
- window.getInteractiveValue = function() {
247
- const radios = document.querySelectorAll('snice-radio[name="interactive"]');
248
- let selected = null;
249
- radios.forEach(radio => {
250
- if (radio.checked) {
251
- selected = radio;
252
- }
253
- });
254
- document.getElementById('interactive-output').textContent =
255
- selected ? `Current value: ${selected.value}` : 'No selection';
256
- };
257
-
258
- // Form submission
259
- document.getElementById('demo-form').addEventListener('submit', (e) => {
260
- e.preventDefault();
261
- const data = {};
262
- const radios = e.target.querySelectorAll('snice-radio');
263
- const groups = new Set();
264
-
265
- radios.forEach(radio => {
266
- if (radio.name) {
267
- groups.add(radio.name);
268
- }
269
- });
270
-
271
- groups.forEach(groupName => {
272
- const radios = e.target.querySelectorAll(`snice-radio[name="${groupName}"]`);
273
- let selected = null;
274
- radios.forEach(radio => {
275
- if (radio.checked) {
276
- selected = radio;
277
- }
278
- });
279
- data[groupName] = selected ? selected.value : null;
280
- });
281
-
282
- document.getElementById('form-output').textContent =
283
- `Form data: ${JSON.stringify(data, null, 2)}`;
284
- });
285
- </script>
286
- </body>
287
- </html>
package/components/radio/snice-radio.css DELETED
@@ -1,171 +0,0 @@
1
- :host {
2
- display: inline-block;
3
- font-family: var(--snice-font-family);
4
- }
5
-
6
- .radio-wrapper {
7
- display: inline-flex;
8
- align-items: center;
9
- position: relative;
10
- cursor: pointer;
11
- user-select: none;
12
- }
13
-
14
- .radio-wrapper--disabled {
15
- cursor: not-allowed;
16
- opacity: 0.6;
17
- }
18
-
19
- /* Hide native radio */
20
- .radio-input {
21
- position: absolute;
22
- opacity: 0;
23
- width: 0;
24
- height: 0;
25
- }
26
-
27
- /* Custom radio */
28
- .radio {
29
- position: relative;
30
- display: inline-flex;
31
- align-items: center;
32
- justify-content: center;
33
- background: var(--snice-color-background);
34
- border: 2px solid var(--snice-color-border);
35
- border-radius: 50%;
36
- transition: all var(--snice-transition-fast) ease;
37
- }
38
-
39
- /* Size variants */
40
- .radio--small {
41
- width: 1rem; /* 16px */
42
- height: 1rem; /* 16px */
43
- }
44
-
45
- .radio--medium {
46
- width: 1.25rem; /* 20px */
47
- height: 1.25rem; /* 20px */
48
- }
49
-
50
- .radio--large {
51
- width: 1.5rem; /* 24px */
52
- height: 1.5rem; /* 24px */
53
- }
54
-
55
- /* States */
56
- .radio-input:checked ~ .radio {
57
- border-color: var(--snice-color-primary);
58
- }
59
-
60
- .radio-input:focus-visible ~ .radio {
61
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
62
- }
63
-
64
- .radio-input:disabled ~ .radio {
65
- background: var(--snice-color-background-secondary);
66
- border-color: var(--snice-color-border);
67
- }
68
-
69
- .radio-input:disabled:checked ~ .radio {
70
- border-color: var(--snice-color-text-secondary);
71
- }
72
-
73
- .radio-input:disabled:checked ~ .radio .radio-dot {
74
- background: var(--snice-color-text-secondary);
75
- }
76
-
77
- /* Invalid state */
78
- .radio--invalid {
79
- border-color: var(--snice-color-danger);
80
- }
81
-
82
- .radio-input:checked ~ .radio--invalid {
83
- border-color: var(--snice-color-danger);
84
- }
85
-
86
- .radio-input:checked ~ .radio--invalid .radio-dot {
87
- background: var(--snice-color-danger);
88
- }
89
-
90
- /* Radio dot */
91
- .radio-dot {
92
- position: absolute;
93
- border-radius: 50%;
94
- background: var(--snice-color-primary);
95
- transform: scale(0);
96
- transition: transform var(--snice-transition-fast) ease;
97
- }
98
-
99
- .radio-input:checked ~ .radio .radio-dot {
100
- transform: scale(1);
101
- }
102
-
103
- /* Dot sizes */
104
- .radio--small .radio-dot {
105
- width: 0.375rem; /* 6px */
106
- height: 0.375rem; /* 6px */
107
- }
108
-
109
- .radio--medium .radio-dot {
110
- width: 0.5rem; /* 8px */
111
- height: 0.5rem; /* 8px */
112
- }
113
-
114
- .radio--large .radio-dot {
115
- width: 0.625rem; /* 10px */
116
- height: 0.625rem; /* 10px */
117
- }
118
-
119
- /* Label */
120
- .radio-label {
121
- margin-left: 0.5rem; /* 8px */
122
- color: var(--snice-color-text);
123
- cursor: pointer;
124
- }
125
-
126
- .radio-label--small {
127
- font-size: var(--snice-font-size-sm);
128
- }
129
-
130
- .radio-label--medium {
131
- font-size: var(--snice-font-size-md);
132
- }
133
-
134
- .radio-label--large {
135
- font-size: var(--snice-font-size-lg);
136
- }
137
-
138
- .radio-wrapper--disabled .radio-label {
139
- color: var(--snice-color-text-secondary);
140
- cursor: not-allowed;
141
- }
142
-
143
- /* Required indicator */
144
- .radio-label--required::after {
145
- content: ' *';
146
- color: var(--snice-color-danger);
147
- }
148
-
149
- /* Focus ring for keyboard navigation */
150
- .radio-input:focus-visible ~ .radio {
151
- outline: 2px solid var(--snice-color-primary);
152
- outline-offset: 2px;
153
- }
154
-
155
- /* Hover effect */
156
- .radio-wrapper:not(.radio-wrapper--disabled):hover .radio {
157
- border-color: var(--snice-color-primary);
158
- }
159
-
160
- /* Radio Group styling (when used together) */
161
- :host {
162
- --radio-group-gap: 0.75rem; /* 12px */
163
- }
164
-
165
- :host([data-group]) {
166
- display: block;
167
- }
168
-
169
- :host([data-group]) + :host([data-group]) {
170
- margin-top: var(--radio-group-gap);
171
- }
package/components/radio/snice-radio.ts DELETED
@@ -1,218 +0,0 @@
1
- import { element, property, query, on, watch, dispatch, ready } from 'snice';
2
- import css from './snice-radio.css?inline';
3
- import type { RadioSize, SniceRadioElement } from './snice-radio.types';
4
-
5
- @element('snice-radio')
6
- export class SniceRadio extends HTMLElement implements SniceRadioElement {
7
- @property({ type: Boolean, reflect: true })
8
- checked = false;
9
-
10
- @property({ type: Boolean, reflect: true })
11
- disabled = false;
12
-
13
- @property({ type: Boolean, reflect: true })
14
- required = false;
15
-
16
- @property({ type: Boolean, reflect: true })
17
- invalid = false;
18
-
19
- @property({ reflect: true })
20
- size: RadioSize = 'medium';
21
-
22
- @property({ reflect: true })
23
- name = '';
24
-
25
- @property({ reflect: true })
26
- value = '';
27
-
28
- @property({ reflect: true })
29
- label = '';
30
-
31
- @query('.radio-input')
32
- input?: HTMLInputElement;
33
-
34
- @query('.radio')
35
- radio?: HTMLElement;
36
-
37
- @query('.radio-label')
38
- labelElement?: HTMLElement;
39
-
40
- @query('.radio-wrapper')
41
- wrapper?: HTMLElement;
42
-
43
- html() {
44
- return /*html*/`
45
- <label class="radio-wrapper ${this.disabled ? 'radio-wrapper--disabled' : ''}">
46
- <input
47
- type="radio"
48
- class="radio-input"
49
- ${this.checked ? 'checked' : ''}
50
- ${this.disabled ? 'disabled' : ''}
51
- ${this.required ? 'required' : ''}
52
- ${this.name ? `name="${this.name}"` : ''}
53
- ${this.value ? `value="${this.value}"` : ''}
54
- aria-invalid="${this.invalid}"
55
- part="input"
56
- />
57
-
58
- <span class="radio
59
- radio--${this.size}
60
- ${this.invalid ? 'radio--invalid' : ''}"
61
- part="radio">
62
- <span class="radio-dot" part="dot"></span>
63
- </span>
64
-
65
- ${this.label ? /*html*/`
66
- <span class="radio-label radio-label--${this.size} ${this.required ? 'radio-label--required' : ''}" part="label">
67
- ${this.label}
68
- </span>
69
- ` : ''}
70
- </label>
71
- `;
72
- }
73
-
74
- css() {
75
- return css;
76
- }
77
-
78
- @ready()
79
- init() {
80
- // Set initial states
81
- if (this.input) {
82
- this.input.checked = this.checked;
83
-
84
- // Set form value
85
- if (this.name) {
86
- this.input.name = this.name;
87
- }
88
- if (this.value) {
89
- this.input.value = this.value;
90
- }
91
- }
92
- }
93
-
94
- @on('change', '.radio-input')
95
- handleChange(e: Event) {
96
- const target = e.target as HTMLInputElement;
97
- const wasChecked = this.checked;
98
- this.checked = target.checked;
99
-
100
- // If this radio was just checked, uncheck others in the same group
101
- if (this.checked && !wasChecked && this.name) {
102
- this.uncheckOthersInGroup();
103
- }
104
-
105
- this.dispatchChangeEvent();
106
- }
107
-
108
- @on('click', '.radio-input')
109
- handleClick(e: Event) {
110
- // Allow click to propagate for label association
111
- e.stopPropagation();
112
- }
113
-
114
- @watch('checked')
115
- handleCheckedChange() {
116
- if (this.input) {
117
- this.input.checked = this.checked;
118
- }
119
-
120
- // If checked, uncheck others in the same group
121
- if (this.checked && this.name) {
122
- this.uncheckOthersInGroup();
123
- }
124
- }
125
-
126
- @watch('disabled')
127
- handleDisabledChange() {
128
- if (this.input) {
129
- this.input.disabled = this.disabled;
130
- }
131
- if (this.wrapper) {
132
- this.wrapper.classList.toggle('radio-wrapper--disabled', this.disabled);
133
- }
134
- }
135
-
136
- @watch('invalid')
137
- handleInvalidChange() {
138
- if (this.input) {
139
- this.input.setAttribute('aria-invalid', String(this.invalid));
140
- }
141
- if (this.radio) {
142
- this.radio.classList.toggle('radio--invalid', this.invalid);
143
- }
144
- }
145
-
146
- @watch('required')
147
- handleRequiredChange() {
148
- if (this.input) {
149
- this.input.required = this.required;
150
- }
151
- if (this.labelElement) {
152
- this.labelElement.classList.toggle('radio-label--required', this.required);
153
- }
154
- }
155
-
156
- @watch('label')
157
- handleLabelChange() {
158
- if (this.labelElement) {
159
- this.labelElement.textContent = this.label;
160
- this.labelElement.style.display = this.label ? '' : 'none';
161
- }
162
- }
163
-
164
- @watch('name')
165
- handleNameChange() {
166
- if (this.input) {
167
- this.input.name = this.name;
168
- }
169
- }
170
-
171
- @watch('value')
172
- handleValueChange() {
173
- if (this.input) {
174
- this.input.value = this.value;
175
- }
176
- }
177
-
178
- private uncheckOthersInGroup() {
179
- if (!this.name) return;
180
-
181
- // Find all radios with the same name
182
- const radios = document.querySelectorAll(`snice-radio[name="${this.name}"]`) as NodeListOf<SniceRadio>;
183
- radios.forEach(radio => {
184
- if (radio !== this && radio.checked) {
185
- radio.checked = false;
186
- }
187
- });
188
- }
189
-
190
- @dispatch('@snice/radio-change', { bubbles: true, composed: true })
191
- private dispatchChangeEvent() {
192
- return {
193
- checked: this.checked,
194
- value: this.value,
195
- radio: this
196
- };
197
- }
198
-
199
- // Public API
200
- focus() {
201
- this.input?.focus();
202
- }
203
-
204
- blur() {
205
- this.input?.blur();
206
- }
207
-
208
- click() {
209
- this.input?.click();
210
- }
211
-
212
- select() {
213
- if (!this.checked) {
214
- this.checked = true;
215
- this.dispatchChangeEvent();
216
- }
217
- }
218
- }
package/components/radio/snice-radio.types.ts DELETED
@@ -1,21 +0,0 @@
1
- export type RadioSize = 'small' | 'medium' | 'large';
2
-
3
- export interface SniceRadioElement extends HTMLElement {
4
- checked: boolean;
5
- disabled: boolean;
6
- required: boolean;
7
- invalid: boolean;
8
- size: RadioSize;
9
- name: string;
10
- value: string;
11
- label: string;
12
- focus(): void;
13
- blur(): void;
14
- click(): void;
15
- }
16
-
17
- export interface RadioChangeDetail {
18
- checked: boolean;
19
- value: string;
20
- radio: SniceRadioElement;
21
- }