snice 2.1.4 → 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 (370) 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 +16 -20
  205. package/dist/index.cjs.map +1 -1
  206. package/dist/index.cjs.min.map +1 -1
  207. package/dist/index.esm.js +16 -20
  208. package/dist/index.esm.js.map +1 -1
  209. package/dist/index.esm.min.js +3 -3
  210. package/dist/index.esm.min.js.map +1 -1
  211. package/dist/index.iife.js +16 -20
  212. package/dist/index.iife.js.map +1 -1
  213. package/dist/index.iife.min.js +3 -3
  214. package/dist/index.iife.min.js.map +1 -1
  215. package/dist/symbols.esm.js +1 -1
  216. package/dist/transitions.esm.js +1 -1
  217. package/package.json +10 -6
  218. package/components/accordion/demo.html +0 -403
  219. package/components/accordion/snice-accordion-item.css +0 -85
  220. package/components/accordion/snice-accordion-item.ts +0 -226
  221. package/components/accordion/snice-accordion.css +0 -31
  222. package/components/accordion/snice-accordion.ts +0 -182
  223. package/components/accordion/snice-accordion.types.ts +0 -32
  224. package/components/alert/demo.html +0 -445
  225. package/components/alert/snice-alert.css +0 -195
  226. package/components/alert/snice-alert.ts +0 -141
  227. package/components/avatar/demo.html +0 -598
  228. package/components/avatar/snice-avatar.css +0 -131
  229. package/components/avatar/snice-avatar.ts +0 -136
  230. package/components/avatar/snice-avatar.types.ts +0 -13
  231. package/components/badge/demo.html +0 -523
  232. package/components/badge/snice-badge.css +0 -161
  233. package/components/badge/snice-badge.ts +0 -117
  234. package/components/breadcrumbs/demo.html +0 -404
  235. package/components/breadcrumbs/snice-breadcrumbs.css +0 -133
  236. package/components/breadcrumbs/snice-breadcrumbs.ts +0 -191
  237. package/components/breadcrumbs/snice-breadcrumbs.types.ts +0 -26
  238. package/components/breadcrumbs/snice-crumb.ts +0 -26
  239. package/components/button/demo.html +0 -42
  240. package/components/button/snice-button.css +0 -230
  241. package/components/button/snice-button.ts +0 -169
  242. package/components/button/snice-button.types.ts +0 -25
  243. package/components/card/demo.html +0 -525
  244. package/components/card/snice-card.css +0 -140
  245. package/components/card/snice-card.ts +0 -102
  246. package/components/checkbox/demo.html +0 -253
  247. package/components/checkbox/snice-checkbox.css +0 -164
  248. package/components/checkbox/snice-checkbox.ts +0 -223
  249. package/components/checkbox/snice-checkbox.types.ts +0 -22
  250. package/components/chip/demo.html +0 -383
  251. package/components/chip/snice-chip.css +0 -195
  252. package/components/chip/snice-chip.ts +0 -139
  253. package/components/chip/snice-chip.types.ts +0 -15
  254. package/components/date-picker/README.md +0 -233
  255. package/components/date-picker/demo.html +0 -191
  256. package/components/date-picker/snice-date-picker.css +0 -330
  257. package/components/date-picker/snice-date-picker.ts +0 -777
  258. package/components/date-picker/snice-date-picker.types.ts +0 -83
  259. package/components/divider/demo.html +0 -233
  260. package/components/divider/snice-divider.css +0 -155
  261. package/components/divider/snice-divider.ts +0 -69
  262. package/components/drawer/demo.html +0 -328
  263. package/components/drawer/snice-drawer.css +0 -476
  264. package/components/drawer/snice-drawer.ts +0 -287
  265. package/components/drawer/snice-drawer.types.ts +0 -17
  266. package/components/global.d.ts +0 -14
  267. package/components/input/demo.html +0 -303
  268. package/components/input/snice-input.css +0 -257
  269. package/components/input/snice-input.ts +0 -442
  270. package/components/input/snice-input.types.ts +0 -59
  271. package/components/input/test.html +0 -77
  272. package/components/layout/README.md +0 -260
  273. package/components/layout/demo.html +0 -538
  274. package/components/layout/snice-layout-blog.css +0 -129
  275. package/components/layout/snice-layout-blog.ts +0 -48
  276. package/components/layout/snice-layout-card.css +0 -104
  277. package/components/layout/snice-layout-card.ts +0 -35
  278. package/components/layout/snice-layout-centered.css +0 -51
  279. package/components/layout/snice-layout-centered.ts +0 -22
  280. package/components/layout/snice-layout-dashboard.css +0 -98
  281. package/components/layout/snice-layout-dashboard.ts +0 -45
  282. package/components/layout/snice-layout-fullscreen.css +0 -72
  283. package/components/layout/snice-layout-fullscreen.ts +0 -34
  284. package/components/layout/snice-layout-landing.css +0 -92
  285. package/components/layout/snice-layout-landing.ts +0 -47
  286. package/components/layout/snice-layout-minimal.css +0 -16
  287. package/components/layout/snice-layout-minimal.ts +0 -19
  288. package/components/layout/snice-layout-sidebar.css +0 -117
  289. package/components/layout/snice-layout-sidebar.ts +0 -48
  290. package/components/layout/snice-layout-split.css +0 -103
  291. package/components/layout/snice-layout-split.ts +0 -29
  292. package/components/layout/snice-layout.css +0 -72
  293. package/components/layout/snice-layout.ts +0 -35
  294. package/components/login/demo-auth-controller.ts +0 -185
  295. package/components/login/demo.html +0 -470
  296. package/components/login/snice-login.css +0 -204
  297. package/components/login/snice-login.ts +0 -326
  298. package/components/login/snice-login.types.ts +0 -29
  299. package/components/modal/demo.html +0 -291
  300. package/components/modal/snice-modal.css +0 -203
  301. package/components/modal/snice-modal.ts +0 -233
  302. package/components/modal/snice-modal.types.ts +0 -21
  303. package/components/pagination/demo.html +0 -395
  304. package/components/pagination/snice-pagination.ts +0 -333
  305. package/components/pagination/snice-pagination.types.ts +0 -21
  306. package/components/progress/demo.html +0 -510
  307. package/components/progress/snice-progress.css +0 -267
  308. package/components/progress/snice-progress.ts +0 -247
  309. package/components/progress/snice-progress.types.ts +0 -19
  310. package/components/radio/demo.html +0 -287
  311. package/components/radio/snice-radio.css +0 -171
  312. package/components/radio/snice-radio.ts +0 -218
  313. package/components/radio/snice-radio.types.ts +0 -21
  314. package/components/select/demo.html +0 -511
  315. package/components/select/snice-option.ts +0 -52
  316. package/components/select/snice-select.css +0 -392
  317. package/components/select/snice-select.ts +0 -796
  318. package/components/select/snice-select.types.ts +0 -55
  319. package/components/skeleton/demo.html +0 -514
  320. package/components/skeleton/snice-skeleton.css +0 -109
  321. package/components/skeleton/snice-skeleton.ts +0 -126
  322. package/components/switch/demo.html +0 -284
  323. package/components/switch/snice-switch.css +0 -221
  324. package/components/switch/snice-switch.ts +0 -229
  325. package/components/switch/snice-switch.types.ts +0 -23
  326. package/components/symbols.ts +0 -23
  327. package/components/table/demo-table-controller.ts +0 -100
  328. package/components/table/demo.html +0 -480
  329. package/components/table/snice-cell-boolean.ts +0 -112
  330. package/components/table/snice-cell-date.ts +0 -210
  331. package/components/table/snice-cell-duration.ts +0 -91
  332. package/components/table/snice-cell-filesize.ts +0 -90
  333. package/components/table/snice-cell-number.ts +0 -165
  334. package/components/table/snice-cell-progress.ts +0 -83
  335. package/components/table/snice-cell-rating.ts +0 -82
  336. package/components/table/snice-cell-sparkline.ts +0 -253
  337. package/components/table/snice-cell-text.ts +0 -125
  338. package/components/table/snice-cell.css +0 -296
  339. package/components/table/snice-cell.ts +0 -473
  340. package/components/table/snice-column.ts +0 -353
  341. package/components/table/snice-header.css +0 -243
  342. package/components/table/snice-header.ts +0 -261
  343. package/components/table/snice-progress.ts +0 -66
  344. package/components/table/snice-rating.ts +0 -45
  345. package/components/table/snice-row.css +0 -255
  346. package/components/table/snice-row.ts +0 -331
  347. package/components/table/snice-table.css +0 -241
  348. package/components/table/snice-table.ts +0 -737
  349. package/components/table/snice-table.types.ts +0 -158
  350. package/components/tabs/demo.html +0 -487
  351. package/components/tabs/snice-tab-panel.css +0 -264
  352. package/components/tabs/snice-tab-panel.ts +0 -47
  353. package/components/tabs/snice-tab.css +0 -96
  354. package/components/tabs/snice-tab.ts +0 -65
  355. package/components/tabs/snice-tabs.css +0 -189
  356. package/components/tabs/snice-tabs.ts +0 -332
  357. package/components/tabs/snice-tabs.types.ts +0 -28
  358. package/components/theme/theme.css +0 -234
  359. package/components/toast/demo.html +0 -329
  360. package/components/toast/snice-toast-container.ts +0 -256
  361. package/components/toast/snice-toast.css +0 -213
  362. package/components/toast/snice-toast.ts +0 -276
  363. package/components/toast/snice-toast.types.ts +0 -35
  364. package/components/tooltip/demo.html +0 -350
  365. package/components/tooltip/snice-tooltip-portal.css +0 -79
  366. package/components/tooltip/snice-tooltip.css +0 -117
  367. package/components/tooltip/snice-tooltip.ts +0 -612
  368. package/components/tooltip/snice-tooltip.types.ts +0 -32
  369. package/components/transitions.ts +0 -94
  370. package/components/tsconfig.json +0 -18
package/components/button/snice-button.types.ts DELETED
@@ -1,25 +0,0 @@
1
- export type ButtonVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'text';
2
- export type ButtonSize = 'small' | 'medium' | 'large';
3
- export type IconPlacement = 'start' | 'end';
4
-
5
- export interface SniceButtonElement extends HTMLElement {
6
- variant: ButtonVariant;
7
- size: ButtonSize;
8
- disabled: boolean;
9
- loading: boolean;
10
- outline: boolean;
11
- pill: boolean;
12
- circle: boolean;
13
- href: string;
14
- target: string;
15
- download: string;
16
- icon: string;
17
- iconPlacement: IconPlacement;
18
- focus(options?: FocusOptions): void;
19
- blur(): void;
20
- click(): void;
21
- }
22
-
23
- export interface ButtonClickDetail {
24
- button: SniceButtonElement;
25
- }
package/components/card/demo.html DELETED
@@ -1,525 +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>Snice Card Demo</title>
7
- <link rel="stylesheet" href="../theme/theme.css">
8
- <style>
9
- body {
10
- font-family: system-ui, -apple-system, sans-serif;
11
- padding: 40px;
12
- line-height: 1.6;
13
- background: #f5f5f5;
14
- }
15
-
16
- .container {
17
- max-width: 1200px;
18
- margin: 0 auto;
19
- }
20
-
21
- h1 {
22
- color: #333;
23
- border-bottom: 2px solid #e0e0e0;
24
- padding-bottom: 10px;
25
- }
26
-
27
- h2 {
28
- color: #555;
29
- margin-top: 30px;
30
- }
31
-
32
- .demo-section {
33
- margin: 30px 0;
34
- }
35
-
36
- .demo-label {
37
- display: block;
38
- margin-bottom: 16px;
39
- font-weight: 500;
40
- color: #666;
41
- font-size: 14px;
42
- }
43
-
44
- .card-grid {
45
- display: grid;
46
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
47
- gap: 20px;
48
- margin: 20px 0;
49
- }
50
-
51
- .card-row {
52
- display: flex;
53
- gap: 20px;
54
- margin: 20px 0;
55
- flex-wrap: wrap;
56
- }
57
-
58
- /* Card content styles */
59
- .card-title {
60
- font-size: 20px;
61
- font-weight: 600;
62
- margin: 0 0 8px 0;
63
- }
64
-
65
- .card-subtitle {
66
- color: #666;
67
- font-size: 14px;
68
- margin: 0 0 12px 0;
69
- }
70
-
71
- .card-text {
72
- color: #333;
73
- line-height: 1.5;
74
- margin: 0;
75
- }
76
-
77
- .card-image-placeholder {
78
- width: 100%;
79
- height: 180px;
80
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
81
- display: flex;
82
- align-items: center;
83
- justify-content: center;
84
- color: white;
85
- font-size: 18px;
86
- font-weight: 600;
87
- }
88
-
89
- .card-actions {
90
- display: flex;
91
- gap: 8px;
92
- margin-top: 16px;
93
- }
94
-
95
- .card-button {
96
- padding: 8px 16px;
97
- background: #3b82f6;
98
- color: white;
99
- border: none;
100
- border-radius: 4px;
101
- cursor: pointer;
102
- font-size: 14px;
103
- transition: background 0.2s;
104
- }
105
-
106
- .card-button:hover {
107
- background: #2563eb;
108
- }
109
-
110
- .card-button--secondary {
111
- background: transparent;
112
- color: #3b82f6;
113
- border: 1px solid #3b82f6;
114
- }
115
-
116
- .card-button--secondary:hover {
117
- background: #eff6ff;
118
- }
119
-
120
- .stats-grid {
121
- display: grid;
122
- grid-template-columns: repeat(3, 1fr);
123
- gap: 12px;
124
- margin: 16px 0;
125
- }
126
-
127
- .stat-item {
128
- text-align: center;
129
- }
130
-
131
- .stat-value {
132
- font-size: 24px;
133
- font-weight: 600;
134
- color: #333;
135
- }
136
-
137
- .stat-label {
138
- font-size: 12px;
139
- color: #666;
140
- text-transform: uppercase;
141
- letter-spacing: 0.5px;
142
- }
143
-
144
- .user-avatar {
145
- width: 48px;
146
- height: 48px;
147
- border-radius: 50%;
148
- background: #6366f1;
149
- display: flex;
150
- align-items: center;
151
- justify-content: center;
152
- color: white;
153
- font-weight: 600;
154
- float: left;
155
- margin-right: 12px;
156
- }
157
-
158
- .controls {
159
- display: flex;
160
- gap: 10px;
161
- margin: 20px 0;
162
- flex-wrap: wrap;
163
- }
164
-
165
- button {
166
- padding: 8px 16px;
167
- background: #3b82f6;
168
- color: white;
169
- border: none;
170
- border-radius: 4px;
171
- cursor: pointer;
172
- font-size: 14px;
173
- transition: background 0.2s;
174
- }
175
-
176
- button:hover {
177
- background: #2563eb;
178
- }
179
-
180
- select {
181
- padding: 8px 12px;
182
- border: 1px solid #d1d5db;
183
- border-radius: 4px;
184
- font-size: 14px;
185
- }
186
-
187
- .price-tag {
188
- font-size: 24px;
189
- font-weight: 600;
190
- color: #10b981;
191
- margin: 12px 0;
192
- }
193
-
194
- .badge {
195
- display: inline-block;
196
- padding: 4px 8px;
197
- background: #fee2e2;
198
- color: #991b1b;
199
- border-radius: 4px;
200
- font-size: 12px;
201
- font-weight: 600;
202
- margin-bottom: 8px;
203
- }
204
-
205
- code {
206
- background: #f0f0f0;
207
- padding: 2px 6px;
208
- border-radius: 3px;
209
- font-size: 0.9em;
210
- }
211
- </style>
212
- </head>
213
- <body>
214
- <div class="container">
215
- <h1>Snice Card Component Demo</h1>
216
-
217
- <div class="demo-section">
218
- <h2>Card Variants</h2>
219
-
220
- <div class="card-grid">
221
- <snice-card variant="elevated">
222
- <h3 slot="header">Elevated Card</h3>
223
- <p>This is an elevated card with a shadow. It appears to float above the surface.</p>
224
- <div slot="footer">
225
- <button class="card-button">Action</button>
226
- </div>
227
- </snice-card>
228
-
229
- <snice-card variant="bordered">
230
- <h3 slot="header">Bordered Card</h3>
231
- <p>This is a bordered card with a visible border. Great for clean, defined layouts.</p>
232
- <div slot="footer">
233
- <button class="card-button">Action</button>
234
- </div>
235
- </snice-card>
236
-
237
- <snice-card variant="flat">
238
- <h3 slot="header">Flat Card</h3>
239
- <p>This is a flat card with a subtle background. Perfect for minimal designs.</p>
240
- <div slot="footer">
241
- <button class="card-button">Action</button>
242
- </div>
243
- </snice-card>
244
- </div>
245
- </div>
246
-
247
- <div class="demo-section">
248
- <h2>Card Sizes</h2>
249
-
250
- <div class="card-row">
251
- <snice-card size="small" variant="bordered" style="width: 250px;">
252
- <h4 slot="header">Small Card</h4>
253
- <p>Compact padding and smaller border radius.</p>
254
- </snice-card>
255
-
256
- <snice-card size="medium" variant="bordered" style="width: 280px;">
257
- <h4 slot="header">Medium Card</h4>
258
- <p>Default size with standard padding and border radius.</p>
259
- </snice-card>
260
-
261
- <snice-card size="large" variant="bordered" style="width: 320px;">
262
- <h4 slot="header">Large Card</h4>
263
- <p>Generous padding and larger border radius for spacious layouts.</p>
264
- </snice-card>
265
- </div>
266
- </div>
267
-
268
- <div class="demo-section">
269
- <h2>Clickable Cards</h2>
270
-
271
- <div class="card-grid">
272
- <snice-card variant="elevated" clickable>
273
- <h3 class="card-title">Clickable Card</h3>
274
- <p class="card-text">Click this card to select it. It will lift on hover and can be toggled.</p>
275
- </snice-card>
276
-
277
- <snice-card variant="bordered" clickable selected>
278
- <h3 class="card-title">Pre-selected Card</h3>
279
- <p class="card-text">This card starts selected. Click to deselect.</p>
280
- </snice-card>
281
-
282
- <snice-card variant="flat" clickable>
283
- <h3 class="card-title">Flat Clickable</h3>
284
- <p class="card-text">Even flat cards can be interactive with hover effects.</p>
285
- </snice-card>
286
-
287
- <snice-card variant="elevated" clickable disabled>
288
- <h3 class="card-title">Disabled Card</h3>
289
- <p class="card-text">This card is disabled and cannot be clicked.</p>
290
- </snice-card>
291
- </div>
292
- </div>
293
-
294
- <div class="demo-section">
295
- <h2>Cards with Images</h2>
296
-
297
- <div class="card-grid">
298
- <snice-card variant="elevated">
299
- <div slot="image" class="card-image-placeholder">Image Placeholder</div>
300
- <h3 class="card-title">Mountain View</h3>
301
- <p class="card-text">Beautiful scenery from the mountain top with breathtaking views.</p>
302
- <div class="card-actions">
303
- <button class="card-button">View</button>
304
- <button class="card-button card-button--secondary">Share</button>
305
- </div>
306
- </snice-card>
307
-
308
- <snice-card variant="elevated">
309
- <div slot="image" class="card-image-placeholder" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">Product Image</div>
310
- <div class="badge">Sale</div>
311
- <h3 class="card-title">Premium Headphones</h3>
312
- <p class="price-tag">$199.99</p>
313
- <p class="card-text">Wireless noise-canceling headphones with 30-hour battery life.</p>
314
- </snice-card>
315
-
316
- <snice-card variant="elevated">
317
- <div slot="image" class="card-image-placeholder" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">Beach</div>
318
- <h3 class="card-title">Summer Vacation</h3>
319
- <p class="card-subtitle">5 days • 4 nights</p>
320
- <p class="card-text">Enjoy the perfect beach getaway with all-inclusive resort amenities.</p>
321
- </snice-card>
322
- </div>
323
- </div>
324
-
325
- <div class="demo-section">
326
- <h2>Content Layouts</h2>
327
-
328
- <div class="card-grid">
329
- <snice-card variant="bordered">
330
- <h3 slot="header">User Profile</h3>
331
- <div class="user-avatar">JD</div>
332
- <h4 style="margin: 0;">John Doe</h4>
333
- <p style="margin: 4px 0; color: #666; font-size: 14px;">Software Developer</p>
334
- <p style="clear: both; padding-top: 12px;">Building amazing web applications with modern technologies.</p>
335
- <div slot="footer" style="display: flex; justify-content: space-between;">
336
- <span style="color: #666; font-size: 14px;">Joined 2024</span>
337
- <button class="card-button">Follow</button>
338
- </div>
339
- </snice-card>
340
-
341
- <snice-card variant="bordered">
342
- <h3 slot="header">Statistics</h3>
343
- <div class="stats-grid">
344
- <div class="stat-item">
345
- <div class="stat-value">1.2K</div>
346
- <div class="stat-label">Users</div>
347
- </div>
348
- <div class="stat-item">
349
- <div class="stat-value">845</div>
350
- <div class="stat-label">Active</div>
351
- </div>
352
- <div class="stat-item">
353
- <div class="stat-value">92%</div>
354
- <div class="stat-label">Growth</div>
355
- </div>
356
- </div>
357
- <div slot="footer">
358
- <button class="card-button" style="width: 100%;">View Details</button>
359
- </div>
360
- </snice-card>
361
-
362
- <snice-card variant="flat">
363
- <h3 slot="header">Quick Actions</h3>
364
- <div style="display: flex; flex-direction: column; gap: 8px;">
365
- <button class="card-button">Create New Project</button>
366
- <button class="card-button card-button--secondary">Import Data</button>
367
- <button class="card-button card-button--secondary">Export Report</button>
368
- <button class="card-button card-button--secondary">Settings</button>
369
- </div>
370
- </snice-card>
371
- </div>
372
- </div>
373
-
374
- <div class="demo-section">
375
- <h2>Interactive Demo</h2>
376
-
377
- <div class="controls">
378
- <select id="variant-select">
379
- <option value="elevated">Elevated</option>
380
- <option value="bordered">Bordered</option>
381
- <option value="flat">Flat</option>
382
- </select>
383
-
384
- <select id="size-select">
385
- <option value="small">Small</option>
386
- <option value="medium" selected>Medium</option>
387
- <option value="large">Large</option>
388
- </select>
389
-
390
- <button onclick="toggleClickable()">Toggle Clickable</button>
391
- <button onclick="toggleSelected()">Toggle Selected</button>
392
- <button onclick="toggleDisabled()">Toggle Disabled</button>
393
- </div>
394
-
395
- <div style="max-width: 400px; margin: 20px 0;">
396
- <snice-card id="demo-card" variant="elevated" size="medium">
397
- <h3 slot="header">Interactive Card</h3>
398
- <p>This card demonstrates all the interactive properties. Try changing the settings above to see how the card responds.</p>
399
- <p style="margin-top: 12px; font-size: 14px; color: #666;">
400
- Current state: <code id="card-state">Default</code>
401
- </p>
402
- <div slot="footer">
403
- <button class="card-button">Sample Action</button>
404
- </div>
405
- </snice-card>
406
- </div>
407
- </div>
408
-
409
- <div class="demo-section">
410
- <h2>Real-world Examples</h2>
411
-
412
- <span class="demo-label">Blog Post Cards</span>
413
- <div class="card-grid">
414
- <snice-card variant="elevated" clickable>
415
- <div slot="image" class="card-image-placeholder" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">Tech</div>
416
- <span style="color: #6366f1; font-size: 12px; font-weight: 600;">TECHNOLOGY</span>
417
- <h3 class="card-title">The Future of Web Development</h3>
418
- <p class="card-text">Exploring emerging trends and technologies shaping the future of web development...</p>
419
- <p style="margin-top: 12px; color: #666; font-size: 14px;">5 min read • March 15, 2024</p>
420
- </snice-card>
421
-
422
- <snice-card variant="elevated" clickable>
423
- <div slot="image" class="card-image-placeholder" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">Design</div>
424
- <span style="color: #ec4899; font-size: 12px; font-weight: 600;">DESIGN</span>
425
- <h3 class="card-title">UI/UX Best Practices</h3>
426
- <p class="card-text">Essential design principles for creating intuitive and beautiful user interfaces...</p>
427
- <p style="margin-top: 12px; color: #666; font-size: 14px;">8 min read • March 14, 2024</p>
428
- </snice-card>
429
-
430
- <snice-card variant="elevated" clickable>
431
- <div slot="image" class="card-image-placeholder" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">Dev</div>
432
- <span style="color: #0ea5e9; font-size: 12px; font-weight: 600;">DEVELOPMENT</span>
433
- <h3 class="card-title">Building Scalable Applications</h3>
434
- <p class="card-text">Learn how to architect applications that can grow with your business needs...</p>
435
- <p style="margin-top: 12px; color: #666; font-size: 14px;">12 min read • March 13, 2024</p>
436
- </snice-card>
437
- </div>
438
-
439
- <span class="demo-label" style="margin-top: 30px;">Dashboard Widgets</span>
440
- <div class="card-grid">
441
- <snice-card variant="flat">
442
- <div style="display: flex; justify-content: space-between; align-items: center;">
443
- <div>
444
- <p style="margin: 0; color: #666; font-size: 14px;">Total Revenue</p>
445
- <p style="margin: 4px 0; font-size: 28px; font-weight: 600;">$45,231</p>
446
- <p style="margin: 0; color: #10b981; font-size: 14px;">↑ 12% from last month</p>
447
- </div>
448
- <div style="font-size: 40px;">💰</div>
449
- </div>
450
- </snice-card>
451
-
452
- <snice-card variant="flat">
453
- <div style="display: flex; justify-content: space-between; align-items: center;">
454
- <div>
455
- <p style="margin: 0; color: #666; font-size: 14px;">Active Users</p>
456
- <p style="margin: 4px 0; font-size: 28px; font-weight: 600;">2,847</p>
457
- <p style="margin: 0; color: #10b981; font-size: 14px;">↑ 8% from last week</p>
458
- </div>
459
- <div style="font-size: 40px;">👥</div>
460
- </div>
461
- </snice-card>
462
-
463
- <snice-card variant="flat">
464
- <div style="display: flex; justify-content: space-between; align-items: center;">
465
- <div>
466
- <p style="margin: 0; color: #666; font-size: 14px;">Conversion Rate</p>
467
- <p style="margin: 4px 0; font-size: 28px; font-weight: 600;">3.2%</p>
468
- <p style="margin: 0; color: #ef4444; font-size: 14px;">↓ 2% from last month</p>
469
- </div>
470
- <div style="font-size: 40px;">📊</div>
471
- </div>
472
- </snice-card>
473
- </div>
474
- </div>
475
- </div>
476
-
477
- <script type="module">
478
- import './snice-card.ts';
479
-
480
- const demoCard = document.getElementById('demo-card');
481
-
482
- window.toggleClickable = function() {
483
- demoCard.clickable = !demoCard.clickable;
484
- updateState();
485
- };
486
-
487
- window.toggleSelected = function() {
488
- demoCard.selected = !demoCard.selected;
489
- updateState();
490
- };
491
-
492
- window.toggleDisabled = function() {
493
- demoCard.disabled = !demoCard.disabled;
494
- updateState();
495
- };
496
-
497
- document.getElementById('variant-select').addEventListener('change', (e) => {
498
- demoCard.variant = e.target.value;
499
- updateState();
500
- });
501
-
502
- document.getElementById('size-select').addEventListener('change', (e) => {
503
- demoCard.size = e.target.value;
504
- updateState();
505
- });
506
-
507
- function updateState() {
508
- const states = [];
509
- if (demoCard.clickable) states.push('Clickable');
510
- if (demoCard.selected) states.push('Selected');
511
- if (demoCard.disabled) states.push('Disabled');
512
-
513
- document.getElementById('card-state').textContent =
514
- states.length > 0 ? states.join(', ') : 'Default';
515
- }
516
-
517
- // Log card click events
518
- document.querySelectorAll('snice-card[clickable]').forEach(card => {
519
- card.addEventListener('card-click', (e) => {
520
- console.log('Card clicked:', e.detail);
521
- });
522
- });
523
- </script>
524
- </body>
525
- </html>
package/components/card/snice-card.css DELETED
@@ -1,140 +0,0 @@
1
- :host {
2
- display: block;
3
- --card-padding: 1rem; /* 16px */
4
- --card-border-radius: 8px;
5
- --card-bg: white;
6
- --card-border-color: rgb(var(--snice-color-gray-200, 226 226 226));
7
- --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
8
- --card-hover-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
9
- }
10
-
11
- .card {
12
- background: var(--card-bg);
13
- border-radius: var(--card-border-radius);
14
- overflow: hidden;
15
- position: relative;
16
- height: 100%;
17
- display: flex;
18
- flex-direction: column;
19
- transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
20
- }
21
-
22
- /* Variants */
23
- :host([variant="elevated"]) .card {
24
- box-shadow: var(--card-shadow);
25
- border: 1px solid transparent;
26
- }
27
-
28
- :host([variant="bordered"]) .card {
29
- border: 1px solid var(--card-border-color);
30
- box-shadow: none;
31
- }
32
-
33
- :host([variant="flat"]) .card {
34
- border: none;
35
- box-shadow: none;
36
- background: rgb(var(--snice-color-gray-50, 250 250 250));
37
- }
38
-
39
- /* Clickable state */
40
- :host([clickable]) .card {
41
- cursor: pointer;
42
- user-select: none;
43
- }
44
-
45
- :host([clickable]:not([disabled])) .card:hover {
46
- transform: translateY(-2px);
47
- }
48
-
49
- :host([clickable][variant="elevated"]:not([disabled])) .card:hover {
50
- box-shadow: var(--card-hover-shadow);
51
- }
52
-
53
- :host([clickable][variant="bordered"]:not([disabled])) .card:hover {
54
- border-color: rgb(var(--snice-color-blue-500, 59 130 246));
55
- }
56
-
57
- :host([clickable][variant="flat"]:not([disabled])) .card:hover {
58
- background: rgb(var(--snice-color-gray-100, 241 241 241));
59
- }
60
-
61
- :host([clickable]:not([disabled])) .card:active {
62
- transform: translateY(0);
63
- }
64
-
65
- /* Selected state */
66
- :host([selected]) .card {
67
- border-color: rgb(var(--snice-color-blue-500, 59 130 246));
68
- }
69
-
70
- :host([selected][variant="elevated"]) .card,
71
- :host([selected][variant="bordered"]) .card {
72
- border-width: 2px;
73
- border-color: rgb(var(--snice-color-blue-500, 59 130 246));
74
- }
75
-
76
- :host([selected][variant="flat"]) .card {
77
- background: rgb(var(--snice-color-blue-50, 239 246 255));
78
- border: 2px solid rgb(var(--snice-color-blue-500, 59 130 246));
79
- }
80
-
81
- /* Disabled state */
82
- :host([disabled]) {
83
- pointer-events: none;
84
- opacity: 0.5;
85
- }
86
-
87
- :host([disabled]) .card {
88
- cursor: not-allowed;
89
- }
90
-
91
- /* Sizes */
92
- :host([size="small"]) {
93
- --card-padding: 12px;
94
- --card-border-radius: 6px;
95
- }
96
-
97
- :host([size="large"]) {
98
- --card-padding: 24px;
99
- --card-border-radius: 12px;
100
- }
101
-
102
- /* Card sections */
103
- .card-header {
104
- padding: var(--card-padding);
105
- border-bottom: 1px solid var(--card-border-color);
106
- }
107
-
108
- .card-body {
109
- flex: 1;
110
- padding: var(--card-padding);
111
- }
112
-
113
- .card-footer {
114
- padding: var(--card-padding);
115
- border-top: 1px solid var(--card-border-color);
116
- }
117
-
118
- /* Slotted image styling */
119
- ::slotted([slot="image"]) {
120
- width: 100%;
121
- height: auto;
122
- display: block;
123
- border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
124
- }
125
-
126
- /* When header exists right after image */
127
- .card-image-slot + .card-header:not([hidden]) {
128
- border-radius: 0;
129
- }
130
-
131
- /* Hidden attribute support */
132
- [hidden] {
133
- display: none !important;
134
- }
135
-
136
- /* Focus state */
137
- :host([clickable]) .card:focus-visible {
138
- outline: 2px solid rgb(var(--snice-color-blue-500, 59 130 246));
139
- outline-offset: 2px;
140
- }