@spectral_labs/ui 1.5.1 → 1.5.2

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

@@ -229,5 +229,100 @@ describe('menubar', () => {
             expect(triggers[0].getAttribute('data-state')).toBe('open');
             expect(triggers[1].getAttribute('data-state')).toBe('closed');
         });
+        it('arrowRight on the sub-trigger moves focus to the first sub item', () => {
+            setup({ withSub: true });
+            const triggers = target.querySelectorAll('[data-menubar-trigger]');
+            triggers[0].click();
+            flushSync();
+            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
+            subTrigger.focus();
+            pressKey('ArrowRight');
+            expect(document.activeElement?.textContent?.trim()).toBe('Email');
+        });
+        it('arrowLeft inside the sub closes it, restores focus to the sub-trigger and keeps the menu', () => {
+            setup({ withSub: true });
+            const triggers = target.querySelectorAll('[data-menubar-trigger]');
+            triggers[0].click();
+            flushSync();
+            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
+            subTrigger.focus();
+            pressKey('ArrowRight');
+            expect(document.activeElement?.textContent?.trim()).toBe('Email');
+            pressKey('ArrowLeft');
+            // Sub closed, focus back on the trigger row — no dead end on body.
+            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeNull();
+            expect(document.activeElement).toBe(subTrigger);
+            // The menubar did NOT switch to the previous menu.
+            expect(triggers[0].getAttribute('data-state')).toBe('open');
+            expect(triggers[1].getAttribute('data-state')).toBe('closed');
+            expect(triggers[2].getAttribute('data-state')).toBe('closed');
+        });
+        it('hovering a sibling item closes the open sub', () => {
+            setup({ withSub: true });
+            const triggers = target.querySelectorAll('[data-menubar-trigger]');
+            triggers[0].click();
+            flushSync();
+            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
+            subTrigger.click();
+            flushSync();
+            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeTruthy();
+            const newItem = Array.from(target.querySelectorAll('.sp-menubar-content .sp-dropdown-menu-item')).find((el) => el.textContent?.trim() === 'New');
+            newItem.dispatchEvent(new MouseEvent('pointerenter', { clientX: 0, clientY: 0 }));
+            flushSync();
+            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeNull();
+            // The menubar menu itself stayed open.
+            expect(triggers[0].getAttribute('data-state')).toBe('open');
+        });
+        it('escape with focus in the menu and a hover-opened sub closes the whole menu in ONE keypress and refocuses the menubar trigger', () => {
+            setup({ withSub: true });
+            const triggers = target.querySelectorAll('[data-menubar-trigger]');
+            triggers[0].click();
+            flushSync();
+            // Autofocus lands on the first parent row.
+            expect(document.activeElement?.textContent?.trim()).toBe('New');
+            // Pointer path: the sub opens without moving focus.
+            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
+            subTrigger.click();
+            flushSync();
+            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeTruthy();
+            expect(document.activeElement?.textContent?.trim()).toBe('New');
+            // ONE Escape: the sub layer defers (focus is NOT inside the sub) and the
+            // menubar layer closes the whole menu — focus returns to the MENUBAR
+            // trigger, never warped onto the sub trigger.
+            pressKey('Escape');
+            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeNull();
+            expect(target.querySelector('[role="menu"]')).toBeNull();
+            expect(document.activeElement).toBe(triggers[0]);
+        });
+        it('escape with focus INSIDE the sub closes only the sub (menu stays open)', () => {
+            setup({ withSub: true });
+            const triggers = target.querySelectorAll('[data-menubar-trigger]');
+            triggers[0].click();
+            flushSync();
+            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
+            subTrigger.focus();
+            pressKey('ArrowRight');
+            expect(document.activeElement?.textContent?.trim()).toBe('Email');
+            pressKey('Escape');
+            expect(target.querySelector('.sp-dropdown-menu-sub-content')).toBeNull();
+            expect(document.activeElement).toBe(subTrigger);
+            // The menubar menu itself stayed open.
+            expect(triggers[0].getAttribute('data-state')).toBe('open');
+        });
+        it('parent roving skips sub items while the sub is open', () => {
+            setup({ withSub: true });
+            const triggers = target.querySelectorAll('[data-menubar-trigger]');
+            triggers[0].click();
+            flushSync();
+            const subTrigger = target.querySelector('.sp-dropdown-sub-trigger');
+            // Pointer open keeps focus on the trigger row.
+            subTrigger.click();
+            flushSync();
+            subTrigger.focus();
+            // Share is the last row: ArrowDown loops to the first PARENT item,
+            // not into the open sub.
+            pressKey('ArrowDown');
+            expect(document.activeElement?.textContent?.trim()).toBe('New');
+        });
     });
 });

package/dist/components/menubar/components/menubar-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'
@@ -28,6 +29,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({
@@ -79,10 +83,8 @@
       floating.setElements(menu.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()
     }
 
@@ -101,9 +103,8 @@
     if (!isBrowser) return
     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/menubar/components/menubar-content.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menubar-content.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/menubar/components/menubar-content.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AA4MtD,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"menubar-content.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/menubar/components/menubar-content.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AA8MtD,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/menubar/components/menubar-menu.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { MenubarMenuProps } from '../types.js'
-  import { setMenuContext } from '../../../internal/menu-context/index.js'
+  import { createMenuContext, setMenuContext } from '../../../internal/menu-context/index.js'
   import {
     createMenubarMenuIds,
     getMenubarContext,
@@ -19,11 +19,13 @@
 
   // Set the shared MenuContext so dropdown-menu items (Item, CheckboxItem, etc.)
   // can call close() correctly
-  setMenuContext({
-    close() {
-      root.closeMenu()
-    },
-  })
+  setMenuContext(
+    createMenuContext({
+      close() {
+        root.closeMenu()
+      },
+    }),
+  )
 
   setMenubarMenuContext({
     value,

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

@@ -1 +1 @@
-{"version":3,"file":"menubar-menu.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/menubar/components/menubar-menu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAsDnD,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"menubar-menu.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/menubar/components/menubar-menu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAwDnD,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/internal/escape-layer/__tests__/escape-layer.test.js

@@ -81,4 +81,33 @@ describe('escapeLayer', () => {
         // Should not throw after cleanup
         document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
     });
+    it('resolves behavior at keydown time (getter can flip between keypresses)', () => {
+        // A layer may pass `behavior` as a getter and decide per keypress — the
+        // submenu layer closes itself only when focus lives inside its content,
+        // and defers to the parent menu layer otherwise.
+        let topBehavior = 'close';
+        const onBottom = vi.fn();
+        const onTop = vi.fn();
+        const bottom = new EscapeLayerState({ enabled: true, onEscapeKeydown: onBottom });
+        const top = new EscapeLayerState({
+            enabled: true,
+            get behavior() {
+                return topBehavior;
+            },
+            onEscapeKeydown: onTop,
+        });
+        bottom.mount();
+        top.mount();
+        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+        expect(onTop).toHaveBeenCalledOnce();
+        expect(onBottom).not.toHaveBeenCalled();
+        // Same mounted layer, new answer from the getter: the keypress falls
+        // through to the bottom layer in the SAME stack state.
+        topBehavior = 'defer-otherwise-close';
+        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+        expect(onTop).toHaveBeenCalledOnce();
+        expect(onBottom).toHaveBeenCalledOnce();
+        top.unmount();
+        bottom.unmount();
+    });
 });

package/dist/internal/escape-layer/escape-layer.svelte.d.ts

@@ -10,7 +10,11 @@ export declare class EscapeLayerState {
     constructor(props: EscapeLayerProps);
     mount(): void;
     unmount(): void;
-    /** Update behavior dynamically. */
+    /**
+     * Update behavior dynamically. Writes through to `props.behavior` (behavior
+     * is resolved live at keydown time); only meaningful when `behavior` was
+     * provided as a plain value, not a getter.
+     */
     updateBehavior(behavior: EscapeKeydownBehavior): void;
 }
 /** Reset the layer stack (for testing only). */

package/dist/internal/escape-layer/escape-layer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"escape-layer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/internal/escape-layer/escape-layer.svelte.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAkCzE,qBAAa,gBAAgB;IAC3B,KAAK,EAAE,gBAAgB,CAAA;gBAEX,KAAK,EAAE,gBAAgB;IAInC,KAAK,IAAI,IAAI;IAiBb,OAAO,IAAI,IAAI;IAcf,mCAAmC;IACnC,cAAc,CAAC,QAAQ,EAAE,qBAAqB,GAAG,IAAI;CAMtD;AAED,gDAAgD;AAChD,wBAAgB,qBAAqB,IAAI,IAAI,CAK5C"}
+{"version":3,"file":"escape-layer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/internal/escape-layer/escape-layer.svelte.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AA4CzE,qBAAa,gBAAgB;IAC3B,KAAK,EAAE,gBAAgB,CAAA;gBAEX,KAAK,EAAE,gBAAgB;IAInC,KAAK,IAAI,IAAI;IAYb,OAAO,IAAI,IAAI;IAcf;;;;OAIG;IACH,cAAc,CAAC,QAAQ,EAAE,qBAAqB,GAAG,IAAI;CAGtD;AAED,gDAAgD;AAChD,wBAAgB,qBAAqB,IAAI,IAAI,CAK5C"}

package/dist/internal/escape-layer/escape-layer.svelte.js

@@ -6,6 +6,15 @@
  */
 import { isBrowser, kbd } from '../helpers/index.js';
 const layerStack = [];
+/**
+ * Behavior is resolved at KEYDOWN time, not mount time, so a layer can pass
+ * `behavior` as a getter and decide per keypress — e.g. the submenu layer
+ * closes only itself when focus lives inside its content, and defers to the
+ * parent menu layer otherwise (APG: Escape closes the menu containing focus).
+ */
+function resolveBehavior(entry) {
+    return entry.state.props.behavior ?? 'close';
+}
 function handleGlobalKeydown(event) {
     if (event.key !== kbd.ESCAPE)
         return;
@@ -14,18 +23,19 @@ function handleGlobalKeydown(event) {
     // Find the topmost layer that should handle the escape
     for (let i = layerStack.length - 1; i >= 0; i--) {
         const entry = layerStack[i];
-        if (entry.behavior === 'close') {
+        const behavior = resolveBehavior(entry);
+        if (behavior === 'close') {
             entry.state.props.onEscapeKeydown?.(event);
             return;
         }
-        if (entry.behavior === 'ignore') {
+        if (behavior === 'ignore') {
             return;
         }
         // 'defer-otherwise-close' — continue to next layer
     }
     // If all layers deferred, the bottom layer handles it
     const bottom = layerStack[0];
-    if (bottom && bottom.behavior === 'defer-otherwise-close') {
+    if (bottom && resolveBehavior(bottom) === 'defer-otherwise-close') {
         bottom.state.props.onEscapeKeydown?.(event);
     }
 }
@@ -39,15 +49,11 @@ export class EscapeLayerState {
             return;
         if (!this.props.enabled)
             return;
-        const entry = {
-            state: this,
-            behavior: this.props.behavior ?? 'close',
-        };
         // Add global listener if this is the first layer
         if (layerStack.length === 0) {
             document.addEventListener('keydown', handleGlobalKeydown, true);
         }
-        layerStack.push(entry);
+        layerStack.push({ state: this });
     }
     unmount() {
         if (!isBrowser)
@@ -61,12 +67,13 @@ export class EscapeLayerState {
             document.removeEventListener('keydown', handleGlobalKeydown, true);
         }
     }
-    /** Update behavior dynamically. */
+    /**
+     * Update behavior dynamically. Writes through to `props.behavior` (behavior
+     * is resolved live at keydown time); only meaningful when `behavior` was
+     * provided as a plain value, not a getter.
+     */
     updateBehavior(behavior) {
-        const entry = layerStack.find((e) => e.state === this);
-        if (entry) {
-            entry.behavior = behavior;
-        }
+        this.props.behavior = behavior;
     }
 }
 /** Reset the layer stack (for testing only). */

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

@@ -1,3 +1,3 @@
-export { getMenuContext, setMenuContext } from './menu-context.svelte.js';
-export type { MenuContext } from './menu-context.svelte.js';
+export { createMenuContext, getMenuContext, getOwnLevelMenuItems, isOwnLevelMenuItem, MENU_SUB_CONTENT_SELECTOR, setMenuContext, } from './menu-context.svelte.js';
+export type { MenuContext, MenuSubHandle } from './menu-context.svelte.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/internal/menu-context/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AACzE,YAAY,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/internal/menu-context/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,cAAc,EACd,oBAAoB,EACpB,kBAAkB,EAClB,yBAAyB,EACzB,cAAc,GACf,MAAM,0BAA0B,CAAA;AACjC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA"}

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

@@ -1 +1 @@
-export { getMenuContext, setMenuContext } from './menu-context.svelte.js';
+export { createMenuContext, getMenuContext, getOwnLevelMenuItems, isOwnLevelMenuItem, MENU_SUB_CONTENT_SELECTOR, setMenuContext, } from './menu-context.svelte.js';

package/dist/internal/menu-context/menu-context.svelte.d.ts

@@ -1,10 +1,72 @@
+import type { Point } from '../grace-area/types.js';
 /**
- * Shared menu context used by both DropdownMenu and ContextMenu.
- * Provides the minimal interface needed by shared sub-components (Item, CheckboxItem, etc.).
+ * Handle a submenu registers on its parent menu level so that sibling
+ * rows can coordinate pointer behavior (macOS/Radix model: hovering
+ * another item of the parent menu closes any open submenu, unless the
+ * pointer is traveling through the submenu's grace area).
+ */
+export interface MenuSubHandle {
+    /** Whether `target` belongs to this submenu (its trigger or its content). */
+    ownsTarget: (target: EventTarget | null) => boolean;
+    /** Whether the pointer is currently traveling through this submenu's grace area. */
+    isPointerInGrace: (point: Point) => boolean;
+    /**
+     * Closes the submenu (pointer path). The submenu still restores focus to
+     * its trigger when keyboard focus was inside its content (mixed modality),
+     * so focus is never orphaned on `document.body`.
+     */
+    closeSub: () => void;
+}
+/**
+ * Shared menu context used by DropdownMenu, ContextMenu and Menubar menus.
+ * Provides the minimal interface needed by shared sub-components
+ * (Item, CheckboxItem, Sub, etc.).
  */
 export interface MenuContext {
     close: () => void;
+    /** Registers a submenu living at this menu level. Returns an unregister fn. */
+    registerSub: (sub: MenuSubHandle) => () => void;
+    /**
+     * Pointer coordination — called on `pointerenter` of any item row at this
+     * level. Closes every registered submenu that neither owns the entered
+     * element nor has the pointer inside its grace area.
+     */
+    onItemEnter: (event: PointerEvent) => void;
+    /**
+     * Single-open-sub invariant (Radix semantics: one open sub per menu level).
+     * Called by a submenu right before it opens: force-closes every OTHER
+     * registered submenu at this level, including one spared by a grace-area
+     * check (its grace tracking and safety timer are cancelled by its
+     * `closeSub`). Covers keyboard opens, which never go through `onItemEnter`.
+     */
+    closeOtherSubs: (keep: MenuSubHandle) => void;
 }
+/**
+ * Builds a `MenuContext` with a per-menu submenu registry.
+ * SSR-safe: no DOM access happens here — only event handlers touch the DOM.
+ */
+export declare function createMenuContext(options: {
+    close: () => void;
+}): MenuContext;
 export declare function setMenuContext(ctx: MenuContext): void;
 export declare function getMenuContext(): MenuContext;
+/** Class hook of the inline submenu content (shared by every menu family). */
+export declare const MENU_SUB_CONTENT_SELECTOR = ".sp-dropdown-menu-sub-content";
+/**
+ * Whether `candidate` belongs to `container`'s own menu level.
+ *
+ * Submenu content renders INLINE inside the parent menu content (no portal),
+ * so a naive `querySelectorAll('[data-roving-focus-item]')` on the parent
+ * leaks the submenu's items into the parent's roving/typeahead collections.
+ * A candidate is "own level" when its closest sub-content ancestor is either
+ * absent, the container itself (items directly inside a sub-content), or
+ * outside the container.
+ */
+export declare function isOwnLevelMenuItem(container: HTMLElement, candidate: HTMLElement): boolean;
+/**
+ * Returns the enabled roving candidates that belong to `container`'s own
+ * menu level (excluding rows nested in an open submenu). Used for roving
+ * focus, typeahead and open-autofocus in every menu content.
+ */
+export declare function getOwnLevelMenuItems(container: HTMLElement): HTMLElement[];
 //# sourceMappingURL=menu-context.svelte.d.ts.map

package/dist/internal/menu-context/menu-context.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-context.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/internal/menu-context/menu-context.svelte.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,IAAI,CAAA;CAClB;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI,CAErD;AAED,wBAAgB,cAAc,IAAI,WAAW,CAE5C"}
+{"version":3,"file":"menu-context.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/internal/menu-context/menu-context.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAMnD;;;;;GAKG;AACH,MAAM,WAAW,aAAa;IAC5B,6EAA6E;IAC7E,UAAU,EAAE,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,KAAK,OAAO,CAAA;IACnD,oFAAoF;IACpF,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAA;IAC3C;;;;OAIG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB;AAED;;;;GAIG;AACH,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,+EAA+E;IAC/E,WAAW,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,MAAM,IAAI,CAAA;IAC/C;;;;OAIG;IACH,WAAW,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAA;IAC1C;;;;;;OAMG;IACH,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAA;CAC9C;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE;IAAE,KAAK,EAAE,MAAM,IAAI,CAAA;CAAE,GAAG,WAAW,CA0B7E;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI,CAErD;AAED,wBAAgB,cAAc,IAAI,WAAW,CAE5C;AAED,8EAA8E;AAC9E,eAAO,MAAM,yBAAyB,kCAAkC,CAAA;AAExE;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,GAAG,OAAO,CAG1F;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,EAAE,CAI1E"}

package/dist/internal/menu-context/menu-context.svelte.js

@@ -1,8 +1,67 @@
 import { getContext, setContext } from 'svelte';
+import { SvelteSet } from 'svelte/reactivity';
 const MENU_KEY = Symbol('sp-menu');
+/**
+ * Builds a `MenuContext` with a per-menu submenu registry.
+ * SSR-safe: no DOM access happens here — only event handlers touch the DOM.
+ */
+export function createMenuContext(options) {
+    const subs = new SvelteSet();
+    return {
+        close: options.close,
+        registerSub(sub) {
+            subs.add(sub);
+            return () => {
+                subs.delete(sub);
+            };
+        },
+        onItemEnter(event) {
+            if (subs.size === 0)
+                return;
+            const point = { x: event.clientX, y: event.clientY };
+            for (const sub of subs) {
+                if (sub.ownsTarget(event.target))
+                    continue;
+                if (sub.isPointerInGrace(point))
+                    continue;
+                sub.closeSub();
+            }
+        },
+        closeOtherSubs(keep) {
+            for (const sub of subs) {
+                if (sub !== keep)
+                    sub.closeSub();
+            }
+        },
+    };
+}
 export function setMenuContext(ctx) {
     setContext(MENU_KEY, ctx);
 }
 export function getMenuContext() {
     return getContext(MENU_KEY);
 }
+/** Class hook of the inline submenu content (shared by every menu family). */
+export const MENU_SUB_CONTENT_SELECTOR = '.sp-dropdown-menu-sub-content';
+/**
+ * Whether `candidate` belongs to `container`'s own menu level.
+ *
+ * Submenu content renders INLINE inside the parent menu content (no portal),
+ * so a naive `querySelectorAll('[data-roving-focus-item]')` on the parent
+ * leaks the submenu's items into the parent's roving/typeahead collections.
+ * A candidate is "own level" when its closest sub-content ancestor is either
+ * absent, the container itself (items directly inside a sub-content), or
+ * outside the container.
+ */
+export function isOwnLevelMenuItem(container, candidate) {
+    const subAncestor = candidate.closest(MENU_SUB_CONTENT_SELECTOR);
+    return subAncestor === null || subAncestor === container || !container.contains(subAncestor);
+}
+/**
+ * Returns the enabled roving candidates that belong to `container`'s own
+ * menu level (excluding rows nested in an open submenu). Used for roving
+ * focus, typeahead and open-autofocus in every menu content.
+ */
+export function getOwnLevelMenuItems(container) {
+    return Array.from(container.querySelectorAll('[data-roving-focus-item]:not([data-disabled])')).filter((el) => isOwnLevelMenuItem(container, el));
+}

package/dist/internal/roving-focus/roving-focus.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"roving-focus.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/internal/roving-focus/roving-focus.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAKlD;;;;;GAKG;AACH,qBAAa,gBAAgB;;gBAGf,KAAK,EAAE,gBAAgB;IAInC;;;OAGG;IACH,aAAa,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,EAAE;IAMpD;;;;;;;OAOG;IACH,aAAa,CAAC,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,aAAa,GAAG,IAAI;IA2DjE;;;;;;OAMG;IACH,WAAW,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;CAOpE"}
+{"version":3,"file":"roving-focus.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/internal/roving-focus/roving-focus.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAKlD;;;;;GAKG;AACH,qBAAa,gBAAgB;;gBAGf,KAAK,EAAE,gBAAgB;IAInC;;;OAGG;IACH,aAAa,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,EAAE;IAOpD;;;;;;;OAOG;IACH,aAAa,CAAC,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,aAAa,GAAG,IAAI;IA2DjE;;;;;;OAMG;IACH,WAAW,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;CAOpE"}

package/dist/internal/roving-focus/roving-focus.svelte.js

@@ -17,8 +17,9 @@ export class RovingFocusGroup {
      */
     getCandidates(container) {
         const selector = this.#props.candidateSelector ?? DEFAULT_CANDIDATE_SELECTOR;
+        const filter = this.#props.candidateFilter;
         const all = Array.from(container.querySelectorAll(selector));
-        return all.filter((el) => !el.hasAttribute('data-disabled'));
+        return all.filter((el) => !el.hasAttribute('data-disabled') && (filter?.(el) ?? true));
     }
     /**
      * Handles keyboard navigation within the roving focus group.

package/dist/internal/roving-focus/types.d.ts

@@ -8,5 +8,11 @@ export interface RovingFocusProps {
     loop?: boolean;
     /** CSS selector or data attribute for candidate elements. */
     candidateSelector?: string;
+    /**
+     * Optional predicate applied on top of `candidateSelector`.
+     * Return `false` to exclude a matched element from the collection
+     * (e.g. menu contents exclude rows nested in an open submenu).
+     */
+    candidateFilter?: (candidate: HTMLElement) => boolean;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/internal/roving-focus/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/internal/roving-focus/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/D,MAAM,WAAW,gBAAgB;IAC/B,oCAAoC;IACpC,WAAW,EAAE,WAAW,CAAA;IACxB,sBAAsB;IACtB,GAAG,CAAC,EAAE,SAAS,CAAA;IACf,mCAAmC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,6DAA6D;IAC7D,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/internal/roving-focus/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/D,MAAM,WAAW,gBAAgB;IAC/B,oCAAoC;IACpC,WAAW,EAAE,WAAW,CAAA;IACxB,sBAAsB;IACtB,GAAG,CAAC,EAAE,SAAS,CAAA;IACf,mCAAmC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,6DAA6D;IAC7D,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,KAAK,OAAO,CAAA;CACtD"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spectral_labs/ui",
   "type": "module",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"