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/breadcrumbs/demo.html ADDED
@@ -0,0 +1,404 @@
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 Breadcrumb 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
+ .breadcrumb-demo {
52
+ margin: 16px 0;
53
+ padding: 16px;
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
+ align-items: center;
65
+ }
66
+
67
+ button {
68
+ padding: 8px 16px;
69
+ background: #3b82f6;
70
+ color: white;
71
+ border: none;
72
+ border-radius: 4px;
73
+ cursor: pointer;
74
+ font-size: 14px;
75
+ transition: background 0.2s;
76
+ }
77
+
78
+ button:hover {
79
+ background: #2563eb;
80
+ }
81
+
82
+ select, input {
83
+ padding: 8px 12px;
84
+ border: 1px solid #d1d5db;
85
+ border-radius: 4px;
86
+ font-size: 14px;
87
+ }
88
+
89
+ code {
90
+ background: #f0f0f0;
91
+ padding: 2px 6px;
92
+ border-radius: 3px;
93
+ font-size: 0.9em;
94
+ }
95
+
96
+ .event-log {
97
+ margin-top: 16px;
98
+ padding: 12px;
99
+ background: #f0f9ff;
100
+ border: 1px solid #0ea5e9;
101
+ border-radius: 4px;
102
+ font-family: monospace;
103
+ font-size: 13px;
104
+ max-height: 150px;
105
+ overflow-y: auto;
106
+ }
107
+ </style>
108
+ </head>
109
+ <body>
110
+ <div class="container">
111
+ <h1>Snice Breadcrumb Component Demo</h1>
112
+
113
+ <div class="demo-section">
114
+ <h2>Basic Breadcrumb</h2>
115
+
116
+ <span class="demo-label">Using items property</span>
117
+ <div class="breadcrumb-demo">
118
+ <snice-breadcrumbs id="basic-breadcrumb"></snice-breadcrumbs>
119
+ </div>
120
+
121
+ <span class="demo-label">Using slot with snice-crumb elements (with icons)</span>
122
+ <div class="breadcrumb-demo">
123
+ <snice-breadcrumbs separator=">">
124
+ <snice-crumb href="/" label="Home" icon="🏠"></snice-crumb>
125
+ <snice-crumb href="/docs" label="Documentation" icon="📚"></snice-crumb>
126
+ <snice-crumb href="/docs/components" label="Components" icon="🧩"></snice-crumb>
127
+ <snice-crumb label="Breadcrumbs" active></snice-crumb>
128
+ </snice-breadcrumbs>
129
+ </div>
130
+
131
+ <span class="demo-label">With active last item</span>
132
+ <div class="breadcrumb-demo">
133
+ <snice-breadcrumbs id="active-breadcrumb"></snice-breadcrumbs>
134
+ </div>
135
+ </div>
136
+
137
+ <div class="demo-section">
138
+ <h2>Separators</h2>
139
+
140
+ <div class="breadcrumb-demo">
141
+ <span class="demo-label">Slash (default)</span>
142
+ <snice-breadcrumbs id="slash-breadcrumb" separator="/"></snice-breadcrumbs>
143
+ </div>
144
+
145
+ <div class="breadcrumb-demo">
146
+ <span class="demo-label">Chevron</span>
147
+ <snice-breadcrumbs id="chevron-breadcrumb" separator=">"></snice-breadcrumbs>
148
+ </div>
149
+
150
+ <div class="breadcrumb-demo">
151
+ <span class="demo-label">Double Chevron</span>
152
+ <snice-breadcrumbs id="double-chevron-breadcrumb" separator="»"></snice-breadcrumbs>
153
+ </div>
154
+
155
+ <div class="breadcrumb-demo">
156
+ <span class="demo-label">Dot</span>
157
+ <snice-breadcrumbs id="dot-breadcrumb" separator="•"></snice-breadcrumbs>
158
+ </div>
159
+
160
+ <div class="breadcrumb-demo">
161
+ <span class="demo-label">Pipe</span>
162
+ <snice-breadcrumbs id="pipe-breadcrumb" separator="|"></snice-breadcrumbs>
163
+ </div>
164
+ </div>
165
+
166
+ <div class="demo-section">
167
+ <h2>Sizes</h2>
168
+
169
+ <div class="breadcrumb-demo">
170
+ <span class="demo-label">Small</span>
171
+ <snice-breadcrumbs id="small-breadcrumb" size="small"></snice-breadcrumbs>
172
+ </div>
173
+
174
+ <div class="breadcrumb-demo">
175
+ <span class="demo-label">Medium (default)</span>
176
+ <snice-breadcrumbs id="medium-breadcrumb" size="medium"></snice-breadcrumbs>
177
+ </div>
178
+
179
+ <div class="breadcrumb-demo">
180
+ <span class="demo-label">Large</span>
181
+ <snice-breadcrumbs id="large-breadcrumb" size="large"></snice-breadcrumbs>
182
+ </div>
183
+ </div>
184
+
185
+ <div class="demo-section">
186
+ <h2>Collapsed Breadcrumbs</h2>
187
+
188
+ <span class="demo-label">Long path with max-items="3" (click ••• to expand)</span>
189
+ <div class="breadcrumb-demo">
190
+ <snice-breadcrumbs id="collapsed-breadcrumb" max-items="3"></snice-breadcrumbs>
191
+ </div>
192
+
193
+ <span class="demo-label">Using slots with max-items="2" and external icon images</span>
194
+ <div class="breadcrumb-demo">
195
+ <snice-breadcrumbs max-items="2" separator="»">
196
+ <snice-crumb href="/" label="Root" icon-image="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234f46e5'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E"></snice-crumb>
197
+ <snice-crumb href="/home" label="Home"></snice-crumb>
198
+ <snice-crumb href="/home/user" label="User"></snice-crumb>
199
+ <snice-crumb href="/home/user/docs" label="Documents" icon="📁"></snice-crumb>
200
+ <snice-crumb href="/home/user/docs/projects" label="Projects"></snice-crumb>
201
+ <snice-crumb label="Current File" icon="📄"></snice-crumb>
202
+ </snice-breadcrumbs>
203
+ </div>
204
+
205
+ <span class="demo-label">Max 2 items</span>
206
+ <div class="breadcrumb-demo">
207
+ <snice-breadcrumbs id="collapsed-2-breadcrumb" max-items="2"></snice-breadcrumbs>
208
+ </div>
209
+ </div>
210
+
211
+ <div class="demo-section">
212
+ <h2>Interactive Demo</h2>
213
+
214
+ <div class="controls">
215
+ <select id="separator-select">
216
+ <option value="/">Slash (/)</option>
217
+ <option value=">">Chevron (>)</option>
218
+ <option value="»">Double Chevron (»)</option>
219
+ <option value="•">Dot (•)</option>
220
+ <option value="|">Pipe (|)</option>
221
+ </select>
222
+
223
+ <select id="size-select">
224
+ <option value="small">Small</option>
225
+ <option value="medium" selected>Medium</option>
226
+ <option value="large">Large</option>
227
+ </select>
228
+
229
+ <input type="number" id="max-items" placeholder="Max items" min="0" max="10" value="0">
230
+
231
+ <button onclick="addItem()">Add Item</button>
232
+ <button onclick="removeItem()">Remove Item</button>
233
+ <button onclick="updateBreadcrumb()">Update</button>
234
+ </div>
235
+
236
+ <div class="breadcrumb-demo">
237
+ <snice-breadcrumbs id="interactive-breadcrumb"></snice-breadcrumbs>
238
+ </div>
239
+
240
+ <div class="event-log" id="event-log">
241
+ Event log will appear here...
242
+ </div>
243
+ </div>
244
+
245
+ <div class="demo-section">
246
+ <h2>Real-world Examples</h2>
247
+
248
+ <span class="demo-label">E-commerce Category</span>
249
+ <div class="breadcrumb-demo">
250
+ <snice-breadcrumbs id="ecommerce-breadcrumb"></snice-breadcrumbs>
251
+ </div>
252
+
253
+ <span class="demo-label">Documentation</span>
254
+ <div class="breadcrumb-demo">
255
+ <snice-breadcrumbs id="docs-breadcrumb" separator="»"></snice-breadcrumbs>
256
+ </div>
257
+
258
+ <span class="demo-label">File System</span>
259
+ <div class="breadcrumb-demo">
260
+ <snice-breadcrumbs id="filesystem-breadcrumb" max-items="4"></snice-breadcrumbs>
261
+ </div>
262
+
263
+ <span class="demo-label">Admin Dashboard</span>
264
+ <div class="breadcrumb-demo">
265
+ <snice-breadcrumbs id="admin-breadcrumb"></snice-breadcrumbs>
266
+ </div>
267
+ </div>
268
+ </div>
269
+
270
+ <script type="module">
271
+ import './snice-breadcrumbs.ts';
272
+ import './snice-crumb.ts';
273
+
274
+ // Basic breadcrumb
275
+ document.getElementById('basic-breadcrumb').items = [
276
+ { label: 'Home', href: '/' },
277
+ { label: 'Products', href: '/products' },
278
+ { label: 'Electronics', href: '/products/electronics' },
279
+ { label: 'Laptops', href: '/products/electronics/laptops' }
280
+ ];
281
+
282
+ // Active breadcrumb
283
+ document.getElementById('active-breadcrumb').items = [
284
+ { label: 'Home', href: '/' },
285
+ { label: 'Blog', href: '/blog' },
286
+ { label: 'Tech', href: '/blog/tech' },
287
+ { label: 'Latest Post', active: true }
288
+ ];
289
+
290
+ // Separator examples
291
+ const separatorItems = [
292
+ { label: 'Home', href: '/' },
293
+ { label: 'Category', href: '/category' },
294
+ { label: 'Subcategory', href: '/category/sub' },
295
+ { label: 'Item' }
296
+ ];
297
+
298
+ document.getElementById('slash-breadcrumb').items = separatorItems;
299
+ document.getElementById('chevron-breadcrumb').items = separatorItems;
300
+ document.getElementById('double-chevron-breadcrumb').items = separatorItems;
301
+ document.getElementById('dot-breadcrumb').items = separatorItems;
302
+ document.getElementById('pipe-breadcrumb').items = separatorItems;
303
+
304
+ // Size examples
305
+ const sizeItems = [
306
+ { label: 'Dashboard', href: '/' },
307
+ { label: 'Analytics', href: '/analytics' },
308
+ { label: 'Reports', href: '/analytics/reports' }
309
+ ];
310
+
311
+ document.getElementById('small-breadcrumb').items = sizeItems;
312
+ document.getElementById('medium-breadcrumb').items = sizeItems;
313
+ document.getElementById('large-breadcrumb').items = sizeItems;
314
+
315
+ // Collapsed examples
316
+ const longPath = [
317
+ { label: 'Home', href: '/' },
318
+ { label: 'Documents', href: '/docs' },
319
+ { label: 'Projects', href: '/docs/projects' },
320
+ { label: '2024', href: '/docs/projects/2024' },
321
+ { label: 'Q1', href: '/docs/projects/2024/q1' },
322
+ { label: 'Reports', href: '/docs/projects/2024/q1/reports' },
323
+ { label: 'Final Report' }
324
+ ];
325
+
326
+ document.getElementById('collapsed-breadcrumb').items = longPath;
327
+ document.getElementById('collapsed-2-breadcrumb').items = longPath;
328
+
329
+ // Interactive demo
330
+ let interactiveItems = [
331
+ { label: 'Home', href: '/' },
332
+ { label: 'Page 1', href: '/page1' },
333
+ { label: 'Page 2', href: '/page2' },
334
+ { label: 'Current Page' }
335
+ ];
336
+
337
+ const interactiveBreadcrumb = document.getElementById('interactive-breadcrumb');
338
+ interactiveBreadcrumb.items = interactiveItems;
339
+
340
+ window.addItem = function() {
341
+ const num = interactiveItems.length;
342
+ interactiveItems.splice(-1, 0, {
343
+ label: `Page ${num}`,
344
+ href: `/page${num}`
345
+ });
346
+ interactiveBreadcrumb.items = [...interactiveItems];
347
+ };
348
+
349
+ window.removeItem = function() {
350
+ if (interactiveItems.length > 2) {
351
+ interactiveItems.splice(-2, 1);
352
+ interactiveBreadcrumb.items = [...interactiveItems];
353
+ }
354
+ };
355
+
356
+ window.updateBreadcrumb = function() {
357
+ interactiveBreadcrumb.separator = document.getElementById('separator-select').value;
358
+ interactiveBreadcrumb.size = document.getElementById('size-select').value;
359
+ interactiveBreadcrumb.maxItems = parseInt(document.getElementById('max-items').value) || 0;
360
+ };
361
+
362
+ // Event logging
363
+ interactiveBreadcrumb.addEventListener('breadcrumb-click', (e) => {
364
+ const log = document.getElementById('event-log');
365
+ const time = new Date().toLocaleTimeString();
366
+ log.innerHTML = `[${time}] Clicked: "${e.detail.label}" (index: ${e.detail.index}, href: ${e.detail.href})<br>` + log.innerHTML;
367
+ });
368
+
369
+ // Real-world examples
370
+ document.getElementById('ecommerce-breadcrumb').items = [
371
+ { label: 'Store', href: '/', icon: '🏪' },
372
+ { label: 'Women', href: '/women' },
373
+ { label: 'Clothing', href: '/women/clothing' },
374
+ { label: 'Dresses', href: '/women/clothing/dresses' },
375
+ { label: 'Summer Collection' }
376
+ ];
377
+
378
+ document.getElementById('docs-breadcrumb').items = [
379
+ { label: 'Docs', href: '/docs' },
380
+ { label: 'Components', href: '/docs/components' },
381
+ { label: 'Navigation', href: '/docs/components/navigation' },
382
+ { label: 'Breadcrumb' }
383
+ ];
384
+
385
+ document.getElementById('filesystem-breadcrumb').items = [
386
+ { label: 'root', href: '/' },
387
+ { label: 'home', href: '/home' },
388
+ { label: 'user', href: '/home/user' },
389
+ { label: 'documents', href: '/home/user/documents' },
390
+ { label: 'projects', href: '/home/user/documents/projects' },
391
+ { label: 'snice', href: '/home/user/documents/projects/snice' },
392
+ { label: 'components', href: '/home/user/documents/projects/snice/components' },
393
+ { label: 'breadcrumb.ts' }
394
+ ];
395
+
396
+ document.getElementById('admin-breadcrumb').items = [
397
+ { label: 'Admin', href: '/admin' },
398
+ { label: 'Users', href: '/admin/users' },
399
+ { label: 'Roles', href: '/admin/users/roles' },
400
+ { label: 'Edit Role' }
401
+ ];
402
+ </script>
403
+ </body>
404
+ </html>
package/components/button/demo.html ADDED
@@ -0,0 +1,42 @@
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>Button Demo</title>
7
+ <link rel="stylesheet" href="../theme/theme.css">
8
+ <style>
9
+ body {
10
+ padding: 40px;
11
+ font-family: var(--snice-font-family);
12
+ background: var(--snice-color-background);
13
+ color: var(--snice-color-text);
14
+ }
15
+
16
+ .row {
17
+ margin-bottom: 20px;
18
+ display: flex;
19
+ gap: 10px;
20
+ align-items: center;
21
+ }
22
+
23
+ h2 {
24
+ color: var(--snice-color-text);
25
+ margin-bottom: 20px;
26
+ }
27
+ </style>
28
+ </head>
29
+ <body>
30
+ <h2>Button Variants</h2>
31
+ <div class="row">
32
+ <snice-button variant="default">Default</snice-button>
33
+ <snice-button variant="primary">Primary</snice-button>
34
+ <snice-button variant="success">Success</snice-button>
35
+ <snice-button variant="warning">Warning</snice-button>
36
+ <snice-button variant="danger">Danger</snice-button>
37
+ <snice-button variant="text">Text</snice-button>
38
+ </div>
39
+
40
+ <script type="module" src="./snice-button.ts"></script>
41
+ </body>
42
+ </html>