@svgrid/grid 2.1.22 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (295) hide show
  1. package/README.md +9 -2
  2. package/dist/DockNodeView.svelte +306 -0
  3. package/dist/DockNodeView.svelte.d.ts +7 -0
  4. package/dist/DockPopoutHost.svelte +17 -0
  5. package/dist/DockPopoutHost.svelte.d.ts +14 -0
  6. package/dist/FlexRender.svelte +96 -96
  7. package/dist/GridFooter.svelte +178 -178
  8. package/dist/GridMenus.svelte +83 -3
  9. package/dist/SvAutoComplete.svelte +5 -3
  10. package/dist/SvCarousel.svelte +141 -163
  11. package/dist/SvColorInput.svelte +187 -186
  12. package/dist/SvColorInput.svelte.d.ts +1 -1
  13. package/dist/SvComboBox.svelte +7 -3
  14. package/dist/SvCommand.svelte +28 -85
  15. package/dist/SvContextMenu.svelte +116 -116
  16. package/dist/SvCountryInput.svelte +1 -1
  17. package/dist/SvDateRangeInput.svelte +1 -1
  18. package/dist/SvDateTimePicker.svelte +9 -3
  19. package/dist/SvDateTimePicker.svelte.d.ts +3 -0
  20. package/dist/SvDockLayout.svelte +244 -0
  21. package/dist/SvDockLayout.svelte.d.ts +77 -0
  22. package/dist/SvDockManager.svelte +922 -0
  23. package/dist/SvDockManager.svelte.d.ts +106 -0
  24. package/dist/SvDrawer.svelte +250 -228
  25. package/dist/SvDrawer.svelte.d.ts +4 -0
  26. package/dist/SvDropDownList.svelte +85 -13
  27. package/dist/SvDropDownList.svelte.d.ts +3 -0
  28. package/dist/SvField.svelte +21 -4
  29. package/dist/SvField.svelte.d.ts +1 -0
  30. package/dist/SvForm.svelte +201 -91
  31. package/dist/SvForm.svelte.d.ts +15 -22
  32. package/dist/SvGrid.controller.svelte.d.ts +32 -1
  33. package/dist/SvGrid.controller.svelte.js +156 -27
  34. package/dist/SvGrid.css +193 -5
  35. package/dist/SvGrid.svelte +3131 -2786
  36. package/dist/SvGrid.types.d.ts +452 -1
  37. package/dist/SvGridBoard.svelte +2339 -2339
  38. package/dist/SvGridChart.svelte +1724 -1724
  39. package/dist/SvGridChartPanel.svelte +485 -485
  40. package/dist/SvGridDropdown.svelte +689 -682
  41. package/dist/SvGridSelect.svelte +1 -0
  42. package/dist/SvGroupCell.svelte +109 -109
  43. package/dist/SvListBox.svelte +36 -14
  44. package/dist/SvMaskedInput.svelte +4 -3
  45. package/dist/SvMaskedInput.svelte.d.ts +1 -1
  46. package/dist/SvMenu.svelte +124 -124
  47. package/dist/SvMenuList.svelte +117 -165
  48. package/dist/SvMenuList.svelte.d.ts +2 -13
  49. package/dist/SvModal.svelte +12 -29
  50. package/dist/SvMultiSelect.svelte +1 -0
  51. package/dist/SvNumberInput.svelte +131 -130
  52. package/dist/SvNumberInput.svelte.d.ts +1 -1
  53. package/dist/SvOtpInput.svelte +158 -158
  54. package/dist/SvPagination.svelte +18 -18
  55. package/dist/SvPasswordInput.svelte +3 -2
  56. package/dist/SvPasswordInput.svelte.d.ts +1 -1
  57. package/dist/SvPhoneInput.svelte +3 -2
  58. package/dist/SvPhoneInput.svelte.d.ts +1 -1
  59. package/dist/SvPopover.svelte +139 -139
  60. package/dist/SvRowGroupPanel.svelte +170 -170
  61. package/dist/SvScrollArea.svelte +61 -61
  62. package/dist/SvStepper.svelte +6 -9
  63. package/dist/SvTagsInput.svelte +3 -2
  64. package/dist/SvTagsInput.svelte.d.ts +1 -1
  65. package/dist/SvTooltip.svelte +127 -138
  66. package/dist/SvTour.svelte +204 -176
  67. package/dist/SvTree.svelte +377 -377
  68. package/dist/SvTreeSelect.svelte +230 -229
  69. package/dist/build-api.js +76 -54
  70. package/dist/cdn/svgrid.js +10913 -6450
  71. package/dist/cdn/svgrid.svelte-external.js +9628 -5481
  72. package/dist/chart-export.js +8 -8
  73. package/dist/columns.js +6 -0
  74. package/dist/conditional-formatting.d.ts +67 -3
  75. package/dist/conditional-formatting.js +124 -17
  76. package/dist/createCarousel.svelte.d.ts +72 -0
  77. package/dist/createCarousel.svelte.js +80 -0
  78. package/dist/createCommand.svelte.d.ts +62 -0
  79. package/dist/createCommand.svelte.js +109 -0
  80. package/dist/createForm.svelte.d.ts +62 -0
  81. package/dist/createForm.svelte.js +374 -0
  82. package/dist/createMenu.svelte.d.ts +88 -0
  83. package/dist/createMenu.svelte.js +153 -0
  84. package/dist/createOverlay.svelte.d.ts +38 -0
  85. package/dist/createOverlay.svelte.js +68 -0
  86. package/dist/createPagination.d.ts +74 -0
  87. package/dist/createPagination.js +71 -0
  88. package/dist/createPopoverSelect.svelte.js +6 -12
  89. package/dist/createStepper.d.ts +44 -0
  90. package/dist/createStepper.js +26 -0
  91. package/dist/createTooltip.svelte.d.ts +32 -0
  92. package/dist/createTooltip.svelte.js +61 -0
  93. package/dist/datetime/timezone.d.ts +36 -0
  94. package/dist/datetime/timezone.js +110 -0
  95. package/dist/dock-context.d.ts +52 -0
  96. package/dist/dock-context.js +1 -0
  97. package/dist/dock-manager-model.d.ts +136 -0
  98. package/dist/dock-manager-model.js +514 -0
  99. package/dist/dock-model.d.ts +105 -0
  100. package/dist/dock-model.js +288 -0
  101. package/dist/dock-popout.d.ts +30 -0
  102. package/dist/dock-popout.js +81 -0
  103. package/dist/editor-contract.d.ts +2 -0
  104. package/dist/filter-operators.d.ts +6 -0
  105. package/dist/filter-operators.js +35 -2
  106. package/dist/filtering/excel-filters.d.ts +18 -1
  107. package/dist/filtering/excel-filters.js +56 -0
  108. package/dist/form-field.d.ts +73 -0
  109. package/dist/form-field.js +15 -0
  110. package/dist/index.d.ts +25 -5
  111. package/dist/index.js +40 -4
  112. package/dist/list-nav.d.ts +18 -0
  113. package/dist/list-nav.js +30 -0
  114. package/dist/list-option.d.ts +2 -0
  115. package/dist/menu-item.d.ts +20 -0
  116. package/dist/menu-item.js +1 -0
  117. package/dist/menus.d.ts +5 -0
  118. package/dist/menus.js +68 -16
  119. package/dist/panel-resize.d.ts +25 -0
  120. package/dist/panel-resize.js +40 -0
  121. package/dist/popover.d.ts +29 -3
  122. package/dist/popover.js +22 -6
  123. package/dist/recurrence.d.ts +33 -7
  124. package/dist/recurrence.js +151 -13
  125. package/dist/row-drag.d.ts +8 -0
  126. package/dist/row-drag.js +11 -0
  127. package/dist/scheduler-ical.d.ts +30 -0
  128. package/dist/scheduler-ical.js +180 -0
  129. package/dist/scheduler-model.d.ts +269 -0
  130. package/dist/scheduler-model.js +602 -0
  131. package/dist/scheduler-view.svelte.d.ts +22 -0
  132. package/dist/scheduler-view.svelte.js +13 -0
  133. package/dist/spreadsheet.js +20 -12
  134. package/dist/ui-app.types.d.ts +3 -0
  135. package/package.json +14 -10
  136. package/src/DockNodeView.svelte +306 -0
  137. package/src/DockPopoutHost.svelte +17 -0
  138. package/src/FlexRender.svelte +96 -96
  139. package/src/GridFooter.svelte +178 -178
  140. package/src/GridMenus.svelte +83 -3
  141. package/src/SvAutoComplete.svelte +5 -3
  142. package/src/SvCarousel.svelte +141 -163
  143. package/src/SvCarousel.test.ts +68 -0
  144. package/src/SvColorInput.svelte +187 -186
  145. package/src/SvComboBox.svelte +7 -3
  146. package/src/SvCommand.svelte +28 -85
  147. package/src/SvCommand.test.ts +78 -0
  148. package/src/SvContextMenu.svelte +116 -116
  149. package/src/SvCountryInput.svelte +1 -1
  150. package/src/SvDateRangeInput.svelte +1 -1
  151. package/src/SvDateTimePicker.svelte +9 -3
  152. package/src/SvDockLayout.svelte +244 -0
  153. package/src/SvDockManager.svelte +922 -0
  154. package/src/SvDrawer.svelte +250 -228
  155. package/src/SvDropDownList.svelte +85 -13
  156. package/src/SvField.svelte +21 -4
  157. package/src/SvForm.svelte +201 -91
  158. package/src/SvForm.test.ts +299 -0
  159. package/src/SvGrid.controller.svelte.ts +3158 -3034
  160. package/src/SvGrid.css +193 -5
  161. package/src/SvGrid.svelte +3131 -2786
  162. package/src/SvGrid.types.ts +1489 -1027
  163. package/src/SvGridBoard.svelte +2339 -2339
  164. package/src/SvGridChart.svelte +1724 -1724
  165. package/src/SvGridChartPanel.svelte +485 -485
  166. package/src/SvGridDropdown.svelte +689 -682
  167. package/src/SvGridSelect.svelte +1 -0
  168. package/src/SvGroupCell.svelte +109 -109
  169. package/src/SvListBox.svelte +36 -14
  170. package/src/SvMaskedInput.svelte +4 -3
  171. package/src/SvMenu.svelte +124 -124
  172. package/src/SvMenu.test.ts +97 -73
  173. package/src/SvMenuList.svelte +117 -165
  174. package/src/SvModal.svelte +12 -29
  175. package/src/SvModal.test.ts +82 -0
  176. package/src/SvMultiSelect.svelte +1 -0
  177. package/src/SvNumberInput.svelte +131 -130
  178. package/src/SvOtpInput.svelte +158 -158
  179. package/src/SvPagination.svelte +18 -18
  180. package/src/SvPasswordInput.svelte +3 -2
  181. package/src/SvPhoneInput.svelte +3 -2
  182. package/src/SvPopover.svelte +139 -139
  183. package/src/SvRowGroupPanel.svelte +170 -170
  184. package/src/SvScrollArea.svelte +61 -61
  185. package/src/SvStepper.svelte +6 -9
  186. package/src/SvTagsInput.svelte +3 -2
  187. package/src/SvTooltip.svelte +127 -138
  188. package/src/SvTooltip.test.ts +73 -0
  189. package/src/SvTour.svelte +204 -176
  190. package/src/SvTree.svelte +377 -377
  191. package/src/SvTreeSelect.svelte +230 -229
  192. package/src/a11y.contract.test.ts +49 -49
  193. package/src/a11y.test.ts +59 -59
  194. package/src/a11y.ts +61 -61
  195. package/src/build-api.ts +870 -847
  196. package/src/cell-formatting.ts +169 -169
  197. package/src/cell-render.ts +469 -469
  198. package/src/chart-export.ts +201 -201
  199. package/src/chart.ts +2296 -2296
  200. package/src/collaboration.test.ts +104 -104
  201. package/src/collaboration.ts +167 -167
  202. package/src/columns.ts +5 -0
  203. package/src/conditional-formatting.test.ts +104 -0
  204. package/src/conditional-formatting.ts +176 -19
  205. package/src/core.performance.test.ts +30 -30
  206. package/src/core.ts +1111 -1111
  207. package/src/createAutocomplete.svelte.ts +132 -132
  208. package/src/createCarousel.svelte.ts +104 -0
  209. package/src/createCombobox.svelte.ts +179 -179
  210. package/src/createCommand.svelte.ts +125 -0
  211. package/src/createCountryInput.svelte.ts +157 -157
  212. package/src/createDropdownList.svelte.ts +162 -162
  213. package/src/createForm.svelte.ts +333 -0
  214. package/src/createGrid.svelte.ts +42 -42
  215. package/src/createGrid.test.ts +10 -10
  216. package/src/createGridState.svelte.ts +17 -17
  217. package/src/createMenu.svelte.ts +202 -0
  218. package/src/createOverlay.svelte.ts +101 -0
  219. package/src/createPagination.test.ts +65 -0
  220. package/src/createPagination.ts +84 -0
  221. package/src/createPopoverSelect.svelte.ts +206 -210
  222. package/src/createStepper.test.ts +62 -0
  223. package/src/createStepper.ts +61 -0
  224. package/src/createTooltip.svelte.ts +86 -0
  225. package/src/createTree.svelte.ts +319 -319
  226. package/src/datetime/timezone.test.ts +69 -0
  227. package/src/datetime/timezone.ts +134 -0
  228. package/src/dock-context.ts +47 -0
  229. package/src/dock-manager-model.test.ts +275 -0
  230. package/src/dock-manager-model.ts +593 -0
  231. package/src/dock-model.test.ts +163 -0
  232. package/src/dock-model.ts +368 -0
  233. package/src/dock-popout.ts +94 -0
  234. package/src/editing.test.ts +859 -859
  235. package/src/editing.ts +675 -675
  236. package/src/editor-contract.ts +2 -0
  237. package/src/export-data-api.test.ts +126 -126
  238. package/src/export-format.test.ts +107 -107
  239. package/src/export-format.ts +598 -598
  240. package/src/filter-operators.test.ts +59 -0
  241. package/src/filter-operators.ts +35 -2
  242. package/src/filtering/excel-filters.test.ts +86 -1
  243. package/src/filtering/excel-filters.ts +65 -0
  244. package/src/flex-render.ts +3 -3
  245. package/src/form-field.ts +87 -0
  246. package/src/index.ts +623 -469
  247. package/src/keyboard.test.ts +59 -59
  248. package/src/keyboard.ts +97 -97
  249. package/src/list-nav.test.ts +49 -0
  250. package/src/list-nav.ts +29 -0
  251. package/src/list-option.ts +2 -0
  252. package/src/menu-item.ts +21 -0
  253. package/src/menus.test.ts +48 -0
  254. package/src/menus.ts +639 -582
  255. package/src/merge-objects.ts +48 -48
  256. package/src/overlays.test.ts +90 -90
  257. package/src/panel-resize.ts +52 -0
  258. package/src/popover.bounds.test.ts +93 -0
  259. package/src/popover.ts +51 -7
  260. package/src/recurrence.test.ts +88 -1
  261. package/src/recurrence.ts +166 -15
  262. package/src/render-component.ts +28 -28
  263. package/src/row-drag.ts +10 -0
  264. package/src/scheduler-ical.test.ts +68 -0
  265. package/src/scheduler-ical.ts +180 -0
  266. package/src/scheduler-model.test.ts +546 -0
  267. package/src/scheduler-model.ts +853 -0
  268. package/src/scheduler-view.svelte.ts +33 -0
  269. package/src/selection.test.ts +754 -754
  270. package/src/selection.ts +600 -600
  271. package/src/server-data-source.test.ts +289 -289
  272. package/src/server-data-source.ts +413 -413
  273. package/src/sparkline.test.ts +68 -68
  274. package/src/sparkline.ts +169 -169
  275. package/src/spreadsheet.test.ts +489 -489
  276. package/src/spreadsheet.ts +312 -304
  277. package/src/static-functions.ts +11 -11
  278. package/src/subscribe.ts +38 -38
  279. package/src/svgrid-wrapper.types.ts +501 -501
  280. package/src/svgrid.behavior.test.ts +706 -706
  281. package/src/svgrid.charting.test.ts +527 -527
  282. package/src/svgrid.effect-driven-filter.svelte.test.ts +116 -0
  283. package/src/svgrid.features.test.ts +157 -157
  284. package/src/svgrid.new-features.wrapper.test.ts +251 -251
  285. package/src/svgrid.wrapper.test.ts +40 -40
  286. package/src/test-setup.ts +62 -62
  287. package/src/themes/index.ts +159 -159
  288. package/src/ui-app.types.ts +3 -0
  289. package/src/virtual.test.ts +6 -4
  290. package/src/virtualization/column-virtualizer.test.ts +27 -27
  291. package/src/virtualization/column-virtualizer.ts +30 -30
  292. package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
  293. package/src/virtualization/types.ts +30 -30
  294. package/src/virtualization/virtualizer.test.ts +47 -47
  295. package/src/virtualization/virtualizer.ts +296 -296
package/dist/SvTooltip.svelte CHANGED
@@ -1,138 +1,127 @@
1
- <script lang="ts">
2
- /**
3
- * SvTooltip - a small hover/focus tooltip anchored to its child, portalled to
4
- * <body> so it is never clipped. Shows after a short delay, hides on leave /
5
- * blur / Escape, and is wired via `aria-describedby` (role="tooltip") onto the
6
- * focusable child itself, so AT users get it announced on focus, not just
7
- * sighted users on hover.
8
- *
9
- * ```svelte
10
- * <SvTooltip text="Delete row"><button aria-label="Delete">🗑</button></SvTooltip>
11
- * ```
12
- */
13
- import type { Snippet } from 'svelte'
14
- import { portalToBody, popIn } from './popover'
15
- import { nextEditorId } from './editor-contract'
16
- import { getFocusable } from './a11y/focus-trap'
17
-
18
- type Props = {
19
- text: string
20
- placement?: 'top' | 'bottom'
21
- /** Show delay in ms. Default 300. */
22
- delay?: number
23
- disabled?: boolean
24
- children?: Snippet
25
- }
26
-
27
- let { text, placement = 'top', delay = 300, disabled = false, children }: Props = $props()
28
-
29
- let anchorEl = $state<HTMLSpanElement | null>(null)
30
- let tipEl = $state<HTMLDivElement | null>(null)
31
- let open = $state(false)
32
- let pos = $state({ top: 0, left: 0, arrowX: 12 })
33
- const tid = nextEditorId('sv-tip')
34
- let showTimer: ReturnType<typeof setTimeout> | undefined
35
-
36
- function place() {
37
- if (!anchorEl) return
38
- const r = anchorEl.getBoundingClientRect()
39
- const tipH = tipEl?.offsetHeight ?? 30
40
- const tipW = tipEl?.offsetWidth ?? 0
41
- const top = placement === 'top' ? r.top - tipH - 8 : r.bottom + 8
42
- let left = r.left + r.width / 2 - tipW / 2
43
- left = Math.max(4, Math.min(left, window.innerWidth - tipW - 4))
44
- // Keep the arrow under the anchor's center even when the tip is clamped.
45
- const arrowX = Math.max(10, Math.min(tipW - 10, r.left + r.width / 2 - left))
46
- pos = { top, left, arrowX }
47
- }
48
-
49
- function show() {
50
- if (disabled || !text) return
51
- clearTimeout(showTimer)
52
- showTimer = setTimeout(() => { open = true; queueMicrotask(place) }, delay)
53
- }
54
- function hide() { clearTimeout(showTimer); open = false }
55
-
56
- $effect(() => {
57
- if (!open) return
58
- place()
59
- const rp = () => place()
60
- window.addEventListener('scroll', rp, true)
61
- window.addEventListener('resize', rp)
62
- const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') hide() }
63
- document.addEventListener('keydown', onKey)
64
- return () => {
65
- window.removeEventListener('scroll', rp, true)
66
- window.removeEventListener('resize', rp)
67
- document.removeEventListener('keydown', onKey)
68
- }
69
- })
70
-
71
- // The wrapper span above is never itself Tab-focusable, so putting
72
- // aria-describedby only on it does nothing for keyboard/AT users - they
73
- // focus the real interactive child (e.g. the <button> in the doc example),
74
- // and that's the element whose accessible description actually gets
75
- // announced. Mirror the id onto that child too, merging with (and later
76
- // restoring) any aria-describedby it already carries.
77
- $effect(() => {
78
- if (!open || !anchorEl) return
79
- const child = getFocusable(anchorEl)[0]
80
- if (!child) return
81
- const before = child.getAttribute('aria-describedby')
82
- const ids = new Set((before ?? '').split(/\s+/).filter(Boolean))
83
- ids.add(tid)
84
- child.setAttribute('aria-describedby', [...ids].join(' '))
85
- return () => {
86
- const remaining = (child.getAttribute('aria-describedby') ?? '')
87
- .split(/\s+/)
88
- .filter((id) => id && id !== tid)
89
- if (remaining.length) child.setAttribute('aria-describedby', remaining.join(' '))
90
- else child.removeAttribute('aria-describedby')
91
- }
92
- })
93
- </script>
94
-
95
- <!-- svelte-ignore a11y_no_static_element_interactions -->
96
- <span
97
- bind:this={anchorEl}
98
- class="sv-tip__anchor"
99
- aria-describedby={open ? tid : undefined}
100
- onpointerenter={show}
101
- onpointerleave={hide}
102
- onfocusin={show}
103
- onfocusout={hide}
104
- >
105
- {@render children?.()}
106
- </span>
107
-
108
- {#if open}
109
- <div
110
- bind:this={tipEl}
111
- id={tid}
112
- class="sv-tip"
113
- role="tooltip"
114
- use:portalToBody
115
- use:popIn={{ up: placement === 'top', duration: 110, scale: 0.9 }}
116
- class:sv-tip--bottom={placement === 'bottom'}
117
- style:position="fixed"
118
- style:top={`${pos.top}px`}
119
- style:left={`${pos.left}px`}
120
- style:--tip-arrow-x={`${pos.arrowX}px`}
121
- >{text}<span class="sv-tip__arrow" aria-hidden="true"></span></div>
122
- {/if}
123
-
124
- <style>
125
- .sv-tip__anchor { display: inline-flex; }
126
- :global(.sv-tip) {
127
- z-index: 2147483647; pointer-events: none; position: relative;
128
- max-width: 240px; padding: 5px 9px; font-size: 12px; line-height: 1.4; font-weight: 500;
129
- background: var(--sg-fg, #0f172a); color: var(--sg-bg, #fff);
130
- border-radius: 6px; box-shadow: 0 6px 20px -6px rgba(15, 23, 42, 0.5); white-space: normal;
131
- }
132
- :global(.sv-tip__arrow) {
133
- position: absolute; inset-inline-start: var(--tip-arrow-x, 12px); width: 8px; height: 8px;
134
- background: var(--sg-fg, #0f172a); transform: translateX(-50%) rotate(45deg);
135
- }
136
- :global(.sv-tip:not(.sv-tip--bottom) .sv-tip__arrow) { bottom: -3px; }
137
- :global(.sv-tip--bottom .sv-tip__arrow) { top: -3px; }
138
- </style>
1
+ <script lang="ts">
2
+ /**
3
+ * SvTooltip - a small hover/focus tooltip anchored to its child, portalled to
4
+ * <body> so it is never clipped. Shows after a short delay, hides on leave /
5
+ * blur / Escape, and is wired via `aria-describedby` (role="tooltip") onto the
6
+ * focusable child itself, so AT users get it announced on focus, not just
7
+ * sighted users on hover.
8
+ *
9
+ * ```svelte
10
+ * <SvTooltip text="Delete row"><button aria-label="Delete">🗑</button></SvTooltip>
11
+ * ```
12
+ */
13
+ import type { Snippet } from 'svelte'
14
+ import { portalToBody, popIn } from './popover'
15
+ import { getFocusable } from './a11y/focus-trap'
16
+ import { createTooltip } from './createTooltip.svelte'
17
+
18
+ type Props = {
19
+ text: string
20
+ placement?: 'top' | 'bottom'
21
+ /** Show delay in ms. Default 300. */
22
+ delay?: number
23
+ disabled?: boolean
24
+ children?: Snippet
25
+ }
26
+
27
+ let { text, placement = 'top', delay = 300, disabled = false, children }: Props = $props()
28
+
29
+ let anchorEl = $state<HTMLSpanElement | null>(null)
30
+ let tipEl = $state<HTMLDivElement | null>(null)
31
+ let pos = $state({ top: 0, left: 0, arrowX: 12 })
32
+
33
+ // Open state, show-delay and Escape-to-hide live in the shared headless core;
34
+ // this component owns only the DOM concerns (positioning + describedby merge).
35
+ const tip = createTooltip({ text: () => text, disabled: () => disabled, delay: () => delay })
36
+ const tid = tip.tipId
37
+
38
+ function place() {
39
+ if (!anchorEl) return
40
+ const r = anchorEl.getBoundingClientRect()
41
+ const tipH = tipEl?.offsetHeight ?? 30
42
+ const tipW = tipEl?.offsetWidth ?? 0
43
+ const top = placement === 'top' ? r.top - tipH - 8 : r.bottom + 8
44
+ let left = r.left + r.width / 2 - tipW / 2
45
+ left = Math.max(4, Math.min(left, window.innerWidth - tipW - 4))
46
+ // Keep the arrow under the anchor's center even when the tip is clamped.
47
+ const arrowX = Math.max(10, Math.min(tipW - 10, r.left + r.width / 2 - left))
48
+ pos = { top, left, arrowX }
49
+ }
50
+
51
+ // Reposition while open (and on scroll/resize). Escape-to-hide is the core's.
52
+ $effect(() => {
53
+ if (!tip.open) return
54
+ queueMicrotask(place)
55
+ const rp = () => place()
56
+ window.addEventListener('scroll', rp, true)
57
+ window.addEventListener('resize', rp)
58
+ return () => {
59
+ window.removeEventListener('scroll', rp, true)
60
+ window.removeEventListener('resize', rp)
61
+ }
62
+ })
63
+
64
+ // The wrapper span above is never itself Tab-focusable, so putting
65
+ // aria-describedby only on it does nothing for keyboard/AT users - they
66
+ // focus the real interactive child (e.g. the <button> in the doc example),
67
+ // and that's the element whose accessible description actually gets
68
+ // announced. Mirror the id onto that child too, merging with (and later
69
+ // restoring) any aria-describedby it already carries.
70
+ $effect(() => {
71
+ if (!tip.open || !anchorEl) return
72
+ const child = getFocusable(anchorEl)[0]
73
+ if (!child) return
74
+ const before = child.getAttribute('aria-describedby')
75
+ const ids = new Set((before ?? '').split(/\s+/).filter(Boolean))
76
+ ids.add(tid)
77
+ child.setAttribute('aria-describedby', [...ids].join(' '))
78
+ return () => {
79
+ const remaining = (child.getAttribute('aria-describedby') ?? '')
80
+ .split(/\s+/)
81
+ .filter((id) => id && id !== tid)
82
+ if (remaining.length) child.setAttribute('aria-describedby', remaining.join(' '))
83
+ else child.removeAttribute('aria-describedby')
84
+ }
85
+ })
86
+ </script>
87
+
88
+ <!-- svelte-ignore a11y_no_static_element_interactions -->
89
+ <span
90
+ bind:this={anchorEl}
91
+ class="sv-tip__anchor"
92
+ {...tip.anchorProps()}
93
+ >
94
+ {@render children?.()}
95
+ </span>
96
+
97
+ {#if tip.open}
98
+ <div
99
+ bind:this={tipEl}
100
+ id={tid}
101
+ class="sv-tip"
102
+ role="tooltip"
103
+ use:portalToBody
104
+ use:popIn={{ up: placement === 'top', duration: 110, scale: 0.9 }}
105
+ class:sv-tip--bottom={placement === 'bottom'}
106
+ style:position="fixed"
107
+ style:top={`${pos.top}px`}
108
+ style:left={`${pos.left}px`}
109
+ style:--tip-arrow-x={`${pos.arrowX}px`}
110
+ >{text}<span class="sv-tip__arrow" aria-hidden="true"></span></div>
111
+ {/if}
112
+
113
+ <style>
114
+ .sv-tip__anchor { display: inline-flex; }
115
+ :global(.sv-tip) {
116
+ z-index: 2147483647; pointer-events: none; position: relative;
117
+ max-width: 240px; padding: 5px 9px; font-size: 12px; line-height: 1.4; font-weight: 500;
118
+ background: var(--sg-fg, #0f172a); color: var(--sg-bg, #fff);
119
+ border-radius: 6px; box-shadow: 0 6px 20px -6px rgba(15, 23, 42, 0.5); white-space: normal;
120
+ }
121
+ :global(.sv-tip__arrow) {
122
+ position: absolute; inset-inline-start: var(--tip-arrow-x, 12px); width: 8px; height: 8px;
123
+ background: var(--sg-fg, #0f172a); transform: translateX(-50%) rotate(45deg);
124
+ }
125
+ :global(.sv-tip:not(.sv-tip--bottom) .sv-tip__arrow) { bottom: -3px; }
126
+ :global(.sv-tip--bottom .sv-tip__arrow) { top: -3px; }
127
+ </style>