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/avatar/demo.html ADDED
@@ -0,0 +1,598 @@
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 Avatar 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
+ .avatar-row {
52
+ display: flex;
53
+ align-items: center;
54
+ gap: 16px;
55
+ margin: 16px 0;
56
+ flex-wrap: wrap;
57
+ }
58
+
59
+ .avatar-group {
60
+ display: flex;
61
+ align-items: center;
62
+ margin: 16px 0;
63
+ }
64
+
65
+ .avatar-group snice-avatar {
66
+ margin-left: -12px;
67
+ border: 3px solid white;
68
+ border-radius: 50%;
69
+ position: relative;
70
+ overflow: hidden;
71
+ }
72
+
73
+ .avatar-group snice-avatar:first-child {
74
+ margin-left: 0;
75
+ }
76
+
77
+ .avatar-group snice-avatar:hover {
78
+ z-index: 1;
79
+ }
80
+
81
+ .controls {
82
+ display: flex;
83
+ gap: 10px;
84
+ margin: 20px 0;
85
+ flex-wrap: wrap;
86
+ }
87
+
88
+ button {
89
+ padding: 8px 16px;
90
+ background: #3b82f6;
91
+ color: white;
92
+ border: none;
93
+ border-radius: 4px;
94
+ cursor: pointer;
95
+ font-size: 14px;
96
+ transition: background 0.2s;
97
+ }
98
+
99
+ button:hover {
100
+ background: #2563eb;
101
+ }
102
+
103
+ .profile-card {
104
+ display: flex;
105
+ align-items: center;
106
+ gap: 16px;
107
+ padding: 16px;
108
+ background: white;
109
+ border: 1px solid #e0e0e0;
110
+ border-radius: 8px;
111
+ margin: 16px 0;
112
+ }
113
+
114
+ .profile-info {
115
+ flex: 1;
116
+ }
117
+
118
+ .profile-name {
119
+ font-weight: 600;
120
+ font-size: 16px;
121
+ margin: 0;
122
+ }
123
+
124
+ .profile-role {
125
+ color: #6b7280;
126
+ font-size: 14px;
127
+ margin: 4px 0 0 0;
128
+ }
129
+
130
+ .avatar-grid {
131
+ display: grid;
132
+ grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
133
+ gap: 16px;
134
+ margin: 20px 0;
135
+ }
136
+
137
+ .avatar-item {
138
+ display: flex;
139
+ flex-direction: column;
140
+ align-items: center;
141
+ gap: 8px;
142
+ }
143
+
144
+ .avatar-name {
145
+ font-size: 12px;
146
+ text-align: center;
147
+ color: #666;
148
+ }
149
+
150
+ input[type="text"],
151
+ input[type="url"] {
152
+ padding: 8px 12px;
153
+ border: 1px solid #d1d5db;
154
+ border-radius: 4px;
155
+ font-size: 14px;
156
+ width: 200px;
157
+ }
158
+
159
+ select {
160
+ padding: 8px 12px;
161
+ border: 1px solid #d1d5db;
162
+ border-radius: 4px;
163
+ background: white;
164
+ font-size: 14px;
165
+ }
166
+
167
+ code {
168
+ background: #f0f0f0;
169
+ padding: 2px 6px;
170
+ border-radius: 3px;
171
+ font-size: 0.9em;
172
+ }
173
+
174
+ .comment-box {
175
+ display: flex;
176
+ gap: 12px;
177
+ padding: 16px;
178
+ background: white;
179
+ border: 1px solid #e0e0e0;
180
+ border-radius: 8px;
181
+ margin: 16px 0;
182
+ }
183
+
184
+ .comment-content {
185
+ flex: 1;
186
+ }
187
+
188
+ .comment-header {
189
+ display: flex;
190
+ align-items: center;
191
+ gap: 8px;
192
+ margin-bottom: 8px;
193
+ }
194
+
195
+ .comment-author {
196
+ font-weight: 600;
197
+ font-size: 14px;
198
+ }
199
+
200
+ .comment-time {
201
+ color: #6b7280;
202
+ font-size: 12px;
203
+ }
204
+
205
+ .comment-text {
206
+ font-size: 14px;
207
+ line-height: 1.5;
208
+ margin: 0;
209
+ }
210
+
211
+ .team-grid {
212
+ display: grid;
213
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
214
+ gap: 20px;
215
+ margin: 20px 0;
216
+ }
217
+
218
+ .team-member {
219
+ text-align: center;
220
+ padding: 20px;
221
+ background: white;
222
+ border: 1px solid #e0e0e0;
223
+ border-radius: 8px;
224
+ transition: box-shadow 0.2s;
225
+ }
226
+
227
+ .team-member:hover {
228
+ box-shadow: 0 4px 12px rgba(0,0,0,0.1);
229
+ }
230
+
231
+ .team-member snice-avatar {
232
+ margin: 0 auto 12px;
233
+ }
234
+
235
+ .team-member-name {
236
+ font-weight: 600;
237
+ margin: 8px 0 4px;
238
+ }
239
+
240
+ .team-member-role {
241
+ color: #6b7280;
242
+ font-size: 14px;
243
+ }
244
+ </style>
245
+ </head>
246
+ <body>
247
+ <div class="container">
248
+ <h1>Snice Avatar Component Demo</h1>
249
+
250
+ <div class="demo-section">
251
+ <h2>Basic Avatars</h2>
252
+
253
+ <span class="demo-label">With Image</span>
254
+ <div class="avatar-row">
255
+ <snice-avatar
256
+ src="https://i.pravatar.cc/150?img=1"
257
+ name="John Doe">
258
+ </snice-avatar>
259
+ <snice-avatar
260
+ src="https://i.pravatar.cc/150?img=2"
261
+ name="Jane Smith">
262
+ </snice-avatar>
263
+ <snice-avatar
264
+ src="https://i.pravatar.cc/150?img=3"
265
+ name="Bob Wilson">
266
+ </snice-avatar>
267
+ </div>
268
+
269
+ <span class="demo-label">Fallback to Initials</span>
270
+ <div class="avatar-row">
271
+ <snice-avatar name="John Doe"></snice-avatar>
272
+ <snice-avatar name="Jane Smith"></snice-avatar>
273
+ <snice-avatar name="Bob Wilson"></snice-avatar>
274
+ <snice-avatar name="Alice"></snice-avatar>
275
+ <snice-avatar name="X"></snice-avatar>
276
+ </div>
277
+
278
+ <span class="demo-label">No Name (Default Icon)</span>
279
+ <div class="avatar-row">
280
+ <snice-avatar></snice-avatar>
281
+ <snice-avatar size="large"></snice-avatar>
282
+ <snice-avatar size="xl"></snice-avatar>
283
+ </div>
284
+
285
+ <span class="demo-label">Broken Image (Fallback)</span>
286
+ <div class="avatar-row">
287
+ <snice-avatar
288
+ src="https://broken-image-url.com/404.jpg"
289
+ name="Fallback User">
290
+ </snice-avatar>
291
+ <snice-avatar
292
+ src="https://invalid.url/image.png"
293
+ name="Error Example">
294
+ </snice-avatar>
295
+ </div>
296
+ </div>
297
+
298
+ <div class="demo-section">
299
+ <h2>Sizes</h2>
300
+
301
+ <div class="avatar-row">
302
+ <snice-avatar size="xs" name="XS"></snice-avatar>
303
+ <snice-avatar size="small" name="SM"></snice-avatar>
304
+ <snice-avatar size="medium" name="MD"></snice-avatar>
305
+ <snice-avatar size="large" name="LG"></snice-avatar>
306
+ <snice-avatar size="xl" name="XL"></snice-avatar>
307
+ <snice-avatar size="xxl" name="XXL"></snice-avatar>
308
+ </div>
309
+
310
+ <span class="demo-label">With Images</span>
311
+ <div class="avatar-row">
312
+ <snice-avatar size="xs" src="https://i.pravatar.cc/150?img=4"></snice-avatar>
313
+ <snice-avatar size="small" src="https://i.pravatar.cc/150?img=5"></snice-avatar>
314
+ <snice-avatar size="medium" src="https://i.pravatar.cc/150?img=6"></snice-avatar>
315
+ <snice-avatar size="large" src="https://i.pravatar.cc/150?img=7"></snice-avatar>
316
+ <snice-avatar size="xl" src="https://i.pravatar.cc/150?img=8"></snice-avatar>
317
+ <snice-avatar size="xxl" src="https://i.pravatar.cc/150?img=9"></snice-avatar>
318
+ </div>
319
+ </div>
320
+
321
+ <div class="demo-section">
322
+ <h2>Shapes</h2>
323
+
324
+ <div class="avatar-row">
325
+ <snice-avatar shape="circle" name="Circle" size="large"></snice-avatar>
326
+ <snice-avatar shape="square" name="Square" size="large"></snice-avatar>
327
+ <snice-avatar shape="rounded" name="Rounded" size="large"></snice-avatar>
328
+ </div>
329
+
330
+ <span class="demo-label">With Images</span>
331
+ <div class="avatar-row">
332
+ <snice-avatar shape="circle" src="https://i.pravatar.cc/150?img=10" size="large"></snice-avatar>
333
+ <snice-avatar shape="square" src="https://i.pravatar.cc/150?img=11" size="large"></snice-avatar>
334
+ <snice-avatar shape="rounded" src="https://i.pravatar.cc/150?img=12" size="large"></snice-avatar>
335
+ </div>
336
+ </div>
337
+
338
+ <div class="demo-section">
339
+ <h2>Status Indicators</h2>
340
+
341
+ <span class="demo-label">Different Status Types</span>
342
+ <div class="avatar-row">
343
+ <snice-avatar name="Online" status="online" size="large"></snice-avatar>
344
+ <snice-avatar name="Offline" status="offline" size="large"></snice-avatar>
345
+ <snice-avatar name="Away" status="away" size="large"></snice-avatar>
346
+ <snice-avatar name="Busy" status="busy" size="large"></snice-avatar>
347
+ </div>
348
+
349
+ <span class="demo-label">Status Positions</span>
350
+ <div class="avatar-row">
351
+ <snice-avatar name="TR" status="online" status-position="top-right" size="large"></snice-avatar>
352
+ <snice-avatar name="TL" status="online" status-position="top-left" size="large"></snice-avatar>
353
+ <snice-avatar name="BR" status="online" status-position="bottom-right" size="large"></snice-avatar>
354
+ <snice-avatar name="BL" status="online" status-position="bottom-left" size="large"></snice-avatar>
355
+ </div>
356
+
357
+ <span class="demo-label">With Different Sizes</span>
358
+ <div class="avatar-row">
359
+ <snice-avatar name="XS" status="online" size="xs"></snice-avatar>
360
+ <snice-avatar name="SM" status="away" size="small"></snice-avatar>
361
+ <snice-avatar name="MD" status="busy" size="medium"></snice-avatar>
362
+ <snice-avatar name="LG" status="online" size="large"></snice-avatar>
363
+ <snice-avatar name="XL" status="offline" size="xl"></snice-avatar>
364
+ </div>
365
+ </div>
366
+
367
+ <div class="demo-section">
368
+ <h2>Auto-generated Colors</h2>
369
+
370
+ <span class="demo-label">Consistent colors based on name</span>
371
+ <div class="avatar-grid">
372
+ <div class="avatar-item">
373
+ <snice-avatar name="Alice Johnson"></snice-avatar>
374
+ <span class="avatar-name">Alice Johnson</span>
375
+ </div>
376
+ <div class="avatar-item">
377
+ <snice-avatar name="Bob Smith"></snice-avatar>
378
+ <span class="avatar-name">Bob Smith</span>
379
+ </div>
380
+ <div class="avatar-item">
381
+ <snice-avatar name="Carol White"></snice-avatar>
382
+ <span class="avatar-name">Carol White</span>
383
+ </div>
384
+ <div class="avatar-item">
385
+ <snice-avatar name="David Brown"></snice-avatar>
386
+ <span class="avatar-name">David Brown</span>
387
+ </div>
388
+ <div class="avatar-item">
389
+ <snice-avatar name="Emma Davis"></snice-avatar>
390
+ <span class="avatar-name">Emma Davis</span>
391
+ </div>
392
+ <div class="avatar-item">
393
+ <snice-avatar name="Frank Wilson"></snice-avatar>
394
+ <span class="avatar-name">Frank Wilson</span>
395
+ </div>
396
+ <div class="avatar-item">
397
+ <snice-avatar name="Grace Lee"></snice-avatar>
398
+ <span class="avatar-name">Grace Lee</span>
399
+ </div>
400
+ <div class="avatar-item">
401
+ <snice-avatar name="Henry Taylor"></snice-avatar>
402
+ <span class="avatar-name">Henry Taylor</span>
403
+ </div>
404
+ </div>
405
+ </div>
406
+
407
+ <div class="demo-section">
408
+ <h2>Avatar Groups</h2>
409
+
410
+ <span class="demo-label">Overlapping avatars</span>
411
+ <div class="avatar-group">
412
+ <snice-avatar src="https://i.pravatar.cc/150?img=1" name="User 1"></snice-avatar>
413
+ <snice-avatar src="https://i.pravatar.cc/150?img=2" name="User 2"></snice-avatar>
414
+ <snice-avatar src="https://i.pravatar.cc/150?img=3" name="User 3"></snice-avatar>
415
+ <snice-avatar src="https://i.pravatar.cc/150?img=4" name="User 4"></snice-avatar>
416
+ <snice-avatar name="+5" fallback-background="#e5e7eb"></snice-avatar>
417
+ </div>
418
+
419
+ <span class="demo-label">With initials</span>
420
+ <div class="avatar-group">
421
+ <snice-avatar name="Alice Johnson"></snice-avatar>
422
+ <snice-avatar name="Bob Smith"></snice-avatar>
423
+ <snice-avatar name="Carol White"></snice-avatar>
424
+ <snice-avatar name="David Brown"></snice-avatar>
425
+ </div>
426
+ </div>
427
+
428
+ <div class="demo-section">
429
+ <h2>Real-world Examples</h2>
430
+
431
+ <span class="demo-label">Profile Cards</span>
432
+ <div class="profile-card">
433
+ <snice-avatar
434
+ src="https://i.pravatar.cc/150?img=15"
435
+ name="Sarah Johnson"
436
+ size="large"
437
+ status="online">
438
+ </snice-avatar>
439
+ <div class="profile-info">
440
+ <p class="profile-name">Sarah Johnson</p>
441
+ <p class="profile-role">Senior Developer</p>
442
+ </div>
443
+ </div>
444
+
445
+ <div class="profile-card">
446
+ <snice-avatar
447
+ name="Michael Chen"
448
+ size="large"
449
+ status="busy">
450
+ </snice-avatar>
451
+ <div class="profile-info">
452
+ <p class="profile-name">Michael Chen</p>
453
+ <p class="profile-role">Product Manager</p>
454
+ </div>
455
+ </div>
456
+
457
+ <span class="demo-label">Comments</span>
458
+ <div class="comment-box">
459
+ <snice-avatar
460
+ src="https://i.pravatar.cc/150?img=20"
461
+ name="Emma Wilson"
462
+ size="medium">
463
+ </snice-avatar>
464
+ <div class="comment-content">
465
+ <div class="comment-header">
466
+ <span class="comment-author">Emma Wilson</span>
467
+ <span class="comment-time">2 hours ago</span>
468
+ </div>
469
+ <p class="comment-text">
470
+ This is a great implementation! The avatar component looks really polished.
471
+ </p>
472
+ </div>
473
+ </div>
474
+
475
+ <div class="comment-box">
476
+ <snice-avatar
477
+ name="James Brown"
478
+ size="medium">
479
+ </snice-avatar>
480
+ <div class="comment-content">
481
+ <div class="comment-header">
482
+ <span class="comment-author">James Brown</span>
483
+ <span class="comment-time">5 hours ago</span>
484
+ </div>
485
+ <p class="comment-text">
486
+ I love how the fallback to initials works seamlessly when images fail to load.
487
+ </p>
488
+ </div>
489
+ </div>
490
+
491
+ <span class="demo-label">Team Members</span>
492
+ <div class="team-grid">
493
+ <div class="team-member">
494
+ <snice-avatar
495
+ src="https://i.pravatar.cc/150?img=25"
496
+ name="Lisa Anderson"
497
+ size="xl"
498
+ status="online">
499
+ </snice-avatar>
500
+ <div class="team-member-name">Lisa Anderson</div>
501
+ <div class="team-member-role">CEO</div>
502
+ </div>
503
+ <div class="team-member">
504
+ <snice-avatar
505
+ src="https://i.pravatar.cc/150?img=26"
506
+ name="Tom Martinez"
507
+ size="xl"
508
+ status="away">
509
+ </snice-avatar>
510
+ <div class="team-member-name">Tom Martinez</div>
511
+ <div class="team-member-role">CTO</div>
512
+ </div>
513
+ <div class="team-member">
514
+ <snice-avatar
515
+ name="Nina Patel"
516
+ size="xl"
517
+ status="online">
518
+ </snice-avatar>
519
+ <div class="team-member-name">Nina Patel</div>
520
+ <div class="team-member-role">Designer</div>
521
+ </div>
522
+ <div class="team-member">
523
+ <snice-avatar
524
+ name="Alex Kim"
525
+ size="xl"
526
+ status="offline">
527
+ </snice-avatar>
528
+ <div class="team-member-name">Alex Kim</div>
529
+ <div class="team-member-role">Developer</div>
530
+ </div>
531
+ </div>
532
+ </div>
533
+
534
+ <div class="demo-section">
535
+ <h2>Interactive Demo</h2>
536
+
537
+ <div class="controls">
538
+ <input type="text" id="name-input" placeholder="Enter name" value="John Doe">
539
+ <input type="url" id="src-input" placeholder="Image URL (optional)">
540
+ <select id="size-select">
541
+ <option value="xs">Extra Small</option>
542
+ <option value="small">Small</option>
543
+ <option value="medium" selected>Medium</option>
544
+ <option value="large">Large</option>
545
+ <option value="xl">Extra Large</option>
546
+ <option value="xxl">XXL</option>
547
+ </select>
548
+ <select id="shape-select">
549
+ <option value="circle" selected>Circle</option>
550
+ <option value="square">Square</option>
551
+ <option value="rounded">Rounded</option>
552
+ </select>
553
+ <select id="status-select">
554
+ <option value="">No Status</option>
555
+ <option value="online">Online</option>
556
+ <option value="offline">Offline</option>
557
+ <option value="away">Away</option>
558
+ <option value="busy">Busy</option>
559
+ </select>
560
+ <button onclick="updateAvatar()">Update Avatar</button>
561
+ </div>
562
+
563
+ <div style="text-align: center; padding: 40px; background: white; border: 1px solid #e0e0e0; border-radius: 8px;">
564
+ <snice-avatar
565
+ id="demo-avatar"
566
+ name="John Doe"
567
+ size="medium"
568
+ shape="circle">
569
+ </snice-avatar>
570
+ </div>
571
+ </div>
572
+ </div>
573
+
574
+ <script type="module">
575
+ import './snice-avatar.ts';
576
+
577
+ window.updateAvatar = function() {
578
+ const avatar = document.getElementById('demo-avatar');
579
+ const name = document.getElementById('name-input').value;
580
+ const src = document.getElementById('src-input').value;
581
+ const size = document.getElementById('size-select').value;
582
+ const shape = document.getElementById('shape-select').value;
583
+ const status = document.getElementById('status-select').value;
584
+
585
+ avatar.name = name;
586
+ avatar.src = src;
587
+ avatar.size = size;
588
+ avatar.shape = shape;
589
+ avatar.status = status;
590
+ };
591
+
592
+ // Auto-update on input changes
593
+ ['name-input', 'src-input', 'size-select', 'shape-select', 'status-select'].forEach(id => {
594
+ document.getElementById(id).addEventListener('change', updateAvatar);
595
+ });
596
+ </script>
597
+ </body>
598
+ </html>