@spectral_labs/ui 1.5.2 → 1.6.0

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__/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();
+        }
+    });
+});

package/dist/components/dropdown-menu/components/dropdown-menu-radio-group.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import type { DropdownMenuRadioGroupProps } from '../types.js'
+  import { setDropdownMenuRadioGroupContext } from '../dropdown-menu.svelte.js'
+
+  let {
+    value = $bindable(),
+    onValueChange,
+    class: className,
+    children,
+    ...rest
+  }: DropdownMenuRadioGroupProps = $props()
+
+  // `role="group"`, never `radiogroup`: WAI-ARIA lets a `menu` own
+  // `menuitem` / `menuitemcheckbox` / `menuitemradio` / `group` / `separator`
+  // — a `radiogroup` inside a menu is an invalid owned element.
+  setDropdownMenuRadioGroupContext({
+    get value() {
+      return value
+    },
+    select(next) {
+      // Re-selecting the current row is a legitimate dismissal, but it is not
+      // a CHANGE: notifying here would make consumers debounce their own
+      // no-ops (the `armed` idiom in Preparo's command bar, for one).
+      if (next === value) return
+      value = next
+      onValueChange?.(next)
+    },
+  })
+</script>
+
+<!-- `{...rest}` FIRST: a consumer names and tags the group (`aria-label`,
+     `id`, `data-testid`), never overrides the role that makes it a group. -->
+<div {...rest} class="sp-dropdown-menu-radio-group {className ?? ''}" role="group">
+  {#if children}{@render children()}{/if}
+</div>
+
+<style>
+  /* A plain block, deliberately NOT `display: contents`: the menu content is
+     already a block that stacks its rows, so the wrapper costs no layout —
+     and `display: contents` has a history of dropping the element's
+     accessibility semantics, which is the one thing this wrapper exists for. */
+  .sp-dropdown-menu-radio-group {
+    display: block;
+  }
+</style>

package/dist/components/dropdown-menu/components/dropdown-menu-radio-group.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { DropdownMenuRadioGroupProps } from '../types.js';
+declare const DropdownMenuRadioGroup: import("svelte").Component<DropdownMenuRadioGroupProps, {}, "value">;
+type DropdownMenuRadioGroup = ReturnType<typeof DropdownMenuRadioGroup>;
+export default DropdownMenuRadioGroup;
+//# sourceMappingURL=dropdown-menu-radio-group.svelte.d.ts.map

package/dist/components/dropdown-menu/components/dropdown-menu-radio-group.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu-radio-group.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dropdown-menu/components/dropdown-menu-radio-group.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAA;AA0C9D,QAAA,MAAM,sBAAsB,sEAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/components/dropdown-menu/components/dropdown-menu-radio-item.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+  import type { DropdownMenuRadioItemProps } from '../types.js'
+  import { getMenuContext } from '../../../internal/menu-context/index.js'
+  import { getDropdownMenuRadioGroupContext } from '../dropdown-menu.svelte.js'
+
+  const {
+    value,
+    disabled = false,
+    textValue,
+    closeOnSelect = true,
+    onSelect,
+    class: className,
+    children,
+    // Pulled out of `rest` so the built-in behaviour can COMPOSE with them
+    // instead of being clobbered by the spread.
+    onclick,
+    onkeydown,
+    onpointerenter,
+    ...rest
+  }: DropdownMenuRadioItemProps = $props()
+
+  const group = getDropdownMenuRadioGroupContext()
+  const menuCtx = getMenuContext()
+
+  const checked = $derived(group.value === value)
+
+  /** Svelte's DOM attribute handlers narrow `currentTarget` to the host
+   *  element; a bare `MouseEvent` is not assignable to that. */
+  type RowEvent<E extends Event> = E & { currentTarget: EventTarget & HTMLDivElement }
+
+  function select(event: Event) {
+    if (disabled) return
+    group.select(value)
+    onSelect?.(event)
+    // Re-selecting the current row still dismisses: picking the option you
+    // already have is a legitimate way to close the menu.
+    if (closeOnSelect) menuCtx.close()
+  }
+
+  // A disabled row is INERT, which has to include the consumer's handler:
+  // running it would let a dimmed, unselectable row still fire an application
+  // effect. Activation paths bail before anything runs.
+  function handleClick(event: RowEvent<MouseEvent>) {
+    if (disabled) return
+    onclick?.(event)
+    if (event.defaultPrevented) return
+    select(event)
+  }
+
+  function handleKeydown(event: RowEvent<KeyboardEvent>) {
+    if (disabled) return
+    onkeydown?.(event)
+    if (event.defaultPrevented) return
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      select(event)
+    }
+  }
+
+  // Deliberately NOT guarded on `disabled`: hovering a dimmed row must still
+  // close open sibling submenus, exactly as `Item` does.
+  function handlePointerEnter(event: RowEvent<PointerEvent>) {
+    onpointerenter?.(event)
+    if (event.defaultPrevented) return
+    // Pointer coordination: entering any row of this menu level closes open
+    // sibling submenus (unless the pointer travels through a grace area).
+    // Runs even when disabled — hovering a disabled row still closes subs.
+    menuCtx.onItemEnter(event)
+  }
+</script>
+
+<!-- `{...rest}` FIRST: a consumer may add attributes, never override the
+     row's identity (role, checked state, roving hooks) — those come after and
+     win. -->
+<div
+  {...rest}
+  class="sp-dropdown-menu-item radio {className ?? ''}"
+  role="menuitemradio"
+  aria-checked={checked}
+  aria-disabled={disabled || undefined}
+  tabindex={-1}
+  data-roving-focus-item
+  data-value={value}
+  data-text-value={textValue}
+  data-disabled={disabled || undefined}
+  data-state={checked ? 'checked' : 'unchecked'}
+  onpointerenter={handlePointerEnter}
+  onclick={handleClick}
+  onkeydown={handleKeydown}
+>
+  <span class="sp-dropdown-menu-dot">
+    {#if checked}
+      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <circle cx="12" cy="12" r="5"></circle>
+      </svg>
+    {/if}
+  </span>
+  {#if children}{@render children()}{/if}
+</div>
+
+<style>
+  /* Same row metrics as `.checkbox` — the two families must sit on one rhythm
+     when a menu mixes them (Preparo's Affichage menu does). */
+  .sp-dropdown-menu-item.radio {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-radius: var(--sp-sys-shape-corner-md, 12px);
+    font-family: var(--sp-sys-typescale-body-medium-font, inherit);
+    font-size: var(--sp-sys-typescale-body-medium-size, 0.875rem);
+    color: var(--sp-sys-color-on-surface);
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+  }
+
+  .sp-dropdown-menu-item.radio:focus-visible,
+  .sp-dropdown-menu-item.radio:hover:not([data-disabled]) {
+    background-color: color-mix(
+      in oklch,
+      var(--sp-sys-color-on-surface) calc(var(--sp-sys-state-hover-opacity, 0.08) * 100%),
+      transparent
+    );
+  }
+
+  .sp-dropdown-menu-item.radio[data-disabled] {
+    opacity: 0.38;
+    cursor: not-allowed;
+  }
+
+  .sp-dropdown-menu-dot {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    color: var(--sp-sys-color-primary);
+  }
+
+  .sp-dropdown-menu-dot svg {
+    width: 16px;
+    height: 16px;
+  }
+</style>

package/dist/components/dropdown-menu/components/dropdown-menu-radio-item.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { DropdownMenuRadioItemProps } from '../types.js';
+declare const DropdownMenuRadioItem: import("svelte").Component<DropdownMenuRadioItemProps, {}, "">;
+type DropdownMenuRadioItem = ReturnType<typeof DropdownMenuRadioItem>;
+export default DropdownMenuRadioItem;
+//# sourceMappingURL=dropdown-menu-radio-item.svelte.d.ts.map

package/dist/components/dropdown-menu/components/dropdown-menu-radio-item.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu-radio-item.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dropdown-menu/components/dropdown-menu-radio-item.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAA;AA2F7D,QAAA,MAAM,qBAAqB,gEAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/components/dropdown-menu/dropdown-menu.svelte.d.ts

@@ -51,4 +51,22 @@ export interface DropdownMenuSubContext {
 }
 export declare function setDropdownMenuSubContext(state: DropdownMenuSubContext): void;
 export declare function getDropdownMenuSubContext(): DropdownMenuSubContext;
+/**
+ * The single-choice contract shared by a `RadioGroup` and its `RadioItem`
+ * rows. `value` is a GETTER, never a snapshot: the group owns a `$bindable`
+ * prop, and a row reading `ctx.value` while rendering must see the current
+ * selection — including one changed from OUTSIDE the menu.
+ */
+export interface DropdownMenuRadioGroupContext {
+    readonly value: string | undefined;
+    /** Selects `value`. A no-op — and no notification — when already selected. */
+    select: (value: string) => void;
+}
+export declare function setDropdownMenuRadioGroupContext(state: DropdownMenuRadioGroupContext): void;
+/**
+ * Throws a NAMED error instead of returning `undefined`: an orphan
+ * `RadioItem` would otherwise fail later with an opaque property-access
+ * TypeError, at a point that no longer names the mistake.
+ */
+export declare function getDropdownMenuRadioGroupContext(): DropdownMenuRadioGroupContext;
 //# sourceMappingURL=dropdown-menu.svelte.d.ts.map

package/dist/components/dropdown-menu/dropdown-menu.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dropdown-menu/dropdown-menu.svelte.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,OAAO,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,WAAW,GAAG,IAAI,CAAA;IAC7B,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,YAAY,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;CAC/C;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,CAErE;AAED,wBAAgB,sBAAsB,IAAI,iBAAiB,CAE1D;AAED,wBAAgB,qBAAqB;;;EAKpC;AAID,MAAM,WAAW,sBAAsB;IACrC,6EAA6E;IAC7E,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B,uEAAuE;IACvE,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,CAAA;IACtC,QAAQ,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,CAAA;IACtC;;;OAGG;IACH,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAA;IACpC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,OAAO,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,YAAY,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;IACvD,QAAQ,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,YAAY,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;IACxD,2DAA2D;IAC3D,0BAA0B,EAAE,MAAM,IAAI,CAAA;IACtC,YAAY,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAA;IACvC,YAAY,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C;;;OAGG;IACH,cAAc,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAA;IAC7C;;;;OAIG;IACH,cAAc,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAA;CAC9C;AAED,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,sBAAsB,GAAG,IAAI,CAE7E;AAED,wBAAgB,yBAAyB,IAAI,sBAAsB,CAElE"}
+{"version":3,"file":"dropdown-menu.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dropdown-menu/dropdown-menu.svelte.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,OAAO,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,WAAW,GAAG,IAAI,CAAA;IAC7B,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,YAAY,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;CAC/C;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,CAErE;AAED,wBAAgB,sBAAsB,IAAI,iBAAiB,CAE1D;AAED,wBAAgB,qBAAqB;;;EAKpC;AAID,MAAM,WAAW,sBAAsB;IACrC,6EAA6E;IAC7E,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B,uEAAuE;IACvE,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,CAAA;IACtC,QAAQ,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,CAAA;IACtC;;;OAGG;IACH,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAA;IACpC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,OAAO,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,YAAY,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;IACvD,QAAQ,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,YAAY,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;IACxD,2DAA2D;IAC3D,0BAA0B,EAAE,MAAM,IAAI,CAAA;IACtC,YAAY,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAA;IACvC,YAAY,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC9C;;;OAGG;IACH,cAAc,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAA;IAC7C;;;;OAIG;IACH,cAAc,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAA;CAC9C;AAED,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,sBAAsB,GAAG,IAAI,CAE7E;AAED,wBAAgB,yBAAyB,IAAI,sBAAsB,CAElE;AAID;;;;;GAKG;AACH,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;IAClC,8EAA8E;IAC9E,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAChC;AAED,wBAAgB,gCAAgC,CAAC,KAAK,EAAE,6BAA6B,GAAG,IAAI,CAE3F;AAED;;;;GAIG;AACH,wBAAgB,gCAAgC,IAAI,6BAA6B,CAQhF"}

package/dist/components/dropdown-menu/dropdown-menu.svelte.js

@@ -20,3 +20,19 @@ export function setDropdownMenuSubContext(state) {
 export function getDropdownMenuSubContext() {
     return getContext(SUB_KEY);
 }
+const RADIO_GROUP_KEY = Symbol('sp-dropdown-radio-group');
+export function setDropdownMenuRadioGroupContext(state) {
+    setContext(RADIO_GROUP_KEY, state);
+}
+/**
+ * Throws a NAMED error instead of returning `undefined`: an orphan
+ * `RadioItem` would otherwise fail later with an opaque property-access
+ * TypeError, at a point that no longer names the mistake.
+ */
+export function getDropdownMenuRadioGroupContext() {
+    const ctx = getContext(RADIO_GROUP_KEY);
+    if (!ctx) {
+        throw new Error('[spectral-ui] DropdownMenu.RadioItem must be rendered inside a DropdownMenu.RadioGroup.');
+    }
+    return ctx;
+}