@human-kit/svelte-components 1.0.0-alpha.2 → 1.0.0-alpha.4

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

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

@@ -4,12 +4,21 @@
 	import { onMount, onDestroy } from 'svelte';
 	import { browser } from '$app/environment';
 	import { floating, type ExtendedPlacement } from '../../primitives/floating';
-	import { focusTrap } from '../../primitives/focus-trap';
+	import { focusTrap, type FocusTrapOptions } from '../../primitives/focus-trap';
 	import { scrollLock } from '../../primitives/scroll-lock';
 	import { clickOutside } from '../../primitives/click-outside';
 	import { ariaHideOutside } from '../../primitives/aria-hide-outside';
 	import { Portal } from '../../portal';
-	import { getPopoverContext } from '../root/context';
+	import {
+		getPopoverContext,
+		type PopoverOpenChangeDetails,
+		type PopoverCloseReason
+	} from '../root/context';
+	import {
+		addTriggerBlurCleanup,
+		applyTriggerCloseFocusState,
+		clearTriggerFocusState
+	} from '../root/focus-state';
 
 	/**
 	 * Popover.Content - The floating content panel.
@@ -36,13 +45,15 @@
 		shouldCloseOnEscape?: boolean;
 		/** Whether losing focus (blur) should close the popover. Defaults to true for non-modal popovers. */
 		shouldCloseOnBlur?: boolean;
+		/** Element or selector to focus first when modal trap activates. */
+		initialFocus?: FocusTrapOptions['initialFocus'];
 		// Standalone mode props (used when not inside Popover.Root)
 		/** Controlled open state (standalone mode). */
 		open?: boolean;
 		/** Reference to the trigger element (standalone mode). */
 		triggerRef?: HTMLElement | null;
 		/** Callback when open state changes (standalone mode). */
-		onOpenChange?: (open: boolean) => void;
+		onOpenChange?: (open: boolean, details: PopoverOpenChangeDetails) => void;
 	} & Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'children'>;
 
 	let {
@@ -56,6 +67,7 @@
 		shouldCloseOnInteractOutside = true,
 		shouldCloseOnEscape = true,
 		shouldCloseOnBlur,
+		initialFocus,
 		// Standalone mode props
 		open: openProp,
 		triggerRef: triggerRefProp = null,
@@ -73,28 +85,64 @@
 	const shouldCloseOnBlurResolved = $derived(shouldCloseOnBlur ?? isNonModal);
 
 	let popoverRef: HTMLElement | undefined = $state();
+	let cleanupStandaloneTriggerBlurListener: (() => void) | undefined;
+	let pendingStandaloneTriggerCloseFocusFrame: number | undefined;
+	let trackedStandaloneTrigger: HTMLElement | null = null;
+
+	function clearPendingStandaloneTriggerCloseFocus() {
+		if (pendingStandaloneTriggerCloseFocusFrame === undefined) return;
+		cancelAnimationFrame(pendingStandaloneTriggerCloseFocusFrame);
+		pendingStandaloneTriggerCloseFocusFrame = undefined;
+	}
 
-	function close() {
-		if (isStandalone) {
-			onOpenChangeProp?.(false);
-			triggerRefProp?.focus();
-		} else {
-			ctx!.close();
-		}
+	function clearStandaloneTriggerTracking() {
+		clearPendingStandaloneTriggerCloseFocus();
+		cleanupStandaloneTriggerBlurListener?.();
+		cleanupStandaloneTriggerBlurListener = undefined;
 	}
 
-	function handleOpenChange(value: boolean) {
+	function applyStandaloneTriggerCloseState(
+		trigger: HTMLElement,
+		reason: PopoverCloseReason,
+		event?: Event
+	) {
+		clearStandaloneTriggerTracking();
+		pendingStandaloneTriggerCloseFocusFrame = requestAnimationFrame(() => {
+			pendingStandaloneTriggerCloseFocusFrame = undefined;
+			if (!trigger.isConnected) return;
+			applyTriggerCloseFocusState(trigger, reason, event);
+			cleanupStandaloneTriggerBlurListener = addTriggerBlurCleanup(trigger, true);
+		});
+	}
+
+	function close(reason: PopoverCloseReason = 'imperative-action', event?: Event) {
 		if (isStandalone) {
-			onOpenChangeProp?.(value);
+			let canceled = false;
+			const details: PopoverOpenChangeDetails = {
+				reason,
+				event,
+				cancel: () => {
+					canceled = true;
+				},
+				get isCanceled() {
+					return canceled;
+				}
+			};
+
+			onOpenChangeProp?.(false, details);
+			if (details.isCanceled) return;
+			if (triggerRefProp) {
+				applyStandaloneTriggerCloseState(triggerRefProp, reason, event);
+			}
 		} else {
-			ctx!.onOpenChange(value);
+			ctx!.close(reason, event);
 		}
 	}
 
 	function handleKeydown(event: KeyboardEvent) {
 		if (event.key === 'Escape' && isOpen && shouldCloseOnEscape) {
 			event.preventDefault();
-			close();
+			close('escape-key', event);
 		}
 	}
 
@@ -107,7 +155,7 @@
 		const focusInTrigger = triggerRef?.contains(target) || target === triggerRef;
 
 		if (!focusInPopover && !focusInTrigger) {
-			handleOpenChange(false);
+			close('focus-out', event);
 		}
 	}
 
@@ -121,10 +169,28 @@
 
 		// Only close on external scroll
 		if (!isInsidePopover && !isInsideTrigger) {
-			close();
+			close('outside-press', event);
 		}
 	}
 
+	$effect(() => {
+		if (!isStandalone) {
+			if (trackedStandaloneTrigger) {
+				clearTriggerFocusState(trackedStandaloneTrigger);
+			}
+			trackedStandaloneTrigger = null;
+			clearStandaloneTriggerTracking();
+			return;
+		}
+
+		if (trackedStandaloneTrigger && trackedStandaloneTrigger !== triggerRefProp) {
+			clearTriggerFocusState(trackedStandaloneTrigger);
+			clearStandaloneTriggerTracking();
+		}
+
+		trackedStandaloneTrigger = triggerRefProp;
+	});
+
 	onMount(() => {
 		if (!browser) return;
 		document.addEventListener('keydown', handleKeydown);
@@ -134,6 +200,10 @@
 
 	onDestroy(() => {
 		if (!browser) return;
+		if (trackedStandaloneTrigger) {
+			clearTriggerFocusState(trackedStandaloneTrigger);
+		}
+		clearStandaloneTriggerTracking();
 		document.removeEventListener('keydown', handleKeydown);
 		document.removeEventListener('focusin', handleDocumentFocusIn);
 		document.removeEventListener('scroll', handleScroll, true);
@@ -149,11 +219,14 @@
 			aria-modal={isModal}
 			use:floating={{ anchor: triggerRef, offset, placement, shouldFlip, boundaryElement }}
 			use:clickOutside={{
-				handler: close,
+				handler: (event) => {
+					event.preventDefault();
+					close('outside-press', event);
+				},
 				enabled: shouldCloseOnInteractOutside,
 				ignore: [triggerRef]
 			}}
-			use:focusTrap={isModal}
+			use:focusTrap={{ enabled: isModal, restoreFocus: false, initialFocus }}
 			use:scrollLock={isModal}
 			use:ariaHideOutside={isModal}
 			style="position: fixed; z-index: 9999;"

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

@@ -1,6 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import { type ExtendedPlacement } from '../../primitives/floating';
+import { type FocusTrapOptions } from '../../primitives/focus-trap';
+import { type PopoverOpenChangeDetails } from '../root/context';
 /**
  * Popover.Content - The floating content panel.
  * Can be used inside Popover.Root (reads context) or standalone (props required).
@@ -26,12 +28,14 @@ type PopoverContentProps = {
     shouldCloseOnEscape?: boolean;
     /** Whether losing focus (blur) should close the popover. Defaults to true for non-modal popovers. */
     shouldCloseOnBlur?: boolean;
+    /** Element or selector to focus first when modal trap activates. */
+    initialFocus?: FocusTrapOptions['initialFocus'];
     /** Controlled open state (standalone mode). */
     open?: boolean;
     /** Reference to the trigger element (standalone mode). */
     triggerRef?: HTMLElement | null;
     /** Callback when open state changes (standalone mode). */
-    onOpenChange?: (open: boolean) => void;
+    onOpenChange?: (open: boolean, details: PopoverOpenChangeDetails) => void;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'children'>;
 declare const PopoverContent: import("svelte").Component<PopoverContentProps, {}, "">;
 type PopoverContent = ReturnType<typeof PopoverContent>;

package/dist/popover/index.d.ts

@@ -3,6 +3,6 @@ export { default as PopoverRoot } from './root/popover-root.svelte';
 export { default as PopoverContent } from './content/popover-content.svelte';
 export { default as PopoverTrigger } from './trigger/popover-trigger.svelte';
 export { default as PopoverTriggerButton } from './trigger/popover-trigger-button.svelte';
-export { getPopoverContext, setPopoverContext, type PopoverContext, getPopoverTriggerContext, setPopoverTriggerContext, type PopoverTriggerContext } from './root/context.ts';
+export { getPopoverContext, setPopoverContext, type PopoverContext, type PopoverCanonicalCloseReason, type PopoverCloseReason, type PopoverOpenReason, type PopoverChangeReason, type PopoverOpenChangeDetails } from './root/context.ts';
 import * as PopoverParts from './index.parts.ts';
 export default PopoverParts;

package/dist/popover/index.js

@@ -6,9 +6,7 @@ export { default as PopoverContent } from './content/popover-content.svelte';
 export { default as PopoverTrigger } from './trigger/popover-trigger.svelte';
 export { default as PopoverTriggerButton } from './trigger/popover-trigger-button.svelte';
 // Context and types
-export { getPopoverContext, setPopoverContext, 
-// Legacy aliases
-getPopoverTriggerContext, setPopoverTriggerContext } from './root/context.ts';
+export { getPopoverContext, setPopoverContext } from './root/context.ts';
 // Default export as namespace object
 import * as PopoverParts from './index.parts.ts';
 export default PopoverParts;

package/dist/popover/root/README.md

@@ -7,24 +7,19 @@
 Name: `Popover.Root`  
 Description: Root state container that controls open state, trigger ref, and toggle/open/close actions.
 
-| Prop           | Type                      | Default     | Description                                    |
-| -------------- | ------------------------- | ----------- | ---------------------------------------------- |
-| `open`         | `boolean`                 | `undefined` | Controlled open state. Supports `bind:open`.   |
-| `defaultOpen`  | `boolean`                 | `false`     | Initial open state in uncontrolled mode.       |
-| `onOpenChange` | `(open: boolean) => void` | `undefined` | Called whenever open state changes.            |
-| `triggerRef`   | `HTMLElement \| null`     | `null`      | Trigger reference. Supports `bind:triggerRef`. |
-| `children`     | `Snippet`                 | `undefined` | Composed trigger and content parts.            |
+- `open`: `boolean` (default: `undefined`) — Controlled open state. Supports `bind:open`.
+- `defaultOpen`: `boolean` (default: `false`) — Initial open state in uncontrolled mode.
+- `onOpenChange`: `(open: boolean, details) => void` (default: `undefined`) — Called whenever open state changes. `details` includes `reason`, optional `event`, `cancel()`, and `isCanceled`.
+- `triggerRef`: `HTMLElement | null` (default: `null`) — Trigger reference. Supports `bind:triggerRef`.
+- `children`: `Snippet` (default: `undefined`) — Composed trigger and content parts.
 
 ### Context utilities
 
 Name: `context.ts` helpers  
 Description: Context APIs used by trigger and content parts.
 
-| Prop                       | Type                                | Default             | Description                              |
-| -------------------------- | ----------------------------------- | ------------------- | ---------------------------------------- |
-| `setPopoverContext`        | `(ctx: PopoverContext) => void`     | `-`                 | Registers popover context.               |
-| `getPopoverContext`        | `() => PopoverContext \| undefined` | `-`                 | Returns popover context when available.  |
-| `PopoverContext`           | `type`                              | `-`                 | Context contract with state and actions. |
-| `PopoverTriggerContext`    | `type alias`                        | `PopoverContext`    | Backward-compatible alias.               |
-| `setPopoverTriggerContext` | `alias`                             | `setPopoverContext` | Backward-compatible alias.               |
-| `getPopoverTriggerContext` | `alias`                             | `getPopoverContext` | Backward-compatible alias.               |
+| Prop                | Type                                | Default | Description                              |
+| ------------------- | ----------------------------------- | ------- | ---------------------------------------- |
+| `setPopoverContext` | `(ctx: PopoverContext) => void`     | `-`     | Registers popover context.               |
+| `getPopoverContext` | `() => PopoverContext \| undefined` | `-`     | Returns popover context when available.  |
+| `PopoverContext`    | `type`                              | `-`     | Context contract with state and actions. |

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

@@ -1,7 +1,19 @@
+export type PopoverCanonicalCloseReason = 'escape-key' | 'outside-press' | 'focus-out' | 'close-press' | 'imperative-action' | 'none';
+export type PopoverCloseReason = PopoverCanonicalCloseReason;
+export type PopoverOpenReason = 'trigger-press' | 'imperative-action' | 'none';
+export type PopoverChangeReason = PopoverOpenReason | PopoverCloseReason;
+export type PopoverOpenChangeDetails = {
+    reason: PopoverChangeReason;
+    event?: Event;
+    cancel: () => void;
+    isCanceled: boolean;
+};
 /**
  * Context shared between Popover components (Root, Trigger, Content).
  */
 export type PopoverContext = {
+    /** Reason why popover is closing */
+    closeReason: PopoverCanonicalCloseReason;
     /** Whether the popover is open */
     isOpen: boolean;
     /** Reference to the trigger element */
@@ -9,16 +21,13 @@ export type PopoverContext = {
     /** Set the trigger ref (used by Trigger component) */
     setTriggerRef: (el: HTMLElement | null) => void;
     /** Toggle popover open state */
-    toggle: () => void;
+    toggle: (reason?: PopoverOpenReason, event?: Event) => void;
     /** Open the popover */
-    open: () => void;
+    open: (reason?: PopoverOpenReason, event?: Event) => void;
     /** Close the popover and return focus to trigger */
-    close: () => void;
+    close: (reason?: PopoverCloseReason, event?: Event) => void;
     /** Called when popover open state changes */
-    onOpenChange: (open: boolean) => void;
+    onOpenChange: (open: boolean, details: PopoverOpenChangeDetails) => void;
 };
 export declare function setPopoverContext(ctx: PopoverContext): void;
 export declare function getPopoverContext(): PopoverContext | undefined;
-export type PopoverTriggerContext = PopoverContext;
-export declare const setPopoverTriggerContext: typeof setPopoverContext;
-export declare const getPopoverTriggerContext: typeof getPopoverContext;

package/dist/popover/root/context.js

@@ -6,5 +6,3 @@ export function setPopoverContext(ctx) {
 export function getPopoverContext() {
     return getContext(POPOVER_CONTEXT_KEY);
 }
-export const setPopoverTriggerContext = setPopoverContext;
-export const getPopoverTriggerContext = getPopoverContext;

package/dist/popover/root/focus-state.d.ts

@@ -0,0 +1,4 @@
+import type { PopoverCloseReason } from './context';
+export declare function clearTriggerFocusState(trigger: HTMLElement): void;
+export declare function applyTriggerCloseFocusState(trigger: HTMLElement, reason: PopoverCloseReason, event?: Event): void;
+export declare function addTriggerBlurCleanup(trigger: HTMLElement, once?: boolean): () => void;

package/dist/popover/root/focus-state.js

@@ -0,0 +1,33 @@
+import { focusWithModality, resolveCloseInteractionModality } from '../../primitives/input-modality';
+export function clearTriggerFocusState(trigger) {
+    delete trigger.dataset.focused;
+    delete trigger.dataset.focusVisible;
+}
+export function applyTriggerCloseFocusState(trigger, reason, event) {
+    const closeModality = resolveCloseInteractionModality(reason, event);
+    focusWithModality(trigger, closeModality);
+    if (reason === 'outside-press' || reason === 'escape-key') {
+        trigger.dataset.focused = 'true';
+    }
+    else {
+        delete trigger.dataset.focused;
+    }
+    if (closeModality === 'keyboard') {
+        trigger.dataset.focusVisible = 'true';
+    }
+    else {
+        delete trigger.dataset.focusVisible;
+    }
+}
+export function addTriggerBlurCleanup(trigger, once = false) {
+    const handleBlur = () => {
+        clearTriggerFocusState(trigger);
+        if (once) {
+            trigger.removeEventListener('blur', handleBlur);
+        }
+    };
+    trigger.addEventListener('blur', handleBlur);
+    return () => {
+        trigger.removeEventListener('blur', handleBlur);
+    };
+}

package/dist/popover/root/popover-root.svelte

@@ -1,6 +1,20 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { setPopoverContext, type PopoverContext } from './context';
+	import { onDestroy } from 'svelte';
+	import {
+		setPopoverContext,
+		type PopoverCanonicalCloseReason,
+		type PopoverChangeReason,
+		type PopoverCloseReason,
+		type PopoverOpenChangeDetails,
+		type PopoverOpenReason,
+		type PopoverContext
+	} from './context';
+	import {
+		addTriggerBlurCleanup,
+		applyTriggerCloseFocusState,
+		clearTriggerFocusState
+	} from './focus-state';
 
 	/**
 	 * Popover.Root - State management wrapper for Popover components.
@@ -12,7 +26,7 @@
 		/** Initial open state for uncontrolled mode. */
 		defaultOpen?: boolean;
 		/** Callback when open state changes. */
-		onOpenChange?: (open: boolean) => void;
+		onOpenChange?: (open: boolean, details: PopoverOpenChangeDetails) => void;
 		/** Reference to the trigger element. Can be set manually or via Popover.Trigger. */
 		triggerRef?: HTMLElement | null;
 		/** Children (Trigger and Content) */
@@ -26,6 +40,9 @@
 		triggerRef = $bindable<HTMLElement | null>(null),
 		children
 	}: PopoverRootProps = $props();
+	let closeReason: PopoverCanonicalCloseReason = $state('none');
+	let cleanupTriggerBlurListener: (() => void) | undefined;
+	let pendingTriggerCloseFocusFrame: number | undefined;
 
 	// Use function to capture initial value only (not reactive)
 	let isOpenInternal = $state((() => defaultOpen)());
@@ -33,39 +50,90 @@
 	const isControlled = $derived(open !== undefined);
 	const isOpen = $derived(isControlled ? open! : isOpenInternal);
 
-	function setOpen(value: boolean) {
-		if (isControlled) {
-			onOpenChange?.(value);
-		} else {
+	function setOpenWithDetails(
+		value: boolean,
+		incomingDetails: { reason: PopoverChangeReason; event?: Event }
+	) {
+		let canceled = false;
+		const details: PopoverOpenChangeDetails = {
+			reason: incomingDetails.reason,
+			event: incomingDetails.event,
+			cancel: () => {
+				canceled = true;
+			},
+			get isCanceled() {
+				return canceled;
+			}
+		};
+
+		onOpenChange?.(value, details);
+		if (details.isCanceled) return;
+
+		if (!isControlled) {
 			isOpenInternal = value;
-			onOpenChange?.(value);
 		}
-		// Sync bindable prop
+
 		open = value;
 	}
 
-	function toggle() {
-		setOpen(!isOpen);
+	function toggle(reason: PopoverOpenReason = 'trigger-press', event?: Event) {
+		setOpenWithDetails(!isOpen, { reason, event });
+	}
+
+	function openPopover(reason: PopoverOpenReason = 'imperative-action', event?: Event) {
+		closeReason = 'none';
+		setOpenWithDetails(true, { reason, event });
 	}
 
-	function openPopover() {
-		setOpen(true);
+	function clearPendingTriggerCloseFocus() {
+		if (pendingTriggerCloseFocusFrame === undefined) return;
+		cancelAnimationFrame(pendingTriggerCloseFocusFrame);
+		pendingTriggerCloseFocusFrame = undefined;
 	}
 
-	function closePopover() {
-		setOpen(false);
-		triggerRef?.focus();
+	function scheduleTriggerCloseFocus(
+		trigger: HTMLElement,
+		reason: PopoverCanonicalCloseReason,
+		event?: Event
+	) {
+		clearPendingTriggerCloseFocus();
+		pendingTriggerCloseFocusFrame = requestAnimationFrame(() => {
+			pendingTriggerCloseFocusFrame = undefined;
+			if (!trigger.isConnected) return;
+			applyTriggerCloseFocusState(trigger, reason, event);
+		});
+	}
+
+	function closePopover(reason: PopoverCloseReason = 'imperative-action', event?: Event) {
+		closeReason = reason;
+		const wasOpen = isOpen;
+		setOpenWithDetails(false, { reason, event });
+		if (!wasOpen || isOpen) return;
+		if (!triggerRef) return;
+		scheduleTriggerCloseFocus(triggerRef, reason, event);
 	}
 
 	function setTriggerRef(el: HTMLElement | null) {
+		clearPendingTriggerCloseFocus();
+		cleanupTriggerBlurListener?.();
+		cleanupTriggerBlurListener = undefined;
+		if (triggerRef && triggerRef !== el) {
+			clearTriggerFocusState(triggerRef);
+		}
 		triggerRef = el;
+		if (!triggerRef) return;
+		const currentTrigger = triggerRef;
+		cleanupTriggerBlurListener = addTriggerBlurCleanup(currentTrigger);
 	}
 
-	function handleOpenChange(newOpen: boolean) {
-		setOpen(newOpen);
+	function handleOpenChange(newOpen: boolean, details: PopoverOpenChangeDetails) {
+		setOpenWithDetails(newOpen, { reason: details.reason, event: details.event });
 	}
 
 	const ctx: PopoverContext = {
+		get closeReason() {
+			return closeReason;
+		},
 		get isOpen() {
 			return isOpen;
 		},
@@ -80,6 +148,11 @@
 	};
 
 	setPopoverContext(ctx);
+
+	onDestroy(() => {
+		clearPendingTriggerCloseFocus();
+		cleanupTriggerBlurListener?.();
+	});
 </script>
 
 {#if children}

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import { type PopoverOpenChangeDetails } from './context';
 /**
  * Popover.Root - State management wrapper for Popover components.
  * Provides context for Trigger and Content children.
@@ -9,7 +10,7 @@ type PopoverRootProps = {
     /** Initial open state for uncontrolled mode. */
     defaultOpen?: boolean;
     /** Callback when open state changes. */
-    onOpenChange?: (open: boolean) => void;
+    onOpenChange?: (open: boolean, details: PopoverOpenChangeDetails) => void;
     /** Reference to the trigger element. Can be set manually or via Popover.Trigger. */
     triggerRef?: HTMLElement | null;
     /** Children (Trigger and Content) */

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

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

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

@@ -1,10 +1,11 @@
+import type { PopoverOpenChangeDetails } from './context';
 type Props = {
     open?: boolean;
     defaultOpen?: boolean;
     isNonModal?: boolean;
     shouldCloseOnInteractOutside?: boolean;
     shouldCloseOnEscape?: boolean;
-    onOpenChange?: (open: boolean) => void;
+    onOpenChange?: (open: boolean, details: PopoverOpenChangeDetails) => void;
 };
 declare const PopoverTest: import("svelte").Component<Props, {}, "">;
 type PopoverTest = ReturnType<typeof PopoverTest>;

package/dist/popover/trigger/popover-trigger-button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { getPopoverTriggerContext } from '../root/context';
+	import { getPopoverContext } from '../root/context';
 
 	type PopoverTriggerButtonProps = Omit<
 		HTMLButtonAttributes,
@@ -17,7 +17,7 @@
 	let { children, class: className = '', ...restProps }: PopoverTriggerButtonProps = $props();
 
 	let buttonRef: HTMLButtonElement | null = $state(null);
-	const ctx = getPopoverTriggerContext();
+	const ctx = getPopoverContext();
 
 	$effect(() => {
 		if (buttonRef && ctx) {
@@ -25,8 +25,8 @@
 		}
 	});
 
-	function handleClick() {
-		ctx?.toggle();
+	function handleClick(event: MouseEvent) {
+		ctx?.toggle('trigger-press', event);
 	}
 </script>