@svgrid/grid 2.6.21 → 2.7.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 (358) hide show
  1. package/CHANGELOG.md +150 -88
  2. package/README.md +221 -199
  3. package/dist/FlexRender.svelte +96 -96
  4. package/dist/GridFooter.svelte +181 -181
  5. package/dist/GridMenus.svelte +201 -18
  6. package/dist/SvAutoComplete.svelte +169 -165
  7. package/dist/SvAvatar.svelte +75 -75
  8. package/dist/SvCalendar.svelte +503 -503
  9. package/dist/SvCarousel.svelte +141 -141
  10. package/dist/SvCheckBox.svelte +102 -102
  11. package/dist/SvCircularProgress.svelte +109 -109
  12. package/dist/SvColorInput.svelte +181 -181
  13. package/dist/SvComboBox.svelte +279 -275
  14. package/dist/SvContextMenu.svelte +116 -116
  15. package/dist/SvCountryInput.svelte +163 -163
  16. package/dist/SvDateRangeInput.svelte +25 -3
  17. package/dist/SvDrawer.svelte +254 -254
  18. package/dist/SvDropDownList.svelte +378 -374
  19. package/dist/SvDurationInput.svelte +126 -126
  20. package/dist/SvField.svelte +293 -293
  21. package/dist/SvForm.svelte +437 -437
  22. package/dist/SvGrid.controller.svelte.d.ts +61 -9
  23. package/dist/SvGrid.controller.svelte.js +363 -123
  24. package/dist/SvGrid.css +222 -1
  25. package/dist/SvGrid.helpers.d.ts +55 -0
  26. package/dist/SvGrid.helpers.js +83 -0
  27. package/dist/SvGrid.svelte +255 -56
  28. package/dist/SvGrid.types.d.ts +146 -1
  29. package/dist/SvGridCellEditor.svelte +744 -662
  30. package/dist/SvGridChart.svelte +1716 -1716
  31. package/dist/SvGridChartPanel.svelte +485 -485
  32. package/dist/SvGridChartView.svelte +70 -70
  33. package/dist/SvGridDropdown.svelte +728 -728
  34. package/dist/SvGridSelect.svelte +270 -266
  35. package/dist/SvGridSelect.svelte.d.ts +1 -1
  36. package/dist/SvGroupCell.svelte +116 -116
  37. package/dist/SvListBox.svelte +334 -326
  38. package/dist/SvMaskedInput.svelte +122 -122
  39. package/dist/SvMenu.svelte +124 -124
  40. package/dist/SvMenuList.svelte +146 -146
  41. package/dist/SvMultiSelect.svelte +293 -289
  42. package/dist/SvMultiSelect.svelte.d.ts +1 -1
  43. package/dist/SvNumberInput.svelte +172 -168
  44. package/dist/SvOtpInput.svelte +158 -158
  45. package/dist/SvPasswordInput.svelte +151 -151
  46. package/dist/SvPhoneInput.svelte +133 -133
  47. package/dist/SvPopover.svelte +197 -197
  48. package/dist/SvProgress.svelte +116 -116
  49. package/dist/SvRadioGroup.svelte +107 -107
  50. package/dist/SvRating.svelte +112 -112
  51. package/dist/SvResult.svelte +73 -73
  52. package/dist/SvRichCell.svelte +125 -0
  53. package/dist/SvRichCell.svelte.d.ts +15 -0
  54. package/dist/SvRichText.svelte +211 -211
  55. package/dist/SvRowGroupPanel.svelte +170 -170
  56. package/dist/SvScrollArea.svelte +61 -61
  57. package/dist/SvSlider.svelte +203 -203
  58. package/dist/SvSwitchButton.svelte +108 -108
  59. package/dist/SvTagsInput.svelte +115 -115
  60. package/dist/SvTextArea.svelte +5 -1
  61. package/dist/SvTextInput.svelte +147 -147
  62. package/dist/SvTimePicker.svelte +245 -245
  63. package/dist/SvToaster.svelte +159 -159
  64. package/dist/SvToggleButton.svelte +85 -85
  65. package/dist/SvTooltip.svelte +161 -161
  66. package/dist/SvTour.svelte +208 -208
  67. package/dist/SvTree.svelte +444 -444
  68. package/dist/SvTreeSelect.svelte +239 -235
  69. package/dist/SvTreeSelect.svelte.d.ts +1 -1
  70. package/dist/builtin-editors.d.ts +2 -2
  71. package/dist/builtin-editors.js +19 -3
  72. package/dist/cdn/GridMenus-C4oLsJyj.js +600 -0
  73. package/dist/cdn/GridMenus-yEivjNwl.js +601 -0
  74. package/dist/cdn/SvDateRangeInput-Bh0A0JkF.js +199 -0
  75. package/dist/cdn/SvDateRangeInput-DflbiP7N.js +198 -0
  76. package/dist/cdn/SvDateTimePicker-BWwpfB_o.js +812 -0
  77. package/dist/cdn/SvDateTimePicker-Bivn8dAP.js +816 -0
  78. package/dist/cdn/SvGridCellEditor-AXL8cHGO.js +550 -0
  79. package/dist/cdn/SvGridCellEditor-Ba7rY3eu.js +549 -0
  80. package/dist/cdn/{SvGridChart-BwVos976.js → SvGridChart-Bs2GIR2Q.js} +1 -1
  81. package/dist/cdn/{SvGridChart-BEJmNNx9.js → SvGridChart-CwhFz7GV.js} +1 -1
  82. package/dist/cdn/{SvGridChartPanel-BOknOkrP.js → SvGridChartPanel-1WXuStzM.js} +1 -1
  83. package/dist/cdn/{SvGridChartPanel-D2PjII4O.js → SvGridChartPanel-e5_nqNP9.js} +1 -1
  84. package/dist/cdn/{SvGridChartView-00LPUHL1.js → SvGridChartView-SmPW10dI.js} +1 -1
  85. package/dist/cdn/{SvGridChartView-BhUEJ5ki.js → SvGridChartView-eSPuJE6g.js} +1 -1
  86. package/dist/cdn/{SvGridDropdown-D0VdjeR8.js → SvGridDropdown-B1ZcLpgs.js} +1 -1
  87. package/dist/cdn/{SvGridDropdown-D13MtJ2j.js → SvGridDropdown-CtdbHcIS.js} +1 -1
  88. package/dist/cdn/column-resize-DsfNXMom.js +102 -0
  89. package/dist/cdn/date-format-CcP1tafP.js +1395 -0
  90. package/dist/cdn/date-format-DZT7T1wf.js +1393 -0
  91. package/dist/cdn/{editor-registry-CiI0xlKg.js → editor-registry-BhgE3S84.js} +51 -25
  92. package/dist/cdn/row-resize-BRcimkUT.js +95 -0
  93. package/dist/cdn/{src-BYq-qyrp.js → src-COC0vnpg.js} +7846 -7317
  94. package/dist/cdn/{src-DBel9wRZ.js → src-pYGV2rMR.js} +10033 -9504
  95. package/dist/cdn/svgrid.js +15 -11
  96. package/dist/cdn/svgrid.svelte-external.js +15 -11
  97. package/dist/cell-values.d.ts +16 -0
  98. package/dist/cell-values.js +28 -0
  99. package/dist/chart-export.js +8 -8
  100. package/dist/clipboard.d.ts +22 -0
  101. package/dist/clipboard.js +405 -27
  102. package/dist/column-groups.js +1 -1
  103. package/dist/column-resize.d.ts +46 -0
  104. package/dist/column-resize.js +205 -0
  105. package/dist/columns.d.ts +0 -3
  106. package/dist/columns.js +0 -57
  107. package/dist/core.d.ts +19 -4
  108. package/dist/core.js +460 -119
  109. package/dist/editing.js +12 -7
  110. package/dist/editors/cell-editors.d.ts +11 -0
  111. package/dist/editors/cell-editors.js +18 -1
  112. package/dist/filtering/excel-filters.js +28 -0
  113. package/dist/grid-messages.d.ts +15 -0
  114. package/dist/grid-messages.js +15 -0
  115. package/dist/group-display.d.ts +1 -1
  116. package/dist/index.d.ts +6 -1
  117. package/dist/index.js +10 -0
  118. package/dist/list-option.d.ts +6 -0
  119. package/dist/menus.js +41 -8
  120. package/dist/row-resize.d.ts +11 -0
  121. package/dist/row-resize.js +7 -1
  122. package/dist/sanitize-html.d.ts +37 -0
  123. package/dist/sanitize-html.js +234 -0
  124. package/dist/selection-bar-view.svelte.d.ts +25 -0
  125. package/dist/selection-bar-view.svelte.js +13 -0
  126. package/dist/selection.d.ts +2 -1
  127. package/dist/selection.js +133 -8
  128. package/dist/spreadsheet.d.ts +1 -1
  129. package/dist/spreadsheet.js +1 -1
  130. package/package.json +11 -11
  131. package/src/FlexRender.svelte +96 -96
  132. package/src/GridFooter.svelte +181 -181
  133. package/src/GridMenus.svelte +201 -18
  134. package/src/SvAutoComplete.svelte +169 -165
  135. package/src/SvAvatar.svelte +75 -75
  136. package/src/SvCalendar.svelte +503 -503
  137. package/src/SvCalendar.test.ts +226 -226
  138. package/src/SvCarousel.svelte +141 -141
  139. package/src/SvCheckBox.svelte +102 -102
  140. package/src/SvCircularProgress.svelte +109 -109
  141. package/src/SvColorInput.svelte +181 -181
  142. package/src/SvComboBox.svelte +279 -275
  143. package/src/SvContextMenu.svelte +116 -116
  144. package/src/SvCountryInput.svelte +163 -163
  145. package/src/SvDateRangeInput.svelte +25 -3
  146. package/src/SvDrawer.svelte +254 -254
  147. package/src/SvDropDownList.svelte +378 -374
  148. package/src/SvDurationInput.svelte +126 -126
  149. package/src/SvField.svelte +293 -293
  150. package/src/SvForm.svelte +437 -437
  151. package/src/SvForm.test.ts +411 -411
  152. package/src/SvGrid.controller.svelte.ts +404 -133
  153. package/src/SvGrid.css +222 -1
  154. package/src/SvGrid.helpers.ts +87 -0
  155. package/src/SvGrid.svelte +255 -56
  156. package/src/SvGrid.types.ts +2092 -1940
  157. package/src/SvGridCellEditor.svelte +744 -662
  158. package/src/SvGridChart.svelte +1716 -1716
  159. package/src/SvGridChartPanel.svelte +485 -485
  160. package/src/SvGridChartView.svelte +70 -70
  161. package/src/SvGridDropdown.svelte +728 -728
  162. package/src/SvGridSelect.svelte +270 -266
  163. package/src/SvGroupCell.svelte +116 -116
  164. package/src/SvListBox.svelte +334 -326
  165. package/src/SvMaskedInput.svelte +122 -122
  166. package/src/SvMenu.svelte +124 -124
  167. package/src/SvMenu.test.ts +97 -97
  168. package/src/SvMenuList.svelte +146 -146
  169. package/src/SvMultiSelect.svelte +293 -289
  170. package/src/SvNumberInput.svelte +172 -168
  171. package/src/SvOtpInput.svelte +158 -158
  172. package/src/SvPasswordInput.svelte +151 -151
  173. package/src/SvPhoneInput.svelte +133 -133
  174. package/src/SvPopover.svelte +197 -197
  175. package/src/SvProgress.svelte +116 -116
  176. package/src/SvRadioGroup.svelte +107 -107
  177. package/src/SvRating.svelte +112 -112
  178. package/src/SvResult.svelte +73 -73
  179. package/src/SvRichCell.svelte +125 -0
  180. package/src/SvRichText.svelte +211 -211
  181. package/src/SvRowGroupPanel.svelte +170 -170
  182. package/src/SvScrollArea.svelte +61 -61
  183. package/src/SvSlider.svelte +203 -203
  184. package/src/SvSwitchButton.svelte +108 -108
  185. package/src/SvTagsInput.svelte +115 -115
  186. package/src/SvTextArea.svelte +5 -1
  187. package/src/SvTextInput.svelte +147 -147
  188. package/src/SvTimePicker.svelte +245 -245
  189. package/src/SvToaster.svelte +159 -159
  190. package/src/SvToaster.test.ts +95 -95
  191. package/src/SvToggleButton.svelte +85 -85
  192. package/src/SvTooltip.svelte +161 -161
  193. package/src/SvTour.svelte +208 -208
  194. package/src/SvTree.svelte +444 -444
  195. package/src/SvTreeSelect.svelte +239 -235
  196. package/src/a11y/dismissable.test.ts +119 -119
  197. package/src/a11y/dismissable.ts +114 -114
  198. package/src/a11y.contract.test.ts +49 -49
  199. package/src/a11y.test.ts +59 -59
  200. package/src/a11y.ts +61 -61
  201. package/src/ai.test.ts +502 -502
  202. package/src/ai.ts +1419 -1419
  203. package/src/build-api.coverage.test.ts +633 -633
  204. package/src/build-api.ts +846 -846
  205. package/src/builtin-editors.grid.test.ts +83 -83
  206. package/src/builtin-editors.test.ts +18 -1
  207. package/src/builtin-editors.ts +19 -3
  208. package/src/cell-formatting.ts +171 -171
  209. package/src/cell-render.test.ts +513 -513
  210. package/src/cell-render.ts +496 -496
  211. package/src/cell-values.ts +148 -118
  212. package/src/chart-export.ts +202 -202
  213. package/src/chart-view.svelte.ts +36 -36
  214. package/src/chart.ts +2321 -2321
  215. package/src/clipboard.test.ts +93 -20
  216. package/src/clipboard.ts +433 -33
  217. package/src/collaboration.test.ts +104 -104
  218. package/src/collaboration.ts +167 -167
  219. package/src/column-groups.ts +78 -78
  220. package/src/column-resize.test.ts +381 -0
  221. package/src/column-resize.ts +227 -0
  222. package/src/columns.test.ts +0 -103
  223. package/src/columns.ts +0 -58
  224. package/src/core.aggregate.test.ts +134 -0
  225. package/src/core.filter.test.ts +156 -0
  226. package/src/core.grouping.test.ts +146 -0
  227. package/src/core.performance.test.ts +30 -30
  228. package/src/core.row-shape.test.ts +119 -0
  229. package/src/core.rowmodel-cache.test.ts +121 -0
  230. package/src/core.sort.test.ts +293 -0
  231. package/src/core.ts +1865 -1468
  232. package/src/createAutocomplete.svelte.ts +132 -132
  233. package/src/createCombobox.svelte.ts +191 -191
  234. package/src/createCountryInput.svelte.ts +157 -157
  235. package/src/createDropdownList.svelte.ts +168 -168
  236. package/src/createForm.svelte.ts +386 -386
  237. package/src/createGrid.svelte.ts +42 -42
  238. package/src/createGrid.test.ts +10 -10
  239. package/src/createGridState.svelte.ts +17 -17
  240. package/src/createListbox.svelte.ts +250 -250
  241. package/src/createMenu.svelte.ts +224 -224
  242. package/src/createPopoverSelect.svelte.ts +213 -213
  243. package/src/createSlider.svelte.ts +191 -191
  244. package/src/createTooltip.svelte.ts +144 -144
  245. package/src/createTree.svelte.ts +322 -322
  246. package/src/date-string-column.test.ts +87 -0
  247. package/src/datetime/date-core.ts +206 -206
  248. package/src/datetime/date-restrict.ts +61 -61
  249. package/src/datetime/timezone.ts +135 -135
  250. package/src/dock-manager-model.ts +596 -596
  251. package/src/dock-model.ts +374 -374
  252. package/src/editing.test.ts +974 -949
  253. package/src/editing.ts +609 -606
  254. package/src/editor-block-prop.test.ts +132 -0
  255. package/src/editor-contract.ts +171 -171
  256. package/src/editor-registry.grid.test.ts +144 -144
  257. package/src/editor-registry.ts +122 -122
  258. package/src/editors/cell-editors.ts +27 -1
  259. package/src/export-data-api.test.ts +126 -126
  260. package/src/export-format.test.ts +107 -107
  261. package/src/export-format.ts +601 -601
  262. package/src/filter-operators.ts +160 -160
  263. package/src/filtering/excel-filters.ts +325 -295
  264. package/src/filtering/normalize-fast-path.test.ts +104 -0
  265. package/src/flex-render.ts +3 -3
  266. package/src/form-field.ts +127 -127
  267. package/src/grid-messages.ts +34 -0
  268. package/src/group-display.test.ts +167 -167
  269. package/src/group-display.ts +200 -200
  270. package/src/headless.ts +87 -87
  271. package/src/index.ts +25 -1
  272. package/src/js-scroller.svelte.ts +173 -173
  273. package/src/keyboard-handlers.ts +270 -270
  274. package/src/keyboard.test.ts +59 -59
  275. package/src/keyboard.ts +97 -97
  276. package/src/list-nav.test.ts +49 -49
  277. package/src/list-nav.ts +29 -29
  278. package/src/list-option.test.ts +56 -56
  279. package/src/list-option.ts +179 -173
  280. package/src/menus.test.ts +43 -0
  281. package/src/menus.ts +597 -567
  282. package/src/merge-objects.ts +48 -48
  283. package/src/move-cells.test.ts +850 -0
  284. package/src/number-editor-literal.test.ts +84 -0
  285. package/src/number-editor.grid.test.ts +160 -0
  286. package/src/overlays.test.ts +90 -90
  287. package/src/positioning.ts +268 -268
  288. package/src/render-component.ts +28 -28
  289. package/src/resize-props.test.ts +361 -0
  290. package/src/row-drag-touch.ts +211 -211
  291. package/src/row-drag.test.ts +353 -353
  292. package/src/row-drag.ts +415 -415
  293. package/src/row-resize.test.ts +524 -493
  294. package/src/row-resize.ts +228 -210
  295. package/src/sanitize-html.test.ts +182 -0
  296. package/src/sanitize-html.ts +235 -0
  297. package/src/scheduler-ical.ts +181 -181
  298. package/src/scheduler-model.test.ts +562 -562
  299. package/src/scheduler-model.ts +873 -873
  300. package/src/selection-bar-view.svelte.ts +36 -0
  301. package/src/selection.test.ts +900 -743
  302. package/src/selection.ts +135 -8
  303. package/src/server-data-source.test.ts +383 -383
  304. package/src/server-data-source.ts +469 -469
  305. package/src/sparkline.test.ts +68 -68
  306. package/src/sparkline.ts +169 -169
  307. package/src/spreadsheet.test.ts +488 -488
  308. package/src/spreadsheet.ts +312 -312
  309. package/src/static-functions.ts +11 -11
  310. package/src/subscribe.ts +38 -38
  311. package/src/summaries.ts +113 -113
  312. package/src/svgrid-wrapper.types.ts +563 -563
  313. package/src/svgrid.async-editor-options.test.ts +273 -273
  314. package/src/svgrid.auto-row-height.test.ts +204 -204
  315. package/src/svgrid.behavior.test.ts +910 -910
  316. package/src/svgrid.charting.test.ts +534 -534
  317. package/src/svgrid.comments-autocomplete.test.ts +127 -127
  318. package/src/svgrid.context-menu.test.ts +147 -147
  319. package/src/svgrid.features.test.ts +157 -157
  320. package/src/svgrid.filter-depth.test.ts +163 -163
  321. package/src/svgrid.filter-menu-listbox.svelte.test.ts +377 -331
  322. package/src/svgrid.filter-menu-scroll.test.ts +112 -112
  323. package/src/svgrid.grand-total.test.ts +188 -188
  324. package/src/svgrid.group-display-mode.test.ts +171 -171
  325. package/src/svgrid.group-footers.test.ts +121 -121
  326. package/src/svgrid.group-pagination.test.ts +153 -153
  327. package/src/svgrid.in-suggest-snapshot.svelte.test.ts +91 -0
  328. package/src/svgrid.menu-scroll-close.test.ts +204 -0
  329. package/src/svgrid.new-features.wrapper.test.ts +251 -251
  330. package/src/svgrid.selection-bar-seam.test.ts +185 -0
  331. package/src/svgrid.tree-data.test.ts +186 -186
  332. package/src/svgrid.upsell-license.test.ts +117 -0
  333. package/src/svgrid.wrapper.test.ts +63 -63
  334. package/src/svgriddropdown.async-panel.svelte.test.ts +195 -195
  335. package/src/test-setup.ts +62 -62
  336. package/src/themes/index.ts +288 -288
  337. package/src/toast-store.svelte.ts +250 -250
  338. package/src/toast-store.test.ts +147 -147
  339. package/src/tree-row-model.test.ts +168 -168
  340. package/src/ui-buttons.test.ts +144 -144
  341. package/src/ui-inputs.test.ts +118 -118
  342. package/src/ui-localization.test.ts +113 -113
  343. package/src/ui-range.test.ts +70 -70
  344. package/src/ui-selection.test.ts +155 -155
  345. package/src/ui-tier1.test.ts +142 -142
  346. package/src/virtual.test.ts +88 -88
  347. package/src/virtualization/column-virtualizer.test.ts +27 -27
  348. package/src/virtualization/column-virtualizer.ts +30 -30
  349. package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
  350. package/src/virtualization/types.ts +30 -30
  351. package/src/virtualization/virtualizer.test.ts +47 -47
  352. package/src/virtualization/virtualizer.ts +322 -322
  353. package/dist/cdn/GridMenus-BfTAKn84.js +0 -488
  354. package/dist/cdn/GridMenus-C3bJd7w8.js +0 -489
  355. package/dist/cdn/SvDateTimePicker-CHnUkWcH.js +0 -2206
  356. package/dist/cdn/SvDateTimePicker-CRQH_U7E.js +0 -2201
  357. package/dist/cdn/SvGridCellEditor-BGUCzuPB.js +0 -523
  358. package/dist/cdn/SvGridCellEditor-G8IMWIws.js +0 -522
package/dist/SvContextMenu.svelte CHANGED
@@ -1,116 +1,116 @@
1
- <script lang="ts" module>
2
- export type { MenuItem } from './SvMenuList.svelte'
3
- </script>
4
-
5
- <script lang="ts">
6
- /**
7
- * SvContextMenu - wraps a region and opens a menu at the pointer on right-click
8
- * (or long-press). Reuses SvMenuList (submenus, keyboard, icons, shortcuts),
9
- * portals to <body>, and closes via the shared dismissable layer stack.
10
- * Parity: Smart context-menu.
11
- *
12
- * ```svelte
13
- * <SvContextMenu items={items} onSelect={(i) => run(i)}>
14
- * <div class="drop-zone">Right-click me</div>
15
- * </SvContextMenu>
16
- * ```
17
- */
18
- import type { Snippet } from 'svelte'
19
- import { portalToBody, popIn } from './popover'
20
- import { createDismissableLayer, onScrollOutside } from './a11y/dismissable'
21
- import { createFocusTrap } from './a11y/focus-trap'
22
- import SvMenuList, { type MenuItem } from './SvMenuList.svelte'
23
-
24
- type Props = {
25
- items: ReadonlyArray<MenuItem>
26
- onSelect?: (item: MenuItem) => void
27
- disabled?: boolean
28
- ariaLabel?: string
29
- children?: Snippet
30
- }
31
-
32
- let { items, onSelect, disabled = false, ariaLabel, children }: Props = $props()
33
-
34
- let open = $state(false)
35
- let pos = $state({ x: 0, y: 0 })
36
- let panelEl = $state<HTMLDivElement | null>(null)
37
- let zoneEl = $state<HTMLDivElement | null>(null)
38
-
39
- const MENU_W = 200
40
- function openAt(clientX: number, clientY: number) {
41
- // Clamp so the menu stays on-screen (estimate height from item count).
42
- const estH = Math.min(items.length, 12) * 34 + 8
43
- const x = Math.min(clientX, window.innerWidth - MENU_W - 6)
44
- const y = Math.min(clientY, window.innerHeight - estH - 6)
45
- pos = { x: Math.max(6, x), y: Math.max(6, y) }
46
- open = true
47
- }
48
-
49
- function onContextMenu(e: MouseEvent) {
50
- if (disabled) return
51
- e.preventDefault()
52
- openAt(e.clientX, e.clientY)
53
- }
54
-
55
- // Keyboard equivalent of a right-click: the ContextMenu key, or Shift+F10.
56
- // Anchors at the focused zone's own position instead of the (nonexistent)
57
- // pointer coordinates.
58
- function onZoneKeydown(e: KeyboardEvent) {
59
- if (disabled) return
60
- const isMenuKey = e.key === 'ContextMenu' || (e.key === 'F10' && e.shiftKey)
61
- if (!isMenuKey) return
62
- e.preventDefault()
63
- const rect = zoneEl?.getBoundingClientRect()
64
- openAt(rect ? rect.left : 0, rect ? rect.bottom : 0)
65
- }
66
-
67
- $effect(() => {
68
- if (!open || !panelEl) return
69
- const trap = createFocusTrap(panelEl, {
70
- initialFocus: () => panelEl?.querySelector<HTMLElement>('[role="menuitem"]:not([disabled])') ?? null,
71
- })
72
- trap.activate()
73
- const layer = createDismissableLayer({
74
- element: () => panelEl,
75
- onDismiss: () => (open = false),
76
- })
77
- layer.activate()
78
- // Reposition-close on scroll (a moved anchor would leave the menu stranded).
79
- // Scrolling the menu's own item list doesn't count as the anchor moving.
80
- const offScroll = onScrollOutside(() => panelEl, () => (open = false))
81
- return () => { layer.release(); trap.release(); offScroll() }
82
- })
83
- </script>
84
-
85
- <!-- svelte-ignore a11y_no_static_element_interactions, a11y_no_noninteractive_tabindex -->
86
- <div class="sv-ctx__zone" bind:this={zoneEl} tabindex={disabled ? -1 : 0} oncontextmenu={onContextMenu} onkeydown={onZoneKeydown}>
87
- {@render children?.()}
88
- </div>
89
-
90
- {#if open}
91
- <div
92
- bind:this={panelEl}
93
- class="sv-ctx"
94
- use:portalToBody
95
- use:popIn={{}}
96
- style:position="fixed"
97
- style:top={`${pos.y}px`}
98
- style:left={`${pos.x}px`}
99
- aria-label={ariaLabel}
100
- >
101
- <SvMenuList {items} onclose={() => (open = false)} onselect={(i) => onSelect?.(i)} />
102
- </div>
103
- {/if}
104
-
105
- <style>
106
- /* display:contents generates no box and per spec cannot receive focus - it
107
- must be a real box for the keyboard-open path (tabindex) to work at all. */
108
- .sv-ctx__zone { display: block; }
109
- .sv-ctx__zone:focus-visible { outline: 2px solid var(--sg-accent, #6366f1); outline-offset: 1px; }
110
- :global(.sv-ctx) {
111
- z-index: 2147483646; min-width: 200px;
112
- background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
113
- border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px;
114
- box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35); font-size: 13px;
115
- }
116
- </style>
1
+ <script lang="ts" module>
2
+ export type { MenuItem } from './SvMenuList.svelte'
3
+ </script>
4
+
5
+ <script lang="ts">
6
+ /**
7
+ * SvContextMenu - wraps a region and opens a menu at the pointer on right-click
8
+ * (or long-press). Reuses SvMenuList (submenus, keyboard, icons, shortcuts),
9
+ * portals to <body>, and closes via the shared dismissable layer stack.
10
+ * Parity: Smart context-menu.
11
+ *
12
+ * ```svelte
13
+ * <SvContextMenu items={items} onSelect={(i) => run(i)}>
14
+ * <div class="drop-zone">Right-click me</div>
15
+ * </SvContextMenu>
16
+ * ```
17
+ */
18
+ import type { Snippet } from 'svelte'
19
+ import { portalToBody, popIn } from './popover'
20
+ import { createDismissableLayer, onScrollOutside } from './a11y/dismissable'
21
+ import { createFocusTrap } from './a11y/focus-trap'
22
+ import SvMenuList, { type MenuItem } from './SvMenuList.svelte'
23
+
24
+ type Props = {
25
+ items: ReadonlyArray<MenuItem>
26
+ onSelect?: (item: MenuItem) => void
27
+ disabled?: boolean
28
+ ariaLabel?: string
29
+ children?: Snippet
30
+ }
31
+
32
+ let { items, onSelect, disabled = false, ariaLabel, children }: Props = $props()
33
+
34
+ let open = $state(false)
35
+ let pos = $state({ x: 0, y: 0 })
36
+ let panelEl = $state<HTMLDivElement | null>(null)
37
+ let zoneEl = $state<HTMLDivElement | null>(null)
38
+
39
+ const MENU_W = 200
40
+ function openAt(clientX: number, clientY: number) {
41
+ // Clamp so the menu stays on-screen (estimate height from item count).
42
+ const estH = Math.min(items.length, 12) * 34 + 8
43
+ const x = Math.min(clientX, window.innerWidth - MENU_W - 6)
44
+ const y = Math.min(clientY, window.innerHeight - estH - 6)
45
+ pos = { x: Math.max(6, x), y: Math.max(6, y) }
46
+ open = true
47
+ }
48
+
49
+ function onContextMenu(e: MouseEvent) {
50
+ if (disabled) return
51
+ e.preventDefault()
52
+ openAt(e.clientX, e.clientY)
53
+ }
54
+
55
+ // Keyboard equivalent of a right-click: the ContextMenu key, or Shift+F10.
56
+ // Anchors at the focused zone's own position instead of the (nonexistent)
57
+ // pointer coordinates.
58
+ function onZoneKeydown(e: KeyboardEvent) {
59
+ if (disabled) return
60
+ const isMenuKey = e.key === 'ContextMenu' || (e.key === 'F10' && e.shiftKey)
61
+ if (!isMenuKey) return
62
+ e.preventDefault()
63
+ const rect = zoneEl?.getBoundingClientRect()
64
+ openAt(rect ? rect.left : 0, rect ? rect.bottom : 0)
65
+ }
66
+
67
+ $effect(() => {
68
+ if (!open || !panelEl) return
69
+ const trap = createFocusTrap(panelEl, {
70
+ initialFocus: () => panelEl?.querySelector<HTMLElement>('[role="menuitem"]:not([disabled])') ?? null,
71
+ })
72
+ trap.activate()
73
+ const layer = createDismissableLayer({
74
+ element: () => panelEl,
75
+ onDismiss: () => (open = false),
76
+ })
77
+ layer.activate()
78
+ // Reposition-close on scroll (a moved anchor would leave the menu stranded).
79
+ // Scrolling the menu's own item list doesn't count as the anchor moving.
80
+ const offScroll = onScrollOutside(() => panelEl, () => (open = false))
81
+ return () => { layer.release(); trap.release(); offScroll() }
82
+ })
83
+ </script>
84
+
85
+ <!-- svelte-ignore a11y_no_static_element_interactions, a11y_no_noninteractive_tabindex -->
86
+ <div class="sv-ctx__zone" bind:this={zoneEl} tabindex={disabled ? -1 : 0} oncontextmenu={onContextMenu} onkeydown={onZoneKeydown}>
87
+ {@render children?.()}
88
+ </div>
89
+
90
+ {#if open}
91
+ <div
92
+ bind:this={panelEl}
93
+ class="sv-ctx"
94
+ use:portalToBody
95
+ use:popIn={{}}
96
+ style:position="fixed"
97
+ style:top={`${pos.y}px`}
98
+ style:left={`${pos.x}px`}
99
+ aria-label={ariaLabel}
100
+ >
101
+ <SvMenuList {items} onclose={() => (open = false)} onselect={(i) => onSelect?.(i)} />
102
+ </div>
103
+ {/if}
104
+
105
+ <style>
106
+ /* display:contents generates no box and per spec cannot receive focus - it
107
+ must be a real box for the keyboard-open path (tabindex) to work at all. */
108
+ .sv-ctx__zone { display: block; }
109
+ .sv-ctx__zone:focus-visible { outline: 2px solid var(--sg-accent, #6366f1); outline-offset: 1px; }
110
+ :global(.sv-ctx) {
111
+ z-index: 2147483646; min-width: 200px;
112
+ background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
113
+ border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px;
114
+ box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35); font-size: 13px;
115
+ }
116
+ </style>
package/dist/SvCountryInput.svelte CHANGED
@@ -1,163 +1,163 @@
1
- <script lang="ts">
2
- /**
3
- * SvCountryInput - a searchable country picker (flag + name + dial code).
4
- * Emits the ISO 3166-1 alpha-2 code. Parity: Smart country-input pattern.
5
- * Data from countries.ts; popover via popover.ts.
6
- *
7
- * One styled renderer over the headless `createCountryInput` core (search +
8
- * roving active index + keyboard); only portal/measure/focus render concerns
9
- * live here.
10
- */
11
- import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
12
- import { flagEmoji } from './countries'
13
- import SvField from './SvField.svelte'
14
- import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
15
- import { createCountryInput } from './createCountryInput.svelte'
16
-
17
- /** User-facing strings (localizable via `messages`). */
18
- type CountryMessages = { search: string; noResults: string }
19
- const DEFAULT_MESSAGES: CountryMessages = { search: 'Search countries', noResults: 'No matches' }
20
-
21
- type Props = SvEditorProps & {
22
- value?: string | null
23
- onChange?: (code: string) => void
24
- /** Show the dial code beside each country. */
25
- showDial?: boolean
26
- placeholder?: string
27
- /** Override the built-in strings (search + empty-state). */
28
- messages?: Partial<CountryMessages>
29
- }
30
-
31
- let {
32
- value = $bindable<string | null>(null),
33
- onChange,
34
- showDial = false,
35
- placeholder = 'Select country…',
36
- disabled = false,
37
- name,
38
- size = 'md',
39
- ariaLabel,
40
- block = false,
41
- invalid = false,
42
- required = false,
43
- error,
44
- label,
45
- hint,
46
- dir,
47
- id,
48
- messages,
49
- }: Props = $props()
50
-
51
- const autoId = nextEditorId('sv-country')
52
- const uid = $derived(id ?? autoId)
53
- const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
54
-
55
- let triggerEl = $state<HTMLButtonElement | null>(null)
56
- let searchEl = $state<HTMLInputElement | null>(null)
57
- let panelEl = $state<HTMLDivElement | null>(null)
58
- let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
59
-
60
- const ci = createCountryInput({
61
- value: () => value,
62
- onChange: (c) => { value = c; onChange?.(c) },
63
- disabled: () => disabled,
64
- ariaLabel: () => ariaLabel,
65
- searchLabel: () => M.search,
66
- focusTrigger: () => triggerEl?.focus(),
67
- id: () => uid,
68
- invalid: () => invalid,
69
- required: () => required,
70
- error: () => error,
71
- hint: () => hint,
72
- })
73
-
74
- const selected = $derived(ci.selected)
75
-
76
- function updatePos() { if (triggerEl) rect = anchoredRect(triggerEl.getBoundingClientRect(), { estimatedHeight: 320, minWidth: 240 }) }
77
-
78
- $effect(() => {
79
- if (!ci.open) return
80
- updatePos()
81
- queueMicrotask(() => searchEl?.focus())
82
- const rp = () => updatePos()
83
- window.addEventListener('scroll', rp, true); window.addEventListener('resize', rp)
84
- const od = (e: PointerEvent) => { const t = e.target as Node | null; if (t && (triggerEl?.contains(t) || panelEl?.contains(t))) return; ci.close() }
85
- document.addEventListener('pointerdown', od, true)
86
- return () => { window.removeEventListener('scroll', rp, true); window.removeEventListener('resize', rp); document.removeEventListener('pointerdown', od, true) }
87
- })
88
- // Keep the active option scrolled into view (render concern).
89
- $effect(() => {
90
- if (!ci.open) return
91
- const i = ci.activeIndex
92
- queueMicrotask(() => panelEl?.querySelector<HTMLElement>(`[data-idx="${i}"]`)?.scrollIntoView({ block: 'nearest' }))
93
- })
94
- </script>
95
-
96
- <SvField id={uid} {label} {hint} {error} {required} {dir}>
97
- <button bind:this={triggerEl} class="sv-country sv-country--{size}" class:is-block={block} class:is-open={ci.open} class:is-disabled={disabled} class:is-invalid={invalid} {...ci.triggerProps()}>
98
- {#if selected}
99
- <span class="sv-country__flag" aria-hidden="true">{flagEmoji(selected.code)}</span>
100
- <span class="sv-country__name">{selected.name}</span>
101
- {#if showDial}<span class="sv-country__dial">{selected.dial}</span>{/if}
102
- {:else}
103
- <span class="sv-country__ph">{placeholder}</span>
104
- {/if}
105
- <svg class="sv-country__chev" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
106
- </button>
107
- </SvField>
108
-
109
- {#if ci.open}
110
- <div bind:this={panelEl} class="sv-country__panel" use:portalToBody use:popIn={{ up: rect.openUpward }} style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} role="dialog">
111
- <input bind:this={searchEl} class="sv-country__search" placeholder={`${M.search}…`} {...ci.searchProps()} />
112
- <div class="sv-country__list" {...ci.listboxProps()}>
113
- {#each ci.filtered as c, i (c.code)}
114
- <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
115
- <div class="sv-country__opt" class:is-active={ci.isActive(i)} class:is-selected={ci.isSelected(c.code)} {...ci.optionProps(i)}>
116
- <span class="sv-country__flag" aria-hidden="true">{flagEmoji(c.code)}</span>
117
- <span class="sv-country__name">{c.name}</span>
118
- <span class="sv-country__dial">{c.dial}</span>
119
- </div>
120
- {:else}
121
- <div class="sv-ddl__empty">{M.noResults}</div>
122
- {/each}
123
- </div>
124
- </div>
125
- {/if}
126
- {#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
127
-
128
- <style>
129
- .sv-country {
130
- --_accent: var(--sg-accent, #2563eb);
131
- display: inline-flex; align-items: center; gap: 8px; width: 220px;
132
- background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); font: inherit; text-align: start;
133
- border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px); padding: 0 10px; cursor: pointer;
134
- }
135
- .sv-country--sm { height: 28px; font-size: 12px; }
136
- .sv-country--md { height: 34px; font-size: 13px; }
137
- .sv-country--lg { height: 40px; font-size: 15px; }
138
- .sv-country.is-open, .sv-country:focus-visible { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); outline: none; }
139
- .sv-country.is-invalid { border-color: var(--sg-danger, #dc2626); }
140
- .sv-country.is-invalid.is-open, .sv-country.is-invalid:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
141
- .sv-country.is-disabled { opacity: 0.6; cursor: not-allowed; }
142
- .sv-country__flag { font-size: 16px; }
143
- .sv-country__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
144
- .sv-country__ph { flex: 1; color: var(--sg-muted, #94a3b8); }
145
- .sv-country__dial { color: var(--sg-muted, #64748b); font-size: 12px; }
146
- .sv-country__chev { color: var(--sg-muted, #64748b); flex: none; }
147
-
148
- :global(.sv-country__panel) {
149
- z-index: 2147483647; display: flex; flex-direction: column; max-height: 340px; padding: 6px;
150
- background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
151
- border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px; box-shadow: 0 16px 48px -12px rgba(15,23,42,0.35);
152
- }
153
- :global(.sv-country__search) {
154
- height: 32px; margin-bottom: 4px; padding: 0 10px; font: inherit; font-size: 13px;
155
- border: 1px solid var(--sg-input-border, #cbd5e1); border-radius: 7px; background: var(--sg-input-bg, #fff); color: inherit; outline: none;
156
- }
157
- :global(.sv-country__list) { overflow-y: auto; }
158
- :global(.sv-country__opt) { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
159
- :global(.sv-country__opt.is-active) { background: var(--sg-row-hover-bg, #f1f5f9); }
160
- :global(.sv-country__opt.is-selected) { color: var(--sg-accent, #2563eb); font-weight: 600; }
161
- /* Fill the container - see `block` in SvEditorProps. */
162
- .sv-country.is-block { width: 100%; max-width: 100%; }
163
- </style>
1
+ <script lang="ts">
2
+ /**
3
+ * SvCountryInput - a searchable country picker (flag + name + dial code).
4
+ * Emits the ISO 3166-1 alpha-2 code. Parity: Smart country-input pattern.
5
+ * Data from countries.ts; popover via popover.ts.
6
+ *
7
+ * One styled renderer over the headless `createCountryInput` core (search +
8
+ * roving active index + keyboard); only portal/measure/focus render concerns
9
+ * live here.
10
+ */
11
+ import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
12
+ import { flagEmoji } from './countries'
13
+ import SvField from './SvField.svelte'
14
+ import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
15
+ import { createCountryInput } from './createCountryInput.svelte'
16
+
17
+ /** User-facing strings (localizable via `messages`). */
18
+ type CountryMessages = { search: string; noResults: string }
19
+ const DEFAULT_MESSAGES: CountryMessages = { search: 'Search countries', noResults: 'No matches' }
20
+
21
+ type Props = SvEditorProps & {
22
+ value?: string | null
23
+ onChange?: (code: string) => void
24
+ /** Show the dial code beside each country. */
25
+ showDial?: boolean
26
+ placeholder?: string
27
+ /** Override the built-in strings (search + empty-state). */
28
+ messages?: Partial<CountryMessages>
29
+ }
30
+
31
+ let {
32
+ value = $bindable<string | null>(null),
33
+ onChange,
34
+ showDial = false,
35
+ placeholder = 'Select country…',
36
+ disabled = false,
37
+ name,
38
+ size = 'md',
39
+ ariaLabel,
40
+ block = false,
41
+ invalid = false,
42
+ required = false,
43
+ error,
44
+ label,
45
+ hint,
46
+ dir,
47
+ id,
48
+ messages,
49
+ }: Props = $props()
50
+
51
+ const autoId = nextEditorId('sv-country')
52
+ const uid = $derived(id ?? autoId)
53
+ const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
54
+
55
+ let triggerEl = $state<HTMLButtonElement | null>(null)
56
+ let searchEl = $state<HTMLInputElement | null>(null)
57
+ let panelEl = $state<HTMLDivElement | null>(null)
58
+ let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
59
+
60
+ const ci = createCountryInput({
61
+ value: () => value,
62
+ onChange: (c) => { value = c; onChange?.(c) },
63
+ disabled: () => disabled,
64
+ ariaLabel: () => ariaLabel,
65
+ searchLabel: () => M.search,
66
+ focusTrigger: () => triggerEl?.focus(),
67
+ id: () => uid,
68
+ invalid: () => invalid,
69
+ required: () => required,
70
+ error: () => error,
71
+ hint: () => hint,
72
+ })
73
+
74
+ const selected = $derived(ci.selected)
75
+
76
+ function updatePos() { if (triggerEl) rect = anchoredRect(triggerEl.getBoundingClientRect(), { estimatedHeight: 320, minWidth: 240 }) }
77
+
78
+ $effect(() => {
79
+ if (!ci.open) return
80
+ updatePos()
81
+ queueMicrotask(() => searchEl?.focus())
82
+ const rp = () => updatePos()
83
+ window.addEventListener('scroll', rp, true); window.addEventListener('resize', rp)
84
+ const od = (e: PointerEvent) => { const t = e.target as Node | null; if (t && (triggerEl?.contains(t) || panelEl?.contains(t))) return; ci.close() }
85
+ document.addEventListener('pointerdown', od, true)
86
+ return () => { window.removeEventListener('scroll', rp, true); window.removeEventListener('resize', rp); document.removeEventListener('pointerdown', od, true) }
87
+ })
88
+ // Keep the active option scrolled into view (render concern).
89
+ $effect(() => {
90
+ if (!ci.open) return
91
+ const i = ci.activeIndex
92
+ queueMicrotask(() => panelEl?.querySelector<HTMLElement>(`[data-idx="${i}"]`)?.scrollIntoView({ block: 'nearest' }))
93
+ })
94
+ </script>
95
+
96
+ <SvField id={uid} {label} {hint} {error} {required} {dir}>
97
+ <button bind:this={triggerEl} class="sv-country sv-country--{size}" class:is-block={block} class:is-open={ci.open} class:is-disabled={disabled} class:is-invalid={invalid} {...ci.triggerProps()}>
98
+ {#if selected}
99
+ <span class="sv-country__flag" aria-hidden="true">{flagEmoji(selected.code)}</span>
100
+ <span class="sv-country__name">{selected.name}</span>
101
+ {#if showDial}<span class="sv-country__dial">{selected.dial}</span>{/if}
102
+ {:else}
103
+ <span class="sv-country__ph">{placeholder}</span>
104
+ {/if}
105
+ <svg class="sv-country__chev" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
106
+ </button>
107
+ </SvField>
108
+
109
+ {#if ci.open}
110
+ <div bind:this={panelEl} class="sv-country__panel" use:portalToBody use:popIn={{ up: rect.openUpward }} style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} role="dialog">
111
+ <input bind:this={searchEl} class="sv-country__search" placeholder={`${M.search}…`} {...ci.searchProps()} />
112
+ <div class="sv-country__list" {...ci.listboxProps()}>
113
+ {#each ci.filtered as c, i (c.code)}
114
+ <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
115
+ <div class="sv-country__opt" class:is-active={ci.isActive(i)} class:is-selected={ci.isSelected(c.code)} {...ci.optionProps(i)}>
116
+ <span class="sv-country__flag" aria-hidden="true">{flagEmoji(c.code)}</span>
117
+ <span class="sv-country__name">{c.name}</span>
118
+ <span class="sv-country__dial">{c.dial}</span>
119
+ </div>
120
+ {:else}
121
+ <div class="sv-ddl__empty">{M.noResults}</div>
122
+ {/each}
123
+ </div>
124
+ </div>
125
+ {/if}
126
+ {#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
127
+
128
+ <style>
129
+ .sv-country {
130
+ --_accent: var(--sg-accent, #2563eb);
131
+ display: inline-flex; align-items: center; gap: 8px; width: 220px;
132
+ background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); font: inherit; text-align: start;
133
+ border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px); padding: 0 10px; cursor: pointer;
134
+ }
135
+ .sv-country--sm { height: 28px; font-size: 12px; }
136
+ .sv-country--md { height: 34px; font-size: 13px; }
137
+ .sv-country--lg { height: 40px; font-size: 15px; }
138
+ .sv-country.is-open, .sv-country:focus-visible { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); outline: none; }
139
+ .sv-country.is-invalid { border-color: var(--sg-danger, #dc2626); }
140
+ .sv-country.is-invalid.is-open, .sv-country.is-invalid:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
141
+ .sv-country.is-disabled { opacity: 0.6; cursor: not-allowed; }
142
+ .sv-country__flag { font-size: 16px; }
143
+ .sv-country__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
144
+ .sv-country__ph { flex: 1; color: var(--sg-muted, #94a3b8); }
145
+ .sv-country__dial { color: var(--sg-muted, #64748b); font-size: 12px; }
146
+ .sv-country__chev { color: var(--sg-muted, #64748b); flex: none; }
147
+
148
+ :global(.sv-country__panel) {
149
+ z-index: 2147483647; display: flex; flex-direction: column; max-height: 340px; padding: 6px;
150
+ background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
151
+ border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px; box-shadow: 0 16px 48px -12px rgba(15,23,42,0.35);
152
+ }
153
+ :global(.sv-country__search) {
154
+ height: 32px; margin-bottom: 4px; padding: 0 10px; font: inherit; font-size: 13px;
155
+ border: 1px solid var(--sg-input-border, #cbd5e1); border-radius: 7px; background: var(--sg-input-bg, #fff); color: inherit; outline: none;
156
+ }
157
+ :global(.sv-country__list) { overflow-y: auto; }
158
+ :global(.sv-country__opt) { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
159
+ :global(.sv-country__opt.is-active) { background: var(--sg-row-hover-bg, #f1f5f9); }
160
+ :global(.sv-country__opt.is-selected) { color: var(--sg-accent, #2563eb); font-weight: 600; }
161
+ /* Fill the container - see `block` in SvEditorProps. */
162
+ .sv-country.is-block { width: 100%; max-width: 100%; }
163
+ </style>
package/dist/SvDateRangeInput.svelte CHANGED
@@ -74,6 +74,7 @@
74
74
  size = 'md',
75
75
  ariaLabel,
76
76
  invalid = false,
77
+ block = false,
77
78
  required = false,
78
79
  error,
79
80
  label,
@@ -117,6 +118,7 @@
117
118
 
118
119
  // --- Portalled popover positioning (DOM-bound; stays in the component) -------
119
120
  let triggerEl = $state<HTMLDivElement | null>(null)
121
+ let inputEl = $state<HTMLInputElement | null>(null)
120
122
  let panelEl = $state<HTMLDivElement | null>(null)
121
123
  let panelRect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
122
124
 
@@ -157,8 +159,26 @@
157
159
  </script>
158
160
 
159
161
  <SvField id={uid} {label} {hint} {error} {required} {dir}>
160
- <div class="sv-dri" class:sv-dri--disabled={disabled}>
161
- <div class="sv-dri__field sv-dri__field--{size}" class:is-invalid={invalid} bind:this={triggerEl} dir={resolvedDir}>
162
+ <div class="sv-dri" class:is-block={block} class:sv-dri--disabled={disabled}>
163
+ <!-- The whole field is the trigger, not just the <input>. The input is
164
+ readonly and carries the dialog semantics, but it is the flex child that
165
+ shrinks: squeezed into a narrow container (a grid filter cell, say) it
166
+ collapses to a couple of pixels and the icon, padding and range text
167
+ around it were all dead to a click. The input keeps the a11y role and
168
+ focus; this only widens the hit area. -->
169
+ <!-- svelte-ignore a11y_no_static_element_interactions -->
170
+ <!-- svelte-ignore a11y_click_events_have_key_events -->
171
+ <div
172
+ class="sv-dri__field sv-dri__field--{size}"
173
+ class:is-invalid={invalid}
174
+ bind:this={triggerEl}
175
+ dir={resolvedDir}
176
+ onclick={() => {
177
+ if (!isInteractive) return
178
+ inputEl?.focus()
179
+ toggle()
180
+ }}
181
+ >
162
182
  <svg class="sv-dri__icon" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" /><path d="M16 2v4M8 2v4M3 10h18" /></svg>
163
183
  <input
164
184
  id={uid}
@@ -171,8 +191,8 @@
171
191
  {...editorAria({ id: uid, invalid, required, error, hint, ariaLabel })}
172
192
  aria-haspopup="dialog"
173
193
  aria-expanded={open}
174
- onclick={() => isInteractive && toggle()}
175
194
  onkeydown={onFieldKeydown}
195
+ bind:this={inputEl}
176
196
  use:focusOpen
177
197
  />
178
198
  {#if value && isInteractive}
@@ -253,4 +273,6 @@
253
273
  background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e2e8f0);
254
274
  border-radius: 12px; box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35);
255
275
  }
276
+ /* Fill the container - see `block` in SvEditorProps. */
277
+ .sv-dri.is-block, .sv-dri.is-block .sv-dri__field { width: 100%; max-width: 100%; }
256
278
  </style>