@svgrid/grid 2.6.15 → 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/SvDrawer.svelte CHANGED
@@ -1,254 +1,254 @@
1
- <script lang="ts">
2
- /**
3
- * SvDrawer - an edge-anchored side sheet (right / left / top / bottom): a
4
- * backdrop, a sliding panel, and the full dialog a11y contract. Built entirely
5
- * on the shared primitives - `createFocusTrap`, `lockScroll` and
6
- * `createDismissableLayer` - so its focus, scroll-lock and Escape/backdrop
7
- * behaviour is identical to SvModal and nested overlays close top-first.
8
- * Portalled to <body>. Controlled via `open`.
9
- *
10
- * ```svelte
11
- * <SvDrawer bind:open side="right" title="Filters">
12
- * <p>Body</p>
13
- * {#snippet footer()}<button onclick={() => open = false}>Apply</button>{/snippet}
14
- * </SvDrawer>
15
- * ```
16
- */
17
- import type { Snippet } from 'svelte'
18
- import { untrack } from 'svelte'
19
- import { portalToBody } from './popover'
20
- import { nextEditorId } from './editor-contract'
21
- import { createOverlay } from './createOverlay.svelte'
22
-
23
- /** Edge the drawer slides from. Kept in sync with the `DrawerSide` export in
24
- * index.ts (a bare type-only module script trips the Svelte/Vite parser). */
25
- type DrawerSide = 'right' | 'left' | 'top' | 'bottom'
26
-
27
- type Props = {
28
- open?: boolean
29
- onClose?: () => void
30
- /** Edge the drawer slides from. Default 'right'. */
31
- side?: DrawerSide
32
- /** Panel size along its axis (width for left/right, height for top/bottom).
33
- * Any CSS length; defaults to a sensible per-axis value. */
34
- size?: string
35
- title?: string
36
- closeOnBackdrop?: boolean
37
- closeOnEsc?: boolean
38
- /** Hide the header close (x) button. */
39
- hideClose?: boolean
40
- /** Render as a mobile bottom-sheet: bottom-anchored, rounded top, a grab
41
- * handle, and swipe-down-to-close. Overrides `side`. */
42
- sheet?: boolean
43
- /** Accessible name when there is no visible `title`. */
44
- ariaLabel?: string
45
- /** Fired after the close (exit) animation has finished and the drawer has
46
- * left the DOM. Use it to clear the data the drawer was showing so the
47
- * content stays put while it slides out. */
48
- onClosed?: () => void
49
- children?: Snippet
50
- footer?: Snippet
51
- }
52
-
53
- let {
54
- open = $bindable(false),
55
- onClose,
56
- side = 'right',
57
- size,
58
- title,
59
- closeOnBackdrop = true,
60
- closeOnEsc = true,
61
- hideClose = false,
62
- sheet = false,
63
- ariaLabel,
64
- onClosed,
65
- children,
66
- footer,
67
- }: Props = $props()
68
-
69
- const titleId = nextEditorId('sv-drawer-title')
70
- let dialogEl = $state<HTMLDivElement | null>(null)
71
-
72
- // A sheet is a bottom drawer with mobile affordances.
73
- const effectiveSide = $derived<DrawerSide>(sheet ? 'bottom' : side)
74
- const horizontal = $derived(effectiveSide === 'left' || effectiveSide === 'right')
75
- const sizeVar = $derived(size ?? (horizontal ? 'min(400px, 92vw)' : 'min(360px, 85vh)'))
76
-
77
- function close() { open = false; onClose?.() }
78
-
79
- // Enter/exit animation via CSS @keyframes (the pattern SvModal uses - keyframes
80
- // play on a `use:portalToBody` element; the Svelte `transition:` directive does
81
- // NOT). `show` keeps the panel mounted; the enter keyframe fires on mount, and
82
- // on close we add `is-leaving` (exit keyframe) and unmount + fire `onClosed`
83
- // after the duration. Honors reduced-motion by dropping the hold to 0ms.
84
- const reduceMotion = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches
85
- const EXIT_MS = 260
86
- let show = $state(false)
87
- let leaving = $state(false)
88
- let leaveTimer: ReturnType<typeof setTimeout> | undefined
89
- $effect(() => {
90
- if (open) {
91
- clearTimeout(leaveTimer)
92
- leaving = false
93
- show = true
94
- return
95
- }
96
- // Only run the leave sequence if the drawer was actually shown (skips the
97
- // initial closed mount, which must not fire onClosed).
98
- if (untrack(() => show)) {
99
- leaving = true
100
- leaveTimer = setTimeout(() => { show = false; leaving = false; onClosed?.() }, reduceMotion ? 0 : EXIT_MS)
101
- }
102
- // `open` is this effect's only dependency, so the cleanup runs on reopen (a
103
- // no-op after the clearTimeout above) or on destroy - where it matters, so a
104
- // drawer unmounted mid-exit doesn't leave a timer firing into a dead scope.
105
- return () => clearTimeout(leaveTimer)
106
- })
107
-
108
- // Swipe-down-to-close for the sheet grab handle.
109
- let dragY = $state(0)
110
- let dragging = $state(false)
111
- let dragStartY = 0
112
- function onGrabDown(e: PointerEvent) {
113
- dragging = true
114
- dragStartY = e.clientY
115
- ;(e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId)
116
- }
117
- function onGrabMove(e: PointerEvent) {
118
- if (!dragging) return
119
- dragY = Math.max(0, e.clientY - dragStartY)
120
- }
121
- function onGrabUp(e: PointerEvent) {
122
- if (!dragging) return
123
- dragging = false
124
- ;(e.currentTarget as HTMLElement).releasePointerCapture?.(e.pointerId)
125
- if (dragY > 80) close()
126
- else dragY = 0
127
- }
128
-
129
- // Focus trap + scroll lock + Escape/backdrop dismissal come from the shared
130
- // headless overlay core - one tested implementation across every dialog-like
131
- // overlay, and nested overlays close top-first. See createOverlay.svelte.ts.
132
- const overlay = createOverlay({
133
- open: () => open,
134
- getDialog: () => dialogEl,
135
- onClose: close,
136
- closeOnEsc: () => closeOnEsc,
137
- closeOnBackdrop: () => closeOnBackdrop,
138
- onOpen: () => { dragY = 0 },
139
- })
140
- </script>
141
-
142
- {#if show}
143
- <div class="sv-drawer__backdrop" class:is-leaving={leaving} use:portalToBody>
144
- <div
145
- bind:this={dialogEl}
146
- class="sv-drawer sv-drawer--{effectiveSide}"
147
- class:is-leaving={leaving}
148
- class:is-sheet={sheet}
149
- class:is-dragging={dragging}
150
- {...overlay.dialogProps({ labelledBy: title ? titleId : undefined, label: !title ? ariaLabel : undefined })}
151
- style:--sv-drawer-size={sizeVar}
152
- style:transform={sheet && dragY ? `translateY(${dragY}px)` : undefined}
153
- >
154
- {#if sheet}
155
- <!-- svelte-ignore a11y_no_static_element_interactions -->
156
- <div
157
- class="sv-drawer__grab"
158
- aria-hidden="true"
159
- onpointerdown={onGrabDown}
160
- onpointermove={onGrabMove}
161
- onpointerup={onGrabUp}
162
- onpointercancel={onGrabUp}
163
- ><span></span></div>
164
- {/if}
165
- {#if title || !hideClose}
166
- <div class="sv-drawer__header">
167
- <h2 class="sv-drawer__title" id={titleId}>{title ?? ''}</h2>
168
- {#if !hideClose}
169
- <button type="button" class="sv-drawer__x" aria-label="Close" onclick={close}>&times;</button>
170
- {/if}
171
- </div>
172
- {/if}
173
- <div class="sv-drawer__body">{@render children?.()}</div>
174
- {#if footer}<div class="sv-drawer__footer">{@render footer()}</div>{/if}
175
- </div>
176
- </div>
177
- {/if}
178
-
179
- <style>
180
- :global(.sv-drawer__backdrop) {
181
- position: fixed; inset: 0; z-index: 2147483000;
182
- background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(1.5px);
183
- animation: sv-drawer-bd-in 0.2s ease backwards;
184
- }
185
- :global(.sv-drawer__backdrop.is-leaving) { animation: sv-drawer-bd-out 0.2s ease forwards; }
186
- @keyframes sv-drawer-bd-in { from { opacity: 0 } to { opacity: 1 } }
187
- @keyframes sv-drawer-bd-out { from { opacity: 1 } to { opacity: 0 } }
188
-
189
- :global(.sv-drawer) {
190
- position: fixed;
191
- display: flex; flex-direction: column;
192
- background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
193
- box-shadow: 0 24px 64px -16px rgba(15, 23, 42, 0.5);
194
- overflow: hidden;
195
- /* Slide in on mount; `backwards` fill shows the off-screen start frame with no
196
- flash, and does NOT hold the end frame - so the sheet drag transform wins. */
197
- animation: sv-drawer-in 0.26s cubic-bezier(0.16, 1, 0.3, 1) backwards;
198
- }
199
- /* Exit keyframe; `forwards` fill holds the off-screen frame until we unmount. */
200
- :global(.sv-drawer.is-leaving) { animation: sv-drawer-out 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
201
- /* Off-screen vector per edge - the enter/exit keyframes read `--sv-off`. `side`
202
- is a stated physical edge (like SvToaster's position prop), not a text-flow
203
- "start/end" - so it stays physical left/right regardless of page dir. */
204
- :global(.sv-drawer--right), :global(.sv-drawer--left) {
205
- top: 0; bottom: 0; width: var(--sv-drawer-size); max-width: 100vw;
206
- }
207
- :global(.sv-drawer--right) { right: 0; border-left: 1px solid var(--sg-border, #e2e8f0); --sv-off: translateX(100%); }
208
- :global(.sv-drawer--left) { left: 0; border-right: 1px solid var(--sg-border, #e2e8f0); --sv-off: translateX(-100%); }
209
- /* Top / bottom: full width, fixed height, slide along Y. */
210
- :global(.sv-drawer--top), :global(.sv-drawer--bottom) {
211
- left: 0; right: 0; height: var(--sv-drawer-size); max-height: 100vh;
212
- }
213
- :global(.sv-drawer--top) { top: 0; border-bottom: 1px solid var(--sg-border, #e2e8f0); --sv-off: translateY(-100%); }
214
- :global(.sv-drawer--bottom) { bottom: 0; border-top: 1px solid var(--sg-border, #e2e8f0); --sv-off: translateY(100%); }
215
- @keyframes sv-drawer-in { from { transform: var(--sv-off) } to { transform: none } }
216
- @keyframes sv-drawer-out { from { transform: none } to { transform: var(--sv-off) } }
217
-
218
- /* Mobile bottom-sheet: centered, fixed width, rounded top, grab handle. Slides
219
- along Y like a bottom drawer (enter/exit keyframes read --sv-off from --bottom). */
220
- :global(.sv-drawer.is-sheet) {
221
- left: 0; right: 0; margin: 0 auto; top: auto;
222
- width: min(560px, 100vw); height: auto; max-height: 85vh;
223
- border: 1px solid var(--sg-border, #e2e8f0); border-bottom: 0;
224
- border-radius: 16px 16px 0 0;
225
- }
226
- /* No transition while the user is dragging the grab handle - follow the finger. */
227
- :global(.sv-drawer.is-dragging) { transition: none; }
228
- :global(.sv-drawer__grab) {
229
- flex: none; display: grid; place-items: center; padding: 8px 0 2px; cursor: grab; touch-action: none;
230
- }
231
- :global(.sv-drawer__grab span) {
232
- display: block; width: 40px; height: 4px; border-radius: 999px; background: var(--sg-border, #cbd5e1);
233
- }
234
- @media (prefers-reduced-motion: reduce) {
235
- :global(.sv-drawer__backdrop), :global(.sv-drawer__backdrop.is-leaving),
236
- :global(.sv-drawer), :global(.sv-drawer.is-leaving) { animation: none; }
237
- }
238
-
239
- :global(.sv-drawer__header) {
240
- display: flex; align-items: center; gap: 12px; padding: 13px 16px;
241
- border-bottom: 1px solid var(--sg-border, #e2e8f0);
242
- }
243
- :global(.sv-drawer__title) { flex: 1; margin: 0; font-size: 15px; font-weight: 650; }
244
- :global(.sv-drawer__x) {
245
- flex: none; width: 28px; height: 28px; display: grid; place-items: center;
246
- background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 6px; font-size: 20px; line-height: 1;
247
- }
248
- :global(.sv-drawer__x:hover) { background: var(--sg-row-hover-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
249
- :global(.sv-drawer__body) { padding: 16px; overflow: auto; flex: 1; font-size: 13.5px; line-height: 1.6; }
250
- :global(.sv-drawer__footer) {
251
- display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px;
252
- border-top: 1px solid var(--sg-border, #e2e8f0);
253
- }
254
- </style>
1
+ <script lang="ts">
2
+ /**
3
+ * SvDrawer - an edge-anchored side sheet (right / left / top / bottom): a
4
+ * backdrop, a sliding panel, and the full dialog a11y contract. Built entirely
5
+ * on the shared primitives - `createFocusTrap`, `lockScroll` and
6
+ * `createDismissableLayer` - so its focus, scroll-lock and Escape/backdrop
7
+ * behaviour is identical to SvModal and nested overlays close top-first.
8
+ * Portalled to <body>. Controlled via `open`.
9
+ *
10
+ * ```svelte
11
+ * <SvDrawer bind:open side="right" title="Filters">
12
+ * <p>Body</p>
13
+ * {#snippet footer()}<button onclick={() => open = false}>Apply</button>{/snippet}
14
+ * </SvDrawer>
15
+ * ```
16
+ */
17
+ import type { Snippet } from 'svelte'
18
+ import { untrack } from 'svelte'
19
+ import { portalToBody } from './popover'
20
+ import { nextEditorId } from './editor-contract'
21
+ import { createOverlay } from './createOverlay.svelte'
22
+
23
+ /** Edge the drawer slides from. Kept in sync with the `DrawerSide` export in
24
+ * index.ts (a bare type-only module script trips the Svelte/Vite parser). */
25
+ type DrawerSide = 'right' | 'left' | 'top' | 'bottom'
26
+
27
+ type Props = {
28
+ open?: boolean
29
+ onClose?: () => void
30
+ /** Edge the drawer slides from. Default 'right'. */
31
+ side?: DrawerSide
32
+ /** Panel size along its axis (width for left/right, height for top/bottom).
33
+ * Any CSS length; defaults to a sensible per-axis value. */
34
+ size?: string
35
+ title?: string
36
+ closeOnBackdrop?: boolean
37
+ closeOnEsc?: boolean
38
+ /** Hide the header close (x) button. */
39
+ hideClose?: boolean
40
+ /** Render as a mobile bottom-sheet: bottom-anchored, rounded top, a grab
41
+ * handle, and swipe-down-to-close. Overrides `side`. */
42
+ sheet?: boolean
43
+ /** Accessible name when there is no visible `title`. */
44
+ ariaLabel?: string
45
+ /** Fired after the close (exit) animation has finished and the drawer has
46
+ * left the DOM. Use it to clear the data the drawer was showing so the
47
+ * content stays put while it slides out. */
48
+ onClosed?: () => void
49
+ children?: Snippet
50
+ footer?: Snippet
51
+ }
52
+
53
+ let {
54
+ open = $bindable(false),
55
+ onClose,
56
+ side = 'right',
57
+ size,
58
+ title,
59
+ closeOnBackdrop = true,
60
+ closeOnEsc = true,
61
+ hideClose = false,
62
+ sheet = false,
63
+ ariaLabel,
64
+ onClosed,
65
+ children,
66
+ footer,
67
+ }: Props = $props()
68
+
69
+ const titleId = nextEditorId('sv-drawer-title')
70
+ let dialogEl = $state<HTMLDivElement | null>(null)
71
+
72
+ // A sheet is a bottom drawer with mobile affordances.
73
+ const effectiveSide = $derived<DrawerSide>(sheet ? 'bottom' : side)
74
+ const horizontal = $derived(effectiveSide === 'left' || effectiveSide === 'right')
75
+ const sizeVar = $derived(size ?? (horizontal ? 'min(400px, 92vw)' : 'min(360px, 85vh)'))
76
+
77
+ function close() { open = false; onClose?.() }
78
+
79
+ // Enter/exit animation via CSS @keyframes (the pattern SvModal uses - keyframes
80
+ // play on a `use:portalToBody` element; the Svelte `transition:` directive does
81
+ // NOT). `show` keeps the panel mounted; the enter keyframe fires on mount, and
82
+ // on close we add `is-leaving` (exit keyframe) and unmount + fire `onClosed`
83
+ // after the duration. Honors reduced-motion by dropping the hold to 0ms.
84
+ const reduceMotion = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches
85
+ const EXIT_MS = 260
86
+ let show = $state(false)
87
+ let leaving = $state(false)
88
+ let leaveTimer: ReturnType<typeof setTimeout> | undefined
89
+ $effect(() => {
90
+ if (open) {
91
+ clearTimeout(leaveTimer)
92
+ leaving = false
93
+ show = true
94
+ return
95
+ }
96
+ // Only run the leave sequence if the drawer was actually shown (skips the
97
+ // initial closed mount, which must not fire onClosed).
98
+ if (untrack(() => show)) {
99
+ leaving = true
100
+ leaveTimer = setTimeout(() => { show = false; leaving = false; onClosed?.() }, reduceMotion ? 0 : EXIT_MS)
101
+ }
102
+ // `open` is this effect's only dependency, so the cleanup runs on reopen (a
103
+ // no-op after the clearTimeout above) or on destroy - where it matters, so a
104
+ // drawer unmounted mid-exit doesn't leave a timer firing into a dead scope.
105
+ return () => clearTimeout(leaveTimer)
106
+ })
107
+
108
+ // Swipe-down-to-close for the sheet grab handle.
109
+ let dragY = $state(0)
110
+ let dragging = $state(false)
111
+ let dragStartY = 0
112
+ function onGrabDown(e: PointerEvent) {
113
+ dragging = true
114
+ dragStartY = e.clientY
115
+ ;(e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId)
116
+ }
117
+ function onGrabMove(e: PointerEvent) {
118
+ if (!dragging) return
119
+ dragY = Math.max(0, e.clientY - dragStartY)
120
+ }
121
+ function onGrabUp(e: PointerEvent) {
122
+ if (!dragging) return
123
+ dragging = false
124
+ ;(e.currentTarget as HTMLElement).releasePointerCapture?.(e.pointerId)
125
+ if (dragY > 80) close()
126
+ else dragY = 0
127
+ }
128
+
129
+ // Focus trap + scroll lock + Escape/backdrop dismissal come from the shared
130
+ // headless overlay core - one tested implementation across every dialog-like
131
+ // overlay, and nested overlays close top-first. See createOverlay.svelte.ts.
132
+ const overlay = createOverlay({
133
+ open: () => open,
134
+ getDialog: () => dialogEl,
135
+ onClose: close,
136
+ closeOnEsc: () => closeOnEsc,
137
+ closeOnBackdrop: () => closeOnBackdrop,
138
+ onOpen: () => { dragY = 0 },
139
+ })
140
+ </script>
141
+
142
+ {#if show}
143
+ <div class="sv-drawer__backdrop" class:is-leaving={leaving} use:portalToBody>
144
+ <div
145
+ bind:this={dialogEl}
146
+ class="sv-drawer sv-drawer--{effectiveSide}"
147
+ class:is-leaving={leaving}
148
+ class:is-sheet={sheet}
149
+ class:is-dragging={dragging}
150
+ {...overlay.dialogProps({ labelledBy: title ? titleId : undefined, label: !title ? ariaLabel : undefined })}
151
+ style:--sv-drawer-size={sizeVar}
152
+ style:transform={sheet && dragY ? `translateY(${dragY}px)` : undefined}
153
+ >
154
+ {#if sheet}
155
+ <!-- svelte-ignore a11y_no_static_element_interactions -->
156
+ <div
157
+ class="sv-drawer__grab"
158
+ aria-hidden="true"
159
+ onpointerdown={onGrabDown}
160
+ onpointermove={onGrabMove}
161
+ onpointerup={onGrabUp}
162
+ onpointercancel={onGrabUp}
163
+ ><span></span></div>
164
+ {/if}
165
+ {#if title || !hideClose}
166
+ <div class="sv-drawer__header">
167
+ <h2 class="sv-drawer__title" id={titleId}>{title ?? ''}</h2>
168
+ {#if !hideClose}
169
+ <button type="button" class="sv-drawer__x" aria-label="Close" onclick={close}>&times;</button>
170
+ {/if}
171
+ </div>
172
+ {/if}
173
+ <div class="sv-drawer__body">{@render children?.()}</div>
174
+ {#if footer}<div class="sv-drawer__footer">{@render footer()}</div>{/if}
175
+ </div>
176
+ </div>
177
+ {/if}
178
+
179
+ <style>
180
+ :global(.sv-drawer__backdrop) {
181
+ position: fixed; inset: 0; z-index: 2147483000;
182
+ background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(1.5px);
183
+ animation: sv-drawer-bd-in 0.2s ease backwards;
184
+ }
185
+ :global(.sv-drawer__backdrop.is-leaving) { animation: sv-drawer-bd-out 0.2s ease forwards; }
186
+ @keyframes sv-drawer-bd-in { from { opacity: 0 } to { opacity: 1 } }
187
+ @keyframes sv-drawer-bd-out { from { opacity: 1 } to { opacity: 0 } }
188
+
189
+ :global(.sv-drawer) {
190
+ position: fixed;
191
+ display: flex; flex-direction: column;
192
+ background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
193
+ box-shadow: 0 24px 64px -16px rgba(15, 23, 42, 0.5);
194
+ overflow: hidden;
195
+ /* Slide in on mount; `backwards` fill shows the off-screen start frame with no
196
+ flash, and does NOT hold the end frame - so the sheet drag transform wins. */
197
+ animation: sv-drawer-in 0.26s cubic-bezier(0.16, 1, 0.3, 1) backwards;
198
+ }
199
+ /* Exit keyframe; `forwards` fill holds the off-screen frame until we unmount. */
200
+ :global(.sv-drawer.is-leaving) { animation: sv-drawer-out 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
201
+ /* Off-screen vector per edge - the enter/exit keyframes read `--sv-off`. `side`
202
+ is a stated physical edge (like SvToaster's position prop), not a text-flow
203
+ "start/end" - so it stays physical left/right regardless of page dir. */
204
+ :global(.sv-drawer--right), :global(.sv-drawer--left) {
205
+ top: 0; bottom: 0; width: var(--sv-drawer-size); max-width: 100vw;
206
+ }
207
+ :global(.sv-drawer--right) { right: 0; border-left: 1px solid var(--sg-border, #e2e8f0); --sv-off: translateX(100%); }
208
+ :global(.sv-drawer--left) { left: 0; border-right: 1px solid var(--sg-border, #e2e8f0); --sv-off: translateX(-100%); }
209
+ /* Top / bottom: full width, fixed height, slide along Y. */
210
+ :global(.sv-drawer--top), :global(.sv-drawer--bottom) {
211
+ left: 0; right: 0; height: var(--sv-drawer-size); max-height: 100vh;
212
+ }
213
+ :global(.sv-drawer--top) { top: 0; border-bottom: 1px solid var(--sg-border, #e2e8f0); --sv-off: translateY(-100%); }
214
+ :global(.sv-drawer--bottom) { bottom: 0; border-top: 1px solid var(--sg-border, #e2e8f0); --sv-off: translateY(100%); }
215
+ @keyframes sv-drawer-in { from { transform: var(--sv-off) } to { transform: none } }
216
+ @keyframes sv-drawer-out { from { transform: none } to { transform: var(--sv-off) } }
217
+
218
+ /* Mobile bottom-sheet: centered, fixed width, rounded top, grab handle. Slides
219
+ along Y like a bottom drawer (enter/exit keyframes read --sv-off from --bottom). */
220
+ :global(.sv-drawer.is-sheet) {
221
+ left: 0; right: 0; margin: 0 auto; top: auto;
222
+ width: min(560px, 100vw); height: auto; max-height: 85vh;
223
+ border: 1px solid var(--sg-border, #e2e8f0); border-bottom: 0;
224
+ border-radius: 16px 16px 0 0;
225
+ }
226
+ /* No transition while the user is dragging the grab handle - follow the finger. */
227
+ :global(.sv-drawer.is-dragging) { transition: none; }
228
+ :global(.sv-drawer__grab) {
229
+ flex: none; display: grid; place-items: center; padding: 8px 0 2px; cursor: grab; touch-action: none;
230
+ }
231
+ :global(.sv-drawer__grab span) {
232
+ display: block; width: 40px; height: 4px; border-radius: 999px; background: var(--sg-border, #cbd5e1);
233
+ }
234
+ @media (prefers-reduced-motion: reduce) {
235
+ :global(.sv-drawer__backdrop), :global(.sv-drawer__backdrop.is-leaving),
236
+ :global(.sv-drawer), :global(.sv-drawer.is-leaving) { animation: none; }
237
+ }
238
+
239
+ :global(.sv-drawer__header) {
240
+ display: flex; align-items: center; gap: 12px; padding: 13px 16px;
241
+ border-bottom: 1px solid var(--sg-border, #e2e8f0);
242
+ }
243
+ :global(.sv-drawer__title) { flex: 1; margin: 0; font-size: 15px; font-weight: 650; }
244
+ :global(.sv-drawer__x) {
245
+ flex: none; width: 28px; height: 28px; display: grid; place-items: center;
246
+ background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 6px; font-size: 20px; line-height: 1;
247
+ }
248
+ :global(.sv-drawer__x:hover) { background: var(--sg-row-hover-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
249
+ :global(.sv-drawer__body) { padding: 16px; overflow: auto; flex: 1; font-size: 13.5px; line-height: 1.6; }
250
+ :global(.sv-drawer__footer) {
251
+ display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px;
252
+ border-top: 1px solid var(--sg-border, #e2e8f0);
253
+ }
254
+ </style>