snice 2.1.5 → 2.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (367) hide show
  1. package/dist/components/accordion/snice-accordion-item.d.ts +25 -0
  2. package/dist/components/accordion/snice-accordion-item.js +255 -0
  3. package/dist/components/accordion/snice-accordion-item.js.map +1 -0
  4. package/dist/components/accordion/snice-accordion.d.ts +28 -0
  5. package/dist/components/accordion/snice-accordion.js +206 -0
  6. package/dist/components/accordion/snice-accordion.js.map +1 -0
  7. package/dist/components/accordion/snice-accordion.types.d.ts +29 -0
  8. package/dist/components/alert/snice-alert.d.ts +26 -0
  9. package/dist/components/alert/snice-alert.js +180 -0
  10. package/dist/components/alert/snice-alert.js.map +1 -0
  11. package/{components/alert/snice-alert.types.ts → dist/components/alert/snice-alert.types.d.ts} +8 -9
  12. package/dist/components/avatar/snice-avatar.d.ts +24 -0
  13. package/dist/components/avatar/snice-avatar.js +180 -0
  14. package/dist/components/avatar/snice-avatar.js.map +1 -0
  15. package/dist/components/avatar/snice-avatar.types.d.ts +12 -0
  16. package/dist/components/badge/snice-badge.d.ts +25 -0
  17. package/dist/components/badge/snice-badge.js +169 -0
  18. package/dist/components/badge/snice-badge.js.map +1 -0
  19. package/{components/badge/snice-badge.types.ts → dist/components/badge/snice-badge.types.d.ts} +11 -12
  20. package/dist/components/breadcrumbs/snice-breadcrumbs.d.ts +27 -0
  21. package/dist/components/breadcrumbs/snice-breadcrumbs.js +214 -0
  22. package/dist/components/breadcrumbs/snice-breadcrumbs.js.map +1 -0
  23. package/dist/components/breadcrumbs/snice-breadcrumbs.types.d.ts +23 -0
  24. package/dist/components/breadcrumbs/snice-crumb.d.ts +9 -0
  25. package/dist/components/breadcrumbs/snice-crumb.js +63 -0
  26. package/dist/components/breadcrumbs/snice-crumb.js.map +1 -0
  27. package/dist/components/button/snice-button.d.ts +32 -0
  28. package/dist/components/button/snice-button.js +232 -0
  29. package/dist/components/button/snice-button.js.map +1 -0
  30. package/dist/components/button/snice-button.types.d.ts +23 -0
  31. package/dist/components/card/snice-card.d.ts +19 -0
  32. package/dist/components/card/snice-card.js +136 -0
  33. package/dist/components/card/snice-card.js.map +1 -0
  34. package/{components/card/snice-card.types.ts → dist/components/card/snice-card.types.d.ts} +6 -7
  35. package/dist/components/checkbox/snice-checkbox.d.ts +34 -0
  36. package/dist/components/checkbox/snice-checkbox.js +286 -0
  37. package/dist/components/checkbox/snice-checkbox.js.map +1 -0
  38. package/dist/components/checkbox/snice-checkbox.types.d.ts +20 -0
  39. package/dist/components/chip/snice-chip.d.ts +28 -0
  40. package/dist/components/chip/snice-chip.js +199 -0
  41. package/dist/components/chip/snice-chip.js.map +1 -0
  42. package/dist/components/chip/snice-chip.types.d.ts +14 -0
  43. package/dist/components/date-picker/snice-date-picker.d.ts +82 -0
  44. package/dist/components/date-picker/snice-date-picker.js +847 -0
  45. package/dist/components/date-picker/snice-date-picker.js.map +1 -0
  46. package/dist/components/date-picker/snice-date-picker.types.d.ts +71 -0
  47. package/dist/components/divider/snice-divider.d.ts +17 -0
  48. package/dist/components/divider/snice-divider.js +122 -0
  49. package/dist/components/divider/snice-divider.js.map +1 -0
  50. package/{components/divider/snice-divider.types.ts → dist/components/divider/snice-divider.types.d.ts} +9 -10
  51. package/dist/components/drawer/snice-drawer.d.ts +37 -0
  52. package/dist/components/drawer/snice-drawer.js +337 -0
  53. package/dist/components/drawer/snice-drawer.js.map +1 -0
  54. package/dist/components/drawer/snice-drawer.types.d.ts +16 -0
  55. package/dist/components/input/snice-input.d.ts +65 -0
  56. package/dist/components/input/snice-input.js +567 -0
  57. package/dist/components/input/snice-input.js.map +1 -0
  58. package/dist/components/input/snice-input.types.d.ts +53 -0
  59. package/dist/components/layout/snice-layout-blog.d.ts +4 -0
  60. package/dist/components/layout/snice-layout-blog.js +67 -0
  61. package/dist/components/layout/snice-layout-blog.js.map +1 -0
  62. package/dist/components/layout/snice-layout-card.d.ts +6 -0
  63. package/dist/components/layout/snice-layout-card.js +64 -0
  64. package/dist/components/layout/snice-layout-card.js.map +1 -0
  65. package/dist/components/layout/snice-layout-centered.d.ts +5 -0
  66. package/dist/components/layout/snice-layout-centered.js +48 -0
  67. package/dist/components/layout/snice-layout-centered.js.map +1 -0
  68. package/dist/components/layout/snice-layout-dashboard.d.ts +4 -0
  69. package/dist/components/layout/snice-layout-dashboard.js +64 -0
  70. package/dist/components/layout/snice-layout-dashboard.js.map +1 -0
  71. package/dist/components/layout/snice-layout-fullscreen.d.ts +5 -0
  72. package/dist/components/layout/snice-layout-fullscreen.js +60 -0
  73. package/dist/components/layout/snice-layout-fullscreen.js.map +1 -0
  74. package/dist/components/layout/snice-layout-landing.d.ts +4 -0
  75. package/dist/components/layout/snice-layout-landing.js +66 -0
  76. package/dist/components/layout/snice-layout-landing.js.map +1 -0
  77. package/dist/components/layout/snice-layout-minimal.d.ts +4 -0
  78. package/dist/components/layout/snice-layout-minimal.js +38 -0
  79. package/dist/components/layout/snice-layout-minimal.js.map +1 -0
  80. package/dist/components/layout/snice-layout-sidebar.d.ts +5 -0
  81. package/dist/components/layout/snice-layout-sidebar.js +74 -0
  82. package/dist/components/layout/snice-layout-sidebar.js.map +1 -0
  83. package/dist/components/layout/snice-layout-split.d.ts +6 -0
  84. package/dist/components/layout/snice-layout-split.js +58 -0
  85. package/dist/components/layout/snice-layout-split.js.map +1 -0
  86. package/dist/components/layout/snice-layout.d.ts +4 -0
  87. package/dist/components/layout/snice-layout.js +54 -0
  88. package/dist/components/layout/snice-layout.js.map +1 -0
  89. package/{components/layout/snice-layout.types.ts → dist/components/layout/snice-layout.types.d.ts} +1 -3
  90. package/dist/components/login/snice-login.d.ts +44 -0
  91. package/dist/components/login/snice-login.js +382 -0
  92. package/dist/components/login/snice-login.js.map +1 -0
  93. package/dist/components/login/snice-login.types.d.ts +26 -0
  94. package/dist/components/modal/snice-modal.d.ts +32 -0
  95. package/dist/components/modal/snice-modal.js +280 -0
  96. package/dist/components/modal/snice-modal.js.map +1 -0
  97. package/dist/components/modal/snice-modal.types.d.ts +18 -0
  98. package/dist/components/pagination/snice-pagination.d.ts +26 -0
  99. package/dist/components/pagination/snice-pagination.js +373 -0
  100. package/dist/components/pagination/snice-pagination.js.map +1 -0
  101. package/dist/components/pagination/snice-pagination.types.d.ts +18 -0
  102. package/dist/components/progress/snice-progress.d.ts +35 -0
  103. package/dist/components/progress/snice-progress.js +305 -0
  104. package/dist/components/progress/snice-progress.js.map +1 -0
  105. package/dist/components/progress/snice-progress.types.d.ts +18 -0
  106. package/dist/components/radio/snice-radio.d.ts +33 -0
  107. package/dist/components/radio/snice-radio.js +279 -0
  108. package/dist/components/radio/snice-radio.js.map +1 -0
  109. package/dist/components/radio/snice-radio.types.d.ts +19 -0
  110. package/dist/components/select/snice-option.d.ts +17 -0
  111. package/dist/components/select/snice-option.js +88 -0
  112. package/dist/components/select/snice-option.js.map +1 -0
  113. package/{components/select/snice-option.types.ts → dist/components/select/snice-option.types.d.ts} +8 -8
  114. package/dist/components/select/snice-select.d.ts +89 -0
  115. package/dist/components/select/snice-select.js +864 -0
  116. package/dist/components/select/snice-select.js.map +1 -0
  117. package/dist/components/select/snice-select.types.d.ts +49 -0
  118. package/dist/components/skeleton/snice-skeleton.d.ts +16 -0
  119. package/dist/components/skeleton/snice-skeleton.js +166 -0
  120. package/dist/components/skeleton/snice-skeleton.js.map +1 -0
  121. package/{components/skeleton/snice-skeleton.types.ts → dist/components/skeleton/snice-skeleton.types.d.ts} +7 -8
  122. package/dist/components/snice-cell-C9N6yGxQ.js +4 -0
  123. package/dist/components/snice-cell-C9N6yGxQ.js.map +1 -0
  124. package/dist/components/switch/snice-switch.d.ts +38 -0
  125. package/dist/components/switch/snice-switch.js +305 -0
  126. package/dist/components/switch/snice-switch.js.map +1 -0
  127. package/dist/components/switch/snice-switch.types.d.ts +21 -0
  128. package/dist/components/symbols.d.ts +1 -0
  129. package/dist/components/symbols.js +22 -0
  130. package/dist/components/symbols.js.map +1 -0
  131. package/dist/components/table/snice-cell-boolean.d.ts +21 -0
  132. package/dist/components/table/snice-cell-boolean.js +164 -0
  133. package/dist/components/table/snice-cell-boolean.js.map +1 -0
  134. package/dist/components/table/snice-cell-date.d.ts +24 -0
  135. package/dist/components/table/snice-cell-date.js +253 -0
  136. package/dist/components/table/snice-cell-date.js.map +1 -0
  137. package/dist/components/table/snice-cell-duration.d.ts +16 -0
  138. package/dist/components/table/snice-cell-duration.js +130 -0
  139. package/dist/components/table/snice-cell-duration.js.map +1 -0
  140. package/dist/components/table/snice-cell-filesize.d.ts +16 -0
  141. package/dist/components/table/snice-cell-filesize.js +126 -0
  142. package/dist/components/table/snice-cell-filesize.js.map +1 -0
  143. package/dist/components/table/snice-cell-number.d.ts +23 -0
  144. package/dist/components/table/snice-cell-number.js +215 -0
  145. package/dist/components/table/snice-cell-number.js.map +1 -0
  146. package/dist/components/table/snice-cell-progress.d.ts +17 -0
  147. package/dist/components/table/snice-cell-progress.js +121 -0
  148. package/dist/components/table/snice-cell-progress.js.map +1 -0
  149. package/dist/components/table/snice-cell-rating.d.ts +17 -0
  150. package/dist/components/table/snice-cell-rating.js +120 -0
  151. package/dist/components/table/snice-cell-rating.js.map +1 -0
  152. package/dist/components/table/snice-cell-sparkline.d.ts +29 -0
  153. package/dist/components/table/snice-cell-sparkline.js +306 -0
  154. package/dist/components/table/snice-cell-sparkline.js.map +1 -0
  155. package/dist/components/table/snice-cell-text.d.ts +19 -0
  156. package/dist/components/table/snice-cell-text.js +161 -0
  157. package/dist/components/table/snice-cell-text.js.map +1 -0
  158. package/dist/components/table/snice-cell.d.ts +32 -0
  159. package/dist/components/table/snice-cell.js +458 -0
  160. package/dist/components/table/snice-cell.js.map +1 -0
  161. package/dist/components/table/snice-column.d.ts +62 -0
  162. package/dist/components/table/snice-column.js +506 -0
  163. package/dist/components/table/snice-column.js.map +1 -0
  164. package/dist/components/table/snice-header.d.ts +33 -0
  165. package/dist/components/table/snice-header.js +289 -0
  166. package/dist/components/table/snice-header.js.map +1 -0
  167. package/dist/components/table/snice-progress.d.ts +10 -0
  168. package/dist/components/table/snice-progress.js +105 -0
  169. package/dist/components/table/snice-progress.js.map +1 -0
  170. package/dist/components/table/snice-rating.d.ts +9 -0
  171. package/dist/components/table/snice-rating.js +81 -0
  172. package/dist/components/table/snice-rating.js.map +1 -0
  173. package/dist/components/table/snice-row.d.ts +43 -0
  174. package/dist/components/table/snice-row.js +353 -0
  175. package/dist/components/table/snice-row.js.map +1 -0
  176. package/dist/components/table/snice-table.d.ts +69 -0
  177. package/dist/components/table/snice-table.js +792 -0
  178. package/dist/components/table/snice-table.js.map +1 -0
  179. package/dist/components/table/snice-table.types.d.ts +137 -0
  180. package/dist/components/tabs/snice-tab-panel.d.ts +12 -0
  181. package/dist/components/tabs/snice-tab-panel.js +87 -0
  182. package/dist/components/tabs/snice-tab-panel.js.map +1 -0
  183. package/dist/components/tabs/snice-tab.d.ts +13 -0
  184. package/dist/components/tabs/snice-tab.js +98 -0
  185. package/dist/components/tabs/snice-tab.js.map +1 -0
  186. package/dist/components/tabs/snice-tabs.d.ts +34 -0
  187. package/dist/components/tabs/snice-tabs.js +375 -0
  188. package/dist/components/tabs/snice-tabs.js.map +1 -0
  189. package/dist/components/tabs/snice-tabs.types.d.ts +23 -0
  190. package/dist/components/toast/snice-toast-container.d.ts +25 -0
  191. package/dist/components/toast/snice-toast-container.js +252 -0
  192. package/dist/components/toast/snice-toast-container.js.map +1 -0
  193. package/dist/components/toast/snice-toast.d.ts +23 -0
  194. package/dist/components/toast/snice-toast.js +321 -0
  195. package/dist/components/toast/snice-toast.js.map +1 -0
  196. package/dist/components/toast/snice-toast.types.d.ts +30 -0
  197. package/dist/components/tooltip/snice-tooltip.d.ts +50 -0
  198. package/dist/components/tooltip/snice-tooltip.js +644 -0
  199. package/dist/components/tooltip/snice-tooltip.js.map +1 -0
  200. package/dist/components/tooltip/snice-tooltip.types.d.ts +18 -0
  201. package/dist/components/transitions.d.ts +11 -0
  202. package/dist/components/transitions.js +72 -0
  203. package/dist/components/transitions.js.map +1 -0
  204. package/dist/index.cjs +1 -1
  205. package/dist/index.esm.js +1 -1
  206. package/dist/index.iife.js +1 -1
  207. package/dist/symbols.esm.js +1 -1
  208. package/dist/transitions.esm.js +1 -1
  209. package/package.json +10 -6
  210. package/components/accordion/demo.html +0 -403
  211. package/components/accordion/snice-accordion-item.css +0 -85
  212. package/components/accordion/snice-accordion-item.ts +0 -226
  213. package/components/accordion/snice-accordion.css +0 -31
  214. package/components/accordion/snice-accordion.ts +0 -182
  215. package/components/accordion/snice-accordion.types.ts +0 -32
  216. package/components/alert/demo.html +0 -445
  217. package/components/alert/snice-alert.css +0 -195
  218. package/components/alert/snice-alert.ts +0 -141
  219. package/components/avatar/demo.html +0 -598
  220. package/components/avatar/snice-avatar.css +0 -131
  221. package/components/avatar/snice-avatar.ts +0 -136
  222. package/components/avatar/snice-avatar.types.ts +0 -13
  223. package/components/badge/demo.html +0 -523
  224. package/components/badge/snice-badge.css +0 -161
  225. package/components/badge/snice-badge.ts +0 -117
  226. package/components/breadcrumbs/demo.html +0 -404
  227. package/components/breadcrumbs/snice-breadcrumbs.css +0 -133
  228. package/components/breadcrumbs/snice-breadcrumbs.ts +0 -191
  229. package/components/breadcrumbs/snice-breadcrumbs.types.ts +0 -26
  230. package/components/breadcrumbs/snice-crumb.ts +0 -26
  231. package/components/button/demo.html +0 -42
  232. package/components/button/snice-button.css +0 -230
  233. package/components/button/snice-button.ts +0 -169
  234. package/components/button/snice-button.types.ts +0 -25
  235. package/components/card/demo.html +0 -525
  236. package/components/card/snice-card.css +0 -140
  237. package/components/card/snice-card.ts +0 -102
  238. package/components/checkbox/demo.html +0 -253
  239. package/components/checkbox/snice-checkbox.css +0 -164
  240. package/components/checkbox/snice-checkbox.ts +0 -223
  241. package/components/checkbox/snice-checkbox.types.ts +0 -22
  242. package/components/chip/demo.html +0 -383
  243. package/components/chip/snice-chip.css +0 -195
  244. package/components/chip/snice-chip.ts +0 -139
  245. package/components/chip/snice-chip.types.ts +0 -15
  246. package/components/date-picker/README.md +0 -233
  247. package/components/date-picker/demo.html +0 -191
  248. package/components/date-picker/snice-date-picker.css +0 -330
  249. package/components/date-picker/snice-date-picker.ts +0 -777
  250. package/components/date-picker/snice-date-picker.types.ts +0 -83
  251. package/components/divider/demo.html +0 -233
  252. package/components/divider/snice-divider.css +0 -155
  253. package/components/divider/snice-divider.ts +0 -69
  254. package/components/drawer/demo.html +0 -328
  255. package/components/drawer/snice-drawer.css +0 -476
  256. package/components/drawer/snice-drawer.ts +0 -287
  257. package/components/drawer/snice-drawer.types.ts +0 -17
  258. package/components/global.d.ts +0 -14
  259. package/components/input/demo.html +0 -303
  260. package/components/input/snice-input.css +0 -257
  261. package/components/input/snice-input.ts +0 -442
  262. package/components/input/snice-input.types.ts +0 -59
  263. package/components/input/test.html +0 -77
  264. package/components/layout/README.md +0 -260
  265. package/components/layout/demo.html +0 -538
  266. package/components/layout/snice-layout-blog.css +0 -129
  267. package/components/layout/snice-layout-blog.ts +0 -48
  268. package/components/layout/snice-layout-card.css +0 -104
  269. package/components/layout/snice-layout-card.ts +0 -35
  270. package/components/layout/snice-layout-centered.css +0 -51
  271. package/components/layout/snice-layout-centered.ts +0 -22
  272. package/components/layout/snice-layout-dashboard.css +0 -98
  273. package/components/layout/snice-layout-dashboard.ts +0 -45
  274. package/components/layout/snice-layout-fullscreen.css +0 -72
  275. package/components/layout/snice-layout-fullscreen.ts +0 -34
  276. package/components/layout/snice-layout-landing.css +0 -92
  277. package/components/layout/snice-layout-landing.ts +0 -47
  278. package/components/layout/snice-layout-minimal.css +0 -16
  279. package/components/layout/snice-layout-minimal.ts +0 -19
  280. package/components/layout/snice-layout-sidebar.css +0 -117
  281. package/components/layout/snice-layout-sidebar.ts +0 -48
  282. package/components/layout/snice-layout-split.css +0 -103
  283. package/components/layout/snice-layout-split.ts +0 -29
  284. package/components/layout/snice-layout.css +0 -72
  285. package/components/layout/snice-layout.ts +0 -35
  286. package/components/login/demo-auth-controller.ts +0 -185
  287. package/components/login/demo.html +0 -470
  288. package/components/login/snice-login.css +0 -204
  289. package/components/login/snice-login.ts +0 -326
  290. package/components/login/snice-login.types.ts +0 -29
  291. package/components/modal/demo.html +0 -291
  292. package/components/modal/snice-modal.css +0 -203
  293. package/components/modal/snice-modal.ts +0 -233
  294. package/components/modal/snice-modal.types.ts +0 -21
  295. package/components/pagination/demo.html +0 -395
  296. package/components/pagination/snice-pagination.ts +0 -333
  297. package/components/pagination/snice-pagination.types.ts +0 -21
  298. package/components/progress/demo.html +0 -510
  299. package/components/progress/snice-progress.css +0 -267
  300. package/components/progress/snice-progress.ts +0 -247
  301. package/components/progress/snice-progress.types.ts +0 -19
  302. package/components/radio/demo.html +0 -287
  303. package/components/radio/snice-radio.css +0 -171
  304. package/components/radio/snice-radio.ts +0 -218
  305. package/components/radio/snice-radio.types.ts +0 -21
  306. package/components/select/demo.html +0 -511
  307. package/components/select/snice-option.ts +0 -52
  308. package/components/select/snice-select.css +0 -392
  309. package/components/select/snice-select.ts +0 -796
  310. package/components/select/snice-select.types.ts +0 -55
  311. package/components/skeleton/demo.html +0 -514
  312. package/components/skeleton/snice-skeleton.css +0 -109
  313. package/components/skeleton/snice-skeleton.ts +0 -126
  314. package/components/switch/demo.html +0 -284
  315. package/components/switch/snice-switch.css +0 -221
  316. package/components/switch/snice-switch.ts +0 -229
  317. package/components/switch/snice-switch.types.ts +0 -23
  318. package/components/symbols.ts +0 -23
  319. package/components/table/demo-table-controller.ts +0 -100
  320. package/components/table/demo.html +0 -480
  321. package/components/table/snice-cell-boolean.ts +0 -112
  322. package/components/table/snice-cell-date.ts +0 -210
  323. package/components/table/snice-cell-duration.ts +0 -91
  324. package/components/table/snice-cell-filesize.ts +0 -90
  325. package/components/table/snice-cell-number.ts +0 -165
  326. package/components/table/snice-cell-progress.ts +0 -83
  327. package/components/table/snice-cell-rating.ts +0 -82
  328. package/components/table/snice-cell-sparkline.ts +0 -253
  329. package/components/table/snice-cell-text.ts +0 -125
  330. package/components/table/snice-cell.css +0 -296
  331. package/components/table/snice-cell.ts +0 -473
  332. package/components/table/snice-column.ts +0 -353
  333. package/components/table/snice-header.css +0 -243
  334. package/components/table/snice-header.ts +0 -261
  335. package/components/table/snice-progress.ts +0 -66
  336. package/components/table/snice-rating.ts +0 -45
  337. package/components/table/snice-row.css +0 -255
  338. package/components/table/snice-row.ts +0 -331
  339. package/components/table/snice-table.css +0 -241
  340. package/components/table/snice-table.ts +0 -737
  341. package/components/table/snice-table.types.ts +0 -158
  342. package/components/tabs/demo.html +0 -487
  343. package/components/tabs/snice-tab-panel.css +0 -264
  344. package/components/tabs/snice-tab-panel.ts +0 -47
  345. package/components/tabs/snice-tab.css +0 -96
  346. package/components/tabs/snice-tab.ts +0 -65
  347. package/components/tabs/snice-tabs.css +0 -189
  348. package/components/tabs/snice-tabs.ts +0 -332
  349. package/components/tabs/snice-tabs.types.ts +0 -28
  350. package/components/theme/theme.css +0 -234
  351. package/components/toast/demo.html +0 -329
  352. package/components/toast/snice-toast-container.ts +0 -256
  353. package/components/toast/snice-toast.css +0 -213
  354. package/components/toast/snice-toast.ts +0 -276
  355. package/components/toast/snice-toast.types.ts +0 -35
  356. package/components/tooltip/demo.html +0 -350
  357. package/components/tooltip/snice-tooltip-portal.css +0 -79
  358. package/components/tooltip/snice-tooltip.css +0 -117
  359. package/components/tooltip/snice-tooltip.ts +0 -612
  360. package/components/tooltip/snice-tooltip.types.ts +0 -32
  361. package/components/transitions.ts +0 -94
  362. package/components/tsconfig.json +0 -18
  363. package/dist/index.cjs.min.map +0 -1
  364. package/dist/index.esm.min.js +0 -14
  365. package/dist/index.esm.min.js.map +0 -1
  366. package/dist/index.iife.min.js +0 -15
  367. package/dist/index.iife.min.js.map +0 -1
package/components/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
- }