@spectral_labs/ui 1.6.1 → 1.8.0-next.0

package/dist/components/dialog/__tests__/dialog.test.svelte.js

@@ -1,184 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import DialogRoot from '../components/dialog-root.svelte';
-import DialogTest from './DialogTest.svelte';
-describe('dialog', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        // Pass portalTo=target by default so existing tests keep querying `target`
-        instance = mount(DialogTest, { target, props: { portalTo: target, ...props } });
-        flushSync();
-        return target;
-    }
-    function setupRoot(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(DialogRoot, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    // --- Basic rendering ---
-    it('renders root', () => {
-        setupRoot();
-        expect(target.querySelector('.sp-dialog-root')).toBeTruthy();
-    });
-    it('data-state is closed by default', () => {
-        setupRoot();
-        expect(target.querySelector('.sp-dialog-root')?.getAttribute('data-state')).toBe('closed');
-    });
-    // --- Trigger ARIA ---
-    it('trigger has aria-haspopup="dialog"', () => {
-        setup();
-        const trigger = target.querySelector('.sp-dialog-trigger');
-        expect(trigger?.getAttribute('aria-haspopup')).toBe('dialog');
-    });
-    it('trigger has aria-expanded=false when closed', () => {
-        setup();
-        const trigger = target.querySelector('.sp-dialog-trigger');
-        expect(trigger?.getAttribute('aria-expanded')).toBe('false');
-    });
-    it('trigger has aria-controls pointing to content id', () => {
-        setup({ open: true });
-        const trigger = target.querySelector('.sp-dialog-trigger');
-        const content = target.querySelector('[role="dialog"]');
-        expect(trigger?.getAttribute('aria-controls')).toBe(content?.id);
-    });
-    it('trigger toggles open state on click', () => {
-        setup();
-        const trigger = target.querySelector('.sp-dialog-trigger');
-        trigger.click();
-        flushSync();
-        expect(target.querySelector('.sp-dialog-root')?.getAttribute('data-state')).toBe('open');
-    });
-    // --- Content ARIA ---
-    it('content has role="dialog"', () => {
-        setup({ open: true });
-        expect(target.querySelector('[role="dialog"]')).toBeTruthy();
-    });
-    it('content has aria-modal="true"', () => {
-        setup({ open: true });
-        const content = target.querySelector('[role="dialog"]');
-        expect(content?.getAttribute('aria-modal')).toBe('true');
-    });
-    it('content has aria-labelledby pointing to title', () => {
-        setup({ open: true });
-        const content = target.querySelector('[role="dialog"]');
-        const title = target.querySelector('.sp-dialog-title');
-        expect(content?.getAttribute('aria-labelledby')).toBe(title?.id);
-    });
-    it('content has aria-describedby pointing to description', () => {
-        setup({ open: true });
-        const content = target.querySelector('[role="dialog"]');
-        const desc = target.querySelector('.sp-dialog-description');
-        expect(content?.getAttribute('aria-describedby')).toBe(desc?.id);
-    });
-    it('content has data-state="open" when open', () => {
-        setup({ open: true });
-        const content = target.querySelector('[role="dialog"]');
-        expect(content?.getAttribute('data-state')).toBe('open');
-    });
-    // --- Content visibility ---
-    it('content is not rendered when closed', () => {
-        setup({ open: false });
-        expect(target.querySelector('[role="dialog"]')).toBeNull();
-    });
-    it('content is rendered when open', () => {
-        setup({ open: true });
-        expect(target.querySelector('[role="dialog"]')).toBeTruthy();
-    });
-    // --- Overlay ---
-    it('overlay has aria-hidden="true"', () => {
-        setup({ open: true });
-        const overlay = target.querySelector('.sp-dialog-overlay');
-        expect(overlay?.getAttribute('aria-hidden')).toBe('true');
-    });
-    // --- Close button ---
-    it('close button closes the dialog', () => {
-        setup({ open: true });
-        const closeBtn = target.querySelector('.sp-dialog-close');
-        closeBtn.click();
-        flushSync();
-        expect(target.querySelector('[role="dialog"]')).toBeNull();
-    });
-    // --- Escape key ---
-    it('escape key closes the dialog', () => {
-        setup({ open: true });
-        // Flush to ensure $effect that mounts EscapeLayerState has run
-        flushSync();
-        expect(target.querySelector('[role="dialog"]')).toBeTruthy();
-        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }));
-        flushSync();
-        expect(target.querySelector('[role="dialog"]')).toBeNull();
-    });
-    // --- Title ---
-    it('title renders as h2 by default', () => {
-        setup({ open: true });
-        const title = target.querySelector('.sp-dialog-title');
-        expect(title?.tagName).toBe('H2');
-    });
-    // --- Description ---
-    it('description renders as <p>', () => {
-        setup({ open: true });
-        const desc = target.querySelector('.sp-dialog-description');
-        expect(desc?.tagName).toBe('P');
-    });
-    // --- Trigger aria-expanded updates ---
-    it('trigger aria-expanded becomes true when dialog opens', () => {
-        setup();
-        const trigger = target.querySelector('.sp-dialog-trigger');
-        expect(trigger.getAttribute('aria-expanded')).toBe('false');
-        trigger.click();
-        flushSync();
-        expect(trigger.getAttribute('aria-expanded')).toBe('true');
-    });
-    // --- Portal ---
-    it('portals content to document.body by default when open', () => {
-        const t = document.createElement('div');
-        t.id = 'dialog-host';
-        document.body.appendChild(t);
-        const inst = mount(DialogTest, { target: t, props: { open: true } });
-        flushSync();
-        try {
-            expect(t.querySelector('[role="dialog"]')).toBeNull();
-            expect(document.body.querySelector('[role="dialog"]')).toBeTruthy();
-        }
-        finally {
-            unmount(inst);
-            t.remove();
-        }
-    });
-    it('renders content inline when portalTo is explicitly set to the host', () => {
-        const t = document.createElement('div');
-        document.body.appendChild(t);
-        const inst = mount(DialogTest, {
-            target: t,
-            props: { open: true, portalTo: t },
-        });
-        flushSync();
-        try {
-            expect(t.querySelector('[role="dialog"]')).toBeTruthy();
-        }
-        finally {
-            unmount(inst);
-            t.remove();
-        }
-    });
-    // --- Presentation prop ---
-    it('sets data-presentation attribute matching prop', () => {
-        setup({ open: true, presentation: 'fullscreen-mobile' });
-        const content = target.querySelector('[role="dialog"]');
-        expect(content?.getAttribute('data-presentation')).toBe('fullscreen-mobile');
-    });
-    it('defaults data-presentation to "dialog"', () => {
-        setup({ open: true });
-        const content = target.querySelector('[role="dialog"]');
-        expect(content?.getAttribute('data-presentation')).toBe('dialog');
-    });
-});

package/dist/components/drop-zone/__tests__/drop-zone.test.svelte.js

@@ -1,26 +0,0 @@
-import { mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
-import DropZone from '../drop-zone.svelte';
-describe('drop-zone', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(DropZone, { target, props });
-        return target;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        target?.remove();
-    });
-    it('renders with role=button', () => {
-        setup();
-        expect(target.querySelector('[role="button"]')).toBeTruthy();
-    });
-    it('has tabindex', () => {
-        setup();
-        expect(target.querySelector('[tabindex]')).toBeTruthy();
-    });
-});

package/dist/components/dropdown-menu/__tests__/DropdownMenuRadioTest.svelte

@@ -1,90 +0,0 @@
-<script lang="ts">
-  import DropdownMenuContent from '../components/dropdown-menu-content.svelte'
-  import DropdownMenuItem from '../components/dropdown-menu-item.svelte'
-  import DropdownMenuRadioGroup from '../components/dropdown-menu-radio-group.svelte'
-  import DropdownMenuRadioItem from '../components/dropdown-menu-radio-item.svelte'
-  import DropdownMenuRoot from '../components/dropdown-menu-root.svelte'
-  import DropdownMenuTrigger from '../components/dropdown-menu-trigger.svelte'
-
-  let {
-    open = $bindable(true),
-    value = $bindable('document'),
-    portalTo,
-    onValueChange,
-    closeOnSelect = undefined,
-    disabledValue = undefined,
-    textValues = undefined,
-    itemAttrs = undefined,
-    onItemClick = undefined,
-    withLeadingItem = false,
-    orphan = false,
-    groupAttrs = undefined,
-    onItemKeydown = undefined,
-    onItemSelect = undefined,
-    parentTarget = 'bibliographie',
-  }: {
-    open?: boolean
-    value?: string
-    portalTo?: HTMLElement | string
-    onValueChange?: (value: string) => void
-    closeOnSelect?: boolean
-    /** Value of the single item rendered disabled. */
-    disabledValue?: string
-    /** Per-value `textValue` overrides for typeahead. */
-    textValues?: Record<string, string>
-    /** Arbitrary HTML attributes spread onto the `placeholders` item. */
-    itemAttrs?: Record<string, unknown>
-    /** Consumer-supplied click handler on the `placeholders` item. */
-    onItemClick?: (event: MouseEvent) => void
-    /** A plain Item BEFORE the group — proves roving spans both kinds. */
-    withLeadingItem?: boolean
-    /** Renders a RadioItem with NO enclosing RadioGroup (guard-rail case). */
-    orphan?: boolean
-    /** Arbitrary HTML attributes spread onto the `role="group"` node. */
-    groupAttrs?: Record<string, unknown>
-    /** Consumer-supplied keydown handler on the `placeholders` item. */
-    onItemKeydown?: (event: KeyboardEvent) => void
-    /** Consumer-supplied `onSelect` on the `placeholders` item. */
-    onItemSelect?: (event: Event) => void
-    /** Value the PARENT-driven button assigns (see `parent-set` below). */
-    parentTarget?: string
-  } = $props()
-
-  const OPTIONS = [
-    { value: 'document', label: 'Document' },
-    { value: 'placeholders', label: 'Placeholders' },
-    { value: 'bibliographie', label: 'Bibliographie' },
-  ]
-</script>
-
-<!-- Lives OUTSIDE the menu: clicking it is the PARENT moving `value`, the
-     one path that must move the checked row without any notification. -->
-<button data-testid="parent-set" onclick={() => (value = parentTarget)}>set from parent</button>
-
-<DropdownMenuRoot bind:open>
-  <DropdownMenuTrigger>Affichage</DropdownMenuTrigger>
-  <DropdownMenuContent {portalTo}>
-    {#if withLeadingItem}
-      <DropdownMenuItem>Plan</DropdownMenuItem>
-    {/if}
-    {#if orphan}
-      <DropdownMenuRadioItem value="orphan">Orphan</DropdownMenuRadioItem>
-    {/if}
-    <DropdownMenuRadioGroup bind:value {onValueChange} {...groupAttrs ?? {}}>
-      {#each OPTIONS as option (option.value)}
-        <DropdownMenuRadioItem
-          value={option.value}
-          disabled={option.value === disabledValue}
-          textValue={textValues?.[option.value]}
-          {closeOnSelect}
-          onclick={option.value === 'placeholders' ? onItemClick : undefined}
-          onkeydown={option.value === 'placeholders' ? onItemKeydown : undefined}
-          onSelect={option.value === 'placeholders' ? onItemSelect : undefined}
-          {...option.value === 'placeholders' ? (itemAttrs ?? {}) : {}}
-        >
-          {option.label}
-        </DropdownMenuRadioItem>
-      {/each}
-    </DropdownMenuRadioGroup>
-  </DropdownMenuContent>
-</DropdownMenuRoot>

package/dist/components/dropdown-menu/__tests__/DropdownMenuTest.svelte

@@ -1,71 +0,0 @@
-<script lang="ts">
-  import DropdownMenuCheckboxItem from '../components/dropdown-menu-checkbox-item.svelte'
-  import DropdownMenuContent from '../components/dropdown-menu-content.svelte'
-  import DropdownMenuItem from '../components/dropdown-menu-item.svelte'
-  import DropdownMenuRoot from '../components/dropdown-menu-root.svelte'
-  import DropdownMenuSubContent from '../components/dropdown-menu-sub-content.svelte'
-  import DropdownMenuSubTrigger from '../components/dropdown-menu-sub-trigger.svelte'
-  import DropdownMenuSub from '../components/dropdown-menu-sub.svelte'
-  import DropdownMenuTrigger from '../components/dropdown-menu-trigger.svelte'
-
-  let {
-    open = $bindable(false),
-    portalTo,
-    onOpenChange,
-    withSub = false,
-    subFirst = false,
-    subDisabled = false,
-    subTextValue = undefined,
-    withCheckbox = false,
-    withSecondSub = false,
-  }: {
-    open?: boolean
-    portalTo?: HTMLElement | string
-    onOpenChange?: (open: boolean) => void
-    withSub?: boolean
-    subFirst?: boolean
-    subDisabled?: boolean
-    subTextValue?: string
-    withCheckbox?: boolean
-    withSecondSub?: boolean
-  } = $props()
-</script>
-
-{#snippet subBlock()}
-  <DropdownMenuSub>
-    <DropdownMenuSubTrigger disabled={subDisabled} textValue={subTextValue}
-      >More options</DropdownMenuSubTrigger
-    >
-    <DropdownMenuSubContent>
-      <DropdownMenuItem>Sub Item 1</DropdownMenuItem>
-      <DropdownMenuItem>Sub Item 2</DropdownMenuItem>
-    </DropdownMenuSubContent>
-  </DropdownMenuSub>
-{/snippet}
-
-<DropdownMenuRoot bind:open {onOpenChange}>
-  <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
-  <DropdownMenuContent {portalTo}>
-    {#if withSub && subFirst}
-      {@render subBlock()}
-    {/if}
-    <DropdownMenuItem>Item 1</DropdownMenuItem>
-    <DropdownMenuItem>Item 2</DropdownMenuItem>
-    <DropdownMenuItem>Item 3</DropdownMenuItem>
-    {#if withCheckbox}
-      <DropdownMenuCheckboxItem>Notifications</DropdownMenuCheckboxItem>
-    {/if}
-    {#if withSub && !subFirst}
-      {@render subBlock()}
-    {/if}
-    {#if withSecondSub}
-      <DropdownMenuSub>
-        <DropdownMenuSubTrigger>Other options</DropdownMenuSubTrigger>
-        <DropdownMenuSubContent>
-          <DropdownMenuItem>Sub B Item 1</DropdownMenuItem>
-          <DropdownMenuItem>Sub B Item 2</DropdownMenuItem>
-        </DropdownMenuSubContent>
-      </DropdownMenuSub>
-    {/if}
-  </DropdownMenuContent>
-</DropdownMenuRoot>

package/dist/components/dropdown-menu/__tests__/dropdown-menu-radio-group.test.svelte.js

@@ -1,306 +0,0 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import DropdownMenuRadioTest from './DropdownMenuRadioTest.svelte';
-/**
- * `DropdownMenu.RadioGroup` / `RadioItem` — the single-choice row family.
- *
- * These rows exist because a menu that offers "pick exactly one of N" had no
- * honest markup here: `CheckboxItem` announces `menuitemcheckbox`, which tells
- * a screen-reader user the options are independent when they are not.
- *
- * The suite also pins the two properties this family is REQUIRED to have from
- * birth, and which the older rows lack (spectral-ui#201): consumer HTML
- * attributes reach the DOM node, and a consumer event handler COMPOSES with
- * the built-in one instead of being dropped.
- */
-describe('dropdown-menu radio group', () => {
-    let target;
-    let instance;
-    function setup(props = {}) {
-        target = document.createElement('div');
-        document.body.appendChild(target);
-        instance = mount(DropdownMenuRadioTest, {
-            target,
-            props: { portalTo: target, ...props },
-        });
-        flushSync();
-        return target;
-    }
-    function radios() {
-        return Array.from(target.querySelectorAll('[role="menuitemradio"]'));
-    }
-    function radio(value) {
-        const el = target.querySelector(`[role="menuitemradio"][data-value="${value}"]`);
-        if (!el)
-            throw new Error(`no radio item for value "${value}"`);
-        return el;
-    }
-    /** Same idiom as `dropdown-menu.test.svelte.ts`: drive the REAL focused
-     *  element, so the Content -> collection -> focus chain is exercised rather
-     *  than merely inspected. */
-    function pressKey(key) {
-        const el = document.activeElement;
-        el.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true }));
-        flushSync();
-    }
-    function activeValue() {
-        return document.activeElement?.getAttribute('data-value') ?? null;
-    }
-    afterEach(() => {
-        if (instance)
-            unmount(instance);
-        instance = undefined;
-        target?.remove();
-    });
-    // ── ARIA ──────────────────────────────────────────────────────────────
-    it('wraps its rows in role="group" — never role="radiogroup", invalid inside a menu', () => {
-        setup();
-        expect(target.querySelector('.sp-dropdown-menu-radio-group')?.getAttribute('role')).toBe('group');
-        // The ratified contract FORBIDS `radiogroup`: a `menu` may only own
-        // menuitem / menuitemcheckbox / menuitemradio / group / separator.
-        expect(target.querySelector('[role="radiogroup"]')).toBeNull();
-        const items = radios();
-        expect(items).toHaveLength(3);
-        expect(items.map((el) => el.getAttribute('aria-checked'))).toEqual(['true', 'false', 'false']);
-    });
-    it('reflects the selected value in data-state, for styling parity with CheckboxItem', () => {
-        setup();
-        expect(radio('document').getAttribute('data-state')).toBe('checked');
-        expect(radio('placeholders').getAttribute('data-state')).toBe('unchecked');
-    });
-    it('moves the checked row when the PARENT changes `value` after mount', () => {
-        // Mounting straight at the target value would stay green even if the group
-        // snapshotted the prop at init — the move has to happen AFTER mount, driven
-        // from outside, with the menu open.
-        const calls = [];
-        setup({ onValueChange: (v) => calls.push(v) });
-        expect(radios().map((el) => el.getAttribute('aria-checked'))).toEqual([
-            'true',
-            'false',
-            'false',
-        ]);
-        target.querySelector('[data-testid="parent-set"]').click();
-        flushSync();
-        expect(radios().map((el) => el.getAttribute('aria-checked'))).toEqual([
-            'false',
-            'false',
-            'true',
-        ]);
-        expect(radio('bibliographie').getAttribute('data-state')).toBe('checked');
-        // The parent moved it; the group has nothing to report back.
-        expect(calls).toEqual([]);
-    });
-    // ── Selection ─────────────────────────────────────────────────────────
-    // `closeOnSelect: false` in the selection tests below is not incidental: the
-    // default closes the menu, which unmounts the rows — a post-click assertion
-    // on `aria-checked` would then fail for the wrong reason. Closing has its
-    // own test.
-    it('selects on click and notifies once with the new value', () => {
-        const calls = [];
-        let selects = 0;
-        setup({
-            closeOnSelect: false,
-            onItemSelect: () => selects++,
-            onValueChange: (v) => calls.push(v),
-        });
-        radio('placeholders').click();
-        flushSync();
-        expect(calls).toEqual(['placeholders']);
-        expect(radio('placeholders').getAttribute('aria-checked')).toBe('true');
-        expect(radio('document').getAttribute('aria-checked')).toBe('false');
-        // Proves the `onSelect` wiring is live — without this, the `select: 0` of
-        // the disabled test below would hold no matter what the component did.
-        expect(selects).toBe(1);
-    });
-    it('does NOT re-notify when the already-selected row is chosen again', () => {
-        const calls = [];
-        setup({ onValueChange: (v) => calls.push(v) });
-        radio('document').click();
-        flushSync();
-        expect(calls).toEqual([]);
-    });
-    it('selects on Enter and on Space', () => {
-        const calls = [];
-        setup({ closeOnSelect: false, onValueChange: (v) => calls.push(v) });
-        radio('placeholders').dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
-        flushSync();
-        expect(calls).toEqual(['placeholders']);
-        radio('bibliographie').dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }));
-        flushSync();
-        expect(calls).toEqual(['placeholders', 'bibliographie']);
-    });
-    it('closes the menu after a selection, and keeps it open when closeOnSelect is false', () => {
-        setup();
-        radio('placeholders').click();
-        flushSync();
-        expect(target.querySelector('[role="menu"]')).toBeNull();
-        unmount(instance);
-        instance = undefined;
-        target.remove();
-        setup({ closeOnSelect: false });
-        radio('placeholders').click();
-        flushSync();
-        expect(target.querySelector('[role="menu"]')).toBeTruthy();
-    });
-    // ── Disabled ──────────────────────────────────────────────────────────
-    it('a disabled row is TOTALLY inert — the consumer handler does not run either', () => {
-        const counts = { click: 0, keydown: 0, select: 0, change: 0 };
-        setup({
-            disabledValue: 'placeholders',
-            onItemClick: () => counts.click++,
-            onItemKeydown: () => counts.keydown++,
-            onItemSelect: () => counts.select++,
-            onValueChange: () => counts.change++,
-        });
-        const disabled = radio('placeholders');
-        expect(disabled.getAttribute('aria-disabled')).toBe('true');
-        expect(disabled.hasAttribute('data-disabled')).toBe(true);
-        disabled.click();
-        flushSync();
-        disabled.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
-        flushSync();
-        disabled.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }));
-        flushSync();
-        // A dimmed, unselectable row that still fires an application effect is not
-        // disabled — it only LOOKS disabled.
-        expect(counts).toEqual({ click: 0, keydown: 0, select: 0, change: 0 });
-        expect(disabled.getAttribute('aria-checked')).toBe('false');
-        // ... and none of it dismissed the menu.
-        expect(target.querySelector('[role="menu"]')).toBeTruthy();
-        // `getOwnLevelMenuItems` filters on `[data-roving-focus-item]:not([data-disabled])`.
-        const rovable = target.querySelectorAll('[data-roving-focus-item]:not([data-disabled])');
-        expect(Array.from(rovable)).not.toContain(disabled);
-    });
-    // ── Keyboard: the chain, not the wiring ───────────────────────────────
-    //
-    // The `data-*` hooks below can all be present while the
-    // Content -> collection -> focus chain is broken, so these drive the real
-    // focused element instead of asserting attributes.
-    it('is reachable by ArrowDown from a plain Item, and Enter selects the FOCUSED row', () => {
-        const calls = [];
-        setup({
-            withLeadingItem: true,
-            closeOnSelect: false,
-            onValueChange: (v) => calls.push(v),
-        });
-        // Opening autofocuses the first roving row — the plain Item.
-        expect(document.activeElement?.textContent?.trim()).toBe('Plan');
-        pressKey('ArrowDown');
-        expect(document.activeElement?.getAttribute('role')).toBe('menuitemradio');
-        expect(activeValue()).toBe('document');
-        pressKey('ArrowDown');
-        expect(activeValue()).toBe('placeholders');
-        pressKey('Enter');
-        expect(calls).toEqual(['placeholders']);
-        expect(radio('placeholders').getAttribute('aria-checked')).toBe('true');
-    });
-    it('roving SKIPS a disabled row on ArrowDown', () => {
-        setup({ withLeadingItem: true, disabledValue: 'placeholders' });
-        expect(document.activeElement?.textContent?.trim()).toBe('Plan');
-        pressKey('ArrowDown');
-        expect(activeValue()).toBe('document');
-        pressKey('ArrowDown');
-        // `placeholders` is disabled — roving lands on the next enabled row.
-        expect(activeValue()).toBe('bibliographie');
-    });
-    it('typeahead focuses the matching row, and `textValue` redirects the match', () => {
-        setup({ withLeadingItem: true });
-        pressKey('b');
-        expect(activeValue()).toBe('bibliographie');
-        unmount(instance);
-        instance = undefined;
-        target.remove();
-        // With the override, `Bibliographie` no longer answers to `b` — and no
-        // other row does, so focus stays put.
-        setup({ withLeadingItem: true, textValues: { bibliographie: 'zzz' } });
-        const before = document.activeElement;
-        pressKey('b');
-        expect(document.activeElement).toBe(before);
-        // Remount before the second probe: typeahead ACCUMULATES a buffer, so a
-        // `z` typed after a failed `b` searches for "bz" and would match nothing —
-        // the test would then pass or fail for a reason unrelated to `textValue`.
-        unmount(instance);
-        instance = undefined;
-        target.remove();
-        setup({ withLeadingItem: true, textValues: { bibliographie: 'zzz' } });
-        pressKey('z');
-        expect(activeValue()).toBe('bibliographie');
-    });
-    // ── Roving focus + typeahead wiring ───────────────────────────────────
-    it('joins the roving collection alongside plain items', () => {
-        setup({ withLeadingItem: true });
-        const rovable = Array.from(target.querySelectorAll('[data-roving-focus-item]:not([data-disabled])'));
-        // Plan + the three radio rows, in document order.
-        expect(rovable).toHaveLength(4);
-        expect(rovable[0].getAttribute('role')).toBe('menuitem');
-        expect(rovable.slice(1).map((el) => el.getAttribute('role'))).toEqual([
-            'menuitemradio',
-            'menuitemradio',
-            'menuitemradio',
-        ]);
-    });
-    it('exposes its label to typeahead, and lets `textValue` override it', () => {
-        setup({ textValues: { bibliographie: 'zzz' } });
-        // No override → the content's typeahead falls back to textContent.
-        expect(radio('document').getAttribute('data-text-value')).toBeNull();
-        expect(radio('document').textContent?.trim()).toBe('Document');
-        // Override → the attribute the content reads FIRST.
-        expect(radio('bibliographie').getAttribute('data-text-value')).toBe('zzz');
-    });
-    // ── The two properties #201 costs the older rows ───────────────────────
-    it('forwards consumer HTML attributes to the GROUP element', () => {
-        setup({ groupAttrs: { 'aria-label': 'Panneau', 'data-testid': 'view-group' } });
-        const group = target.querySelector('.sp-dropdown-menu-radio-group');
-        expect(group.getAttribute('aria-label')).toBe('Panneau');
-        expect(group.getAttribute('data-testid')).toBe('view-group');
-        // The role stays ours.
-        expect(group.getAttribute('role')).toBe('group');
-    });
-    it('forwards consumer HTML attributes to the row element', () => {
-        setup({ itemAttrs: { 'data-testid': 'view-placeholders', 'aria-keyshortcuts': 'p' } });
-        const el = radio('placeholders');
-        expect(el.getAttribute('data-testid')).toBe('view-placeholders');
-        expect(el.getAttribute('aria-keyshortcuts')).toBe('p');
-    });
-    it('keeps its own class alongside a consumer class', () => {
-        setup({ itemAttrs: { class: 'view-row' } });
-        const el = radio('placeholders');
-        expect(el.classList.contains('view-row')).toBe(true);
-        expect(el.classList.contains('sp-dropdown-menu-item')).toBe(true);
-    });
-    it('cOMPOSES a consumer handler with the built-in selection', () => {
-        const seen = [];
-        setup({
-            closeOnSelect: false,
-            onItemClick: () => seen.push('consumer'),
-            onValueChange: (v) => seen.push(`selected:${v}`),
-        });
-        radio('placeholders').click();
-        flushSync();
-        // Both ran, consumer first — and selection actually happened.
-        expect(seen).toEqual(['consumer', 'selected:placeholders']);
-    });
-    it('lets a consumer handler cancel the selection with preventDefault', () => {
-        const calls = [];
-        setup({
-            onItemClick: (event) => event.preventDefault(),
-            onValueChange: (v) => calls.push(v),
-        });
-        radio('placeholders').click();
-        flushSync();
-        expect(calls).toEqual([]);
-        expect(radio('placeholders').getAttribute('aria-checked')).toBe('false');
-        // A cancelled selection must not close the menu either.
-        expect(target.querySelector('[role="menu"]')).toBeTruthy();
-    });
-    // ── Guard rail ────────────────────────────────────────────────────────
-    it('throws a NAMED error when a RadioItem is used outside a RadioGroup', () => {
-        const spy = vi.spyOn(console, 'error').mockImplementation(() => { });
-        try {
-            expect(() => setup({ orphan: true })).toThrow(/RadioGroup/);
-        }
-        finally {
-            spy.mockRestore();
-        }
-    });
-});