snice 1.14.2 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (311) hide show
  1. package/bin/templates/base/tsconfig.json +5 -4
  2. package/components/accordion/demo.html +403 -0
  3. package/components/alert/demo.html +445 -0
  4. package/components/avatar/demo.html +598 -0
  5. package/components/badge/demo.html +523 -0
  6. package/components/breadcrumbs/demo.html +404 -0
  7. package/components/button/demo.html +42 -0
  8. package/components/card/demo.html +525 -0
  9. package/components/checkbox/demo.html +253 -0
  10. package/components/chip/demo.html +383 -0
  11. package/components/date-picker/demo.html +191 -0
  12. package/components/divider/demo.html +233 -0
  13. package/components/drawer/demo.html +328 -0
  14. package/components/input/demo.html +303 -0
  15. package/components/input/test.html +77 -0
  16. package/components/layout/demo.html +538 -0
  17. package/components/login/demo-auth-controller.ts +185 -0
  18. package/components/login/demo.html +470 -0
  19. package/components/login/snice-login.ts +2 -2
  20. package/components/modal/demo.html +291 -0
  21. package/components/pagination/demo.html +395 -0
  22. package/components/progress/demo.html +510 -0
  23. package/components/radio/demo.html +287 -0
  24. package/components/select/demo.html +511 -0
  25. package/components/skeleton/demo.html +514 -0
  26. package/components/switch/demo.html +284 -0
  27. package/components/table/demo-table-controller.ts +100 -0
  28. package/components/table/demo.html +480 -0
  29. package/components/table/snice-table.ts +2 -2
  30. package/components/tabs/demo.html +487 -0
  31. package/components/toast/demo.html +329 -0
  32. package/components/tooltip/demo.html +350 -0
  33. package/dist/index.cjs +441 -329
  34. package/dist/index.cjs.map +1 -1
  35. package/dist/index.cjs.min.map +1 -1
  36. package/dist/index.esm.js +441 -329
  37. package/dist/index.esm.js.map +1 -1
  38. package/dist/index.esm.min.js +3 -3
  39. package/dist/index.esm.min.js.map +1 -1
  40. package/dist/index.iife.js +441 -329
  41. package/dist/index.iife.js.map +1 -1
  42. package/dist/index.iife.min.js +3 -3
  43. package/dist/index.iife.min.js.map +1 -1
  44. package/dist/symbols.esm.js +1 -1
  45. package/dist/transitions.esm.js +1 -1
  46. package/dist/types/controller.d.ts +1 -1
  47. package/dist/types/element.d.ts +10 -10
  48. package/dist/types/events.d.ts +2 -2
  49. package/dist/types/index.d.ts +1 -1
  50. package/dist/types/observe.d.ts +1 -1
  51. package/dist/types/request-response.d.ts +2 -3
  52. package/dist/types/router.d.ts +1 -1
  53. package/package.json +9 -10
  54. package/dist/components/accordion/snice-accordion-item.d.ts +0 -25
  55. package/dist/components/accordion/snice-accordion-item.js +0 -260
  56. package/dist/components/accordion/snice-accordion-item.js.map +0 -1
  57. package/dist/components/accordion/snice-accordion.d.ts +0 -28
  58. package/dist/components/accordion/snice-accordion.js +0 -221
  59. package/dist/components/accordion/snice-accordion.js.map +0 -1
  60. package/dist/components/accordion/snice-accordion.types.d.ts +0 -29
  61. package/dist/components/accordion/snice-accordion.types.js +0 -2
  62. package/dist/components/accordion/snice-accordion.types.js.map +0 -1
  63. package/dist/components/alert/snice-alert.d.ts +0 -26
  64. package/dist/components/alert/snice-alert.js +0 -191
  65. package/dist/components/alert/snice-alert.js.map +0 -1
  66. package/dist/components/alert/snice-alert.types.d.ts +0 -11
  67. package/dist/components/alert/snice-alert.types.js +0 -2
  68. package/dist/components/alert/snice-alert.types.js.map +0 -1
  69. package/dist/components/avatar/snice-avatar.d.ts +0 -24
  70. package/dist/components/avatar/snice-avatar.js +0 -177
  71. package/dist/components/avatar/snice-avatar.js.map +0 -1
  72. package/dist/components/avatar/snice-avatar.types.d.ts +0 -12
  73. package/dist/components/avatar/snice-avatar.types.js +0 -2
  74. package/dist/components/avatar/snice-avatar.types.js.map +0 -1
  75. package/dist/components/badge/snice-badge.d.ts +0 -25
  76. package/dist/components/badge/snice-badge.js +0 -157
  77. package/dist/components/badge/snice-badge.js.map +0 -1
  78. package/dist/components/badge/snice-badge.types.d.ts +0 -15
  79. package/dist/components/badge/snice-badge.types.js +0 -2
  80. package/dist/components/badge/snice-badge.types.js.map +0 -1
  81. package/dist/components/breadcrumbs/snice-breadcrumbs.d.ts +0 -27
  82. package/dist/components/breadcrumbs/snice-breadcrumbs.js +0 -212
  83. package/dist/components/breadcrumbs/snice-breadcrumbs.js.map +0 -1
  84. package/dist/components/breadcrumbs/snice-breadcrumbs.types.d.ts +0 -23
  85. package/dist/components/breadcrumbs/snice-breadcrumbs.types.js +0 -2
  86. package/dist/components/breadcrumbs/snice-breadcrumbs.types.js.map +0 -1
  87. package/dist/components/breadcrumbs/snice-crumb.d.ts +0 -9
  88. package/dist/components/breadcrumbs/snice-crumb.js +0 -50
  89. package/dist/components/breadcrumbs/snice-crumb.js.map +0 -1
  90. package/dist/components/button/snice-button.d.ts +0 -32
  91. package/dist/components/button/snice-button.js +0 -212
  92. package/dist/components/button/snice-button.js.map +0 -1
  93. package/dist/components/button/snice-button.types.d.ts +0 -23
  94. package/dist/components/button/snice-button.types.js +0 -2
  95. package/dist/components/button/snice-button.types.js.map +0 -1
  96. package/dist/components/card/snice-card.d.ts +0 -19
  97. package/dist/components/card/snice-card.js +0 -132
  98. package/dist/components/card/snice-card.js.map +0 -1
  99. package/dist/components/card/snice-card.types.d.ts +0 -9
  100. package/dist/components/card/snice-card.types.js +0 -2
  101. package/dist/components/card/snice-card.types.js.map +0 -1
  102. package/dist/components/checkbox/snice-checkbox.d.ts +0 -34
  103. package/dist/components/checkbox/snice-checkbox.js +0 -289
  104. package/dist/components/checkbox/snice-checkbox.js.map +0 -1
  105. package/dist/components/checkbox/snice-checkbox.types.d.ts +0 -20
  106. package/dist/components/checkbox/snice-checkbox.types.js +0 -2
  107. package/dist/components/checkbox/snice-checkbox.types.js.map +0 -1
  108. package/dist/components/chip/snice-chip.d.ts +0 -28
  109. package/dist/components/chip/snice-chip.js +0 -203
  110. package/dist/components/chip/snice-chip.js.map +0 -1
  111. package/dist/components/chip/snice-chip.types.d.ts +0 -14
  112. package/dist/components/chip/snice-chip.types.js +0 -2
  113. package/dist/components/chip/snice-chip.types.js.map +0 -1
  114. package/dist/components/date-picker/snice-date-picker.d.ts +0 -82
  115. package/dist/components/date-picker/snice-date-picker.js +0 -880
  116. package/dist/components/date-picker/snice-date-picker.js.map +0 -1
  117. package/dist/components/date-picker/snice-date-picker.types.d.ts +0 -71
  118. package/dist/components/date-picker/snice-date-picker.types.js +0 -2
  119. package/dist/components/date-picker/snice-date-picker.types.js.map +0 -1
  120. package/dist/components/divider/snice-divider.d.ts +0 -17
  121. package/dist/components/divider/snice-divider.js +0 -111
  122. package/dist/components/divider/snice-divider.js.map +0 -1
  123. package/dist/components/divider/snice-divider.types.d.ts +0 -14
  124. package/dist/components/divider/snice-divider.types.js +0 -2
  125. package/dist/components/divider/snice-divider.types.js.map +0 -1
  126. package/dist/components/drawer/snice-drawer.d.ts +0 -37
  127. package/dist/components/drawer/snice-drawer.js +0 -335
  128. package/dist/components/drawer/snice-drawer.js.map +0 -1
  129. package/dist/components/drawer/snice-drawer.types.d.ts +0 -16
  130. package/dist/components/drawer/snice-drawer.types.js +0 -2
  131. package/dist/components/drawer/snice-drawer.types.js.map +0 -1
  132. package/dist/components/input/snice-input.d.ts +0 -65
  133. package/dist/components/input/snice-input.js +0 -603
  134. package/dist/components/input/snice-input.js.map +0 -1
  135. package/dist/components/input/snice-input.types.d.ts +0 -53
  136. package/dist/components/input/snice-input.types.js +0 -2
  137. package/dist/components/input/snice-input.types.js.map +0 -1
  138. package/dist/components/layout/snice-layout-blog.d.ts +0 -4
  139. package/dist/components/layout/snice-layout-blog.js +0 -56
  140. package/dist/components/layout/snice-layout-blog.js.map +0 -1
  141. package/dist/components/layout/snice-layout-card.d.ts +0 -6
  142. package/dist/components/layout/snice-layout-card.js +0 -53
  143. package/dist/components/layout/snice-layout-card.js.map +0 -1
  144. package/dist/components/layout/snice-layout-centered.d.ts +0 -5
  145. package/dist/components/layout/snice-layout-centered.js +0 -38
  146. package/dist/components/layout/snice-layout-centered.js.map +0 -1
  147. package/dist/components/layout/snice-layout-dashboard.d.ts +0 -4
  148. package/dist/components/layout/snice-layout-dashboard.js +0 -53
  149. package/dist/components/layout/snice-layout-dashboard.js.map +0 -1
  150. package/dist/components/layout/snice-layout-fullscreen.d.ts +0 -5
  151. package/dist/components/layout/snice-layout-fullscreen.js +0 -50
  152. package/dist/components/layout/snice-layout-fullscreen.js.map +0 -1
  153. package/dist/components/layout/snice-layout-landing.d.ts +0 -4
  154. package/dist/components/layout/snice-layout-landing.js +0 -55
  155. package/dist/components/layout/snice-layout-landing.js.map +0 -1
  156. package/dist/components/layout/snice-layout-minimal.d.ts +0 -4
  157. package/dist/components/layout/snice-layout-minimal.js +0 -27
  158. package/dist/components/layout/snice-layout-minimal.js.map +0 -1
  159. package/dist/components/layout/snice-layout-sidebar.d.ts +0 -5
  160. package/dist/components/layout/snice-layout-sidebar.js +0 -64
  161. package/dist/components/layout/snice-layout-sidebar.js.map +0 -1
  162. package/dist/components/layout/snice-layout-split.d.ts +0 -6
  163. package/dist/components/layout/snice-layout-split.js +0 -47
  164. package/dist/components/layout/snice-layout-split.js.map +0 -1
  165. package/dist/components/layout/snice-layout.d.ts +0 -4
  166. package/dist/components/layout/snice-layout.js +0 -43
  167. package/dist/components/layout/snice-layout.js.map +0 -1
  168. package/dist/components/layout/snice-layout.types.d.ts +0 -3
  169. package/dist/components/layout/snice-layout.types.js +0 -2
  170. package/dist/components/layout/snice-layout.types.js.map +0 -1
  171. package/dist/components/login/snice-login.d.ts +0 -45
  172. package/dist/components/login/snice-login.js +0 -385
  173. package/dist/components/login/snice-login.js.map +0 -1
  174. package/dist/components/login/snice-login.types.d.ts +0 -31
  175. package/dist/components/login/snice-login.types.js +0 -2
  176. package/dist/components/login/snice-login.types.js.map +0 -1
  177. package/dist/components/modal/snice-modal.d.ts +0 -32
  178. package/dist/components/modal/snice-modal.js +0 -288
  179. package/dist/components/modal/snice-modal.js.map +0 -1
  180. package/dist/components/modal/snice-modal.types.d.ts +0 -18
  181. package/dist/components/modal/snice-modal.types.js +0 -2
  182. package/dist/components/modal/snice-modal.types.js.map +0 -1
  183. package/dist/components/pagination/snice-pagination.d.ts +0 -26
  184. package/dist/components/pagination/snice-pagination.js +0 -373
  185. package/dist/components/pagination/snice-pagination.js.map +0 -1
  186. package/dist/components/pagination/snice-pagination.types.d.ts +0 -18
  187. package/dist/components/pagination/snice-pagination.types.js +0 -2
  188. package/dist/components/pagination/snice-pagination.types.js.map +0 -1
  189. package/dist/components/progress/snice-progress.d.ts +0 -35
  190. package/dist/components/progress/snice-progress.js +0 -295
  191. package/dist/components/progress/snice-progress.js.map +0 -1
  192. package/dist/components/progress/snice-progress.types.d.ts +0 -18
  193. package/dist/components/progress/snice-progress.types.js +0 -2
  194. package/dist/components/progress/snice-progress.types.js.map +0 -1
  195. package/dist/components/radio/snice-radio.d.ts +0 -33
  196. package/dist/components/radio/snice-radio.js +0 -286
  197. package/dist/components/radio/snice-radio.js.map +0 -1
  198. package/dist/components/radio/snice-radio.types.d.ts +0 -19
  199. package/dist/components/radio/snice-radio.types.js +0 -2
  200. package/dist/components/radio/snice-radio.types.js.map +0 -1
  201. package/dist/components/select/snice-option.d.ts +0 -17
  202. package/dist/components/select/snice-option.js +0 -77
  203. package/dist/components/select/snice-option.js.map +0 -1
  204. package/dist/components/select/snice-option.types.d.ts +0 -14
  205. package/dist/components/select/snice-option.types.js +0 -2
  206. package/dist/components/select/snice-option.types.js.map +0 -1
  207. package/dist/components/select/snice-select.d.ts +0 -89
  208. package/dist/components/select/snice-select.js +0 -900
  209. package/dist/components/select/snice-select.js.map +0 -1
  210. package/dist/components/select/snice-select.types.d.ts +0 -49
  211. package/dist/components/select/snice-select.types.js +0 -2
  212. package/dist/components/select/snice-select.types.js.map +0 -1
  213. package/dist/components/skeleton/snice-skeleton.d.ts +0 -16
  214. package/dist/components/skeleton/snice-skeleton.js +0 -159
  215. package/dist/components/skeleton/snice-skeleton.js.map +0 -1
  216. package/dist/components/skeleton/snice-skeleton.types.d.ts +0 -10
  217. package/dist/components/skeleton/snice-skeleton.types.js +0 -2
  218. package/dist/components/skeleton/snice-skeleton.types.js.map +0 -1
  219. package/dist/components/switch/snice-switch.d.ts +0 -38
  220. package/dist/components/switch/snice-switch.js +0 -309
  221. package/dist/components/switch/snice-switch.js.map +0 -1
  222. package/dist/components/switch/snice-switch.types.d.ts +0 -21
  223. package/dist/components/switch/snice-switch.types.js +0 -2
  224. package/dist/components/switch/snice-switch.types.js.map +0 -1
  225. package/dist/components/symbols.d.ts +0 -1
  226. package/dist/components/symbols.js +0 -20
  227. package/dist/components/symbols.js.map +0 -1
  228. package/dist/components/table/snice-cell-boolean.d.ts +0 -21
  229. package/dist/components/table/snice-cell-boolean.js +0 -152
  230. package/dist/components/table/snice-cell-boolean.js.map +0 -1
  231. package/dist/components/table/snice-cell-date.d.ts +0 -24
  232. package/dist/components/table/snice-cell-date.js +0 -240
  233. package/dist/components/table/snice-cell-date.js.map +0 -1
  234. package/dist/components/table/snice-cell-duration.d.ts +0 -16
  235. package/dist/components/table/snice-cell-duration.js +0 -123
  236. package/dist/components/table/snice-cell-duration.js.map +0 -1
  237. package/dist/components/table/snice-cell-filesize.d.ts +0 -16
  238. package/dist/components/table/snice-cell-filesize.js +0 -119
  239. package/dist/components/table/snice-cell-filesize.js.map +0 -1
  240. package/dist/components/table/snice-cell-number.d.ts +0 -23
  241. package/dist/components/table/snice-cell-number.js +0 -202
  242. package/dist/components/table/snice-cell-number.js.map +0 -1
  243. package/dist/components/table/snice-cell-progress.d.ts +0 -17
  244. package/dist/components/table/snice-cell-progress.js +0 -114
  245. package/dist/components/table/snice-cell-progress.js.map +0 -1
  246. package/dist/components/table/snice-cell-rating.d.ts +0 -17
  247. package/dist/components/table/snice-cell-rating.js +0 -113
  248. package/dist/components/table/snice-cell-rating.js.map +0 -1
  249. package/dist/components/table/snice-cell-sparkline.d.ts +0 -29
  250. package/dist/components/table/snice-cell-sparkline.js +0 -290
  251. package/dist/components/table/snice-cell-sparkline.js.map +0 -1
  252. package/dist/components/table/snice-cell-text.d.ts +0 -19
  253. package/dist/components/table/snice-cell-text.js +0 -153
  254. package/dist/components/table/snice-cell-text.js.map +0 -1
  255. package/dist/components/table/snice-cell.d.ts +0 -32
  256. package/dist/components/table/snice-cell.js +0 -451
  257. package/dist/components/table/snice-cell.js.map +0 -1
  258. package/dist/components/table/snice-column.d.ts +0 -62
  259. package/dist/components/table/snice-column.js +0 -440
  260. package/dist/components/table/snice-column.js.map +0 -1
  261. package/dist/components/table/snice-header.d.ts +0 -33
  262. package/dist/components/table/snice-header.js +0 -303
  263. package/dist/components/table/snice-header.js.map +0 -1
  264. package/dist/components/table/snice-progress.d.ts +0 -10
  265. package/dist/components/table/snice-progress.js +0 -91
  266. package/dist/components/table/snice-progress.js.map +0 -1
  267. package/dist/components/table/snice-rating.d.ts +0 -9
  268. package/dist/components/table/snice-rating.js +0 -68
  269. package/dist/components/table/snice-rating.js.map +0 -1
  270. package/dist/components/table/snice-row.d.ts +0 -43
  271. package/dist/components/table/snice-row.js +0 -365
  272. package/dist/components/table/snice-row.js.map +0 -1
  273. package/dist/components/table/snice-table.d.ts +0 -69
  274. package/dist/components/table/snice-table.js +0 -814
  275. package/dist/components/table/snice-table.js.map +0 -1
  276. package/dist/components/table/snice-table.types.d.ts +0 -137
  277. package/dist/components/table/snice-table.types.js +0 -2
  278. package/dist/components/table/snice-table.types.js.map +0 -1
  279. package/dist/components/tabs/snice-tab-panel.d.ts +0 -12
  280. package/dist/components/tabs/snice-tab-panel.js +0 -78
  281. package/dist/components/tabs/snice-tab-panel.js.map +0 -1
  282. package/dist/components/tabs/snice-tab.d.ts +0 -13
  283. package/dist/components/tabs/snice-tab.js +0 -90
  284. package/dist/components/tabs/snice-tab.js.map +0 -1
  285. package/dist/components/tabs/snice-tabs.d.ts +0 -34
  286. package/dist/components/tabs/snice-tabs.js +0 -367
  287. package/dist/components/tabs/snice-tabs.js.map +0 -1
  288. package/dist/components/tabs/snice-tabs.types.d.ts +0 -23
  289. package/dist/components/tabs/snice-tabs.types.js +0 -2
  290. package/dist/components/tabs/snice-tabs.types.js.map +0 -1
  291. package/dist/components/toast/snice-toast-container.d.ts +0 -25
  292. package/dist/components/toast/snice-toast-container.js +0 -251
  293. package/dist/components/toast/snice-toast-container.js.map +0 -1
  294. package/dist/components/toast/snice-toast.d.ts +0 -23
  295. package/dist/components/toast/snice-toast.js +0 -316
  296. package/dist/components/toast/snice-toast.js.map +0 -1
  297. package/dist/components/toast/snice-toast.types.d.ts +0 -30
  298. package/dist/components/toast/snice-toast.types.js +0 -2
  299. package/dist/components/toast/snice-toast.types.js.map +0 -1
  300. package/dist/components/tooltip/snice-tooltip.d.ts +0 -50
  301. package/dist/components/tooltip/snice-tooltip.js +0 -656
  302. package/dist/components/tooltip/snice-tooltip.js.map +0 -1
  303. package/dist/components/tooltip/snice-tooltip.types.d.ts +0 -18
  304. package/dist/components/tooltip/snice-tooltip.types.js +0 -2
  305. package/dist/components/tooltip/snice-tooltip.types.js.map +0 -1
  306. package/dist/components/transitions.d.ts +0 -11
  307. package/dist/components/transitions.js +0 -69
  308. package/dist/components/transitions.js.map +0 -1
  309. package/dist/index.cjs.min +0 -15
  310. package/dist/symbols.cjs +0 -103
  311. package/dist/transitions.cjs +0 -219
package/components/skeleton/demo.html ADDED
@@ -0,0 +1,514 @@
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 Skeleton 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: 900px;
18
+ margin: 0 auto;
19
+ background: white;
20
+ padding: 40px;
21
+ border-radius: 8px;
22
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
23
+ }
24
+
25
+ h1 {
26
+ color: #333;
27
+ border-bottom: 2px solid #e0e0e0;
28
+ padding-bottom: 10px;
29
+ }
30
+
31
+ h2 {
32
+ color: #555;
33
+ margin-top: 30px;
34
+ }
35
+
36
+ .demo-section {
37
+ margin: 30px 0;
38
+ padding: 20px;
39
+ background: #fafafa;
40
+ border-radius: 4px;
41
+ }
42
+
43
+ .demo-label {
44
+ display: block;
45
+ margin-bottom: 12px;
46
+ font-weight: 500;
47
+ color: #666;
48
+ font-size: 14px;
49
+ }
50
+
51
+ .skeleton-demo {
52
+ margin: 20px 0;
53
+ padding: 20px;
54
+ background: white;
55
+ border: 1px solid #e0e0e0;
56
+ border-radius: 4px;
57
+ }
58
+
59
+ .controls {
60
+ display: flex;
61
+ gap: 10px;
62
+ margin: 20px 0;
63
+ flex-wrap: wrap;
64
+ }
65
+
66
+ button {
67
+ padding: 8px 16px;
68
+ background: #3b82f6;
69
+ color: white;
70
+ border: none;
71
+ border-radius: 4px;
72
+ cursor: pointer;
73
+ font-size: 14px;
74
+ transition: background 0.2s;
75
+ }
76
+
77
+ button:hover {
78
+ background: #2563eb;
79
+ }
80
+
81
+ .card-demo {
82
+ display: grid;
83
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
84
+ gap: 20px;
85
+ margin: 20px 0;
86
+ }
87
+
88
+ .card {
89
+ padding: 16px;
90
+ background: white;
91
+ border: 1px solid #e0e0e0;
92
+ border-radius: 8px;
93
+ }
94
+
95
+ .card-header {
96
+ display: flex;
97
+ align-items: center;
98
+ gap: 12px;
99
+ margin-bottom: 12px;
100
+ }
101
+
102
+ .list-item {
103
+ display: flex;
104
+ align-items: start;
105
+ gap: 16px;
106
+ padding: 16px;
107
+ background: white;
108
+ border: 1px solid #e0e0e0;
109
+ border-radius: 4px;
110
+ margin-bottom: 12px;
111
+ }
112
+
113
+ .list-content {
114
+ flex: 1;
115
+ }
116
+
117
+ .row {
118
+ display: flex;
119
+ gap: 12px;
120
+ align-items: center;
121
+ margin: 12px 0;
122
+ }
123
+
124
+ code {
125
+ background: #f0f0f0;
126
+ padding: 2px 6px;
127
+ border-radius: 3px;
128
+ font-size: 0.9em;
129
+ }
130
+
131
+ select {
132
+ padding: 6px 12px;
133
+ border: 1px solid #d1d5db;
134
+ border-radius: 4px;
135
+ background: white;
136
+ font-size: 14px;
137
+ }
138
+
139
+ input[type="number"] {
140
+ padding: 6px 12px;
141
+ border: 1px solid #d1d5db;
142
+ border-radius: 4px;
143
+ width: 80px;
144
+ font-size: 14px;
145
+ }
146
+
147
+ .inline-demo {
148
+ display: flex;
149
+ align-items: center;
150
+ gap: 12px;
151
+ font-size: 16px;
152
+ padding: 16px;
153
+ background: white;
154
+ border: 1px solid #e0e0e0;
155
+ border-radius: 4px;
156
+ }
157
+
158
+ .article-demo {
159
+ max-width: 600px;
160
+ padding: 20px;
161
+ background: white;
162
+ border: 1px solid #e0e0e0;
163
+ border-radius: 4px;
164
+ }
165
+
166
+ .article-header {
167
+ margin-bottom: 20px;
168
+ }
169
+
170
+ .article-meta {
171
+ display: flex;
172
+ gap: 16px;
173
+ margin: 12px 0;
174
+ }
175
+
176
+ .input-group {
177
+ margin: 12px 0;
178
+ }
179
+
180
+ .input-group label {
181
+ display: inline-block;
182
+ width: 120px;
183
+ font-size: 14px;
184
+ color: #666;
185
+ }
186
+ </style>
187
+ </head>
188
+ <body>
189
+ <div class="container">
190
+ <h1>Snice Skeleton Component Demo</h1>
191
+
192
+ <div class="demo-section">
193
+ <h2>Basic Skeletons</h2>
194
+
195
+ <span class="demo-label">Text Skeleton (Default)</span>
196
+ <div class="skeleton-demo">
197
+ <snice-skeleton variant="text" count="3"></snice-skeleton>
198
+ </div>
199
+
200
+ <span class="demo-label">Circular Skeleton</span>
201
+ <div class="skeleton-demo">
202
+ <div class="row">
203
+ <snice-skeleton variant="circular"></snice-skeleton>
204
+ <snice-skeleton variant="circular" width="60px" height="60px"></snice-skeleton>
205
+ <snice-skeleton variant="circular" width="80px" height="80px"></snice-skeleton>
206
+ </div>
207
+ </div>
208
+
209
+ <span class="demo-label">Rectangular Skeleton</span>
210
+ <div class="skeleton-demo">
211
+ <snice-skeleton variant="rectangular" height="200px"></snice-skeleton>
212
+ </div>
213
+
214
+ <span class="demo-label">Rounded Skeleton</span>
215
+ <div class="skeleton-demo">
216
+ <snice-skeleton variant="rounded" height="150px"></snice-skeleton>
217
+ </div>
218
+ </div>
219
+
220
+ <div class="demo-section">
221
+ <h2>Animation Types</h2>
222
+
223
+ <span class="demo-label">Wave Animation (Default)</span>
224
+ <div class="skeleton-demo">
225
+ <snice-skeleton variant="text" animation="wave" count="2"></snice-skeleton>
226
+ </div>
227
+
228
+ <span class="demo-label">Pulse Animation</span>
229
+ <div class="skeleton-demo">
230
+ <snice-skeleton variant="text" animation="pulse" count="2"></snice-skeleton>
231
+ </div>
232
+
233
+ <span class="demo-label">No Animation</span>
234
+ <div class="skeleton-demo">
235
+ <snice-skeleton variant="text" animation="none" count="2"></snice-skeleton>
236
+ </div>
237
+ </div>
238
+
239
+ <div class="demo-section">
240
+ <h2>Custom Sizing</h2>
241
+
242
+ <span class="demo-label">Custom Width Text</span>
243
+ <div class="skeleton-demo">
244
+ <snice-skeleton variant="text" width="200px"></snice-skeleton>
245
+ <snice-skeleton variant="text" width="350px"></snice-skeleton>
246
+ <snice-skeleton variant="text" width="150px"></snice-skeleton>
247
+ </div>
248
+
249
+ <span class="demo-label">Custom Dimensions</span>
250
+ <div class="skeleton-demo">
251
+ <div class="row">
252
+ <snice-skeleton variant="rounded" width="100px" height="100px"></snice-skeleton>
253
+ <snice-skeleton variant="rounded" width="150px" height="80px"></snice-skeleton>
254
+ <snice-skeleton variant="rounded" width="200px" height="60px"></snice-skeleton>
255
+ </div>
256
+ </div>
257
+ </div>
258
+
259
+ <div class="demo-section">
260
+ <h2>Multiple Items with Spacing</h2>
261
+
262
+ <span class="demo-label">Text Lines with Custom Spacing</span>
263
+ <div class="skeleton-demo">
264
+ <snice-skeleton variant="text" count="5" spacing="12px"></snice-skeleton>
265
+ </div>
266
+
267
+ <span class="demo-label">Grid of Rectangles</span>
268
+ <div class="skeleton-demo">
269
+ <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
270
+ <snice-skeleton variant="rounded" height="100px"></snice-skeleton>
271
+ <snice-skeleton variant="rounded" height="100px"></snice-skeleton>
272
+ <snice-skeleton variant="rounded" height="100px"></snice-skeleton>
273
+ </div>
274
+ </div>
275
+ </div>
276
+
277
+ <div class="demo-section">
278
+ <h2>Real-world Examples</h2>
279
+
280
+ <span class="demo-label">Card Skeleton</span>
281
+ <div class="card-demo">
282
+ <div class="card">
283
+ <div class="card-header">
284
+ <snice-skeleton variant="circular" width="40px" height="40px"></snice-skeleton>
285
+ <div style="flex: 1;">
286
+ <snice-skeleton variant="text" width="120px" height="16px"></snice-skeleton>
287
+ <div style="margin-top: 4px;">
288
+ <snice-skeleton variant="text" width="80px" height="14px"></snice-skeleton>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ <snice-skeleton variant="rounded" height="180px"></snice-skeleton>
293
+ <div style="margin-top: 12px;">
294
+ <snice-skeleton variant="text" count="2"></snice-skeleton>
295
+ </div>
296
+ </div>
297
+
298
+ <div class="card">
299
+ <div class="card-header">
300
+ <snice-skeleton variant="circular" width="40px" height="40px"></snice-skeleton>
301
+ <div style="flex: 1;">
302
+ <snice-skeleton variant="text" width="150px" height="16px"></snice-skeleton>
303
+ <div style="margin-top: 4px;">
304
+ <snice-skeleton variant="text" width="100px" height="14px"></snice-skeleton>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ <snice-skeleton variant="rounded" height="180px"></snice-skeleton>
309
+ <div style="margin-top: 12px;">
310
+ <snice-skeleton variant="text" count="2"></snice-skeleton>
311
+ </div>
312
+ </div>
313
+ </div>
314
+
315
+ <span class="demo-label">List Item Skeleton</span>
316
+ <div class="skeleton-demo">
317
+ <div class="list-item">
318
+ <snice-skeleton variant="circular" width="48px" height="48px"></snice-skeleton>
319
+ <div class="list-content">
320
+ <snice-skeleton variant="text" width="200px" height="18px"></snice-skeleton>
321
+ <div style="margin-top: 8px;">
322
+ <snice-skeleton variant="text" width="100%" height="14px"></snice-skeleton>
323
+ <snice-skeleton variant="text" width="80%" height="14px" style="margin-top: 4px;"></snice-skeleton>
324
+ </div>
325
+ </div>
326
+ </div>
327
+
328
+ <div class="list-item">
329
+ <snice-skeleton variant="circular" width="48px" height="48px"></snice-skeleton>
330
+ <div class="list-content">
331
+ <snice-skeleton variant="text" width="250px" height="18px"></snice-skeleton>
332
+ <div style="margin-top: 8px;">
333
+ <snice-skeleton variant="text" width="100%" height="14px"></snice-skeleton>
334
+ <snice-skeleton variant="text" width="70%" height="14px" style="margin-top: 4px;"></snice-skeleton>
335
+ </div>
336
+ </div>
337
+ </div>
338
+ </div>
339
+
340
+ <span class="demo-label">Article Skeleton</span>
341
+ <div class="skeleton-demo">
342
+ <div class="article-demo">
343
+ <div class="article-header">
344
+ <snice-skeleton variant="text" width="80%" height="32px"></snice-skeleton>
345
+ <div class="article-meta">
346
+ <snice-skeleton variant="circular" width="32px" height="32px"></snice-skeleton>
347
+ <div style="flex: 1;">
348
+ <snice-skeleton variant="text" width="120px" height="16px"></snice-skeleton>
349
+ <snice-skeleton variant="text" width="80px" height="14px" style="margin-top: 4px;"></snice-skeleton>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ <snice-skeleton variant="text" count="8" spacing="16px"></snice-skeleton>
354
+ </div>
355
+ </div>
356
+
357
+ <span class="demo-label">Inline Loading</span>
358
+ <div class="skeleton-demo">
359
+ <div class="inline-demo">
360
+ <span>Loading user data</span>
361
+ <snice-skeleton variant="text" width="120px" height="20px"></snice-skeleton>
362
+ <span>from server...</span>
363
+ </div>
364
+ </div>
365
+ </div>
366
+
367
+ <div class="demo-section">
368
+ <h2>Interactive Demo</h2>
369
+
370
+ <div class="controls">
371
+ <div class="input-group">
372
+ <label>Variant:</label>
373
+ <select id="variant-select">
374
+ <option value="text">Text</option>
375
+ <option value="circular">Circular</option>
376
+ <option value="rectangular">Rectangular</option>
377
+ <option value="rounded">Rounded</option>
378
+ </select>
379
+ </div>
380
+
381
+ <div class="input-group">
382
+ <label>Animation:</label>
383
+ <select id="animation-select">
384
+ <option value="wave">Wave</option>
385
+ <option value="pulse">Pulse</option>
386
+ <option value="none">None</option>
387
+ </select>
388
+ </div>
389
+
390
+ <div class="input-group">
391
+ <label>Count:</label>
392
+ <input type="number" id="count-input" value="1" min="1" max="10">
393
+ </div>
394
+
395
+ <button onclick="updateSkeleton()">Update</button>
396
+ <button onclick="toggleContent()">Toggle Content</button>
397
+ </div>
398
+
399
+ <div class="skeleton-demo" id="interactive-demo">
400
+ <div id="skeleton-container">
401
+ <snice-skeleton id="demo-skeleton" variant="text" count="3"></snice-skeleton>
402
+ </div>
403
+ <div id="content-container" style="display: none;">
404
+ <h3>Content Loaded!</h3>
405
+ <p>This is the actual content that appears after loading is complete. The skeleton provides a better user experience while waiting for data.</p>
406
+ </div>
407
+ </div>
408
+ </div>
409
+
410
+ <div class="demo-section">
411
+ <h2>Loading States Simulation</h2>
412
+
413
+ <button onclick="simulateLoading()">Simulate Loading</button>
414
+
415
+ <div class="skeleton-demo" id="simulation-demo">
416
+ <div id="simulation-skeleton">
417
+ <div class="card">
418
+ <div class="card-header">
419
+ <snice-skeleton variant="circular" width="40px" height="40px"></snice-skeleton>
420
+ <div style="flex: 1;">
421
+ <snice-skeleton variant="text" width="120px" height="16px"></snice-skeleton>
422
+ <div style="margin-top: 4px;">
423
+ <snice-skeleton variant="text" width="80px" height="14px"></snice-skeleton>
424
+ </div>
425
+ </div>
426
+ </div>
427
+ <snice-skeleton variant="rounded" height="180px"></snice-skeleton>
428
+ <div style="margin-top: 12px;">
429
+ <snice-skeleton variant="text" count="2"></snice-skeleton>
430
+ </div>
431
+ </div>
432
+ </div>
433
+ <div id="simulation-content" style="display: none;">
434
+ <div class="card">
435
+ <div class="card-header">
436
+ <div style="width: 40px; height: 40px; border-radius: 50%; background: #3b82f6; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">
437
+ JD
438
+ </div>
439
+ <div style="flex: 1;">
440
+ <div style="font-weight: 600;">John Doe</div>
441
+ <div style="font-size: 14px; color: #666; margin-top: 4px;">2 hours ago</div>
442
+ </div>
443
+ </div>
444
+ <div style="height: 180px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px;"></div>
445
+ <div style="margin-top: 12px;">
446
+ <p style="margin: 0;">Beautiful sunset captured during my evening walk. Nature never fails to amaze!</p>
447
+ </div>
448
+ </div>
449
+ </div>
450
+ </div>
451
+ </div>
452
+ </div>
453
+
454
+ <script type="module">
455
+ import './snice-skeleton.ts';
456
+
457
+ // Interactive demo
458
+ window.updateSkeleton = function() {
459
+ const skeleton = document.getElementById('demo-skeleton');
460
+ const variant = document.getElementById('variant-select').value;
461
+ const animation = document.getElementById('animation-select').value;
462
+ const count = parseInt(document.getElementById('count-input').value);
463
+
464
+ skeleton.variant = variant;
465
+ skeleton.animation = animation;
466
+ skeleton.count = count;
467
+
468
+ // Reset dimensions for different variants
469
+ if (variant === 'circular') {
470
+ skeleton.width = '60px';
471
+ skeleton.height = '60px';
472
+ } else if (variant === 'rectangular' || variant === 'rounded') {
473
+ skeleton.width = '';
474
+ skeleton.height = '150px';
475
+ } else {
476
+ skeleton.width = '';
477
+ skeleton.height = '';
478
+ }
479
+ };
480
+
481
+ window.toggleContent = function() {
482
+ const skeletonContainer = document.getElementById('skeleton-container');
483
+ const contentContainer = document.getElementById('content-container');
484
+
485
+ if (skeletonContainer.style.display === 'none') {
486
+ skeletonContainer.style.display = 'block';
487
+ contentContainer.style.display = 'none';
488
+ } else {
489
+ skeletonContainer.style.display = 'none';
490
+ contentContainer.style.display = 'block';
491
+ }
492
+ };
493
+
494
+ // Loading simulation
495
+ window.simulateLoading = function() {
496
+ const skeleton = document.getElementById('simulation-skeleton');
497
+ const content = document.getElementById('simulation-content');
498
+
499
+ skeleton.style.display = 'block';
500
+ content.style.display = 'none';
501
+
502
+ setTimeout(() => {
503
+ skeleton.style.display = 'none';
504
+ content.style.display = 'block';
505
+ }, 2000);
506
+ };
507
+
508
+ // Auto-update when variant changes
509
+ document.getElementById('variant-select').addEventListener('change', updateSkeleton);
510
+ document.getElementById('animation-select').addEventListener('change', updateSkeleton);
511
+ document.getElementById('count-input').addEventListener('input', updateSkeleton);
512
+ </script>
513
+ </body>
514
+ </html>