@svgrid/grid 2.6.16 → 2.6.17

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 (449) hide show
  1. package/CHANGELOG.md +346 -346
  2. package/README.md +199 -199
  3. package/dist/DockNodeView.svelte.d.ts +1 -1
  4. package/dist/DockPopoutHost.svelte.d.ts +1 -1
  5. package/dist/FlexRender.svelte +96 -96
  6. package/dist/FlexRender.svelte.d.ts +1 -1
  7. package/dist/GridFooter.svelte +181 -178
  8. package/dist/GridFooter.svelte.d.ts +3 -3
  9. package/dist/GridMenus.svelte +705 -705
  10. package/dist/GridMenus.svelte.d.ts +3 -3
  11. package/dist/SvAccordion.svelte.d.ts +3 -3
  12. package/dist/SvAutoComplete.svelte +165 -165
  13. package/dist/SvAutoComplete.svelte.d.ts +2 -2
  14. package/dist/SvAvatar.svelte +75 -75
  15. package/dist/SvBreadcrumb.svelte.d.ts +2 -2
  16. package/dist/SvButtonGroup.svelte.d.ts +3 -3
  17. package/dist/SvCalendar.svelte +503 -503
  18. package/dist/SvCalendar.svelte.d.ts +7 -7
  19. package/dist/SvCarousel.svelte +141 -141
  20. package/dist/SvCarousel.svelte.d.ts +1 -1
  21. package/dist/SvCheckBox.svelte +102 -102
  22. package/dist/SvCheckBox.svelte.d.ts +1 -1
  23. package/dist/SvCircularProgress.svelte +109 -109
  24. package/dist/SvColorInput.svelte +181 -181
  25. package/dist/SvColorInput.svelte.d.ts +1 -1
  26. package/dist/SvComboBox.svelte +275 -275
  27. package/dist/SvComboBox.svelte.d.ts +2 -2
  28. package/dist/SvCommand.svelte.d.ts +2 -2
  29. package/dist/SvContextMenu.svelte +116 -116
  30. package/dist/SvCountryInput.svelte +163 -163
  31. package/dist/SvCountryInput.svelte.d.ts +1 -1
  32. package/dist/SvDateRangeInput.svelte.d.ts +3 -3
  33. package/dist/SvDateTimePicker.svelte.d.ts +4 -4
  34. package/dist/SvDockLayout.svelte.d.ts +2 -2
  35. package/dist/SvDockManager.svelte.d.ts +2 -2
  36. package/dist/SvDrawer.svelte +254 -254
  37. package/dist/SvDropDownList.svelte +374 -374
  38. package/dist/SvDropDownList.svelte.d.ts +2 -2
  39. package/dist/SvDurationInput.svelte +126 -126
  40. package/dist/SvDurationInput.svelte.d.ts +1 -1
  41. package/dist/SvField.svelte +293 -293
  42. package/dist/SvField.svelte.d.ts +1 -1
  43. package/dist/SvFileUpload.svelte.d.ts +3 -3
  44. package/dist/SvForm.svelte +437 -437
  45. package/dist/SvForm.svelte.d.ts +4 -4
  46. package/dist/SvGauge.svelte.d.ts +1 -1
  47. package/dist/SvGrid.controller.svelte.d.ts +28 -28
  48. package/dist/SvGrid.controller.svelte.js +117 -45
  49. package/dist/SvGrid.css +2896 -2856
  50. package/dist/SvGrid.helpers.d.ts +2 -2
  51. package/dist/SvGrid.svelte +2956 -2956
  52. package/dist/SvGrid.svelte.d.ts +3 -3
  53. package/dist/SvGrid.types.d.ts +28 -7
  54. package/dist/SvGridCellEditor.svelte +662 -662
  55. package/dist/SvGridCellEditor.svelte.d.ts +2 -2
  56. package/dist/SvGridChart.svelte +1716 -1716
  57. package/dist/SvGridChart.svelte.d.ts +1 -1
  58. package/dist/SvGridChartPanel.svelte +485 -485
  59. package/dist/SvGridChartPanel.svelte.d.ts +2 -2
  60. package/dist/SvGridChartView.svelte +70 -70
  61. package/dist/SvGridChartView.svelte.d.ts +1 -1
  62. package/dist/SvGridDropdown.svelte +728 -728
  63. package/dist/SvGridDropdown.svelte.d.ts +1 -1
  64. package/dist/SvGridSelect.svelte +266 -266
  65. package/dist/SvGridSelect.svelte.d.ts +4 -4
  66. package/dist/SvGroupCell.svelte +116 -116
  67. package/dist/SvGroupCell.svelte.d.ts +1 -1
  68. package/dist/SvHoverCard.svelte.d.ts +1 -1
  69. package/dist/SvListBox.svelte +326 -326
  70. package/dist/SvListBox.svelte.d.ts +2 -2
  71. package/dist/SvMaskedInput.svelte +122 -122
  72. package/dist/SvMaskedInput.svelte.d.ts +1 -1
  73. package/dist/SvMenu.svelte +124 -124
  74. package/dist/SvMenu.svelte.d.ts +1 -1
  75. package/dist/SvMenuList.svelte +146 -146
  76. package/dist/SvMenuList.svelte.d.ts +3 -3
  77. package/dist/SvMenubar.svelte.d.ts +3 -3
  78. package/dist/SvMultiSelect.svelte +289 -289
  79. package/dist/SvMultiSelect.svelte.d.ts +3 -3
  80. package/dist/SvNavPane.svelte.d.ts +1 -1
  81. package/dist/SvNumberInput.svelte +168 -168
  82. package/dist/SvNumberInput.svelte.d.ts +1 -1
  83. package/dist/SvOtpInput.svelte +158 -158
  84. package/dist/SvOtpInput.svelte.d.ts +1 -1
  85. package/dist/SvPasswordInput.svelte +151 -151
  86. package/dist/SvPasswordInput.svelte.d.ts +1 -1
  87. package/dist/SvPhoneInput.svelte +133 -133
  88. package/dist/SvPhoneInput.svelte.d.ts +2 -2
  89. package/dist/SvPopconfirm.svelte.d.ts +1 -1
  90. package/dist/SvPopover.svelte +197 -197
  91. package/dist/SvPopover.svelte.d.ts +1 -1
  92. package/dist/SvProgress.svelte +116 -116
  93. package/dist/SvRadioGroup.svelte +107 -107
  94. package/dist/SvRadioGroup.svelte.d.ts +3 -3
  95. package/dist/SvRating.svelte +112 -112
  96. package/dist/SvRating.svelte.d.ts +1 -1
  97. package/dist/SvResult.svelte +73 -73
  98. package/dist/SvRichText.svelte +211 -211
  99. package/dist/SvRowGroupPanel.svelte +170 -170
  100. package/dist/SvScrollArea.svelte +61 -61
  101. package/dist/SvSegmented.svelte.d.ts +3 -3
  102. package/dist/SvSlider.svelte +203 -203
  103. package/dist/SvSlider.svelte.d.ts +1 -1
  104. package/dist/SvSparkline.svelte.d.ts +1 -1
  105. package/dist/SvSplitter.svelte.d.ts +3 -3
  106. package/dist/SvStepper.svelte.d.ts +2 -2
  107. package/dist/SvSwitchButton.svelte +108 -108
  108. package/dist/SvSwitchButton.svelte.d.ts +1 -1
  109. package/dist/SvTabs.svelte.d.ts +3 -3
  110. package/dist/SvTagsInput.svelte +115 -115
  111. package/dist/SvTagsInput.svelte.d.ts +1 -1
  112. package/dist/SvTextArea.svelte.d.ts +1 -1
  113. package/dist/SvTextInput.svelte +147 -147
  114. package/dist/SvTextInput.svelte.d.ts +1 -1
  115. package/dist/SvTimePicker.svelte +245 -245
  116. package/dist/SvTimePicker.svelte.d.ts +3 -3
  117. package/dist/SvTimeline.svelte.d.ts +2 -2
  118. package/dist/SvToaster.svelte +159 -159
  119. package/dist/SvToggleButton.svelte +85 -85
  120. package/dist/SvToggleButton.svelte.d.ts +1 -1
  121. package/dist/SvTooltip.svelte +161 -161
  122. package/dist/SvTooltip.svelte.d.ts +1 -1
  123. package/dist/SvTour.svelte +208 -208
  124. package/dist/SvTour.svelte.d.ts +3 -3
  125. package/dist/SvTree.svelte +444 -444
  126. package/dist/SvTree.svelte.d.ts +3 -3
  127. package/dist/SvTreeSelect.svelte +235 -235
  128. package/dist/SvTreeSelect.svelte.d.ts +3 -3
  129. package/dist/advanced-filter.svelte.d.ts +1 -1
  130. package/dist/ai.d.ts +1 -1
  131. package/dist/ai.js +1 -1
  132. package/dist/build-api.d.ts +2 -2
  133. package/dist/build-api.js +8 -8
  134. package/dist/builtin-editors.js +1 -1
  135. package/dist/cdn/{GridMenus-CPdy5dxw.js → GridMenus-3kKYmYOE.js} +2 -2
  136. package/dist/cdn/{GridMenus-BLajq_RP.js → GridMenus-BcDiwQ9U.js} +2 -2
  137. package/dist/cdn/{SvDateTimePicker-CHnUkWcH.js → SvDateTimePicker-DSUhIta8.js} +2 -2
  138. package/dist/cdn/{SvDateTimePicker-CRQH_U7E.js → SvDateTimePicker-h9kPyszT.js} +2 -2
  139. package/dist/cdn/{SvGridCellEditor-BGUCzuPB.js → SvGridCellEditor-DkyQO6FV.js} +1 -1
  140. package/dist/cdn/{SvGridCellEditor-G8IMWIws.js → SvGridCellEditor-JpJSRhDx.js} +1 -1
  141. package/dist/cdn/{SvGridChart-BwVos976.js → SvGridChart-Bs2GIR2Q.js} +1 -1
  142. package/dist/cdn/{SvGridChart-BEJmNNx9.js → SvGridChart-CwhFz7GV.js} +1 -1
  143. package/dist/cdn/{SvGridChartPanel-BOknOkrP.js → SvGridChartPanel-1WXuStzM.js} +1 -1
  144. package/dist/cdn/{SvGridChartPanel-D2PjII4O.js → SvGridChartPanel-e5_nqNP9.js} +1 -1
  145. package/dist/cdn/{SvGridChartView-00LPUHL1.js → SvGridChartView-SmPW10dI.js} +1 -1
  146. package/dist/cdn/{SvGridChartView-BhUEJ5ki.js → SvGridChartView-eSPuJE6g.js} +1 -1
  147. package/dist/cdn/{SvGridDropdown-D0VdjeR8.js → SvGridDropdown-B1ZcLpgs.js} +1 -1
  148. package/dist/cdn/{SvGridDropdown-D13MtJ2j.js → SvGridDropdown-CtdbHcIS.js} +1 -1
  149. package/dist/cdn/{src-ogpR-lHu.js → src-D79V6bCA.js} +298 -296
  150. package/dist/cdn/{src-CKpl94Cx.js → src-DMZZVVFd.js} +297 -295
  151. package/dist/cdn/svgrid.js +6 -6
  152. package/dist/cdn/svgrid.svelte-external.js +6 -6
  153. package/dist/cell-render.d.ts +3 -3
  154. package/dist/cell-render.js +6 -6
  155. package/dist/cell-values.d.ts +1 -1
  156. package/dist/cell-values.js +1 -1
  157. package/dist/chart-export.d.ts +1 -1
  158. package/dist/chart-export.js +8 -8
  159. package/dist/clipboard.d.ts +2 -2
  160. package/dist/clipboard.js +5 -5
  161. package/dist/column-groups.js +1 -1
  162. package/dist/columns.d.ts +2 -2
  163. package/dist/columns.js +1 -1
  164. package/dist/core.d.ts +1 -1
  165. package/dist/core.js +1 -1
  166. package/dist/createAutocomplete.svelte.d.ts +1 -1
  167. package/dist/createAutocomplete.svelte.js +2 -2
  168. package/dist/createButtonGroup.svelte.js +1 -1
  169. package/dist/createCalendar.svelte.d.ts +4 -4
  170. package/dist/createCalendar.svelte.js +4 -4
  171. package/dist/createCarousel.svelte.d.ts +1 -1
  172. package/dist/createCheckbox.svelte.js +1 -1
  173. package/dist/createColorInput.svelte.js +1 -1
  174. package/dist/createCombobox.svelte.d.ts +1 -1
  175. package/dist/createCombobox.svelte.js +2 -2
  176. package/dist/createCommand.svelte.d.ts +1 -1
  177. package/dist/createCommand.svelte.js +2 -2
  178. package/dist/createCountryInput.svelte.d.ts +1 -1
  179. package/dist/createCountryInput.svelte.js +2 -2
  180. package/dist/createDateTimePicker.svelte.d.ts +1 -1
  181. package/dist/createDateTimePicker.svelte.js +3 -3
  182. package/dist/createDropdownList.svelte.d.ts +1 -1
  183. package/dist/createDropdownList.svelte.js +2 -2
  184. package/dist/createFileUpload.svelte.js +1 -1
  185. package/dist/createForm.svelte.d.ts +1 -1
  186. package/dist/createForm.svelte.js +2 -2
  187. package/dist/createGrid.svelte.d.ts +1 -1
  188. package/dist/createGrid.svelte.js +1 -1
  189. package/dist/createGridState.svelte.d.ts +1 -1
  190. package/dist/createListbox.svelte.d.ts +1 -1
  191. package/dist/createListbox.svelte.js +2 -2
  192. package/dist/createMaskedInput.svelte.js +2 -2
  193. package/dist/createMenu.svelte.d.ts +2 -2
  194. package/dist/createMenu.svelte.js +2 -2
  195. package/dist/createNumberInput.svelte.js +1 -1
  196. package/dist/createOverlay.svelte.js +3 -3
  197. package/dist/createPagination.d.ts +1 -1
  198. package/dist/createPagination.js +1 -1
  199. package/dist/createPasswordInput.svelte.js +1 -1
  200. package/dist/createPhoneInput.svelte.js +3 -3
  201. package/dist/createPopoverSelect.svelte.d.ts +1 -1
  202. package/dist/createPopoverSelect.svelte.js +3 -3
  203. package/dist/createRadioGroup.svelte.js +1 -1
  204. package/dist/createRating.svelte.js +1 -1
  205. package/dist/createSlider.svelte.js +1 -1
  206. package/dist/createSwitch.svelte.js +1 -1
  207. package/dist/createTabs.svelte.d.ts +1 -1
  208. package/dist/createTagsInput.svelte.js +1 -1
  209. package/dist/createToggle.svelte.js +1 -1
  210. package/dist/createTooltip.svelte.js +1 -1
  211. package/dist/createTree.svelte.d.ts +1 -1
  212. package/dist/datetime/date-restrict.d.ts +1 -1
  213. package/dist/datetime/date-restrict.js +1 -1
  214. package/dist/datetime/date-selection.js +1 -1
  215. package/dist/dock-context.d.ts +1 -1
  216. package/dist/dock-manager-model.d.ts +1 -1
  217. package/dist/dock-manager-model.js +1 -1
  218. package/dist/dock-popout.d.ts +1 -1
  219. package/dist/dock-popout.js +1 -1
  220. package/dist/editing.d.ts +2 -2
  221. package/dist/editing.js +5 -5
  222. package/dist/editor-registry.d.ts +1 -1
  223. package/dist/editors/cell-editors.js +1 -1
  224. package/dist/export-format.d.ts +2 -2
  225. package/dist/export-format.js +2 -2
  226. package/dist/export-provider.d.ts +1 -1
  227. package/dist/facet-buckets.d.ts +1 -1
  228. package/dist/facet-buckets.js +1 -1
  229. package/dist/features.d.ts +2 -2
  230. package/dist/features.js +2 -2
  231. package/dist/filter-operators.d.ts +2 -2
  232. package/dist/filter-operators.js +1 -1
  233. package/dist/form-field.d.ts +1 -1
  234. package/dist/grid-messages.js +1 -1
  235. package/dist/headless.d.ts +11 -4
  236. package/dist/headless.js +11 -4
  237. package/dist/index.d.ts +120 -120
  238. package/dist/index.js +111 -111
  239. package/dist/keyboard-handlers.d.ts +2 -2
  240. package/dist/keyboard-handlers.js +2 -2
  241. package/dist/keyboard.d.ts +1 -1
  242. package/dist/menus.d.ts +3 -3
  243. package/dist/menus.js +3 -3
  244. package/dist/named-views.d.ts +1 -1
  245. package/dist/pivot-view.svelte.d.ts +1 -1
  246. package/dist/recurrence.d.ts +1 -1
  247. package/dist/recurrence.js +1 -1
  248. package/dist/row-drag.js +1 -1
  249. package/dist/scheduler-ical.d.ts +1 -1
  250. package/dist/scheduler-model.d.ts +3 -3
  251. package/dist/scheduler-model.js +2 -2
  252. package/dist/scroll-sync.d.ts +2 -2
  253. package/dist/scroll-sync.js +1 -1
  254. package/dist/selection.d.ts +2 -2
  255. package/dist/selection.js +3 -3
  256. package/dist/server-data-source.d.ts +1 -1
  257. package/dist/server-group-model.d.ts +1 -1
  258. package/dist/static-functions.d.ts +1 -1
  259. package/dist/static-functions.js +1 -1
  260. package/dist/subscribe.d.ts +1 -1
  261. package/dist/summaries.d.ts +2 -2
  262. package/dist/summaries.js +3 -3
  263. package/dist/svgrid-wrapper.types.d.ts +5 -5
  264. package/dist/themes/index.d.ts +3 -1
  265. package/dist/themes/index.js +4 -2
  266. package/dist/toast-store.svelte.js +1 -1
  267. package/dist/tree-select.d.ts +1 -1
  268. package/dist/virtualization/column-virtualizer.d.ts +3 -3
  269. package/dist/virtualization/column-virtualizer.js +1 -1
  270. package/dist/virtualization/svelte-virtualizer.svelte.d.ts +3 -3
  271. package/dist/virtualization/svelte-virtualizer.svelte.js +1 -1
  272. package/dist/virtualization/virtualizer.d.ts +1 -1
  273. package/package.json +23 -11
  274. package/src/FlexRender.svelte +96 -96
  275. package/src/GridFooter.svelte +181 -178
  276. package/src/GridMenus.svelte +705 -705
  277. package/src/SvAutoComplete.svelte +165 -165
  278. package/src/SvAvatar.svelte +75 -75
  279. package/src/SvCalendar.svelte +503 -503
  280. package/src/SvCalendar.test.ts +226 -226
  281. package/src/SvCarousel.svelte +141 -141
  282. package/src/SvCheckBox.svelte +102 -102
  283. package/src/SvCircularProgress.svelte +109 -109
  284. package/src/SvColorInput.svelte +181 -181
  285. package/src/SvComboBox.svelte +275 -275
  286. package/src/SvContextMenu.svelte +116 -116
  287. package/src/SvCountryInput.svelte +163 -163
  288. package/src/SvDrawer.svelte +254 -254
  289. package/src/SvDropDownList.svelte +374 -374
  290. package/src/SvDurationInput.svelte +126 -126
  291. package/src/SvField.svelte +293 -293
  292. package/src/SvForm.svelte +437 -437
  293. package/src/SvForm.test.ts +411 -411
  294. package/src/SvGrid.controller.svelte.ts +3974 -3898
  295. package/src/SvGrid.css +2896 -2856
  296. package/src/SvGrid.svelte +2956 -2956
  297. package/src/SvGrid.types.ts +1790 -1769
  298. package/src/SvGridCellEditor.svelte +662 -662
  299. package/src/SvGridChart.svelte +1716 -1716
  300. package/src/SvGridChartPanel.svelte +485 -485
  301. package/src/SvGridChartView.svelte +70 -70
  302. package/src/SvGridDropdown.svelte +728 -728
  303. package/src/SvGridSelect.svelte +266 -266
  304. package/src/SvGroupCell.svelte +116 -116
  305. package/src/SvListBox.svelte +326 -326
  306. package/src/SvMaskedInput.svelte +122 -122
  307. package/src/SvMenu.svelte +124 -124
  308. package/src/SvMenu.test.ts +97 -97
  309. package/src/SvMenuList.svelte +146 -146
  310. package/src/SvMultiSelect.svelte +289 -289
  311. package/src/SvNumberInput.svelte +168 -168
  312. package/src/SvOtpInput.svelte +158 -158
  313. package/src/SvPasswordInput.svelte +151 -151
  314. package/src/SvPhoneInput.svelte +133 -133
  315. package/src/SvPopover.svelte +197 -197
  316. package/src/SvProgress.svelte +116 -116
  317. package/src/SvRadioGroup.svelte +107 -107
  318. package/src/SvRating.svelte +112 -112
  319. package/src/SvResult.svelte +73 -73
  320. package/src/SvRichText.svelte +211 -211
  321. package/src/SvRowGroupPanel.svelte +170 -170
  322. package/src/SvScrollArea.svelte +61 -61
  323. package/src/SvSlider.svelte +203 -203
  324. package/src/SvSwitchButton.svelte +108 -108
  325. package/src/SvTagsInput.svelte +115 -115
  326. package/src/SvTextInput.svelte +147 -147
  327. package/src/SvTimePicker.svelte +245 -245
  328. package/src/SvToaster.svelte +159 -159
  329. package/src/SvToaster.test.ts +95 -95
  330. package/src/SvToggleButton.svelte +85 -85
  331. package/src/SvTooltip.svelte +161 -161
  332. package/src/SvTour.svelte +208 -208
  333. package/src/SvTree.svelte +444 -444
  334. package/src/SvTreeSelect.svelte +235 -235
  335. package/src/a11y/dismissable.test.ts +119 -119
  336. package/src/a11y/dismissable.ts +114 -114
  337. package/src/a11y.contract.test.ts +49 -49
  338. package/src/a11y.test.ts +59 -59
  339. package/src/a11y.ts +61 -61
  340. package/src/ai.test.ts +502 -502
  341. package/src/ai.ts +1391 -1391
  342. package/src/build-api.coverage.test.ts +633 -633
  343. package/src/build-api.ts +846 -846
  344. package/src/builtin-editors.grid.test.ts +83 -83
  345. package/src/cell-formatting.ts +169 -169
  346. package/src/cell-render.test.ts +513 -513
  347. package/src/cell-render.ts +496 -496
  348. package/src/cell-values.ts +118 -118
  349. package/src/chart-export.ts +201 -201
  350. package/src/chart-view.svelte.ts +36 -36
  351. package/src/chart.ts +2295 -2295
  352. package/src/collaboration.test.ts +104 -104
  353. package/src/collaboration.ts +167 -167
  354. package/src/core.performance.test.ts +30 -30
  355. package/src/core.ts +1261 -1261
  356. package/src/createAutocomplete.svelte.ts +132 -132
  357. package/src/createCombobox.svelte.ts +191 -191
  358. package/src/createCountryInput.svelte.ts +157 -157
  359. package/src/createDropdownList.svelte.ts +168 -168
  360. package/src/createForm.svelte.ts +386 -386
  361. package/src/createGrid.svelte.ts +42 -42
  362. package/src/createGrid.test.ts +10 -10
  363. package/src/createGridState.svelte.ts +17 -17
  364. package/src/createListbox.svelte.ts +250 -250
  365. package/src/createMenu.svelte.ts +224 -224
  366. package/src/createPopoverSelect.svelte.ts +213 -213
  367. package/src/createSlider.svelte.ts +191 -191
  368. package/src/createTooltip.svelte.ts +144 -144
  369. package/src/createTree.svelte.ts +319 -319
  370. package/src/editing.test.ts +949 -949
  371. package/src/editing.ts +606 -606
  372. package/src/editor-contract.ts +170 -170
  373. package/src/editor-registry.grid.test.ts +144 -144
  374. package/src/editor-registry.ts +122 -122
  375. package/src/export-data-api.test.ts +126 -126
  376. package/src/export-format.test.ts +107 -107
  377. package/src/export-format.ts +601 -601
  378. package/src/filter-operators.ts +160 -160
  379. package/src/flex-render.ts +3 -3
  380. package/src/form-field.ts +127 -127
  381. package/src/group-display.test.ts +167 -167
  382. package/src/group-display.ts +200 -200
  383. package/src/headless.ts +87 -80
  384. package/src/index.ts +754 -754
  385. package/src/js-scroller.svelte.ts +173 -173
  386. package/src/keyboard-handlers.ts +270 -270
  387. package/src/keyboard.test.ts +59 -59
  388. package/src/keyboard.ts +97 -97
  389. package/src/list-nav.test.ts +49 -49
  390. package/src/list-nav.ts +29 -29
  391. package/src/list-option.test.ts +56 -56
  392. package/src/list-option.ts +172 -172
  393. package/src/menus.ts +567 -567
  394. package/src/merge-objects.ts +48 -48
  395. package/src/overlays.test.ts +90 -90
  396. package/src/render-component.ts +28 -28
  397. package/src/row-drag-touch.ts +211 -211
  398. package/src/row-drag.test.ts +353 -353
  399. package/src/row-drag.ts +415 -415
  400. package/src/row-resize.ts +210 -210
  401. package/src/scheduler-model.test.ts +562 -562
  402. package/src/scheduler-model.ts +872 -872
  403. package/src/selection.test.ts +754 -754
  404. package/src/selection.ts +491 -491
  405. package/src/server-data-source.test.ts +383 -383
  406. package/src/server-data-source.ts +469 -469
  407. package/src/sparkline.test.ts +68 -68
  408. package/src/sparkline.ts +169 -169
  409. package/src/spreadsheet.test.ts +488 -488
  410. package/src/spreadsheet.ts +312 -312
  411. package/src/static-functions.ts +11 -11
  412. package/src/subscribe.ts +38 -38
  413. package/src/svgrid-wrapper.types.ts +558 -558
  414. package/src/svgrid.async-editor-options.test.ts +273 -273
  415. package/src/svgrid.auto-row-height.test.ts +204 -204
  416. package/src/svgrid.behavior.test.ts +912 -704
  417. package/src/svgrid.charting.test.ts +534 -534
  418. package/src/svgrid.comments-autocomplete.test.ts +127 -127
  419. package/src/svgrid.context-menu.test.ts +147 -147
  420. package/src/svgrid.features.test.ts +157 -157
  421. package/src/svgrid.filter-depth.test.ts +163 -163
  422. package/src/svgrid.filter-menu-listbox.svelte.test.ts +331 -331
  423. package/src/svgrid.filter-menu-scroll.test.ts +112 -112
  424. package/src/svgrid.grand-total.test.ts +188 -188
  425. package/src/svgrid.group-display-mode.test.ts +171 -171
  426. package/src/svgrid.group-footers.test.ts +121 -121
  427. package/src/svgrid.group-pagination.test.ts +153 -153
  428. package/src/svgrid.new-features.wrapper.test.ts +251 -251
  429. package/src/svgrid.tree-data.test.ts +186 -186
  430. package/src/svgrid.wrapper.test.ts +63 -63
  431. package/src/svgriddropdown.async-panel.svelte.test.ts +195 -195
  432. package/src/test-setup.ts +62 -62
  433. package/src/themes/index.ts +288 -286
  434. package/src/toast-store.svelte.ts +246 -246
  435. package/src/toast-store.test.ts +147 -147
  436. package/src/tree-row-model.test.ts +168 -168
  437. package/src/ui-buttons.test.ts +144 -144
  438. package/src/ui-inputs.test.ts +118 -118
  439. package/src/ui-localization.test.ts +113 -113
  440. package/src/ui-range.test.ts +70 -70
  441. package/src/ui-selection.test.ts +155 -155
  442. package/src/ui-tier1.test.ts +142 -142
  443. package/src/virtual.test.ts +88 -88
  444. package/src/virtualization/column-virtualizer.test.ts +27 -27
  445. package/src/virtualization/column-virtualizer.ts +30 -30
  446. package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
  447. package/src/virtualization/types.ts +30 -30
  448. package/src/virtualization/virtualizer.test.ts +47 -47
  449. package/src/virtualization/virtualizer.ts +322 -322
package/dist/SvPopover.svelte CHANGED
@@ -1,197 +1,197 @@
1
- <script lang="ts">
2
- /**
3
- * SvPopover - a floating panel anchored to a trigger, portalled to <body> so it
4
- * escapes any `overflow:hidden` ancestor. Open on click (default), hover, or
5
- * manually via `open`. Positioned by the shared engine (`computePosition`): full
6
- * placement matrix + flip + shift + an optional arrow, kept in sync with
7
- * `autoUpdate`. Closes on outside-click / Escape via the dismissable layer
8
- * stack, and animates in. The panel is hoverable (interactive) under the hover
9
- * trigger. Parity: Smart popover.
10
- *
11
- * ```svelte
12
- * <SvPopover placement="bottom" arrow>
13
- * {#snippet anchor()}<button>Open</button>{/snippet}
14
- * <p>Panel content</p>
15
- * </SvPopover>
16
- * ```
17
- */
18
- import type { Snippet } from 'svelte'
19
- import { portalToBody, popIn } from './popover'
20
- import { computePosition, autoUpdate, type Placement, type ComputePositionResult } from './positioning'
21
- import { createDismissableLayer } from './a11y/dismissable'
22
-
23
- type Props = {
24
- /** Controlled open state (bindable). */
25
- open?: boolean
26
- onOpenChange?: (open: boolean) => void
27
- /** How the anchor opens the panel. `manual` = only `open` drives it. */
28
- trigger?: 'click' | 'hover' | 'manual'
29
- /** Preferred placement (flips when there is no room). Default `bottom-start`. */
30
- placement?: Placement
31
- /** Main-axis gap between trigger and panel. Default 8 (room for the arrow). */
32
- offset?: number
33
- /** Render a pointer arrow toward the trigger. Default true. */
34
- arrow?: boolean
35
- /** Hover trigger: delay (ms) before opening. Default 0. */
36
- openDelay?: number
37
- /** Hover trigger: delay (ms) before closing after leave. Default 120. */
38
- closeDelay?: number
39
- /** Estimated panel height, used before the panel has been measured. */
40
- estimatedHeight?: number
41
- /** Force a minimum panel width (else it hugs its content). */
42
- minWidth?: number
43
- /** Close when clicking outside. Default true. */
44
- closeOnOutsideClick?: boolean
45
- ariaLabel?: string
46
- /** The anchor element(s) that open the panel. */
47
- anchor?: Snippet
48
- /** Panel content. */
49
- children?: Snippet
50
- }
51
-
52
- let {
53
- open = $bindable(false),
54
- onOpenChange,
55
- trigger = 'click',
56
- placement = 'bottom-start',
57
- offset = 8,
58
- arrow = true,
59
- openDelay = 0,
60
- closeDelay = 120,
61
- estimatedHeight = 220,
62
- minWidth,
63
- closeOnOutsideClick = true,
64
- ariaLabel,
65
- anchor,
66
- children,
67
- }: Props = $props()
68
-
69
- const ARROW = 10
70
-
71
- let anchorEl = $state<HTMLSpanElement | null>(null)
72
- let panelEl = $state<HTMLDivElement | null>(null)
73
- let pos = $state<ComputePositionResult>({
74
- x: 0, y: 0, placement, side: 'bottom', align: 'start', maxWidth: 0, maxHeight: 0,
75
- })
76
-
77
- function setOpen(v: boolean) { if (v !== open) { open = v; onOpenChange?.(v) } }
78
- function toggle() { setOpen(!open) }
79
-
80
- function updatePos() {
81
- if (!anchorEl) return
82
- const r = anchorEl.getBoundingClientRect()
83
- const f = panelEl?.getBoundingClientRect()
84
- const floating = {
85
- width: f?.width || minWidth || r.width,
86
- height: f?.height || estimatedHeight,
87
- }
88
- pos = computePosition(
89
- { x: r.left, y: r.top, width: r.width, height: r.height },
90
- floating,
91
- { placement, offset, padding: 8, minMainAxis: 96, arrow: arrow ? { size: ARROW } : undefined },
92
- )
93
- }
94
-
95
- // Reposition whenever the trigger/panel resize or an ancestor scrolls, and wire
96
- // Escape + outside-click dismissal via the shared layer stack (so a popover
97
- // nested in a dialog closes top-first). Re-runs once `panelEl` mounts.
98
- $effect(() => {
99
- if (!open || !anchorEl || !panelEl) return
100
- const stop = autoUpdate(anchorEl, panelEl, updatePos)
101
- const layer = createDismissableLayer({
102
- element: () => [anchorEl, panelEl],
103
- onDismiss: () => setOpen(false),
104
- closeOnOutside: closeOnOutsideClick,
105
- })
106
- layer.activate()
107
- return () => { stop(); layer.release() }
108
- })
109
-
110
- let openTimer: ReturnType<typeof setTimeout> | undefined
111
- let closeTimer: ReturnType<typeof setTimeout> | undefined
112
- function onEnter() {
113
- if (trigger !== 'hover') return
114
- clearTimeout(closeTimer)
115
- if (open) return
116
- openTimer = setTimeout(() => setOpen(true), openDelay)
117
- }
118
- function onLeave() {
119
- if (trigger !== 'hover') return
120
- clearTimeout(openTimer)
121
- closeTimer = setTimeout(() => setOpen(false), closeDelay)
122
- }
123
-
124
- /** Fallback accessible name for the panel when `ariaLabel` isn't given: the
125
- * anchor's own aria-label, else its trimmed text content. */
126
- function anchorFallbackLabel(): string | undefined {
127
- const label = anchorEl?.getAttribute('aria-label')
128
- if (label) return label
129
- return anchorEl?.textContent?.trim() || undefined
130
- }
131
- </script>
132
-
133
- <!-- svelte-ignore a11y_no_static_element_interactions -->
134
- <span
135
- bind:this={anchorEl}
136
- class="sv-pop__anchor"
137
- onclick={() => trigger === 'click' && toggle()}
138
- onpointerenter={onEnter}
139
- onpointerleave={onLeave}
140
- onfocusin={onEnter}
141
- onfocusout={onLeave}
142
- >
143
- {@render anchor?.()}
144
- </span>
145
-
146
- {#if open}
147
- <div
148
- bind:this={panelEl}
149
- class="sv-pop__panel"
150
- use:portalToBody
151
- use:popIn={{ up: pos.side === 'top' }}
152
- style:position="fixed"
153
- style:top={`${pos.y}px`}
154
- style:left={`${pos.x}px`}
155
- style:min-width={minWidth ? `${minWidth}px` : undefined}
156
- role="dialog"
157
- aria-label={ariaLabel ?? anchorFallbackLabel()}
158
- onpointerenter={onEnter}
159
- onpointerleave={onLeave}
160
- onfocusin={onEnter}
161
- onfocusout={onLeave}
162
- >
163
- {#if arrow}
164
- <span
165
- class="sv-pop__arrow sv-pop__arrow--{pos.side}"
166
- style:left={pos.arrow?.x != null ? `${pos.arrow.x}px` : undefined}
167
- style:top={pos.arrow?.y != null ? `${pos.arrow.y}px` : undefined}
168
- ></span>
169
- {/if}
170
- <div class="sv-pop__content" style:max-height={pos.maxHeight ? `${pos.maxHeight}px` : undefined}>
171
- {@render children?.()}
172
- </div>
173
- </div>
174
- {/if}
175
-
176
- <style>
177
- .sv-pop__anchor { display: inline-flex; }
178
- :global(.sv-pop__panel) {
179
- z-index: 2147483646; max-width: min(92vw, 360px);
180
- background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
181
- border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px;
182
- box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35); font-size: 13px; line-height: 1.55;
183
- }
184
- :global(.sv-pop__content) { padding: 12px 14px; overflow: auto; }
185
- /* Arrow: a rotated square straddling the panel edge, two borders showing so it
186
- reads as a continuation of the panel outline. Not clipped (sibling of the
187
- scrollable content, panel itself has no overflow). */
188
- :global(.sv-pop__arrow) {
189
- position: absolute; width: 10px; height: 10px;
190
- background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e2e8f0);
191
- transform: rotate(45deg);
192
- }
193
- :global(.sv-pop__arrow--bottom) { top: -6px; border-right: 0; border-bottom: 0; }
194
- :global(.sv-pop__arrow--top) { bottom: -6px; border-left: 0; border-top: 0; }
195
- :global(.sv-pop__arrow--right) { left: -6px; border-top: 0; border-right: 0; }
196
- :global(.sv-pop__arrow--left) { right: -6px; border-bottom: 0; border-left: 0; }
197
- </style>
1
+ <script lang="ts">
2
+ /**
3
+ * SvPopover - a floating panel anchored to a trigger, portalled to <body> so it
4
+ * escapes any `overflow:hidden` ancestor. Open on click (default), hover, or
5
+ * manually via `open`. Positioned by the shared engine (`computePosition`): full
6
+ * placement matrix + flip + shift + an optional arrow, kept in sync with
7
+ * `autoUpdate`. Closes on outside-click / Escape via the dismissable layer
8
+ * stack, and animates in. The panel is hoverable (interactive) under the hover
9
+ * trigger. Parity: Smart popover.
10
+ *
11
+ * ```svelte
12
+ * <SvPopover placement="bottom" arrow>
13
+ * {#snippet anchor()}<button>Open</button>{/snippet}
14
+ * <p>Panel content</p>
15
+ * </SvPopover>
16
+ * ```
17
+ */
18
+ import type { Snippet } from 'svelte'
19
+ import { portalToBody, popIn } from './popover'
20
+ import { computePosition, autoUpdate, type Placement, type ComputePositionResult } from './positioning'
21
+ import { createDismissableLayer } from './a11y/dismissable'
22
+
23
+ type Props = {
24
+ /** Controlled open state (bindable). */
25
+ open?: boolean
26
+ onOpenChange?: (open: boolean) => void
27
+ /** How the anchor opens the panel. `manual` = only `open` drives it. */
28
+ trigger?: 'click' | 'hover' | 'manual'
29
+ /** Preferred placement (flips when there is no room). Default `bottom-start`. */
30
+ placement?: Placement
31
+ /** Main-axis gap between trigger and panel. Default 8 (room for the arrow). */
32
+ offset?: number
33
+ /** Render a pointer arrow toward the trigger. Default true. */
34
+ arrow?: boolean
35
+ /** Hover trigger: delay (ms) before opening. Default 0. */
36
+ openDelay?: number
37
+ /** Hover trigger: delay (ms) before closing after leave. Default 120. */
38
+ closeDelay?: number
39
+ /** Estimated panel height, used before the panel has been measured. */
40
+ estimatedHeight?: number
41
+ /** Force a minimum panel width (else it hugs its content). */
42
+ minWidth?: number
43
+ /** Close when clicking outside. Default true. */
44
+ closeOnOutsideClick?: boolean
45
+ ariaLabel?: string
46
+ /** The anchor element(s) that open the panel. */
47
+ anchor?: Snippet
48
+ /** Panel content. */
49
+ children?: Snippet
50
+ }
51
+
52
+ let {
53
+ open = $bindable(false),
54
+ onOpenChange,
55
+ trigger = 'click',
56
+ placement = 'bottom-start',
57
+ offset = 8,
58
+ arrow = true,
59
+ openDelay = 0,
60
+ closeDelay = 120,
61
+ estimatedHeight = 220,
62
+ minWidth,
63
+ closeOnOutsideClick = true,
64
+ ariaLabel,
65
+ anchor,
66
+ children,
67
+ }: Props = $props()
68
+
69
+ const ARROW = 10
70
+
71
+ let anchorEl = $state<HTMLSpanElement | null>(null)
72
+ let panelEl = $state<HTMLDivElement | null>(null)
73
+ let pos = $state<ComputePositionResult>({
74
+ x: 0, y: 0, placement, side: 'bottom', align: 'start', maxWidth: 0, maxHeight: 0,
75
+ })
76
+
77
+ function setOpen(v: boolean) { if (v !== open) { open = v; onOpenChange?.(v) } }
78
+ function toggle() { setOpen(!open) }
79
+
80
+ function updatePos() {
81
+ if (!anchorEl) return
82
+ const r = anchorEl.getBoundingClientRect()
83
+ const f = panelEl?.getBoundingClientRect()
84
+ const floating = {
85
+ width: f?.width || minWidth || r.width,
86
+ height: f?.height || estimatedHeight,
87
+ }
88
+ pos = computePosition(
89
+ { x: r.left, y: r.top, width: r.width, height: r.height },
90
+ floating,
91
+ { placement, offset, padding: 8, minMainAxis: 96, arrow: arrow ? { size: ARROW } : undefined },
92
+ )
93
+ }
94
+
95
+ // Reposition whenever the trigger/panel resize or an ancestor scrolls, and wire
96
+ // Escape + outside-click dismissal via the shared layer stack (so a popover
97
+ // nested in a dialog closes top-first). Re-runs once `panelEl` mounts.
98
+ $effect(() => {
99
+ if (!open || !anchorEl || !panelEl) return
100
+ const stop = autoUpdate(anchorEl, panelEl, updatePos)
101
+ const layer = createDismissableLayer({
102
+ element: () => [anchorEl, panelEl],
103
+ onDismiss: () => setOpen(false),
104
+ closeOnOutside: closeOnOutsideClick,
105
+ })
106
+ layer.activate()
107
+ return () => { stop(); layer.release() }
108
+ })
109
+
110
+ let openTimer: ReturnType<typeof setTimeout> | undefined
111
+ let closeTimer: ReturnType<typeof setTimeout> | undefined
112
+ function onEnter() {
113
+ if (trigger !== 'hover') return
114
+ clearTimeout(closeTimer)
115
+ if (open) return
116
+ openTimer = setTimeout(() => setOpen(true), openDelay)
117
+ }
118
+ function onLeave() {
119
+ if (trigger !== 'hover') return
120
+ clearTimeout(openTimer)
121
+ closeTimer = setTimeout(() => setOpen(false), closeDelay)
122
+ }
123
+
124
+ /** Fallback accessible name for the panel when `ariaLabel` isn't given: the
125
+ * anchor's own aria-label, else its trimmed text content. */
126
+ function anchorFallbackLabel(): string | undefined {
127
+ const label = anchorEl?.getAttribute('aria-label')
128
+ if (label) return label
129
+ return anchorEl?.textContent?.trim() || undefined
130
+ }
131
+ </script>
132
+
133
+ <!-- svelte-ignore a11y_no_static_element_interactions -->
134
+ <span
135
+ bind:this={anchorEl}
136
+ class="sv-pop__anchor"
137
+ onclick={() => trigger === 'click' && toggle()}
138
+ onpointerenter={onEnter}
139
+ onpointerleave={onLeave}
140
+ onfocusin={onEnter}
141
+ onfocusout={onLeave}
142
+ >
143
+ {@render anchor?.()}
144
+ </span>
145
+
146
+ {#if open}
147
+ <div
148
+ bind:this={panelEl}
149
+ class="sv-pop__panel"
150
+ use:portalToBody
151
+ use:popIn={{ up: pos.side === 'top' }}
152
+ style:position="fixed"
153
+ style:top={`${pos.y}px`}
154
+ style:left={`${pos.x}px`}
155
+ style:min-width={minWidth ? `${minWidth}px` : undefined}
156
+ role="dialog"
157
+ aria-label={ariaLabel ?? anchorFallbackLabel()}
158
+ onpointerenter={onEnter}
159
+ onpointerleave={onLeave}
160
+ onfocusin={onEnter}
161
+ onfocusout={onLeave}
162
+ >
163
+ {#if arrow}
164
+ <span
165
+ class="sv-pop__arrow sv-pop__arrow--{pos.side}"
166
+ style:left={pos.arrow?.x != null ? `${pos.arrow.x}px` : undefined}
167
+ style:top={pos.arrow?.y != null ? `${pos.arrow.y}px` : undefined}
168
+ ></span>
169
+ {/if}
170
+ <div class="sv-pop__content" style:max-height={pos.maxHeight ? `${pos.maxHeight}px` : undefined}>
171
+ {@render children?.()}
172
+ </div>
173
+ </div>
174
+ {/if}
175
+
176
+ <style>
177
+ .sv-pop__anchor { display: inline-flex; }
178
+ :global(.sv-pop__panel) {
179
+ z-index: 2147483646; max-width: min(92vw, 360px);
180
+ background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
181
+ border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px;
182
+ box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35); font-size: 13px; line-height: 1.55;
183
+ }
184
+ :global(.sv-pop__content) { padding: 12px 14px; overflow: auto; }
185
+ /* Arrow: a rotated square straddling the panel edge, two borders showing so it
186
+ reads as a continuation of the panel outline. Not clipped (sibling of the
187
+ scrollable content, panel itself has no overflow). */
188
+ :global(.sv-pop__arrow) {
189
+ position: absolute; width: 10px; height: 10px;
190
+ background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e2e8f0);
191
+ transform: rotate(45deg);
192
+ }
193
+ :global(.sv-pop__arrow--bottom) { top: -6px; border-right: 0; border-bottom: 0; }
194
+ :global(.sv-pop__arrow--top) { bottom: -6px; border-left: 0; border-top: 0; }
195
+ :global(.sv-pop__arrow--right) { left: -6px; border-top: 0; border-right: 0; }
196
+ :global(.sv-pop__arrow--left) { right: -6px; border-bottom: 0; border-left: 0; }
197
+ </style>
package/dist/SvPopover.svelte.d.ts CHANGED
@@ -15,7 +15,7 @@
15
15
  * ```
16
16
  */
17
17
  import type { Snippet } from 'svelte';
18
- import { type Placement } from './positioning';
18
+ import { type Placement } from './positioning.js';
19
19
  type Props = {
20
20
  /** Controlled open state (bindable). */
21
21
  open?: boolean;
package/dist/SvProgress.svelte CHANGED
@@ -1,116 +1,116 @@
1
- <script lang="ts">
2
- /**
3
- * SvProgress - a linear progress bar (WAI-ARIA `progressbar`). Determinate
4
- * (value/max) or `indeterminate` (animated), with color intents, sizes, an
5
- * optional label and an optional secondary `buffer` track. Theme-driven via
6
- * `--sg-*`; respects prefers-reduced-motion. Parity: Smart progress bar.
7
- *
8
- * ```svelte
9
- * <SvProgress value={64} showLabel />
10
- * <SvProgress indeterminate color="success" />
11
- * ```
12
- */
13
- type Props = {
14
- /** Current value (0..max). Ignored when `indeterminate`. */
15
- value?: number
16
- max?: number
17
- /** Unknown-duration animated bar. */
18
- indeterminate?: boolean
19
- /** Buffered/secondary value (e.g. streamed-ahead), 0..max. */
20
- buffer?: number
21
- color?: 'accent' | 'success' | 'warning' | 'danger'
22
- size?: 'sm' | 'md' | 'lg'
23
- /** Show a percentage label at the end of the bar. */
24
- showLabel?: boolean
25
- /** Format the label (default: rounded percent). */
26
- formatLabel?: (value: number, max: number) => string
27
- /** Diagonal candy-stripe overlay on the fill. */
28
- striped?: boolean
29
- ariaLabel?: string
30
- }
31
-
32
- let {
33
- value = 0,
34
- max = 100,
35
- indeterminate = false,
36
- buffer,
37
- color = 'accent',
38
- size = 'md',
39
- showLabel = false,
40
- formatLabel,
41
- striped = false,
42
- ariaLabel,
43
- }: Props = $props()
44
-
45
- const pct = $derived(max > 0 ? Math.min(100, Math.max(0, (value / max) * 100)) : 0)
46
- const bufPct = $derived(buffer != null && max > 0 ? Math.min(100, Math.max(0, (buffer / max) * 100)) : null)
47
- const label = $derived(formatLabel ? formatLabel(value, max) : `${Math.round(pct)}%`)
48
- </script>
49
-
50
- <div class="sv-prog sv-prog--{size} sv-prog--{color}" class:has-label={showLabel && !indeterminate}>
51
- <div
52
- class="sv-prog__track"
53
- role="progressbar"
54
- aria-label={ariaLabel}
55
- aria-valuemin={indeterminate ? undefined : 0}
56
- aria-valuemax={indeterminate ? undefined : max}
57
- aria-valuenow={indeterminate ? undefined : value}
58
- aria-valuetext={indeterminate ? undefined : label}
59
- >
60
- {#if bufPct != null && !indeterminate}<div class="sv-prog__buffer" style:width={`${bufPct}%`}></div>{/if}
61
- <div
62
- class="sv-prog__fill"
63
- class:is-indeterminate={indeterminate}
64
- class:is-striped={striped}
65
- style:width={indeterminate ? undefined : `${pct}%`}
66
- ></div>
67
- </div>
68
- {#if showLabel && !indeterminate}<span class="sv-prog__label">{label}</span>{/if}
69
- </div>
70
-
71
- <style>
72
- .sv-prog {
73
- --_accent: var(--sg-accent, #2563eb);
74
- --_c: var(--_accent);
75
- display: flex; align-items: center; gap: 10px; width: 100%;
76
- }
77
- .sv-prog--success { --_c: var(--sg-success, #16a34a); }
78
- .sv-prog--warning { --_c: var(--sg-warning, #d97706); }
79
- .sv-prog--danger { --_c: var(--sg-danger, #dc2626); }
80
- .sv-prog__track {
81
- position: relative; flex: 1; overflow: hidden;
82
- background: var(--sg-border, #e2e8f0); border-radius: 999px;
83
- }
84
- .sv-prog--sm .sv-prog__track { height: 5px; }
85
- .sv-prog--md .sv-prog__track { height: 8px; }
86
- .sv-prog--lg .sv-prog__track { height: 12px; }
87
- .sv-prog__buffer {
88
- position: absolute; inset-block: 0; inset-inline-start: 0;
89
- background: color-mix(in srgb, var(--_c) 28%, transparent); border-radius: 999px;
90
- }
91
- .sv-prog__fill {
92
- position: absolute; inset-block: 0; inset-inline-start: 0; min-width: 0;
93
- background: var(--_c); border-radius: 999px; transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
94
- }
95
- .sv-prog__fill.is-striped {
96
- background-image: linear-gradient(45deg, rgba(255,255,255,0.22) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.22) 75%, transparent 75%);
97
- background-size: 16px 16px; animation: sv-prog-stripe 0.8s linear infinite;
98
- }
99
- .sv-prog__fill.is-indeterminate {
100
- width: 40%; border-radius: 999px;
101
- animation: sv-prog-indet 1.3s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
102
- }
103
- @keyframes sv-prog-indet {
104
- 0% { inset-inline-start: -45%; } 100% { inset-inline-start: 100%; }
105
- }
106
- @keyframes sv-prog-stripe { to { background-position: 16px 0; } }
107
- @media (prefers-reduced-motion: reduce) {
108
- .sv-prog__fill.is-indeterminate { animation-duration: 2.4s; }
109
- .sv-prog__fill.is-striped { animation: none; }
110
- .sv-prog__fill { transition: none; }
111
- }
112
- .sv-prog__label {
113
- flex: none; min-width: 38px; text-align: end; font-size: 12px; font-weight: 600;
114
- font-variant-numeric: tabular-nums; color: var(--sg-muted, #64748b);
115
- }
116
- </style>
1
+ <script lang="ts">
2
+ /**
3
+ * SvProgress - a linear progress bar (WAI-ARIA `progressbar`). Determinate
4
+ * (value/max) or `indeterminate` (animated), with color intents, sizes, an
5
+ * optional label and an optional secondary `buffer` track. Theme-driven via
6
+ * `--sg-*`; respects prefers-reduced-motion. Parity: Smart progress bar.
7
+ *
8
+ * ```svelte
9
+ * <SvProgress value={64} showLabel />
10
+ * <SvProgress indeterminate color="success" />
11
+ * ```
12
+ */
13
+ type Props = {
14
+ /** Current value (0..max). Ignored when `indeterminate`. */
15
+ value?: number
16
+ max?: number
17
+ /** Unknown-duration animated bar. */
18
+ indeterminate?: boolean
19
+ /** Buffered/secondary value (e.g. streamed-ahead), 0..max. */
20
+ buffer?: number
21
+ color?: 'accent' | 'success' | 'warning' | 'danger'
22
+ size?: 'sm' | 'md' | 'lg'
23
+ /** Show a percentage label at the end of the bar. */
24
+ showLabel?: boolean
25
+ /** Format the label (default: rounded percent). */
26
+ formatLabel?: (value: number, max: number) => string
27
+ /** Diagonal candy-stripe overlay on the fill. */
28
+ striped?: boolean
29
+ ariaLabel?: string
30
+ }
31
+
32
+ let {
33
+ value = 0,
34
+ max = 100,
35
+ indeterminate = false,
36
+ buffer,
37
+ color = 'accent',
38
+ size = 'md',
39
+ showLabel = false,
40
+ formatLabel,
41
+ striped = false,
42
+ ariaLabel,
43
+ }: Props = $props()
44
+
45
+ const pct = $derived(max > 0 ? Math.min(100, Math.max(0, (value / max) * 100)) : 0)
46
+ const bufPct = $derived(buffer != null && max > 0 ? Math.min(100, Math.max(0, (buffer / max) * 100)) : null)
47
+ const label = $derived(formatLabel ? formatLabel(value, max) : `${Math.round(pct)}%`)
48
+ </script>
49
+
50
+ <div class="sv-prog sv-prog--{size} sv-prog--{color}" class:has-label={showLabel && !indeterminate}>
51
+ <div
52
+ class="sv-prog__track"
53
+ role="progressbar"
54
+ aria-label={ariaLabel}
55
+ aria-valuemin={indeterminate ? undefined : 0}
56
+ aria-valuemax={indeterminate ? undefined : max}
57
+ aria-valuenow={indeterminate ? undefined : value}
58
+ aria-valuetext={indeterminate ? undefined : label}
59
+ >
60
+ {#if bufPct != null && !indeterminate}<div class="sv-prog__buffer" style:width={`${bufPct}%`}></div>{/if}
61
+ <div
62
+ class="sv-prog__fill"
63
+ class:is-indeterminate={indeterminate}
64
+ class:is-striped={striped}
65
+ style:width={indeterminate ? undefined : `${pct}%`}
66
+ ></div>
67
+ </div>
68
+ {#if showLabel && !indeterminate}<span class="sv-prog__label">{label}</span>{/if}
69
+ </div>
70
+
71
+ <style>
72
+ .sv-prog {
73
+ --_accent: var(--sg-accent, #2563eb);
74
+ --_c: var(--_accent);
75
+ display: flex; align-items: center; gap: 10px; width: 100%;
76
+ }
77
+ .sv-prog--success { --_c: var(--sg-success, #16a34a); }
78
+ .sv-prog--warning { --_c: var(--sg-warning, #d97706); }
79
+ .sv-prog--danger { --_c: var(--sg-danger, #dc2626); }
80
+ .sv-prog__track {
81
+ position: relative; flex: 1; overflow: hidden;
82
+ background: var(--sg-border, #e2e8f0); border-radius: 999px;
83
+ }
84
+ .sv-prog--sm .sv-prog__track { height: 5px; }
85
+ .sv-prog--md .sv-prog__track { height: 8px; }
86
+ .sv-prog--lg .sv-prog__track { height: 12px; }
87
+ .sv-prog__buffer {
88
+ position: absolute; inset-block: 0; inset-inline-start: 0;
89
+ background: color-mix(in srgb, var(--_c) 28%, transparent); border-radius: 999px;
90
+ }
91
+ .sv-prog__fill {
92
+ position: absolute; inset-block: 0; inset-inline-start: 0; min-width: 0;
93
+ background: var(--_c); border-radius: 999px; transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
94
+ }
95
+ .sv-prog__fill.is-striped {
96
+ background-image: linear-gradient(45deg, rgba(255,255,255,0.22) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.22) 75%, transparent 75%);
97
+ background-size: 16px 16px; animation: sv-prog-stripe 0.8s linear infinite;
98
+ }
99
+ .sv-prog__fill.is-indeterminate {
100
+ width: 40%; border-radius: 999px;
101
+ animation: sv-prog-indet 1.3s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
102
+ }
103
+ @keyframes sv-prog-indet {
104
+ 0% { inset-inline-start: -45%; } 100% { inset-inline-start: 100%; }
105
+ }
106
+ @keyframes sv-prog-stripe { to { background-position: 16px 0; } }
107
+ @media (prefers-reduced-motion: reduce) {
108
+ .sv-prog__fill.is-indeterminate { animation-duration: 2.4s; }
109
+ .sv-prog__fill.is-striped { animation: none; }
110
+ .sv-prog__fill { transition: none; }
111
+ }
112
+ .sv-prog__label {
113
+ flex: none; min-width: 38px; text-align: end; font-size: 12px; font-weight: 600;
114
+ font-variant-numeric: tabular-nums; color: var(--sg-muted, #64748b);
115
+ }
116
+ </style>