entasis 0.10.2 → 0.12.0

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

@@ -72,6 +72,12 @@ export declare const menuOptionTheme: {
             comfortable: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    indicator: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        checked: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
 };
 export type MenuOptionTheme = typeof menuOptionTheme;
 export type MenuOptionThemeProps = InferComponentTheme<MenuOptionTheme>;
@@ -148,6 +154,12 @@ export declare const setMenuOptionTheme: (theme: InferComponentTheme<{
             comfortable: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    indicator: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        checked: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
 }>) => void;
 export declare const useMenuOptionTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
     root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
@@ -222,4 +234,10 @@ export declare const useMenuOptionTheme: import("../../utils/cva/theme.js").UseC
             comfortable: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    indicator: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+        checked: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../utils/cva/types.js").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";

package/dist/components/Mermaid/mermaid.mcp.js

@@ -1,7 +1,7 @@
 export const mermaidDescription = `
 # Mermaid Component
 
-Renders 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.
+Renders 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.
 
 ## Basic Usage
 
@@ -14,7 +14,7 @@ Renders a [Mermaid](https://mermaid.js.org/) diagram (flowchart, sequence, gantt
 
 ### Core Props
 - **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.
-- **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.
+- **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.
 - **size**: 'small' | 'normal' | 'large' (default: 'normal') - The height of the diagram viewport.
 
 ### Interaction Props
@@ -25,7 +25,7 @@ Renders a [Mermaid](https://mermaid.js.org/) diagram (flowchart, sequence, gantt
 
 ### Event Props
 - **onRender**: (state: MermaidState) => void - Called after each successful render.
-- **onError**: (error: Error) => void - Called when loading mermaid, parsing, or rendering fails.
+- **onError**: (error: Error) => void - Called when loading the renderer, parsing, or rendering fails. Parse errors carry the line in their message.
 
 ### Advanced Props
 - **class**: string - Additional CSS classes on the root element (the panzoom viewport).
@@ -39,9 +39,9 @@ Renders a [Mermaid](https://mermaid.js.org/) diagram (flowchart, sequence, gantt
 - **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).
 - **Download**: serializes the rendered diagram to a standalone .svg file.
 
-## Brand theming
+## Theming
 
-Mermaid 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\`.
+The 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\`…\`-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.
 
 ## Examples
 
@@ -66,7 +66,7 @@ Mermaid is initialized with \`theme: 'base'\` and a \`themeVariables\` object wh
 
 ## Notes
 
-- **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\`.
-- On a load failure or a mermaid parse/render error, an error surface is shown (danger tokens) with the message — \`securityLevel: 'strict'\` + \`suppressErrorRendering\` keep mermaid from injecting its own error DOM.
-- mermaid leaves temporary measuring containers in the body; they are removed after each render and on destroy.
+- **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.
+- The rendered SVG has no \`<style>\` element or script, only presentation attributes and CSS variables, so it needs no style nonce.
+- On a load failure or a parse/render error, an error surface is shown (danger tokens) with the message.
 `;

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

@@ -26,10 +26,9 @@ export type MermaidProps = WithAttachments<{
      */
     chart: string;
     /**
-     * Extra mermaid configuration merged over the defaults (`theme: 'base'`,
-     * strict security, brand `themeVariables`, flowchart curve `basis`). Provide
-     * `themeVariables` here to override individual mapped colors, or `fontFamily`
-     * to change the diagram font.
+     * Mermaid settings passed to the renderer (frontmatter and directives in the
+     * source override them), plus `fontFamily` to change the diagram font. Colours
+     * come from the theme's `--pele-*` variables, not from this object.
      */
     config?: MermaidConfig;
     /**

package/dist/components/Mermaid/mermaid.state.svelte.d.ts

@@ -1,27 +1,33 @@
 import { usePanzoom } from '../../utils/usePanzoom.svelte.js';
 import type { MermaidProps } from './mermaid.props.js';
-/** The subset of mermaid's config we set. Extra keys are allowed and forwarded. */
+/**
+ * Mermaid settings forwarded to Pele as its `config` (frontmatter and directives in the source
+ * still override them), plus `fontFamily` for the diagram font. Pele draws with CSS variables, so
+ * colours come from the theme rather than from a `themeVariables` key.
+ */
 export interface MermaidConfig {
-    theme?: 'base' | 'default' | 'dark' | 'forest' | 'neutral' | 'null';
-    startOnLoad?: boolean;
-    securityLevel?: 'strict' | 'loose' | 'antiscript' | 'sandbox';
-    suppressErrorRendering?: boolean;
     fontFamily?: string;
-    themeVariables?: Record<string, string>;
     flowchart?: {
-        useMaxWidth?: boolean;
-        htmlLabels?: boolean;
         curve?: string;
+        [key: string]: unknown;
     };
     [key: string]: unknown;
 }
-/** The minimal mermaid API surface this component calls. */
+/** The minimal Pele API surface this component calls (`window.pele` once loaded). */
 export interface MermaidModule {
-    initialize(config: MermaidConfig): void;
-    render(id: string, code: string): Promise<{
+    render(source: string, options?: {
+        fontFamily?: string;
+        fontSize?: number;
+        idPrefix?: string;
+        responsive?: boolean;
+        config?: Record<string, unknown>;
+        [key: string]: unknown;
+    }): {
         svg: string;
-        bindFunctions?: (el: Element) => void;
-    }>;
+        width: number;
+        height: number;
+        type: string;
+    };
 }
 /**
  * Sanitize raw mermaid source. Defensive against copy/paste artefacts: BOM,
@@ -38,20 +44,15 @@ export declare class MermaidState extends MermaidState_base {
     mermaid: MermaidModule | null;
     loading: boolean;
     error: Error | null;
-    private theme;
     private svgHost;
     private renderToken;
-    /** The derived themeVariables last handed to mermaid, to skip no-op re-renders. */
-    private themeSignature;
-    private get fontFamily();
+    private idPrefix;
     private mounted;
     private hovering;
     private hoverTimer;
     panzoom: ReturnType<typeof usePanzoom>;
     constructor(options: MermaidOptions);
     private ensureLoaded;
-    private lastTempId;
-    private removeTempContainer;
     render: () => Promise<void>;
     svgAttachment: (node: SVGSVGElement) => () => void;
     zoomIn: () => void;