entasis 0.11.0 → 0.13.0

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)
         };
     }

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

@@ -1,48 +1,48 @@
 import { type InferComponentTheme } from '../../utils/cva/index.js';
 export declare const menuBarTheme: {
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    trigger: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    trigger: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         active: {
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 };
 export type MenuBarTheme = typeof menuBarTheme;
 export type MenuBarThemeProps = InferComponentTheme<MenuBarTheme>;
 export declare const setMenuBarTheme: (theme: InferComponentTheme<{
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    trigger: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    trigger: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         active: {
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 }>) => void;
-export declare const useMenuBarTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+export declare const useMenuBarTheme: import("../../utils/cva/theme.ts").UseComponentTheme<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    trigger: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    trigger: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         active: {
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 }>;

package/dist/components/MenuOption/MenuOption.svelte

@@ -20,6 +20,8 @@
 		selected,
 		active = false,
 		disabled = false,
+		closeOnClick = true,
+		textValue,
 		title,
 		description,
 		children,
@@ -45,6 +47,7 @@
 	// key is simply absent unless a `highlighted` prop is passed (listbox/combobox family).
 	const dynamicAttrs = $derived({
 		...attrs,
+		...(closeOnClick === false ? { 'data-menu-keep-open': 'true' } : {}),
 		...(highlighted !== undefined ? { 'data-highlighted': highlighted ? 'true' : undefined } : {}),
 		...(selected !== undefined
 			? {
@@ -57,7 +60,7 @@
 					'data-selected': selected || undefined
 				}
 			: {}),
-		...(disabled ? { 'aria-disabled': true, onclick: handleClick } : {}),
+		...(disabled ? { 'aria-disabled': true, 'data-disabled': '', onclick: handleClick } : {}),
 		...(disabled && elementType === 'button' ? { disabled: true } : {}),
 		...(disabled && elementType === 'a' ? { tabindex: -1, href: undefined } : {})
 	});
@@ -83,6 +86,7 @@
 	data-color={color}
 	data-size={size}
 	data-density={density}
+	data-typeahead={textValue}
 	onclick={disabled || onclick ? handleClick : undefined}
 	onpointerenter={disabled ? undefined : onpointerenter}
 	onpointerleave={disabled ? undefined : onpointerleave}

package/dist/components/MenuOption/menuOption.mcp.d.ts

@@ -1 +1 @@
-export declare const menuOptionDescription = "\n# MenuOption Component\n\nThe MenuOption component is a flexible menu item that can be used in dropdown menus, navigation menus, or context menus. It supports title/description layout, custom content, icons, colors, and various interaction handlers.\n\n## Basic Usage\n\n```svelte\n<MenuOption>\n\t{#snippet title()}\n\t\tMy Menu Item\n\t{/snippet}\n</MenuOption>\n```\n\n## Props\n\n### Core Props\n- **size**: 'small' | 'normal' | 'large' (default: 'normal') - Scales typography and icons only\n- **density**: 'compact' | 'normal' | 'comfortable' (default: 'normal') - Owns paddings, gaps and min-height; reflected as `data-density` on the row. Combine freely with size.\n- **color**: Colors (default: 'primary') - Sets the semantic text color and persistent active tint\n  - Available: primary, secondary, success, warning, danger, info, neutral\n\n### Content Slots\nEither use **title/description** OR **children** (mutually exclusive):\n- **title**: Snippet - Main text of the menu item\n- **description**: Snippet - Secondary descriptive text below the title\n- **children**: Snippet - Custom content (replaces title+description)\n\n### Icon/Badge Slots\n- **prefix**: Snippet - Icon or badge at the start of the menu item\n- **suffix**: Snippet - Icon or badge at the end of the menu item\n\n### Interaction Props\n- **onclick**: (event: MouseEvent) => void - Native click event handler\n- **onpointerenter**: (event: PointerEvent) => void - Native pointer enter event handler\n- **onpointerleave**: (event: PointerEvent) => void - Native pointer leave event handler\n\n### Link Props\n- **href**: string - If provided, renders as an anchor element\n- **target**: string - Link target attribute (e.g., '_blank')\n- **rel**: string - Link rel attribute (e.g., 'noopener noreferrer')\n\n### Listbox / option props\nMenuOption is also the shared row primitive for the listbox family (Command, Select, Combobox).\n- **role**: string - ARIA role override. Defaults to button/link/menuitem; pass `option` inside a `listbox`. Menu passes `menuitemradio` for option items that set `selected`.\n- **highlighted**: boolean - Keyboard-active state (virtual focus). Applies the highlight background and reflects to `data-highlighted`. Menus omit this and rely on `useNavigation` setting `data-highlighted` imperatively.\n- **selected**: boolean - Sets `data-selected` plus the role-appropriate state: `aria-checked` for checkable roles (`menuitemradio`, `menuitemcheckbox`, `checkbox`, `radio`, `switch`) and `aria-selected` for listbox `option` rows (pass a check icon via `suffix`).\n- **disabled**: boolean - Dims the row, sets `aria-disabled`, blocks pointer/click.\n- **attrs**: Record<string, any> - Extra attributes/handlers spread onto the row (`id`, `data-value`, `tabindex`, `onpointermove`, `onmousedown`).\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: MenuOptionThemeProps - Custom theme overrides\n- **as**: string - Override the automatic element type detection\n\n## Menu Structure\n\n```\n<MenuOption>\n\t<Prefix />              <!-- Icon/badge at start -->\n\t<Content>               <!-- Main content area -->\n\t\t<Title />           <!-- Primary text -->\n\t\t<Description />     <!-- Secondary text -->\n\t</Content>\n\t<Suffix />              <!-- Icon/badge at end -->\n</MenuOption>\n```\n\n## Examples\n\n### Basic Menu Item with Title\n```svelte\n<MenuOption>\n\t{#snippet title()}\n\t\tSettings\n\t{/snippet}\n</MenuOption>\n```\n\n### Menu Item with Title and Description\n```svelte\n<MenuOption>\n\t{#snippet title()}\n\t\tAccount Settings\n\t{/snippet}\n\t{#snippet description()}\n\t\tManage your account preferences and security\n\t{/snippet}\n</MenuOption>\n```\n\n### Menu Item with Prefix Icon\n```svelte\n<script lang=\"ts\">\n\timport { MenuOption } from 'entasis/menu-option';\n\timport { gearIcon } from 'entasis/icons/gear';\n</script>\n\n<MenuOption>\n\t{#snippet prefix()}\n\t\t{@render gearIcon()}\n\t{/snippet}\n\t{#snippet title()}\n\t\tSettings\n\t{/snippet}\n</MenuOption>\n```\n\n### Menu Item with Suffix Icon\n```svelte\n<script lang=\"ts\">\n\timport { MenuOption } from 'entasis/menu-option';\n\timport { caretRightIcon } from 'entasis/icons/caretRight';\n</script>\n\n<MenuOption>\n\t{#snippet title()}\n\t\tMore Options\n\t{/snippet}\n\t{#snippet suffix()}\n\t\t{@render caretRightIcon()}\n\t{/snippet}\n</MenuOption>\n```\n\n### Menu Item with Both Icons\n```svelte\n<script lang=\"ts\">\n\timport { MenuOption } from 'entasis/menu-option';\n\timport { userIcon } from 'entasis/icons/user';\n\timport { checkIcon } from 'entasis/icons/check';\n</script>\n\n<MenuOption>\n\t{#snippet prefix()}\n\t\t{@render userIcon()}\n\t{/snippet}\n\t{#snippet title()}\n\t\tJohn Doe\n\t{/snippet}\n\t{#snippet suffix()}\n\t\t{@render checkIcon({ class: 'text-success' })}\n\t{/snippet}\n</MenuOption>\n```\n\n### Different Sizes\n```svelte\n<MenuOption size=\"small\">\n\t{#snippet title()}Small Menu Item{/snippet}\n</MenuOption>\n\n<MenuOption size=\"normal\">\n\t{#snippet title()}Normal Menu Item{/snippet}\n</MenuOption>\n\n<MenuOption size=\"large\">\n\t{#snippet title()}Large Menu Item{/snippet}\n</MenuOption>\n```\n\n### Different Densities\n```svelte\n<!-- density scales paddings/gaps/min-height; size scales text/icons -->\n<MenuOption density=\"compact\">\n\t{#snippet title()}Small row{/snippet}\n</MenuOption>\n\n<MenuOption density=\"normal\">\n\t{#snippet title()}Normal row{/snippet}\n</MenuOption>\n\n<MenuOption density=\"comfortable\">\n\t{#snippet title()}Large row{/snippet}\n</MenuOption>\n```\n\n### Different Colors\n```svelte\n<MenuOption color=\"primary\">\n\t{#snippet title()}Primary{/snippet}\n</MenuOption>\n\n<MenuOption color=\"danger\">\n\t{#snippet title()}Delete{/snippet}\n</MenuOption>\n\n<MenuOption color=\"success\">\n\t{#snippet title()}Approve{/snippet}\n</MenuOption>\n```\n\n### Interactive Menu Item with Click Handler\n```svelte\n<script>\n\tlet count = $state(0);\n</script>\n\n<MenuOption onclick={() => count++}>\n\t{#snippet title()}\n\t\tClicked {count} times\n\t{/snippet}\n</MenuOption>\n```\n\n### Menu Item with Hover Handlers\n```svelte\n<script>\n\tlet isHovered = $state(false);\n</script>\n\n<MenuOption \n\tonpointerenter={() => isHovered = true}\n\tonpointerleave={() => isHovered = false}\n>\n\t{#snippet title()}\n\t\t{isHovered ? 'Hovering!' : 'Hover over me'}\n\t{/snippet}\n</MenuOption>\n```\n\n### Menu Item as Link\n```svelte\n<MenuOption href=\"/settings\">\n\t{#snippet title()}\n\t\tGo to Settings\n\t{/snippet}\n</MenuOption>\n```\n\n### External Link\n```svelte\n<script lang=\"ts\">\n\timport { MenuOption } from 'entasis/menu-option';\n\timport { arrowSquareOutIcon } from 'entasis/icons/arrowSquareOut';\n</script>\n\n<MenuOption \n\thref=\"https://example.com\" \n\ttarget=\"_blank\" \n\trel=\"noopener noreferrer\"\n>\n\t{#snippet title()}\n\t\tVisit External Site\n\t{/snippet}\n\t{#snippet suffix()}\n\t\t{@render arrowSquareOutIcon()}\n\t{/snippet}\n</MenuOption>\n```\n\n### Custom Content with Children\n```svelte\n<MenuOption>\n\t{#snippet children()}\n\t\t<div class=\"flex items-center gap-2\">\n\t\t\t<img src=\"/avatar.jpg\" alt=\"User\" class=\"w-8 h-8 rounded-full\" />\n\t\t\t<div>\n\t\t\t\t<div class=\"font-bold\">John Doe</div>\n\t\t\t\t<div class=\"text-xs text-neutral/70\">john@example.com</div>\n\t\t\t</div>\n\t\t</div>\n\t{/snippet}\n</MenuOption>\n```\n\n### Menu with Multiple Options\n```svelte\n<script lang=\"ts\">\n\timport { MenuOption } from 'entasis/menu-option';\n\timport { gearIcon } from 'entasis/icons/gear';\n\timport { userIcon } from 'entasis/icons/user';\n\timport { signOutIcon } from 'entasis/icons/signOut';\n\timport { questionIcon } from 'entasis/icons/question';\n</script>\n\n<div class=\"w-64 bg-surface rounded-xl border border-neutral-muted p-1\">\n\t<MenuOption>\n\t\t{#snippet prefix()}{@render userIcon()}{/snippet}\n\t\t{#snippet title()}Profile{/snippet}\n\t\t{#snippet description()}View and edit your profile{/snippet}\n\t</MenuOption>\n\t\n\t<MenuOption>\n\t\t{#snippet prefix()}{@render gearIcon()}{/snippet}\n\t\t{#snippet title()}Settings{/snippet}\n\t\t{#snippet description()}Manage your preferences{/snippet}\n\t</MenuOption>\n\t\n\t<MenuOption>\n\t\t{#snippet prefix()}{@render questionIcon()}{/snippet}\n\t\t{#snippet title()}Help & Support{/snippet}\n\t</MenuOption>\n\t\n\t<div class=\"border-t border-neutral-muted my-1\"></div>\n\t\n\t<MenuOption color=\"danger\">\n\t\t{#snippet prefix()}{@render signOutIcon()}{/snippet}\n\t\t{#snippet title()}Log Out{/snippet}\n\t</MenuOption>\n</div>\n```\n\n### With Custom Theme\n```svelte\n<MenuOption \n\ttheme={{\n\t\troot: { base: 'rounded-full' },\n\t\ttitle: { base: 'font-bold' }\n\t}}\n>\n\t{#snippet title()}\n\t\tCustom Styled Menu Item\n\t{/snippet}\n</MenuOption>\n```\n\n### With Attachments\n```svelte\n<script lang=\"ts\">\n\timport { MenuOption } from 'entasis/menu-option';\n\timport { spinnerOverlay } from 'entasis/spinner-overlay';\n\t\n\tlet loading = $state(false);\n\t\n\tasync function handleClick() {\n\t\tloading = true;\n\t\tawait fetch('/api/action');\n\t\tloading = false;\n\t}\n</script>\n\n<MenuOption \n\tonclick={handleClick}\n\t{@attach spinnerOverlay({ loading })}\n>\n\t{#snippet title()}\n\t\tPerform Action\n\t{/snippet}\n</MenuOption>\n```\n\n### Override Element Type\n```svelte\n<!-- Force render as div even with onclick -->\n<MenuOption as=\"div\" onclick={() => console.log('clicked')}>\n\t{#snippet title()}\n\t\tCustom Element Type\n\t{/snippet}\n</MenuOption>\n```\n\n## Accessibility\n\n- Automatically sets appropriate `role` attribute based on element type\n  - `button` for interactive elements\n  - `link` for anchor elements\n  - `menuitem` for non-interactive elements\n- Supports keyboard navigation when used as button or link\n- Proper semantic HTML structure\n- Color foreground meets accessibility standards\n\n## Element Type Detection\n\nThe component automatically determines the HTML element to render:\n1. If `as` prop is provided \u2192 uses that element\n2. If `href` is provided \u2192 renders as `<a>`\n3. Otherwise \u2192 renders as `<button>`\n4. Otherwise \u2192 renders as `<div>`\n\n## Notes\n\n- Title and description snippets are mutually exclusive with children snippet\n- Hover states automatically apply background color based on the color prop\n- Prefix icons are positioned at the start, suffix icons at the end (with ml-auto)\n- Hover and virtual focus use the shared current-color state layer\n- Works well within Popover or Dialog components for dropdown menus\n\n## Theme Customization\n\nThe MenuOption component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main menu option container styles\n- **title**: Menu option title text styles\n- **description**: Menu option description text styles\n- **prefix**: Prefix icon/content styles\n- **suffix**: Suffix icon/content styles\n- **content**: Content wrapper styles\n\n### Available Variants\n\n**root**:\n- base: Base classes applied to all menu options\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n  - density: 'compact' | 'normal' | 'comfortable' - Padding, gap, and min-height\n  - color: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' - Color scheme and hover states\n\n**title**:\n- base: Base classes for title text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n**description**:\n- base: Base classes for description text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n**prefix**:\n- base: Base classes for prefix content\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size\n  - align: 'start' | 'center' - Vertical alignment\n\n**suffix**:\n- base: Base classes for suffix content\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size\n\n**content**:\n- base: Base classes for content wrapper\n- Variants:\n  - density: 'compact' | 'normal' | 'comfortable' - Gap spacing between title and description\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<MenuOption\n  theme={{\n    root: {\n      base: 'rounded-lg',\n      density: {\n        comfortable: 'px-4 py-3 min-h-12'\n      }\n    },\n    title: {\n      size: {\n        large: 'text-lg font-semibold'\n      }\n    }\n  }}\n>\n  {#snippet title()}\n    Custom Menu Option\n  {/snippet}\n</MenuOption>\n```\n\n**Color Customization**:\n```svelte\n<MenuOption \n  color=\"danger\"\n  theme={{\n    root: {\n      color: {\n        danger: 'text-red-600 highlight:bg-red-50 highlight:text-red-700'\n      }\n    }\n  }}\n>\n  {#snippet title()}\n    Delete Item\n  {/snippet}\n</MenuOption>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setMenuOptionTheme } from './index.ts';\n  \n  setMenuOptionTheme({\n    root: {\n      base: 'rounded-md transition-colors',\n      density: {\n        normal: 'px-3 py-2'\n      }\n    },\n    prefix: {\n      size: {\n        normal: 'w-5 h-5'\n      }\n    }\n  });\n</script>\n```\n";
+export declare const menuOptionDescription = "\n# MenuOption Component\n\nThe MenuOption component is a flexible menu item that can be used in dropdown menus, navigation menus, or context menus. It supports title/description layout, custom content, icons, colors, and various interaction handlers.\n\n## Basic Usage\n\n```svelte\n<MenuOption>\n\t{#snippet title()}\n\t\tMy Menu Item\n\t{/snippet}\n</MenuOption>\n```\n\n## Props\n\n### Core Props\n- **size**: 'small' | 'normal' | 'large' (default: 'normal') - Scales typography and icons only\n- **density**: 'compact' | 'normal' | 'comfortable' (default: 'normal') - Owns paddings, gaps and min-height; reflected as `data-density` on the row. Combine freely with size.\n- **color**: Colors (default: 'primary') - Sets the semantic text color and persistent active tint\n  - Available: primary, secondary, success, warning, danger, info, neutral\n\n### Content Slots\nEither use **title/description** OR **children** (mutually exclusive):\n- **title**: Snippet - Main text of the menu item\n- **description**: Snippet - Secondary descriptive text below the title\n- **children**: Snippet - Custom content (replaces title+description)\n\n### Icon/Badge Slots\n- **prefix**: Snippet - Icon or badge at the start of the menu item\n- **suffix**: Snippet - Icon or badge at the end of the menu item\n\n### Interaction Props\n- **onclick**: (event: MouseEvent) => void - Native click event handler\n- **onpointerenter**: (event: PointerEvent) => void - Native pointer enter event handler\n- **onpointerleave**: (event: PointerEvent) => void - Native pointer leave event handler\n\n### Link Props\n- **href**: string - If provided, renders as an anchor element\n- **target**: string - Link target attribute (e.g., '_blank')\n- **rel**: string - Link rel attribute (e.g., 'noopener noreferrer')\n\n### Listbox / option props\nMenuOption is also the shared row primitive for the listbox family (Command, Select, Combobox).\n- **role**: string - ARIA role override. Defaults to button/link/menuitem; pass `option` inside a `listbox`. Menu passes `menuitemradio` for option items that set `selected`.\n- **highlighted**: boolean - Keyboard-active state (virtual focus). Applies the highlight background and reflects to `data-highlighted`. Menus omit this and rely on `useNavigation` setting `data-highlighted` imperatively.\n- **selected**: boolean - Sets `data-selected` plus the role-appropriate state: `aria-checked` for checkable roles (`menuitemradio`, `menuitemcheckbox`, `checkbox`, `radio`, `switch`) and `aria-selected` for listbox `option` rows (pass a check icon via `suffix`).\n- **disabled**: boolean - Dims the row, sets `aria-disabled`, blocks pointer/click.\n- **closeOnClick**: boolean (default: true) - Whether pressing the row closes the menu it sits in. `false` marks the row `data-menu-keep-open=\"true\"`, which a PopupMenu, ContextMenu or MenuBar reads as \"leave the menu open\". Checkbox and radio rows of a Menu set it to `false` on their own.\n- **textValue**: string - Text menu type-ahead matches instead of the row's visible text, reflected to `data-typeahead`. Set it when the title is a snippet or the row shows a shortcut, prefix or description that should not count (`textValue: 'Copy'` for a row reading \"\u2318C Copy\").\n- **attrs**: Record<string, any> - Extra attributes/handlers spread onto the row (`id`, `data-value`, `tabindex`, `onpointermove`, `onmousedown`).\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: MenuOptionThemeProps - Custom theme overrides\n- **as**: string - Override the automatic element type detection\n\n## Menu Structure\n\n```\n<MenuOption>\n\t<Prefix />              <!-- Icon/badge at start -->\n\t<Content>               <!-- Main content area -->\n\t\t<Title />           <!-- Primary text -->\n\t\t<Description />     <!-- Secondary text -->\n\t</Content>\n\t<Suffix />              <!-- Icon/badge at end -->\n</MenuOption>\n```\n\n## Examples\n\n### Basic Menu Item with Title\n```svelte\n<MenuOption>\n\t{#snippet title()}\n\t\tSettings\n\t{/snippet}\n</MenuOption>\n```\n\n### Menu Item with Title and Description\n```svelte\n<MenuOption>\n\t{#snippet title()}\n\t\tAccount Settings\n\t{/snippet}\n\t{#snippet description()}\n\t\tManage your account preferences and security\n\t{/snippet}\n</MenuOption>\n```\n\n### Menu Item with Prefix Icon\n```svelte\n<script lang=\"ts\">\n\timport { MenuOption } from 'entasis/menu-option';\n\timport { gearIcon } from 'entasis/icons/gear';\n</script>\n\n<MenuOption>\n\t{#snippet prefix()}\n\t\t{@render gearIcon()}\n\t{/snippet}\n\t{#snippet title()}\n\t\tSettings\n\t{/snippet}\n</MenuOption>\n```\n\n### Menu Item with Suffix Icon\n```svelte\n<script lang=\"ts\">\n\timport { MenuOption } from 'entasis/menu-option';\n\timport { caretRightIcon } from 'entasis/icons/caretRight';\n</script>\n\n<MenuOption>\n\t{#snippet title()}\n\t\tMore Options\n\t{/snippet}\n\t{#snippet suffix()}\n\t\t{@render caretRightIcon()}\n\t{/snippet}\n</MenuOption>\n```\n\n### Menu Item with Both Icons\n```svelte\n<script lang=\"ts\">\n\timport { MenuOption } from 'entasis/menu-option';\n\timport { userIcon } from 'entasis/icons/user';\n\timport { checkIcon } from 'entasis/icons/check';\n</script>\n\n<MenuOption>\n\t{#snippet prefix()}\n\t\t{@render userIcon()}\n\t{/snippet}\n\t{#snippet title()}\n\t\tJohn Doe\n\t{/snippet}\n\t{#snippet suffix()}\n\t\t{@render checkIcon({ class: 'text-success' })}\n\t{/snippet}\n</MenuOption>\n```\n\n### Different Sizes\n```svelte\n<MenuOption size=\"small\">\n\t{#snippet title()}Small Menu Item{/snippet}\n</MenuOption>\n\n<MenuOption size=\"normal\">\n\t{#snippet title()}Normal Menu Item{/snippet}\n</MenuOption>\n\n<MenuOption size=\"large\">\n\t{#snippet title()}Large Menu Item{/snippet}\n</MenuOption>\n```\n\n### Different Densities\n```svelte\n<!-- density scales paddings/gaps/min-height; size scales text/icons -->\n<MenuOption density=\"compact\">\n\t{#snippet title()}Small row{/snippet}\n</MenuOption>\n\n<MenuOption density=\"normal\">\n\t{#snippet title()}Normal row{/snippet}\n</MenuOption>\n\n<MenuOption density=\"comfortable\">\n\t{#snippet title()}Large row{/snippet}\n</MenuOption>\n```\n\n### Different Colors\n```svelte\n<MenuOption color=\"primary\">\n\t{#snippet title()}Primary{/snippet}\n</MenuOption>\n\n<MenuOption color=\"danger\">\n\t{#snippet title()}Delete{/snippet}\n</MenuOption>\n\n<MenuOption color=\"success\">\n\t{#snippet title()}Approve{/snippet}\n</MenuOption>\n```\n\n### Interactive Menu Item with Click Handler\n```svelte\n<script>\n\tlet count = $state(0);\n</script>\n\n<MenuOption onclick={() => count++}>\n\t{#snippet title()}\n\t\tClicked {count} times\n\t{/snippet}\n</MenuOption>\n```\n\n### Menu Item with Hover Handlers\n```svelte\n<script>\n\tlet isHovered = $state(false);\n</script>\n\n<MenuOption \n\tonpointerenter={() => isHovered = true}\n\tonpointerleave={() => isHovered = false}\n>\n\t{#snippet title()}\n\t\t{isHovered ? 'Hovering!' : 'Hover over me'}\n\t{/snippet}\n</MenuOption>\n```\n\n### Menu Item as Link\n```svelte\n<MenuOption href=\"/settings\">\n\t{#snippet title()}\n\t\tGo to Settings\n\t{/snippet}\n</MenuOption>\n```\n\n### External Link\n```svelte\n<script lang=\"ts\">\n\timport { MenuOption } from 'entasis/menu-option';\n\timport { arrowSquareOutIcon } from 'entasis/icons/arrowSquareOut';\n</script>\n\n<MenuOption \n\thref=\"https://example.com\" \n\ttarget=\"_blank\" \n\trel=\"noopener noreferrer\"\n>\n\t{#snippet title()}\n\t\tVisit External Site\n\t{/snippet}\n\t{#snippet suffix()}\n\t\t{@render arrowSquareOutIcon()}\n\t{/snippet}\n</MenuOption>\n```\n\n### Custom Content with Children\n```svelte\n<MenuOption>\n\t{#snippet children()}\n\t\t<div class=\"flex items-center gap-2\">\n\t\t\t<img src=\"/avatar.jpg\" alt=\"User\" class=\"w-8 h-8 rounded-full\" />\n\t\t\t<div>\n\t\t\t\t<div class=\"font-bold\">John Doe</div>\n\t\t\t\t<div class=\"text-xs text-neutral/70\">john@example.com</div>\n\t\t\t</div>\n\t\t</div>\n\t{/snippet}\n</MenuOption>\n```\n\n### Menu with Multiple Options\n```svelte\n<script lang=\"ts\">\n\timport { MenuOption } from 'entasis/menu-option';\n\timport { gearIcon } from 'entasis/icons/gear';\n\timport { userIcon } from 'entasis/icons/user';\n\timport { signOutIcon } from 'entasis/icons/signOut';\n\timport { questionIcon } from 'entasis/icons/question';\n</script>\n\n<div class=\"w-64 bg-surface rounded-xl border border-neutral-muted p-1\">\n\t<MenuOption>\n\t\t{#snippet prefix()}{@render userIcon()}{/snippet}\n\t\t{#snippet title()}Profile{/snippet}\n\t\t{#snippet description()}View and edit your profile{/snippet}\n\t</MenuOption>\n\t\n\t<MenuOption>\n\t\t{#snippet prefix()}{@render gearIcon()}{/snippet}\n\t\t{#snippet title()}Settings{/snippet}\n\t\t{#snippet description()}Manage your preferences{/snippet}\n\t</MenuOption>\n\t\n\t<MenuOption>\n\t\t{#snippet prefix()}{@render questionIcon()}{/snippet}\n\t\t{#snippet title()}Help & Support{/snippet}\n\t</MenuOption>\n\t\n\t<div class=\"border-t border-neutral-muted my-1\"></div>\n\t\n\t<MenuOption color=\"danger\">\n\t\t{#snippet prefix()}{@render signOutIcon()}{/snippet}\n\t\t{#snippet title()}Log Out{/snippet}\n\t</MenuOption>\n</div>\n```\n\n### With Custom Theme\n```svelte\n<MenuOption \n\ttheme={{\n\t\troot: { base: 'rounded-full' },\n\t\ttitle: { base: 'font-bold' }\n\t}}\n>\n\t{#snippet title()}\n\t\tCustom Styled Menu Item\n\t{/snippet}\n</MenuOption>\n```\n\n### With Attachments\n```svelte\n<script lang=\"ts\">\n\timport { MenuOption } from 'entasis/menu-option';\n\timport { spinnerOverlay } from 'entasis/spinner-overlay';\n\t\n\tlet loading = $state(false);\n\t\n\tasync function handleClick() {\n\t\tloading = true;\n\t\tawait fetch('/api/action');\n\t\tloading = false;\n\t}\n</script>\n\n<MenuOption \n\tonclick={handleClick}\n\t{@attach spinnerOverlay({ loading })}\n>\n\t{#snippet title()}\n\t\tPerform Action\n\t{/snippet}\n</MenuOption>\n```\n\n### Override Element Type\n```svelte\n<!-- Force render as div even with onclick -->\n<MenuOption as=\"div\" onclick={() => console.log('clicked')}>\n\t{#snippet title()}\n\t\tCustom Element Type\n\t{/snippet}\n</MenuOption>\n```\n\n## Accessibility\n\n- Automatically sets appropriate `role` attribute based on element type\n  - `button` for interactive elements\n  - `link` for anchor elements\n  - `menuitem` for non-interactive elements\n- Supports keyboard navigation when used as button or link\n- Proper semantic HTML structure\n- Color foreground meets accessibility standards\n\n## Element Type Detection\n\nThe component automatically determines the HTML element to render:\n1. If `as` prop is provided \u2192 uses that element\n2. If `href` is provided \u2192 renders as `<a>`\n3. Otherwise \u2192 renders as `<button>`\n4. Otherwise \u2192 renders as `<div>`\n\n## Notes\n\n- Title and description snippets are mutually exclusive with children snippet\n- Hover states automatically apply background color based on the color prop\n- Prefix icons are positioned at the start, suffix icons at the end (with ml-auto)\n- Hover and virtual focus use the shared current-color state layer\n- Works well within Popover or Dialog components for dropdown menus\n\n## Theme Customization\n\nThe MenuOption component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main menu option container styles\n- **title**: Menu option title text styles\n- **description**: Menu option description text styles\n- **prefix**: Prefix icon/content styles\n- **suffix**: Suffix icon/content styles\n- **content**: Content wrapper styles\n- **indicator**: The check of a checkbox or radio row in a Menu; it stays mounted and fades out when the row is unchecked\n\n### Available Variants\n\n**root**:\n- base: Base classes applied to all menu options\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n  - density: 'compact' | 'normal' | 'comfortable' - Padding, gap, and min-height\n  - color: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' - Color scheme and hover states\n\n**title**:\n- base: Base classes for title text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n**description**:\n- base: Base classes for description text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n**prefix**:\n- base: Base classes for prefix content\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size\n  - align: 'start' | 'center' - Vertical alignment\n\n**suffix**:\n- base: Base classes for suffix content\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size\n\n**content**:\n- base: Base classes for content wrapper\n- Variants:\n  - density: 'compact' | 'normal' | 'comfortable' - Gap spacing between title and description\n\n**indicator**:\n- base: Base classes for the check indicator (a transition on opacity and scale)\n- Variants:\n  - checked: boolean - Visible and full size when true, faded and shrunk when false\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<MenuOption\n  theme={{\n    root: {\n      base: 'rounded-lg',\n      density: {\n        comfortable: 'px-4 py-3 min-h-12'\n      }\n    },\n    title: {\n      size: {\n        large: 'text-lg font-semibold'\n      }\n    }\n  }}\n>\n  {#snippet title()}\n    Custom Menu Option\n  {/snippet}\n</MenuOption>\n```\n\n**Color Customization**:\n```svelte\n<MenuOption \n  color=\"danger\"\n  theme={{\n    root: {\n      color: {\n        danger: 'text-red-600 highlight:bg-red-50 highlight:text-red-700'\n      }\n    }\n  }}\n>\n  {#snippet title()}\n    Delete Item\n  {/snippet}\n</MenuOption>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setMenuOptionTheme } from './index.ts';\n  \n  setMenuOptionTheme({\n    root: {\n      base: 'rounded-md transition-colors',\n      density: {\n        normal: 'px-3 py-2'\n      }\n    },\n    prefix: {\n      size: {\n        normal: 'w-5 h-5'\n      }\n    }\n  });\n</script>\n```\n";

package/dist/components/MenuOption/menuOption.mcp.js

@@ -47,6 +47,8 @@ MenuOption is also the shared row primitive for the listbox family (Command, Sel
 - **highlighted**: boolean - Keyboard-active state (virtual focus). Applies the highlight background and reflects to \`data-highlighted\`. Menus omit this and rely on \`useNavigation\` setting \`data-highlighted\` imperatively.
 - **selected**: boolean - Sets \`data-selected\` plus the role-appropriate state: \`aria-checked\` for checkable roles (\`menuitemradio\`, \`menuitemcheckbox\`, \`checkbox\`, \`radio\`, \`switch\`) and \`aria-selected\` for listbox \`option\` rows (pass a check icon via \`suffix\`).
 - **disabled**: boolean - Dims the row, sets \`aria-disabled\`, blocks pointer/click.
+- **closeOnClick**: boolean (default: true) - Whether pressing the row closes the menu it sits in. \`false\` marks the row \`data-menu-keep-open="true"\`, which a PopupMenu, ContextMenu or MenuBar reads as "leave the menu open". Checkbox and radio rows of a Menu set it to \`false\` on their own.
+- **textValue**: string - Text menu type-ahead matches instead of the row's visible text, reflected to \`data-typeahead\`. Set it when the title is a snippet or the row shows a shortcut, prefix or description that should not count (\`textValue: 'Copy'\` for a row reading "⌘C Copy").
 - **attrs**: Record<string, any> - Extra attributes/handlers spread onto the row (\`id\`, \`data-value\`, \`tabindex\`, \`onpointermove\`, \`onmousedown\`).
 
 ### Styling Props
@@ -390,6 +392,7 @@ The theme object contains the following parts:
 - **prefix**: Prefix icon/content styles
 - **suffix**: Suffix icon/content styles
 - **content**: Content wrapper styles
+- **indicator**: The check of a checkbox or radio row in a Menu; it stays mounted and fades out when the row is unchecked
 
 ### Available Variants
 
@@ -426,6 +429,11 @@ The theme object contains the following parts:
 - Variants:
   - density: 'compact' | 'normal' | 'comfortable' - Gap spacing between title and description
 
+**indicator**:
+- base: Base classes for the check indicator (a transition on opacity and scale)
+- Variants:
+  - checked: boolean - Visible and full size when true, faded and shrunk when false
+
 ### Usage Examples
 
 **Basic Theme Override**:

package/dist/components/MenuOption/menuOption.props.d.ts

@@ -70,6 +70,18 @@ export type MenuOptionProps = WithAttachments<WithSlot<{
      * Disables the option: dims it, sets `aria-disabled`, and blocks pointer/click interaction.
      */
     disabled?: boolean;
+    /**
+     * Whether pressing the row closes the menu it sits in. `false` marks the row
+     * `data-menu-keep-open="true"`, which a PopupMenu reads as "leave the menu open".
+     * @default true
+     */
+    closeOnClick?: boolean;
+    /**
+     * Text that menu type-ahead matches instead of the row's visible text, reflected to
+     * `data-typeahead`. Use it when the title is a snippet or the row shows a prefix, shortcut or
+     * description that should not count (`textValue: 'Copy'` for a row reading "⌘C Copy").
+     */
+    textValue?: string;
     /**
      * Extra attributes/handlers spread onto the row element (`id`, `data-value`, `tabindex`,
      * `onpointermove`, `onmousedown`, aria-*). Escape hatch for listbox wiring.

package/dist/components/MenuOption/menuOption.theme.d.ts

@@ -1,6 +1,6 @@
 import { type InferComponentTheme } from '../../utils/cva/index.js';
 export declare const menuOptionTheme: {
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -32,22 +32,22 @@ export declare const menuOptionTheme: {
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    title: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    title: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    description: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    description: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    prefix: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    prefix: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -57,26 +57,32 @@ export declare const menuOptionTheme: {
             start: string;
             center: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    suffix: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    suffix: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    content: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    content: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         density: {
             compact: string;
             normal: string;
             comfortable: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    indicator: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
+        checked: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 };
 export type MenuOptionTheme = typeof menuOptionTheme;
 export type MenuOptionThemeProps = InferComponentTheme<MenuOptionTheme>;
 export declare const setMenuOptionTheme: (theme: InferComponentTheme<{
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -108,22 +114,22 @@ export declare const setMenuOptionTheme: (theme: InferComponentTheme<{
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    title: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    title: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    description: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    description: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    prefix: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    prefix: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -133,24 +139,30 @@ export declare const setMenuOptionTheme: (theme: InferComponentTheme<{
             start: string;
             center: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    suffix: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    suffix: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    content: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    content: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         density: {
             compact: string;
             normal: string;
             comfortable: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    indicator: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
+        checked: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 }>) => void;
-export declare const useMenuOptionTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+export declare const useMenuOptionTheme: import("../../utils/cva/theme.ts").UseComponentTheme<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -182,22 +194,22 @@ export declare const useMenuOptionTheme: import("../../utils/cva/theme.js").UseC
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    title: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    title: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    description: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    description: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    prefix: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    prefix: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -207,19 +219,25 @@ export declare const useMenuOptionTheme: import("../../utils/cva/theme.js").UseC
             start: string;
             center: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    suffix: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    suffix: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
             large: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    content: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    content: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         density: {
             compact: string;
             normal: string;
             comfortable: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
+    indicator: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
+        checked: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 }>;

package/dist/components/MenuOption/menuOption.theme.js

@@ -1,8 +1,8 @@
 import { setComponentTheme, useComponentTheme } from '../../utils/cva/index.js';
 import { cva } from '../../utils/cva/index.js';
-// `size` scales typography/icons only; `density` owns paddings, gaps and
-// min-heights ('small' matches the old small spacing, 'large' the old
-// large spacing — defaults render exactly as before the split).
+// `size` scales typography/icons; `density` owns paddings, gaps and min-heights. A `small` row
+// also steps its geometry down half a notch at every density (28px at normal, against 32px) (the compound variants below), so a
+// small menu is shorter as well as smaller-type; `normal` and `large` keep the density geometry.
 // A row is always flush against the padding box of whatever hosts it — a popover panel, a Command
 // palette, a Select listbox — so it keeps the `md` control step but never more than the host's
 // corner allows: `rounded-md-concentric` = `min(md, radius-parent - padding)`, computed from what
@@ -49,6 +49,11 @@ const defaultMenuOption = cva({
             false: ''
         }
     },
+    compoundVariants: [
+        { size: 'small', density: 'compact', class: 'px-sm py-xs gap-sm min-h-6' },
+        { size: 'small', density: 'normal', class: 'px-md py-xs gap-sm min-h-control-sm' },
+        { size: 'small', density: 'comfortable', class: 'px-lg py-sm gap-md min-h-control-lg' }
+    ],
     defaultVariants: {
         size: 'normal',
         density: 'normal',
@@ -131,13 +136,28 @@ const defaultMenuOptionContent = cva({
         density: 'normal'
     }
 });
+const defaultMenuOptionIndicator = cva({
+    // The check of a checkbox or radio row stays mounted: unchecking fades and shrinks it instead
+    // of removing it, so the exit plays.
+    base: 'inline-flex shrink-0 items-center justify-center transition-[opacity,scale] duration-fast ease-standard motion-reduce:transition-none',
+    variants: {
+        checked: {
+            true: 'opacity-100 scale-100',
+            false: 'opacity-0 scale-50'
+        }
+    },
+    defaultVariants: {
+        checked: false
+    }
+});
 export const menuOptionTheme = {
     root: defaultMenuOption,
     title: defaultMenuOptionTitle,
     description: defaultMenuOptionDescription,
     prefix: defaultMenuOptionPrefix,
     suffix: defaultMenuOptionSuffix,
-    content: defaultMenuOptionContent
+    content: defaultMenuOptionContent,
+    indicator: defaultMenuOptionIndicator
 };
 export const setMenuOptionTheme = setComponentTheme('menu-option');
 export const useMenuOptionTheme = useComponentTheme('menu-option', menuOptionTheme);

package/dist/components/Mermaid/mermaid.mcp.d.ts

@@ -1 +1 @@
-export declare const mermaidDescription = "\n# Mermaid Component\n\nRenders a [Mermaid](https://mermaid.js.org/) diagram (flowchart, sequence, gantt, pie, class, state, ER, etc.) from a code string, with pan, zoom, fullscreen and download controls. The diagram is themed with our design tokens so it adapts to light and dark automatically. Ported from svelte-streamdown's Mermaid element, rebuilt on the entasis state/theme system.\n\n## Basic Usage\n\n```svelte\n<Mermaid chart={`graph TD; A[Start] --> B{Choice}; B -->|Yes| C[OK]; B -->|No| D[Stop];`} />\n<Mermaid chart={sequenceCode} size=\"large\" />\n```\n\n## Props\n\n### Core Props\n- **chart**: string (required) - The mermaid diagram source. Sanitized before rendering (BOM, zero-width/control chars, smart quotes, CRLF, HTML entities, flowchart arrow spacing, trailing semicolons). Re-renders reactively when it changes.\n- **config**: MermaidConfig - Extra mermaid config merged over the defaults (`theme: 'base'`, `securityLevel: 'strict'`, brand `themeVariables`, flowchart `curve: 'basis'`). Pass `themeVariables` to override individual mapped colors, or `fontFamily` to change the diagram font.\n- **size**: 'small' | 'normal' | 'large' (default: 'normal') - The height of the diagram viewport.\n\n### Interaction Props\n- **controls**: boolean | { fit?, zoomIn?, zoomOut?, expand?, download? } (default: true) - The floating controls to show. `true` shows all, `false` hides the bar, an object toggles individual controls.\n- **mouseWheelZoom**: boolean (default: true) - Enable mouse-wheel zoom over the diagram (activated after a short hover so page scroll isn't hijacked). Pan-drag and the zoom buttons work regardless.\n- **touchPan**: boolean (default: false) - Capture single-finger touch as a pan. Off inline so the diagram never traps page scroll; the fullscreen dialog turns it on. Pinch-zoom always works.\n- **errorForgiving**: boolean (default: false) - Swallow transient parse/render errors and keep the last valid diagram on screen instead of showing the error overlay. For token-streaming (LLM output), where the source is incomplete/invalid between chunks. Errors are still reported via `onError`.\n\n### Event Props\n- **onRender**: (state: MermaidState) => void - Called after each successful render.\n- **onError**: (error: Error) => void - Called when loading mermaid, parsing, or rendering fails.\n\n### Advanced Props\n- **class**: string - Additional CSS classes on the root element (the panzoom viewport).\n- **theme**: MermaidTheme - Theme overrides (root, container, svg, buttons, error, skeleton).\n\n## Interactions\n\n- **Pan**: drag the diagram.\n- **Zoom**: the +/\u2212 buttons, mouse-wheel (after a short hover), pinch, or double-click.\n- **Fit**: the fit-to-view button re-centers and scales the diagram to the viewport.\n- **Fullscreen**: the expand button opens the same diagram in a `fullScreen` Dialog (focus trap, Escape and the close button exit, single-finger touch pans inside it).\n- **Download**: serializes the rendered diagram to a standalone .svg file.\n\n## Brand theming\n\nMermaid is initialized with `theme: 'base'` and a `themeVariables` object whose values are read from our `--color-*` design tokens at render time (mermaid reads them as concrete colors, not live CSS vars). The diagram re-renders when the active theme changes, so it stays in sync with light/dark. Mapping: `primaryColor -> --color-primary-muted`, `primaryTextColor/textColor -> --color-neutral`, `primaryBorderColor/nodeBorder -> --color-primary`, `lineColor -> --color-neutral-muted`, `background -> --color-surface`, `mainBkg -> --color-surface-raised`, `secondaryColor -> --color-secondary`, `tertiaryColor -> --color-neutral-muted`, plus note/cluster/title colors and `fontFamily`.\n\n## Examples\n\n### Live editable diagram\n```svelte\n<script>\n\tlet chart = $state('graph LR; A-->B; B-->C;');\n</script>\n<textarea bind:value={chart}></textarea>\n<Mermaid {chart} />\n```\n\n### Only some controls\n```svelte\n<Mermaid {chart} controls={{ zoomIn: true, zoomOut: true, fit: true, download: false, expand: false }} />\n```\n\n## Accessibility\n\n- The controls are Buttons with aria-labels and are keyboard accessible; the download uses safe blob/data URLs.\n- The render host has `role=\"img\"` with an aria-label; the error surface uses `role=\"alert\"`.\n\n## Notes\n\n- **mermaid is not bundled**: it is loaded from cdnjs at runtime, on the client only (mermaid **11.12.0**, the self-contained UMD build). The component is SSR-safe and shows a skeleton while loading. A strict Content-Security-Policy must allow `cdnjs.cloudflare.com` in `script-src`.\n- On a load failure or a mermaid parse/render error, an error surface is shown (danger tokens) with the message \u2014 `securityLevel: 'strict'` + `suppressErrorRendering` keep mermaid from injecting its own error DOM.\n- mermaid leaves temporary measuring containers in the body; they are removed after each render and on destroy.\n";
+export declare const mermaidDescription = "\n# Mermaid Component\n\nRenders a [Mermaid](https://mermaid.js.org/) diagram (flowchart, sequence, gantt, pie, class, state, ER, mindmap, timeline, kanban, git graph and more) from a code string, with pan, zoom, fullscreen and download controls. The source is Mermaid syntax; the renderer is [Pele](https://pele.run), a lightweight Mermaid renderer that outputs themeable SVG. The diagram is coloured with our design tokens through CSS variables, so it adapts to light and dark without re-rendering.\n\n## Basic Usage\n\n```svelte\n<Mermaid chart={`graph TD; A[Start] --> B{Choice}; B -->|Yes| C[OK]; B -->|No| D[Stop];`} />\n<Mermaid chart={sequenceCode} size=\"large\" />\n```\n\n## Props\n\n### Core Props\n- **chart**: string (required) - The mermaid diagram source. Sanitized before rendering (BOM, zero-width/control chars, smart quotes, CRLF, HTML entities, flowchart arrow spacing, trailing semicolons). Re-renders reactively when it changes.\n- **config**: MermaidConfig - Mermaid settings passed to the renderer (frontmatter and `%%{init}%%` directives in the source override them; support varies by diagram type), plus `fontFamily` to change the diagram font (default: the page font). Colours do not come from here: see Theming.\n- **size**: 'small' | 'normal' | 'large' (default: 'normal') - The height of the diagram viewport.\n\n### Interaction Props\n- **controls**: boolean | { fit?, zoomIn?, zoomOut?, expand?, download? } (default: true) - The floating controls to show. `true` shows all, `false` hides the bar, an object toggles individual controls.\n- **mouseWheelZoom**: boolean (default: true) - Enable mouse-wheel zoom over the diagram (activated after a short hover so page scroll isn't hijacked). Pan-drag and the zoom buttons work regardless.\n- **touchPan**: boolean (default: false) - Capture single-finger touch as a pan. Off inline so the diagram never traps page scroll; the fullscreen dialog turns it on. Pinch-zoom always works.\n- **errorForgiving**: boolean (default: false) - Swallow transient parse/render errors and keep the last valid diagram on screen instead of showing the error overlay. For token-streaming (LLM output), where the source is incomplete/invalid between chunks. Errors are still reported via `onError`.\n\n### Event Props\n- **onRender**: (state: MermaidState) => void - Called after each successful render.\n- **onError**: (error: Error) => void - Called when loading the renderer, parsing, or rendering fails. Parse errors carry the line in their message.\n\n### Advanced Props\n- **class**: string - Additional CSS classes on the root element (the panzoom viewport).\n- **theme**: MermaidTheme - Theme overrides (root, container, svg, buttons, error, skeleton).\n\n## Interactions\n\n- **Pan**: drag the diagram.\n- **Zoom**: the +/\u2212 buttons, mouse-wheel (after a short hover), pinch, or double-click.\n- **Fit**: the fit-to-view button re-centers and scales the diagram to the viewport.\n- **Fullscreen**: the expand button opens the same diagram in a `fullScreen` Dialog (focus trap, Escape and the close button exit, single-finger touch pans inside it).\n- **Download**: serializes the rendered diagram to a standalone .svg file.\n\n## Theming\n\nThe renderer draws with `--pele-*` CSS variables, and the component's root maps them onto our design tokens: `--pele-bg` (surface-raised), `--pele-fg` (neutral), `--pele-muted`, `--pele-line`, `--pele-surface`, `--pele-surface-alt` and `--pele-border` (soft mixes of primary over the surface), `--pele-accent` (primary), `--pele-critical` and `--pele-error` (danger), `--pele-radius`, and `--pele-series-1`\u2026`-8` for charts. Because they are live CSS variables, light/dark and palette changes restyle the diagram in place. Override any of them through the `root` theme part or a class, e.g. `class=\"[--pele-accent:var(--color-success)]\"`. Inline `style`, `classDef` and `linkStyle` in the source still win, with fixed colours.\n\n## Examples\n\n### Live editable diagram\n```svelte\n<script>\n\tlet chart = $state('graph LR; A-->B; B-->C;');\n</script>\n<textarea bind:value={chart}></textarea>\n<Mermaid {chart} />\n```\n\n### Only some controls\n```svelte\n<Mermaid {chart} controls={{ zoomIn: true, zoomOut: true, fit: true, download: false, expand: false }} />\n```\n\n## Accessibility\n\n- The controls are Buttons with aria-labels and are keyboard accessible; the download uses safe blob/data URLs.\n- The render host has `role=\"img\"` with an aria-label; the error surface uses `role=\"alert\"`.\n\n## Notes\n\n- **The renderer is not bundled**: Pele **1.6.0** is loaded from jsDelivr at runtime, on the client only (its self-contained global build, about 250 KB gzipped, every diagram type). The script carries the Theme's CSP nonce; a strict Content-Security-Policy must also allow `cdn.jsdelivr.net` in `script-src`. The component is SSR-safe and shows a skeleton while loading.\n- The rendered SVG has no `<style>` element or script, only presentation attributes and CSS variables, so it needs no style nonce.\n- On a load failure or a parse/render error, an error surface is shown (danger tokens) with the message.\n";