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