@human-kit/svelte-components 1.0.0-alpha.12 → 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/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-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') {
@@ -442,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/listbox/item/listbox-item.svelte

@@ -145,7 +145,7 @@
 
 	// Scroll into view when focused (if enabled)
 	$effect(() => {
-		if (scrollOnFocus && isFocusedComputed && elementRef) {
+		if (scrollOnFocus && isFocusedComputed && isFocusVisibleComputed && elementRef) {
 			requestAnimationFrame(() => {
 				elementRef?.scrollIntoView({ block: 'nearest' });
 			});
@@ -193,6 +193,15 @@
 
 		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);
@@ -201,7 +210,7 @@
 		}
 
 		if (!disableFocusHandling) {
-			listboxCtx.keyboardNav.focusById(id);
+			listboxCtx.keyboardNav.setCurrentId(id);
 		}
 	}
 

package/dist/listbox/root/listbox.svelte

@@ -32,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 {
@@ -47,6 +49,7 @@
 		id,
 		'aria-label': ariaLabel,
 		onChange,
+		disableFocusHandling = false,
 		context = $bindable(),
 		element = $bindable()
 	}: ListBoxProps & { context?: ListBoxContext; element?: HTMLElement } = $props();
@@ -136,6 +139,9 @@
 	function handleMouseDown(event: MouseEvent) {
 		trackInteractionModality(event, event.target as HTMLElement | null);
 		ctx.setFocusVisible(false);
+		if (disableFocusHandling) {
+			event.preventDefault();
+		}
 	}
 
 	function handleKeyDown(event: KeyboardEvent) {
@@ -153,7 +159,7 @@
 	aria-multiselectable={selectionMode === 'multiple'}
 	aria-label={ariaLabel}
 	class={className}
-	tabindex="0"
+	tabindex={disableFocusHandling ? undefined : 0}
 	data-focus-within={focusWithin || undefined}
 	use:keyboardAction
 	onfocusin={handleFocusIn}

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/package.json

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