@human-kit/svelte-components 1.0.0-alpha.1 → 1.0.0-alpha.3

package/dist/dialog/trigger/dialog-trigger-multi-button-test.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Dialog } from '../../dialog';
+</script>
+
+<Dialog.Root>
+	<Dialog.Trigger>
+		<div>
+			<button type="button">First Dialog Trigger</button>
+			<button type="button">Second Dialog Trigger</button>
+		</div>
+	</Dialog.Trigger>
+
+	<Dialog.Portal>
+		<Dialog.Overlay />
+		<Dialog.Content>
+			<p>Dialog body</p>
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>

package/dist/dialog/trigger/dialog-trigger-multi-button-test.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DialogTriggerMultiButtonTest: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DialogTriggerMultiButtonTest = InstanceType<typeof DialogTriggerMultiButtonTest>;
+export default DialogTriggerMultiButtonTest;

package/dist/dialog/trigger/dialog-trigger.svelte

@@ -24,16 +24,25 @@
 	const dialogCtx = ctx;
 
 	let wrapperRef: HTMLElement | null = $state(null);
+	let activeTrigger: HTMLElement | null = null;
+
+	function setActiveTrigger(button: HTMLElement) {
+		if (activeTrigger && activeTrigger !== button) {
+			activeTrigger.setAttribute('aria-expanded', 'false');
+		}
+
+		activeTrigger = button;
+		dialogCtx.setTriggerRef(button);
+		button.setAttribute('aria-haspopup', 'dialog');
+		button.setAttribute('aria-expanded', String(dialogCtx.isOpen));
+	}
 
 	function handleClick(event: MouseEvent) {
 		const target = event.target as HTMLElement;
 		const button = target.closest('button, [role="button"]') as HTMLElement | null;
 
 		if (button && wrapperRef?.contains(button)) {
-			// Set trigger ref if not already set
-			if (!dialogCtx.triggerRef) {
-				dialogCtx.setTriggerRef(button);
-			}
+			setActiveTrigger(button);
 			dialogCtx.toggle();
 		}
 	}
@@ -43,8 +52,7 @@
 			// Find and set up the trigger button
 			const firstButton = wrapperRef.querySelector('button, [role="button"]') as HTMLElement | null;
 			if (firstButton) {
-				dialogCtx.setTriggerRef(firstButton);
-				firstButton.setAttribute('aria-haspopup', 'dialog');
+				setActiveTrigger(firstButton);
 			}
 		}
 
@@ -59,6 +67,10 @@
 
 	$effect(() => {
 		if (dialogCtx.triggerRef) {
+			if (activeTrigger !== dialogCtx.triggerRef) {
+				activeTrigger = dialogCtx.triggerRef;
+			}
+			dialogCtx.triggerRef.setAttribute('aria-haspopup', 'dialog');
 			dialogCtx.triggerRef.setAttribute('aria-expanded', String(dialogCtx.isOpen));
 		}
 	});

package/dist/index.d.ts

@@ -1,13 +1,20 @@
 export { ComboBox } from './combobox/index.ts';
+export { Calendar } from './calendar/index.ts';
+export { DatePicker } from './datepicker/index.ts';
 export { Dialog } from './dialog/index.ts';
 export { ListBox } from './listbox/index.ts';
 export { Popover } from './popover/index.ts';
 export { default as Input } from './input/index.ts';
 export { default as Label } from './label/index.ts';
+export { default as LocaleProvider } from './locale-provider/index.ts';
 export { Portal } from './portal/index.ts';
+export * from './locale-provider/index.ts';
 export * from './combobox/index.ts';
+export * from './calendar/index.ts';
+export * from './datepicker/index.ts';
 export * from './dialog/index.ts';
 export * from './listbox/index.ts';
 export * from './popover/index.ts';
 export * from './primitives/index.ts';
 export { cn } from './utils/index.ts';
+export * from './utils/index.ts';

package/dist/index.js

@@ -1,15 +1,21 @@
 // Main library entry point
 // Components (namespace exports)
 export { ComboBox } from './combobox/index.ts';
+export { Calendar } from './calendar/index.ts';
+export { DatePicker } from './datepicker/index.ts';
 export { Dialog } from './dialog/index.ts';
 export { ListBox } from './listbox/index.ts';
 export { Popover } from './popover/index.ts';
 // Simple components
 export { default as Input } from './input/index.ts';
 export { default as Label } from './label/index.ts';
+export { default as LocaleProvider } from './locale-provider/index.ts';
 export { Portal } from './portal/index.ts';
+export * from './locale-provider/index.ts';
 // Re-export named exports from components
 export * from './combobox/index.ts';
+export * from './calendar/index.ts';
+export * from './datepicker/index.ts';
 export * from './dialog/index.ts';
 export * from './listbox/index.ts';
 export * from './popover/index.ts';
@@ -17,3 +23,4 @@ export * from './popover/index.ts';
 export * from './primitives/index.ts';
 // Utilities
 export { cn } from './utils/index.ts';
+export * from './utils/index.ts';

package/dist/listbox/README.md

@@ -0,0 +1,26 @@
+# ListBox
+
+## Description
+
+`ListBox` is a headless selectable list primitive with keyboard navigation, single and multiple selection, and controlled or uncontrolled state.
+
+## Usage guidelines
+
+- Use `ListBox.Root` as the container for selection state and keyboard interactions.
+- Render each option with `ListBox.Item`.
+- Use `value` and `onChange` for controlled selection.
+- Use `defaultValue` for uncontrolled initial selection.
+- Provide `aria-label` when there is no visible label.
+
+## Anatomy
+
+Import the component and compose its parts:
+
+```svelte
+<ListBox.Root aria-label="Options">
+	<ListBox.Item id="1">Option 1</ListBox.Item>
+</ListBox.Root>
+```
+
+- `ListBox.Root`
+- `ListBox.Item`

package/dist/listbox/item/README.md

@@ -0,0 +1,24 @@
+# ListBox Item
+
+## API reference
+
+### ListBox.Item
+
+Name: `ListBox.Item`  
+Description: Selectable option element with built-in selected, focused, hovered, and disabled states.
+
+| Prop                   | Type                             | Default              | Description                                              |
+| ---------------------- | -------------------------------- | -------------------- | -------------------------------------------------------- |
+| `id`                   | `string \| number`               | `required`           | Unique id for option registration and selection.         |
+| `textValue`            | `string`                         | `content text`       | String used for text resolution and typeahead.           |
+| `disabled`             | `boolean`                        | `false`              | Disables item interaction.                               |
+| `class`                | `string`                         | `''`                 | CSS class names for the item.                            |
+| `children`             | `Snippet`                        | `undefined`          | Rendered item content.                                   |
+| `customId`             | `string`                         | `listbox-item-${id}` | Overrides generated DOM id.                              |
+| `disableFocusHandling` | `boolean`                        | `false`              | Disables internal DOM focus behavior.                    |
+| `isFocusedOverride`    | `boolean`                        | `undefined`          | Forces focused state from parent composition.            |
+| `onItemSelect`         | `(id, label) => void`            | `undefined`          | Custom selection callback override.                      |
+| `onResolvedTextValue`  | `(label: string) => void`        | `undefined`          | Called when item text value is resolved.                 |
+| `scrollOnFocus`        | `boolean`                        | `false`              | Scrolls item into view when focused.                     |
+| `isParentDisabled`     | `boolean`                        | `false`              | Additional disabled state inherited from parent wrapper. |
+| `...restProps`         | `HTMLAttributes<HTMLDivElement>` | `-`                  | Additional option attributes.                            |

package/dist/listbox/root/README.md

@@ -0,0 +1,40 @@
+# ListBox Root
+
+## API reference
+
+### ListBox.Root
+
+Name: `ListBox.Root`  
+Description: Main listbox state container that manages registration, selection, focus, and keyboard navigation.
+
+| Prop                | Type                                     | Default               | Description                                                  |
+| ------------------- | ---------------------------------------- | --------------------- | ------------------------------------------------------------ |
+| `selectionBehavior` | `'toggle' \| 'replace'`                  | `'toggle'`            | Selection behavior for already selected options.             |
+| `emptyPlaceholder`  | `string \| Snippet`                      | `'No items selected'` | Fallback content when no options are available.              |
+| `items`             | `Iterable<T>`                            | `undefined`           | Dynamic source collection for rendering.                     |
+| `disabledIds`       | `Iterable<string \| number>`             | `undefined`           | Option ids that should be disabled.                          |
+| `selectionMode`     | `'single' \| 'multiple'`                 | `'single'`            | Selection mode for the listbox.                              |
+| `value`             | `Iterable<string \| number>`             | `undefined`           | Controlled selection values.                                 |
+| `defaultValue`      | `Iterable<string \| number>`             | `undefined`           | Initial uncontrolled selection values.                       |
+| `children`          | `Snippet \| Snippet<[T]>`                | `undefined`           | Static or dynamic option rendering.                          |
+| `class`             | `string`                                 | `''`                  | CSS class names for the root element.                        |
+| `id`                | `string`                                 | `undefined`           | DOM id for the listbox element.                              |
+| `aria-label`        | `string`                                 | `undefined`           | Accessible label for the listbox.                            |
+| `onChange`          | `(value: Set<string \| number>) => void` | `undefined`           | Called when selection changes.                               |
+| `context`           | `ListBoxContext`                         | `bindable`            | Exposes context via `bind:context` for advanced composition. |
+| `element`           | `HTMLElement`                            | `bindable`            | Exposes root element via `bind:element`.                     |
+
+### Context utilities
+
+Name: `context.ts` helpers  
+Description: Low-level APIs for creating and consuming listbox state outside visual composition.
+
+| Prop                                            | Type                                              | Default     | Description                                                  |
+| ----------------------------------------------- | ------------------------------------------------- | ----------- | ------------------------------------------------------------ |
+| `createListBoxContext(options)`                 | `(CreateListBoxContextOptions) => ListBoxContext` | `{}`        | Creates a listbox context with selection and focus behavior. |
+| `useListBoxContext()`                           | `() => ListBoxContext`                            | `-`         | Returns context and throws outside `ListBox.Root`.           |
+| `CreateListBoxContextOptions.selectionMode`     | `'single' \| 'multiple'`                          | `'single'`  | Initial selection mode.                                      |
+| `CreateListBoxContextOptions.selectionBehavior` | `'toggle' \| 'replace'`                           | `'toggle'`  | Initial selection behavior.                                  |
+| `CreateListBoxContextOptions.disabledIds`       | `Iterable<string \| number>`                      | `undefined` | Initial disabled ids.                                        |
+| `CreateListBoxContextOptions.initialSelection`  | `Set<string \| number>`                           | `new Set()` | Initial uncontrolled selection set.                          |
+| `CreateListBoxContextOptions.onSelectionChange` | `(selection) => void`                             | `undefined` | Callback for selection updates.                              |

package/dist/listbox/root/listbox.svelte

@@ -1,6 +1,10 @@
 <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';
 
 	/**
 	 * Props for the ListBox component.
@@ -114,6 +118,40 @@
 
 	const itemsArray = $derived(items ? Array.from(items) : []);
 	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) {
+		focusWithin = true;
+		focusVisible = shouldShowFocusVisible(event.target as HTMLElement | null);
+	}
+
+	function handleFocusOut() {
+		queueMicrotask(syncFocusWithin);
+	}
+
+	function handleMouseDown(event: MouseEvent) {
+		trackInteractionModality(event, event.target as HTMLElement | null);
+		focusVisible = false;
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		trackInteractionModality(event, event.target as HTMLElement | null);
+		if (focusWithin) {
+			focusVisible = true;
+		}
+	}
 </script>
 
 <div
@@ -124,7 +162,13 @@
 	aria-label={ariaLabel}
 	class={className}
 	tabindex="0"
+	data-focus-within={focusWithin || undefined}
+	data-focus-visible={focusVisible || undefined}
 	use:keyboardAction
+	onfocusin={handleFocusIn}
+	onfocusout={handleFocusOut}
+	onmousedown={handleMouseDown}
+	onkeydown={handleKeyDown}
 >
 	{#if items && children}
 		{#each itemsArray as item (item)}

package/dist/locale-provider/context.d.ts

@@ -0,0 +1,8 @@
+import type { Readable } from 'svelte/store';
+export type LocaleContext = {
+    locale: Readable<string | undefined>;
+};
+export declare function setLocaleContext(context: LocaleContext): void;
+export declare function getLocaleContext(): LocaleContext | undefined;
+export declare function useLocaleContext(): LocaleContext;
+export declare function useLocaleContextOptional(): LocaleContext | undefined;

package/dist/locale-provider/context.js

@@ -0,0 +1,18 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('locale-provider');
+export function setLocaleContext(context) {
+    setContext(KEY, context);
+}
+export function getLocaleContext() {
+    return getContext(KEY);
+}
+export function useLocaleContext() {
+    const context = getLocaleContext();
+    if (!context) {
+        throw new Error('LocaleProvider must wrap component tree when using useLocaleContext.');
+    }
+    return context;
+}
+export function useLocaleContextOptional() {
+    return getLocaleContext();
+}

package/dist/locale-provider/index.d.ts

@@ -0,0 +1,4 @@
+import LocaleProvider from './locale-provider.svelte';
+export { LocaleProvider };
+export default LocaleProvider;
+export { getLocaleContext, setLocaleContext, useLocaleContext, useLocaleContextOptional, type LocaleContext } from './context';

package/dist/locale-provider/index.js

@@ -0,0 +1,4 @@
+import LocaleProvider from './locale-provider.svelte';
+export { LocaleProvider };
+export default LocaleProvider;
+export { getLocaleContext, setLocaleContext, useLocaleContext, useLocaleContextOptional } from './context';

package/dist/locale-provider/locale-provider-initial-value-test.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { LocaleProvider } from '../index';
+	import LocaleProviderValueProbe from './locale-provider-value-probe.svelte';
+
+	type Props = {
+		locale?: string;
+		onValue?: (value: string | undefined) => void;
+	};
+
+	let { locale = 'es-ES', onValue }: Props = $props();
+</script>
+
+<LocaleProvider {locale}>
+	<LocaleProviderValueProbe {onValue} />
+</LocaleProvider>

package/dist/locale-provider/locale-provider-initial-value-test.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    locale?: string;
+    onValue?: (value: string | undefined) => void;
+};
+declare const LocaleProviderInitialValueTest: import("svelte").Component<Props, {}, "">;
+type LocaleProviderInitialValueTest = ReturnType<typeof LocaleProviderInitialValueTest>;
+export default LocaleProviderInitialValueTest;

package/dist/locale-provider/locale-provider-test.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { LocaleProvider } from '../index';
+	import Calendar from '../calendar';
+
+	type Props = {
+		locale?: string;
+	};
+
+	let { locale = 'es-ES' }: Props = $props();
+</script>
+
+<LocaleProvider {locale}>
+	<Calendar.Root defaultValue="2026-02-10" aria-label="Locale provider test calendar">
+		<Calendar.Heading />
+		<Calendar.Grid>
+			<Calendar.GridHeader />
+			<Calendar.GridBody />
+		</Calendar.Grid>
+	</Calendar.Root>
+</LocaleProvider>

package/dist/locale-provider/locale-provider-test.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    locale?: string;
+};
+declare const LocaleProviderTest: import("svelte").Component<Props, {}, "">;
+type LocaleProviderTest = ReturnType<typeof LocaleProviderTest>;
+export default LocaleProviderTest;

package/dist/locale-provider/locale-provider-value-probe.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { useLocaleContext } from './context';
+
+	type Props = {
+		onValue?: (value: string | undefined) => void;
+	};
+
+	let { onValue }: Props = $props();
+
+	const { locale } = useLocaleContext();
+	const unsubscribe = locale.subscribe((value) => {
+		onValue?.(value);
+	});
+
+	$effect(() => {
+		return () => {
+			unsubscribe();
+		};
+	});
+</script>
+
+<div data-testid="locale-value-probe"></div>

package/dist/locale-provider/locale-provider-value-probe.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    onValue?: (value: string | undefined) => void;
+};
+declare const LocaleProviderValueProbe: import("svelte").Component<Props, {}, "">;
+type LocaleProviderValueProbe = ReturnType<typeof LocaleProviderValueProbe>;
+export default LocaleProviderValueProbe;

package/dist/locale-provider/locale-provider.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { writable } from 'svelte/store';
+	import { setLocaleContext } from './context';
+
+	type LocaleProviderProps = {
+		locale?: string;
+		children?: Snippet;
+	};
+
+	let props: LocaleProviderProps = $props();
+
+	const localeStore = writable<string | undefined>(props.locale);
+	setLocaleContext({ locale: localeStore });
+
+	$effect(() => {
+		localeStore.set(props.locale);
+	});
+</script>
+
+{#if props.children}
+	{@render props.children()}
+{/if}

package/dist/locale-provider/locale-provider.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type LocaleProviderProps = {
+    locale?: string;
+    children?: Snippet;
+};
+declare const LocaleProvider: import("svelte").Component<LocaleProviderProps, {}, "">;
+type LocaleProvider = ReturnType<typeof LocaleProvider>;
+export default LocaleProvider;

package/dist/popover/README.md

@@ -0,0 +1,42 @@
+# Popover
+
+## Description
+
+`Popover` renders floating content anchored to a trigger element. It supports modal and non-modal interaction patterns, outside interaction handling, and configurable positioning.
+
+## Usage guidelines
+
+- Use `Popover.Root` to share open state and trigger reference.
+- Use `Popover.Trigger` when you want to auto-wire an existing button in children.
+- Use `Popover.TriggerButton` when you want a pre-wired trigger button component.
+- Use `Popover.Content` inside `Popover.Root`, or in standalone mode with `open`, `triggerRef`, and `onOpenChange`.
+- Configure `isNonModal`, `shouldCloseOnInteractOutside`, and `shouldCloseOnBlur` to match your interaction model.
+
+## onOpenChange details
+
+`Popover.Root` and standalone `Popover.Content` use:
+
+- `onOpenChange(open, details)`
+- `details.reason`: `trigger-press | imperative-action | none | escape-key | outside-press | focus-out | close-press`
+- `details.event?`: native event that triggered the change when available
+- `details.cancel()`: prevents the open-state transition
+- `details.isCanceled`: reflects cancellation state inside the callback
+
+## Anatomy
+
+Import the component and compose its parts:
+
+```svelte
+<Popover.Root>
+	<Popover.Trigger>
+		<button>Open</button>
+	</Popover.Trigger>
+	<Popover.Content>
+		<div>Content</div>
+	</Popover.Content>
+</Popover.Root>
+```
+
+- `Popover.Root`
+- `Popover.Trigger` or `Popover.TriggerButton`
+- `Popover.Content`

package/dist/popover/content/README.md

@@ -0,0 +1,25 @@
+# Popover Content
+
+## API reference
+
+### Popover.Content
+
+Name: `Popover.Content`  
+Description: Floating panel rendered in a portal. Supports context mode (`Popover.Root`) and standalone controlled mode.
+
+| Prop                           | Type                             | Default     | Description                                                                    |
+| ------------------------------ | -------------------------------- | ----------- | ------------------------------------------------------------------------------ |
+| `offset`                       | `number`                         | `8`         | Main-axis offset from the anchor element.                                      |
+| `placement`                    | `ExtendedPlacement`              | `'bottom'`  | Preferred floating placement.                                                  |
+| `shouldFlip`                   | `boolean`                        | `true`      | Enables automatic fallback placement when space is limited.                    |
+| `boundaryElement`              | `Element \| null`                | `null`      | Optional boundary element for positioning constraints.                         |
+| `children`                     | `Snippet`                        | `undefined` | Rendered popover panel content.                                                |
+| `class`                        | `string`                         | `''`        | CSS class names for the panel element.                                         |
+| `isNonModal`                   | `boolean`                        | `false`     | Disables modal behaviors (focus trap, scroll lock, outside aria hiding).       |
+| `shouldCloseOnInteractOutside` | `boolean`                        | `true`      | Closes when interacting outside the panel.                                     |
+| `shouldCloseOnEscape`          | `boolean`                        | `true`      | Closes on Escape key press.                                                    |
+| `shouldCloseOnBlur`            | `boolean`                        | `undefined` | Closes on focus leaving trigger/content. Defaults to `true` in non-modal mode. |
+| `open`                         | `boolean`                        | `undefined` | Controlled open state in standalone mode.                                      |
+| `triggerRef`                   | `HTMLElement \| null`            | `null`      | Trigger reference in standalone mode.                                          |
+| `onOpenChange`                 | `(open: boolean) => void`        | `undefined` | Open-state callback in standalone mode.                                        |
+| `...restProps`                 | `HTMLAttributes<HTMLDivElement>` | `-`         | Additional panel attributes.                                                   |

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Popover } from '../index';
+	import type { PopoverOpenChangeDetails } from '../root/context';
+
+	type Props = {
+		preventClose?: boolean;
+	};
+
+	let { preventClose = true }: Props = $props();
+
+	let open = $state(true);
+	let triggerRef = $state<HTMLElement | null>(null);
+
+	function handleOpenChange(nextOpen: boolean, details: PopoverOpenChangeDetails) {
+		if (!nextOpen && preventClose) {
+			details.cancel();
+		}
+		if (!details.isCanceled) {
+			open = nextOpen;
+		}
+	}
+</script>
+
+<button bind:this={triggerRef} type="button">Standalone Trigger</button>
+
+<Popover.Content {open} {triggerRef} onOpenChange={handleOpenChange}>
+	<div>Standalone content</div>
+</Popover.Content>

package/dist/popover/content/popover-content-standalone-test.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    preventClose?: boolean;
+};
+declare const PopoverContentStandaloneTest: import("svelte").Component<Props, {}, "">;
+type PopoverContentStandaloneTest = ReturnType<typeof PopoverContentStandaloneTest>;
+export default PopoverContentStandaloneTest;

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Popover } from '../index';
+	import type { PopoverOpenChangeDetails } from '../root/context';
 
 	type Props = {
 		open?: boolean;
@@ -8,7 +9,7 @@
 		shouldCloseOnInteractOutside?: boolean;
 		shouldCloseOnEscape?: boolean;
 		shouldCloseOnBlur?: boolean;
-		onOpenChange?: (open: boolean) => void;
+		onOpenChange?: (open: boolean, details: PopoverOpenChangeDetails) => void;
 	};
 
 	let {

package/dist/popover/content/popover-content-test.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { PopoverOpenChangeDetails } from '../root/context';
 type Props = {
     open?: boolean;
     defaultOpen?: boolean;
@@ -5,7 +6,7 @@ type Props = {
     shouldCloseOnInteractOutside?: boolean;
     shouldCloseOnEscape?: boolean;
     shouldCloseOnBlur?: boolean;
-    onOpenChange?: (open: boolean) => void;
+    onOpenChange?: (open: boolean, details: PopoverOpenChangeDetails) => void;
 };
 declare const PopoverContentTest: import("svelte").Component<Props, {}, "">;
 type PopoverContentTest = ReturnType<typeof PopoverContentTest>;