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

@svgrid/grid 2.2.27 → 2.2.29

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

package/README.md +199 -199
package/dist/FlexRender.svelte +96 -96
package/dist/GridFooter.svelte +179 -179
package/dist/GridMenus.svelte +782 -734
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 +254 -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.controller.svelte.d.ts +14 -1
package/dist/SvGrid.controller.svelte.js +112 -28
package/dist/SvGrid.css +2704 -2723
package/dist/SvGrid.svelte +3361 -3333
package/dist/SvGrid.types.d.ts +20 -5
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 +326 -287
package/dist/SvListBox.svelte.d.ts +10 -1
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 +133 -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/cdn/GridMenus-Da_p7SKS.js +486 -0
package/dist/cdn/GridMenus-Ds3OpzZT.js +490 -0
package/dist/cdn/{SvDateTimePicker-B1sDc9Pz.js → SvDateTimePicker-B8GopjhC.js} +2 -2
package/dist/cdn/{SvDateTimePicker-Bh0FTs1E.js → SvDateTimePicker-DB0aIEk8.js} +2 -2
package/dist/cdn/{SvGridChart-Bgk4hDs8.js → SvGridChart-BcLCYvw9.js} +1 -1
package/dist/cdn/{SvGridChart-BKQsO5fZ.js → SvGridChart-BhnFdLd0.js} +1 -1
package/dist/cdn/{SvGridChartPanel-DkCc2Z7b.js → SvGridChartPanel-Cmx9DHAS.js} +1 -1
package/dist/cdn/{SvGridChartPanel-DSkHIQDd.js → SvGridChartPanel-DvjwxLvK.js} +1 -1
package/dist/cdn/{SvGridChartView-BrbVaELm.js → SvGridChartView-B40DTJSX.js} +1 -1
package/dist/cdn/{SvGridChartView-i9rWvSKg.js → SvGridChartView-PwqI4s02.js} +1 -1
package/dist/cdn/{SvGridDropdown-D08sVmAy.js → SvGridDropdown-DjALc_4f.js} +1 -1
package/dist/cdn/{SvGridDropdown-CGxxopQ4.js → SvGridDropdown-hpnHvOGt.js} +1 -1
package/dist/cdn/{src-cgs1wcUS.js → src-BLJfdyL0.js} +4034 -3889
package/dist/cdn/{src-Cw8d9U8j.js → src-DYDCiC0D.js} +7053 -6908
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/column-groups.js +8 -10
package/dist/column-id.d.ts +9 -0
package/dist/column-id.js +25 -0
package/dist/core.js +2 -1
package/dist/createListbox.svelte.d.ts +15 -2
package/dist/createListbox.svelte.js +27 -6
package/dist/editing.d.ts +1 -0
package/dist/editing.js +45 -10
package/dist/filtering/excel-filters.d.ts +30 -10
package/dist/filtering/excel-filters.js +96 -15
package/dist/index.d.ts +2 -2
package/dist/index.js +2 -2
package/dist/menus.d.ts +2 -0
package/dist/menus.js +25 -0
package/dist/row-resize.js +40 -0
package/dist/selection.js +1 -1
package/package.json +10 -10
package/src/FlexRender.svelte +96 -96
package/src/GridFooter.svelte +179 -179
package/src/GridMenus.svelte +782 -734
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 +254 -250
package/src/SvDrawer.test.ts +18 -1
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 +3335 -3239
package/src/SvGrid.css +2704 -2723
package/src/SvGrid.svelte +3361 -3333
package/src/SvGrid.types.ts +1628 -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 +326 -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/SvNavPane.test.ts +15 -4
package/src/SvNumberInput.svelte +168 -168
package/src/SvOtpInput.svelte +158 -158
package/src/SvPasswordInput.svelte +151 -151
package/src/SvPhoneInput.svelte +133 -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 -119
package/src/a11y/dismissable.ts +114 -114
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/column-groups.test.ts +48 -0
package/src/column-groups.ts +8 -10
package/src/column-id.ts +30 -0
package/src/core.performance.test.ts +30 -30
package/src/core.ts +1112 -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/createListbox.svelte.ts +39 -7
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 +949 -859
package/src/editing.ts +709 -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/filtering/excel-filters.test.ts +44 -1
package/src/filtering/excel-filters.ts +91 -14
package/src/flex-render.ts +3 -3
package/src/form-field.ts +127 -127
package/src/index.ts +715 -713
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 +736 -700
package/src/menus.ts +679 -652
package/src/merge-objects.ts +48 -48
package/src/overlays.test.ts +90 -90
package/src/render-component.ts +28 -28
package/src/row-resize.test.ts +100 -0
package/src/row-resize.ts +36 -0
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.api-extensions.test.ts +8 -3
package/src/svgrid.behavior.test.ts +706 -706
package/src/svgrid.cell-dom-ids.test.ts +96 -0
package/src/svgrid.charting.test.ts +534 -534
package/src/svgrid.conditional-stat-scope.test.ts +111 -0
package/src/svgrid.features.test.ts +157 -157
package/src/svgrid.filter-menu-listbox.svelte.test.ts +308 -0
package/src/svgrid.filter-menu-scroll.test.ts +3 -1
package/src/svgrid.group-header-ids.test.ts +121 -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-BzxEYNtW.js +0 -421
package/dist/cdn/GridMenus-Dr-nGEXn.js +0 -417

package/src/SvDrawer.svelte CHANGED Viewed

@@ -1,250 +1,254 @@
-<script lang="ts">
-  /**
-   * SvDrawer - an edge-anchored side sheet (right / left / top / bottom): a
-   * backdrop, a sliding panel, and the full dialog a11y contract. Built entirely
-   * on the shared primitives - `createFocusTrap`, `lockScroll` and
-   * `createDismissableLayer` - so its focus, scroll-lock and Escape/backdrop
-   * behaviour is identical to SvModal and nested overlays close top-first.
-   * Portalled to <body>. Controlled via `open`.
-   *
-   * ```svelte
-   * <SvDrawer bind:open side="right" title="Filters">
-   *   <p>Body</p>
-   *   {#snippet footer()}<button onclick={() => open = false}>Apply</button>{/snippet}
-   * </SvDrawer>
-   * ```
-   */
-  import type { Snippet } from 'svelte'
-  import { untrack } from 'svelte'
-  import { portalToBody } from './popover'
-  import { nextEditorId } from './editor-contract'
-  import { createOverlay } from './createOverlay.svelte'
-  /** Edge the drawer slides from. Kept in sync with the `DrawerSide` export in
-   *  index.ts (a bare type-only module script trips the Svelte/Vite parser). */
-  type DrawerSide = 'right' | 'left' | 'top' | 'bottom'
-  type Props = {
-    open?: boolean
-    onClose?: () => void
-    /** Edge the drawer slides from. Default 'right'. */
-    side?: DrawerSide
-    /** Panel size along its axis (width for left/right, height for top/bottom).
-     *  Any CSS length; defaults to a sensible per-axis value. */
-    size?: string
-    title?: string
-    closeOnBackdrop?: boolean
-    closeOnEsc?: boolean
-    /** Hide the header close (x) button. */
-    hideClose?: boolean
-    /** Render as a mobile bottom-sheet: bottom-anchored, rounded top, a grab
-     *  handle, and swipe-down-to-close. Overrides `side`. */
-    sheet?: boolean
-    /** Accessible name when there is no visible `title`. */
-    ariaLabel?: string
-    /** Fired after the close (exit) animation has finished and the drawer has
-     *  left the DOM. Use it to clear the data the drawer was showing so the
-     *  content stays put while it slides out. */
-    onClosed?: () => void
-    children?: Snippet
-    footer?: Snippet
-  }
-  let {
-    open = $bindable(false),
-    onClose,
-    side = 'right',
-    size,
-    title,
-    closeOnBackdrop = true,
-    closeOnEsc = true,
-    hideClose = false,
-    sheet = false,
-    ariaLabel,
-    onClosed,
-    children,
-    footer,
-  }: Props = $props()
-  const titleId = nextEditorId('sv-drawer-title')
-  let dialogEl = $state<HTMLDivElement | null>(null)
-  // A sheet is a bottom drawer with mobile affordances.
-  const effectiveSide = $derived<DrawerSide>(sheet ? 'bottom' : side)
-  const horizontal = $derived(effectiveSide === 'left' || effectiveSide === 'right')
-  const sizeVar = $derived(size ?? (horizontal ? 'min(400px, 92vw)' : 'min(360px, 85vh)'))
-  function close() { open = false; onClose?.() }
-  // Enter/exit animation via CSS @keyframes (the pattern SvModal uses - keyframes
-  // play on a `use:portalToBody` element; the Svelte `transition:` directive does
-  // NOT). `show` keeps the panel mounted; the enter keyframe fires on mount, and
-  // on close we add `is-leaving` (exit keyframe) and unmount + fire `onClosed`
-  // after the duration. Honors reduced-motion by dropping the hold to 0ms.
-  const reduceMotion = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches
-  const EXIT_MS = 260
-  let show = $state(false)
-  let leaving = $state(false)
-  let leaveTimer: ReturnType<typeof setTimeout> | undefined
-  $effect(() => {
-    if (open) {
-      clearTimeout(leaveTimer)
-      leaving = false
-      show = true
-      return
-    }
-    // Only run the leave sequence if the drawer was actually shown (skips the
-    // initial closed mount, which must not fire onClosed).
-    if (untrack(() => show)) {
-      leaving = true
-      leaveTimer = setTimeout(() => { show = false; leaving = false; onClosed?.() }, reduceMotion ? 0 : EXIT_MS)
-    }
-  })
-  // Swipe-down-to-close for the sheet grab handle.
-  let dragY = $state(0)
-  let dragging = $state(false)
-  let dragStartY = 0
-  function onGrabDown(e: PointerEvent) {
-    dragging = true
-    dragStartY = e.clientY
-    ;(e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId)
-  }
-  function onGrabMove(e: PointerEvent) {
-    if (!dragging) return
-    dragY = Math.max(0, e.clientY - dragStartY)
-  }
-  function onGrabUp(e: PointerEvent) {
-    if (!dragging) return
-    dragging = false
-    ;(e.currentTarget as HTMLElement).releasePointerCapture?.(e.pointerId)
-    if (dragY > 80) close()
-    else dragY = 0
-  }
-  // Focus trap + scroll lock + Escape/backdrop dismissal come from the shared
-  // headless overlay core - one tested implementation across every dialog-like
-  // overlay, and nested overlays close top-first. See createOverlay.svelte.ts.
-  const overlay = createOverlay({
-    open: () => open,
-    getDialog: () => dialogEl,
-    onClose: close,
-    closeOnEsc: () => closeOnEsc,
-    closeOnBackdrop: () => closeOnBackdrop,
-    onOpen: () => { dragY = 0 },
-  })
-</script>
-{#if show}
-  <div class="sv-drawer__backdrop" class:is-leaving={leaving} use:portalToBody>
-    <div
-      bind:this={dialogEl}
-      class="sv-drawer sv-drawer--{effectiveSide}"
-      class:is-leaving={leaving}
-      class:is-sheet={sheet}
-      class:is-dragging={dragging}
-      {...overlay.dialogProps({ labelledBy: title ? titleId : undefined, label: !title ? ariaLabel : undefined })}
-      style:--sv-drawer-size={sizeVar}
-      style:transform={sheet && dragY ? `translateY(${dragY}px)` : undefined}
-    >
-      {#if sheet}
-        <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <div
-          class="sv-drawer__grab"
-          aria-hidden="true"
-          onpointerdown={onGrabDown}
-          onpointermove={onGrabMove}
-          onpointerup={onGrabUp}
-          onpointercancel={onGrabUp}
-        ><span></span></div>
-      {/if}
-      {#if title || !hideClose}
-        <div class="sv-drawer__header">
-          <h2 class="sv-drawer__title" id={titleId}>{title ?? ''}</h2>
-          {#if !hideClose}
-            <button type="button" class="sv-drawer__x" aria-label="Close" onclick={close}>&times;</button>
-          {/if}
-        </div>
-      {/if}
-      <div class="sv-drawer__body">{@render children?.()}</div>
-      {#if footer}<div class="sv-drawer__footer">{@render footer()}</div>{/if}
-    </div>
-  </div>
-{/if}
-<style>
-  :global(.sv-drawer__backdrop) {
-    position: fixed; inset: 0; z-index: 2147483000;
-    background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(1.5px);
-    animation: sv-drawer-bd-in 0.2s ease backwards;
-  }
-  :global(.sv-drawer__backdrop.is-leaving) { animation: sv-drawer-bd-out 0.2s ease forwards; }
-  @keyframes sv-drawer-bd-in { from { opacity: 0 } to { opacity: 1 } }
-  @keyframes sv-drawer-bd-out { from { opacity: 1 } to { opacity: 0 } }
-  :global(.sv-drawer) {
-    position: fixed;
-    display: flex; flex-direction: column;
-    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
-    box-shadow: 0 24px 64px -16px rgba(15, 23, 42, 0.5);
-    overflow: hidden;
-    /* Slide in on mount; `backwards` fill shows the off-screen start frame with no
-       flash, and does NOT hold the end frame - so the sheet drag transform wins. */
-    animation: sv-drawer-in 0.26s cubic-bezier(0.16, 1, 0.3, 1) backwards;
-  }
-  /* Exit keyframe; `forwards` fill holds the off-screen frame until we unmount. */
-  :global(.sv-drawer.is-leaving) { animation: sv-drawer-out 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
-  /* Off-screen vector per edge - the enter/exit keyframes read `--sv-off`. `side`
-     is a stated physical edge (like SvToaster's position prop), not a text-flow
-     "start/end" - so it stays physical left/right regardless of page dir. */
-  :global(.sv-drawer--right), :global(.sv-drawer--left) {
-    top: 0; bottom: 0; width: var(--sv-drawer-size); max-width: 100vw;
-  }
-  :global(.sv-drawer--right) { right: 0; border-left: 1px solid var(--sg-border, #e2e8f0); --sv-off: translateX(100%); }
-  :global(.sv-drawer--left) { left: 0; border-right: 1px solid var(--sg-border, #e2e8f0); --sv-off: translateX(-100%); }
-  /* Top / bottom: full width, fixed height, slide along Y. */
-  :global(.sv-drawer--top), :global(.sv-drawer--bottom) {
-    left: 0; right: 0; height: var(--sv-drawer-size); max-height: 100vh;
-  }
-  :global(.sv-drawer--top) { top: 0; border-bottom: 1px solid var(--sg-border, #e2e8f0); --sv-off: translateY(-100%); }
-  :global(.sv-drawer--bottom) { bottom: 0; border-top: 1px solid var(--sg-border, #e2e8f0); --sv-off: translateY(100%); }
-  @keyframes sv-drawer-in { from { transform: var(--sv-off) } to { transform: none } }
-  @keyframes sv-drawer-out { from { transform: none } to { transform: var(--sv-off) } }
-  /* Mobile bottom-sheet: centered, fixed width, rounded top, grab handle. Slides
-     along Y like a bottom drawer (enter/exit keyframes read --sv-off from --bottom). */
-  :global(.sv-drawer.is-sheet) {
-    left: 0; right: 0; margin: 0 auto; top: auto;
-    width: min(560px, 100vw); height: auto; max-height: 85vh;
-    border: 1px solid var(--sg-border, #e2e8f0); border-bottom: 0;
-    border-radius: 16px 16px 0 0;
-  }
-  /* No transition while the user is dragging the grab handle - follow the finger. */
-  :global(.sv-drawer.is-dragging) { transition: none; }
-  :global(.sv-drawer__grab) {
-    flex: none; display: grid; place-items: center; padding: 8px 0 2px; cursor: grab; touch-action: none;
-  }
-  :global(.sv-drawer__grab span) {
-    display: block; width: 40px; height: 4px; border-radius: 999px; background: var(--sg-border, #cbd5e1);
-  }
-  @media (prefers-reduced-motion: reduce) {
-    :global(.sv-drawer__backdrop), :global(.sv-drawer__backdrop.is-leaving),
-    :global(.sv-drawer), :global(.sv-drawer.is-leaving) { animation: none; }
-  }
-  :global(.sv-drawer__header) {
-    display: flex; align-items: center; gap: 12px; padding: 13px 16px;
-    border-bottom: 1px solid var(--sg-border, #e2e8f0);
-  }
-  :global(.sv-drawer__title) { flex: 1; margin: 0; font-size: 15px; font-weight: 650; }
-  :global(.sv-drawer__x) {
-    flex: none; width: 28px; height: 28px; display: grid; place-items: center;
-    background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 6px; font-size: 20px; line-height: 1;
-  }
-  :global(.sv-drawer__x:hover) { background: var(--sg-row-hover-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
-  :global(.sv-drawer__body) { padding: 16px; overflow: auto; flex: 1; font-size: 13.5px; line-height: 1.6; }
-  :global(.sv-drawer__footer) {
-    display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px;
-    border-top: 1px solid var(--sg-border, #e2e8f0);
-  }
-</style>
+<script lang="ts">
+  /**
+   * SvDrawer - an edge-anchored side sheet (right / left / top / bottom): a
+   * backdrop, a sliding panel, and the full dialog a11y contract. Built entirely
+   * on the shared primitives - `createFocusTrap`, `lockScroll` and
+   * `createDismissableLayer` - so its focus, scroll-lock and Escape/backdrop
+   * behaviour is identical to SvModal and nested overlays close top-first.
+   * Portalled to <body>. Controlled via `open`.
+   *
+   * ```svelte
+   * <SvDrawer bind:open side="right" title="Filters">
+   *   <p>Body</p>
+   *   {#snippet footer()}<button onclick={() => open = false}>Apply</button>{/snippet}
+   * </SvDrawer>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+  import { untrack } from 'svelte'
+  import { portalToBody } from './popover'
+  import { nextEditorId } from './editor-contract'
+  import { createOverlay } from './createOverlay.svelte'
+  /** Edge the drawer slides from. Kept in sync with the `DrawerSide` export in
+   *  index.ts (a bare type-only module script trips the Svelte/Vite parser). */
+  type DrawerSide = 'right' | 'left' | 'top' | 'bottom'
+  type Props = {
+    open?: boolean
+    onClose?: () => void
+    /** Edge the drawer slides from. Default 'right'. */
+    side?: DrawerSide
+    /** Panel size along its axis (width for left/right, height for top/bottom).
+     *  Any CSS length; defaults to a sensible per-axis value. */
+    size?: string
+    title?: string
+    closeOnBackdrop?: boolean
+    closeOnEsc?: boolean
+    /** Hide the header close (x) button. */
+    hideClose?: boolean
+    /** Render as a mobile bottom-sheet: bottom-anchored, rounded top, a grab
+     *  handle, and swipe-down-to-close. Overrides `side`. */
+    sheet?: boolean
+    /** Accessible name when there is no visible `title`. */
+    ariaLabel?: string
+    /** Fired after the close (exit) animation has finished and the drawer has
+     *  left the DOM. Use it to clear the data the drawer was showing so the
+     *  content stays put while it slides out. */
+    onClosed?: () => void
+    children?: Snippet
+    footer?: Snippet
+  }
+  let {
+    open = $bindable(false),
+    onClose,
+    side = 'right',
+    size,
+    title,
+    closeOnBackdrop = true,
+    closeOnEsc = true,
+    hideClose = false,
+    sheet = false,
+    ariaLabel,
+    onClosed,
+    children,
+    footer,
+  }: Props = $props()
+  const titleId = nextEditorId('sv-drawer-title')
+  let dialogEl = $state<HTMLDivElement | null>(null)
+  // A sheet is a bottom drawer with mobile affordances.
+  const effectiveSide = $derived<DrawerSide>(sheet ? 'bottom' : side)
+  const horizontal = $derived(effectiveSide === 'left' || effectiveSide === 'right')
+  const sizeVar = $derived(size ?? (horizontal ? 'min(400px, 92vw)' : 'min(360px, 85vh)'))
+  function close() { open = false; onClose?.() }
+  // Enter/exit animation via CSS @keyframes (the pattern SvModal uses - keyframes
+  // play on a `use:portalToBody` element; the Svelte `transition:` directive does
+  // NOT). `show` keeps the panel mounted; the enter keyframe fires on mount, and
+  // on close we add `is-leaving` (exit keyframe) and unmount + fire `onClosed`
+  // after the duration. Honors reduced-motion by dropping the hold to 0ms.
+  const reduceMotion = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches
+  const EXIT_MS = 260
+  let show = $state(false)
+  let leaving = $state(false)
+  let leaveTimer: ReturnType<typeof setTimeout> | undefined
+  $effect(() => {
+    if (open) {
+      clearTimeout(leaveTimer)
+      leaving = false
+      show = true
+      return
+    }
+    // Only run the leave sequence if the drawer was actually shown (skips the
+    // initial closed mount, which must not fire onClosed).
+    if (untrack(() => show)) {
+      leaving = true
+      leaveTimer = setTimeout(() => { show = false; leaving = false; onClosed?.() }, reduceMotion ? 0 : EXIT_MS)
+    }
+    // `open` is this effect's only dependency, so the cleanup runs on reopen (a
+    // no-op after the clearTimeout above) or on destroy - where it matters, so a
+    // drawer unmounted mid-exit doesn't leave a timer firing into a dead scope.
+    return () => clearTimeout(leaveTimer)
+  })
+  // Swipe-down-to-close for the sheet grab handle.
+  let dragY = $state(0)
+  let dragging = $state(false)
+  let dragStartY = 0
+  function onGrabDown(e: PointerEvent) {
+    dragging = true
+    dragStartY = e.clientY
+    ;(e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId)
+  }
+  function onGrabMove(e: PointerEvent) {
+    if (!dragging) return
+    dragY = Math.max(0, e.clientY - dragStartY)
+  }
+  function onGrabUp(e: PointerEvent) {
+    if (!dragging) return
+    dragging = false
+    ;(e.currentTarget as HTMLElement).releasePointerCapture?.(e.pointerId)
+    if (dragY > 80) close()
+    else dragY = 0
+  }
+  // Focus trap + scroll lock + Escape/backdrop dismissal come from the shared
+  // headless overlay core - one tested implementation across every dialog-like
+  // overlay, and nested overlays close top-first. See createOverlay.svelte.ts.
+  const overlay = createOverlay({
+    open: () => open,
+    getDialog: () => dialogEl,
+    onClose: close,
+    closeOnEsc: () => closeOnEsc,
+    closeOnBackdrop: () => closeOnBackdrop,
+    onOpen: () => { dragY = 0 },
+  })
+</script>
+{#if show}
+  <div class="sv-drawer__backdrop" class:is-leaving={leaving} use:portalToBody>
+    <div
+      bind:this={dialogEl}
+      class="sv-drawer sv-drawer--{effectiveSide}"
+      class:is-leaving={leaving}
+      class:is-sheet={sheet}
+      class:is-dragging={dragging}
+      {...overlay.dialogProps({ labelledBy: title ? titleId : undefined, label: !title ? ariaLabel : undefined })}
+      style:--sv-drawer-size={sizeVar}
+      style:transform={sheet && dragY ? `translateY(${dragY}px)` : undefined}
+    >
+      {#if sheet}
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div
+          class="sv-drawer__grab"
+          aria-hidden="true"
+          onpointerdown={onGrabDown}
+          onpointermove={onGrabMove}
+          onpointerup={onGrabUp}
+          onpointercancel={onGrabUp}
+        ><span></span></div>
+      {/if}
+      {#if title || !hideClose}
+        <div class="sv-drawer__header">
+          <h2 class="sv-drawer__title" id={titleId}>{title ?? ''}</h2>
+          {#if !hideClose}
+            <button type="button" class="sv-drawer__x" aria-label="Close" onclick={close}>&times;</button>
+          {/if}
+        </div>
+      {/if}
+      <div class="sv-drawer__body">{@render children?.()}</div>
+      {#if footer}<div class="sv-drawer__footer">{@render footer()}</div>{/if}
+    </div>
+  </div>
+{/if}
+<style>
+  :global(.sv-drawer__backdrop) {
+    position: fixed; inset: 0; z-index: 2147483000;
+    background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(1.5px);
+    animation: sv-drawer-bd-in 0.2s ease backwards;
+  }
+  :global(.sv-drawer__backdrop.is-leaving) { animation: sv-drawer-bd-out 0.2s ease forwards; }
+  @keyframes sv-drawer-bd-in { from { opacity: 0 } to { opacity: 1 } }
+  @keyframes sv-drawer-bd-out { from { opacity: 1 } to { opacity: 0 } }
+  :global(.sv-drawer) {
+    position: fixed;
+    display: flex; flex-direction: column;
+    background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
+    box-shadow: 0 24px 64px -16px rgba(15, 23, 42, 0.5);
+    overflow: hidden;
+    /* Slide in on mount; `backwards` fill shows the off-screen start frame with no
+       flash, and does NOT hold the end frame - so the sheet drag transform wins. */
+    animation: sv-drawer-in 0.26s cubic-bezier(0.16, 1, 0.3, 1) backwards;
+  }
+  /* Exit keyframe; `forwards` fill holds the off-screen frame until we unmount. */
+  :global(.sv-drawer.is-leaving) { animation: sv-drawer-out 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
+  /* Off-screen vector per edge - the enter/exit keyframes read `--sv-off`. `side`
+     is a stated physical edge (like SvToaster's position prop), not a text-flow
+     "start/end" - so it stays physical left/right regardless of page dir. */
+  :global(.sv-drawer--right), :global(.sv-drawer--left) {
+    top: 0; bottom: 0; width: var(--sv-drawer-size); max-width: 100vw;
+  }
+  :global(.sv-drawer--right) { right: 0; border-left: 1px solid var(--sg-border, #e2e8f0); --sv-off: translateX(100%); }
+  :global(.sv-drawer--left) { left: 0; border-right: 1px solid var(--sg-border, #e2e8f0); --sv-off: translateX(-100%); }
+  /* Top / bottom: full width, fixed height, slide along Y. */
+  :global(.sv-drawer--top), :global(.sv-drawer--bottom) {
+    left: 0; right: 0; height: var(--sv-drawer-size); max-height: 100vh;
+  }
+  :global(.sv-drawer--top) { top: 0; border-bottom: 1px solid var(--sg-border, #e2e8f0); --sv-off: translateY(-100%); }
+  :global(.sv-drawer--bottom) { bottom: 0; border-top: 1px solid var(--sg-border, #e2e8f0); --sv-off: translateY(100%); }
+  @keyframes sv-drawer-in { from { transform: var(--sv-off) } to { transform: none } }
+  @keyframes sv-drawer-out { from { transform: none } to { transform: var(--sv-off) } }
+  /* Mobile bottom-sheet: centered, fixed width, rounded top, grab handle. Slides
+     along Y like a bottom drawer (enter/exit keyframes read --sv-off from --bottom). */
+  :global(.sv-drawer.is-sheet) {
+    left: 0; right: 0; margin: 0 auto; top: auto;
+    width: min(560px, 100vw); height: auto; max-height: 85vh;
+    border: 1px solid var(--sg-border, #e2e8f0); border-bottom: 0;
+    border-radius: 16px 16px 0 0;
+  }
+  /* No transition while the user is dragging the grab handle - follow the finger. */
+  :global(.sv-drawer.is-dragging) { transition: none; }
+  :global(.sv-drawer__grab) {
+    flex: none; display: grid; place-items: center; padding: 8px 0 2px; cursor: grab; touch-action: none;
+  }
+  :global(.sv-drawer__grab span) {
+    display: block; width: 40px; height: 4px; border-radius: 999px; background: var(--sg-border, #cbd5e1);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :global(.sv-drawer__backdrop), :global(.sv-drawer__backdrop.is-leaving),
+    :global(.sv-drawer), :global(.sv-drawer.is-leaving) { animation: none; }
+  }
+  :global(.sv-drawer__header) {
+    display: flex; align-items: center; gap: 12px; padding: 13px 16px;
+    border-bottom: 1px solid var(--sg-border, #e2e8f0);
+  }
+  :global(.sv-drawer__title) { flex: 1; margin: 0; font-size: 15px; font-weight: 650; }
+  :global(.sv-drawer__x) {
+    flex: none; width: 28px; height: 28px; display: grid; place-items: center;
+    background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 6px; font-size: 20px; line-height: 1;
+  }
+  :global(.sv-drawer__x:hover) { background: var(--sg-row-hover-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
+  :global(.sv-drawer__body) { padding: 16px; overflow: auto; flex: 1; font-size: 13.5px; line-height: 1.6; }
+  :global(.sv-drawer__footer) {
+    display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px;
+    border-top: 1px solid var(--sg-border, #e2e8f0);
+  }
+</style>

package/src/SvDrawer.test.ts CHANGED Viewed

@@ -3,7 +3,7 @@
  * scroll lock, and Escape / backdrop dismissal - all inherited from the shared
  * a11y primitives.
  */
-import { describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import { mount, unmount, flushSync } from 'svelte'
 import SvDrawer from './SvDrawer.svelte'
@@ -17,6 +17,16 @@ function mountDrawer(props: Record<string, unknown>) {
 const dialog = () => document.body.querySelector<HTMLElement>('.sv-drawer')
+// Closing plays a 260ms exit keyframe (`is-leaving`) before the panel unmounts,
+// so dismissal assertions have to let that timer run. Fake timers keep it instant.
+const EXIT_MS = 260
+function runExitAnimation() {
+  vi.advanceTimersByTime(EXIT_MS)
+  flushSync()
+}
+afterEach(() => { vi.useRealTimers() })
 describe('SvDrawer', () => {
   it('renders nothing when closed', () => {
     const { destroy } = mountDrawer({ open: false })
@@ -57,12 +67,15 @@ describe('SvDrawer', () => {
   })
   it('closes on Escape and fires onClose', () => {
+    vi.useFakeTimers()
     let closed = 0
     const { destroy } = mountDrawer({ open: true, onClose: () => closed++ })
     try {
       document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
       flushSync()
       expect(closed).toBe(1)
+      expect(dialog()!.classList.contains('is-leaving')).toBe(true) // exit keyframe first
+      runExitAnimation()
       expect(dialog()).toBeNull()
     } finally { destroy() }
   })
@@ -77,11 +90,13 @@ describe('SvDrawer', () => {
   })
   it('dismisses on outside (backdrop) pointerdown', () => {
+    vi.useFakeTimers()
     const { destroy } = mountDrawer({ open: true })
     try {
       const backdrop = document.body.querySelector<HTMLElement>('.sv-drawer__backdrop')!
       backdrop.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true }))
       flushSync()
+      runExitAnimation()
       expect(dialog()).toBeNull()
     } finally { destroy() }
   })
@@ -98,6 +113,7 @@ describe('SvDrawer', () => {
   })
   it('swiping the grab handle down past the threshold closes the sheet', () => {
+    vi.useFakeTimers()
     let closed = 0
     const { destroy } = mountDrawer({ open: true, sheet: true, onClose: () => closed++ })
     try {
@@ -107,6 +123,7 @@ describe('SvDrawer', () => {
       grab.dispatchEvent(new MouseEvent('pointerup', { bubbles: true, clientY: 220 }))
       flushSync()
       expect(closed).toBe(1)
+      runExitAnimation()
       expect(dialog()).toBeNull()
     } finally { destroy() }
   })