@spectral_labs/ui 1.5.1 → 1.5.2

package/dist/components/dropdown-menu/components/dropdown-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'
@@ -27,6 +28,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({
@@ -78,10 +82,8 @@
       floating.setElements(ctx.triggerEl, 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()
     }
 
@@ -99,9 +101,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/dropdown-menu/components/dropdown-menu-content.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu-content.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dropdown-menu/components/dropdown-menu-content.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAA;AAmK3D,QAAA,MAAM,mBAAmB,8DAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"dropdown-menu-content.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dropdown-menu/components/dropdown-menu-content.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAA;AAqK3D,QAAA,MAAM,mBAAmB,8DAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

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

@@ -18,6 +18,13 @@
     onSelect?.(event)
     if (closeOnSelect) menuCtx.close()
   }
+
+  function handlePointerEnter(event: PointerEvent) {
+    // 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>
 
 <div
@@ -28,6 +35,7 @@
   data-text-value={textValue}
   data-disabled={disabled || undefined}
   aria-disabled={disabled || undefined}
+  onpointerenter={handlePointerEnter}
   onclick={handleSelect}
   onkeydown={(e) => {
     if (e.key === 'Enter' || e.key === ' ') {

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu-item.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dropdown-menu/components/dropdown-menu-item.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AAsCxD,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-item.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/dropdown-menu/components/dropdown-menu-item.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AA6CxD,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-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,12 +14,40 @@ 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;

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,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,CAAA;IACtC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,YAAY,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAA;CACxC;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"}

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

@@ -63,6 +63,8 @@ export interface DropdownMenuSubProps {
 }
 export interface DropdownMenuSubTriggerProps {
     disabled?: boolean;
+    /** Override textContent for typeahead matching (parity with `DropdownMenuItemProps`). */
+    textValue?: string;
     class?: string;
     children?: Snippet;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dropdown-menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AAC3D,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,wCAAwC,CAAA;AAEzE,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,uFAAuF;IACvF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,CAAC;IACnF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iDAAiD;IACjD,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,0BAA0B;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,6BAA6B;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,mCAAmC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,2BAA2B;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dropdown-menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AAC3D,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,wCAAwC,CAAA;AAEzE,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,uFAAuF;IACvF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,CAAC;IACnF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iDAAiD;IACjD,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,0BAA0B;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,6BAA6B;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,mCAAmC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yFAAyF;IACzF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,2BAA2B;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}