snice 2.1.5 → 2.2.1

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 (367) 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-C9N6yGxQ.js +4 -0
  123. package/dist/components/snice-cell-C9N6yGxQ.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.iife.js +1 -1
  207. package/dist/symbols.esm.js +1 -1
  208. package/dist/transitions.esm.js +1 -1
  209. package/package.json +10 -6
  210. package/components/accordion/demo.html +0 -403
  211. package/components/accordion/snice-accordion-item.css +0 -85
  212. package/components/accordion/snice-accordion-item.ts +0 -226
  213. package/components/accordion/snice-accordion.css +0 -31
  214. package/components/accordion/snice-accordion.ts +0 -182
  215. package/components/accordion/snice-accordion.types.ts +0 -32
  216. package/components/alert/demo.html +0 -445
  217. package/components/alert/snice-alert.css +0 -195
  218. package/components/alert/snice-alert.ts +0 -141
  219. package/components/avatar/demo.html +0 -598
  220. package/components/avatar/snice-avatar.css +0 -131
  221. package/components/avatar/snice-avatar.ts +0 -136
  222. package/components/avatar/snice-avatar.types.ts +0 -13
  223. package/components/badge/demo.html +0 -523
  224. package/components/badge/snice-badge.css +0 -161
  225. package/components/badge/snice-badge.ts +0 -117
  226. package/components/breadcrumbs/demo.html +0 -404
  227. package/components/breadcrumbs/snice-breadcrumbs.css +0 -133
  228. package/components/breadcrumbs/snice-breadcrumbs.ts +0 -191
  229. package/components/breadcrumbs/snice-breadcrumbs.types.ts +0 -26
  230. package/components/breadcrumbs/snice-crumb.ts +0 -26
  231. package/components/button/demo.html +0 -42
  232. package/components/button/snice-button.css +0 -230
  233. package/components/button/snice-button.ts +0 -169
  234. package/components/button/snice-button.types.ts +0 -25
  235. package/components/card/demo.html +0 -525
  236. package/components/card/snice-card.css +0 -140
  237. package/components/card/snice-card.ts +0 -102
  238. package/components/checkbox/demo.html +0 -253
  239. package/components/checkbox/snice-checkbox.css +0 -164
  240. package/components/checkbox/snice-checkbox.ts +0 -223
  241. package/components/checkbox/snice-checkbox.types.ts +0 -22
  242. package/components/chip/demo.html +0 -383
  243. package/components/chip/snice-chip.css +0 -195
  244. package/components/chip/snice-chip.ts +0 -139
  245. package/components/chip/snice-chip.types.ts +0 -15
  246. package/components/date-picker/README.md +0 -233
  247. package/components/date-picker/demo.html +0 -191
  248. package/components/date-picker/snice-date-picker.css +0 -330
  249. package/components/date-picker/snice-date-picker.ts +0 -777
  250. package/components/date-picker/snice-date-picker.types.ts +0 -83
  251. package/components/divider/demo.html +0 -233
  252. package/components/divider/snice-divider.css +0 -155
  253. package/components/divider/snice-divider.ts +0 -69
  254. package/components/drawer/demo.html +0 -328
  255. package/components/drawer/snice-drawer.css +0 -476
  256. package/components/drawer/snice-drawer.ts +0 -287
  257. package/components/drawer/snice-drawer.types.ts +0 -17
  258. package/components/global.d.ts +0 -14
  259. package/components/input/demo.html +0 -303
  260. package/components/input/snice-input.css +0 -257
  261. package/components/input/snice-input.ts +0 -442
  262. package/components/input/snice-input.types.ts +0 -59
  263. package/components/input/test.html +0 -77
  264. package/components/layout/README.md +0 -260
  265. package/components/layout/demo.html +0 -538
  266. package/components/layout/snice-layout-blog.css +0 -129
  267. package/components/layout/snice-layout-blog.ts +0 -48
  268. package/components/layout/snice-layout-card.css +0 -104
  269. package/components/layout/snice-layout-card.ts +0 -35
  270. package/components/layout/snice-layout-centered.css +0 -51
  271. package/components/layout/snice-layout-centered.ts +0 -22
  272. package/components/layout/snice-layout-dashboard.css +0 -98
  273. package/components/layout/snice-layout-dashboard.ts +0 -45
  274. package/components/layout/snice-layout-fullscreen.css +0 -72
  275. package/components/layout/snice-layout-fullscreen.ts +0 -34
  276. package/components/layout/snice-layout-landing.css +0 -92
  277. package/components/layout/snice-layout-landing.ts +0 -47
  278. package/components/layout/snice-layout-minimal.css +0 -16
  279. package/components/layout/snice-layout-minimal.ts +0 -19
  280. package/components/layout/snice-layout-sidebar.css +0 -117
  281. package/components/layout/snice-layout-sidebar.ts +0 -48
  282. package/components/layout/snice-layout-split.css +0 -103
  283. package/components/layout/snice-layout-split.ts +0 -29
  284. package/components/layout/snice-layout.css +0 -72
  285. package/components/layout/snice-layout.ts +0 -35
  286. package/components/login/demo-auth-controller.ts +0 -185
  287. package/components/login/demo.html +0 -470
  288. package/components/login/snice-login.css +0 -204
  289. package/components/login/snice-login.ts +0 -326
  290. package/components/login/snice-login.types.ts +0 -29
  291. package/components/modal/demo.html +0 -291
  292. package/components/modal/snice-modal.css +0 -203
  293. package/components/modal/snice-modal.ts +0 -233
  294. package/components/modal/snice-modal.types.ts +0 -21
  295. package/components/pagination/demo.html +0 -395
  296. package/components/pagination/snice-pagination.ts +0 -333
  297. package/components/pagination/snice-pagination.types.ts +0 -21
  298. package/components/progress/demo.html +0 -510
  299. package/components/progress/snice-progress.css +0 -267
  300. package/components/progress/snice-progress.ts +0 -247
  301. package/components/progress/snice-progress.types.ts +0 -19
  302. package/components/radio/demo.html +0 -287
  303. package/components/radio/snice-radio.css +0 -171
  304. package/components/radio/snice-radio.ts +0 -218
  305. package/components/radio/snice-radio.types.ts +0 -21
  306. package/components/select/demo.html +0 -511
  307. package/components/select/snice-option.ts +0 -52
  308. package/components/select/snice-select.css +0 -392
  309. package/components/select/snice-select.ts +0 -796
  310. package/components/select/snice-select.types.ts +0 -55
  311. package/components/skeleton/demo.html +0 -514
  312. package/components/skeleton/snice-skeleton.css +0 -109
  313. package/components/skeleton/snice-skeleton.ts +0 -126
  314. package/components/switch/demo.html +0 -284
  315. package/components/switch/snice-switch.css +0 -221
  316. package/components/switch/snice-switch.ts +0 -229
  317. package/components/switch/snice-switch.types.ts +0 -23
  318. package/components/symbols.ts +0 -23
  319. package/components/table/demo-table-controller.ts +0 -100
  320. package/components/table/demo.html +0 -480
  321. package/components/table/snice-cell-boolean.ts +0 -112
  322. package/components/table/snice-cell-date.ts +0 -210
  323. package/components/table/snice-cell-duration.ts +0 -91
  324. package/components/table/snice-cell-filesize.ts +0 -90
  325. package/components/table/snice-cell-number.ts +0 -165
  326. package/components/table/snice-cell-progress.ts +0 -83
  327. package/components/table/snice-cell-rating.ts +0 -82
  328. package/components/table/snice-cell-sparkline.ts +0 -253
  329. package/components/table/snice-cell-text.ts +0 -125
  330. package/components/table/snice-cell.css +0 -296
  331. package/components/table/snice-cell.ts +0 -473
  332. package/components/table/snice-column.ts +0 -353
  333. package/components/table/snice-header.css +0 -243
  334. package/components/table/snice-header.ts +0 -261
  335. package/components/table/snice-progress.ts +0 -66
  336. package/components/table/snice-rating.ts +0 -45
  337. package/components/table/snice-row.css +0 -255
  338. package/components/table/snice-row.ts +0 -331
  339. package/components/table/snice-table.css +0 -241
  340. package/components/table/snice-table.ts +0 -737
  341. package/components/table/snice-table.types.ts +0 -158
  342. package/components/tabs/demo.html +0 -487
  343. package/components/tabs/snice-tab-panel.css +0 -264
  344. package/components/tabs/snice-tab-panel.ts +0 -47
  345. package/components/tabs/snice-tab.css +0 -96
  346. package/components/tabs/snice-tab.ts +0 -65
  347. package/components/tabs/snice-tabs.css +0 -189
  348. package/components/tabs/snice-tabs.ts +0 -332
  349. package/components/tabs/snice-tabs.types.ts +0 -28
  350. package/components/theme/theme.css +0 -234
  351. package/components/toast/demo.html +0 -329
  352. package/components/toast/snice-toast-container.ts +0 -256
  353. package/components/toast/snice-toast.css +0 -213
  354. package/components/toast/snice-toast.ts +0 -276
  355. package/components/toast/snice-toast.types.ts +0 -35
  356. package/components/tooltip/demo.html +0 -350
  357. package/components/tooltip/snice-tooltip-portal.css +0 -79
  358. package/components/tooltip/snice-tooltip.css +0 -117
  359. package/components/tooltip/snice-tooltip.ts +0 -612
  360. package/components/tooltip/snice-tooltip.types.ts +0 -32
  361. package/components/transitions.ts +0 -94
  362. package/components/tsconfig.json +0 -18
  363. package/dist/index.cjs.min.map +0 -1
  364. package/dist/index.esm.min.js +0 -14
  365. package/dist/index.esm.min.js.map +0 -1
  366. package/dist/index.iife.min.js +0 -15
  367. package/dist/index.iife.min.js.map +0 -1
package/components/layout/demo.html DELETED
@@ -1,538 +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>Layout Components Test</title>
7
- <link rel="stylesheet" href="../theme/theme.css">
8
- <style>
9
- body {
10
- font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
11
- margin: 0;
12
- padding: var(--snice-spacing-lg, 2rem);
13
- background: var(--snice-color-background, #f9fafb);
14
- color: var(--snice-color-text, #374151);
15
- }
16
-
17
- .demo-nav {
18
- max-width: 1200px;
19
- margin: 0 auto var(--snice-spacing-xl, 2rem);
20
- background: var(--snice-color-background-element, white);
21
- padding: var(--snice-spacing-lg, 1.5rem);
22
- border-radius: var(--snice-border-radius-lg, 8px);
23
- box-shadow: var(--snice-shadow-sm, 0 1px 3px rgba(0,0,0,0.1));
24
- }
25
-
26
- .demo-nav h1 {
27
- margin: 0 0 var(--snice-spacing-md, 1rem) 0;
28
- color: var(--snice-color-text, #374151);
29
- font-weight: var(--snice-font-weight-bold, 700);
30
- }
31
-
32
- .demo-nav nav {
33
- display: flex;
34
- gap: var(--snice-spacing-md, 1rem);
35
- flex-wrap: wrap;
36
- }
37
-
38
- .demo-nav button {
39
- padding: var(--snice-spacing-xs, 0.5rem) var(--snice-spacing-md, 1rem);
40
- border: 1px solid var(--snice-color-border, #e5e7eb);
41
- border-radius: var(--snice-border-radius-md, 4px);
42
- background: var(--snice-color-background, white);
43
- color: var(--snice-color-text, #374151);
44
- cursor: pointer;
45
- transition: all var(--snice-transition-fast, 0.15s) ease;
46
- }
47
-
48
- .demo-nav button:hover {
49
- background: var(--snice-color-background-secondary, #f9fafb);
50
- border-color: var(--snice-color-primary, #3b82f6);
51
- }
52
-
53
- .demo-nav button.active {
54
- background: var(--snice-color-primary, #3b82f6);
55
- color: white;
56
- border-color: var(--snice-color-primary, #3b82f6);
57
- }
58
-
59
- .demo-section {
60
- display: none;
61
- min-height: 70vh;
62
- border: 2px dashed var(--snice-color-border, #e5e7eb);
63
- border-radius: var(--snice-border-radius-lg, 8px);
64
- overflow: hidden;
65
- }
66
-
67
- .demo-section.active {
68
- display: block;
69
- }
70
-
71
- /* Sample content styles */
72
- .sample-nav {
73
- display: flex;
74
- gap: var(--snice-spacing-lg, 2rem);
75
- }
76
-
77
- .sample-nav a {
78
- color: var(--snice-color-text-secondary, #6b7280);
79
- text-decoration: none;
80
- padding: var(--snice-spacing-xs, 0.5rem) var(--snice-spacing-md, 1rem);
81
- border-radius: var(--snice-border-radius-md, 4px);
82
- transition: all var(--snice-transition-fast, 0.15s) ease;
83
- }
84
-
85
- .sample-nav a:hover,
86
- .sample-nav a.active {
87
- background: var(--snice-color-primary-light, #dbeafe);
88
- color: var(--snice-color-primary, #3b82f6);
89
- }
90
-
91
- .sample-card {
92
- background: var(--snice-color-background, white);
93
- padding: var(--snice-spacing-lg, 2rem);
94
- border-radius: var(--snice-border-radius-lg, 8px);
95
- box-shadow: var(--snice-shadow-sm, 0 1px 3px rgba(0,0,0,0.1));
96
- }
97
-
98
- .sample-card h3 {
99
- margin: 0 0 var(--snice-spacing-md, 1rem) 0;
100
- color: var(--snice-color-text, #374151);
101
- }
102
-
103
- .sample-grid {
104
- display: grid;
105
- gap: var(--snice-spacing-lg, 2rem);
106
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
107
- }
108
-
109
- .sidebar-nav {
110
- display: flex;
111
- flex-direction: column;
112
- gap: var(--snice-spacing-sm, 0.75rem);
113
- }
114
-
115
- .sidebar-nav a {
116
- color: var(--snice-color-text-secondary, #6b7280);
117
- text-decoration: none;
118
- padding: var(--snice-spacing-sm, 0.75rem) var(--snice-spacing-md, 1rem);
119
- border-radius: var(--snice-border-radius-md, 4px);
120
- transition: all var(--snice-transition-fast, 0.15s) ease;
121
- }
122
-
123
- .sidebar-nav a:hover,
124
- .sidebar-nav a.active {
125
- background: var(--snice-color-primary-light, #dbeafe);
126
- color: var(--snice-color-primary, #3b82f6);
127
- }
128
-
129
- .hero-section {
130
- text-align: center;
131
- padding: var(--snice-spacing-2xl, 4rem) var(--snice-spacing-lg, 2rem);
132
- }
133
-
134
- .hero-section h1 {
135
- font-size: var(--snice-font-size-3xl, 2.25rem);
136
- margin: 0 0 var(--snice-spacing-md, 1rem) 0;
137
- }
138
-
139
- .cta-button {
140
- background: var(--snice-color-primary, #3b82f6);
141
- color: white;
142
- padding: var(--snice-spacing-md, 1rem) var(--snice-spacing-lg, 2rem);
143
- border: none;
144
- border-radius: var(--snice-border-radius-md, 4px);
145
- font-weight: var(--snice-font-weight-semibold, 600);
146
- cursor: pointer;
147
- transition: all var(--snice-transition-fast, 0.15s) ease;
148
- }
149
-
150
- .cta-button:hover {
151
- background: var(--snice-color-primary-dark, #2563eb);
152
- }
153
- </style>
154
- </head>
155
- <body>
156
- <div class="demo-nav">
157
- <h1>Snice Layout Components Demo</h1>
158
- <nav>
159
- <button onclick="showDemo('basic')" class="active">Basic Layout</button>
160
- <button onclick="showDemo('sidebar')">Sidebar Layout</button>
161
- <button onclick="showDemo('minimal')">Minimal Layout</button>
162
- <button onclick="showDemo('centered')">Centered Layout</button>
163
- <button onclick="showDemo('landing')">Landing Layout</button>
164
- <button onclick="showDemo('split')">Split Layout</button>
165
- <button onclick="showDemo('card')">Card Layout</button>
166
- <button onclick="showDemo('blog')">Blog Layout</button>
167
- <button onclick="showDemo('dashboard')">Dashboard Layout</button>
168
- <button onclick="showDemo('fullscreen')">Fullscreen Layout</button>
169
- </nav>
170
- </div>
171
-
172
- <!-- Basic Layout Demo -->
173
- <div id="basic" class="demo-section active">
174
- <snice-layout>
175
- <div slot="brand"><h2>My App</h2></div>
176
- <nav slot="nav" class="sample-nav">
177
- <a href="#" class="active">Home</a>
178
- <a href="#">About</a>
179
- <a href="#">Services</a>
180
- <a href="#">Contact</a>
181
- </nav>
182
-
183
- <div style="padding: 2rem;">
184
- <h1>Welcome to Our App</h1>
185
- <p>This is the basic layout with header, navigation, main content, and footer areas.</p>
186
- <p>The layout provides slots for brand, navigation, main content, and footer sections.</p>
187
- </div>
188
-
189
- <div slot="footer" style="text-align: center;">
190
- <p>&copy; 2024 My Company. All rights reserved.</p>
191
- </div>
192
- </snice-layout>
193
- </div>
194
-
195
- <!-- Sidebar Layout Demo -->
196
- <div id="sidebar" class="demo-section">
197
- <snice-layout-sidebar>
198
- <div slot="brand"><h3>Dashboard</h3></div>
199
- <nav slot="nav" class="sidebar-nav">
200
- <a href="#" class="active">Overview</a>
201
- <a href="#">Analytics</a>
202
- <a href="#">Users</a>
203
- <a href="#">Settings</a>
204
- <a href="#">Reports</a>
205
- </nav>
206
- <div slot="header">
207
- <h1>Dashboard Overview</h1>
208
- <p>Welcome back! Here's what's happening today.</p>
209
- </div>
210
-
211
- <div style="padding: 1rem;">
212
- <div class="sample-grid">
213
- <div class="sample-card">
214
- <h3>Total Users</h3>
215
- <p style="font-size: 2rem; font-weight: bold; color: var(--snice-color-primary);">12,345</p>
216
- </div>
217
- <div class="sample-card">
218
- <h3>Revenue</h3>
219
- <p style="font-size: 2rem; font-weight: bold; color: var(--snice-color-success, #10b981);">$54,321</p>
220
- </div>
221
- <div class="sample-card">
222
- <h3>Orders</h3>
223
- <p style="font-size: 2rem; font-weight: bold; color: var(--snice-color-warning, #f59e0b);">987</p>
224
- </div>
225
- </div>
226
- </div>
227
- </snice-layout-sidebar>
228
- </div>
229
-
230
- <!-- Minimal Layout Demo -->
231
- <div id="minimal" class="demo-section">
232
- <snice-layout-minimal>
233
- <div style="padding: 4rem; text-align: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; min-height: 60vh; display: flex; align-items: center; justify-content: center; flex-direction: column;">
234
- <h1 style="font-size: 3rem; margin-bottom: 1rem;">Clean & Minimal</h1>
235
- <p style="font-size: 1.25rem; opacity: 0.9;">Perfect for focused content without distractions</p>
236
- <button class="cta-button" style="margin-top: 2rem;">Get Started</button>
237
- </div>
238
- </snice-layout-minimal>
239
- </div>
240
-
241
- <!-- Centered Layout Demo -->
242
- <div id="centered" class="demo-section">
243
- <snice-layout-centered width="md">
244
- <div style="text-align: center;">
245
- <h2 style="margin-bottom: 2rem;">Sign In</h2>
246
- <form style="display: flex; flex-direction: column; gap: 1rem;">
247
- <input type="email" placeholder="Email address" style="padding: 0.75rem; border: 1px solid var(--snice-color-border); border-radius: 4px;">
248
- <input type="password" placeholder="Password" style="padding: 0.75rem; border: 1px solid var(--snice-color-border); border-radius: 4px;">
249
- <button type="submit" class="cta-button">Sign In</button>
250
- <p style="margin-top: 1rem; color: var(--snice-color-text-secondary);">
251
- Don't have an account? <a href="#" style="color: var(--snice-color-primary);">Sign up</a>
252
- </p>
253
- </form>
254
- </div>
255
- </snice-layout-centered>
256
- </div>
257
-
258
- <!-- Landing Layout Demo -->
259
- <div id="landing" class="demo-section">
260
- <snice-layout-landing>
261
- <div slot="brand"><h2>StartupCo</h2></div>
262
- <nav slot="nav" class="sample-nav">
263
- <a href="#">Features</a>
264
- <a href="#">Pricing</a>
265
- <a href="#">About</a>
266
- </nav>
267
- <button slot="cta" class="cta-button">Get Started</button>
268
-
269
- <div slot="hero" class="hero-section">
270
- <h1>Build Amazing Things</h1>
271
- <p style="font-size: 1.25rem; color: var(--snice-color-text-secondary); margin-bottom: 2rem;">
272
- Transform your ideas into reality with our powerful platform
273
- </p>
274
- <button class="cta-button" style="font-size: 1.125rem; padding: 1rem 2rem;">Start Free Trial</button>
275
- </div>
276
-
277
- <section style="padding: 4rem 2rem; max-width: 1200px; margin: 0 auto;">
278
- <h2 style="text-align: center; margin-bottom: 3rem;">Why Choose Us?</h2>
279
- <div class="sample-grid">
280
- <div class="sample-card">
281
- <h3>🚀 Fast Performance</h3>
282
- <p>Lightning-fast loading times and optimized performance.</p>
283
- </div>
284
- <div class="sample-card">
285
- <h3>🔒 Secure</h3>
286
- <p>Enterprise-grade security with end-to-end encryption.</p>
287
- </div>
288
- <div class="sample-card">
289
- <h3>📱 Mobile First</h3>
290
- <p>Responsive design that works perfectly on all devices.</p>
291
- </div>
292
- </div>
293
- </section>
294
- </snice-layout-landing>
295
- </div>
296
-
297
- <!-- Split Layout Demo -->
298
- <div id="split" class="demo-section">
299
- <snice-layout-split direction="horizontal" ratio="60-40">
300
- <div slot="left" style="padding: 2rem;">
301
- <h2>Left Panel (60%)</h2>
302
- <p>This is the larger left panel taking up 60% of the space.</p>
303
- <div class="sample-card">
304
- <h3>Main Content</h3>
305
- <p>Perfect for displaying primary content, forms, or detailed information.</p>
306
- </div>
307
- </div>
308
- <div slot="right" style="padding: 2rem; background: var(--snice-color-background-secondary);">
309
- <h3>Right Panel (40%)</h3>
310
- <p>Sidebar content goes here.</p>
311
- <div style="margin-top: 1rem;">
312
- <h4>Quick Actions</h4>
313
- <button style="display: block; width: 100%; margin-bottom: 0.5rem; padding: 0.5rem; border: 1px solid var(--snice-color-border); background: white; border-radius: 4px; cursor: pointer;">Action 1</button>
314
- <button style="display: block; width: 100%; margin-bottom: 0.5rem; padding: 0.5rem; border: 1px solid var(--snice-color-border); background: white; border-radius: 4px; cursor: pointer;">Action 2</button>
315
- </div>
316
- </div>
317
- </snice-layout-split>
318
- </div>
319
-
320
- <!-- Card Layout Demo -->
321
- <div id="card" class="demo-section">
322
- <snice-layout-card columns="3" gap="lg">
323
- <div slot="header" style="text-align: center; padding: 2rem;">
324
- <h1>Product Gallery</h1>
325
- <p>Browse our collection of amazing products</p>
326
- </div>
327
-
328
- <div class="sample-card">
329
- <h3>Product 1</h3>
330
- <p>Description of the first product with its key features.</p>
331
- <button style="margin-top: 1rem; padding: 0.5rem 1rem; background: var(--snice-color-primary); color: white; border: none; border-radius: 4px; cursor: pointer;">View Details</button>
332
- </div>
333
- <div class="sample-card">
334
- <h3>Product 2</h3>
335
- <p>Description of the second product with its unique selling points.</p>
336
- <button style="margin-top: 1rem; padding: 0.5rem 1rem; background: var(--snice-color-primary); color: white; border: none; border-radius: 4px; cursor: pointer;">View Details</button>
337
- </div>
338
- <div class="sample-card">
339
- <h3>Product 3</h3>
340
- <p>Description of the third product and why customers love it.</p>
341
- <button style="margin-top: 1rem; padding: 0.5rem 1rem; background: var(--snice-color-primary); color: white; border: none; border-radius: 4px; cursor: pointer;">View Details</button>
342
- </div>
343
- <div class="sample-card">
344
- <h3>Product 4</h3>
345
- <p>Another great product with excellent reviews and ratings.</p>
346
- <button style="margin-top: 1rem; padding: 0.5rem 1rem; background: var(--snice-color-primary); color: white; border: none; border-radius: 4px; cursor: pointer;">View Details</button>
347
- </div>
348
- <div class="sample-card">
349
- <h3>Product 5</h3>
350
- <p>Premium product with advanced features and capabilities.</p>
351
- <button style="margin-top: 1rem; padding: 0.5rem 1rem; background: var(--snice-color-primary); color: white; border: none; border-radius: 4px; cursor: pointer;">View Details</button>
352
- </div>
353
- <div class="sample-card">
354
- <h3>Product 6</h3>
355
- <p>Latest addition to our catalog with innovative design.</p>
356
- <button style="margin-top: 1rem; padding: 0.5rem 1rem; background: var(--snice-color-primary); color: white; border: none; border-radius: 4px; cursor: pointer;">View Details</button>
357
- </div>
358
- </snice-layout-card>
359
- </div>
360
-
361
- <!-- Blog Layout Demo -->
362
- <div id="blog" class="demo-section">
363
- <snice-layout-blog>
364
- <div slot="brand"><h2>Tech Blog</h2></div>
365
- <nav slot="nav" class="sample-nav">
366
- <a href="#" class="active">Latest</a>
367
- <a href="#">Categories</a>
368
- <a href="#">Archive</a>
369
- <a href="#">About</a>
370
- </nav>
371
-
372
- <article style="line-height: 1.6;">
373
- <h1>The Future of Web Development</h1>
374
- <p style="color: var(--snice-color-text-secondary); margin-bottom: 2rem;">Published on December 9, 2024 by John Doe</p>
375
-
376
- <p>Web development continues to evolve at a rapid pace. From the early days of static HTML pages to today's dynamic, interactive web applications, the landscape has transformed dramatically.</p>
377
-
378
- <h2>Current Trends</h2>
379
- <p>Several trends are shaping the future of web development:</p>
380
- <ul>
381
- <li>Web Components and Custom Elements</li>
382
- <li>Progressive Web Apps (PWAs)</li>
383
- <li>Serverless Architecture</li>
384
- <li>AI-Driven Development Tools</li>
385
- </ul>
386
-
387
- <h2>What's Next?</h2>
388
- <p>As we look ahead, web development will continue to become more accessible, performant, and user-focused. The tools and frameworks we use today are just the beginning.</p>
389
- </article>
390
-
391
- <div slot="sidebar">
392
- <h3>Recent Posts</h3>
393
- <div style="display: flex; flex-direction: column; gap: 1rem;">
394
- <a href="#" style="color: var(--snice-color-text); text-decoration: none; padding: 1rem; background: white; border-radius: 4px; border: 1px solid var(--snice-color-border);">
395
- <h4 style="margin: 0 0 0.5rem 0;">CSS Grid vs Flexbox</h4>
396
- <p style="margin: 0; color: var(--snice-color-text-secondary); font-size: 0.875rem;">When to use each layout method</p>
397
- </a>
398
- <a href="#" style="color: var(--snice-color-text); text-decoration: none; padding: 1rem; background: white; border-radius: 4px; border: 1px solid var(--snice-color-border);">
399
- <h4 style="margin: 0 0 0.5rem 0;">JavaScript Frameworks 2024</h4>
400
- <p style="margin: 0; color: var(--snice-color-text-secondary); font-size: 0.875rem;">Comparing React, Vue, and Angular</p>
401
- </a>
402
- </div>
403
-
404
- <h3 style="margin-top: 2rem;">Categories</h3>
405
- <div style="display: flex; flex-direction: column; gap: 0.5rem;">
406
- <a href="#" style="color: var(--snice-color-primary); text-decoration: none;">Frontend Development</a>
407
- <a href="#" style="color: var(--snice-color-primary); text-decoration: none;">Backend Development</a>
408
- <a href="#" style="color: var(--snice-color-primary); text-decoration: none;">Web Design</a>
409
- <a href="#" style="color: var(--snice-color-primary); text-decoration: none;">Performance</a>
410
- </div>
411
- </div>
412
- </snice-layout-blog>
413
- </div>
414
-
415
- <!-- Dashboard Layout Demo -->
416
- <div id="dashboard" class="demo-section">
417
- <snice-layout-dashboard>
418
- <div slot="brand"><h2>Analytics Dashboard</h2></div>
419
- <input slot="search" type="search" placeholder="Search..." style="padding: 0.5rem; border: 1px solid var(--snice-color-border); border-radius: 4px; width: 100%;">
420
- <div slot="user" style="display: flex; align-items: center; gap: 0.5rem;">
421
- <span>Welcome, John!</span>
422
- <div style="width: 32px; height: 32px; background: var(--snice-color-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">J</div>
423
- </div>
424
-
425
- <nav slot="nav" class="sample-nav">
426
- <a href="#" class="active">Overview</a>
427
- <a href="#">Reports</a>
428
- <a href="#">Users</a>
429
- <a href="#">Settings</a>
430
- </nav>
431
-
432
- <div slot="sidebar">
433
- <h3>Quick Actions</h3>
434
- <div style="display: flex; flex-direction: column; gap: 0.5rem;">
435
- <button style="padding: 0.75rem; border: 1px solid var(--snice-color-border); background: white; border-radius: 4px; cursor: pointer; text-align: left;">📊 New Report</button>
436
- <button style="padding: 0.75rem; border: 1px solid var(--snice-color-border); background: white; border-radius: 4px; cursor: pointer; text-align: left;">👥 Add User</button>
437
- <button style="padding: 0.75rem; border: 1px solid var(--snice-color-border); background: white; border-radius: 4px; cursor: pointer; text-align: left;">📈 View Analytics</button>
438
- </div>
439
- </div>
440
-
441
- <div>
442
- <h1>Dashboard Overview</h1>
443
- <div class="sample-grid" style="margin-top: 2rem;">
444
- <div class="sample-card">
445
- <h3>Total Revenue</h3>
446
- <p style="font-size: 2rem; font-weight: bold; color: var(--snice-color-success, #10b981);">$125,430</p>
447
- <p style="color: var(--snice-color-text-secondary); font-size: 0.875rem;">+12% from last month</p>
448
- </div>
449
- <div class="sample-card">
450
- <h3>Active Users</h3>
451
- <p style="font-size: 2rem; font-weight: bold; color: var(--snice-color-primary);">8,462</p>
452
- <p style="color: var(--snice-color-text-secondary); font-size: 0.875rem;">+5% from last month</p>
453
- </div>
454
- </div>
455
- </div>
456
-
457
- <div slot="right-sidebar">
458
- <h3>Recent Activity</h3>
459
- <div style="display: flex; flex-direction: column; gap: 1rem;">
460
- <div style="padding: 1rem; background: white; border-radius: 4px; border-left: 4px solid var(--snice-color-primary);">
461
- <p style="margin: 0; font-weight: 500;">New user registered</p>
462
- <p style="margin: 0; color: var(--snice-color-text-secondary); font-size: 0.875rem;">2 minutes ago</p>
463
- </div>
464
- <div style="padding: 1rem; background: white; border-radius: 4px; border-left: 4px solid var(--snice-color-success, #10b981);">
465
- <p style="margin: 0; font-weight: 500;">Payment received</p>
466
- <p style="margin: 0; color: var(--snice-color-text-secondary); font-size: 0.875rem;">5 minutes ago</p>
467
- </div>
468
- <div style="padding: 1rem; background: white; border-radius: 4px; border-left: 4px solid var(--snice-color-warning, #f59e0b);">
469
- <p style="margin: 0; font-weight: 500;">Server maintenance</p>
470
- <p style="margin: 0; color: var(--snice-color-text-secondary); font-size: 0.875rem;">1 hour ago</p>
471
- </div>
472
- </div>
473
- </div>
474
- </snice-layout-dashboard>
475
- </div>
476
-
477
- <!-- Fullscreen Layout Demo -->
478
- <div id="fullscreen" class="demo-section">
479
- <snice-layout-fullscreen>
480
- <div slot="background" style="background: linear-gradient(45deg, #1e3a8a, #3b82f6); width: 100%; height: 100%;"></div>
481
-
482
- <div style="text-align: center; color: white;">
483
- <h1 style="font-size: 4rem; margin-bottom: 1rem;">Immersive Experience</h1>
484
- <p style="font-size: 1.5rem; opacity: 0.9;">Fullscreen layout for presentations and media</p>
485
- <button class="cta-button" style="margin-top: 2rem; font-size: 1.125rem; padding: 1rem 2rem;">Enter Fullscreen</button>
486
- </div>
487
-
488
- <div slot="controls" style="display: flex; justify-content: center; gap: 1rem;">
489
- <button style="padding: 0.75rem 1.5rem; background: rgba(255,255,255,0.2); color: white; border: 1px solid rgba(255,255,255,0.3); border-radius: 4px; cursor: pointer;">⏸️ Pause</button>
490
- <button style="padding: 0.75rem 1.5rem; background: rgba(255,255,255,0.2); color: white; border: 1px solid rgba(255,255,255,0.3); border-radius: 4px; cursor: pointer;">⏹️ Stop</button>
491
- <button style="padding: 0.75rem 1.5rem; background: rgba(255,255,255,0.2); color: white; border: 1px solid rgba(255,255,255,0.3); border-radius: 4px; cursor: pointer;">🔄 Restart</button>
492
- </div>
493
- </snice-layout-fullscreen>
494
- </div>
495
-
496
- <script type="module">
497
- // Import all layout components
498
- import './snice-layout.ts';
499
- import './snice-layout-sidebar.ts';
500
- import './snice-layout-minimal.ts';
501
- import './snice-layout-centered.ts';
502
- import './snice-layout-landing.ts';
503
- import './snice-layout-split.ts';
504
- import './snice-layout-card.ts';
505
- import './snice-layout-blog.ts';
506
- import './snice-layout-dashboard.ts';
507
- import './snice-layout-fullscreen.ts';
508
-
509
- // Demo navigation function
510
- window.showDemo = function(layoutType) {
511
- // Hide all demos
512
- document.querySelectorAll('.demo-section').forEach(section => {
513
- section.classList.remove('active');
514
- });
515
-
516
- // Show selected demo
517
- document.getElementById(layoutType).classList.add('active');
518
-
519
- // Update nav buttons
520
- document.querySelectorAll('.demo-nav button').forEach(btn => {
521
- btn.classList.remove('active');
522
- });
523
- event.target.classList.add('active');
524
- };
525
-
526
- // Add some interactivity
527
- document.addEventListener('click', (e) => {
528
- // Handle sidebar toggle
529
- if (e.target.matches('.sidebar-toggle')) {
530
- const sidebar = e.target.closest('snice-layout-sidebar');
531
- if (sidebar) {
532
- sidebar.collapsed = !sidebar.collapsed;
533
- }
534
- }
535
- });
536
- </script>
537
- </body>
538
- </html>
package/components/layout/snice-layout-blog.css DELETED
@@ -1,129 +0,0 @@
1
- /* Blog Layout - Article with sidebar */
2
- :host {
3
- display: block;
4
- font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
5
- }
6
-
7
- .layout {
8
- min-height: 100vh;
9
- display: grid;
10
- grid-template-rows: auto 1fr auto;
11
- }
12
-
13
- .container {
14
- max-width: 1200px;
15
- margin: 0 auto;
16
- padding: 0 var(--snice-spacing-lg, 2rem);
17
- }
18
-
19
- .header {
20
- background: var(--snice-color-background, white);
21
- border-bottom: 1px solid var(--snice-color-border, #d1d5db);
22
- padding: var(--snice-spacing-md, 1rem) 0;
23
- }
24
-
25
- .header .container {
26
- display: flex;
27
- align-items: center;
28
- justify-content: space-between;
29
- }
30
-
31
- .brand h1 {
32
- margin: 0;
33
- font-size: var(--snice-font-size-xl, 1.5rem);
34
- font-weight: var(--snice-font-weight-bold, 700);
35
- color: var(--snice-color-text, #374151);
36
- }
37
-
38
- .nav {
39
- display: flex;
40
- gap: var(--snice-spacing-lg, 2rem);
41
- }
42
-
43
- .nav ::slotted(a) {
44
- text-decoration: none;
45
- color: var(--snice-color-text-secondary, #6b7280);
46
- font-weight: var(--snice-font-weight-medium, 500);
47
- transition: color var(--snice-transition-fast, 0.15s) ease;
48
- }
49
-
50
- .nav ::slotted(a:hover) {
51
- color: var(--snice-color-primary, #3b82f6);
52
- }
53
-
54
- .main {
55
- background: var(--snice-color-background, white);
56
- padding: var(--snice-spacing-xl, 3rem) 0;
57
- }
58
-
59
- .content-area {
60
- display: grid;
61
- grid-template-columns: 1fr 300px;
62
- gap: var(--snice-spacing-2xl, 4rem);
63
- align-items: start;
64
- }
65
-
66
- .article {
67
- max-width: none;
68
- }
69
-
70
- .sidebar {
71
- background: var(--snice-color-background-secondary, #f8fafc);
72
- border-radius: var(--snice-border-radius-lg, 8px);
73
- padding: var(--snice-spacing-lg, 2rem);
74
- position: sticky;
75
- top: var(--snice-spacing-lg, 2rem);
76
- }
77
-
78
- .footer {
79
- background: var(--snice-color-background-tertiary, #f1f5f9);
80
- border-top: 1px solid var(--snice-color-border, #d1d5db);
81
- padding: var(--snice-spacing-xl, 3rem) 0;
82
- }
83
-
84
- /* Typography for article content */
85
- .article ::slotted(h1) {
86
- font-size: var(--snice-font-size-3xl, 2.25rem);
87
- font-weight: var(--snice-font-weight-bold, 700);
88
- color: var(--snice-color-text, #374151);
89
- line-height: var(--snice-line-height-tight, 1.25);
90
- margin-bottom: var(--snice-spacing-lg, 2rem);
91
- }
92
-
93
- .article ::slotted(h2) {
94
- font-size: var(--snice-font-size-2xl, 1.875rem);
95
- font-weight: var(--snice-font-weight-semibold, 600);
96
- color: var(--snice-color-text, #374151);
97
- margin-top: var(--snice-spacing-xl, 3rem);
98
- margin-bottom: var(--snice-spacing-md, 1rem);
99
- }
100
-
101
- .article ::slotted(p) {
102
- font-size: var(--snice-font-size-base, 1rem);
103
- line-height: var(--snice-line-height-relaxed, 1.625);
104
- color: var(--snice-color-text, #374151);
105
- margin-bottom: var(--snice-spacing-md, 1rem);
106
- }
107
-
108
- /* Mobile responsive */
109
- @media (max-width: 968px) {
110
- .content-area {
111
- grid-template-columns: 1fr;
112
- gap: var(--snice-spacing-xl, 3rem);
113
- }
114
-
115
- .sidebar {
116
- position: static;
117
- }
118
- }
119
-
120
- @media (max-width: 768px) {
121
- .header .container {
122
- flex-direction: column;
123
- gap: var(--snice-spacing-md, 1rem);
124
- }
125
-
126
- .main {
127
- padding: var(--snice-spacing-lg, 2rem) 0;
128
- }
129
- }