entasis 0.11.0 → 0.12.0

package/dist/components/ToggleMenu/ToggleMenu.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { useNavigation } from '../../utils/useNavigation.svelte.js';
 	import Button from '../Button/Button.svelte';
-	import { checkIcon } from '../Icons/check.js';
 	import { dotsThreeIcon } from '../Icons/dotsThree.js';
 	import type { MenuItem } from '../Menu/index.js';
 	import PopupMenu from '../PopupMenu/PopupMenu.svelte';
@@ -17,7 +16,6 @@
 		ToggleMenuItem,
 		ToggleMenuMenuItem,
 		ToggleMenuProps,
-		ToggleMenuRadioGroupButton,
 		ToggleMenuRadioGroupItem,
 		ToggleMenuToggleItem
 	} from './toggleMenu.props.js';
@@ -40,10 +38,14 @@
 	const t = $derived(useI18n());
 
 	const classes = $derived(useToggleMenuTheme(theme));
+	// A disabled item stays in the arrow-key order and can hold the tab stop (the APG toolbar
+	// pattern), so a fully disabled toolbar keeps one tab stop and a screen reader can reach what
+	// is unavailable. Items refuse activation themselves.
 	const navigation = useNavigation({
 		orientation: 'horizontal',
 		loop: true,
-		enableHoverFocus: false
+		enableHoverFocus: false,
+		skipDisabled: false
 	});
 	const overflow = useToggleMenuOverflow();
 
@@ -119,7 +121,11 @@
 		};
 	}
 
-	function createOverflowOption(
+	function overflowLabel(button: ToggleMenuGroupButton | ToggleMenuToggleItem) {
+		return typeof button.children === 'string' ? button.children : button.label;
+	}
+
+	function createOverflowCheckbox(
 		itemIndex: number,
 		button: ToggleMenuGroupButton | ToggleMenuToggleItem,
 		checked: boolean,
@@ -127,54 +133,56 @@
 		groupButtonValue?: string
 	): MenuItem {
 		return {
-			type: 'option',
-			role: 'menuitemcheckbox',
-			attrs: {
-				'aria-checked': checked,
-				'aria-label': typeof button.children === 'string' ? button.children : button.label
-			},
+			type: 'checkbox',
+			key:
+				groupButtonValue === undefined
+					? `toggle-${itemIndex}`
+					: `group-${itemIndex}-${groupButtonValue}`,
+			attrs: { 'aria-label': overflowLabel(button) },
 			children: button.children ?? button.label,
 			prefix: button.prefix,
-			suffix: checked ? checkIcon : undefined,
 			size: group?.size ?? size,
 			color: group?.color ?? color,
 			disabled: disabled || !!group?.disabled || !!button.disabled,
-			onclick: () => {
+			value: checked,
+			onValueChange: (next) => {
 				if (group && groupButtonValue !== undefined) {
-					updateGroup(itemIndex, group, groupButtonValue, !checked);
+					updateGroup(itemIndex, group, groupButtonValue, next);
 					return;
 				}
 				const item = items[itemIndex];
-				if (item?.type === 'toggle') updateToggle(itemIndex, item, !checked);
+				if (item?.type === 'toggle') updateToggle(itemIndex, item, next);
 			}
 		};
 	}
 
-	function createOverflowRadioOption(
-		itemIndex: number,
-		group: ToggleMenuRadioGroupItem,
-		button: ToggleMenuRadioGroupButton
-	): MenuItem {
-		const checked = (group.value ?? group.defaultValue) === button.value;
+	function createOverflowRadioGroup(itemIndex: number, group: ToggleMenuRadioGroupItem): MenuItem {
 		return {
-			type: 'option',
-			role: 'menuitemradio',
-			attrs: {
-				'aria-checked': checked,
-				'aria-label': typeof button.children === 'string' ? button.children : button.label
-			},
-			children: button.children ?? button.label,
-			prefix: button.prefix,
-			suffix: checked ? checkIcon : undefined,
-			size: group.size ?? size,
-			color: group.color ?? color,
-			disabled: disabled || !!group.disabled || !!button.disabled,
-			onclick: () => updateRadioGroup(itemIndex, button.value)
+			type: 'radio-group',
+			key: `radio-${itemIndex}`,
+			label: group.label,
+			value: group.value ?? group.defaultValue ?? '',
+			onValueChange: (next) => updateRadioGroup(itemIndex, next),
+			disabled: disabled || !!group.disabled,
+			items: group.items.map((button) => ({
+				value: button.value,
+				attrs: { 'aria-label': overflowLabel(button) },
+				children: button.children ?? button.label,
+				prefix: button.prefix,
+				size: group.size ?? size,
+				color: group.color ?? color,
+				disabled: disabled || !!group.disabled || !!button.disabled
+			}))
 		};
 	}
 
+	// Overflowed toolbar items become one menu. Single entries (a toggle, a menu, one custom item)
+	// sit together like any menu rows; a separator only sets apart a multi-option unit (a button
+	// group, a radio group, several custom entries), as a toolbar's grouping does.
+	// The menu takes the toolbar's size, which also sets its rows' height (and its submenus').
 	const overflowMenuItems = $derived.by(() => {
 		const menuItems: MenuItem[] = [];
+		let previousIsSet = false;
 
 		items.slice(overflow.visibleCount).forEach((item, overflowIndex) => {
 			const itemIndex = overflow.visibleCount + overflowIndex;
@@ -182,25 +190,26 @@
 
 			if (item.type === 'toggle') {
 				unitItems.push(
-					createOverflowOption(itemIndex, item, item.value ?? item.defaultValue ?? false)
+					createOverflowCheckbox(itemIndex, item, item.value ?? item.defaultValue ?? false)
 				);
 			} else if (item.type === 'group') {
 				const pressed = getGroupValue(item);
-				item.items.forEach((button) => {
-					unitItems.push(
-						createOverflowOption(
+				unitItems.push({
+					type: 'group',
+					key: `group-${itemIndex}`,
+					label: item.label,
+					items: item.items.map((button) =>
+						createOverflowCheckbox(
 							itemIndex,
 							button,
 							pressed.includes(button.value),
 							item,
 							button.value
 						)
-					);
+					)
 				});
 			} else if (item.type === 'radio-group') {
-				item.items.forEach((button) => {
-					unitItems.push(createOverflowRadioOption(itemIndex, item, button));
-				});
+				unitItems.push(createOverflowRadioGroup(itemIndex, item));
 			} else if (item.type === 'menu') {
 				unitItems.push(createOverflowMenu(item));
 			} else {
@@ -208,8 +217,10 @@
 			}
 
 			if (unitItems.length === 0) return;
-			if (menuItems.length > 0) menuItems.push({ type: 'separator' });
+			const isSet = item.type === 'group' || item.type === 'radio-group' || unitItems.length > 1;
+			if (menuItems.length > 0 && (isSet || previousIsSet)) menuItems.push({ type: 'separator' });
 			menuItems.push(...unitItems);
+			previousIsSet = isSet;
 		});
 
 		return menuItems;
@@ -307,6 +318,7 @@
 						color={item.color ?? color}
 						variant={item.variant ?? variant}
 						disabled={disabled || !!item.disabled}
+						focusableWhenDisabled
 						value={item.value ?? item.defaultValue ?? false}
 						onValueChange={(checked) => updateToggle(index, item, checked)}
 						{@attach overflowed ? undefined : navigation.itemReference}
@@ -327,7 +339,8 @@
 		{@attach overflow.moreReference}
 	>
 		<PopupMenu
-			menu={{ items: overflowMenuItems }}
+			{size}
+			menu={{ items: overflowMenuItems, size }}
 			closeOnItemClick={false}
 			position="bottom-end"
 			fitTrigger={false}
@@ -338,6 +351,7 @@
 					color="neutral"
 					{size}
 					{disabled}
+					focusableWhenDisabled
 					squared
 					label={t.moreTools}
 					prefix={dotsThreeIcon}

package/dist/components/ToggleMenu/ToggleMenuGroup.svelte

@@ -61,6 +61,7 @@
 			color={item.color ?? color}
 			variant={item.variant ?? variant}
 			disabled={disabled || !!item.disabled || !!button.disabled}
+			focusableWhenDisabled
 			value={pressed.includes(button.value)}
 			onValueChange={(checked) => onToggle({ value: button.value, checked })}
 			{@attach overflowed ? undefined : buttonReference}

package/dist/components/ToggleMenu/ToggleMenuMenu.svelte

@@ -56,7 +56,8 @@
 >
 	<PopupMenu
 		bind:open
-		menu={{ items: menuItems }}
+		size={resolvedSize}
+		menu={{ items: menuItems, size: resolvedSize }}
 		closeOnItemClick={item.closeOnItemClick ?? true}
 		position="bottom"
 		fitTrigger={false}
@@ -69,7 +70,8 @@
 				aria-expanded={popover.isOpen}
 				data-color={resolvedColor}
 				data-checked="false"
-				disabled={isDisabled}
+				aria-disabled={isDisabled || undefined}
+				data-disabled={isDisabled || undefined}
 				class={classes.root({
 					color: resolvedColor,
 					checked: false,
@@ -77,6 +79,7 @@
 					variant: resolvedVariant,
 					size: resolvedSize,
 					disabled: isDisabled,
+					focusable: true,
 					className: item.class
 				})}
 				{@attach overflowed ? undefined : buttonReference}
@@ -84,7 +87,10 @@
 				{@attach !item.children && item.label && !popover.isOpen && !overflowed
 					? tooltip({ content: item.label, delay: 350 })
 					: undefined}
-				onclick={() => popover.toggle()}
+				onclick={() => {
+					// Disabled but focusable: it stays in the toolbar's arrow-key order and refuses to open.
+					if (!isDisabled) popover.toggle();
+				}}
 			>
 				<Slot render={item.prefix} class={classes.prefix({ size: resolvedSize, checked: false })} />
 				<Slot render={item.children} />

package/dist/components/ToggleMenu/ToggleMenuRadioGroup.svelte

@@ -69,7 +69,8 @@
 			aria-checked={isChecked}
 			data-color={resolvedColor}
 			data-checked={isChecked}
-			disabled={isDisabled}
+			aria-disabled={isDisabled || undefined}
+			data-disabled={isDisabled || undefined}
 			class={buttonClasses.root({
 				color: resolvedColor,
 				checked: isChecked,
@@ -77,9 +78,13 @@
 				variant: resolvedVariant,
 				size: resolvedSize,
 				disabled: isDisabled,
+				focusable: true,
 				className: button.class
 			})}
-			onclick={() => onValueChange(button.value)}
+			onclick={() => {
+				// Disabled but focusable: it stays in the toolbar's arrow-key order and refuses a choice.
+				if (!isDisabled) onValueChange(button.value);
+			}}
 			{@attach overflowed ? undefined : buttonReference}
 			{@attach !button.children && button.label && !overflowed
 				? tooltip({ content: button.label, delay: 350 })

package/dist/components/ToggleMenu/toggleMenu.mcp.d.ts

@@ -1 +1 @@
-export declare const toggleMenuDescription = "\n# ToggleMenu Component\n\nToggleMenu renders standalone toggles, independent toggle groups, exclusive radio groups, menu buttons, and custom snippet controls as one accessible, responsive toolbar.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\timport { ToggleMenu, type ToggleMenuItem } from 'entasis/toggle-menu';\n\timport type { MenuItem } from 'entasis/menu';\n\timport { eyeIcon } from 'entasis/icons/eye';\n\timport { textBIcon } from 'entasis/icons/textB';\n\timport { textItalicIcon } from 'entasis/icons/textItalic';\n\timport { paletteIcon } from 'entasis/icons/palette';\n\n\tconst getTextColorOptions = (): MenuItem[] => [\n\t\t{ type: 'option', title: 'Red', color: 'danger' },\n\t\t{ type: 'option', title: 'Blue', color: 'info' }\n\t];\n\n\tlet items = $state<ToggleMenuItem[]>([\n\t\t{ type: 'toggle', prefix: eyeIcon, label: 'Preview', value: true },\n\t\t{\n\t\t\ttype: 'group',\n\t\t\tlabel: 'Text formatting',\n\t\t\tvalue: ['bold'],\n\t\t\titems: [\n\t\t\t\t{ value: 'bold', prefix: textBIcon, label: 'Bold' },\n\t\t\t\t{ value: 'italic', prefix: textItalicIcon, label: 'Italic' }\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\ttype: 'menu',\n\t\t\tlabel: 'Text color',\n\t\t\tprefix: paletteIcon,\n\t\t\tmenu: getTextColorOptions\n\t\t}\n\t]);\n</script>\n\n<ToggleMenu bind:items label=\"Editor tools\" />\n```\n\n## Item Types\n\n- **toggle**: A standalone ToggleButton configuration with `type: 'toggle'`. Its boolean `value` stores the pressed state.\n- **group**: A labeled collection of independent toggles. Its `items` is an array of button configurations, each with its own `value` string, and the group `value` is the `string[]` of pressed values.\n- **radio-group**: A labeled collection of mutually exclusive toolbar choices. Its `items` is an array of radio configurations, each with its own `value` string, and the group `value` is the checked string.\n- **menu**: A toolbar menu button. Its `menu` is a `MenuItem[]` or reactive factory and automatically becomes a submenu inside More.\n- **custom**: A snippet control with `type: 'custom'`. Its `children` snippet receives the resolved toolbar state and a `reference` attachment for the primary focusable element. `overflowItems` is required so the control has an explicit representation inside More.\n\nGroups are joined by default. Set `joined: false` when their buttons should remain visually separate.\n\n## Props\n\n- **items**: ToggleMenuItem[] (required, bindable) - Ordered toggles, groups, menu buttons, and custom controls. Pressed state lives on the items, so bind them to keep it.\n- **label**: string (required) - Accessible name for the toolbar.\n- **size**: 'small' | 'normal' | 'large' - Default size inherited by items.\n- **color**: Colors - Default color inherited by items.\n- **variant**: 'outline' | 'ghost' - Default variant inherited by items.\n- **disabled**: boolean - Disables every item.\n- **onItemsChange**: (items) => void - Called once with the complete updated item list.\n- **class**: string - Additional classes for the toolbar root.\n- **theme**: ToggleMenuThemeProps - Theme overrides for root, rail, units, and overflow trigger.\n\nItem-level size, color, variant, and disabled values override toolbar defaults. Toggle, group, and radio-group callbacks receive their native checked boolean, pressed-value array, or selected value.\n\n## Menu Buttons\n\nA `menu` item renders a normal button with menu-button ARIA state and inherited toolbar styling. Pass a function when checked rows or other menu state must be recalculated reactively. `closeOnItemClick` defaults to `true`. ToggleMenu owns the PopupMenu attachments, tooltip, and overflow submenu representation.\n\n## Custom Controls\n\n`ToggleMenuCustomPayload` contains:\n\n- **reference**: Attachment for the custom control's primary focusable element. Applying it includes the control in roving keyboard navigation.\n- **size**, **color**, **variant**, **disabled**: Resolved toolbar or item values.\n- **overflowed**: Whether the logical unit currently lives in More.\n\n`overflowItems` accepts either a `MenuItem[]` or a function returning one. Use the function form when the overflow representation depends on reactive state. Popup triggers should attach both the toolbar `reference` and their own popover reference to the same button.\n\n## Overflow\n\nToggleMenu stays on one row. When complete logical units no longer fit, it moves them into a More popup rather than wrapping or splitting a group. Toggle overflow rows use `menuitemcheckbox`; radio rows use `menuitemradio`. Both expose `aria-checked` and remain open while changing state. Menu buttons become submenus from the same menu data. Custom controls contribute their declared `overflowItems` as one logical unit.\n\n## Keyboard And Tooltips\n\n- The toolbar uses one roving tab stop.\n- ArrowLeft and ArrowRight move between visible controls; Home and End move to the edges.\n- Arrow navigation through a radio group does not change its value. Space, Enter, or click selects the focused radio.\n- Disabled and overflowed controls are excluded from navigation.\n- Icon-only toggle and menu controls automatically use their `label` as tooltip content. Custom snippets own their tooltip and accessible label.\n- Use `radio-group` for exclusive choices inside ToggleMenu and SegmentedControl for standalone exclusive controls.\n";
+export declare const toggleMenuDescription = "\n# ToggleMenu Component\n\nToggleMenu renders standalone toggles, independent toggle groups, exclusive radio groups, menu buttons, and custom snippet controls as one accessible, responsive toolbar.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\timport { ToggleMenu, type ToggleMenuItem } from 'entasis/toggle-menu';\n\timport type { MenuItem } from 'entasis/menu';\n\timport { eyeIcon } from 'entasis/icons/eye';\n\timport { textBIcon } from 'entasis/icons/textB';\n\timport { textItalicIcon } from 'entasis/icons/textItalic';\n\timport { paletteIcon } from 'entasis/icons/palette';\n\n\tconst getTextColorOptions = (): MenuItem[] => [\n\t\t{ type: 'option', title: 'Red', color: 'danger' },\n\t\t{ type: 'option', title: 'Blue', color: 'info' }\n\t];\n\n\tlet items = $state<ToggleMenuItem[]>([\n\t\t{ type: 'toggle', prefix: eyeIcon, label: 'Preview', value: true },\n\t\t{\n\t\t\ttype: 'group',\n\t\t\tlabel: 'Text formatting',\n\t\t\tvalue: ['bold'],\n\t\t\titems: [\n\t\t\t\t{ value: 'bold', prefix: textBIcon, label: 'Bold' },\n\t\t\t\t{ value: 'italic', prefix: textItalicIcon, label: 'Italic' }\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\ttype: 'menu',\n\t\t\tlabel: 'Text color',\n\t\t\tprefix: paletteIcon,\n\t\t\tmenu: getTextColorOptions\n\t\t}\n\t]);\n</script>\n\n<ToggleMenu bind:items label=\"Editor tools\" />\n```\n\n## Item Types\n\n- **toggle**: A standalone ToggleButton configuration with `type: 'toggle'`. Its boolean `value` stores the pressed state.\n- **group**: A labeled collection of independent toggles. Its `items` is an array of button configurations, each with its own `value` string, and the group `value` is the `string[]` of pressed values.\n- **radio-group**: A labeled collection of mutually exclusive toolbar choices. Its `items` is an array of radio configurations, each with its own `value` string, and the group `value` is the checked string.\n- **menu**: A toolbar menu button. Its `menu` is a `MenuItem[]` or reactive factory and automatically becomes a submenu inside More.\n- **custom**: A snippet control with `type: 'custom'`. Its `children` snippet receives the resolved toolbar state and a `reference` attachment for the primary focusable element. `overflowItems` is required so the control has an explicit representation inside More.\n\nGroups are joined by default. Set `joined: false` when their buttons should remain visually separate.\n\n## Props\n\n- **items**: ToggleMenuItem[] (required, bindable) - Ordered toggles, groups, menu buttons, and custom controls. Pressed state lives on the items, so bind them to keep it.\n- **label**: string (required) - Accessible name for the toolbar.\n- **size**: 'small' | 'normal' | 'large' - Default size inherited by items.\n- **color**: Colors - Default color inherited by items.\n- **variant**: 'outline' | 'ghost' - Default variant inherited by items.\n- **disabled**: boolean - Disables every item.\n- **onItemsChange**: (items) => void - Called once with the complete updated item list.\n- **class**: string - Additional classes for the toolbar root.\n- **theme**: ToggleMenuThemeProps - Theme overrides for root, rail, units, and overflow trigger.\n\nItem-level size, color, variant, and disabled values override toolbar defaults. Toggle, group, and radio-group callbacks receive their native checked boolean, pressed-value array, or selected value.\n\n## Menu Buttons\n\nA `menu` item renders a normal button with menu-button ARIA state and inherited toolbar styling. Pass a function when checked rows or other menu state must be recalculated reactively. `closeOnItemClick` defaults to `true`. ToggleMenu owns the PopupMenu attachments, tooltip, and overflow submenu representation.\n\n## Custom Controls\n\n`ToggleMenuCustomPayload` contains:\n\n- **reference**: Attachment for the custom control's primary focusable element. Applying it includes the control in roving keyboard navigation.\n- **size**, **color**, **variant**, **disabled**: Resolved toolbar or item values.\n- **overflowed**: Whether the logical unit currently lives in More.\n\n`overflowItems` accepts either a `MenuItem[]` or a function returning one. Use the function form when the overflow representation depends on reactive state. Popup triggers should attach both the toolbar `reference` and their own popover reference to the same button.\n\n## Overflow\n\nToggleMenu stays on one row. When complete logical units no longer fit, it moves them into a More popup rather than wrapping or splitting a group. The rows are the Menu's own checkbox items and radio groups: a toggle becomes a `menuitemcheckbox`, the buttons of a group become checkbox rows inside a labelled `role=\"group\"` (the group `label`), and a radio group becomes a labelled radio group of `menuitemradio` rows. All expose `aria-checked`, show an animated check, report once per change through the item's `onValueChange` and remain open while changing state. Menu buttons become submenus from the same menu data. Custom controls contribute their declared `overflowItems` as one logical unit.\n\n## Keyboard And Tooltips\n\n- The toolbar uses one roving tab stop.\n- ArrowLeft and ArrowRight move between visible controls; Home and End move to the edges.\n- Arrow navigation through a radio group does not change its value. Space, Enter, or click selects the focused radio.\n- Disabled controls stay in the arrow-key order and take the tab stop like any other item (the APG toolbar pattern): they announce `aria-disabled` and `data-disabled`, refuse activation, and still receive pointer events, so a tooltip can say why they are unavailable. A fully disabled toolbar therefore keeps exactly one tab stop. Overflowed controls are excluded from navigation; the More button is in it only while something overflows.\n- A text field passed as a custom control keeps its editing keys: Home, End, Space and Enter stay in the field, and ArrowLeft / ArrowRight leave it only when the caret is already at the start or end of its text (mirrored in RTL).\n- Icon-only toggle and menu controls automatically use their `label` as tooltip content. Custom snippets own their tooltip and accessible label.\n- Use `radio-group` for exclusive choices inside ToggleMenu and SegmentedControl for standalone exclusive controls.\n";

package/dist/components/ToggleMenu/toggleMenu.mcp.js

@@ -82,14 +82,15 @@ A \`menu\` item renders a normal button with menu-button ARIA state and inherite
 
 ## Overflow
 
-ToggleMenu stays on one row. When complete logical units no longer fit, it moves them into a More popup rather than wrapping or splitting a group. Toggle overflow rows use \`menuitemcheckbox\`; radio rows use \`menuitemradio\`. Both expose \`aria-checked\` and remain open while changing state. Menu buttons become submenus from the same menu data. Custom controls contribute their declared \`overflowItems\` as one logical unit.
+ToggleMenu stays on one row. When complete logical units no longer fit, it moves them into a More popup rather than wrapping or splitting a group. The rows are the Menu's own checkbox items and radio groups: a toggle becomes a \`menuitemcheckbox\`, the buttons of a group become checkbox rows inside a labelled \`role="group"\` (the group \`label\`), and a radio group becomes a labelled radio group of \`menuitemradio\` rows. All expose \`aria-checked\`, show an animated check, report once per change through the item's \`onValueChange\` and remain open while changing state. Menu buttons become submenus from the same menu data. Custom controls contribute their declared \`overflowItems\` as one logical unit.
 
 ## Keyboard And Tooltips
 
 - The toolbar uses one roving tab stop.
 - ArrowLeft and ArrowRight move between visible controls; Home and End move to the edges.
 - Arrow navigation through a radio group does not change its value. Space, Enter, or click selects the focused radio.
-- Disabled and overflowed controls are excluded from navigation.
+- Disabled controls stay in the arrow-key order and take the tab stop like any other item (the APG toolbar pattern): they announce \`aria-disabled\` and \`data-disabled\`, refuse activation, and still receive pointer events, so a tooltip can say why they are unavailable. A fully disabled toolbar therefore keeps exactly one tab stop. Overflowed controls are excluded from navigation; the More button is in it only while something overflows.
+- A text field passed as a custom control keeps its editing keys: Home, End, Space and Enter stay in the field, and ArrowLeft / ArrowRight leave it only when the caret is already at the start or end of its text (mirrored in RTL).
 - Icon-only toggle and menu controls automatically use their \`label\` as tooltip content. Custom snippets own their tooltip and accessible label.
 - Use \`radio-group\` for exclusive choices inside ToggleMenu and SegmentedControl for standalone exclusive controls.
 `;

package/dist/components/ToggleMenu/toggleMenu.props.d.ts

@@ -103,7 +103,10 @@ export type ToggleMenuProps = WithAttachments<{
     color?: Colors;
     /** Default visual variant inherited by every item. */
     variant?: ToggleButtonVariant;
-    /** When true, disables every item in the menu. */
+    /**
+     * When true, disables every item in the menu. Disabled items stay in the arrow-key order and
+     * keep the toolbar's tab stop, announcing `aria-disabled` instead of leaving the tab order.
+     */
     disabled?: boolean;
     /** Called once with the complete updated item list after any control state changes. */
     onItemsChange?: (items: ToggleMenuItem[]) => void;

package/dist/components/Tooltip/Tooltip.svelte

@@ -7,13 +7,7 @@
 	import type { TooltipProps } from './tooltip.props.js';
 	import { tooltip } from './tooltip.attachment.svelte.js';
 
-	let {
-		trigger,
-		open = $bindable(),
-		defaultOpen = false,
-		onOpenChange,
-		...options
-	}: TooltipProps = $props();
+	let { trigger, open = $bindable(), defaultOpen = false, ...options }: TooltipProps = $props();
 
 	const theme = useTheme();
 	const openState = createBindableValue(
@@ -47,7 +41,8 @@
 	const surfaceTaken = $derived(theme.tooltip !== null && theme.tooltip.ref !== element);
 
 	// Hover and focus move the surface without asking, so mirror what it shows back into the
-	// controlled state. Only real surface changes are reported, never the caller's own request.
+	// controlled state. `onOpenChange` already ran, before the surface changed hands, in the
+	// primitive that made the change; the caller's own `open` is never echoed back to it.
 	let shown = false;
 	$effect(() => {
 		const next = displayed;
@@ -56,7 +51,6 @@
 		untrack(() => {
 			if (openState.value === next) return;
 			openState.value = next;
-			onOpenChange?.(next);
 		});
 	});
 
@@ -66,9 +60,7 @@
 		const ref = element;
 		theme.tooltip = { ...options, ref };
 		return () => {
-			if (theme.tooltip?.ref !== ref) return;
-			theme.tooltip = null;
-			theme.lastTooltipClosed = Date.now();
+			if (theme.tooltip?.ref === ref) theme.tooltip = null;
 		};
 	});
 </script>

package/dist/components/Tooltip/TooltipHost.svelte

@@ -1,7 +1,18 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
+	import { transitionSize } from '../../attachments/transitionSize.js';
+	import { requestOpenChange, type OpenChangeDetails } from '../../utils/openChange.js';
 	import Popover from '../Popover/Popover.svelte';
 	import Slot from '../Slot/Slot.svelte';
 	import { useTheme } from '../Theme/theme.state.svelte.js';
+	import {
+		applyStateAttributes,
+		openStateAttributes,
+		placementAttributes,
+		transitionStatusAttributes
+	} from '../../utils/stateAttributes.js';
+	import type { PopoverApi } from '../Popover/popover.api.js';
+	import { reportTooltipContentHover } from './tooltip.surface.js';
 	import { useTooltipTheme, useTooltipMotion } from './tooltip.theme.js';
 
 	const theme = useTheme();
@@ -9,26 +20,107 @@
 	const surfaceId = `${id}-tooltip`;
 	theme.tooltipId = surfaceId;
 	let currentTooltip = $state(theme.tooltip);
+	// Whether the surface moved from one trigger to another without closing in between: it keeps
+	// its place, resizes to the new content and tells neither tooltip to animate in or out.
+	let handoff = $state(false);
+	let shownFor: HTMLElement | null = null;
+	// Whether the open transition of the tooltip now shown has ended. A handoff in the middle of it
+	// leaves the new tooltip's `onAfterOpen` to that transition's end, so it fires once.
+	let opened = false;
 
 	$effect.pre(() => {
-		if (theme.tooltip) currentTooltip = theme.tooltip;
+		const next = theme.tooltip;
+		untrack(() => {
+			const previous = currentTooltip;
+			const moved = !!next && !!shownFor && shownFor !== next.ref;
+			// The same trigger refreshing its entry (the `open` state seeding it again) changes nothing.
+			if (moved) handoff = true;
+			else if (!next || !shownFor) handoff = false;
+			if (next && !shownFor) opened = false;
+			shownFor = next?.ref ?? null;
+			// The pointer on the content of a tooltip that is gone is no longer on it.
+			if (previous && previous.ref !== next?.ref) reportTooltipContentHover(previous.ref, false);
+			// A handed-over tooltip plays no transition of its own, so its lifecycle ends and begins now,
+			// unless the one it replaces had not finished opening: then neither of them ever completed,
+			// and the open transition still running delivers the new tooltip's `onAfterOpen`.
+			if (moved && previous && opened) {
+				previous.onAfterClose?.();
+				next.onAfterOpen?.();
+			}
+		});
+		if (next) currentTooltip = next;
 	});
 
+	function handleAfterOpen() {
+		opened = true;
+		currentTooltip?.onAfterOpen?.();
+	}
+
 	function handleAfterClose() {
 		currentTooltip?.onAfterClose?.();
 		if (!theme.tooltip) currentTooltip = null;
 	}
 
-	function handleOpenChange(open: boolean) {
+	function handleOpenChange(open: boolean, details: OpenChangeDetails) {
 		if (open) return;
+		const shown = theme.tooltip;
+		if (!shown) return;
+		// A press on the trigger is the trigger's to judge: `closeOnClick` closes the tooltip with
+		// the `trigger-press` reason, and `false` leaves it open.
+		const target = details.event?.composedPath?.()[0];
+		if (
+			details.reason === 'outside-press' &&
+			target instanceof Node &&
+			shown.ref.contains(target)
+		) {
+			details.cancel();
+			return;
+		}
+		if (!requestOpenChange(shown.onOpenChange, false, details)) return;
 		theme.tooltip = null;
-		theme.lastTooltipClosed = Date.now();
 	}
+
+	// However the shared surface closes (pointer, focus, Escape, unmount), the hover warm-up
+	// window starts: the next tooltip, hover card or hover popover opens at once. A tooltip held
+	// open (`open`, keyboard focus) does not warm the group while it shows.
+	$effect(() => {
+		if (!theme.tooltip) return;
+		return () => theme.hoverIntent.markClosed();
+	});
 	const color = $derived(currentTooltip?.color ?? 'neutral');
 	const size = $derived(currentTooltip?.size ?? 'normal');
 	const variant = $derived(currentTooltip?.variant ?? 'solid');
+	const hoverable = $derived(currentTooltip?.hoverable !== false);
+	// The surface grows or shrinks to the content of the trigger it moved to.
+	const resizeWithContent = transitionSize({ axis: 'both', isActive: () => handoff });
 
 	const classes = $derived(useTooltipTheme(currentTooltip?.theme));
+	// The surface is what a tooltip's `class` and theme style, so it carries the panel's hooks:
+	// open state, transition phase and the side it landed on (see `tooltipDataAttributes`).
+	const surfaceAttributes = (popover: PopoverApi) => ({
+		...openStateAttributes(popover.isOpen),
+		...transitionStatusAttributes(popover.status),
+		...placementAttributes(
+			popover.placement
+				? { side: popover.placement.side, align: popover.placement.align ?? undefined }
+				: undefined,
+			{ anchorHidden: popover.placement?.anchorHidden }
+		)
+	});
+	// Written from here as well as by the template: Svelte pauses the effects of a block while its
+	// out-transition plays, so only an effect outside the surface reaches it while it fades out.
+	// Raw state: the entry holds a DOM node and is compared by identity when the surface unmounts.
+	let surface = $state.raw<{ node: HTMLElement; popover: PopoverApi } | null>(null);
+	const trackSurface = (popover: PopoverApi) => (node: HTMLElement) => {
+		const entry = { node, popover };
+		surface = entry;
+		return () => {
+			if (surface === entry) surface = null;
+		};
+	};
+	$effect(() => {
+		if (surface) applyStateAttributes(surface.node, surfaceAttributes(surface.popover));
+	});
 	// Own motion preset (ladder: registry → setTooltipTheme → theme.motion → transition
 	// prop), handed to the Popover as an already-resolved `{ in, out }`.
 	const resolveMotion = useTooltipMotion();
@@ -40,28 +132,57 @@
 	);
 </script>
 
+<!-- Content that ignores the pointer lets it through to the page: the positioning wrapper and
+     the surface both need to, since the wrapper is the box that hugs the surface. -->
 <Popover
 	{id}
-	open={!!theme.tooltip}
+	bind:open={() => !!theme.tooltip, () => {}}
 	ref={currentTooltip?.ref}
 	lockScroll={false}
+	tabBridge={false}
+	closeOnFocusOut={false}
 	position={currentTooltip?.position}
 	transition={tooltipTransition}
 	closeOnMouseLeave={false}
 	offset={currentTooltip?.offset}
-	onAfterOpen={currentTooltip?.onAfterOpen}
+	onAfterOpen={handleAfterOpen}
 	onAfterClose={handleAfterClose}
 	onOpenChange={handleOpenChange}
 	class="!w-fit !max-w-fit !bg-transparent !p-0 !shadow-none !ring-0"
+	{@attach (wrapper: HTMLElement) => {
+		if (hoverable) return;
+		wrapper.style.pointerEvents = 'none';
+		return () => {
+			wrapper.style.pointerEvents = '';
+		};
+	}}
 >
-	<div
-		id={surfaceId}
-		role="tooltip"
-		data-color={color}
-		data-size={size}
-		data-variant={variant}
-		class={classes.root({ color, size, variant, className: currentTooltip?.class })}
-	>
-		<Slot render={currentTooltip?.content} />
-	</div>
+	{#snippet children(popover: PopoverApi)}
+		<div
+			id={surfaceId}
+			role="tooltip"
+			data-color={color}
+			data-size={size}
+			data-variant={variant}
+			data-instant={handoff ? '' : undefined}
+			{...surfaceAttributes(popover)}
+			{@attach trackSurface(popover)}
+			class={classes.root({ color, size, variant, className: currentTooltip?.class })}
+			style:pointer-events={hoverable ? undefined : 'none'}
+			onmouseenter={(event) => {
+				if (currentTooltip) reportTooltipContentHover(currentTooltip.ref, true, event);
+			}}
+			onmouseleave={(event) => {
+				if (currentTooltip) reportTooltipContentHover(currentTooltip.ref, false, event);
+			}}
+		>
+			<!-- The surface keeps its minimum width, so its content is what grows and shrinks. -->
+			<span
+				class="inline-flex items-center justify-center gap-[inherit]"
+				{@attach resizeWithContent}
+			>
+				<Slot render={currentTooltip?.content} />
+			</span>
+		</div>
+	{/snippet}
 </Popover>

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

@@ -3,3 +3,4 @@ export { default as TooltipHost } from './TooltipHost.svelte';
 export type { TooltipProps, TooltipOptions, TooltipTrigger } from './tooltip.props.js';
 export { tooltipTheme, setTooltipTheme, useTooltipTheme, type TooltipTheme, type TooltipThemeProps } from './tooltip.theme.js';
 export { tooltip } from './tooltip.attachment.svelte.js';
+export { tooltipDataAttributes, tooltipCssVariables, type TooltipDataAttribute, type TooltipCssVariable } from './tooltip.attributes.js';

package/dist/components/Tooltip/index.js

@@ -2,3 +2,4 @@ export { default as Tooltip } from './Tooltip.svelte';
 export { default as TooltipHost } from './TooltipHost.svelte';
 export { tooltipTheme, setTooltipTheme, useTooltipTheme } from './tooltip.theme.js';
 export { tooltip } from './tooltip.attachment.svelte.js';
+export { tooltipDataAttributes, tooltipCssVariables } from './tooltip.attributes.js';

package/dist/components/Tooltip/tooltip.attachment.svelte.d.ts

@@ -1,2 +1,7 @@
 import type { TooltipOptions } from './tooltip.props.js';
+/**
+ * Least time, in milliseconds, a tooltip with hoverable content stays open after the pointer
+ * leaves its trigger, so the pointer can cross the gap to the content.
+ */
+export declare const TOOLTIP_CONTENT_GRACE = 100;
 export declare const tooltip: (props: TooltipOptions) => (ref: HTMLElement) => () => void;