@svgrid/grid 2.2.16 → 2.2.17

package/src/SvToaster.svelte

@@ -10,7 +10,7 @@
    * ```
    */
   import { portalToBody } from './popover'
-  import { toastStore, dismissToast, pauseToast, resumeToast, type Toast } from './toast-store.svelte'
+  import { toastStore, dismissToast, pauseToast, resumeToast, type Toast, type ToastAction } from './toast-store.svelte'
 
   type Position =
     | 'top-left' | 'top-center' | 'top-right'
@@ -32,6 +32,12 @@
   // Swipe-to-dismiss: drag a toast sideways past ~60px to dismiss it.
   let drag = $state<{ id: number; startX: number; dx: number } | null>(null)
   function onDown(e: PointerEvent, id: number) {
+    // Only the primary button starts a swipe.
+    if (e.button !== 0) return
+    // Don't hijack presses on the toast's own controls (dismiss X, action /
+    // cancel buttons). Capturing the pointer here would redirect the pointerup
+    // to the toast and swallow the button's click.
+    if (e.target instanceof Element && e.target.closest('button')) return
     drag = { id, startX: e.clientX, dx: 0 }
     ;(e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId)
     pauseToast(id)
@@ -47,6 +53,12 @@
     else resumeToast(id)
   }
   const dragDx = (id: number) => (drag?.id === id ? drag.dx : 0)
+
+  // Run a toast action, then dismiss the toast unless it opted to stay open.
+  function runAction(a: ToastAction, id: number) {
+    a.onClick?.(id)
+    if (!a.keepOpen) dismissToast(id)
+  }
 </script>
 
 <div class="sv-toaster sv-toaster--{position}" use:portalToBody role="region" aria-label="Notifications">
@@ -67,11 +79,25 @@
       onpointerup={() => onUp(t.id)}
       onpointercancel={() => onUp(t.id)}
     >
-      <span class="sv-toast__icon" aria-hidden="true">{icon(t.variant)}</span>
-      <div class="sv-toast__content">
-        {#if t.title}<div class="sv-toast__title">{t.title}</div>{/if}
-        <div class="sv-toast__msg">{t.message}</div>
-      </div>
+      {#if t.render}
+        <div class="sv-toast__content">{@render t.render(t)}</div>
+      {:else}
+        <span class="sv-toast__icon" aria-hidden="true">{icon(t.variant)}</span>
+        <div class="sv-toast__content">
+          {#if t.title}<div class="sv-toast__title">{t.title}</div>{/if}
+          <div class="sv-toast__msg">{t.message}</div>
+          {#if t.action || t.cancel}
+            <div class="sv-toast__actions">
+              {#if t.cancel}
+                <button type="button" class="sv-toast__action sv-toast__action--cancel" onclick={() => runAction(t.cancel!, t.id)}>{t.cancel.label}</button>
+              {/if}
+              {#if t.action}
+                <button type="button" class="sv-toast__action" onclick={() => runAction(t.action!, t.id)}>{t.action.label}</button>
+              {/if}
+            </div>
+          {/if}
+        </div>
+      {/if}
       {#if t.dismissible}
         <button type="button" class="sv-toast__x" aria-label="Dismiss" onclick={() => dismissToast(t.id)}>&times;</button>
       {/if}
@@ -116,6 +142,15 @@
   :global(.sv-toast__content) { flex: 1; min-width: 0; }
   :global(.sv-toast__title) { font-weight: 650; margin-bottom: 1px; }
   :global(.sv-toast__msg) { color: var(--sg-fg, #0f172a); overflow-wrap: anywhere; }
+  :global(.sv-toast__actions) { display: flex; gap: 8px; margin-top: 9px; }
+  :global(.sv-toast__action) {
+    font: inherit; font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 6px;
+    border: 1px solid var(--_accent, var(--sg-accent, #2563eb)); background: none; color: var(--_accent, var(--sg-accent, #2563eb));
+    cursor: pointer;
+  }
+  :global(.sv-toast__action:hover) { background: color-mix(in srgb, var(--_accent, #2563eb) 12%, transparent); }
+  :global(.sv-toast__action--cancel) { border-color: var(--sg-border, #e2e8f0); color: var(--sg-muted, #64748b); }
+  :global(.sv-toast__action--cancel:hover) { background: var(--sg-row-hover-bg, #f1f5f9); color: var(--sg-fg, #0f172a); }
   :global(.sv-toast__x) {
     flex: none; width: 22px; height: 22px; display: grid; place-items: center; margin: -2px -2px 0 0;
     background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 5px; font-size: 17px; line-height: 1;

package/src/SvToaster.test.ts

@@ -47,6 +47,38 @@ describe('SvToaster', () => {
     } finally { destroy() }
   })
 
+  it('clicking the dismiss (x) button removes the toast', () => {
+    const { destroy } = mountToaster()
+    try {
+      toast('Close me', { duration: 0 })
+      flushSync()
+      const x = document.body.querySelector<HTMLButtonElement>('.sv-toast__x')!
+      expect(x).not.toBeNull()
+      x.click()
+      flushSync()
+      expect(toastStore.toasts).toHaveLength(0)
+      expect(toastEl()).toBeNull()
+    } finally { destroy() }
+  })
+
+  it('a press that starts on the dismiss button does not begin a swipe', () => {
+    // The swipe handler must ignore presses on the toast's own controls,
+    // otherwise pointer-capture on the toast swallows the button's click.
+    const { destroy } = mountToaster()
+    try {
+      toast('Keep me', { duration: 0 })
+      flushSync()
+      const el = toastEl()!
+      const x = el.querySelector<HTMLButtonElement>('.sv-toast__x')!
+      x.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, clientX: 100, button: 0 }))
+      el.dispatchEvent(new MouseEvent('pointermove', { bubbles: true, clientX: 240 })) // dx 140 > 60
+      el.dispatchEvent(new MouseEvent('pointerup', { bubbles: true, clientX: 240 }))
+      flushSync()
+      // No swipe was started, so the toast survives (the click path owns dismiss).
+      expect(toastStore.toasts).toHaveLength(1)
+    } finally { destroy() }
+  })
+
   it('a small swipe does not dismiss', () => {
     const { destroy } = mountToaster()
     try {

package/src/SvToggleButton.svelte

@@ -18,6 +18,7 @@
     pressed = false,
     onChange,
     disabled = false,
+    readonly = false,
     size = 'md',
     ariaLabel,
     invalid = false,
@@ -36,7 +37,7 @@
   // The styled toggle is just a renderer over the headless core.
   const t = createToggle({
     pressed: () => pressed,
-    onChange: (v) => onChange?.(v),
+    onChange: (v) => { if (readonly) return; onChange?.(v) },
     disabled: () => disabled,
     ariaLabel: () => ariaLabel,
     id: () => uid,
@@ -52,6 +53,7 @@
     class="sv-toggle sv-toggle--{size}"
     class:is-pressed={pressed}
     class:is-invalid={invalid}
+    class:is-readonly={readonly}
     {...t.buttonProps()}
   >
     {#if children}{@render children()}{/if}
@@ -77,6 +79,7 @@
     background: var(--_accent); color: var(--sg-on-accent, #fff); border-color: var(--_accent);
   }
   .sv-toggle[disabled] { opacity: 0.55; cursor: not-allowed; }
+  .sv-toggle.is-readonly { cursor: default; }
   .sv-toggle.is-invalid { border-color: var(--sg-danger, #dc2626); }
   .sv-toggle:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
 </style>

package/src/SvTooltip.svelte

@@ -1,64 +1,90 @@
 <script lang="ts">
   /**
    * SvTooltip - a small hover/focus tooltip anchored to its child, portalled to
-   * <body> so it is never clipped. Shows after a short delay, hides on leave /
+   * <body> so it is never clipped. Positioned by the shared engine (full placement
+   * matrix + flip + shift + arrow), shows after a short delay, hides on leave /
    * blur / Escape, and is wired via `aria-describedby` (role="tooltip") onto the
    * focusable child itself, so AT users get it announced on focus, not just
    * sighted users on hover.
    *
+   * Set `group` on several tooltips so scanning between them skips the re-delay,
+   * `closeDelay` + `interactive` for a hoverable tip (e.g. one with a link).
+   *
    * ```svelte
    * <SvTooltip text="Delete row"><button aria-label="Delete">🗑</button></SvTooltip>
    * ```
    */
   import type { Snippet } from 'svelte'
   import { portalToBody, popIn } from './popover'
+  import { computePosition, autoUpdate, type Placement, type ComputePositionResult } from './positioning'
   import { getFocusable } from './a11y/focus-trap'
   import { createTooltip } from './createTooltip.svelte'
 
   type Props = {
     text: string
-    placement?: 'top' | 'bottom'
+    /** Preferred placement; flips when there is no room. Default `top`. */
+    placement?: Placement
     /** Show delay in ms. Default 300. */
     delay?: number
+    /** Hide delay in ms after leave (give it room for an interactive tip). Default 0. */
+    closeDelay?: number
+    /** Delay-group id: grouped tooltips open instantly while the group is warm. */
+    group?: string
+    /** Let the pointer move onto the tip without closing it (e.g. a tip with a link). */
+    interactive?: boolean
     disabled?: boolean
     children?: Snippet
   }
 
-  let { text, placement = 'top', delay = 300, disabled = false, children }: Props = $props()
+  let {
+    text,
+    placement = 'top',
+    delay = 300,
+    closeDelay = 0,
+    group,
+    interactive = false,
+    disabled = false,
+    children,
+  }: Props = $props()
+
+  const ARROW = 8
 
   let anchorEl = $state<HTMLSpanElement | null>(null)
   let tipEl = $state<HTMLDivElement | null>(null)
-  let pos = $state({ top: 0, left: 0, arrowX: 12 })
+  let pos = $state<ComputePositionResult>({
+    x: 0, y: 0, placement, side: 'top', align: 'center', maxWidth: 0, maxHeight: 0, arrow: { x: 12 },
+  })
 
-  // Open state, show-delay and Escape-to-hide live in the shared headless core;
-  // this component owns only the DOM concerns (positioning + describedby merge).
-  const tip = createTooltip({ text: () => text, disabled: () => disabled, delay: () => delay })
+  // Open state, show/close delay, delay-group and Escape-to-hide live in the
+  // shared headless core; this component owns only the DOM concerns (positioning
+  // + describedby merge). Interactive tips get a small closeDelay by default so
+  // the pointer can travel from anchor to tip.
+  const tip = createTooltip({
+    text: () => text,
+    disabled: () => disabled,
+    delay: () => delay,
+    closeDelay: () => (closeDelay || (interactive ? 120 : 0)),
+    group: () => group,
+  })
   const tid = tip.tipId
 
   function place() {
     if (!anchorEl) return
     const r = anchorEl.getBoundingClientRect()
-    const tipH = tipEl?.offsetHeight ?? 30
-    const tipW = tipEl?.offsetWidth ?? 0
-    const top = placement === 'top' ? r.top - tipH - 8 : r.bottom + 8
-    let left = r.left + r.width / 2 - tipW / 2
-    left = Math.max(4, Math.min(left, window.innerWidth - tipW - 4))
-    // Keep the arrow under the anchor's center even when the tip is clamped.
-    const arrowX = Math.max(10, Math.min(tipW - 10, r.left + r.width / 2 - left))
-    pos = { top, left, arrowX }
+    const floating = { width: tipEl?.offsetWidth || 0, height: tipEl?.offsetHeight || 30 }
+    pos = computePosition(
+      { x: r.left, y: r.top, width: r.width, height: r.height },
+      floating,
+      { placement, offset: 8, padding: 4, arrow: { size: ARROW } },
+    )
   }
 
-  // Reposition while open (and on scroll/resize). Escape-to-hide is the core's.
+  // Reposition while open (measure the tip after it mounts, then keep in sync).
   $effect(() => {
-    if (!tip.open) return
+    if (!tip.open || !anchorEl || !tipEl) return
     queueMicrotask(place)
-    const rp = () => place()
-    window.addEventListener('scroll', rp, true)
-    window.addEventListener('resize', rp)
-    return () => {
-      window.removeEventListener('scroll', rp, true)
-      window.removeEventListener('resize', rp)
-    }
+    const stop = autoUpdate(anchorEl, tipEl, place)
+    return () => stop()
   })
 
   // The wrapper span above is never itself Tab-focusable, so putting
@@ -98,15 +124,18 @@
   <div
     bind:this={tipEl}
     id={tid}
-    class="sv-tip"
+    class="sv-tip sv-tip--{pos.side}"
+    class:sv-tip--interactive={interactive}
     role="tooltip"
     use:portalToBody
-    use:popIn={{ up: placement === 'top', duration: 110, scale: 0.9 }}
-    class:sv-tip--bottom={placement === 'bottom'}
+    use:popIn={{ up: pos.side === 'top', duration: 110, scale: 0.9 }}
     style:position="fixed"
-    style:top={`${pos.top}px`}
-    style:left={`${pos.left}px`}
-    style:--tip-arrow-x={`${pos.arrowX}px`}
+    style:top={`${pos.y}px`}
+    style:left={`${pos.x}px`}
+    style:--tip-arrow-x={pos.arrow?.x != null ? `${pos.arrow.x}px` : undefined}
+    style:--tip-arrow-y={pos.arrow?.y != null ? `${pos.arrow.y}px` : undefined}
+    onpointerenter={interactive ? tip.keepOpen : undefined}
+    onpointerleave={interactive ? tip.scheduleHide : undefined}
   >{text}<span class="sv-tip__arrow" aria-hidden="true"></span></div>
 {/if}
 
@@ -118,10 +147,15 @@
     background: var(--sg-fg, #0f172a); color: var(--sg-bg, #fff);
     border-radius: 6px; box-shadow: 0 6px 20px -6px rgba(15, 23, 42, 0.5); white-space: normal;
   }
+  :global(.sv-tip--interactive) { pointer-events: auto; }
   :global(.sv-tip__arrow) {
-    position: absolute; inset-inline-start: var(--tip-arrow-x, 12px); width: 8px; height: 8px;
-    background: var(--sg-fg, #0f172a); transform: translateX(-50%) rotate(45deg);
+    position: absolute; width: 8px; height: 8px;
+    background: var(--sg-fg, #0f172a); transform: rotate(45deg);
   }
-  :global(.sv-tip:not(.sv-tip--bottom) .sv-tip__arrow) { bottom: -3px; }
-  :global(.sv-tip--bottom .sv-tip__arrow) { top: -3px; }
+  /* Arrow sits on the edge facing the anchor. top/bottom use --tip-arrow-x,
+     left/right use --tip-arrow-y. */
+  :global(.sv-tip--top .sv-tip__arrow) { bottom: -3px; inset-inline-start: var(--tip-arrow-x, 12px); }
+  :global(.sv-tip--bottom .sv-tip__arrow) { top: -3px; inset-inline-start: var(--tip-arrow-x, 12px); }
+  :global(.sv-tip--left .sv-tip__arrow) { right: -3px; top: var(--tip-arrow-y, 12px); }
+  :global(.sv-tip--right .sv-tip__arrow) { left: -3px; top: var(--tip-arrow-y, 12px); }
 </style>

package/src/SvTree.svelte

@@ -13,9 +13,10 @@
    * `createTree` core; this component renders it, and owns the DOM concerns
    * (windowing, focus, and merging lazily-loaded children into the node tree).
    */
-  import { tick, flushSync } from 'svelte'
+  import { tick, untrack } from 'svelte'
   import { type EditorDir } from './editor-contract'
-  import { virtualRange, scrollToIndex } from './virtual'
+  import { createSvelteVirtualizer } from './virtualization/svelte-virtualizer.svelte'
+  import { createJsScroller } from './js-scroller.svelte'
   import { createTree, sortTreeNodes, type TreeNode, type TreeDropPosition } from './createTree.svelte'
 
   type Props = {
@@ -35,8 +36,9 @@
     dir?: EditorDir
     /** Window rows (render only visible) - for large trees. Needs `height`. */
     virtual?: boolean
-    /** Fixed row height in px (must match the CSS). Default 30. */
-    rowHeight?: number
+    /** Row height in px - a number, or a per-node function for variable
+     *  heights. Must match the rendered row height. Default 30. */
+    rowHeight?: number | ((node: TreeNode, index: number) => number)
     /** Scroll-viewport height in px. Enables scrolling (required for `virtual`). */
     height?: number
     /** Load a lazy node's children on first expand (node has `lazy: true`). */
@@ -197,14 +199,58 @@
   })
 
   // --- Virtualization ---------------------------------------------------------
+  // Windowing runs on the shared `createSvelteVirtualizer` (cumulative offsets +
+  // binary search + variable-size support). Rows stay keyed by node id (NOT slot
+  // recycling): a tree row carries per-row identity - an in-progress inline
+  // rename, an active drag, roving focus - that must stay pinned to its node
+  // while scrolling. The engine only supplies the window + each row's offset.
   const scrollable = $derived(virtual || height != null)
   let treeEl = $state<HTMLDivElement | null>(null)
-  let scrollTop = $state(0)
   let viewportH = $state(0)
-  const vr = $derived(
-    virtualRange({ scrollTop, viewportHeight: viewportH, rowHeight, count: tree.rows.length, overscan: 10 }),
+  const rowHeightBase = $derived(typeof rowHeight === 'number' ? rowHeight : 30)
+  const uniform = $derived(typeof rowHeight === 'number')
+  const rowSize = (i: number) => {
+    const r = tree.rows[i]
+    return r ? (typeof rowHeight === 'function' ? rowHeight(r.node, i) : rowHeight) : rowHeightBase
+  }
+
+  const estimateSize = $derived(uniform ? rowHeightBase : (i: number) => rowSize(i))
+  // Generous overscan buffers fast flings; effective viewport never 0 (see SvListBox).
+  const OVERSCAN = 20
+  const effViewport = $derived(viewportH > 0 ? viewportH : Math.max(1, height ?? 320))
+  // Seed with the initial (untracked) values so the first paint renders a full window.
+  const virtualizer = createSvelteVirtualizer(
+    untrack(() => ({ count: tree.rows.length, estimateSize, overscan: OVERSCAN, viewportHeight: effViewport })),
   )
-  const visibleRows = $derived(virtual ? tree.rows.slice(vr.start, vr.end) : tree.rows)
+  // untrack keeps the virtualizer's internal `version` write out of these
+  // effects' dependencies, so they re-run only on their real inputs.
+  $effect(() => {
+    const count = tree.rows.length
+    const es = estimateSize
+    untrack(() => virtualizer.setOptions({ count, estimateSize: es }))
+  })
+  $effect(() => {
+    const vh = effViewport
+    untrack(() => virtualizer.setViewportHeight(vh))
+  })
+  const totalSize = $derived.by(() => { virtualizer.version; return virtualizer.getTotalSize() })
+  const visibleRows = $derived.by(() => {
+    if (!virtual) return tree.rows
+    virtualizer.version
+    const st = virtualizer.getState()
+    return tree.rows.slice(st.startIndex, st.endIndex + 1)
+  })
+  const rowTop = (i: number) => virtualizer.getOffsetForIndex(i)
+  const rowHeightPx = (i: number) => (virtual ? virtualizer.getSizeForIndex(i) : rowSize(i))
+
+  // JS-driven scroll for virtual mode (see js-scroller): no native scroll, so a
+  // fast thumb-drag never flashes an empty tree.
+  const scroller = createJsScroller({
+    virtualizer,
+    totalSize: () => totalSize,
+    viewport: () => effViewport,
+    lineStep: () => rowHeightBase,
+  })
 
   // Follow the core's roving focus row; scroll it into view first when windowed.
   let lastFocusTick = 0
@@ -212,10 +258,7 @@
     if (tree.focusTick === lastFocusTick) return
     lastFocusTick = tree.focusTick
     const i = tree.activeIndex
-    if (virtual && treeEl) {
-      const next = scrollToIndex(i, scrollTop, treeEl.clientHeight, rowHeight)
-      if (next !== scrollTop) { treeEl.scrollTop = next; scrollTop = next }
-    }
+    if (virtual) untrack(() => scroller.ensureIndexVisible(i))
     tick().then(() => treeEl?.querySelector<HTMLElement>(`[data-row="${i}"]`)?.focus())
   })
 </script>
@@ -228,25 +271,35 @@
     {#if query}<button type="button" class="sv-tree__search-clear" aria-label="Clear search" onclick={() => (query = '')}>&times;</button>{/if}
   </div>
 {/if}
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
   bind:this={treeEl}
   class="sv-tree"
-  class:sv-tree--scroll={scrollable}
+  class:sv-tree--scroll={scrollable && !virtual}
   class:is-virtual={virtual}
   dir={resolvedDir}
   style:height={height != null ? `${height}px` : undefined}
-  onscroll={scrollable ? (e) => { scrollTop = e.currentTarget.scrollTop; if (virtual) flushSync() } : undefined}
+  onwheel={virtual ? scroller.onWheel : undefined}
+  onpointerdown={virtual ? scroller.onContentDown : undefined}
+  onpointermove={virtual ? scroller.onContentMove : undefined}
+  onpointerup={virtual ? scroller.onContentUp : undefined}
+  onpointercancel={virtual ? scroller.onContentUp : undefined}
   bind:clientHeight={viewportH}
   {...tree.treeProps()}
 >
-  {#if virtual}<div class="sv-tree__sizer" aria-hidden="true" style:height={`${vr.totalHeight}px`}></div>{/if}
   {#each visibleRows as item (item.node.id)}
     {@render treeRow(item)}
   {/each}
+  {#if virtual && scroller.maxOffset > 0}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="sv-tree__sb" onpointerdown={scroller.onTrackDown} aria-hidden="true">
+      <div class="sv-tree__thumb" class:is-dragging={scroller.dragging} style:height={`${scroller.thumbH}px`} style:transform={`translateY(${scroller.thumbTop}px)`} onpointerdown={scroller.onThumbDown} onpointermove={scroller.onThumbMove} onpointerup={scroller.onThumbUp} onpointercancel={scroller.onThumbUp}></div>
+    </div>
+  {/if}
 </div>
 </div>
 
-{#snippet treeRow(item)}
+{#snippet treeRow(item: (typeof tree.rows)[number])}
   {@const cs = checkable ? tree.checkStateOf(item.node) : 'unchecked'}
   {@const isLoading = loadingIds.has(item.node.id)}
   {@const rowProps = tree.itemProps(item)}
@@ -258,9 +311,9 @@
     class:drop-before={dropId === item.node.id && dropPos === 'before'}
     class:drop-after={dropId === item.node.id && dropPos === 'after'}
     class:drop-inside={dropId === item.node.id && dropPos === 'inside'}
-    style:height={`${rowHeight}px`}
+    style:height={`${rowHeightPx(item.index)}px`}
     style:padding-inline-start={`${item.depth * 18 + 6}px`}
-    style:transform={virtual ? `translateY(${item.index * rowHeight}px)` : undefined}
+    style:transform={virtual ? `translateY(${rowTop(item.index) - scroller.scrollOffset}px)` : undefined}
     draggable={reorderable && editingId !== item.node.id && !item.node.disabled}
     ondragstart={reorderable ? (e) => onRowDragStart(e, item.node) : undefined}
     ondragover={reorderable ? (e) => onRowDragOver(e, item.node) : undefined}
@@ -329,10 +382,17 @@
     border: 1px solid var(--sg-border, #e2e8f0); border-radius: var(--sg-radius, 8px);
     font-size: 13px;
   }
-  .sv-tree--scroll { overflow-y: auto; }
-  .sv-tree.is-virtual { position: relative; will-change: scroll-position; }
-  .sv-tree__sizer { padding: 0; margin: 0; pointer-events: none; }
+  /* Non-virtual (height-capped) tree uses native scroll. */
+  .sv-tree--scroll { overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; }
+  /* Virtual tree: JS-driven, no native scroll - rows are moved by `scrollOffset`. */
+  .sv-tree.is-virtual { position: relative; overflow: hidden; touch-action: none; }
   .sv-tree.is-virtual .sv-tree__row { position: absolute; inset-inline: 4px; top: 4px; }
+  .sv-tree__sb { position: absolute; top: 4px; right: 2px; bottom: 4px; width: 10px; z-index: 2; }
+  .sv-tree__thumb {
+    position: absolute; left: 2px; right: 2px; top: 0; min-height: 24px; border-radius: 4px;
+    background: color-mix(in srgb, currentColor 26%, transparent); cursor: default; touch-action: none;
+  }
+  .sv-tree__thumb:hover, .sv-tree__thumb.is-dragging { background: color-mix(in srgb, currentColor 42%, transparent); }
   .sv-tree__row {
     display: flex; align-items: center; gap: 4px; box-sizing: border-box; padding-inline-end: 8px;
     border-radius: 6px; cursor: pointer; outline: none;

package/src/SvTreeSelect.svelte

@@ -20,7 +20,7 @@
 
   type Props = Pick<
     SvEditorProps,
-    'disabled' | 'label' | 'hint' | 'error' | 'required' | 'invalid' | 'size' | 'id' | 'name' | 'dir' | 'ariaLabel'
+    'disabled' | 'readonly' | 'label' | 'hint' | 'error' | 'required' | 'invalid' | 'size' | 'id' | 'name' | 'dir' | 'ariaLabel' | 'loading'
   > & {
     nodes: ReadonlyArray<TreeSelectNode>
     value?: string | number | null
@@ -42,6 +42,7 @@
     showPath = false,
     expandedIds = [],
     disabled = false,
+    readonly = false,
     label,
     hint,
     error,
@@ -52,6 +53,7 @@
     name,
     dir,
     ariaLabel,
+    loading = false,
   }: Props = $props()
 
   const autoId = nextEditorId('sv-ts')
@@ -94,6 +96,7 @@
   const ts = createPopoverSelect({
     itemCount: () => rows.length,
     disabled: (i) => !!rows[i]?.node.disabled,
+    readonly: () => readonly,
     onSelect: (i) => { const row = rows[i]; if (row) onRowClick(row) },
     getTrigger: () => triggerEl,
     getPanel: () => panelEl,
@@ -127,7 +130,7 @@
   })
 </script>
 
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
+<SvField id={uid} {label} {hint} {error} {required} {dir} {loading}>
   <div class="sv-ts sv-ts--{size}" class:is-disabled={disabled}>
     <button
       bind:this={triggerEl}

package/src/SvVisuallyHidden.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  /**
+   * SvVisuallyHidden - content available to screen readers but visually hidden
+   * (the accessible "sr-only" pattern). Use for extra context on icon-only
+   * controls, live-region text, and skip links (which become visible on focus
+   * via `focusable`).
+   *
+   * <button><Icon /><SvVisuallyHidden>Delete row</SvVisuallyHidden></button>
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    /** Reveal the content when it (or a child) receives focus - for skip links. */
+    focusable?: boolean
+    /** Element/tag to render. */
+    as?: string
+    children?: Snippet
+  }
+
+  let { focusable = false, as = 'span', children }: Props = $props()
+</script>
+
+<svelte:element this={as} class="sv-vh" class:is-focusable={focusable}>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .sv-vh {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+  }
+  .sv-vh.is-focusable:focus,
+  .sv-vh.is-focusable:focus-within {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+</style>