@svgrid/grid 2.1.21 → 2.1.23

package/src/SvDrawer.svelte

@@ -15,11 +15,10 @@
    * ```
    */
   import type { Snippet } from 'svelte'
+  import { untrack } from 'svelte'
   import { portalToBody } from './popover'
   import { nextEditorId } from './editor-contract'
-  import { createFocusTrap } from './a11y/focus-trap'
-  import { lockScroll } from './a11y/scroll-lock'
-  import { createDismissableLayer } from './a11y/dismissable'
+  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). */
@@ -43,6 +42,10 @@
     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
   }
@@ -58,6 +61,7 @@
     hideClose = false,
     sheet = false,
     ariaLabel,
+    onClosed,
     children,
     footer,
   }: Props = $props()
@@ -72,6 +76,31 @@
 
   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)
@@ -93,41 +122,28 @@
     else dragY = 0
   }
 
-  // Focus trap + scroll lock + Escape/backdrop dismissal, all from the shared
-  // primitives - one tested implementation across every dialog-like overlay.
-  $effect(() => {
-    if (!open || !dialogEl) return
-    dragY = 0
-    const trap = createFocusTrap(dialogEl)
-    trap.activate()
-    const unlockScroll = lockScroll()
-    const layer = createDismissableLayer({
-      element: () => dialogEl,
-      onDismiss: (reason) => {
-        if (reason === 'escape' ? closeOnEsc : closeOnBackdrop) close()
-      },
-    })
-    layer.activate()
-    return () => {
-      layer.release()
-      unlockScroll()
-      trap.release()
-    }
+  // 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 open}
-  <div class="sv-drawer__backdrop" use:portalToBody>
+{#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}
-      role="dialog"
-      aria-modal="true"
-      aria-label={!title ? ariaLabel : undefined}
-      aria-labelledby={title ? titleId : undefined}
-      tabindex="-1"
+      {...overlay.dialogProps({ labelledBy: title ? titleId : undefined, label: !title ? ariaLabel : undefined })}
       style:--sv-drawer-size={sizeVar}
       style:transform={sheet && dragY ? `translateY(${dragY}px)` : undefined}
     >
@@ -160,9 +176,11 @@
   :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-fade 0.16s ease both;
+    animation: sv-drawer-bd-in 0.2s ease backwards;
   }
-  @keyframes sv-drawer-fade { from { opacity: 0 } to { opacity: 1 } }
+  :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;
@@ -170,44 +188,48 @@
     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;
   }
-  /* Left / right: full height, fixed width, slide along X. `side` is a stated
-     physical edge (like SvToaster's position prop), not a text-flow-relative
+  /* 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); animation: sv-drawer-in-right 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }
-  :global(.sv-drawer--left) { left: 0; border-right: 1px solid var(--sg-border, #e2e8f0); animation: sv-drawer-in-left 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }
+  :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); animation: sv-drawer-in-top 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }
-  :global(.sv-drawer--bottom) { bottom: 0; border-top: 1px solid var(--sg-border, #e2e8f0); animation: sv-drawer-in-bottom 0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }
+  :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. */
+  /* 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;
-    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
   }
-  :global(.sv-drawer.is-sheet.is-dragging) { transition: none; }
+  /* 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);
   }
-
-  @keyframes sv-drawer-in-right { from { transform: translateX(100%) } to { transform: translateX(0) } }
-  @keyframes sv-drawer-in-left { from { transform: translateX(-100%) } to { transform: translateX(0) } }
-  @keyframes sv-drawer-in-top { from { transform: translateY(-100%) } to { transform: translateY(0) } }
-  @keyframes sv-drawer-in-bottom { from { transform: translateY(100%) } to { transform: translateY(0) } }
   @media (prefers-reduced-motion: reduce) {
-    :global(.sv-drawer__backdrop), :global(.sv-drawer) { animation: none }
+    :global(.sv-drawer__backdrop), :global(.sv-drawer__backdrop.is-leaving),
+    :global(.sv-drawer), :global(.sv-drawer.is-leaving) { animation: none; }
   }
 
   :global(.sv-drawer__header) {

package/src/SvDropDownList.svelte

@@ -7,8 +7,8 @@
    * One styled renderer over the headless `createDropdownList` core (state +
    * keyboard + ARIA); only portal/measure/scroll render concerns live here.
    */
-  import { flushSync } from 'svelte'
   import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
+  import { startPanelResize } from './panel-resize'
   import { createDismissableLayer } from './a11y/dismissable'
   import { groupOptions, hasGroups, type ListOption } from './list-option'
   import { virtualRange, scrollToIndex } from './virtual'
@@ -26,6 +26,9 @@
     virtual?: boolean
     /** Fixed option height in px (must match the CSS). Default 34. */
     rowHeight?: number
+    /** Show a bottom drag grip so the user can resize the open panel's height
+     *  (only while it opens downward). Off by default. */
+    resizable?: boolean
   }
 
   let {
@@ -47,6 +50,7 @@
     autoOpen = false,
     virtual = false,
     rowHeight = 34,
+    resizable = false,
   }: Props = $props()
 
   const autoId = nextEditorId('sv-ddl')
@@ -61,7 +65,15 @@
 
   let triggerEl = $state<HTMLButtonElement | null>(null)
   let panelEl = $state<HTMLDivElement | null>(null)
-  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false })
+  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
+  // User-chosen panel height (px) once they drag the resize grip; null = auto.
+  let userHeight = $state<number | null>(null)
+  // Effective height cap: the user's drag if any (clamped to the viewport
+  // ceiling), otherwise the comfortable bounds-aware height.
+  const panelMaxH = $derived(
+    resizable && userHeight != null ? Math.min(userHeight, rect.availHeight) : rect.maxHeight,
+  )
+  const showGrip = $derived(resizable && !rect.openUpward)
 
   const ddl = createDropdownList({
     options: () => options,
@@ -81,7 +93,24 @@
 
   function updatePos() {
     if (!triggerEl) return
-    rect = anchoredRect(triggerEl.getBoundingClientRect(), { estimatedHeight: Math.min(options.length, 8) * 34 + 8 })
+    // When the user has resized, anchor to THAT height so the flip decision and
+    // upward top stay correct; otherwise estimate from the option count.
+    const estimatedHeight =
+      resizable && userHeight != null ? userHeight : Math.min(options.length, 8) * 34 + 8
+    rect = anchoredRect(triggerEl.getBoundingClientRect(), { estimatedHeight })
+  }
+
+  function startResize(e: PointerEvent) {
+    if (!panelEl) return
+    startPanelResize(e, {
+      startHeight: panelEl.clientHeight,
+      min: 96,
+      max: () => rect.availHeight,
+      onHeight: (h) => {
+        userHeight = h
+        updatePos()
+      },
+    })
   }
 
   $effect(() => {
@@ -126,19 +155,20 @@
     {...ddl.triggerProps()}
     use:focusOpen
   >
-    <span class="sv-ddl__value" class:is-placeholder={!selected}>{selected?.label ?? placeholder}</span>
+    <span class="sv-ddl__value" class:is-placeholder={!selected}>{#if selected?.color}<span class="sv-ddl__swatch" style:background={selected.color}></span>{/if}{selected?.label ?? placeholder}</span>
     <svg class="sv-ddl__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>
   </button>
 </SvField>
 
 {#if ddl.open}
-  <div bind:this={panelEl} class="sv-ddl__panel" class:is-virtual={useVirtual} 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`} onscroll={(e) => { scrollTop = e.currentTarget.scrollTop; if (useVirtual) flushSync() }} bind:clientHeight={viewportH} {...ddl.listboxProps()}>
+  <div bind:this={panelEl} class="sv-ddl__panel" class:is-virtual={useVirtual} class:is-resizable={showGrip} use:portalToBody use:popIn={{ up: rect.openUpward }} style:--sv-row-h={`${rowHeight}px`} style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} style:max-height={`${panelMaxH}px`} style:height={resizable && userHeight != null ? `${panelMaxH}px` : undefined} onscroll={(e) => (scrollTop = e.currentTarget.scrollTop)} bind:clientHeight={viewportH} {...ddl.listboxProps()}>
     {#if useVirtual}
-      <div class="sv-ddl__sizer" aria-hidden="true" style:height={`${vr.totalHeight}px`}></div>
+      <div class="sv-ddl__spacer" aria-hidden="true" style:height={`${vr.padTop}px`}></div>
       {#each windowed as opt (opt.value)}
         <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
-        <div class="sv-ddl__opt sv-ddl__opt--abs" style:height={`${rowHeight}px`} style:transform={`translateY(${opt.index * rowHeight}px)`} class:is-active={ddl.isActive(opt.index)} class:is-selected={ddl.isSelected(opt)} class:is-disabled={opt.disabled} {...ddl.optionProps(opt.index)}>{opt.label}</div>
+        <div class="sv-ddl__opt" style:height={`${rowHeight}px`} class:is-active={ddl.isActive(opt.index)} class:is-selected={ddl.isSelected(opt)} class:is-disabled={opt.disabled} {...ddl.optionProps(opt.index)}>{#if opt.color}<span class="sv-ddl__swatch" style:background={opt.color}></span>{/if}{opt.label}</div>
       {/each}
+      <div class="sv-ddl__spacer" aria-hidden="true" style:height={`${vr.padBottom}px`}></div>
     {:else}
     {#each groupOptions(options) as g (g.group ?? '')}
       {#if g.group != null}
@@ -146,17 +176,23 @@
           <div class="sv-ddl__group-label" aria-hidden="true">{g.group}</div>
           {#each g.options as opt (opt.value)}
             <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
-            <div class="sv-ddl__opt" class:is-active={ddl.isActive(opt.index)} class:is-selected={ddl.isSelected(opt)} class:is-disabled={opt.disabled} {...ddl.optionProps(opt.index)}>{opt.label}</div>
+            <div class="sv-ddl__opt" class:is-active={ddl.isActive(opt.index)} class:is-selected={ddl.isSelected(opt)} class:is-disabled={opt.disabled} {...ddl.optionProps(opt.index)}>{#if opt.color}<span class="sv-ddl__swatch" style:background={opt.color}></span>{/if}{opt.label}</div>
           {/each}
         </div>
       {:else}
         {#each g.options as opt (opt.value)}
           <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
-          <div class="sv-ddl__opt" class:is-active={ddl.isActive(opt.index)} class:is-selected={ddl.isSelected(opt)} class:is-disabled={opt.disabled} {...ddl.optionProps(opt.index)}>{opt.label}</div>
+          <div class="sv-ddl__opt" class:is-active={ddl.isActive(opt.index)} class:is-selected={ddl.isSelected(opt)} class:is-disabled={opt.disabled} {...ddl.optionProps(opt.index)}>{#if opt.color}<span class="sv-ddl__swatch" style:background={opt.color}></span>{/if}{opt.label}</div>
         {/each}
       {/if}
     {/each}
     {/if}
+    {#if showGrip}
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div class="sv-ddl__grip" onpointerdown={startResize} title="Drag to resize" aria-hidden="true">
+        <span class="sv-ddl__grip-dots"></span>
+      </div>
+    {/if}
   </div>
 {/if}
 {#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
@@ -181,14 +217,50 @@
   .sv-ddl__chev { color: var(--sg-muted, #64748b); flex: none; }
 
   :global(.sv-ddl__panel) {
-    z-index: 2147483647; max-height: 288px; overflow-y: auto; padding: 4px;
+    box-sizing: border-box; z-index: 2147483647; max-height: 288px; overflow-y: auto; padding: 4px;
     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);
   }
   :global(.sv-ddl__opt) { box-sizing: border-box; display: flex; align-items: center; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
-  :global(.sv-ddl__panel.is-virtual) { position: fixed; will-change: scroll-position; }
-  :global(.sv-ddl__sizer) { padding: 0; margin: 0; pointer-events: none; }
-  :global(.sv-ddl__opt--abs) { position: absolute; inset-inline: 4px; top: 4px; }
+  /* Color swatch shown before an option's label (option.color) - in both the
+     trigger value and the portalled panel options. */
+  :global(.sv-ddl__swatch) {
+    display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px;
+    margin-inline-end: 8px; vertical-align: middle;
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 18%, transparent);
+  }
+  /* Bottom resize grip: a row of dots ("····") the user drags to resize the
+     panel. Sticky so it stays pinned at the panel's bottom while options scroll. */
+  :global(.sv-ddl__panel.is-resizable) { padding-bottom: 0; }
+  :global(.sv-ddl__grip) {
+    position: sticky; bottom: 0; z-index: 1; margin: 2px -4px -4px; height: 15px;
+    display: flex; align-items: center; justify-content: center; cursor: ns-resize;
+    background: var(--sg-bg, #fff); border-top: 1px solid var(--sg-border, #e2e8f0);
+    border-radius: 0 0 10px 10px; touch-action: none;
+  }
+  :global(.sv-ddl__grip-dots) {
+    width: 26px; height: 4px; color: var(--sg-muted, #94a3b8); opacity: 0.6;
+    background-image: radial-gradient(currentColor 1px, transparent 1.6px);
+    background-size: 6px 4px; background-position: center; background-repeat: repeat-x;
+  }
+  :global(.sv-ddl__grip:hover .sv-ddl__grip-dots) { opacity: 1; }
+  /* Faint per-row skeleton so a fast scrollbar-thumb drag reveals placeholder
+     rows in this off-screen padding instead of blank, until JS re-windows. */
+  :global(.sv-ddl__spacer) {
+    padding: 0; margin: 0; flex: none; pointer-events: none;
+    background-image: linear-gradient(
+      to bottom,
+      transparent 0,
+      transparent calc((var(--sv-row-h, 34px) - 10px) / 2),
+      var(--sg-skeleton, color-mix(in srgb, currentColor 9%, transparent)) calc((var(--sv-row-h, 34px) - 10px) / 2),
+      var(--sg-skeleton, color-mix(in srgb, currentColor 9%, transparent)) calc((var(--sv-row-h, 34px) + 10px) / 2),
+      transparent calc((var(--sv-row-h, 34px) + 10px) / 2),
+      transparent var(--sv-row-h, 34px)
+    );
+    background-size: 62% var(--sv-row-h, 34px);
+    background-repeat: repeat-y;
+    background-position: 12px 0;
+  }
   :global(.sv-ddl__opt.is-active) { background: var(--sg-row-hover-bg, #f1f5f9); }
   :global(.sv-ddl__opt.is-selected) { color: var(--sg-accent, #2563eb); font-weight: 600; }
   :global(.sv-ddl__opt.is-disabled) { opacity: 0.4; cursor: not-allowed; }

package/src/SvField.svelte

@@ -26,6 +26,8 @@
     dir,
     /** Stretch the field (and its control) to the container width. */
     block = false,
+    /** Busy state - shows a small spinner beside the label. */
+    loading = false,
     children,
   }: {
     id?: string
@@ -35,6 +37,7 @@
     required?: boolean
     dir?: EditorDir
     block?: boolean
+    loading?: boolean
     children: Snippet
   } = $props()
 
@@ -43,10 +46,15 @@
 </script>
 
 <div class="sv-field" class:sv-field--block={block} dir={resolvedDir}>
-  {#if label}
-    <label class="sv-field__label" for={id}>
-      {label}{#if required}<span class="sv-field__req" aria-hidden="true">*</span>{/if}
-    </label>
+  {#if label || loading}
+    <span class="sv-field__labelrow">
+      {#if label}
+        <label class="sv-field__label" for={id}>
+          {label}{#if required}<span class="sv-field__req" aria-hidden="true">*</span>{/if}
+        </label>
+      {/if}
+      {#if loading}<span class="sv-field__spinner" role="status" aria-label="Loading"></span>{/if}
+    </span>
   {/if}
   {@render children()}
   {#if error}
@@ -64,12 +72,21 @@
     text-align: start;
   }
   .sv-field--block { display: flex; width: 100%; }
+  .sv-field__labelrow { display: inline-flex; align-items: center; gap: 6px; }
   .sv-field__label {
     font-size: 12.5px;
     font-weight: 550;
     color: var(--sg-fg, #0f172a);
     line-height: 1.3;
   }
+  .sv-field__spinner {
+    width: 12px; height: 12px; flex: none; border-radius: 50%;
+    border: 2px solid color-mix(in srgb, var(--sg-accent, #2563eb) 30%, transparent);
+    border-top-color: var(--sg-accent, #2563eb);
+    animation: sv-field-spin 0.6s linear infinite;
+  }
+  @keyframes sv-field-spin { to { transform: rotate(360deg); } }
+  @media (prefers-reduced-motion: reduce) { .sv-field__spinner { animation: none; } }
   .sv-field__req { color: var(--sg-danger, #dc2626); margin-inline-start: 2px; }
   .sv-field__hint {
     font-size: 11.5px;