@spectral_labs/ui 1.7.0 → 1.8.0-next.0

package/dist/components/command/__tests__/command-inline.test.svelte.js

@@ -1,392 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { EscapeLayerState, resetEscapeLayerStack } from '../../../internal/escape-layer/index.js';
-import CommandInlineDirectTest from './CommandInlineDirectTest.svelte';
-import CommandInlineTest from './CommandInlineTest.svelte';
-/**
- * `mode: 'inline'` — a persistent field with non-modal results.
- *
- * The contract these pins defend is not "the list is hidden": it is that a
- * CLOSED palette is inert. It executes nothing, it claims no key, it holds no
- * slot in the global layer stacks, and it names no option that is not on
- * screen. `modal` is the default and must come through untouched.
- */
-if (typeof globalThis.PointerEvent === 'undefined') {
-    // @ts-expect-error — minimal polyfill for testing
-    globalThis.PointerEvent = class PointerEvent extends MouseEvent {
-        constructor(type, init) {
-            super(type, init);
-        }
-    };
-}
-describe('command — inline mode', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(CommandInlineTest, { target, props });
-        flushSync();
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        instance = undefined;
-        target?.remove();
-        resetEscapeLayerStack();
-        document.body.innerHTML = '';
-    });
-    const input = () => target.querySelector('input.probe-input');
-    const options = () => [...target.querySelectorAll('[data-command-item]')];
-    const activeId = () => input().getAttribute('aria-activedescendant');
-    function press(key, init = {}) {
-        const event = new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true, ...init });
-        input().dispatchEvent(event);
-        flushSync();
-        return event;
-    }
-    function type(text) {
-        const el = input();
-        el.value = text;
-        el.dispatchEvent(new Event('input', { bubbles: true }));
-        flushSync();
-    }
-    // --- The field outlives the results ------------------------------------
-    it('closed: the field is rendered and NO option is', () => {
-        setup({ initialOpen: false });
-        expect(input()).toBeTruthy();
-        expect(options()).toHaveLength(0);
-        expect(target.querySelector('[role="listbox"]')).toBeNull();
-    });
-    it('closed: aria-expanded is false, and the relations that would dangle are absent', () => {
-        setup({ initialOpen: false });
-        expect(input().getAttribute('aria-expanded')).toBe('false');
-        expect(input().getAttribute('aria-controls')).toBeNull();
-        expect(activeId()).toBeNull();
-    });
-    it('the SAME input element survives a close and a reopen — never a second field', () => {
-        setup({ initialOpen: true });
-        const first = input();
-        instance.setOpen(false);
-        flushSync();
-        expect(options()).toHaveLength(0);
-        const whileClosed = input();
-        instance.setOpen(true);
-        flushSync();
-        // Node identity, not a lookalike: a remounted field would lose focus,
-        // selection and any consumer `bind:element` reference.
-        expect(whileClosed).toBe(first);
-        expect(input()).toBe(first);
-    });
-    it('exposes the real input element through `bind:element`, with no internal selector', () => {
-        setup({ initialOpen: false });
-        expect(instance.getElement()).toBe(input());
-        instance.getElement().focus();
-        expect(document.activeElement).toBe(input());
-    });
-    // --- A closed palette claims nothing -----------------------------------
-    it('closed: Enter executes nothing and is NOT prevented — it belongs to the page', () => {
-        const onSelect = vi.fn();
-        setup({ initialOpen: false, onSelect });
-        const event = press('Enter');
-        expect(onSelect).not.toHaveBeenCalled();
-        expect(event.defaultPrevented).toBe(false);
-    });
-    it('closed: a third-party Escape layer mounted FIRST still receives the key', () => {
-        const onEscapeKeydown = vi.fn();
-        // Mounted BEFORE the palette, so it sits at the BOTTOM of the stack. The
-        // stack offers the keystroke to the topmost 'close' layer and stops there:
-        // a palette that illicitly kept its layer while closed would be above this
-        // one and would swallow the key. Mounted after, it would win either way
-        // and the test would pass on a broken implementation.
-        const other = new EscapeLayerState({ enabled: true, onEscapeKeydown });
-        other.mount();
-        setup({ initialOpen: false });
-        const event = press('Escape');
-        expect(onEscapeKeydown).toHaveBeenCalledTimes(1);
-        expect(event.defaultPrevented).toBe(false);
-        other.unmount();
-    });
-    it('open: the palette DOES take the key from a layer mounted before it — the test above discriminates', () => {
-        const onEscapeKeydown = vi.fn();
-        const other = new EscapeLayerState({ enabled: true, onEscapeKeydown });
-        other.mount();
-        setup({ initialOpen: true });
-        press('Escape');
-        // Same order, results open: the palette is topmost and answers, so the
-        // previous test really observes the layer being absent, not the ordering.
-        expect(onEscapeKeydown).not.toHaveBeenCalled();
-        expect(instance.getOpen()).toBe(false);
-        other.unmount();
-    });
-    it('closed: Home and End stay with the caret — native editing is preserved', () => {
-        setup({ initialOpen: false });
-        expect(press('Home').defaultPrevented).toBe(false);
-        expect(press('End').defaultPrevented).toBe(false);
-    });
-    it('closed: an arrow OPENS the results instead of moving an unseen selection', () => {
-        const onOpenChange = vi.fn();
-        setup({ initialOpen: false, onOpenChange });
-        const event = press('ArrowDown');
-        expect(event.defaultPrevented).toBe(true);
-        expect(onOpenChange).toHaveBeenCalledWith(true);
-        expect(instance.getOpen()).toBe(true);
-        flushSync();
-        expect(options().length).toBeGreaterThan(0);
-    });
-    // --- Open: the engine is the one that shipped ---------------------------
-    it('open: keyword filtering still decides — a term absent from the label finds the option', () => {
-        setup({ initialOpen: true });
-        type('duplicate');
-        const values = options().map((el) => el.dataset.value);
-        expect(values).toEqual(['copy']);
-    });
-    it('open: arrow then Enter activates the option exactly ONCE', () => {
-        const onSelect = vi.fn();
-        setup({ initialOpen: true, onSelect });
-        press('ArrowDown');
-        const selected = options().find((el) => el.dataset.selected === 'true');
-        press('Enter');
-        expect(onSelect).toHaveBeenCalledTimes(1);
-        expect(onSelect).toHaveBeenCalledWith(selected.dataset.value);
-    });
-    it('open: aria-activedescendant names the rendered option’s DOM id, never its value', () => {
-        setup({ initialOpen: true });
-        const selected = options().find((el) => el.dataset.selected === 'true');
-        expect(activeId()).toBe(selected.id);
-        expect(activeId()).not.toBe(selected.dataset.value);
-        // And it resolves to a node that is really in the document.
-        expect(document.getElementById(activeId())).toBe(selected);
-        expect(input().getAttribute('aria-controls')).toBe(target.querySelector('[role="listbox"]').id);
-    });
-    // --- The reference cannot outlive what it names -------------------------
-    it('after filtering, the reference follows the surviving option', () => {
-        setup({ initialOpen: true });
-        type('duplicate');
-        const selected = options().find((el) => el.dataset.selected === 'true');
-        expect(selected.dataset.value).toBe('copy');
-        expect(activeId()).toBe(selected.id);
-    });
-    it('when nothing matches, there is no active option and no reference', () => {
-        setup({ initialOpen: true });
-        type('zzzzz');
-        expect(options()).toHaveLength(0);
-        expect(activeId()).toBeNull();
-    });
-    it('removing the active option leaves no dead reference', () => {
-        setup({
-            initialOpen: true,
-            initialEntries: [
-                { value: 'copy', label: 'Copy' },
-                { value: 'paste', label: 'Paste' },
-            ],
-        });
-        expect(options().find((el) => el.dataset.selected === 'true').dataset.value).toBe('copy');
-        // The consumer drops the option that is currently active.
-        instance.setEntries([{ value: 'paste', label: 'Paste' }]);
-        flushSync();
-        const id = activeId();
-        expect(id).not.toBeNull();
-        const named = document.getElementById(id);
-        expect(named).not.toBeNull();
-        expect(named.dataset.value).toBe('paste');
-    });
-    it('reopening after the options changed: no stale selection, no dead reference, no lost first arrow', () => {
-        const onSelect = vi.fn();
-        setup({
-            initialOpen: true,
-            onSelect,
-            initialEntries: [
-                { value: 'copy', label: 'Copy' },
-                { value: 'paste', label: 'Paste' },
-            ],
-        });
-        // Move the selection away from the first option, then close.
-        press('ArrowDown');
-        expect(options().find((el) => el.dataset.selected === 'true').dataset.value).toBe('paste');
-        instance.setOpen(false);
-        flushSync();
-        expect(activeId()).toBeNull();
-        // A completely different collection comes back.
-        instance.setEntries([
-            { value: 'rename', label: 'Rename' },
-            { value: 'delete', label: 'Delete' },
-        ]);
-        instance.setOpen(true);
-        flushSync();
-        const selected = options().find((el) => el.dataset.selected === 'true');
-        // Not the stale `paste`, which no longer exists.
-        expect(selected.dataset.value).toBe('rename');
-        expect(activeId()).toBe(selected.id);
-        // The first arrow MOVES; it is not spent recovering from a stale value.
-        press('ArrowDown');
-        expect(options().find((el) => el.dataset.selected === 'true').dataset.value).toBe('delete');
-        press('Enter');
-        expect(onSelect).toHaveBeenCalledTimes(1);
-        expect(onSelect).toHaveBeenCalledWith('delete');
-    });
-    // --- A retained query must survive a remount (review of #224, [P1]) -----
-    /**
-     * One symptom — zero options after a close and a reopen with the query still
-     * in the field — hiding TWO mechanisms, so each gets its own pin.
-     *
-     *  · `Command.Group` gated its children on `hasVisibleItems()`, a predicate
-     *    over the very registry those children fill. Empty registry + retained
-     *    query ⇒ children never mount ⇒ registry stays empty. A deadlock.
-     *  · An item's `isVisible` reads `getScore()` from a plain Map during
-     *    RENDER, while `registerItem` writes that score from an `$effect`, i.e.
-     *    afterwards. Nothing woke the derived, so a matching item stayed hidden.
-     *
-     * Both make `aria-activedescendant` name a node that is not in the document,
-     * which is why every pin here resolves the id rather than trusting it.
-     */
-    function activeElement() {
-        const id = activeId();
-        return id === null ? null : document.getElementById(id);
-    }
-    it('a query kept across a close and a reopen still renders its match, named and actionable', () => {
-        const onSelect = vi.fn();
-        setup({ initialOpen: true, onSelect });
-        type('duplicate');
-        expect(options().map((el) => el.dataset.value)).toEqual(['copy']);
-        instance.setOpen(false);
-        flushSync();
-        expect(options()).toHaveLength(0);
-        instance.setOpen(true);
-        flushSync();
-        expect(options().map((el) => el.dataset.value)).toEqual(['copy']);
-        // The reference resolves to a node that is really in the document.
-        expect(activeElement()).not.toBeNull();
-        expect(activeElement()).toBe(options()[0]);
-        press('Enter');
-        expect(onSelect).toHaveBeenCalledTimes(1);
-        expect(onSelect).toHaveBeenCalledWith('copy');
-    });
-    it('a query typed while CLOSED renders its match when an arrow opens the list', () => {
-        setup({ initialOpen: false });
-        type('duplicate');
-        expect(options()).toHaveLength(0);
-        press('ArrowDown');
-        expect(options().map((el) => el.dataset.value)).toEqual(['copy']);
-        expect(activeElement()).toBe(options()[0]);
-    });
-    it('same, with NO Command.Group: the item mechanism alone is enough to break it', () => {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(CommandInlineDirectTest, { target });
-        flushSync();
-        type('duplicate');
-        press('ArrowDown');
-        expect(options().map((el) => el.dataset.value)).toEqual(['copy']);
-        expect(activeElement()).not.toBeNull();
-        expect(activeElement()).toBe(options()[0]);
-    });
-    // --- Event composition --------------------------------------------------
-    it('a consumer onkeydown runs first and its preventDefault cancels the local handling', () => {
-        const onOpenChange = vi.fn();
-        setup({
-            initialOpen: false,
-            onOpenChange,
-            inputAttrs: { onkeydown: (e) => e.preventDefault() },
-        });
-        press('ArrowDown');
-        expect(onOpenChange).not.toHaveBeenCalled();
-        expect(instance.getOpen()).toBe(false);
-    });
-    it('a consumer onkeydown cannot retract a close already performed in the capture phase', () => {
-        const onEscapeKeydown = vi.fn();
-        setup({
-            initialOpen: true,
-            onEscapeKeydown,
-            inputAttrs: { onkeydown: (e) => e.preventDefault() },
-        });
-        press('Escape');
-        // The layer listens on `document` in capture — it read `defaultPrevented`
-        // before the input's handler ever ran. `onEscapeKeydown` is the hook.
-        expect(onEscapeKeydown).toHaveBeenCalledTimes(1);
-        expect(instance.getOpen()).toBe(false);
-    });
-    // --- Anchorable, and no focus trap --------------------------------------
-    it('renders IN PLACE with the inline chrome released, so results can be anchored', () => {
-        setup({ initialOpen: true });
-        const root = target.querySelector('.sp-command');
-        // In place — not portalled to document.body, which would break both the
-        // consumer's scoped CSS and any anchoring to the field.
-        expect(root.parentElement).not.toBe(document.body);
-        expect(target.contains(root)).toBe(true);
-        expect(root.dataset.mode).toBe('inline');
-        // The field and the results share one owner, which is what lets a consumer
-        // anchor the second to the first.
-        const field = root.querySelector('.sp-command-input-wrapper');
-        const list = root.querySelector('[role="listbox"]');
-        expect(field.parentElement).toBe(root);
-        expect(list.parentElement).toBe(root);
-        // Whether the released `overflow` really keeps the list unclipped is a
-        // LAYOUT fact, and this environment has no CSS at all — vite does not load
-        // the components' stylesheets into jsdom. It is proven in a real Chromium
-        // by `tests/e2e/command-inline.spec.ts`, on the docs page's live demo.
-    });
-    it('does not trap focus: an outside control keeps it', () => {
-        setup({ initialOpen: true });
-        const outside = document.createElement('button');
-        document.body.appendChild(outside);
-        outside.focus();
-        flushSync();
-        expect(document.activeElement).toBe(outside);
-        outside.remove();
-    });
-    it('the consumer names the field; the component keeps its structure', () => {
-        setup({
-            initialOpen: true,
-            inputAttrs: {
-                'aria-label': 'Site search',
-                'aria-describedby': 'hint-id',
-                title: 'Search',
-                'data-testid': 'field',
-                // Refused by the type; spread anyway to prove the markup order wins.
-                role: 'textbox',
-                id: 'consumer-id',
-                'aria-expanded': 'false',
-                'aria-activedescendant': 'nope',
-            },
-        });
-        const el = input();
-        // The consumer's naming and description reach the real combobox…
-        expect(el.getAttribute('aria-label')).toBe('Site search');
-        expect(el.getAttribute('aria-describedby')).toBe('hint-id');
-        expect(el.getAttribute('title')).toBe('Search');
-        expect(el.getAttribute('data-testid')).toBe('field');
-        // …while the structure stays the component's, whatever is spread.
-        expect(el.getAttribute('role')).toBe('combobox');
-        expect(el.id).not.toBe('consumer-id');
-        expect(el.getAttribute('aria-expanded')).toBe('true');
-        expect(el.getAttribute('aria-activedescendant')).not.toBe('nope');
-        expect(el.getAttribute('aria-activedescendant')).toBe(options().find((o) => o.dataset.selected === 'true').id);
-    });
-    it('exposes the wrapper through `wrapperClass` while `class` stays on the input', () => {
-        setup({ initialOpen: false });
-        const wrapper = target.querySelector('.sp-command-input-wrapper');
-        expect(wrapper.classList.contains('probe-wrapper')).toBe(true);
-        expect(input().classList.contains('probe-input')).toBe(true);
-        expect(input().classList.contains('probe-wrapper')).toBe(false);
-    });
-    // --- The default mode is untouched --------------------------------------
-    it('modal stays the default: closing unmounts the field itself', () => {
-        // `portalTo` keeps the modal content inside `target` for querying — the
-        // modal default is `document.body`, which is itself part of the contract.
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(CommandInlineTest, {
-            target,
-            props: { mode: 'modal', initialOpen: true, portalTo: target },
-        });
-        flushSync();
-        expect(input()).toBeTruthy();
-        expect(input().getAttribute('aria-expanded')).toBe('true');
-        instance.setOpen(false);
-        flushSync();
-        expect(target.querySelector('input')).toBeNull();
-        expect(target.querySelector('.sp-command')).toBeNull();
-    });
-});

package/dist/components/command/__tests__/command-item-passthrough.test.svelte.js

@@ -1,284 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import CommandTest from './CommandTest.svelte';
-// jsdom does not define PointerEvent — polyfill it for tests
-if (typeof globalThis.PointerEvent === 'undefined') {
-    // @ts-expect-error — minimal polyfill for testing
-    globalThis.PointerEvent = class PointerEvent extends MouseEvent {
-        constructor(type, init) {
-            super(type, init);
-        }
-    };
-}
-/**
- * spectral-ui#205 — `Command.Item` forwards native HTML attributes and handlers
- * to its real `role="option"` node.
- *
- * Contract pinned here:
- *  - consumer attributes (`title`, `aria-*`, `data-testid`, `style`, …) reach
- *    the option, and a value reassigned by the parent AFTER mount is reflected;
- *  - the option's IDENTITY stays under the component's control: `role`, `id`,
- *    `tabindex`, `aria-selected`, `aria-disabled` and the internal `data-*`
- *    (`data-command-item`, `data-value`, `data-selected`, `data-disabled`)
- *    cannot be overridden — the spread comes FIRST, the identity comes after;
- *  - native handlers COMPOSE with the built-in behaviour: the consumer's runs
- *    first, `preventDefault()` cancels the Spectral selection, `onSelect` only
- *    fires after a real selection;
- *  - activation of a disabled row is inert: consumer `onclick` / `onkeydown` do
- *    not run either, while `onpointermove` stays observable (a dimmed row can
- *    still be hovered) without ever selecting the row.
- *
- * Tests titled `guard —` were already green on the pre-#205 tree (nothing was
- * forwarded, so nothing could be overridden, leaked or mis-composed); their
- * discriminating power comes from the mutant campaign below, each mutant
- * applied alone on the final tree and killed by the named test(s):
- *  - spread placed LAST → identity guard, Enter-from-input guard
- *  - rest not spread → forwarding, post-mount reactivity, identity
- *  - `keywords` left in rest → no-leak guard
- *  - consumer handler run BEFORE the disabled guard → disabled-inert guard
- *  - onclick / onkeydown / onpointermove ignore `defaultPrevented` → cancel pins
- *  - onkeydown not composed → onkeydown compose + cancel
- *  - rest captured statically at init → post-mount reactivity
- *  - `data-command-item` rendered boolean → identity
- *  - onpointermove guarded on disabled → disabled-observable pin
- *  - hover routed through `select()` → hover-does-not-fire-onSelect guard
- *  - Space branch dropped → Space activation guard
- *  - disabled keydown returns before `preventDefault()` → disabled-Space pin
- *  - `'id'` dropped from the type's `Omit` → `src/__typecheck__` pin
- *
- * Keyboard note: Enter pressed in the INPUT activates the selected option
- * through a synthetic `click()` (command-input.svelte), so a consumer observes
- * that path through `onclick`, not `onkeydown`.
- */
-describe('command item — native attribute passthrough (#205)', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(CommandTest, { target, props: { portalTo: target, ...props } });
-        flushSync();
-        flushSync(); // $effect item registration
-        return target;
-    }
-    const option = (value) => target.querySelector(`[role="option"][data-value="${value}"]`);
-    const input = () => target.querySelector('input[role="combobox"]');
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    // ── Forwarding ────────────────────────────────────────────────────────
-    it('forwards consumer HTML attributes to the option element', () => {
-        setup({
-            itemAttrs: {
-                title: 'Copy the selection',
-                'aria-label': 'Copy',
-                'aria-describedby': 'copy-hint',
-                'data-testid': 'opt-copy',
-                style: 'color: red',
-            },
-        });
-        const el = option('copy');
-        expect(el.getAttribute('title')).toBe('Copy the selection');
-        expect(el.getAttribute('aria-label')).toBe('Copy');
-        expect(el.getAttribute('aria-describedby')).toBe('copy-hint');
-        expect(el.getAttribute('data-testid')).toBe('opt-copy');
-        expect(el.style.color).toBe('red');
-    });
-    it('reflects a consumer attribute reassigned by the parent after mount', () => {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        const props = $state({
-            portalTo: target,
-            itemAttrs: { title: 'Before', 'aria-describedby': 'hint-before' },
-        });
-        instance = mount(CommandTest, { target, props });
-        flushSync();
-        expect(option('copy').getAttribute('title')).toBe('Before');
-        props.itemAttrs = { title: 'After', 'aria-describedby': 'hint-after' };
-        flushSync();
-        expect(option('copy').getAttribute('title')).toBe('After');
-        expect(option('copy').getAttribute('aria-describedby')).toBe('hint-after');
-    });
-    it('guard — keeps the DS class alongside a consumer class', () => {
-        setup({ itemAttrs: { class: 'mine' } });
-        const el = option('copy');
-        expect(el.classList.contains('sp-command-item')).toBe(true);
-        expect(el.classList.contains('mine')).toBe(true);
-    });
-    // ── Identity stays ours ───────────────────────────────────────────────
-    it('keeps its identity attributes when a consumer tries to override them', () => {
-        setup({
-            itemAttrs: {
-                role: 'menuitem',
-                id: 'consumer-id',
-                tabindex: 0,
-                'aria-selected': 'false',
-                'aria-disabled': 'true',
-                'data-selected': 'false',
-                'data-value': 'leak',
-                'data-disabled': '',
-                'data-command-item': 'nope',
-                'data-testid': 'still-forwarded',
-            },
-        });
-        // `copy` is the first enabled item → auto-selected.
-        const el = target.querySelector('[data-testid="still-forwarded"]');
-        expect(el).toBeTruthy();
-        expect(el.getAttribute('role')).toBe('option');
-        expect(el.id).toMatch(/^sp-command-item-\d+$/);
-        expect(el.getAttribute('tabindex')).toBe('-1');
-        expect(el.getAttribute('aria-selected')).toBe('true');
-        expect(el.hasAttribute('aria-disabled')).toBe(false);
-        expect(el.getAttribute('data-selected')).toBe('true');
-        expect(el.getAttribute('data-value')).toBe('copy');
-        expect(el.hasAttribute('data-disabled')).toBe(false);
-        // `data-command-item` keeps its shipped form: present, empty-valued.
-        expect(el.hasAttribute('data-command-item')).toBe(true);
-        expect(el.getAttribute('data-command-item')).toBe('');
-    });
-    it('guard — Enter in the input activates the item Spectral selected, whatever the consumer claims', () => {
-        const selected = [];
-        setup({
-            itemAttrs: { 'data-selected': 'false' },
-            onItemSelect: (v) => selected.push(v),
-        });
-        input().dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
-        flushSync();
-        expect(selected).toEqual(['copy']);
-    });
-    it('guard — does not leak component props to the DOM', () => {
-        setup({ onItemSelect: () => { } });
-        const copy = option('copy');
-        // (`on*` keys never surface as attributes in Svelte, so only these can fail.)
-        for (const attr of ['value', 'keywords']) {
-            expect(copy.hasAttribute(attr)).toBe(false);
-        }
-        expect(option('settings').hasAttribute('disabled')).toBe(false);
-    });
-    // ── Handler composition ───────────────────────────────────────────────
-    it('composes a consumer onclick with the built-in selection (consumer first)', () => {
-        const seen = [];
-        setup({
-            itemAttrs: { onclick: () => seen.push('consumer') },
-            onItemSelect: (v) => seen.push(`selected:${v}`),
-        });
-        option('copy').click();
-        flushSync();
-        expect(seen).toEqual(['consumer', 'selected:copy']);
-    });
-    it('lets a consumer onclick cancel the selection with preventDefault', () => {
-        const selected = [];
-        setup({
-            itemAttrs: { onclick: (e) => e.preventDefault() },
-            onItemSelect: (v) => selected.push(v),
-        });
-        // Move the selection away first, so a (wrongly) successful click is visible.
-        input().dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
-        flushSync();
-        expect(option('paste').getAttribute('data-selected')).toBe('true');
-        option('copy').click();
-        flushSync();
-        expect(selected).toEqual([]);
-        expect(option('copy').getAttribute('data-selected')).toBe('false');
-        expect(option('paste').getAttribute('data-selected')).toBe('true');
-    });
-    it('composes a consumer onkeydown with Enter on the option (consumer first)', () => {
-        const seen = [];
-        setup({
-            itemAttrs: { onkeydown: () => seen.push('consumer') },
-            onItemSelect: (v) => seen.push(`selected:${v}`),
-        });
-        option('copy').dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }));
-        flushSync();
-        expect(seen).toEqual(['consumer', 'selected:copy']);
-    });
-    it('guard — composes a consumer onkeydown with Space on the option (consumer first)', () => {
-        const seen = [];
-        setup({
-            itemAttrs: { onkeydown: () => seen.push('consumer') },
-            onItemSelect: (v) => seen.push(`selected:${v}`),
-        });
-        option('copy').dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true, cancelable: true }));
-        flushSync();
-        expect(seen).toEqual(['consumer', 'selected:copy']);
-    });
-    it('lets a consumer onkeydown cancel the Enter/Space activation with preventDefault', () => {
-        const selected = [];
-        setup({
-            itemAttrs: { onkeydown: (e) => e.preventDefault() },
-            onItemSelect: (v) => selected.push(v),
-        });
-        option('copy').dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true, cancelable: true }));
-        flushSync();
-        expect(selected).toEqual([]);
-    });
-    it('composes a consumer onpointermove with the hover-selection — which never fires onSelect', () => {
-        const seen = [];
-        setup({
-            itemAttrs: { onpointermove: () => seen.push('consumer') },
-            onItemSelect: (v) => seen.push(`selected:${v}`),
-        });
-        // Start from a different selection so the hover-select is observable.
-        input().dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
-        flushSync();
-        expect(option('paste').getAttribute('data-selected')).toBe('true');
-        option('copy').dispatchEvent(new PointerEvent('pointermove', { bubbles: true, cancelable: true }));
-        flushSync();
-        expect(seen).toEqual(['consumer']);
-        expect(option('copy').getAttribute('data-selected')).toBe('true');
-    });
-    it('lets a consumer onpointermove cancel the hover-selection with preventDefault', () => {
-        setup({ itemAttrs: { onpointermove: (e) => e.preventDefault() } });
-        input().dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
-        flushSync();
-        option('copy').dispatchEvent(new PointerEvent('pointermove', { bubbles: true, cancelable: true }));
-        flushSync();
-        expect(option('copy').getAttribute('data-selected')).toBe('false');
-        expect(option('paste').getAttribute('data-selected')).toBe('true');
-    });
-    // ── Disabled: activation inert, hover observable ──────────────────────
-    it('guard — activation of a disabled item is inert: consumer onclick/onkeydown do not run', () => {
-        const seen = [];
-        setup({
-            disabledItemAttrs: {
-                onclick: () => seen.push('click'),
-                onkeydown: () => seen.push('keydown'),
-            },
-            onDisabledItemSelect: (v) => seen.push(`selected:${v}`),
-        });
-        const settings = option('settings');
-        settings.click();
-        settings.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
-        flushSync();
-        expect(seen).toEqual([]);
-        expect(option('copy').getAttribute('data-selected')).toBe('true');
-        expect(settings.getAttribute('data-selected')).toBe('false');
-    });
-    it('still prevents the Space default on a focused disabled item, without running the consumer onkeydown', () => {
-        const seen = [];
-        setup({ disabledItemAttrs: { onkeydown: () => seen.push('keydown') } });
-        const event = new KeyboardEvent('keydown', { key: ' ', bubbles: true, cancelable: true });
-        option('settings').dispatchEvent(event);
-        flushSync();
-        // Pre-#205 the item prevented Enter/Space before bailing on `disabled`,
-        // so Space on a dimmed, focused row never scrolled the list.
-        expect(event.defaultPrevented).toBe(true);
-        expect(seen).toEqual([]);
-        expect(option('copy').getAttribute('data-selected')).toBe('true');
-    });
-    it('keeps a consumer onpointermove observable on a disabled item without selecting it', () => {
-        const seen = [];
-        setup({
-            disabledItemAttrs: { onpointermove: () => seen.push('move') },
-            onDisabledItemSelect: (v) => seen.push(`selected:${v}`),
-        });
-        const settings = option('settings');
-        settings.dispatchEvent(new PointerEvent('pointermove', { bubbles: true, cancelable: true }));
-        flushSync();
-        expect(seen).toEqual(['move']);
-        expect(settings.getAttribute('data-selected')).toBe('false');
-        expect(option('copy').getAttribute('data-selected')).toBe('true');
-    });
-});