entasis 0.11.0 → 0.13.0

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.svelte

@@ -26,6 +26,8 @@
 		variant,
 		disabled,
 		joined = false,
+		orientation = 'horizontal',
+		loopFocus = true,
 		type = 'multiple' as Type,
 		theme,
 		class: className,
@@ -42,20 +44,35 @@
 
 	const classes = $derived(useToggleButtonGroupTheme(theme));
 	const id = $props.id();
-	// One tab stop for the whole group; arrows move between buttons (Radix ToggleGroup / Toolbar).
-	const navigation = useNavigation({
-		orientation: 'horizontal',
-		loop: true,
-		id,
-		enableHoverFocus: false
-	});
-
 	const pressed = $derived.by(() => {
 		const current = valueState.value as string[] | string | undefined;
 		if (Array.isArray(current)) return current;
 		return current === undefined ? [] : [current];
 	});
 
+	// One tab stop for the whole group, on the first pressed enabled button (the first enabled one
+	// when nothing is pressed); arrows move between buttons (Radix ToggleGroup / Toolbar). The group
+	// element is never a tab stop, so Shift+Tab leaves it in one step and a disabled group has no
+	// tabbable element. Buttons that are `focusableWhenDisabled` stay in the arrow-key order.
+	const navigation = useNavigation({
+		orientation: () => orientation,
+		get loop() {
+			return loopFocus;
+		},
+		id,
+		enableHoverFocus: false,
+		focusableContainer: false,
+		disabledItemsFocusable: true,
+		defaultFocusedIndex: () => {
+			const index = items.findIndex(
+				(item) =>
+					pressed.includes(item.value) &&
+					(!(disabled || item.disabled) || item.focusableWhenDisabled)
+			);
+			return index === -1 ? null : index;
+		}
+	});
+
 	function getButtonProps(item: ToggleButtonGroupItem) {
 		// eslint-disable-next-line @typescript-eslint/no-unused-vars -- Strip the group keys before forwarding native toggle props.
 		const { value: _value, onValueChange: _onValueChange, ...props } = item;
@@ -78,9 +95,12 @@
 <div
 	role={type === 'single' ? 'radiogroup' : 'group'}
 	aria-label={label}
+	aria-orientation={type === 'single' ? orientation : undefined}
 	data-color={color}
 	data-type={type}
-	class={classes.root({ className, joined })}
+	data-orientation={orientation}
+	data-disabled={disabled ? '' : undefined}
+	class={classes.root({ className, joined, orientation })}
 	{@attach navigation.containerReference}
 	{...attachments}
 >

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

@@ -1,3 +1,3 @@
 export { default as ToggleButtonGroup } from './ToggleButtonGroup.svelte';
-export type { ToggleButtonGroupItem, ToggleButtonGroupItems, ToggleButtonGroupProps, ToggleButtonGroupType, ToggleButtonGroupValue } from './toggleButtonGroup.props.js';
+export type { ToggleButtonGroupItem, ToggleButtonGroupItems, ToggleButtonGroupOrientation, ToggleButtonGroupProps, ToggleButtonGroupType, ToggleButtonGroupValue } from './toggleButtonGroup.props.js';
 export { toggleButtonGroupTheme, setToggleButtonGroupTheme, useToggleButtonGroupTheme, type ToggleButtonGroupTheme, type ToggleButtonGroupThemeProps } from './toggleButtonGroup.theme.js';

package/dist/components/ToggleButtonGroup/toggleButtonGroup.mcp.d.ts

@@ -1 +1 @@
-export declare const toggleButtonGroupDescription = "\n# ToggleButtonGroup Component\n\nToggleButtonGroup renders an ordered list of ToggleButton items and exposes the pressed values as one bindable value.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\tlet formatting = $state(['bold']);\n</script>\n\n<ToggleButtonGroup\n\tbind:value={formatting}\n\tlabel=\"Text formatting\"\n\tcolor=\"neutral\"\n\titems={[\n\t\t{ value: 'bold', children: 'Bold' },\n\t\t{ value: 'italic', children: 'Italic' },\n\t\t{ value: 'underline', children: 'Underline' }\n\t]}\n/>\n```\n\n## Props\n\n- **items**: ToggleButtonGroupItem[] (required) - Ordered button configurations. Each item carries a unique `value` plus ToggleButton props (no `variant`, `color`, or `size`; pressed state lives on the group value).\n- **label**: string (required) - Accessible name for the group.\n- **value**: string[] | string | undefined (bindable) - The only pressed-state source. `type=\"multiple\"` holds every pressed value as an array; `type=\"single\"` holds the checked value.\n- **defaultValue**: same shape as value - Initial pressed state when value is omitted.\n- **onValueChange**: (value) => void - Called once with the updated group value after a toggle.\n- **size**: 'small' | 'normal' | 'large' - Applied to every item.\n- **color**: Colors - Applied to every item.\n- **variant**: 'outline' | 'ghost' - Applied to every item. Defaults to 'ghost'.\n- **disabled**: boolean - Disables every item.\n- **joined**: boolean (default: false) - Renders the buttons as contiguous segments.\n- **type**: 'single' | 'multiple' (default: 'multiple') - `'multiple'` lets any number of buttons be pressed (`role=\"group\"`, `aria-pressed`) and its value is a `string[]`. `'single'` makes the selection exclusive: the value is a single string, the root becomes `role=\"radiogroup\"`, each button `role=\"radio\"` with `aria-checked`, pressing one clears the others, and the checked radio cannot be unpressed.\n- **class**: string - Additional CSS classes for the root.\n- **theme**: ToggleButtonGroupThemeProps - Theme overrides.\n\n## Examples\n\n### Icon Toolbar\n\n```svelte\n<ToggleButtonGroup\n\tbind:value={formatting}\n\tlabel=\"Text formatting\"\n\titems={[\n\t\t{ value: 'bold', prefix: textBIcon, label: 'Bold' },\n\t\t{ value: 'italic', prefix: textItalicIcon, label: 'Italic' },\n\t\t{ value: 'underline', prefix: textUnderlineIcon, label: 'Underline' }\n\t]}\n/>\n```\n\n### Joined Segments\n\n```svelte\n<ToggleButtonGroup\n\tjoined\n\tvariant=\"outline\"\n\tcolor=\"neutral\"\n\tlabel=\"Text formatting\"\n\tvalue={['bold']}\n\titems={[\n\t\t{ value: 'bold', prefix: textBIcon, label: 'Bold' },\n\t\t{ value: 'italic', prefix: textItalicIcon, label: 'Italic' },\n\t\t{ value: 'underline', prefix: textUnderlineIcon, label: 'Underline' }\n\t]}\n/>\n```\n\n### Single Selection (radio group)\n\n```svelte\n<script lang=\"ts\">\n\tlet alignment = $state('left');\n</script>\n\n<ToggleButtonGroup\n\ttype=\"single\"\n\tlabel=\"Alignment\"\n\tbind:value={alignment}\n\titems={[\n\t\t{ value: 'left', children: 'Left' },\n\t\t{ value: 'center', children: 'Center' },\n\t\t{ value: 'right', children: 'Right' }\n\t]}\n/>\n```\n\n### Change Handler\n\n```svelte\n<ToggleButtonGroup\n\tlabel=\"Density options\"\n\titems={[\n\t\t{ value: 'compact', children: 'Compact' },\n\t\t{ value: 'comfortable', children: 'Comfortable' }\n\t]}\n\tonValueChange={(value) => {\n\t\tconsole.log(value);\n\t}}\n/>\n```\n\n## Theme\n\n- **root**: Main button group container styles.\n\n## Accessibility\n\n- `type=\"multiple\"`: the root is `role=\"group\"` named by `label`; each ToggleButton exposes its independent state through `aria-pressed`.\n- `type=\"single\"`: the root is `role=\"radiogroup\"`; buttons are `role=\"radio\"` with `aria-checked`.\n- The group is a single tab stop (roving tabindex): Tab enters it, ArrowLeft / ArrowRight move between buttons (looping, mirrored in RTL), Home / End jump to the first / last, Space or Enter toggles the focused button.\n- Prefer SegmentedControl for a visually segmented exclusive choice; use `type=\"single\"` when you want toggle-button styling with exclusive semantics.\n\n## Theme example\n\n```svelte\n<ToggleButtonGroup\n\tlabel=\"Options\"\n\titems={items}\n\ttheme={{\n\t\troot: {\n\t\t\tbase: 'flex items-center gap-1'\n\t\t}\n\t}}\n/>\n```\n";
+export declare const toggleButtonGroupDescription = "\n# ToggleButtonGroup Component\n\nToggleButtonGroup renders an ordered list of ToggleButton items and exposes the pressed values as one bindable value.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n\tlet formatting = $state(['bold']);\n</script>\n\n<ToggleButtonGroup\n\tbind:value={formatting}\n\tlabel=\"Text formatting\"\n\tcolor=\"neutral\"\n\titems={[\n\t\t{ value: 'bold', children: 'Bold' },\n\t\t{ value: 'italic', children: 'Italic' },\n\t\t{ value: 'underline', children: 'Underline' }\n\t]}\n/>\n```\n\n## Props\n\n- **items**: ToggleButtonGroupItem[] (required) - Ordered button configurations. Each item carries a unique `value` plus ToggleButton props (no `variant`, `color`, or `size`; pressed state lives on the group value).\n- **label**: string (required) - Accessible name for the group.\n- **value**: string[] | string | undefined (bindable) - The only pressed-state source. `type=\"multiple\"` holds every pressed value as an array; `type=\"single\"` holds the checked value.\n- **defaultValue**: same shape as value - Initial pressed state when value is omitted.\n- **onValueChange**: (value) => void - Called once with the updated group value after a toggle.\n- **size**: 'small' | 'normal' | 'large' - Applied to every item.\n- **color**: Colors - Applied to every item.\n- **variant**: 'outline' | 'ghost' - Applied to every item. Defaults to 'ghost'.\n- **disabled**: boolean - Disables every item. A disabled group has no tab stop, unless an item sets `focusableWhenDisabled`.\n- **joined**: boolean (default: false) - Renders the buttons as contiguous segments.\n- **orientation**: 'horizontal' | 'vertical' (default: 'horizontal') - Axis of the group. Horizontal lays the buttons out in a row and moves with ArrowLeft / ArrowRight; vertical stacks them (joined segments join top to bottom) and moves with ArrowUp / ArrowDown. Keys of the other axis are ignored. Reflected as `data-orientation`; a `type=\"single\"` group (radiogroup) also sets `aria-orientation`, the `group` role of a multiple group never does.\n- **loopFocus**: boolean (default: true) - Whether the arrow keys wrap from the last button to the first and back. False stops focus at the ends (Home / End still jump).\n- **type**: 'single' | 'multiple' (default: 'multiple') - `'multiple'` lets any number of buttons be pressed (`role=\"group\"`, `aria-pressed`) and its value is a `string[]`. `'single'` makes the selection exclusive: the value is a single string, the root becomes `role=\"radiogroup\"`, each button `role=\"radio\"` with `aria-checked`, pressing one clears the others, and the checked radio cannot be unpressed.\n- **class**: string - Additional CSS classes for the root.\n- **theme**: ToggleButtonGroupThemeProps - Theme overrides.\n\n## Examples\n\n### Icon Toolbar\n\n```svelte\n<ToggleButtonGroup\n\tbind:value={formatting}\n\tlabel=\"Text formatting\"\n\titems={[\n\t\t{ value: 'bold', prefix: textBIcon, label: 'Bold' },\n\t\t{ value: 'italic', prefix: textItalicIcon, label: 'Italic' },\n\t\t{ value: 'underline', prefix: textUnderlineIcon, label: 'Underline' }\n\t]}\n/>\n```\n\n### Joined Segments\n\n```svelte\n<ToggleButtonGroup\n\tjoined\n\tvariant=\"outline\"\n\tcolor=\"neutral\"\n\tlabel=\"Text formatting\"\n\tvalue={['bold']}\n\titems={[\n\t\t{ value: 'bold', prefix: textBIcon, label: 'Bold' },\n\t\t{ value: 'italic', prefix: textItalicIcon, label: 'Italic' },\n\t\t{ value: 'underline', prefix: textUnderlineIcon, label: 'Underline' }\n\t]}\n/>\n```\n\n### Single Selection (radio group)\n\n```svelte\n<script lang=\"ts\">\n\tlet alignment = $state('left');\n</script>\n\n<ToggleButtonGroup\n\ttype=\"single\"\n\tlabel=\"Alignment\"\n\tbind:value={alignment}\n\titems={[\n\t\t{ value: 'left', children: 'Left' },\n\t\t{ value: 'center', children: 'Center' },\n\t\t{ value: 'right', children: 'Right' }\n\t]}\n/>\n```\n\n### Change Handler\n\n```svelte\n<ToggleButtonGroup\n\tlabel=\"Density options\"\n\titems={[\n\t\t{ value: 'compact', children: 'Compact' },\n\t\t{ value: 'comfortable', children: 'Comfortable' }\n\t]}\n\tonValueChange={(value) => {\n\t\tconsole.log(value);\n\t}}\n/>\n```\n\n## Theme\n\n- **root**: Main button group container styles.\n\n## Accessibility\n\n- `type=\"multiple\"`: the root is `role=\"group\"` named by `label`; each ToggleButton exposes its independent state through `aria-pressed`.\n- `type=\"single\"`: the root is `role=\"radiogroup\"`; buttons are `role=\"radio\"` with `aria-checked`.\n- The group is a single tab stop (roving tabindex), and the group element itself is not focusable, so Shift+Tab leaves the group in one step. Tab lands on the first pressed enabled button, or the first enabled button when nothing is pressed. ArrowLeft / ArrowRight (ArrowUp / ArrowDown when `orientation=\"vertical\"`) move between buttons (looping unless `loopFocus={false}`, mirrored in RTL), Home / End jump to the first / last, Space or Enter toggles the focused button. Alt, Ctrl or Meta with an arrow is left to the browser.\n- An item with `focusableWhenDisabled` that is disabled stays in the arrow-key order and keeps the tab stop reachable, announced with `aria-disabled`; it cannot be toggled.\n- Prefer SegmentedControl for a visually segmented exclusive choice; use `type=\"single\"` when you want toggle-button styling with exclusive semantics.\n\n## Theme example\n\n```svelte\n<ToggleButtonGroup\n\tlabel=\"Options\"\n\titems={items}\n\ttheme={{\n\t\troot: {\n\t\t\tbase: 'flex items-center gap-1'\n\t\t}\n\t}}\n/>\n```\n";

package/dist/components/ToggleButtonGroup/toggleButtonGroup.mcp.js

@@ -32,8 +32,10 @@ ToggleButtonGroup renders an ordered list of ToggleButton items and exposes the
 - **size**: 'small' | 'normal' | 'large' - Applied to every item.
 - **color**: Colors - Applied to every item.
 - **variant**: 'outline' | 'ghost' - Applied to every item. Defaults to 'ghost'.
-- **disabled**: boolean - Disables every item.
+- **disabled**: boolean - Disables every item. A disabled group has no tab stop, unless an item sets \`focusableWhenDisabled\`.
 - **joined**: boolean (default: false) - Renders the buttons as contiguous segments.
+- **orientation**: 'horizontal' | 'vertical' (default: 'horizontal') - Axis of the group. Horizontal lays the buttons out in a row and moves with ArrowLeft / ArrowRight; vertical stacks them (joined segments join top to bottom) and moves with ArrowUp / ArrowDown. Keys of the other axis are ignored. Reflected as \`data-orientation\`; a \`type="single"\` group (radiogroup) also sets \`aria-orientation\`, the \`group\` role of a multiple group never does.
+- **loopFocus**: boolean (default: true) - Whether the arrow keys wrap from the last button to the first and back. False stops focus at the ends (Home / End still jump).
 - **type**: 'single' | 'multiple' (default: 'multiple') - \`'multiple'\` lets any number of buttons be pressed (\`role="group"\`, \`aria-pressed\`) and its value is a \`string[]\`. \`'single'\` makes the selection exclusive: the value is a single string, the root becomes \`role="radiogroup"\`, each button \`role="radio"\` with \`aria-checked\`, pressing one clears the others, and the checked radio cannot be unpressed.
 - **class**: string - Additional CSS classes for the root.
 - **theme**: ToggleButtonGroupThemeProps - Theme overrides.
@@ -113,7 +115,8 @@ ToggleButtonGroup renders an ordered list of ToggleButton items and exposes the
 
 - \`type="multiple"\`: the root is \`role="group"\` named by \`label\`; each ToggleButton exposes its independent state through \`aria-pressed\`.
 - \`type="single"\`: the root is \`role="radiogroup"\`; buttons are \`role="radio"\` with \`aria-checked\`.
-- The group is a single tab stop (roving tabindex): Tab enters it, ArrowLeft / ArrowRight move between buttons (looping, mirrored in RTL), Home / End jump to the first / last, Space or Enter toggles the focused button.
+- The group is a single tab stop (roving tabindex), and the group element itself is not focusable, so Shift+Tab leaves the group in one step. Tab lands on the first pressed enabled button, or the first enabled button when nothing is pressed. ArrowLeft / ArrowRight (ArrowUp / ArrowDown when \`orientation="vertical"\`) move between buttons (looping unless \`loopFocus={false}\`, mirrored in RTL), Home / End jump to the first / last, Space or Enter toggles the focused button. Alt, Ctrl or Meta with an arrow is left to the browser.
+- An item with \`focusableWhenDisabled\` that is disabled stays in the arrow-key order and keeps the tab stop reachable, announced with \`aria-disabled\`; it cannot be toggled.
 - Prefer SegmentedControl for a visually segmented exclusive choice; use \`type="single"\` when you want toggle-button styling with exclusive semantics.
 
 ## Theme example

package/dist/components/ToggleButtonGroup/toggleButtonGroup.props.d.ts

@@ -2,6 +2,7 @@ import type { Sizes, Colors } from '../../types/theme.js';
 import type { WithAttachments, WithoutAttachments } from '../../types/props.js';
 import type { ToggleButtonProps, ToggleButtonVariant } from '../ToggleButton/index.js';
 import type { ToggleButtonGroupThemeProps } from './toggleButtonGroup.theme.js';
+export type ToggleButtonGroupOrientation = 'horizontal' | 'vertical';
 export type ToggleButtonGroupType = 'single' | 'multiple';
 export type ToggleButtonGroupItem = Omit<WithoutAttachments<ToggleButtonProps>, 'value' | 'defaultValue' | 'variant' | 'color' | 'size'> & {
     /** Value identifying this button inside the group value. Must be unique. */
@@ -23,10 +24,27 @@ export type ToggleButtonGroupProps<Items extends ToggleButtonGroupItems = Toggle
     color?: Colors;
     /** Visual variant applied to every button in the group. */
     variant?: ToggleButtonVariant;
-    /** When true, disables all buttons in the group. */
+    /**
+     * When true, disables all buttons in the group. A disabled group has no tab stop, unless an
+     * item sets `focusableWhenDisabled`.
+     */
     disabled?: boolean;
     /** When true, renders the buttons as contiguous segments. */
     joined?: boolean;
+    /**
+     * Axis of the group: `'horizontal'` lays the buttons out in a row and moves between them with
+     * ArrowLeft and ArrowRight; `'vertical'` stacks them and uses ArrowUp and ArrowDown. Keys of
+     * the other axis are ignored. Exposed as `data-orientation`; a `type="single"` group (`radiogroup`)
+     * also sets `aria-orientation`, the `group` role of a multiple group never does.
+     * @default 'horizontal'
+     */
+    orientation?: ToggleButtonGroupOrientation;
+    /**
+     * Whether the arrow keys wrap from the last button to the first and back. When false, focus
+     * stops at the ends.
+     * @default true
+     */
+    loopFocus?: boolean;
     /**
      * `'multiple'` (default): any number of buttons can be pressed (`aria-pressed`).
      * `'single'`: at most one is checked at a time, exposed as a radio group.

package/dist/components/ToggleButtonGroup/toggleButtonGroup.theme.d.ts

@@ -1,27 +1,39 @@
 import { type InferComponentTheme } from '../../utils/cva/index.js';
 export declare const toggleButtonGroupTheme: {
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
+        orientation: {
+            horizontal: string;
+            vertical: string;
+        };
         joined: {
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 };
 export type ToggleButtonGroupTheme = typeof toggleButtonGroupTheme;
 export type ToggleButtonGroupThemeProps = InferComponentTheme<ToggleButtonGroupTheme>;
 export declare const setToggleButtonGroupTheme: (theme: InferComponentTheme<{
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
+        orientation: {
+            horizontal: string;
+            vertical: string;
+        };
         joined: {
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 }>) => void;
-export declare const useToggleButtonGroupTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
+export declare const useToggleButtonGroupTheme: import("../../utils/cva/theme.ts").UseComponentTheme<{
+    root: (props?: (import("../../utils/cva/types.ts").CVAVariantSchema<{
+        orientation: {
+            horizontal: string;
+            vertical: string;
+        };
         joined: {
             true: string;
             false: string;
         };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    }> & import("../../utils/cva/types.ts").CVAClassProp) | undefined) => string;
 }>;

package/dist/components/ToggleButtonGroup/toggleButtonGroup.theme.js

@@ -1,14 +1,33 @@
 import { setComponentTheme, useComponentTheme } from '../../utils/cva/index.js';
 import { cva } from '../../utils/cva/index.js';
 const defaultToggleButtonGroup = cva({
-    base: 'flex items-center',
+    base: 'flex',
     variants: {
+        orientation: {
+            horizontal: 'flex-row items-center',
+            vertical: 'flex-col items-stretch'
+        },
         joined: {
-            true: 'first-child:rounded-r-none last-child:rounded-l-none not-first-not-last-child:rounded-none not-first-child:-ml-px [&>*:focus-visible]:z-10 [&>*]:active:translate-y-0',
+            // Joined segments overlap by a pixel: a pressed segment sits above its neighbours so its
+            // border is not cut by theirs, and a focused one above that.
+            true: '[&>[data-checked=true]]:z-1 [&>*:focus-visible]:z-10 [&>*]:active:translate-y-0',
             false: 'gap-xs'
         }
     },
+    compoundVariants: [
+        {
+            joined: true,
+            orientation: 'horizontal',
+            class: 'first-child:rounded-r-none last-child:rounded-l-none not-first-not-last-child:rounded-none not-first-child:-ml-px'
+        },
+        {
+            joined: true,
+            orientation: 'vertical',
+            class: 'first-child:rounded-b-none last-child:rounded-t-none not-first-not-last-child:rounded-none not-first-child:-mt-px'
+        }
+    ],
     defaultVariants: {
+        orientation: 'horizontal',
         joined: false
     }
 });

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/ToggleMenu/toggleMenu.theme.d.ts

@@ -1,21 +1,21 @@
 import { type InferComponentTheme } from '../../utils/cva/index.js';
 export declare const toggleMenuTheme: {
-    root: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    rail: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    unit: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    more: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    root: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    rail: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    unit: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    more: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
 };
 export type ToggleMenuTheme = typeof toggleMenuTheme;
 export type ToggleMenuThemeProps = InferComponentTheme<ToggleMenuTheme>;
 export declare const setToggleMenuTheme: (theme: InferComponentTheme<{
-    root: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    rail: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    unit: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    more: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    root: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    rail: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    unit: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    more: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
 }>) => void;
-export declare const useToggleMenuTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
-    root: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    rail: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    unit: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    more: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
+export declare const useToggleMenuTheme: import("../../utils/cva/theme.ts").UseComponentTheme<{
+    root: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    rail: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    unit: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
+    more: (props?: import("../../utils/cva/types.ts").CVAClassProp | undefined) => string;
 }>;