entasis 0.9.3 → 0.10.1

package/dist/components/Popover/popover.state.svelte.js

@@ -1,4 +1,5 @@
 import { bind } from '../../utils/state.svelte.js';
+import { Registry } from '../../utils/registry.svelte.js';
 import { getContext, hasContext, onMount, setContext, untrack } from 'svelte';
 import { useTheme } from '../Theme/theme.state.svelte.js';
 import { computePosition, autoUpdate, hide, offset, shift, flip } from '@floating-ui/dom';
@@ -14,6 +15,10 @@ const PopoverOptionsBase = class {
 };
 // The one place the trigger's semantic state becomes ARIA, for triggers the library cannot
 // pass props to (a snippet trigger carrying `{@attach popover.reference}`).
+/** Elements that may carry popup ARIA state. */
+const POPUP_CONTROL = 'button, a[href], input, select, textarea, summary, [role="button"], [role="link"], [role="combobox"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="tab"], [role="option"], [role="treeitem"], [role="gridcell"], [role="switch"], [role="checkbox"]';
+/** Elements the browser already focuses and activates from the keyboard. */
+const NATIVE_CONTROL = 'button, a[href], input, select, textarea, summary';
 const TRIGGER_ARIA = {
     haspopup: 'aria-haspopup',
     expanded: 'aria-expanded',
@@ -29,7 +34,11 @@ export class PopoverState extends PopoverOptionsBase {
     // Trigger-matched width (fitTrigger), applied to the panel.
     triggerWidth = $state(null);
     parent = getContext('popover');
-    children = $state([]);
+    // Nested popovers join while they mount and leave when torn down; see `Registry`.
+    #children = new Registry();
+    get children() {
+        return this.#children.items;
+    }
     hasChildOpen = $derived(this.children.some((d) => d.isOpen));
     hasTransitioned = $state(false);
     theme = useTheme();
@@ -84,12 +93,7 @@ export class PopoverState extends PopoverOptionsBase {
         },
         delay: this.delay
     });
-    addChild = (child) => () => {
-        this.children.push(child);
-        return () => {
-            this.children = this.children.filter((d) => d.id !== child.id);
-        };
-    };
+    addChild = (child) => () => this.#children.add(child);
     constructor(options) {
         super();
         bind(this, options);
@@ -109,7 +113,10 @@ export class PopoverState extends PopoverOptionsBase {
     close = () => {
         this.setOpen(false);
     };
+    /** Calls to `setOpen`, direct or through `open`, `close` and `toggle`, unchanged state included. */
+    #openRequests = 0;
     setOpen = (nextOpen) => {
+        this.#openRequests += 1;
         if (this.isOpen === nextOpen)
             return;
         this.isOpen = nextOpen;
@@ -236,7 +243,7 @@ export class PopoverState extends PopoverOptionsBase {
         // Keep the trigger's ARIA in sync whichever way it was rendered (snippet or Button).
         // Only real controls carry aria-haspopup/aria-expanded; a wrapper div or a
         // presentational span used as the anchor must not (axe: aria-allowed-attr).
-        const canCarryPopupState = node.matches('button, a[href], input, select, textarea, summary, [role="button"], [role="link"], [role="combobox"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="tab"], [role="option"], [role="treeitem"], [role="gridcell"], [role="switch"], [role="checkbox"]');
+        const canCarryPopupState = node.matches(POPUP_CONTROL);
         $effect(() => {
             if (!canCarryPopupState)
                 return;
@@ -261,6 +268,52 @@ export class PopoverState extends PopoverOptionsBase {
             };
         });
     };
+    /**
+     * Makes any element a complete trigger: it anchors the panel (as \`reference\` does), toggles
+     * it on click when \`openOnClick\` allows, and keeps \`aria-expanded\` and friends in sync.
+     * An element that is not already a control also gets \`role="button"\`, \`tabindex="0"\` and
+     * Enter/Space activation, so a card or an avatar opens the panel from the keyboard too.
+     */
+    trigger = (node) => {
+        const nativeControl = node.matches(NATIVE_CONTROL);
+        if (!node.matches(POPUP_CONTROL) && !node.hasAttribute('role')) {
+            node.setAttribute('role', 'button');
+        }
+        if (!nativeControl && !node.hasAttribute('tabindex'))
+            node.tabIndex = 0;
+        // The element's own handler wins. One that still opens, closes or toggles the popover
+        // (`onclick={popover.toggle}` kept from before this attachment existed) has acted by the
+        // time the event finishes dispatching, so the default toggle waits until then and runs only
+        // if nothing asked for an open state meanwhile; toggling regardless would undo that call.
+        let pending;
+        const activate = () => {
+            if (!this.openOnClick)
+                return;
+            const requests = this.#openRequests;
+            clearTimeout(pending);
+            pending = setTimeout(() => {
+                if (this.#openRequests === requests)
+                    this.toggle();
+            });
+        };
+        const onKeydown = (event) => {
+            if (nativeControl || event.target !== node)
+                return;
+            if (event.key !== 'Enter' && event.key !== ' ')
+                return;
+            event.preventDefault();
+            activate();
+        };
+        node.addEventListener('click', activate);
+        node.addEventListener('keydown', onKeydown);
+        const offReference = this.reference(node);
+        return () => {
+            clearTimeout(pending);
+            node.removeEventListener('click', activate);
+            node.removeEventListener('keydown', onKeydown);
+            offReference?.();
+        };
+    };
 }
 // Use interface merging to add the properties
 export const usePopoverContext = () => {

package/dist/components/Popover/popover.theme.js

@@ -12,7 +12,7 @@ const defaultPopoverContainer = cva({
             // `inline` keeps the panel in normal flow where the component sits: no portal, no
             // fixed positioning, no floating-ui placement.
             inline: 'static h-fit w-fit',
-            mobileSheet: 'inset-0 flex h-dvh w-dvw max-w-none items-end justify-center overflow-hidden bg-neutral/40 backdrop-blur-xs'
+            mobileSheet: 'inset-0 flex h-dvh w-dvw max-w-none items-end justify-center overflow-hidden bg-black/40 backdrop-blur-xs dark:bg-black/60'
         }
     },
     defaultVariants: {

package/dist/components/Sidebar/SidebarDesktopShell.svelte

@@ -101,6 +101,9 @@
 	let edgeTriggerRef: HTMLButtonElement | null = $state(null);
 	let activityBarRef: HTMLElement | null = $state(null);
 
+	const TEXT_ENTRY =
+		'input:not([type="button"],[type="checkbox"],[type="radio"],[type="range"],[type="submit"],[type="reset"]), textarea, select, [contenteditable]:not([contenteditable="false"])';
+
 	let focusInside = $state(false);
 	let pointerInside = $state(false);
 
@@ -161,6 +164,22 @@
 		focusInside = false;
 	});
 
+	// Only the keyboard's focus pins a peek. A click focuses the button it lands on, and focus the
+	// page moves after a click (a navigation putting it back on the clicked link) belongs to that
+	// click too: either way the panel stayed open after the pointer left the rail. So the input
+	// used last decides, as `:focus-visible` does: Tab, or Escape handing focus back from a menu,
+	// pins; a press does not. A text field pins either way, so typing never loses the panel.
+	let lastInput: 'pointer' | 'keyboard' = 'keyboard';
+	$effect(() => {
+		const offs = [
+			on(window, 'pointerdown', () => (lastInput = 'pointer'), { capture: true }),
+			on(window, 'keydown', () => (lastInput = 'keyboard'), { capture: true })
+		];
+		return () => offs.forEach((off) => off());
+	});
+	const pinsPeek = (target: EventTarget | null) =>
+		lastInput === 'keyboard' || (target instanceof Element && target.matches(TEXT_ENTRY));
+
 	$effect(() => {
 		const nodes = peekRegion;
 		if (!nodes.length) return;
@@ -168,9 +187,9 @@
 		const isInside = (target: EventTarget | null) =>
 			target instanceof Node && nodes.some((node) => node.contains(target));
 		const offs = nodes.flatMap((node) => [
-			on(node, 'focusin', () => {
-				focusInside = true;
-				if (canHoverExpand) hoverExpanded = true;
+			on(node, 'focusin', (event) => {
+				focusInside = pinsPeek(event.target);
+				if (focusInside && canHoverExpand) hoverExpanded = true;
 			}),
 			on(node, 'focusout', (event) => {
 				focusInside = isInside(event.relatedTarget);
@@ -189,7 +208,8 @@
 	// The activity bar is part of the sidebar: hovering it opens the collapsed panel the way the
 	// edge strip (or `expandOnHover`) does, and a peek stays open while the pointer or focus is on
 	// the rail, so switching sections from it never closes the panel it is switching. Keyboard
-	// focus only keeps a peek: tabbing through the rail does not pop the panel out.
+	// focus only keeps a peek: tabbing through the rail does not pop the panel out, and a click
+	// keeps it only until the pointer leaves.
 	$effect(() => {
 		const rail = activityBarRef;
 		if (!rail) return;
@@ -204,8 +224,8 @@
 			on(rail, 'pointerleave', (event) => {
 				pointerInside = isInside(event.relatedTarget);
 			}),
-			on(rail, 'focusin', () => {
-				if (isPeeking) focusInside = true;
+			on(rail, 'focusin', (event) => {
+				focusInside = isPeeking && pinsPeek(event.target);
 			}),
 			on(rail, 'focusout', (event) => {
 				focusInside = isInside(event.relatedTarget);

package/dist/components/Sidebar/sidebar.theme.js

@@ -719,7 +719,7 @@ const defaultEdgeTrigger = cva({
     base: 'absolute inset-y-0 z-50 hidden w-3 bg-transparent outline-none md:block after:absolute after:inset-y-0 after:w-px after:bg-transparent after:transition-[background-color] after:duration-normal after:ease-standard hover:after:bg-neutral/45 focus-visible:ring-2 focus-visible:ring-focus/50 data-[side=left]:left-0 data-[side=left]:cursor-e-resize data-[side=left]:after:left-0 data-[side=right]:right-0 data-[side=right]:cursor-w-resize data-[side=right]:after:right-0'
 });
 const defaultOverlay = cva({
-    base: 'fixed inset-0 z-40 bg-neutral/35 md:hidden'
+    base: 'fixed inset-0 z-40 bg-black/40 md:hidden dark:bg-black/60'
 });
 const defaultMobilePanel = cva({
     base: 'flex h-full min-h-0 w-[var(--sidebar-width-mobile)] flex-col bg-surface-floating text-neutral md:hidden',

package/dist/components/Theme/index.d.ts

@@ -1,5 +1,5 @@
 export { default as Theme } from './Theme.svelte';
-export { ThemeState, useDefaultColor } from './theme.state.svelte.js';
+export { ThemeState, useDefaultColor, useTheme } from './theme.state.svelte.js';
 export type { ThemeProps } from './theme.props.js';
 export { defaultThemeSpacingScale, typeScalePresets, type ThemeDesignTokenMap, type ThemeDesignTokens, type ThemeRadius, type ThemeSpacing, type ThemeSpacingScale, type ThemeSpacingStep, type TypeScaleOptions, type TypeScalePreset, type TypeScaleRatio } from './theme.designTokens.js';
 export { themeTransitions, type ThemeTransition } from './themeTransition.js';

package/dist/components/Theme/index.js

@@ -1,5 +1,5 @@
 export { default as Theme } from './Theme.svelte';
-export { ThemeState, useDefaultColor } from './theme.state.svelte.js';
+export { ThemeState, useDefaultColor, useTheme } from './theme.state.svelte.js';
 export { defaultThemeSpacingScale, typeScalePresets } from './theme.designTokens.js';
 export { themeTransitions } from './themeTransition.js';
 export { focusRing, selectedSoft, selectedSolid } from './theme.recipes.js';

package/dist/components/Theme/theme.mcp.d.ts

@@ -1 +1 @@
-export declare const themeDescription = "\n# Theme\n\n`Theme` owns global theme selection, runtime design tokens, shared overlay state, and theme\ntransitions. Wrap the application once and use the `ThemeState` received by the children snippet.\n\n## Runtime design tokens\n\n```svelte\n<script lang=\"ts\">\n\timport { Theme, type ThemeDesignTokenMap } from 'entasis/theme';\n\n\tlet spacing = $state<'small' | 'normal' | 'large'>('normal');\n\tconst designTokens = $derived({\n\t\tlight: {\n\t\t\tspacing,\n\t\t\tspacingScale: { xs: 1, sm: 1.5, md: 2, lg: 3, xl: 4 },\n\t\t\tradius: 'normal',\n\t\t\ttypeScale: 'default',\n\t\t\traisedWithBorder: true,\n\t\t\tdefaultColor: 'neutral'\n\t\t},\n\t\tdark: {\n\t\t\tspacing,\n\t\t\tspacingScale: { xs: 1, sm: 1.5, md: 2, lg: 3, xl: 4 },\n\t\t\tradius: 'small',\n\t\t\ttypeScale: 'compact',\n\t\t\traisedWithBorder: false,\n\t\t\tdefaultColor: 'neutral'\n\t\t}\n\t} satisfies ThemeDesignTokenMap<readonly ['light', 'dark']>);\n</script>\n\n<Theme {designTokens} transition=\"radial-top-right\">\n\t{#snippet children(theme)}\n\t\t<button onclick={() => (spacing = spacing === 'small' ? 'large' : 'small')}>\n\t\t\tChange density\n\t\t</button>\n\t\t<button onclick={() => (theme.theme = theme.resolvedTheme === 'dark' ? 'light' : 'dark')}>\n\t\t\tToggle color scheme\n\t\t</button>\n\t{/snippet}\n</Theme>\n```\n\n`designTokens` is keyed by logical theme name and respects the `attribute` and `value` props.\nEleven presets ship as `themePresets` (`dense`, `compact`, `balanced`, `comfortable`, `spacious`,\n`sharp`, `rounded`, `display`, `editorial`, `glass`, `terminal`): `designTokens={{ light: themePresets.glass.tokens, dark: themePresets.glass.tokens }}`.\nChanging the controlled object updates already-rendered Tailwind utilities without rebuilding CSS.\n\n### ThemeDesignTokens\n\n- `spacing`: `'small' | 'normal' | 'large' | number`. Globally scales density.\n- `spacingScale`: partial overrides for the strictly increasing `xs`, `sm`, `md`, `lg`,\n  and `xl` spacing multipliers. Defaults to 1/1.5/2/3/4.\n- `radius`: `'none' | 'subtile' | 'small' | 'normal' | 'large' | 'round' | number`.\n  Controls take the full multiplier; surface steps (`lg` and up) stop at `large` (1.5\u00D7).\n- `typeScale`: `'compact' | 'default' | 'comfortable' | 'large' | TypeScaleOptions`.\n- `raisedWithBorder`: toggles the border used by `raised-*` utilities.\n- `defaultColor`: `Colors` role kit chrome inherits when a control omits `color`.\n  Defaults to `neutral`. Set `primary` to restore an accent-colored kit. Compiles the\n  current-color family (`--color`, `--color-readable`, muted/contrast/light/dark variants)\n  and `--default-color` onto the theme selector. Do not set `data-color` on `html`.\n- `focusColor`, `selectedColor`, `hoverColor`, `pressedColor`: the four `Colors` **state\n  roles**. They pin, for the whole theme, what a focus ring, a persistent selection and the\n  transient hover/pressed layer look like, independently of the role of the control the state\n  lands on. They compile `--color-focus`, `--color-selected` (plus its `-contrast`,\n  `-readable` and `-muted-readable` companions), `--color-hover` and\n  `--color-pressed` onto the theme selector. There is no `--color-selected-muted`: the soft\n  fill is a translucent tint of `--color-selected` at `--state-selected-opacity`, so it reads\n  on any surface. None is declared at `:root`: every use site\n  falls back to the matching current role (`ring-focus` is\n  `var(--color-focus, var(--color))`, `bg-selected-muted` tints\n  `var(--color-selected, var(--color))`, the state layer is\n  `var(--color-hover, currentColor)` and on `:active`\n  `var(--color-pressed, var(--color-hover, currentColor))`), so leaving them unset changes\n  nothing and `data-color` keeps moving the states with `--color`. Theme-level only: there is\n  no per-component override. An unknown role throws.\n\nComponent-level density remains a local variant. It selects utility classes whose values inherit\nthe active global spacing token.\n\nGenerated interfaces should use the public `xs | sm | md | lg | xl` vocabulary through component\nprops and named gap/padding utilities. `micro` and `layout-*` are internal recipe tokens. Prefer\nparent-owned gaps over child margins; do not emit arbitrary spacing or unsupported radius values.\n\n## Theme selection\n\nThe selection props wrap `svelte-themes`: `themes`, `defaultTheme`, `forcedTheme`,\n`systemTheme`, `syncColorScheme`, `transitionOnChange`, `storageKey`, `attribute`,\n`value`, and `colorScheme`. The default themes are light and dark, with system selection\nenabled. `systemTheme`, `syncColorScheme`, and `transitionOnChange` all default to\n`true`; they map onto the library's `enableSystem`, `enableColorScheme`, and\n`disableTransitionOnChange` options.\n\n`ThemeState` exposes `theme`, `resolvedTheme`, `themes`, and `systemTheme`. Assign\n`theme.theme` to switch themes. The optional `transition` prop applies a named view transition;\nunsupported browsers and reduced-motion users switch instantly.\n\n`spinnerVariant` sets the global default spinner animation. The children snippet is required.\n\n## Motion tokens\n\nMotion is a token scale like spacing and radius: five duration steps and four easing roles.\n`motion` retunes them app-wide; an omitted token keeps its default.\n\n| Duration   | Default |     | Easing role  | Default       |\n| ---------- | ------- | --- | ------------ | ------------- |\n| `instant`  | 0ms     |     | `standard`   | `cubicInOut`  |\n| `fast`     | 100ms   |     | `enter`      | `cubicOut`    |\n| `normal`   | 200ms   |     | `exit`       | `cubicIn`     |\n| `slow`     | 300ms   |     | `emphasized` | `backOut`     |\n| `slower`   | 500ms   |     |              |               |\n\n```svelte\n<script lang=\"ts\">\n\timport { Theme } from 'entasis/theme';\n\n\tlet { children } = $props();\n</script>\n\n<Theme motion={{ duration: { normal: 150, slow: 260 }, easing: { standard: 'quintOut' } }}>\n\t{@render children()}\n</Theme>\n```\n\nThe Tailwind plugin emits the same scale as CSS variables on `html` (`--duration-normal`,\n`--ease-standard`, ...) plus the matching `duration-*` / `ease-*` utilities, so CSS transitions\nand Svelte transitions read one set of numbers. The `motion` prop rewrites those variables on\n`html` at runtime and `designTokens.motion` rewrites them again per theme, layered over the prop;\n`ThemeState.motion` resolves through the same two rungs, so the utilities and the presets never\ndisagree. `ThemeState.transition` is a deprecated alias for its `normal` duration and `standard`\neasing. Reduced motion resolves every duration to 0 and collapses the `--duration-*` variables via\nthe `data-entasis-reduce-motion` attribute on `html`.\n\nComponents keep their own transition in a reserved `motion` slot on their theme, so the `theme`\nprop covers motion as well as classes:\n\n```svelte\n<script lang=\"ts\">\n\timport { Dialog } from 'entasis/dialog';\n</script>\n\n<Dialog theme={{ motion: { duration: 'fast', easing: 'emphasized' } }} title=\"Quick\">Body</Dialog>\n```\n\n## Component theme registry\n\n`components` sets app-wide component theme defaults without a wrapper component per component:\nit is keyed by theme name (`dialog`, `button`, ...) and each entry takes the same slots as that\ncomponent's `theme` prop, the `motion` slot included. A `set<Component>Theme` call in a subtree\nbeats the registry, and an instance `theme` prop beats both \u2014 per slot: each rung layers on the one\nbelow it, so a subtree that restyles one slot keeps the registry's others.\n\n```svelte\n<script lang=\"ts\">\n\timport { Theme } from 'entasis/theme';\n\n\tlet { children } = $props();\n</script>\n\n<Theme\n\tcomponents={{\n\t\tdialog: { motion: { duration: 'fast' }, content: { base: 'rounded-2xl' } },\n\t\tbutton: { root: { base: 'tracking-wide' } }\n\t}}\n>\n\t{@render children()}\n</Theme>\n```\n\n## Reduced motion\n\n`reduceMotion` forces reduced motion on (`true`) or off (`false`) for every entasis animation,\noverriding the OS `prefers-reduced-motion` setting; omit it to follow the OS. The live result is\nexposed as `ThemeState.preferReducesMotion` (reactive, so it updates when the OS setting changes)\nand mirrored as a `data-entasis-reduce-motion` attribute on `html` for CSS-only animations.\n\n```svelte\n<script>\n\timport { Theme } from 'entasis/theme';\n\n\tlet { children } = $props();\n</script>\n\n<Theme reduceMotion>{@render children()}</Theme>\n```\n\n## Build-time boundary\n\nThe Tailwind plugin still generates color palettes and registers utility names, variants,\nkeyframes, and spinner CSS. Spacing, radius, typography scale, raised borders,\n`defaultColor` and the four state roles (`focusColor`, `selectedColor`, `hoverColor`,\n`pressedColor`) belong to `Theme.designTokens`; colors remain CSS variables and can be\noverridden directly. `ThemeState.defaultColor` exposes the active role. Kit chrome should\nresolve omitted `color` props with `useDefaultColor`.\n";
+export declare const themeDescription = "\n# Theme\n\n`Theme` owns global theme selection, runtime design tokens, shared overlay state, and theme\ntransitions. Wrap the application once and use the `ThemeState` received by the children snippet.\nComponents below it read the same state with `useTheme()` from `entasis/theme`, called during\ncomponent initialisation; it throws when no `Theme` is above. For a palette computed at runtime,\nsee `generateColorPalette` in `entasis/color-palette`.\n\n## Runtime design tokens\n\n```svelte\n<script lang=\"ts\">\n\timport { Theme, type ThemeDesignTokenMap } from 'entasis/theme';\n\n\tlet spacing = $state<'small' | 'normal' | 'large'>('normal');\n\tconst designTokens = $derived({\n\t\tlight: {\n\t\t\tspacing,\n\t\t\tspacingScale: { xs: 1, sm: 1.5, md: 2, lg: 3, xl: 4 },\n\t\t\tradius: 'normal',\n\t\t\ttypeScale: 'default',\n\t\t\traisedWithBorder: true,\n\t\t\tdefaultColor: 'neutral'\n\t\t},\n\t\tdark: {\n\t\t\tspacing,\n\t\t\tspacingScale: { xs: 1, sm: 1.5, md: 2, lg: 3, xl: 4 },\n\t\t\tradius: 'small',\n\t\t\ttypeScale: 'compact',\n\t\t\traisedWithBorder: false,\n\t\t\tdefaultColor: 'neutral'\n\t\t}\n\t} satisfies ThemeDesignTokenMap<readonly ['light', 'dark']>);\n</script>\n\n<Theme {designTokens} transition=\"radial-top-right\">\n\t{#snippet children(theme)}\n\t\t<button onclick={() => (spacing = spacing === 'small' ? 'large' : 'small')}>\n\t\t\tChange density\n\t\t</button>\n\t\t<button onclick={() => (theme.theme = theme.resolvedTheme === 'dark' ? 'light' : 'dark')}>\n\t\t\tToggle color scheme\n\t\t</button>\n\t{/snippet}\n</Theme>\n```\n\n`designTokens` is keyed by logical theme name and respects the `attribute` and `value` props.\nEleven presets ship as `themePresets` (`dense`, `compact`, `balanced`, `comfortable`, `spacious`,\n`sharp`, `rounded`, `display`, `editorial`, `glass`, `terminal`): `designTokens={{ light: themePresets.glass.tokens, dark: themePresets.glass.tokens }}`.\nChanging the controlled object updates already-rendered Tailwind utilities without rebuilding CSS.\n\n### ThemeDesignTokens\n\n- `spacing`: `'small' | 'normal' | 'large' | number`. Globally scales density.\n- `spacingScale`: partial overrides for the strictly increasing `xs`, `sm`, `md`, `lg`,\n  and `xl` spacing multipliers. Defaults to 1/1.5/2/3/4.\n- `radius`: `'none' | 'subtile' | 'small' | 'normal' | 'large' | 'round' | number`.\n  Controls take the full multiplier; surface steps (`lg` and up) stop at `large` (1.5\u00D7).\n- `typeScale`: `'compact' | 'default' | 'comfortable' | 'large' | TypeScaleOptions`.\n- `raisedWithBorder`: toggles the border used by `raised-*` utilities.\n- `defaultColor`: `Colors` role kit chrome inherits when a control omits `color`.\n  Defaults to `neutral`. Set `primary` to restore an accent-colored kit. Compiles the\n  current-color family (`--color`, `--color-readable`, muted/contrast/light/dark variants)\n  and `--default-color` onto the theme selector. Do not set `data-color` on `html`.\n- `focusColor`, `selectedColor`, `hoverColor`, `pressedColor`: the four `Colors` **state\n  roles**. They pin, for the whole theme, what a focus ring, a persistent selection and the\n  transient hover/pressed layer look like, independently of the role of the control the state\n  lands on. They compile `--color-focus`, `--color-selected` (plus its `-contrast`,\n  `-readable` and `-muted-readable` companions), `--color-hover` and\n  `--color-pressed` onto the theme selector. There is no `--color-selected-muted`: the soft\n  fill is a translucent tint of `--color-selected` at `--state-selected-opacity`, so it reads\n  on any surface. None is declared at `:root`: every use site\n  falls back to the matching current role (`ring-focus` is\n  `var(--color-focus, var(--color))`, `bg-selected-muted` tints\n  `var(--color-selected, var(--color))`, the state layer is\n  `var(--color-hover, currentColor)` and on `:active`\n  `var(--color-pressed, var(--color-hover, currentColor))`), so leaving them unset changes\n  nothing and `data-color` keeps moving the states with `--color`. Theme-level only: there is\n  no per-component override. An unknown role throws.\n\nComponent-level density remains a local variant. It selects utility classes whose values inherit\nthe active global spacing token.\n\nGenerated interfaces should use the public `xs | sm | md | lg | xl` vocabulary through component\nprops and named gap/padding utilities. `micro` and `layout-*` are internal recipe tokens. Prefer\nparent-owned gaps over child margins; do not emit arbitrary spacing or unsupported radius values.\n\n## Theme selection\n\nThe selection props wrap `svelte-themes`: `themes`, `defaultTheme`, `forcedTheme`,\n`systemTheme`, `syncColorScheme`, `transitionOnChange`, `storageKey`, `attribute`,\n`value`, and `colorScheme`. The default themes are light and dark, with system selection\nenabled. `systemTheme`, `syncColorScheme`, and `transitionOnChange` all default to\n`true`; they map onto the library's `enableSystem`, `enableColorScheme`, and\n`disableTransitionOnChange` options.\n\n`ThemeState` exposes `theme`, `resolvedTheme`, `themes`, and `systemTheme`. Assign\n`theme.theme` to switch themes. The optional `transition` prop applies a named view transition;\nunsupported browsers and reduced-motion users switch instantly.\n\n`spinnerVariant` sets the global default spinner animation. The children snippet is required.\n\n## Motion tokens\n\nMotion is a token scale like spacing and radius: five duration steps and four easing roles.\n`motion` retunes them app-wide; an omitted token keeps its default.\n\n| Duration   | Default |     | Easing role  | Default       |\n| ---------- | ------- | --- | ------------ | ------------- |\n| `instant`  | 0ms     |     | `standard`   | `cubicInOut`  |\n| `fast`     | 100ms   |     | `enter`      | `cubicOut`    |\n| `normal`   | 200ms   |     | `exit`       | `cubicIn`     |\n| `slow`     | 300ms   |     | `emphasized` | `backOut`     |\n| `slower`   | 500ms   |     |              |               |\n\n```svelte\n<script lang=\"ts\">\n\timport { Theme } from 'entasis/theme';\n\n\tlet { children } = $props();\n</script>\n\n<Theme motion={{ duration: { normal: 150, slow: 260 }, easing: { standard: 'quintOut' } }}>\n\t{@render children()}\n</Theme>\n```\n\nThe Tailwind plugin emits the same scale as CSS variables on `html` (`--duration-normal`,\n`--ease-standard`, ...) plus the matching `duration-*` / `ease-*` utilities, so CSS transitions\nand Svelte transitions read one set of numbers. The `motion` prop rewrites those variables on\n`html` at runtime and `designTokens.motion` rewrites them again per theme, layered over the prop;\n`ThemeState.motion` resolves through the same two rungs, so the utilities and the presets never\ndisagree. `ThemeState.transition` is a deprecated alias for its `normal` duration and `standard`\neasing. Reduced motion resolves every duration to 0 and collapses the `--duration-*` variables via\nthe `data-entasis-reduce-motion` attribute on `html`.\n\nComponents keep their own transition in a reserved `motion` slot on their theme, so the `theme`\nprop covers motion as well as classes:\n\n```svelte\n<script lang=\"ts\">\n\timport { Dialog } from 'entasis/dialog';\n</script>\n\n<Dialog theme={{ motion: { duration: 'fast', easing: 'emphasized' } }} title=\"Quick\">Body</Dialog>\n```\n\n## Component theme registry\n\n`components` sets app-wide component theme defaults without a wrapper component per component:\nit is keyed by theme name (`dialog`, `button`, ...) and each entry takes the same slots as that\ncomponent's `theme` prop, the `motion` slot included. A `set<Component>Theme` call in a subtree\nbeats the registry, and an instance `theme` prop beats both \u2014 per slot: each rung layers on the one\nbelow it, so a subtree that restyles one slot keeps the registry's others.\n\n```svelte\n<script lang=\"ts\">\n\timport { Theme } from 'entasis/theme';\n\n\tlet { children } = $props();\n</script>\n\n<Theme\n\tcomponents={{\n\t\tdialog: { motion: { duration: 'fast' }, content: { base: 'rounded-2xl' } },\n\t\tbutton: { root: { base: 'tracking-wide' } }\n\t}}\n>\n\t{@render children()}\n</Theme>\n```\n\n## Reduced motion\n\n`reduceMotion` forces reduced motion on (`true`) or off (`false`) for every entasis animation,\noverriding the OS `prefers-reduced-motion` setting; omit it to follow the OS. The live result is\nexposed as `ThemeState.preferReducesMotion` (reactive, so it updates when the OS setting changes)\nand mirrored as a `data-entasis-reduce-motion` attribute on `html` for CSS-only animations.\n\n```svelte\n<script>\n\timport { Theme } from 'entasis/theme';\n\n\tlet { children } = $props();\n</script>\n\n<Theme reduceMotion>{@render children()}</Theme>\n```\n\n## Build-time boundary\n\nThe Tailwind plugin still generates color palettes and registers utility names, variants,\nkeyframes, and spinner CSS. Spacing, radius, typography scale, raised borders,\n`defaultColor` and the four state roles (`focusColor`, `selectedColor`, `hoverColor`,\n`pressedColor`) belong to `Theme.designTokens`; colors remain CSS variables and can be\noverridden directly. `ThemeState.defaultColor` exposes the active role. Kit chrome should\nresolve omitted `color` props with `useDefaultColor`.\n";

package/dist/components/Theme/theme.mcp.js

@@ -3,6 +3,9 @@ export const themeDescription = `
 
 \`Theme\` owns global theme selection, runtime design tokens, shared overlay state, and theme
 transitions. Wrap the application once and use the \`ThemeState\` received by the children snippet.
+Components below it read the same state with \`useTheme()\` from \`entasis/theme\`, called during
+component initialisation; it throws when no \`Theme\` is above. For a palette computed at runtime,
+see \`generateColorPalette\` in \`entasis/color-palette\`.
 
 ## Runtime design tokens
 

package/dist/components/Theme/theme.state.svelte.d.ts

@@ -112,6 +112,10 @@ export declare class ThemeState extends ThemeState_base {
     addEventListener: <E extends Events>(event: E, callback: (event: EventPayload[E]) => void) => () => void;
     addEventListenerOnMount: <E extends Events>(event: E, callback: (event: EventPayload[E]) => void) => void;
 }
+/**
+ * The nearest `<Theme>`'s state: color scheme, design tokens, breakpoints and the methods that
+ * change them. Call it during component initialisation, like any Svelte context read.
+ */
 export declare const useTheme: () => ThemeState;
 /** Resolve a control color against Theme `defaultColor`. Call inside `$derived`. */
 export declare const useDefaultColor: (color?: Colors) => Colors;

package/dist/components/Theme/theme.state.svelte.js

@@ -193,6 +193,10 @@ export class ThemeState extends createBindableStateClass() {
         });
     };
 }
+/**
+ * The nearest `<Theme>`'s state: color scheme, design tokens, breakpoints and the methods that
+ * change them. Call it during component initialisation, like any Svelte context read.
+ */
 export const useTheme = () => {
     const theme = getContext('entasisTheme');
     // A missing provider used to surface as `undefined is not an object` from whichever call site

package/dist/components/Tooltip/Tooltip.svelte

@@ -76,8 +76,6 @@
 {#if typeof trigger === 'function'}
 	{@render trigger(attach)}
 {:else}
-	{@const { content: triggerContent, ...buttonProps } = trigger}
-	<Button {...buttonProps} {@attach attach}>
-		{triggerContent}
-	</Button>
+	{@const { content: triggerContent, children, ...buttonProps } = trigger}
+	<Button {...buttonProps} children={children ?? triggerContent} {@attach attach} />
 {/if}

package/dist/components/Tooltip/tooltip.attachment.svelte.js

@@ -1,6 +1,7 @@
 import { useTheme } from '../Theme/theme.state.svelte.js';
 import { useHoverAction } from '../../utils/useHoverAction.svelte.js';
 import { on } from 'svelte/events';
+const FOCUSABLE = 'a[href], button, input, select, textarea, summary, [tabindex], [contenteditable]:not([contenteditable="false"])';
 export const tooltip = (props) => {
     const theme = useTheme();
     let refElement = null;
@@ -37,6 +38,10 @@ export const tooltip = (props) => {
     };
     return (ref) => {
         refElement = ref;
+        // Keyboard users reach the tooltip by focusing its trigger, so an element the browser
+        // cannot focus (an icon, a badge, a truncated label) joins the tab order.
+        if (!ref.matches(FOCUSABLE))
+            ref.tabIndex = 0;
         const off = hoverAction.reference?.(ref);
         // Keyboard users get the tooltip on focus; screen readers get it via aria-describedby.
         const offFocus = on(ref, 'focusin', () => show(ref));

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; Button props render\n  a Button carrying it\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 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";

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

@@ -22,8 +22,10 @@ Both are rendered by the single tooltip surface that \`<Theme>\` mounts (\`Toolt
 
 - **content**: string | Snippet (required) - Tooltip body
 - **trigger**: Snippet<[Attachment<HTMLElement>]> | ButtonProps & { content?: string } (required) -
-  A snippet receives the tooltip attachment and spreads it on its own element; Button props render
-  a Button carrying it
+  A snippet receives the tooltip attachment and spreads it on its own element; an element the
+  browser cannot focus (a span, an icon) gets \`tabindex="0"\` so keyboard focus shows the tooltip.
+  Button props render a Button carrying it; \`children\` (a string or a snippet) replaces
+  \`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,

package/dist/generated/componentAliases.d.ts

@@ -131,6 +131,7 @@ export const componentAliases: {
     'entasis/theme': string;
     'entasis/i18n': string;
     'entasis/tailwind-plugin': string;
+    'entasis/color-palette': string;
     'entasis/types': string;
     'entasis/cva': string;
     'entasis/motion': string;

package/dist/generated/componentAliases.js

@@ -132,6 +132,7 @@ export const componentAliases = {
 	'entasis/theme': './src/lib/components/Theme/index.ts',
 	'entasis/i18n': './src/lib/i18n/index.ts',
 	'entasis/tailwind-plugin': './src/lib/tailwind/index.ts',
+	'entasis/color-palette': './src/lib/tailwind/palette.ts',
 	'entasis/types': './src/lib/types/index.ts',
 	'entasis/cva': './src/lib/utils/cva/index.ts',
 	'entasis/motion': './src/lib/utils/motion/index.ts',

package/dist/generated/componentContract.d.ts

@@ -1070,7 +1070,7 @@ export declare const componentInventory: readonly [{
     readonly id: "data-table";
     readonly subpath: "entasis/data-table";
     readonly sourceIndex: "src/lib/components/DataTable/index.ts";
-    readonly exportedSymbols: readonly ["DataTable", "DataTableAggregation", "DataTableAlignment", "DataTableApi", "DataTableBooleanFilter", "DataTableBuiltInEditor", "DataTableCellCommit", "DataTableCellPayload", "DataTableCellRenderPayload", "DataTableClasses", "DataTableColumn", "DataTableColumnFilter", "DataTableCustomEditor", "DataTableCustomFilter", "DataTableDateEditor", "DataTableDateFilter", "DataTableEditor", "DataTableEditorPayload", "DataTableFilter", "DataTableFilterPayload", "DataTableHeaderPayload", "DataTableHeaderRenderPayload", "DataTableInteractionMode", "DataTableNumberEditor", "DataTableNumberFilter", "DataTableOption", "DataTablePaginationConfig", "DataTablePaginationState", "DataTablePinning", "DataTableProcessingMode", "DataTableProps", "DataTableRowPayload", "DataTableSearchConfig", "DataTableSelectEditor", "DataTableSelectFilter", "DataTableSelectionMode", "DataTableSorting", "DataTableState", "DataTableSwitchEditor", "DataTableTextEditor", "DataTableTextFilter", "DataTableTheme", "DataTableThemeProps", "DataTableToolbarPayload", "createDataTableColumnHelper", "createDataTableState", "dataTableDescription", "dataTableTheme", "setDataTableTheme", "useDataTableTheme"];
+    readonly exportedSymbols: readonly ["DataTable", "DataTableAggregation", "DataTableAlignment", "DataTableApi", "DataTableBooleanFilter", "DataTableBuiltInEditor", "DataTableCellCommit", "DataTableCellPayload", "DataTableCellRenderPayload", "DataTableClasses", "DataTableColumn", "DataTableColumnFilter", "DataTableCustomEditor", "DataTableCustomFilter", "DataTableDateEditor", "DataTableDateFilter", "DataTableEditor", "DataTableEditorPayload", "DataTableFilter", "DataTableFilterPayload", "DataTableHeaderPayload", "DataTableHeaderRenderPayload", "DataTableInteractionMode", "DataTableNumberEditor", "DataTableNumberFilter", "DataTableOption", "DataTablePaginationConfig", "DataTablePaginationState", "DataTablePinning", "DataTableProcessingMode", "DataTableProps", "DataTableRowActivation", "DataTableRowPayload", "DataTableSearchConfig", "DataTableSelectEditor", "DataTableSelectFilter", "DataTableSelectionMode", "DataTableSorting", "DataTableState", "DataTableSwitchEditor", "DataTableTextEditor", "DataTableTextFilter", "DataTableTheme", "DataTableThemeProps", "DataTableToolbarPayload", "createDataTableColumnHelper", "createDataTableState", "dataTableDescription", "dataTableTheme", "setDataTableTheme", "useDataTableTheme"];
     readonly docs: readonly [{
         readonly id: "data-table";
         readonly route: "/components/data-table";
@@ -1518,7 +1518,7 @@ export declare const componentInventory: readonly [{
     readonly id: "popover";
     readonly subpath: "entasis/popover";
     readonly sourceIndex: "src/lib/components/Popover/index.ts";
-    readonly exportedSymbols: readonly ["Popover", "PopoverProps", "PopoverTheme", "PopoverThemeProps", "popoverTheme", "setPopoverTheme", "usePopoverContext", "usePopoverTheme"];
+    readonly exportedSymbols: readonly ["Popover", "PopoverProps", "PopoverState", "PopoverTheme", "PopoverThemeProps", "popoverTheme", "setPopoverTheme", "usePopoverContext", "usePopoverTheme"];
     readonly docs: readonly [{
         readonly id: "popover";
         readonly route: "/components/popover";
@@ -1779,7 +1779,7 @@ export declare const componentInventory: readonly [{
     readonly id: "theme";
     readonly subpath: "entasis/theme";
     readonly sourceIndex: "src/lib/components/Theme/index.ts";
-    readonly exportedSymbols: readonly ["Breakpoint", "ContainerBreakpoint", "ResponsiveProps", "Theme", "ThemeDesignTokenMap", "ThemeDesignTokens", "ThemePreset", "ThemePresetName", "ThemePresetTokens", "ThemeProps", "ThemeRadius", "ThemeSpacing", "ThemeSpacingScale", "ThemeSpacingStep", "ThemeState", "ThemeTransition", "TypeScaleOptions", "TypeScalePreset", "TypeScaleRatio", "breakpoints", "containerBreakpoints", "defaultThemeSpacingScale", "focusRing", "resolveContainerBreakpoint", "resolveResponsive", "responsiveContainerClasses", "responsiveVariables", "selectedSoft", "selectedSolid", "themePresetNames", "themePresets", "themeTransitions", "typeScalePresets", "useDefaultColor"];
+    readonly exportedSymbols: readonly ["Breakpoint", "ContainerBreakpoint", "ResponsiveProps", "Theme", "ThemeDesignTokenMap", "ThemeDesignTokens", "ThemePreset", "ThemePresetName", "ThemePresetTokens", "ThemeProps", "ThemeRadius", "ThemeSpacing", "ThemeSpacingScale", "ThemeSpacingStep", "ThemeState", "ThemeTransition", "TypeScaleOptions", "TypeScalePreset", "TypeScaleRatio", "breakpoints", "containerBreakpoints", "defaultThemeSpacingScale", "focusRing", "resolveContainerBreakpoint", "resolveResponsive", "responsiveContainerClasses", "responsiveVariables", "selectedSoft", "selectedSolid", "themePresetNames", "themePresets", "themeTransitions", "typeScalePresets", "useDefaultColor", "useTheme"];
     readonly docs: readonly [];
     readonly capabilities: readonly ["svelte", "component", "configuration"];
     readonly relatedComponents: readonly [];
@@ -1811,6 +1811,15 @@ export declare const componentInventory: readonly [{
     readonly capabilities: readonly ["tailwind", "theme-configuration", "color-palettes"];
     readonly relatedComponents: readonly ["theme", "tailwind-plugin"];
     readonly visibility: "public";
+}, {
+    readonly id: "color-palette";
+    readonly subpath: "entasis/color-palette";
+    readonly sourceIndex: "src/lib/tailwind/palette.ts";
+    readonly exportedSymbols: readonly ["ColorPalette", "ColorPaletteOptions", "ColorTheme", "generateColorPalette"];
+    readonly docs: readonly [];
+    readonly capabilities: readonly ["theme-configuration", "color-palettes"];
+    readonly relatedComponents: readonly ["theme", "tailwind-plugin"];
+    readonly visibility: "public";
 }, {
     readonly id: "types";
     readonly subpath: "entasis/types";
@@ -2009,6 +2018,7 @@ export declare const relatedComponents: {
     readonly i18n: readonly ["theme"];
     readonly 'tailwind-plugin': readonly ["theme"];
     readonly 'theme-tailwind-plugin': readonly ["theme", "tailwind-plugin"];
+    readonly 'color-palette': readonly ["theme", "tailwind-plugin"];
     readonly types: readonly [];
     readonly cva: readonly ["theme"];
     readonly motion: readonly ["theme"];

package/dist/generated/componentContract.js

@@ -2670,6 +2670,7 @@ export const componentInventory = [
             'DataTablePinning',
             'DataTableProcessingMode',
             'DataTableProps',
+            'DataTableRowActivation',
             'DataTableRowPayload',
             'DataTableSearchConfig',
             'DataTableSelectEditor',
@@ -3598,6 +3599,7 @@ export const componentInventory = [
         exportedSymbols: [
             'Popover',
             'PopoverProps',
+            'PopoverState',
             'PopoverTheme',
             'PopoverThemeProps',
             'popoverTheme',
@@ -4226,7 +4228,8 @@ export const componentInventory = [
             'themePresets',
             'themeTransitions',
             'typeScalePresets',
-            'useDefaultColor'
+            'useDefaultColor',
+            'useTheme'
         ],
         docs: [],
         capabilities: ['svelte', 'component', 'configuration'],
@@ -4274,6 +4277,16 @@ export const componentInventory = [
         relatedComponents: ['theme', 'tailwind-plugin'],
         visibility: 'public'
     },
+    {
+        id: 'color-palette',
+        subpath: 'entasis/color-palette',
+        sourceIndex: 'src/lib/tailwind/palette.ts',
+        exportedSymbols: ['ColorPalette', 'ColorPaletteOptions', 'ColorTheme', 'generateColorPalette'],
+        docs: [],
+        capabilities: ['theme-configuration', 'color-palettes'],
+        relatedComponents: ['theme', 'tailwind-plugin'],
+        visibility: 'public'
+    },
     {
         id: 'types',
         subpath: 'entasis/types',
@@ -4547,6 +4560,7 @@ export const relatedComponents = {
     i18n: ['theme'],
     'tailwind-plugin': ['theme'],
     'theme-tailwind-plugin': ['theme', 'tailwind-plugin'],
+    'color-palette': ['theme', 'tailwind-plugin'],
     types: [],
     cva: ['theme'],
     motion: ['theme'],