snice 2.1.5 → 2.2.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 (364) hide show
  1. package/dist/components/accordion/snice-accordion-item.d.ts +25 -0
  2. package/dist/components/accordion/snice-accordion-item.js +255 -0
  3. package/dist/components/accordion/snice-accordion-item.js.map +1 -0
  4. package/dist/components/accordion/snice-accordion.d.ts +28 -0
  5. package/dist/components/accordion/snice-accordion.js +206 -0
  6. package/dist/components/accordion/snice-accordion.js.map +1 -0
  7. package/dist/components/accordion/snice-accordion.types.d.ts +29 -0
  8. package/dist/components/alert/snice-alert.d.ts +26 -0
  9. package/dist/components/alert/snice-alert.js +180 -0
  10. package/dist/components/alert/snice-alert.js.map +1 -0
  11. package/{components/alert/snice-alert.types.ts → dist/components/alert/snice-alert.types.d.ts} +8 -9
  12. package/dist/components/avatar/snice-avatar.d.ts +24 -0
  13. package/dist/components/avatar/snice-avatar.js +180 -0
  14. package/dist/components/avatar/snice-avatar.js.map +1 -0
  15. package/dist/components/avatar/snice-avatar.types.d.ts +12 -0
  16. package/dist/components/badge/snice-badge.d.ts +25 -0
  17. package/dist/components/badge/snice-badge.js +169 -0
  18. package/dist/components/badge/snice-badge.js.map +1 -0
  19. package/{components/badge/snice-badge.types.ts → dist/components/badge/snice-badge.types.d.ts} +11 -12
  20. package/dist/components/breadcrumbs/snice-breadcrumbs.d.ts +27 -0
  21. package/dist/components/breadcrumbs/snice-breadcrumbs.js +214 -0
  22. package/dist/components/breadcrumbs/snice-breadcrumbs.js.map +1 -0
  23. package/dist/components/breadcrumbs/snice-breadcrumbs.types.d.ts +23 -0
  24. package/dist/components/breadcrumbs/snice-crumb.d.ts +9 -0
  25. package/dist/components/breadcrumbs/snice-crumb.js +63 -0
  26. package/dist/components/breadcrumbs/snice-crumb.js.map +1 -0
  27. package/dist/components/button/snice-button.d.ts +32 -0
  28. package/dist/components/button/snice-button.js +232 -0
  29. package/dist/components/button/snice-button.js.map +1 -0
  30. package/dist/components/button/snice-button.types.d.ts +23 -0
  31. package/dist/components/card/snice-card.d.ts +19 -0
  32. package/dist/components/card/snice-card.js +136 -0
  33. package/dist/components/card/snice-card.js.map +1 -0
  34. package/{components/card/snice-card.types.ts → dist/components/card/snice-card.types.d.ts} +6 -7
  35. package/dist/components/checkbox/snice-checkbox.d.ts +34 -0
  36. package/dist/components/checkbox/snice-checkbox.js +286 -0
  37. package/dist/components/checkbox/snice-checkbox.js.map +1 -0
  38. package/dist/components/checkbox/snice-checkbox.types.d.ts +20 -0
  39. package/dist/components/chip/snice-chip.d.ts +28 -0
  40. package/dist/components/chip/snice-chip.js +199 -0
  41. package/dist/components/chip/snice-chip.js.map +1 -0
  42. package/dist/components/chip/snice-chip.types.d.ts +14 -0
  43. package/dist/components/date-picker/snice-date-picker.d.ts +82 -0
  44. package/dist/components/date-picker/snice-date-picker.js +847 -0
  45. package/dist/components/date-picker/snice-date-picker.js.map +1 -0
  46. package/dist/components/date-picker/snice-date-picker.types.d.ts +71 -0
  47. package/dist/components/divider/snice-divider.d.ts +17 -0
  48. package/dist/components/divider/snice-divider.js +122 -0
  49. package/dist/components/divider/snice-divider.js.map +1 -0
  50. package/{components/divider/snice-divider.types.ts → dist/components/divider/snice-divider.types.d.ts} +9 -10
  51. package/dist/components/drawer/snice-drawer.d.ts +37 -0
  52. package/dist/components/drawer/snice-drawer.js +337 -0
  53. package/dist/components/drawer/snice-drawer.js.map +1 -0
  54. package/dist/components/drawer/snice-drawer.types.d.ts +16 -0
  55. package/dist/components/input/snice-input.d.ts +65 -0
  56. package/dist/components/input/snice-input.js +567 -0
  57. package/dist/components/input/snice-input.js.map +1 -0
  58. package/dist/components/input/snice-input.types.d.ts +53 -0
  59. package/dist/components/layout/snice-layout-blog.d.ts +4 -0
  60. package/dist/components/layout/snice-layout-blog.js +67 -0
  61. package/dist/components/layout/snice-layout-blog.js.map +1 -0
  62. package/dist/components/layout/snice-layout-card.d.ts +6 -0
  63. package/dist/components/layout/snice-layout-card.js +64 -0
  64. package/dist/components/layout/snice-layout-card.js.map +1 -0
  65. package/dist/components/layout/snice-layout-centered.d.ts +5 -0
  66. package/dist/components/layout/snice-layout-centered.js +48 -0
  67. package/dist/components/layout/snice-layout-centered.js.map +1 -0
  68. package/dist/components/layout/snice-layout-dashboard.d.ts +4 -0
  69. package/dist/components/layout/snice-layout-dashboard.js +64 -0
  70. package/dist/components/layout/snice-layout-dashboard.js.map +1 -0
  71. package/dist/components/layout/snice-layout-fullscreen.d.ts +5 -0
  72. package/dist/components/layout/snice-layout-fullscreen.js +60 -0
  73. package/dist/components/layout/snice-layout-fullscreen.js.map +1 -0
  74. package/dist/components/layout/snice-layout-landing.d.ts +4 -0
  75. package/dist/components/layout/snice-layout-landing.js +66 -0
  76. package/dist/components/layout/snice-layout-landing.js.map +1 -0
  77. package/dist/components/layout/snice-layout-minimal.d.ts +4 -0
  78. package/dist/components/layout/snice-layout-minimal.js +38 -0
  79. package/dist/components/layout/snice-layout-minimal.js.map +1 -0
  80. package/dist/components/layout/snice-layout-sidebar.d.ts +5 -0
  81. package/dist/components/layout/snice-layout-sidebar.js +74 -0
  82. package/dist/components/layout/snice-layout-sidebar.js.map +1 -0
  83. package/dist/components/layout/snice-layout-split.d.ts +6 -0
  84. package/dist/components/layout/snice-layout-split.js +58 -0
  85. package/dist/components/layout/snice-layout-split.js.map +1 -0
  86. package/dist/components/layout/snice-layout.d.ts +4 -0
  87. package/dist/components/layout/snice-layout.js +54 -0
  88. package/dist/components/layout/snice-layout.js.map +1 -0
  89. package/{components/layout/snice-layout.types.ts → dist/components/layout/snice-layout.types.d.ts} +1 -3
  90. package/dist/components/login/snice-login.d.ts +44 -0
  91. package/dist/components/login/snice-login.js +382 -0
  92. package/dist/components/login/snice-login.js.map +1 -0
  93. package/dist/components/login/snice-login.types.d.ts +26 -0
  94. package/dist/components/modal/snice-modal.d.ts +32 -0
  95. package/dist/components/modal/snice-modal.js +280 -0
  96. package/dist/components/modal/snice-modal.js.map +1 -0
  97. package/dist/components/modal/snice-modal.types.d.ts +18 -0
  98. package/dist/components/pagination/snice-pagination.d.ts +26 -0
  99. package/dist/components/pagination/snice-pagination.js +373 -0
  100. package/dist/components/pagination/snice-pagination.js.map +1 -0
  101. package/dist/components/pagination/snice-pagination.types.d.ts +18 -0
  102. package/dist/components/progress/snice-progress.d.ts +35 -0
  103. package/dist/components/progress/snice-progress.js +305 -0
  104. package/dist/components/progress/snice-progress.js.map +1 -0
  105. package/dist/components/progress/snice-progress.types.d.ts +18 -0
  106. package/dist/components/radio/snice-radio.d.ts +33 -0
  107. package/dist/components/radio/snice-radio.js +279 -0
  108. package/dist/components/radio/snice-radio.js.map +1 -0
  109. package/dist/components/radio/snice-radio.types.d.ts +19 -0
  110. package/dist/components/select/snice-option.d.ts +17 -0
  111. package/dist/components/select/snice-option.js +88 -0
  112. package/dist/components/select/snice-option.js.map +1 -0
  113. package/{components/select/snice-option.types.ts → dist/components/select/snice-option.types.d.ts} +8 -8
  114. package/dist/components/select/snice-select.d.ts +89 -0
  115. package/dist/components/select/snice-select.js +864 -0
  116. package/dist/components/select/snice-select.js.map +1 -0
  117. package/dist/components/select/snice-select.types.d.ts +49 -0
  118. package/dist/components/skeleton/snice-skeleton.d.ts +16 -0
  119. package/dist/components/skeleton/snice-skeleton.js +166 -0
  120. package/dist/components/skeleton/snice-skeleton.js.map +1 -0
  121. package/{components/skeleton/snice-skeleton.types.ts → dist/components/skeleton/snice-skeleton.types.d.ts} +7 -8
  122. package/dist/components/snice-cell-C8aBfN72.js +4 -0
  123. package/dist/components/snice-cell-C8aBfN72.js.map +1 -0
  124. package/dist/components/switch/snice-switch.d.ts +38 -0
  125. package/dist/components/switch/snice-switch.js +305 -0
  126. package/dist/components/switch/snice-switch.js.map +1 -0
  127. package/dist/components/switch/snice-switch.types.d.ts +21 -0
  128. package/dist/components/symbols.d.ts +1 -0
  129. package/dist/components/symbols.js +22 -0
  130. package/dist/components/symbols.js.map +1 -0
  131. package/dist/components/table/snice-cell-boolean.d.ts +21 -0
  132. package/dist/components/table/snice-cell-boolean.js +164 -0
  133. package/dist/components/table/snice-cell-boolean.js.map +1 -0
  134. package/dist/components/table/snice-cell-date.d.ts +24 -0
  135. package/dist/components/table/snice-cell-date.js +253 -0
  136. package/dist/components/table/snice-cell-date.js.map +1 -0
  137. package/dist/components/table/snice-cell-duration.d.ts +16 -0
  138. package/dist/components/table/snice-cell-duration.js +130 -0
  139. package/dist/components/table/snice-cell-duration.js.map +1 -0
  140. package/dist/components/table/snice-cell-filesize.d.ts +16 -0
  141. package/dist/components/table/snice-cell-filesize.js +126 -0
  142. package/dist/components/table/snice-cell-filesize.js.map +1 -0
  143. package/dist/components/table/snice-cell-number.d.ts +23 -0
  144. package/dist/components/table/snice-cell-number.js +215 -0
  145. package/dist/components/table/snice-cell-number.js.map +1 -0
  146. package/dist/components/table/snice-cell-progress.d.ts +17 -0
  147. package/dist/components/table/snice-cell-progress.js +121 -0
  148. package/dist/components/table/snice-cell-progress.js.map +1 -0
  149. package/dist/components/table/snice-cell-rating.d.ts +17 -0
  150. package/dist/components/table/snice-cell-rating.js +120 -0
  151. package/dist/components/table/snice-cell-rating.js.map +1 -0
  152. package/dist/components/table/snice-cell-sparkline.d.ts +29 -0
  153. package/dist/components/table/snice-cell-sparkline.js +306 -0
  154. package/dist/components/table/snice-cell-sparkline.js.map +1 -0
  155. package/dist/components/table/snice-cell-text.d.ts +19 -0
  156. package/dist/components/table/snice-cell-text.js +161 -0
  157. package/dist/components/table/snice-cell-text.js.map +1 -0
  158. package/dist/components/table/snice-cell.d.ts +32 -0
  159. package/dist/components/table/snice-cell.js +458 -0
  160. package/dist/components/table/snice-cell.js.map +1 -0
  161. package/dist/components/table/snice-column.d.ts +62 -0
  162. package/dist/components/table/snice-column.js +506 -0
  163. package/dist/components/table/snice-column.js.map +1 -0
  164. package/dist/components/table/snice-header.d.ts +33 -0
  165. package/dist/components/table/snice-header.js +289 -0
  166. package/dist/components/table/snice-header.js.map +1 -0
  167. package/dist/components/table/snice-progress.d.ts +10 -0
  168. package/dist/components/table/snice-progress.js +105 -0
  169. package/dist/components/table/snice-progress.js.map +1 -0
  170. package/dist/components/table/snice-rating.d.ts +9 -0
  171. package/dist/components/table/snice-rating.js +81 -0
  172. package/dist/components/table/snice-rating.js.map +1 -0
  173. package/dist/components/table/snice-row.d.ts +43 -0
  174. package/dist/components/table/snice-row.js +353 -0
  175. package/dist/components/table/snice-row.js.map +1 -0
  176. package/dist/components/table/snice-table.d.ts +69 -0
  177. package/dist/components/table/snice-table.js +792 -0
  178. package/dist/components/table/snice-table.js.map +1 -0
  179. package/dist/components/table/snice-table.types.d.ts +137 -0
  180. package/dist/components/tabs/snice-tab-panel.d.ts +12 -0
  181. package/dist/components/tabs/snice-tab-panel.js +87 -0
  182. package/dist/components/tabs/snice-tab-panel.js.map +1 -0
  183. package/dist/components/tabs/snice-tab.d.ts +13 -0
  184. package/dist/components/tabs/snice-tab.js +98 -0
  185. package/dist/components/tabs/snice-tab.js.map +1 -0
  186. package/dist/components/tabs/snice-tabs.d.ts +34 -0
  187. package/dist/components/tabs/snice-tabs.js +375 -0
  188. package/dist/components/tabs/snice-tabs.js.map +1 -0
  189. package/dist/components/tabs/snice-tabs.types.d.ts +23 -0
  190. package/dist/components/toast/snice-toast-container.d.ts +25 -0
  191. package/dist/components/toast/snice-toast-container.js +252 -0
  192. package/dist/components/toast/snice-toast-container.js.map +1 -0
  193. package/dist/components/toast/snice-toast.d.ts +23 -0
  194. package/dist/components/toast/snice-toast.js +321 -0
  195. package/dist/components/toast/snice-toast.js.map +1 -0
  196. package/dist/components/toast/snice-toast.types.d.ts +30 -0
  197. package/dist/components/tooltip/snice-tooltip.d.ts +50 -0
  198. package/dist/components/tooltip/snice-tooltip.js +644 -0
  199. package/dist/components/tooltip/snice-tooltip.js.map +1 -0
  200. package/dist/components/tooltip/snice-tooltip.types.d.ts +18 -0
  201. package/dist/components/transitions.d.ts +11 -0
  202. package/dist/components/transitions.js +72 -0
  203. package/dist/components/transitions.js.map +1 -0
  204. package/dist/index.cjs +1 -1
  205. package/dist/index.esm.js +1 -1
  206. package/dist/index.esm.min.js +1 -1
  207. package/dist/index.iife.js +1 -1
  208. package/dist/index.iife.min.js +1 -1
  209. package/dist/symbols.esm.js +1 -1
  210. package/dist/transitions.esm.js +1 -1
  211. package/package.json +10 -6
  212. package/components/accordion/demo.html +0 -403
  213. package/components/accordion/snice-accordion-item.css +0 -85
  214. package/components/accordion/snice-accordion-item.ts +0 -226
  215. package/components/accordion/snice-accordion.css +0 -31
  216. package/components/accordion/snice-accordion.ts +0 -182
  217. package/components/accordion/snice-accordion.types.ts +0 -32
  218. package/components/alert/demo.html +0 -445
  219. package/components/alert/snice-alert.css +0 -195
  220. package/components/alert/snice-alert.ts +0 -141
  221. package/components/avatar/demo.html +0 -598
  222. package/components/avatar/snice-avatar.css +0 -131
  223. package/components/avatar/snice-avatar.ts +0 -136
  224. package/components/avatar/snice-avatar.types.ts +0 -13
  225. package/components/badge/demo.html +0 -523
  226. package/components/badge/snice-badge.css +0 -161
  227. package/components/badge/snice-badge.ts +0 -117
  228. package/components/breadcrumbs/demo.html +0 -404
  229. package/components/breadcrumbs/snice-breadcrumbs.css +0 -133
  230. package/components/breadcrumbs/snice-breadcrumbs.ts +0 -191
  231. package/components/breadcrumbs/snice-breadcrumbs.types.ts +0 -26
  232. package/components/breadcrumbs/snice-crumb.ts +0 -26
  233. package/components/button/demo.html +0 -42
  234. package/components/button/snice-button.css +0 -230
  235. package/components/button/snice-button.ts +0 -169
  236. package/components/button/snice-button.types.ts +0 -25
  237. package/components/card/demo.html +0 -525
  238. package/components/card/snice-card.css +0 -140
  239. package/components/card/snice-card.ts +0 -102
  240. package/components/checkbox/demo.html +0 -253
  241. package/components/checkbox/snice-checkbox.css +0 -164
  242. package/components/checkbox/snice-checkbox.ts +0 -223
  243. package/components/checkbox/snice-checkbox.types.ts +0 -22
  244. package/components/chip/demo.html +0 -383
  245. package/components/chip/snice-chip.css +0 -195
  246. package/components/chip/snice-chip.ts +0 -139
  247. package/components/chip/snice-chip.types.ts +0 -15
  248. package/components/date-picker/README.md +0 -233
  249. package/components/date-picker/demo.html +0 -191
  250. package/components/date-picker/snice-date-picker.css +0 -330
  251. package/components/date-picker/snice-date-picker.ts +0 -777
  252. package/components/date-picker/snice-date-picker.types.ts +0 -83
  253. package/components/divider/demo.html +0 -233
  254. package/components/divider/snice-divider.css +0 -155
  255. package/components/divider/snice-divider.ts +0 -69
  256. package/components/drawer/demo.html +0 -328
  257. package/components/drawer/snice-drawer.css +0 -476
  258. package/components/drawer/snice-drawer.ts +0 -287
  259. package/components/drawer/snice-drawer.types.ts +0 -17
  260. package/components/global.d.ts +0 -14
  261. package/components/input/demo.html +0 -303
  262. package/components/input/snice-input.css +0 -257
  263. package/components/input/snice-input.ts +0 -442
  264. package/components/input/snice-input.types.ts +0 -59
  265. package/components/input/test.html +0 -77
  266. package/components/layout/README.md +0 -260
  267. package/components/layout/demo.html +0 -538
  268. package/components/layout/snice-layout-blog.css +0 -129
  269. package/components/layout/snice-layout-blog.ts +0 -48
  270. package/components/layout/snice-layout-card.css +0 -104
  271. package/components/layout/snice-layout-card.ts +0 -35
  272. package/components/layout/snice-layout-centered.css +0 -51
  273. package/components/layout/snice-layout-centered.ts +0 -22
  274. package/components/layout/snice-layout-dashboard.css +0 -98
  275. package/components/layout/snice-layout-dashboard.ts +0 -45
  276. package/components/layout/snice-layout-fullscreen.css +0 -72
  277. package/components/layout/snice-layout-fullscreen.ts +0 -34
  278. package/components/layout/snice-layout-landing.css +0 -92
  279. package/components/layout/snice-layout-landing.ts +0 -47
  280. package/components/layout/snice-layout-minimal.css +0 -16
  281. package/components/layout/snice-layout-minimal.ts +0 -19
  282. package/components/layout/snice-layout-sidebar.css +0 -117
  283. package/components/layout/snice-layout-sidebar.ts +0 -48
  284. package/components/layout/snice-layout-split.css +0 -103
  285. package/components/layout/snice-layout-split.ts +0 -29
  286. package/components/layout/snice-layout.css +0 -72
  287. package/components/layout/snice-layout.ts +0 -35
  288. package/components/login/demo-auth-controller.ts +0 -185
  289. package/components/login/demo.html +0 -470
  290. package/components/login/snice-login.css +0 -204
  291. package/components/login/snice-login.ts +0 -326
  292. package/components/login/snice-login.types.ts +0 -29
  293. package/components/modal/demo.html +0 -291
  294. package/components/modal/snice-modal.css +0 -203
  295. package/components/modal/snice-modal.ts +0 -233
  296. package/components/modal/snice-modal.types.ts +0 -21
  297. package/components/pagination/demo.html +0 -395
  298. package/components/pagination/snice-pagination.ts +0 -333
  299. package/components/pagination/snice-pagination.types.ts +0 -21
  300. package/components/progress/demo.html +0 -510
  301. package/components/progress/snice-progress.css +0 -267
  302. package/components/progress/snice-progress.ts +0 -247
  303. package/components/progress/snice-progress.types.ts +0 -19
  304. package/components/radio/demo.html +0 -287
  305. package/components/radio/snice-radio.css +0 -171
  306. package/components/radio/snice-radio.ts +0 -218
  307. package/components/radio/snice-radio.types.ts +0 -21
  308. package/components/select/demo.html +0 -511
  309. package/components/select/snice-option.ts +0 -52
  310. package/components/select/snice-select.css +0 -392
  311. package/components/select/snice-select.ts +0 -796
  312. package/components/select/snice-select.types.ts +0 -55
  313. package/components/skeleton/demo.html +0 -514
  314. package/components/skeleton/snice-skeleton.css +0 -109
  315. package/components/skeleton/snice-skeleton.ts +0 -126
  316. package/components/switch/demo.html +0 -284
  317. package/components/switch/snice-switch.css +0 -221
  318. package/components/switch/snice-switch.ts +0 -229
  319. package/components/switch/snice-switch.types.ts +0 -23
  320. package/components/symbols.ts +0 -23
  321. package/components/table/demo-table-controller.ts +0 -100
  322. package/components/table/demo.html +0 -480
  323. package/components/table/snice-cell-boolean.ts +0 -112
  324. package/components/table/snice-cell-date.ts +0 -210
  325. package/components/table/snice-cell-duration.ts +0 -91
  326. package/components/table/snice-cell-filesize.ts +0 -90
  327. package/components/table/snice-cell-number.ts +0 -165
  328. package/components/table/snice-cell-progress.ts +0 -83
  329. package/components/table/snice-cell-rating.ts +0 -82
  330. package/components/table/snice-cell-sparkline.ts +0 -253
  331. package/components/table/snice-cell-text.ts +0 -125
  332. package/components/table/snice-cell.css +0 -296
  333. package/components/table/snice-cell.ts +0 -473
  334. package/components/table/snice-column.ts +0 -353
  335. package/components/table/snice-header.css +0 -243
  336. package/components/table/snice-header.ts +0 -261
  337. package/components/table/snice-progress.ts +0 -66
  338. package/components/table/snice-rating.ts +0 -45
  339. package/components/table/snice-row.css +0 -255
  340. package/components/table/snice-row.ts +0 -331
  341. package/components/table/snice-table.css +0 -241
  342. package/components/table/snice-table.ts +0 -737
  343. package/components/table/snice-table.types.ts +0 -158
  344. package/components/tabs/demo.html +0 -487
  345. package/components/tabs/snice-tab-panel.css +0 -264
  346. package/components/tabs/snice-tab-panel.ts +0 -47
  347. package/components/tabs/snice-tab.css +0 -96
  348. package/components/tabs/snice-tab.ts +0 -65
  349. package/components/tabs/snice-tabs.css +0 -189
  350. package/components/tabs/snice-tabs.ts +0 -332
  351. package/components/tabs/snice-tabs.types.ts +0 -28
  352. package/components/theme/theme.css +0 -234
  353. package/components/toast/demo.html +0 -329
  354. package/components/toast/snice-toast-container.ts +0 -256
  355. package/components/toast/snice-toast.css +0 -213
  356. package/components/toast/snice-toast.ts +0 -276
  357. package/components/toast/snice-toast.types.ts +0 -35
  358. package/components/tooltip/demo.html +0 -350
  359. package/components/tooltip/snice-tooltip-portal.css +0 -79
  360. package/components/tooltip/snice-tooltip.css +0 -117
  361. package/components/tooltip/snice-tooltip.ts +0 -612
  362. package/components/tooltip/snice-tooltip.types.ts +0 -32
  363. package/components/transitions.ts +0 -94
  364. package/components/tsconfig.json +0 -18
package/components/drawer/demo.html DELETED
@@ -1,328 +0,0 @@
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 Drawer Demo</title>
7
- <script type="module" src="./snice-drawer.ts"></script>
8
- <style>
9
- body {
10
- font-family: system-ui, -apple-system, sans-serif;
11
- padding: 40px;
12
- margin: 0;
13
- background: #f3f4f6;
14
- }
15
-
16
- main {
17
- max-width: 1200px;
18
- margin: 0 auto;
19
- background: white;
20
- padding: 40px;
21
- border-radius: 12px;
22
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
23
- transition: margin 0.3s cubic-bezier(0.4, 0, 0.2, 1);
24
- }
25
-
26
- h1 {
27
- margin-top: 0;
28
- color: #111827;
29
- }
30
-
31
- .demo-section {
32
- margin-bottom: 48px;
33
- }
34
-
35
- .demo-section h2 {
36
- color: #374151;
37
- margin-bottom: 16px;
38
- }
39
-
40
- .button-group {
41
- display: flex;
42
- gap: 12px;
43
- flex-wrap: wrap;
44
- margin-bottom: 24px;
45
- }
46
-
47
- button {
48
- padding: 10px 20px;
49
- border: none;
50
- border-radius: 8px;
51
- background: #3b82f6;
52
- color: white;
53
- font-size: 14px;
54
- font-weight: 500;
55
- cursor: pointer;
56
- transition: all 0.2s;
57
- }
58
-
59
- button:hover {
60
- background: #2563eb;
61
- transform: translateY(-1px);
62
- box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
63
- }
64
-
65
- button:active {
66
- transform: translateY(0);
67
- }
68
-
69
- button.secondary {
70
- background: #6b7280;
71
- }
72
-
73
- button.secondary:hover {
74
- background: #4b5563;
75
- }
76
-
77
- .drawer-content {
78
- padding: 20px;
79
- }
80
-
81
- .form-group {
82
- margin-bottom: 20px;
83
- }
84
-
85
- label {
86
- display: block;
87
- margin-bottom: 8px;
88
- font-weight: 500;
89
- color: #374151;
90
- }
91
-
92
- input, textarea, select {
93
- width: 100%;
94
- padding: 10px;
95
- border: 1px solid #d1d5db;
96
- border-radius: 6px;
97
- font-size: 14px;
98
- transition: border-color 0.2s;
99
- }
100
-
101
- input:focus, textarea:focus, select:focus {
102
- outline: none;
103
- border-color: #3b82f6;
104
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
105
- }
106
-
107
- .footer-buttons {
108
- display: flex;
109
- gap: 12px;
110
- justify-content: flex-end;
111
- }
112
- </style>
113
- </head>
114
- <body>
115
- <main>
116
- <h1>Snice Drawer Component Demo</h1>
117
-
118
- <!-- Position Demo -->
119
- <div class="demo-section">
120
- <h2>Drawer Positions</h2>
121
- <div class="button-group">
122
- <button onclick="document.getElementById('drawer-left').show()">Open Left Drawer</button>
123
- <button onclick="document.getElementById('drawer-right').show()">Open Right Drawer</button>
124
- <button onclick="document.getElementById('drawer-top').show()">Open Top Drawer</button>
125
- <button onclick="document.getElementById('drawer-bottom').show()">Open Bottom Drawer</button>
126
- </div>
127
- </div>
128
-
129
- <!-- Size Demo -->
130
- <div class="demo-section">
131
- <h2>Drawer Sizes</h2>
132
- <div class="button-group">
133
- <button onclick="document.getElementById('drawer-small').show()">Small (240px)</button>
134
- <button onclick="document.getElementById('drawer-medium').show()">Medium (320px)</button>
135
- <button onclick="document.getElementById('drawer-large').show()">Large (480px)</button>
136
- <button onclick="document.getElementById('drawer-xl').show()">XL (640px)</button>
137
- <button onclick="document.getElementById('drawer-xxl').show()">XXL (800px)</button>
138
- <button onclick="document.getElementById('drawer-xxxl').show()">XXXL (960px)</button>
139
- <button onclick="document.getElementById('drawer-full').show()">Full (100%)</button>
140
- </div>
141
- </div>
142
-
143
- <!-- Feature Demo -->
144
- <div class="demo-section">
145
- <h2>Drawer Features</h2>
146
- <div class="button-group">
147
- <button onclick="document.getElementById('drawer-no-backdrop').show()">No Backdrop</button>
148
- <button onclick="document.getElementById('drawer-no-dismiss').show()">No Dismiss</button>
149
- <button onclick="document.getElementById('drawer-persistent').show()">Persistent</button>
150
- <button onclick="document.getElementById('drawer-push').show()">Push Content</button>
151
- </div>
152
- </div>
153
-
154
- <!-- Form Example -->
155
- <div class="demo-section">
156
- <h2>Form Example</h2>
157
- <button onclick="document.getElementById('drawer-form').show()">Open Form Drawer</button>
158
- </div>
159
- </main>
160
-
161
- <!-- Left Drawer -->
162
- <snice-drawer id="drawer-left" position="left">
163
- <span slot="title">Left Drawer</span>
164
- <div class="drawer-content">
165
- <p>This is a left-positioned drawer. It slides in from the left side of the screen.</p>
166
- <p>You can close it by:</p>
167
- <ul>
168
- <li>Clicking the X button</li>
169
- <li>Clicking the backdrop</li>
170
- <li>Pressing Escape key</li>
171
- </ul>
172
- </div>
173
- </snice-drawer>
174
-
175
- <!-- Right Drawer -->
176
- <snice-drawer id="drawer-right" position="right">
177
- <span slot="title">Right Drawer</span>
178
- <div class="drawer-content">
179
- <p>This drawer slides in from the right side.</p>
180
- </div>
181
- </snice-drawer>
182
-
183
- <!-- Top Drawer -->
184
- <snice-drawer id="drawer-top" position="top">
185
- <span slot="title">Top Drawer</span>
186
- <div class="drawer-content">
187
- <p>This drawer slides down from the top.</p>
188
- </div>
189
- </snice-drawer>
190
-
191
- <!-- Bottom Drawer -->
192
- <snice-drawer id="drawer-bottom" position="bottom">
193
- <span slot="title">Bottom Drawer</span>
194
- <div class="drawer-content">
195
- <p>This drawer slides up from the bottom.</p>
196
- </div>
197
- </snice-drawer>
198
-
199
- <!-- Size Variants -->
200
- <snice-drawer id="drawer-small" size="small">
201
- <span slot="title">Small Drawer</span>
202
- <div class="drawer-content">
203
- <p>This is a small-sized drawer (240px wide).</p>
204
- </div>
205
- </snice-drawer>
206
-
207
- <snice-drawer id="drawer-medium" size="medium">
208
- <span slot="title">Medium Drawer</span>
209
- <div class="drawer-content">
210
- <p>This is a medium-sized drawer (320px wide).</p>
211
- </div>
212
- </snice-drawer>
213
-
214
- <snice-drawer id="drawer-large" size="large">
215
- <span slot="title">Large Drawer</span>
216
- <div class="drawer-content">
217
- <p>This is a large-sized drawer (480px wide).</p>
218
- </div>
219
- </snice-drawer>
220
-
221
- <snice-drawer id="drawer-xl" size="xl">
222
- <span slot="title">XL Drawer</span>
223
- <div class="drawer-content">
224
- <p>This is an extra-large drawer (640px wide).</p>
225
- </div>
226
- </snice-drawer>
227
-
228
- <snice-drawer id="drawer-xxl" size="xxl">
229
- <span slot="title">XXL Drawer</span>
230
- <div class="drawer-content">
231
- <p>This is a double extra-large drawer (800px wide).</p>
232
- </div>
233
- </snice-drawer>
234
-
235
- <snice-drawer id="drawer-xxxl" size="xxxl">
236
- <span slot="title">XXXL Drawer</span>
237
- <div class="drawer-content">
238
- <p>This is a triple extra-large drawer (960px wide).</p>
239
- </div>
240
- </snice-drawer>
241
-
242
- <snice-drawer id="drawer-full" size="full">
243
- <span slot="title">Full Width Drawer</span>
244
- <div class="drawer-content">
245
- <p>This drawer takes the full width/height of the viewport.</p>
246
- </div>
247
- </snice-drawer>
248
-
249
- <!-- Feature Variants -->
250
- <snice-drawer id="drawer-no-backdrop" no-backdrop>
251
- <span slot="title">No Backdrop</span>
252
- <div class="drawer-content">
253
- <p>This drawer has no backdrop overlay.</p>
254
- </div>
255
- </snice-drawer>
256
-
257
- <snice-drawer id="drawer-no-dismiss" no-backdrop-dismiss no-escape-dismiss>
258
- <span slot="title">No Auto Dismiss</span>
259
- <div class="drawer-content">
260
- <p>This drawer cannot be dismissed by clicking outside or pressing Escape.</p>
261
- <p>You must click the X button to close it.</p>
262
- </div>
263
- </snice-drawer>
264
-
265
- <snice-drawer id="drawer-persistent" persistent>
266
- <span slot="title">Persistent Drawer</span>
267
- <div class="drawer-content">
268
- <p>This drawer is persistent - it has no close button and cannot be dismissed.</p>
269
- <button onclick="document.getElementById('drawer-persistent').hide()">Close Programmatically</button>
270
- </div>
271
- </snice-drawer>
272
-
273
- <snice-drawer id="drawer-push" push-content>
274
- <span slot="title">Push Content</span>
275
- <div class="drawer-content">
276
- <p>This drawer pushes the main content instead of overlaying it.</p>
277
- <p>Notice how the main content shifts when this drawer opens.</p>
278
- </div>
279
- </snice-drawer>
280
-
281
- <!-- Form Example -->
282
- <snice-drawer id="drawer-form" size="large">
283
- <span slot="title">User Settings</span>
284
-
285
- <form class="drawer-content">
286
- <div class="form-group">
287
- <label for="name">Name</label>
288
- <input type="text" id="name" placeholder="Enter your name">
289
- </div>
290
-
291
- <div class="form-group">
292
- <label for="email">Email</label>
293
- <input type="email" id="email" placeholder="Enter your email">
294
- </div>
295
-
296
- <div class="form-group">
297
- <label for="role">Role</label>
298
- <select id="role">
299
- <option>Administrator</option>
300
- <option>Editor</option>
301
- <option>Viewer</option>
302
- </select>
303
- </div>
304
-
305
- <div class="form-group">
306
- <label for="bio">Bio</label>
307
- <textarea id="bio" rows="4" placeholder="Tell us about yourself"></textarea>
308
- </div>
309
- </form>
310
-
311
- <div slot="footer" class="footer-buttons">
312
- <button class="secondary" onclick="document.getElementById('drawer-form').hide()">Cancel</button>
313
- <button onclick="alert('Form submitted!'); document.getElementById('drawer-form').hide()">Save Changes</button>
314
- </div>
315
- </snice-drawer>
316
-
317
- <script>
318
- // Listen for drawer events
319
- document.addEventListener('drawer-open', (e) => {
320
- console.log('Drawer opened:', e.detail);
321
- });
322
-
323
- document.addEventListener('drawer-close', (e) => {
324
- console.log('Drawer closed:', e.detail);
325
- });
326
- </script>
327
- </body>
328
- </html>