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

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/root/combobox.svelte

@@ -225,6 +225,7 @@
 
 		if (selectionMode === 'single') {
 			newSelection = new Set([id]);
+			shouldFilter = false;
 			// Save the label persistently for restore on blur/escape
 			selectedLabel = label;
 			// Keep the selected label visible in the input without re-triggering

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

@@ -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;

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';
 
@@ -118,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 &&
@@ -175,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/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.