@classic-homes/theme-svelte 1.18.0 → 1.19.1

package/dist/__tests__/studio.test.js

@@ -0,0 +1,240 @@
+/**
+ * Studio editor frame: outline selection and reordering (pointer-free, by
+ * keyboard), the save and issues signals, and the responsive move of the
+ * outline and inspector into sheets.
+ */
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { mount, unmount, flushSync, tick, createRawSnippet } from 'svelte';
+import StudioOutline from '../lib/components/studio/StudioOutline.svelte';
+import SaveStatus from '../lib/components/studio/SaveStatus.svelte';
+import IssuesButton from '../lib/components/studio/IssuesButton.svelte';
+import Studio from '../lib/components/studio/Studio.svelte';
+import StudioCanvasItem from '../lib/components/studio/StudioCanvasItem.svelte';
+let instance = null;
+let host;
+function render(component, props) {
+    host = document.createElement('div');
+    document.body.appendChild(host);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    instance = mount(component, { target: host, props });
+    flushSync();
+    return host;
+}
+function viewport(width) {
+    vi.spyOn(window, 'matchMedia').mockImplementation((query) => {
+        const min = Number(/min-width:\s*(\d+)/.exec(query)?.[1] ?? 0);
+        return {
+            matches: width >= min,
+            media: query,
+            onchange: null,
+            addEventListener: vi.fn(),
+            removeEventListener: vi.fn(),
+            addListener: vi.fn(),
+            removeListener: vi.fn(),
+            dispatchEvent: vi.fn(),
+        };
+    });
+}
+const html = (markup) => createRawSnippet(() => ({ render: () => markup }));
+function key(target, k, init = {}) {
+    target.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, ...init }));
+    flushSync();
+}
+afterEach(() => {
+    if (instance)
+        unmount(instance);
+    instance = null;
+    host?.remove();
+    document.body.innerHTML = '';
+    vi.restoreAllMocks();
+});
+const entries = [
+    { id: 'a', title: 'Name' },
+    { id: 'b', title: 'Email', issues: 2 },
+    { id: 'c', title: 'Rating' },
+];
+describe('StudioOutline', () => {
+    it('selects a row and marks it current', () => {
+        const onSelect = vi.fn();
+        const el = render(StudioOutline, { items: entries, selected: 'a', onSelect });
+        const rows = el.querySelectorAll('[data-outline-row]');
+        rows[2].click();
+        flushSync();
+        expect(onSelect).toHaveBeenCalledWith('c');
+        expect(rows[2].getAttribute('aria-current')).toBe('true');
+        expect(rows[0].hasAttribute('aria-current')).toBe(false);
+    });
+    it('keeps one row in the tab order and moves focus with the arrow keys', () => {
+        const el = render(StudioOutline, { items: entries, selected: 'b' });
+        const rows = el.querySelectorAll('[data-outline-row]');
+        expect([...rows].map((r) => r.tabIndex)).toEqual([-1, 0, -1]);
+        rows[1].focus();
+        key(rows[1], 'ArrowDown');
+        expect(document.activeElement).toBe(rows[2]);
+    });
+    it('shows issue counts as text, not only colour', () => {
+        const el = render(StudioOutline, { items: entries });
+        expect(el.textContent).toContain('2');
+        expect(el.textContent).toContain('issues');
+    });
+    it('reorders with the keyboard: pick up, move, drop', () => {
+        const onReorder = vi.fn();
+        const el = render(StudioOutline, { items: entries, onReorder });
+        const handle = el.querySelector('[data-sortable-handle="a"]');
+        expect(handle.getAttribute('aria-label')).toBe('Reorder Name');
+        key(handle, ' ');
+        expect(handle.getAttribute('aria-pressed')).toBe('true');
+        key(handle, 'ArrowDown');
+        expect(onReorder).toHaveBeenCalledWith(0, 1);
+    });
+    it('moves in one step with Alt+Arrow', () => {
+        const onReorder = vi.fn();
+        const el = render(StudioOutline, { items: entries, onReorder });
+        const handle = el.querySelector('[data-sortable-handle="c"]');
+        key(handle, 'ArrowUp', { altKey: true });
+        expect(onReorder).toHaveBeenCalledWith(2, 1);
+    });
+    it('ignores arrows on a handle that is not picked up', () => {
+        const onReorder = vi.fn();
+        const el = render(StudioOutline, { items: entries, onReorder });
+        key(el.querySelector('[data-sortable-handle="a"]'), 'ArrowDown');
+        expect(onReorder).not.toHaveBeenCalled();
+    });
+    it('has no drag handles when reordering is off', () => {
+        const el = render(StudioOutline, { items: entries });
+        expect(el.querySelector('[data-sortable-handle]')).toBeNull();
+    });
+    it('renders the add button only when onAdd is given', () => {
+        const onAdd = vi.fn();
+        const el = render(StudioOutline, { items: entries, onAdd, addLabel: 'Add question' });
+        const add = [...el.querySelectorAll('button')].find((b) => b.textContent?.includes('Add question'));
+        add.click();
+        expect(onAdd).toHaveBeenCalled();
+    });
+});
+describe('SaveStatus', () => {
+    it('shows one word for routine states and announces nothing', () => {
+        const el = render(SaveStatus, { state: 'saved' });
+        expect(el.textContent).toContain('Saved');
+        expect(el.querySelector('[role="status"]').textContent).toBe('');
+    });
+    it('announces failures and offers Retry in its details', async () => {
+        const onRetry = vi.fn();
+        const el = render(SaveStatus, {
+            state: 'error',
+            detail: 'The server did not answer.',
+            onRetry,
+        });
+        expect(el.querySelector('[role="status"]').textContent).toBe('Not saved');
+        const trigger = el.querySelector('button');
+        expect(trigger.getAttribute('aria-label')).toContain('Not saved');
+        trigger.click();
+        flushSync();
+        await tick();
+        const retry = [...document.querySelectorAll('button')].find((b) => b.textContent?.includes('Retry'));
+        expect(document.body.textContent).toContain('The server did not answer.');
+        retry.click();
+        expect(onRetry).toHaveBeenCalled();
+    });
+});
+describe('IssuesButton', () => {
+    const issues = [
+        { id: '1', message: 'Add a question', location: 'Questions' },
+        { id: '2', message: 'Add at least two options', location: 'Question 2' },
+        { id: '3', message: 'Consider a close date', severity: 'warning' },
+    ];
+    it('is hidden when there is nothing to fix', () => {
+        const el = render(IssuesButton, { issues: [] });
+        expect(el.querySelector('button')).toBeNull();
+    });
+    it('names errors and suggestions in its label', () => {
+        const el = render(IssuesButton, { issues });
+        expect(el.querySelector('button').getAttribute('aria-label')).toBe('2 issues to fix, 1 suggestion');
+    });
+    it('jumps to an issue and closes', async () => {
+        const onSelect = vi.fn();
+        const el = render(IssuesButton, { issues, onSelect });
+        el.querySelector('button').click();
+        flushSync();
+        await tick();
+        const entry = [...document.querySelectorAll('button')].find((b) => b.textContent?.includes('Add at least two options'));
+        entry.click();
+        flushSync();
+        expect(onSelect).toHaveBeenCalledWith(issues[1]);
+    });
+});
+describe('Studio layout', () => {
+    const parts = {
+        bar: html('<header>Bar</header>'),
+        rail: html('<nav>Rail</nav>'),
+        canvas: html('<p>Canvas</p>'),
+        inspector: html('<div>Inspector</div>'),
+    };
+    it('shows rail, canvas and inspector side by side when wide', () => {
+        viewport(1440);
+        const el = render(Studio, parts);
+        expect(el.querySelector('aside[aria-label="Outline"]')).not.toBeNull();
+        expect(el.querySelector('aside[aria-label="Properties"]')).not.toBeNull();
+        expect(el.textContent).not.toContain('Outline');
+    });
+    it('moves the rail into a sheet below 1280px', () => {
+        viewport(1024);
+        const el = render(Studio, parts);
+        expect(el.querySelector('aside[aria-label="Outline"]')).toBeNull();
+        expect(el.querySelector('aside[aria-label="Properties"]')).not.toBeNull();
+        const open = [...el.querySelectorAll('button')].find((b) => b.textContent?.includes('Outline'));
+        open.click();
+        flushSync();
+        expect(document.body.textContent).toContain('Rail');
+    });
+    it('leaves only the canvas on phones', () => {
+        viewport(390);
+        const el = render(Studio, parts);
+        expect(el.querySelector('aside')).toBeNull();
+        expect(el.textContent).toContain('Canvas');
+        const labels = [...el.querySelectorAll('button')].map((b) => b.textContent?.trim());
+        expect(labels).toEqual(['Outline', 'Properties']);
+    });
+});
+describe('StudioCanvasItem', () => {
+    it('selects on click and offers a keyboard way in', () => {
+        const onSelect = vi.fn();
+        const el = render(StudioCanvasItem, {
+            label: 'Question 1',
+            onSelect,
+            children: html('<p>Body</p>'),
+        });
+        const edit = el.querySelector('button');
+        expect(edit.textContent?.trim()).toBe('Edit Question 1');
+        el.querySelector('p').click();
+        expect(onSelect).toHaveBeenCalled();
+    });
+    it('inserts below without needing a selection change', () => {
+        const onInsert = vi.fn();
+        const el = render(StudioCanvasItem, {
+            label: 'Question 1',
+            selected: true,
+            onInsert,
+            children: html('<p>Body</p>'),
+        });
+        el.querySelector('button[aria-label="Add below Question 1"]').click();
+        expect(onInsert).toHaveBeenCalled();
+    });
+});
+describe('StudioCanvasItem quick actions', () => {
+    it('does not select the item when focus lands on its "+" (a closing dialog returns it there)', () => {
+        const onSelect = vi.fn();
+        const el = render(StudioCanvasItem, {
+            label: 'Question 1',
+            onSelect,
+            onInsert: () => { },
+            children: html('<p>Body</p>'),
+        });
+        el.querySelector('button[aria-label="Add below Question 1"]').focus();
+        flushSync();
+        expect(onSelect).not.toHaveBeenCalled();
+        el.querySelector('button').focus(); // the "Edit Question 1" button
+        flushSync();
+        expect(onSelect).toHaveBeenCalledTimes(1);
+    });
+});

package/dist/lib/components/Sheet.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import { tv } from 'tailwind-variants';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+  import Icon from './Icon.svelte';
+
+  /**
+   * Sheet - a modal panel that slides in from an edge of the screen.
+   *
+   * Use it for secondary surfaces that belong beside the page rather than on
+   * top of it: version history, a phone-width outline or inspector, filters.
+   * Built on the same Bits UI dialog as `Dialog` (focus trap, Escape, scrim
+   * click and focus return), so only the placement differs.
+   */
+  const sheet = tv({
+    slots: {
+      content:
+        'fixed z-50 flex flex-col border-border bg-background shadow-lg outline-none duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out',
+    },
+    variants: {
+      side: {
+        right: {
+          content:
+            'inset-y-0 right-0 h-dvh w-full border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right',
+        },
+        left: {
+          content:
+            'inset-y-0 left-0 h-dvh w-full border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left',
+        },
+        bottom: {
+          content:
+            'inset-x-0 bottom-0 max-h-[85dvh] w-full rounded-t-xl border-t pb-[env(safe-area-inset-bottom)] data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        },
+      },
+      size: { sm: {}, md: {}, lg: {} },
+    },
+    compoundVariants: [
+      { side: ['left', 'right'], size: 'sm', class: { content: 'sm:max-w-xs' } },
+      { side: ['left', 'right'], size: 'md', class: { content: 'sm:max-w-md' } },
+      { side: ['left', 'right'], size: 'lg', class: { content: 'sm:max-w-xl' } },
+    ],
+    defaultVariants: { side: 'right', size: 'md' },
+  });
+
+  interface Props {
+    /** Whether the sheet is open (bindable) */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Edge the sheet slides in from (default: right) */
+    side?: 'left' | 'right' | 'bottom';
+    /** Width of a left/right sheet from `sm` up; phones always get the full width */
+    size?: 'sm' | 'md' | 'lg';
+    /** Heading, also the sheet's accessible name */
+    title: string;
+    /**
+     * Hide the heading row (the title still names the sheet for screen
+     * readers) when the content brings its own header. The close button moves
+     * into the grab bar (bottom) or the top-right corner (left/right).
+     */
+    hideTitle?: boolean;
+    description?: string;
+    /** Buttons beside the close button */
+    headerActions?: Snippet;
+    /** Pinned footer, e.g. the sheet's primary action */
+    footer?: Snippet;
+    children: Snippet;
+    class?: string;
+  }
+
+  let {
+    open = $bindable(false),
+    onOpenChange,
+    side = 'right',
+    size = 'md',
+    title,
+    hideTitle = false,
+    description,
+    headerActions,
+    footer,
+    children,
+    class: className,
+  }: Props = $props();
+
+  const styles = $derived(sheet({ side, size }));
+
+  function handleOpenChange(next: boolean) {
+    open = next;
+    onOpenChange?.(next);
+  }
+</script>
+
+<!-- Rendered inside Content, so Close finds its dialog -->
+{#snippet closeButton()}
+  <DialogPrimitive.Close
+    class="flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground hover:bg-muted-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    aria-label="Close"
+  >
+    <Icon name="close" size={18} aria-hidden="true" />
+  </DialogPrimitive.Close>
+{/snippet}
+
+<DialogPrimitive.Root bind:open onOpenChange={handleOpenChange}>
+  <DialogPrimitive.Portal>
+    <DialogPrimitive.Overlay
+      class="fixed inset-0 z-50 bg-foreground/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogPrimitive.Content class={cn(styles.content(), className)}>
+      {#if side === 'bottom'}
+        <!-- Grab bar row; carries the close button when the title is hidden -->
+        <div class="relative flex h-6 shrink-0 items-center justify-center">
+          <div class="h-1.5 w-10 rounded-full bg-muted" aria-hidden="true"></div>
+          {#if hideTitle}
+            <div class="absolute right-2 top-1">{@render closeButton()}</div>
+          {/if}
+        </div>
+      {/if}
+
+      {#if hideTitle}
+        <DialogPrimitive.Title class="sr-only">{title}</DialogPrimitive.Title>
+        {#if description}
+          <DialogPrimitive.Description class="sr-only">{description}</DialogPrimitive.Description>
+        {/if}
+        {#if side !== 'bottom'}
+          <div class="absolute right-2 top-2 z-10">{@render closeButton()}</div>
+        {/if}
+      {:else}
+        <div class="flex shrink-0 items-start gap-3 border-b border-border px-4 py-3">
+          <div class="min-w-0 flex-1">
+            <DialogPrimitive.Title class="text-base font-semibold leading-tight">
+              {title}
+            </DialogPrimitive.Title>
+            {#if description}
+              <DialogPrimitive.Description class="mt-1 text-sm text-muted-foreground">
+                {description}
+              </DialogPrimitive.Description>
+            {/if}
+          </div>
+          <div class="-mr-1 ml-auto flex shrink-0 items-center gap-1">
+            {#if headerActions}{@render headerActions()}{/if}
+            {@render closeButton()}
+          </div>
+        </div>
+      {/if}
+      <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+        {@render children()}
+      </div>
+      {#if footer}
+        <div class="flex shrink-0 items-center justify-end gap-2 border-t border-border px-4 py-3">
+          {@render footer()}
+        </div>
+      {/if}
+    </DialogPrimitive.Content>
+  </DialogPrimitive.Portal>
+</DialogPrimitive.Root>

package/dist/lib/components/Sheet.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Whether the sheet is open (bindable) */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Edge the sheet slides in from (default: right) */
+    side?: 'left' | 'right' | 'bottom';
+    /** Width of a left/right sheet from `sm` up; phones always get the full width */
+    size?: 'sm' | 'md' | 'lg';
+    /** Heading, also the sheet's accessible name */
+    title: string;
+    /**
+     * Hide the heading row (the title still names the sheet for screen
+     * readers) when the content brings its own header. The close button moves
+     * into the grab bar (bottom) or the top-right corner (left/right).
+     */
+    hideTitle?: boolean;
+    description?: string;
+    /** Buttons beside the close button */
+    headerActions?: Snippet;
+    /** Pinned footer, e.g. the sheet's primary action */
+    footer?: Snippet;
+    children: Snippet;
+    class?: string;
+}
+declare const Sheet: import("svelte").Component<Props, {}, "open">;
+type Sheet = ReturnType<typeof Sheet>;
+export default Sheet;

package/dist/lib/components/SortableList.svelte

@@ -0,0 +1,251 @@
+<script lang="ts" module>
+  /** Attributes to spread on the element that acts as an item's drag handle */
+  export interface SortableHandleProps {
+    type: 'button';
+    'aria-label': string;
+    'aria-roledescription': string;
+    'aria-describedby': string;
+    'aria-pressed': boolean;
+    'data-sortable-handle': string;
+    onpointerdown: (event: PointerEvent) => void;
+    onpointermove: (event: PointerEvent) => void;
+    onpointerup: (event: PointerEvent) => void;
+    onpointercancel: (event: PointerEvent) => void;
+    onkeydown: (event: KeyboardEvent) => void;
+    onblur: () => void;
+  }
+
+  export interface SortableItemContext<T> {
+    item: T;
+    index: number;
+    /** Spread on a `<button>` inside the item: `<button {...handle}>` */
+    handle: SortableHandleProps;
+    /** The item is being dragged or is picked up by the keyboard */
+    dragging: boolean;
+  }
+</script>
+
+<script lang="ts" generics="T">
+  import { tick, type Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+
+  /**
+   * SortableList - a vertical list the user can reorder by drag or keyboard.
+   *
+   * Each item renders its own drag handle by spreading `handle` on a button.
+   * Pointer: press and drag the handle. Keyboard: focus the handle, press
+   * Space or Enter to pick the item up, move it with the arrow keys, press
+   * Space/Enter again to drop or Escape to put it back. Alt+Arrow moves an
+   * item in one step without picking it up. Every move is announced.
+   *
+   * The list never reorders `items` itself: it calls `onReorder(from, to)`
+   * and expects the parent to update the array.
+   */
+  interface Props {
+    items: T[];
+    /** Stable key for each item */
+    getKey: (item: T, index: number) => string | number;
+    /** Move the item at `from` so it ends up at index `to` */
+    onReorder: (from: number, to: number) => void;
+    /** Renders one item; spread `handle` on its drag-handle button */
+    item: Snippet<[SortableItemContext<T>]>;
+    /** Accessible name of the list, e.g. "Questions" */
+    label: string;
+    /** Name used in announcements and handle labels (default: the 1-based position) */
+    getItemLabel?: (item: T, index: number) => string;
+    /** Disables reordering; handles stay rendered but do nothing */
+    disabled?: boolean;
+    class?: string;
+    itemClass?: string;
+  }
+
+  let {
+    items,
+    getKey,
+    onReorder,
+    item: itemSnippet,
+    label,
+    getItemLabel = (_item: T, index: number) => `Item ${index + 1}`,
+    disabled = false,
+    class: className,
+    itemClass,
+  }: Props = $props();
+
+  const uid = $props.id();
+  const instructionsId = `sortable-${uid}-help`;
+
+  let listEl: HTMLUListElement | undefined = $state();
+  let announcement = $state('');
+
+  // Pointer drag state
+  let dragFrom = $state<number | null>(null);
+  let dragOver = $state<number | null>(null);
+  let dragOffset = $state(0);
+  let startY = 0;
+  let rects: DOMRect[] = [];
+
+  // Keyboard pick-up state. Tracked by position (keys may be indexes), with
+  // the starting position kept for Escape.
+  let grabbed = $state<number | null>(null);
+  let grabbedFrom = 0;
+  // Set while a keyboard move re-renders the list, so the blur it causes
+  // doesn't drop the item
+  let moving = false;
+
+  function announce(message: string) {
+    // Re-set so repeated identical messages are announced again
+    announcement = '';
+    queueMicrotask(() => (announcement = message));
+  }
+
+  function positionText(index: number) {
+    return `position ${index + 1} of ${items.length}`;
+  }
+
+  // By position rather than key: the moved item is at its new index whatever
+  // the parent keys it by.
+  async function focusHandle(index: number) {
+    await tick();
+    listEl?.querySelectorAll<HTMLElement>(':scope > li [data-sortable-handle]')[index]?.focus();
+  }
+
+  async function move(from: number, to: number, keepFocus = true) {
+    if (to < 0 || to >= items.length || from === to) return;
+    const name = getItemLabel(items[from], from);
+    moving = true;
+    onReorder(from, to);
+    if (grabbed === from) grabbed = to;
+    announce(`${name} moved to ${positionText(to)}.`);
+    if (keepFocus) await focusHandle(to);
+    moving = false;
+  }
+
+  function itemShift(index: number): number {
+    if (dragFrom === null || dragOver === null) return 0;
+    if (index === dragFrom) return dragOffset;
+    const height = rects[dragFrom]?.height ?? 0;
+    const gap = rects.length > 1 ? Math.max(0, rects[1].top - rects[0].bottom) : 0;
+    if (dragFrom < dragOver && index > dragFrom && index <= dragOver) return -(height + gap);
+    if (dragFrom > dragOver && index >= dragOver && index < dragFrom) return height + gap;
+    return 0;
+  }
+
+  function endDrag(commit: boolean) {
+    const from = dragFrom;
+    const to = dragOver;
+    dragFrom = null;
+    dragOver = null;
+    dragOffset = 0;
+    rects = [];
+    if (commit && from !== null && to !== null && from !== to) void move(from, to, false);
+  }
+
+  function handleProps(index: number, key: string | number, name: string): SortableHandleProps {
+    return {
+      type: 'button',
+      'aria-label': `Reorder ${name}`,
+      'aria-roledescription': 'sortable handle',
+      'aria-describedby': instructionsId,
+      'aria-pressed': grabbed === index,
+      'data-sortable-handle': String(key),
+      onpointerdown(event) {
+        if (disabled || event.button !== 0 || !listEl) return;
+        event.preventDefault();
+        // Capture on the handle only: capturing on the list would swallow clicks
+        // on the rest of the item.
+        (event.currentTarget as HTMLElement).setPointerCapture?.(event.pointerId);
+        rects = Array.from(listEl.children, (child) => child.getBoundingClientRect());
+        startY = event.clientY;
+        dragFrom = index;
+        dragOver = index;
+        dragOffset = 0;
+      },
+      onpointermove(event) {
+        if (dragFrom === null) return;
+        dragOffset = event.clientY - startY;
+        const origin = rects[dragFrom];
+        const center = origin.top + origin.height / 2 + dragOffset;
+        // The new index is the number of other items whose midpoint is above
+        // the dragged item's midpoint.
+        dragOver = rects.filter(
+          (rect, i) => i !== dragFrom && rect.top + rect.height / 2 < center
+        ).length;
+      },
+      onpointerup() {
+        endDrag(true);
+      },
+      onpointercancel() {
+        endDrag(false);
+      },
+      onkeydown(event) {
+        if (disabled) return;
+        const picked = grabbed === index;
+        if (event.key === ' ' || event.key === 'Enter') {
+          event.preventDefault();
+          if (picked) {
+            grabbed = null;
+            announce(`${name} dropped at ${positionText(index)}.`);
+          } else {
+            grabbed = index;
+            grabbedFrom = index;
+            announce(`${name} picked up at ${positionText(index)}. Use the arrow keys to move it.`);
+          }
+        } else if (event.key === 'Escape' && picked) {
+          event.preventDefault();
+          event.stopPropagation();
+          grabbed = null;
+          if (index !== grabbedFrom) {
+            moving = true;
+            onReorder(index, grabbedFrom);
+            void focusHandle(grabbedFrom).then(() => (moving = false));
+          }
+          announce(`Reorder cancelled. ${name} is back at ${positionText(grabbedFrom)}.`);
+        } else if (
+          (picked || event.altKey) &&
+          (event.key === 'ArrowUp' || event.key === 'ArrowDown')
+        ) {
+          event.preventDefault();
+          void move(index, event.key === 'ArrowUp' ? index - 1 : index + 1);
+        } else if (picked && (event.key === 'Home' || event.key === 'End')) {
+          event.preventDefault();
+          void move(index, event.key === 'Home' ? 0 : items.length - 1);
+        }
+      },
+      onblur() {
+        // Losing focus while picked up drops the item where it is
+        if (!moving && grabbed === index) grabbed = null;
+      },
+    };
+  }
+</script>
+
+<ul bind:this={listEl} aria-label={label} class={cn('relative', className)}>
+  {#each items as entry, index (getKey(entry, index))}
+    {@const key = getKey(entry, index)}
+    {@const dragging = dragFrom === index || grabbed === index}
+    {@const shift = itemShift(index)}
+    <li
+      class={cn(
+        'relative',
+        dragFrom !== null && dragFrom !== index && 'transition-transform duration-150',
+        dragFrom === index && 'z-10 opacity-90 shadow-lg',
+        itemClass
+      )}
+      style:transform={shift ? `translateY(${shift}px)` : undefined}
+      data-dragging={dragging || undefined}
+    >
+      {@render itemSnippet({
+        item: entry,
+        index,
+        handle: handleProps(index, key, getItemLabel(entry, index)),
+        dragging,
+      })}
+    </li>
+  {/each}
+</ul>
+
+<p id={instructionsId} class="sr-only">
+  Press Space or Enter to pick up, use the arrow keys to move, Space or Enter to drop, Escape to
+  cancel.
+</p>
+<div class="sr-only" role="status" aria-live="assertive" aria-atomic="true">{announcement}</div>