tyrell-components 1.0.0-RC13 → 1.0.0-RC15

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 (358) hide show
  1. package/README.md +10 -2
  2. package/css/tyrell-theme.css +192 -180
  3. package/css/tyrell.css +23 -0
  4. package/dist/tyrell-colors-static.css +1 -316
  5. package/dist/tyrell-theme.css +1 -1454
  6. package/dist/tyrell.css +1 -1371
  7. package/dist/tyrell.js +1 -1
  8. package/lib/base/ty-component.d.ts +20 -10
  9. package/lib/base/ty-component.js +196 -319
  10. package/lib/components/button.d.ts +3 -17
  11. package/lib/components/button.js +261 -295
  12. package/lib/components/calendar-month.d.ts +4 -50
  13. package/lib/components/calendar-month.js +443 -582
  14. package/lib/components/calendar-navigation.d.ts +3 -48
  15. package/lib/components/calendar-navigation.js +239 -362
  16. package/lib/components/calendar.d.ts +8 -83
  17. package/lib/components/calendar.js +616 -829
  18. package/lib/components/checkbox.d.ts +5 -72
  19. package/lib/components/checkbox.js +273 -416
  20. package/lib/components/copy.d.ts +4 -57
  21. package/lib/components/copy.js +280 -397
  22. package/lib/components/date-picker.d.ts +21 -163
  23. package/lib/components/date-picker.js +1143 -1674
  24. package/lib/components/file-upload.d.ts +9 -15
  25. package/lib/components/file-upload.js +404 -426
  26. package/lib/components/icon.d.ts +3 -24
  27. package/lib/components/icon.js +141 -230
  28. package/lib/components/input.d.ts +8 -108
  29. package/lib/components/input.js +593 -784
  30. package/lib/components/modal.d.ts +17 -26
  31. package/lib/components/modal.js +340 -484
  32. package/lib/components/option.d.ts +2 -9
  33. package/lib/components/option.js +168 -216
  34. package/lib/components/popup.d.ts +2 -17
  35. package/lib/components/popup.js +249 -380
  36. package/lib/components/radio.d.ts +5 -25
  37. package/lib/components/radio.js +407 -461
  38. package/lib/components/resize-observer.d.ts +3 -30
  39. package/lib/components/resize-observer.js +69 -103
  40. package/lib/components/scroll-container.d.ts +2 -12
  41. package/lib/components/scroll-container.js +293 -338
  42. package/lib/components/select.d.ts +87 -159
  43. package/lib/components/select.js +1609 -2090
  44. package/lib/components/selected-tags.d.ts +5 -48
  45. package/lib/components/selected-tags.js +188 -276
  46. package/lib/components/step.d.ts +1 -6
  47. package/lib/components/step.js +62 -68
  48. package/lib/components/switch.d.ts +1 -12
  49. package/lib/components/switch.js +214 -247
  50. package/lib/components/tab.d.ts +1 -6
  51. package/lib/components/tab.js +62 -69
  52. package/lib/components/tabs.d.ts +6 -63
  53. package/lib/components/tabs.js +545 -777
  54. package/lib/components/tag.d.ts +3 -37
  55. package/lib/components/tag.js +236 -335
  56. package/lib/components/textarea.d.ts +7 -87
  57. package/lib/components/textarea.js +457 -627
  58. package/lib/components/tooltip.d.ts +3 -11
  59. package/lib/components/tooltip.js +307 -443
  60. package/lib/components/wizard.d.ts +6 -54
  61. package/lib/components/wizard.js +405 -618
  62. package/lib/icons/fontawesome/brands.d.ts +0 -1
  63. package/lib/icons/fontawesome/brands.js +0 -8
  64. package/lib/icons/fontawesome/regular.d.ts +0 -1
  65. package/lib/icons/fontawesome/regular.js +0 -8
  66. package/lib/icons/fontawesome/solid.d.ts +0 -1
  67. package/lib/icons/fontawesome/solid.js +0 -8
  68. package/lib/icons/heroicons/micro.d.ts +0 -1
  69. package/lib/icons/heroicons/micro.js +392 -400
  70. package/lib/icons/heroicons/mini.d.ts +0 -1
  71. package/lib/icons/heroicons/mini.js +382 -390
  72. package/lib/icons/heroicons/outline.d.ts +0 -1
  73. package/lib/icons/heroicons/outline.js +337 -345
  74. package/lib/icons/heroicons/solid.d.ts +0 -1
  75. package/lib/icons/heroicons/solid.js +407 -415
  76. package/lib/icons/lucide.d.ts +0 -1
  77. package/lib/icons/lucide.js +24479 -26351
  78. package/lib/icons/material/filled.d.ts +0 -1
  79. package/lib/icons/material/filled.js +9653 -9663
  80. package/lib/icons/material/outlined.d.ts +0 -1
  81. package/lib/icons/material/outlined.js +10271 -10281
  82. package/lib/icons/material/round.d.ts +0 -1
  83. package/lib/icons/material/round.js +10495 -10505
  84. package/lib/icons/material/sharp.d.ts +0 -1
  85. package/lib/icons/material/sharp.js +9905 -9915
  86. package/lib/icons/material/two-tone.d.ts +0 -1
  87. package/lib/icons/material/two-tone.js +12792 -12802
  88. package/lib/index.d.ts +0 -1
  89. package/lib/index.js +21 -41
  90. package/lib/styles/button.d.ts +2 -20
  91. package/lib/styles/button.js +202 -404
  92. package/lib/styles/calendar-month.d.ts +1 -5
  93. package/lib/styles/calendar-month.js +127 -244
  94. package/lib/styles/calendar-navigation.d.ts +2 -6
  95. package/lib/styles/calendar-navigation.js +64 -104
  96. package/lib/styles/calendar.d.ts +1 -2
  97. package/lib/styles/calendar.js +9 -22
  98. package/lib/styles/checkbox.d.ts +0 -1
  99. package/lib/styles/checkbox.js +45 -94
  100. package/lib/styles/copy.d.ts +0 -1
  101. package/lib/styles/copy.js +67 -106
  102. package/lib/styles/custom-scrollbar.d.ts +1 -2
  103. package/lib/styles/custom-scrollbar.js +80 -115
  104. package/lib/styles/date-picker.d.ts +1 -5
  105. package/lib/styles/date-picker.js +261 -335
  106. package/lib/styles/field-size.d.ts +6 -0
  107. package/lib/styles/field-size.js +91 -0
  108. package/lib/styles/file-upload.d.ts +1 -2
  109. package/lib/styles/file-upload.js +143 -188
  110. package/lib/styles/icon.d.ts +2 -6
  111. package/lib/styles/icon.js +92 -170
  112. package/lib/styles/input.d.ts +1 -6
  113. package/lib/styles/input.js +125 -290
  114. package/lib/styles/modal.d.ts +1 -2
  115. package/lib/styles/modal.js +71 -108
  116. package/lib/styles/option.d.ts +2 -6
  117. package/lib/styles/option.js +49 -64
  118. package/lib/styles/popup.d.ts +1 -2
  119. package/lib/styles/popup.js +42 -77
  120. package/lib/styles/radio.d.ts +0 -1
  121. package/lib/styles/radio.js +69 -110
  122. package/lib/styles/resize-observer.d.ts +1 -2
  123. package/lib/styles/resize-observer.js +2 -12
  124. package/lib/styles/scroll-container.d.ts +1 -2
  125. package/lib/styles/scroll-container.js +100 -149
  126. package/lib/styles/select-base.d.ts +0 -1
  127. package/lib/styles/select-base.js +597 -785
  128. package/lib/styles/select.d.ts +1 -2
  129. package/lib/styles/select.js +140 -236
  130. package/lib/styles/step.d.ts +1 -2
  131. package/lib/styles/step.js +22 -33
  132. package/lib/styles/switch.d.ts +0 -1
  133. package/lib/styles/switch.js +34 -73
  134. package/lib/styles/tab.d.ts +1 -2
  135. package/lib/styles/tab.js +22 -34
  136. package/lib/styles/tabs.d.ts +3 -11
  137. package/lib/styles/tabs.js +190 -222
  138. package/lib/styles/tag.d.ts +1 -5
  139. package/lib/styles/tag.js +136 -218
  140. package/lib/styles/textarea.d.ts +1 -2
  141. package/lib/styles/textarea.js +210 -319
  142. package/lib/styles/tooltip.d.ts +0 -1
  143. package/lib/styles/tooltip.js +3 -13
  144. package/lib/styles/wizard.d.ts +5 -21
  145. package/lib/styles/wizard.js +170 -306
  146. package/lib/types/common.d.ts +2 -2
  147. package/lib/types/common.js +6 -17
  148. package/lib/utils/calendar-utils.d.ts +4 -21
  149. package/lib/utils/calendar-utils.js +100 -273
  150. package/lib/utils/custom-scrollbar.d.ts +6 -20
  151. package/lib/utils/custom-scrollbar.js +273 -317
  152. package/lib/utils/flavor-sheet.d.ts +0 -1
  153. package/lib/utils/flavor-sheet.js +14 -37
  154. package/lib/utils/icon-registry.d.ts +0 -2
  155. package/lib/utils/icon-registry.js +137 -243
  156. package/lib/utils/icons.d.ts +0 -1
  157. package/lib/utils/icons.js +0 -9
  158. package/lib/utils/loader-registry.d.ts +0 -1
  159. package/lib/utils/loader-registry.js +3 -35
  160. package/lib/utils/locale.d.ts +2 -23
  161. package/lib/utils/locale.js +34 -120
  162. package/lib/utils/mobile.d.ts +0 -1
  163. package/lib/utils/mobile.js +1 -18
  164. package/lib/utils/number-format.d.ts +6 -3
  165. package/lib/utils/number-format.js +54 -110
  166. package/lib/utils/positioning.d.ts +50 -7
  167. package/lib/utils/positioning.js +224 -234
  168. package/lib/utils/property-capture.d.ts +5 -27
  169. package/lib/utils/property-capture.js +36 -144
  170. package/lib/utils/property-manager.d.ts +0 -1
  171. package/lib/utils/property-manager.js +126 -196
  172. package/lib/utils/resize-observer.d.ts +0 -1
  173. package/lib/utils/resize-observer.js +23 -59
  174. package/lib/utils/scroll-lock.d.ts +4 -11
  175. package/lib/utils/scroll-lock.js +65 -172
  176. package/lib/utils/styles.d.ts +0 -1
  177. package/lib/utils/styles.js +17 -41
  178. package/lib/version.d.ts +1 -2
  179. package/lib/version.js +1 -11
  180. package/package.json +4 -4
  181. package/lib/base/ty-component.d.ts.map +0 -1
  182. package/lib/base/ty-component.js.map +0 -1
  183. package/lib/components/button.d.ts.map +0 -1
  184. package/lib/components/button.js.map +0 -1
  185. package/lib/components/calendar-month.d.ts.map +0 -1
  186. package/lib/components/calendar-month.js.map +0 -1
  187. package/lib/components/calendar-navigation.d.ts.map +0 -1
  188. package/lib/components/calendar-navigation.js.map +0 -1
  189. package/lib/components/calendar.d.ts.map +0 -1
  190. package/lib/components/calendar.js.map +0 -1
  191. package/lib/components/checkbox.d.ts.map +0 -1
  192. package/lib/components/checkbox.js.map +0 -1
  193. package/lib/components/copy.d.ts.map +0 -1
  194. package/lib/components/copy.js.map +0 -1
  195. package/lib/components/date-picker.d.ts.map +0 -1
  196. package/lib/components/date-picker.js.map +0 -1
  197. package/lib/components/file-upload.d.ts.map +0 -1
  198. package/lib/components/file-upload.js.map +0 -1
  199. package/lib/components/icon.d.ts.map +0 -1
  200. package/lib/components/icon.js.map +0 -1
  201. package/lib/components/input.d.ts.map +0 -1
  202. package/lib/components/input.js.map +0 -1
  203. package/lib/components/modal.d.ts.map +0 -1
  204. package/lib/components/modal.js.map +0 -1
  205. package/lib/components/option.d.ts.map +0 -1
  206. package/lib/components/option.js.map +0 -1
  207. package/lib/components/popup.d.ts.map +0 -1
  208. package/lib/components/popup.js.map +0 -1
  209. package/lib/components/radio.d.ts.map +0 -1
  210. package/lib/components/radio.js.map +0 -1
  211. package/lib/components/resize-observer.d.ts.map +0 -1
  212. package/lib/components/resize-observer.js.map +0 -1
  213. package/lib/components/scroll-container.d.ts.map +0 -1
  214. package/lib/components/scroll-container.js.map +0 -1
  215. package/lib/components/select.d.ts.map +0 -1
  216. package/lib/components/select.js.map +0 -1
  217. package/lib/components/selected-tags.d.ts.map +0 -1
  218. package/lib/components/selected-tags.js.map +0 -1
  219. package/lib/components/step.d.ts.map +0 -1
  220. package/lib/components/step.js.map +0 -1
  221. package/lib/components/switch.d.ts.map +0 -1
  222. package/lib/components/switch.js.map +0 -1
  223. package/lib/components/tab.d.ts.map +0 -1
  224. package/lib/components/tab.js.map +0 -1
  225. package/lib/components/tabs.d.ts.map +0 -1
  226. package/lib/components/tabs.js.map +0 -1
  227. package/lib/components/tag.d.ts.map +0 -1
  228. package/lib/components/tag.js.map +0 -1
  229. package/lib/components/textarea.d.ts.map +0 -1
  230. package/lib/components/textarea.js.map +0 -1
  231. package/lib/components/tooltip.d.ts.map +0 -1
  232. package/lib/components/tooltip.js.map +0 -1
  233. package/lib/components/wizard.d.ts.map +0 -1
  234. package/lib/components/wizard.js.map +0 -1
  235. package/lib/icons/fontawesome/brands.d.ts.map +0 -1
  236. package/lib/icons/fontawesome/brands.js.map +0 -1
  237. package/lib/icons/fontawesome/regular.d.ts.map +0 -1
  238. package/lib/icons/fontawesome/regular.js.map +0 -1
  239. package/lib/icons/fontawesome/solid.d.ts.map +0 -1
  240. package/lib/icons/fontawesome/solid.js.map +0 -1
  241. package/lib/icons/heroicons/micro.d.ts.map +0 -1
  242. package/lib/icons/heroicons/micro.js.map +0 -1
  243. package/lib/icons/heroicons/mini.d.ts.map +0 -1
  244. package/lib/icons/heroicons/mini.js.map +0 -1
  245. package/lib/icons/heroicons/outline.d.ts.map +0 -1
  246. package/lib/icons/heroicons/outline.js.map +0 -1
  247. package/lib/icons/heroicons/solid.d.ts.map +0 -1
  248. package/lib/icons/heroicons/solid.js.map +0 -1
  249. package/lib/icons/lucide.d.ts.map +0 -1
  250. package/lib/icons/lucide.js.map +0 -1
  251. package/lib/icons/material/filled.d.ts.map +0 -1
  252. package/lib/icons/material/filled.js.map +0 -1
  253. package/lib/icons/material/outlined.d.ts.map +0 -1
  254. package/lib/icons/material/outlined.js.map +0 -1
  255. package/lib/icons/material/round.d.ts.map +0 -1
  256. package/lib/icons/material/round.js.map +0 -1
  257. package/lib/icons/material/sharp.d.ts.map +0 -1
  258. package/lib/icons/material/sharp.js.map +0 -1
  259. package/lib/icons/material/two-tone.d.ts.map +0 -1
  260. package/lib/icons/material/two-tone.js.map +0 -1
  261. package/lib/index.d.ts.map +0 -1
  262. package/lib/index.js.map +0 -1
  263. package/lib/styles/button.d.ts.map +0 -1
  264. package/lib/styles/button.js.map +0 -1
  265. package/lib/styles/calendar-month.d.ts.map +0 -1
  266. package/lib/styles/calendar-month.js.map +0 -1
  267. package/lib/styles/calendar-navigation.d.ts.map +0 -1
  268. package/lib/styles/calendar-navigation.js.map +0 -1
  269. package/lib/styles/calendar.d.ts.map +0 -1
  270. package/lib/styles/calendar.js.map +0 -1
  271. package/lib/styles/checkbox.d.ts.map +0 -1
  272. package/lib/styles/checkbox.js.map +0 -1
  273. package/lib/styles/copy.d.ts.map +0 -1
  274. package/lib/styles/copy.js.map +0 -1
  275. package/lib/styles/custom-scrollbar.d.ts.map +0 -1
  276. package/lib/styles/custom-scrollbar.js.map +0 -1
  277. package/lib/styles/date-picker.d.ts.map +0 -1
  278. package/lib/styles/date-picker.js.map +0 -1
  279. package/lib/styles/file-upload.d.ts.map +0 -1
  280. package/lib/styles/file-upload.js.map +0 -1
  281. package/lib/styles/icon.d.ts.map +0 -1
  282. package/lib/styles/icon.js.map +0 -1
  283. package/lib/styles/input.d.ts.map +0 -1
  284. package/lib/styles/input.js.map +0 -1
  285. package/lib/styles/modal.d.ts.map +0 -1
  286. package/lib/styles/modal.js.map +0 -1
  287. package/lib/styles/multiselect.d.ts +0 -8
  288. package/lib/styles/multiselect.d.ts.map +0 -1
  289. package/lib/styles/multiselect.js +0 -849
  290. package/lib/styles/multiselect.js.map +0 -1
  291. package/lib/styles/option.d.ts.map +0 -1
  292. package/lib/styles/option.js.map +0 -1
  293. package/lib/styles/popup.d.ts.map +0 -1
  294. package/lib/styles/popup.js.map +0 -1
  295. package/lib/styles/radio.d.ts.map +0 -1
  296. package/lib/styles/radio.js.map +0 -1
  297. package/lib/styles/resize-observer.d.ts.map +0 -1
  298. package/lib/styles/resize-observer.js.map +0 -1
  299. package/lib/styles/scroll-container.d.ts.map +0 -1
  300. package/lib/styles/scroll-container.js.map +0 -1
  301. package/lib/styles/select-base.d.ts.map +0 -1
  302. package/lib/styles/select-base.js.map +0 -1
  303. package/lib/styles/select.d.ts.map +0 -1
  304. package/lib/styles/select.js.map +0 -1
  305. package/lib/styles/step.d.ts.map +0 -1
  306. package/lib/styles/step.js.map +0 -1
  307. package/lib/styles/switch.d.ts.map +0 -1
  308. package/lib/styles/switch.js.map +0 -1
  309. package/lib/styles/tab.d.ts.map +0 -1
  310. package/lib/styles/tab.js.map +0 -1
  311. package/lib/styles/tabs.d.ts.map +0 -1
  312. package/lib/styles/tabs.js.map +0 -1
  313. package/lib/styles/tag.d.ts.map +0 -1
  314. package/lib/styles/tag.js.map +0 -1
  315. package/lib/styles/textarea.d.ts.map +0 -1
  316. package/lib/styles/textarea.js.map +0 -1
  317. package/lib/styles/tooltip.d.ts.map +0 -1
  318. package/lib/styles/tooltip.js.map +0 -1
  319. package/lib/styles/wizard.d.ts.map +0 -1
  320. package/lib/styles/wizard.js.map +0 -1
  321. package/lib/types/common.d.ts.map +0 -1
  322. package/lib/types/common.js.map +0 -1
  323. package/lib/utils/calendar-utils.d.ts.map +0 -1
  324. package/lib/utils/calendar-utils.js.map +0 -1
  325. package/lib/utils/custom-scrollbar.d.ts.map +0 -1
  326. package/lib/utils/custom-scrollbar.js.map +0 -1
  327. package/lib/utils/flavor-sheet.d.ts.map +0 -1
  328. package/lib/utils/flavor-sheet.js.map +0 -1
  329. package/lib/utils/icon-registry.d.ts.map +0 -1
  330. package/lib/utils/icon-registry.js.map +0 -1
  331. package/lib/utils/icons.d.ts.map +0 -1
  332. package/lib/utils/icons.js.map +0 -1
  333. package/lib/utils/loader-registry.d.ts.map +0 -1
  334. package/lib/utils/loader-registry.js.map +0 -1
  335. package/lib/utils/locale.d.ts.map +0 -1
  336. package/lib/utils/locale.js.map +0 -1
  337. package/lib/utils/mobile.d.ts.map +0 -1
  338. package/lib/utils/mobile.js.map +0 -1
  339. package/lib/utils/number-format.d.ts.map +0 -1
  340. package/lib/utils/number-format.js.map +0 -1
  341. package/lib/utils/parse-boolean.d.ts +0 -39
  342. package/lib/utils/parse-boolean.d.ts.map +0 -1
  343. package/lib/utils/parse-boolean.js +0 -58
  344. package/lib/utils/parse-boolean.js.map +0 -1
  345. package/lib/utils/positioning.d.ts.map +0 -1
  346. package/lib/utils/positioning.js.map +0 -1
  347. package/lib/utils/property-capture.d.ts.map +0 -1
  348. package/lib/utils/property-capture.js.map +0 -1
  349. package/lib/utils/property-manager.d.ts.map +0 -1
  350. package/lib/utils/property-manager.js.map +0 -1
  351. package/lib/utils/resize-observer.d.ts.map +0 -1
  352. package/lib/utils/resize-observer.js.map +0 -1
  353. package/lib/utils/scroll-lock.d.ts.map +0 -1
  354. package/lib/utils/scroll-lock.js.map +0 -1
  355. package/lib/utils/styles.d.ts.map +0 -1
  356. package/lib/utils/styles.js.map +0 -1
  357. package/lib/version.d.ts.map +0 -1
  358. package/lib/version.js.map +0 -1
package/lib/utils/custom-scrollbar.js CHANGED
@@ -1,320 +1,276 @@
1
- /**
2
- * CustomScrollbar - Reusable scrollbar utility
3
- *
4
- * Attaches a custom rendered scrollbar (vertical and/or horizontal) to any
5
- * scrollable element. Uses the overlay approach: native overflow:auto is
6
- * preserved for scroll physics, native scrollbar is hidden via CSS,
7
- * and custom track/thumb elements are synced on top.
8
- *
9
- * Usage:
10
- * const scrollbar = new CustomScrollbar(scrollEl, { vertical: true })
11
- * // scrollbar.trackY, scrollbar.thumbY — append these to your DOM
12
- * // scrollbar.trackX, scrollbar.thumbX — for horizontal
13
- * scrollbar.destroy() // cleanup
14
- *
15
- * CSS classes applied:
16
- * .ty-scrollbar-track-y / .ty-scrollbar-track-x
17
- * .ty-scrollbar-thumb-y / .ty-scrollbar-thumb-x
18
- * .has-overflow — when content overflows
19
- * .dragging — during thumb drag
20
- * .scrolling — briefly after scroll (auto-hide)
21
- */
22
- /**
23
- * Check if custom scrollbar is enabled globally.
24
- * Default: true (custom scrollbar on).
25
- * Set data-ty-scrollbar="native" on <html> to opt out.
26
- */
27
1
  export function isCustomScrollbarEnabled() {
28
- return document.documentElement.getAttribute('data-ty-scrollbar') !== 'native';
2
+ return document.documentElement.getAttribute('data-ty-scrollbar') !== 'native';
29
3
  }
30
4
  export class CustomScrollbar {
31
- constructor(scrollEl, options = {}) {
32
- // Elements
33
- this.trackY = null;
34
- this.thumbY = null;
35
- this.trackX = null;
36
- this.thumbX = null;
37
- // State
38
- this._isDragging = false;
39
- this._dragAxis = 'y';
40
- this._dragStartPos = 0;
41
- this._dragStartScroll = 0;
42
- this._rafId = null;
43
- this._hideTimeout = null;
44
- this._resizeObserver = null;
45
- this._scrollEl = scrollEl;
46
- this._vertical = options.vertical !== false; // default true
47
- this._horizontal = options.horizontal ?? false;
48
- this._autoHideDelay = options.autoHideDelay ?? 1000;
49
- // Bind handlers
50
- this._onScroll = this._handleScroll.bind(this);
51
- this._onThumbYDown = this._handleThumbYDown.bind(this);
52
- this._onThumbXDown = this._handleThumbXDown.bind(this);
53
- this._onTrackYDown = this._handleTrackYDown.bind(this);
54
- this._onTrackXDown = this._handleTrackXDown.bind(this);
55
- this._onDragMove = this._handleDragMove.bind(this);
56
- this._onDragEnd = this._handleDragEnd.bind(this);
57
- // Create elements
58
- if (this._vertical) {
59
- this.trackY = this._createTrack('y');
60
- this.thumbY = this._createThumb('y');
61
- this.trackY.appendChild(this.thumbY);
62
- }
63
- if (this._horizontal) {
64
- this.trackX = this._createTrack('x');
65
- this.thumbX = this._createThumb('x');
66
- this.trackX.appendChild(this.thumbX);
67
- }
68
- // Attach listeners
69
- this._scrollEl.addEventListener('scroll', this._onScroll, { passive: true });
70
- if (this.thumbY) {
71
- this.thumbY.addEventListener('pointerdown', this._onThumbYDown);
72
- }
73
- if (this.trackY) {
74
- this.trackY.addEventListener('pointerdown', this._onTrackYDown);
75
- }
76
- if (this.thumbX) {
77
- this.thumbX.addEventListener('pointerdown', this._onThumbXDown);
78
- }
79
- if (this.trackX) {
80
- this.trackX.addEventListener('pointerdown', this._onTrackXDown);
81
- }
82
- // ResizeObserver
83
- this._resizeObserver = new ResizeObserver(() => this.update());
84
- this._resizeObserver.observe(this._scrollEl);
85
- // Initial update
86
- this.update();
87
- }
88
- // ============ Element Creation ============
89
- _createTrack(axis) {
90
- const el = document.createElement('div');
91
- el.className = `ty-scrollbar-track-${axis}`;
92
- return el;
93
- }
94
- _createThumb(axis) {
95
- const el = document.createElement('div');
96
- el.className = `ty-scrollbar-thumb-${axis}`;
97
- return el;
98
- }
99
- // ============ Public API ============
100
- /** Force update thumb size and position */
101
- update() {
102
- this._updateVertical();
103
- this._updateHorizontal();
104
- }
105
- /** Reset scroll position */
106
- scrollToTop(smooth = false) {
107
- this._scrollEl.scrollTo({ top: 0, behavior: smooth ? 'smooth' : 'auto' });
108
- }
109
- scrollToBottom(smooth = false) {
110
- this._scrollEl.scrollTo({ top: this._scrollEl.scrollHeight, behavior: smooth ? 'smooth' : 'auto' });
111
- }
112
- scrollToLeft(smooth = false) {
113
- this._scrollEl.scrollTo({ left: 0, behavior: smooth ? 'smooth' : 'auto' });
114
- }
115
- scrollToRight(smooth = false) {
116
- this._scrollEl.scrollTo({ left: this._scrollEl.scrollWidth, behavior: smooth ? 'smooth' : 'auto' });
117
- }
118
- /** Cleanup all listeners and observers */
119
- destroy() {
120
- this._scrollEl.removeEventListener('scroll', this._onScroll);
121
- if (this.thumbY) {
122
- this.thumbY.removeEventListener('pointerdown', this._onThumbYDown);
123
- }
124
- if (this.trackY) {
125
- this.trackY.removeEventListener('pointerdown', this._onTrackYDown);
126
- }
127
- if (this.thumbX) {
128
- this.thumbX.removeEventListener('pointerdown', this._onThumbXDown);
129
- }
130
- if (this.trackX) {
131
- this.trackX.removeEventListener('pointerdown', this._onTrackXDown);
132
- }
133
- if (this._resizeObserver) {
134
- this._resizeObserver.disconnect();
135
- this._resizeObserver = null;
136
- }
137
- if (this._rafId !== null) {
138
- cancelAnimationFrame(this._rafId);
139
- this._rafId = null;
140
- }
141
- if (this._hideTimeout !== null) {
142
- clearTimeout(this._hideTimeout);
143
- this._hideTimeout = null;
144
- }
145
- }
146
- // ============ Scroll Handler ============
147
- _handleScroll() {
148
- if (this._rafId !== null)
149
- return;
150
- this._rafId = requestAnimationFrame(() => {
151
- this._rafId = null;
152
- this._updateThumbPositions();
153
- this._showScrollbars();
154
- });
155
- }
156
- // ============ Update Logic ============
157
- _updateVertical() {
158
- if (!this.trackY || !this.thumbY)
159
- return;
160
- const { scrollHeight, clientHeight } = this._scrollEl;
161
- const hasOverflow = scrollHeight > clientHeight + 2;
162
- this.trackY.classList.toggle('has-overflow', hasOverflow);
163
- if (hasOverflow) {
164
- const ratio = clientHeight / scrollHeight;
165
- this.thumbY.style.height = `${Math.max(ratio * 100, 0)}%`;
166
- }
167
- this._updateThumbY();
168
- }
169
- _updateHorizontal() {
170
- if (!this.trackX || !this.thumbX)
171
- return;
172
- const { scrollWidth, clientWidth } = this._scrollEl;
173
- const hasOverflow = scrollWidth > clientWidth + 2;
174
- this.trackX.classList.toggle('has-overflow', hasOverflow);
175
- if (hasOverflow) {
176
- const ratio = clientWidth / scrollWidth;
177
- this.thumbX.style.width = `${Math.max(ratio * 100, 0)}%`;
178
- }
179
- this._updateThumbX();
180
- }
181
- _updateThumbPositions() {
182
- this._updateThumbY();
183
- this._updateThumbX();
184
- }
185
- _updateThumbY() {
186
- if (!this.trackY || !this.thumbY)
187
- return;
188
- const { scrollTop, scrollHeight, clientHeight } = this._scrollEl;
189
- const maxScroll = scrollHeight - clientHeight;
190
- if (maxScroll <= 0)
191
- return;
192
- const scrollRatio = scrollTop / maxScroll;
193
- const trackHeight = this.trackY.clientHeight;
194
- const thumbHeight = this.thumbY.offsetHeight;
195
- const maxThumbTop = trackHeight - thumbHeight;
196
- this.thumbY.style.top = `${scrollRatio * maxThumbTop}px`;
197
- }
198
- _updateThumbX() {
199
- if (!this.trackX || !this.thumbX)
200
- return;
201
- const { scrollLeft, scrollWidth, clientWidth } = this._scrollEl;
202
- const maxScroll = scrollWidth - clientWidth;
203
- if (maxScroll <= 0)
204
- return;
205
- const scrollRatio = scrollLeft / maxScroll;
206
- const trackWidth = this.trackX.clientWidth;
207
- const thumbWidth = this.thumbX.offsetWidth;
208
- const maxThumbLeft = trackWidth - thumbWidth;
209
- this.thumbX.style.left = `${scrollRatio * maxThumbLeft}px`;
210
- }
211
- // ============ Auto-hide ============
212
- _showScrollbars() {
213
- if (this._isDragging)
214
- return;
215
- this.trackY?.classList.add('scrolling');
216
- this.trackX?.classList.add('scrolling');
217
- if (this._hideTimeout !== null) {
218
- clearTimeout(this._hideTimeout);
219
- }
220
- this._hideTimeout = setTimeout(() => {
221
- this.trackY?.classList.remove('scrolling');
222
- this.trackX?.classList.remove('scrolling');
223
- this._hideTimeout = null;
224
- }, this._autoHideDelay);
225
- }
226
- // ============ Thumb Drag ============
227
- _handleThumbYDown(e) {
228
- if (e.button !== 0)
229
- return;
230
- e.preventDefault();
231
- e.stopPropagation();
232
- this._isDragging = true;
233
- this._dragAxis = 'y';
234
- this._dragStartPos = e.clientY;
235
- this._dragStartScroll = this._scrollEl.scrollTop;
236
- this.thumbY.setPointerCapture(e.pointerId);
237
- this.trackY?.classList.add('dragging');
238
- this.thumbY.addEventListener('pointermove', this._onDragMove);
239
- this.thumbY.addEventListener('pointerup', this._onDragEnd);
240
- this.thumbY.addEventListener('pointercancel', this._onDragEnd);
241
- }
242
- _handleThumbXDown(e) {
243
- if (e.button !== 0)
244
- return;
245
- e.preventDefault();
246
- e.stopPropagation();
247
- this._isDragging = true;
248
- this._dragAxis = 'x';
249
- this._dragStartPos = e.clientX;
250
- this._dragStartScroll = this._scrollEl.scrollLeft;
251
- this.thumbX.setPointerCapture(e.pointerId);
252
- this.trackX?.classList.add('dragging');
253
- this.thumbX.addEventListener('pointermove', this._onDragMove);
254
- this.thumbX.addEventListener('pointerup', this._onDragEnd);
255
- this.thumbX.addEventListener('pointercancel', this._onDragEnd);
256
- }
257
- _handleDragMove(e) {
258
- if (!this._isDragging)
259
- return;
260
- if (this._dragAxis === 'y') {
261
- const delta = e.clientY - this._dragStartPos;
262
- const { scrollHeight, clientHeight } = this._scrollEl;
263
- const trackHeight = this.trackY.clientHeight;
264
- const thumbHeight = this.thumbY.offsetHeight;
265
- const maxThumbTop = trackHeight - thumbHeight;
266
- if (maxThumbTop <= 0)
267
- return;
268
- const scrollRatio = (scrollHeight - clientHeight) / maxThumbTop;
269
- this._scrollEl.scrollTop = this._dragStartScroll + delta * scrollRatio;
270
- }
271
- else {
272
- const delta = e.clientX - this._dragStartPos;
273
- const { scrollWidth, clientWidth } = this._scrollEl;
274
- const trackWidth = this.trackX.clientWidth;
275
- const thumbWidth = this.thumbX.offsetWidth;
276
- const maxThumbLeft = trackWidth - thumbWidth;
277
- if (maxThumbLeft <= 0)
278
- return;
279
- const scrollRatio = (scrollWidth - clientWidth) / maxThumbLeft;
280
- this._scrollEl.scrollLeft = this._dragStartScroll + delta * scrollRatio;
281
- }
282
- }
283
- _handleDragEnd(e) {
284
- const thumb = this._dragAxis === 'y' ? this.thumbY : this.thumbX;
285
- const track = this._dragAxis === 'y' ? this.trackY : this.trackX;
286
- this._isDragging = false;
287
- thumb.releasePointerCapture(e.pointerId);
288
- track?.classList.remove('dragging');
289
- thumb.removeEventListener('pointermove', this._onDragMove);
290
- thumb.removeEventListener('pointerup', this._onDragEnd);
291
- thumb.removeEventListener('pointercancel', this._onDragEnd);
292
- this._showScrollbars();
293
- }
294
- // ============ Track Click ============
295
- _handleTrackYDown(e) {
296
- if (e.target === this.thumbY || e.button !== 0)
297
- return;
298
- e.preventDefault();
299
- const trackRect = this.trackY.getBoundingClientRect();
300
- const clickRatio = (e.clientY - trackRect.top) / trackRect.height;
301
- const { scrollHeight, clientHeight } = this._scrollEl;
302
- this._scrollEl.scrollTo({
303
- top: clickRatio * (scrollHeight - clientHeight),
304
- behavior: 'smooth'
305
- });
306
- }
307
- _handleTrackXDown(e) {
308
- if (e.target === this.thumbX || e.button !== 0)
309
- return;
310
- e.preventDefault();
311
- const trackRect = this.trackX.getBoundingClientRect();
312
- const clickRatio = (e.clientX - trackRect.left) / trackRect.width;
313
- const { scrollWidth, clientWidth } = this._scrollEl;
314
- this._scrollEl.scrollTo({
315
- left: clickRatio * (scrollWidth - clientWidth),
316
- behavior: 'smooth'
317
- });
318
- }
319
- }
320
- //# sourceMappingURL=custom-scrollbar.js.map
5
+ constructor(scrollEl, options = {}) {
6
+ this.trackY = null;
7
+ this.thumbY = null;
8
+ this.trackX = null;
9
+ this.thumbX = null;
10
+ this._isDragging = false;
11
+ this._dragAxis = 'y';
12
+ this._dragStartPos = 0;
13
+ this._dragStartScroll = 0;
14
+ this._rafId = null;
15
+ this._hideTimeout = null;
16
+ this._resizeObserver = null;
17
+ this._scrollEl = scrollEl;
18
+ this._vertical = options.vertical !== false;
19
+ this._horizontal = options.horizontal ?? false;
20
+ this._autoHideDelay = options.autoHideDelay ?? 1000;
21
+ this._onScroll = this._handleScroll.bind(this);
22
+ this._onThumbYDown = this._handleThumbYDown.bind(this);
23
+ this._onThumbXDown = this._handleThumbXDown.bind(this);
24
+ this._onTrackYDown = this._handleTrackYDown.bind(this);
25
+ this._onTrackXDown = this._handleTrackXDown.bind(this);
26
+ this._onDragMove = this._handleDragMove.bind(this);
27
+ this._onDragEnd = this._handleDragEnd.bind(this);
28
+ if (this._vertical) {
29
+ this.trackY = this._createTrack('y');
30
+ this.thumbY = this._createThumb('y');
31
+ this.trackY.appendChild(this.thumbY);
32
+ }
33
+ if (this._horizontal) {
34
+ this.trackX = this._createTrack('x');
35
+ this.thumbX = this._createThumb('x');
36
+ this.trackX.appendChild(this.thumbX);
37
+ }
38
+ this._scrollEl.addEventListener('scroll', this._onScroll, { passive: true });
39
+ if (this.thumbY) {
40
+ this.thumbY.addEventListener('pointerdown', this._onThumbYDown);
41
+ }
42
+ if (this.trackY) {
43
+ this.trackY.addEventListener('pointerdown', this._onTrackYDown);
44
+ }
45
+ if (this.thumbX) {
46
+ this.thumbX.addEventListener('pointerdown', this._onThumbXDown);
47
+ }
48
+ if (this.trackX) {
49
+ this.trackX.addEventListener('pointerdown', this._onTrackXDown);
50
+ }
51
+ this._resizeObserver = new ResizeObserver(() => this.update());
52
+ this._resizeObserver.observe(this._scrollEl);
53
+ this.update();
54
+ }
55
+ _createTrack(axis) {
56
+ const el = document.createElement('div');
57
+ el.className = `ty-scrollbar-track-${axis}`;
58
+ return el;
59
+ }
60
+ _createThumb(axis) {
61
+ const el = document.createElement('div');
62
+ el.className = `ty-scrollbar-thumb-${axis}`;
63
+ return el;
64
+ }
65
+ update() {
66
+ this._updateVertical();
67
+ this._updateHorizontal();
68
+ }
69
+ scrollToTop(smooth = false) {
70
+ this._scrollEl.scrollTo({ top: 0, behavior: smooth ? 'smooth' : 'auto' });
71
+ }
72
+ scrollToBottom(smooth = false) {
73
+ this._scrollEl.scrollTo({ top: this._scrollEl.scrollHeight, behavior: smooth ? 'smooth' : 'auto' });
74
+ }
75
+ scrollToLeft(smooth = false) {
76
+ this._scrollEl.scrollTo({ left: 0, behavior: smooth ? 'smooth' : 'auto' });
77
+ }
78
+ scrollToRight(smooth = false) {
79
+ this._scrollEl.scrollTo({ left: this._scrollEl.scrollWidth, behavior: smooth ? 'smooth' : 'auto' });
80
+ }
81
+ destroy() {
82
+ this._scrollEl.removeEventListener('scroll', this._onScroll);
83
+ if (this.thumbY) {
84
+ this.thumbY.removeEventListener('pointerdown', this._onThumbYDown);
85
+ }
86
+ if (this.trackY) {
87
+ this.trackY.removeEventListener('pointerdown', this._onTrackYDown);
88
+ }
89
+ if (this.thumbX) {
90
+ this.thumbX.removeEventListener('pointerdown', this._onThumbXDown);
91
+ }
92
+ if (this.trackX) {
93
+ this.trackX.removeEventListener('pointerdown', this._onTrackXDown);
94
+ }
95
+ if (this._resizeObserver) {
96
+ this._resizeObserver.disconnect();
97
+ this._resizeObserver = null;
98
+ }
99
+ if (this._rafId !== null) {
100
+ cancelAnimationFrame(this._rafId);
101
+ this._rafId = null;
102
+ }
103
+ if (this._hideTimeout !== null) {
104
+ clearTimeout(this._hideTimeout);
105
+ this._hideTimeout = null;
106
+ }
107
+ }
108
+ _handleScroll() {
109
+ if (this._rafId !== null)
110
+ return;
111
+ this._rafId = requestAnimationFrame(() => {
112
+ this._rafId = null;
113
+ this._updateThumbPositions();
114
+ this._showScrollbars();
115
+ });
116
+ }
117
+ _updateVertical() {
118
+ if (!this.trackY || !this.thumbY)
119
+ return;
120
+ const { scrollHeight, clientHeight } = this._scrollEl;
121
+ const hasOverflow = scrollHeight > clientHeight + 2;
122
+ this.trackY.classList.toggle('has-overflow', hasOverflow);
123
+ if (hasOverflow) {
124
+ const ratio = clientHeight / scrollHeight;
125
+ this.thumbY.style.height = `${Math.max(ratio * 100, 0)}%`;
126
+ }
127
+ this._updateThumbY();
128
+ }
129
+ _updateHorizontal() {
130
+ if (!this.trackX || !this.thumbX)
131
+ return;
132
+ const { scrollWidth, clientWidth } = this._scrollEl;
133
+ const hasOverflow = scrollWidth > clientWidth + 2;
134
+ this.trackX.classList.toggle('has-overflow', hasOverflow);
135
+ if (hasOverflow) {
136
+ const ratio = clientWidth / scrollWidth;
137
+ this.thumbX.style.width = `${Math.max(ratio * 100, 0)}%`;
138
+ }
139
+ this._updateThumbX();
140
+ }
141
+ _updateThumbPositions() {
142
+ this._updateThumbY();
143
+ this._updateThumbX();
144
+ }
145
+ _updateThumbY() {
146
+ if (!this.trackY || !this.thumbY)
147
+ return;
148
+ const { scrollTop, scrollHeight, clientHeight } = this._scrollEl;
149
+ const maxScroll = scrollHeight - clientHeight;
150
+ if (maxScroll <= 0)
151
+ return;
152
+ const scrollRatio = scrollTop / maxScroll;
153
+ const trackHeight = this.trackY.clientHeight;
154
+ const thumbHeight = this.thumbY.offsetHeight;
155
+ const maxThumbTop = trackHeight - thumbHeight;
156
+ this.thumbY.style.top = `${scrollRatio * maxThumbTop}px`;
157
+ }
158
+ _updateThumbX() {
159
+ if (!this.trackX || !this.thumbX)
160
+ return;
161
+ const { scrollLeft, scrollWidth, clientWidth } = this._scrollEl;
162
+ const maxScroll = scrollWidth - clientWidth;
163
+ if (maxScroll <= 0)
164
+ return;
165
+ const scrollRatio = scrollLeft / maxScroll;
166
+ const trackWidth = this.trackX.clientWidth;
167
+ const thumbWidth = this.thumbX.offsetWidth;
168
+ const maxThumbLeft = trackWidth - thumbWidth;
169
+ this.thumbX.style.left = `${scrollRatio * maxThumbLeft}px`;
170
+ }
171
+ _showScrollbars() {
172
+ if (this._isDragging)
173
+ return;
174
+ this.trackY?.classList.add('scrolling');
175
+ this.trackX?.classList.add('scrolling');
176
+ if (this._hideTimeout !== null) {
177
+ clearTimeout(this._hideTimeout);
178
+ }
179
+ this._hideTimeout = setTimeout(() => {
180
+ this.trackY?.classList.remove('scrolling');
181
+ this.trackX?.classList.remove('scrolling');
182
+ this._hideTimeout = null;
183
+ }, this._autoHideDelay);
184
+ }
185
+ _handleThumbYDown(e) {
186
+ if (e.button !== 0)
187
+ return;
188
+ e.preventDefault();
189
+ e.stopPropagation();
190
+ this._isDragging = true;
191
+ this._dragAxis = 'y';
192
+ this._dragStartPos = e.clientY;
193
+ this._dragStartScroll = this._scrollEl.scrollTop;
194
+ this.thumbY.setPointerCapture(e.pointerId);
195
+ this.trackY?.classList.add('dragging');
196
+ this.thumbY.addEventListener('pointermove', this._onDragMove);
197
+ this.thumbY.addEventListener('pointerup', this._onDragEnd);
198
+ this.thumbY.addEventListener('pointercancel', this._onDragEnd);
199
+ }
200
+ _handleThumbXDown(e) {
201
+ if (e.button !== 0)
202
+ return;
203
+ e.preventDefault();
204
+ e.stopPropagation();
205
+ this._isDragging = true;
206
+ this._dragAxis = 'x';
207
+ this._dragStartPos = e.clientX;
208
+ this._dragStartScroll = this._scrollEl.scrollLeft;
209
+ this.thumbX.setPointerCapture(e.pointerId);
210
+ this.trackX?.classList.add('dragging');
211
+ this.thumbX.addEventListener('pointermove', this._onDragMove);
212
+ this.thumbX.addEventListener('pointerup', this._onDragEnd);
213
+ this.thumbX.addEventListener('pointercancel', this._onDragEnd);
214
+ }
215
+ _handleDragMove(e) {
216
+ if (!this._isDragging)
217
+ return;
218
+ if (this._dragAxis === 'y') {
219
+ const delta = e.clientY - this._dragStartPos;
220
+ const { scrollHeight, clientHeight } = this._scrollEl;
221
+ const trackHeight = this.trackY.clientHeight;
222
+ const thumbHeight = this.thumbY.offsetHeight;
223
+ const maxThumbTop = trackHeight - thumbHeight;
224
+ if (maxThumbTop <= 0)
225
+ return;
226
+ const scrollRatio = (scrollHeight - clientHeight) / maxThumbTop;
227
+ this._scrollEl.scrollTop = this._dragStartScroll + delta * scrollRatio;
228
+ }
229
+ else {
230
+ const delta = e.clientX - this._dragStartPos;
231
+ const { scrollWidth, clientWidth } = this._scrollEl;
232
+ const trackWidth = this.trackX.clientWidth;
233
+ const thumbWidth = this.thumbX.offsetWidth;
234
+ const maxThumbLeft = trackWidth - thumbWidth;
235
+ if (maxThumbLeft <= 0)
236
+ return;
237
+ const scrollRatio = (scrollWidth - clientWidth) / maxThumbLeft;
238
+ this._scrollEl.scrollLeft = this._dragStartScroll + delta * scrollRatio;
239
+ }
240
+ }
241
+ _handleDragEnd(e) {
242
+ const thumb = this._dragAxis === 'y' ? this.thumbY : this.thumbX;
243
+ const track = this._dragAxis === 'y' ? this.trackY : this.trackX;
244
+ this._isDragging = false;
245
+ thumb.releasePointerCapture(e.pointerId);
246
+ track?.classList.remove('dragging');
247
+ thumb.removeEventListener('pointermove', this._onDragMove);
248
+ thumb.removeEventListener('pointerup', this._onDragEnd);
249
+ thumb.removeEventListener('pointercancel', this._onDragEnd);
250
+ this._showScrollbars();
251
+ }
252
+ _handleTrackYDown(e) {
253
+ if (e.target === this.thumbY || e.button !== 0)
254
+ return;
255
+ e.preventDefault();
256
+ const trackRect = this.trackY.getBoundingClientRect();
257
+ const clickRatio = (e.clientY - trackRect.top) / trackRect.height;
258
+ const { scrollHeight, clientHeight } = this._scrollEl;
259
+ this._scrollEl.scrollTo({
260
+ top: clickRatio * (scrollHeight - clientHeight),
261
+ behavior: 'smooth'
262
+ });
263
+ }
264
+ _handleTrackXDown(e) {
265
+ if (e.target === this.thumbX || e.button !== 0)
266
+ return;
267
+ e.preventDefault();
268
+ const trackRect = this.trackX.getBoundingClientRect();
269
+ const clickRatio = (e.clientX - trackRect.left) / trackRect.width;
270
+ const { scrollWidth, clientWidth } = this._scrollEl;
271
+ this._scrollEl.scrollTo({
272
+ left: clickRatio * (scrollWidth - clientWidth),
273
+ behavior: 'smooth'
274
+ });
275
+ }
276
+ }
package/lib/utils/flavor-sheet.d.ts CHANGED
@@ -29,4 +29,3 @@ export interface CustomFlavorParts {
29
29
  * adopted into the shadow root. Returns the sheet to store for the next call.
30
30
  */
31
31
  export declare function syncCustomFlavorSheet(shadow: ShadowRoot, sheet: CSSStyleSheet | null, flavor: unknown, css: (parts: CustomFlavorParts) => string): CSSStyleSheet | null;
32
- //# sourceMappingURL=flavor-sheet.d.ts.map