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/modal/demo.html ADDED
@@ -0,0 +1,291 @@
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>Modal 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
+ min-height: 200vh; /* To test scroll locking */
15
+ }
16
+
17
+ .section {
18
+ margin-bottom: 40px;
19
+ }
20
+
21
+ h2 {
22
+ color: var(--snice-color-text);
23
+ margin-bottom: 20px;
24
+ font-size: var(--snice-font-size-2xl);
25
+ }
26
+
27
+ h3 {
28
+ color: var(--snice-color-text-secondary);
29
+ margin-bottom: 16px;
30
+ font-size: var(--snice-font-size-lg);
31
+ }
32
+
33
+ .button-group {
34
+ display: flex;
35
+ gap: 10px;
36
+ flex-wrap: wrap;
37
+ margin-bottom: 20px;
38
+ }
39
+
40
+ button {
41
+ padding: 8px 16px;
42
+ background: var(--snice-color-primary);
43
+ color: var(--snice-color-text-inverse);
44
+ border: none;
45
+ border-radius: var(--snice-border-radius-md);
46
+ font-family: var(--snice-font-family);
47
+ font-size: var(--snice-font-size-md);
48
+ cursor: pointer;
49
+ transition: background-color var(--snice-transition-fast) ease;
50
+ }
51
+
52
+ button:hover {
53
+ background: var(--snice-color-primary-hover);
54
+ }
55
+
56
+ button.secondary {
57
+ background: var(--snice-color-secondary);
58
+ color: var(--snice-color-text);
59
+ }
60
+
61
+ button.secondary:hover {
62
+ background: var(--snice-color-secondary-hover);
63
+ }
64
+
65
+ .long-content {
66
+ height: 1000px;
67
+ background: linear-gradient(to bottom, #f3f4f6, #e5e7eb);
68
+ padding: 20px;
69
+ margin-top: 20px;
70
+ border-radius: var(--snice-border-radius-lg);
71
+ }
72
+
73
+ input, textarea {
74
+ width: 100%;
75
+ padding: 8px;
76
+ margin: 8px 0;
77
+ border: 1px solid var(--snice-color-border);
78
+ border-radius: var(--snice-border-radius-md);
79
+ font-family: var(--snice-font-family);
80
+ }
81
+
82
+ label {
83
+ display: block;
84
+ margin-top: 12px;
85
+ font-weight: 500;
86
+ }
87
+ </style>
88
+ </head>
89
+ <body>
90
+ <h2>Modal Component Demo</h2>
91
+
92
+ <div class="section">
93
+ <h3>Basic Modal</h3>
94
+ <div class="button-group">
95
+ <button onclick="document.getElementById('basic-modal').show()">Open Basic Modal</button>
96
+ </div>
97
+
98
+ <snice-modal id="basic-modal" label="Basic Modal">
99
+ <h2 slot="header">Welcome!</h2>
100
+ <p>This is a basic modal with header, body, and footer slots.</p>
101
+ <p>Click the backdrop or press Escape to close.</p>
102
+ <div slot="footer">
103
+ <button class="secondary" onclick="document.getElementById('basic-modal').close()">Cancel</button>
104
+ <button onclick="document.getElementById('basic-modal').close()">Confirm</button>
105
+ </div>
106
+ </snice-modal>
107
+ </div>
108
+
109
+ <div class="section">
110
+ <h3>Different Sizes</h3>
111
+ <div class="button-group">
112
+ <button onclick="document.getElementById('small-modal').show()">Small Modal</button>
113
+ <button onclick="document.getElementById('medium-modal').show()">Medium Modal</button>
114
+ <button onclick="document.getElementById('large-modal').show()">Large Modal</button>
115
+ <button onclick="document.getElementById('fullscreen-modal').show()">Fullscreen Modal</button>
116
+ </div>
117
+
118
+ <snice-modal id="small-modal" size="small" label="Small Modal">
119
+ <h2 slot="header">Small Modal</h2>
120
+ <p>This is a small modal, perfect for confirmations.</p>
121
+ <div slot="footer">
122
+ <button onclick="document.getElementById('small-modal').close()">Got it</button>
123
+ </div>
124
+ </snice-modal>
125
+
126
+ <snice-modal id="medium-modal" size="medium" label="Medium Modal">
127
+ <h2 slot="header">Medium Modal</h2>
128
+ <p>This is the default medium size modal.</p>
129
+ <p>It works well for most content.</p>
130
+ <div slot="footer">
131
+ <button onclick="document.getElementById('medium-modal').close()">Close</button>
132
+ </div>
133
+ </snice-modal>
134
+
135
+ <snice-modal id="large-modal" size="large" label="Large Modal">
136
+ <h2 slot="header">Large Modal</h2>
137
+ <p>This is a large modal for more complex content.</p>
138
+ <p>It provides more space for forms, tables, or detailed information.</p>
139
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
140
+ <div slot="footer">
141
+ <button onclick="document.getElementById('large-modal').close()">Close</button>
142
+ </div>
143
+ </snice-modal>
144
+
145
+ <snice-modal id="fullscreen-modal" size="fullscreen" label="Fullscreen Modal">
146
+ <h2 slot="header">Fullscreen Modal</h2>
147
+ <p>This modal takes up the entire viewport (with padding).</p>
148
+ <p>Great for complex workflows or full-screen experiences.</p>
149
+ <div slot="footer">
150
+ <button onclick="document.getElementById('fullscreen-modal').close()">Exit Fullscreen</button>
151
+ </div>
152
+ </snice-modal>
153
+ </div>
154
+
155
+ <div class="section">
156
+ <h3>No Dismiss Options</h3>
157
+ <div class="button-group">
158
+ <button onclick="document.getElementById('no-backdrop-modal').show()">No Backdrop Dismiss</button>
159
+ <button onclick="document.getElementById('no-escape-modal').show()">No Escape Dismiss</button>
160
+ <button onclick="document.getElementById('no-dismiss-modal').show()">Force Action</button>
161
+ </div>
162
+
163
+ <snice-modal id="no-backdrop-modal" no-backdrop-dismiss label="No Backdrop Dismiss">
164
+ <h2 slot="header">No Backdrop Dismiss</h2>
165
+ <p>Clicking the backdrop won't close this modal.</p>
166
+ <p>You can still press Escape or click the X button.</p>
167
+ <div slot="footer">
168
+ <button onclick="document.getElementById('no-backdrop-modal').close()">Close</button>
169
+ </div>
170
+ </snice-modal>
171
+
172
+ <snice-modal id="no-escape-modal" no-escape-dismiss label="No Escape Dismiss">
173
+ <h2 slot="header">No Escape Dismiss</h2>
174
+ <p>Pressing Escape won't close this modal.</p>
175
+ <p>You can still click the backdrop or the X button.</p>
176
+ <div slot="footer">
177
+ <button onclick="document.getElementById('no-escape-modal').close()">Close</button>
178
+ </div>
179
+ </snice-modal>
180
+
181
+ <snice-modal id="no-dismiss-modal" no-backdrop-dismiss no-escape-dismiss no-close-button label="Force Action">
182
+ <h2 slot="header">Important Action Required</h2>
183
+ <p>This modal can't be dismissed by clicking outside, pressing Escape, or using the X button.</p>
184
+ <p>The user must make a choice using the action buttons.</p>
185
+ <div slot="footer">
186
+ <button class="secondary" onclick="document.getElementById('no-dismiss-modal').close()">Cancel</button>
187
+ <button onclick="document.getElementById('no-dismiss-modal').close()">Confirm</button>
188
+ </div>
189
+ </snice-modal>
190
+ </div>
191
+
192
+ <div class="section">
193
+ <h3>Form Modal with Focus Trap</h3>
194
+ <div class="button-group">
195
+ <button onclick="document.getElementById('form-modal').show()">Open Form</button>
196
+ </div>
197
+
198
+ <snice-modal id="form-modal" label="User Form">
199
+ <h2 slot="header">User Information</h2>
200
+ <form onsubmit="event.preventDefault(); alert('Form submitted!'); document.getElementById('form-modal').close();">
201
+ <label for="name">Name:</label>
202
+ <input type="text" id="name" name="name" required>
203
+
204
+ <label for="email">Email:</label>
205
+ <input type="email" id="email" name="email" required>
206
+
207
+ <label for="message">Message:</label>
208
+ <textarea id="message" name="message" rows="4"></textarea>
209
+
210
+ <div slot="footer">
211
+ <button type="button" class="secondary" onclick="document.getElementById('form-modal').close()">Cancel</button>
212
+ <button type="submit">Submit</button>
213
+ </div>
214
+ </form>
215
+ </snice-modal>
216
+ </div>
217
+
218
+ <div class="section">
219
+ <h3>Scrollable Content</h3>
220
+ <div class="button-group">
221
+ <button onclick="document.getElementById('scroll-modal').show()">Open Scrollable Modal</button>
222
+ </div>
223
+
224
+ <snice-modal id="scroll-modal" label="Terms and Conditions">
225
+ <h2 slot="header">Terms and Conditions</h2>
226
+ <h3>1. Introduction</h3>
227
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
228
+
229
+ <h3>2. Terms of Use</h3>
230
+ <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
231
+
232
+ <h3>3. Privacy Policy</h3>
233
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
234
+
235
+ <h3>4. Disclaimers</h3>
236
+ <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
237
+
238
+ <h3>5. Contact Information</h3>
239
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
240
+
241
+ <div slot="footer">
242
+ <button class="secondary" onclick="document.getElementById('scroll-modal').close()">Decline</button>
243
+ <button onclick="document.getElementById('scroll-modal').close()">Accept</button>
244
+ </div>
245
+ </snice-modal>
246
+ </div>
247
+
248
+ <div class="section">
249
+ <h3>Nested Modals</h3>
250
+ <div class="button-group">
251
+ <button onclick="document.getElementById('parent-modal').show()">Open Parent Modal</button>
252
+ </div>
253
+
254
+ <snice-modal id="parent-modal" label="Parent Modal">
255
+ <h2 slot="header">Parent Modal</h2>
256
+ <p>This modal can open another modal.</p>
257
+ <button onclick="document.getElementById('child-modal').show()">Open Child Modal</button>
258
+ <div slot="footer">
259
+ <button onclick="document.getElementById('parent-modal').close()">Close</button>
260
+ </div>
261
+ </snice-modal>
262
+
263
+ <snice-modal id="child-modal" label="Child Modal">
264
+ <h2 slot="header">Child Modal</h2>
265
+ <p>This is a nested modal on top of the parent.</p>
266
+ <div slot="footer">
267
+ <button onclick="document.getElementById('child-modal').close()">Close Child</button>
268
+ </div>
269
+ </snice-modal>
270
+ </div>
271
+
272
+ <div class="long-content">
273
+ <h3>Scroll Test Area</h3>
274
+ <p>This area is here to test that body scroll is locked when a modal is open.</p>
275
+ <p>Try opening a modal and then attempting to scroll the page.</p>
276
+ </div>
277
+
278
+ <script type="module">
279
+ import './snice-modal.ts';
280
+
281
+ // Listen for modal events
282
+ document.addEventListener('@snice/modal-open', (e) => {
283
+ console.log('Modal opened:', e.detail.modal);
284
+ });
285
+
286
+ document.addEventListener('@snice/modal-close', (e) => {
287
+ console.log('Modal closed:', e.detail.modal);
288
+ });
289
+ </script>
290
+ </body>
291
+ </html>
package/components/pagination/demo.html ADDED
@@ -0,0 +1,395 @@
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 Pagination Demo</title>
7
+ <style>
8
+ body {
9
+ font-family: system-ui, -apple-system, sans-serif;
10
+ max-width: 1200px;
11
+ margin: 0 auto;
12
+ padding: 40px 20px;
13
+ background: #f3f4f6;
14
+ }
15
+
16
+ h1 {
17
+ color: #111827;
18
+ margin-bottom: 32px;
19
+ }
20
+
21
+ .demo-section {
22
+ background: white;
23
+ padding: 24px;
24
+ border-radius: 12px;
25
+ margin-bottom: 32px;
26
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
27
+ }
28
+
29
+ .demo-section h2 {
30
+ color: #374151;
31
+ margin-top: 0;
32
+ margin-bottom: 20px;
33
+ font-size: 20px;
34
+ }
35
+
36
+ .demo-row {
37
+ margin-bottom: 24px;
38
+ }
39
+
40
+ .demo-label {
41
+ font-size: 14px;
42
+ color: #6b7280;
43
+ margin-bottom: 8px;
44
+ }
45
+
46
+ .demo-controls {
47
+ display: flex;
48
+ gap: 12px;
49
+ margin-top: 20px;
50
+ flex-wrap: wrap;
51
+ align-items: center;
52
+ }
53
+
54
+ .demo-control {
55
+ display: flex;
56
+ align-items: center;
57
+ gap: 8px;
58
+ }
59
+
60
+ .demo-control label {
61
+ font-size: 14px;
62
+ color: #6b7280;
63
+ }
64
+
65
+ .demo-control input[type="number"] {
66
+ width: 80px;
67
+ padding: 4px 8px;
68
+ border: 1px solid #e5e7eb;
69
+ border-radius: 4px;
70
+ font-size: 14px;
71
+ }
72
+
73
+ .demo-control select {
74
+ padding: 4px 8px;
75
+ border: 1px solid #e5e7eb;
76
+ border-radius: 4px;
77
+ font-size: 14px;
78
+ background: white;
79
+ }
80
+
81
+ .demo-button {
82
+ padding: 8px 16px;
83
+ background: #3b82f6;
84
+ color: white;
85
+ border: none;
86
+ border-radius: 6px;
87
+ font-size: 14px;
88
+ cursor: pointer;
89
+ transition: background-color 0.2s;
90
+ }
91
+
92
+ .demo-button:hover {
93
+ background: #2563eb;
94
+ }
95
+
96
+ .event-log {
97
+ margin-top: 16px;
98
+ padding: 12px;
99
+ background: #f9fafb;
100
+ border: 1px solid #e5e7eb;
101
+ border-radius: 6px;
102
+ font-family: monospace;
103
+ font-size: 13px;
104
+ max-height: 200px;
105
+ overflow-y: auto;
106
+ }
107
+
108
+ .event-log-entry {
109
+ padding: 4px 0;
110
+ border-bottom: 1px solid #e5e7eb;
111
+ }
112
+
113
+ .event-log-entry:last-child {
114
+ border-bottom: none;
115
+ }
116
+
117
+ code {
118
+ background: #f3f4f6;
119
+ padding: 2px 4px;
120
+ border-radius: 3px;
121
+ font-size: 13px;
122
+ }
123
+ </style>
124
+ <script type="module">
125
+ import '../../src/index.ts';
126
+ import './snice-pagination.ts';
127
+
128
+ window.addEventListener('DOMContentLoaded', () => {
129
+ // Get pagination elements
130
+ const basicPagination = document.getElementById('basic-pagination');
131
+ const advancedPagination = document.getElementById('advanced-pagination');
132
+ const customPagination = document.getElementById('custom-pagination');
133
+
134
+ // Event logging
135
+ const eventLog = document.getElementById('event-log');
136
+ let eventCounter = 0;
137
+
138
+ function logEvent(source, detail) {
139
+ eventCounter++;
140
+ const entry = document.createElement('div');
141
+ entry.className = 'event-log-entry';
142
+ entry.innerHTML = `[${eventCounter}] <strong>${source}:</strong> Page changed to ${detail.page} (previous: ${detail.previousPage})`;
143
+ eventLog.insertBefore(entry, eventLog.firstChild);
144
+
145
+ // Keep only last 10 entries
146
+ while (eventLog.children.length > 10) {
147
+ eventLog.removeChild(eventLog.lastChild);
148
+ }
149
+ }
150
+
151
+ // Listen for pagination events
152
+ basicPagination.addEventListener('@snice/pagination-change', (e) => {
153
+ logEvent('Basic', e.detail);
154
+ });
155
+
156
+ advancedPagination.addEventListener('@snice/pagination-change', (e) => {
157
+ logEvent('Advanced', e.detail);
158
+ });
159
+
160
+ customPagination.addEventListener('@snice/pagination-change', (e) => {
161
+ logEvent('Custom', e.detail);
162
+ document.getElementById('current-page').textContent = e.detail.page;
163
+ });
164
+
165
+ // Controls for customizable pagination
166
+ document.getElementById('update-pagination').addEventListener('click', () => {
167
+ const total = parseInt(document.getElementById('total-pages').value);
168
+ const current = parseInt(document.getElementById('current-page-input').value);
169
+ const siblings = parseInt(document.getElementById('siblings').value);
170
+ const size = document.getElementById('size-select').value;
171
+ const variant = document.getElementById('variant-select').value;
172
+ const showFirst = document.getElementById('show-first').checked;
173
+ const showLast = document.getElementById('show-last').checked;
174
+ const showPrev = document.getElementById('show-prev').checked;
175
+ const showNext = document.getElementById('show-next').checked;
176
+
177
+ customPagination.total = total;
178
+ customPagination.current = current;
179
+ customPagination.siblings = siblings;
180
+ customPagination.size = size;
181
+ customPagination.variant = variant;
182
+ customPagination.showFirst = showFirst;
183
+ customPagination.showLast = showLast;
184
+ customPagination.showPrev = showPrev;
185
+ customPagination.showNext = showNext;
186
+
187
+ document.getElementById('current-page').textContent = current;
188
+ });
189
+
190
+ // API method demonstrations
191
+ document.getElementById('go-to-5').addEventListener('click', () => {
192
+ customPagination.goToPage(5);
193
+ });
194
+
195
+ document.getElementById('next-page').addEventListener('click', () => {
196
+ customPagination.nextPage();
197
+ });
198
+
199
+ document.getElementById('prev-page').addEventListener('click', () => {
200
+ customPagination.previousPage();
201
+ });
202
+
203
+ document.getElementById('first-page').addEventListener('click', () => {
204
+ customPagination.firstPage();
205
+ });
206
+
207
+ document.getElementById('last-page').addEventListener('click', () => {
208
+ customPagination.lastPage();
209
+ });
210
+ });
211
+ </script>
212
+ </head>
213
+ <body>
214
+ <h1>Snice Pagination Component Demo</h1>
215
+
216
+ <div class="demo-section">
217
+ <h2>Basic Pagination</h2>
218
+ <div class="demo-row">
219
+ <div class="demo-label">Default pagination with 10 pages</div>
220
+ <snice-pagination
221
+ id="basic-pagination"
222
+ current="1"
223
+ total="10">
224
+ </snice-pagination>
225
+ </div>
226
+ </div>
227
+
228
+ <div class="demo-section">
229
+ <h2>Advanced Examples</h2>
230
+
231
+ <div class="demo-row">
232
+ <div class="demo-label">Large dataset (100 pages, current page 50)</div>
233
+ <snice-pagination
234
+ id="advanced-pagination"
235
+ current="50"
236
+ total="100"
237
+ siblings="1">
238
+ </snice-pagination>
239
+ </div>
240
+
241
+ <div class="demo-row">
242
+ <div class="demo-label">Small size, rounded variant</div>
243
+ <snice-pagination
244
+ current="3"
245
+ total="5"
246
+ size="small"
247
+ variant="rounded">
248
+ </snice-pagination>
249
+ </div>
250
+
251
+ <div class="demo-row">
252
+ <div class="demo-label">Large size, text variant</div>
253
+ <snice-pagination
254
+ current="2"
255
+ total="7"
256
+ size="large"
257
+ variant="text">
258
+ </snice-pagination>
259
+ </div>
260
+
261
+ <div class="demo-row">
262
+ <div class="demo-label">Without first/last buttons</div>
263
+ <snice-pagination
264
+ current="4"
265
+ total="10"
266
+ show-first="false"
267
+ show-last="false">
268
+ </snice-pagination>
269
+ </div>
270
+
271
+ <div class="demo-row">
272
+ <div class="demo-label">Without prev/next buttons</div>
273
+ <snice-pagination
274
+ current="3"
275
+ total="8"
276
+ show-prev="false"
277
+ show-next="false">
278
+ </snice-pagination>
279
+ </div>
280
+
281
+ <div class="demo-row">
282
+ <div class="demo-label">More siblings (shows more pages)</div>
283
+ <snice-pagination
284
+ current="10"
285
+ total="20"
286
+ siblings="3">
287
+ </snice-pagination>
288
+ </div>
289
+ </div>
290
+
291
+ <div class="demo-section">
292
+ <h2>Customizable Pagination</h2>
293
+
294
+ <div class="demo-row">
295
+ <snice-pagination
296
+ id="custom-pagination"
297
+ current="1"
298
+ total="20"
299
+ siblings="1">
300
+ </snice-pagination>
301
+ <p style="margin-top: 12px; color: #6b7280; font-size: 14px;">
302
+ Current page: <strong id="current-page">1</strong>
303
+ </p>
304
+ </div>
305
+
306
+ <div class="demo-controls">
307
+ <div class="demo-control">
308
+ <label>Total pages:</label>
309
+ <input type="number" id="total-pages" value="20" min="1" max="100">
310
+ </div>
311
+
312
+ <div class="demo-control">
313
+ <label>Current page:</label>
314
+ <input type="number" id="current-page-input" value="1" min="1">
315
+ </div>
316
+
317
+ <div class="demo-control">
318
+ <label>Siblings:</label>
319
+ <input type="number" id="siblings" value="1" min="0" max="5">
320
+ </div>
321
+
322
+ <div class="demo-control">
323
+ <label>Size:</label>
324
+ <select id="size-select">
325
+ <option value="small">Small</option>
326
+ <option value="medium" selected>Medium</option>
327
+ <option value="large">Large</option>
328
+ </select>
329
+ </div>
330
+
331
+ <div class="demo-control">
332
+ <label>Variant:</label>
333
+ <select id="variant-select">
334
+ <option value="default" selected>Default</option>
335
+ <option value="rounded">Rounded</option>
336
+ <option value="text">Text</option>
337
+ </select>
338
+ </div>
339
+ </div>
340
+
341
+ <div class="demo-controls">
342
+ <div class="demo-control">
343
+ <label>
344
+ <input type="checkbox" id="show-first" checked> Show First
345
+ </label>
346
+ </div>
347
+
348
+ <div class="demo-control">
349
+ <label>
350
+ <input type="checkbox" id="show-last" checked> Show Last
351
+ </label>
352
+ </div>
353
+
354
+ <div class="demo-control">
355
+ <label>
356
+ <input type="checkbox" id="show-prev" checked> Show Prev
357
+ </label>
358
+ </div>
359
+
360
+ <div class="demo-control">
361
+ <label>
362
+ <input type="checkbox" id="show-next" checked> Show Next
363
+ </label>
364
+ </div>
365
+
366
+ <button id="update-pagination" class="demo-button">Update Pagination</button>
367
+ </div>
368
+ </div>
369
+
370
+ <div class="demo-section">
371
+ <h2>API Methods</h2>
372
+ <p style="color: #6b7280; font-size: 14px; margin-bottom: 16px;">
373
+ Use these buttons to test the pagination API methods on the custom pagination above.
374
+ </p>
375
+
376
+ <div class="demo-controls">
377
+ <button id="go-to-5" class="demo-button">Go to Page 5</button>
378
+ <button id="next-page" class="demo-button">Next Page</button>
379
+ <button id="prev-page" class="demo-button">Previous Page</button>
380
+ <button id="first-page" class="demo-button">First Page</button>
381
+ <button id="last-page" class="demo-button">Last Page</button>
382
+ </div>
383
+ </div>
384
+
385
+ <div class="demo-section">
386
+ <h2>Event Log</h2>
387
+ <div class="demo-label">Listen for <code>@snice/pagination-change</code> events</div>
388
+ <div id="event-log" class="event-log">
389
+ <div class="event-log-entry" style="color: #6b7280;">
390
+ Pagination events will appear here...
391
+ </div>
392
+ </div>
393
+ </div>
394
+ </body>
395
+ </html>