snice 2.1.5 → 2.2.1

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 (367) hide show
  1. package/dist/components/accordion/snice-accordion-item.d.ts +25 -0
  2. package/dist/components/accordion/snice-accordion-item.js +255 -0
  3. package/dist/components/accordion/snice-accordion-item.js.map +1 -0
  4. package/dist/components/accordion/snice-accordion.d.ts +28 -0
  5. package/dist/components/accordion/snice-accordion.js +206 -0
  6. package/dist/components/accordion/snice-accordion.js.map +1 -0
  7. package/dist/components/accordion/snice-accordion.types.d.ts +29 -0
  8. package/dist/components/alert/snice-alert.d.ts +26 -0
  9. package/dist/components/alert/snice-alert.js +180 -0
  10. package/dist/components/alert/snice-alert.js.map +1 -0
  11. package/{components/alert/snice-alert.types.ts → dist/components/alert/snice-alert.types.d.ts} +8 -9
  12. package/dist/components/avatar/snice-avatar.d.ts +24 -0
  13. package/dist/components/avatar/snice-avatar.js +180 -0
  14. package/dist/components/avatar/snice-avatar.js.map +1 -0
  15. package/dist/components/avatar/snice-avatar.types.d.ts +12 -0
  16. package/dist/components/badge/snice-badge.d.ts +25 -0
  17. package/dist/components/badge/snice-badge.js +169 -0
  18. package/dist/components/badge/snice-badge.js.map +1 -0
  19. package/{components/badge/snice-badge.types.ts → dist/components/badge/snice-badge.types.d.ts} +11 -12
  20. package/dist/components/breadcrumbs/snice-breadcrumbs.d.ts +27 -0
  21. package/dist/components/breadcrumbs/snice-breadcrumbs.js +214 -0
  22. package/dist/components/breadcrumbs/snice-breadcrumbs.js.map +1 -0
  23. package/dist/components/breadcrumbs/snice-breadcrumbs.types.d.ts +23 -0
  24. package/dist/components/breadcrumbs/snice-crumb.d.ts +9 -0
  25. package/dist/components/breadcrumbs/snice-crumb.js +63 -0
  26. package/dist/components/breadcrumbs/snice-crumb.js.map +1 -0
  27. package/dist/components/button/snice-button.d.ts +32 -0
  28. package/dist/components/button/snice-button.js +232 -0
  29. package/dist/components/button/snice-button.js.map +1 -0
  30. package/dist/components/button/snice-button.types.d.ts +23 -0
  31. package/dist/components/card/snice-card.d.ts +19 -0
  32. package/dist/components/card/snice-card.js +136 -0
  33. package/dist/components/card/snice-card.js.map +1 -0
  34. package/{components/card/snice-card.types.ts → dist/components/card/snice-card.types.d.ts} +6 -7
  35. package/dist/components/checkbox/snice-checkbox.d.ts +34 -0
  36. package/dist/components/checkbox/snice-checkbox.js +286 -0
  37. package/dist/components/checkbox/snice-checkbox.js.map +1 -0
  38. package/dist/components/checkbox/snice-checkbox.types.d.ts +20 -0
  39. package/dist/components/chip/snice-chip.d.ts +28 -0
  40. package/dist/components/chip/snice-chip.js +199 -0
  41. package/dist/components/chip/snice-chip.js.map +1 -0
  42. package/dist/components/chip/snice-chip.types.d.ts +14 -0
  43. package/dist/components/date-picker/snice-date-picker.d.ts +82 -0
  44. package/dist/components/date-picker/snice-date-picker.js +847 -0
  45. package/dist/components/date-picker/snice-date-picker.js.map +1 -0
  46. package/dist/components/date-picker/snice-date-picker.types.d.ts +71 -0
  47. package/dist/components/divider/snice-divider.d.ts +17 -0
  48. package/dist/components/divider/snice-divider.js +122 -0
  49. package/dist/components/divider/snice-divider.js.map +1 -0
  50. package/{components/divider/snice-divider.types.ts → dist/components/divider/snice-divider.types.d.ts} +9 -10
  51. package/dist/components/drawer/snice-drawer.d.ts +37 -0
  52. package/dist/components/drawer/snice-drawer.js +337 -0
  53. package/dist/components/drawer/snice-drawer.js.map +1 -0
  54. package/dist/components/drawer/snice-drawer.types.d.ts +16 -0
  55. package/dist/components/input/snice-input.d.ts +65 -0
  56. package/dist/components/input/snice-input.js +567 -0
  57. package/dist/components/input/snice-input.js.map +1 -0
  58. package/dist/components/input/snice-input.types.d.ts +53 -0
  59. package/dist/components/layout/snice-layout-blog.d.ts +4 -0
  60. package/dist/components/layout/snice-layout-blog.js +67 -0
  61. package/dist/components/layout/snice-layout-blog.js.map +1 -0
  62. package/dist/components/layout/snice-layout-card.d.ts +6 -0
  63. package/dist/components/layout/snice-layout-card.js +64 -0
  64. package/dist/components/layout/snice-layout-card.js.map +1 -0
  65. package/dist/components/layout/snice-layout-centered.d.ts +5 -0
  66. package/dist/components/layout/snice-layout-centered.js +48 -0
  67. package/dist/components/layout/snice-layout-centered.js.map +1 -0
  68. package/dist/components/layout/snice-layout-dashboard.d.ts +4 -0
  69. package/dist/components/layout/snice-layout-dashboard.js +64 -0
  70. package/dist/components/layout/snice-layout-dashboard.js.map +1 -0
  71. package/dist/components/layout/snice-layout-fullscreen.d.ts +5 -0
  72. package/dist/components/layout/snice-layout-fullscreen.js +60 -0
  73. package/dist/components/layout/snice-layout-fullscreen.js.map +1 -0
  74. package/dist/components/layout/snice-layout-landing.d.ts +4 -0
  75. package/dist/components/layout/snice-layout-landing.js +66 -0
  76. package/dist/components/layout/snice-layout-landing.js.map +1 -0
  77. package/dist/components/layout/snice-layout-minimal.d.ts +4 -0
  78. package/dist/components/layout/snice-layout-minimal.js +38 -0
  79. package/dist/components/layout/snice-layout-minimal.js.map +1 -0
  80. package/dist/components/layout/snice-layout-sidebar.d.ts +5 -0
  81. package/dist/components/layout/snice-layout-sidebar.js +74 -0
  82. package/dist/components/layout/snice-layout-sidebar.js.map +1 -0
  83. package/dist/components/layout/snice-layout-split.d.ts +6 -0
  84. package/dist/components/layout/snice-layout-split.js +58 -0
  85. package/dist/components/layout/snice-layout-split.js.map +1 -0
  86. package/dist/components/layout/snice-layout.d.ts +4 -0
  87. package/dist/components/layout/snice-layout.js +54 -0
  88. package/dist/components/layout/snice-layout.js.map +1 -0
  89. package/{components/layout/snice-layout.types.ts → dist/components/layout/snice-layout.types.d.ts} +1 -3
  90. package/dist/components/login/snice-login.d.ts +44 -0
  91. package/dist/components/login/snice-login.js +382 -0
  92. package/dist/components/login/snice-login.js.map +1 -0
  93. package/dist/components/login/snice-login.types.d.ts +26 -0
  94. package/dist/components/modal/snice-modal.d.ts +32 -0
  95. package/dist/components/modal/snice-modal.js +280 -0
  96. package/dist/components/modal/snice-modal.js.map +1 -0
  97. package/dist/components/modal/snice-modal.types.d.ts +18 -0
  98. package/dist/components/pagination/snice-pagination.d.ts +26 -0
  99. package/dist/components/pagination/snice-pagination.js +373 -0
  100. package/dist/components/pagination/snice-pagination.js.map +1 -0
  101. package/dist/components/pagination/snice-pagination.types.d.ts +18 -0
  102. package/dist/components/progress/snice-progress.d.ts +35 -0
  103. package/dist/components/progress/snice-progress.js +305 -0
  104. package/dist/components/progress/snice-progress.js.map +1 -0
  105. package/dist/components/progress/snice-progress.types.d.ts +18 -0
  106. package/dist/components/radio/snice-radio.d.ts +33 -0
  107. package/dist/components/radio/snice-radio.js +279 -0
  108. package/dist/components/radio/snice-radio.js.map +1 -0
  109. package/dist/components/radio/snice-radio.types.d.ts +19 -0
  110. package/dist/components/select/snice-option.d.ts +17 -0
  111. package/dist/components/select/snice-option.js +88 -0
  112. package/dist/components/select/snice-option.js.map +1 -0
  113. package/{components/select/snice-option.types.ts → dist/components/select/snice-option.types.d.ts} +8 -8
  114. package/dist/components/select/snice-select.d.ts +89 -0
  115. package/dist/components/select/snice-select.js +864 -0
  116. package/dist/components/select/snice-select.js.map +1 -0
  117. package/dist/components/select/snice-select.types.d.ts +49 -0
  118. package/dist/components/skeleton/snice-skeleton.d.ts +16 -0
  119. package/dist/components/skeleton/snice-skeleton.js +166 -0
  120. package/dist/components/skeleton/snice-skeleton.js.map +1 -0
  121. package/{components/skeleton/snice-skeleton.types.ts → dist/components/skeleton/snice-skeleton.types.d.ts} +7 -8
  122. package/dist/components/snice-cell-C9N6yGxQ.js +4 -0
  123. package/dist/components/snice-cell-C9N6yGxQ.js.map +1 -0
  124. package/dist/components/switch/snice-switch.d.ts +38 -0
  125. package/dist/components/switch/snice-switch.js +305 -0
  126. package/dist/components/switch/snice-switch.js.map +1 -0
  127. package/dist/components/switch/snice-switch.types.d.ts +21 -0
  128. package/dist/components/symbols.d.ts +1 -0
  129. package/dist/components/symbols.js +22 -0
  130. package/dist/components/symbols.js.map +1 -0
  131. package/dist/components/table/snice-cell-boolean.d.ts +21 -0
  132. package/dist/components/table/snice-cell-boolean.js +164 -0
  133. package/dist/components/table/snice-cell-boolean.js.map +1 -0
  134. package/dist/components/table/snice-cell-date.d.ts +24 -0
  135. package/dist/components/table/snice-cell-date.js +253 -0
  136. package/dist/components/table/snice-cell-date.js.map +1 -0
  137. package/dist/components/table/snice-cell-duration.d.ts +16 -0
  138. package/dist/components/table/snice-cell-duration.js +130 -0
  139. package/dist/components/table/snice-cell-duration.js.map +1 -0
  140. package/dist/components/table/snice-cell-filesize.d.ts +16 -0
  141. package/dist/components/table/snice-cell-filesize.js +126 -0
  142. package/dist/components/table/snice-cell-filesize.js.map +1 -0
  143. package/dist/components/table/snice-cell-number.d.ts +23 -0
  144. package/dist/components/table/snice-cell-number.js +215 -0
  145. package/dist/components/table/snice-cell-number.js.map +1 -0
  146. package/dist/components/table/snice-cell-progress.d.ts +17 -0
  147. package/dist/components/table/snice-cell-progress.js +121 -0
  148. package/dist/components/table/snice-cell-progress.js.map +1 -0
  149. package/dist/components/table/snice-cell-rating.d.ts +17 -0
  150. package/dist/components/table/snice-cell-rating.js +120 -0
  151. package/dist/components/table/snice-cell-rating.js.map +1 -0
  152. package/dist/components/table/snice-cell-sparkline.d.ts +29 -0
  153. package/dist/components/table/snice-cell-sparkline.js +306 -0
  154. package/dist/components/table/snice-cell-sparkline.js.map +1 -0
  155. package/dist/components/table/snice-cell-text.d.ts +19 -0
  156. package/dist/components/table/snice-cell-text.js +161 -0
  157. package/dist/components/table/snice-cell-text.js.map +1 -0
  158. package/dist/components/table/snice-cell.d.ts +32 -0
  159. package/dist/components/table/snice-cell.js +458 -0
  160. package/dist/components/table/snice-cell.js.map +1 -0
  161. package/dist/components/table/snice-column.d.ts +62 -0
  162. package/dist/components/table/snice-column.js +506 -0
  163. package/dist/components/table/snice-column.js.map +1 -0
  164. package/dist/components/table/snice-header.d.ts +33 -0
  165. package/dist/components/table/snice-header.js +289 -0
  166. package/dist/components/table/snice-header.js.map +1 -0
  167. package/dist/components/table/snice-progress.d.ts +10 -0
  168. package/dist/components/table/snice-progress.js +105 -0
  169. package/dist/components/table/snice-progress.js.map +1 -0
  170. package/dist/components/table/snice-rating.d.ts +9 -0
  171. package/dist/components/table/snice-rating.js +81 -0
  172. package/dist/components/table/snice-rating.js.map +1 -0
  173. package/dist/components/table/snice-row.d.ts +43 -0
  174. package/dist/components/table/snice-row.js +353 -0
  175. package/dist/components/table/snice-row.js.map +1 -0
  176. package/dist/components/table/snice-table.d.ts +69 -0
  177. package/dist/components/table/snice-table.js +792 -0
  178. package/dist/components/table/snice-table.js.map +1 -0
  179. package/dist/components/table/snice-table.types.d.ts +137 -0
  180. package/dist/components/tabs/snice-tab-panel.d.ts +12 -0
  181. package/dist/components/tabs/snice-tab-panel.js +87 -0
  182. package/dist/components/tabs/snice-tab-panel.js.map +1 -0
  183. package/dist/components/tabs/snice-tab.d.ts +13 -0
  184. package/dist/components/tabs/snice-tab.js +98 -0
  185. package/dist/components/tabs/snice-tab.js.map +1 -0
  186. package/dist/components/tabs/snice-tabs.d.ts +34 -0
  187. package/dist/components/tabs/snice-tabs.js +375 -0
  188. package/dist/components/tabs/snice-tabs.js.map +1 -0
  189. package/dist/components/tabs/snice-tabs.types.d.ts +23 -0
  190. package/dist/components/toast/snice-toast-container.d.ts +25 -0
  191. package/dist/components/toast/snice-toast-container.js +252 -0
  192. package/dist/components/toast/snice-toast-container.js.map +1 -0
  193. package/dist/components/toast/snice-toast.d.ts +23 -0
  194. package/dist/components/toast/snice-toast.js +321 -0
  195. package/dist/components/toast/snice-toast.js.map +1 -0
  196. package/dist/components/toast/snice-toast.types.d.ts +30 -0
  197. package/dist/components/tooltip/snice-tooltip.d.ts +50 -0
  198. package/dist/components/tooltip/snice-tooltip.js +644 -0
  199. package/dist/components/tooltip/snice-tooltip.js.map +1 -0
  200. package/dist/components/tooltip/snice-tooltip.types.d.ts +18 -0
  201. package/dist/components/transitions.d.ts +11 -0
  202. package/dist/components/transitions.js +72 -0
  203. package/dist/components/transitions.js.map +1 -0
  204. package/dist/index.cjs +1 -1
  205. package/dist/index.esm.js +1 -1
  206. package/dist/index.iife.js +1 -1
  207. package/dist/symbols.esm.js +1 -1
  208. package/dist/transitions.esm.js +1 -1
  209. package/package.json +10 -6
  210. package/components/accordion/demo.html +0 -403
  211. package/components/accordion/snice-accordion-item.css +0 -85
  212. package/components/accordion/snice-accordion-item.ts +0 -226
  213. package/components/accordion/snice-accordion.css +0 -31
  214. package/components/accordion/snice-accordion.ts +0 -182
  215. package/components/accordion/snice-accordion.types.ts +0 -32
  216. package/components/alert/demo.html +0 -445
  217. package/components/alert/snice-alert.css +0 -195
  218. package/components/alert/snice-alert.ts +0 -141
  219. package/components/avatar/demo.html +0 -598
  220. package/components/avatar/snice-avatar.css +0 -131
  221. package/components/avatar/snice-avatar.ts +0 -136
  222. package/components/avatar/snice-avatar.types.ts +0 -13
  223. package/components/badge/demo.html +0 -523
  224. package/components/badge/snice-badge.css +0 -161
  225. package/components/badge/snice-badge.ts +0 -117
  226. package/components/breadcrumbs/demo.html +0 -404
  227. package/components/breadcrumbs/snice-breadcrumbs.css +0 -133
  228. package/components/breadcrumbs/snice-breadcrumbs.ts +0 -191
  229. package/components/breadcrumbs/snice-breadcrumbs.types.ts +0 -26
  230. package/components/breadcrumbs/snice-crumb.ts +0 -26
  231. package/components/button/demo.html +0 -42
  232. package/components/button/snice-button.css +0 -230
  233. package/components/button/snice-button.ts +0 -169
  234. package/components/button/snice-button.types.ts +0 -25
  235. package/components/card/demo.html +0 -525
  236. package/components/card/snice-card.css +0 -140
  237. package/components/card/snice-card.ts +0 -102
  238. package/components/checkbox/demo.html +0 -253
  239. package/components/checkbox/snice-checkbox.css +0 -164
  240. package/components/checkbox/snice-checkbox.ts +0 -223
  241. package/components/checkbox/snice-checkbox.types.ts +0 -22
  242. package/components/chip/demo.html +0 -383
  243. package/components/chip/snice-chip.css +0 -195
  244. package/components/chip/snice-chip.ts +0 -139
  245. package/components/chip/snice-chip.types.ts +0 -15
  246. package/components/date-picker/README.md +0 -233
  247. package/components/date-picker/demo.html +0 -191
  248. package/components/date-picker/snice-date-picker.css +0 -330
  249. package/components/date-picker/snice-date-picker.ts +0 -777
  250. package/components/date-picker/snice-date-picker.types.ts +0 -83
  251. package/components/divider/demo.html +0 -233
  252. package/components/divider/snice-divider.css +0 -155
  253. package/components/divider/snice-divider.ts +0 -69
  254. package/components/drawer/demo.html +0 -328
  255. package/components/drawer/snice-drawer.css +0 -476
  256. package/components/drawer/snice-drawer.ts +0 -287
  257. package/components/drawer/snice-drawer.types.ts +0 -17
  258. package/components/global.d.ts +0 -14
  259. package/components/input/demo.html +0 -303
  260. package/components/input/snice-input.css +0 -257
  261. package/components/input/snice-input.ts +0 -442
  262. package/components/input/snice-input.types.ts +0 -59
  263. package/components/input/test.html +0 -77
  264. package/components/layout/README.md +0 -260
  265. package/components/layout/demo.html +0 -538
  266. package/components/layout/snice-layout-blog.css +0 -129
  267. package/components/layout/snice-layout-blog.ts +0 -48
  268. package/components/layout/snice-layout-card.css +0 -104
  269. package/components/layout/snice-layout-card.ts +0 -35
  270. package/components/layout/snice-layout-centered.css +0 -51
  271. package/components/layout/snice-layout-centered.ts +0 -22
  272. package/components/layout/snice-layout-dashboard.css +0 -98
  273. package/components/layout/snice-layout-dashboard.ts +0 -45
  274. package/components/layout/snice-layout-fullscreen.css +0 -72
  275. package/components/layout/snice-layout-fullscreen.ts +0 -34
  276. package/components/layout/snice-layout-landing.css +0 -92
  277. package/components/layout/snice-layout-landing.ts +0 -47
  278. package/components/layout/snice-layout-minimal.css +0 -16
  279. package/components/layout/snice-layout-minimal.ts +0 -19
  280. package/components/layout/snice-layout-sidebar.css +0 -117
  281. package/components/layout/snice-layout-sidebar.ts +0 -48
  282. package/components/layout/snice-layout-split.css +0 -103
  283. package/components/layout/snice-layout-split.ts +0 -29
  284. package/components/layout/snice-layout.css +0 -72
  285. package/components/layout/snice-layout.ts +0 -35
  286. package/components/login/demo-auth-controller.ts +0 -185
  287. package/components/login/demo.html +0 -470
  288. package/components/login/snice-login.css +0 -204
  289. package/components/login/snice-login.ts +0 -326
  290. package/components/login/snice-login.types.ts +0 -29
  291. package/components/modal/demo.html +0 -291
  292. package/components/modal/snice-modal.css +0 -203
  293. package/components/modal/snice-modal.ts +0 -233
  294. package/components/modal/snice-modal.types.ts +0 -21
  295. package/components/pagination/demo.html +0 -395
  296. package/components/pagination/snice-pagination.ts +0 -333
  297. package/components/pagination/snice-pagination.types.ts +0 -21
  298. package/components/progress/demo.html +0 -510
  299. package/components/progress/snice-progress.css +0 -267
  300. package/components/progress/snice-progress.ts +0 -247
  301. package/components/progress/snice-progress.types.ts +0 -19
  302. package/components/radio/demo.html +0 -287
  303. package/components/radio/snice-radio.css +0 -171
  304. package/components/radio/snice-radio.ts +0 -218
  305. package/components/radio/snice-radio.types.ts +0 -21
  306. package/components/select/demo.html +0 -511
  307. package/components/select/snice-option.ts +0 -52
  308. package/components/select/snice-select.css +0 -392
  309. package/components/select/snice-select.ts +0 -796
  310. package/components/select/snice-select.types.ts +0 -55
  311. package/components/skeleton/demo.html +0 -514
  312. package/components/skeleton/snice-skeleton.css +0 -109
  313. package/components/skeleton/snice-skeleton.ts +0 -126
  314. package/components/switch/demo.html +0 -284
  315. package/components/switch/snice-switch.css +0 -221
  316. package/components/switch/snice-switch.ts +0 -229
  317. package/components/switch/snice-switch.types.ts +0 -23
  318. package/components/symbols.ts +0 -23
  319. package/components/table/demo-table-controller.ts +0 -100
  320. package/components/table/demo.html +0 -480
  321. package/components/table/snice-cell-boolean.ts +0 -112
  322. package/components/table/snice-cell-date.ts +0 -210
  323. package/components/table/snice-cell-duration.ts +0 -91
  324. package/components/table/snice-cell-filesize.ts +0 -90
  325. package/components/table/snice-cell-number.ts +0 -165
  326. package/components/table/snice-cell-progress.ts +0 -83
  327. package/components/table/snice-cell-rating.ts +0 -82
  328. package/components/table/snice-cell-sparkline.ts +0 -253
  329. package/components/table/snice-cell-text.ts +0 -125
  330. package/components/table/snice-cell.css +0 -296
  331. package/components/table/snice-cell.ts +0 -473
  332. package/components/table/snice-column.ts +0 -353
  333. package/components/table/snice-header.css +0 -243
  334. package/components/table/snice-header.ts +0 -261
  335. package/components/table/snice-progress.ts +0 -66
  336. package/components/table/snice-rating.ts +0 -45
  337. package/components/table/snice-row.css +0 -255
  338. package/components/table/snice-row.ts +0 -331
  339. package/components/table/snice-table.css +0 -241
  340. package/components/table/snice-table.ts +0 -737
  341. package/components/table/snice-table.types.ts +0 -158
  342. package/components/tabs/demo.html +0 -487
  343. package/components/tabs/snice-tab-panel.css +0 -264
  344. package/components/tabs/snice-tab-panel.ts +0 -47
  345. package/components/tabs/snice-tab.css +0 -96
  346. package/components/tabs/snice-tab.ts +0 -65
  347. package/components/tabs/snice-tabs.css +0 -189
  348. package/components/tabs/snice-tabs.ts +0 -332
  349. package/components/tabs/snice-tabs.types.ts +0 -28
  350. package/components/theme/theme.css +0 -234
  351. package/components/toast/demo.html +0 -329
  352. package/components/toast/snice-toast-container.ts +0 -256
  353. package/components/toast/snice-toast.css +0 -213
  354. package/components/toast/snice-toast.ts +0 -276
  355. package/components/toast/snice-toast.types.ts +0 -35
  356. package/components/tooltip/demo.html +0 -350
  357. package/components/tooltip/snice-tooltip-portal.css +0 -79
  358. package/components/tooltip/snice-tooltip.css +0 -117
  359. package/components/tooltip/snice-tooltip.ts +0 -612
  360. package/components/tooltip/snice-tooltip.types.ts +0 -32
  361. package/components/transitions.ts +0 -94
  362. package/components/tsconfig.json +0 -18
  363. package/dist/index.cjs.min.map +0 -1
  364. package/dist/index.esm.min.js +0 -14
  365. package/dist/index.esm.min.js.map +0 -1
  366. package/dist/index.iife.min.js +0 -15
  367. package/dist/index.iife.min.js.map +0 -1
package/components/input/snice-input.types.ts DELETED
@@ -1,59 +0,0 @@
1
- export type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local';
2
- export type InputSize = 'small' | 'medium' | 'large';
3
- export type InputVariant = 'outlined' | 'filled' | 'underlined';
4
-
5
- export interface SniceInputElement extends HTMLElement {
6
- type: InputType;
7
- size: InputSize;
8
- variant: InputVariant;
9
- value: string;
10
- placeholder: string;
11
- label: string;
12
- helperText: string;
13
- errorText: string;
14
- disabled: boolean;
15
- readonly: boolean;
16
- required: boolean;
17
- invalid: boolean;
18
- clearable: boolean;
19
- password: boolean;
20
- min: string;
21
- max: string;
22
- step: string;
23
- pattern: string;
24
- maxlength: number;
25
- minlength: number;
26
- autocomplete: string;
27
- name: string;
28
- prefixIcon: string;
29
- suffixIcon: string;
30
- focus(): void;
31
- blur(): void;
32
- select(): void;
33
- clear(): void;
34
- checkValidity(): boolean;
35
- reportValidity(): boolean;
36
- setCustomValidity(message: string): void;
37
- }
38
-
39
- export interface InputChangeDetail {
40
- value: string;
41
- input: SniceInputElement;
42
- }
43
-
44
- export interface InputInputDetail {
45
- value: string;
46
- input: SniceInputElement;
47
- }
48
-
49
- export interface InputFocusDetail {
50
- input: SniceInputElement;
51
- }
52
-
53
- export interface InputBlurDetail {
54
- input: SniceInputElement;
55
- }
56
-
57
- export interface InputClearDetail {
58
- input: SniceInputElement;
59
- }
package/components/input/test.html DELETED
@@ -1,77 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Input Test</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
- }
15
- .test-group {
16
- margin-bottom: 30px;
17
- padding: 20px;
18
- background: var(--snice-color-background-secondary);
19
- border-radius: 8px;
20
- }
21
- </style>
22
- </head>
23
- <body>
24
- <h2>Input Component Test</h2>
25
-
26
- <div class="test-group">
27
- <h3>Test 1: Basic with Label</h3>
28
- <snice-input label="Test Label" placeholder="Enter text..."></snice-input>
29
- </div>
30
-
31
- <div class="test-group">
32
- <h3>Test 2: Number with Max/Min</h3>
33
- <snice-input
34
- type="number"
35
- label="Number Input (0-100)"
36
- min="0"
37
- max="100"
38
- step="5"
39
- placeholder="0-100">
40
- </snice-input>
41
- </div>
42
-
43
- <div class="test-group">
44
- <h3>Test 3: Required Field</h3>
45
- <snice-input
46
- label="Required Field"
47
- placeholder="This is required"
48
- required>
49
- </snice-input>
50
- </div>
51
-
52
- <div class="test-group">
53
- <h3>Test 4: Max Length</h3>
54
- <snice-input
55
- label="Max 10 Characters"
56
- maxlength="10"
57
- placeholder="Max 10 chars">
58
- </snice-input>
59
- </div>
60
-
61
- <script type="module">
62
- import './snice-input.ts';
63
-
64
- // Test that we can access the element and its properties
65
- setTimeout(() => {
66
- const inputs = document.querySelectorAll('snice-input');
67
- inputs.forEach(input => {
68
- console.log('Input label:', input.label);
69
- console.log('Shadow root:', input.shadowRoot);
70
- const labelEl = input.shadowRoot?.querySelector('.label');
71
- console.log('Label element:', labelEl);
72
- console.log('Label text:', labelEl?.textContent);
73
- });
74
- }, 1000);
75
- </script>
76
- </body>
77
- </html>
package/components/layout/README.md DELETED
@@ -1,260 +0,0 @@
1
- # Layout Components
2
-
3
- A collection of layout components for structuring web applications.
4
-
5
- ## Components
6
-
7
- ### snice-layout
8
- Basic layout with header, main content, and footer areas.
9
-
10
- ```html
11
- <snice-layout>
12
- <div slot="brand"><h1>My App</h1></div>
13
- <nav slot="nav">
14
- <a href="/">Home</a>
15
- <a href="/about">About</a>
16
- </nav>
17
-
18
- <!-- Main content -->
19
- <div>
20
- <h1>Welcome</h1>
21
- <p>This is the main content area.</p>
22
- </div>
23
-
24
- <div slot="footer">
25
- <p>&copy; 2024 My Company</p>
26
- </div>
27
- </snice-layout>
28
- ```
29
-
30
- ### snice-layout-sidebar
31
- Layout with collapsible sidebar navigation.
32
-
33
- ```html
34
- <snice-layout-sidebar>
35
- <div slot="brand"><h2>Dashboard</h2></div>
36
- <nav slot="nav">
37
- <a href="/dashboard">Overview</a>
38
- <a href="/users">Users</a>
39
- <a href="/settings">Settings</a>
40
- </nav>
41
- <div slot="header">
42
- <h1>Page Title</h1>
43
- </div>
44
-
45
- <!-- Main content -->
46
- <div>
47
- <p>Dashboard content goes here</p>
48
- </div>
49
- </snice-layout-sidebar>
50
- ```
51
-
52
- ### snice-layout-minimal
53
- Clean layout with just content area.
54
-
55
- ```html
56
- <snice-layout-minimal>
57
- <div>
58
- <h1>Simple Page</h1>
59
- <p>Minimal layout for focused content.</p>
60
- </div>
61
- </snice-layout-minimal>
62
- ```
63
-
64
- ### snice-layout-centered
65
- Centered container perfect for forms, authentication pages.
66
-
67
- ```html
68
- <snice-layout-centered width="md">
69
- <form>
70
- <h2>Sign In</h2>
71
- <input type="email" placeholder="Email">
72
- <input type="password" placeholder="Password">
73
- <button type="submit">Sign In</button>
74
- </form>
75
- </snice-layout-centered>
76
- ```
77
-
78
- #### Properties
79
- - `width`: Container width - `"sm"` | `"md"` | `"lg"` | `"xl"` (default: `"md"`)
80
-
81
- ### snice-layout-landing
82
- Marketing/landing page layout with hero section.
83
-
84
- ```html
85
- <snice-layout-landing>
86
- <div slot="brand"><h1>Company</h1></div>
87
- <nav slot="nav">
88
- <a href="#features">Features</a>
89
- <a href="#pricing">Pricing</a>
90
- </nav>
91
- <button slot="cta">Get Started</button>
92
-
93
- <div slot="hero">
94
- <h1>Amazing Product</h1>
95
- <p>Transform your business today</p>
96
- </div>
97
-
98
- <!-- Main content sections -->
99
- <section>
100
- <h2>Features</h2>
101
- <p>Feature content...</p>
102
- </section>
103
- </snice-layout-landing>
104
- ```
105
-
106
- ### snice-layout-split
107
- Two-panel layout with configurable split ratios.
108
-
109
- ```html
110
- <snice-layout-split direction="horizontal" ratio="60-40">
111
- <div slot="left">
112
- <h2>Left Panel</h2>
113
- <p>Content for left side</p>
114
- </div>
115
- <div slot="right">
116
- <h2>Right Panel</h2>
117
- <p>Content for right side</p>
118
- </div>
119
- </snice-layout-split>
120
- ```
121
-
122
- #### Properties
123
- - `direction`: Split direction - `"horizontal"` | `"vertical"` (default: `"horizontal"`)
124
- - `ratio`: Panel size ratio - `"50-50"` | `"60-40"` | `"70-30"` | `"33-67"` | `"67-33"` (default: `"50-50"`)
125
-
126
- ### snice-layout-card
127
- Grid layout optimized for card-based content.
128
-
129
- ```html
130
- <snice-layout-card columns="3" gap="lg">
131
- <div slot="header">
132
- <h1>Product Gallery</h1>
133
- </div>
134
-
135
- <!-- Cards go in main slot -->
136
- <div class="card">Product 1</div>
137
- <div class="card">Product 2</div>
138
- <div class="card">Product 3</div>
139
- </snice-layout-card>
140
- ```
141
-
142
- #### Properties
143
- - `columns`: Number of columns - `"1"` | `"2"` | `"3"` | `"4"` | `"6"` (default: `"3"`)
144
- - `gap`: Grid gap size - `"sm"` | `"md"` | `"lg"` | `"xl"` (default: `"md"`)
145
-
146
- ### snice-layout-blog
147
- Article layout with sidebar for additional content.
148
-
149
- ```html
150
- <snice-layout-blog>
151
- <div slot="brand"><h1>My Blog</h1></div>
152
- <nav slot="nav">
153
- <a href="/">Home</a>
154
- <a href="/archive">Archive</a>
155
- </nav>
156
-
157
- <!-- Article content -->
158
- <article>
159
- <h1>Blog Post Title</h1>
160
- <p>Article content goes here...</p>
161
- </article>
162
-
163
- <div slot="sidebar">
164
- <h3>Recent Posts</h3>
165
- <ul>
166
- <li><a href="/post1">Post 1</a></li>
167
- <li><a href="/post2">Post 2</a></li>
168
- </ul>
169
- </div>
170
- </snice-layout-blog>
171
- ```
172
-
173
- ### snice-layout-dashboard
174
- Complex dashboard layout with multiple content areas.
175
-
176
- ```html
177
- <snice-layout-dashboard>
178
- <div slot="brand"><h1>Analytics</h1></div>
179
- <input slot="search" type="search" placeholder="Search...">
180
- <div slot="user">Welcome, John!</div>
181
-
182
- <nav slot="nav">
183
- <a href="/dashboard">Overview</a>
184
- <a href="/analytics">Analytics</a>
185
- </nav>
186
-
187
- <div slot="sidebar">
188
- <h3>Quick Actions</h3>
189
- <button>New Report</button>
190
- </div>
191
-
192
- <!-- Main dashboard content -->
193
- <div>
194
- <h2>Dashboard Overview</h2>
195
- <div class="metrics">...</div>
196
- </div>
197
-
198
- <div slot="right-sidebar">
199
- <h3>Recent Activity</h3>
200
- <ul>...</ul>
201
- </div>
202
- </snice-layout-dashboard>
203
- ```
204
-
205
- ### snice-layout-fullscreen
206
- Immersive fullscreen layout for presentations, media viewers.
207
-
208
- ```html
209
- <snice-layout-fullscreen overlay>
210
- <img slot="background" src="background.jpg" alt="Background">
211
-
212
- <div slot="overlay">
213
- <h1>Overlay Content</h1>
214
- </div>
215
-
216
- <!-- Main fullscreen content -->
217
- <div>
218
- <h2>Centered Content</h2>
219
- </div>
220
-
221
- <div slot="controls">
222
- <button>Play</button>
223
- <button>Pause</button>
224
- <button>Fullscreen</button>
225
- </div>
226
- </snice-layout-fullscreen>
227
- ```
228
-
229
- #### Properties
230
- - `overlay`: Show overlay background - `boolean` (default: `false`)
231
-
232
- ## Styling
233
-
234
- All layout components use the Snice design system CSS custom properties for consistent theming. You can override these variables to customize the appearance:
235
-
236
- ```css
237
- :root {
238
- --snice-color-primary: #your-primary-color;
239
- --snice-color-background: #your-background-color;
240
- --snice-spacing-md: your-spacing-value;
241
- /* ... other theme variables */
242
- }
243
- ```
244
-
245
- ## Responsive Design
246
-
247
- All layouts include responsive breakpoints and will adapt to mobile devices automatically. Most layouts stack vertically on small screens for optimal mobile experience.
248
-
249
- ## Events
250
-
251
- Layout components are structural and don't emit custom events. However, you can listen for standard DOM events on slotted content:
252
-
253
- ```javascript
254
- document.querySelector('snice-layout-sidebar')
255
- .addEventListener('click', (e) => {
256
- if (e.target.matches('.sidebar-toggle')) {
257
- // Handle sidebar toggle
258
- }
259
- });
260
- ```