@svgrid/grid 2.1.22 → 2.2.0

package/src/SvScrollArea.svelte

@@ -1,61 +1,61 @@
-<script lang="ts">
-  /**
-   * SvScrollArea - a scroll container with the kit's themed custom scrollbars
-   * (Firefox `scrollbar-color` + Chromium `::-webkit-scrollbar`) consuming the
-   * `--sg-scrollbar-*` tokens, so any panel matches the grid/demos without
-   * hand-rolling scrollbar CSS. The fallbacks derive from `--sg-fg` so it also
-   * adapts to light/dark when no preset defines the tokens.
-   *
-   * ```svelte
-   * <SvScrollArea maxHeight="240px">…long content…</SvScrollArea>
-   * ```
-   */
-  import type { Snippet } from 'svelte'
-
-  type Props = {
-    maxHeight?: string
-    height?: string
-    /** Scroll horizontally instead of vertically. */
-    horizontal?: boolean
-    /** Accessible name for the scrollable region, announced by screen readers. */
-    ariaLabel?: string
-    children?: Snippet
-  }
-
-  let { maxHeight, height, horizontal = false, ariaLabel = 'Scrollable content', children }: Props = $props()
-</script>
-
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<div
-  class="sv-scroll"
-  class:is-x={horizontal}
-  style:max-height={maxHeight}
-  style:height={height}
-  tabindex="0"
-  role="region"
-  aria-label={ariaLabel}
->
-  {@render children?.()}
-</div>
-
-<style>
-  .sv-scroll {
-    overflow: auto; overscroll-behavior: contain; min-height: 0;
-    scrollbar-width: thin;
-    scrollbar-color: var(--sg-scrollbar-thumb, color-mix(in srgb, var(--sg-fg, #0f172a) 26%, transparent)) var(--sg-scrollbar-bg, transparent);
-  }
-  .sv-scroll.is-x { overflow: auto hidden; }
-  .sv-scroll::-webkit-scrollbar { width: 12px; height: 12px; }
-  .sv-scroll::-webkit-scrollbar-track {
-    background: var(--sg-scrollbar-bg, transparent);
-    box-shadow: inset 1px 0 0 0 var(--sg-scrollbar-border, transparent);
-  }
-  .sv-scroll::-webkit-scrollbar-thumb {
-    background: var(--sg-scrollbar-thumb, color-mix(in srgb, var(--sg-fg, #0f172a) 26%, transparent));
-    border-radius: var(--sg-scrollbar-thumb-radius, 6px);
-    border: 3px solid transparent; background-clip: padding-box;
-  }
-  .sv-scroll::-webkit-scrollbar-thumb:hover { background: var(--sg-scrollbar-thumb-hover, color-mix(in srgb, var(--sg-fg, #0f172a) 38%, transparent)); }
-  .sv-scroll::-webkit-scrollbar-thumb:active { background: var(--sg-scrollbar-thumb-active, color-mix(in srgb, var(--sg-fg, #0f172a) 50%, transparent)); }
-  .sv-scroll::-webkit-scrollbar-corner { background: var(--sg-scrollbar-bg, transparent); }
-</style>
+<script lang="ts">
+  /**
+   * SvScrollArea - a scroll container with the kit's themed custom scrollbars
+   * (Firefox `scrollbar-color` + Chromium `::-webkit-scrollbar`) consuming the
+   * `--sg-scrollbar-*` tokens, so any panel matches the grid/demos without
+   * hand-rolling scrollbar CSS. The fallbacks derive from `--sg-fg` so it also
+   * adapts to light/dark when no preset defines the tokens.
+   *
+   * ```svelte
+   * <SvScrollArea maxHeight="240px">…long content…</SvScrollArea>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    maxHeight?: string
+    height?: string
+    /** Scroll horizontally instead of vertically. */
+    horizontal?: boolean
+    /** Accessible name for the scrollable region, announced by screen readers. */
+    ariaLabel?: string
+    children?: Snippet
+  }
+
+  let { maxHeight, height, horizontal = false, ariaLabel = 'Scrollable content', children }: Props = $props()
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+  class="sv-scroll"
+  class:is-x={horizontal}
+  style:max-height={maxHeight}
+  style:height={height}
+  tabindex="0"
+  role="region"
+  aria-label={ariaLabel}
+>
+  {@render children?.()}
+</div>
+
+<style>
+  .sv-scroll {
+    overflow: auto; overscroll-behavior: contain; min-height: 0;
+    scrollbar-width: thin;
+    scrollbar-color: var(--sg-scrollbar-thumb, color-mix(in srgb, var(--sg-fg, #0f172a) 26%, transparent)) var(--sg-scrollbar-bg, transparent);
+  }
+  .sv-scroll.is-x { overflow: auto hidden; }
+  .sv-scroll::-webkit-scrollbar { width: 12px; height: 12px; }
+  .sv-scroll::-webkit-scrollbar-track {
+    background: var(--sg-scrollbar-bg, transparent);
+    box-shadow: inset 1px 0 0 0 var(--sg-scrollbar-border, transparent);
+  }
+  .sv-scroll::-webkit-scrollbar-thumb {
+    background: var(--sg-scrollbar-thumb, color-mix(in srgb, var(--sg-fg, #0f172a) 26%, transparent));
+    border-radius: var(--sg-scrollbar-thumb-radius, 6px);
+    border: 3px solid transparent; background-clip: padding-box;
+  }
+  .sv-scroll::-webkit-scrollbar-thumb:hover { background: var(--sg-scrollbar-thumb-hover, color-mix(in srgb, var(--sg-fg, #0f172a) 38%, transparent)); }
+  .sv-scroll::-webkit-scrollbar-thumb:active { background: var(--sg-scrollbar-thumb-active, color-mix(in srgb, var(--sg-fg, #0f172a) 50%, transparent)); }
+  .sv-scroll::-webkit-scrollbar-corner { background: var(--sg-scrollbar-bg, transparent); }
+</style>

package/src/SvStepper.svelte

@@ -14,6 +14,7 @@
    * ```
    */
   import type { StepItem } from './ui-app.types'
+  import { createStepper } from './createStepper'
 
   type Props = {
     steps: ReadonlyArray<StepItem>
@@ -27,22 +28,18 @@
 
   let { steps, current, onChange, linear = true, orientation = 'horizontal' }: Props = $props()
 
-  const statusOf = (i: number): 'complete' | 'active' | 'upcoming' =>
-    i < current ? 'complete' : i === current ? 'active' : 'upcoming'
-  const clickable = (i: number) => (linear ? i <= current : true)
-  const go = (i: number) => { if (clickable(i) && i !== current) onChange?.(i) }
+  // Status, clickability and navigation live in the shared headless core.
+  const st = createStepper({ count: () => steps.length, current: () => current, onChange, linear: () => linear })
 </script>
 
 <ol class="sv-step sv-step--{orientation}">
   {#each steps as step, i (i)}
-    {@const status = statusOf(i)}
-    <li class="sv-step__item is-{status}" class:is-clickable={clickable(i)}>
+    {@const status = st.statusOf(i)}
+    <li class="sv-step__item is-{status}" class:is-clickable={st.clickable(i)}>
       <button
         type="button"
         class="sv-step__btn"
-        aria-current={status === 'active' ? 'step' : undefined}
-        disabled={!clickable(i)}
-        onclick={() => go(i)}
+        {...st.stepButtonProps(i)}
       >
         <span class="sv-step__marker" aria-hidden="true">
           {#if status === 'complete'}✓{:else}{i + 1}{/if}

package/src/SvTagsInput.svelte

@@ -27,7 +27,7 @@
   }
 
   let {
-    value = [],
+    value = $bindable<string[]>([]),
     onChange,
     placeholder = 'Add tag…',
     disabled = false,
@@ -51,7 +51,8 @@
 
   const ti = createTagsInput({
     value: () => value,
-    onChange: (t) => onChange?.(t),
+    // Write `value` (so `bind:value` works) AND fire `onChange` (callback users).
+    onChange: (t) => { value = t; onChange?.(t) },
     disabled: () => disabled,
     unique: () => unique,
     max: () => max,

package/src/SvTooltip.svelte

@@ -1,138 +1,127 @@
-<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 /
-   * 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.
-   *
-   * ```svelte
-   * <SvTooltip text="Delete row"><button aria-label="Delete">🗑</button></SvTooltip>
-   * ```
-   */
-  import type { Snippet } from 'svelte'
-  import { portalToBody, popIn } from './popover'
-  import { nextEditorId } from './editor-contract'
-  import { getFocusable } from './a11y/focus-trap'
-
-  type Props = {
-    text: string
-    placement?: 'top' | 'bottom'
-    /** Show delay in ms. Default 300. */
-    delay?: number
-    disabled?: boolean
-    children?: Snippet
-  }
-
-  let { text, placement = 'top', delay = 300, disabled = false, children }: Props = $props()
-
-  let anchorEl = $state<HTMLSpanElement | null>(null)
-  let tipEl = $state<HTMLDivElement | null>(null)
-  let open = $state(false)
-  let pos = $state({ top: 0, left: 0, arrowX: 12 })
-  const tid = nextEditorId('sv-tip')
-  let showTimer: ReturnType<typeof setTimeout> | undefined
-
-  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 }
-  }
-
-  function show() {
-    if (disabled || !text) return
-    clearTimeout(showTimer)
-    showTimer = setTimeout(() => { open = true; queueMicrotask(place) }, delay)
-  }
-  function hide() { clearTimeout(showTimer); open = false }
-
-  $effect(() => {
-    if (!open) return
-    place()
-    const rp = () => place()
-    window.addEventListener('scroll', rp, true)
-    window.addEventListener('resize', rp)
-    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') hide() }
-    document.addEventListener('keydown', onKey)
-    return () => {
-      window.removeEventListener('scroll', rp, true)
-      window.removeEventListener('resize', rp)
-      document.removeEventListener('keydown', onKey)
-    }
-  })
-
-  // The wrapper span above is never itself Tab-focusable, so putting
-  // aria-describedby only on it does nothing for keyboard/AT users - they
-  // focus the real interactive child (e.g. the <button> in the doc example),
-  // and that's the element whose accessible description actually gets
-  // announced. Mirror the id onto that child too, merging with (and later
-  // restoring) any aria-describedby it already carries.
-  $effect(() => {
-    if (!open || !anchorEl) return
-    const child = getFocusable(anchorEl)[0]
-    if (!child) return
-    const before = child.getAttribute('aria-describedby')
-    const ids = new Set((before ?? '').split(/\s+/).filter(Boolean))
-    ids.add(tid)
-    child.setAttribute('aria-describedby', [...ids].join(' '))
-    return () => {
-      const remaining = (child.getAttribute('aria-describedby') ?? '')
-        .split(/\s+/)
-        .filter((id) => id && id !== tid)
-      if (remaining.length) child.setAttribute('aria-describedby', remaining.join(' '))
-      else child.removeAttribute('aria-describedby')
-    }
-  })
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<span
-  bind:this={anchorEl}
-  class="sv-tip__anchor"
-  aria-describedby={open ? tid : undefined}
-  onpointerenter={show}
-  onpointerleave={hide}
-  onfocusin={show}
-  onfocusout={hide}
->
-  {@render children?.()}
-</span>
-
-{#if open}
-  <div
-    bind:this={tipEl}
-    id={tid}
-    class="sv-tip"
-    role="tooltip"
-    use:portalToBody
-    use:popIn={{ up: placement === 'top', duration: 110, scale: 0.9 }}
-    class:sv-tip--bottom={placement === 'bottom'}
-    style:position="fixed"
-    style:top={`${pos.top}px`}
-    style:left={`${pos.left}px`}
-    style:--tip-arrow-x={`${pos.arrowX}px`}
-  >{text}<span class="sv-tip__arrow" aria-hidden="true"></span></div>
-{/if}
-
-<style>
-  .sv-tip__anchor { display: inline-flex; }
-  :global(.sv-tip) {
-    z-index: 2147483647; pointer-events: none; position: relative;
-    max-width: 240px; padding: 5px 9px; font-size: 12px; line-height: 1.4; font-weight: 500;
-    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__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);
-  }
-  :global(.sv-tip:not(.sv-tip--bottom) .sv-tip__arrow) { bottom: -3px; }
-  :global(.sv-tip--bottom .sv-tip__arrow) { top: -3px; }
-</style>
+<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 /
+   * 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.
+   *
+   * ```svelte
+   * <SvTooltip text="Delete row"><button aria-label="Delete">🗑</button></SvTooltip>
+   * ```
+   */
+  import type { Snippet } from 'svelte'
+  import { portalToBody, popIn } from './popover'
+  import { getFocusable } from './a11y/focus-trap'
+  import { createTooltip } from './createTooltip.svelte'
+
+  type Props = {
+    text: string
+    placement?: 'top' | 'bottom'
+    /** Show delay in ms. Default 300. */
+    delay?: number
+    disabled?: boolean
+    children?: Snippet
+  }
+
+  let { text, placement = 'top', delay = 300, disabled = false, children }: Props = $props()
+
+  let anchorEl = $state<HTMLSpanElement | null>(null)
+  let tipEl = $state<HTMLDivElement | null>(null)
+  let pos = $state({ top: 0, left: 0, arrowX: 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 })
+  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 }
+  }
+
+  // Reposition while open (and on scroll/resize). Escape-to-hide is the core's.
+  $effect(() => {
+    if (!tip.open) 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)
+    }
+  })
+
+  // The wrapper span above is never itself Tab-focusable, so putting
+  // aria-describedby only on it does nothing for keyboard/AT users - they
+  // focus the real interactive child (e.g. the <button> in the doc example),
+  // and that's the element whose accessible description actually gets
+  // announced. Mirror the id onto that child too, merging with (and later
+  // restoring) any aria-describedby it already carries.
+  $effect(() => {
+    if (!tip.open || !anchorEl) return
+    const child = getFocusable(anchorEl)[0]
+    if (!child) return
+    const before = child.getAttribute('aria-describedby')
+    const ids = new Set((before ?? '').split(/\s+/).filter(Boolean))
+    ids.add(tid)
+    child.setAttribute('aria-describedby', [...ids].join(' '))
+    return () => {
+      const remaining = (child.getAttribute('aria-describedby') ?? '')
+        .split(/\s+/)
+        .filter((id) => id && id !== tid)
+      if (remaining.length) child.setAttribute('aria-describedby', remaining.join(' '))
+      else child.removeAttribute('aria-describedby')
+    }
+  })
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span
+  bind:this={anchorEl}
+  class="sv-tip__anchor"
+  {...tip.anchorProps()}
+>
+  {@render children?.()}
+</span>
+
+{#if tip.open}
+  <div
+    bind:this={tipEl}
+    id={tid}
+    class="sv-tip"
+    role="tooltip"
+    use:portalToBody
+    use:popIn={{ up: placement === 'top', duration: 110, scale: 0.9 }}
+    class:sv-tip--bottom={placement === 'bottom'}
+    style:position="fixed"
+    style:top={`${pos.top}px`}
+    style:left={`${pos.left}px`}
+    style:--tip-arrow-x={`${pos.arrowX}px`}
+  >{text}<span class="sv-tip__arrow" aria-hidden="true"></span></div>
+{/if}
+
+<style>
+  .sv-tip__anchor { display: inline-flex; }
+  :global(.sv-tip) {
+    z-index: 2147483647; pointer-events: none; position: relative;
+    max-width: 240px; padding: 5px 9px; font-size: 12px; line-height: 1.4; font-weight: 500;
+    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__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);
+  }
+  :global(.sv-tip:not(.sv-tip--bottom) .sv-tip__arrow) { bottom: -3px; }
+  :global(.sv-tip--bottom .sv-tip__arrow) { top: -3px; }
+</style>

package/src/SvTooltip.test.ts

@@ -0,0 +1,73 @@
+/**
+ * Component tests for SvTooltip, exercising the shared createTooltip core: it
+ * opens after the show delay on hover, hides on Escape, respects `disabled`, and
+ * wires aria-describedby onto the focusable child while open.
+ */
+import { describe, expect, it, beforeEach, afterEach, vi } from 'vitest'
+import { mount, unmount, flushSync, createRawSnippet } from 'svelte'
+import SvTooltip from './SvTooltip.svelte'
+
+const child = createRawSnippet(() => ({ render: () => `<button class="btn">Del</button>` }))
+
+function mountTip(props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvTooltip, { target, props: { children: child, ...props } as any })
+  flushSync()
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+const tip = () => document.body.querySelector<HTMLElement>('.sv-tip')
+
+describe('SvTooltip', () => {
+  beforeEach(() => vi.useFakeTimers())
+  afterEach(() => {
+    vi.useRealTimers()
+    document.querySelectorAll('.sv-tip').forEach((n) => n.remove())
+  })
+
+  it('shows after the delay on pointerenter and hides on Escape', () => {
+    const { target, destroy } = mountTip({ text: 'Delete row', delay: 300 })
+    try {
+      const anchor = target.querySelector<HTMLElement>('.sv-tip__anchor')!
+      expect(tip()).toBeNull()
+      anchor.dispatchEvent(new PointerEvent('pointerenter', { bubbles: true }))
+      // Nothing yet - still within the delay window.
+      flushSync()
+      expect(tip()).toBeNull()
+      vi.advanceTimersByTime(300)
+      flushSync()
+      const el = tip()!
+      expect(el).not.toBeNull()
+      expect(el.getAttribute('role')).toBe('tooltip')
+      expect(el.textContent).toContain('Delete row')
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+      flushSync()
+      expect(tip()).toBeNull()
+    } finally { destroy() }
+  })
+
+  it('does not show while disabled', () => {
+    const { target, destroy } = mountTip({ text: 'x', disabled: true })
+    try {
+      target.querySelector<HTMLElement>('.sv-tip__anchor')!
+        .dispatchEvent(new PointerEvent('pointerenter', { bubbles: true }))
+      vi.advanceTimersByTime(500)
+      flushSync()
+      expect(tip()).toBeNull()
+    } finally { destroy() }
+  })
+
+  it('wires aria-describedby onto the focusable child while open', () => {
+    const { target, destroy } = mountTip({ text: 'Delete row', delay: 100 })
+    try {
+      target.querySelector<HTMLElement>('.sv-tip__anchor')!
+        .dispatchEvent(new PointerEvent('pointerenter', { bubbles: true }))
+      vi.advanceTimersByTime(100)
+      flushSync()
+      const btn = target.querySelector<HTMLElement>('.btn')!
+      const describedby = btn.getAttribute('aria-describedby')
+      expect(describedby).toBeTruthy()
+      expect(document.getElementById(describedby!)?.getAttribute('role')).toBe('tooltip')
+    } finally { destroy() }
+  })
+})