bits-ui 2.15.7 → 2.16.0

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

@@ -23,6 +23,7 @@
 		sticky = "partial",
 		strategy,
 		hideWhenDetached = false,
+		customAnchor,
 		collisionPadding = 0,
 		onInteractOutside = noop,
 		onEscapeKeydown = noop,
@@ -51,6 +52,7 @@
 		hideWhenDetached,
 		collisionPadding,
 		strategy,
+		customAnchor: customAnchor ?? contentState.root.triggerNode,
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, floatingProps, contentState.props));

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

@@ -1,9 +1,12 @@
-<script lang="ts">
+<script lang="ts" module>
+	type T = unknown;
+</script>
+
+<script lang="ts" generics="T = never">
 	import { boxWith, mergeProps } from "svelte-toolbelt";
 	import type { TooltipTriggerProps } from "../types.js";
 	import { TooltipTriggerState } from "../tooltip.svelte.js";
 	import { createId } from "../../../internal/create-id.js";
-	import FloatingLayerAnchor from "../../utilities/floating-layer/components/floating-layer-anchor.svelte";
 
 	const uid = $props.id();
 
@@ -12,16 +15,20 @@
 		child,
 		id = createId(uid),
 		disabled = false,
+		payload,
+		tether,
 		type = "button",
 		tabindex = 0,
 		ref = $bindable(null),
 		...restProps
-	}: TooltipTriggerProps = $props();
+	}: TooltipTriggerProps<T> = $props();
 
 	const triggerState = TooltipTriggerState.create({
 		id: boxWith(() => id),
 		disabled: boxWith(() => disabled ?? false),
 		tabindex: boxWith(() => tabindex ?? 0),
+		payload: boxWith(() => payload),
+		tether: boxWith(() => tether),
 		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)
@@ -31,12 +38,10 @@
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
 </script>
 
-<FloatingLayerAnchor {id} ref={triggerState.opts.ref} tooltip={true}>
-	{#if child}
-		{@render child({ props: mergedProps })}
-	{:else}
-		<button {...mergedProps}>
-			{@render children?.()}
-		</button>
-	{/if}
-</FloatingLayerAnchor>
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/bits/tooltip/components/tooltip-trigger.svelte.d.ts

@@ -1,4 +1,18 @@
 import type { TooltipTriggerProps } from "../types.js";
-declare const TooltipTrigger: import("svelte").Component<TooltipTriggerProps, {}, "ref">;
-type TooltipTrigger = ReturnType<typeof TooltipTrigger>;
+declare class __sveltets_Render<T = never> {
+    props(): TooltipTriggerProps<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = never>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T = never>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TooltipTrigger: $$IsomorphicComponent;
+type TooltipTrigger<T = never> = InstanceType<typeof TooltipTrigger<T>>;
 export default TooltipTrigger;

package/dist/bits/tooltip/components/tooltip.svelte

@@ -1,4 +1,8 @@
-<script lang="ts">
+<script lang="ts" module>
+	type T = unknown;
+</script>
+
+<script lang="ts" generics="T = never">
 	import { boxWith } from "svelte-toolbelt";
 	import type { TooltipRootProps } from "../types.js";
 	import { TooltipRootState } from "../tooltip.svelte.js";
@@ -7,6 +11,7 @@
 
 	let {
 		open = $bindable(false),
+		triggerId = $bindable<string | null>(null),
 		onOpenChange = noop,
 		onOpenChangeComplete = noop,
 		disabled,
@@ -14,10 +19,11 @@
 		disableCloseOnTriggerClick,
 		disableHoverableContent,
 		ignoreNonKeyboardFocus,
+		tether,
 		children,
-	}: TooltipRootProps = $props();
+	}: TooltipRootProps<T> = $props();
 
-	TooltipRootState.create({
+	const rootState = TooltipRootState.create({
 		open: boxWith(
 			() => open,
 			(v) => {
@@ -25,15 +31,26 @@
 				onOpenChange(v);
 			}
 		),
+		triggerId: boxWith(
+			() => triggerId,
+			(v) => {
+				triggerId = v;
+			}
+		),
 		delayDuration: boxWith(() => delayDuration),
 		disableCloseOnTriggerClick: boxWith(() => disableCloseOnTriggerClick),
 		disableHoverableContent: boxWith(() => disableHoverableContent),
 		ignoreNonKeyboardFocus: boxWith(() => ignoreNonKeyboardFocus),
 		disabled: boxWith(() => disabled),
 		onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
+		tether: boxWith(() => tether),
 	});
 </script>
 
 <FloatingLayer tooltip>
-	{@render children?.()}
+	{@render children?.({
+		open: rootState.opts.open.current,
+		triggerId: rootState.activeTriggerId,
+		payload: rootState.activePayload as [T] extends [never] ? null : T | null,
+	})}
 </FloatingLayer>

package/dist/bits/tooltip/components/tooltip.svelte.d.ts

@@ -1,3 +1,18 @@
-declare const Tooltip: import("svelte").Component<import("../types.js").TooltipRootPropsWithoutHTML, {}, "open">;
-type Tooltip = ReturnType<typeof Tooltip>;
+import type { TooltipRootProps } from "../types.js";
+declare class __sveltets_Render<T = never> {
+    props(): TooltipRootProps<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "open" | "triggerId";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = never>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T = never>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Tooltip: $$IsomorphicComponent;
+type Tooltip<T = never> = InstanceType<typeof Tooltip<T>>;
 export default Tooltip;

package/dist/bits/tooltip/exports.d.ts

@@ -5,5 +5,6 @@ export { default as Trigger } from "./components/tooltip-trigger.svelte";
 export { default as Arrow } from "./components/tooltip-arrow.svelte";
 export { default as Provider } from "./components/tooltip-provider.svelte";
 export { default as Portal } from "../utilities/portal/portal.svelte";
-export type { TooltipProviderPropsWithoutHTML as ProviderProps, TooltipRootPropsWithoutHTML as RootProps, TooltipArrowProps as ArrowProps, TooltipContentProps as ContentProps, TooltipContentStaticProps as ContentStaticProps, TooltipTriggerProps as TriggerProps, } from "./types.js";
+export { createTooltipTether as createTether } from "./tooltip.svelte.js";
+export type { TooltipProviderPropsWithoutHTML as ProviderProps, TooltipRootPropsWithoutHTML as RootProps, TooltipArrowProps as ArrowProps, TooltipContentProps as ContentProps, TooltipContentStaticProps as ContentStaticProps, TooltipTriggerProps as TriggerProps, TooltipTether as Tether, TooltipRootSnippetProps as RootSnippetProps, } from "./types.js";
 export type { PortalProps } from "../utilities/portal/types.js";

package/dist/bits/tooltip/exports.js

@@ -5,3 +5,4 @@ export { default as Trigger } from "./components/tooltip-trigger.svelte";
 export { default as Arrow } from "./components/tooltip-arrow.svelte";
 export { default as Provider } from "./components/tooltip-provider.svelte";
 export { default as Portal } from "../utilities/portal/portal.svelte";
+export { createTooltipTether as createTether } from "./tooltip.svelte.js";

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

@@ -3,6 +3,38 @@ import type { OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/type
 import type { FocusEventHandler, MouseEventHandler, PointerEventHandler } from "svelte/elements";
 import { PresenceManager } from "../../internal/presence-manager.svelte.js";
 export declare const tooltipAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["content", "trigger"]>;
+type TooltipTriggerRecord = {
+    id: string;
+    node: HTMLElement | null;
+    payload: unknown;
+    disabled: boolean;
+};
+declare class TooltipTriggerRegistryState {
+    #private;
+    triggers: Map<string, TooltipTriggerRecord>;
+    activeTriggerId: string | null;
+    activeTriggerNode: HTMLElement | null;
+    activePayload: {} | null;
+    register: (record: TooltipTriggerRecord) => void;
+    update: (record: TooltipTriggerRecord) => void;
+    unregister: (id: string) => void;
+    setActiveTrigger: (id: string | null) => void;
+    get: (id: string) => TooltipTriggerRecord | undefined;
+    has: (id: string) => boolean;
+    getFirstTriggerId: () => string | null;
+}
+declare class TooltipTetherState {
+    readonly registry: TooltipTriggerRegistryState;
+    root: TooltipRootState | null;
+}
+export declare class TooltipTether<Payload = never> {
+    #private;
+    get state(): TooltipTetherState;
+    open(triggerId: string): void;
+    close(): void;
+    get isOpen(): boolean;
+}
+export declare function createTooltipTether<Payload = never>(): TooltipTether<Payload>;
 interface TooltipProviderStateOpts extends ReadableBoxedValues<{
     delayDuration: number;
     disableHoverableContent: boolean;
@@ -30,8 +62,10 @@ interface TooltipRootStateOpts extends ReadableBoxedValues<{
     disabled: boolean | undefined;
     ignoreNonKeyboardFocus: boolean | undefined;
     onOpenChangeComplete: OnChangeFn<boolean>;
+    tether: TooltipTether<unknown> | undefined;
 }>, WritableBoxedValues<{
     open: boolean;
+    triggerId: string | null;
 }> {
 }
 export declare class TooltipRootState {
@@ -44,34 +78,47 @@ export declare class TooltipRootState {
     readonly disableCloseOnTriggerClick: boolean;
     readonly disabled: boolean;
     readonly ignoreNonKeyboardFocus: boolean;
+    readonly registry: TooltipTriggerRegistryState;
+    readonly tether: TooltipTetherState | null;
     contentNode: HTMLElement | null;
     contentPresence: PresenceManager;
-    triggerNode: HTMLElement | null;
     readonly stateAttr: string;
     constructor(opts: TooltipRootStateOpts, provider: TooltipProviderState);
     handleOpen: () => void;
     handleClose: () => void;
-    onTriggerEnter: () => void;
+    onTriggerEnter: (triggerId: string) => void;
     onTriggerLeave: () => void;
+    ensureActiveTrigger: () => void;
+    setActiveTrigger: (triggerId: string | null) => void;
+    registerTrigger: (trigger: TooltipTriggerRecord) => void;
+    updateTrigger: (trigger: TooltipTriggerRecord) => void;
+    unregisterTrigger: (id: string) => void;
+    isActiveTrigger: (triggerId: string) => boolean;
+    get triggerNode(): HTMLElement | null;
+    get activePayload(): {} | null;
+    get activeTriggerId(): string | null;
 }
 interface TooltipTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
     tabindex: number;
+    payload: unknown;
+    tether: TooltipTether<unknown> | undefined;
 }> {
 }
 export declare class TooltipTriggerState {
     #private;
     static create(opts: TooltipTriggerStateOpts): TooltipTriggerState;
     readonly opts: TooltipTriggerStateOpts;
-    readonly root: TooltipRootState;
+    readonly root: TooltipRootState | null;
+    readonly tether: TooltipTetherState | null;
     readonly attachment: RefAttachment;
     domContext: DOMContext;
-    constructor(opts: TooltipTriggerStateOpts, root: TooltipRootState);
+    constructor(opts: TooltipTriggerStateOpts, root: TooltipRootState | null, tether: TooltipTetherState | null);
     handlePointerUp: () => void;
     readonly props: {
         readonly id: string;
         readonly "aria-describedby": string | undefined;
-        readonly "data-state": "closed" | "delayed-open" | "instant-open";
+        readonly "data-state": "closed" | "delayed-open" | "instant-open" | undefined;
         readonly "data-disabled": "" | undefined;
         readonly "data-delay-duration": `${number}`;
         readonly tabindex: number | undefined;

package/dist/bits/tooltip/tooltip.svelte.js

@@ -12,6 +12,103 @@ export const tooltipAttrs = createBitsAttrs({
 });
 const TooltipProviderContext = new Context("Tooltip.Provider");
 const TooltipRootContext = new Context("Tooltip.Root");
+class TooltipTriggerRegistryState {
+    triggers = $state(new Map());
+    activeTriggerId = $state(null);
+    activeTriggerNode = $derived.by(() => {
+        const activeTriggerId = this.activeTriggerId;
+        if (activeTriggerId === null)
+            return null;
+        return this.triggers.get(activeTriggerId)?.node ?? null;
+    });
+    activePayload = $derived.by(() => {
+        const activeTriggerId = this.activeTriggerId;
+        if (activeTriggerId === null)
+            return null;
+        return this.triggers.get(activeTriggerId)?.payload ?? null;
+    });
+    register = (record) => {
+        const next = new Map(this.triggers);
+        next.set(record.id, record);
+        this.triggers = next;
+        this.#coerceActiveTrigger();
+    };
+    update = (record) => {
+        const next = new Map(this.triggers);
+        next.set(record.id, record);
+        this.triggers = next;
+        this.#coerceActiveTrigger();
+    };
+    unregister = (id) => {
+        if (!this.triggers.has(id))
+            return;
+        const next = new Map(this.triggers);
+        next.delete(id);
+        this.triggers = next;
+        if (this.activeTriggerId === id) {
+            this.activeTriggerId = null;
+        }
+    };
+    setActiveTrigger = (id) => {
+        if (id === null) {
+            this.activeTriggerId = null;
+            return;
+        }
+        if (!this.triggers.has(id)) {
+            this.activeTriggerId = null;
+            return;
+        }
+        this.activeTriggerId = id;
+    };
+    get = (id) => {
+        return this.triggers.get(id);
+    };
+    has = (id) => {
+        return this.triggers.has(id);
+    };
+    getFirstTriggerId = () => {
+        const firstEntry = this.triggers.entries().next();
+        if (firstEntry.done)
+            return null;
+        return firstEntry.value[0];
+    };
+    #coerceActiveTrigger = () => {
+        const activeTriggerId = this.activeTriggerId;
+        if (activeTriggerId === null)
+            return;
+        if (!this.triggers.has(activeTriggerId)) {
+            this.activeTriggerId = null;
+        }
+    };
+}
+class TooltipTetherState {
+    registry = new TooltipTriggerRegistryState();
+    root = $state(null);
+}
+// oxlint-disable-next-line no-unused-vars
+export class TooltipTether {
+    #state = new TooltipTetherState();
+    get state() {
+        return this.#state;
+    }
+    open(triggerId) {
+        if (!this.#state.registry.has(triggerId)) {
+            return;
+        }
+        this.#state.registry.setActiveTrigger(triggerId);
+        this.#state.root?.setActiveTrigger(triggerId);
+        this.#state.root?.handleOpen();
+    }
+    close() {
+        this.#state.root?.handleClose();
+    }
+    get isOpen() {
+        return this.#state.root?.opts.open.current ?? false;
+    }
+}
+export function createTooltipTether() {
+    return new TooltipTether();
+}
 export class TooltipProviderState {
     static create(opts) {
         return TooltipProviderContext.set(new TooltipProviderState(opts));
@@ -26,10 +123,26 @@ export class TooltipProviderState {
         this.#timerFn = new TimeoutFn(() => {
             this.isOpenDelayed = true;
         }, this.opts.skipDelayDuration.current);
+        onMountEffect(() => on(window, "scroll", (e) => {
+            const activeTooltip = this.#openTooltip;
+            if (!activeTooltip)
+                return;
+            const triggerNode = activeTooltip.triggerNode;
+            if (!triggerNode)
+                return;
+            const target = e.target;
+            if (!(target instanceof Element || target instanceof Document))
+                return;
+            if (target.contains(triggerNode)) {
+                activeTooltip.handleClose();
+            }
+        }));
     }
     #startTimer = () => {
         const skipDuration = this.opts.skipDelayDuration.current;
         if (skipDuration === 0) {
+            // no grace period — reset immediately so next trigger waits the full delay
+            this.isOpenDelayed = true;
             return;
         }
         else {
@@ -71,9 +184,10 @@ export class TooltipRootState {
     disabled = $derived.by(() => this.opts.disabled.current ?? this.provider.opts.disabled.current);
     ignoreNonKeyboardFocus = $derived.by(() => this.opts.ignoreNonKeyboardFocus.current ??
         this.provider.opts.ignoreNonKeyboardFocus.current);
+    registry;
+    tether;
     contentNode = $state(null);
     contentPresence;
-    triggerNode = $state(null);
     #wasOpenDelayed = $state(false);
     #timerFn;
     stateAttr = $derived.by(() => {
@@ -84,10 +198,22 @@ export class TooltipRootState {
     constructor(opts, provider) {
         this.opts = opts;
         this.provider = provider;
+        this.tether = opts.tether.current?.state ?? null;
+        this.registry = this.tether?.registry ?? new TooltipTriggerRegistryState();
         this.#timerFn = new TimeoutFn(() => {
             this.#wasOpenDelayed = true;
             this.opts.open.current = true;
         }, this.delayDuration ?? 0);
+        if (this.tether) {
+            this.tether.root = this;
+            onMountEffect(() => {
+                return () => {
+                    if (this.tether?.root === this) {
+                        this.tether.root = null;
+                    }
+                };
+            });
+        }
         this.contentPresence = new PresenceManager({
             open: this.opts.open,
             ref: boxWith(() => this.contentNode),
@@ -105,16 +231,28 @@ export class TooltipRootState {
         });
         watch(() => this.opts.open.current, (isOpen) => {
             if (isOpen) {
+                this.ensureActiveTrigger();
                 this.provider.onOpen(this);
             }
             else {
                 this.provider.onClose(this);
             }
         }, { lazy: true });
+        watch(() => this.opts.triggerId.current, (triggerId) => {
+            if (triggerId === this.registry.activeTriggerId)
+                return;
+            this.registry.setActiveTrigger(triggerId);
+        });
+        watch(() => this.registry.activeTriggerId, (activeTriggerId) => {
+            if (this.opts.triggerId.current === activeTriggerId)
+                return;
+            this.opts.triggerId.current = activeTriggerId;
+        });
     }
     handleOpen = () => {
         this.#timerFn.stop();
         this.#wasOpenDelayed = false;
+        this.ensureActiveTrigger();
         this.opts.open.current = true;
     };
     handleClose = () => {
@@ -127,8 +265,7 @@ export class TooltipRootState {
         const delayDuration = this.delayDuration ?? 0;
         // if no delay needed (either skip delay active or delay is 0), open immediately
         if (shouldSkipDelay || delayDuration === 0) {
-            // set wasOpenDelayed based on whether we actually had a delay
-            this.#wasOpenDelayed = delayDuration > 0 && shouldSkipDelay;
+            this.#wasOpenDelayed = false;
             this.opts.open.current = true;
         }
         else {
@@ -136,7 +273,8 @@ export class TooltipRootState {
             this.#timerFn.start();
         }
     };
-    onTriggerEnter = () => {
+    onTriggerEnter = (triggerId) => {
+        this.setActiveTrigger(triggerId);
         this.#handleDelayedOpen();
     };
     onTriggerLeave = () => {
@@ -147,25 +285,161 @@ export class TooltipRootState {
             this.#timerFn.stop();
         }
     };
+    ensureActiveTrigger = () => {
+        if (this.registry.activeTriggerId !== null &&
+            this.registry.has(this.registry.activeTriggerId)) {
+            return;
+        }
+        if (this.opts.triggerId.current !== null &&
+            this.registry.has(this.opts.triggerId.current)) {
+            this.registry.setActiveTrigger(this.opts.triggerId.current);
+            return;
+        }
+        const firstTriggerId = this.registry.getFirstTriggerId();
+        this.registry.setActiveTrigger(firstTriggerId);
+    };
+    setActiveTrigger = (triggerId) => {
+        this.registry.setActiveTrigger(triggerId);
+    };
+    registerTrigger = (trigger) => {
+        this.registry.register(trigger);
+        if (trigger.disabled &&
+            this.registry.activeTriggerId === trigger.id &&
+            this.opts.open.current) {
+            this.handleClose();
+        }
+    };
+    updateTrigger = (trigger) => {
+        this.registry.update(trigger);
+        if (trigger.disabled &&
+            this.registry.activeTriggerId === trigger.id &&
+            this.opts.open.current) {
+            this.handleClose();
+        }
+    };
+    unregisterTrigger = (id) => {
+        const isActive = this.registry.activeTriggerId === id;
+        this.registry.unregister(id);
+        if (isActive && this.opts.open.current) {
+            this.handleClose();
+        }
+    };
+    isActiveTrigger = (triggerId) => {
+        return this.registry.activeTriggerId === triggerId;
+    };
+    get triggerNode() {
+        return this.registry.activeTriggerNode;
+    }
+    get activePayload() {
+        return this.registry.activePayload;
+    }
+    get activeTriggerId() {
+        return this.registry.activeTriggerId;
+    }
 }
 export class TooltipTriggerState {
     static create(opts) {
-        return new TooltipTriggerState(opts, TooltipRootContext.get());
+        if (opts.tether.current) {
+            return new TooltipTriggerState(opts, null, opts.tether.current.state);
+        }
+        return new TooltipTriggerState(opts, TooltipRootContext.get(), null);
     }
     opts;
     root;
+    tether;
     attachment;
     #isPointerDown = simpleBox(false);
     #hasPointerMoveOpened = $state(false);
-    #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.disabled);
     domContext;
     #transitCheckTimeout = null;
-    constructor(opts, root) {
+    #mounted = false;
+    #lastRegisteredId = null;
+    constructor(opts, root, tether) {
         this.opts = opts;
         this.root = root;
+        this.tether = tether;
         this.domContext = new DOMContext(opts.ref);
-        this.attachment = attachRef(this.opts.ref, (v) => (this.root.triggerNode = v));
+        this.attachment = attachRef(this.opts.ref, (v) => this.#register(v));
+        watch(() => this.opts.id.current, () => {
+            this.#register(this.opts.ref.current);
+        });
+        watch(() => this.opts.payload.current, () => {
+            this.#register(this.opts.ref.current);
+        });
+        watch(() => this.opts.disabled.current, () => {
+            this.#register(this.opts.ref.current);
+        });
+        onMountEffect(() => {
+            this.#mounted = true;
+            this.#register(this.opts.ref.current);
+            return () => {
+                const root = this.#getRoot();
+                const id = this.#lastRegisteredId;
+                if (id) {
+                    if (this.tether) {
+                        this.tether.registry.unregister(id);
+                    }
+                    else {
+                        root?.unregisterTrigger(id);
+                    }
+                }
+                this.#lastRegisteredId = null;
+                this.#mounted = false;
+            };
+        });
     }
+    #getRoot = () => {
+        return this.tether?.root ?? this.root;
+    };
+    #isDisabled = () => {
+        const root = this.#getRoot();
+        return this.opts.disabled.current || Boolean(root?.disabled);
+    };
+    #register = (node) => {
+        if (!this.#mounted)
+            return;
+        const id = this.opts.id.current;
+        const payload = this.opts.payload.current;
+        const disabled = this.opts.disabled.current;
+        if (this.#lastRegisteredId && this.#lastRegisteredId !== id) {
+            const root = this.#getRoot();
+            if (this.tether) {
+                this.tether.registry.unregister(this.#lastRegisteredId);
+            }
+            else {
+                root?.unregisterTrigger(this.#lastRegisteredId);
+            }
+        }
+        const triggerRecord = {
+            id,
+            node,
+            payload,
+            disabled,
+        };
+        const root = this.#getRoot();
+        if (this.tether) {
+            if (this.tether.registry.has(id)) {
+                this.tether.registry.update(triggerRecord);
+            }
+            else {
+                this.tether.registry.register(triggerRecord);
+            }
+            if (disabled &&
+                this.tether.registry.activeTriggerId === id &&
+                root?.opts.open.current) {
+                root.handleClose();
+            }
+        }
+        else {
+            if (root?.registry.has(id)) {
+                root.updateTrigger(triggerRecord);
+            }
+            else {
+                root?.registerTrigger(triggerRecord);
+            }
+        }
+        this.#lastRegisteredId = id;
+    };
     #clearTransitCheck = () => {
         if (this.#transitCheckTimeout !== null) {
             clearTimeout(this.#transitCheckTimeout);
@@ -176,12 +450,12 @@ export class TooltipTriggerState {
         this.#isPointerDown.current = false;
     };
     #onpointerup = () => {
-        if (this.#isDisabled)
+        if (this.#isDisabled())
             return;
         this.#isPointerDown.current = false;
     };
     #onpointerdown = () => {
-        if (this.#isDisabled)
+        if (this.#isDisabled())
             return;
         this.#isPointerDown.current = true;
         this.domContext.getDocument().addEventListener("pointerup", () => {
@@ -189,84 +463,133 @@ export class TooltipTriggerState {
         }, { once: true });
     };
     #onpointerenter = (e) => {
-        if (this.#isDisabled)
+        const root = this.#getRoot();
+        if (!root)
+            return;
+        if (this.#isDisabled()) {
+            if (root.opts.open.current) {
+                root.handleClose();
+            }
             return;
+        }
         if (e.pointerType === "touch")
             return;
         // if in transit, wait briefly to see if user is actually heading to old content or staying here
-        if (this.root.provider.isPointerInTransit.current) {
+        if (root.provider.isPointerInTransit.current) {
             this.#clearTransitCheck();
             this.#transitCheckTimeout = window.setTimeout(() => {
                 // if still in transit after delay, user is likely staying on this trigger
-                if (this.root.provider.isPointerInTransit.current) {
-                    this.root.provider.isPointerInTransit.current = false;
-                    this.root.onTriggerEnter();
+                if (root.provider.isPointerInTransit.current) {
+                    root.provider.isPointerInTransit.current = false;
+                    root.onTriggerEnter(this.opts.id.current);
                     this.#hasPointerMoveOpened = true;
                 }
             }, 250);
             return;
         }
-        this.root.onTriggerEnter();
+        root.onTriggerEnter(this.opts.id.current);
         this.#hasPointerMoveOpened = true;
     };
     #onpointermove = (e) => {
-        if (this.#isDisabled)
+        const root = this.#getRoot();
+        if (!root)
+            return;
+        if (this.#isDisabled()) {
+            if (root.opts.open.current) {
+                root.handleClose();
+            }
             return;
+        }
         if (e.pointerType === "touch")
             return;
         if (this.#hasPointerMoveOpened)
             return;
         // moving within trigger means we're definitely not in transit anymore
         this.#clearTransitCheck();
-        this.root.provider.isPointerInTransit.current = false;
-        this.root.onTriggerEnter();
+        root.provider.isPointerInTransit.current = false;
+        root.onTriggerEnter(this.opts.id.current);
         this.#hasPointerMoveOpened = true;
     };
-    #onpointerleave = () => {
-        if (this.#isDisabled)
+    #onpointerleave = (e) => {
+        const root = this.#getRoot();
+        if (!root)
+            return;
+        if (this.#isDisabled())
             return;
         this.#clearTransitCheck();
-        this.root.onTriggerLeave();
+        if (!root.isActiveTrigger(this.opts.id.current)) {
+            this.#hasPointerMoveOpened = false;
+            return;
+        }
+        const relatedTarget = e.relatedTarget;
+        // when moving to a sibling trigger and skip delay is active, don't close —
+        // the sibling's enter handler will switch the active trigger instantly.
+        // if skipDelayDuration is 0 there's no grace period, so let the tooltip
+        // close and make the sibling wait through the full delay (and re-animate).
+        if (isElement(relatedTarget) && root.provider.opts.skipDelayDuration.current > 0) {
+            for (const record of root.registry.triggers.values()) {
+                if (record.node === relatedTarget) {
+                    this.#hasPointerMoveOpened = false;
+                    return;
+                }
+            }
+        }
+        root.onTriggerLeave();
         this.#hasPointerMoveOpened = false;
     };
     #onfocus = (e) => {
-        if (this.#isPointerDown.current || this.#isDisabled)
+        const root = this.#getRoot();
+        if (!root)
             return;
-        if (this.root.ignoreNonKeyboardFocus && !isFocusVisible(e.currentTarget))
+        if (this.#isPointerDown.current)
+            return;
+        if (this.#isDisabled()) {
+            if (root.opts.open.current) {
+                root.handleClose();
+            }
             return;
-        this.root.handleOpen();
+        }
+        if (root.ignoreNonKeyboardFocus && !isFocusVisible(e.currentTarget))
+            return;
+        root.setActiveTrigger(this.opts.id.current);
+        root.handleOpen();
     };
     #onblur = () => {
-        if (this.#isDisabled)
+        const root = this.#getRoot();
+        if (!root || this.#isDisabled())
             return;
-        this.root.handleClose();
+        root.handleClose();
     };
     #onclick = () => {
-        if (this.root.disableCloseOnTriggerClick || this.#isDisabled)
+        const root = this.#getRoot();
+        if (!root || root.disableCloseOnTriggerClick || this.#isDisabled())
             return;
-        this.root.handleClose();
+        root.handleClose();
     };
-    props = $derived.by(() => ({
-        id: this.opts.id.current,
-        "aria-describedby": this.root.opts.open.current
-            ? this.root.contentNode?.id
-            : undefined,
-        "data-state": this.root.stateAttr,
-        "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),
-        "data-delay-duration": `${this.root.delayDuration}`,
-        [tooltipAttrs.trigger]: "",
-        tabindex: this.#isDisabled ? undefined : this.opts.tabindex.current,
-        disabled: this.opts.disabled.current,
-        onpointerup: this.#onpointerup,
-        onpointerdown: this.#onpointerdown,
-        onpointerenter: this.#onpointerenter,
-        onpointermove: this.#onpointermove,
-        onpointerleave: this.#onpointerleave,
-        onfocus: this.#onfocus,
-        onblur: this.#onblur,
-        onclick: this.#onclick,
-        ...this.attachment,
-    }));
+    props = $derived.by(() => {
+        const root = this.#getRoot();
+        const isOpenForTrigger = Boolean(root?.opts.open.current && root.isActiveTrigger(this.opts.id.current));
+        const isDisabled = this.#isDisabled();
+        return {
+            id: this.opts.id.current,
+            "aria-describedby": isOpenForTrigger ? root?.contentNode?.id : undefined,
+            "data-state": isOpenForTrigger ? root?.stateAttr : "closed",
+            "data-disabled": boolToEmptyStrOrUndef(isDisabled),
+            "data-delay-duration": `${root?.delayDuration ?? 0}`,
+            [tooltipAttrs.trigger]: "",
+            tabindex: isDisabled ? undefined : this.opts.tabindex.current,
+            disabled: this.opts.disabled.current,
+            onpointerup: this.#onpointerup,
+            onpointerdown: this.#onpointerdown,
+            onpointerenter: this.#onpointerenter,
+            onpointermove: this.#onpointermove,
+            onpointerleave: this.#onpointerleave,
+            onfocus: this.#onfocus,
+            onblur: this.#onblur,
+            onclick: this.#onclick,
+            ...this.attachment,
+        };
+    });
 }
 export class TooltipContentState {
     static create(opts) {
@@ -283,20 +606,26 @@ export class TooltipContentState {
             triggerNode: () => this.root.triggerNode,
             contentNode: () => this.root.contentNode,
             enabled: () => this.root.opts.open.current && !this.root.disableHoverableContent,
+            ignoredTargets: () => {
+                // only skip closing for sibling triggers when there's a skip-delay grace period;
+                // with skipDelayDuration=0 the close+reopen is intentional (full delay + re-animation)
+                if (this.root.provider.opts.skipDelayDuration.current === 0)
+                    return [];
+                const nodes = [];
+                const activeTriggerNode = this.root.triggerNode;
+                for (const record of this.root.registry.triggers.values()) {
+                    if (record.node && record.node !== activeTriggerNode) {
+                        nodes.push(record.node);
+                    }
+                }
+                return nodes;
+            },
             onPointerExit: () => {
                 if (this.root.provider.isTooltipOpen(this.root)) {
                     this.root.handleClose();
                 }
             },
         });
-        onMountEffect(() => on(window, "scroll", (e) => {
-            const target = e.target;
-            if (!target)
-                return;
-            if (target.contains(this.root.triggerNode)) {
-                this.root.handleClose();
-            }
-        }));
     }
     onInteractOutside = (e) => {
         if (isElement(e.target) &&

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

@@ -2,10 +2,18 @@ import type { FloatingLayerContentProps } from "../utilities/floating-layer/type
 import type { ArrowProps, ArrowPropsWithoutHTML } from "../utilities/arrow/types.js";
 import type { DismissibleLayerProps } from "../utilities/dismissible-layer/types.js";
 import type { EscapeLayerProps } from "../utilities/escape-layer/types.js";
+import type { Snippet } from "svelte";
 import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildren, Without } from "../../internal/types.js";
 import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
 import type { PortalProps } from "../utilities/portal/types.js";
 import type { FloatingContentSnippetProps, StaticContentSnippetProps } from "../../shared/types.js";
+import type { TooltipTether as TooltipTetherImpl } from "./tooltip.svelte.js";
+export type TooltipTether<Payload = never> = TooltipTetherImpl<Payload>;
+export type TooltipRootSnippetProps<Payload = never> = {
+    open: boolean;
+    triggerId: string | null;
+    payload: [Payload] extends [never] ? null : Payload | null;
+};
 export type TooltipProviderPropsWithoutHTML = WithChildren<{
     /**
      * The delay in milliseconds before the tooltip opens.
@@ -46,7 +54,7 @@ export type TooltipProviderPropsWithoutHTML = WithChildren<{
     ignoreNonKeyboardFocus?: boolean;
 }>;
 export type TooltipProviderProps = TooltipProviderPropsWithoutHTML;
-export type TooltipRootPropsWithoutHTML = WithChildren<{
+export type TooltipRootPropsWithoutHTML<Payload = never> = Omit<WithChildren<{
     /**
      * The open state of the tooltip.
      *
@@ -92,8 +100,18 @@ export type TooltipRootPropsWithoutHTML = WithChildren<{
      * @defaultValue false
      */
     ignoreNonKeyboardFocus?: boolean;
-}>;
-export type TooltipRootProps = TooltipRootPropsWithoutHTML;
+    /**
+     * The active trigger id for controlled single tooltip mode.
+     */
+    triggerId?: string | null;
+    /**
+     * Shared tether used to connect detached triggers and infer payload types.
+     */
+    tether?: TooltipTether<Payload> | undefined;
+}>, "children"> & {
+    children?: Snippet | Snippet<[TooltipRootSnippetProps<Payload>]>;
+};
+export type TooltipRootProps<Payload = never> = TooltipRootPropsWithoutHTML<Payload>;
 export type TooltipContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<Omit<FloatingLayerContentProps, "content" | "preventScroll"> & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & EscapeLayerProps & {
     /**
      * When `true`, the tooltip will be forced to mount in the DOM.
@@ -116,12 +134,20 @@ export type TooltipArrowPropsWithoutHTML = ArrowPropsWithoutHTML;
 export type TooltipArrowProps = ArrowProps;
 export type TooltipPortalPropsWithoutHTML = PortalProps;
 export type TooltipPortalProps = PortalProps;
-export type TooltipTriggerPropsWithoutHTML = WithChild<{
+export type TooltipTriggerPropsWithoutHTML<Payload = never> = WithChild<{
     /**
      * Whether the tooltip trigger is disabled or not.
      *
      * @defaultValue false
      */
     disabled?: boolean | null | undefined;
+    /**
+     * Payload for the trigger used by singleton tooltip root snippets.
+     */
+    payload?: [Payload] extends [never] ? unknown : Payload;
+    /**
+     * Shared tether used to connect detached triggers and infer payload types.
+     */
+    tether?: TooltipTether<Payload> | undefined;
 }>;
-export type TooltipTriggerProps = TooltipTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, TooltipTriggerPropsWithoutHTML>;
+export type TooltipTriggerProps<Payload = never> = TooltipTriggerPropsWithoutHTML<Payload> & Without<BitsPrimitiveButtonAttributes, TooltipTriggerPropsWithoutHTML<Payload>>;

package/dist/bits/utilities/floating-layer/use-floating-layer.svelte.js

@@ -181,6 +181,7 @@ export class FloatingContentState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.#updatePositionStrategy = opts.updatePositionStrategy;
         if (opts.customAnchor) {
             this.root.customAnchorNode.current = opts.customAnchor.current;
         }
@@ -208,10 +209,21 @@ export class FloatingContentState {
             this.opts.onPlaced?.current();
         });
         watch(() => this.contentRef.current, (contentNode) => {
-            if (!contentNode)
+            if (!contentNode || !this.opts.enabled.current)
                 return;
             const win = getWindow(contentNode);
-            this.contentZIndex = win.getComputedStyle(contentNode).zIndex;
+            const rafId = win.requestAnimationFrame(() => {
+                // avoid applying stale values when refs change quickly
+                if (this.contentRef.current !== contentNode || !this.opts.enabled.current)
+                    return;
+                const zIndex = win.getComputedStyle(contentNode).zIndex;
+                if (zIndex !== this.contentZIndex) {
+                    this.contentZIndex = zIndex;
+                }
+            });
+            return () => {
+                win.cancelAnimationFrame(rafId);
+            };
         });
         $effect(() => {
             this.floating.floating.current = this.wrapperRef.current;

package/dist/internal/floating-svelte/use-floating.svelte.js

@@ -22,6 +22,7 @@ export function useFloating(options) {
     let placement = $state(placementOption);
     let middlewareData = $state({});
     let isPositioned = $state(false);
+    let hasWhileMountedPosition = false;
     const floatingStyles = $derived.by(() => {
         // preserve last known position when floating ref is null (during transitions)
         const xVal = floating.current ? roundByDPR(floating.current, x) : x;
@@ -82,6 +83,8 @@ export function useFloating(options) {
             update();
             return;
         }
+        if (!openOption)
+            return;
         if (reference.current === null || floating.current === null)
             return;
         whileElementsMountedCleanup = whileElementsMountedOption(reference.current, floating.current, update);
@@ -91,8 +94,43 @@ export function useFloating(options) {
             isPositioned = false;
         }
     }
-    $effect(update);
+    function trackWhileMountedDeps() {
+        return [
+            middlewareOption,
+            placementOption,
+            strategyOption,
+            sideOffsetOption,
+            alignOffsetOption,
+            openOption,
+        ];
+    }
+    $effect(() => {
+        if (whileElementsMountedOption !== undefined)
+            return;
+        if (!openOption)
+            return;
+        update();
+    });
     $effect(attach);
+    $effect(() => {
+        if (whileElementsMountedOption === undefined)
+            return;
+        trackWhileMountedDeps();
+        if (!openOption) {
+            hasWhileMountedPosition = false;
+            return;
+        }
+        if (!isPositioned) {
+            hasWhileMountedPosition = false;
+            return;
+        }
+        // skip the first post-position run, since autoUpdate already computed it
+        if (!hasWhileMountedPosition) {
+            hasWhileMountedPosition = true;
+            return;
+        }
+        update();
+    });
     $effect(reset);
     $effect(() => cleanup);
     return {

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

@@ -5,6 +5,8 @@ export interface SafePolygonOptions {
     contentNode: Getter<HTMLElement | null>;
     onPointerExit: () => void;
     buffer?: number;
+    /** nodes that should not trigger a close when they become the relatedTarget on trigger leave (e.g. sibling triggers in singleton mode) */
+    ignoredTargets?: Getter<HTMLElement[]>;
 }
 /**
  * Creates a safe polygon area that allows users to move their cursor between

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

@@ -46,18 +46,34 @@ export class SafePolygon {
     #exitPoint = null;
     // tracks what we're moving toward: "content" when leaving trigger, "trigger" when leaving content
     #exitTarget = null;
+    #leaveFallbackRafId = null;
+    #cancelLeaveFallback() {
+        if (this.#leaveFallbackRafId !== null) {
+            cancelAnimationFrame(this.#leaveFallbackRafId);
+            this.#leaveFallbackRafId = null;
+        }
+    }
+    #scheduleLeaveFallback() {
+        this.#cancelLeaveFallback();
+        this.#leaveFallbackRafId = requestAnimationFrame(() => {
+            this.#leaveFallbackRafId = null;
+            if (!this.#exitPoint || !this.#exitTarget)
+                return;
+            this.#clearTracking();
+            this.#opts.onPointerExit();
+        });
+    }
     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;
+                this.#clearTracking();
                 return;
             }
             const doc = getDocument(triggerNode);
             const handlePointerMove = (e) => {
-                this.#onPointerMove(e, triggerNode, contentNode);
+                this.#onPointerMove([e.clientX, e.clientY], triggerNode, contentNode);
             };
             const handleTriggerLeave = (e) => {
                 // when leaving trigger toward content, record exit point
@@ -66,18 +82,34 @@ export class SafePolygon {
                 if (isElement(target) && contentNode.contains(target)) {
                     return;
                 }
+                // if moving to an ignored target (e.g. a sibling trigger), don't close —
+                // the sibling's enter handler will take over
+                const ignoredTargets = this.#opts.ignoredTargets?.() ?? [];
+                if (isElement(target) &&
+                    ignoredTargets.some((n) => n === target || n.contains(target))) {
+                    return;
+                }
+                // if relatedTarget is completely unrelated to the floating tree
+                // (not an ancestor of content, not inside content/trigger), close now
+                if (isElement(target) &&
+                    !triggerNode.contains(target) &&
+                    !contentNode.contains(target) &&
+                    !target.contains(contentNode)) {
+                    this.#clearTracking();
+                    this.#opts.onPointerExit();
+                    return;
+                }
                 this.#exitPoint = [e.clientX, e.clientY];
                 this.#exitTarget = "content";
+                this.#scheduleLeaveFallback();
             };
             const handleTriggerEnter = () => {
                 // reached trigger, clear tracking
-                this.#exitPoint = null;
-                this.#exitTarget = null;
+                this.#clearTracking();
             };
             const handleContentEnter = () => {
                 // reached content, clear tracking
-                this.#exitPoint = null;
-                this.#exitTarget = null;
+                this.#clearTracking();
             };
             const handleContentLeave = (e) => {
                 // when leaving content, check if going directly back to trigger
@@ -86,9 +118,10 @@ export class SafePolygon {
                     // going directly to trigger, no polygon tracking needed
                     return;
                 }
-                // might be traversing gap back to trigger, set up polygon tracking
+                // set up polygon tracking toward trigger — pointermove decides whether to close
                 this.#exitPoint = [e.clientX, e.clientY];
                 this.#exitTarget = "trigger";
+                this.#scheduleLeaveFallback();
             };
             return [
                 on(doc, "pointermove", handlePointerMove),
@@ -102,22 +135,20 @@ export class SafePolygon {
             }, () => { });
         });
     }
-    #onPointerMove(e, triggerNode, contentNode) {
+    #onPointerMove(clientPoint, triggerNode, contentNode) {
         // if no exit point recorded, nothing to check
         if (!this.#exitPoint || !this.#exitTarget)
             return;
-        const clientPoint = [e.clientX, e.clientY];
+        this.#cancelLeaveFallback();
         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;
+            this.#clearTracking();
             return;
         }
         if (this.#exitTarget === "trigger" && isInsideRect(clientPoint, triggerRect)) {
-            this.#exitPoint = null;
-            this.#exitTarget = null;
+            this.#clearTracking();
             return;
         }
         // check if pointer is in the rectangular corridor between trigger and content
@@ -133,9 +164,13 @@ export class SafePolygon {
             return;
         }
         // pointer is outside all safe zones - close
+        this.#clearTracking();
+        this.#opts.onPointerExit();
+    }
+    #clearTracking() {
         this.#exitPoint = null;
         this.#exitTarget = null;
-        this.#opts.onPointerExit();
+        this.#cancelLeaveFallback();
     }
     /**
      * Creates a rectangular corridor between trigger and content

package/package.json

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