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

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

@@ -3,6 +3,10 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { useListBoxContext } from '../root/context';
 	import { onMount, onDestroy } from 'svelte';
+	import {
+		shouldShowFocusVisible,
+		trackInteractionModality
+	} from '../../primitives/input-modality';
 
 	/**
 	 * Props for the ListBox.Item component.
@@ -26,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). */
@@ -34,6 +40,8 @@
 		scrollOnFocus?: boolean;
 		/** Additional disabled state from parent. */
 		isParentDisabled?: boolean;
+		/** Override the visual pressed state. When provided, this value is used instead of internal press tracking. */
+		pressed?: boolean;
 	};
 
 	let {
@@ -46,10 +54,12 @@
 		customId,
 		disableFocusHandling = false,
 		isFocusedOverride,
+		isFocusVisibleOverride,
 		onItemSelect,
 		onResolvedTextValue,
 		scrollOnFocus = false,
 		isParentDisabled = false,
+		pressed: pressedOverride,
 		...restProps
 	}: ListBoxItemProps = $props();
 
@@ -58,7 +68,10 @@
 	let elementRef: HTMLElement;
 	let isSelected = $state(false);
 	let isFocused = $state(false);
+	let isFocusVisible = $state(false);
 	let isHovered = $state(false);
+	let isPressed = $state(false);
+	let pressedKey: 'Enter' | 'Space' | null = $state(null);
 
 	// Focus: use override if provided, otherwise use internal state
 	const isFocusedComputed = $derived(
@@ -67,6 +80,14 @@
 	const isDisabledComputed = $derived(
 		disabled || listboxCtx.disabledIds.has(id) || isParentDisabled
 	);
+	const isPressedComputed = $derived(
+		pressedOverride !== undefined
+			? 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}`);
@@ -113,6 +134,18 @@
 		}
 	});
 
+	$effect(() => {
+		if (!isDisabledComputed) return;
+		clearPressedState();
+		isHovered = false;
+		isFocusVisible = false;
+	});
+
+	function clearPressedState() {
+		isPressed = false;
+		pressedKey = null;
+	}
+
 	function handleClick() {
 		if (isDisabledComputed) return;
 
@@ -128,12 +161,55 @@
 	}
 
 	function handleFocus() {
+		if (isDisabledComputed) return;
+		isFocusVisible = shouldShowFocusVisible(elementRef);
 		if (!disableFocusHandling) {
 			listboxCtx.setFocusedId(id);
 		}
 	}
 
-	function handleBlur() {}
+	function handleBlur() {
+		isFocusVisible = false;
+	}
+
+	function handlePointerDown(event: PointerEvent) {
+		trackInteractionModality(event, elementRef);
+		isFocusVisible = false;
+
+		if (isDisabledComputed) {
+			event.preventDefault();
+			clearPressedState();
+			return;
+		}
+
+		if (event.button !== 0) return;
+		isPressed = true;
+		pressedKey = null;
+	}
+
+	function handlePointerUp(event: PointerEvent) {
+		if (event.button !== 0) return;
+		isPressed = false;
+		pressedKey = null;
+	}
+
+	function handlePointerCancel() {
+		clearPressedState();
+	}
+
+	function handlePointerEnter(event: PointerEvent) {
+		if (isDisabledComputed) return;
+
+		if ((event.buttons & 1) === 1 && pressedKey === null) {
+			isPressed = true;
+		}
+	}
+
+	function handlePointerLeave() {
+		if (pressedKey === null) {
+			isPressed = false;
+		}
+	}
 
 	function handleMouseEnter() {
 		if (!isDisabledComputed) {
@@ -143,17 +219,88 @@
 
 	function handleMouseLeave() {
 		isHovered = false;
+		if (pressedKey === null) {
+			isPressed = false;
+		}
 	}
 
 	// Keyboard is handled by parent container
-	function handleKeydown() {}
+	function handleKeydown(event: KeyboardEvent) {
+		trackInteractionModality(event, elementRef);
+		if (isFocusedComputed) {
+			isFocusVisible = true;
+		}
+
+		const key =
+			event.key === 'Enter'
+				? 'Enter'
+				: event.key === ' ' || event.key === 'Spacebar'
+					? 'Space'
+					: null;
+
+		if (!key) return;
+
+		if (isDisabledComputed) {
+			event.preventDefault();
+			clearPressedState();
+			return;
+		}
+
+		if (event.repeat && isPressed && pressedKey === key) return;
+
+		isPressed = true;
+		pressedKey = key;
+	}
+
+	function handleKeyup(event: KeyboardEvent) {
+		const key =
+			event.key === 'Enter'
+				? 'Enter'
+				: event.key === ' ' || event.key === 'Spacebar'
+					? 'Space'
+					: null;
+
+		if (!key) return;
+
+		if (isDisabledComputed) {
+			event.preventDefault();
+			clearPressedState();
+			return;
+		}
+
+		if (pressedKey === key) {
+			clearPressedState();
+		}
+	}
+
 	function handleMouseDown(event: MouseEvent) {
+		trackInteractionModality(event, elementRef);
+		isFocusVisible = false;
+
 		// Prevent focus stealing when used in ComboBox (disableFocusHandling=true)
 		// This keeps the focus on the input while allowing click selection
+		if (isDisabledComputed) {
+			event.preventDefault();
+			clearPressedState();
+			return;
+		}
+
+		if (event.button === 0) {
+			isPressed = true;
+			pressedKey = null;
+		}
+
 		if (disableFocusHandling) {
 			event.preventDefault();
 		}
 	}
+
+	function handleMouseUp(event: MouseEvent) {
+		if (event.button !== 0) return;
+		if (pressedKey === null) {
+			clearPressedState();
+		}
+	}
 </script>
 
 <div
@@ -170,10 +317,19 @@
 	data-selected={isSelected || undefined}
 	data-disabled={isDisabledComputed || undefined}
 	data-focused={isFocusedComputed || undefined}
+	data-focus-visible={isFocusVisibleComputed || undefined}
 	data-hovered={isHovered || undefined}
+	data-pressed={isPressedComputed || undefined}
+	onpointerdown={handlePointerDown}
+	onpointerup={handlePointerUp}
+	onpointercancel={handlePointerCancel}
+	onpointerenter={handlePointerEnter}
+	onpointerleave={handlePointerLeave}
 	onmousedown={handleMouseDown}
+	onmouseup={handleMouseUp}
 	onclick={handleClick}
 	onkeydown={handleKeydown}
+	onkeyup={handleKeyup}
 	onfocus={handleFocus}
 	onblur={handleBlur}
 	onmouseenter={handleMouseEnter}

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). */
@@ -28,6 +30,8 @@ type ListBoxItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'children'>
     scrollOnFocus?: boolean;
     /** Additional disabled state from parent. */
     isParentDisabled?: boolean;
+    /** Override the visual pressed state. When provided, this value is used instead of internal press tracking. */
+    pressed?: boolean;
 };
 declare const ListboxItem: import("svelte").Component<ListBoxItemProps, {}, "">;
 type ListboxItem = ReturnType<typeof ListboxItem>;

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-test.svelte

@@ -5,9 +5,17 @@
 		selectionMode?: 'single' | 'multiple';
 		selectionBehavior?: 'toggle' | 'replace';
 		disabledIds?: Iterable<string | number>;
+		pressedIds?: Iterable<string | number>;
 	};
 
-	let { selectionMode = 'single', selectionBehavior = 'toggle', disabledIds }: Props = $props();
+	let {
+		selectionMode = 'single',
+		selectionBehavior = 'toggle',
+		disabledIds,
+		pressedIds
+	}: Props = $props();
+
+	const pressedIdSet = $derived(new Set(pressedIds ?? []));
 
 	const fruits = [
 		{ id: 'apple', name: 'Apple' },
@@ -20,7 +28,11 @@
 
 <ListBox.Root {selectionMode} {selectionBehavior} {disabledIds} aria-label="Fruits list">
 	{#each fruits as fruit (fruit.id)}
-		<ListBox.Item id={fruit.id} textValue={fruit.name}>
+		<ListBox.Item
+			id={fruit.id}
+			textValue={fruit.name}
+			pressed={pressedIdSet.has(fruit.id) ? true : undefined}
+		>
 			{fruit.name}
 		</ListBox.Item>
 	{/each}

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

@@ -2,6 +2,7 @@ type Props = {
     selectionMode?: 'single' | 'multiple';
     selectionBehavior?: 'toggle' | 'replace';
     disabledIds?: Iterable<string | number>;
+    pressedIds?: Iterable<string | number>;
 };
 declare const ListboxTest: import("svelte").Component<Props, {}, "">;
 type ListboxTest = ReturnType<typeof ListboxTest>;

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/listbox/root/listbox.svelte.d.ts

@@ -31,7 +31,7 @@ declare function $$render<T extends object = object>(): {
         element?: HTMLElement;
     };
     exports: {};
-    bindings: "value" | "context" | "element";
+    bindings: "value" | "element" | "context";
     slots: {};
     events: {};
 };
@@ -39,7 +39,7 @@ declare class __sveltets_Render<T extends object = object> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "value" | "context" | "element";
+    bindings(): "value" | "element" | "context";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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,36 @@
+# 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.                                                   |
+
+## Styling state
+
+`Popover.Content` exposes RAC-style data attributes that can drive CSS or Tailwind animation utilities:
+
+- `data-state="open" | "closed"`
+- `data-entering`
+- `data-exiting`
+- `data-placement="top" | "right" | "bottom" | "left"`
+
+Exit animations keep the panel mounted until the element's own CSS transition or animation finishes. If no motion is defined, the panel unmounts immediately.