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/select/demo.html ADDED
@@ -0,0 +1,511 @@
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>Select/Dropdown 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
+ .select-group {
35
+ display: flex;
36
+ flex-direction: column;
37
+ gap: 16px;
38
+ margin-bottom: 20px;
39
+ }
40
+
41
+ .row {
42
+ display: flex;
43
+ gap: 20px;
44
+ align-items: flex-start;
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
+ .form-row {
73
+ margin-bottom: 16px;
74
+ }
75
+
76
+ .card {
77
+ background: var(--snice-color-background-secondary);
78
+ border: 1px solid var(--snice-color-border);
79
+ border-radius: var(--snice-border-radius-lg);
80
+ padding: 20px;
81
+ margin-bottom: 20px;
82
+ }
83
+
84
+ snice-select {
85
+ width: 250px;
86
+ }
87
+ </style>
88
+ </head>
89
+ <body>
90
+ <h2>Select/Dropdown Component Demo</h2>
91
+
92
+ <div class="section">
93
+ <h3>Basic Select</h3>
94
+ <div class="select-group">
95
+ <snice-select
96
+ id="basic-select"
97
+ label="Choose an option"
98
+ placeholder="Select an option">
99
+ <snice-option value="option1">Option 1</snice-option>
100
+ <snice-option value="option2">Option 2</snice-option>
101
+ <snice-option value="option3">Option 3</snice-option>
102
+ <snice-option value="option4" disabled>Option 4 (disabled)</snice-option>
103
+ <snice-option value="option5">Option 5</snice-option>
104
+ </snice-select>
105
+
106
+ <snice-select
107
+ id="pre-selected"
108
+ label="Pre-selected value"
109
+ value="option2">
110
+ <snice-option value="option1">Option 1</snice-option>
111
+ <snice-option value="option2">Option 2</snice-option>
112
+ <snice-option value="option3">Option 3</snice-option>
113
+ </snice-select>
114
+
115
+ <snice-select
116
+ label="Disabled select"
117
+ value="option1"
118
+ disabled>
119
+ <snice-option value="option1">Option 1</snice-option>
120
+ <snice-option value="option2">Option 2</snice-option>
121
+ <snice-option value="option3">Option 3</snice-option>
122
+ </snice-select>
123
+ </div>
124
+ </div>
125
+
126
+ <div class="section">
127
+ <h3>Sizes</h3>
128
+ <div class="row">
129
+ <snice-select
130
+ size="small"
131
+ label="Small select"
132
+ placeholder="Small size">
133
+ <snice-option value="1">First Option</snice-option>
134
+ <snice-option value="2">Second Option</snice-option>
135
+ <snice-option value="3">Third Option</snice-option>
136
+ </snice-select>
137
+
138
+ <snice-select
139
+ size="medium"
140
+ label="Medium select (default)"
141
+ placeholder="Medium size">
142
+ <snice-option value="1">First Option</snice-option>
143
+ <snice-option value="2">Second Option</snice-option>
144
+ <snice-option value="3">Third Option</snice-option>
145
+ </snice-select>
146
+
147
+ <snice-select
148
+ size="large"
149
+ label="Large select"
150
+ placeholder="Large size">
151
+ <snice-option value="1">First Option</snice-option>
152
+ <snice-option value="2">Second Option</snice-option>
153
+ <snice-option value="3">Third Option</snice-option>
154
+ </snice-select>
155
+ </div>
156
+ </div>
157
+
158
+ <div class="section">
159
+ <h3>Features</h3>
160
+ <div class="row">
161
+ <snice-select
162
+ id="searchable-select"
163
+ label="Searchable"
164
+ placeholder="Type to search..."
165
+ searchable>
166
+ <snice-option value="us" icon="https://flagcdn.com/w20/us.png">United States</snice-option>
167
+ <snice-option value="uk" icon="https://flagcdn.com/w20/gb.png">United Kingdom</snice-option>
168
+ <snice-option value="ca" icon="https://flagcdn.com/w20/ca.png">Canada</snice-option>
169
+ <snice-option value="au" icon="https://flagcdn.com/w20/au.png">Australia</snice-option>
170
+ <snice-option value="de" icon="https://flagcdn.com/w20/de.png">Germany</snice-option>
171
+ <snice-option value="fr" icon="https://flagcdn.com/w20/fr.png">France</snice-option>
172
+ <snice-option value="es" icon="https://flagcdn.com/w20/es.png">Spain</snice-option>
173
+ <snice-option value="it" icon="https://flagcdn.com/w20/it.png">Italy</snice-option>
174
+ <snice-option value="jp" icon="https://flagcdn.com/w20/jp.png">Japan</snice-option>
175
+ <snice-option value="cn" icon="https://flagcdn.com/w20/cn.png">China</snice-option>
176
+ <snice-option value="in" icon="https://flagcdn.com/w20/in.png">India</snice-option>
177
+ <snice-option value="br" icon="https://flagcdn.com/w20/br.png">Brazil</snice-option>
178
+ <snice-option value="mx" icon="https://flagcdn.com/w20/mx.png">Mexico</snice-option>
179
+ </snice-select>
180
+
181
+ <snice-select
182
+ id="clearable-select"
183
+ label="Clearable"
184
+ placeholder="Can be cleared"
185
+ clearable
186
+ value="option2">
187
+ <snice-option value="option1">Option 1</snice-option>
188
+ <snice-option value="option2">Option 2</snice-option>
189
+ <snice-option value="option3">Option 3</snice-option>
190
+ </snice-select>
191
+
192
+ <snice-select
193
+ id="required-select"
194
+ label="Required field"
195
+ placeholder="This is required"
196
+ required>
197
+ <snice-option value="">Select one...</snice-option>
198
+ <snice-option value="yes">Yes</snice-option>
199
+ <snice-option value="no">No</snice-option>
200
+ <snice-option value="maybe">Maybe</snice-option>
201
+ </snice-select>
202
+ </div>
203
+ </div>
204
+
205
+ <div class="section">
206
+ <h3>Multiple Selection</h3>
207
+ <snice-select
208
+ id="multiple-select"
209
+ label="Select multiple options"
210
+ placeholder="Choose one or more..."
211
+ multiple
212
+ clearable>
213
+ <snice-option value="electronics">Electronics</snice-option>
214
+ <snice-option value="clothing">Clothing</snice-option>
215
+ <snice-option value="books">Books</snice-option>
216
+ <snice-option value="home">Home & Garden</snice-option>
217
+ <snice-option value="sports">Sports & Outdoors</snice-option>
218
+ <snice-option value="toys">Toys & Games</snice-option>
219
+ </snice-select>
220
+
221
+ <snice-select
222
+ id="multiple-searchable"
223
+ label="Multiple with search"
224
+ placeholder="Search and select..."
225
+ multiple
226
+ searchable
227
+ clearable
228
+ style="width: 350px;">
229
+ <snice-option value="html">HTML</snice-option>
230
+ <snice-option value="css">CSS</snice-option>
231
+ <snice-option value="js">JavaScript</snice-option>
232
+ <snice-option value="react">React</snice-option>
233
+ <snice-option value="vue">Vue.js</snice-option>
234
+ <snice-option value="angular">Angular</snice-option>
235
+ <snice-option value="node">Node.js</snice-option>
236
+ <snice-option value="python">Python</snice-option>
237
+ <snice-option value="django">Django</snice-option>
238
+ <snice-option value="sql">SQL</snice-option>
239
+ <snice-option value="mongodb">MongoDB</snice-option>
240
+ <snice-option value="aws">AWS</snice-option>
241
+ </snice-select>
242
+ </div>
243
+
244
+ <div class="section">
245
+ <h3>Country Selector Example</h3>
246
+ <div class="card">
247
+ <snice-select
248
+ id="country-select"
249
+ label="Select your country"
250
+ placeholder="Choose a country..."
251
+ searchable
252
+ clearable>
253
+ <snice-option value="us" icon="https://flagcdn.com/w20/us.png">United States</snice-option>
254
+ <snice-option value="uk" icon="https://flagcdn.com/w20/gb.png">United Kingdom</snice-option>
255
+ <snice-option value="ca" icon="https://flagcdn.com/w20/ca.png">Canada</snice-option>
256
+ <snice-option value="au" icon="https://flagcdn.com/w20/au.png">Australia</snice-option>
257
+ <snice-option value="de" icon="https://flagcdn.com/w20/de.png">Germany</snice-option>
258
+ <snice-option value="fr" icon="https://flagcdn.com/w20/fr.png">France</snice-option>
259
+ <snice-option value="es" icon="https://flagcdn.com/w20/es.png">Spain</snice-option>
260
+ <snice-option value="it" icon="https://flagcdn.com/w20/it.png">Italy</snice-option>
261
+ <snice-option value="jp" icon="https://flagcdn.com/w20/jp.png">Japan</snice-option>
262
+ <snice-option value="cn" icon="https://flagcdn.com/w20/cn.png">China</snice-option>
263
+ <snice-option value="in" icon="https://flagcdn.com/w20/in.png">India</snice-option>
264
+ <snice-option value="br" icon="https://flagcdn.com/w20/br.png">Brazil</snice-option>
265
+ <snice-option value="mx" icon="https://flagcdn.com/w20/mx.png">Mexico</snice-option>
266
+ <snice-option value="kr" icon="https://flagcdn.com/w20/kr.png">South Korea</snice-option>
267
+ <snice-option value="nl" icon="https://flagcdn.com/w20/nl.png">Netherlands</snice-option>
268
+ </snice-select>
269
+ <div id="country-output" class="output">No country selected</div>
270
+ </div>
271
+ </div>
272
+
273
+ <div class="section">
274
+ <h3>Product Filter Example</h3>
275
+ <div class="card">
276
+ <div class="form-row">
277
+ <snice-select
278
+ id="category-select"
279
+ label="Category"
280
+ placeholder="All categories"
281
+ clearable>
282
+ <snice-option value="">All Categories</snice-option>
283
+ <snice-option value="electronics">Electronics</snice-option>
284
+ <snice-option value="clothing">Clothing</snice-option>
285
+ <snice-option value="books">Books</snice-option>
286
+ <snice-option value="home">Home & Garden</snice-option>
287
+ <snice-option value="sports">Sports & Outdoors</snice-option>
288
+ <snice-option value="toys">Toys & Games</snice-option>
289
+ </snice-select>
290
+ </div>
291
+
292
+ <div class="form-row">
293
+ <snice-select
294
+ id="brand-select"
295
+ label="Brands"
296
+ placeholder="Select brands..."
297
+ multiple
298
+ searchable
299
+ clearable>
300
+ <snice-option value="apple">Apple</snice-option>
301
+ <snice-option value="samsung">Samsung</snice-option>
302
+ <snice-option value="sony">Sony</snice-option>
303
+ <snice-option value="lg">LG</snice-option>
304
+ <snice-option value="nike">Nike</snice-option>
305
+ <snice-option value="adidas">Adidas</snice-option>
306
+ <snice-option value="puma">Puma</snice-option>
307
+ </snice-select>
308
+ </div>
309
+
310
+ <div class="form-row">
311
+ <snice-select
312
+ id="sort-select"
313
+ label="Sort by"
314
+ value="relevance">
315
+ <snice-option value="relevance">Relevance</snice-option>
316
+ <snice-option value="price-low">Price: Low to High</snice-option>
317
+ <snice-option value="price-high">Price: High to Low</snice-option>
318
+ <snice-option value="rating">Customer Rating</snice-option>
319
+ <snice-option value="newest">Newest First</snice-option>
320
+ </snice-select>
321
+ </div>
322
+
323
+ <button onclick="applyFilters()">Apply Filters</button>
324
+ <div id="filter-output" class="output">No filters applied</div>
325
+ </div>
326
+ </div>
327
+
328
+ <div class="section">
329
+ <h3>States</h3>
330
+ <div class="select-group">
331
+ <snice-select
332
+ label="Invalid state"
333
+ placeholder="This has an error"
334
+ invalid
335
+ value="option1">
336
+ <snice-option value="option1">Option 1</snice-option>
337
+ <snice-option value="option2">Option 2</snice-option>
338
+ <snice-option value="option3">Option 3</snice-option>
339
+ </snice-select>
340
+
341
+ <snice-select
342
+ label="Read-only"
343
+ value="option2"
344
+ readonly>
345
+ <snice-option value="option1">Option 1</snice-option>
346
+ <snice-option value="option2">Option 2</snice-option>
347
+ <snice-option value="option3">Option 3</snice-option>
348
+ </snice-select>
349
+
350
+ <snice-select
351
+ label="Disabled with value"
352
+ value="option3"
353
+ disabled>
354
+ <snice-option value="option1">Option 1</snice-option>
355
+ <snice-option value="option2">Option 2</snice-option>
356
+ <snice-option value="option3">Option 3</snice-option>
357
+ </snice-select>
358
+ </div>
359
+ </div>
360
+
361
+ <div class="section">
362
+ <h3>Interactive Example</h3>
363
+ <snice-select
364
+ id="interactive-select"
365
+ label="Programming Languages"
366
+ placeholder="Select a language..."
367
+ searchable
368
+ clearable>
369
+ <snice-option value="javascript">JavaScript</snice-option>
370
+ <snice-option value="python">Python</snice-option>
371
+ <snice-option value="java">Java</snice-option>
372
+ <snice-option value="csharp">C#</snice-option>
373
+ <snice-option value="cpp">C++</snice-option>
374
+ <snice-option value="ruby">Ruby</snice-option>
375
+ <snice-option value="go">Go</snice-option>
376
+ <snice-option value="rust">Rust</snice-option>
377
+ <snice-option value="typescript">TypeScript</snice-option>
378
+ <snice-option value="swift">Swift</snice-option>
379
+ <snice-option value="kotlin">Kotlin</snice-option>
380
+ <snice-option value="php">PHP</snice-option>
381
+ </snice-select>
382
+
383
+ <div class="row" style="margin-top: 16px;">
384
+ <button onclick="document.getElementById('interactive-select').openDropdown()">Open</button>
385
+ <button onclick="document.getElementById('interactive-select').closeDropdown()">Close</button>
386
+ <button onclick="document.getElementById('interactive-select').toggleDropdown()">Toggle</button>
387
+ <button onclick="document.getElementById('interactive-select').selectOption('python')">Select Python</button>
388
+ <button onclick="document.getElementById('interactive-select').clear()">Clear</button>
389
+ <button onclick="document.getElementById('interactive-select').focus()">Focus</button>
390
+ <button onclick="getValue('interactive-select')">Get Value</button>
391
+ </div>
392
+ <div id="interactive-output" class="output">Events will appear here...</div>
393
+ </div>
394
+
395
+ <div class="section">
396
+ <h3>Form Example</h3>
397
+ <form id="demo-form">
398
+ <div class="form-row">
399
+ <snice-select
400
+ name="department"
401
+ label="Department"
402
+ placeholder="Select department"
403
+ required>
404
+ <snice-option value="">Choose...</snice-option>
405
+ <snice-option value="engineering">Engineering</snice-option>
406
+ <snice-option value="marketing">Marketing</snice-option>
407
+ <snice-option value="sales">Sales</snice-option>
408
+ <snice-option value="hr">Human Resources</snice-option>
409
+ <snice-option value="finance">Finance</snice-option>
410
+ <snice-option value="operations">Operations</snice-option>
411
+ </snice-select>
412
+ </div>
413
+
414
+ <div class="form-row">
415
+ <snice-select
416
+ name="skills"
417
+ label="Skills"
418
+ placeholder="Select your skills..."
419
+ multiple
420
+ searchable>
421
+ <snice-option value="html">HTML</snice-option>
422
+ <snice-option value="css">CSS</snice-option>
423
+ <snice-option value="js">JavaScript</snice-option>
424
+ <snice-option value="react">React</snice-option>
425
+ <snice-option value="vue">Vue.js</snice-option>
426
+ <snice-option value="angular">Angular</snice-option>
427
+ <snice-option value="node">Node.js</snice-option>
428
+ <snice-option value="python">Python</snice-option>
429
+ <snice-option value="django">Django</snice-option>
430
+ <snice-option value="sql">SQL</snice-option>
431
+ </snice-select>
432
+ </div>
433
+
434
+ <div class="form-row">
435
+ <snice-select
436
+ name="experience"
437
+ label="Years of Experience"
438
+ required>
439
+ <snice-option value="">Select...</snice-option>
440
+ <snice-option value="0-1">0-1 years</snice-option>
441
+ <snice-option value="1-3">1-3 years</snice-option>
442
+ <snice-option value="3-5">3-5 years</snice-option>
443
+ <snice-option value="5-10">5-10 years</snice-option>
444
+ <snice-option value="10+">10+ years</snice-option>
445
+ </snice-select>
446
+ </div>
447
+
448
+ <button type="submit">Submit Form</button>
449
+ </form>
450
+ <div id="form-output" class="output">Form data will appear here...</div>
451
+ </div>
452
+
453
+ <script type="module">
454
+ import './snice-select.ts';
455
+ import './snice-option.ts';
456
+
457
+ // Event listeners
458
+ document.getElementById('country-select').addEventListener('@snice/select-change', (e) => {
459
+ const selected = e.detail.option;
460
+ document.getElementById('country-output').textContent =
461
+ selected ? `Selected: ${selected.label} (${selected.value})` : 'No country selected';
462
+ });
463
+
464
+ // Product filter
465
+ window.applyFilters = function() {
466
+ const filters = {
467
+ category: document.getElementById('category-select').value,
468
+ brands: document.getElementById('brand-select').value.split(',').filter(v => v),
469
+ sort: document.getElementById('sort-select').value
470
+ };
471
+ document.getElementById('filter-output').textContent =
472
+ `Applied filters: ${JSON.stringify(filters, null, 2)}`;
473
+ };
474
+
475
+ // Interactive events
476
+ const interactiveSelect = document.getElementById('interactive-select');
477
+ const interactiveOutput = document.getElementById('interactive-output');
478
+
479
+ interactiveSelect.addEventListener('@snice/select-change', (e) => {
480
+ interactiveOutput.textContent = `Changed: value=${e.detail.value}, label=${e.detail.option?.label || 'cleared'}`;
481
+ });
482
+
483
+ interactiveSelect.addEventListener('@snice/select-open', () => {
484
+ console.log('Dropdown opened');
485
+ });
486
+
487
+ interactiveSelect.addEventListener('@snice/select-close', () => {
488
+ console.log('Dropdown closed');
489
+ });
490
+
491
+ window.getValue = function(id) {
492
+ const select = document.getElementById(id);
493
+ interactiveOutput.textContent = `Current value: ${select.value || 'none'}`;
494
+ };
495
+
496
+ // Form submission
497
+ document.getElementById('demo-form').addEventListener('submit', (e) => {
498
+ e.preventDefault();
499
+ const data = {};
500
+
501
+ // Get select values manually since custom elements might not work with FormData
502
+ data.department = document.querySelector('[name="department"]').value;
503
+ data.skills = document.querySelector('[name="skills"]').value.split(',').filter(v => v);
504
+ data.experience = document.querySelector('[name="experience"]').value;
505
+
506
+ document.getElementById('form-output').textContent =
507
+ `Form data: ${JSON.stringify(data, null, 2)}`;
508
+ });
509
+ </script>
510
+ </body>
511
+ </html>