entasis 0.10.2 → 0.12.0

package/dist/components/Menu/menu.theme.d.ts

@@ -10,6 +10,55 @@ export declare const menuTheme: {
             comfortable: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    list: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    group: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    groupLabel: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    search: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    searchIcon: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    searchInput: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    empty: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     header: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     footer: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
 };
@@ -28,6 +77,55 @@ export declare const setMenuTheme: (theme: InferComponentTheme<{
             comfortable: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    list: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    group: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    groupLabel: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    search: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    searchIcon: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    searchInput: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    empty: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     header: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     footer: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
 }>) => void;
@@ -39,6 +137,55 @@ export declare const useMenuTheme: import("../../utils/cva/theme.js").UseCompone
             comfortable: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    list: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    group: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    groupLabel: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    search: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    searchIcon: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    searchInput: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    empty: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        density: {
+            compact: string;
+            normal: string;
+            comfortable: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     header: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     footer: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
 }>;

package/dist/components/Menu/menu.theme.js

@@ -15,6 +15,100 @@ const defaultMenu = cva({
         density: 'normal'
     }
 });
+// The `role="menu"` element itself: only rows, so a header or footer never sits inside it.
+const defaultMenuList = cva({
+    base: 'flex flex-col w-full outline-none',
+    variants: {
+        density: {
+            compact: 'gap-0',
+            normal: 'gap-micro',
+            comfortable: 'gap-xs'
+        }
+    },
+    defaultVariants: {
+        density: 'normal'
+    }
+});
+// A `role="group"`: its rows follow the menu's own rhythm.
+const defaultMenuGroup = cva({
+    base: 'flex flex-col w-full',
+    variants: {
+        density: {
+            compact: 'gap-0',
+            normal: 'gap-micro',
+            comfortable: 'gap-xs'
+        }
+    },
+    defaultVariants: {
+        density: 'normal'
+    }
+});
+const defaultMenuGroupLabel = cva({
+    base: 'text-xs font-medium text-neutral/70 select-none',
+    variants: {
+        density: {
+            compact: 'px-sm pt-xs',
+            normal: 'px-md pt-sm pb-micro',
+            comfortable: 'px-lg pt-md pb-xs'
+        }
+    },
+    defaultVariants: {
+        density: 'normal'
+    }
+});
+// The search field of a filterable menu: a row-height strip with a leading icon, a divider below.
+const defaultMenuSearch = cva({
+    base: 'flex w-full items-center border-b border-neutral-muted',
+    variants: {
+        size: {
+            small: 'h-control-sm gap-sm px-sm',
+            normal: 'h-control-md gap-md px-md',
+            large: 'h-control-lg gap-md px-lg'
+        }
+    },
+    defaultVariants: {
+        size: 'normal'
+    }
+});
+const defaultMenuSearchIcon = cva({
+    base: 'shrink-0 opacity-50',
+    variants: {
+        size: {
+            small: 'size-3.5',
+            normal: 'size-4',
+            large: 'size-4.5'
+        }
+    },
+    defaultVariants: {
+        size: 'normal'
+    }
+});
+const defaultMenuSearchInput = cva({
+    base: 'placeholder:text-neutral/70 w-full min-w-0 flex-1 bg-transparent outline-none',
+    variants: {
+        size: {
+            small: 'text-xs',
+            normal: 'text-sm',
+            large: 'text-base'
+        }
+    },
+    defaultVariants: {
+        size: 'normal'
+    }
+});
+const defaultMenuEmpty = cva({
+    base: 'text-sm text-neutral/70 text-center select-none',
+    variants: {
+        density: {
+            compact: 'px-sm py-xs',
+            normal: 'px-md py-md',
+            comfortable: 'px-lg py-lg'
+        }
+    },
+    defaultVariants: {
+        density: 'normal'
+    }
+});
 const defaultMenuHeader = cva({
     base: ''
 });
@@ -23,6 +117,13 @@ const defaultMenuFooter = cva({
 });
 export const menuTheme = {
     root: defaultMenu,
+    list: defaultMenuList,
+    group: defaultMenuGroup,
+    groupLabel: defaultMenuGroupLabel,
+    search: defaultMenuSearch,
+    searchIcon: defaultMenuSearchIcon,
+    searchInput: defaultMenuSearchInput,
+    empty: defaultMenuEmpty,
     header: defaultMenuHeader,
     footer: defaultMenuFooter
 };

package/dist/components/Menu/menuTree.d.ts

@@ -1,3 +1,37 @@
-import type { MenuItem } from './menu.props.js';
+import type { MenuFilterMatchItem, MenuFilterOptions, MenuItem } from './menu.props.js';
 export declare const getMenuMaxDepth: (items: MenuItem[]) => number;
 export declare const hasSubmenuItems: (items: MenuItem[]) => boolean;
+/**
+ * One key per row, by the row's identity: an explicit `key`, else its plain text, `href` or
+ * `textValue`, else its position among rows that have none. A repeated key gets a counter, so
+ * the keys stay unique. Rows rebuilt on every render (an inline `items` array, a derived list)
+ * therefore keep their DOM node, and with it focus, the tab stop and hover state, while rows
+ * before them come and go.
+ */
+export declare const menuItemKeys: (items: readonly MenuItem[]) => string[];
+/**
+ * Row keys that survive a row's text changing. The keys come from `menuItemKeys`, but a row of
+ * the previous render that is gone (Mute becoming Unmute, Show becoming Hide) hands its key to
+ * a new row of the same type that has no previous row, in order. The row then keeps its DOM node,
+ * and with it focus, when it changes its own label as it is pressed. Call it with each render's
+ * rows, for one list; it remembers only the render before.
+ */
+export declare const createMenuKeys: () => (items: readonly MenuItem[]) => string[];
+/**
+ * The text a row is matched and announced on: `textValue`, else the row's own plain text, else the
+ * text content of the rendered element (read lazily by the caller when this is empty).
+ */
+export declare const menuItemText: (item: MenuItem) => string;
+/** The value a row reports to `onHighlightChange`; `undefined` for rows with no value. */
+export declare const menuItemValue: (item: MenuItem) => string | undefined;
+/** The default match of a filterable menu: case- and accent-insensitive, over the row's text and value. */
+export declare const defaultMenuMatch: (row: MenuFilterMatchItem, search: string) => boolean;
+/**
+ * The rows left after a search. A group stays when any of its rows does (the group's own label
+ * matching keeps every row of it); a radio group is narrowed to its matching radios; separators
+ * are dropped while searching, as a divider between hidden rows means nothing. A submenu row
+ * stays when its own text matches: what is inside a submenu is searched in the submenu.
+ */
+export declare const filterMenuItems: (items: readonly MenuItem[], search: string, options: MenuFilterOptions | undefined) => MenuItem[];
+/** Whether a group-or-row list holds a row a user can press (not only separators and labels). */
+export declare const hasMenuRows: (items: readonly MenuItem[]) => boolean;

package/dist/components/Menu/menuTree.js

@@ -1,10 +1,167 @@
+import { matchItem } from '../../utils/match.js';
+/** The rows a group holds; a group is transparent to depth, keys and searches. */
+const childItems = (item) => (item.type === 'group' ? item.items : []);
 export const getMenuMaxDepth = (items) => {
     let maxDepth = 0;
     for (const menuItem of items) {
+        if (menuItem.type === 'group') {
+            maxDepth = Math.max(maxDepth, getMenuMaxDepth(childItems(menuItem)));
+            continue;
+        }
         if (menuItem.type !== 'submenu')
             continue;
         maxDepth = Math.max(maxDepth, 1 + getMenuMaxDepth(menuItem.menu));
     }
     return maxDepth;
 };
-export const hasSubmenuItems = (items) => items.some((menuItem) => menuItem.type === 'submenu');
+export const hasSubmenuItems = (items) => items.some((menuItem) => menuItem.type === 'submenu' ||
+    (menuItem.type === 'group' && hasSubmenuItems(childItems(menuItem))));
+const textOf = (slot) => typeof slot === 'string' || typeof slot === 'number' ? String(slot) : undefined;
+/** The text a row shows when it is plain text: its title, else its children. */
+const labelOf = (item) => {
+    switch (item.type) {
+        case 'separator':
+            return textOf(item.children);
+        case 'group':
+        case 'radio-group':
+            return textOf(item.label);
+        case 'button':
+            return textOf(item.children) ?? textOf(item.label);
+        default:
+            return textOf(item.title) ?? textOf(item.children);
+    }
+};
+/**
+ * One key per row, by the row's identity: an explicit `key`, else its plain text, `href` or
+ * `textValue`, else its position among rows that have none. A repeated key gets a counter, so
+ * the keys stay unique. Rows rebuilt on every render (an inline `items` array, a derived list)
+ * therefore keep their DOM node, and with it focus, the tab stop and hover state, while rows
+ * before them come and go.
+ */
+export const menuItemKeys = (items) => {
+    const seen = new Map();
+    return items.map((item, index) => {
+        const explicit = item.key;
+        const named = explicit !== undefined
+            ? `k:${explicit}`
+            : `${item.type}:${labelOf(item) ??
+                ('textValue' in item ? item.textValue : undefined) ??
+                ('href' in item ? item.href : undefined) ??
+                `@${index}`}`;
+        const count = seen.get(named) ?? 0;
+        seen.set(named, count + 1);
+        return count === 0 ? named : `${named}~${count}`;
+    });
+};
+/**
+ * Row keys that survive a row's text changing. The keys come from `menuItemKeys`, but a row of
+ * the previous render that is gone (Mute becoming Unmute, Show becoming Hide) hands its key to
+ * a new row of the same type that has no previous row, in order. The row then keeps its DOM node,
+ * and with it focus, when it changes its own label as it is pressed. Call it with each render's
+ * rows, for one list; it remembers only the render before.
+ */
+export const createMenuKeys = () => {
+    let previous = [];
+    return (items) => {
+        const natural = menuItemKeys(items);
+        const before = new Map(previous.map((entry) => [entry.natural, entry]));
+        const keys = natural.map((name) => before.get(name)?.key);
+        const present = new Set(natural);
+        const used = new Set(keys.filter((key) => key !== undefined));
+        // Rows of the previous render that no row matches, waiting for a new row to take over.
+        const gone = previous.filter((entry) => !present.has(entry.natural));
+        natural.forEach((name, index) => {
+            if (keys[index] !== undefined)
+                return;
+            const type = items[index].type;
+            const successor = gone.findIndex((entry) => entry.type === type && !used.has(entry.key));
+            if (successor === -1)
+                return;
+            keys[index] = gone[successor].key;
+            used.add(gone.splice(successor, 1)[0].key);
+        });
+        const result = natural.map((name, index) => {
+            let key = keys[index] ?? name;
+            // A fresh row's own key can equal one a neighbour inherited: keep every key unique.
+            for (let count = 1; keys[index] === undefined && used.has(key); count += 1) {
+                key = `${name}~~${count}`;
+            }
+            used.add(key);
+            return key;
+        });
+        previous = result.map((key, index) => ({
+            natural: natural[index],
+            key,
+            type: items[index].type
+        }));
+        return result;
+    };
+};
+/**
+ * The text a row is matched and announced on: `textValue`, else the row's own plain text, else the
+ * text content of the rendered element (read lazily by the caller when this is empty).
+ */
+export const menuItemText = (item) => {
+    if (item.type === 'separator' || item.type === 'group' || item.type === 'radio-group') {
+        return labelOf(item) ?? '';
+    }
+    return (('textValue' in item ? item.textValue : undefined) ??
+        labelOf(item) ??
+        (item.type === 'checkbox' || item.type === 'option' || item.type === 'submenu'
+            ? textOf(item.description)
+            : undefined) ??
+        '');
+};
+/** The value a row reports to `onHighlightChange`; `undefined` for rows with no value. */
+export const menuItemValue = (item) => {
+    if (item.type === 'separator' || item.type === 'group')
+        return undefined;
+    if (item.type === 'radio-group')
+        return undefined;
+    if ('value' in item && typeof item.value === 'string')
+        return item.value;
+    return menuItemText(item) || undefined;
+};
+/** The default match of a filterable menu: case- and accent-insensitive, over the row's text and value. */
+export const defaultMenuMatch = (row, search) => matchItem({ label: row.text, value: row.value }, search.trim());
+/**
+ * The rows left after a search. A group stays when any of its rows does (the group's own label
+ * matching keeps every row of it); a radio group is narrowed to its matching radios; separators
+ * are dropped while searching, as a divider between hidden rows means nothing. A submenu row
+ * stays when its own text matches: what is inside a submenu is searched in the submenu.
+ */
+export const filterMenuItems = (items, search, options) => {
+    if (!search.trim())
+        return [...items];
+    const match = options?.match ?? defaultMenuMatch;
+    const matches = (item, text) => match({ value: menuItemValue(item), text, item }, search);
+    const result = [];
+    for (const item of items) {
+        switch (item.type) {
+            case 'separator':
+                break;
+            case 'group': {
+                const label = labelOf(item) ?? '';
+                const rows = label && matches(item, label) ? item.items : filterMenuItems(item.items, search, options);
+                if (rows.length > 0)
+                    result.push(rows === item.items ? item : { ...item, items: rows });
+                break;
+            }
+            case 'radio-group': {
+                const label = labelOf(item) ?? '';
+                const rows = label && matches(item, label)
+                    ? item.items
+                    : item.items.filter((radio) => matches({ ...radio, type: 'option' }, textOf(radio.title) ?? textOf(radio.children) ?? radio.textValue ?? radio.value));
+                if (rows.length > 0)
+                    result.push(rows === item.items ? item : { ...item, items: rows });
+                break;
+            }
+            default:
+                if (matches(item, menuItemText(item)))
+                    result.push(item);
+        }
+    }
+    return result;
+};
+/** Whether a group-or-row list holds a row a user can press (not only separators and labels). */
+export const hasMenuRows = (items) => items.some((item) => item.type !== 'separator');

package/dist/components/MenuBar/menuBar.mcp.d.ts

@@ -1 +1 @@
-export declare const menuBarDescription = "\n# MenuBar Component\n\nMenuBar composes several PopupMenu and Menu instances into one horizontal application menu. A click or keyboard action opens the first menu. While any menu is open, moving the pointer or keyboard focus across another top-level trigger switches to that menu immediately.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\timport { MenuBar, type MenuBarMenu } from 'entasis/menu-bar';\n\n\tconst menus: MenuBarMenu[] = [\n\t\t{\n\t\t\tlabel: 'File',\n\t\t\titems: [\n\t\t\t\t{ type: 'option', title: 'New file' },\n\t\t\t\t{ type: 'option', title: 'Open...' },\n\t\t\t\t{ type: 'separator' },\n\t\t\t\t{ type: 'option', title: 'Save' }\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\tlabel: 'Edit',\n\t\t\titems: [\n\t\t\t\t{ type: 'option', title: 'Undo' },\n\t\t\t\t{ type: 'option', title: 'Redo' }\n\t\t\t]\n\t\t}\n\t];\n</script>\n\n<MenuBar {menus} />\n```\n\n## Interaction\n\n- Click, Enter, Space, ArrowDown, or ArrowUp opens the focused top-level menu.\n- ArrowLeft and ArrowRight move between closed top-level triggers (mirrored in RTL).\n- Typing letters jumps to the next top-level trigger whose label starts with the typed text; the same type-ahead works inside each open menu.\n- Once a menu is open, hovering or focusing a sibling trigger switches the open menu immediately.\n- ArrowLeft and ArrowRight inside an open root menu switch to the adjacent top-level menu.\n- ArrowRight on a submenu trigger remains owned by Menu and opens that submenu.\n- Escape and outside-click dismissal remain owned by Popover.\n- Selecting a leaf item closes the active menu by default.\n\n## Props\n\n- **menus**: MenuBarMenu[] (required) - Top-level menus. Each entry accepts a label, optional prefix/suffix, disabled state, and normal Menu props such as items, theme, header, footer, and submenuMode.\n- **size**: 'small' | 'normal' | 'large' (default: 'normal') - Size shared by every top-level trigger.\n- **dir**: 'ltr' | 'rtl' (optional) - Explicit text direction for horizontal keyboard navigation. When omitted it is auto-detected from the i18n direction context, else from the menubar's computed CSS direction.\n- **closeOnItemClick**: boolean (default: true) - Closes the active popup after a leaf item is selected.\n- **class**: string - Additional classes for the root menubar.\n- **theme**: MenuBarThemeProps - Theme overrides for the root and trigger parts.\n\n## Menu Entry\n\n```typescript\ntype MenuBarMenu = Omit<MenuProps, 'focusOnMount'> & {\n\tlabel: string | Snippet;\n\tprefix?: string | Snippet;\n\tsuffix?: string | Snippet;\n\tdisabled?: boolean;\n};\n```\n\n## Structure\n\n```\n<div role=\"menubar\">\n\t<Button role=\"menuitem\" haspopup=\"menu\" />\n\t<PopupMenu>\n\t\t<Menu />\n\t</PopupMenu>\n</div>\n```\n\n## Accessibility\n\nMenuBar uses the ARIA menubar/menu pattern. Its triggers use roving tabindex, expose expanded state and popup relationships, skip disabled entries, loop at either edge, and preserve nested submenu keyboard behavior.\n";
+export declare const menuBarDescription = "\n# MenuBar Component\n\nMenuBar composes several PopupMenu and Menu instances into one horizontal application menu. A click or keyboard action opens the first menu. While any menu is open, moving the pointer or keyboard focus across another top-level trigger switches to that menu immediately.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\timport { MenuBar, type MenuBarMenu } from 'entasis/menu-bar';\n\n\tconst menus: MenuBarMenu[] = [\n\t\t{\n\t\t\tlabel: 'File',\n\t\t\titems: [\n\t\t\t\t{ type: 'option', title: 'New file' },\n\t\t\t\t{ type: 'option', title: 'Open...' },\n\t\t\t\t{ type: 'separator' },\n\t\t\t\t{ type: 'option', title: 'Save' }\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\tlabel: 'Edit',\n\t\t\titems: [\n\t\t\t\t{ type: 'option', title: 'Undo' },\n\t\t\t\t{ type: 'option', title: 'Redo' }\n\t\t\t]\n\t\t}\n\t];\n</script>\n\n<MenuBar {menus} />\n```\n\n## Interaction\n\n- Click, Enter, Space, ArrowDown, or ArrowUp opens the focused top-level menu. A keyboard open highlights the first row (the last one for ArrowUp); a pointer open focuses the menu itself.\n- ArrowLeft and ArrowRight move between closed top-level triggers (mirrored in RTL).\n- Typing letters jumps to the next top-level trigger whose label starts with the typed text; the same type-ahead works inside each open menu.\n- Once a menu is open, hovering or focusing a sibling trigger switches the open menu immediately.\n- ArrowLeft and ArrowRight inside an open root menu switch to the adjacent top-level menu.\n- ArrowRight on a submenu trigger remains owned by Menu and opens that submenu (ArrowLeft in RTL, whether the direction comes from the `dir` prop, the i18n context or the document: the portaled menu panel carries the bar's direction).\n- Tab in an open menu closes it and moves on to the control after the bar; Shift+Tab closes it and stays on the trigger. Focus that Tab moved elsewhere is not taken back when the menu finishes closing.\n- Arrow keys, Home and End pressed with Alt, Ctrl or Meta are left to the browser, on the bar and inside an open menu (Alt+ArrowLeft stays Back); Enter and Space still open the focused menu.\n- Escape and outside-click dismissal remain owned by Popover.\n- Selecting a leaf item closes the active menu by default.\n\n## Props\n\n- **menus**: MenuBarMenu[] (required) - Top-level menus. Each entry accepts a label, optional prefix/suffix, disabled state, and normal Menu props such as items, theme, header, footer, and submenuMode.\n- **size**: 'small' | 'normal' | 'large' (default: 'normal') - Size shared by every top-level trigger.\n- **dir**: 'ltr' | 'rtl' (optional) - Explicit text direction for horizontal keyboard navigation. When omitted it is auto-detected from the i18n direction context, else from the menubar's computed CSS direction.\n- **closeOnItemClick**: boolean (default: true) - Closes the active popup after a leaf item is selected.\n- **class**: string - Additional classes for the root menubar.\n- **theme**: MenuBarThemeProps - Theme overrides for the root and trigger parts.\n\n## Menu Entry\n\n```typescript\ntype MenuBarMenu = Omit<MenuProps, 'focusOnMount'> & {\n\tlabel: string | Snippet;\n\tprefix?: string | Snippet;\n\tsuffix?: string | Snippet;\n\tdisabled?: boolean;\n};\n```\n\n## Structure\n\n```\n<div role=\"menubar\">\n\t<Button role=\"menuitem\" haspopup=\"menu\" />\n\t<PopupMenu>\n\t\t<Menu />\n\t</PopupMenu>\n</div>\n```\n\n## Accessibility\n\nMenuBar uses the ARIA menubar/menu pattern. Its triggers use roving tabindex, expose expanded state and popup relationships, skip disabled entries, loop at either edge, and preserve nested submenu keyboard behavior.\n";

package/dist/components/MenuBar/menuBar.mcp.js

@@ -34,12 +34,14 @@ MenuBar composes several PopupMenu and Menu instances into one horizontal applic
 
 ## Interaction
 
-- Click, Enter, Space, ArrowDown, or ArrowUp opens the focused top-level menu.
+- Click, Enter, Space, ArrowDown, or ArrowUp opens the focused top-level menu. A keyboard open highlights the first row (the last one for ArrowUp); a pointer open focuses the menu itself.
 - ArrowLeft and ArrowRight move between closed top-level triggers (mirrored in RTL).
 - Typing letters jumps to the next top-level trigger whose label starts with the typed text; the same type-ahead works inside each open menu.
 - Once a menu is open, hovering or focusing a sibling trigger switches the open menu immediately.
 - ArrowLeft and ArrowRight inside an open root menu switch to the adjacent top-level menu.
-- ArrowRight on a submenu trigger remains owned by Menu and opens that submenu.
+- ArrowRight on a submenu trigger remains owned by Menu and opens that submenu (ArrowLeft in RTL, whether the direction comes from the \`dir\` prop, the i18n context or the document: the portaled menu panel carries the bar's direction).
+- Tab in an open menu closes it and moves on to the control after the bar; Shift+Tab closes it and stays on the trigger. Focus that Tab moved elsewhere is not taken back when the menu finishes closing.
+- Arrow keys, Home and End pressed with Alt, Ctrl or Meta are left to the browser, on the bar and inside an open menu (Alt+ArrowLeft stays Back); Enter and Space still open the focused menu.
 - Escape and outside-click dismissal remain owned by Popover.
 - Selecting a leaf item closes the active menu by default.
 

package/dist/components/MenuBar/menuBar.state.svelte.js

@@ -1,7 +1,9 @@
 import { tick, untrack } from 'svelte';
 import { createAttachmentKey } from 'svelte/attachments';
 import { on } from 'svelte/events';
+import { hasShortcutModifier } from '../../utils/useKeyDown.svelte.js';
 import { useNavigation } from '../../utils/useNavigation.svelte.js';
+import { elementById } from '../../utils/id.js';
 export function useMenuBarState(getMenus, getDirection, id) {
     const menuAttachmentKey = createAttachmentKey();
     const navigation = useNavigation({
@@ -13,6 +15,8 @@ export function useMenuBarState(getMenus, getDirection, id) {
     });
     const openStates = $state(untrack(() => getMenus().map(() => false)));
     let keyboardOpen = $state(false);
+    // ArrowUp on a trigger opens its menu on the last row, ArrowDown on the first.
+    let openOnLast = $state(false);
     let openedByTrigger = $state(false);
     let lastActiveIndex = $state(null);
     const triggerElements = $state([]);
@@ -20,8 +24,10 @@ export function useMenuBarState(getMenus, getDirection, id) {
         const index = openStates.findIndex(Boolean);
         return index === -1 ? null : index;
     });
-    const nextKey = $derived(getDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight');
-    const previousKey = $derived(getDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft');
+    // Read when a key arrives, not derived: the direction comes from computed style, which has no
+    // reactive dependency, so a `dir` changed on the page after the bar was used would stay cached.
+    const nextKey = () => (getDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight');
+    const previousKey = () => (getDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft');
     $effect(() => {
         const menuCount = getMenus().length;
         untrack(() => {
@@ -42,7 +48,7 @@ export function useMenuBarState(getMenus, getDirection, id) {
         }
         return -1;
     }
-    function openMenu(index, source, isTriggerActivation = false) {
+    function openMenu(index, source, isTriggerActivation = false, onLast = false) {
         const menus = getMenus();
         if (menus[index]?.disabled)
             return;
@@ -50,13 +56,13 @@ export function useMenuBarState(getMenus, getDirection, id) {
             openStates[menuIndex] = menuIndex === index;
         }
         keyboardOpen = source === 'keyboard';
+        openOnLast = onLast;
         openedByTrigger = isTriggerActivation;
         lastActiveIndex = index;
     }
     async function focusOpenMenu(index) {
         await tick();
-        document
-            .getElementById(`${id}-menu-${index}`)
+        elementById(triggerElements[index], `${id}-menu-${index}`)
             ?.querySelector('[role="menu"]')
             ?.focus();
     }
@@ -90,6 +96,11 @@ export function useMenuBarState(getMenus, getDirection, id) {
     function handleMenuClose(index) {
         if (openStates.some(Boolean) || lastActiveIndex !== index)
             return;
+        // Focus that went somewhere on purpose (Tab to the next control, a click in a field) stays
+        // there; only focus the closed menu dropped on the page is given back to its trigger.
+        const active = document.activeElement;
+        if (active && active !== document.body && active !== triggerElements[index])
+            return;
         triggerElements[index]?.focus();
     }
     const attachTrigger = (index) => (node) => untrack(() => {
@@ -103,6 +114,9 @@ export function useMenuBarState(getMenus, getDirection, id) {
                 event.key === ' ';
             if (!opensMenu)
                 return;
+            // Alt/Ctrl/Meta + an arrow is a browser shortcut; Enter and Space still activate.
+            if (event.key.startsWith('Arrow') && hasShortcutModifier(event))
+                return;
             event.preventDefault();
             event.stopPropagation();
             if (event.key === 'Enter' || event.key === ' ') {
@@ -113,7 +127,7 @@ export function useMenuBarState(getMenus, getDirection, id) {
                 void focusOpenMenu(index);
                 return;
             }
-            openMenu(index, 'keyboard', true);
+            openMenu(index, 'keyboard', true, event.key === 'ArrowUp');
         });
         return () => {
             focusCleanup();
@@ -124,14 +138,18 @@ export function useMenuBarState(getMenus, getDirection, id) {
         };
     });
     const attachMenuNavigation = (index) => (node) => on(node, 'keydown', (event) => {
-        if (event.key !== nextKey && event.key !== previousKey)
+        const next = nextKey();
+        if (event.key !== next && event.key !== previousKey())
+            return;
+        // Alt/Ctrl/Meta + an arrow is a browser shortcut (Alt+ArrowLeft is Back).
+        if (hasShortcutModifier(event))
             return;
         const target = event.target;
-        if (event.key === nextKey && typeof target.onNext === 'function')
+        if (event.key === next && typeof target.onNext === 'function')
             return;
         event.preventDefault();
         event.stopPropagation();
-        moveOpenMenu(index, event.key === nextKey ? 1 : -1);
+        moveOpenMenu(index, event.key === next ? 1 : -1);
     }, { capture: true });
     function getMenuProps(menu, index) {
         // `label`, `prefix`, `suffix` and `disabled` belong to the trigger button, not the menu.
@@ -142,7 +160,7 @@ export function useMenuBarState(getMenus, getDirection, id) {
         delete props.disabled;
         return {
             ...props,
-            focusOnMount: keyboardOpen && activeIndex === index ? true : 'container',
+            focusOnMount: keyboardOpen && activeIndex === index ? (openOnLast ? 'last' : true) : 'container',
             [menuAttachmentKey]: attachMenuNavigation(index)
         };
     }