@human-kit/svelte-components 1.0.0-alpha.11 → 1.0.0-alpha.13

package/dist/combobox/input/combobox-input.svelte

@@ -113,6 +113,7 @@
 	aria-label={ariaLabel}
 	aria-labelledby={ariaLabelledby}
 	aria-describedby={ariaDescribedby}
+	autocomplete="off"
 	value={ctx.displayValue}
 	isDisabled={ctx.isDisabled}
 	isReadOnly={ctx.isReadOnly}

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(
@@ -77,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;
 			}
@@ -109,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}
@@ -124,6 +132,7 @@
 		isFocusVisibleOverride={isFocusVisible}
 		onItemSelect={handleSelect}
 		onResolvedTextValue={handleResolvedTextValue}
+		onItemHoverStart={handleHoverStart}
 		scrollOnFocus={true}
 		isParentDisabled={ctx.isDisabled}
 	/>

package/dist/combobox/list/combobox-listbox.svelte

@@ -73,4 +73,5 @@
 	value={ctx.selectedValue}
 	onChange={handleSelectionChange}
 	aria-label={ariaLabel}
+	disableFocusHandling={true}
 />

package/dist/combobox/list/combobox-listbox.svelte.d.ts

@@ -14,6 +14,7 @@ declare function $$render<T extends object = object>(): {
         id?: string;
         'aria-label'?: string;
         onChange?: ((value: Set<string | number>) => void) | undefined;
+        disableFocusHandling?: boolean;
     } & {
         context?: ListBoxContext;
         element?: HTMLElement;

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-test.svelte

@@ -7,6 +7,7 @@
 		isPending?: boolean;
 		isReadOnly?: boolean;
 		trigger?: 'focus' | 'input' | 'press';
+		disabledIds?: string[];
 	};
 
 	let {
@@ -14,7 +15,8 @@
 		isDisabled = false,
 		isPending = false,
 		isReadOnly = false,
-		trigger = 'press'
+		trigger = 'press',
+		disabledIds = []
 	}: Props = $props();
 
 	let selectedValue = $state<string | number | undefined>();
@@ -40,7 +42,11 @@
 	<ComboBox.Popover>
 		<ComboBox.List emptyPlaceholder="No countries found">
 			{#each countries as country (country.id)}
-				<ComboBox.Item id={country.id} textValue={country.name}>
+				<ComboBox.Item
+					id={country.id}
+					textValue={country.name}
+					disabled={disabledIds.includes(country.id)}
+				>
 					{country.name}
 				</ComboBox.Item>
 			{/each}

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

@@ -4,6 +4,7 @@ type Props = {
     isPending?: boolean;
     isReadOnly?: boolean;
     trigger?: 'focus' | 'input' | 'press';
+    disabledIds?: string[];
 };
 declare const ComboboxTest: import("svelte").Component<Props, {}, "">;
 type ComboboxTest = ReturnType<typeof ComboboxTest>;

package/dist/combobox/root/combobox.svelte

@@ -211,6 +211,15 @@
 		}
 	}
 
+	function syncInputValue(val: string, options?: { notifyInputChange?: boolean }) {
+		inputValueInternal = val;
+		inputValue = val;
+
+		if (options?.notifyInputChange ?? true) {
+			onInputChange?.(val);
+		}
+	}
+
 	function selectItem(id: string | number, label: string) {
 		let newSelection: Set<string | number>;
 
@@ -218,10 +227,9 @@
 			newSelection = new Set([id]);
 			// Save the label persistently for restore on blur/escape
 			selectedLabel = label;
-			// Update input directly without triggering deselection
-			inputValueInternal = label;
-			inputValue = label;
-			onInputChange?.(label);
+			// Keep the selected label visible in the input without re-triggering
+			// external filtering during the popover close animation.
+			syncInputValue(label, { notifyInputChange: false });
 			if (effectiveCloseOnSelect) {
 				closePopover(true); // Close and keep focus on input
 			}
@@ -318,6 +326,8 @@
 					onInputChange?.('');
 				}
 				// Otherwise user typed, keep their filter
+			} else {
+				shouldFilter = true;
 			}
 			setIsOpen(true);
 			// Auto-focus the selected item when opening with a selection
@@ -333,8 +343,6 @@
 		setIsOpen(false);
 		// Reset navigation state
 		navigation.reset();
-		// Re-enable filtering for next open
-		shouldFilter = true;
 		// Only refocus input when explicitly requested (e.g., after selection)
 		// Never refocus in focus mode to prevent re-opening
 		if (refocusInput && trigger !== 'focus') {
@@ -381,6 +389,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);
 		}
@@ -439,9 +450,7 @@
 		if (currentSelection.size > 0 && selectedLabel) {
 			if (selectedLabel !== currentInputValue) {
 				// Restore the selected label
-				inputValueInternal = selectedLabel;
-				inputValue = selectedLabel;
-				onInputChange?.(selectedLabel);
+				syncInputValue(selectedLabel, { notifyInputChange: false });
 			}
 		}
 	}

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';
@@ -36,6 +37,8 @@
 		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. */
@@ -57,6 +60,7 @@
 		isFocusVisibleOverride,
 		onItemSelect,
 		onResolvedTextValue,
+		onItemHoverStart,
 		scrollOnFocus = false,
 		isParentDisabled = false,
 		pressed: pressedOverride,
@@ -69,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(
@@ -88,12 +94,20 @@
 	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);
@@ -115,6 +129,9 @@
 			unsubscribeFocus = listboxCtx.subscribeToFocus(id, (focused) => {
 				isFocused = focused;
 			});
+			unsubscribeFocusVisible = listboxCtx.subscribeToFocusVisible((visible) => {
+				listFocusVisible = visible;
+			});
 			listboxCtx.keyboardNav.updateItems();
 		}
 	});
@@ -123,11 +140,12 @@
 		listboxCtx.unregisterItem(id);
 		unsubscribeSelection?.();
 		unsubscribeFocus?.();
+		unsubscribeFocusVisible?.();
 	});
 
 	// Scroll into view when focused (if enabled)
 	$effect(() => {
-		if (scrollOnFocus && isFocusedComputed && elementRef) {
+		if (scrollOnFocus && isFocusedComputed && isFocusVisibleComputed && elementRef) {
 			requestAnimationFrame(() => {
 				elementRef?.scrollIntoView({ block: 'nearest' });
 			});
@@ -146,35 +164,83 @@
 		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;
 
 		const label = getResolvedTextValue();
 
+		if (!disableFocusHandling && elementRef) {
+			suppressNextFocusVisible = true;
+			isFocusVisible = false;
+			listboxCtx.setFocusVisible(false);
+			listboxCtx.setFocusedId(id);
+			listboxCtx.keyboardNav.setCurrentId(id);
+			focusWithModality(elementRef, 'pointer');
+		}
+
 		// Use custom select handler if provided, otherwise use listbox default
 		if (onItemSelect) {
 			onItemSelect(id, label);
 		} else {
 			listboxCtx.select(id);
-			listboxCtx.setFocusedId(id);
+		}
+
+		if (!disableFocusHandling) {
+			listboxCtx.keyboardNav.setCurrentId(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();
@@ -200,6 +266,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;
 		}
@@ -211,9 +283,15 @@
 		}
 	}
 
-	function handleMouseEnter() {
+	function handleMouseEnter(event: MouseEvent) {
 		if (!isDisabledComputed) {
+			trackInteractionModality(event, elementRef);
 			isHovered = true;
+			isFocusVisible = false;
+			if (!disableFocusHandling) {
+				listboxCtx.setFocusVisible(false);
+				transferHoverFocus();
+			}
 		}
 	}
 
@@ -228,7 +306,11 @@
 	function handleKeydown(event: KeyboardEvent) {
 		trackInteractionModality(event, elementRef);
 		if (isFocusedComputed) {
+			isHovered = false;
 			isFocusVisible = true;
+			if (!disableFocusHandling) {
+				listboxCtx.setFocusVisible(true);
+			}
 		}
 
 		const key =
@@ -276,6 +358,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
@@ -317,8 +402,8 @@
 	data-selected={isSelected || undefined}
 	data-disabled={isDisabledComputed || undefined}
 	data-focused={isFocusedComputed || undefined}
-	data-focus-visible={isFocusVisibleComputed || 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

@@ -26,6 +26,8 @@ type ListBoxItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'children'>
     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.
@@ -35,6 +32,8 @@
 		'aria-label'?: string;
 		/** Callback fired when the selection changes. */
 		onChange?: (value: Set<string | number>) => void;
+		/** Disable DOM focus handling on the root container for virtual-focus compositions. */
+		disableFocusHandling?: boolean;
 	};
 
 	let {
@@ -50,6 +49,7 @@
 		id,
 		'aria-label': ariaLabel,
 		onChange,
+		disableFocusHandling = false,
 		context = $bindable(),
 		element = $bindable()
 	}: ListBoxProps & { context?: ListBoxContext; element?: HTMLElement } = $props();
@@ -120,21 +120,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 +138,16 @@
 
 	function handleMouseDown(event: MouseEvent) {
 		trackInteractionModality(event, event.target as HTMLElement | null);
-		focusVisible = false;
+		ctx.setFocusVisible(false);
+		if (disableFocusHandling) {
+			event.preventDefault();
+		}
 	}
 
 	function handleKeyDown(event: KeyboardEvent) {
 		trackInteractionModality(event, event.target as HTMLElement | null);
 		if (focusWithin) {
-			focusVisible = true;
+			ctx.setFocusVisible(true);
 		}
 	}
 </script>
@@ -161,9 +159,8 @@
 	aria-multiselectable={selectionMode === 'multiple'}
 	aria-label={ariaLabel}
 	class={className}
-	tabindex="0"
+	tabindex={disableFocusHandling ? undefined : 0}
 	data-focus-within={focusWithin || undefined}
-	data-focus-visible={focusVisible || undefined}
 	use:keyboardAction
 	onfocusin={handleFocusIn}
 	onfocusout={handleFocusOut}

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

@@ -26,6 +26,8 @@ declare function $$render<T extends object = object>(): {
         'aria-label'?: string;
         /** Callback fired when the selection changes. */
         onChange?: (value: Set<string | number>) => void;
+        /** Disable DOM focus handling on the root container for virtual-focus compositions. */
+        disableFocusHandling?: boolean;
     } & {
         context?: ListBoxContext;
         element?: HTMLElement;

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.11",
+	"version": "1.0.0-alpha.13",
 	"license": "MIT",
 	"type": "module",
 	"svelte": "./dist/index.js",