entasis 0.11.0 → 0.13.0

package/dist/components/Tooltip/tooltip.mcp.d.ts

@@ -1 +1 @@
-export declare const tooltipDescription = "\n# Tooltip\n\nContextual information shown on hover or keyboard focus. Two forms share one surface:\n\n- `<Tooltip>` \u2014 a component with a `trigger` prop, like every other overlay.\n- `tooltip()` \u2014 the underlying attachment, for elements you already render yourself.\n\nBoth are rendered by the single tooltip surface that `<Theme>` mounts (`TooltipHost`).\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<Tooltip content=\"Click to submit\" trigger={{ content: 'Submit', variant: 'outline' }} />\n```\n\n## Props\n\n- **content**: string | Snippet (required) - Tooltip body\n- **trigger**: Snippet<[Attachment<HTMLElement>]> | ButtonProps & { content?: string } (required) -\n  A snippet receives the tooltip attachment and spreads it on its own element; an element the\n  browser cannot focus (a span, an icon) gets `tabindex=\"0\"` so keyboard focus shows the tooltip.\n  Button props render a Button carrying it; `children` (a string or a snippet) replaces\n  `content` for a richer body\n- **open**: boolean (default: false) - Shows the tooltip without hover or focus; bindable\n- **defaultOpen**: boolean (default: false) - Initial open state when `open` is not provided\n- **onOpenChange**: (open: boolean) => void - Called whenever the tooltip becomes visible or hidden,\n  hover and focus included\n- **position**: Placement (default: 'top') - Tooltip position relative to the trigger\n  - Options: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end'\n- **size**: 'small' | 'normal' | 'large' (default: 'normal') - Visual size\n- **color**: Colors (default: 'neutral') - Color theme\n- **variant**: 'solid' | 'outline' | 'soft' (default: 'solid') - Visual style matching Chip\n- **delay**: number (default: 400) - Delay in ms before showing tooltip; zero shows immediately\n- **offset**: number - Distance from the trigger in pixels\n- **class**: string - Additional CSS classes\n- **transition**: FSOProps - Custom transition configuration\n- **theme**: TooltipThemeProps - Per-instance theme overrides\n- **onAfterOpen**: () => void - Callback after the opening transition completes\n- **onAfterClose**: () => void - Callback after the closing transition completes\n\nEvery prop except `trigger`, `open`, `defaultOpen` and `onOpenChange` is also an option of the\n`tooltip()` attachment.\n\n## Examples\n\n### Button Trigger\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<Tooltip\n\tcontent=\"This is helpful information\"\n\ttrigger={{ content: 'Hover me', variant: 'outline', color: 'neutral' }}\n/>\n```\n\n### Snippet Trigger\n```svelte\n<script lang=\"ts\">\n\timport type { Attachment } from 'svelte/attachments';\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n{#snippet helpTrigger(attach: Attachment<HTMLElement>)}\n\t<span class=\"underline\" {@attach attach}>What is this?</span>\n{/snippet}\n\n<Tooltip content=\"Anchored to any element you like\" trigger={helpTrigger} />\n```\n\n### Forced Open\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<!-- Useful for docs, screenshots and visual tests -->\n<Tooltip open content=\"Always visible\" trigger={{ content: 'Anchor', variant: 'outline' }} />\n```\n\n### Different Positions\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<Tooltip content=\"Top tooltip\" position=\"top\" trigger={{ content: 'Top' }} />\n<Tooltip content=\"Bottom tooltip\" position=\"bottom\" trigger={{ content: 'Bottom' }} />\n<Tooltip content=\"Left tooltip\" position=\"left\" trigger={{ content: 'Left' }} />\n<Tooltip content=\"Right tooltip\" position=\"right\" trigger={{ content: 'Right' }} />\n```\n\n### Different Colors\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<Tooltip content=\"Success!\" color=\"success\" trigger={{ content: 'Success' }} />\n<Tooltip content=\"Warning!\" color=\"warning\" trigger={{ content: 'Warning' }} />\n<Tooltip content=\"Error!\" color=\"danger\" trigger={{ content: 'Error' }} />\n```\n\n### Custom Delay\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<Tooltip content=\"Quick tooltip\" delay={100} trigger={{ content: 'Quick (100ms)' }} />\n<Tooltip content=\"Slow tooltip\" delay={1000} trigger={{ content: 'Slow (1000ms)' }} />\n```\n\n### Different Sizes and Variants\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<Tooltip content=\"Small tooltip\" size=\"small\" trigger={{ content: 'Small' }} />\n<Tooltip content=\"Large tooltip\" size=\"large\" trigger={{ content: 'Large' }} />\n<Tooltip content=\"Outlined tooltip\" variant=\"outline\" trigger={{ content: 'Outline' }} />\n<Tooltip content=\"Soft tooltip\" variant=\"soft\" trigger={{ content: 'Soft' }} />\n```\n\n### With Snippet Content\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n{#snippet richContent()}\n\t<div class=\"p-2\">\n\t\t<strong>Pro Tip</strong>\n\t\t<p class=\"text-sm\">Use Ctrl+S to save</p>\n\t</div>\n{/snippet}\n\n<Tooltip content={richContent} trigger={{ content: 'Keyboard Shortcuts' }} />\n```\n\n### With Callbacks\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<Tooltip\n\tcontent=\"Tracked tooltip\"\n\tonAfterOpen={() => console.log('Tooltip opened')}\n\tonAfterClose={() => console.log('Tooltip closed')}\n\ttrigger={{ content: 'Track me' }}\n/>\n```\n\n## The tooltip() attachment\n\nUse the attachment when the element already exists in your markup \u2014 icons, table cells, list rows,\ndisabled wrappers \u2014 or inside another component's internals.\n\n```svelte\n<script lang=\"ts\">\n\timport { tooltip } from 'entasis/tooltip';\n</script>\n\n<button {@attach tooltip({ content: 'Click to submit' })}> Submit </button>\n\n<!-- On icons or any non-interactive element -->\n<span {@attach tooltip({ content: 'More information', position: 'right' })}> \u24D8 </span>\n\n<!-- Disabled elements do not fire events, so wrap them -->\n<span {@attach tooltip({ content: 'Feature coming soon' })}>\n\t<button disabled>Disabled Button</button>\n</span>\n```\n\nThe `<Tooltip>` component hands this same attachment to a snippet trigger, so the two forms are\ninterchangeable.\n\n## Accessibility\n\n- Shows on pointer hover and on keyboard focus (`focusin` / `focusout` on the trigger element), so\n  attach it to focusable elements for keyboard users\n- Dismissed on mouse leave or blur\n- Non-interactive (cannot be clicked)\n- Renders with `role=\"tooltip\"` and sets `aria-describedby` on the trigger while visible (any previous value is restored on hide)\n- Does not block content behind it\n\n## Notes\n\n- Only one tooltip shows at a time; an `open` tooltip hands the surface over when another tooltip is\n  hovered and reports that through `onOpenChange`\n- Automatically positions to stay in viewport using Floating UI\n- Uses smart delay: subsequent tooltips show instantly if within 400ms of previous\n- Brief content only (use Popover for interactive content)\n- The surface is a singleton (`TooltipHost`) rendered by `<Theme>`\n- Does not lock scroll or trap focus\n\n## Theme Customization\n\nThe Tooltip 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 tooltip container styles\n\n### Theme Type Definition\n\n```typescript\nimport type { TooltipThemeProps } from 'entasis/tooltip';\n\n// Example theme customization\nconst customTheme: TooltipThemeProps = {\n  root: {\n    base: 'inline-flex w-fit items-center rounded-full border font-medium',\n    size: {\n      small: 'h-5 px-2 text-xs',\n      normal: 'h-6 px-2.5 text-xs',\n      large: 'h-7 px-3 text-sm'\n    },\n\tcolor: {\n\t  neutral: 'bg-neutral text-neutral-contrast',\n      primary: 'bg-primary text-primary-contrast',\n      danger: 'bg-danger text-danger-contrast',\n      success: 'bg-success text-success-contrast',\n      warning: 'bg-warning text-warning-contrast',\n\t  info: 'bg-info text-info-contrast'\n\t},\n\tvariant: {\n\t  solid: 'bg-color text-color-contrast',\n\t  outline: 'border-color bg-transparent text-color-readable',\n\t  soft: 'bg-color-muted text-color-muted-readable'\n    }\n  }\n};\n```\n\n### Available Variants\n\n**root**:\n- base: Base classes applied to all tooltips\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Controls text size and padding\n  - color: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' - Color scheme\n  - variant: 'solid' | 'outline' | 'soft' - Matches Chip's visual variants\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<Tooltip\n\tcontent=\"Custom tooltip\"\n\ttheme={{ root: { base: 'rounded-lg lift-4 border-2', size: { normal: 'px-3 py-2 text-sm' } } }}\n\ttrigger={{ content: 'Hover me' }}\n/>\n```\n\n**Color Customization**:\n```svelte\n<script lang=\"ts\">\n\timport { tooltip } from 'entasis/tooltip';\n</script>\n\n<button\n\t{@attach tooltip({\n\t\tcontent: 'Success!',\n\t\tcolor: 'success',\n\t\ttheme: { root: { color: { success: 'bg-green-500 text-white lift-3' } } }\n\t})}\n>\n\tSuccess Tooltip\n</button>\n```\n\n**Global Theme Setting**:\n```svelte\n<script lang=\"ts\">\n\timport { setTooltipTheme } from 'entasis/tooltip';\n\n\tsetTooltipTheme({\n\t\troot: {\n\t\t\tbase: 'rounded-md lift-4 backdrop-blur-sm',\n\t\t\tsize: { normal: 'px-3 py-1.5 text-sm' },\n\t\t\tcolor: { neutral: 'bg-gray-900 text-white', primary: 'bg-blue-500 text-white' }\n\t\t}\n\t});\n</script>\n```\n\n## Motion\n\n- **motion** theme slot: one preset (no variants) \u2014 a short fade-and-rise, `duration: 'fast'`.\n- Resolved by the tooltip surface and handed to the underlying Popover, so it replaces the\n  popover preset.\n- Ladder: `<Theme components={{ tooltip: { motion } }}>` \u2192 `setTooltipTheme({ motion })` \u2192\n  `theme.motion` \u2192 the tooltip's `transition` option. Reduced motion collapses it to 0.\n- The tooltip surface is a singleton rendered by `<Theme>`, so a `setTooltipTheme` call\n  made *below* `<Theme>` never reaches it. Call it at or above the `<Theme>` boundary, or\n  use the `<Theme components={{ tooltip }}>` registry, which always applies.\n";
+export declare const tooltipDescription = "\n# Tooltip\n\nContextual information shown on hover or on keyboard focus (when the focus ring shows). Two forms share one surface:\n\n- `<Tooltip>` \u2014 a component with a `trigger` prop, like every other overlay.\n- `tooltip()` \u2014 the underlying attachment, for elements you already render yourself.\n\nBoth are rendered by the single tooltip surface that `<Theme>` mounts (`TooltipHost`).\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<Tooltip content=\"Click to submit\" trigger={{ content: 'Submit', variant: 'outline' }} />\n```\n\n## Props\n\n- **content**: string | Snippet (required) - Tooltip body\n- **trigger**: Snippet<[Attachment<HTMLElement>]> | ButtonProps & { content?: string } (required) -\n  A snippet receives the tooltip attachment and spreads it on its own element; an element the\n  browser cannot focus (a span, an icon) gets `tabindex=\"0\"` so keyboard focus shows the tooltip.\n  Button props render a Button carrying it; `children` (a string or a snippet) replaces\n  `content` for a richer body\n- **open**: boolean (default: false) - Shows the tooltip without hover or focus; bindable\n- **defaultOpen**: boolean (default: false) - Initial open state when `open` is not provided\n- **onOpenChange**: (open: boolean, details: OpenChangeDetails) => void - Called before the tooltip\n  shows or hides, whatever causes it (hover, focus, a press on the trigger, Escape, an outside press).\n  `details.reason` is `'trigger-hover'`, `'trigger-focus'`, `'trigger-press'`, `'outside-press'`,\n  `'escape-key'` or `'imperative-action'`; `details.event` and `details.trigger` say what caused it, and\n  `details.cancel()` keeps the tooltip as it was. When another tooltip takes the shared surface, the\n  one it leaves is told with a close that cannot be cancelled. A change to the `open` prop is silent\n- **position**: Placement (default: 'top') - Tooltip position relative to the trigger\n  - Options: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end'\n- **size**: 'small' | 'normal' | 'large' (default: 'normal') - Visual size\n- **color**: Colors (default: 'neutral') - Color theme\n- **variant**: 'solid' | 'outline' | 'soft' (default: 'solid') - Visual style matching Chip\n- **delay**: number (default: 400) - Delay in ms before showing tooltip; zero shows immediately\n- **closeDelay**: number (default: 0) - Delay in ms between the pointer leaving the trigger (or the\n  content) and the tooltip closing; moving to another tooltip's trigger within it hands the surface\n  over without closing it. With `hoverable` content the pointer always gets at least 100 ms to reach it\n- **hoverable**: boolean (default: true) - The tooltip stays open while the pointer is over its content\n  (WCAG 1.4.13), so its text can be read or selected and its links used. `false` makes the content\n  ignore the pointer and closes the tooltip as soon as the pointer leaves the trigger\n- **closeOnClick**: boolean (default: true) - A press on the trigger (pointer, or Enter / Space) closes\n  the tooltip, and it stays closed until the pointer leaves the trigger or focus moves away. `false`\n  leaves it open\n- **disabled**: boolean (default: false) - Turns the tooltip off: hover and focus do not open it, an\n  open one closes, and the trigger loses `aria-describedby`. Read live\n- **offset**: number - Distance from the trigger in pixels\n- **class**: string - Additional CSS classes\n- **transition**: FSOProps - Custom transition configuration\n- **theme**: TooltipThemeProps - Per-instance theme overrides\n- **onAfterOpen**: () => void - Callback after the opening transition completes\n- **onAfterClose**: () => void - Callback after the closing transition completes\n\nEvery prop except `trigger`, `open` and `defaultOpen` is also an option of the `tooltip()`\nattachment, `onOpenChange` included.\n\n## Examples\n\n### Button Trigger\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<Tooltip\n\tcontent=\"This is helpful information\"\n\ttrigger={{ content: 'Hover me', variant: 'outline', color: 'neutral' }}\n/>\n```\n\n### Snippet Trigger\n```svelte\n<script lang=\"ts\">\n\timport type { Attachment } from 'svelte/attachments';\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n{#snippet helpTrigger(attach: Attachment<HTMLElement>)}\n\t<span class=\"underline\" {@attach attach}>What is this?</span>\n{/snippet}\n\n<Tooltip content=\"Anchored to any element you like\" trigger={helpTrigger} />\n```\n\n### Forced Open\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<!-- Useful for docs, screenshots and visual tests -->\n<Tooltip open content=\"Always visible\" trigger={{ content: 'Anchor', variant: 'outline' }} />\n```\n\n### Different Positions\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<Tooltip content=\"Top tooltip\" position=\"top\" trigger={{ content: 'Top' }} />\n<Tooltip content=\"Bottom tooltip\" position=\"bottom\" trigger={{ content: 'Bottom' }} />\n<Tooltip content=\"Left tooltip\" position=\"left\" trigger={{ content: 'Left' }} />\n<Tooltip content=\"Right tooltip\" position=\"right\" trigger={{ content: 'Right' }} />\n```\n\n### Different Colors\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<Tooltip content=\"Success!\" color=\"success\" trigger={{ content: 'Success' }} />\n<Tooltip content=\"Warning!\" color=\"warning\" trigger={{ content: 'Warning' }} />\n<Tooltip content=\"Error!\" color=\"danger\" trigger={{ content: 'Error' }} />\n```\n\n### Custom Delay\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<Tooltip content=\"Quick tooltip\" delay={100} trigger={{ content: 'Quick (100ms)' }} />\n<Tooltip content=\"Slow tooltip\" delay={1000} trigger={{ content: 'Slow (1000ms)' }} />\n```\n\n### Different Sizes and Variants\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<Tooltip content=\"Small tooltip\" size=\"small\" trigger={{ content: 'Small' }} />\n<Tooltip content=\"Large tooltip\" size=\"large\" trigger={{ content: 'Large' }} />\n<Tooltip content=\"Outlined tooltip\" variant=\"outline\" trigger={{ content: 'Outline' }} />\n<Tooltip content=\"Soft tooltip\" variant=\"soft\" trigger={{ content: 'Soft' }} />\n```\n\n### With Snippet Content\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n{#snippet richContent()}\n\t<div class=\"p-2\">\n\t\t<strong>Pro Tip</strong>\n\t\t<p class=\"text-sm\">Use Ctrl+S to save</p>\n\t</div>\n{/snippet}\n\n<Tooltip content={richContent} trigger={{ content: 'Keyboard Shortcuts' }} />\n```\n\n### Hoverable Content\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n{#snippet help()}\n\tRead the <a href=\"/docs/shortcuts\">shortcut list</a>.\n{/snippet}\n\n<!-- The pointer can move onto the tooltip and use the link -->\n<Tooltip content={help} trigger={{ content: 'Shortcuts' }} />\n\n<!-- The pointer passes through, and the tooltip closes on leaving the trigger -->\n<Tooltip hoverable={false} content=\"Not interactive\" trigger={{ content: 'Hint' }} />\n```\n\n### Press and Disabled\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n\n\tlet busy = $state(false);\n</script>\n\n<!-- Closes when the trigger is pressed, and stays closed until the pointer leaves -->\n<Tooltip content=\"Save changes\" trigger={{ content: 'Save' }} />\n\n<!-- Stays open after a press -->\n<Tooltip closeOnClick={false} content=\"Save changes\" trigger={{ content: 'Save' }} />\n\n<!-- No tooltip while busy -->\n<Tooltip disabled={busy} content=\"Save changes\" trigger={{ content: 'Save' }} />\n```\n\n### With Callbacks\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<Tooltip\n\tcontent=\"Tracked tooltip\"\n\tonOpenChange={(open, details) => console.log(open, details.reason)}\n\tonAfterOpen={() => console.log('Tooltip opened')}\n\tonAfterClose={() => console.log('Tooltip closed')}\n\ttrigger={{ content: 'Track me' }}\n/>\n```\n\n## The tooltip() attachment\n\nUse the attachment when the element already exists in your markup \u2014 icons, table cells, list rows,\ndisabled wrappers \u2014 or inside another component's internals.\n\n```svelte\n<script lang=\"ts\">\n\timport { tooltip } from 'entasis/tooltip';\n</script>\n\n<button {@attach tooltip({ content: 'Click to submit' })}> Submit </button>\n\n<!-- On icons or any non-interactive element -->\n<span {@attach tooltip({ content: 'More information', position: 'right' })}> \u24D8 </span>\n\n<!-- Disabled elements do not fire events, so wrap them -->\n<span {@attach tooltip({ content: 'Feature coming soon' })}>\n\t<button disabled>Disabled Button</button>\n</span>\n```\n\nThe `<Tooltip>` component hands this same attachment to a snippet trigger, so the two forms are\ninterchangeable.\n\n## Styling hooks\n\nThe surface (the `role=\"tooltip\"` element that `class` and the theme style) and the trigger carry state attributes.\n\nAttributes are presence attributes (set while the state holds, omitted otherwise) unless they carry a value.\n\n**Data attributes**\n- `data-open`: On the surface: present while the tooltip shows.\n- `data-closed`: On the surface: present while its exit transition plays.\n- `data-entering`: On the surface: present while the enter transition plays.\n- `data-exiting`: On the surface: present while the exit transition plays.\n- `data-side`: On the surface: the side of the trigger it sits on after flipping, `top`, `right`, `bottom` or `left`.\n- `data-align`: On the surface: `start`, `center` or `end`, how it lines up with the trigger.\n- `data-anchor-hidden`: On the surface: present while the trigger is scrolled out of view.\n- `data-instant`: On the surface: present while it moved straight from one trigger to another, which plays no transition.\n- `data-color`: On the surface: the resolved `color`.\n- `data-size`: On the surface: the resolved `size`.\n- `data-variant`: On the surface: the resolved `variant`.\n- `data-popup-open`: On the trigger: present while its tooltip shows.\n- `data-popup-side`: On the trigger: the surface's `data-side` while it is placed.\n\n**CSS variables**\n- `--available-width`: The width in px the surface can take before it reaches the viewport edges, minus 20px.\n- `--available-height`: The room in px between the trigger and the viewport edge on the surface's side, minus 20px.\n- `--anchor-width`: The trigger's width in px, snapped to the device pixel grid.\n- `--anchor-height`: The trigger's height in px, snapped to the device pixel grid.\n- `--transform-origin`: The surface corner facing the trigger, the point it scales from.\n\nThe typed maps `tooltipDataAttributes` and `tooltipCssVariables` (from `entasis/tooltip`) list each name with its meaning.\n\n```svelte\n<script>\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<!-- Nudge the surface away from the side it sits on while it enters -->\n<Tooltip content=\"Saved\" class=\"data-[side=top]:data-entering:-translate-y-0.5\" trigger={{ content: 'Save' }} />\n```\n\n## Accessibility\n\n- Shows on pointer hover and on keyboard focus (`focusin` / `focusout` on the trigger element), so\n  attach it to focusable elements for keyboard users\n- Focus opens it only when the browser shows a focus ring: focus from a mouse press or a tap, focus a\n  closing dialog or popover hands back, and focus that returns with the window do not\n- A touch tap is not a hover: the compatibility mouse events a tap fires never show the tooltip\n- The content can be hovered (WCAG 1.4.13: hoverable, dismissible, persistent): the pointer may move\n  onto the tooltip, and Escape dismisses it\n- A trigger that appears under a resting pointer (a dialog closing over it, a list scrolled by the\n  wheel) shows its tooltip once the pointer moves, not on arrival\n- Dismissed on mouse leave or blur\n- Brief, read-only content; use `hoverable={false}` for content that should never take the pointer\n- Renders with `role=\"tooltip\"` and sets `aria-describedby` on the trigger while visible (any previous value is restored on hide)\n- Does not block content behind it when `hoverable={false}`; the default hoverable content captures the pointer so it can be read\n\n## Notes\n\n- Only one tooltip shows at a time; an `open` tooltip hands the surface over when another tooltip is\n  hovered and reports that through `onOpenChange`. Moving between triggers keeps the surface: it\n  stays in place, resizes to the new content and carries `data-instant`; the tooltip it leaves gets\n  `onAfterClose` and the new one `onAfterOpen`\n- Automatically positions to stay in viewport using Floating UI\n- Uses smart delay: right after a tooltip, a hover card or a hover-opened popover was open\n  (within 400ms of it closing, or while a hover card or popover is still open), the next tooltip\n  shows instantly. A tooltip inside an open hover card keeps its delay.\n- Brief content only: text and a link are fine, but use Popover for controls and forms\n- The surface is a singleton (`TooltipHost`) rendered by `<Theme>`\n- Does not lock scroll or trap focus\n\n## Theme Customization\n\nThe Tooltip 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 tooltip container styles\n\n### Theme Type Definition\n\n```typescript\nimport type { TooltipThemeProps } from 'entasis/tooltip';\n\n// Example theme customization\nconst customTheme: TooltipThemeProps = {\n  root: {\n    base: 'inline-flex w-fit items-center rounded-full border font-medium',\n    size: {\n      small: 'h-5 px-2 text-xs',\n      normal: 'h-6 px-2.5 text-xs',\n      large: 'h-7 px-3 text-sm'\n    },\n\tcolor: {\n\t  neutral: 'bg-neutral text-neutral-contrast',\n      primary: 'bg-primary text-primary-contrast',\n      danger: 'bg-danger text-danger-contrast',\n      success: 'bg-success text-success-contrast',\n      warning: 'bg-warning text-warning-contrast',\n\t  info: 'bg-info text-info-contrast'\n\t},\n\tvariant: {\n\t  solid: 'bg-color text-color-contrast',\n\t  outline: 'border-color bg-transparent text-color-readable',\n\t  soft: 'bg-color-muted text-color-muted-readable'\n    }\n  }\n};\n```\n\n### Available Variants\n\n**root**:\n- base: Base classes applied to all tooltips\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Controls text size and padding\n  - color: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' - Color scheme\n  - variant: 'solid' | 'outline' | 'soft' - Matches Chip's visual variants\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<script lang=\"ts\">\n\timport { Tooltip } from 'entasis/tooltip';\n</script>\n\n<Tooltip\n\tcontent=\"Custom tooltip\"\n\ttheme={{ root: { base: 'rounded-lg lift-4 border-2', size: { normal: 'px-3 py-2 text-sm' } } }}\n\ttrigger={{ content: 'Hover me' }}\n/>\n```\n\n**Color Customization**:\n```svelte\n<script lang=\"ts\">\n\timport { tooltip } from 'entasis/tooltip';\n</script>\n\n<button\n\t{@attach tooltip({\n\t\tcontent: 'Success!',\n\t\tcolor: 'success',\n\t\ttheme: { root: { color: { success: 'bg-green-500 text-white lift-3' } } }\n\t})}\n>\n\tSuccess Tooltip\n</button>\n```\n\n**Global Theme Setting**:\n```svelte\n<script lang=\"ts\">\n\timport { setTooltipTheme } from 'entasis/tooltip';\n\n\tsetTooltipTheme({\n\t\troot: {\n\t\t\tbase: 'rounded-md lift-4 backdrop-blur-sm',\n\t\t\tsize: { normal: 'px-3 py-1.5 text-sm' },\n\t\t\tcolor: { neutral: 'bg-gray-900 text-white', primary: 'bg-blue-500 text-white' }\n\t\t}\n\t});\n</script>\n```\n\n## Motion\n\n- **motion** theme slot: one preset (no variants) \u2014 a short fade-and-rise, `duration: 'fast'`.\n- Resolved by the tooltip surface and handed to the underlying Popover, so it replaces the\n  popover preset.\n- Ladder: `<Theme components={{ tooltip: { motion } }}>` \u2192 `setTooltipTheme({ motion })` \u2192\n  `theme.motion` \u2192 the tooltip's `transition` option. Reduced motion collapses it to 0.\n- The tooltip surface is a singleton rendered by `<Theme>`, so a `setTooltipTheme` call\n  made *below* `<Theme>` never reaches it. Call it at or above the `<Theme>` boundary, or\n  use the `<Theme components={{ tooltip }}>` registry, which always applies.\n";

package/dist/components/Tooltip/tooltip.mcp.js

@@ -1,7 +1,7 @@
 export const tooltipDescription = `
 # Tooltip
 
-Contextual information shown on hover or keyboard focus. Two forms share one surface:
+Contextual information shown on hover or on keyboard focus (when the focus ring shows). Two forms share one surface:
 
 - \`<Tooltip>\` — a component with a \`trigger\` prop, like every other overlay.
 - \`tooltip()\` — the underlying attachment, for elements you already render yourself.
@@ -28,14 +28,29 @@ Both are rendered by the single tooltip surface that \`<Theme>\` mounts (\`Toolt
   \`content\` for a richer body
 - **open**: boolean (default: false) - Shows the tooltip without hover or focus; bindable
 - **defaultOpen**: boolean (default: false) - Initial open state when \`open\` is not provided
-- **onOpenChange**: (open: boolean) => void - Called whenever the tooltip becomes visible or hidden,
-  hover and focus included
+- **onOpenChange**: (open: boolean, details: OpenChangeDetails) => void - Called before the tooltip
+  shows or hides, whatever causes it (hover, focus, a press on the trigger, Escape, an outside press).
+  \`details.reason\` is \`'trigger-hover'\`, \`'trigger-focus'\`, \`'trigger-press'\`, \`'outside-press'\`,
+  \`'escape-key'\` or \`'imperative-action'\`; \`details.event\` and \`details.trigger\` say what caused it, and
+  \`details.cancel()\` keeps the tooltip as it was. When another tooltip takes the shared surface, the
+  one it leaves is told with a close that cannot be cancelled. A change to the \`open\` prop is silent
 - **position**: Placement (default: 'top') - Tooltip position relative to the trigger
   - Options: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end'
 - **size**: 'small' | 'normal' | 'large' (default: 'normal') - Visual size
 - **color**: Colors (default: 'neutral') - Color theme
 - **variant**: 'solid' | 'outline' | 'soft' (default: 'solid') - Visual style matching Chip
 - **delay**: number (default: 400) - Delay in ms before showing tooltip; zero shows immediately
+- **closeDelay**: number (default: 0) - Delay in ms between the pointer leaving the trigger (or the
+  content) and the tooltip closing; moving to another tooltip's trigger within it hands the surface
+  over without closing it. With \`hoverable\` content the pointer always gets at least 100 ms to reach it
+- **hoverable**: boolean (default: true) - The tooltip stays open while the pointer is over its content
+  (WCAG 1.4.13), so its text can be read or selected and its links used. \`false\` makes the content
+  ignore the pointer and closes the tooltip as soon as the pointer leaves the trigger
+- **closeOnClick**: boolean (default: true) - A press on the trigger (pointer, or Enter / Space) closes
+  the tooltip, and it stays closed until the pointer leaves the trigger or focus moves away. \`false\`
+  leaves it open
+- **disabled**: boolean (default: false) - Turns the tooltip off: hover and focus do not open it, an
+  open one closes, and the trigger loses \`aria-describedby\`. Read live
 - **offset**: number - Distance from the trigger in pixels
 - **class**: string - Additional CSS classes
 - **transition**: FSOProps - Custom transition configuration
@@ -43,8 +58,8 @@ Both are rendered by the single tooltip surface that \`<Theme>\` mounts (\`Toolt
 - **onAfterOpen**: () => void - Callback after the opening transition completes
 - **onAfterClose**: () => void - Callback after the closing transition completes
 
-Every prop except \`trigger\`, \`open\`, \`defaultOpen\` and \`onOpenChange\` is also an option of the
-\`tooltip()\` attachment.
+Every prop except \`trigger\`, \`open\` and \`defaultOpen\` is also an option of the \`tooltip()\`
+attachment, \`onOpenChange\` included.
 
 ## Examples
 
@@ -145,6 +160,41 @@ Every prop except \`trigger\`, \`open\`, \`defaultOpen\` and \`onOpenChange\` is
 <Tooltip content={richContent} trigger={{ content: 'Keyboard Shortcuts' }} />
 \`\`\`
 
+### Hoverable Content
+\`\`\`svelte
+<script lang="ts">
+	import { Tooltip } from './index.ts';
+</script>
+
+{#snippet help()}
+	Read the <a href="/docs/shortcuts">shortcut list</a>.
+{/snippet}
+
+<!-- The pointer can move onto the tooltip and use the link -->
+<Tooltip content={help} trigger={{ content: 'Shortcuts' }} />
+
+<!-- The pointer passes through, and the tooltip closes on leaving the trigger -->
+<Tooltip hoverable={false} content="Not interactive" trigger={{ content: 'Hint' }} />
+\`\`\`
+
+### Press and Disabled
+\`\`\`svelte
+<script lang="ts">
+	import { Tooltip } from './index.ts';
+
+	let busy = $state(false);
+</script>
+
+<!-- Closes when the trigger is pressed, and stays closed until the pointer leaves -->
+<Tooltip content="Save changes" trigger={{ content: 'Save' }} />
+
+<!-- Stays open after a press -->
+<Tooltip closeOnClick={false} content="Save changes" trigger={{ content: 'Save' }} />
+
+<!-- No tooltip while busy -->
+<Tooltip disabled={busy} content="Save changes" trigger={{ content: 'Save' }} />
+\`\`\`
+
 ### With Callbacks
 \`\`\`svelte
 <script lang="ts">
@@ -153,6 +203,7 @@ Every prop except \`trigger\`, \`open\`, \`defaultOpen\` and \`onOpenChange\` is
 
 <Tooltip
 	content="Tracked tooltip"
+	onOpenChange={(open, details) => console.log(open, details.reason)}
 	onAfterOpen={() => console.log('Tooltip opened')}
 	onAfterClose={() => console.log('Tooltip closed')}
 	trigger={{ content: 'Track me' }}
@@ -183,22 +234,72 @@ disabled wrappers — or inside another component's internals.
 The \`<Tooltip>\` component hands this same attachment to a snippet trigger, so the two forms are
 interchangeable.
 
+## Styling hooks
+
+The surface (the \`role="tooltip"\` element that \`class\` and the theme style) and the trigger carry state attributes.
+
+Attributes are presence attributes (set while the state holds, omitted otherwise) unless they carry a value.
+
+**Data attributes**
+- \`data-open\`: On the surface: present while the tooltip shows.
+- \`data-closed\`: On the surface: present while its exit transition plays.
+- \`data-entering\`: On the surface: present while the enter transition plays.
+- \`data-exiting\`: On the surface: present while the exit transition plays.
+- \`data-side\`: On the surface: the side of the trigger it sits on after flipping, \`top\`, \`right\`, \`bottom\` or \`left\`.
+- \`data-align\`: On the surface: \`start\`, \`center\` or \`end\`, how it lines up with the trigger.
+- \`data-anchor-hidden\`: On the surface: present while the trigger is scrolled out of view.
+- \`data-instant\`: On the surface: present while it moved straight from one trigger to another, which plays no transition.
+- \`data-color\`: On the surface: the resolved \`color\`.
+- \`data-size\`: On the surface: the resolved \`size\`.
+- \`data-variant\`: On the surface: the resolved \`variant\`.
+- \`data-popup-open\`: On the trigger: present while its tooltip shows.
+- \`data-popup-side\`: On the trigger: the surface's \`data-side\` while it is placed.
+
+**CSS variables**
+- \`--available-width\`: The width in px the surface can take before it reaches the viewport edges, minus 20px.
+- \`--available-height\`: The room in px between the trigger and the viewport edge on the surface's side, minus 20px.
+- \`--anchor-width\`: The trigger's width in px, snapped to the device pixel grid.
+- \`--anchor-height\`: The trigger's height in px, snapped to the device pixel grid.
+- \`--transform-origin\`: The surface corner facing the trigger, the point it scales from.
+
+The typed maps \`tooltipDataAttributes\` and \`tooltipCssVariables\` (from \`entasis/tooltip\`) list each name with its meaning.
+
+\`\`\`svelte
+<script>
+	import { Tooltip } from './index.ts';
+</script>
+
+<!-- Nudge the surface away from the side it sits on while it enters -->
+<Tooltip content="Saved" class="data-[side=top]:data-entering:-translate-y-0.5" trigger={{ content: 'Save' }} />
+\`\`\`
+
 ## Accessibility
 
 - Shows on pointer hover and on keyboard focus (\`focusin\` / \`focusout\` on the trigger element), so
   attach it to focusable elements for keyboard users
+- Focus opens it only when the browser shows a focus ring: focus from a mouse press or a tap, focus a
+  closing dialog or popover hands back, and focus that returns with the window do not
+- A touch tap is not a hover: the compatibility mouse events a tap fires never show the tooltip
+- The content can be hovered (WCAG 1.4.13: hoverable, dismissible, persistent): the pointer may move
+  onto the tooltip, and Escape dismisses it
+- A trigger that appears under a resting pointer (a dialog closing over it, a list scrolled by the
+  wheel) shows its tooltip once the pointer moves, not on arrival
 - Dismissed on mouse leave or blur
-- Non-interactive (cannot be clicked)
+- Brief, read-only content; use \`hoverable={false}\` for content that should never take the pointer
 - Renders with \`role="tooltip"\` and sets \`aria-describedby\` on the trigger while visible (any previous value is restored on hide)
-- Does not block content behind it
+- Does not block content behind it when \`hoverable={false}\`; the default hoverable content captures the pointer so it can be read
 
 ## Notes
 
 - Only one tooltip shows at a time; an \`open\` tooltip hands the surface over when another tooltip is
-  hovered and reports that through \`onOpenChange\`
+  hovered and reports that through \`onOpenChange\`. Moving between triggers keeps the surface: it
+  stays in place, resizes to the new content and carries \`data-instant\`; the tooltip it leaves gets
+  \`onAfterClose\` and the new one \`onAfterOpen\`
 - Automatically positions to stay in viewport using Floating UI
-- Uses smart delay: subsequent tooltips show instantly if within 400ms of previous
-- Brief content only (use Popover for interactive content)
+- Uses smart delay: right after a tooltip, a hover card or a hover-opened popover was open
+  (within 400ms of it closing, or while a hover card or popover is still open), the next tooltip
+  shows instantly. A tooltip inside an open hover card keeps its delay.
+- Brief content only: text and a link are fine, but use Popover for controls and forms
 - The surface is a singleton (\`TooltipHost\`) rendered by \`<Theme>\`
 - Does not lock scroll or trap focus
 

package/dist/components/Tooltip/tooltip.props.d.ts

@@ -5,6 +5,7 @@ import type { Colors, Sizes } from '../../types/theme.js';
 import type { FSOProps } from '../../transitions/transition.js';
 import type { Slot } from '../Slot/slot.js';
 import type { ButtonProps } from '../Button/index.js';
+import type { OpenChangeHandler } from '../../utils/openChange.js';
 import type { TooltipThemeProps } from './tooltip.theme.js';
 /** Everything the `tooltip()` attachment accepts; the component spreads the same options. */
 export type TooltipOptions = {
@@ -22,12 +23,44 @@ export type TooltipOptions = {
     variant?: 'solid' | 'outline' | 'soft';
     /** Hover delay in milliseconds; zero shows immediately. Defaults to 400. */
     delay?: number;
+    /**
+     * Milliseconds between the pointer leaving the trigger (or the content) and the tooltip
+     * closing. Defaults to 0. With `hoverable` content the pointer always gets at least 100 ms to
+     * cross the gap to it. Moving to another tooltip trigger within this time hands the surface
+     * over without closing it.
+     */
+    closeDelay?: number;
+    /**
+     * Keeps the tooltip open while the pointer is over its content, so a user can read it, select
+     * text or reach a link (WCAG 1.4.13). Defaults to true. `false` makes the content ignore the
+     * pointer, so it never covers what is behind it, and the tooltip closes as soon as the pointer
+     * leaves the trigger.
+     */
+    hoverable?: boolean;
+    /**
+     * Closes the tooltip when the trigger is pressed. It stays closed until the pointer leaves the
+     * trigger or focus moves away. Defaults to true; `false` leaves it open after a press.
+     */
+    closeOnClick?: boolean;
+    /**
+     * Turns the tooltip off: hover and focus do not open it and an open one closes. Read live.
+     * Also drops `aria-describedby` from the trigger.
+     */
+    disabled?: boolean;
     /** Gap from the attached element in pixels. */
     offset?: number;
     /** Opening and closing transition overrides. */
     transition?: FSOProps;
     /** Theme overrides for the tooltip surface. */
     theme?: TooltipThemeProps;
+    /**
+     * Called before the tooltip shows or hides, with the requested state and the change details:
+     * `reason` (`'trigger-hover'`, `'trigger-focus'`, `'trigger-press'`, `'outside-press'`,
+     * `'escape-key'`), the originating `event` and `trigger`, and `cancel()` to keep the tooltip as
+     * it was. When another tooltip takes the shared surface, the one it leaves is told with a
+     * change that cannot be cancelled.
+     */
+    onOpenChange?: OpenChangeHandler;
     /** Called after the opening transition completes. */
     onAfterOpen?: () => void;
     /** Called after the closing transition completes. */
@@ -50,6 +83,4 @@ export type TooltipProps = TooltipOptions & {
     open?: boolean;
     /** Initial open state when `open` is not provided. */
     defaultOpen?: boolean;
-    /** Called whenever the tooltip becomes visible or hidden, hover and focus included. */
-    onOpenChange?: (open: boolean) => void;
 };

package/dist/components/Tooltip/tooltip.surface.d.ts

@@ -0,0 +1,24 @@
+import { type OpenChangeDetails, type OpenChangeInit } from '../../utils/openChange.js';
+import type { TooltipOptions } from './tooltip.props.js';
+/** The tooltip the shared surface shows, and the element it is anchored to. */
+export type TooltipEntry = TooltipOptions & {
+    ref: HTMLElement;
+};
+/** The slice of the Theme state the surface lives in. */
+type TooltipSurfaceOwner = {
+    tooltip: TooltipEntry | null;
+};
+/** Pointer travel between a trigger and the content its tooltip shows. */
+type ContentHoverListener = (inside: boolean, event?: Event) => void;
+/** A trigger asks to hear when the pointer enters or leaves the content of its tooltip. */
+export declare const watchTooltipContentHover: (trigger: HTMLElement, listener: ContentHoverListener) => () => void;
+/** The surface reports the pointer moving onto or off the content shown for `trigger`. */
+export declare const reportTooltipContentHover: (trigger: HTMLElement, inside: boolean, event?: Event) => void | undefined;
+/**
+ * Puts `next` on the shared surface (`null` closes it). The callback of the tooltip that opens, or
+ * of the one that closes, runs first and may cancel; a tooltip that is pushed off by another one
+ * is told afterwards, with a change it cannot cancel. Returns whether the surface changed hands
+ * (`true` too when it already showed `next`).
+ */
+export declare function requestTooltipChange(owner: TooltipSurfaceOwner, next: TooltipEntry | null, input?: OpenChangeDetails | OpenChangeInit): boolean;
+export {};

package/dist/components/Tooltip/tooltip.surface.js

@@ -0,0 +1,42 @@
+// What the `tooltip()` attachment and `TooltipHost` share about the one tooltip surface: the entry
+// a trigger puts on it, the single place where it changes hands (so `onOpenChange` hears about
+// every change before it happens), and how the pointer entering the content reaches its trigger.
+import { createOpenChangeDetails, requestOpenChange, resolveOpenChangeDetails } from '../../utils/openChange.js';
+const contentHovers = new WeakMap();
+/** A trigger asks to hear when the pointer enters or leaves the content of its tooltip. */
+export const watchTooltipContentHover = (trigger, listener) => {
+    contentHovers.set(trigger, listener);
+    return () => {
+        if (contentHovers.get(trigger) === listener)
+            contentHovers.delete(trigger);
+    };
+};
+/** The surface reports the pointer moving onto or off the content shown for `trigger`. */
+export const reportTooltipContentHover = (trigger, inside, event) => contentHovers.get(trigger)?.(inside, event);
+/**
+ * Puts `next` on the shared surface (`null` closes it). The callback of the tooltip that opens, or
+ * of the one that closes, runs first and may cancel; a tooltip that is pushed off by another one
+ * is told afterwards, with a change it cannot cancel. Returns whether the surface changed hands
+ * (`true` too when it already showed `next`).
+ */
+export function requestTooltipChange(owner, next, input) {
+    const current = owner.tooltip;
+    if (!next && !current)
+        return true;
+    if (next && current?.ref === next.ref)
+        return true;
+    const details = resolveOpenChangeDetails(input, { trigger: (next ?? current).ref });
+    if (!requestOpenChange((next ?? current).onOpenChange, !!next, details))
+        return false;
+    if (next && current) {
+        current.onOpenChange?.(false, createOpenChangeDetails({
+            reason: details.reason,
+            event: details.event,
+            trigger: current.ref,
+            interaction: details.interaction,
+            cancelable: false
+        }));
+    }
+    owner.tooltip = next;
+    return true;
+}

package/dist/components/Tooltip/tooltip.theme.d.ts

@@ -1,5 +1,5 @@
 import { type InferComponentTheme } from '../../utils/cva/index.js';
-export declare const defaultTooltip: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+export declare const defaultTooltip: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
     size: {
         small: string;
         normal: string;
@@ -19,11 +19,11 @@ export declare const defaultTooltip: (props?: (import("../../utils/cva/types.js"
         outline: string;
         soft: string;
     };
-}> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+}> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 export declare const defaultTooltipMotion: import("../../utils/motion/index.js").MotionResolver<import("../../utils/motion/index.js").MotionVariantShape>;
 export declare const tooltipTheme: {
     motion: import("../../utils/motion/index.js").MotionResolver<import("../../utils/motion/index.js").MotionVariantShape>;
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -43,13 +43,13 @@ export declare const tooltipTheme: {
             outline: string;
             soft: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 };
 export type TooltipTheme = typeof tooltipTheme;
 export type TooltipThemeProps = InferComponentTheme<TooltipTheme>;
 export declare const setTooltipTheme: (theme: InferComponentTheme<{
     motion: import("../../utils/motion/index.js").MotionResolver<import("../../utils/motion/index.js").MotionVariantShape>;
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -69,11 +69,11 @@ export declare const setTooltipTheme: (theme: InferComponentTheme<{
             outline: string;
             soft: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 }>) => void;
-export declare const useTooltipTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
+export declare const useTooltipTheme: import("../../utils/cva/theme.ts").UseComponentTheme<{
     motion: import("../../utils/motion/index.js").MotionResolver<import("../../utils/motion/index.js").MotionVariantShape>;
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
         size: {
             small: string;
             normal: string;
@@ -93,6 +93,6 @@ export declare const useTooltipTheme: import("../../utils/cva/theme.js").UseComp
             outline: string;
             soft: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 }>;
 export declare const useTooltipMotion: () => import("../../utils/motion/index.js").ComponentMotion<import("../../utils/motion/index.js").MotionVariantShape>;

package/dist/components/Tree/TreeContextMenuSurface.svelte

@@ -3,6 +3,7 @@
 	import { on } from 'svelte/events';
 	import Menu from '../Menu/Menu.svelte';
 	import type { MenuItem } from '../Menu/menu.props.js';
+	import { providePopupMenuRoot } from '../PopupMenu/popupMenu.context.js';
 	import type { TreeContextMenuSnippetData } from './TreeSnippetRenderer.js';
 	import { cx } from '../../utils/cva/index.js';
 
@@ -21,6 +22,10 @@
 
 	const menuStyle = $derived(createMenuStyle(data));
 
+	// The surface is the root of the menu tree: a press in a submenu flyout, which is portaled out
+	// of the surface and never reaches `closeAfterAction`, closes the whole context menu too.
+	providePopupMenuRoot({ closeOnItemClick: () => true, close: () => data.close() });
+
 	function createMenuStyle(menuData: TreeContextMenuSnippetData): string {
 		const rect = menuData.context.anchorRect;
 		return `position:fixed;left:${rect.x}px;top:${rect.y + rect.height}px`;
@@ -31,12 +36,20 @@
 	}
 
 	function handleMenuClick(event: MouseEvent): void {
-		const interactiveElement = event
-			.composedPath()
-			.find((node) => node instanceof HTMLButtonElement || node instanceof HTMLAnchorElement);
+		const path = event.composedPath();
+		const interactiveElement = path.find(
+			(node) => node instanceof HTMLButtonElement || node instanceof HTMLAnchorElement
+		);
 
 		if (!(interactiveElement instanceof HTMLElement)) return;
 		if ((interactiveElement as NavigationElement).onNext != null) return;
+		// Checkable rows and rows with `closeOnClick: false` keep the menu open, as in a PopupMenu.
+		if (
+			path.some(
+				(node) => node instanceof HTMLElement && node.getAttribute('data-menu-keep-open') === 'true'
+			)
+		)
+			return;
 
 		data.close();
 	}

package/dist/components/Tree/tree.theme.d.ts

@@ -1,21 +1,21 @@
 import { type InferComponentTheme } from '../../utils/cva/index.js';
 export declare const treeTheme: {
-    root: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    viewport: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    host: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    error: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    root: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    viewport: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    host: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    error: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
 };
 export type TreeTheme = typeof treeTheme;
 export type TreeThemeProps = InferComponentTheme<TreeTheme>;
 export declare const setTreeTheme: (theme: InferComponentTheme<{
-    root: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    viewport: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    host: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    error: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    root: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    viewport: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    host: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    error: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
 }>) => void;
-export declare const useTreeTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
-    root: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    viewport: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    host: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    error: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+export declare const useTreeTheme: import("../../utils/cva/theme.ts").UseComponentTheme<{
+    root: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    viewport: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    host: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    error: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
 }>;

package/dist/components/Utils/BeforeHydratation.svelte

@@ -1,17 +1,28 @@
 <script lang="ts">
+	import { getContext } from 'svelte';
+	import { nonceAttribute } from '../../utils/cspNonce.js';
+	import type { ThemeState } from '../Theme/theme.state.svelte.js';
+
 	let {
 		once = false,
 		immediate = false,
 		scripts = [],
-		css = []
+		css = [],
+		nonce: nonceProp
 	}: {
 		once?: boolean;
 		/** Executes while the document is parsing instead of waiting for DOMContentLoaded. */
 		immediate?: boolean;
 		scripts?: string[];
 		css?: string[];
+		/** CSP nonce for the emitted `<script>` and `<style>`. Defaults to the Theme's `nonce`. */
+		nonce?: string;
 	} = $props();
 
+	// Optional: the Theme context is absent when this renders outside a `<Theme>`.
+	const theme = getContext<ThemeState | undefined>('entasisTheme');
+	const nonce = $derived(nonceAttribute(nonceProp ?? theme?.nonce));
+
 	const id = $props.id();
 	const source = $derived(scripts.join('\n'));
 	const removeScript = $derived(
@@ -21,7 +32,7 @@
 
 <!-- eslint-disable svelte/no-at-html-tags -- this component exists to inject caller-supplied <script>/<style> text into <head> before hydration; raw HTML is its entire contract -->
 <svelte:head>
-	{@html /*html*/ `<s${'cript'} id="${id}">
+	{@html /*html*/ `<s${'cript'} id="${id}"${nonce}>
 	${
 		immediate
 			? `${source}
@@ -38,7 +49,7 @@
 	}`
 	}
 	</s${'cript'}>`}
-	{@html `<s${'tyle'}>
+	{@html `<s${'tyle'}${nonce}>
             ${css.join('\n\n')}
         </s${'tyle'}>`}
 </svelte:head>

package/dist/components/Utils/BeforeHydratation.svelte.d.ts

@@ -4,6 +4,8 @@ type $$ComponentProps = {
     immediate?: boolean;
     scripts?: string[];
     css?: string[];
+    /** CSP nonce for the emitted `<script>` and `<style>`. Defaults to the Theme's `nonce`. */
+    nonce?: string;
 };
 declare const BeforeHydratation: import("svelte").Component<$$ComponentProps, {}, "">;
 type BeforeHydratation = ReturnType<typeof BeforeHydratation>;

package/dist/components/VideoPlayer/VideoPlayer.svelte.d.ts

@@ -15,6 +15,6 @@ declare const VideoPlayer: import("svelte").Component<Props, {
     toggleFullscreen: () => Promise<void>;
     togglePictureInPicture: () => Promise<void>;
     getSnapshot: () => VideoPlayerSnapshot;
-}, "ended" | "error" | "muted" | "duration" | "ref" | "fullscreen" | "loop" | "pictureInPicture" | "volume" | "paused" | "currentTime" | "buffered" | "rootRef" | "playbackRate" | "captionsEnabled" | "activeTextTrack">;
+}, "duration" | "ref" | "error" | "loop" | "fullscreen" | "pictureInPicture" | "volume" | "ended" | "muted" | "rootRef" | "currentTime" | "buffered" | "paused" | "playbackRate" | "captionsEnabled" | "activeTextTrack">;
 type VideoPlayer = ReturnType<typeof VideoPlayer>;
 export default VideoPlayer;

package/dist/components/VideoPlayer/VideoPlayerSettings.svelte

@@ -107,6 +107,7 @@
 {#if hasMenuItems}
 	<PopupMenu
 		bind:open
+		{size}
 		position="top-end"
 		offset={8}
 		lockScroll={false}
@@ -116,6 +117,7 @@
 		class={classes.popoverPanel({ className: 'min-w-52 p-1' })}
 		menu={{
 			items: menuItems,
+			size,
 			class: classes.menu(),
 			footer: includeVolume ? volumeFooter : undefined,
 			theme: {