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/toast/demo.html ADDED
@@ -0,0 +1,329 @@
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 Toast Demo</title>
7
+ <link rel="stylesheet" href="../theme/theme.css">
8
+ <style>
9
+ body {
10
+ font-family: var(--snice-font-family);
11
+ background: var(--snice-color-background);
12
+ color: var(--snice-color-text);
13
+ padding: var(--snice-spacing-lg);
14
+ margin: 0;
15
+ }
16
+
17
+ .container {
18
+ max-width: 800px;
19
+ margin: 0 auto;
20
+ }
21
+
22
+ h1 {
23
+ font-size: var(--snice-font-size-3xl);
24
+ margin-bottom: var(--snice-spacing-xl);
25
+ }
26
+
27
+ .section {
28
+ margin-bottom: var(--snice-spacing-2xl);
29
+ }
30
+
31
+ .section h2 {
32
+ font-size: var(--snice-font-size-xl);
33
+ margin-bottom: var(--snice-spacing-md);
34
+ color: var(--snice-color-text-secondary);
35
+ }
36
+
37
+ .controls {
38
+ display: flex;
39
+ flex-wrap: wrap;
40
+ gap: var(--snice-spacing-sm);
41
+ margin-bottom: var(--snice-spacing-lg);
42
+ }
43
+
44
+ .button-group {
45
+ display: flex;
46
+ flex-wrap: wrap;
47
+ gap: var(--snice-spacing-xs);
48
+ }
49
+
50
+ button {
51
+ padding: var(--snice-spacing-xs) var(--snice-spacing-md);
52
+ border-radius: var(--snice-border-radius-md);
53
+ border: 1px solid var(--snice-color-border);
54
+ background: var(--snice-color-background);
55
+ color: var(--snice-color-text);
56
+ font-size: var(--snice-font-size-sm);
57
+ font-family: var(--snice-font-family);
58
+ cursor: pointer;
59
+ transition: all var(--snice-transition-fast);
60
+ }
61
+
62
+ button:hover {
63
+ background: var(--snice-color-background-secondary);
64
+ border-color: var(--snice-color-border-hover);
65
+ }
66
+
67
+ button.success {
68
+ background: var(--snice-color-success);
69
+ color: var(--snice-color-text-inverse);
70
+ border-color: var(--snice-color-success);
71
+ }
72
+
73
+ button.success:hover {
74
+ background: var(--snice-color-success-hover);
75
+ border-color: var(--snice-color-success-hover);
76
+ }
77
+
78
+ button.error {
79
+ background: var(--snice-color-danger);
80
+ color: var(--snice-color-text-inverse);
81
+ border-color: var(--snice-color-danger);
82
+ }
83
+
84
+ button.error:hover {
85
+ background: var(--snice-color-danger-hover);
86
+ border-color: var(--snice-color-danger-hover);
87
+ }
88
+
89
+ button.warning {
90
+ background: var(--snice-color-warning);
91
+ color: var(--snice-color-text-inverse);
92
+ border-color: var(--snice-color-warning);
93
+ }
94
+
95
+ button.warning:hover {
96
+ background: var(--snice-color-warning-hover);
97
+ border-color: var(--snice-color-warning-hover);
98
+ }
99
+
100
+ button.info {
101
+ background: var(--snice-color-primary);
102
+ color: var(--snice-color-text-inverse);
103
+ border-color: var(--snice-color-primary);
104
+ }
105
+
106
+ button.info:hover {
107
+ background: var(--snice-color-primary-hover);
108
+ border-color: var(--snice-color-primary-hover);
109
+ }
110
+
111
+ .position-controls {
112
+ display: grid;
113
+ grid-template-columns: repeat(3, 1fr);
114
+ gap: var(--snice-spacing-xs);
115
+ max-width: 300px;
116
+ }
117
+
118
+ .position-controls button {
119
+ padding: var(--snice-spacing-xs);
120
+ font-size: var(--snice-font-size-xs);
121
+ }
122
+
123
+ .position-controls button.active {
124
+ background: var(--snice-color-primary);
125
+ color: var(--snice-color-text-inverse);
126
+ border-color: var(--snice-color-primary);
127
+ }
128
+
129
+ .custom-message {
130
+ display: flex;
131
+ gap: var(--snice-spacing-sm);
132
+ margin-bottom: var(--snice-spacing-md);
133
+ }
134
+
135
+ .custom-message input {
136
+ flex: 1;
137
+ padding: var(--snice-spacing-xs) var(--snice-spacing-sm);
138
+ border: 1px solid var(--snice-color-border);
139
+ border-radius: var(--snice-border-radius-md);
140
+ background: var(--snice-color-background);
141
+ color: var(--snice-color-text);
142
+ font-size: var(--snice-font-size-sm);
143
+ font-family: var(--snice-font-family);
144
+ }
145
+
146
+ .custom-message input:focus {
147
+ outline: none;
148
+ border-color: var(--snice-color-border-focus);
149
+ box-shadow: 0 0 0 3px var(--snice-focus-ring-color);
150
+ }
151
+
152
+ .options {
153
+ display: flex;
154
+ gap: var(--snice-spacing-md);
155
+ margin-bottom: var(--snice-spacing-md);
156
+ }
157
+
158
+ .options label {
159
+ display: flex;
160
+ align-items: center;
161
+ gap: var(--snice-spacing-xs);
162
+ font-size: var(--snice-font-size-sm);
163
+ }
164
+
165
+ .code {
166
+ background: var(--snice-color-background-tertiary);
167
+ padding: var(--snice-spacing-md);
168
+ border-radius: var(--snice-border-radius-md);
169
+ font-family: var(--snice-font-family-mono);
170
+ font-size: var(--snice-font-size-sm);
171
+ line-height: var(--snice-line-height-loose);
172
+ }
173
+ </style>
174
+ <script type="module">
175
+ import Toast from './snice-toast-container.ts';
176
+ import { element, controller, on } from '../../src/index.ts';
177
+
178
+ let currentPosition = 'bottom-right';
179
+
180
+ function showToast(type) {
181
+ const messages = {
182
+ success: 'Operation completed successfully!',
183
+ error: 'An error occurred. Please try again.',
184
+ warning: 'This action cannot be undone.',
185
+ info: 'New updates are available.'
186
+ };
187
+
188
+ Toast[type](messages[type], { position: currentPosition });
189
+ }
190
+
191
+ function showEventToast(type) {
192
+ const messages = {
193
+ success: 'Event triggered: Success!',
194
+ error: 'Event triggered: Error occurred!',
195
+ warning: 'Event triggered: Warning!',
196
+ info: 'Event triggered: Info message'
197
+ };
198
+
199
+ const event = new CustomEvent('@snice/show-toast', {
200
+ detail: {
201
+ message: messages[type],
202
+ options: { type, position: currentPosition }
203
+ },
204
+ bubbles: true,
205
+ composed: true
206
+ });
207
+ document.body.dispatchEvent(event);
208
+ }
209
+
210
+ function setPosition(position) {
211
+ currentPosition = position;
212
+ document.querySelectorAll('.position-controls button').forEach(btn => {
213
+ btn.classList.toggle('active', btn.textContent.includes(position));
214
+ });
215
+ }
216
+
217
+ function showCustom() {
218
+ const input = document.getElementById('custom-input');
219
+ const message = input.value || 'Custom toast message';
220
+ const closable = document.getElementById('closable').checked;
221
+ const hasIcon = document.getElementById('has-icon').checked;
222
+ const duration = parseInt(document.getElementById('duration').value) * 1000;
223
+
224
+ Toast.info(message, {
225
+ position: currentPosition,
226
+ closable,
227
+ icon: hasIcon,
228
+ duration
229
+ });
230
+ }
231
+
232
+ function showMultiple() {
233
+ Toast.success('First toast message', { position: currentPosition });
234
+ setTimeout(() => {
235
+ Toast.info('Second toast message', { position: currentPosition });
236
+ }, 500);
237
+ setTimeout(() => {
238
+ Toast.warning('Third toast message', { position: currentPosition });
239
+ }, 1000);
240
+ setTimeout(() => {
241
+ Toast.error('Fourth toast message', { position: currentPosition });
242
+ }, 1500);
243
+ }
244
+
245
+ function clearAll() {
246
+ Toast.clear();
247
+ }
248
+
249
+ // Expose functions to window for onclick handlers
250
+ window.showToast = showToast;
251
+ window.showEventToast = showEventToast;
252
+ window.setPosition = setPosition;
253
+ window.showCustom = showCustom;
254
+ window.showMultiple = showMultiple;
255
+ window.clearAll = clearAll;
256
+ </script>
257
+ </head>
258
+ <body>
259
+ <div class="container">
260
+ <h1>Snice Toast Component</h1>
261
+
262
+ <div class="section">
263
+ <h2>Basic Toasts</h2>
264
+ <div class="button-group">
265
+ <button class="success" onclick="showToast('success')">Success Toast</button>
266
+ <button class="error" onclick="showToast('error')">Error Toast</button>
267
+ <button class="warning" onclick="showToast('warning')">Warning Toast</button>
268
+ <button class="info" onclick="showToast('info')">Info Toast</button>
269
+ </div>
270
+ </div>
271
+
272
+ <div class="section">
273
+ <h2>Position</h2>
274
+ <div class="position-controls">
275
+ <button onclick="setPosition('top-left')">↖ Top Left</button>
276
+ <button onclick="setPosition('top-center')">↑ Top Center</button>
277
+ <button onclick="setPosition('top-right')">↗ Top Right</button>
278
+ <button onclick="setPosition('bottom-left')">↙ Bottom Left</button>
279
+ <button onclick="setPosition('bottom-center')">↓ Bottom Center</button>
280
+ <button class="active" onclick="setPosition('bottom-right')">↘ Bottom Right</button>
281
+ </div>
282
+ </div>
283
+
284
+ <div class="section">
285
+ <h2>Custom Toast</h2>
286
+ <div class="custom-message">
287
+ <input type="text" id="custom-input" placeholder="Enter custom message...">
288
+ <button onclick="showCustom()">Show Custom</button>
289
+ </div>
290
+ <div class="options">
291
+ <label>
292
+ <input type="checkbox" id="closable" checked>
293
+ Closable
294
+ </label>
295
+ <label>
296
+ <input type="checkbox" id="has-icon" checked>
297
+ Show Icon
298
+ </label>
299
+ <label>
300
+ Duration (sec):
301
+ <input type="number" id="duration" value="4" min="0" max="30" style="width: 60px;">
302
+ </label>
303
+ </div>
304
+ </div>
305
+
306
+ <div class="section">
307
+ <h2>Event-Based Triggering</h2>
308
+ <p style="font-size: var(--snice-font-size-sm); color: var(--snice-color-text-secondary); margin-bottom: var(--snice-spacing-md);">
309
+ Toasts can be triggered via events that bubble up to the document
310
+ </p>
311
+ <div class="button-group">
312
+ <button class="success" onclick="showEventToast('success')">Event Success</button>
313
+ <button class="error" onclick="showEventToast('error')">Event Error</button>
314
+ <button class="warning" onclick="showEventToast('warning')">Event Warning</button>
315
+ <button class="info" onclick="showEventToast('info')">Event Info</button>
316
+ </div>
317
+ </div>
318
+
319
+ <div class="section">
320
+ <h2>Actions</h2>
321
+ <div class="button-group">
322
+ <button onclick="showMultiple()">Show Multiple</button>
323
+ <button onclick="clearAll()">Clear All</button>
324
+ </div>
325
+ </div>
326
+
327
+ </div>
328
+ </body>
329
+ </html>
package/components/tooltip/demo.html ADDED
@@ -0,0 +1,350 @@
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 Tooltip 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: 1200px;
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-grid {
40
+ display: grid;
41
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
42
+ gap: 20px;
43
+ margin: 20px 0;
44
+ }
45
+
46
+ .demo-item {
47
+ padding: 20px;
48
+ background: #f8f8f8;
49
+ border-radius: 4px;
50
+ text-align: center;
51
+ }
52
+
53
+ button {
54
+ padding: 8px 16px;
55
+ background: #3b82f6;
56
+ color: white;
57
+ border: none;
58
+ border-radius: 4px;
59
+ cursor: pointer;
60
+ font-size: 14px;
61
+ }
62
+
63
+ button:hover {
64
+ background: #2563eb;
65
+ }
66
+
67
+ .edge-demo {
68
+ position: relative;
69
+ height: 300px;
70
+ border: 2px dashed #ccc;
71
+ border-radius: 4px;
72
+ margin: 20px 0;
73
+ }
74
+
75
+ .edge-button {
76
+ position: absolute;
77
+ padding: 6px 12px;
78
+ font-size: 12px;
79
+ }
80
+
81
+ .edge-button.top-left { top: 10px; left: 10px; }
82
+ .edge-button.top-right { top: 10px; right: 10px; }
83
+ .edge-button.bottom-left { bottom: 10px; left: 10px; }
84
+ .edge-button.bottom-right { bottom: 10px; right: 10px; }
85
+ .edge-button.center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
86
+
87
+ .custom-tooltip {
88
+ --tooltip-bg: #6366f1;
89
+ --tooltip-color: white;
90
+ --tooltip-radius: 12px;
91
+ --tooltip-padding: 12px 16px;
92
+ }
93
+
94
+ .link {
95
+ color: #3b82f6;
96
+ text-decoration: underline;
97
+ cursor: pointer;
98
+ }
99
+
100
+ input {
101
+ padding: 8px 12px;
102
+ border: 1px solid #ccc;
103
+ border-radius: 4px;
104
+ font-size: 14px;
105
+ }
106
+
107
+ .icon {
108
+ display: inline-block;
109
+ width: 20px;
110
+ height: 20px;
111
+ background: #6366f1;
112
+ border-radius: 50%;
113
+ vertical-align: middle;
114
+ }
115
+
116
+ code {
117
+ background: #f0f0f0;
118
+ padding: 2px 6px;
119
+ border-radius: 3px;
120
+ font-size: 0.9em;
121
+ }
122
+ </style>
123
+ </head>
124
+ <body>
125
+ <div class="container">
126
+ <h1>Snice Tooltip Component Demo</h1>
127
+
128
+ <div class="demo-section">
129
+ <h2>Basic Positions</h2>
130
+ <div class="demo-grid">
131
+ <div class="demo-item">
132
+ <snice-tooltip content="This tooltip appears on top" position="top">
133
+ <button>Top</button>
134
+ </snice-tooltip>
135
+ </div>
136
+ <div class="demo-item">
137
+ <snice-tooltip content="This tooltip appears on bottom" position="bottom">
138
+ <button>Bottom</button>
139
+ </snice-tooltip>
140
+ </div>
141
+ <div class="demo-item">
142
+ <snice-tooltip content="This tooltip appears on left" position="left">
143
+ <button>Left</button>
144
+ </snice-tooltip>
145
+ </div>
146
+ <div class="demo-item">
147
+ <snice-tooltip content="This tooltip appears on right" position="right">
148
+ <button>Right</button>
149
+ </snice-tooltip>
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <div class="demo-section">
155
+ <h2>Aligned Positions</h2>
156
+ <div class="demo-grid">
157
+ <div class="demo-item">
158
+ <snice-tooltip content="Top start aligned" position="top-start">
159
+ <button>Top Start</button>
160
+ </snice-tooltip>
161
+ </div>
162
+ <div class="demo-item">
163
+ <snice-tooltip content="Top end aligned" position="top-end">
164
+ <button>Top End</button>
165
+ </snice-tooltip>
166
+ </div>
167
+ <div class="demo-item">
168
+ <snice-tooltip content="Bottom start aligned" position="bottom-start">
169
+ <button>Bottom Start</button>
170
+ </snice-tooltip>
171
+ </div>
172
+ <div class="demo-item">
173
+ <snice-tooltip content="Bottom end aligned" position="bottom-end">
174
+ <button>Bottom End</button>
175
+ </snice-tooltip>
176
+ </div>
177
+ </div>
178
+ </div>
179
+
180
+ <div class="demo-section">
181
+ <h2>Trigger Types</h2>
182
+ <div class="demo-grid">
183
+ <div class="demo-item">
184
+ <snice-tooltip content="Hover to see this tooltip" trigger="hover">
185
+ <button>Hover Trigger</button>
186
+ </snice-tooltip>
187
+ </div>
188
+ <div class="demo-item">
189
+ <snice-tooltip content="Click to toggle this tooltip" trigger="click">
190
+ <button>Click Trigger</button>
191
+ </snice-tooltip>
192
+ </div>
193
+ <div class="demo-item">
194
+ <snice-tooltip content="Focus to see this tooltip" trigger="focus">
195
+ <input type="text" placeholder="Focus me">
196
+ </snice-tooltip>
197
+ </div>
198
+ <div class="demo-item">
199
+ <snice-tooltip content="Manually controlled tooltip" trigger="manual" id="manual-tooltip">
200
+ <button onclick="toggleManualTooltip()">Manual Control</button>
201
+ </snice-tooltip>
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
+ <div class="demo-section">
207
+ <h2>Delays</h2>
208
+ <div class="demo-grid">
209
+ <div class="demo-item">
210
+ <snice-tooltip content="Shows after 500ms delay" delay="500">
211
+ <button>Show Delay (500ms)</button>
212
+ </snice-tooltip>
213
+ </div>
214
+ <div class="demo-item">
215
+ <snice-tooltip content="Hides after 500ms delay" hide-delay="500">
216
+ <button>Hide Delay (500ms)</button>
217
+ </snice-tooltip>
218
+ </div>
219
+ <div class="demo-item">
220
+ <snice-tooltip content="Both show and hide delays" delay="300" hide-delay="300">
221
+ <button>Both Delays (300ms)</button>
222
+ </snice-tooltip>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <div class="demo-section">
228
+ <h2>Customization</h2>
229
+ <div class="demo-grid">
230
+ <div class="demo-item">
231
+ <snice-tooltip content="Tooltip without arrow" :arrow="false">
232
+ <button>No Arrow</button>
233
+ </snice-tooltip>
234
+ </div>
235
+ <div class="demo-item">
236
+ <snice-tooltip content="This tooltip has a much wider maximum width for longer content that needs more space" max-width="400">
237
+ <button>Wide Tooltip</button>
238
+ </snice-tooltip>
239
+ </div>
240
+ <div class="demo-item">
241
+ <snice-tooltip content="Custom styled tooltip" class="custom-tooltip">
242
+ <button>Custom Style</button>
243
+ </snice-tooltip>
244
+ </div>
245
+ <div class="demo-item">
246
+ <snice-tooltip content="Large offset from trigger" offset="20">
247
+ <button>Large Offset</button>
248
+ </snice-tooltip>
249
+ </div>
250
+ </div>
251
+ </div>
252
+
253
+ <div class="demo-section">
254
+ <h2>Smart Positioning (Edge Detection)</h2>
255
+ <p>Tooltips automatically adjust position when they would overflow the viewport edges.</p>
256
+ <div class="edge-demo">
257
+ <snice-tooltip content="This tooltip will flip to avoid viewport edges" position="top" class="edge-button top-left">
258
+ <button>Top Left</button>
259
+ </snice-tooltip>
260
+ <snice-tooltip content="This tooltip will flip to avoid viewport edges" position="top" class="edge-button top-right">
261
+ <button>Top Right</button>
262
+ </snice-tooltip>
263
+ <snice-tooltip content="This tooltip will flip to avoid viewport edges" position="bottom" class="edge-button bottom-left">
264
+ <button>Bottom Left</button>
265
+ </snice-tooltip>
266
+ <snice-tooltip content="This tooltip will flip to avoid viewport edges" position="bottom" class="edge-button bottom-right">
267
+ <button>Bottom Right</button>
268
+ </snice-tooltip>
269
+ <snice-tooltip content="Center positioned tooltip" position="top" class="edge-button center">
270
+ <button>Center</button>
271
+ </snice-tooltip>
272
+ </div>
273
+ </div>
274
+
275
+ <div class="demo-section">
276
+ <h2>Content Types</h2>
277
+ <div class="demo-grid">
278
+ <div class="demo-item">
279
+ <snice-tooltip content="Simple text tooltip">
280
+ <span class="link">Text Content</span>
281
+ </snice-tooltip>
282
+ </div>
283
+ <div class="demo-item">
284
+ <snice-tooltip content="This is a very long tooltip content that will wrap to multiple lines when it reaches the maximum width of the tooltip container">
285
+ <span class="link">Long Content</span>
286
+ </snice-tooltip>
287
+ </div>
288
+ <div class="demo-item">
289
+ <snice-tooltip content="Tooltip on an icon">
290
+ <span class="icon" aria-label="Info"></span>
291
+ </snice-tooltip>
292
+ </div>
293
+ <div class="demo-item">
294
+ <snice-tooltip content="Press Ctrl+C to copy">
295
+ <code>npm install</code>
296
+ </snice-tooltip>
297
+ </div>
298
+ </div>
299
+ </div>
300
+
301
+ <div class="demo-section">
302
+ <h2>Programmatic Control</h2>
303
+ <div class="demo-grid">
304
+ <div class="demo-item">
305
+ <snice-tooltip content="Programmatically shown" trigger="manual" id="prog-tooltip">
306
+ <button>Target Element</button>
307
+ </snice-tooltip>
308
+ <br><br>
309
+ <button onclick="showProgrammatic()">Show</button>
310
+ <button onclick="hideProgrammatic()">Hide</button>
311
+ </div>
312
+ <div class="demo-item">
313
+ <snice-tooltip content="Dynamic content" trigger="hover" id="dynamic-tooltip">
314
+ <button onmouseenter="updateDynamicContent()">Dynamic Content</button>
315
+ </snice-tooltip>
316
+ </div>
317
+ </div>
318
+ </div>
319
+ </div>
320
+
321
+ <script type="module">
322
+ import './snice-tooltip.ts';
323
+
324
+ // Manual tooltip control
325
+ window.toggleManualTooltip = function() {
326
+ const tooltip = document.getElementById('manual-tooltip');
327
+ tooltip.toggle();
328
+ };
329
+
330
+ // Programmatic control
331
+ window.showProgrammatic = function() {
332
+ const tooltip = document.getElementById('prog-tooltip');
333
+ tooltip.show();
334
+ };
335
+
336
+ window.hideProgrammatic = function() {
337
+ const tooltip = document.getElementById('prog-tooltip');
338
+ tooltip.hide();
339
+ };
340
+
341
+ // Dynamic content
342
+ let counter = 0;
343
+ window.updateDynamicContent = function() {
344
+ const tooltip = document.getElementById('dynamic-tooltip');
345
+ counter++;
346
+ tooltip.content = `Hover count: ${counter}`;
347
+ };
348
+ </script>
349
+ </body>
350
+ </html>