snice 2.1.5 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (364) hide show
  1. package/dist/components/accordion/snice-accordion-item.d.ts +25 -0
  2. package/dist/components/accordion/snice-accordion-item.js +255 -0
  3. package/dist/components/accordion/snice-accordion-item.js.map +1 -0
  4. package/dist/components/accordion/snice-accordion.d.ts +28 -0
  5. package/dist/components/accordion/snice-accordion.js +206 -0
  6. package/dist/components/accordion/snice-accordion.js.map +1 -0
  7. package/dist/components/accordion/snice-accordion.types.d.ts +29 -0
  8. package/dist/components/alert/snice-alert.d.ts +26 -0
  9. package/dist/components/alert/snice-alert.js +180 -0
  10. package/dist/components/alert/snice-alert.js.map +1 -0
  11. package/{components/alert/snice-alert.types.ts → dist/components/alert/snice-alert.types.d.ts} +8 -9
  12. package/dist/components/avatar/snice-avatar.d.ts +24 -0
  13. package/dist/components/avatar/snice-avatar.js +180 -0
  14. package/dist/components/avatar/snice-avatar.js.map +1 -0
  15. package/dist/components/avatar/snice-avatar.types.d.ts +12 -0
  16. package/dist/components/badge/snice-badge.d.ts +25 -0
  17. package/dist/components/badge/snice-badge.js +169 -0
  18. package/dist/components/badge/snice-badge.js.map +1 -0
  19. package/{components/badge/snice-badge.types.ts → dist/components/badge/snice-badge.types.d.ts} +11 -12
  20. package/dist/components/breadcrumbs/snice-breadcrumbs.d.ts +27 -0
  21. package/dist/components/breadcrumbs/snice-breadcrumbs.js +214 -0
  22. package/dist/components/breadcrumbs/snice-breadcrumbs.js.map +1 -0
  23. package/dist/components/breadcrumbs/snice-breadcrumbs.types.d.ts +23 -0
  24. package/dist/components/breadcrumbs/snice-crumb.d.ts +9 -0
  25. package/dist/components/breadcrumbs/snice-crumb.js +63 -0
  26. package/dist/components/breadcrumbs/snice-crumb.js.map +1 -0
  27. package/dist/components/button/snice-button.d.ts +32 -0
  28. package/dist/components/button/snice-button.js +232 -0
  29. package/dist/components/button/snice-button.js.map +1 -0
  30. package/dist/components/button/snice-button.types.d.ts +23 -0
  31. package/dist/components/card/snice-card.d.ts +19 -0
  32. package/dist/components/card/snice-card.js +136 -0
  33. package/dist/components/card/snice-card.js.map +1 -0
  34. package/{components/card/snice-card.types.ts → dist/components/card/snice-card.types.d.ts} +6 -7
  35. package/dist/components/checkbox/snice-checkbox.d.ts +34 -0
  36. package/dist/components/checkbox/snice-checkbox.js +286 -0
  37. package/dist/components/checkbox/snice-checkbox.js.map +1 -0
  38. package/dist/components/checkbox/snice-checkbox.types.d.ts +20 -0
  39. package/dist/components/chip/snice-chip.d.ts +28 -0
  40. package/dist/components/chip/snice-chip.js +199 -0
  41. package/dist/components/chip/snice-chip.js.map +1 -0
  42. package/dist/components/chip/snice-chip.types.d.ts +14 -0
  43. package/dist/components/date-picker/snice-date-picker.d.ts +82 -0
  44. package/dist/components/date-picker/snice-date-picker.js +847 -0
  45. package/dist/components/date-picker/snice-date-picker.js.map +1 -0
  46. package/dist/components/date-picker/snice-date-picker.types.d.ts +71 -0
  47. package/dist/components/divider/snice-divider.d.ts +17 -0
  48. package/dist/components/divider/snice-divider.js +122 -0
  49. package/dist/components/divider/snice-divider.js.map +1 -0
  50. package/{components/divider/snice-divider.types.ts → dist/components/divider/snice-divider.types.d.ts} +9 -10
  51. package/dist/components/drawer/snice-drawer.d.ts +37 -0
  52. package/dist/components/drawer/snice-drawer.js +337 -0
  53. package/dist/components/drawer/snice-drawer.js.map +1 -0
  54. package/dist/components/drawer/snice-drawer.types.d.ts +16 -0
  55. package/dist/components/input/snice-input.d.ts +65 -0
  56. package/dist/components/input/snice-input.js +567 -0
  57. package/dist/components/input/snice-input.js.map +1 -0
  58. package/dist/components/input/snice-input.types.d.ts +53 -0
  59. package/dist/components/layout/snice-layout-blog.d.ts +4 -0
  60. package/dist/components/layout/snice-layout-blog.js +67 -0
  61. package/dist/components/layout/snice-layout-blog.js.map +1 -0
  62. package/dist/components/layout/snice-layout-card.d.ts +6 -0
  63. package/dist/components/layout/snice-layout-card.js +64 -0
  64. package/dist/components/layout/snice-layout-card.js.map +1 -0
  65. package/dist/components/layout/snice-layout-centered.d.ts +5 -0
  66. package/dist/components/layout/snice-layout-centered.js +48 -0
  67. package/dist/components/layout/snice-layout-centered.js.map +1 -0
  68. package/dist/components/layout/snice-layout-dashboard.d.ts +4 -0
  69. package/dist/components/layout/snice-layout-dashboard.js +64 -0
  70. package/dist/components/layout/snice-layout-dashboard.js.map +1 -0
  71. package/dist/components/layout/snice-layout-fullscreen.d.ts +5 -0
  72. package/dist/components/layout/snice-layout-fullscreen.js +60 -0
  73. package/dist/components/layout/snice-layout-fullscreen.js.map +1 -0
  74. package/dist/components/layout/snice-layout-landing.d.ts +4 -0
  75. package/dist/components/layout/snice-layout-landing.js +66 -0
  76. package/dist/components/layout/snice-layout-landing.js.map +1 -0
  77. package/dist/components/layout/snice-layout-minimal.d.ts +4 -0
  78. package/dist/components/layout/snice-layout-minimal.js +38 -0
  79. package/dist/components/layout/snice-layout-minimal.js.map +1 -0
  80. package/dist/components/layout/snice-layout-sidebar.d.ts +5 -0
  81. package/dist/components/layout/snice-layout-sidebar.js +74 -0
  82. package/dist/components/layout/snice-layout-sidebar.js.map +1 -0
  83. package/dist/components/layout/snice-layout-split.d.ts +6 -0
  84. package/dist/components/layout/snice-layout-split.js +58 -0
  85. package/dist/components/layout/snice-layout-split.js.map +1 -0
  86. package/dist/components/layout/snice-layout.d.ts +4 -0
  87. package/dist/components/layout/snice-layout.js +54 -0
  88. package/dist/components/layout/snice-layout.js.map +1 -0
  89. package/{components/layout/snice-layout.types.ts → dist/components/layout/snice-layout.types.d.ts} +1 -3
  90. package/dist/components/login/snice-login.d.ts +44 -0
  91. package/dist/components/login/snice-login.js +382 -0
  92. package/dist/components/login/snice-login.js.map +1 -0
  93. package/dist/components/login/snice-login.types.d.ts +26 -0
  94. package/dist/components/modal/snice-modal.d.ts +32 -0
  95. package/dist/components/modal/snice-modal.js +280 -0
  96. package/dist/components/modal/snice-modal.js.map +1 -0
  97. package/dist/components/modal/snice-modal.types.d.ts +18 -0
  98. package/dist/components/pagination/snice-pagination.d.ts +26 -0
  99. package/dist/components/pagination/snice-pagination.js +373 -0
  100. package/dist/components/pagination/snice-pagination.js.map +1 -0
  101. package/dist/components/pagination/snice-pagination.types.d.ts +18 -0
  102. package/dist/components/progress/snice-progress.d.ts +35 -0
  103. package/dist/components/progress/snice-progress.js +305 -0
  104. package/dist/components/progress/snice-progress.js.map +1 -0
  105. package/dist/components/progress/snice-progress.types.d.ts +18 -0
  106. package/dist/components/radio/snice-radio.d.ts +33 -0
  107. package/dist/components/radio/snice-radio.js +279 -0
  108. package/dist/components/radio/snice-radio.js.map +1 -0
  109. package/dist/components/radio/snice-radio.types.d.ts +19 -0
  110. package/dist/components/select/snice-option.d.ts +17 -0
  111. package/dist/components/select/snice-option.js +88 -0
  112. package/dist/components/select/snice-option.js.map +1 -0
  113. package/{components/select/snice-option.types.ts → dist/components/select/snice-option.types.d.ts} +8 -8
  114. package/dist/components/select/snice-select.d.ts +89 -0
  115. package/dist/components/select/snice-select.js +864 -0
  116. package/dist/components/select/snice-select.js.map +1 -0
  117. package/dist/components/select/snice-select.types.d.ts +49 -0
  118. package/dist/components/skeleton/snice-skeleton.d.ts +16 -0
  119. package/dist/components/skeleton/snice-skeleton.js +166 -0
  120. package/dist/components/skeleton/snice-skeleton.js.map +1 -0
  121. package/{components/skeleton/snice-skeleton.types.ts → dist/components/skeleton/snice-skeleton.types.d.ts} +7 -8
  122. package/dist/components/snice-cell-C8aBfN72.js +4 -0
  123. package/dist/components/snice-cell-C8aBfN72.js.map +1 -0
  124. package/dist/components/switch/snice-switch.d.ts +38 -0
  125. package/dist/components/switch/snice-switch.js +305 -0
  126. package/dist/components/switch/snice-switch.js.map +1 -0
  127. package/dist/components/switch/snice-switch.types.d.ts +21 -0
  128. package/dist/components/symbols.d.ts +1 -0
  129. package/dist/components/symbols.js +22 -0
  130. package/dist/components/symbols.js.map +1 -0
  131. package/dist/components/table/snice-cell-boolean.d.ts +21 -0
  132. package/dist/components/table/snice-cell-boolean.js +164 -0
  133. package/dist/components/table/snice-cell-boolean.js.map +1 -0
  134. package/dist/components/table/snice-cell-date.d.ts +24 -0
  135. package/dist/components/table/snice-cell-date.js +253 -0
  136. package/dist/components/table/snice-cell-date.js.map +1 -0
  137. package/dist/components/table/snice-cell-duration.d.ts +16 -0
  138. package/dist/components/table/snice-cell-duration.js +130 -0
  139. package/dist/components/table/snice-cell-duration.js.map +1 -0
  140. package/dist/components/table/snice-cell-filesize.d.ts +16 -0
  141. package/dist/components/table/snice-cell-filesize.js +126 -0
  142. package/dist/components/table/snice-cell-filesize.js.map +1 -0
  143. package/dist/components/table/snice-cell-number.d.ts +23 -0
  144. package/dist/components/table/snice-cell-number.js +215 -0
  145. package/dist/components/table/snice-cell-number.js.map +1 -0
  146. package/dist/components/table/snice-cell-progress.d.ts +17 -0
  147. package/dist/components/table/snice-cell-progress.js +121 -0
  148. package/dist/components/table/snice-cell-progress.js.map +1 -0
  149. package/dist/components/table/snice-cell-rating.d.ts +17 -0
  150. package/dist/components/table/snice-cell-rating.js +120 -0
  151. package/dist/components/table/snice-cell-rating.js.map +1 -0
  152. package/dist/components/table/snice-cell-sparkline.d.ts +29 -0
  153. package/dist/components/table/snice-cell-sparkline.js +306 -0
  154. package/dist/components/table/snice-cell-sparkline.js.map +1 -0
  155. package/dist/components/table/snice-cell-text.d.ts +19 -0
  156. package/dist/components/table/snice-cell-text.js +161 -0
  157. package/dist/components/table/snice-cell-text.js.map +1 -0
  158. package/dist/components/table/snice-cell.d.ts +32 -0
  159. package/dist/components/table/snice-cell.js +458 -0
  160. package/dist/components/table/snice-cell.js.map +1 -0
  161. package/dist/components/table/snice-column.d.ts +62 -0
  162. package/dist/components/table/snice-column.js +506 -0
  163. package/dist/components/table/snice-column.js.map +1 -0
  164. package/dist/components/table/snice-header.d.ts +33 -0
  165. package/dist/components/table/snice-header.js +289 -0
  166. package/dist/components/table/snice-header.js.map +1 -0
  167. package/dist/components/table/snice-progress.d.ts +10 -0
  168. package/dist/components/table/snice-progress.js +105 -0
  169. package/dist/components/table/snice-progress.js.map +1 -0
  170. package/dist/components/table/snice-rating.d.ts +9 -0
  171. package/dist/components/table/snice-rating.js +81 -0
  172. package/dist/components/table/snice-rating.js.map +1 -0
  173. package/dist/components/table/snice-row.d.ts +43 -0
  174. package/dist/components/table/snice-row.js +353 -0
  175. package/dist/components/table/snice-row.js.map +1 -0
  176. package/dist/components/table/snice-table.d.ts +69 -0
  177. package/dist/components/table/snice-table.js +792 -0
  178. package/dist/components/table/snice-table.js.map +1 -0
  179. package/dist/components/table/snice-table.types.d.ts +137 -0
  180. package/dist/components/tabs/snice-tab-panel.d.ts +12 -0
  181. package/dist/components/tabs/snice-tab-panel.js +87 -0
  182. package/dist/components/tabs/snice-tab-panel.js.map +1 -0
  183. package/dist/components/tabs/snice-tab.d.ts +13 -0
  184. package/dist/components/tabs/snice-tab.js +98 -0
  185. package/dist/components/tabs/snice-tab.js.map +1 -0
  186. package/dist/components/tabs/snice-tabs.d.ts +34 -0
  187. package/dist/components/tabs/snice-tabs.js +375 -0
  188. package/dist/components/tabs/snice-tabs.js.map +1 -0
  189. package/dist/components/tabs/snice-tabs.types.d.ts +23 -0
  190. package/dist/components/toast/snice-toast-container.d.ts +25 -0
  191. package/dist/components/toast/snice-toast-container.js +252 -0
  192. package/dist/components/toast/snice-toast-container.js.map +1 -0
  193. package/dist/components/toast/snice-toast.d.ts +23 -0
  194. package/dist/components/toast/snice-toast.js +321 -0
  195. package/dist/components/toast/snice-toast.js.map +1 -0
  196. package/dist/components/toast/snice-toast.types.d.ts +30 -0
  197. package/dist/components/tooltip/snice-tooltip.d.ts +50 -0
  198. package/dist/components/tooltip/snice-tooltip.js +644 -0
  199. package/dist/components/tooltip/snice-tooltip.js.map +1 -0
  200. package/dist/components/tooltip/snice-tooltip.types.d.ts +18 -0
  201. package/dist/components/transitions.d.ts +11 -0
  202. package/dist/components/transitions.js +72 -0
  203. package/dist/components/transitions.js.map +1 -0
  204. package/dist/index.cjs +1 -1
  205. package/dist/index.esm.js +1 -1
  206. package/dist/index.esm.min.js +1 -1
  207. package/dist/index.iife.js +1 -1
  208. package/dist/index.iife.min.js +1 -1
  209. package/dist/symbols.esm.js +1 -1
  210. package/dist/transitions.esm.js +1 -1
  211. package/package.json +10 -6
  212. package/components/accordion/demo.html +0 -403
  213. package/components/accordion/snice-accordion-item.css +0 -85
  214. package/components/accordion/snice-accordion-item.ts +0 -226
  215. package/components/accordion/snice-accordion.css +0 -31
  216. package/components/accordion/snice-accordion.ts +0 -182
  217. package/components/accordion/snice-accordion.types.ts +0 -32
  218. package/components/alert/demo.html +0 -445
  219. package/components/alert/snice-alert.css +0 -195
  220. package/components/alert/snice-alert.ts +0 -141
  221. package/components/avatar/demo.html +0 -598
  222. package/components/avatar/snice-avatar.css +0 -131
  223. package/components/avatar/snice-avatar.ts +0 -136
  224. package/components/avatar/snice-avatar.types.ts +0 -13
  225. package/components/badge/demo.html +0 -523
  226. package/components/badge/snice-badge.css +0 -161
  227. package/components/badge/snice-badge.ts +0 -117
  228. package/components/breadcrumbs/demo.html +0 -404
  229. package/components/breadcrumbs/snice-breadcrumbs.css +0 -133
  230. package/components/breadcrumbs/snice-breadcrumbs.ts +0 -191
  231. package/components/breadcrumbs/snice-breadcrumbs.types.ts +0 -26
  232. package/components/breadcrumbs/snice-crumb.ts +0 -26
  233. package/components/button/demo.html +0 -42
  234. package/components/button/snice-button.css +0 -230
  235. package/components/button/snice-button.ts +0 -169
  236. package/components/button/snice-button.types.ts +0 -25
  237. package/components/card/demo.html +0 -525
  238. package/components/card/snice-card.css +0 -140
  239. package/components/card/snice-card.ts +0 -102
  240. package/components/checkbox/demo.html +0 -253
  241. package/components/checkbox/snice-checkbox.css +0 -164
  242. package/components/checkbox/snice-checkbox.ts +0 -223
  243. package/components/checkbox/snice-checkbox.types.ts +0 -22
  244. package/components/chip/demo.html +0 -383
  245. package/components/chip/snice-chip.css +0 -195
  246. package/components/chip/snice-chip.ts +0 -139
  247. package/components/chip/snice-chip.types.ts +0 -15
  248. package/components/date-picker/README.md +0 -233
  249. package/components/date-picker/demo.html +0 -191
  250. package/components/date-picker/snice-date-picker.css +0 -330
  251. package/components/date-picker/snice-date-picker.ts +0 -777
  252. package/components/date-picker/snice-date-picker.types.ts +0 -83
  253. package/components/divider/demo.html +0 -233
  254. package/components/divider/snice-divider.css +0 -155
  255. package/components/divider/snice-divider.ts +0 -69
  256. package/components/drawer/demo.html +0 -328
  257. package/components/drawer/snice-drawer.css +0 -476
  258. package/components/drawer/snice-drawer.ts +0 -287
  259. package/components/drawer/snice-drawer.types.ts +0 -17
  260. package/components/global.d.ts +0 -14
  261. package/components/input/demo.html +0 -303
  262. package/components/input/snice-input.css +0 -257
  263. package/components/input/snice-input.ts +0 -442
  264. package/components/input/snice-input.types.ts +0 -59
  265. package/components/input/test.html +0 -77
  266. package/components/layout/README.md +0 -260
  267. package/components/layout/demo.html +0 -538
  268. package/components/layout/snice-layout-blog.css +0 -129
  269. package/components/layout/snice-layout-blog.ts +0 -48
  270. package/components/layout/snice-layout-card.css +0 -104
  271. package/components/layout/snice-layout-card.ts +0 -35
  272. package/components/layout/snice-layout-centered.css +0 -51
  273. package/components/layout/snice-layout-centered.ts +0 -22
  274. package/components/layout/snice-layout-dashboard.css +0 -98
  275. package/components/layout/snice-layout-dashboard.ts +0 -45
  276. package/components/layout/snice-layout-fullscreen.css +0 -72
  277. package/components/layout/snice-layout-fullscreen.ts +0 -34
  278. package/components/layout/snice-layout-landing.css +0 -92
  279. package/components/layout/snice-layout-landing.ts +0 -47
  280. package/components/layout/snice-layout-minimal.css +0 -16
  281. package/components/layout/snice-layout-minimal.ts +0 -19
  282. package/components/layout/snice-layout-sidebar.css +0 -117
  283. package/components/layout/snice-layout-sidebar.ts +0 -48
  284. package/components/layout/snice-layout-split.css +0 -103
  285. package/components/layout/snice-layout-split.ts +0 -29
  286. package/components/layout/snice-layout.css +0 -72
  287. package/components/layout/snice-layout.ts +0 -35
  288. package/components/login/demo-auth-controller.ts +0 -185
  289. package/components/login/demo.html +0 -470
  290. package/components/login/snice-login.css +0 -204
  291. package/components/login/snice-login.ts +0 -326
  292. package/components/login/snice-login.types.ts +0 -29
  293. package/components/modal/demo.html +0 -291
  294. package/components/modal/snice-modal.css +0 -203
  295. package/components/modal/snice-modal.ts +0 -233
  296. package/components/modal/snice-modal.types.ts +0 -21
  297. package/components/pagination/demo.html +0 -395
  298. package/components/pagination/snice-pagination.ts +0 -333
  299. package/components/pagination/snice-pagination.types.ts +0 -21
  300. package/components/progress/demo.html +0 -510
  301. package/components/progress/snice-progress.css +0 -267
  302. package/components/progress/snice-progress.ts +0 -247
  303. package/components/progress/snice-progress.types.ts +0 -19
  304. package/components/radio/demo.html +0 -287
  305. package/components/radio/snice-radio.css +0 -171
  306. package/components/radio/snice-radio.ts +0 -218
  307. package/components/radio/snice-radio.types.ts +0 -21
  308. package/components/select/demo.html +0 -511
  309. package/components/select/snice-option.ts +0 -52
  310. package/components/select/snice-select.css +0 -392
  311. package/components/select/snice-select.ts +0 -796
  312. package/components/select/snice-select.types.ts +0 -55
  313. package/components/skeleton/demo.html +0 -514
  314. package/components/skeleton/snice-skeleton.css +0 -109
  315. package/components/skeleton/snice-skeleton.ts +0 -126
  316. package/components/switch/demo.html +0 -284
  317. package/components/switch/snice-switch.css +0 -221
  318. package/components/switch/snice-switch.ts +0 -229
  319. package/components/switch/snice-switch.types.ts +0 -23
  320. package/components/symbols.ts +0 -23
  321. package/components/table/demo-table-controller.ts +0 -100
  322. package/components/table/demo.html +0 -480
  323. package/components/table/snice-cell-boolean.ts +0 -112
  324. package/components/table/snice-cell-date.ts +0 -210
  325. package/components/table/snice-cell-duration.ts +0 -91
  326. package/components/table/snice-cell-filesize.ts +0 -90
  327. package/components/table/snice-cell-number.ts +0 -165
  328. package/components/table/snice-cell-progress.ts +0 -83
  329. package/components/table/snice-cell-rating.ts +0 -82
  330. package/components/table/snice-cell-sparkline.ts +0 -253
  331. package/components/table/snice-cell-text.ts +0 -125
  332. package/components/table/snice-cell.css +0 -296
  333. package/components/table/snice-cell.ts +0 -473
  334. package/components/table/snice-column.ts +0 -353
  335. package/components/table/snice-header.css +0 -243
  336. package/components/table/snice-header.ts +0 -261
  337. package/components/table/snice-progress.ts +0 -66
  338. package/components/table/snice-rating.ts +0 -45
  339. package/components/table/snice-row.css +0 -255
  340. package/components/table/snice-row.ts +0 -331
  341. package/components/table/snice-table.css +0 -241
  342. package/components/table/snice-table.ts +0 -737
  343. package/components/table/snice-table.types.ts +0 -158
  344. package/components/tabs/demo.html +0 -487
  345. package/components/tabs/snice-tab-panel.css +0 -264
  346. package/components/tabs/snice-tab-panel.ts +0 -47
  347. package/components/tabs/snice-tab.css +0 -96
  348. package/components/tabs/snice-tab.ts +0 -65
  349. package/components/tabs/snice-tabs.css +0 -189
  350. package/components/tabs/snice-tabs.ts +0 -332
  351. package/components/tabs/snice-tabs.types.ts +0 -28
  352. package/components/theme/theme.css +0 -234
  353. package/components/toast/demo.html +0 -329
  354. package/components/toast/snice-toast-container.ts +0 -256
  355. package/components/toast/snice-toast.css +0 -213
  356. package/components/toast/snice-toast.ts +0 -276
  357. package/components/toast/snice-toast.types.ts +0 -35
  358. package/components/tooltip/demo.html +0 -350
  359. package/components/tooltip/snice-tooltip-portal.css +0 -79
  360. package/components/tooltip/snice-tooltip.css +0 -117
  361. package/components/tooltip/snice-tooltip.ts +0 -612
  362. package/components/tooltip/snice-tooltip.types.ts +0 -32
  363. package/components/transitions.ts +0 -94
  364. package/components/tsconfig.json +0 -18
package/components/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
- ```