bits-ui 2.15.3 → 2.15.5

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

@@ -26,6 +26,7 @@ interface AccordionItemStateOpts extends WithRefOpts, ReadableBoxedValues<{
 }
 interface AccordionTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean | null | undefined;
+    tabindex: number;
 }> {
 }
 interface AccordionContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
@@ -111,7 +112,7 @@ export declare class AccordionTriggerState {
         readonly "data-disabled": "" | undefined;
         readonly "data-state": "open" | "closed";
         readonly "data-orientation": Orientation;
-        readonly tabindex: 0;
+        readonly tabindex: number;
         readonly onclick: (e: BitsMouseEvent) => void;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };

package/dist/bits/accordion/accordion.svelte.js

@@ -155,7 +155,7 @@ export class AccordionTriggerState {
         "data-state": getDataOpenClosed(this.itemState.isActive),
         "data-orientation": this.#root.opts.orientation.current,
         [accordionAttrs.trigger]: "",
-        tabindex: 0,
+        tabindex: this.opts.tabindex.current,
         onclick: this.onclick,
         onkeydown: this.onkeydown,
         ...this.attachment,

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

@@ -10,6 +10,7 @@
 		disabled = false,
 		ref = $bindable(null),
 		id = createId(uid),
+		tabindex = 0,
 		children,
 		child,
 		...restProps
@@ -18,6 +19,7 @@
 	const triggerState = AccordionTriggerState.create({
 		disabled: boxWith(() => disabled),
 		id: boxWith(() => id),
+		tabindex: boxWith(() => tabindex ?? 0),
 		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)

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

@@ -21,6 +21,7 @@
 		// the default menu behavior of handling outside interactions on the trigger
 		onEscapeKeydown = noop,
 		forceMount = false,
+		style,
 		...restProps
 	}: ContextMenuContentStaticProps = $props();
 
@@ -82,9 +83,11 @@
 		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
-			{@const finalProps = mergeProps(props, {
-				style: getFloatingContentCSSVars("context-menu"),
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("context-menu") },
+				{ style }
+			)}
 			{#if child}
 				{@render child({ props: finalProps, ...contentState.snippetProps })}
 			{:else}
@@ -115,9 +118,11 @@
 		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
-			{@const finalProps = mergeProps(props, {
-				style: getFloatingContentCSSVars("context-menu"),
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("context-menu") },
+				{ style }
+			)}
 			{#if child}
 				{@render child({ props: finalProps, ...contentState.snippetProps })}
 			{:else}

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

@@ -26,6 +26,7 @@
 		onEscapeKeydown = noop,
 		forceMount = false,
 		trapFocus = false,
+		style,
 		...restProps
 	}: ContextMenuContentProps = $props();
 
@@ -95,9 +96,11 @@
 		enabled={contentState.parentMenu.opts.open.current}
 	>
 		{#snippet popper({ props, wrapperProps })}
-			{@const finalProps = mergeProps(props, {
-				style: getFloatingContentCSSVars("context-menu"),
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("context-menu") },
+				{ style }
+			)}
 			{#if child}
 				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
 			{:else}
@@ -116,9 +119,11 @@
 		open={contentState.parentMenu.opts.open.current}
 	>
 		{#snippet popper({ props, wrapperProps })}
-			{@const finalProps = mergeProps(props, {
-				style: getFloatingContentCSSVars("context-menu"),
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("context-menu") },
+				{ style }
+			)}
 			{#if child}
 				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
 			{:else}

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

@@ -148,6 +148,7 @@ export declare class DialogContentState {
             readonly outline: "none" | undefined;
             readonly "--bits-dialog-depth": number;
             readonly "--bits-dialog-nested-count": number;
+            readonly contain: "layout style paint";
         };
         readonly tabindex: -1 | undefined;
         readonly "data-nested-open": "" | undefined;

package/dist/bits/dialog/dialog.svelte.js

@@ -272,6 +272,9 @@ export class DialogContentState {
             outline: this.root.opts.variant.current === "alert-dialog" ? "none" : undefined,
             "--bits-dialog-depth": this.root.depth,
             "--bits-dialog-nested-count": this.root.nestedOpenCount,
+            // CSS containment isolates style/layout/paint calculations from the rest of the page,
+            // improving performance when there's a large DOM behind the dialog
+            contain: "layout style paint",
         },
         tabindex: this.root.opts.variant.current === "alert-dialog" ? -1 : undefined,
         "data-nested-open": boolToEmptyStrOrUndef(this.root.nestedOpenCount > 0),

package/dist/bits/dropdown-menu/components/dropdown-menu-content-static.svelte

@@ -20,6 +20,7 @@
 		onEscapeKeydown = noop,
 		onCloseAutoFocus = noop,
 		forceMount = false,
+		style,
 		...restProps
 	}: DropdownMenuContentStaticProps = $props();
 
@@ -65,9 +66,11 @@
 		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
-			{@const finalProps = mergeProps(props, {
-				style: getFloatingContentCSSVars("dropdown-menu"),
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("dropdown-menu") },
+				{ style }
+			)}
 			{#if child}
 				{@render child({ props: finalProps, ...contentState.snippetProps })}
 			{:else}
@@ -93,9 +96,11 @@
 		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
-			{@const finalProps = mergeProps(props, {
-				style: getFloatingContentCSSVars("dropdown-menu"),
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("dropdown-menu") },
+				{ style }
+			)}
 			{#if child}
 				{@render child({ props: finalProps, ...contentState.snippetProps })}
 			{:else}

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

@@ -21,6 +21,7 @@
 		onCloseAutoFocus = noop,
 		forceMount = false,
 		trapFocus = false,
+		style,
 		...restProps
 	}: DropdownMenuContentProps = $props();
 
@@ -71,9 +72,11 @@
 		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
-			{@const finalProps = mergeProps(props, {
-				style: getFloatingContentCSSVars("dropdown-menu"),
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("dropdown-menu") },
+				{ style }
+			)}
 			{#if child}
 				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
 			{:else}
@@ -100,9 +103,11 @@
 		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
-			{@const finalProps = mergeProps(props, {
-				style: getFloatingContentCSSVars("dropdown-menu"),
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("dropdown-menu") },
+				{ style }
+			)}
 			{#if child}
 				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
 			{:else}

package/dist/bits/link-preview/components/link-preview-content-static.svelte

@@ -19,6 +19,7 @@
 		onInteractOutside = noop,
 		onEscapeKeydown = noop,
 		forceMount = false,
+		style,
 		...restProps
 	}: LinkPreviewContentStaticProps = $props();
 
@@ -50,13 +51,15 @@
 		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
-			{@const mergedProps = mergeProps(props, {
-				style: getFloatingContentCSSVars("link-preview"),
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("link-preview") },
+				{ style }
+			)}
 			{#if child}
-				{@render child({ props: mergedProps, ...contentState.snippetProps })}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
 			{:else}
-				<div {...mergedProps}>
+				<div {...finalProps}>
 					{@render children?.()}
 				</div>
 			{/if}
@@ -78,13 +81,15 @@
 		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
-			{@const mergedProps = mergeProps(props, {
-				style: getFloatingContentCSSVars("link-preview"),
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("link-preview") },
+				{ style }
+			)}
 			{#if child}
-				{@render child({ props: mergedProps, ...contentState.snippetProps })}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
 			{:else}
-				<div {...mergedProps}>
+				<div {...finalProps}>
 					{@render children?.()}
 				</div>
 			{/if}

package/dist/bits/link-preview/components/link-preview-content.svelte

@@ -27,6 +27,7 @@
 		onInteractOutside = noop,
 		onEscapeKeydown = noop,
 		forceMount = false,
+		style,
 		...restProps
 	}: LinkPreviewContentProps = $props();
 
@@ -68,14 +69,16 @@
 		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
-			{@const mergedProps = mergeProps(props, {
-				style: getFloatingContentCSSVars("link-preview"),
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("link-preview") },
+				{ style }
+			)}
 			{#if child}
-				{@render child({ props: mergedProps, wrapperProps, ...contentState.snippetProps })}
+				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
 			{:else}
 				<div {...wrapperProps}>
-					<div {...mergedProps}>
+					<div {...finalProps}>
 						{@render children?.()}
 					</div>
 				</div>
@@ -97,14 +100,16 @@
 		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
-			{@const mergedProps = mergeProps(props, {
-				style: getFloatingContentCSSVars("link-preview"),
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("link-preview") },
+				{ style }
+			)}
 			{#if child}
-				{@render child({ props: mergedProps, wrapperProps, ...contentState.snippetProps })}
+				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
 			{:else}
 				<div {...wrapperProps}>
-					<div {...mergedProps}>
+					<div {...finalProps}>
 						{@render children?.()}
 					</div>
 				</div>

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

@@ -20,6 +20,7 @@
 		onEscapeKeydown = noop,
 		onCloseAutoFocus: onCloseAutoFocusProp = noop,
 		forceMount = false,
+		style,
 		...restProps
 	}: MenuContentStaticProps = $props();
 
@@ -68,12 +69,11 @@
 		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
-			{@const finalProps = mergeProps(props, {
-				style: {
-					outline: "none",
-					...getFloatingContentCSSVars("menu"),
-				},
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: { outline: "none", ...getFloatingContentCSSVars("menu") } },
+				{ style }
+			)}
 			{#if child}
 				{@render child({ props: finalProps, ...contentState.snippetProps })}
 			{:else}
@@ -99,12 +99,11 @@
 		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
-			{@const finalProps = mergeProps(props, {
-				style: {
-					outline: "none",
-					...getFloatingContentCSSVars("menu"),
-				},
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: { outline: "none", ...getFloatingContentCSSVars("menu") } },
+				{ style }
+			)}
 			{#if child}
 				{@render child({ props: finalProps, ...contentState.snippetProps })}
 			{:else}

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

@@ -20,6 +20,7 @@
 		onEscapeKeydown = noop,
 		onCloseAutoFocus: onCloseAutoFocusProp = noop,
 		forceMount = false,
+		style,
 		...restProps
 	}: MenuContentProps = $props();
 
@@ -72,12 +73,11 @@
 		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
-			{@const finalProps = mergeProps(props, {
-				style: {
-					outline: "none",
-					...getFloatingContentCSSVars("menu"),
-				},
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: { outline: "none", ...getFloatingContentCSSVars("menu") } },
+				{ style }
+			)}
 			{#if child}
 				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
 			{:else}
@@ -104,12 +104,11 @@
 		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
-			{@const finalProps = mergeProps(props, {
-				style: {
-					outline: "none",
-					...getFloatingContentCSSVars("menu"),
-				},
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: { outline: "none", ...getFloatingContentCSSVars("menu") } },
+				{ style }
+			)}
 			{#if child}
 				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
 			{:else}

package/dist/bits/menu/components/menu-sub-content-static.svelte

@@ -27,6 +27,7 @@
 		onCloseAutoFocus: onCloseAutoFocusProp = noop,
 		onFocusOutside = noop,
 		trapFocus = false,
+		style,
 		...restProps
 	}: MenuSubContentStaticProps = $props();
 
@@ -123,9 +124,12 @@
 		shouldRender={subContentState.shouldRender}
 	>
 		{#snippet popper({ props })}
-			{@const finalProps = mergeProps(props, mergedProps, {
-				style: getFloatingContentCSSVars("menu"),
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				mergedProps,
+				{ style: getFloatingContentCSSVars("menu") },
+				{ style }
+			)}
 			{#if child}
 				{@render child({ props: finalProps, ...subContentState.snippetProps })}
 			{:else}
@@ -154,9 +158,12 @@
 		shouldRender={subContentState.shouldRender}
 	>
 		{#snippet popper({ props })}
-			{@const finalProps = mergeProps(props, mergedProps, {
-				style: getFloatingContentCSSVars("menu"),
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				mergedProps,
+				{ style: getFloatingContentCSSVars("menu") },
+				{ style }
+			)}
 			{#if child}
 				{@render child({ props: finalProps, ...subContentState.snippetProps })}
 			{:else}

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

@@ -28,6 +28,7 @@
 		onFocusOutside = noop,
 		side = "right",
 		trapFocus = false,
+		style,
 		...restProps
 	}: MenuSubContentProps = $props();
 
@@ -124,9 +125,12 @@
 		shouldRender={subContentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
-			{@const finalProps = mergeProps(props, mergedProps, {
-				style: getFloatingContentCSSVars("menu"),
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				mergedProps,
+				{ style: getFloatingContentCSSVars("menu") },
+				{ style }
+			)}
 			{#if child}
 				{@render child({
 					props: finalProps,
@@ -160,9 +164,12 @@
 		shouldRender={subContentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
-			{@const finalProps = mergeProps(props, mergedProps, {
-				style: getFloatingContentCSSVars("menu"),
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				mergedProps,
+				{ style: getFloatingContentCSSVars("menu") },
+				{ style }
+			)}
 			{#if child}
 				{@render child({
 					props: finalProps,

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

@@ -89,6 +89,7 @@ export declare class MenuContentState {
         readonly dir: Direction;
         readonly style: {
             readonly pointerEvents: "auto";
+            readonly contain: "layout style paint";
         };
     };
     readonly popperProps: {

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

@@ -324,6 +324,8 @@ export class MenuContentState {
         dir: this.parentMenu.root.opts.dir.current,
         style: {
             pointerEvents: "auto",
+            // CSS containment isolates style/layout/paint calculations from the rest of the page
+            contain: "layout style paint",
         },
         ...this.attachment,
     }));

package/dist/bits/pin-input/pin-input.svelte.js

@@ -249,13 +249,13 @@ export class PinInputRootState {
                 else if (maxLength > 1 && val.length > 1) {
                     let offset = 0;
                     if (prev[0] !== null && prev[1] !== null) {
-                        direction = c < prev[0] ? "backward" : "forward";
+                        direction = c < prev[1] ? "backward" : "forward";
                         const wasPreviouslyInserting = prev[0] === prev[1] && prev[0] < maxLength;
                         if (direction === "backward" && !wasPreviouslyInserting) {
                             offset = -1;
                         }
                     }
-                    start = offset - c;
+                    start = offset + c;
                     end = offset + c + 1;
                 }
             }

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

@@ -21,6 +21,7 @@
 		onInteractOutside = noop,
 		trapFocus = true,
 		preventScroll = false,
+		style,
 		...restProps
 	}: PopoverContentStaticProps = $props();
 
@@ -54,9 +55,13 @@
 		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
-			{@const finalProps = mergeProps(props, {
-				style: getFloatingContentCSSVars("popover"),
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				{
+					style: getFloatingContentCSSVars("popover"),
+				},
+				{ style }
+			)}
 			{#if child}
 				{@render child({ props: finalProps, ...contentState.snippetProps })}
 			{:else}
@@ -82,9 +87,11 @@
 		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
-			{@const finalProps = mergeProps(props, {
-				style: getFloatingContentCSSVars("popover"),
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("popover") },
+				{ style }
+			)}
 			{#if child}
 				{@render child({ props: finalProps, ...contentState.snippetProps })}
 			{:else}

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

@@ -23,6 +23,7 @@
 		trapFocus = true,
 		preventScroll = false,
 		customAnchor = null,
+		style,
 		...restProps
 	}: PopoverContentProps = $props();
 
@@ -68,9 +69,11 @@
 		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
-			{@const finalProps = mergeProps(props, {
-				style: getFloatingContentCSSVars("popover"),
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("popover") },
+				{ style }
+			)}
 			{#if child}
 				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
 			{:else}
@@ -99,9 +102,11 @@
 		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
-			{@const finalProps = mergeProps(props, {
-				style: getFloatingContentCSSVars("popover"),
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("popover") },
+				{ style }
+			)}
 			{#if child}
 				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
 			{:else}

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

@@ -19,6 +19,7 @@ export declare class PopoverRootState {
     overlayPresence: PresenceManager;
     openedViaHover: boolean;
     hasInteractedWithContent: boolean;
+    hoverCooldown: boolean;
     closeDelay: number;
     constructor(opts: PopoverRootStateOpts);
     setDomContext(ctx: DOMContext): void;
@@ -91,6 +92,7 @@ export declare class PopoverContentState {
         readonly "data-state": "open" | "closed";
         readonly style: {
             readonly pointerEvents: "auto";
+            readonly contain: "layout style paint";
         };
         readonly onpointerdown: (_: BitsPointerEvent) => void;
         readonly onfocusin: (e: BitsFocusEvent) => void;

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

@@ -24,6 +24,7 @@ export class PopoverRootState {
     // hover tracking state
     openedViaHover = $state(false);
     hasInteractedWithContent = $state(false);
+    hoverCooldown = $state(false);
     closeDelay = $state(0);
     #closeTimeout = null;
     #domContext = null;
@@ -159,7 +160,7 @@ export class PopoverTriggerState {
         this.#isHovering = true;
         this.#clearCloseTimeout();
         this.root.cancelDelayedClose();
-        if (this.root.opts.open.current)
+        if (this.root.opts.open.current || this.root.hoverCooldown)
             return;
         const delay = this.opts.openDelay.current;
         if (delay <= 0) {
@@ -181,6 +182,7 @@ export class PopoverTriggerState {
             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
     }
@@ -196,6 +198,15 @@ export class PopoverTriggerState {
             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) {
@@ -317,6 +328,8 @@ export class PopoverContentState {
         [popoverAttrs.content]: "",
         style: {
             pointerEvents: "auto",
+            // CSS containment isolates style/layout/paint calculations from the rest of the page
+            contain: "layout style paint",
         },
         onpointerdown: this.onpointerdown,
         onfocusin: this.onfocusin,

package/dist/bits/scroll-area/scroll-area.svelte.d.ts

@@ -265,6 +265,7 @@ export declare class ScrollAreaScrollbarYState implements ScrollbarAxisState {
 }
 type ScrollbarAxis = ScrollAreaScrollbarXState | ScrollAreaScrollbarYState;
 export declare class ScrollAreaScrollbarSharedState {
+    #private;
     static create(): ScrollAreaScrollbarSharedState;
     readonly scrollbarState: ScrollbarAxis;
     readonly root: ScrollAreaRootState;
@@ -286,6 +287,7 @@ export declare class ScrollAreaScrollbarSharedState {
     onpointerdown(e: BitsPointerEvent): void;
     onpointermove(e: BitsPointerEvent): void;
     onpointerup(e: BitsPointerEvent): void;
+    onlostpointercapture(_: BitsPointerEvent): void;
     readonly props: never;
 }
 interface ScrollAreaThumbImplStateOpts extends WithRefOpts, ReadableBoxedValues<{

package/dist/bits/scroll-area/scroll-area.svelte.js

@@ -571,6 +571,7 @@ export class ScrollAreaScrollbarSharedState {
         this.onpointerdown = this.onpointerdown.bind(this);
         this.onpointermove = this.onpointermove.bind(this);
         this.onpointerup = this.onpointerup.bind(this);
+        this.onlostpointercapture = this.onlostpointercapture.bind(this);
     }
     handleDragScroll(e) {
         if (!this.rect)
@@ -579,6 +580,14 @@ export class ScrollAreaScrollbarSharedState {
         const y = e.clientY - this.rect.top;
         this.scrollbarState.onDragScroll({ x, y });
     }
+    #cleanupPointerState() {
+        if (this.rect === null)
+            return;
+        this.root.domContext.getDocument().body.style.webkitUserSelect = this.prevWebkitUserSelect;
+        if (this.root.viewportNode)
+            this.root.viewportNode.style.scrollBehavior = "";
+        this.rect = null;
+    }
     onpointerdown(e) {
         if (e.button !== 0)
             return;
@@ -601,10 +610,10 @@ export class ScrollAreaScrollbarSharedState {
         if (target.hasPointerCapture(e.pointerId)) {
             target.releasePointerCapture(e.pointerId);
         }
-        this.root.domContext.getDocument().body.style.webkitUserSelect = this.prevWebkitUserSelect;
-        if (this.root.viewportNode)
-            this.root.viewportNode.style.scrollBehavior = "";
-        this.rect = null;
+        this.#cleanupPointerState();
+    }
+    onlostpointercapture(_) {
+        this.#cleanupPointerState();
     }
     props = $derived.by(() => mergeProps({
         ...this.scrollbarState.props,
@@ -616,6 +625,7 @@ export class ScrollAreaScrollbarSharedState {
         onpointerdown: this.onpointerdown,
         onpointermove: this.onpointermove,
         onpointerup: this.onpointerup,
+        onlostpointercapture: this.onlostpointercapture,
     }));
 }
 export class ScrollAreaThumbImplState {

package/dist/bits/select/components/select-content-static.svelte

@@ -18,6 +18,7 @@
 		children,
 		child,
 		preventScroll = false,
+		style,
 		...restProps
 	}: SelectContentStaticProps = $props();
 
@@ -47,7 +48,7 @@
 		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
-			{@const finalProps = mergeProps(props, { style: contentState.props.style })}
+			{@const finalProps = mergeProps(props, { style: contentState.props.style }, { style })}
 			{#if child}
 				{@render child({ props: finalProps, ...contentState.snippetProps })}
 			{:else}
@@ -70,7 +71,7 @@
 		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
-			{@const finalProps = mergeProps(props, { style: contentState.props.style })}
+			{@const finalProps = mergeProps(props, { style: contentState.props.style }, { style })}
 			{#if child}
 				{@render child({ props: finalProps, ...contentState.snippetProps })}
 			{:else}

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

@@ -19,6 +19,7 @@
 		children,
 		child,
 		preventScroll = false,
+		style,
 		...restProps
 	}: SelectContentProps = $props();
 
@@ -48,7 +49,7 @@
 		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
-			{@const finalProps = mergeProps(props, { style: contentState.props.style })}
+			{@const finalProps = mergeProps(props, { style: contentState.props.style }, { style })}
 			{#if child}
 				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
 			{:else}
@@ -73,7 +74,7 @@
 		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props, wrapperProps })}
-			{@const finalProps = mergeProps(props, { style: contentState.props.style })}
+			{@const finalProps = mergeProps(props, { style: contentState.props.style }, { style })}
 			{#if child}
 				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
 			{:else}

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

@@ -18,6 +18,7 @@
 		onInteractOutside = noop,
 		onEscapeKeydown = noop,
 		forceMount = false,
+		style,
 		...restProps
 	}: TooltipContentStaticProps = $props();
 
@@ -50,13 +51,15 @@
 		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
-			{@const mergedProps = mergeProps(props, {
-				style: getFloatingContentCSSVars("tooltip"),
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("tooltip") },
+				{ style }
+			)}
 			{#if child}
-				{@render child({ props: mergedProps, ...contentState.snippetProps })}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
 			{:else}
-				<div {...mergedProps}>
+				<div {...finalProps}>
 					{@render children?.()}
 				</div>
 			{/if}
@@ -78,13 +81,15 @@
 		shouldRender={contentState.shouldRender}
 	>
 		{#snippet popper({ props })}
-			{@const mergedProps = mergeProps(props, {
-				style: getFloatingContentCSSVars("tooltip"),
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("tooltip") },
+				{ style }
+			)}
 			{#if child}
-				{@render child({ props: mergedProps, ...contentState.snippetProps })}
+				{@render child({ props: finalProps, ...contentState.snippetProps })}
 			{:else}
-				<div {...mergedProps}>
+				<div {...finalProps}>
 					{@render children?.()}
 				</div>
 			{/if}

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

@@ -27,6 +27,7 @@
 		onInteractOutside = noop,
 		onEscapeKeydown = noop,
 		forceMount = false,
+		style,
 		...restProps
 	}: TooltipContentProps = $props();
 
@@ -71,14 +72,16 @@
 		contentPointerEvents={contentState.root.disableHoverableContent ? "none" : "auto"}
 	>
 		{#snippet popper({ props, wrapperProps })}
-			{@const mergedProps = mergeProps(props, {
-				style: getFloatingContentCSSVars("tooltip"),
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("tooltip") },
+				{ style }
+			)}
 			{#if child}
-				{@render child({ props: mergedProps, wrapperProps, ...contentState.snippetProps })}
+				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
 			{:else}
 				<div {...wrapperProps}>
-					<div {...mergedProps}>
+					<div {...finalProps}>
 						{@render children?.()}
 					</div>
 				</div>
@@ -101,14 +104,16 @@
 		contentPointerEvents={contentState.root.disableHoverableContent ? "none" : "auto"}
 	>
 		{#snippet popper({ props, wrapperProps })}
-			{@const mergedProps = mergeProps(props, {
-				style: getFloatingContentCSSVars("tooltip"),
-			})}
+			{@const finalProps = mergeProps(
+				props,
+				{ style: getFloatingContentCSSVars("tooltip") },
+				{ style }
+			)}
 			{#if child}
-				{@render child({ props: mergedProps, wrapperProps, ...contentState.snippetProps })}
+				{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
 			{:else}
 				<div {...wrapperProps}>
-					<div {...mergedProps}>
+					<div {...finalProps}>
 						{@render children?.()}
 					</div>
 				</div>

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

@@ -13,6 +13,7 @@
 		id = createId(uid),
 		disabled = false,
 		type = "button",
+		tabindex = 0,
 		ref = $bindable(null),
 		...restProps
 	}: TooltipTriggerProps = $props();
@@ -20,6 +21,7 @@
 	const triggerState = TooltipTriggerState.create({
 		id: boxWith(() => id),
 		disabled: boxWith(() => disabled ?? false),
+		tabindex: boxWith(() => tabindex ?? 0),
 		ref: boxWith(
 			() => ref,
 			(v) => (ref = v)

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

@@ -56,6 +56,7 @@ export declare class TooltipRootState {
 }
 interface TooltipTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{
     disabled: boolean;
+    tabindex: number;
 }> {
 }
 export declare class TooltipTriggerState {
@@ -73,7 +74,7 @@ export declare class TooltipTriggerState {
         readonly "data-state": "closed" | "delayed-open" | "instant-open";
         readonly "data-disabled": "" | undefined;
         readonly "data-delay-duration": `${number}`;
-        readonly tabindex: 0 | undefined;
+        readonly tabindex: number | undefined;
         readonly disabled: boolean;
         readonly onpointerup: PointerEventHandler<HTMLElement>;
         readonly onpointerdown: PointerEventHandler<HTMLElement>;

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

@@ -255,7 +255,7 @@ export class TooltipTriggerState {
         "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),
         "data-delay-duration": `${this.root.delayDuration}`,
         [tooltipAttrs.trigger]: "",
-        tabindex: this.#isDisabled ? undefined : 0,
+        tabindex: this.#isDisabled ? undefined : this.opts.tabindex.current,
         disabled: this.opts.disabled.current,
         onpointerup: this.#onpointerup,
         onpointerdown: this.#onpointerdown,

package/dist/bits/utilities/focus-scope/focus-scope.svelte.js

@@ -127,7 +127,7 @@ export class FocusScope {
             if (!this.#manager.isActiveScope(this))
                 return;
             const tabbables = this.#getTabbables();
-            if (tabbables.length < 2)
+            if (tabbables.length === 0)
                 return;
             const first = tabbables[0];
             const last = tabbables[tabbables.length - 1];

package/dist/bits/utilities/presence-layer/presence.svelte.d.ts

@@ -7,6 +7,14 @@ export interface PresenceOptions extends ReadableBoxedValues<{
 }> {
 }
 type PresenceStatus = "unmounted" | "mounted" | "unmountSuspended";
+/**
+ * Cached style properties to avoid storing live CSSStyleDeclaration
+ * which triggers style recalculations when accessed.
+ */
+interface CachedStyles {
+    display: string;
+    animationName: string;
+}
 declare const presenceMachine: {
     readonly mounted: {
         readonly UNMOUNT: "unmounted";
@@ -24,7 +32,7 @@ type PresenceMachine = StateMachine<typeof presenceMachine>;
 export declare class Presence {
     readonly opts: PresenceOptions;
     prevAnimationNameState: string;
-    styles: CSSStyleDeclaration;
+    styles: CachedStyles;
     initialStatus: PresenceStatus;
     previousPresent: Previous<boolean>;
     machine: PresenceMachine;

package/dist/bits/utilities/presence-layer/presence.svelte.js

@@ -2,6 +2,12 @@ import { executeCallbacks } from "svelte-toolbelt";
 import { Previous, watch } from "runed";
 import { on } from "svelte/events";
 import { StateMachine } from "../../../internal/state-machine.js";
+/**
+ * Cache for animation names with TTL to reduce getComputedStyle calls.
+ * Uses WeakMap to avoid memory leaks when elements are removed.
+ */
+const animationNameCache = new WeakMap();
+const ANIMATION_NAME_CACHE_TTL_MS = 16; // One frame at 60fps
 const presenceMachine = {
     mounted: {
         UNMOUNT: "unmounted",
@@ -18,7 +24,7 @@ const presenceMachine = {
 export class Presence {
     opts;
     prevAnimationNameState = $state("none");
-    styles = $state({});
+    styles = $state({ display: "", animationName: "none" });
     initialStatus;
     previousPresent;
     machine;
@@ -43,7 +49,8 @@ export class Presence {
     handleAnimationEnd(event) {
         if (!this.opts.ref.current)
             return;
-        const currAnimationName = getAnimationName(this.opts.ref.current);
+        // Use cached animation name from styles when available to avoid getComputedStyle
+        const currAnimationName = this.styles.animationName || getAnimationName(this.opts.ref.current);
         const isCurrentAnimation = currAnimationName.includes(event.animationName) || currAnimationName === "none";
         if (event.target === this.opts.ref.current && isCurrentAnimation) {
             this.machine.dispatch("ANIMATION_END");
@@ -53,7 +60,11 @@ export class Presence {
         if (!this.opts.ref.current)
             return;
         if (event.target === this.opts.ref.current) {
-            this.prevAnimationNameState = getAnimationName(this.opts.ref.current);
+            // Force refresh cache on animation start to get accurate animation name
+            const animationName = getAnimationName(this.opts.ref.current, true);
+            this.prevAnimationNameState = animationName;
+            // Update styles cache for subsequent reads
+            this.styles.animationName = animationName;
         }
     }
     isPresent = $derived.by(() => {
@@ -68,7 +79,10 @@ function watchPresenceChange(state) {
         if (!hasPresentChanged)
             return;
         const prevAnimationName = state.prevAnimationNameState;
-        const currAnimationName = getAnimationName(state.opts.ref.current);
+        // Force refresh on state change to get accurate current animation
+        const currAnimationName = getAnimationName(state.opts.ref.current, true);
+        // Update styles cache for subsequent reads
+        state.styles.animationName = currAnimationName;
         if (state.present.current) {
             state.machine.dispatch("MOUNT");
         }
@@ -98,19 +112,47 @@ function watchStatusChange(state) {
     watch(() => state.machine.state.current, () => {
         if (!state.opts.ref.current)
             return;
-        const currAnimationName = getAnimationName(state.opts.ref.current);
-        state.prevAnimationNameState =
-            state.machine.state.current === "mounted" ? currAnimationName : "none";
+        // Use cached animation name first, only force refresh if needed for mounted state
+        const currAnimationName = state.machine.state.current === "mounted"
+            ? getAnimationName(state.opts.ref.current, true)
+            : "none";
+        state.prevAnimationNameState = currAnimationName;
+        // Update styles cache
+        state.styles.animationName = currAnimationName;
     });
 }
 function watchRefChange(state) {
     watch(() => state.opts.ref.current, () => {
         if (!state.opts.ref.current)
             return;
-        state.styles = getComputedStyle(state.opts.ref.current);
+        // Snapshot only needed style properties instead of storing live CSSStyleDeclaration
+        // This avoids triggering style recalculations when accessing the cached object
+        const computed = getComputedStyle(state.opts.ref.current);
+        state.styles = {
+            display: computed.display,
+            animationName: computed.animationName || "none",
+        };
         return executeCallbacks(on(state.opts.ref.current, "animationstart", state.handleAnimationStart), on(state.opts.ref.current, "animationcancel", state.handleAnimationEnd), on(state.opts.ref.current, "animationend", state.handleAnimationEnd));
     });
 }
-function getAnimationName(node) {
-    return node ? getComputedStyle(node).animationName || "none" : "none";
+/**
+ * Gets the animation name from computed styles with optional caching.
+ *
+ * @param node - The HTML element to get animation name from
+ * @param forceRefresh - If true, bypasses the cache and forces a fresh getComputedStyle call
+ * @returns The animation name or "none" if not animating
+ */
+function getAnimationName(node, forceRefresh = false) {
+    if (!node)
+        return "none";
+    const now = performance.now();
+    const cached = animationNameCache.get(node);
+    // Return cached value if still valid and not forced to refresh
+    if (!forceRefresh && cached && now - cached.timestamp < ANIMATION_NAME_CACHE_TTL_MS) {
+        return cached.value;
+    }
+    // Compute and cache the new value
+    const value = getComputedStyle(node).animationName || "none";
+    animationNameCache.set(node, { value, timestamp: now });
+    return value;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "2.15.3",
+  "version": "2.15.5",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",
@@ -20,7 +20,7 @@
   ],
   "devDependencies": {
     "@internationalized/date": "^3.8.2",
-    "@sveltejs/kit": "^2.42.0",
+    "@sveltejs/kit": "2.49.5",
     "@sveltejs/package": "2.5.0",
     "@sveltejs/vite-plugin-svelte": "^6.2.0",
     "@types/node": "^20.19.16",
@@ -28,7 +28,7 @@
     "csstype": "^3.1.3",
     "jsdom": "^24.1.3",
     "publint": "^0.2.12",
-    "svelte": "5.38.1",
+    "svelte": "5.46.4",
     "svelte-check": "^4.3.1",
     "typescript": "^5.9.2",
     "vite": "^7.1.5",