bits-ui 2.14.3 → 2.15.0

package/dist/bits/checkbox/checkbox.svelte.js

@@ -128,8 +128,14 @@ export class CheckboxRootState {
     onkeydown(e) {
         if (this.trueDisabled || this.trueReadonly)
             return;
-        if (e.key === kbd.ENTER)
+        if (e.key === kbd.ENTER) {
             e.preventDefault();
+            if (this.opts.type.current === "submit") {
+                const form = e.currentTarget.closest("form");
+                form?.requestSubmit();
+            }
+            return;
+        }
         if (e.key === kbd.SPACE) {
             e.preventDefault();
             this.#toggle();

package/dist/bits/command/command.svelte.js

@@ -134,6 +134,10 @@ export class CommandRootState {
             if (!this._commandState.value || !this.#isInitialMount) {
                 this.#selectFirstItem();
             }
+            else if (this.#isInitialMount && this._commandState.value) {
+                // scroll the initial value into view if it exists
+                this.#scrollInitialValue();
+            }
             return;
         }
         const scores = this._commandState.filtered.items;
@@ -216,6 +220,19 @@ export class CommandRootState {
             this.#isInitialMount = false;
         });
     }
+    /**
+     * Scrolls the initial value into view if it exists and is not the first item.
+     * Called during initial mount when a value is provided.
+     */
+    #scrollInitialValue() {
+        afterTick(() => {
+            const shouldPreventScroll = this.opts.disableInitialScroll.current;
+            if (!shouldPreventScroll) {
+                this.#scrollSelectedIntoView();
+            }
+            this.#isInitialMount = false;
+        });
+    }
     /**
      * Updates filtered items/groups based on search.
      * Recalculates scores and filtered count.

package/dist/bits/context-menu/components/context-menu-content.svelte

@@ -18,6 +18,9 @@
 		onCloseAutoFocus = noop,
 		onOpenAutoFocus = noop,
 		preventScroll = true,
+		side = "right",
+		sideOffset = 2,
+		align = "start",
 		// we need to explicitly pass this prop to the PopperLayer to override
 		// the default menu behavior of handling outside interactions on the trigger
 		onEscapeKeydown = noop,
@@ -74,9 +77,9 @@
 		{...mergedProps}
 		{...contentState.popperProps}
 		ref={contentState.opts.ref}
-		side="right"
-		sideOffset={2}
-		align="start"
+		{side}
+		{sideOffset}
+		{align}
 		enabled={contentState.parentMenu.opts.open.current}
 		{preventScroll}
 		onInteractOutside={handleInteractOutside}

package/dist/bits/context-menu/components/context-menu-content.svelte.d.ts

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

package/dist/bits/context-menu/types.d.ts

@@ -1,8 +1,8 @@
 import type { MenuContentProps, MenuContentPropsWithoutHTML } from "../menu/types.js";
 import type { WithChild, Without } from "../../internal/types.js";
 import type { BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
-export type ContextMenuContentPropsWithoutHTML = Omit<MenuContentPropsWithoutHTML, "align" | "side" | "sideOffset">;
-export type ContextMenuContentProps = Omit<MenuContentProps, "side" | "sideOffset" | "align">;
+export type ContextMenuContentPropsWithoutHTML = MenuContentPropsWithoutHTML;
+export type ContextMenuContentProps = MenuContentProps;
 export type ContextMenuTriggerPropsWithoutHTML = WithChild<{
     /**
      * Whether the context menu trigger is disabled. If disabled, the trigger will not

package/dist/bits/link-preview/types.d.ts

@@ -48,7 +48,7 @@ export type LinkPreviewRootPropsWithoutHTML = WithChildren<{
     ignoreNonKeyboardFocus?: boolean;
 }>;
 export type LinkPreviewRootProps = LinkPreviewRootPropsWithoutHTML;
-export type LinkPreviewContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<Pick<FloatingLayerContentProps, "side" | "sideOffset" | "align" | "alignOffset" | "avoidCollisions" | "collisionBoundary" | "collisionPadding" | "arrowPadding" | "sticky" | "hideWhenDetached" | "dir"> & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & EscapeLayerProps & {
+export type LinkPreviewContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<Pick<FloatingLayerContentProps, "side" | "sideOffset" | "align" | "alignOffset" | "avoidCollisions" | "collisionBoundary" | "collisionPadding" | "arrowPadding" | "sticky" | "hideWhenDetached" | "dir" | "customAnchor"> & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & EscapeLayerProps & {
     /**
      * When `true`, the link preview content will be forced to mount in the DOM.
      *

package/dist/bits/menu/menu.svelte.d.ts

@@ -3,7 +3,7 @@ import { Context } from "runed";
 import { CustomEventDispatcher } from "../../internal/events.js";
 import type { AnyFn, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
 import type { Direction } from "../../shared/index.js";
-import { IsUsingKeyboard } from "../../index.js";
+import { IsUsingKeyboard } from "../utilities/is-using-keyboard/is-using-keyboard.svelte.js";
 import type { KeyboardEventHandler, PointerEventHandler, MouseEventHandler } from "svelte/elements";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 import { PresenceManager } from "../../internal/presence-manager.svelte.js";

package/dist/bits/menu/menu.svelte.js

@@ -6,13 +6,14 @@ import { CustomEventDispatcher } from "../../internal/events.js";
 import { isElement, isElementOrSVGElement, isHTMLElement } from "../../internal/is.js";
 import { kbd } from "../../internal/kbd.js";
 import { createBitsAttrs, getAriaChecked, boolToStr, getDataOpenClosed, boolToEmptyStrOrUndef, } from "../../internal/attrs.js";
-import { IsUsingKeyboard } from "../../index.js";
+import { IsUsingKeyboard } from "../utilities/is-using-keyboard/is-using-keyboard.svelte.js";
 import { getTabbableFrom } from "../../internal/tabbable.js";
 import { isTabbable } from "tabbable";
 import { DOMTypeahead } from "../../internal/dom-typeahead.svelte.js";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 import { GraceArea } from "../../internal/grace-area.svelte.js";
 import { PresenceManager } from "../../internal/presence-manager.svelte.js";
+import { arraysAreEqual } from "../../internal/arrays.js";
 export const CONTEXT_MENU_TRIGGER_ATTR = "data-context-menu-trigger";
 export const CONTEXT_MENU_CONTENT_ATTR = "data-context-menu-content";
 const MenuRootContext = new Context("Menu.Root");
@@ -942,6 +943,8 @@ export class MenuCheckboxGroupState {
         if (!this.opts.value.current.includes(checkboxValue)) {
             const newValue = [...$state.snapshot(this.opts.value.current), checkboxValue];
             this.opts.value.current = newValue;
+            if (arraysAreEqual(this.opts.value.current, newValue))
+                return;
             this.opts.onValueChange.current(newValue);
         }
     }
@@ -953,6 +956,8 @@ export class MenuCheckboxGroupState {
             return;
         const newValue = this.opts.value.current.filter((v) => v !== checkboxValue);
         this.opts.value.current = newValue;
+        if (arraysAreEqual(this.opts.value.current, newValue))
+            return;
         this.opts.onValueChange.current(newValue);
     }
     props = $derived.by(() => ({

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

@@ -16,6 +16,7 @@
 		ref = $bindable(null),
 		id = createId(uid),
 		forceMount = false,
+		onOpenAutoFocus = noop,
 		onCloseAutoFocus = noop,
 		onEscapeKeydown = noop,
 		onInteractOutside = noop,
@@ -37,6 +38,17 @@
 	});
 
 	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}
@@ -46,11 +58,12 @@
 		ref={contentState.opts.ref}
 		enabled={contentState.root.opts.open.current}
 		{id}
-		{trapFocus}
+		trapFocus={effectiveTrapFocus}
 		{preventScroll}
 		loop
 		forceMount={true}
 		{customAnchor}
+		onOpenAutoFocus={handleOpenAutoFocus}
 		{onCloseAutoFocus}
 		shouldRender={contentState.shouldRender}
 	>
@@ -76,11 +89,12 @@
 		ref={contentState.opts.ref}
 		open={contentState.root.opts.open.current}
 		{id}
-		{trapFocus}
+		trapFocus={effectiveTrapFocus}
 		{preventScroll}
 		loop
 		forceMount={false}
 		{customAnchor}
+		onOpenAutoFocus={handleOpenAutoFocus}
 		{onCloseAutoFocus}
 		shouldRender={contentState.shouldRender}
 	>

package/dist/bits/popover/components/popover-trigger.svelte

@@ -14,6 +14,9 @@
 		ref = $bindable(null),
 		type = "button",
 		disabled = false,
+		openOnHover = false,
+		openDelay = 700,
+		closeDelay = 300,
 		...restProps
 	}: PopoverTriggerProps = $props();
 
@@ -24,6 +27,9 @@
 			(v) => (ref = v)
 		),
 		disabled: boxWith(() => Boolean(disabled)),
+		openOnHover: boxWith(() => openOnHover),
+		openDelay: boxWith(() => openDelay),
+		closeDelay: boxWith(() => closeDelay),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));

package/dist/bits/popover/popover.svelte.d.ts

@@ -1,5 +1,5 @@
-import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
-import type { BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
+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<{
@@ -9,6 +9,7 @@ interface PopoverRootStateOpts extends WritableBoxedValues<{
 }> {
 }
 export declare class PopoverRootState {
+    #private;
     static create(opts: PopoverRootStateOpts): PopoverRootState;
     readonly opts: PopoverRootStateOpts;
     contentNode: HTMLElement | null;
@@ -16,12 +17,24 @@ export declare class PopoverRootState {
     triggerNode: HTMLElement | null;
     overlayNode: HTMLElement | null;
     overlayPresence: PresenceManager;
+    openedViaHover: boolean;
+    hasInteractedWithContent: 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 {
@@ -30,7 +43,10 @@ export declare class 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: {
@@ -42,6 +58,8 @@ export declare class PopoverTriggerState {
         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<{
@@ -56,9 +74,14 @@ export declare class PopoverContentState {
     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;
     };
@@ -69,6 +92,10 @@ export declare class PopoverContentState {
         readonly style: {
             readonly pointerEvents: "auto";
         };
+        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;

package/dist/bits/popover/popover.svelte.js

@@ -1,9 +1,11 @@
-import { attachRef, boxWith, } from "svelte-toolbelt";
-import { Context } from "runed";
+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 } from "../../internal/is.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"],
@@ -19,6 +21,12 @@ export class PopoverRootState {
     triggerNode = $state(null);
     overlayNode = $state(null);
     overlayPresence;
+    // hover tracking state
+    openedViaHover = $state(false);
+    hasInteractedWithContent = $state(false);
+    closeDelay = $state(0);
+    #closeTimeout = null;
+    #domContext = null;
     constructor(opts) {
         this.opts = opts;
         this.contentPresence = new PresenceManager({
@@ -32,15 +40,73 @@ export class PopoverRootState {
             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) {
@@ -49,18 +115,87 @@ export class PopoverTriggerState {
     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)
+            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();
+        // 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;
+        }
         this.root.toggleOpen();
     }
     onkeydown(e) {
@@ -69,13 +204,13 @@ export class PopoverTriggerState {
         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;
         }
-        return undefined;
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -88,6 +223,8 @@ export class PopoverTriggerState {
         //
         onkeydown: this.onkeydown,
         onclick: this.onclick,
+        onpointerenter: this.onpointerenter,
+        onpointerleave: this.onpointerleave,
         ...this.attachment,
     }));
 }
@@ -102,6 +239,39 @@ export class PopoverContentState {
         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);
@@ -134,6 +304,11 @@ export class PopoverContentState {
     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,
@@ -143,6 +318,10 @@ export class PopoverContentState {
         style: {
             pointerEvents: "auto",
         },
+        onpointerdown: this.onpointerdown,
+        onfocusin: this.onfocusin,
+        onpointerenter: this.onpointerenter,
+        onpointerleave: this.onpointerleave,
         ...this.attachment,
     }));
     popperProps = {

package/dist/bits/popover/types.d.ts

@@ -24,7 +24,25 @@ export type PopoverContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<Omi
 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;
+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>;

package/dist/bits/utilities/floating-layer/use-floating-layer.svelte.d.ts

@@ -348,7 +348,7 @@ export declare class FloatingContentState {
             readonly perspective?: import("csstype").Property.Perspective<0 | (string & {})> | undefined;
             readonly perspectiveOrigin?: import("csstype").Property.PerspectiveOrigin<0 | (string & {})> | undefined;
             readonly pointerEvents?: import("csstype").Property.PointerEvents | undefined;
-            position: "relative" | "absolute" | "inherit" | "fixed" | "sticky" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "-webkit-sticky" | "static";
+            position: "relative" | "absolute" | "fixed" | "sticky" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-webkit-sticky" | "static";
             readonly printColorAdjust?: import("csstype").Property.PrintColorAdjust | undefined;
             readonly quotes?: import("csstype").Property.Quotes | undefined;
             readonly resize?: import("csstype").Property.Resize | undefined;
@@ -901,10 +901,10 @@ export declare class FloatingContentState {
             readonly vectorEffect?: import("csstype").Property.VectorEffect | undefined;
             readonly "pointer-events"?: string | undefined;
             readonly "--bits-floating-transform-origin": `${any} ${any}`;
-            readonly "--bits-floating-available-width": `${number}px` | "undefinedpx";
-            readonly "--bits-floating-available-height": `${number}px` | "undefinedpx";
-            readonly "--bits-floating-anchor-width": `${number}px` | "undefinedpx";
-            readonly "--bits-floating-anchor-height": `${number}px` | "undefinedpx";
+            readonly "--bits-floating-available-width": "undefinedpx" | `${number}px`;
+            readonly "--bits-floating-available-height": "undefinedpx" | `${number}px`;
+            readonly "--bits-floating-anchor-width": "undefinedpx" | `${number}px`;
+            readonly "--bits-floating-anchor-height": "undefinedpx" | `${number}px`;
         };
         readonly dir: Direction;
     };

package/dist/internal/body-scroll-lock.svelte.js

@@ -88,7 +88,11 @@ const bodyLockStackCount = new SharedState(() => {
         ensureInitialStyleCaptured();
         // if we're applying lock styles, we're no longer in a cleanup transition
         isInCleanupTransition = false;
+        const htmlStyle = getComputedStyle(document.documentElement);
         const bodyStyle = getComputedStyle(document.body);
+        // check if scrollbar-gutter: stable is already handling scrollbar space
+        const hasStableGutter = htmlStyle.scrollbarGutter?.includes("stable") ||
+            bodyStyle.scrollbarGutter?.includes("stable");
         // TODO: account for RTL direction, etc.
         const verticalScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
         const paddingRight = Number.parseInt(bodyStyle.paddingRight ?? "0", 10);
@@ -96,12 +100,13 @@ const bodyLockStackCount = new SharedState(() => {
             padding: paddingRight + verticalScrollbarWidth,
             margin: Number.parseInt(bodyStyle.marginRight ?? "0", 10),
         };
-        if (verticalScrollbarWidth > 0) {
+        // only add padding compensation if stable gutter isn't handling it
+        if (verticalScrollbarWidth > 0 && !hasStableGutter) {
             document.body.style.paddingRight = `${config.padding}px`;
             document.body.style.marginRight = `${config.margin}px`;
             document.body.style.setProperty("--scrollbar-width", `${verticalScrollbarWidth}px`);
-            document.body.style.overflow = "hidden";
         }
+        document.body.style.overflow = "hidden";
         if (isIOS) {
             // IOS devices are special and require a touchmove listener to prevent scrolling
             stopTouchMoveListener = on(document, "touchmove", (e) => {

package/dist/internal/safe-polygon.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type Getter } from "svelte-toolbelt";
+export interface SafePolygonOptions {
+    enabled: Getter<boolean>;
+    triggerNode: Getter<HTMLElement | null>;
+    contentNode: Getter<HTMLElement | null>;
+    onPointerExit: () => void;
+    buffer?: number;
+}
+/**
+ * Creates a safe polygon area that allows users to move their cursor between
+ * the trigger and floating content without closing it.
+ */
+export declare class SafePolygon {
+    #private;
+    constructor(opts: SafePolygonOptions);
+}

package/dist/internal/safe-polygon.svelte.js

@@ -0,0 +1,237 @@
+import { getDocument } from "svelte-toolbelt";
+import { on } from "svelte/events";
+import { watch } from "runed";
+import { isElement } from "./is.js";
+function isPointInPolygon(point, polygon) {
+    const [x, y] = point;
+    let isInside = false;
+    const length = polygon.length;
+    for (let i = 0, j = length - 1; i < length; j = i++) {
+        const [xi, yi] = polygon[i] ?? [0, 0];
+        const [xj, yj] = polygon[j] ?? [0, 0];
+        const intersect = yi >= y !== yj >= y && x <= ((xj - xi) * (y - yi)) / (yj - yi) + xi;
+        if (intersect) {
+            isInside = !isInside;
+        }
+    }
+    return isInside;
+}
+function isInsideRect(point, rect) {
+    return (point[0] >= rect.left &&
+        point[0] <= rect.right &&
+        point[1] >= rect.top &&
+        point[1] <= rect.bottom);
+}
+function getSide(triggerRect, contentRect) {
+    // determine which side the content is on relative to trigger
+    const triggerCenterX = triggerRect.left + triggerRect.width / 2;
+    const triggerCenterY = triggerRect.top + triggerRect.height / 2;
+    const contentCenterX = contentRect.left + contentRect.width / 2;
+    const contentCenterY = contentRect.top + contentRect.height / 2;
+    const deltaX = contentCenterX - triggerCenterX;
+    const deltaY = contentCenterY - triggerCenterY;
+    if (Math.abs(deltaX) > Math.abs(deltaY)) {
+        return deltaX > 0 ? "right" : "left";
+    }
+    return deltaY > 0 ? "bottom" : "top";
+}
+/**
+ * Creates a safe polygon area that allows users to move their cursor between
+ * the trigger and floating content without closing it.
+ */
+export class SafePolygon {
+    #opts;
+    #buffer;
+    // tracks the cursor position when leaving trigger or content
+    #exitPoint = null;
+    // tracks what we're moving toward: "content" when leaving trigger, "trigger" when leaving content
+    #exitTarget = null;
+    constructor(opts) {
+        this.#opts = opts;
+        this.#buffer = opts.buffer ?? 1;
+        watch([opts.triggerNode, opts.contentNode, opts.enabled], ([triggerNode, contentNode, enabled]) => {
+            if (!triggerNode || !contentNode || !enabled) {
+                this.#exitPoint = null;
+                this.#exitTarget = null;
+                return;
+            }
+            const doc = getDocument(triggerNode);
+            const handlePointerMove = (e) => {
+                this.#onPointerMove(e, triggerNode, contentNode);
+            };
+            const handleTriggerLeave = (e) => {
+                // when leaving trigger toward content, record exit point
+                const target = e.relatedTarget;
+                // if going directly to content, no need for polygon tracking
+                if (isElement(target) && contentNode.contains(target)) {
+                    return;
+                }
+                this.#exitPoint = [e.clientX, e.clientY];
+                this.#exitTarget = "content";
+            };
+            const handleTriggerEnter = () => {
+                // reached trigger, clear tracking
+                this.#exitPoint = null;
+                this.#exitTarget = null;
+            };
+            const handleContentEnter = () => {
+                // reached content, clear tracking
+                this.#exitPoint = null;
+                this.#exitTarget = null;
+            };
+            const handleContentLeave = (e) => {
+                // when leaving content, check if going directly back to trigger
+                const target = e.relatedTarget;
+                if (isElement(target) && triggerNode.contains(target)) {
+                    // going directly to trigger, no polygon tracking needed
+                    return;
+                }
+                // might be traversing gap back to trigger, set up polygon tracking
+                this.#exitPoint = [e.clientX, e.clientY];
+                this.#exitTarget = "trigger";
+            };
+            return [
+                on(doc, "pointermove", handlePointerMove),
+                on(triggerNode, "pointerleave", handleTriggerLeave),
+                on(triggerNode, "pointerenter", handleTriggerEnter),
+                on(contentNode, "pointerenter", handleContentEnter),
+                on(contentNode, "pointerleave", handleContentLeave),
+            ].reduce((acc, cleanup) => () => {
+                acc();
+                cleanup();
+            }, () => { });
+        });
+    }
+    #onPointerMove(e, triggerNode, contentNode) {
+        // if no exit point recorded, nothing to check
+        if (!this.#exitPoint || !this.#exitTarget)
+            return;
+        const clientPoint = [e.clientX, e.clientY];
+        const triggerRect = triggerNode.getBoundingClientRect();
+        const contentRect = contentNode.getBoundingClientRect();
+        // check if pointer reached the target
+        if (this.#exitTarget === "content" && isInsideRect(clientPoint, contentRect)) {
+            this.#exitPoint = null;
+            this.#exitTarget = null;
+            return;
+        }
+        if (this.#exitTarget === "trigger" && isInsideRect(clientPoint, triggerRect)) {
+            this.#exitPoint = null;
+            this.#exitTarget = null;
+            return;
+        }
+        // check if pointer is in the rectangular corridor between trigger and content
+        const side = getSide(triggerRect, contentRect);
+        const corridorPoly = this.#getCorridorPolygon(triggerRect, contentRect, side);
+        if (corridorPoly && isPointInPolygon(clientPoint, corridorPoly)) {
+            return;
+        }
+        // check if pointer is within the safe polygon from exit point to target
+        const targetRect = this.#exitTarget === "content" ? contentRect : triggerRect;
+        const safePoly = this.#getSafePolygon(this.#exitPoint, targetRect, side, this.#exitTarget);
+        if (isPointInPolygon(clientPoint, safePoly)) {
+            return;
+        }
+        // pointer is outside all safe zones - close
+        this.#exitPoint = null;
+        this.#exitTarget = null;
+        this.#opts.onPointerExit();
+    }
+    /**
+     * Creates a rectangular corridor between trigger and content
+     * This prevents closing when cursor is in the gap between them
+     */
+    #getCorridorPolygon(triggerRect, contentRect, side) {
+        const buffer = this.#buffer;
+        switch (side) {
+            case "top":
+                return [
+                    [Math.min(triggerRect.left, contentRect.left) - buffer, triggerRect.top],
+                    [Math.min(triggerRect.left, contentRect.left) - buffer, contentRect.bottom],
+                    [Math.max(triggerRect.right, contentRect.right) + buffer, contentRect.bottom],
+                    [Math.max(triggerRect.right, contentRect.right) + buffer, triggerRect.top],
+                ];
+            case "bottom":
+                return [
+                    [Math.min(triggerRect.left, contentRect.left) - buffer, triggerRect.bottom],
+                    [Math.min(triggerRect.left, contentRect.left) - buffer, contentRect.top],
+                    [Math.max(triggerRect.right, contentRect.right) + buffer, contentRect.top],
+                    [Math.max(triggerRect.right, contentRect.right) + buffer, triggerRect.bottom],
+                ];
+            case "left":
+                return [
+                    [triggerRect.left, Math.min(triggerRect.top, contentRect.top) - buffer],
+                    [contentRect.right, Math.min(triggerRect.top, contentRect.top) - buffer],
+                    [contentRect.right, Math.max(triggerRect.bottom, contentRect.bottom) + buffer],
+                    [triggerRect.left, Math.max(triggerRect.bottom, contentRect.bottom) + buffer],
+                ];
+            case "right":
+                return [
+                    [triggerRect.right, Math.min(triggerRect.top, contentRect.top) - buffer],
+                    [contentRect.left, Math.min(triggerRect.top, contentRect.top) - buffer],
+                    [contentRect.left, Math.max(triggerRect.bottom, contentRect.bottom) + buffer],
+                    [triggerRect.right, Math.max(triggerRect.bottom, contentRect.bottom) + buffer],
+                ];
+        }
+    }
+    /**
+     * Creates a triangular/trapezoidal safe zone from the exit point to the target
+     */
+    #getSafePolygon(exitPoint, targetRect, side, exitTarget) {
+        const buffer = this.#buffer * 4;
+        const [x, y] = exitPoint;
+        // when going back to trigger, we need to flip the side
+        const effectiveSide = exitTarget === "trigger" ? this.#flipSide(side) : side;
+        // create polygon points from cursor to target edges
+        switch (effectiveSide) {
+            case "top":
+                return [
+                    [x - buffer, y + buffer],
+                    [x + buffer, y + buffer],
+                    [targetRect.right + buffer, targetRect.bottom],
+                    [targetRect.right + buffer, targetRect.top],
+                    [targetRect.left - buffer, targetRect.top],
+                    [targetRect.left - buffer, targetRect.bottom],
+                ];
+            case "bottom":
+                return [
+                    [x - buffer, y - buffer],
+                    [x + buffer, y - buffer],
+                    [targetRect.right + buffer, targetRect.top],
+                    [targetRect.right + buffer, targetRect.bottom],
+                    [targetRect.left - buffer, targetRect.bottom],
+                    [targetRect.left - buffer, targetRect.top],
+                ];
+            case "left":
+                return [
+                    [x + buffer, y - buffer],
+                    [x + buffer, y + buffer],
+                    [targetRect.right, targetRect.bottom + buffer],
+                    [targetRect.left, targetRect.bottom + buffer],
+                    [targetRect.left, targetRect.top - buffer],
+                    [targetRect.right, targetRect.top - buffer],
+                ];
+            case "right":
+                return [
+                    [x - buffer, y - buffer],
+                    [x - buffer, y + buffer],
+                    [targetRect.left, targetRect.bottom + buffer],
+                    [targetRect.right, targetRect.bottom + buffer],
+                    [targetRect.right, targetRect.top - buffer],
+                    [targetRect.left, targetRect.top - buffer],
+                ];
+        }
+    }
+    #flipSide(side) {
+        switch (side) {
+            case "top":
+                return "bottom";
+            case "bottom":
+                return "top";
+            case "left":
+                return "right";
+            case "right":
+                return "left";
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "2.14.3",
+  "version": "2.15.0",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",