@human-kit/svelte-components 1.0.0-alpha.11 → 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(
@@ -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/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

@@ -381,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);
 		}

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,6 +140,7 @@
 		listboxCtx.unregisterItem(id);
 		unsubscribeSelection?.();
 		unsubscribeFocus?.();
+		unsubscribeFocusVisible?.();
 	});
 
 	// Scroll into view when focused (if enabled)
@@ -146,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;
 
@@ -156,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();
@@ -200,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;
 		}
@@ -211,9 +274,15 @@
 		}
 	}
 
-	function handleMouseEnter() {
+	function handleMouseEnter(event: MouseEvent) {
 		if (!isDisabledComputed) {
+			trackInteractionModality(event, elementRef);
 			isHovered = true;
+			isFocusVisible = false;
+			if (!disableFocusHandling) {
+				listboxCtx.setFocusVisible(false);
+				transferHoverFocus();
+			}
 		}
 	}
 
@@ -228,7 +297,11 @@
 	function handleKeydown(event: KeyboardEvent) {
 		trackInteractionModality(event, elementRef);
 		if (isFocusedComputed) {
+			isHovered = false;
 			isFocusVisible = true;
+			if (!disableFocusHandling) {
+				listboxCtx.setFocusVisible(true);
+			}
 		}
 
 		const key =
@@ -276,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
@@ -317,8 +393,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.
@@ -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/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.12",
 	"license": "MIT",
 	"type": "module",
 	"svelte": "./dist/index.js",