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/skeleton/snice-skeleton.ts DELETED
@@ -1,126 +0,0 @@
1
- import { element, property, watch, ready } from 'snice';
2
- import css from './snice-skeleton.css?inline';
3
- import type { SkeletonVariant, SkeletonAnimation, SniceSkeletonElement } from './snice-skeleton.types';
4
-
5
- @element('snice-skeleton')
6
- export class SniceSkeleton extends HTMLElement implements SniceSkeletonElement {
7
- @property({ reflect: true })
8
- variant: SkeletonVariant = 'text';
9
-
10
- @property({ reflect: true })
11
- width = '';
12
-
13
- @property({ reflect: true })
14
- height = '';
15
-
16
- @property({ reflect: true })
17
- animation: SkeletonAnimation = 'wave';
18
-
19
- @property({ type: Number, reflect: true })
20
- count = 1;
21
-
22
- @property({ reflect: true })
23
- spacing = '8px';
24
-
25
- html() {
26
- const items = Array(this.count).fill(0);
27
-
28
- return /*html*/`
29
- <div class="skeleton-container" style="gap: ${this.spacing}">
30
- ${items.map(() => /*html*/`
31
- <div class="skeleton skeleton--${this.variant} skeleton--${this.animation}"
32
- style="${this.getInlineStyles()}"
33
- role="status"
34
- aria-label="Loading...">
35
- <span class="skeleton-screen-reader">Loading...</span>
36
- </div>
37
- `).join('')}
38
- </div>
39
- `;
40
- }
41
-
42
- css() {
43
- return css;
44
- }
45
-
46
- @ready()
47
- init() {
48
- this.updateDimensions();
49
- }
50
-
51
- @watch('width', 'height')
52
- updateDimensions() {
53
- const container = this.shadowRoot?.querySelector('.skeleton-container');
54
- if (!container) return;
55
-
56
- const skeletons = container.querySelectorAll('.skeleton');
57
- skeletons.forEach(skeleton => {
58
- (skeleton as HTMLElement).style.cssText = this.getInlineStyles();
59
- });
60
- }
61
-
62
- @watch('variant')
63
- updateVariant() {
64
- // Re-render when variant changes to apply proper default dimensions
65
- this.render();
66
- }
67
-
68
- private getInlineStyles(): string {
69
- const styles: string[] = [];
70
-
71
- // Apply width
72
- if (this.width) {
73
- styles.push(`width: ${this.width}`);
74
- } else {
75
- // Default widths based on variant
76
- switch (this.variant) {
77
- case 'circular':
78
- styles.push('width: 40px');
79
- break;
80
- case 'rectangular':
81
- case 'rounded':
82
- styles.push('width: 100%');
83
- break;
84
- case 'text':
85
- styles.push('width: 100%');
86
- break;
87
- }
88
- }
89
-
90
- // Apply height
91
- if (this.height) {
92
- styles.push(`height: ${this.height}`);
93
- } else {
94
- // Default heights based on variant
95
- switch (this.variant) {
96
- case 'circular':
97
- styles.push('height: 40px');
98
- break;
99
- case 'rectangular':
100
- case 'rounded':
101
- styles.push('height: 120px');
102
- break;
103
- case 'text':
104
- styles.push('height: 20px');
105
- break;
106
- }
107
- }
108
-
109
- return styles.join('; ');
110
- }
111
-
112
- private render() {
113
- const shadow = this.shadowRoot;
114
- if (shadow) {
115
- shadow.innerHTML = '';
116
- if (this.css) {
117
- const style = document.createElement('style');
118
- style.textContent = this.css();
119
- shadow.appendChild(style);
120
- }
121
- const template = document.createElement('template');
122
- template.innerHTML = this.html();
123
- shadow.appendChild(template.content.cloneNode(true));
124
- }
125
- }
126
- }
package/components/switch/demo.html DELETED
@@ -1,284 +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>Toggle/Switch Demo</title>
7
- <link rel="stylesheet" href="../theme/theme.css">
8
- <style>
9
- body {
10
- padding: 40px;
11
- font-family: var(--snice-font-family);
12
- background: var(--snice-color-background);
13
- color: var(--snice-color-text);
14
- max-width: 800px;
15
- margin: 0 auto;
16
- }
17
-
18
- .section {
19
- margin-bottom: 40px;
20
- }
21
-
22
- h2 {
23
- color: var(--snice-color-text);
24
- margin-bottom: 20px;
25
- font-size: var(--snice-font-size-2xl);
26
- }
27
-
28
- h3 {
29
- color: var(--snice-color-text-secondary);
30
- margin-bottom: 16px;
31
- font-size: var(--snice-font-size-lg);
32
- }
33
-
34
- .switch-group {
35
- display: flex;
36
- flex-direction: column;
37
- gap: 16px;
38
- margin-bottom: 20px;
39
- }
40
-
41
- .row {
42
- display: flex;
43
- gap: 20px;
44
- align-items: center;
45
- flex-wrap: wrap;
46
- }
47
-
48
- .output {
49
- padding: 10px;
50
- background: var(--snice-color-background-secondary);
51
- border-radius: var(--snice-border-radius-md);
52
- font-family: monospace;
53
- font-size: var(--snice-font-size-sm);
54
- margin-top: 10px;
55
- }
56
-
57
- button {
58
- padding: 8px 16px;
59
- background: var(--snice-color-primary);
60
- color: white;
61
- border: none;
62
- border-radius: var(--snice-border-radius-md);
63
- cursor: pointer;
64
- font-size: var(--snice-font-size-md);
65
- margin-right: 8px;
66
- }
67
-
68
- button:hover {
69
- background: var(--snice-color-primary-hover);
70
- }
71
-
72
- .settings-card {
73
- background: var(--snice-color-background-secondary);
74
- border: 1px solid var(--snice-color-border);
75
- border-radius: var(--snice-border-radius-lg);
76
- padding: 20px;
77
- margin-bottom: 20px;
78
- }
79
-
80
- .settings-card h4 {
81
- margin-top: 0;
82
- margin-bottom: 16px;
83
- font-size: var(--snice-font-size-lg);
84
- }
85
-
86
- .setting-row {
87
- display: flex;
88
- justify-content: space-between;
89
- align-items: center;
90
- padding: 12px 0;
91
- border-bottom: 1px solid var(--snice-color-border);
92
- }
93
-
94
- .setting-row:last-child {
95
- border-bottom: none;
96
- }
97
-
98
- .setting-info {
99
- flex: 1;
100
- margin-right: 16px;
101
- }
102
-
103
- .setting-title {
104
- font-weight: 500;
105
- margin-bottom: 4px;
106
- }
107
-
108
- .setting-description {
109
- font-size: var(--snice-font-size-sm);
110
- color: var(--snice-color-text-secondary);
111
- }
112
- </style>
113
- </head>
114
- <body>
115
- <h2>Toggle/Switch Component Demo</h2>
116
-
117
- <div class="section">
118
- <h3>Basic Toggles</h3>
119
- <div class="switch-group">
120
- <snice-switch label="Default switch"></snice-switch>
121
- <snice-switch label="Pre-checked" checked></snice-switch>
122
- <snice-switch label="Without label"></snice-switch>
123
- <snice-switch label="Disabled" disabled></snice-switch>
124
- <snice-switch label="Disabled checked" disabled checked></snice-switch>
125
- </div>
126
- </div>
127
-
128
- <div class="section">
129
- <h3>Sizes</h3>
130
- <div class="switch-group">
131
- <snice-switch size="small" label="Small switch"></snice-switch>
132
- <snice-switch size="medium" label="Medium switch (default)"></snice-switch>
133
- <snice-switch size="large" label="Large switch"></snice-switch>
134
- </div>
135
- </div>
136
-
137
- <div class="section">
138
- <h3>With State Labels</h3>
139
- <div class="switch-group">
140
- <snice-switch size="medium" label="Medium with labels" label-on="ON" label-off="OFF"></snice-switch>
141
- <snice-switch size="large" label="Large with labels" label-on="YES" label-off="NO" checked></snice-switch>
142
- <snice-switch size="large" label="Enabled/Disabled" label-on="✓" label-off="✗"></snice-switch>
143
- </div>
144
- </div>
145
-
146
- <div class="section">
147
- <h3>States</h3>
148
- <div class="switch-group">
149
- <snice-switch label="Required field" required></snice-switch>
150
- <snice-switch label="Invalid state" invalid></snice-switch>
151
- <snice-switch label="Invalid and checked" invalid checked></snice-switch>
152
- </div>
153
- </div>
154
-
155
- <div class="section">
156
- <h3>Settings Panel Example</h3>
157
- <div class="settings-card">
158
- <h4>Notification Settings</h4>
159
-
160
- <div class="setting-row">
161
- <div class="setting-info">
162
- <div class="setting-title">Email Notifications</div>
163
- <div class="setting-description">Receive email updates about your account</div>
164
- </div>
165
- <snice-switch id="email-notifications" checked></snice-switch>
166
- </div>
167
-
168
- <div class="setting-row">
169
- <div class="setting-info">
170
- <div class="setting-title">Push Notifications</div>
171
- <div class="setting-description">Get push notifications on your device</div>
172
- </div>
173
- <snice-switch id="push-notifications"></snice-switch>
174
- </div>
175
-
176
- <div class="setting-row">
177
- <div class="setting-info">
178
- <div class="setting-title">Marketing Emails</div>
179
- <div class="setting-description">Receive promotional content and updates</div>
180
- </div>
181
- <snice-switch id="marketing-emails"></snice-switch>
182
- </div>
183
-
184
- <div class="setting-row">
185
- <div class="setting-info">
186
- <div class="setting-title">Dark Mode</div>
187
- <div class="setting-description">Use dark theme across the application</div>
188
- </div>
189
- <snice-switch id="dark-mode" size="large" label-on="🌙" label-off="☀️"></snice-switch>
190
- </div>
191
- </div>
192
- <button onclick="getSettings()">Get Current Settings</button>
193
- <div id="settings-output" class="output">Click button to see current settings</div>
194
- </div>
195
-
196
- <div class="section">
197
- <h3>Feature Flags</h3>
198
- <div class="switch-group">
199
- <snice-switch id="feature-beta" label="Enable Beta Features" label-on="BETA" label-off=""></snice-switch>
200
- <snice-switch id="feature-experimental" label="Experimental Mode" label-on="EXP" label-off=""></snice-switch>
201
- <snice-switch id="feature-debug" label="Debug Mode" label-on="DBG" label-off=""></snice-switch>
202
- </div>
203
- </div>
204
-
205
- <div class="section">
206
- <h3>Interactive Example</h3>
207
- <div class="switch-group">
208
- <snice-switch
209
- id="interactive-switch"
210
- label="Interactive Toggle"
211
- size="large"
212
- label-on="ON"
213
- label-off="OFF">
214
- </snice-switch>
215
- </div>
216
- <div class="row">
217
- <button onclick="document.getElementById('interactive-switch').toggle()">Toggle</button>
218
- <button onclick="document.getElementById('interactive-switch').focus()">Focus</button>
219
- <button onclick="document.getElementById('interactive-switch').checked = true">Turn On</button>
220
- <button onclick="document.getElementById('interactive-switch').checked = false">Turn Off</button>
221
- </div>
222
- <div id="event-output" class="output">Events will appear here...</div>
223
- </div>
224
-
225
- <div class="section">
226
- <h3>Form Example</h3>
227
- <form id="demo-form">
228
- <div class="switch-group">
229
- <snice-switch name="terms" label="I accept the terms and conditions" required></snice-switch>
230
- <snice-switch name="newsletter" label="Subscribe to newsletter"></snice-switch>
231
- <snice-switch name="privacy" label="I accept the privacy policy" required></snice-switch>
232
- </div>
233
- <button type="submit">Submit</button>
234
- </form>
235
- <div id="form-output" class="output">Form data will appear here...</div>
236
- </div>
237
-
238
- <script type="module">
239
- import './snice-switch.ts';
240
-
241
- // Settings panel
242
- window.getSettings = function() {
243
- const settings = {
244
- emailNotifications: document.getElementById('email-notifications').checked,
245
- pushNotifications: document.getElementById('push-notifications').checked,
246
- marketingEmails: document.getElementById('marketing-emails').checked,
247
- darkMode: document.getElementById('dark-mode').checked
248
- };
249
- document.getElementById('settings-output').textContent =
250
- `Settings: ${JSON.stringify(settings, null, 2)}`;
251
- };
252
-
253
- // Interactive switch events
254
- const interactiveToggle = document.getElementById('interactive-switch');
255
- const eventOutput = document.getElementById('event-output');
256
-
257
- interactiveToggle.addEventListener('@snice/switch-change', (e) => {
258
- eventOutput.textContent = `Changed: checked=${e.detail.checked}`;
259
- });
260
-
261
- // Feature flags
262
- const featureToggles = document.querySelectorAll('[id^="feature-"]');
263
- featureToggles.forEach(_switch => {
264
- _switch.addEventListener('@snice/switch-change', (e) => {
265
- console.log(`Feature ${_switch.id}: ${e.detail.checked ? 'enabled' : 'disabled'}`);
266
- });
267
- });
268
-
269
- // Form submission
270
- document.getElementById('demo-form').addEventListener('submit', (e) => {
271
- e.preventDefault();
272
- const data = {};
273
- const switches = e.target.querySelectorAll('snice-switch');
274
- switches.forEach(_switch => {
275
- if (_switch.name) {
276
- data[_switch.name] = _switch.checked;
277
- }
278
- });
279
- document.getElementById('form-output').textContent =
280
- `Form data: ${JSON.stringify(data, null, 2)}`;
281
- });
282
- </script>
283
- </body>
284
- </html>
package/components/switch/snice-switch.css DELETED
@@ -1,221 +0,0 @@
1
- :host {
2
- display: inline-block;
3
- font-family: var(--snice-font-family);
4
- }
5
-
6
- .switch-wrapper {
7
- display: inline-flex;
8
- align-items: center;
9
- gap: 0.5rem; /* 8px */
10
- cursor: pointer;
11
- user-select: none;
12
- }
13
-
14
- .switch-wrapper--disabled {
15
- cursor: not-allowed;
16
- opacity: 0.6;
17
- }
18
-
19
- /* Hide native checkbox */
20
- .switch-input {
21
- position: absolute;
22
- opacity: 0;
23
- width: 0;
24
- height: 0;
25
- }
26
-
27
- /* Toggle track */
28
- .switch-track {
29
- position: relative;
30
- display: inline-block;
31
- background: var(--snice-color-border);
32
- border-radius: 999px;
33
- transition: background-color var(--snice-transition-fast) ease;
34
- }
35
-
36
- /* Size variants */
37
- .switch-track--small {
38
- width: 2.25rem; /* 36px */
39
- height: 1.25rem; /* 20px */
40
- }
41
-
42
- .switch-track--medium {
43
- width: 2.75rem; /* 44px */
44
- height: 1.5rem; /* 24px */
45
- }
46
-
47
- .switch-track--large {
48
- width: 3.25rem; /* 52px */
49
- height: 1.75rem; /* 28px */
50
- }
51
-
52
- /* Toggle thumb */
53
- .switch-thumb {
54
- position: absolute;
55
- top: 2px;
56
- left: 2px;
57
- background: white;
58
- border-radius: 50%;
59
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
60
- transition: transform var(--snice-transition-fast) ease;
61
- }
62
-
63
- /* Thumb sizes */
64
- .switch-track--small .switch-thumb {
65
- width: 1rem; /* 16px */
66
- height: 1rem; /* 16px */
67
- }
68
-
69
- .switch-track--medium .switch-thumb {
70
- width: 1.25rem; /* 20px */
71
- height: 1.25rem; /* 20px */
72
- }
73
-
74
- .switch-track--large .switch-thumb {
75
- width: 1.5rem; /* 24px */
76
- height: 1.5rem; /* 24px */
77
- }
78
-
79
- /* Checked state */
80
- .switch-input:checked ~ .switch-track {
81
- background: var(--snice-color-primary);
82
- }
83
-
84
- .switch-input:checked ~ .switch-track--small .switch-thumb {
85
- transform: translateX(1rem); /* 16px */
86
- }
87
-
88
- .switch-input:checked ~ .switch-track--medium .switch-thumb {
89
- transform: translateX(1.25rem); /* 20px */
90
- }
91
-
92
- .switch-input:checked ~ .switch-track--large .switch-thumb {
93
- transform: translateX(1.5rem); /* 24px */
94
- }
95
-
96
- /* Focus state */
97
- .switch-input:focus-visible ~ .switch-track {
98
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
99
- }
100
-
101
- .switch-input:focus-visible ~ .switch-track {
102
- outline: 2px solid var(--snice-color-primary);
103
- outline-offset: 2px;
104
- }
105
-
106
- /* Disabled state */
107
- .switch-input:disabled ~ .switch-track {
108
- background: var(--snice-color-background-secondary);
109
- }
110
-
111
- .switch-input:disabled ~ .switch-track .switch-thumb {
112
- background: var(--snice-color-background);
113
- }
114
-
115
- .switch-input:disabled:checked ~ .switch-track {
116
- background: var(--snice-color-text-secondary);
117
- }
118
-
119
- /* Invalid state */
120
- .switch-track--invalid {
121
- background: var(--snice-color-danger-light);
122
- }
123
-
124
- .switch-input:checked ~ .switch-track--invalid {
125
- background: var(--snice-color-danger);
126
- }
127
-
128
- /* Hover effect */
129
- .switch-wrapper:not(.switch-wrapper--disabled):hover .switch-track {
130
- background: var(--snice-color-border-hover);
131
- }
132
-
133
- .switch-wrapper:not(.switch-wrapper--disabled):hover .switch-input:checked ~ .switch-track {
134
- background: var(--snice-color-primary-hover);
135
- }
136
-
137
- /* Labels */
138
- .switch-label {
139
- color: var(--snice-color-text);
140
- cursor: pointer;
141
- }
142
-
143
- .switch-label--small {
144
- font-size: var(--snice-font-size-sm);
145
- }
146
-
147
- .switch-label--medium {
148
- font-size: var(--snice-font-size-md);
149
- }
150
-
151
- .switch-label--large {
152
- font-size: var(--snice-font-size-lg);
153
- }
154
-
155
- .switch-wrapper--disabled .switch-label {
156
- color: var(--snice-color-text-secondary);
157
- cursor: not-allowed;
158
- }
159
-
160
- /* Required indicator */
161
- .switch-label--required::after {
162
- content: ' *';
163
- color: var(--snice-color-danger);
164
- }
165
-
166
- /* State labels (on/off text inside the track) */
167
- .switch-state-label {
168
- position: absolute;
169
- top: 50%;
170
- transform: translateY(-50%);
171
- font-size: 0.625rem; /* 10px */
172
- font-weight: 600;
173
- color: white;
174
- text-transform: uppercase;
175
- opacity: 0;
176
- transition: opacity var(--snice-transition-fast) ease;
177
- pointer-events: none;
178
- }
179
-
180
- .switch-state-label--on {
181
- left: 0.375rem; /* 6px */
182
- }
183
-
184
- .switch-state-label--off {
185
- right: 0.375rem; /* 6px */
186
- }
187
-
188
- .switch-track--medium .switch-state-label {
189
- font-size: 0.6875rem; /* 11px */
190
- }
191
-
192
- .switch-track--large .switch-state-label {
193
- font-size: 0.75rem; /* 12px */
194
- }
195
-
196
- .switch-input:checked ~ .switch-track .switch-state-label--on {
197
- opacity: 0.8;
198
- }
199
-
200
- .switch-input:not(:checked) ~ .switch-track .switch-state-label--off {
201
- opacity: 0.8;
202
- }
203
-
204
- /* Hide state labels on small size */
205
- .switch-track--small .switch-state-label {
206
- display: none;
207
- }
208
-
209
- /* Loading state */
210
- .switch-track--loading .switch-thumb {
211
- animation: switch-pulse 1s ease-in-out infinite;
212
- }
213
-
214
- @keyframes switch-pulse {
215
- 0%, 100% {
216
- opacity: 1;
217
- }
218
- 50% {
219
- opacity: 0.5;
220
- }
221
- }