INIT

node_modules/bits-ui/dist/bits/popover/components/popover-arrow.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { PopoverArrowProps } from "../types.js";
+	import FloatingLayerArrow from "../../utilities/floating-layer/components/floating-layer-arrow.svelte";
+
+	let { ref = $bindable(null), ...restProps }: PopoverArrowProps = $props();
+</script>
+
+<FloatingLayerArrow bind:ref {...restProps} data-popover-arrow="" />

node_modules/bits-ui/dist/bits/popover/components/popover-arrow.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const PopoverArrow: import("svelte").Component<import("../../utilities/arrow/types.js").ArrowProps, {}, "ref">;
+type PopoverArrow = ReturnType<typeof PopoverArrow>;
+export default PopoverArrow;

node_modules/bits-ui/dist/bits/popover/components/popover-close.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { PopoverCloseProps } from "../types.js";
+	import { PopoverCloseState } from "../popover.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		child,
+		children,
+		id = createId(uid),
+		ref = $bindable(null),
+		...restProps
+	}: PopoverCloseProps = $props();
+
+	const closeState = PopoverCloseState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+	const mergedProps = $derived(mergeProps(restProps, closeState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}

node_modules/bits-ui/dist/bits/popover/components/popover-close.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PopoverCloseProps } from "../types.js";
+declare const PopoverClose: import("svelte").Component<PopoverCloseProps, {}, "ref">;
+type PopoverClose = ReturnType<typeof PopoverClose>;
+export default PopoverClose;

node_modules/bits-ui/dist/bits/popover/components/popover-content-static.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { PopoverContentStaticProps } from "../types.js";
+	import { PopoverContentState } from "../popover.svelte.js";
+	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
+	import { noop } from "../../../internal/noop.js";
+	import { createId } from "../../../internal/create-id.js";
+	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
+	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
+
+	const uid = $props.id();
+
+	let {
+		child,
+		children,
+		ref = $bindable(null),
+		id = createId(uid),
+		forceMount = false,
+		onCloseAutoFocus = noop,
+		onEscapeKeydown = noop,
+		onInteractOutside = noop,
+		trapFocus = true,
+		preventScroll = false,
+		style,
+		...restProps
+	}: PopoverContentStaticProps = $props();
+
+	const contentState = PopoverContentState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		onEscapeKeydown: boxWith(() => onEscapeKeydown),
+		customAnchor: boxWith(() => null),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
+</script>
+
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		{...contentState.popperProps}
+		ref={contentState.opts.ref}
+		isStatic
+		enabled={contentState.root.opts.open.current}
+		{id}
+		{trapFocus}
+		{preventScroll}
+		loop
+		forceMount={true}
+		{onCloseAutoFocus}
+		shouldRender={contentState.shouldRender}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(
+				props,
+				{
+					style: getFloatingContentCSSVars("popover"),
+				},
+				{ style }
+			)}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		{...contentState.popperProps}
+		ref={contentState.opts.ref}
+		isStatic
+		open={contentState.root.opts.open.current}
+		{id}
+		{trapFocus}
+		{preventScroll}
+		loop
+		forceMount={false}
+		{onCloseAutoFocus}
+		shouldRender={contentState.shouldRender}
+	>
+		{#snippet popper({ props })}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("popover") },
+				{ style }
+			)}
+			{#if child}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...finalProps}>
+					{@render children?.()}
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayer>
+{/if}

node_modules/bits-ui/dist/bits/popover/components/popover-content-static.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PopoverContentStaticProps } from "../types.js";
+declare const PopoverContentStatic: import("svelte").Component<PopoverContentStaticProps, {}, "ref">;
+type PopoverContentStatic = ReturnType<typeof PopoverContentStatic>;
+export default PopoverContentStatic;

node_modules/bits-ui/dist/bits/popover/components/popover-content.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { PopoverContentProps } from "../types.js";
+	import { PopoverContentState } from "../popover.svelte.js";
+	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
+	import { noop } from "../../../internal/noop.js";
+	import { createId } from "../../../internal/create-id.js";
+	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
+	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
+
+	const uid = $props.id();
+
+	let {
+		child,
+		children,
+		ref = $bindable(null),
+		id = createId(uid),
+		forceMount = false,
+		onOpenAutoFocus = noop,
+		onCloseAutoFocus = noop,
+		onEscapeKeydown = noop,
+		onInteractOutside = noop,
+		trapFocus = true,
+		preventScroll = false,
+		customAnchor = null,
+		style,
+		...restProps
+	}: PopoverContentProps = $props();
+
+	const contentState = PopoverContentState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		onEscapeKeydown: boxWith(() => onEscapeKeydown),
+		customAnchor: boxWith(() => customAnchor),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
+
+	// respect user's trapFocus setting, but disable when hover-opened without interaction
+	const effectiveTrapFocus = $derived(trapFocus && contentState.shouldTrapFocus);
+
+	// prevent auto-focus when opened via hover until user interacts
+	function handleOpenAutoFocus(e: Event) {
+		if (!contentState.shouldTrapFocus) {
+			e.preventDefault();
+		}
+		onOpenAutoFocus(e);
+	}
+</script>
+
+{#if forceMount}
+	<PopperLayerForceMount
+		{...mergedProps}
+		{...contentState.popperProps}
+		ref={contentState.opts.ref}
+		enabled={contentState.root.opts.open.current}
+		{id}
+		trapFocus={effectiveTrapFocus}
+		{preventScroll}
+		loop
+		forceMount={true}
+		{customAnchor}
+		onOpenAutoFocus={handleOpenAutoFocus}
+		{onCloseAutoFocus}
+		shouldRender={contentState.shouldRender}
+	>
+		{#snippet popper({ props, wrapperProps })}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("popover") },
+				{ style }
+			)}
+			{#if child}
+				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...wrapperProps}>
+					<div {...finalProps}>
+						{@render children?.()}
+					</div>
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayerForceMount>
+{:else if !forceMount}
+	<PopperLayer
+		{...mergedProps}
+		{...contentState.popperProps}
+		ref={contentState.opts.ref}
+		open={contentState.root.opts.open.current}
+		{id}
+		trapFocus={effectiveTrapFocus}
+		{preventScroll}
+		loop
+		forceMount={false}
+		{customAnchor}
+		onOpenAutoFocus={handleOpenAutoFocus}
+		{onCloseAutoFocus}
+		shouldRender={contentState.shouldRender}
+	>
+		{#snippet popper({ props, wrapperProps })}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("popover") },
+				{ style }
+			)}
+			{#if child}
+				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
+			{:else}
+				<div {...wrapperProps}>
+					<div {...finalProps}>
+						{@render children?.()}
+					</div>
+				</div>
+			{/if}
+		{/snippet}
+	</PopperLayer>
+{/if}

node_modules/bits-ui/dist/bits/popover/components/popover-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PopoverContentProps } from "../types.js";
+declare const PopoverContent: import("svelte").Component<PopoverContentProps, {}, "ref">;
+type PopoverContent = ReturnType<typeof PopoverContent>;
+export default PopoverContent;

node_modules/bits-ui/dist/bits/popover/components/popover-overlay.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { PopoverOverlayState } from "../popover.svelte.js";
+	import type { PopoverOverlayProps } from "../types.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		forceMount = false,
+		child,
+		children,
+		ref = $bindable(null),
+		...restProps
+	}: PopoverOverlayProps = $props();
+
+	const overlayState = PopoverOverlayState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, overlayState.props));
+</script>
+
+{#if overlayState.shouldRender || forceMount}
+	{#if child}
+		{@render child({ props: mergeProps(mergedProps), ...overlayState.snippetProps })}
+	{:else}
+		<div {...mergeProps(mergedProps)}>
+			{@render children?.(overlayState.snippetProps)}
+		</div>
+	{/if}
+{/if}

node_modules/bits-ui/dist/bits/popover/components/popover-overlay.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PopoverOverlayProps } from "../types.js";
+declare const PopoverOverlay: import("svelte").Component<PopoverOverlayProps, {}, "ref">;
+type PopoverOverlay = ReturnType<typeof PopoverOverlay>;
+export default PopoverOverlay;

node_modules/bits-ui/dist/bits/popover/components/popover-trigger.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { PopoverTriggerProps } from "../types.js";
+	import { PopoverTriggerState } from "../popover.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+	import FloatingLayerAnchor from "../../utilities/floating-layer/components/floating-layer-anchor.svelte";
+
+	const uid = $props.id();
+
+	let {
+		children,
+		child,
+		id = createId(uid),
+		ref = $bindable(null),
+		type = "button",
+		disabled = false,
+		openOnHover = false,
+		openDelay = 700,
+		closeDelay = 300,
+		...restProps
+	}: PopoverTriggerProps = $props();
+
+	const triggerState = PopoverTriggerState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		disabled: boxWith(() => Boolean(disabled)),
+		openOnHover: boxWith(() => openOnHover),
+		openDelay: boxWith(() => openDelay),
+		closeDelay: boxWith(() => closeDelay),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
+</script>
+
+<FloatingLayerAnchor {id} ref={triggerState.opts.ref}>
+	{#if child}
+		{@render child({ props: mergedProps })}
+	{:else}
+		<button {...mergedProps}>
+			{@render children?.()}
+		</button>
+	{/if}
+</FloatingLayerAnchor>

node_modules/bits-ui/dist/bits/popover/components/popover-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PopoverTriggerProps } from "../types.js";
+declare const PopoverTrigger: import("svelte").Component<PopoverTriggerProps, {}, "ref">;
+type PopoverTrigger = ReturnType<typeof PopoverTrigger>;
+export default PopoverTrigger;

node_modules/bits-ui/dist/bits/popover/components/popover.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { boxWith } from "svelte-toolbelt";
+	import type { PopoverRootProps } from "../types.js";
+	import { PopoverRootState } from "../popover.svelte.js";
+	import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
+	import { noop } from "../../../internal/noop.js";
+
+	let {
+		open = $bindable(false),
+		onOpenChange = noop,
+		onOpenChangeComplete = noop,
+		children,
+	}: PopoverRootProps = $props();
+
+	PopoverRootState.create({
+		open: boxWith(
+			() => open,
+			(v) => {
+				open = v;
+				onOpenChange(v);
+			}
+		),
+		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
+	});
+</script>
+
+<FloatingLayer>
+	{@render children?.()}
+</FloatingLayer>

node_modules/bits-ui/dist/bits/popover/components/popover.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Popover: import("svelte").Component<import("../types.js").PopoverRootPropsWithoutHTML, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

node_modules/bits-ui/dist/bits/popover/exports.d.ts

@@ -0,0 +1,9 @@
+export { default as Root } from "./components/popover.svelte";
+export { default as Arrow } from "./components/popover-arrow.svelte";
+export { default as Content } from "./components/popover-content.svelte";
+export { default as ContentStatic } from "./components/popover-content-static.svelte";
+export { default as Trigger } from "./components/popover-trigger.svelte";
+export { default as Close } from "./components/popover-close.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as Overlay } from "./components/popover-overlay.svelte";
+export type { PopoverRootProps as RootProps, PopoverArrowProps as ArrowProps, PopoverContentProps as ContentProps, PopoverContentStaticProps as ContentStaticProps, PopoverTriggerProps as TriggerProps, PopoverCloseProps as CloseProps, PopoverPortalProps as PortalProps, PopoverOverlayProps as OverlayProps, } from "./types.js";

node_modules/bits-ui/dist/bits/popover/exports.js

@@ -0,0 +1,8 @@
+export { default as Root } from "./components/popover.svelte";
+export { default as Arrow } from "./components/popover-arrow.svelte";
+export { default as Content } from "./components/popover-content.svelte";
+export { default as ContentStatic } from "./components/popover-content-static.svelte";
+export { default as Trigger } from "./components/popover-trigger.svelte";
+export { default as Close } from "./components/popover-close.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as Overlay } from "./components/popover-overlay.svelte";

node_modules/bits-ui/dist/bits/popover/index.d.ts

@@ -0,0 +1 @@
+export * as Popover from "./exports.js";

node_modules/bits-ui/dist/bits/popover/index.js

@@ -0,0 +1 @@
+export * as Popover from "./exports.js";

node_modules/bits-ui/dist/bits/popover/popover.svelte.d.ts

@@ -0,0 +1,144 @@
+import { type ReadableBoxedValues, type WritableBoxedValues, DOMContext } from "svelte-toolbelt";
+import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
+import type { Measurable } from "../../internal/floating-svelte/types.js";
+import { PresenceManager } from "../../internal/presence-manager.svelte.js";
+interface PopoverRootStateOpts extends WritableBoxedValues<{
+    open: boolean;
+}>, ReadableBoxedValues<{
+    onOpenChangeComplete: OnChangeFn<boolean>;
+}> {
+}
+export declare class PopoverRootState {
+    #private;
+    static create(opts: PopoverRootStateOpts): PopoverRootState;
+    readonly opts: PopoverRootStateOpts;
+    contentNode: HTMLElement | null;
+    contentPresence: PresenceManager;
+    triggerNode: HTMLElement | null;
+    overlayNode: HTMLElement | null;
+    overlayPresence: PresenceManager;
+    openedViaHover: boolean;
+    hasInteractedWithContent: boolean;
+    hoverCooldown: boolean;
+    closeDelay: number;
+    constructor(opts: PopoverRootStateOpts);
+    setDomContext(ctx: DOMContext): void;
+    toggleOpen(): void;
+    handleClose(): void;
+    handleHoverOpen(): void;
+    handleHoverClose(): void;
+    handleDelayedHoverClose(): void;
+    cancelDelayedClose(): void;
+    markInteraction(): void;
+}
+interface PopoverTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    disabled: boolean;
+    openOnHover: boolean;
+    openDelay: number;
+    closeDelay: number;
+}> {
+}
+export declare class PopoverTriggerState {
+    #private;
+    static create(opts: PopoverTriggerStateOpts): PopoverTriggerState;
+    readonly opts: PopoverTriggerStateOpts;
+    readonly root: PopoverRootState;
+    readonly attachment: RefAttachment;
+    readonly domContext: DOMContext;
+    constructor(opts: PopoverTriggerStateOpts, root: PopoverRootState);
+    onpointerenter(e: BitsPointerEvent): void;
+    onpointerleave(e: BitsPointerEvent): void;
+    onclick(e: BitsMouseEvent): void;
+    onkeydown(e: BitsKeyboardEvent): void;
+    readonly props: {
+        readonly id: string;
+        readonly "aria-haspopup": "dialog";
+        readonly "aria-expanded": "true" | "false";
+        readonly "data-state": "open" | "closed";
+        readonly "aria-controls": string | undefined;
+        readonly disabled: boolean;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+        readonly onclick: (e: BitsMouseEvent) => void;
+        readonly onpointerenter: (e: BitsPointerEvent) => void;
+        readonly onpointerleave: (e: BitsPointerEvent) => void;
+    };
+}
+interface PopoverContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    onInteractOutside: (e: PointerEvent) => void;
+    onEscapeKeydown: (e: KeyboardEvent) => void;
+    customAnchor: string | HTMLElement | null | Measurable;
+}> {
+}
+export declare class PopoverContentState {
+    static create(opts: PopoverContentStateOpts): PopoverContentState;
+    readonly opts: PopoverContentStateOpts;
+    readonly root: PopoverRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: PopoverContentStateOpts, root: PopoverRootState);
+    onpointerdown(_: BitsPointerEvent): void;
+    onfocusin(e: BitsFocusEvent): void;
+    onpointerenter(e: BitsPointerEvent): void;
+    onpointerleave(e: BitsPointerEvent): void;
+    onInteractOutside: (e: PointerEvent) => void;
+    onEscapeKeydown: (e: KeyboardEvent) => void;
+    get shouldRender(): boolean;
+    get shouldTrapFocus(): boolean;
+    readonly snippetProps: {
+        open: boolean;
+    };
+    readonly props: {
+        readonly id: string;
+        readonly tabindex: -1;
+        readonly "data-state": "open" | "closed";
+        readonly style: {
+            readonly pointerEvents: "auto";
+            readonly contain: "layout style";
+        };
+        readonly onpointerdown: (_: BitsPointerEvent) => void;
+        readonly onfocusin: (e: BitsFocusEvent) => void;
+        readonly onpointerenter: (e: BitsPointerEvent) => void;
+        readonly onpointerleave: (e: BitsPointerEvent) => void;
+    };
+    readonly popperProps: {
+        onInteractOutside: (e: PointerEvent) => void;
+        onEscapeKeydown: (e: KeyboardEvent) => void;
+    };
+}
+interface PopoverCloseStateOpts extends WithRefOpts {
+}
+export declare class PopoverCloseState {
+    static create(opts: PopoverCloseStateOpts): PopoverCloseState;
+    readonly opts: PopoverCloseStateOpts;
+    readonly root: PopoverRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: PopoverCloseStateOpts, root: PopoverRootState);
+    onclick(_: BitsPointerEvent): void;
+    onkeydown(e: BitsKeyboardEvent): void;
+    readonly props: {
+        readonly id: string;
+        readonly onclick: (_: BitsPointerEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+        readonly type: "button";
+    };
+}
+interface PopoverOverlayStateOpts extends WithRefOpts {
+}
+export declare class PopoverOverlayState {
+    static create(opts: PopoverOverlayStateOpts): PopoverOverlayState;
+    readonly opts: PopoverOverlayStateOpts;
+    readonly root: PopoverRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: PopoverOverlayStateOpts, root: PopoverRootState);
+    get shouldRender(): boolean;
+    readonly snippetProps: {
+        open: boolean;
+    };
+    readonly props: {
+        readonly id: string;
+        readonly style: {
+            readonly pointerEvents: "auto";
+        };
+        readonly "data-state": "open" | "closed";
+    };
+}
+export {};

node_modules/bits-ui/dist/bits/popover/popover.svelte.js

@@ -0,0 +1,402 @@
+import { attachRef, boxWith, DOMContext, } from "svelte-toolbelt";
+import { Context, watch } from "runed";
+import { kbd } from "../../internal/kbd.js";
+import { createBitsAttrs, boolToStr, getDataOpenClosed } from "../../internal/attrs.js";
+import { isElement, isTouch } from "../../internal/is.js";
+import { PresenceManager } from "../../internal/presence-manager.svelte.js";
+import { SafePolygon } from "../../internal/safe-polygon.svelte.js";
+import { isTabbable } from "tabbable";
+const popoverAttrs = createBitsAttrs({
+    component: "popover",
+    parts: ["root", "trigger", "content", "close", "overlay"],
+});
+const PopoverRootContext = new Context("Popover.Root");
+export class PopoverRootState {
+    static create(opts) {
+        return PopoverRootContext.set(new PopoverRootState(opts));
+    }
+    opts;
+    contentNode = $state(null);
+    contentPresence;
+    triggerNode = $state(null);
+    overlayNode = $state(null);
+    overlayPresence;
+    // hover tracking state
+    openedViaHover = $state(false);
+    hasInteractedWithContent = $state(false);
+    hoverCooldown = $state(false);
+    closeDelay = $state(0);
+    #closeTimeout = null;
+    #domContext = null;
+    constructor(opts) {
+        this.opts = opts;
+        this.contentPresence = new PresenceManager({
+            ref: boxWith(() => this.contentNode),
+            open: this.opts.open,
+            onComplete: () => {
+                this.opts.onOpenChangeComplete.current(this.opts.open.current);
+            },
+        });
+        this.overlayPresence = new PresenceManager({
+            ref: boxWith(() => this.overlayNode),
+            open: this.opts.open,
+        });
+        watch(() => this.opts.open.current, (isOpen) => {
+            if (!isOpen) {
+                this.openedViaHover = false;
+                this.hasInteractedWithContent = false;
+                this.#clearCloseTimeout();
+            }
+        });
+    }
+    setDomContext(ctx) {
+        this.#domContext = ctx;
+    }
+    #clearCloseTimeout() {
+        if (this.#closeTimeout !== null && this.#domContext) {
+            this.#domContext.clearTimeout(this.#closeTimeout);
+            this.#closeTimeout = null;
+        }
+    }
+    toggleOpen() {
+        this.#clearCloseTimeout();
+        this.opts.open.current = !this.opts.open.current;
+    }
+    handleClose() {
+        this.#clearCloseTimeout();
+        if (!this.opts.open.current)
+            return;
+        this.opts.open.current = false;
+    }
+    handleHoverOpen() {
+        this.#clearCloseTimeout();
+        if (this.opts.open.current)
+            return;
+        this.openedViaHover = true;
+        this.opts.open.current = true;
+    }
+    handleHoverClose() {
+        if (!this.opts.open.current)
+            return;
+        // only close if opened via hover and user hasn't interacted with content
+        if (this.openedViaHover && !this.hasInteractedWithContent) {
+            this.opts.open.current = false;
+        }
+    }
+    handleDelayedHoverClose() {
+        if (!this.opts.open.current)
+            return;
+        if (!this.openedViaHover || this.hasInteractedWithContent)
+            return;
+        this.#clearCloseTimeout();
+        if (this.closeDelay <= 0) {
+            this.opts.open.current = false;
+        }
+        else if (this.#domContext) {
+            this.#closeTimeout = this.#domContext.setTimeout(() => {
+                if (this.openedViaHover && !this.hasInteractedWithContent) {
+                    this.opts.open.current = false;
+                }
+                this.#closeTimeout = null;
+            }, this.closeDelay);
+        }
+    }
+    cancelDelayedClose() {
+        this.#clearCloseTimeout();
+    }
+    markInteraction() {
+        this.hasInteractedWithContent = true;
+        this.#clearCloseTimeout();
+    }
+}
+export class PopoverTriggerState {
+    static create(opts) {
+        return new PopoverTriggerState(opts, PopoverRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    domContext;
+    #openTimeout = null;
+    #closeTimeout = null;
+    #isHovering = $state(false);
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.triggerNode = v));
+        this.domContext = new DOMContext(opts.ref);
+        this.root.setDomContext(this.domContext);
+        this.onclick = this.onclick.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
+        this.onpointerenter = this.onpointerenter.bind(this);
+        this.onpointerleave = this.onpointerleave.bind(this);
+        watch(() => this.opts.closeDelay.current, (delay) => {
+            this.root.closeDelay = delay;
+        });
+    }
+    #clearOpenTimeout() {
+        if (this.#openTimeout !== null) {
+            this.domContext.clearTimeout(this.#openTimeout);
+            this.#openTimeout = null;
+        }
+    }
+    #clearCloseTimeout() {
+        if (this.#closeTimeout !== null) {
+            this.domContext.clearTimeout(this.#closeTimeout);
+            this.#closeTimeout = null;
+        }
+    }
+    #clearAllTimeouts() {
+        this.#clearOpenTimeout();
+        this.#clearCloseTimeout();
+    }
+    onpointerenter(e) {
+        if (this.opts.disabled.current)
+            return;
+        if (!this.opts.openOnHover.current)
+            return;
+        if (isTouch(e))
+            return;
+        this.#isHovering = true;
+        this.#clearCloseTimeout();
+        this.root.cancelDelayedClose();
+        if (this.root.opts.open.current || this.root.hoverCooldown)
+            return;
+        const delay = this.opts.openDelay.current;
+        if (delay <= 0) {
+            this.root.handleHoverOpen();
+        }
+        else {
+            this.#openTimeout = this.domContext.setTimeout(() => {
+                this.root.handleHoverOpen();
+                this.#openTimeout = null;
+            }, delay);
+        }
+    }
+    onpointerleave(e) {
+        if (this.opts.disabled.current)
+            return;
+        if (!this.opts.openOnHover.current)
+            return;
+        if (isTouch(e))
+            return;
+        this.#isHovering = false;
+        this.#clearOpenTimeout();
+        this.root.hoverCooldown = false;
+        // let GraceArea handle the close - it will call handleHoverClose via onPointerExit
+        // we just need to stop any pending open timer
+    }
+    onclick(e) {
+        if (this.opts.disabled.current)
+            return;
+        if (e.button !== 0)
+            return;
+        this.#clearAllTimeouts();
+        // if clicked while hovering and popover is open, convert to click-based open
+        if (this.#isHovering && this.root.opts.open.current && this.root.openedViaHover) {
+            this.root.openedViaHover = false;
+            this.root.hasInteractedWithContent = true;
+            return;
+        }
+        // if closing while hovering with openOnHover enabled, set cooldown to prevent
+        // immediate re-open via hover
+        if (this.#isHovering && this.opts.openOnHover.current && this.root.opts.open.current) {
+            this.root.hoverCooldown = true;
+        }
+        // if clicking to open while in cooldown, reset cooldown (explicit open)
+        if (this.root.hoverCooldown && !this.root.opts.open.current) {
+            this.root.hoverCooldown = false;
+        }
+        this.root.toggleOpen();
+    }
+    onkeydown(e) {
+        if (this.opts.disabled.current)
+            return;
+        if (!(e.key === kbd.ENTER || e.key === kbd.SPACE))
+            return;
+        e.preventDefault();
+        this.#clearAllTimeouts();
+        this.root.toggleOpen();
+    }
+    #getAriaControls() {
+        if (this.root.opts.open.current && this.root.contentNode?.id) {
+            return this.root.contentNode?.id;
+        }
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        "aria-haspopup": "dialog",
+        "aria-expanded": boolToStr(this.root.opts.open.current),
+        "data-state": getDataOpenClosed(this.root.opts.open.current),
+        "aria-controls": this.#getAriaControls(),
+        [popoverAttrs.trigger]: "",
+        disabled: this.opts.disabled.current,
+        //
+        onkeydown: this.onkeydown,
+        onclick: this.onclick,
+        onpointerenter: this.onpointerenter,
+        onpointerleave: this.onpointerleave,
+        ...this.attachment,
+    }));
+}
+export class PopoverContentState {
+    static create(opts) {
+        return new PopoverContentState(opts, PopoverRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.contentNode = v));
+        this.onpointerdown = this.onpointerdown.bind(this);
+        this.onfocusin = this.onfocusin.bind(this);
+        this.onpointerenter = this.onpointerenter.bind(this);
+        this.onpointerleave = this.onpointerleave.bind(this);
+        new SafePolygon({
+            triggerNode: () => this.root.triggerNode,
+            contentNode: () => this.root.contentNode,
+            enabled: () => this.root.opts.open.current &&
+                this.root.openedViaHover &&
+                !this.root.hasInteractedWithContent,
+            onPointerExit: () => {
+                this.root.handleDelayedHoverClose();
+            },
+        });
+    }
+    onpointerdown(_) {
+        this.root.markInteraction();
+    }
+    onfocusin(e) {
+        const target = e.target;
+        if (isElement(target) && isTabbable(target)) {
+            this.root.markInteraction();
+        }
+    }
+    onpointerenter(e) {
+        if (isTouch(e))
+            return;
+        this.root.cancelDelayedClose();
+    }
+    onpointerleave(e) {
+        if (isTouch(e))
+            return;
+        // handled by grace area
+    }
+    onInteractOutside = (e) => {
+        this.opts.onInteractOutside.current(e);
+        if (e.defaultPrevented)
+            return;
+        if (!isElement(e.target))
+            return;
+        const closestTrigger = e.target.closest(popoverAttrs.selector("trigger"));
+        if (closestTrigger && closestTrigger === this.root.triggerNode)
+            return;
+        if (this.opts.customAnchor.current) {
+            if (isElement(this.opts.customAnchor.current)) {
+                if (this.opts.customAnchor.current.contains(e.target))
+                    return;
+            }
+            else if (typeof this.opts.customAnchor.current === "string") {
+                const el = document.querySelector(this.opts.customAnchor.current);
+                if (el && el.contains(e.target))
+                    return;
+            }
+        }
+        this.root.handleClose();
+    };
+    onEscapeKeydown = (e) => {
+        this.opts.onEscapeKeydown.current(e);
+        if (e.defaultPrevented)
+            return;
+        this.root.handleClose();
+    };
+    get shouldRender() {
+        return this.root.contentPresence.shouldRender;
+    }
+    get shouldTrapFocus() {
+        if (this.root.openedViaHover && !this.root.hasInteractedWithContent)
+            return false;
+        return true;
+    }
+    snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        tabindex: -1,
+        "data-state": getDataOpenClosed(this.root.opts.open.current),
+        [popoverAttrs.content]: "",
+        style: {
+            pointerEvents: "auto",
+            // CSS containment isolates style/layout/paint calculations from the rest of the page
+            contain: "layout style",
+        },
+        onpointerdown: this.onpointerdown,
+        onfocusin: this.onfocusin,
+        onpointerenter: this.onpointerenter,
+        onpointerleave: this.onpointerleave,
+        ...this.attachment,
+    }));
+    popperProps = {
+        onInteractOutside: this.onInteractOutside,
+        onEscapeKeydown: this.onEscapeKeydown,
+    };
+}
+export class PopoverCloseState {
+    static create(opts) {
+        return new PopoverCloseState(opts, PopoverRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref);
+        this.onclick = this.onclick.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
+    }
+    onclick(_) {
+        this.root.handleClose();
+    }
+    onkeydown(e) {
+        if (!(e.key === kbd.ENTER || e.key === kbd.SPACE))
+            return;
+        e.preventDefault();
+        this.root.handleClose();
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        onclick: this.onclick,
+        onkeydown: this.onkeydown,
+        type: "button",
+        [popoverAttrs.close]: "",
+        ...this.attachment,
+    }));
+}
+export class PopoverOverlayState {
+    static create(opts) {
+        return new PopoverOverlayState(opts, PopoverRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.overlayNode = v));
+    }
+    get shouldRender() {
+        return this.root.overlayPresence.shouldRender;
+    }
+    snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [popoverAttrs.overlay]: "",
+        style: {
+            pointerEvents: "auto",
+        },
+        "data-state": getDataOpenClosed(this.root.opts.open.current),
+        ...this.attachment,
+    }));
+}

node_modules/bits-ui/dist/bits/popover/types.d.ts

@@ -0,0 +1,57 @@
+import type { ArrowProps, ArrowPropsWithoutHTML } from "../utilities/arrow/types.js";
+import type { PopperLayerProps, PopperLayerStaticProps } from "../utilities/popper-layer/types.js";
+import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildren, Without } from "../../internal/types.js";
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { FloatingContentSnippetProps, StaticContentSnippetProps } from "../../shared/types.js";
+import type { PortalProps } from "../../types.js";
+import type { PresenceLayerProps } from "../utilities/presence-layer/types.js";
+export type PopoverRootPropsWithoutHTML = WithChildren<{
+    /**
+     * The open state of the popover.
+     */
+    open?: boolean;
+    /**
+     * A callback that is called when the popover's open state changes.
+     */
+    onOpenChange?: OnChangeFn<boolean>;
+    /**
+     * A callback that is called when the popover's open state changes and the animation is complete.
+     */
+    onOpenChangeComplete?: OnChangeFn<boolean>;
+}>;
+export type PopoverRootProps = PopoverRootPropsWithoutHTML;
+export type PopoverContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<Omit<PopperLayerProps, "content" | "loop">, FloatingContentSnippetProps>;
+export type PopoverContentProps = PopoverContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, PopoverContentPropsWithoutHTML>;
+export type PopoverContentStaticPropsWithoutHTML = WithChildNoChildrenSnippetProps<Omit<PopperLayerStaticProps, "content" | "loop">, StaticContentSnippetProps>;
+export type PopoverContentStaticProps = PopoverContentStaticPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, PopoverContentStaticPropsWithoutHTML>;
+export type PopoverTriggerPropsWithoutHTML = WithChild<{
+    /**
+     * Whether the popover should open when the trigger is hovered.
+     * @default false
+     */
+    openOnHover?: boolean;
+    /**
+     * How long to wait before opening the popover on hover (ms).
+     * Only applies when `openOnHover` is `true`.
+     * @default 700
+     */
+    openDelay?: number;
+    /**
+     * How long to wait before closing the popover after hover ends (ms).
+     * Only applies when `openOnHover` is `true`.
+     * @default 300
+     */
+    closeDelay?: number;
+}>;
+export type PopoverTriggerProps = PopoverTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, PopoverTriggerPropsWithoutHTML>;
+export type PopoverClosePropsWithoutHTML = WithChild;
+export type PopoverCloseProps = PopoverClosePropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, PopoverClosePropsWithoutHTML>;
+export type PopoverArrowPropsWithoutHTML = ArrowPropsWithoutHTML;
+export type PopoverArrowProps = ArrowProps;
+export type PopoverPortalPropsWithoutHTML = PortalProps;
+export type PopoverPortalProps = PortalProps;
+export type PopoverOverlaySnippetProps = {
+    open: boolean;
+};
+export type PopoverOverlayPropsWithoutHTML = WithChild<PresenceLayerProps, PopoverOverlaySnippetProps>;
+export type PopoverOverlayProps = PopoverOverlayPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, PopoverOverlayPropsWithoutHTML>;

node_modules/bits-ui/dist/bits/popover/types.js

@@ -0,0 +1 @@
+export {};