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

package/dist/combobox/item/combobox-listboxitem.svelte

@@ -66,6 +66,7 @@
 
 	// Virtual focus from ComboBox context
 	const isFocused = $derived(ctx.focusedItemId === id);
+	const isFocusVisible = $derived(isFocused && ctx.isFocusVisible);
 
 	// Generate unique ID using instanceId
 	const uniqueId = $derived(`combobox-item-${ctx.instanceId}-${id}`);
@@ -120,6 +121,7 @@
 		customId={uniqueId}
 		disableFocusHandling={true}
 		isFocusedOverride={isFocused}
+		isFocusVisibleOverride={isFocusVisible}
 		onItemSelect={handleSelect}
 		onResolvedTextValue={handleResolvedTextValue}
 		scrollOnFocus={true}

package/dist/combobox/popover/README.md

@@ -7,7 +7,21 @@
 Name: `ComboBox.Popover`  
 Description: Floating container for combobox options. Internally composes `Popover.Root` and `Popover.Content` in non-modal mode.
 
-| Prop       | Type      | Default     | Description                                 |
-| ---------- | --------- | ----------- | ------------------------------------------- |
-| `class`    | `string`  | `''`        | CSS class names for the floating panel.     |
-| `children` | `Snippet` | `undefined` | Popover content, typically `ComboBox.List`. |
+| Prop                           | Type                               | Default          | Description                                                                |
+| ------------------------------ | ---------------------------------- | ---------------- | -------------------------------------------------------------------------- |
+| `offset`                       | `number`                           | `8`              | Main-axis offset from the combobox trigger.                                |
+| `placement`                    | `ExtendedPlacement`                | `'bottom-start'` | Preferred floating placement.                                              |
+| `shouldFlip`                   | `boolean`                          | `true`           | Enables automatic fallback placement when space is limited.                |
+| `boundaryElement`              | `Element \| null`                  | `null`           | Optional boundary element for positioning constraints.                     |
+| `class`                        | `string`                           | `''`             | CSS class names for the floating panel.                                    |
+| `children`                     | `Snippet`                          | `undefined`      | Popover content, typically `ComboBox.List`.                                |
+| `isNonModal`                   | `boolean`                          | `true`           | Controls whether the popover behaves as a non-modal overlay.               |
+| `shouldCloseOnInteractOutside` | `boolean`                          | `true`           | Closes when interacting outside the panel.                                 |
+| `shouldCloseOnEscape`          | `boolean`                          | `true`           | Closes on Escape key press.                                                |
+| `shouldCloseOnBlur`            | `boolean`                          | `true`           | Closes on focus leaving trigger/content in the combobox interaction model. |
+| `initialFocus`                 | `FocusTrapOptions['initialFocus']` | `undefined`      | Initial focus target when modal focus trapping is enabled.                 |
+
+## Notes
+
+- `ComboBox.Popover` forwards all `Popover.Content` configuration props except the controlled open-state wiring (`open`, `triggerRef`, and `onOpenChange`).
+- The default placement is `bottom-start` to match the combobox input.

package/dist/combobox/popover/combobox-popover-props-test.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import ComboBox from '../index';
+	import type { PopoverContent } from '../../popover';
+
+	type Props = {
+		offset?: number;
+		placement?: ComponentProps<typeof PopoverContent>['placement'];
+		shouldFlip?: boolean;
+		shouldCloseOnEscape?: boolean;
+	};
+
+	let {
+		offset = 8,
+		placement = 'bottom-start',
+		shouldFlip = true,
+		shouldCloseOnEscape = true
+	}: Props = $props();
+
+	const countries = [
+		{ id: 'ar', name: 'Argentina' },
+		{ id: 'br', name: 'Brazil' },
+		{ id: 'ca', name: 'Canada' }
+	];
+</script>
+
+<ComboBox.Root trigger="press">
+	<ComboBox.Input placeholder="Search countries..." />
+	<ComboBox.Trigger />
+
+	<ComboBox.Popover {offset} {placement} {shouldFlip} {shouldCloseOnEscape}>
+		<ComboBox.List emptyPlaceholder="No countries found">
+			{#each countries as country (country.id)}
+				<ComboBox.Item id={country.id} textValue={country.name}>{country.name}</ComboBox.Item>
+			{/each}
+		</ComboBox.List>
+	</ComboBox.Popover>
+</ComboBox.Root>

package/dist/combobox/popover/combobox-popover-props-test.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'svelte';
+import type { PopoverContent } from '../../popover';
+type Props = {
+    offset?: number;
+    placement?: ComponentProps<typeof PopoverContent>['placement'];
+    shouldFlip?: boolean;
+    shouldCloseOnEscape?: boolean;
+};
+declare const ComboboxPopoverPropsTest: import("svelte").Component<Props, {}, "">;
+type ComboboxPopoverPropsTest = ReturnType<typeof ComboboxPopoverPropsTest>;
+export default ComboboxPopoverPropsTest;

package/dist/combobox/popover/combobox-popover.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+	import type { ComponentProps, Snippet } from 'svelte';
 	import { useComboBoxContext } from '../root/context';
 	import { Popover } from '../../popover';
 	import { focusWithModality, type InputModality } from '../../primitives/input-modality';
@@ -9,12 +9,22 @@
 	 * ComboBox.Popover - Just the floating container wrapper.
 	 * Should contain ComboBox.ListBox as a child.
 	 */
-	type ComboBoxPopoverProps = {
-		class?: string;
+	type ComboBoxPopoverProps = Omit<
+		ComponentProps<typeof Popover.Content>,
+		'open' | 'triggerRef' | 'onOpenChange' | 'children'
+	> & {
 		children?: Snippet;
 	};
 
-	let { class: className = '', children }: ComboBoxPopoverProps = $props();
+	let {
+		class: className = '',
+		children,
+		placement = 'bottom-start',
+		isNonModal = true,
+		shouldCloseOnEscape = true,
+		shouldCloseOnBlur = true,
+		...contentProps
+	}: ComboBoxPopoverProps = $props();
 
 	const ctx = useComboBoxContext();
 	let restoreListboxMaxHeight: (() => void) | undefined;
@@ -168,15 +178,32 @@
 			ctx.inputRef?.focus();
 		}
 	});
+
+	$effect(() => {
+		ctx.setShouldCloseOnEscape(shouldCloseOnEscape);
+		return () => {
+			ctx.setShouldCloseOnEscape(true);
+		};
+	});
+
+	$effect(() => {
+		ctx.setShouldCloseOnBlur(shouldCloseOnBlur);
+		return () => {
+			ctx.setShouldCloseOnBlur(true);
+		};
+	});
 </script>
 
 <Popover.Root open={ctx.isOpen} triggerRef={ctx.triggerRef} onOpenChange={handleOpenChange}>
 	<Popover.Content
-		isNonModal={true}
-		placement="bottom-start"
+		{isNonModal}
+		{placement}
+		{shouldCloseOnEscape}
+		{shouldCloseOnBlur}
 		class={className}
 		onmousedown={handleMouseDown}
 		onwheel={handleWheel}
+		{...contentProps}
 	>
 		{#if children}
 			{@render children()}

package/dist/combobox/popover/combobox-popover.svelte.d.ts

@@ -1,10 +1,10 @@
-import type { Snippet } from 'svelte';
+import type { ComponentProps, Snippet } from 'svelte';
+import { Popover } from '../../popover';
 /**
  * ComboBox.Popover - Just the floating container wrapper.
  * Should contain ComboBox.ListBox as a child.
  */
-type ComboBoxPopoverProps = {
-    class?: string;
+type ComboBoxPopoverProps = Omit<ComponentProps<typeof Popover.Content>, 'open' | 'triggerRef' | 'onOpenChange' | 'children'> & {
     children?: Snippet;
 };
 declare const ComboboxPopover: import("svelte").Component<ComboBoxPopoverProps, {}, "">;

package/dist/combobox/root/combobox.svelte

@@ -107,6 +107,8 @@
 	let focusWithin = $state(false);
 	let focusVisible = $state(false);
 	let popoverPointerDownPending = $state(false);
+	let shouldCloseOnEscapeState = $state(true);
+	let shouldCloseOnBlurState = $state(true);
 
 	// Flag to control whether inputValue should be used for filtering
 	// When false, all items are shown regardless of inputValue
@@ -407,6 +409,9 @@
 			return;
 		}
 
+		if (!shouldCloseOnBlurState) {
+			return;
+		}
 		// Close popover first to prevent flash of options when clearing input
 		closePopover();
 
@@ -611,16 +616,16 @@
 				}
 				break;
 			case 'Escape':
-				if (currentIsOpen) {
+				if (currentIsOpen && shouldCloseOnEscapeState) {
 					closePopover(true); // Keep focus on input after Escape
 					// Stop propagation so parent dialogs don't also close
 					event.stopPropagation();
 					event.stopImmediatePropagation();
+					handleInputBlur();
+					// Escape is a keyboard-only path, so focus-visible remains enabled for the input.
+					focusVisible = true;
+					event.preventDefault();
 				}
-				handleInputBlur();
-				// Escape is a keyboard-only path, so focus-visible remains enabled for the input.
-				focusVisible = true;
-				event.preventDefault();
 				break;
 			case 'Backspace':
 				// In multiple mode, remove last tag when input is empty
@@ -668,6 +673,15 @@
 		get isPending() {
 			return isPending;
 		},
+		get isFocusVisible() {
+			return focusVisible;
+		},
+		get shouldCloseOnEscape() {
+			return shouldCloseOnEscapeState;
+		},
+		get shouldCloseOnBlur() {
+			return shouldCloseOnBlurState;
+		},
 		get isReadOnly() {
 			return isReadOnly;
 		},
@@ -742,7 +756,13 @@
 		markPopoverPointerDown: () => {
 			popoverPointerDownPending = true;
 		},
-		consumePopoverPointerDown
+		consumePopoverPointerDown,
+		setShouldCloseOnEscape: (value: boolean) => {
+			shouldCloseOnEscapeState = value;
+		},
+		setShouldCloseOnBlur: (value: boolean) => {
+			shouldCloseOnBlurState = value;
+		}
 	};
 
 	setComboBoxContext(ctx);

package/dist/combobox/root/context.d.ts

@@ -22,6 +22,8 @@ export type ComboBoxContext<T extends object = object> = {
     isDisabled: boolean;
     /** Whether the combobox is pending async work */
     isPending: boolean;
+    /** Whether focus should currently be presented as keyboard-visible */
+    isFocusVisible: boolean;
     /** Whether the combobox is read-only */
     isReadOnly: boolean;
     /** Selection mode */
@@ -92,6 +94,14 @@ export type ComboBoxContext<T extends object = object> = {
     markPopoverPointerDown: () => void;
     /** Consume the pending popover-pointer marker. */
     consumePopoverPointerDown: () => boolean;
+    /** Whether Escape should close the popover. */
+    shouldCloseOnEscape: boolean;
+    /** Whether blur should close the popover. */
+    shouldCloseOnBlur: boolean;
+    /** Update whether Escape should close the popover. */
+    setShouldCloseOnEscape: (value: boolean) => void;
+    /** Update whether blur should close the popover. */
+    setShouldCloseOnBlur: (value: boolean) => void;
 };
 export declare function setComboBoxContext<T extends object = object>(ctx: ComboBoxContext<T>): void;
 export declare function getComboBoxContext<T extends object = object>(): ComboBoxContext<T> | undefined;

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

@@ -30,6 +30,8 @@
 		disableFocusHandling?: boolean;
 		/** Override the focused state. When provided, this value is used instead of internal focus tracking. */
 		isFocusedOverride?: boolean;
+		/** Override the focus-visible presentation state. */
+		isFocusVisibleOverride?: boolean;
 		/** Override the select behavior. When provided, called instead of default listbox selection. */
 		onItemSelect?: (id: string | number, label: string) => void;
 		/** Callback with resolved text value when mounted (from prop or rendered content). */
@@ -52,6 +54,7 @@
 		customId,
 		disableFocusHandling = false,
 		isFocusedOverride,
+		isFocusVisibleOverride,
 		onItemSelect,
 		onResolvedTextValue,
 		scrollOnFocus = false,
@@ -82,6 +85,9 @@
 			? Boolean(pressedOverride) && !isDisabledComputed
 			: isPressed && !isDisabledComputed
 	);
+	const isFocusVisibleComputed = $derived(
+		isFocusVisibleOverride !== undefined ? isFocusVisibleOverride : isFocusVisible
+	);
 
 	// ID: use custom if provided, otherwise generate
 	const uniqueId = $derived(customId ?? `listbox-item-${id}`);
@@ -311,7 +317,7 @@
 	data-selected={isSelected || undefined}
 	data-disabled={isDisabledComputed || undefined}
 	data-focused={isFocusedComputed || undefined}
-	data-focus-visible={isFocusVisible || undefined}
+	data-focus-visible={isFocusVisibleComputed || undefined}
 	data-hovered={isHovered || undefined}
 	data-pressed={isPressedComputed || undefined}
 	onpointerdown={handlePointerDown}

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

@@ -20,6 +20,8 @@ type ListBoxItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'children'>
     disableFocusHandling?: boolean;
     /** Override the focused state. When provided, this value is used instead of internal focus tracking. */
     isFocusedOverride?: boolean;
+    /** Override the focus-visible presentation state. */
+    isFocusVisibleOverride?: boolean;
     /** Override the select behavior. When provided, called instead of default listbox selection. */
     onItemSelect?: (id: string | number, label: string) => void;
     /** Callback with resolved text value when mounted (from prop or rendered content). */

package/dist/popover/content/popover-content.svelte

@@ -57,7 +57,7 @@
 	} & Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'children'>;
 
 	let {
-		offset = 8,
+		offset = 4,
 		placement = 'bottom',
 		shouldFlip = true,
 		boundaryElement = null,

package/package.json

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