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/tooltip/demo.html DELETED
@@ -1,350 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Snice Tooltip Demo</title>
7
- <style>
8
- body {
9
- font-family: system-ui, -apple-system, sans-serif;
10
- padding: 40px;
11
- line-height: 1.6;
12
- background: #f5f5f5;
13
- }
14
-
15
- .container {
16
- max-width: 1200px;
17
- margin: 0 auto;
18
- background: white;
19
- padding: 40px;
20
- border-radius: 8px;
21
- box-shadow: 0 2px 8px rgba(0,0,0,0.1);
22
- }
23
-
24
- h1 {
25
- color: #333;
26
- border-bottom: 2px solid #e0e0e0;
27
- padding-bottom: 10px;
28
- }
29
-
30
- h2 {
31
- color: #555;
32
- margin-top: 30px;
33
- }
34
-
35
- .demo-section {
36
- margin: 30px 0;
37
- }
38
-
39
- .demo-grid {
40
- display: grid;
41
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
42
- gap: 20px;
43
- margin: 20px 0;
44
- }
45
-
46
- .demo-item {
47
- padding: 20px;
48
- background: #f8f8f8;
49
- border-radius: 4px;
50
- text-align: center;
51
- }
52
-
53
- button {
54
- padding: 8px 16px;
55
- background: #3b82f6;
56
- color: white;
57
- border: none;
58
- border-radius: 4px;
59
- cursor: pointer;
60
- font-size: 14px;
61
- }
62
-
63
- button:hover {
64
- background: #2563eb;
65
- }
66
-
67
- .edge-demo {
68
- position: relative;
69
- height: 300px;
70
- border: 2px dashed #ccc;
71
- border-radius: 4px;
72
- margin: 20px 0;
73
- }
74
-
75
- .edge-button {
76
- position: absolute;
77
- padding: 6px 12px;
78
- font-size: 12px;
79
- }
80
-
81
- .edge-button.top-left { top: 10px; left: 10px; }
82
- .edge-button.top-right { top: 10px; right: 10px; }
83
- .edge-button.bottom-left { bottom: 10px; left: 10px; }
84
- .edge-button.bottom-right { bottom: 10px; right: 10px; }
85
- .edge-button.center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
86
-
87
- .custom-tooltip {
88
- --tooltip-bg: #6366f1;
89
- --tooltip-color: white;
90
- --tooltip-radius: 12px;
91
- --tooltip-padding: 12px 16px;
92
- }
93
-
94
- .link {
95
- color: #3b82f6;
96
- text-decoration: underline;
97
- cursor: pointer;
98
- }
99
-
100
- input {
101
- padding: 8px 12px;
102
- border: 1px solid #ccc;
103
- border-radius: 4px;
104
- font-size: 14px;
105
- }
106
-
107
- .icon {
108
- display: inline-block;
109
- width: 20px;
110
- height: 20px;
111
- background: #6366f1;
112
- border-radius: 50%;
113
- vertical-align: middle;
114
- }
115
-
116
- code {
117
- background: #f0f0f0;
118
- padding: 2px 6px;
119
- border-radius: 3px;
120
- font-size: 0.9em;
121
- }
122
- </style>
123
- </head>
124
- <body>
125
- <div class="container">
126
- <h1>Snice Tooltip Component Demo</h1>
127
-
128
- <div class="demo-section">
129
- <h2>Basic Positions</h2>
130
- <div class="demo-grid">
131
- <div class="demo-item">
132
- <snice-tooltip content="This tooltip appears on top" position="top">
133
- <button>Top</button>
134
- </snice-tooltip>
135
- </div>
136
- <div class="demo-item">
137
- <snice-tooltip content="This tooltip appears on bottom" position="bottom">
138
- <button>Bottom</button>
139
- </snice-tooltip>
140
- </div>
141
- <div class="demo-item">
142
- <snice-tooltip content="This tooltip appears on left" position="left">
143
- <button>Left</button>
144
- </snice-tooltip>
145
- </div>
146
- <div class="demo-item">
147
- <snice-tooltip content="This tooltip appears on right" position="right">
148
- <button>Right</button>
149
- </snice-tooltip>
150
- </div>
151
- </div>
152
- </div>
153
-
154
- <div class="demo-section">
155
- <h2>Aligned Positions</h2>
156
- <div class="demo-grid">
157
- <div class="demo-item">
158
- <snice-tooltip content="Top start aligned" position="top-start">
159
- <button>Top Start</button>
160
- </snice-tooltip>
161
- </div>
162
- <div class="demo-item">
163
- <snice-tooltip content="Top end aligned" position="top-end">
164
- <button>Top End</button>
165
- </snice-tooltip>
166
- </div>
167
- <div class="demo-item">
168
- <snice-tooltip content="Bottom start aligned" position="bottom-start">
169
- <button>Bottom Start</button>
170
- </snice-tooltip>
171
- </div>
172
- <div class="demo-item">
173
- <snice-tooltip content="Bottom end aligned" position="bottom-end">
174
- <button>Bottom End</button>
175
- </snice-tooltip>
176
- </div>
177
- </div>
178
- </div>
179
-
180
- <div class="demo-section">
181
- <h2>Trigger Types</h2>
182
- <div class="demo-grid">
183
- <div class="demo-item">
184
- <snice-tooltip content="Hover to see this tooltip" trigger="hover">
185
- <button>Hover Trigger</button>
186
- </snice-tooltip>
187
- </div>
188
- <div class="demo-item">
189
- <snice-tooltip content="Click to toggle this tooltip" trigger="click">
190
- <button>Click Trigger</button>
191
- </snice-tooltip>
192
- </div>
193
- <div class="demo-item">
194
- <snice-tooltip content="Focus to see this tooltip" trigger="focus">
195
- <input type="text" placeholder="Focus me">
196
- </snice-tooltip>
197
- </div>
198
- <div class="demo-item">
199
- <snice-tooltip content="Manually controlled tooltip" trigger="manual" id="manual-tooltip">
200
- <button onclick="toggleManualTooltip()">Manual Control</button>
201
- </snice-tooltip>
202
- </div>
203
- </div>
204
- </div>
205
-
206
- <div class="demo-section">
207
- <h2>Delays</h2>
208
- <div class="demo-grid">
209
- <div class="demo-item">
210
- <snice-tooltip content="Shows after 500ms delay" delay="500">
211
- <button>Show Delay (500ms)</button>
212
- </snice-tooltip>
213
- </div>
214
- <div class="demo-item">
215
- <snice-tooltip content="Hides after 500ms delay" hide-delay="500">
216
- <button>Hide Delay (500ms)</button>
217
- </snice-tooltip>
218
- </div>
219
- <div class="demo-item">
220
- <snice-tooltip content="Both show and hide delays" delay="300" hide-delay="300">
221
- <button>Both Delays (300ms)</button>
222
- </snice-tooltip>
223
- </div>
224
- </div>
225
- </div>
226
-
227
- <div class="demo-section">
228
- <h2>Customization</h2>
229
- <div class="demo-grid">
230
- <div class="demo-item">
231
- <snice-tooltip content="Tooltip without arrow" :arrow="false">
232
- <button>No Arrow</button>
233
- </snice-tooltip>
234
- </div>
235
- <div class="demo-item">
236
- <snice-tooltip content="This tooltip has a much wider maximum width for longer content that needs more space" max-width="400">
237
- <button>Wide Tooltip</button>
238
- </snice-tooltip>
239
- </div>
240
- <div class="demo-item">
241
- <snice-tooltip content="Custom styled tooltip" class="custom-tooltip">
242
- <button>Custom Style</button>
243
- </snice-tooltip>
244
- </div>
245
- <div class="demo-item">
246
- <snice-tooltip content="Large offset from trigger" offset="20">
247
- <button>Large Offset</button>
248
- </snice-tooltip>
249
- </div>
250
- </div>
251
- </div>
252
-
253
- <div class="demo-section">
254
- <h2>Smart Positioning (Edge Detection)</h2>
255
- <p>Tooltips automatically adjust position when they would overflow the viewport edges.</p>
256
- <div class="edge-demo">
257
- <snice-tooltip content="This tooltip will flip to avoid viewport edges" position="top" class="edge-button top-left">
258
- <button>Top Left</button>
259
- </snice-tooltip>
260
- <snice-tooltip content="This tooltip will flip to avoid viewport edges" position="top" class="edge-button top-right">
261
- <button>Top Right</button>
262
- </snice-tooltip>
263
- <snice-tooltip content="This tooltip will flip to avoid viewport edges" position="bottom" class="edge-button bottom-left">
264
- <button>Bottom Left</button>
265
- </snice-tooltip>
266
- <snice-tooltip content="This tooltip will flip to avoid viewport edges" position="bottom" class="edge-button bottom-right">
267
- <button>Bottom Right</button>
268
- </snice-tooltip>
269
- <snice-tooltip content="Center positioned tooltip" position="top" class="edge-button center">
270
- <button>Center</button>
271
- </snice-tooltip>
272
- </div>
273
- </div>
274
-
275
- <div class="demo-section">
276
- <h2>Content Types</h2>
277
- <div class="demo-grid">
278
- <div class="demo-item">
279
- <snice-tooltip content="Simple text tooltip">
280
- <span class="link">Text Content</span>
281
- </snice-tooltip>
282
- </div>
283
- <div class="demo-item">
284
- <snice-tooltip content="This is a very long tooltip content that will wrap to multiple lines when it reaches the maximum width of the tooltip container">
285
- <span class="link">Long Content</span>
286
- </snice-tooltip>
287
- </div>
288
- <div class="demo-item">
289
- <snice-tooltip content="Tooltip on an icon">
290
- <span class="icon" aria-label="Info"></span>
291
- </snice-tooltip>
292
- </div>
293
- <div class="demo-item">
294
- <snice-tooltip content="Press Ctrl+C to copy">
295
- <code>npm install</code>
296
- </snice-tooltip>
297
- </div>
298
- </div>
299
- </div>
300
-
301
- <div class="demo-section">
302
- <h2>Programmatic Control</h2>
303
- <div class="demo-grid">
304
- <div class="demo-item">
305
- <snice-tooltip content="Programmatically shown" trigger="manual" id="prog-tooltip">
306
- <button>Target Element</button>
307
- </snice-tooltip>
308
- <br><br>
309
- <button onclick="showProgrammatic()">Show</button>
310
- <button onclick="hideProgrammatic()">Hide</button>
311
- </div>
312
- <div class="demo-item">
313
- <snice-tooltip content="Dynamic content" trigger="hover" id="dynamic-tooltip">
314
- <button onmouseenter="updateDynamicContent()">Dynamic Content</button>
315
- </snice-tooltip>
316
- </div>
317
- </div>
318
- </div>
319
- </div>
320
-
321
- <script type="module">
322
- import './snice-tooltip.ts';
323
-
324
- // Manual tooltip control
325
- window.toggleManualTooltip = function() {
326
- const tooltip = document.getElementById('manual-tooltip');
327
- tooltip.toggle();
328
- };
329
-
330
- // Programmatic control
331
- window.showProgrammatic = function() {
332
- const tooltip = document.getElementById('prog-tooltip');
333
- tooltip.show();
334
- };
335
-
336
- window.hideProgrammatic = function() {
337
- const tooltip = document.getElementById('prog-tooltip');
338
- tooltip.hide();
339
- };
340
-
341
- // Dynamic content
342
- let counter = 0;
343
- window.updateDynamicContent = function() {
344
- const tooltip = document.getElementById('dynamic-tooltip');
345
- counter++;
346
- tooltip.content = `Hover count: ${counter}`;
347
- };
348
- </script>
349
- </body>
350
- </html>
package/components/tooltip/snice-tooltip-portal.css DELETED
@@ -1,79 +0,0 @@
1
- .snice-tooltip--visible {
2
- opacity: 1 !important;
3
- transform: scale(1) !important;
4
- }
5
-
6
- .snice-tooltip__arrow {
7
- position: absolute;
8
- width: 0;
9
- height: 0;
10
- border-style: solid;
11
- border-color: transparent;
12
- }
13
-
14
- /* Arrow positions */
15
- .snice-tooltip--top .snice-tooltip__arrow,
16
- .snice-tooltip--top-start .snice-tooltip__arrow,
17
- .snice-tooltip--top-end .snice-tooltip__arrow {
18
- bottom: -6px;
19
- border-width: 6px 6px 0;
20
- border-top-color: #333;
21
- }
22
-
23
- .snice-tooltip--bottom .snice-tooltip__arrow,
24
- .snice-tooltip--bottom-start .snice-tooltip__arrow,
25
- .snice-tooltip--bottom-end .snice-tooltip__arrow {
26
- top: -6px;
27
- border-width: 0 6px 6px;
28
- border-bottom-color: #333;
29
- }
30
-
31
- .snice-tooltip--left .snice-tooltip__arrow,
32
- .snice-tooltip--left-start .snice-tooltip__arrow,
33
- .snice-tooltip--left-end .snice-tooltip__arrow {
34
- right: -6px;
35
- border-width: 6px 0 6px 6px;
36
- border-left-color: #333;
37
- }
38
-
39
- .snice-tooltip--right .snice-tooltip__arrow,
40
- .snice-tooltip--right-start .snice-tooltip__arrow,
41
- .snice-tooltip--right-end .snice-tooltip__arrow {
42
- left: -6px;
43
- border-width: 6px 6px 6px 0;
44
- border-right-color: #333;
45
- }
46
-
47
- /* Arrow alignment */
48
- .snice-tooltip--top .snice-tooltip__arrow,
49
- .snice-tooltip--bottom .snice-tooltip__arrow {
50
- left: 50%;
51
- transform: translateX(-50%);
52
- }
53
-
54
- .snice-tooltip--top-start .snice-tooltip__arrow,
55
- .snice-tooltip--bottom-start .snice-tooltip__arrow {
56
- left: 16px;
57
- }
58
-
59
- .snice-tooltip--top-end .snice-tooltip__arrow,
60
- .snice-tooltip--bottom-end .snice-tooltip__arrow {
61
- right: 16px;
62
- }
63
-
64
- .snice-tooltip--left .snice-tooltip__arrow,
65
- .snice-tooltip--right .snice-tooltip__arrow {
66
- top: 50%;
67
- transform: translateY(-50%);
68
- }
69
-
70
- .snice-tooltip--left-start .snice-tooltip__arrow,
71
- .snice-tooltip--right-start .snice-tooltip__arrow {
72
- top: 16px;
73
- }
74
-
75
- .snice-tooltip--left-end .snice-tooltip__arrow,
76
- .snice-tooltip--right-end .snice-tooltip__arrow {
77
- bottom: 16px;
78
- top: auto;
79
- }
package/components/tooltip/snice-tooltip.css DELETED
@@ -1,117 +0,0 @@
1
- :host {
2
- --tooltip-bg: #333;
3
- --tooltip-color: white;
4
- --tooltip-padding: 0.5rem 0.75rem; /* 8px 12px */
5
- --tooltip-radius: 6px;
6
- --tooltip-font-size: 0.875rem; /* 14px */
7
- --tooltip-arrow-size: 6px;
8
- --tooltip-max-width: 15.625rem; /* 250px */
9
- position: relative;
10
- display: inline-block;
11
- }
12
-
13
- .tooltip-trigger {
14
- display: inline-block;
15
- }
16
-
17
- .tooltip {
18
- position: fixed;
19
- z-index: var(--tooltip-z-index, 10000);
20
- padding: var(--tooltip-padding);
21
- background: var(--tooltip-bg);
22
- color: var(--tooltip-color);
23
- border-radius: var(--tooltip-radius);
24
- font-size: var(--tooltip-font-size);
25
- line-height: 1.4;
26
- max-width: var(--tooltip-max-width);
27
- width: max-content;
28
- pointer-events: none;
29
- opacity: 0;
30
- transform: scale(0.95);
31
- transition: opacity 0.2s, transform 0.2s;
32
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
33
- }
34
-
35
- .tooltip--visible {
36
- opacity: 1;
37
- transform: scale(1);
38
- }
39
-
40
- .tooltip__arrow {
41
- position: absolute;
42
- width: 0;
43
- height: 0;
44
- border-style: solid;
45
- border-color: transparent;
46
- }
47
-
48
- /* Arrow positions */
49
- .tooltip--top .tooltip__arrow,
50
- .tooltip--top-start .tooltip__arrow,
51
- .tooltip--top-end .tooltip__arrow {
52
- bottom: calc(var(--tooltip-arrow-size) * -1);
53
- border-width: var(--tooltip-arrow-size) var(--tooltip-arrow-size) 0;
54
- border-top-color: var(--tooltip-bg);
55
- }
56
-
57
- .tooltip--bottom .tooltip__arrow,
58
- .tooltip--bottom-start .tooltip__arrow,
59
- .tooltip--bottom-end .tooltip__arrow {
60
- top: calc(var(--tooltip-arrow-size) * -1);
61
- border-width: 0 var(--tooltip-arrow-size) var(--tooltip-arrow-size);
62
- border-bottom-color: var(--tooltip-bg);
63
- }
64
-
65
- .tooltip--left .tooltip__arrow,
66
- .tooltip--left-start .tooltip__arrow,
67
- .tooltip--left-end .tooltip__arrow {
68
- right: calc(var(--tooltip-arrow-size) * -1);
69
- border-width: var(--tooltip-arrow-size) 0 var(--tooltip-arrow-size) var(--tooltip-arrow-size);
70
- border-left-color: var(--tooltip-bg);
71
- }
72
-
73
- .tooltip--right .tooltip__arrow,
74
- .tooltip--right-start .tooltip__arrow,
75
- .tooltip--right-end .tooltip__arrow {
76
- left: calc(var(--tooltip-arrow-size) * -1);
77
- border-width: var(--tooltip-arrow-size) var(--tooltip-arrow-size) var(--tooltip-arrow-size) 0;
78
- border-right-color: var(--tooltip-bg);
79
- }
80
-
81
- /* Arrow alignment */
82
- .tooltip--top .tooltip__arrow,
83
- .tooltip--bottom .tooltip__arrow {
84
- left: 50%;
85
- transform: translateX(-50%);
86
- }
87
-
88
- .tooltip--top-start .tooltip__arrow,
89
- .tooltip--bottom-start .tooltip__arrow {
90
- left: 1rem; /* 16px */
91
- }
92
-
93
- .tooltip--top-end .tooltip__arrow,
94
- .tooltip--bottom-end .tooltip__arrow {
95
- right: 1rem; /* 16px */
96
- }
97
-
98
- .tooltip--left .tooltip__arrow,
99
- .tooltip--right .tooltip__arrow {
100
- top: 50%;
101
- transform: translateY(-50%);
102
- }
103
-
104
- .tooltip--left-start .tooltip__arrow,
105
- .tooltip--right-start .tooltip__arrow {
106
- top: 1rem; /* 16px */
107
- }
108
-
109
- .tooltip--left-end .tooltip__arrow,
110
- .tooltip--right-end .tooltip__arrow {
111
- bottom: 1rem; /* 16px */
112
- top: auto;
113
- }
114
-
115
- [hidden] {
116
- display: none !important;
117
- }