npm - @svgrid/grid - Versions diffs - 2.2.25 → 2.2.27 - Mend

@svgrid/grid 2.2.25 → 2.2.27

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 (218) hide show

package/README.md +199 -145
package/dist/FlexRender.svelte +96 -96
package/dist/GridFooter.svelte +179 -179
package/dist/GridMenus.svelte +734 -728
package/dist/SvAutoComplete.svelte +165 -165
package/dist/SvCalendar.svelte +503 -503
package/dist/SvCarousel.svelte +141 -141
package/dist/SvCheckBox.svelte +101 -101
package/dist/SvColorInput.svelte +181 -181
package/dist/SvComboBox.svelte +275 -275
package/dist/SvContextMenu.svelte +116 -116
package/dist/SvCountryInput.svelte +160 -160
package/dist/SvDrawer.svelte +250 -250
package/dist/SvDropDownList.svelte +374 -374
package/dist/SvDurationInput.svelte +126 -126
package/dist/SvField.svelte +293 -293
package/dist/SvForm.svelte +437 -437
package/dist/SvGrid.css +2723 -2719
package/dist/SvGrid.svelte +3333 -3333
package/dist/SvGridChart.svelte +1724 -1724
package/dist/SvGridChartPanel.svelte +485 -485
package/dist/SvGridChartView.svelte +70 -70
package/dist/SvGridDropdown.svelte +696 -696
package/dist/SvGridSelect.svelte +259 -259
package/dist/SvGroupCell.svelte +109 -109
package/dist/SvListBox.svelte +287 -287
package/dist/SvMaskedInput.svelte +122 -122
package/dist/SvMenu.svelte +124 -124
package/dist/SvMenuList.svelte +146 -146
package/dist/SvMultiSelect.svelte +281 -281
package/dist/SvNumberInput.svelte +168 -168
package/dist/SvOtpInput.svelte +158 -158
package/dist/SvPasswordInput.svelte +151 -151
package/dist/SvPhoneInput.svelte +131 -131
package/dist/SvPopover.svelte +197 -197
package/dist/SvRadioGroup.svelte +107 -107
package/dist/SvRowGroupPanel.svelte +170 -170
package/dist/SvScrollArea.svelte +61 -61
package/dist/SvSlider.svelte +200 -200
package/dist/SvSwitchButton.svelte +107 -107
package/dist/SvTagsInput.svelte +112 -112
package/dist/SvTextInput.svelte +147 -147
package/dist/SvTimePicker.svelte +245 -245
package/dist/SvToaster.svelte +159 -159
package/dist/SvToggleButton.svelte +85 -85
package/dist/SvTooltip.svelte +161 -161
package/dist/SvTour.svelte +204 -204
package/dist/SvTree.svelte +437 -437
package/dist/SvTreeSelect.svelte +233 -233
package/dist/a11y/dismissable.d.ts +11 -0
package/dist/a11y/dismissable.js +21 -0
package/dist/ai.js +3 -3
package/dist/cdn/GridMenus-BzxEYNtW.js +421 -0
package/dist/cdn/GridMenus-Dr-nGEXn.js +417 -0
package/dist/cdn/{SvDateTimePicker-CYC7gRER.js → SvDateTimePicker-B1sDc9Pz.js} +451 -444
package/dist/cdn/{SvDateTimePicker-DtQKd4Ns.js → SvDateTimePicker-Bh0FTs1E.js} +114 -107
package/dist/cdn/{SvGridChart-BhnFdLd0.js → SvGridChart-BKQsO5fZ.js} +1 -1
package/dist/cdn/{SvGridChart-BcLCYvw9.js → SvGridChart-Bgk4hDs8.js} +1 -1
package/dist/cdn/{SvGridChartPanel-DvjwxLvK.js → SvGridChartPanel-DSkHIQDd.js} +1 -1
package/dist/cdn/{SvGridChartPanel-Cmx9DHAS.js → SvGridChartPanel-DkCc2Z7b.js} +1 -1
package/dist/cdn/{SvGridChartView-B40DTJSX.js → SvGridChartView-BrbVaELm.js} +1 -1
package/dist/cdn/{SvGridChartView-PwqI4s02.js → SvGridChartView-i9rWvSKg.js} +1 -1
package/dist/cdn/{SvGridDropdown-hpnHvOGt.js → SvGridDropdown-CGxxopQ4.js} +1 -1
package/dist/cdn/{SvGridDropdown-DjALc_4f.js → SvGridDropdown-D08sVmAy.js} +1 -1
package/dist/cdn/{src-DysW9qbk.js → src-Cw8d9U8j.js} +5753 -5753
package/dist/cdn/{src-bYfr_7aR.js → src-cgs1wcUS.js} +8102 -8102
package/dist/cdn/svgrid.js +9 -9
package/dist/cdn/svgrid.svelte-external.js +9 -9
package/dist/chart-export.js +8 -8
package/dist/index.d.ts +1 -1
package/dist/index.js +1 -1
package/package.json +30 -13
package/src/FlexRender.svelte +96 -96
package/src/GridFooter.svelte +179 -179
package/src/GridMenus.svelte +734 -728
package/src/SvAutoComplete.svelte +165 -165
package/src/SvCalendar.svelte +503 -503
package/src/SvCalendar.test.ts +226 -226
package/src/SvCarousel.svelte +141 -141
package/src/SvCheckBox.svelte +101 -101
package/src/SvColorInput.svelte +181 -181
package/src/SvComboBox.svelte +275 -275
package/src/SvContextMenu.svelte +116 -116
package/src/SvCountryInput.svelte +160 -160
package/src/SvDrawer.svelte +250 -250
package/src/SvDropDownList.svelte +374 -374
package/src/SvDurationInput.svelte +126 -126
package/src/SvField.svelte +293 -293
package/src/SvForm.svelte +437 -437
package/src/SvForm.test.ts +411 -411
package/src/SvGrid.controller.svelte.ts +3239 -3239
package/src/SvGrid.css +2723 -2719
package/src/SvGrid.svelte +3333 -3333
package/src/SvGrid.types.ts +1613 -1613
package/src/SvGridChart.svelte +1724 -1724
package/src/SvGridChartPanel.svelte +485 -485
package/src/SvGridChartView.svelte +70 -70
package/src/SvGridDropdown.svelte +696 -696
package/src/SvGridSelect.svelte +259 -259
package/src/SvGroupCell.svelte +109 -109
package/src/SvListBox.svelte +287 -287
package/src/SvMaskedInput.svelte +122 -122
package/src/SvMenu.svelte +124 -124
package/src/SvMenu.test.ts +97 -97
package/src/SvMenuList.svelte +146 -146
package/src/SvMultiSelect.svelte +281 -281
package/src/SvNumberInput.svelte +168 -168
package/src/SvOtpInput.svelte +158 -158
package/src/SvPasswordInput.svelte +151 -151
package/src/SvPhoneInput.svelte +131 -131
package/src/SvPopover.svelte +197 -197
package/src/SvRadioGroup.svelte +107 -107
package/src/SvRowGroupPanel.svelte +170 -170
package/src/SvScrollArea.svelte +61 -61
package/src/SvSlider.svelte +200 -200
package/src/SvSwitchButton.svelte +107 -107
package/src/SvTagsInput.svelte +112 -112
package/src/SvTextInput.svelte +147 -147
package/src/SvTimePicker.svelte +245 -245
package/src/SvToaster.svelte +159 -159
package/src/SvToaster.test.ts +95 -95
package/src/SvToggleButton.svelte +85 -85
package/src/SvTooltip.svelte +161 -161
package/src/SvTour.svelte +204 -204
package/src/SvTree.svelte +437 -437
package/src/SvTreeSelect.svelte +233 -233
package/src/a11y/dismissable.test.ts +119 -95
package/src/a11y/dismissable.ts +114 -94
package/src/a11y.contract.test.ts +49 -49
package/src/a11y.test.ts +59 -59
package/src/a11y.ts +61 -61
package/src/ai.test.ts +502 -502
package/src/ai.ts +1391 -1391
package/src/build-api.coverage.test.ts +633 -633
package/src/build-api.ts +895 -895
package/src/builtin-editors.grid.test.ts +85 -85
package/src/cell-formatting.ts +169 -169
package/src/cell-render.ts +469 -469
package/src/chart-export.ts +201 -201
package/src/chart-view.svelte.ts +36 -36
package/src/chart.ts +2296 -2296
package/src/collaboration.test.ts +104 -104
package/src/collaboration.ts +167 -167
package/src/core.performance.test.ts +30 -30
package/src/core.ts +1111 -1111
package/src/createAutocomplete.svelte.ts +132 -132
package/src/createCombobox.svelte.ts +191 -191
package/src/createCountryInput.svelte.ts +157 -157
package/src/createDropdownList.svelte.ts +168 -168
package/src/createForm.svelte.ts +386 -386
package/src/createGrid.svelte.ts +42 -42
package/src/createGrid.test.ts +10 -10
package/src/createGridState.svelte.ts +17 -17
package/src/createMenu.svelte.ts +225 -225
package/src/createPopoverSelect.svelte.ts +213 -213
package/src/createSlider.svelte.ts +191 -191
package/src/createTooltip.svelte.ts +144 -144
package/src/createTree.svelte.ts +319 -319
package/src/editing.test.ts +859 -859
package/src/editing.ts +675 -675
package/src/editor-contract.ts +157 -157
package/src/export-data-api.test.ts +126 -126
package/src/export-format.test.ts +107 -107
package/src/export-format.ts +598 -598
package/src/filter-operators.ts +157 -157
package/src/flex-render.ts +3 -3
package/src/form-field.ts +127 -127
package/src/index.ts +713 -712
package/src/js-scroller.svelte.ts +173 -173
package/src/keyboard.test.ts +59 -59
package/src/keyboard.ts +97 -97
package/src/list-nav.test.ts +49 -49
package/src/list-nav.ts +29 -29
package/src/list-option.test.ts +56 -56
package/src/list-option.ts +172 -172
package/src/menus.test.ts +700 -700
package/src/menus.ts +652 -652
package/src/merge-objects.ts +48 -48
package/src/overlays.test.ts +90 -90
package/src/render-component.ts +28 -28
package/src/scheduler-model.test.ts +562 -562
package/src/scheduler-model.ts +872 -872
package/src/selection.test.ts +754 -754
package/src/selection.ts +600 -600
package/src/server-data-source.test.ts +289 -289
package/src/server-data-source.ts +413 -413
package/src/sparkline.test.ts +68 -68
package/src/sparkline.ts +169 -169
package/src/spreadsheet.test.ts +489 -489
package/src/spreadsheet.ts +312 -312
package/src/static-functions.ts +11 -11
package/src/subscribe.ts +38 -38
package/src/svgrid-wrapper.types.ts +524 -524
package/src/svgrid.behavior.test.ts +706 -706
package/src/svgrid.charting.test.ts +534 -534
package/src/svgrid.features.test.ts +157 -157
package/src/svgrid.filter-menu-scroll.test.ts +102 -0
package/src/svgrid.new-features.wrapper.test.ts +251 -251
package/src/svgrid.wrapper.test.ts +40 -40
package/src/test-setup.ts +62 -62
package/src/themes/index.ts +215 -215
package/src/toast-store.svelte.ts +246 -246
package/src/toast-store.test.ts +147 -147
package/src/ui-buttons.test.ts +144 -144
package/src/ui-inputs.test.ts +118 -118
package/src/ui-range.test.ts +70 -70
package/src/ui-selection.test.ts +155 -155
package/src/ui-tier1.test.ts +142 -142
package/src/virtual.test.ts +88 -88
package/src/virtualization/column-virtualizer.test.ts +27 -27
package/src/virtualization/column-virtualizer.ts +30 -30
package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
package/src/virtualization/types.ts +30 -30
package/src/virtualization/virtualizer.test.ts +47 -47
package/src/virtualization/virtualizer.ts +296 -296
package/themes/ember.css +71 -71
package/dist/cdn/GridMenus-GfCAHgkZ.js +0 -420
package/dist/cdn/GridMenus-GiVNSeDU.js +0 -416

package/src/SvPopover.svelte CHANGED Viewed

@@ -1,197 +1,197 @@
-<script lang="ts">
-  /**
-   * SvPopover - a floating panel anchored to a trigger, portalled to <body> so it
-   * escapes any `overflow:hidden` ancestor. Open on click (default), hover, or
-   * manually via `open`. Positioned by the shared engine (`computePosition`): full
-   * placement matrix + flip + shift + an optional arrow, kept in sync with
-   * `autoUpdate`. Closes on outside-click / Escape via the dismissable layer
-   * stack, and animates in. The panel is hoverable (interactive) under the hover
-   * trigger. Parity: Smart popover.
-   *
-   * ```svelte
-   * <SvPopover placement="bottom" arrow>
-   *   {#snippet anchor()}<button>Open</button>{/snippet}
-   *   <p>Panel content</p>
-   * </SvPopover>
-   * ```
-   */
-  import type { Snippet } from 'svelte'
-  import { portalToBody, popIn } from './popover'
-  import { computePosition, autoUpdate, type Placement, type ComputePositionResult } from './positioning'
-  import { createDismissableLayer } from './a11y/dismissable'
-  type Props = {
-    /** Controlled open state (bindable). */
-    open?: boolean
-    onOpenChange?: (open: boolean) => void
-    /** How the anchor opens the panel. `manual` = only `open` drives it. */
-    trigger?: 'click' | 'hover' | 'manual'
-    /** Preferred placement (flips when there is no room). Default `bottom-start`. */
-    placement?: Placement
-    /** Main-axis gap between trigger and panel. Default 8 (room for the arrow). */
-    offset?: number
-    /** Render a pointer arrow toward the trigger. Default true. */
-    arrow?: boolean
-    /** Hover trigger: delay (ms) before opening. Default 0. */
-    openDelay?: number
-    /** Hover trigger: delay (ms) before closing after leave. Default 120. */
-    closeDelay?: number
-    /** Estimated panel height, used before the panel has been measured. */
-    estimatedHeight?: number
-    /** Force a minimum panel width (else it hugs its content). */
-    minWidth?: number
-    /** Close when clicking outside. Default true. */
-    closeOnOutsideClick?: boolean
-    ariaLabel?: string
-    /** The anchor element(s) that open the panel. */
-    anchor?: Snippet
-    /** Panel content. */
-    children?: Snippet
-  }
-  let {
-    open = $bindable(false),
-    onOpenChange,
-    trigger = 'click',
-    placement = 'bottom-start',
-    offset = 8,
-    arrow = true,
-    openDelay = 0,
-    closeDelay = 120,
-    estimatedHeight = 220,
-    minWidth,
-    closeOnOutsideClick = true,
-    ariaLabel,
-    anchor,
-    children,
-  }: Props = $props()
-  const ARROW = 10
-  let anchorEl = $state<HTMLSpanElement | null>(null)
-  let panelEl = $state<HTMLDivElement | null>(null)
-  let pos = $state<ComputePositionResult>({
-    x: 0, y: 0, placement, side: 'bottom', align: 'start', maxWidth: 0, maxHeight: 0,
-  })
-  function setOpen(v: boolean) { if (v !== open) { open = v; onOpenChange?.(v) } }
-  function toggle() { setOpen(!open) }
-  function updatePos() {
-    if (!anchorEl) return
-    const r = anchorEl.getBoundingClientRect()
-    const f = panelEl?.getBoundingClientRect()
-    const floating = {
-      width: f?.width || minWidth || r.width,
-      height: f?.height || estimatedHeight,
-    }
-    pos = computePosition(
-      { x: r.left, y: r.top, width: r.width, height: r.height },
-      floating,
-      { placement, offset, padding: 8, minMainAxis: 96, arrow: arrow ? { size: ARROW } : undefined },
-    )
-  }
-  // Reposition whenever the trigger/panel resize or an ancestor scrolls, and wire
-  // Escape + outside-click dismissal via the shared layer stack (so a popover
-  // nested in a dialog closes top-first). Re-runs once `panelEl` mounts.
-  $effect(() => {
-    if (!open || !anchorEl || !panelEl) return
-    const stop = autoUpdate(anchorEl, panelEl, updatePos)
-    const layer = createDismissableLayer({
-      element: () => [anchorEl, panelEl],
-      onDismiss: () => setOpen(false),
-      closeOnOutside: closeOnOutsideClick,
-    })
-    layer.activate()
-    return () => { stop(); layer.release() }
-  })
-  let openTimer: ReturnType<typeof setTimeout> | undefined
-  let closeTimer: ReturnType<typeof setTimeout> | undefined
-  function onEnter() {
-    if (trigger !== 'hover') return
-    clearTimeout(closeTimer)
-    if (open) return
-    openTimer = setTimeout(() => setOpen(true), openDelay)
-  }
-  function onLeave() {
-    if (trigger !== 'hover') return
-    clearTimeout(openTimer)
-    closeTimer = setTimeout(() => setOpen(false), closeDelay)
-  }
-  /** Fallback accessible name for the panel when `ariaLabel` isn't given: the
-   * anchor's own aria-label, else its trimmed text content. */
-  function anchorFallbackLabel(): string | undefined {
-    const label = anchorEl?.getAttribute('aria-label')
-    if (label) return label
-    return anchorEl?.textContent?.trim() || undefined
-  }
-</script>
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<span
-  bind:this={anchorEl}
-  class="sv-pop__anchor"
-  onclick={() => trigger === 'click' && toggle()}
-  onpointerenter={onEnter}
-  onpointerleave={onLeave}
-  onfocusin={onEnter}
-  onfocusout={onLeave}
->
-  {@render anchor?.()}
-</span>
-{#if open}
-  <div
-    bind:this={panelEl}
-    class="sv-pop__panel"
-    use:portalToBody
-    use:popIn={{ up: pos.side === 'top' }}
-    style:position="fixed"
-    style:top={`${pos.y}px`}
-    style:left={`${pos.x}px`}
-    style:min-width={minWidth ? `${minWidth}px` : undefined}
-    role="dialog"
-    aria-label={ariaLabel ?? anchorFallbackLabel()}
-    onpointerenter={onEnter}
-    onpointerleave={onLeave}
-    onfocusin={onEnter}
-    onfocusout={onLeave}
-  >
-    {#if arrow}
-      <span
-        class="sv-pop__arrow sv-pop__arrow--{pos.side}"
-        style:left={pos.arrow?.x != null ? `${pos.arrow.x}px` : undefined}
-        style:top={pos.arrow?.y != null ? `${pos.arrow.y}px` : undefined}
-      ></span>
-    {/if}
-    <div class="sv-pop__content" style:max-height={pos.maxHeight ? `${pos.maxHeight}px` : undefined}>
-      {@render children?.()}
-    </div>
-  </div>
-{/if}
-<style>
-  .sv-pop__anchor { display: inline-flex; }
-  :global(.sv-pop__panel) {
-    z-index: 2147483646; max-width: min(92vw, 360px);
-    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
-    border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px;
-    box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35); font-size: 13px; line-height: 1.55;
-  }
-  :global(.sv-pop__content) { padding: 12px 14px; overflow: auto; }
-  /* Arrow: a rotated square straddling the panel edge, two borders showing so it
-     reads as a continuation of the panel outline. Not clipped (sibling of the
-     scrollable content, panel itself has no overflow). */
-  :global(.sv-pop__arrow) {
-    position: absolute; width: 10px; height: 10px;
-    background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e2e8f0);
-    transform: rotate(45deg);
-  }
-  :global(.sv-pop__arrow--bottom) { top: -6px; border-right: 0; border-bottom: 0; }
-  :global(.sv-pop__arrow--top) { bottom: -6px; border-left: 0; border-top: 0; }
-  :global(.sv-pop__arrow--right) { left: -6px; border-top: 0; border-right: 0; }
-  :global(.sv-pop__arrow--left) { right: -6px; border-bottom: 0; border-left: 0; }
-</style>
+<script lang="ts">
+  /**
+   * SvPopover - a floating panel anchored to a trigger, portalled to <body> so it
+   * escapes any `overflow:hidden` ancestor. Open on click (default), hover, or
+   * manually via `open`. Positioned by the shared engine (`computePosition`): full
+   * placement matrix + flip + shift + an optional arrow, kept in sync with
+   * `autoUpdate`. Closes on outside-click / Escape via the dismissable layer
+   * stack, and animates in. The panel is hoverable (interactive) under the hover
+   * trigger. Parity: Smart popover.
+   *
+   * ```svelte
+   * <SvPopover placement="bottom" arrow>
+   *   {#snippet anchor()}<button>Open</button>{/snippet}
+   *   <p>Panel content</p>
+   * </SvPopover>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+  import { portalToBody, popIn } from './popover'
+  import { computePosition, autoUpdate, type Placement, type ComputePositionResult } from './positioning'
+  import { createDismissableLayer } from './a11y/dismissable'
+  type Props = {
+    /** Controlled open state (bindable). */
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+    /** How the anchor opens the panel. `manual` = only `open` drives it. */
+    trigger?: 'click' | 'hover' | 'manual'
+    /** Preferred placement (flips when there is no room). Default `bottom-start`. */
+    placement?: Placement
+    /** Main-axis gap between trigger and panel. Default 8 (room for the arrow). */
+    offset?: number
+    /** Render a pointer arrow toward the trigger. Default true. */
+    arrow?: boolean
+    /** Hover trigger: delay (ms) before opening. Default 0. */
+    openDelay?: number
+    /** Hover trigger: delay (ms) before closing after leave. Default 120. */
+    closeDelay?: number
+    /** Estimated panel height, used before the panel has been measured. */
+    estimatedHeight?: number
+    /** Force a minimum panel width (else it hugs its content). */
+    minWidth?: number
+    /** Close when clicking outside. Default true. */
+    closeOnOutsideClick?: boolean
+    ariaLabel?: string
+    /** The anchor element(s) that open the panel. */
+    anchor?: Snippet
+    /** Panel content. */
+    children?: Snippet
+  }
+  let {
+    open = $bindable(false),
+    onOpenChange,
+    trigger = 'click',
+    placement = 'bottom-start',
+    offset = 8,
+    arrow = true,
+    openDelay = 0,
+    closeDelay = 120,
+    estimatedHeight = 220,
+    minWidth,
+    closeOnOutsideClick = true,
+    ariaLabel,
+    anchor,
+    children,
+  }: Props = $props()
+  const ARROW = 10
+  let anchorEl = $state<HTMLSpanElement | null>(null)
+  let panelEl = $state<HTMLDivElement | null>(null)
+  let pos = $state<ComputePositionResult>({
+    x: 0, y: 0, placement, side: 'bottom', align: 'start', maxWidth: 0, maxHeight: 0,
+  })
+  function setOpen(v: boolean) { if (v !== open) { open = v; onOpenChange?.(v) } }
+  function toggle() { setOpen(!open) }
+  function updatePos() {
+    if (!anchorEl) return
+    const r = anchorEl.getBoundingClientRect()
+    const f = panelEl?.getBoundingClientRect()
+    const floating = {
+      width: f?.width || minWidth || r.width,
+      height: f?.height || estimatedHeight,
+    }
+    pos = computePosition(
+      { x: r.left, y: r.top, width: r.width, height: r.height },
+      floating,
+      { placement, offset, padding: 8, minMainAxis: 96, arrow: arrow ? { size: ARROW } : undefined },
+    )
+  }
+  // Reposition whenever the trigger/panel resize or an ancestor scrolls, and wire
+  // Escape + outside-click dismissal via the shared layer stack (so a popover
+  // nested in a dialog closes top-first). Re-runs once `panelEl` mounts.
+  $effect(() => {
+    if (!open || !anchorEl || !panelEl) return
+    const stop = autoUpdate(anchorEl, panelEl, updatePos)
+    const layer = createDismissableLayer({
+      element: () => [anchorEl, panelEl],
+      onDismiss: () => setOpen(false),
+      closeOnOutside: closeOnOutsideClick,
+    })
+    layer.activate()
+    return () => { stop(); layer.release() }
+  })
+  let openTimer: ReturnType<typeof setTimeout> | undefined
+  let closeTimer: ReturnType<typeof setTimeout> | undefined
+  function onEnter() {
+    if (trigger !== 'hover') return
+    clearTimeout(closeTimer)
+    if (open) return
+    openTimer = setTimeout(() => setOpen(true), openDelay)
+  }
+  function onLeave() {
+    if (trigger !== 'hover') return
+    clearTimeout(openTimer)
+    closeTimer = setTimeout(() => setOpen(false), closeDelay)
+  }
+  /** Fallback accessible name for the panel when `ariaLabel` isn't given: the
+   * anchor's own aria-label, else its trimmed text content. */
+  function anchorFallbackLabel(): string | undefined {
+    const label = anchorEl?.getAttribute('aria-label')
+    if (label) return label
+    return anchorEl?.textContent?.trim() || undefined
+  }
+</script>
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span
+  bind:this={anchorEl}
+  class="sv-pop__anchor"
+  onclick={() => trigger === 'click' && toggle()}
+  onpointerenter={onEnter}
+  onpointerleave={onLeave}
+  onfocusin={onEnter}
+  onfocusout={onLeave}
+>
+  {@render anchor?.()}
+</span>
+{#if open}
+  <div
+    bind:this={panelEl}
+    class="sv-pop__panel"
+    use:portalToBody
+    use:popIn={{ up: pos.side === 'top' }}
+    style:position="fixed"
+    style:top={`${pos.y}px`}
+    style:left={`${pos.x}px`}
+    style:min-width={minWidth ? `${minWidth}px` : undefined}
+    role="dialog"
+    aria-label={ariaLabel ?? anchorFallbackLabel()}
+    onpointerenter={onEnter}
+    onpointerleave={onLeave}
+    onfocusin={onEnter}
+    onfocusout={onLeave}
+  >
+    {#if arrow}
+      <span
+        class="sv-pop__arrow sv-pop__arrow--{pos.side}"
+        style:left={pos.arrow?.x != null ? `${pos.arrow.x}px` : undefined}
+        style:top={pos.arrow?.y != null ? `${pos.arrow.y}px` : undefined}
+      ></span>
+    {/if}
+    <div class="sv-pop__content" style:max-height={pos.maxHeight ? `${pos.maxHeight}px` : undefined}>
+      {@render children?.()}
+    </div>
+  </div>
+{/if}
+<style>
+  .sv-pop__anchor { display: inline-flex; }
+  :global(.sv-pop__panel) {
+    z-index: 2147483646; max-width: min(92vw, 360px);
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-border, #e2e8f0); border-radius: 10px;
+    box-shadow: 0 16px 48px -12px rgba(15, 23, 42, 0.35); font-size: 13px; line-height: 1.55;
+  }
+  :global(.sv-pop__content) { padding: 12px 14px; overflow: auto; }
+  /* Arrow: a rotated square straddling the panel edge, two borders showing so it
+     reads as a continuation of the panel outline. Not clipped (sibling of the
+     scrollable content, panel itself has no overflow). */
+  :global(.sv-pop__arrow) {
+    position: absolute; width: 10px; height: 10px;
+    background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e2e8f0);
+    transform: rotate(45deg);
+  }
+  :global(.sv-pop__arrow--bottom) { top: -6px; border-right: 0; border-bottom: 0; }
+  :global(.sv-pop__arrow--top) { bottom: -6px; border-left: 0; border-top: 0; }
+  :global(.sv-pop__arrow--right) { left: -6px; border-top: 0; border-right: 0; }
+  :global(.sv-pop__arrow--left) { right: -6px; border-bottom: 0; border-left: 0; }
+</style>

package/src/SvRadioGroup.svelte CHANGED Viewed

@@ -1,107 +1,107 @@
-<script lang="ts" module>
-  export type { RadioOption } from './createRadioGroup.svelte'
-</script>
-<script lang="ts">
-  /**
-   * SvRadioGroup - an accessible radio group (WAI-ARIA radiogroup pattern) with
-   * roving tabindex + arrow-key navigation. Parity: Smart `smart-radio-button`
-   * (as a managed group). Controlled via `value` + `onChange`.
-   */
-  import SvField from './SvField.svelte'
-  import { nextEditorId, type SvEditorProps } from './editor-contract'
-  import { createRadioGroup, type RadioOption } from './createRadioGroup.svelte'
-  type Props = SvEditorProps & {
-    options: ReadonlyArray<RadioOption>
-    value?: string | number | null
-    onChange?: (value: string | number) => void
-    orientation?: 'vertical' | 'horizontal'
-  }
-  let {
-    options,
-    value = null,
-    onChange,
-    name,
-    disabled = false,
-    readonly = false,
-    orientation = 'vertical',
-    size = 'md',
-    ariaLabel,
-    invalid = false,
-    required = false,
-    error,
-    label,
-    hint,
-    dir,
-    id,
-  }: Props = $props()
-  const autoId = nextEditorId('sv-radio')
-  const uid = $derived(id ?? autoId)
-  // The styled radio group is just a renderer over the headless core.
-  const rg = createRadioGroup({
-    options: () => options,
-    value: () => value,
-    onChange: (v) => { if (readonly) return; onChange?.(v) },
-    disabled: () => disabled,
-    // A visible field `label` also names the group for assistive tech.
-    ariaLabel: () => ariaLabel ?? label,
-    id: () => uid,
-    invalid: () => invalid,
-    required: () => required,
-    error: () => error,
-    hint: () => hint,
-  })
-</script>
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
-  <div
-    class="sv-radiogroup sv-radiogroup--{orientation} sv-radiogroup--{size}"
-    class:is-invalid={invalid}
-    class:is-readonly={readonly}
-    {...rg.groupProps()}
-    aria-readonly={readonly ? 'true' : undefined}
-  >
-    {#each options as opt (opt.value)}
-      <button
-        class="sv-radio"
-        class:is-checked={opt.value === value}
-        {...rg.radioProps(opt)}
-      >
-        <span class="sv-radio__dot"></span>
-        <span class="sv-radio__label">{opt.label}</span>
-      </button>
-    {/each}
-    {#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
-  </div>
-</SvField>
-<style>
-  .sv-radiogroup { --_accent: var(--sg-accent, #2563eb); display: flex; gap: 10px; }
-  .sv-radiogroup--vertical { flex-direction: column; }
-  .sv-radiogroup--horizontal { flex-direction: row; flex-wrap: wrap; }
-  .sv-radio {
-    display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 2px;
-    font: inherit; color: var(--sg-fg, #0f172a); cursor: pointer; user-select: none;
-  }
-  .sv-radiogroup--sm .sv-radio { font-size: 12px; }
-  .sv-radiogroup--md .sv-radio { font-size: 13px; }
-  .sv-radiogroup--lg .sv-radio { font-size: 15px; }
-  .sv-radio[disabled] { opacity: 0.5; cursor: not-allowed; }
-  .sv-radiogroup.is-readonly .sv-radio { cursor: default; }
-  .sv-radio__dot {
-    width: 17px; height: 17px; flex: none; border-radius: 50%;
-    border: 1.5px solid var(--sg-border, #cbd5e1); background: var(--sg-input-bg, #fff);
-    display: grid; place-items: center; transition: border-color 0.12s;
-  }
-  .sv-radiogroup.is-invalid .sv-radio__dot { border-color: var(--sg-danger, #dc2626); }
-  .sv-radio.is-checked .sv-radio__dot { border-color: var(--_accent); }
-  .sv-radio.is-checked .sv-radio__dot::after {
-    content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--_accent);
-  }
-  .sv-radio:focus-visible { outline: none; }
-  .sv-radio:focus-visible .sv-radio__dot { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
-</style>
+<script lang="ts" module>
+  export type { RadioOption } from './createRadioGroup.svelte'
+</script>
+<script lang="ts">
+  /**
+   * SvRadioGroup - an accessible radio group (WAI-ARIA radiogroup pattern) with
+   * roving tabindex + arrow-key navigation. Parity: Smart `smart-radio-button`
+   * (as a managed group). Controlled via `value` + `onChange`.
+   */
+  import SvField from './SvField.svelte'
+  import { nextEditorId, type SvEditorProps } from './editor-contract'
+  import { createRadioGroup, type RadioOption } from './createRadioGroup.svelte'
+  type Props = SvEditorProps & {
+    options: ReadonlyArray<RadioOption>
+    value?: string | number | null
+    onChange?: (value: string | number) => void
+    orientation?: 'vertical' | 'horizontal'
+  }
+  let {
+    options,
+    value = null,
+    onChange,
+    name,
+    disabled = false,
+    readonly = false,
+    orientation = 'vertical',
+    size = 'md',
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+  }: Props = $props()
+  const autoId = nextEditorId('sv-radio')
+  const uid = $derived(id ?? autoId)
+  // The styled radio group is just a renderer over the headless core.
+  const rg = createRadioGroup({
+    options: () => options,
+    value: () => value,
+    onChange: (v) => { if (readonly) return; onChange?.(v) },
+    disabled: () => disabled,
+    // A visible field `label` also names the group for assistive tech.
+    ariaLabel: () => ariaLabel ?? label,
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
+  })
+</script>
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <div
+    class="sv-radiogroup sv-radiogroup--{orientation} sv-radiogroup--{size}"
+    class:is-invalid={invalid}
+    class:is-readonly={readonly}
+    {...rg.groupProps()}
+    aria-readonly={readonly ? 'true' : undefined}
+  >
+    {#each options as opt (opt.value)}
+      <button
+        class="sv-radio"
+        class:is-checked={opt.value === value}
+        {...rg.radioProps(opt)}
+      >
+        <span class="sv-radio__dot"></span>
+        <span class="sv-radio__label">{opt.label}</span>
+      </button>
+    {/each}
+    {#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
+  </div>
+</SvField>
+<style>
+  .sv-radiogroup { --_accent: var(--sg-accent, #2563eb); display: flex; gap: 10px; }
+  .sv-radiogroup--vertical { flex-direction: column; }
+  .sv-radiogroup--horizontal { flex-direction: row; flex-wrap: wrap; }
+  .sv-radio {
+    display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 2px;
+    font: inherit; color: var(--sg-fg, #0f172a); cursor: pointer; user-select: none;
+  }
+  .sv-radiogroup--sm .sv-radio { font-size: 12px; }
+  .sv-radiogroup--md .sv-radio { font-size: 13px; }
+  .sv-radiogroup--lg .sv-radio { font-size: 15px; }
+  .sv-radio[disabled] { opacity: 0.5; cursor: not-allowed; }
+  .sv-radiogroup.is-readonly .sv-radio { cursor: default; }
+  .sv-radio__dot {
+    width: 17px; height: 17px; flex: none; border-radius: 50%;
+    border: 1.5px solid var(--sg-border, #cbd5e1); background: var(--sg-input-bg, #fff);
+    display: grid; place-items: center; transition: border-color 0.12s;
+  }
+  .sv-radiogroup.is-invalid .sv-radio__dot { border-color: var(--sg-danger, #dc2626); }
+  .sv-radio.is-checked .sv-radio__dot { border-color: var(--_accent); }
+  .sv-radio.is-checked .sv-radio__dot::after {
+    content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--_accent);
+  }
+  .sv-radio:focus-visible { outline: none; }
+  .sv-radio:focus-visible .sv-radio__dot { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
+</style>