@spectral_labs/ui 1.5.1 → 1.5.3

package/dist/components/context-menu/components/context-menu-content.svelte

@@ -4,6 +4,7 @@
   import { EscapeLayerState } from '../../../internal/escape-layer/index.js'
   import { FloatingLayerState } from '../../../internal/floating-layer/index.js'
   import { isBrowser, kbd } from '../../../internal/helpers/index.js'
+  import { getOwnLevelMenuItems, isOwnLevelMenuItem } from '../../../internal/menu-context/index.js'
   import { Portal } from '../../../internal/portal/index.js'
   import { PresenceLayerState } from '../../../internal/presence-layer/index.js'
   import { RovingFocusGroup } from '../../../internal/roving-focus/index.js'
@@ -19,6 +20,9 @@
     orientation: 'vertical',
     loop: true,
     candidateSelector: '[data-roving-focus-item]',
+    // Sub content renders inline inside this content: exclude its rows from
+    // the parent collection (the sub content has its own roving group).
+    candidateFilter: (el) => !contentEl || isOwnLevelMenuItem(contentEl, el),
   })
 
   const presence = new PresenceLayerState({
@@ -85,10 +89,8 @@
       floating.setElements(virtualRef, contentEl)
       floating.startAutoUpdate()
 
-      // Focus first interactive item.
-      const firstItem = contentEl.querySelector<HTMLElement>(
-        '[data-roving-focus-item]:not([data-disabled])',
-      )
+      // Focus first interactive item (own level only — never a sub row).
+      const firstItem = getOwnLevelMenuItems(contentEl)[0]
       firstItem?.focus()
     }
 
@@ -106,9 +108,8 @@
   function onkeydown(event: KeyboardEvent) {
     if (!contentEl) return
 
-    const items = Array.from(
-      contentEl.querySelectorAll<HTMLElement>('[data-roving-focus-item]:not([data-disabled])'),
-    )
+    // Typeahead collection scoped to this level (sub rows excluded).
+    const items = getOwnLevelMenuItems(contentEl)
 
     switch (event.key) {
       case kbd.ARROW_DOWN: {

package/dist/components/context-menu/components/context-menu-content.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu-content.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/context-menu/components/context-menu-content.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAA;AAyK1D,QAAA,MAAM,kBAAkB,6DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"context-menu-content.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/context-menu/components/context-menu-content.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAA;AA2K1D,QAAA,MAAM,kBAAkB,6DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/context-menu/components/context-menu-root.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { ContextMenuProps } from '../types.js'
-  import { setMenuContext } from '../../../internal/menu-context/index.js'
+  import { createMenuContext, setMenuContext } from '../../../internal/menu-context/index.js'
   import { createContextMenuIds, setContextMenuContext } from '../context-menu.svelte.js'
 
   let {
@@ -13,12 +13,14 @@
   const ids = createContextMenuIds()
   let position = $state({ x: 0, y: 0 })
 
-  setMenuContext({
-    close() {
-      open = false
-      onOpenChange?.(false)
-    },
-  })
+  setMenuContext(
+    createMenuContext({
+      close() {
+        open = false
+        onOpenChange?.(false)
+      },
+    }),
+  )
 
   setContextMenuContext({
     get open() {

package/dist/components/context-menu/components/context-menu-root.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/context-menu/components/context-menu-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAoDnD,QAAA,MAAM,eAAe,0DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"context-menu-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/context-menu/components/context-menu-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAsDnD,QAAA,MAAM,eAAe,0DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/context-menu/index.d.ts

@@ -1,7 +1,10 @@
 export { default as CheckboxItem } from '../dropdown-menu/components/dropdown-menu-checkbox-item.svelte';
 export { default as Item } from '../dropdown-menu/components/dropdown-menu-item.svelte';
 export { default as Label } from '../dropdown-menu/components/dropdown-menu-label.svelte';
+export { default as RadioGroup } from '../dropdown-menu/components/dropdown-menu-radio-group.svelte';
+export { default as RadioItem } from '../dropdown-menu/components/dropdown-menu-radio-item.svelte';
 export { default as Separator } from '../dropdown-menu/components/dropdown-menu-separator.svelte';
+export type { DropdownMenuRadioGroupProps as ContextMenuRadioGroupProps, DropdownMenuRadioItemProps as ContextMenuRadioItemProps, } from '../dropdown-menu/types.js';
 export { default as Content } from './components/context-menu-content.svelte';
 export { default as Root } from './components/context-menu-root.svelte';
 export { default as Trigger } from './components/context-menu-trigger.svelte';

package/dist/components/context-menu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/context-menu/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gEAAgE,CAAA;AACxG,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,uDAAuD,CAAA;AACvF,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,wDAAwD,CAAA;AACzF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,4DAA4D,CAAA;AACjG,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0CAA0C,CAAA;AAC7E,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,uCAAuC,CAAA;AACvE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0CAA0C,CAAA;AAC7E,YAAY,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/context-menu/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gEAAgE,CAAA;AACxG,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,uDAAuD,CAAA;AACvF,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,wDAAwD,CAAA;AACzF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,8DAA8D,CAAA;AACpG,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,6DAA6D,CAAA;AAClG,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,4DAA4D,CAAA;AACjG,YAAY,EACV,2BAA2B,IAAI,0BAA0B,EACzD,0BAA0B,IAAI,yBAAyB,GACxD,MAAM,2BAA2B,CAAA;AAClC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0CAA0C,CAAA;AAC7E,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,uCAAuC,CAAA;AACvE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0CAA0C,CAAA;AAC7E,YAAY,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAA"}

package/dist/components/context-menu/index.js

@@ -2,6 +2,8 @@
 export { default as CheckboxItem } from '../dropdown-menu/components/dropdown-menu-checkbox-item.svelte';
 export { default as Item } from '../dropdown-menu/components/dropdown-menu-item.svelte';
 export { default as Label } from '../dropdown-menu/components/dropdown-menu-label.svelte';
+export { default as RadioGroup } from '../dropdown-menu/components/dropdown-menu-radio-group.svelte';
+export { default as RadioItem } from '../dropdown-menu/components/dropdown-menu-radio-item.svelte';
 export { default as Separator } from '../dropdown-menu/components/dropdown-menu-separator.svelte';
 export { default as Content } from './components/context-menu-content.svelte';
 export { default as Root } from './components/context-menu-root.svelte';

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

@@ -0,0 +1,90 @@
+<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,4 +1,5 @@
 <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'
@@ -14,6 +15,9 @@
     withSub = false,
     subFirst = false,
     subDisabled = false,
+    subTextValue = undefined,
+    withCheckbox = false,
+    withSecondSub = false,
   }: {
     open?: boolean
     portalTo?: HTMLElement | string
@@ -21,12 +25,17 @@
     withSub?: boolean
     subFirst?: boolean
     subDisabled?: boolean
+    subTextValue?: string
+    withCheckbox?: boolean
+    withSecondSub?: boolean
   } = $props()
 </script>
 
 {#snippet subBlock()}
   <DropdownMenuSub>
-    <DropdownMenuSubTrigger disabled={subDisabled}>More options</DropdownMenuSubTrigger>
+    <DropdownMenuSubTrigger disabled={subDisabled} textValue={subTextValue}
+      >More options</DropdownMenuSubTrigger
+    >
     <DropdownMenuSubContent>
       <DropdownMenuItem>Sub Item 1</DropdownMenuItem>
       <DropdownMenuItem>Sub Item 2</DropdownMenuItem>
@@ -43,8 +52,20 @@
     <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

@@ -0,0 +1,306 @@
+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();
+        }
+    });
+});