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

package/dist/checkbox/root/checkbox-root.svelte

@@ -24,6 +24,7 @@
 		| 'value'
 	> & {
 		id?: string;
+		element?: HTMLSpanElement | null;
 		name?: string;
 		value?: string;
 		isChecked?: boolean;
@@ -39,8 +40,20 @@
 		class?: string;
 		'aria-label'?: string;
 		'aria-labelledby'?: string;
+		onclick?: HTMLAttributes<HTMLSpanElement>['onclick'];
+		onkeydown?: HTMLAttributes<HTMLSpanElement>['onkeydown'];
 	};
 
+	function composeEventHandlers<TEvent extends Event>(
+		internalHandler: ((event: TEvent) => void) | undefined,
+		externalHandler: ((event: TEvent) => void) | undefined
+	): (event: TEvent) => void {
+		return (event: TEvent) => {
+			internalHandler?.(event);
+			externalHandler?.(event);
+		};
+	}
+
 	function resolveState(isChecked: boolean, isIndeterminate: boolean): CheckboxState {
 		if (isIndeterminate) return 'indeterminate';
 		return isChecked ? 'checked' : 'unchecked';
@@ -56,6 +69,7 @@
 
 	let {
 		id,
+		element = $bindable(),
 		name,
 		value = 'on',
 		isChecked = $bindable(),
@@ -71,6 +85,8 @@
 		class: className = '',
 		'aria-label': ariaLabel,
 		'aria-labelledby': ariaLabelledby,
+		onclick: onClickExternal,
+		onkeydown: onKeyDownExternal,
 		...restProps
 	}: CheckboxRootProps = $props();
 
@@ -91,6 +107,10 @@
 	let rootRef: HTMLSpanElement | null = $state(null);
 	let inputRef: HTMLInputElement | null = $state(null);
 
+	$effect(() => {
+		element = rootRef;
+	});
+
 	if (untrack(() => isChecked) === undefined) {
 		isChecked = initialState === 'checked';
 	}
@@ -326,8 +346,8 @@
 	data-required={required || undefined}
 	data-focused={focused || undefined}
 	data-focus-visible={focusVisible || undefined}
-	onclick={handleClick}
-	onkeydown={handleKeyDown}
+	onclick={composeEventHandlers(onClickExternal ?? undefined, handleClick)}
+	onkeydown={composeEventHandlers(handleKeyDown, onKeyDownExternal ?? undefined)}
 	onkeyup={handleKeyUp}
 	onpointerdown={handlePointerDown}
 	onmousedown={handlePointerDown}

package/dist/checkbox/root/checkbox-root.svelte.d.ts

@@ -2,6 +2,7 @@ import { type Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 type CheckboxRootProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'class' | 'id' | 'role' | 'tabindex' | 'aria-checked' | 'aria-disabled' | 'aria-readonly' | 'aria-required' | 'onclick' | 'onkeydown' | 'value'> & {
     id?: string;
+    element?: HTMLSpanElement | null;
     name?: string;
     value?: string;
     isChecked?: boolean;
@@ -17,7 +18,9 @@ type CheckboxRootProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'cla
     class?: string;
     'aria-label'?: string;
     'aria-labelledby'?: string;
+    onclick?: HTMLAttributes<HTMLSpanElement>['onclick'];
+    onkeydown?: HTMLAttributes<HTMLSpanElement>['onkeydown'];
 };
-declare const CheckboxRoot: import("svelte").Component<CheckboxRootProps, {}, "isChecked" | "isIndeterminate">;
+declare const CheckboxRoot: import("svelte").Component<CheckboxRootProps, {}, "element" | "isChecked" | "isIndeterminate">;
 type CheckboxRoot = ReturnType<typeof CheckboxRoot>;
 export default CheckboxRoot;

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,17 +211,26 @@
 		}
 	}
 
+	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>;
 
 		if (selectionMode === 'single') {
 			newSelection = new Set([id]);
+			shouldFilter = false;
 			// 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 +327,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 +344,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 +451,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' });
 			});
@@ -159,6 +159,19 @@
 		isFocusVisible = false;
 	});
 
+	$effect(() => {
+		if (!isFocusedComputed) {
+			if (pressedKey !== null) {
+				clearPressedState();
+			}
+			return;
+		}
+
+		if (listFocusVisible || isFocusVisibleComputed) {
+			isHovered = false;
+		}
+	});
+
 	function clearPressedState() {
 		isPressed = false;
 		pressedKey = null;
@@ -193,6 +206,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 +223,7 @@
 		}
 
 		if (!disableFocusHandling) {
-			listboxCtx.keyboardNav.focusById(id);
+			listboxCtx.keyboardNav.setCurrentId(id);
 		}
 	}
 

package/dist/listbox/root/listbox.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" generics="T extends object = object">
 	import type { Snippet } from 'svelte';
+	import { onMount } from 'svelte';
 	import { createListBoxContext, type ListBoxContext } from './context';
 	import { trackInteractionModality } from '../../primitives/input-modality';
 
@@ -32,6 +33,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 +50,7 @@
 		id,
 		'aria-label': ariaLabel,
 		onChange,
+		disableFocusHandling = false,
 		context = $bindable(),
 		element = $bindable()
 	}: ListBoxProps & { context?: ListBoxContext; element?: HTMLElement } = $props();
@@ -115,9 +119,14 @@
 
 	const itemsArray = $derived(items ? Array.from(items) : []);
 	const hasItems = $derived(itemsArray.length > 0 || itemCount > 0);
+	let hasMounted = $state(false);
 
 	let focusWithin = $state(false);
 
+	onMount(() => {
+		hasMounted = true;
+	});
+
 	function syncFocusWithin() {
 		focusWithin =
 			!!listboxElement &&
@@ -136,6 +145,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 +165,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}
@@ -169,7 +181,7 @@
 		{@render (children as Snippet)()}
 	{/if}
 
-	{#if !hasItems && itemCount === 0}
+	{#if hasMounted && !hasItems && itemCount === 0}
 		{#if typeof emptyPlaceholder === 'string'}
 			<div role="option" aria-selected="false" aria-disabled="true" data-empty-placeholder>
 				{emptyPlaceholder}

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/table/IMPLEMENTATION_NOTES.md

@@ -2,7 +2,8 @@
 
 ## Open questions
 
-- Disabled body rows are currently rendered and keyboard-focusable, but they cannot be selected. We should validate whether this matches the desired UX.
+- Disabled body rows are currently rendered and treated with an all-or-nothing disabled model. The planned `disabledBehavior` API (`'selection' | 'all'`) will require splitting focus/action disabling from selection disabling.
 - `Table.Column` is implemented as a logical wrapper and currently assumes the intended child is a single `Table.ColumnHeaderCell`.
 - `Table.Footer` renders semantic table cells but is intentionally excluded from the roving-focus model in v1.
 - Interactive controls nested inside `Table.Cell` are still intentionally out of scope for v1.
+- `pressRow()` is currently selection-oriented. The planned `onRowAction` feature will require a clearer interaction pipeline so pointer click, double click, `Enter`, and `Space` can route to action and selection independently.