@spectral_labs/ui 1.5.1 → 1.5.3

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/components/dropdown-menu-root.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { DropdownMenuProps } from '../types.js'
-  import { setMenuContext } from '../../../internal/menu-context/index.js'
+  import { createMenuContext, setMenuContext } from '../../../internal/menu-context/index.js'
   import { createDropdownMenuIds, setDropdownMenuContext } from '../dropdown-menu.svelte.js'
 
   let {
@@ -13,12 +13,14 @@
   const ids = createDropdownMenuIds()
   let triggerEl: HTMLElement | null = $state(null)
 
-  setMenuContext({
-    close() {
-      open = false
-      onOpenChange?.(false)
-    },
-  })
+  setMenuContext(
+    createMenuContext({
+      close() {
+        open = false
+        onOpenChange?.(false)
+      },
+    }),
+  )
 
   setDropdownMenuContext({
     get open() {

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dropdown-menu/components/dropdown-menu-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAwDpD,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"dropdown-menu-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dropdown-menu/components/dropdown-menu-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AA0DpD,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/dropdown-menu/components/dropdown-menu-sub-content.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
   import type { DropdownMenuSubContentProps } from '../types.js'
+  import { EscapeLayerState } from '../../../internal/escape-layer/index.js'
   import { isBrowser, kbd } from '../../../internal/helpers/index.js'
+  import { getOwnLevelMenuItems, isOwnLevelMenuItem } from '../../../internal/menu-context/index.js'
+  import { RovingFocusGroup } from '../../../internal/roving-focus/index.js'
+  import { TypeaheadSearch } from '../../../internal/typeahead/index.js'
   import { getDropdownMenuSubContext } from '../dropdown-menu.svelte.js'
 
   const { class: className, children }: DropdownMenuSubContentProps = $props()
@@ -9,6 +13,59 @@
 
   let contentEl: HTMLElement | undefined = $state()
 
+  const typeahead = new TypeaheadSearch()
+  const rovingFocus = new RovingFocusGroup({
+    orientation: 'vertical',
+    loop: true,
+    candidateSelector: '[data-roving-focus-item]',
+    // Scope to our own rows: exclude rows nested in a deeper open submenu.
+    candidateFilter: (el) => !contentEl || isOwnLevelMenuItem(contentEl, el),
+  })
+
+  // The submenu mounts its own escape layer while open, so it sits on top of
+  // the parent content's layer in the escape stack. APG: Escape closes the
+  // menu containing FOCUS — behavior is resolved per keypress:
+  // - focus inside the sub content → 'close': Escape closes ONLY the submenu
+  //   and restores focus to its trigger;
+  // - focus elsewhere (hover-opened sub while keyboard focus stayed in the
+  //   parent menu) → 'defer-otherwise-close': the same keypress falls through
+  //   to the parent menu's layer, which closes the whole menu (this inline
+  //   sub unmounts with it) — no focus teleport to the sub trigger.
+  const escapeLayer = new EscapeLayerState({
+    enabled: true,
+    get behavior() {
+      return contentEl?.contains(document.activeElement) ? 'close' : 'defer-otherwise-close'
+    },
+    onEscapeKeydown() {
+      sub.closeSub({ restoreFocus: true })
+    },
+  })
+
+  $effect(() => {
+    if (sub.open && isBrowser && contentEl) {
+      escapeLayer.mount()
+    }
+    return () => escapeLayer.unmount()
+  })
+
+  // Report the content element to the Sub coordinator (grace area target,
+  // pointer-ownership checks).
+  $effect(() => {
+    sub.setContentEl(contentEl ?? null)
+    return () => sub.setContentEl(null)
+  })
+
+  // Keyboard open (ArrowRight/Enter/Space on the trigger) moves focus to the
+  // first enabled item once the content is mounted. Pointer open never sets
+  // the request, so hover never steals focus (APG).
+  $effect(() => {
+    if (sub.open && contentEl && sub.focusContentOnOpen) {
+      const firstItem = getOwnLevelMenuItems(contentEl)[0]
+      firstItem?.focus()
+      sub.consumeFocusContentRequest()
+    }
+  })
+
   // Position the sub-content next to the trigger using fixed positioning
   const posStyle = $derived.by(() => {
     if (!sub.open || !sub.triggerEl || !isBrowser) return ''
@@ -21,10 +78,40 @@
   })
 
   function onKeyDown(e: KeyboardEvent) {
-    if (e.key === kbd.ARROW_LEFT || e.key === kbd.ESCAPE) {
-      e.preventDefault()
-      e.stopPropagation()
-      sub.closeSub()
+    if (!contentEl) return
+
+    switch (e.key) {
+      case kbd.ARROW_LEFT:
+      case kbd.ESCAPE: {
+        e.preventDefault()
+        // Fully handled here: without stopPropagation, menubar-content would
+        // treat ArrowLeft as "switch to the previous menubar menu".
+        e.stopPropagation()
+        sub.closeSub({ restoreFocus: true })
+        break
+      }
+      case kbd.ARROW_DOWN:
+      case kbd.ARROW_UP:
+      case kbd.HOME:
+      case kbd.END: {
+        // Navigate our own rows; stop the event so the parent content's
+        // roving group (which excludes our rows) never handles it.
+        e.stopPropagation()
+        rovingFocus.handleKeydown(contentEl, e)
+        break
+      }
+      default: {
+        // Typeahead over our own rows only.
+        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+          e.stopPropagation()
+          const items = getOwnLevelMenuItems(contentEl)
+          const labels = items.map(
+            (el) => el.getAttribute('data-text-value') ?? el.textContent?.trim() ?? '',
+          )
+          const match = typeahead.handleTypeahead(e.key, labels)
+          if (match >= 0) items[match]?.focus()
+        }
+      }
     }
   }
 </script>
@@ -33,7 +120,10 @@
   <div
     bind:this={contentEl}
     class="sp-dropdown-menu-sub-content {className ?? ''}"
+    id={sub.contentId}
     role="menu"
+    aria-orientation="vertical"
+    aria-labelledby={sub.triggerId}
     tabindex="-1"
     style={posStyle}
     onkeydown={onKeyDown}

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

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

package/dist/components/dropdown-menu/components/dropdown-menu-sub-trigger.svelte

@@ -2,7 +2,12 @@
   import type { DropdownMenuSubTriggerProps } from '../types.js'
   import { getDropdownMenuSubContext } from '../dropdown-menu.svelte.js'
 
-  const { disabled = false, class: className, children }: DropdownMenuSubTriggerProps = $props()
+  const {
+    disabled = false,
+    textValue,
+    class: className,
+    children,
+  }: DropdownMenuSubTriggerProps = $props()
 
   const sub = getDropdownMenuSubContext()
 
@@ -13,18 +18,34 @@
     if (el) sub.setTriggerEl(el)
   })
 
-  function onPointerEnter() {
-    if (disabled) return
-    hoverTimer = setTimeout(() => sub.openSub(), 150)
-  }
+  // Cancel a pending hover-open when the trigger unmounts mid-delay.
+  $effect(() => {
+    return () => clearHoverTimer()
+  })
 
-  function onPointerLeave() {
+  function clearHoverTimer() {
     if (hoverTimer) {
       clearTimeout(hoverTimer)
       hoverTimer = null
     }
   }
 
+  function onPointerEnter(e: PointerEvent) {
+    // Pointer coordination runs even when disabled: hovering a disabled sub
+    // trigger still closes sibling submenus (it is a row of the parent menu).
+    sub.onTriggerEnter(e)
+    if (disabled) return
+    if (sub.open) return
+    clearHoverTimer()
+    hoverTimer = setTimeout(() => sub.openSub(), 150)
+  }
+
+  function onPointerLeave(e: PointerEvent) {
+    clearHoverTimer()
+    // If the submenu is open, arm the grace area toward the content.
+    sub.onTriggerLeave(e)
+  }
+
   function onKeyDown(e: KeyboardEvent) {
     if (disabled) return
     if (e.key === 'ArrowRight' || e.key === 'Enter' || e.key === ' ') {
@@ -35,7 +56,8 @@
       // Space would also leak into content-level typeahead). Same pattern as
       // dropdown-menu-sub-content.svelte for ArrowLeft/Escape.
       e.stopPropagation()
-      sub.openSub()
+      // Keyboard open moves focus into the submenu (APG); pointer open never does.
+      sub.openSub({ focusContent: true })
     }
   }
 
@@ -48,12 +70,15 @@
 <div
   bind:this={el}
   class="sp-dropdown-menu-item sp-dropdown-sub-trigger {className ?? ''}"
+  id={sub.triggerId}
   role="menuitem"
   aria-haspopup="menu"
   aria-expanded={sub.open}
+  aria-controls={sub.open ? sub.contentId : undefined}
   aria-disabled={disabled || undefined}
   data-disabled={disabled || undefined}
   data-roving-focus-item
+  data-text-value={textValue}
   tabindex={-1}
   onpointerenter={onPointerEnter}
   onpointerleave={onPointerLeave}

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

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

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

@@ -1,31 +1,205 @@
 <script lang="ts">
+  import type { MenuSubHandle } from '../../../internal/menu-context/index.js'
   import type { DropdownMenuSubProps } from '../types.js'
+  import { GraceAreaState } from '../../../internal/grace-area/index.js'
+  import { useId } from '../../../internal/helpers/index.js'
+  import {
+    createMenuContext,
+    getMenuContext,
+    setMenuContext,
+  } from '../../../internal/menu-context/index.js'
   import { setDropdownMenuSubContext } from '../dropdown-menu.svelte.js'
 
   const { open: openProp = false, class: className, children }: DropdownMenuSubProps = $props()
 
+  // Parent menu level (root menu context, or the enclosing sub for nested subs).
+  // Captured BEFORE overriding the context for our own descendants.
+  const parentMenu = getMenuContext()
+
+  // Trigger ↔ content ARIA wiring (same id plumbing as the parent level:
+  // aria-controls on the trigger, aria-labelledby on the content).
+  const triggerId = useId('sp-dm-sub-trigger')
+  const contentId = useId('sp-dm-sub-content')
+
   let open = $state(openProp)
   let triggerEl: HTMLElement | null = $state(null)
+  let contentEl: HTMLElement | null = $state(null)
+  let focusContentOnOpen = $state(false)
+
+  // Grace area between the trigger and the sub content: when the pointer
+  // leaves the trigger toward the content, the triangular polygon from the
+  // exit point to the content's near edge keeps the submenu open during the
+  // diagonal travel (same layer as tooltip-trigger / link-preview-trigger).
+  const graceArea = new GraceAreaState({
+    get triggerElement() {
+      return triggerEl
+    },
+    get contentElement() {
+      return contentEl
+    },
+    get enabled() {
+      return open
+    },
+  })
+
+  let graceCleanup: (() => void) | null = null
+
+  function stopGraceTracking() {
+    if (graceCleanup) {
+      graceCleanup()
+      graceCleanup = null
+    }
+    graceArea.reset()
+  }
+
+  function ownsTarget(target: EventTarget | null): boolean {
+    if (!(target instanceof Node)) return false
+    return Boolean(triggerEl?.contains(target) || contentEl?.contains(target))
+  }
+
+  function startGraceTracking(exitPoint: { x: number; y: number }) {
+    stopGraceTracking()
+    graceArea.setPointerExit(exitPoint)
+
+    const onPointerMove = (e: PointerEvent) => {
+      // Pointer reached the sub content (or came back on the trigger):
+      // resolved — stay open and stop tracking.
+      if (ownsTarget(e.target)) {
+        stopGraceTracking()
+        return
+      }
+      // Still traveling through the grace polygon: stay open, keep tracking.
+      if (graceArea.isPointInGraceArea({ x: e.clientX, y: e.clientY })) return
+      // Left trigger, polygon and content: close.
+      stopGraceTracking()
+      closeSub()
+    }
+    document.addEventListener('pointermove', onPointerMove)
+
+    // Safety: if the pointer never resolves the travel (e.g. stalls inside
+    // the polygon), close after a timeout — mirrors the tooltip/link-preview
+    // grace wiring, with the timer cleaned up rigorously on resolution.
+    const safetyTimer = setTimeout(() => {
+      stopGraceTracking()
+      closeSub()
+    }, 500)
+
+    graceCleanup = () => {
+      document.removeEventListener('pointermove', onPointerMove)
+      clearTimeout(safetyTimer)
+    }
+  }
+
+  // Handle registered on the parent menu level (see the registration effect
+  // below) so sibling rows (plain items, checkbox items, other sub triggers)
+  // close this submenu on pointerenter — unless they own it or the pointer is
+  // traveling through the grace area. `openSub` also passes it to
+  // `closeOtherSubs` to enforce the single-open-sub invariant.
+  const handle: MenuSubHandle = {
+    ownsTarget,
+    isPointerInGrace(point) {
+      return graceArea.isPointInGraceArea(point)
+    },
+    closeSub() {
+      closeSub()
+    },
+  }
+
+  function openSub(options?: { focusContent?: boolean }) {
+    // Single open sub per level (Radix semantics): opening this sub
+    // force-closes every sibling at the parent level. Covers the paths that
+    // never go through `onItemEnter` pointer coordination — keyboard opens
+    // (ArrowRight/Enter/Space) — and a hover-open fired from inside a
+    // sibling's grace polygon (the sibling was spared by the grace check but
+    // must yield once this sub actually opens). Closing the sibling also
+    // cancels its grace tracking and safety timer (`closeSub` →
+    // `stopGraceTracking`).
+    parentMenu?.closeOtherSubs(handle)
+    if (options?.focusContent) focusContentOnOpen = true
+    open = true
+  }
+
+  function closeSub(options?: { restoreFocus?: boolean }) {
+    stopGraceTracking()
+    focusContentOnOpen = false
+    // Mixed-modality guard: pointer paths close without asking for a focus
+    // restore, but if keyboard focus currently lives inside the sub content,
+    // unmounting it would drop focus to <body> — arrow keys and typeahead go
+    // dead because the parent menu's keydown handler lives on its content
+    // element (the exact #197 dead-end). Capture BEFORE flipping `open`
+    // (the close effect nulls contentEl on unmount).
+    const focusWasInside = Boolean(
+      contentEl && document.activeElement && contentEl.contains(document.activeElement),
+    )
+    open = false
+    // Restore focus to the trigger (a row of the parent menu, so parent
+    // roving/typeahead keep working) when explicitly requested (keyboard
+    // paths) or whenever focus would otherwise be orphaned.
+    if (options?.restoreFocus || focusWasInside) triggerEl?.focus()
+  }
+
+  $effect(() => {
+    if (!parentMenu) return
+    return parentMenu.registerSub(handle)
+  })
+
+  // Stop grace tracking whenever the submenu closes or unmounts (no leaked
+  // document listeners / timers).
+  $effect(() => {
+    if (open) {
+      return () => stopGraceTracking()
+    }
+  })
+
+  // Our own descendants (rows inside the sub content) coordinate nested
+  // submenus against THIS level, while `close()` still dismisses the whole
+  // menu tree via the parent context.
+  setMenuContext(
+    createMenuContext({
+      close() {
+        parentMenu?.close()
+      },
+    }),
+  )
 
   setDropdownMenuSubContext({
+    triggerId,
+    contentId,
     get open() {
       return open
     },
     get triggerEl() {
       return triggerEl
     },
-    toggle() {
-      open = !open
+    get contentEl() {
+      return contentEl
     },
-    openSub() {
-      open = true
+    get focusContentOnOpen() {
+      return focusContentOnOpen
     },
-    closeSub() {
-      open = false
+    toggle() {
+      if (open) closeSub()
+      else openSub()
+    },
+    openSub,
+    closeSub,
+    consumeFocusContentRequest() {
+      focusContentOnOpen = false
     },
     setTriggerEl(el: HTMLElement) {
       triggerEl = el
     },
+    setContentEl(el: HTMLElement | null) {
+      contentEl = el
+    },
+    onTriggerEnter(event: PointerEvent) {
+      stopGraceTracking()
+      parentMenu?.onItemEnter(event)
+    },
+    onTriggerLeave(event: PointerEvent) {
+      if (!open || !contentEl) return
+      startGraceTracking({ x: event.clientX, y: event.clientY })
+    },
   })
 </script>
 

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

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

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

@@ -14,13 +14,59 @@ export declare function createDropdownMenuIds(): {
     triggerId: string;
 };
 export interface DropdownMenuSubContext {
+    /** Id of the sub trigger row (aria-labelledby target of the sub content). */
+    readonly triggerId: string;
+    /** Id of the sub content (aria-controls target of the sub trigger). */
+    readonly contentId: string;
     readonly open: boolean;
     readonly triggerEl: HTMLElement | null;
+    readonly contentEl: HTMLElement | null;
+    /**
+     * Whether the next content mount should focus its first item
+     * (set by keyboard open — APG focus-into-sub; never by pointer open).
+     */
+    readonly focusContentOnOpen: boolean;
     toggle: () => void;
-    openSub: () => void;
-    closeSub: () => void;
+    openSub: (options?: {
+        focusContent?: boolean;
+    }) => void;
+    closeSub: (options?: {
+        restoreFocus?: boolean;
+    }) => void;
+    /** Marks the pending focus-into-sub request as handled. */
+    consumeFocusContentRequest: () => void;
     setTriggerEl: (el: HTMLElement) => void;
+    setContentEl: (el: HTMLElement | null) => void;
+    /**
+     * Pointer entered the sub trigger: closes sibling submenus at the parent
+     * level and cancels any pending grace-area close tracking.
+     */
+    onTriggerEnter: (event: PointerEvent) => void;
+    /**
+     * Pointer left the sub trigger: if the submenu is open, starts grace-area
+     * tracking — the submenu stays open while the pointer travels through the
+     * grace polygon toward the content, and closes otherwise.
+     */
+    onTriggerLeave: (event: PointerEvent) => void;
 }
 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