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/radio/demo.html ADDED
@@ -0,0 +1,287 @@
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>