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/drawer/demo.html ADDED
@@ -0,0 +1,328 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Snice Drawer Demo</title>
7
+ <script type="module" src="./snice-drawer.ts"></script>
8
+ <style>
9
+ body {
10
+ font-family: system-ui, -apple-system, sans-serif;
11
+ padding: 40px;
12
+ margin: 0;
13
+ background: #f3f4f6;
14
+ }
15
+
16
+ main {
17
+ max-width: 1200px;
18
+ margin: 0 auto;
19
+ background: white;
20
+ padding: 40px;
21
+ border-radius: 12px;
22
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
23
+ transition: margin 0.3s cubic-bezier(0.4, 0, 0.2, 1);
24
+ }
25
+
26
+ h1 {
27
+ margin-top: 0;
28
+ color: #111827;
29
+ }
30
+
31
+ .demo-section {
32
+ margin-bottom: 48px;
33
+ }
34
+
35
+ .demo-section h2 {
36
+ color: #374151;
37
+ margin-bottom: 16px;
38
+ }
39
+
40
+ .button-group {
41
+ display: flex;
42
+ gap: 12px;
43
+ flex-wrap: wrap;
44
+ margin-bottom: 24px;
45
+ }
46
+
47
+ button {
48
+ padding: 10px 20px;
49
+ border: none;
50
+ border-radius: 8px;
51
+ background: #3b82f6;
52
+ color: white;
53
+ font-size: 14px;
54
+ font-weight: 500;
55
+ cursor: pointer;
56
+ transition: all 0.2s;
57
+ }
58
+
59
+ button:hover {
60
+ background: #2563eb;
61
+ transform: translateY(-1px);
62
+ box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
63
+ }
64
+
65
+ button:active {
66
+ transform: translateY(0);
67
+ }
68
+
69
+ button.secondary {
70
+ background: #6b7280;
71
+ }
72
+
73
+ button.secondary:hover {
74
+ background: #4b5563;
75
+ }
76
+
77
+ .drawer-content {
78
+ padding: 20px;
79
+ }
80
+
81
+ .form-group {
82
+ margin-bottom: 20px;
83
+ }
84
+
85
+ label {
86
+ display: block;
87
+ margin-bottom: 8px;
88
+ font-weight: 500;
89
+ color: #374151;
90
+ }
91
+
92
+ input, textarea, select {
93
+ width: 100%;
94
+ padding: 10px;
95
+ border: 1px solid #d1d5db;
96
+ border-radius: 6px;
97
+ font-size: 14px;
98
+ transition: border-color 0.2s;
99
+ }
100
+
101
+ input:focus, textarea:focus, select:focus {
102
+ outline: none;
103
+ border-color: #3b82f6;
104
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
105
+ }
106
+
107
+ .footer-buttons {
108
+ display: flex;
109
+ gap: 12px;
110
+ justify-content: flex-end;
111
+ }
112
+ </style>
113
+ </head>
114
+ <body>
115
+ <main>
116
+ <h1>Snice Drawer Component Demo</h1>
117
+
118
+ <!-- Position Demo -->
119
+ <div class="demo-section">
120
+ <h2>Drawer Positions</h2>
121
+ <div class="button-group">
122
+ <button onclick="document.getElementById('drawer-left').show()">Open Left Drawer</button>
123
+ <button onclick="document.getElementById('drawer-right').show()">Open Right Drawer</button>
124
+ <button onclick="document.getElementById('drawer-top').show()">Open Top Drawer</button>
125
+ <button onclick="document.getElementById('drawer-bottom').show()">Open Bottom Drawer</button>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Size Demo -->
130
+ <div class="demo-section">
131
+ <h2>Drawer Sizes</h2>
132
+ <div class="button-group">
133
+ <button onclick="document.getElementById('drawer-small').show()">Small (240px)</button>
134
+ <button onclick="document.getElementById('drawer-medium').show()">Medium (320px)</button>
135
+ <button onclick="document.getElementById('drawer-large').show()">Large (480px)</button>
136
+ <button onclick="document.getElementById('drawer-xl').show()">XL (640px)</button>
137
+ <button onclick="document.getElementById('drawer-xxl').show()">XXL (800px)</button>
138
+ <button onclick="document.getElementById('drawer-xxxl').show()">XXXL (960px)</button>
139
+ <button onclick="document.getElementById('drawer-full').show()">Full (100%)</button>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Feature Demo -->
144
+ <div class="demo-section">
145
+ <h2>Drawer Features</h2>
146
+ <div class="button-group">
147
+ <button onclick="document.getElementById('drawer-no-backdrop').show()">No Backdrop</button>
148
+ <button onclick="document.getElementById('drawer-no-dismiss').show()">No Dismiss</button>
149
+ <button onclick="document.getElementById('drawer-persistent').show()">Persistent</button>
150
+ <button onclick="document.getElementById('drawer-push').show()">Push Content</button>
151
+ </div>
152
+ </div>
153
+
154
+ <!-- Form Example -->
155
+ <div class="demo-section">
156
+ <h2>Form Example</h2>
157
+ <button onclick="document.getElementById('drawer-form').show()">Open Form Drawer</button>
158
+ </div>
159
+ </main>
160
+
161
+ <!-- Left Drawer -->
162
+ <snice-drawer id="drawer-left" position="left">
163
+ <span slot="title">Left Drawer</span>
164
+ <div class="drawer-content">
165
+ <p>This is a left-positioned drawer. It slides in from the left side of the screen.</p>
166
+ <p>You can close it by:</p>
167
+ <ul>
168
+ <li>Clicking the X button</li>
169
+ <li>Clicking the backdrop</li>
170
+ <li>Pressing Escape key</li>
171
+ </ul>
172
+ </div>
173
+ </snice-drawer>
174
+
175
+ <!-- Right Drawer -->
176
+ <snice-drawer id="drawer-right" position="right">
177
+ <span slot="title">Right Drawer</span>
178
+ <div class="drawer-content">
179
+ <p>This drawer slides in from the right side.</p>
180
+ </div>
181
+ </snice-drawer>
182
+
183
+ <!-- Top Drawer -->
184
+ <snice-drawer id="drawer-top" position="top">
185
+ <span slot="title">Top Drawer</span>
186
+ <div class="drawer-content">
187
+ <p>This drawer slides down from the top.</p>
188
+ </div>
189
+ </snice-drawer>
190
+
191
+ <!-- Bottom Drawer -->
192
+ <snice-drawer id="drawer-bottom" position="bottom">
193
+ <span slot="title">Bottom Drawer</span>
194
+ <div class="drawer-content">
195
+ <p>This drawer slides up from the bottom.</p>
196
+ </div>
197
+ </snice-drawer>
198
+
199
+ <!-- Size Variants -->
200
+ <snice-drawer id="drawer-small" size="small">
201
+ <span slot="title">Small Drawer</span>
202
+ <div class="drawer-content">
203
+ <p>This is a small-sized drawer (240px wide).</p>
204
+ </div>
205
+ </snice-drawer>
206
+
207
+ <snice-drawer id="drawer-medium" size="medium">
208
+ <span slot="title">Medium Drawer</span>
209
+ <div class="drawer-content">
210
+ <p>This is a medium-sized drawer (320px wide).</p>
211
+ </div>
212
+ </snice-drawer>
213
+
214
+ <snice-drawer id="drawer-large" size="large">
215
+ <span slot="title">Large Drawer</span>
216
+ <div class="drawer-content">
217
+ <p>This is a large-sized drawer (480px wide).</p>
218
+ </div>
219
+ </snice-drawer>
220
+
221
+ <snice-drawer id="drawer-xl" size="xl">
222
+ <span slot="title">XL Drawer</span>
223
+ <div class="drawer-content">
224
+ <p>This is an extra-large drawer (640px wide).</p>
225
+ </div>
226
+ </snice-drawer>
227
+
228
+ <snice-drawer id="drawer-xxl" size="xxl">
229
+ <span slot="title">XXL Drawer</span>
230
+ <div class="drawer-content">
231
+ <p>This is a double extra-large drawer (800px wide).</p>
232
+ </div>
233
+ </snice-drawer>
234
+
235
+ <snice-drawer id="drawer-xxxl" size="xxxl">
236
+ <span slot="title">XXXL Drawer</span>
237
+ <div class="drawer-content">
238
+ <p>This is a triple extra-large drawer (960px wide).</p>
239
+ </div>
240
+ </snice-drawer>
241
+
242
+ <snice-drawer id="drawer-full" size="full">
243
+ <span slot="title">Full Width Drawer</span>
244
+ <div class="drawer-content">
245
+ <p>This drawer takes the full width/height of the viewport.</p>
246
+ </div>
247
+ </snice-drawer>
248
+
249
+ <!-- Feature Variants -->
250
+ <snice-drawer id="drawer-no-backdrop" no-backdrop>
251
+ <span slot="title">No Backdrop</span>
252
+ <div class="drawer-content">
253
+ <p>This drawer has no backdrop overlay.</p>
254
+ </div>
255
+ </snice-drawer>
256
+
257
+ <snice-drawer id="drawer-no-dismiss" no-backdrop-dismiss no-escape-dismiss>
258
+ <span slot="title">No Auto Dismiss</span>
259
+ <div class="drawer-content">
260
+ <p>This drawer cannot be dismissed by clicking outside or pressing Escape.</p>
261
+ <p>You must click the X button to close it.</p>
262
+ </div>
263
+ </snice-drawer>
264
+
265
+ <snice-drawer id="drawer-persistent" persistent>
266
+ <span slot="title">Persistent Drawer</span>
267
+ <div class="drawer-content">
268
+ <p>This drawer is persistent - it has no close button and cannot be dismissed.</p>
269
+ <button onclick="document.getElementById('drawer-persistent').hide()">Close Programmatically</button>
270
+ </div>
271
+ </snice-drawer>
272
+
273
+ <snice-drawer id="drawer-push" push-content>
274
+ <span slot="title">Push Content</span>
275
+ <div class="drawer-content">
276
+ <p>This drawer pushes the main content instead of overlaying it.</p>
277
+ <p>Notice how the main content shifts when this drawer opens.</p>
278
+ </div>
279
+ </snice-drawer>
280
+
281
+ <!-- Form Example -->
282
+ <snice-drawer id="drawer-form" size="large">
283
+ <span slot="title">User Settings</span>
284
+
285
+ <form class="drawer-content">
286
+ <div class="form-group">
287
+ <label for="name">Name</label>
288
+ <input type="text" id="name" placeholder="Enter your name">
289
+ </div>
290
+
291
+ <div class="form-group">
292
+ <label for="email">Email</label>
293
+ <input type="email" id="email" placeholder="Enter your email">
294
+ </div>
295
+
296
+ <div class="form-group">
297
+ <label for="role">Role</label>
298
+ <select id="role">
299
+ <option>Administrator</option>
300
+ <option>Editor</option>
301
+ <option>Viewer</option>
302
+ </select>
303
+ </div>
304
+
305
+ <div class="form-group">
306
+ <label for="bio">Bio</label>
307
+ <textarea id="bio" rows="4" placeholder="Tell us about yourself"></textarea>
308
+ </div>
309
+ </form>
310
+
311
+ <div slot="footer" class="footer-buttons">
312
+ <button class="secondary" onclick="document.getElementById('drawer-form').hide()">Cancel</button>
313
+ <button onclick="alert('Form submitted!'); document.getElementById('drawer-form').hide()">Save Changes</button>
314
+ </div>
315
+ </snice-drawer>
316
+
317
+ <script>
318
+ // Listen for drawer events
319
+ document.addEventListener('drawer-open', (e) => {
320
+ console.log('Drawer opened:', e.detail);
321
+ });
322
+
323
+ document.addEventListener('drawer-close', (e) => {
324
+ console.log('Drawer closed:', e.detail);
325
+ });
326
+ </script>
327
+ </body>
328
+ </html>
package/components/input/demo.html ADDED
@@ -0,0 +1,303 @@
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>Input 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
+ .input-group {
35
+ display: flex;
36
+ flex-direction: column;
37
+ gap: 20px;
38
+ margin-bottom: 20px;
39
+ }
40
+
41
+ .row {
42
+ display: flex;
43
+ gap: 20px;
44
+ align-items: flex-start;
45
+ }
46
+
47
+ .row > * {
48
+ flex: 1;
49
+ }
50
+
51
+ .output {
52
+ padding: 10px;
53
+ background: var(--snice-color-background-secondary);
54
+ border-radius: var(--snice-border-radius-md);
55
+ font-family: monospace;
56
+ font-size: var(--snice-font-size-sm);
57
+ margin-top: 10px;
58
+ }
59
+ </style>
60
+ </head>
61
+ <body>
62
+ <h2>Input Component Demo</h2>
63
+
64
+ <div class="section">
65
+ <h3>Basic Inputs</h3>
66
+ <div class="input-group">
67
+ <snice-input placeholder="Enter text..." label="Default Input"></snice-input>
68
+ <snice-input value="Pre-filled value" label="With Value"></snice-input>
69
+ <snice-input placeholder="Required field" label="Required Input" required></snice-input>
70
+ <snice-input placeholder="Disabled input" label="Disabled" disabled value="Can't edit this"></snice-input>
71
+ <snice-input placeholder="Read-only input" label="Read Only" readonly value="Read only value"></snice-input>
72
+ </div>
73
+ </div>
74
+
75
+ <div class="section">
76
+ <h3>Input Types</h3>
77
+ <div class="input-group">
78
+ <snice-input type="email" placeholder="email@example.com" label="Email" helper-text="Enter a valid email address"></snice-input>
79
+ <snice-input type="password" placeholder="Enter password" label="Password" password helper-text="Click the eye icon to toggle visibility"></snice-input>
80
+ <snice-input type="number" placeholder="0" label="Number" min="0" max="100" step="5" helper-text="Min: 0, Max: 100, Step: 5"></snice-input>
81
+ <snice-input type="tel" placeholder="+1 (555) 000-0000" label="Phone"></snice-input>
82
+ <snice-input type="url" placeholder="https://example.com" label="URL"></snice-input>
83
+ <snice-input type="search" placeholder="Search..." label="Search" clearable></snice-input>
84
+ <snice-input type="date" label="Date"></snice-input>
85
+ <snice-input type="time" label="Time"></snice-input>
86
+ </div>
87
+ </div>
88
+
89
+ <div class="section">
90
+ <h3>Sizes</h3>
91
+ <div class="input-group">
92
+ <snice-input size="small" placeholder="Small input" label="Small"></snice-input>
93
+ <snice-input size="medium" placeholder="Medium input" label="Medium (Default)"></snice-input>
94
+ <snice-input size="large" placeholder="Large input" label="Large"></snice-input>
95
+ </div>
96
+ </div>
97
+
98
+ <div class="section">
99
+ <h3>Variants</h3>
100
+ <div class="input-group">
101
+ <snice-input variant="outlined" placeholder="Outlined variant" label="Outlined (Default)"></snice-input>
102
+ <snice-input variant="filled" placeholder="Filled variant" label="Filled"></snice-input>
103
+ <snice-input variant="underlined" placeholder="Underlined variant" label="Underlined"></snice-input>
104
+ </div>
105
+ </div>
106
+
107
+ <div class="section">
108
+ <h3>With Icons</h3>
109
+ <div class="input-group">
110
+ <snice-input
111
+ placeholder="Search..."
112
+ label="With Prefix Icon"
113
+ prefix-icon="🔍">
114
+ </snice-input>
115
+ <snice-input
116
+ placeholder="Enter amount"
117
+ label="With Suffix Icon"
118
+ suffix-icon="💵">
119
+ </snice-input>
120
+ <snice-input
121
+ placeholder="Email address"
122
+ label="With Both Icons"
123
+ prefix-icon="📧"
124
+ suffix-icon="✓">
125
+ </snice-input>
126
+ </div>
127
+ </div>
128
+
129
+ <div class="section">
130
+ <h3>Clearable Inputs</h3>
131
+ <div class="input-group">
132
+ <snice-input
133
+ clearable
134
+ value="Clear me!"
135
+ label="Clearable Input"
136
+ helper-text="Hover to see clear button">
137
+ </snice-input>
138
+ <snice-input
139
+ clearable
140
+ value="With suffix icon"
141
+ label="Clearable with Icon"
142
+ suffix-icon="📝">
143
+ </snice-input>
144
+ </div>
145
+ </div>
146
+
147
+ <div class="section">
148
+ <h3>Validation States</h3>
149
+ <div class="input-group">
150
+ <snice-input
151
+ placeholder="Enter email"
152
+ label="Valid State"
153
+ helper-text="This looks good!">
154
+ </snice-input>
155
+ <snice-input
156
+ invalid
157
+ value="invalid@"
158
+ label="Invalid State"
159
+ error-text="Please enter a valid email address">
160
+ </snice-input>
161
+ <snice-input
162
+ type="email"
163
+ required
164
+ placeholder="email@example.com"
165
+ label="With Pattern Validation"
166
+ pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
167
+ helper-text="Must be a valid email format">
168
+ </snice-input>
169
+ </div>
170
+ </div>
171
+
172
+ <div class="section">
173
+ <h3>Text Length Constraints</h3>
174
+ <div class="input-group">
175
+ <snice-input
176
+ maxlength="10"
177
+ placeholder="Max 10 chars"
178
+ label="Max Length"
179
+ helper-text="Maximum 10 characters allowed">
180
+ </snice-input>
181
+ <snice-input
182
+ minlength="5"
183
+ placeholder="Min 5 chars"
184
+ label="Min Length"
185
+ helper-text="Minimum 5 characters required">
186
+ </snice-input>
187
+ </div>
188
+ </div>
189
+
190
+ <div class="section">
191
+ <h3>Interactive Example</h3>
192
+ <div class="input-group">
193
+ <snice-input
194
+ id="interactive-input"
195
+ clearable
196
+ placeholder="Type something..."
197
+ label="Interactive Input"
198
+ helper-text="Events will be logged below">
199
+ </snice-input>
200
+ <div id="output" class="output">
201
+ <div>Waiting for input...</div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
+ <div class="section">
207
+ <h3>Form Example</h3>
208
+ <form id="demo-form">
209
+ <div class="input-group">
210
+ <div class="row">
211
+ <snice-input
212
+ name="firstName"
213
+ required
214
+ placeholder="John"
215
+ label="First Name">
216
+ </snice-input>
217
+ <snice-input
218
+ name="lastName"
219
+ required
220
+ placeholder="Doe"
221
+ label="Last Name">
222
+ </snice-input>
223
+ </div>
224
+ <snice-input
225
+ type="email"
226
+ name="email"
227
+ required
228
+ placeholder="john.doe@example.com"
229
+ label="Email Address">
230
+ </snice-input>
231
+ <snice-input
232
+ type="password"
233
+ name="password"
234
+ required
235
+ password
236
+ minlength="8"
237
+ placeholder="Min 8 characters"
238
+ label="Password">
239
+ </snice-input>
240
+ <snice-input
241
+ type="tel"
242
+ name="phone"
243
+ placeholder="+1 (555) 000-0000"
244
+ label="Phone (Optional)">
245
+ </snice-input>
246
+ <button type="submit" style="
247
+ padding: 10px 20px;
248
+ background: var(--snice-color-primary);
249
+ color: white;
250
+ border: none;
251
+ border-radius: var(--snice-border-radius-md);
252
+ cursor: pointer;
253
+ font-size: var(--snice-font-size-md);
254
+ ">Submit Form</button>
255
+ </div>
256
+ </form>
257
+ </div>
258
+
259
+ <script type="module">
260
+ import './snice-input.ts';
261
+
262
+ // Interactive example
263
+ const input = document.getElementById('interactive-input');
264
+ const output = document.getElementById('output');
265
+
266
+ let eventLog = [];
267
+
268
+ function logEvent(type, detail) {
269
+ eventLog.unshift(`${type}: ${JSON.stringify(detail)}`);
270
+ eventLog = eventLog.slice(0, 5);
271
+ output.innerHTML = eventLog.map(log => `<div>${log}</div>`).join('');
272
+ }
273
+
274
+ input.addEventListener('@snice/input-input', (e) => {
275
+ logEvent('input', { value: e.detail.value });
276
+ });
277
+
278
+ input.addEventListener('@snice/input-change', (e) => {
279
+ logEvent('change', { value: e.detail.value });
280
+ });
281
+
282
+ input.addEventListener('@snice/input-focus', () => {
283
+ logEvent('focus', {});
284
+ });
285
+
286
+ input.addEventListener('@snice/input-blur', () => {
287
+ logEvent('blur', {});
288
+ });
289
+
290
+ input.addEventListener('@snice/input-clear', () => {
291
+ logEvent('clear', {});
292
+ });
293
+
294
+ // Form example
295
+ document.getElementById('demo-form').addEventListener('submit', (e) => {
296
+ e.preventDefault();
297
+ const formData = new FormData(e.target);
298
+ const data = Object.fromEntries(formData);
299
+ alert('Form submitted with: ' + JSON.stringify(data, null, 2));
300
+ });
301
+ </script>
302
+ </body>
303
+ </html>