snice 2.1.4 → 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 (370) 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 +16 -20
  205. package/dist/index.cjs.map +1 -1
  206. package/dist/index.cjs.min.map +1 -1
  207. package/dist/index.esm.js +16 -20
  208. package/dist/index.esm.js.map +1 -1
  209. package/dist/index.esm.min.js +3 -3
  210. package/dist/index.esm.min.js.map +1 -1
  211. package/dist/index.iife.js +16 -20
  212. package/dist/index.iife.js.map +1 -1
  213. package/dist/index.iife.min.js +3 -3
  214. package/dist/index.iife.min.js.map +1 -1
  215. package/dist/symbols.esm.js +1 -1
  216. package/dist/transitions.esm.js +1 -1
  217. package/package.json +10 -6
  218. package/components/accordion/demo.html +0 -403
  219. package/components/accordion/snice-accordion-item.css +0 -85
  220. package/components/accordion/snice-accordion-item.ts +0 -226
  221. package/components/accordion/snice-accordion.css +0 -31
  222. package/components/accordion/snice-accordion.ts +0 -182
  223. package/components/accordion/snice-accordion.types.ts +0 -32
  224. package/components/alert/demo.html +0 -445
  225. package/components/alert/snice-alert.css +0 -195
  226. package/components/alert/snice-alert.ts +0 -141
  227. package/components/avatar/demo.html +0 -598
  228. package/components/avatar/snice-avatar.css +0 -131
  229. package/components/avatar/snice-avatar.ts +0 -136
  230. package/components/avatar/snice-avatar.types.ts +0 -13
  231. package/components/badge/demo.html +0 -523
  232. package/components/badge/snice-badge.css +0 -161
  233. package/components/badge/snice-badge.ts +0 -117
  234. package/components/breadcrumbs/demo.html +0 -404
  235. package/components/breadcrumbs/snice-breadcrumbs.css +0 -133
  236. package/components/breadcrumbs/snice-breadcrumbs.ts +0 -191
  237. package/components/breadcrumbs/snice-breadcrumbs.types.ts +0 -26
  238. package/components/breadcrumbs/snice-crumb.ts +0 -26
  239. package/components/button/demo.html +0 -42
  240. package/components/button/snice-button.css +0 -230
  241. package/components/button/snice-button.ts +0 -169
  242. package/components/button/snice-button.types.ts +0 -25
  243. package/components/card/demo.html +0 -525
  244. package/components/card/snice-card.css +0 -140
  245. package/components/card/snice-card.ts +0 -102
  246. package/components/checkbox/demo.html +0 -253
  247. package/components/checkbox/snice-checkbox.css +0 -164
  248. package/components/checkbox/snice-checkbox.ts +0 -223
  249. package/components/checkbox/snice-checkbox.types.ts +0 -22
  250. package/components/chip/demo.html +0 -383
  251. package/components/chip/snice-chip.css +0 -195
  252. package/components/chip/snice-chip.ts +0 -139
  253. package/components/chip/snice-chip.types.ts +0 -15
  254. package/components/date-picker/README.md +0 -233
  255. package/components/date-picker/demo.html +0 -191
  256. package/components/date-picker/snice-date-picker.css +0 -330
  257. package/components/date-picker/snice-date-picker.ts +0 -777
  258. package/components/date-picker/snice-date-picker.types.ts +0 -83
  259. package/components/divider/demo.html +0 -233
  260. package/components/divider/snice-divider.css +0 -155
  261. package/components/divider/snice-divider.ts +0 -69
  262. package/components/drawer/demo.html +0 -328
  263. package/components/drawer/snice-drawer.css +0 -476
  264. package/components/drawer/snice-drawer.ts +0 -287
  265. package/components/drawer/snice-drawer.types.ts +0 -17
  266. package/components/global.d.ts +0 -14
  267. package/components/input/demo.html +0 -303
  268. package/components/input/snice-input.css +0 -257
  269. package/components/input/snice-input.ts +0 -442
  270. package/components/input/snice-input.types.ts +0 -59
  271. package/components/input/test.html +0 -77
  272. package/components/layout/README.md +0 -260
  273. package/components/layout/demo.html +0 -538
  274. package/components/layout/snice-layout-blog.css +0 -129
  275. package/components/layout/snice-layout-blog.ts +0 -48
  276. package/components/layout/snice-layout-card.css +0 -104
  277. package/components/layout/snice-layout-card.ts +0 -35
  278. package/components/layout/snice-layout-centered.css +0 -51
  279. package/components/layout/snice-layout-centered.ts +0 -22
  280. package/components/layout/snice-layout-dashboard.css +0 -98
  281. package/components/layout/snice-layout-dashboard.ts +0 -45
  282. package/components/layout/snice-layout-fullscreen.css +0 -72
  283. package/components/layout/snice-layout-fullscreen.ts +0 -34
  284. package/components/layout/snice-layout-landing.css +0 -92
  285. package/components/layout/snice-layout-landing.ts +0 -47
  286. package/components/layout/snice-layout-minimal.css +0 -16
  287. package/components/layout/snice-layout-minimal.ts +0 -19
  288. package/components/layout/snice-layout-sidebar.css +0 -117
  289. package/components/layout/snice-layout-sidebar.ts +0 -48
  290. package/components/layout/snice-layout-split.css +0 -103
  291. package/components/layout/snice-layout-split.ts +0 -29
  292. package/components/layout/snice-layout.css +0 -72
  293. package/components/layout/snice-layout.ts +0 -35
  294. package/components/login/demo-auth-controller.ts +0 -185
  295. package/components/login/demo.html +0 -470
  296. package/components/login/snice-login.css +0 -204
  297. package/components/login/snice-login.ts +0 -326
  298. package/components/login/snice-login.types.ts +0 -29
  299. package/components/modal/demo.html +0 -291
  300. package/components/modal/snice-modal.css +0 -203
  301. package/components/modal/snice-modal.ts +0 -233
  302. package/components/modal/snice-modal.types.ts +0 -21
  303. package/components/pagination/demo.html +0 -395
  304. package/components/pagination/snice-pagination.ts +0 -333
  305. package/components/pagination/snice-pagination.types.ts +0 -21
  306. package/components/progress/demo.html +0 -510
  307. package/components/progress/snice-progress.css +0 -267
  308. package/components/progress/snice-progress.ts +0 -247
  309. package/components/progress/snice-progress.types.ts +0 -19
  310. package/components/radio/demo.html +0 -287
  311. package/components/radio/snice-radio.css +0 -171
  312. package/components/radio/snice-radio.ts +0 -218
  313. package/components/radio/snice-radio.types.ts +0 -21
  314. package/components/select/demo.html +0 -511
  315. package/components/select/snice-option.ts +0 -52
  316. package/components/select/snice-select.css +0 -392
  317. package/components/select/snice-select.ts +0 -796
  318. package/components/select/snice-select.types.ts +0 -55
  319. package/components/skeleton/demo.html +0 -514
  320. package/components/skeleton/snice-skeleton.css +0 -109
  321. package/components/skeleton/snice-skeleton.ts +0 -126
  322. package/components/switch/demo.html +0 -284
  323. package/components/switch/snice-switch.css +0 -221
  324. package/components/switch/snice-switch.ts +0 -229
  325. package/components/switch/snice-switch.types.ts +0 -23
  326. package/components/symbols.ts +0 -23
  327. package/components/table/demo-table-controller.ts +0 -100
  328. package/components/table/demo.html +0 -480
  329. package/components/table/snice-cell-boolean.ts +0 -112
  330. package/components/table/snice-cell-date.ts +0 -210
  331. package/components/table/snice-cell-duration.ts +0 -91
  332. package/components/table/snice-cell-filesize.ts +0 -90
  333. package/components/table/snice-cell-number.ts +0 -165
  334. package/components/table/snice-cell-progress.ts +0 -83
  335. package/components/table/snice-cell-rating.ts +0 -82
  336. package/components/table/snice-cell-sparkline.ts +0 -253
  337. package/components/table/snice-cell-text.ts +0 -125
  338. package/components/table/snice-cell.css +0 -296
  339. package/components/table/snice-cell.ts +0 -473
  340. package/components/table/snice-column.ts +0 -353
  341. package/components/table/snice-header.css +0 -243
  342. package/components/table/snice-header.ts +0 -261
  343. package/components/table/snice-progress.ts +0 -66
  344. package/components/table/snice-rating.ts +0 -45
  345. package/components/table/snice-row.css +0 -255
  346. package/components/table/snice-row.ts +0 -331
  347. package/components/table/snice-table.css +0 -241
  348. package/components/table/snice-table.ts +0 -737
  349. package/components/table/snice-table.types.ts +0 -158
  350. package/components/tabs/demo.html +0 -487
  351. package/components/tabs/snice-tab-panel.css +0 -264
  352. package/components/tabs/snice-tab-panel.ts +0 -47
  353. package/components/tabs/snice-tab.css +0 -96
  354. package/components/tabs/snice-tab.ts +0 -65
  355. package/components/tabs/snice-tabs.css +0 -189
  356. package/components/tabs/snice-tabs.ts +0 -332
  357. package/components/tabs/snice-tabs.types.ts +0 -28
  358. package/components/theme/theme.css +0 -234
  359. package/components/toast/demo.html +0 -329
  360. package/components/toast/snice-toast-container.ts +0 -256
  361. package/components/toast/snice-toast.css +0 -213
  362. package/components/toast/snice-toast.ts +0 -276
  363. package/components/toast/snice-toast.types.ts +0 -35
  364. package/components/tooltip/demo.html +0 -350
  365. package/components/tooltip/snice-tooltip-portal.css +0 -79
  366. package/components/tooltip/snice-tooltip.css +0 -117
  367. package/components/tooltip/snice-tooltip.ts +0 -612
  368. package/components/tooltip/snice-tooltip.types.ts +0 -32
  369. package/components/transitions.ts +0 -94
  370. package/components/tsconfig.json +0 -18
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
- }