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/progress/demo.html ADDED
@@ -0,0 +1,510 @@
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 Progress Demo</title>
7
+ <style>
8
+ body {
9
+ font-family: system-ui, -apple-system, sans-serif;
10
+ padding: 40px;
11
+ line-height: 1.6;
12
+ background: #f5f5f5;
13
+ }
14
+
15
+ .container {
16
+ max-width: 900px;
17
+ margin: 0 auto;
18
+ background: white;
19
+ padding: 40px;
20
+ border-radius: 8px;
21
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
22
+ }
23
+
24
+ h1 {
25
+ color: #333;
26
+ border-bottom: 2px solid #e0e0e0;
27
+ padding-bottom: 10px;
28
+ }
29
+
30
+ h2 {
31
+ color: #555;
32
+ margin-top: 30px;
33
+ }
34
+
35
+ .demo-section {
36
+ margin: 30px 0;
37
+ }
38
+
39
+ .demo-item {
40
+ margin: 20px 0;
41
+ }
42
+
43
+ .demo-label {
44
+ display: block;
45
+ margin-bottom: 8px;
46
+ font-weight: 500;
47
+ color: #666;
48
+ }
49
+
50
+ .demo-grid {
51
+ display: grid;
52
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
53
+ gap: 30px;
54
+ margin: 20px 0;
55
+ }
56
+
57
+ .controls {
58
+ display: flex;
59
+ gap: 10px;
60
+ margin: 20px 0;
61
+ flex-wrap: wrap;
62
+ }
63
+
64
+ button {
65
+ padding: 8px 16px;
66
+ background: #3b82f6;
67
+ color: white;
68
+ border: none;
69
+ border-radius: 4px;
70
+ cursor: pointer;
71
+ font-size: 14px;
72
+ }
73
+
74
+ button:hover {
75
+ background: #2563eb;
76
+ }
77
+
78
+ button:disabled {
79
+ background: #9ca3af;
80
+ cursor: not-allowed;
81
+ }
82
+
83
+ input[type="range"] {
84
+ width: 200px;
85
+ margin: 0 10px;
86
+ }
87
+
88
+ .circular-demo {
89
+ display: flex;
90
+ gap: 40px;
91
+ align-items: center;
92
+ flex-wrap: wrap;
93
+ margin: 20px 0;
94
+ }
95
+
96
+ .status {
97
+ padding: 12px;
98
+ background: #f0f9ff;
99
+ border: 1px solid #0ea5e9;
100
+ border-radius: 4px;
101
+ color: #0369a1;
102
+ margin-top: 20px;
103
+ }
104
+
105
+ code {
106
+ background: #f0f0f0;
107
+ padding: 2px 6px;
108
+ border-radius: 3px;
109
+ font-size: 0.9em;
110
+ }
111
+
112
+ .custom-progress {
113
+ --progress-height: 16px;
114
+ --progress-radius: 8px;
115
+ --progress-bg: #fef3c7;
116
+ --progress-color: #f59e0b;
117
+ }
118
+
119
+ .space-y {
120
+ display: flex;
121
+ flex-direction: column;
122
+ gap: 20px;
123
+ }
124
+ </style>
125
+ </head>
126
+ <body>
127
+ <div class="container">
128
+ <h1>Snice Progress Component Demo</h1>
129
+
130
+ <div class="demo-section">
131
+ <h2>Basic Linear Progress</h2>
132
+
133
+ <div class="demo-item">
134
+ <span class="demo-label">Default (0%)</span>
135
+ <snice-progress></snice-progress>
136
+ </div>
137
+
138
+ <div class="demo-item">
139
+ <span class="demo-label">25% Complete</span>
140
+ <snice-progress value="25"></snice-progress>
141
+ </div>
142
+
143
+ <div class="demo-item">
144
+ <span class="demo-label">50% Complete</span>
145
+ <snice-progress value="50"></snice-progress>
146
+ </div>
147
+
148
+ <div class="demo-item">
149
+ <span class="demo-label">75% Complete</span>
150
+ <snice-progress value="75"></snice-progress>
151
+ </div>
152
+
153
+ <div class="demo-item">
154
+ <span class="demo-label">100% Complete</span>
155
+ <snice-progress value="100"></snice-progress>
156
+ </div>
157
+ </div>
158
+
159
+ <div class="demo-section">
160
+ <h2>Interactive Progress</h2>
161
+
162
+ <div class="demo-item">
163
+ <span class="demo-label">Adjust Progress: <span id="progress-value">50</span>%</span>
164
+ <input type="range" min="0" max="100" value="50" id="progress-slider">
165
+ <snice-progress id="interactive-progress" value="50" show-label></snice-progress>
166
+ </div>
167
+
168
+ <div class="controls">
169
+ <button onclick="startProgress()">Start</button>
170
+ <button onclick="pauseProgress()">Pause</button>
171
+ <button onclick="resetProgress()">Reset</button>
172
+ <button onclick="completeProgress()">Complete</button>
173
+ </div>
174
+ </div>
175
+
176
+ <div class="demo-section">
177
+ <h2>Sizes</h2>
178
+
179
+ <div class="space-y">
180
+ <div class="demo-item">
181
+ <span class="demo-label">Small</span>
182
+ <snice-progress value="60" size="small"></snice-progress>
183
+ </div>
184
+
185
+ <div class="demo-item">
186
+ <span class="demo-label">Medium (Default)</span>
187
+ <snice-progress value="60" size="medium"></snice-progress>
188
+ </div>
189
+
190
+ <div class="demo-item">
191
+ <span class="demo-label">Large</span>
192
+ <snice-progress value="60" size="large"></snice-progress>
193
+ </div>
194
+ </div>
195
+ </div>
196
+
197
+ <div class="demo-section">
198
+ <h2>Colors</h2>
199
+
200
+ <div class="space-y">
201
+ <div class="demo-item">
202
+ <span class="demo-label">Primary</span>
203
+ <snice-progress value="70" color="primary"></snice-progress>
204
+ </div>
205
+
206
+ <div class="demo-item">
207
+ <span class="demo-label">Success</span>
208
+ <snice-progress value="70" color="success"></snice-progress>
209
+ </div>
210
+
211
+ <div class="demo-item">
212
+ <span class="demo-label">Warning</span>
213
+ <snice-progress value="70" color="warning"></snice-progress>
214
+ </div>
215
+
216
+ <div class="demo-item">
217
+ <span class="demo-label">Error</span>
218
+ <snice-progress value="70" color="error"></snice-progress>
219
+ </div>
220
+
221
+ <div class="demo-item">
222
+ <span class="demo-label">Info</span>
223
+ <snice-progress value="70" color="info"></snice-progress>
224
+ </div>
225
+ </div>
226
+ </div>
227
+
228
+ <div class="demo-section">
229
+ <h2>Striped & Animated</h2>
230
+
231
+ <div class="space-y">
232
+ <div class="demo-item">
233
+ <span class="demo-label">Striped</span>
234
+ <snice-progress value="60" striped></snice-progress>
235
+ </div>
236
+
237
+ <div class="demo-item">
238
+ <span class="demo-label">Striped & Animated</span>
239
+ <snice-progress value="60" striped animated></snice-progress>
240
+ </div>
241
+
242
+ <div class="demo-item">
243
+ <span class="demo-label">Animated with Label</span>
244
+ <snice-progress value="75" striped animated show-label color="success"></snice-progress>
245
+ </div>
246
+ </div>
247
+ </div>
248
+
249
+ <div class="demo-section">
250
+ <h2>Indeterminate State</h2>
251
+
252
+ <div class="space-y">
253
+ <div class="demo-item">
254
+ <span class="demo-label">Loading... (Indeterminate)</span>
255
+ <snice-progress indeterminate></snice-progress>
256
+ </div>
257
+
258
+ <div class="demo-item">
259
+ <span class="demo-label">Indeterminate with Custom Color</span>
260
+ <snice-progress indeterminate color="warning"></snice-progress>
261
+ </div>
262
+ </div>
263
+ </div>
264
+
265
+ <div class="demo-section">
266
+ <h2>With Labels</h2>
267
+
268
+ <div class="space-y">
269
+ <div class="demo-item">
270
+ <span class="demo-label">Percentage Label</span>
271
+ <snice-progress value="45" show-label></snice-progress>
272
+ </div>
273
+
274
+ <div class="demo-item">
275
+ <span class="demo-label">Custom Label</span>
276
+ <snice-progress value="60" show-label label="Processing..."></snice-progress>
277
+ </div>
278
+
279
+ <div class="demo-item">
280
+ <span class="demo-label">Step Progress</span>
281
+ <snice-progress id="step-progress" value="3" max="5" show-label label="Step 3 of 5"></snice-progress>
282
+ </div>
283
+ </div>
284
+ </div>
285
+
286
+ <div class="demo-section">
287
+ <h2>Circular Progress</h2>
288
+
289
+ <div class="circular-demo">
290
+ <div>
291
+ <span class="demo-label">Small</span>
292
+ <snice-progress variant="circular" value="75" size="small" show-label></snice-progress>
293
+ </div>
294
+
295
+ <div>
296
+ <span class="demo-label">Medium</span>
297
+ <snice-progress variant="circular" value="60" size="medium" show-label></snice-progress>
298
+ </div>
299
+
300
+ <div>
301
+ <span class="demo-label">Large</span>
302
+ <snice-progress variant="circular" value="85" size="large" show-label></snice-progress>
303
+ </div>
304
+
305
+ <div>
306
+ <span class="demo-label">XL</span>
307
+ <snice-progress variant="circular" value="90" size="xl" show-label></snice-progress>
308
+ </div>
309
+
310
+ <div>
311
+ <span class="demo-label">XXL</span>
312
+ <snice-progress variant="circular" value="95" size="xxl" show-label></snice-progress>
313
+ </div>
314
+
315
+ <div>
316
+ <span class="demo-label">XXXL</span>
317
+ <snice-progress variant="circular" value="100" size="xxxl" show-label></snice-progress>
318
+ </div>
319
+ </div>
320
+ </div>
321
+
322
+ <div class="demo-section">
323
+ <h2>Circular Colors</h2>
324
+
325
+ <div class="circular-demo">
326
+ <snice-progress variant="circular" value="80" color="primary" show-label></snice-progress>
327
+ <snice-progress variant="circular" value="90" color="success" show-label></snice-progress>
328
+ <snice-progress variant="circular" value="70" color="warning" show-label></snice-progress>
329
+ <snice-progress variant="circular" value="60" color="error" show-label></snice-progress>
330
+ <snice-progress variant="circular" value="50" color="info" show-label></snice-progress>
331
+ </div>
332
+ </div>
333
+
334
+ <div class="demo-section">
335
+ <h2>Circular Indeterminate (Spinner)</h2>
336
+
337
+ <div class="circular-demo">
338
+ <div>
339
+ <span class="demo-label">Small Spinner</span>
340
+ <snice-progress variant="circular" indeterminate size="small"></snice-progress>
341
+ </div>
342
+
343
+ <div>
344
+ <span class="demo-label">Medium Spinner</span>
345
+ <snice-progress variant="circular" indeterminate size="medium"></snice-progress>
346
+ </div>
347
+
348
+ <div>
349
+ <span class="demo-label">Large Spinner</span>
350
+ <snice-progress variant="circular" indeterminate size="large" color="success"></snice-progress>
351
+ </div>
352
+ </div>
353
+ </div>
354
+
355
+ <div class="demo-section">
356
+ <h2>Custom Styling</h2>
357
+
358
+ <div class="demo-item">
359
+ <span class="demo-label">Custom Colors and Height</span>
360
+ <snice-progress value="65" class="custom-progress" show-label></snice-progress>
361
+ </div>
362
+ </div>
363
+
364
+ <div class="demo-section">
365
+ <h2>Real-world Examples</h2>
366
+
367
+ <div class="space-y">
368
+ <div class="demo-item">
369
+ <span class="demo-label">File Upload: <span id="upload-status">0%</span></span>
370
+ <snice-progress id="upload-progress" value="0" show-label color="info"></snice-progress>
371
+ <button onclick="simulateUpload()" style="margin-top: 10px">Simulate Upload</button>
372
+ </div>
373
+
374
+ <div class="demo-item">
375
+ <span class="demo-label">System Resources</span>
376
+ <div style="margin: 10px 0">
377
+ <small>CPU Usage</small>
378
+ <snice-progress value="45" color="primary" size="small"></snice-progress>
379
+ </div>
380
+ <div style="margin: 10px 0">
381
+ <small>Memory Usage</small>
382
+ <snice-progress value="72" color="warning" size="small"></snice-progress>
383
+ </div>
384
+ <div style="margin: 10px 0">
385
+ <small>Disk Usage</small>
386
+ <snice-progress value="89" color="error" size="small"></snice-progress>
387
+ </div>
388
+ </div>
389
+ </div>
390
+ </div>
391
+
392
+ <div class="demo-section">
393
+ <h2>Events</h2>
394
+ <div class="demo-item">
395
+ <span class="demo-label">Progress with Events</span>
396
+ <snice-progress id="event-progress" value="30" show-label></snice-progress>
397
+ <div class="controls">
398
+ <button onclick="increaseProgress()">+10%</button>
399
+ <button onclick="decreaseProgress()">-10%</button>
400
+ </div>
401
+ <div id="event-log" class="status">
402
+ Event log will appear here...
403
+ </div>
404
+ </div>
405
+ </div>
406
+ </div>
407
+
408
+ <script type="module">
409
+ import './snice-progress.ts';
410
+
411
+ // Interactive progress
412
+ const slider = document.getElementById('progress-slider');
413
+ const progressValue = document.getElementById('progress-value');
414
+ const interactiveProgress = document.getElementById('interactive-progress');
415
+
416
+ slider.addEventListener('input', (e) => {
417
+ const value = e.target.value;
418
+ progressValue.textContent = value;
419
+ interactiveProgress.value = value;
420
+ });
421
+
422
+ // Progress animation
423
+ let progressInterval;
424
+ let currentProgress = 0;
425
+
426
+ window.startProgress = function() {
427
+ if (progressInterval) return;
428
+
429
+ progressInterval = setInterval(() => {
430
+ currentProgress += 1;
431
+ if (currentProgress >= 100) {
432
+ currentProgress = 100;
433
+ clearInterval(progressInterval);
434
+ progressInterval = null;
435
+ }
436
+ interactiveProgress.value = currentProgress;
437
+ slider.value = currentProgress;
438
+ progressValue.textContent = currentProgress;
439
+ }, 50);
440
+ };
441
+
442
+ window.pauseProgress = function() {
443
+ if (progressInterval) {
444
+ clearInterval(progressInterval);
445
+ progressInterval = null;
446
+ }
447
+ };
448
+
449
+ window.resetProgress = function() {
450
+ window.pauseProgress();
451
+ currentProgress = 0;
452
+ interactiveProgress.value = 0;
453
+ slider.value = 0;
454
+ progressValue.textContent = 0;
455
+ };
456
+
457
+ window.completeProgress = function() {
458
+ window.pauseProgress();
459
+ currentProgress = 100;
460
+ interactiveProgress.value = 100;
461
+ slider.value = 100;
462
+ progressValue.textContent = 100;
463
+ };
464
+
465
+ // Upload simulation
466
+ window.simulateUpload = function() {
467
+ const uploadProgress = document.getElementById('upload-progress');
468
+ const uploadStatus = document.getElementById('upload-status');
469
+ let progress = 0;
470
+
471
+ uploadProgress.indeterminate = true;
472
+ uploadStatus.textContent = 'Preparing...';
473
+
474
+ setTimeout(() => {
475
+ uploadProgress.indeterminate = false;
476
+
477
+ const interval = setInterval(() => {
478
+ progress += Math.random() * 15;
479
+ if (progress >= 100) {
480
+ progress = 100;
481
+ clearInterval(interval);
482
+ uploadStatus.textContent = 'Complete!';
483
+ } else {
484
+ uploadStatus.textContent = `${Math.round(progress)}%`;
485
+ }
486
+ uploadProgress.value = progress;
487
+ }, 300);
488
+ }, 1000);
489
+ };
490
+
491
+ // Event handling
492
+ const eventProgress = document.getElementById('event-progress');
493
+ const eventLog = document.getElementById('event-log');
494
+
495
+ eventProgress.addEventListener('progress-change', (e) => {
496
+ eventLog.textContent = `Progress changed: ${e.detail.value}/${e.detail.max} (${e.detail.percentage.toFixed(1)}%)`;
497
+ });
498
+
499
+ window.increaseProgress = function() {
500
+ const newValue = Math.min(100, eventProgress.value + 10);
501
+ eventProgress.setProgress(newValue);
502
+ };
503
+
504
+ window.decreaseProgress = function() {
505
+ const newValue = Math.max(0, eventProgress.value - 10);
506
+ eventProgress.setProgress(newValue);
507
+ };
508
+ </script>
509
+ </body>
510
+ </html>