snice 1.14.2 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (311) hide show
  1. package/bin/templates/base/tsconfig.json +5 -4
  2. package/components/accordion/demo.html +403 -0
  3. package/components/alert/demo.html +445 -0
  4. package/components/avatar/demo.html +598 -0
  5. package/components/badge/demo.html +523 -0
  6. package/components/breadcrumbs/demo.html +404 -0
  7. package/components/button/demo.html +42 -0
  8. package/components/card/demo.html +525 -0
  9. package/components/checkbox/demo.html +253 -0
  10. package/components/chip/demo.html +383 -0
  11. package/components/date-picker/demo.html +191 -0
  12. package/components/divider/demo.html +233 -0
  13. package/components/drawer/demo.html +328 -0
  14. package/components/input/demo.html +303 -0
  15. package/components/input/test.html +77 -0
  16. package/components/layout/demo.html +538 -0
  17. package/components/login/demo-auth-controller.ts +185 -0
  18. package/components/login/demo.html +470 -0
  19. package/components/login/snice-login.ts +2 -2
  20. package/components/modal/demo.html +291 -0
  21. package/components/pagination/demo.html +395 -0
  22. package/components/progress/demo.html +510 -0
  23. package/components/radio/demo.html +287 -0
  24. package/components/select/demo.html +511 -0
  25. package/components/skeleton/demo.html +514 -0
  26. package/components/switch/demo.html +284 -0
  27. package/components/table/demo-table-controller.ts +100 -0
  28. package/components/table/demo.html +480 -0
  29. package/components/table/snice-table.ts +2 -2
  30. package/components/tabs/demo.html +487 -0
  31. package/components/toast/demo.html +329 -0
  32. package/components/tooltip/demo.html +350 -0
  33. package/dist/index.cjs +441 -329
  34. package/dist/index.cjs.map +1 -1
  35. package/dist/index.cjs.min.map +1 -1
  36. package/dist/index.esm.js +441 -329
  37. package/dist/index.esm.js.map +1 -1
  38. package/dist/index.esm.min.js +3 -3
  39. package/dist/index.esm.min.js.map +1 -1
  40. package/dist/index.iife.js +441 -329
  41. package/dist/index.iife.js.map +1 -1
  42. package/dist/index.iife.min.js +3 -3
  43. package/dist/index.iife.min.js.map +1 -1
  44. package/dist/symbols.esm.js +1 -1
  45. package/dist/transitions.esm.js +1 -1
  46. package/dist/types/controller.d.ts +1 -1
  47. package/dist/types/element.d.ts +10 -10
  48. package/dist/types/events.d.ts +2 -2
  49. package/dist/types/index.d.ts +1 -1
  50. package/dist/types/observe.d.ts +1 -1
  51. package/dist/types/request-response.d.ts +2 -3
  52. package/dist/types/router.d.ts +1 -1
  53. package/package.json +9 -10
  54. package/dist/components/accordion/snice-accordion-item.d.ts +0 -25
  55. package/dist/components/accordion/snice-accordion-item.js +0 -260
  56. package/dist/components/accordion/snice-accordion-item.js.map +0 -1
  57. package/dist/components/accordion/snice-accordion.d.ts +0 -28
  58. package/dist/components/accordion/snice-accordion.js +0 -221
  59. package/dist/components/accordion/snice-accordion.js.map +0 -1
  60. package/dist/components/accordion/snice-accordion.types.d.ts +0 -29
  61. package/dist/components/accordion/snice-accordion.types.js +0 -2
  62. package/dist/components/accordion/snice-accordion.types.js.map +0 -1
  63. package/dist/components/alert/snice-alert.d.ts +0 -26
  64. package/dist/components/alert/snice-alert.js +0 -191
  65. package/dist/components/alert/snice-alert.js.map +0 -1
  66. package/dist/components/alert/snice-alert.types.d.ts +0 -11
  67. package/dist/components/alert/snice-alert.types.js +0 -2
  68. package/dist/components/alert/snice-alert.types.js.map +0 -1
  69. package/dist/components/avatar/snice-avatar.d.ts +0 -24
  70. package/dist/components/avatar/snice-avatar.js +0 -177
  71. package/dist/components/avatar/snice-avatar.js.map +0 -1
  72. package/dist/components/avatar/snice-avatar.types.d.ts +0 -12
  73. package/dist/components/avatar/snice-avatar.types.js +0 -2
  74. package/dist/components/avatar/snice-avatar.types.js.map +0 -1
  75. package/dist/components/badge/snice-badge.d.ts +0 -25
  76. package/dist/components/badge/snice-badge.js +0 -157
  77. package/dist/components/badge/snice-badge.js.map +0 -1
  78. package/dist/components/badge/snice-badge.types.d.ts +0 -15
  79. package/dist/components/badge/snice-badge.types.js +0 -2
  80. package/dist/components/badge/snice-badge.types.js.map +0 -1
  81. package/dist/components/breadcrumbs/snice-breadcrumbs.d.ts +0 -27
  82. package/dist/components/breadcrumbs/snice-breadcrumbs.js +0 -212
  83. package/dist/components/breadcrumbs/snice-breadcrumbs.js.map +0 -1
  84. package/dist/components/breadcrumbs/snice-breadcrumbs.types.d.ts +0 -23
  85. package/dist/components/breadcrumbs/snice-breadcrumbs.types.js +0 -2
  86. package/dist/components/breadcrumbs/snice-breadcrumbs.types.js.map +0 -1
  87. package/dist/components/breadcrumbs/snice-crumb.d.ts +0 -9
  88. package/dist/components/breadcrumbs/snice-crumb.js +0 -50
  89. package/dist/components/breadcrumbs/snice-crumb.js.map +0 -1
  90. package/dist/components/button/snice-button.d.ts +0 -32
  91. package/dist/components/button/snice-button.js +0 -212
  92. package/dist/components/button/snice-button.js.map +0 -1
  93. package/dist/components/button/snice-button.types.d.ts +0 -23
  94. package/dist/components/button/snice-button.types.js +0 -2
  95. package/dist/components/button/snice-button.types.js.map +0 -1
  96. package/dist/components/card/snice-card.d.ts +0 -19
  97. package/dist/components/card/snice-card.js +0 -132
  98. package/dist/components/card/snice-card.js.map +0 -1
  99. package/dist/components/card/snice-card.types.d.ts +0 -9
  100. package/dist/components/card/snice-card.types.js +0 -2
  101. package/dist/components/card/snice-card.types.js.map +0 -1
  102. package/dist/components/checkbox/snice-checkbox.d.ts +0 -34
  103. package/dist/components/checkbox/snice-checkbox.js +0 -289
  104. package/dist/components/checkbox/snice-checkbox.js.map +0 -1
  105. package/dist/components/checkbox/snice-checkbox.types.d.ts +0 -20
  106. package/dist/components/checkbox/snice-checkbox.types.js +0 -2
  107. package/dist/components/checkbox/snice-checkbox.types.js.map +0 -1
  108. package/dist/components/chip/snice-chip.d.ts +0 -28
  109. package/dist/components/chip/snice-chip.js +0 -203
  110. package/dist/components/chip/snice-chip.js.map +0 -1
  111. package/dist/components/chip/snice-chip.types.d.ts +0 -14
  112. package/dist/components/chip/snice-chip.types.js +0 -2
  113. package/dist/components/chip/snice-chip.types.js.map +0 -1
  114. package/dist/components/date-picker/snice-date-picker.d.ts +0 -82
  115. package/dist/components/date-picker/snice-date-picker.js +0 -880
  116. package/dist/components/date-picker/snice-date-picker.js.map +0 -1
  117. package/dist/components/date-picker/snice-date-picker.types.d.ts +0 -71
  118. package/dist/components/date-picker/snice-date-picker.types.js +0 -2
  119. package/dist/components/date-picker/snice-date-picker.types.js.map +0 -1
  120. package/dist/components/divider/snice-divider.d.ts +0 -17
  121. package/dist/components/divider/snice-divider.js +0 -111
  122. package/dist/components/divider/snice-divider.js.map +0 -1
  123. package/dist/components/divider/snice-divider.types.d.ts +0 -14
  124. package/dist/components/divider/snice-divider.types.js +0 -2
  125. package/dist/components/divider/snice-divider.types.js.map +0 -1
  126. package/dist/components/drawer/snice-drawer.d.ts +0 -37
  127. package/dist/components/drawer/snice-drawer.js +0 -335
  128. package/dist/components/drawer/snice-drawer.js.map +0 -1
  129. package/dist/components/drawer/snice-drawer.types.d.ts +0 -16
  130. package/dist/components/drawer/snice-drawer.types.js +0 -2
  131. package/dist/components/drawer/snice-drawer.types.js.map +0 -1
  132. package/dist/components/input/snice-input.d.ts +0 -65
  133. package/dist/components/input/snice-input.js +0 -603
  134. package/dist/components/input/snice-input.js.map +0 -1
  135. package/dist/components/input/snice-input.types.d.ts +0 -53
  136. package/dist/components/input/snice-input.types.js +0 -2
  137. package/dist/components/input/snice-input.types.js.map +0 -1
  138. package/dist/components/layout/snice-layout-blog.d.ts +0 -4
  139. package/dist/components/layout/snice-layout-blog.js +0 -56
  140. package/dist/components/layout/snice-layout-blog.js.map +0 -1
  141. package/dist/components/layout/snice-layout-card.d.ts +0 -6
  142. package/dist/components/layout/snice-layout-card.js +0 -53
  143. package/dist/components/layout/snice-layout-card.js.map +0 -1
  144. package/dist/components/layout/snice-layout-centered.d.ts +0 -5
  145. package/dist/components/layout/snice-layout-centered.js +0 -38
  146. package/dist/components/layout/snice-layout-centered.js.map +0 -1
  147. package/dist/components/layout/snice-layout-dashboard.d.ts +0 -4
  148. package/dist/components/layout/snice-layout-dashboard.js +0 -53
  149. package/dist/components/layout/snice-layout-dashboard.js.map +0 -1
  150. package/dist/components/layout/snice-layout-fullscreen.d.ts +0 -5
  151. package/dist/components/layout/snice-layout-fullscreen.js +0 -50
  152. package/dist/components/layout/snice-layout-fullscreen.js.map +0 -1
  153. package/dist/components/layout/snice-layout-landing.d.ts +0 -4
  154. package/dist/components/layout/snice-layout-landing.js +0 -55
  155. package/dist/components/layout/snice-layout-landing.js.map +0 -1
  156. package/dist/components/layout/snice-layout-minimal.d.ts +0 -4
  157. package/dist/components/layout/snice-layout-minimal.js +0 -27
  158. package/dist/components/layout/snice-layout-minimal.js.map +0 -1
  159. package/dist/components/layout/snice-layout-sidebar.d.ts +0 -5
  160. package/dist/components/layout/snice-layout-sidebar.js +0 -64
  161. package/dist/components/layout/snice-layout-sidebar.js.map +0 -1
  162. package/dist/components/layout/snice-layout-split.d.ts +0 -6
  163. package/dist/components/layout/snice-layout-split.js +0 -47
  164. package/dist/components/layout/snice-layout-split.js.map +0 -1
  165. package/dist/components/layout/snice-layout.d.ts +0 -4
  166. package/dist/components/layout/snice-layout.js +0 -43
  167. package/dist/components/layout/snice-layout.js.map +0 -1
  168. package/dist/components/layout/snice-layout.types.d.ts +0 -3
  169. package/dist/components/layout/snice-layout.types.js +0 -2
  170. package/dist/components/layout/snice-layout.types.js.map +0 -1
  171. package/dist/components/login/snice-login.d.ts +0 -45
  172. package/dist/components/login/snice-login.js +0 -385
  173. package/dist/components/login/snice-login.js.map +0 -1
  174. package/dist/components/login/snice-login.types.d.ts +0 -31
  175. package/dist/components/login/snice-login.types.js +0 -2
  176. package/dist/components/login/snice-login.types.js.map +0 -1
  177. package/dist/components/modal/snice-modal.d.ts +0 -32
  178. package/dist/components/modal/snice-modal.js +0 -288
  179. package/dist/components/modal/snice-modal.js.map +0 -1
  180. package/dist/components/modal/snice-modal.types.d.ts +0 -18
  181. package/dist/components/modal/snice-modal.types.js +0 -2
  182. package/dist/components/modal/snice-modal.types.js.map +0 -1
  183. package/dist/components/pagination/snice-pagination.d.ts +0 -26
  184. package/dist/components/pagination/snice-pagination.js +0 -373
  185. package/dist/components/pagination/snice-pagination.js.map +0 -1
  186. package/dist/components/pagination/snice-pagination.types.d.ts +0 -18
  187. package/dist/components/pagination/snice-pagination.types.js +0 -2
  188. package/dist/components/pagination/snice-pagination.types.js.map +0 -1
  189. package/dist/components/progress/snice-progress.d.ts +0 -35
  190. package/dist/components/progress/snice-progress.js +0 -295
  191. package/dist/components/progress/snice-progress.js.map +0 -1
  192. package/dist/components/progress/snice-progress.types.d.ts +0 -18
  193. package/dist/components/progress/snice-progress.types.js +0 -2
  194. package/dist/components/progress/snice-progress.types.js.map +0 -1
  195. package/dist/components/radio/snice-radio.d.ts +0 -33
  196. package/dist/components/radio/snice-radio.js +0 -286
  197. package/dist/components/radio/snice-radio.js.map +0 -1
  198. package/dist/components/radio/snice-radio.types.d.ts +0 -19
  199. package/dist/components/radio/snice-radio.types.js +0 -2
  200. package/dist/components/radio/snice-radio.types.js.map +0 -1
  201. package/dist/components/select/snice-option.d.ts +0 -17
  202. package/dist/components/select/snice-option.js +0 -77
  203. package/dist/components/select/snice-option.js.map +0 -1
  204. package/dist/components/select/snice-option.types.d.ts +0 -14
  205. package/dist/components/select/snice-option.types.js +0 -2
  206. package/dist/components/select/snice-option.types.js.map +0 -1
  207. package/dist/components/select/snice-select.d.ts +0 -89
  208. package/dist/components/select/snice-select.js +0 -900
  209. package/dist/components/select/snice-select.js.map +0 -1
  210. package/dist/components/select/snice-select.types.d.ts +0 -49
  211. package/dist/components/select/snice-select.types.js +0 -2
  212. package/dist/components/select/snice-select.types.js.map +0 -1
  213. package/dist/components/skeleton/snice-skeleton.d.ts +0 -16
  214. package/dist/components/skeleton/snice-skeleton.js +0 -159
  215. package/dist/components/skeleton/snice-skeleton.js.map +0 -1
  216. package/dist/components/skeleton/snice-skeleton.types.d.ts +0 -10
  217. package/dist/components/skeleton/snice-skeleton.types.js +0 -2
  218. package/dist/components/skeleton/snice-skeleton.types.js.map +0 -1
  219. package/dist/components/switch/snice-switch.d.ts +0 -38
  220. package/dist/components/switch/snice-switch.js +0 -309
  221. package/dist/components/switch/snice-switch.js.map +0 -1
  222. package/dist/components/switch/snice-switch.types.d.ts +0 -21
  223. package/dist/components/switch/snice-switch.types.js +0 -2
  224. package/dist/components/switch/snice-switch.types.js.map +0 -1
  225. package/dist/components/symbols.d.ts +0 -1
  226. package/dist/components/symbols.js +0 -20
  227. package/dist/components/symbols.js.map +0 -1
  228. package/dist/components/table/snice-cell-boolean.d.ts +0 -21
  229. package/dist/components/table/snice-cell-boolean.js +0 -152
  230. package/dist/components/table/snice-cell-boolean.js.map +0 -1
  231. package/dist/components/table/snice-cell-date.d.ts +0 -24
  232. package/dist/components/table/snice-cell-date.js +0 -240
  233. package/dist/components/table/snice-cell-date.js.map +0 -1
  234. package/dist/components/table/snice-cell-duration.d.ts +0 -16
  235. package/dist/components/table/snice-cell-duration.js +0 -123
  236. package/dist/components/table/snice-cell-duration.js.map +0 -1
  237. package/dist/components/table/snice-cell-filesize.d.ts +0 -16
  238. package/dist/components/table/snice-cell-filesize.js +0 -119
  239. package/dist/components/table/snice-cell-filesize.js.map +0 -1
  240. package/dist/components/table/snice-cell-number.d.ts +0 -23
  241. package/dist/components/table/snice-cell-number.js +0 -202
  242. package/dist/components/table/snice-cell-number.js.map +0 -1
  243. package/dist/components/table/snice-cell-progress.d.ts +0 -17
  244. package/dist/components/table/snice-cell-progress.js +0 -114
  245. package/dist/components/table/snice-cell-progress.js.map +0 -1
  246. package/dist/components/table/snice-cell-rating.d.ts +0 -17
  247. package/dist/components/table/snice-cell-rating.js +0 -113
  248. package/dist/components/table/snice-cell-rating.js.map +0 -1
  249. package/dist/components/table/snice-cell-sparkline.d.ts +0 -29
  250. package/dist/components/table/snice-cell-sparkline.js +0 -290
  251. package/dist/components/table/snice-cell-sparkline.js.map +0 -1
  252. package/dist/components/table/snice-cell-text.d.ts +0 -19
  253. package/dist/components/table/snice-cell-text.js +0 -153
  254. package/dist/components/table/snice-cell-text.js.map +0 -1
  255. package/dist/components/table/snice-cell.d.ts +0 -32
  256. package/dist/components/table/snice-cell.js +0 -451
  257. package/dist/components/table/snice-cell.js.map +0 -1
  258. package/dist/components/table/snice-column.d.ts +0 -62
  259. package/dist/components/table/snice-column.js +0 -440
  260. package/dist/components/table/snice-column.js.map +0 -1
  261. package/dist/components/table/snice-header.d.ts +0 -33
  262. package/dist/components/table/snice-header.js +0 -303
  263. package/dist/components/table/snice-header.js.map +0 -1
  264. package/dist/components/table/snice-progress.d.ts +0 -10
  265. package/dist/components/table/snice-progress.js +0 -91
  266. package/dist/components/table/snice-progress.js.map +0 -1
  267. package/dist/components/table/snice-rating.d.ts +0 -9
  268. package/dist/components/table/snice-rating.js +0 -68
  269. package/dist/components/table/snice-rating.js.map +0 -1
  270. package/dist/components/table/snice-row.d.ts +0 -43
  271. package/dist/components/table/snice-row.js +0 -365
  272. package/dist/components/table/snice-row.js.map +0 -1
  273. package/dist/components/table/snice-table.d.ts +0 -69
  274. package/dist/components/table/snice-table.js +0 -814
  275. package/dist/components/table/snice-table.js.map +0 -1
  276. package/dist/components/table/snice-table.types.d.ts +0 -137
  277. package/dist/components/table/snice-table.types.js +0 -2
  278. package/dist/components/table/snice-table.types.js.map +0 -1
  279. package/dist/components/tabs/snice-tab-panel.d.ts +0 -12
  280. package/dist/components/tabs/snice-tab-panel.js +0 -78
  281. package/dist/components/tabs/snice-tab-panel.js.map +0 -1
  282. package/dist/components/tabs/snice-tab.d.ts +0 -13
  283. package/dist/components/tabs/snice-tab.js +0 -90
  284. package/dist/components/tabs/snice-tab.js.map +0 -1
  285. package/dist/components/tabs/snice-tabs.d.ts +0 -34
  286. package/dist/components/tabs/snice-tabs.js +0 -367
  287. package/dist/components/tabs/snice-tabs.js.map +0 -1
  288. package/dist/components/tabs/snice-tabs.types.d.ts +0 -23
  289. package/dist/components/tabs/snice-tabs.types.js +0 -2
  290. package/dist/components/tabs/snice-tabs.types.js.map +0 -1
  291. package/dist/components/toast/snice-toast-container.d.ts +0 -25
  292. package/dist/components/toast/snice-toast-container.js +0 -251
  293. package/dist/components/toast/snice-toast-container.js.map +0 -1
  294. package/dist/components/toast/snice-toast.d.ts +0 -23
  295. package/dist/components/toast/snice-toast.js +0 -316
  296. package/dist/components/toast/snice-toast.js.map +0 -1
  297. package/dist/components/toast/snice-toast.types.d.ts +0 -30
  298. package/dist/components/toast/snice-toast.types.js +0 -2
  299. package/dist/components/toast/snice-toast.types.js.map +0 -1
  300. package/dist/components/tooltip/snice-tooltip.d.ts +0 -50
  301. package/dist/components/tooltip/snice-tooltip.js +0 -656
  302. package/dist/components/tooltip/snice-tooltip.js.map +0 -1
  303. package/dist/components/tooltip/snice-tooltip.types.d.ts +0 -18
  304. package/dist/components/tooltip/snice-tooltip.types.js +0 -2
  305. package/dist/components/tooltip/snice-tooltip.types.js.map +0 -1
  306. package/dist/components/transitions.d.ts +0 -11
  307. package/dist/components/transitions.js +0 -69
  308. package/dist/components/transitions.js.map +0 -1
  309. package/dist/index.cjs.min +0 -15
  310. package/dist/symbols.cjs +0 -103
  311. package/dist/transitions.cjs +0 -219
package/components/tabs/demo.html ADDED
@@ -0,0 +1,487 @@
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>Tabs Demo</title>
7
+ <link rel="stylesheet" href="../theme/theme.css">
8
+ <style>
9
+ body {
10
+ padding: 40px;
11
+ font-family: var(--snice-font-family);
12
+ background: var(--snice-color-background);
13
+ color: var(--snice-color-text);
14
+ }
15
+
16
+ .section {
17
+ margin-bottom: 60px;
18
+ }
19
+
20
+ h2 {
21
+ color: var(--snice-color-text);
22
+ margin-bottom: 20px;
23
+ font-size: var(--snice-font-size-2xl);
24
+ }
25
+
26
+ h3 {
27
+ color: var(--snice-color-text-secondary);
28
+ margin-bottom: 16px;
29
+ font-size: var(--snice-font-size-lg);
30
+ }
31
+
32
+ .demo-content {
33
+ padding: var(--snice-spacing-md);
34
+ }
35
+
36
+ .demo-content h4 {
37
+ margin-top: 0;
38
+ color: var(--snice-color-text);
39
+ }
40
+
41
+ .demo-content p {
42
+ color: var(--snice-color-text-secondary);
43
+ line-height: var(--snice-line-height-normal);
44
+ }
45
+
46
+ .icon {
47
+ width: 16px;
48
+ height: 16px;
49
+ margin-right: 4px;
50
+ }
51
+
52
+ .controls {
53
+ margin-bottom: 20px;
54
+ display: flex;
55
+ gap: 10px;
56
+ align-items: center;
57
+ }
58
+
59
+ button {
60
+ padding: 8px 16px;
61
+ background: var(--snice-color-primary);
62
+ color: var(--snice-color-text-inverse);
63
+ border: none;
64
+ border-radius: var(--snice-border-radius-md);
65
+ font-family: var(--snice-font-family);
66
+ font-size: var(--snice-font-size-md);
67
+ cursor: pointer;
68
+ transition: background-color var(--snice-transition-fast) ease;
69
+ }
70
+
71
+ button:hover {
72
+ background: var(--snice-color-primary-hover);
73
+ }
74
+
75
+ select {
76
+ padding: 8px;
77
+ font-family: var(--snice-font-family);
78
+ font-size: var(--snice-font-size-md);
79
+ border: 1px solid var(--snice-color-border);
80
+ border-radius: var(--snice-border-radius-md);
81
+ background: var(--snice-color-background);
82
+ color: var(--snice-color-text);
83
+ }
84
+ </style>
85
+ </head>
86
+ <body>
87
+ <h2>Tabs Component Demo</h2>
88
+
89
+ <div class="section">
90
+ <h3>Basic Tabs (with Fade Transition)</h3>
91
+ <snice-tabs transition="fade">
92
+ <snice-tab slot="nav">General</snice-tab>
93
+ <snice-tab slot="nav">Account</snice-tab>
94
+ <snice-tab slot="nav">Security</snice-tab>
95
+ <snice-tab slot="nav">Notifications</snice-tab>
96
+
97
+ <snice-tab-panel name="general">
98
+ <div class="demo-content">
99
+ <h4>General Settings</h4>
100
+ <p>Configure your general application preferences and display options.</p>
101
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
102
+ </div>
103
+ </snice-tab-panel>
104
+
105
+ <snice-tab-panel name="account">
106
+ <div class="demo-content">
107
+ <h4>Account Settings</h4>
108
+ <p>Manage your account information, profile details, and preferences.</p>
109
+ <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
110
+ </div>
111
+ </snice-tab-panel>
112
+
113
+ <snice-tab-panel name="security">
114
+ <div class="demo-content">
115
+ <h4>Security Settings</h4>
116
+ <p>Configure security options, two-factor authentication, and access controls.</p>
117
+ <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
118
+ </div>
119
+ </snice-tab-panel>
120
+
121
+ <snice-tab-panel name="notifications">
122
+ <div class="demo-content">
123
+ <h4>Notification Settings</h4>
124
+ <p>Manage your notification preferences and alert configurations.</p>
125
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
126
+ </div>
127
+ </snice-tab-panel>
128
+ </snice-tabs>
129
+ </div>
130
+
131
+ <div class="section">
132
+ <h3>Tabs with Icons (Scale Transition)</h3>
133
+ <snice-tabs transition="scale">
134
+ <snice-tab slot="nav">
135
+ <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
136
+ <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
137
+ </svg>
138
+ Home
139
+ </snice-tab>
140
+ <snice-tab slot="nav">
141
+ <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
142
+ <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
143
+ </svg>
144
+ Profile
145
+ </snice-tab>
146
+ <snice-tab slot="nav">
147
+ <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
148
+ <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
149
+ </svg>
150
+ Favorites
151
+ </snice-tab>
152
+ <snice-tab slot="nav">
153
+ <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
154
+ <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1.81.45 1.61 1.67 1.61 1.16 0 1.6-.64 1.6-1.46 0-.84-.68-1.22-1.88-1.54-2.29-.61-3.05-1.86-3.05-3.27 0-1.28.89-2.56 2.81-2.93V4.5h2.67v2.52c1.33.31 2.6 1.16 2.76 2.86h-1.96c-.09-.52-.39-1.34-1.47-1.34-1.09 0-1.5.71-1.5 1.34 0 .71.52 1.09 2.05 1.52 2.18.58 2.88 1.7 2.88 3.27-.01 1.71-1.37 2.85-3.19 3.42z"/>
155
+ </svg>
156
+ Settings
157
+ </snice-tab>
158
+
159
+ <snice-tab-panel>
160
+ <div class="demo-content">
161
+ <h4>Home</h4>
162
+ <p>Welcome to your dashboard. Here you can see an overview of your recent activity.</p>
163
+ </div>
164
+ </snice-tab-panel>
165
+
166
+ <snice-tab-panel>
167
+ <div class="demo-content">
168
+ <h4>Profile</h4>
169
+ <p>View and edit your profile information.</p>
170
+ </div>
171
+ </snice-tab-panel>
172
+
173
+ <snice-tab-panel>
174
+ <div class="demo-content">
175
+ <h4>Favorites</h4>
176
+ <p>Your saved items and bookmarks appear here.</p>
177
+ </div>
178
+ </snice-tab-panel>
179
+
180
+ <snice-tab-panel>
181
+ <div class="demo-content">
182
+ <h4>Settings</h4>
183
+ <p>Configure your application preferences.</p>
184
+ </div>
185
+ </snice-tab-panel>
186
+ </snice-tabs>
187
+ </div>
188
+
189
+ <div class="section">
190
+ <h3>Closable Tabs</h3>
191
+ <snice-tabs id="closable-tabs">
192
+ <snice-tab slot="nav" closable>Document 1</snice-tab>
193
+ <snice-tab slot="nav" closable>Document 2</snice-tab>
194
+ <snice-tab slot="nav" closable>Document 3</snice-tab>
195
+ <snice-tab slot="nav">Settings (Not Closable)</snice-tab>
196
+
197
+ <snice-tab-panel>
198
+ <div class="demo-content">
199
+ <h4>Document 1</h4>
200
+ <p>This tab can be closed using the X button.</p>
201
+ </div>
202
+ </snice-tab-panel>
203
+
204
+ <snice-tab-panel>
205
+ <div class="demo-content">
206
+ <h4>Document 2</h4>
207
+ <p>This tab can also be closed.</p>
208
+ </div>
209
+ </snice-tab-panel>
210
+
211
+ <snice-tab-panel>
212
+ <div class="demo-content">
213
+ <h4>Document 3</h4>
214
+ <p>Another closable tab.</p>
215
+ </div>
216
+ </snice-tab-panel>
217
+
218
+ <snice-tab-panel>
219
+ <div class="demo-content">
220
+ <h4>Settings</h4>
221
+ <p>This tab cannot be closed.</p>
222
+ </div>
223
+ </snice-tab-panel>
224
+ </snice-tabs>
225
+ </div>
226
+
227
+ <div class="section">
228
+ <h3>Disabled Tabs</h3>
229
+ <snice-tabs>
230
+ <snice-tab slot="nav">Active Tab</snice-tab>
231
+ <snice-tab slot="nav" disabled>Disabled Tab</snice-tab>
232
+ <snice-tab slot="nav">Another Active Tab</snice-tab>
233
+
234
+ <snice-tab-panel>
235
+ <div class="demo-content">
236
+ <h4>Active Content</h4>
237
+ <p>This tab is active and clickable.</p>
238
+ </div>
239
+ </snice-tab-panel>
240
+
241
+ <snice-tab-panel>
242
+ <div class="demo-content">
243
+ <h4>Disabled Content</h4>
244
+ <p>You shouldn't be able to see this content.</p>
245
+ </div>
246
+ </snice-tab-panel>
247
+
248
+ <snice-tab-panel>
249
+ <div class="demo-content">
250
+ <h4>Another Active Content</h4>
251
+ <p>This tab is also active and clickable.</p>
252
+ </div>
253
+ </snice-tab-panel>
254
+ </snice-tabs>
255
+ </div>
256
+
257
+ <div class="section">
258
+ <h3>Tab Placement</h3>
259
+
260
+ <div class="controls">
261
+ <label>Placement:</label>
262
+ <select id="placement-select">
263
+ <option value="top">Top</option>
264
+ <option value="bottom">Bottom</option>
265
+ <option value="start">Start (Left)</option>
266
+ <option value="end">End (Right)</option>
267
+ </select>
268
+ </div>
269
+
270
+ <snice-tabs id="placement-tabs" placement="top">
271
+ <snice-tab slot="nav">First</snice-tab>
272
+ <snice-tab slot="nav">Second</snice-tab>
273
+ <snice-tab slot="nav">Third</snice-tab>
274
+
275
+ <snice-tab-panel>
276
+ <div class="demo-content">
277
+ <h4>First Panel</h4>
278
+ <p>Tab placement can be changed dynamically.</p>
279
+ </div>
280
+ </snice-tab-panel>
281
+
282
+ <snice-tab-panel>
283
+ <div class="demo-content">
284
+ <h4>Second Panel</h4>
285
+ <p>Try changing the placement using the dropdown above.</p>
286
+ </div>
287
+ </snice-tab-panel>
288
+
289
+ <snice-tab-panel>
290
+ <div class="demo-content">
291
+ <h4>Third Panel</h4>
292
+ <p>Tabs can be positioned at top, bottom, left (start), or right (end).</p>
293
+ </div>
294
+ </snice-tab-panel>
295
+ </snice-tabs>
296
+ </div>
297
+
298
+ <div class="section">
299
+ <h3>Many Tabs with Scroll</h3>
300
+ <snice-tabs>
301
+ <snice-tab slot="nav">Tab 1</snice-tab>
302
+ <snice-tab slot="nav">Tab 2</snice-tab>
303
+ <snice-tab slot="nav">Tab 3</snice-tab>
304
+ <snice-tab slot="nav">Tab 4</snice-tab>
305
+ <snice-tab slot="nav">Tab 5</snice-tab>
306
+ <snice-tab slot="nav">Tab 6</snice-tab>
307
+ <snice-tab slot="nav">Tab 7</snice-tab>
308
+ <snice-tab slot="nav">Tab 8</snice-tab>
309
+ <snice-tab slot="nav">Tab 9</snice-tab>
310
+ <snice-tab slot="nav">Tab 10</snice-tab>
311
+ <snice-tab slot="nav">Tab 11</snice-tab>
312
+ <snice-tab slot="nav">Tab 12</snice-tab>
313
+ <snice-tab slot="nav">Tab 13</snice-tab>
314
+ <snice-tab slot="nav">Tab 14</snice-tab>
315
+ <snice-tab slot="nav">Tab 15</snice-tab>
316
+
317
+ <snice-tab-panel>
318
+ <div class="demo-content">
319
+ <h4>Content 1</h4>
320
+ <p>When there are many tabs, scroll buttons appear to navigate.</p>
321
+ </div>
322
+ </snice-tab-panel>
323
+
324
+ <snice-tab-panel>
325
+ <div class="demo-content">
326
+ <h4>Content 2</h4>
327
+ </div>
328
+ </snice-tab-panel>
329
+
330
+ <snice-tab-panel>
331
+ <div class="demo-content">
332
+ <h4>Content 3</h4>
333
+ </div>
334
+ </snice-tab-panel>
335
+
336
+ <snice-tab-panel>
337
+ <div class="demo-content">
338
+ <h4>Content 4</h4>
339
+ </div>
340
+ </snice-tab-panel>
341
+
342
+ <snice-tab-panel>
343
+ <div class="demo-content">
344
+ <h4>Content 5</h4>
345
+ </div>
346
+ </snice-tab-panel>
347
+
348
+ <snice-tab-panel>
349
+ <div class="demo-content">
350
+ <h4>Content 6</h4>
351
+ </div>
352
+ </snice-tab-panel>
353
+
354
+ <snice-tab-panel>
355
+ <div class="demo-content">
356
+ <h4>Content 7</h4>
357
+ </div>
358
+ </snice-tab-panel>
359
+
360
+ <snice-tab-panel>
361
+ <div class="demo-content">
362
+ <h4>Content 8</h4>
363
+ </div>
364
+ </snice-tab-panel>
365
+
366
+ <snice-tab-panel>
367
+ <div class="demo-content">
368
+ <h4>Content 9</h4>
369
+ </div>
370
+ </snice-tab-panel>
371
+
372
+ <snice-tab-panel>
373
+ <div class="demo-content">
374
+ <h4>Content 10</h4>
375
+ </div>
376
+ </snice-tab-panel>
377
+
378
+ <snice-tab-panel>
379
+ <div class="demo-content">
380
+ <h4>Content 11</h4>
381
+ </div>
382
+ </snice-tab-panel>
383
+
384
+ <snice-tab-panel>
385
+ <div class="demo-content">
386
+ <h4>Content 12</h4>
387
+ </div>
388
+ </snice-tab-panel>
389
+
390
+ <snice-tab-panel>
391
+ <div class="demo-content">
392
+ <h4>Content 13</h4>
393
+ </div>
394
+ </snice-tab-panel>
395
+
396
+ <snice-tab-panel>
397
+ <div class="demo-content">
398
+ <h4>Content 14</h4>
399
+ </div>
400
+ </snice-tab-panel>
401
+
402
+ <snice-tab-panel>
403
+ <div class="demo-content">
404
+ <h4>Content 15</h4>
405
+ </div>
406
+ </snice-tab-panel>
407
+ </snice-tabs>
408
+ </div>
409
+
410
+ <div class="section">
411
+ <h3>Programmatic Control (Slide Transition)</h3>
412
+
413
+ <div class="controls">
414
+ <button onclick="selectTab(0)">Select First</button>
415
+ <button onclick="selectTab(1)">Select Second</button>
416
+ <button onclick="selectTab(2)">Select Third</button>
417
+ </div>
418
+
419
+ <snice-tabs id="programmatic-tabs" transition="slide">
420
+ <snice-tab slot="nav">First</snice-tab>
421
+ <snice-tab slot="nav">Second</snice-tab>
422
+ <snice-tab slot="nav">Third</snice-tab>
423
+
424
+ <snice-tab-panel>
425
+ <div class="demo-content">
426
+ <h4>First Panel</h4>
427
+ <p>Use the buttons above to programmatically select tabs.</p>
428
+ </div>
429
+ </snice-tab-panel>
430
+
431
+ <snice-tab-panel>
432
+ <div class="demo-content">
433
+ <h4>Second Panel</h4>
434
+ <p>Tabs can be controlled via JavaScript.</p>
435
+ </div>
436
+ </snice-tab-panel>
437
+
438
+ <snice-tab-panel>
439
+ <div class="demo-content">
440
+ <h4>Third Panel</h4>
441
+ <p>This enables dynamic tab switching based on application logic.</p>
442
+ </div>
443
+ </snice-tab-panel>
444
+ </snice-tabs>
445
+ </div>
446
+
447
+ <script type="module">
448
+ import './snice-tabs.ts';
449
+ import './snice-tab.ts';
450
+ import './snice-tab-panel.ts';
451
+
452
+ // Placement control
453
+ document.getElementById('placement-select').addEventListener('change', (e) => {
454
+ const tabs = document.getElementById('placement-tabs');
455
+ tabs.placement = e.target.value;
456
+ });
457
+
458
+ // Programmatic control
459
+ window.selectTab = function(index) {
460
+ const tabs = document.getElementById('programmatic-tabs');
461
+ tabs.show(index);
462
+ };
463
+
464
+ // Listen for tab changes
465
+ document.querySelector('snice-tabs').addEventListener('@snice/tab-change', (e) => {
466
+ console.log('Tab changed:', e.detail);
467
+ });
468
+
469
+ // Handle closable tabs
470
+ document.getElementById('closable-tabs').addEventListener('@snice/close', (e) => {
471
+ const tab = e.detail.tab;
472
+ const tabs = tab.parentElement.parentElement;
473
+ const index = Array.from(tabs.querySelectorAll('snice-tab')).indexOf(tab);
474
+
475
+ // Remove tab and panel
476
+ tab.remove();
477
+ const panels = tabs.querySelectorAll('snice-tab-panel');
478
+ if (panels[index]) {
479
+ panels[index].remove();
480
+ }
481
+
482
+ // Reset tabs
483
+ tabs.setupTabs();
484
+ });
485
+ </script>
486
+ </body>
487
+ </html>