@human-kit/svelte-components 1.0.0-alpha.10 → 1.0.0-alpha.12

package/dist/combobox/item/combobox-listboxitem.svelte

@@ -56,6 +56,7 @@
 
 	// Normalized input for filtering comparison
 	const normalizedInput = $derived(ctx.inputValue.trim().toLowerCase());
+	const isDisabled = $derived(Boolean(props.disabled) || ctx.isDisabled);
 
 	// Automatic filtering: if text is not resolved yet, keep item visible until mount resolves it.
 	const isVisible = $derived(
@@ -66,6 +67,7 @@
 
 	// Virtual focus from ComboBox context
 	const isFocused = $derived(ctx.focusedItemId === id);
+	const isFocusVisible = $derived(isFocused && ctx.isFocusVisible);
 
 	// Generate unique ID using instanceId
 	const uniqueId = $derived(`combobox-item-${ctx.instanceId}-${id}`);
@@ -76,14 +78,15 @@
 	// Reactive registration: register when visible, unregister when hidden
 	$effect(() => {
 		const visible = isVisible;
+		const disabled = isDisabled;
 		const label = effectiveTextValue || String(id);
 		const itemId = id;
 
 		untrack(() => {
-			if (visible && !isRegistered) {
+			if (visible && !disabled && !isRegistered) {
 				ctx.registerItem(itemId, label);
 				isRegistered = true;
-			} else if (!visible && isRegistered) {
+			} else if ((!visible || disabled) && isRegistered) {
 				ctx.unregisterItem(itemId);
 				isRegistered = false;
 			}
@@ -108,8 +111,14 @@
 
 	// Custom select handler that uses ComboBox context
 	function handleSelect(itemId: string | number, label: string) {
+		ctx.setFocusedItemId(itemId);
 		ctx.select(itemId, label);
 	}
+
+	function handleHoverStart(itemId: string | number) {
+		ctx.setFocusVisible(false);
+		ctx.setFocusedItemId(itemId);
+	}
 </script>
 
 {#if isVisible}
@@ -120,8 +129,10 @@
 		customId={uniqueId}
 		disableFocusHandling={true}
 		isFocusedOverride={isFocused}
+		isFocusVisibleOverride={isFocusVisible}
 		onItemSelect={handleSelect}
 		onResolvedTextValue={handleResolvedTextValue}
+		onItemHoverStart={handleHoverStart}
 		scrollOnFocus={true}
 		isParentDisabled={ctx.isDisabled}
 	/>

package/dist/combobox/popover/README.md

@@ -7,7 +7,21 @@
 Name: `ComboBox.Popover`  
 Description: Floating container for combobox options. Internally composes `Popover.Root` and `Popover.Content` in non-modal mode.
 
-| Prop       | Type      | Default     | Description                                 |
-| ---------- | --------- | ----------- | ------------------------------------------- |
-| `class`    | `string`  | `''`        | CSS class names for the floating panel.     |
-| `children` | `Snippet` | `undefined` | Popover content, typically `ComboBox.List`. |
+| Prop                           | Type                               | Default          | Description                                                                |
+| ------------------------------ | ---------------------------------- | ---------------- | -------------------------------------------------------------------------- |
+| `offset`                       | `number`                           | `8`              | Main-axis offset from the combobox trigger.                                |
+| `placement`                    | `ExtendedPlacement`                | `'bottom-start'` | Preferred floating placement.                                              |
+| `shouldFlip`                   | `boolean`                          | `true`           | Enables automatic fallback placement when space is limited.                |
+| `boundaryElement`              | `Element \| null`                  | `null`           | Optional boundary element for positioning constraints.                     |
+| `class`                        | `string`                           | `''`             | CSS class names for the floating panel.                                    |
+| `children`                     | `Snippet`                          | `undefined`      | Popover content, typically `ComboBox.List`.                                |
+| `isNonModal`                   | `boolean`                          | `true`           | Controls whether the popover behaves as a non-modal overlay.               |
+| `shouldCloseOnInteractOutside` | `boolean`                          | `true`           | Closes when interacting outside the panel.                                 |
+| `shouldCloseOnEscape`          | `boolean`                          | `true`           | Closes on Escape key press.                                                |
+| `shouldCloseOnBlur`            | `boolean`                          | `true`           | Closes on focus leaving trigger/content in the combobox interaction model. |
+| `initialFocus`                 | `FocusTrapOptions['initialFocus']` | `undefined`      | Initial focus target when modal focus trapping is enabled.                 |
+
+## Notes
+
+- `ComboBox.Popover` forwards all `Popover.Content` configuration props except the controlled open-state wiring (`open`, `triggerRef`, and `onOpenChange`).
+- The default placement is `bottom-start` to match the combobox input.

package/dist/combobox/popover/combobox-popover-props-test.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import ComboBox from '../index';
+	import type { PopoverContent } from '../../popover';
+
+	type Props = {
+		offset?: number;
+		placement?: ComponentProps<typeof PopoverContent>['placement'];
+		shouldFlip?: boolean;
+		shouldCloseOnEscape?: boolean;
+	};
+
+	let {
+		offset = 8,
+		placement = 'bottom-start',
+		shouldFlip = true,
+		shouldCloseOnEscape = true
+	}: Props = $props();
+
+	const countries = [
+		{ id: 'ar', name: 'Argentina' },
+		{ id: 'br', name: 'Brazil' },
+		{ id: 'ca', name: 'Canada' }
+	];
+</script>
+
+<ComboBox.Root trigger="press">
+	<ComboBox.Input placeholder="Search countries..." />
+	<ComboBox.Trigger />
+
+	<ComboBox.Popover {offset} {placement} {shouldFlip} {shouldCloseOnEscape}>
+		<ComboBox.List emptyPlaceholder="No countries found">
+			{#each countries as country (country.id)}
+				<ComboBox.Item id={country.id} textValue={country.name}>{country.name}</ComboBox.Item>
+			{/each}
+		</ComboBox.List>
+	</ComboBox.Popover>
+</ComboBox.Root>

package/dist/combobox/popover/combobox-popover-props-test.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'svelte';
+import type { PopoverContent } from '../../popover';
+type Props = {
+    offset?: number;
+    placement?: ComponentProps<typeof PopoverContent>['placement'];
+    shouldFlip?: boolean;
+    shouldCloseOnEscape?: boolean;
+};
+declare const ComboboxPopoverPropsTest: import("svelte").Component<Props, {}, "">;
+type ComboboxPopoverPropsTest = ReturnType<typeof ComboboxPopoverPropsTest>;
+export default ComboboxPopoverPropsTest;

package/dist/combobox/popover/combobox-popover.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+	import type { ComponentProps, Snippet } from 'svelte';
 	import { useComboBoxContext } from '../root/context';
 	import { Popover } from '../../popover';
 	import { focusWithModality, type InputModality } from '../../primitives/input-modality';
@@ -9,12 +9,22 @@
 	 * ComboBox.Popover - Just the floating container wrapper.
 	 * Should contain ComboBox.ListBox as a child.
 	 */
-	type ComboBoxPopoverProps = {
-		class?: string;
+	type ComboBoxPopoverProps = Omit<
+		ComponentProps<typeof Popover.Content>,
+		'open' | 'triggerRef' | 'onOpenChange' | 'children'
+	> & {
 		children?: Snippet;
 	};
 
-	let { class: className = '', children }: ComboBoxPopoverProps = $props();
+	let {
+		class: className = '',
+		children,
+		placement = 'bottom-start',
+		isNonModal = true,
+		shouldCloseOnEscape = true,
+		shouldCloseOnBlur = true,
+		...contentProps
+	}: ComboBoxPopoverProps = $props();
 
 	const ctx = useComboBoxContext();
 	let restoreListboxMaxHeight: (() => void) | undefined;
@@ -168,15 +178,32 @@
 			ctx.inputRef?.focus();
 		}
 	});
+
+	$effect(() => {
+		ctx.setShouldCloseOnEscape(shouldCloseOnEscape);
+		return () => {
+			ctx.setShouldCloseOnEscape(true);
+		};
+	});
+
+	$effect(() => {
+		ctx.setShouldCloseOnBlur(shouldCloseOnBlur);
+		return () => {
+			ctx.setShouldCloseOnBlur(true);
+		};
+	});
 </script>
 
 <Popover.Root open={ctx.isOpen} triggerRef={ctx.triggerRef} onOpenChange={handleOpenChange}>
 	<Popover.Content
-		isNonModal={true}
-		placement="bottom-start"
+		{isNonModal}
+		{placement}
+		{shouldCloseOnEscape}
+		{shouldCloseOnBlur}
 		class={className}
 		onmousedown={handleMouseDown}
 		onwheel={handleWheel}
+		{...contentProps}
 	>
 		{#if children}
 			{@render children()}

package/dist/combobox/popover/combobox-popover.svelte.d.ts

@@ -1,10 +1,10 @@
-import type { Snippet } from 'svelte';
+import type { ComponentProps, Snippet } from 'svelte';
+import { Popover } from '../../popover';
 /**
  * ComboBox.Popover - Just the floating container wrapper.
  * Should contain ComboBox.ListBox as a child.
  */
-type ComboBoxPopoverProps = {
-    class?: string;
+type ComboBoxPopoverProps = Omit<ComponentProps<typeof Popover.Content>, 'open' | 'triggerRef' | 'onOpenChange' | 'children'> & {
     children?: Snippet;
 };
 declare const ComboboxPopover: import("svelte").Component<ComboBoxPopoverProps, {}, "">;

package/dist/combobox/root/combobox-multiselect-test.svelte

@@ -7,6 +7,7 @@
 		onValueChange?: (value: (string | number)[]) => void;
 		trigger?: 'focus' | 'input' | 'press';
 		closeOnSelect?: boolean;
+		disabledIds?: string[];
 	}
 
 	let {
@@ -20,7 +21,8 @@
 		value = $bindable([]),
 		onValueChange,
 		trigger = 'press',
-		closeOnSelect = false
+		closeOnSelect = false,
+		disabledIds = []
 	}: Props = $props();
 
 	function handleChange(newValue: string | number | (string | number)[] | undefined) {
@@ -53,7 +55,7 @@
 	<ComboBox.Popover>
 		<ComboBox.List>
 			{#each items as item (item.id)}
-				<ComboBox.Item id={item.id} textValue={item.name}>
+				<ComboBox.Item id={item.id} textValue={item.name} disabled={disabledIds.includes(item.id)}>
 					{item.name}
 					<ComboBox.ItemIndicator />
 				</ComboBox.Item>

package/dist/combobox/root/combobox-multiselect-test.svelte.d.ts

@@ -7,6 +7,7 @@ interface Props {
     onValueChange?: (value: (string | number)[]) => void;
     trigger?: 'focus' | 'input' | 'press';
     closeOnSelect?: boolean;
+    disabledIds?: string[];
 }
 declare const ComboboxMultiselectTest: import("svelte").Component<Props, {}, "value">;
 type ComboboxMultiselectTest = ReturnType<typeof ComboboxMultiselectTest>;

package/dist/combobox/root/combobox.svelte

@@ -107,6 +107,8 @@
 	let focusWithin = $state(false);
 	let focusVisible = $state(false);
 	let popoverPointerDownPending = $state(false);
+	let shouldCloseOnEscapeState = $state(true);
+	let shouldCloseOnBlurState = $state(true);
 
 	// Flag to control whether inputValue should be used for filtering
 	// When false, all items are shown regardless of inputValue
@@ -379,6 +381,9 @@
 	// Use navigation hook methods for keyboard navigation
 	function selectFocusedItem() {
 		if (navigation.focusedId !== null) {
+			if (listboxCtxRef?.isDisabled(navigation.focusedId)) {
+				return;
+			}
 			const label = navigation.itemLabels.get(navigation.focusedId) ?? String(navigation.focusedId);
 			selectItem(navigation.focusedId, label);
 		}
@@ -407,6 +412,9 @@
 			return;
 		}
 
+		if (!shouldCloseOnBlurState) {
+			return;
+		}
 		// Close popover first to prevent flash of options when clearing input
 		closePopover();
 
@@ -611,16 +619,16 @@
 				}
 				break;
 			case 'Escape':
-				if (currentIsOpen) {
+				if (currentIsOpen && shouldCloseOnEscapeState) {
 					closePopover(true); // Keep focus on input after Escape
 					// Stop propagation so parent dialogs don't also close
 					event.stopPropagation();
 					event.stopImmediatePropagation();
+					handleInputBlur();
+					// Escape is a keyboard-only path, so focus-visible remains enabled for the input.
+					focusVisible = true;
+					event.preventDefault();
 				}
-				handleInputBlur();
-				// Escape is a keyboard-only path, so focus-visible remains enabled for the input.
-				focusVisible = true;
-				event.preventDefault();
 				break;
 			case 'Backspace':
 				// In multiple mode, remove last tag when input is empty
@@ -668,6 +676,15 @@
 		get isPending() {
 			return isPending;
 		},
+		get isFocusVisible() {
+			return focusVisible;
+		},
+		get shouldCloseOnEscape() {
+			return shouldCloseOnEscapeState;
+		},
+		get shouldCloseOnBlur() {
+			return shouldCloseOnBlurState;
+		},
 		get isReadOnly() {
 			return isReadOnly;
 		},
@@ -742,7 +759,13 @@
 		markPopoverPointerDown: () => {
 			popoverPointerDownPending = true;
 		},
-		consumePopoverPointerDown
+		consumePopoverPointerDown,
+		setShouldCloseOnEscape: (value: boolean) => {
+			shouldCloseOnEscapeState = value;
+		},
+		setShouldCloseOnBlur: (value: boolean) => {
+			shouldCloseOnBlurState = value;
+		}
 	};
 
 	setComboBoxContext(ctx);

package/dist/combobox/root/context.d.ts

@@ -22,6 +22,8 @@ export type ComboBoxContext<T extends object = object> = {
     isDisabled: boolean;
     /** Whether the combobox is pending async work */
     isPending: boolean;
+    /** Whether focus should currently be presented as keyboard-visible */
+    isFocusVisible: boolean;
     /** Whether the combobox is read-only */
     isReadOnly: boolean;
     /** Selection mode */
@@ -92,6 +94,14 @@ export type ComboBoxContext<T extends object = object> = {
     markPopoverPointerDown: () => void;
     /** Consume the pending popover-pointer marker. */
     consumePopoverPointerDown: () => boolean;
+    /** Whether Escape should close the popover. */
+    shouldCloseOnEscape: boolean;
+    /** Whether blur should close the popover. */
+    shouldCloseOnBlur: boolean;
+    /** Update whether Escape should close the popover. */
+    setShouldCloseOnEscape: (value: boolean) => void;
+    /** Update whether blur should close the popover. */
+    setShouldCloseOnBlur: (value: boolean) => void;
 };
 export declare function setComboBoxContext<T extends object = object>(ctx: ComboBoxContext<T>): void;
 export declare function getComboBoxContext<T extends object = object>(): ComboBoxContext<T> | undefined;

package/dist/hooks/use-virtual-focus.svelte.js

@@ -62,7 +62,9 @@ export function useVirtualFocus(options) {
             if (fullId && fullId.startsWith(prefix)) {
                 const rawId = fullId.substring(prefix.length);
                 const registeredId = itemIds.find((id) => String(id) === rawId);
-                orderedIds.push(registeredId ?? rawId);
+                if (registeredId !== undefined) {
+                    orderedIds.push(registeredId);
+                }
             }
         });
         cachedItemOrder = orderedIds;

package/dist/listbox/item/listbox-item.svelte

@@ -4,6 +4,7 @@
 	import { useListBoxContext } from '../root/context';
 	import { onMount, onDestroy } from 'svelte';
 	import {
+		focusWithModality,
 		shouldShowFocusVisible,
 		trackInteractionModality
 	} from '../../primitives/input-modality';
@@ -30,10 +31,14 @@
 		disableFocusHandling?: boolean;
 		/** Override the focused state. When provided, this value is used instead of internal focus tracking. */
 		isFocusedOverride?: boolean;
+		/** Override the focus-visible presentation state. */
+		isFocusVisibleOverride?: boolean;
 		/** Override the select behavior. When provided, called instead of default listbox selection. */
 		onItemSelect?: (id: string | number, label: string) => void;
 		/** Callback with resolved text value when mounted (from prop or rendered content). */
 		onResolvedTextValue?: (label: string) => void;
+		/** Callback when pointer hover should move logical focus to this item. */
+		onItemHoverStart?: (id: string | number, label: string) => void;
 		/** Whether to scroll this item into view when focused. Useful for virtual focus patterns. */
 		scrollOnFocus?: boolean;
 		/** Additional disabled state from parent. */
@@ -52,8 +57,10 @@
 		customId,
 		disableFocusHandling = false,
 		isFocusedOverride,
+		isFocusVisibleOverride,
 		onItemSelect,
 		onResolvedTextValue,
+		onItemHoverStart,
 		scrollOnFocus = false,
 		isParentDisabled = false,
 		pressed: pressedOverride,
@@ -66,9 +73,11 @@
 	let isSelected = $state(false);
 	let isFocused = $state(false);
 	let isFocusVisible = $state(false);
+	let listFocusVisible = $state(false);
 	let isHovered = $state(false);
 	let isPressed = $state(false);
 	let pressedKey: 'Enter' | 'Space' | null = $state(null);
+	let suppressNextFocusVisible = $state(false);
 
 	// Focus: use override if provided, otherwise use internal state
 	const isFocusedComputed = $derived(
@@ -82,12 +91,23 @@
 			? Boolean(pressedOverride) && !isDisabledComputed
 			: isPressed && !isDisabledComputed
 	);
+	const isFocusVisibleComputed = $derived(
+		isFocusVisibleOverride !== undefined ? isFocusVisibleOverride : isFocusVisible
+	);
+	const isActiveFocusVisible = $derived(
+		isFocusVisibleOverride !== undefined
+			? isFocusVisibleComputed
+			: isFocusedComputed && listFocusVisible
+	);
+	const showFocusVisible = $derived(isActiveFocusVisible && !isHovered);
+	const showHovered = $derived(isHovered && !isActiveFocusVisible);
 
 	// ID: use custom if provided, otherwise generate
 	const uniqueId = $derived(customId ?? `listbox-item-${id}`);
 
 	let unsubscribeSelection: (() => void) | null = null;
 	let unsubscribeFocus: (() => void) | null = null;
+	let unsubscribeFocusVisible: (() => void) | null = null;
 
 	function getResolvedTextValue() {
 		return textValue || elementRef?.textContent?.trim() || String(id);
@@ -109,6 +129,9 @@
 			unsubscribeFocus = listboxCtx.subscribeToFocus(id, (focused) => {
 				isFocused = focused;
 			});
+			unsubscribeFocusVisible = listboxCtx.subscribeToFocusVisible((visible) => {
+				listFocusVisible = visible;
+			});
 			listboxCtx.keyboardNav.updateItems();
 		}
 	});
@@ -117,6 +140,7 @@
 		listboxCtx.unregisterItem(id);
 		unsubscribeSelection?.();
 		unsubscribeFocus?.();
+		unsubscribeFocusVisible?.();
 	});
 
 	// Scroll into view when focused (if enabled)
@@ -140,6 +164,30 @@
 		pressedKey = null;
 	}
 
+	function applyPointerFocusState() {
+		suppressNextFocusVisible = true;
+		listboxCtx.setFocusVisible(false);
+		listboxCtx.setFocusedId(id);
+		listboxCtx.keyboardNav.setCurrentId(id);
+		if (elementRef) {
+			focusWithModality(elementRef, 'pointer');
+		}
+	}
+
+	function transferHoverFocus() {
+		const label = getResolvedTextValue();
+		if (onItemHoverStart) {
+			onItemHoverStart(id, label);
+		} else if (!disableFocusHandling) {
+			applyPointerFocusState();
+			requestAnimationFrame(() => {
+				if (isHovered && !isDisabledComputed) {
+					applyPointerFocusState();
+				}
+			});
+		}
+	}
+
 	function handleClick() {
 		if (isDisabledComputed) return;
 
@@ -150,25 +198,40 @@
 			onItemSelect(id, label);
 		} else {
 			listboxCtx.select(id);
-			listboxCtx.setFocusedId(id);
+		}
+
+		if (!disableFocusHandling) {
+			listboxCtx.keyboardNav.focusById(id);
 		}
 	}
 
 	function handleFocus() {
 		if (isDisabledComputed) return;
-		isFocusVisible = shouldShowFocusVisible(elementRef);
+		isFocusVisible = suppressNextFocusVisible ? false : shouldShowFocusVisible(elementRef);
+		suppressNextFocusVisible = false;
+		if (isFocusVisible) {
+			isHovered = false;
+		}
 		if (!disableFocusHandling) {
+			listboxCtx.setFocusVisible(isFocusVisible);
 			listboxCtx.setFocusedId(id);
 		}
 	}
 
 	function handleBlur() {
 		isFocusVisible = false;
+		if (!disableFocusHandling && listboxCtx.isFocused(id)) {
+			listboxCtx.setFocusVisible(false);
+			listboxCtx.setFocusedId(null);
+		}
 	}
 
 	function handlePointerDown(event: PointerEvent) {
 		trackInteractionModality(event, elementRef);
 		isFocusVisible = false;
+		if (!disableFocusHandling) {
+			listboxCtx.setFocusVisible(false);
+		}
 
 		if (isDisabledComputed) {
 			event.preventDefault();
@@ -194,6 +257,12 @@
 	function handlePointerEnter(event: PointerEvent) {
 		if (isDisabledComputed) return;
 
+		trackInteractionModality(event, elementRef);
+		if (!disableFocusHandling) {
+			listboxCtx.setFocusVisible(false);
+		}
+		transferHoverFocus();
+
 		if ((event.buttons & 1) === 1 && pressedKey === null) {
 			isPressed = true;
 		}
@@ -205,9 +274,15 @@
 		}
 	}
 
-	function handleMouseEnter() {
+	function handleMouseEnter(event: MouseEvent) {
 		if (!isDisabledComputed) {
+			trackInteractionModality(event, elementRef);
 			isHovered = true;
+			isFocusVisible = false;
+			if (!disableFocusHandling) {
+				listboxCtx.setFocusVisible(false);
+				transferHoverFocus();
+			}
 		}
 	}
 
@@ -222,7 +297,11 @@
 	function handleKeydown(event: KeyboardEvent) {
 		trackInteractionModality(event, elementRef);
 		if (isFocusedComputed) {
+			isHovered = false;
 			isFocusVisible = true;
+			if (!disableFocusHandling) {
+				listboxCtx.setFocusVisible(true);
+			}
 		}
 
 		const key =
@@ -270,6 +349,9 @@
 	function handleMouseDown(event: MouseEvent) {
 		trackInteractionModality(event, elementRef);
 		isFocusVisible = false;
+		if (!disableFocusHandling) {
+			listboxCtx.setFocusVisible(false);
+		}
 
 		// Prevent focus stealing when used in ComboBox (disableFocusHandling=true)
 		// This keeps the focus on the input while allowing click selection
@@ -311,8 +393,8 @@
 	data-selected={isSelected || undefined}
 	data-disabled={isDisabledComputed || undefined}
 	data-focused={isFocusedComputed || undefined}
-	data-focus-visible={isFocusVisible || undefined}
-	data-hovered={isHovered || undefined}
+	data-focus-visible={showFocusVisible || undefined}
+	data-hovered={showHovered || undefined}
 	data-pressed={isPressedComputed || undefined}
 	onpointerdown={handlePointerDown}
 	onpointerup={handlePointerUp}

package/dist/listbox/item/listbox-item.svelte.d.ts

@@ -20,10 +20,14 @@ type ListBoxItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'children'>
     disableFocusHandling?: boolean;
     /** Override the focused state. When provided, this value is used instead of internal focus tracking. */
     isFocusedOverride?: boolean;
+    /** Override the focus-visible presentation state. */
+    isFocusVisibleOverride?: boolean;
     /** Override the select behavior. When provided, called instead of default listbox selection. */
     onItemSelect?: (id: string | number, label: string) => void;
     /** Callback with resolved text value when mounted (from prop or rendered content). */
     onResolvedTextValue?: (label: string) => void;
+    /** Callback when pointer hover should move logical focus to this item. */
+    onItemHoverStart?: (id: string | number, label: string) => void;
     /** Whether to scroll this item into view when focused. Useful for virtual focus patterns. */
     scrollOnFocus?: boolean;
     /** Additional disabled state from parent. */

package/dist/listbox/root/context.d.ts

@@ -20,6 +20,8 @@ export type ListBoxContext = {
     isDisabled: (id: string | number) => boolean;
     /** Checks if an item is focused. */
     isFocused: (id: string | number) => boolean;
+    /** Whether keyboard focus-visible should be shown for the currently focused item. */
+    getFocusVisible: () => boolean;
     /** Keyboard navigation controller from the shared primitive. */
     keyboardNav: KeyboardNavigationReturn;
     /** Map of registered items with their metadata. */
@@ -45,10 +47,14 @@ export type ListBoxContext = {
     setSelection: (selection: Set<string | number>) => void;
     /** Sets the focused item ID. */
     setFocusedId: (id: string | number | null) => void;
+    /** Sets whether the focused item should render keyboard focus-visible. */
+    setFocusVisible: (visible: boolean) => void;
     /** Subscribes to selection changes for a specific item. Returns unsubscribe function. */
     subscribeToItem: (id: string | number, callback: (selected: boolean) => void) => () => void;
     /** Subscribes to focus changes for a specific item. Returns unsubscribe function. */
     subscribeToFocus: (id: string | number, callback: (focused: boolean) => void) => () => void;
+    /** Subscribes to focus-visible state changes. Returns unsubscribe function. */
+    subscribeToFocusVisible: (callback: (visible: boolean) => void) => () => void;
     /** Returns the next item ID respecting loop setting, or null if at end. */
     getNextItemId: (currentId: string | number | null) => string | number | null;
     /** Returns the previous item ID respecting loop setting, or null if at start. */

package/dist/listbox/root/context.js

@@ -53,30 +53,30 @@ export function createListBoxContext(options = {}) {
     }
     let focusedId = null;
     const focusCallbacks = new Map();
+    let focusVisible = false;
+    const focusVisibleCallbacks = new Set();
     function getFocusedId() {
         return focusedId;
     }
     function isFocused(id) {
         return focusedId === id || String(focusedId) === String(id);
     }
-    function notifyFocus(id, focused) {
-        const callbacks = focusCallbacks.get(id);
-        if (callbacks) {
-            callbacks.forEach((cb) => cb(focused));
-        }
+    function getFocusVisible() {
+        return focusVisible;
     }
     function setFocusedId(newId) {
-        if (focusedId === newId)
-            return;
-        const previousId = focusedId;
         focusedId = newId;
-        if (previousId !== null) {
-            notifyFocus(previousId, false);
-        }
-        if (newId !== null) {
-            notifyFocus(newId, true);
+        for (const [id, callbacks] of focusCallbacks) {
+            const focused = newId !== null && (id === newId || String(id) === String(newId));
+            callbacks.forEach((callback) => callback(focused));
         }
     }
+    function setFocusVisible(visible) {
+        if (focusVisible === visible)
+            return;
+        focusVisible = visible;
+        focusVisibleCallbacks.forEach((callback) => callback(visible));
+    }
     function subscribeToFocus(id, callback) {
         if (!focusCallbacks.has(id)) {
             focusCallbacks.set(id, new Set());
@@ -93,6 +93,13 @@ export function createListBoxContext(options = {}) {
             }
         };
     }
+    function subscribeToFocusVisible(callback) {
+        focusVisibleCallbacks.add(callback);
+        callback(focusVisible);
+        return () => {
+            focusVisibleCallbacks.delete(callback);
+        };
+    }
     function subscribeToItem(id, callback) {
         if (!itemCallbacks.has(id)) {
             itemCallbacks.set(id, new Set());
@@ -221,6 +228,7 @@ export function createListBoxContext(options = {}) {
         isSelected,
         isDisabled,
         isFocused,
+        getFocusVisible,
         keyboardNav,
         items,
         registerItem,
@@ -232,8 +240,10 @@ export function createListBoxContext(options = {}) {
         selectAll,
         setSelection,
         setFocusedId,
+        setFocusVisible,
         subscribeToItem,
         subscribeToFocus,
+        subscribeToFocusVisible,
         getNextItemId,
         getPreviousItemId
     };

package/dist/listbox/root/listbox.svelte

@@ -1,10 +1,7 @@
 <script lang="ts" generics="T extends object = object">
 	import type { Snippet } from 'svelte';
 	import { createListBoxContext, type ListBoxContext } from './context';
-	import {
-		shouldShowFocusVisible,
-		trackInteractionModality
-	} from '../../primitives/input-modality';
+	import { trackInteractionModality } from '../../primitives/input-modality';
 
 	/**
 	 * Props for the ListBox component.
@@ -120,21 +117,16 @@
 	const hasItems = $derived(itemsArray.length > 0 || itemCount > 0);
 
 	let focusWithin = $state(false);
-	let focusVisible = $state(false);
 
 	function syncFocusWithin() {
 		focusWithin =
 			!!listboxElement &&
 			!!document.activeElement &&
 			listboxElement.contains(document.activeElement);
-		if (!focusWithin) {
-			focusVisible = false;
-		}
 	}
 
-	function handleFocusIn(event: FocusEvent) {
+	function handleFocusIn() {
 		focusWithin = true;
-		focusVisible = shouldShowFocusVisible(event.target as HTMLElement | null);
 	}
 
 	function handleFocusOut() {
@@ -143,13 +135,13 @@
 
 	function handleMouseDown(event: MouseEvent) {
 		trackInteractionModality(event, event.target as HTMLElement | null);
-		focusVisible = false;
+		ctx.setFocusVisible(false);
 	}
 
 	function handleKeyDown(event: KeyboardEvent) {
 		trackInteractionModality(event, event.target as HTMLElement | null);
 		if (focusWithin) {
-			focusVisible = true;
+			ctx.setFocusVisible(true);
 		}
 	}
 </script>
@@ -163,7 +155,6 @@
 	class={className}
 	tabindex="0"
 	data-focus-within={focusWithin || undefined}
-	data-focus-visible={focusVisible || undefined}
 	use:keyboardAction
 	onfocusin={handleFocusIn}
 	onfocusout={handleFocusOut}

package/dist/popover/content/popover-content.svelte

@@ -57,7 +57,7 @@
 	} & Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'children'>;
 
 	let {
-		offset = 8,
+		offset = 4,
 		placement = 'bottom',
 		shouldFlip = true,
 		boundaryElement = null,

package/dist/primitives/keyboard-navigation.d.ts

@@ -53,6 +53,7 @@ export type KeyboardNavigationReturn = {
     focusFirst: () => void;
     focusLast: () => void;
     focusById: (id: string | number) => void;
+    setCurrentId: (id: string | number | null) => void;
     /** Update items (call after DOM changes) */
     updateItems: () => void;
 };

package/dist/primitives/keyboard-navigation.js

@@ -130,6 +130,22 @@ export function createKeyboardNavigation(options = {}) {
             focusItem(element);
         }
     }
+    function setCurrentId(id) {
+        if (id === null) {
+            focusedId.set(null);
+            focusedElement.set(null);
+            onFocusChange?.(null, null);
+            return;
+        }
+        items = getItems();
+        const element = items.find((el) => {
+            const itemId = getItemId(el);
+            return itemId === id || String(itemId) === String(id);
+        });
+        focusedId.set(id);
+        focusedElement.set(element ?? null);
+        onFocusChange?.(id, element ?? null);
+    }
     function handleTypeahead(char) {
         if (!typeahead)
             return;
@@ -254,6 +270,7 @@ export function createKeyboardNavigation(options = {}) {
         focusFirst,
         focusLast,
         focusById,
+        setCurrentId,
         updateItems
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@human-kit/svelte-components",
-	"version": "1.0.0-alpha.10",
+	"version": "1.0.0-alpha.12",
 	"license": "MIT",
 	"type": "module",
 	"svelte": "./dist/index.js",