bits-ui 1.0.0-next.82 → 1.0.0-next.83

package/dist/app.d.ts

@@ -15,4 +15,5 @@ declare global {
 		readonly map: SvelteMap<string, boolean>;
 		resetBodyStyle: () => void;
 	};
+	var bitsAnimationsDisabled: boolean;
 }

package/dist/bits/pin-input/pin-input.svelte.d.ts

@@ -22,8 +22,7 @@ declare class PinInputRootState {
     #private;
     value: PinInputRootStateProps["value"];
     constructor(props: PinInputRootStateProps);
-    keysToIgnore: string[];
-    onkeydown(e: BitsKeyboardEvent): void;
+    onkeydown: (e: BitsKeyboardEvent) => void;
     rootProps: {
         readonly id: string;
         readonly "data-pin-input-root": "";
@@ -42,7 +41,7 @@ declare class PinInputRootState {
             readonly pointerEvents: "none";
         };
     };
-    oninput(e: BitsEvent<Event, HTMLInputElement>): void;
+    oninput: (e: BitsEvent<Event, HTMLInputElement>) => void;
     onfocus: (_: BitsFocusEvent<HTMLInputElement>) => void;
     onpaste: (e: BitsEvent<ClipboardEvent>) => void;
     onmouseover: (_: BitsMouseEvent) => void;
@@ -77,7 +76,6 @@ declare class PinInputRootState {
         "data-pin-input-input-mss": number | null;
         "data-pin-input-input-mse": number | null;
         inputmode: "none" | "search" | "text" | "email" | "tel" | "url" | "numeric" | "decimal" | null | undefined;
-        pattern: any;
         maxlength: number;
         value: string;
         disabled: true | undefined;

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

@@ -10,6 +10,22 @@ export const REGEXP_ONLY_CHARS = "^[a-zA-Z]+$";
 export const REGEXP_ONLY_DIGITS_AND_CHARS = "^[a-zA-Z0-9]+$";
 const ROOT_ATTR = "data-pin-input-root";
 const CELL_ATTR = "data-pin-input-cell";
+const KEYS_TO_IGNORE = [
+    "Backspace",
+    "Delete",
+    "ArrowLeft",
+    "ArrowRight",
+    "ArrowUp",
+    "ArrowDown",
+    "Home",
+    "End",
+    "Escape",
+    "Enter",
+    "Tab",
+    "Shift",
+    "Control",
+    "Meta",
+];
 class PinInputRootState {
     #id;
     #ref;
@@ -146,38 +162,19 @@ class PinInputRootState {
                 onComplete(value);
             }
         });
-        this.onkeydown = this.onkeydown.bind(this);
-        this.oninput = this.oninput.bind(this);
-        this.onfocus = this.onfocus.bind(this);
-        this.onmouseover = this.onmouseover.bind(this);
-        this.onmouseleave = this.onmouseleave.bind(this);
-        this.onblur = this.onblur.bind(this);
-        this.onpaste = this.onpaste.bind(this);
     }
-    keysToIgnore = [
-        "Backspace",
-        "Delete",
-        "ArrowLeft",
-        "ArrowRight",
-        "ArrowUp",
-        "ArrowDown",
-        "Home",
-        "End",
-        "Escape",
-        "Enter",
-        "Tab",
-        "Shift",
-        "Control",
-        "Meta",
-    ];
-    onkeydown(e) {
+    onkeydown = (e) => {
         const key = e.key;
-        if (this.keysToIgnore.includes(key))
+        if (KEYS_TO_IGNORE.includes(key))
+            return;
+        // if ctrl or cmd is pressed, they are likely to be shortcuts and should not be tested
+        // against the regex
+        if (e.ctrlKey || e.metaKey)
             return;
         if (key && this.#regexPattern && !this.#regexPattern.test(key)) {
             e.preventDefault();
         }
-    }
+    };
     #rootStyles = $derived.by(() => ({
         position: "relative",
         cursor: this.#disabled.current ? "default" : "text",
@@ -297,7 +294,7 @@ class PinInputRootState {
         this.#mirrorSelectionEnd = e;
         this.#prevInputMetadata.prev = [s, e, dir];
     };
-    oninput(e) {
+    oninput = (e) => {
         const newValue = e.currentTarget.value.slice(0, this.#maxLength.current);
         if (newValue.length > 0 && this.#regexPattern && !this.#regexPattern.test(newValue)) {
             e.preventDefault();
@@ -313,7 +310,7 @@ class PinInputRootState {
             document.dispatchEvent(new Event("selectionchange"));
         }
         this.value.current = newValue;
-    }
+    };
     onfocus = (_) => {
         const input = this.#inputRef.current;
         if (input) {
@@ -389,7 +386,7 @@ class PinInputRootState {
         "data-pin-input-input-mss": this.#mirrorSelectionStart,
         "data-pin-input-input-mse": this.#mirrorSelectionEnd,
         inputmode: this.#inputmode.current,
-        pattern: this.#regexPattern?.source,
+        // pattern: this.#regexPattern?.source,
         maxlength: this.#maxLength.current,
         value: this.value.current,
         disabled: getDisabled(this.#disabled.current),

package/dist/bits/select/components/select-scroll-down-button.svelte

@@ -13,22 +13,19 @@
 		...restProps
 	}: SelectScrollDownButtonProps = $props();
 
-	let mounted = $state(false);
-
-	const scrollDownButtonState = useSelectScrollDownButton({
+	const scrollButtonState = useSelectScrollDownButton({
 		id: box.with(() => id),
-		mounted: box.with(() => mounted),
 		ref: box.with(
 			() => ref,
 			(v) => (ref = v)
 		),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, scrollDownButtonState.props));
+	const mergedProps = $derived(mergeProps(restProps, scrollButtonState.props));
 </script>
 
-{#if scrollDownButtonState.canScrollDown}
-	<Mounted onMountedChange={(m) => (mounted = m)} />
+{#if scrollButtonState.canScrollDown}
+	<Mounted onMountedChange={(v) => (scrollButtonState.state.mounted = v)} />
 	{#if child}
 		{@render child({ props: restProps })}
 	{:else}

package/dist/bits/select/components/select-scroll-up-button.svelte

@@ -13,22 +13,19 @@
 		...restProps
 	}: SelectScrollUpButtonProps = $props();
 
-	let mounted = $state(false);
-
-	const scrollDownButtonState = useSelectScrollUpButton({
+	const scrollButtonState = useSelectScrollUpButton({
 		id: box.with(() => id),
-		mounted: box.with(() => mounted),
 		ref: box.with(
 			() => ref,
 			(v) => (ref = v)
 		),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, scrollDownButtonState.props));
+	const mergedProps = $derived(mergeProps(restProps, scrollButtonState.props));
 </script>
 
-{#if scrollDownButtonState.canScrollUp}
-	<Mounted onMountedChange={(m) => (mounted = m)} />
+{#if scrollButtonState.canScrollUp}
+	<Mounted onMountedChange={(v) => (scrollButtonState.state.mounted = v)} />
 	{#if child}
 		{@render child({ props: restProps })}
 	{:else}

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

@@ -46,12 +46,8 @@ declare class SelectBaseRootState {
     isUsingKeyboard: boolean;
     isCombobox: boolean;
     bitsAttrs: SelectBitsAttrs;
-    triggerPointerDownPos: {
-        x: number;
-        y: number;
-    } | null;
     constructor(props: SelectBaseRootStateProps);
-    setHighlightedNode(node: HTMLElement | null): void;
+    setHighlightedNode(node: HTMLElement | null, initial?: boolean): void;
     getCandidateNodes(): HTMLElement[];
     setHighlightedToFirstCandidate(): void;
     getNodeByValue(value: string): HTMLElement | null;
@@ -143,8 +139,8 @@ declare class SelectTriggerState {
      * `pointerdown` fires before the `focus` event, so we can prevent the default
      * behavior of focusing the button and keep focus on the input.
      */
-    onpointerdown: (e: BitsPointerEvent) => void;
-    onpointerup: (e: BitsPointerEvent) => void;
+    onpointerdown(e: BitsPointerEvent): void;
+    onpointerup(e: BitsPointerEvent): void;
     props: {
         readonly [x: string]: string | true | ((e: BitsKeyboardEvent) => void) | ((e: BitsPointerEvent) => void) | undefined;
         readonly id: string;
@@ -264,7 +260,6 @@ declare class SelectItemState {
     isSelected: boolean;
     isHighlighted: boolean;
     prevHighlighted: Previous<boolean>;
-    textId: string;
     mounted: boolean;
     constructor(props: SelectItemStateProps, root: SelectRootState);
     snippetProps: {
@@ -358,19 +353,20 @@ declare class SelectViewportState {
         };
     };
 }
-type SelectScrollButtonImplStateProps = WithRefProps<ReadableBoxedValues<{
-    mounted: boolean;
-}>>;
+type SelectScrollButtonImplStateProps = WithRefProps;
 declare class SelectScrollButtonImplState {
     id: SelectScrollButtonImplStateProps["id"];
     ref: SelectScrollButtonImplStateProps["ref"];
     content: SelectContentState;
     root: SelectBaseRootState;
-    autoScrollTimer: number | null;
+    autoScrollInterval: number | null;
+    userScrollTimer: number;
+    isUserScrolling: boolean;
     onAutoScroll: () => void;
-    mounted: SelectScrollButtonImplStateProps["mounted"];
+    mounted: boolean;
     constructor(props: SelectScrollButtonImplStateProps, content: SelectContentState);
-    clearAutoScrollTimer(): void;
+    handleUserScroll(): void;
+    clearAutoScrollInterval(): void;
     onpointerdown(_: BitsPointerEvent): void;
     onpointermove(_: BitsPointerEvent): void;
     onpointerleave(_: BitsPointerEvent): void;
@@ -391,6 +387,11 @@ declare class SelectScrollDownButtonState {
     root: SelectBaseRootState;
     canScrollDown: boolean;
     constructor(state: SelectScrollButtonImplState);
+    /**
+     * @param manual - if true, it means the function was invoked manually outside of an event
+     * listener, so we don't call `handleUserScroll` to prevent the auto scroll from kicking in.
+     */
+    handleScroll: (manual?: boolean) => void;
     handleAutoScroll: () => void;
     props: {
         readonly id: string;
@@ -409,6 +410,11 @@ declare class SelectScrollUpButtonState {
     root: SelectBaseRootState;
     canScrollUp: boolean;
     constructor(state: SelectScrollButtonImplState);
+    /**
+     * @param manual - if true, it means the function was invoked manually outside of an event
+     * listener, so we don't call `handleUserScroll` to prevent the auto scroll from kicking in.
+     */
+    handleScroll: (manual?: boolean) => void;
     handleAutoScroll: () => void;
     props: {
         readonly id: string;

package/dist/bits/select/select.svelte.js

@@ -45,10 +45,9 @@ class SelectBaseRootState {
             return null;
         return this.highlightedNode.getAttribute("data-label");
     });
-    isUsingKeyboard = $state(false);
-    isCombobox = $state(false);
+    isUsingKeyboard = false;
+    isCombobox = false;
     bitsAttrs;
-    triggerPointerDownPos = $state.raw({ x: 0, y: 0 });
     constructor(props) {
         this.disabled = props.disabled;
         this.required = props.required;
@@ -66,12 +65,10 @@ class SelectBaseRootState {
             }
         });
     }
-    setHighlightedNode(node) {
+    setHighlightedNode(node, initial = false) {
         this.highlightedNode = node;
-        if (node) {
-            if (this.isUsingKeyboard) {
-                node.scrollIntoView({ block: "nearest" });
-            }
+        if (node && (this.isUsingKeyboard || initial)) {
+            node.scrollIntoView({ block: "nearest" });
         }
     }
     getCandidateNodes() {
@@ -140,12 +137,10 @@ class SelectSingleRootState extends SelectBaseRootState {
                 this.setHighlightedNode(null);
             }
         });
-        watch(() => this.open.current, (isOpen) => {
-            if (!isOpen)
+        watch(() => this.open.current, () => {
+            if (!this.open.current)
                 return;
-            afterTick(() => {
-                this.setInitialHighlightedNode();
-            });
+            this.setInitialHighlightedNode();
         });
     }
     includesItem(itemValue) {
@@ -156,20 +151,22 @@ class SelectSingleRootState extends SelectBaseRootState {
         this.inputValue = itemLabel;
     }
     setInitialHighlightedNode() {
-        if (this.highlightedNode && document.contains(this.highlightedNode))
-            return;
-        if (this.value.current !== "") {
-            const node = this.getNodeByValue(this.value.current);
-            if (node) {
-                this.setHighlightedNode(node);
+        afterTick(() => {
+            if (this.highlightedNode && document.contains(this.highlightedNode))
                 return;
+            if (this.value.current !== "") {
+                const node = this.getNodeByValue(this.value.current);
+                if (node) {
+                    this.setHighlightedNode(node, true);
+                    return;
+                }
             }
-        }
-        // if no value is set, we want to highlight the first item
-        const firstCandidate = this.getCandidateNodes()[0];
-        if (!firstCandidate)
-            return;
-        this.setHighlightedNode(firstCandidate);
+            // if no value is set, we want to highlight the first item
+            const firstCandidate = this.getCandidateNodes()[0];
+            if (!firstCandidate)
+                return;
+            this.setHighlightedNode(firstCandidate, true);
+        });
     }
 }
 class SelectMultipleRootState extends SelectBaseRootState {
@@ -179,14 +176,10 @@ class SelectMultipleRootState extends SelectBaseRootState {
     constructor(props) {
         super(props);
         this.value = props.value;
-        watch(() => this.open.current, (isOpen) => {
-            if (!isOpen)
+        watch(() => this.open.current, () => {
+            if (!this.open.current)
                 return;
-            afterTick(() => {
-                if (!this.highlightedNode) {
-                    this.setInitialHighlightedNode();
-                }
-            });
+            this.setInitialHighlightedNode();
         });
     }
     includesItem(itemValue) {
@@ -202,20 +195,22 @@ class SelectMultipleRootState extends SelectBaseRootState {
         this.inputValue = itemLabel;
     }
     setInitialHighlightedNode() {
-        if (this.highlightedNode)
-            return;
-        if (this.value.current.length && this.value.current[0] !== "") {
-            const node = this.getNodeByValue(this.value.current[0]);
-            if (node) {
-                this.setHighlightedNode(node);
+        afterTick(() => {
+            if (this.highlightedNode && document.contains(this.highlightedNode))
                 return;
+            if (this.value.current.length && this.value.current[0] !== "") {
+                const node = this.getNodeByValue(this.value.current[0]);
+                if (node) {
+                    this.setHighlightedNode(node, true);
+                    return;
+                }
             }
-        }
-        // if no value is set, we want to highlight the first item
-        const firstCandidate = this.getCandidateNodes()[0];
-        if (!firstCandidate)
-            return;
-        this.setHighlightedNode(firstCandidate);
+            // if no value is set, we want to highlight the first item
+            const firstCandidate = this.getCandidateNodes()[0];
+            if (!firstCandidate)
+                return;
+            this.setHighlightedNode(firstCandidate, true);
+        });
     }
 }
 class SelectInputState {
@@ -240,36 +235,32 @@ class SelectInputState {
         this.root.isUsingKeyboard = true;
         if (e.key === kbd.ESCAPE)
             return;
-        const open = this.root.open.current;
-        const inputValue = this.root.inputValue;
         // prevent arrow up/down from moving the position of the cursor in the input
         if (e.key === kbd.ARROW_UP || e.key === kbd.ARROW_DOWN)
             e.preventDefault();
-        if (!open) {
+        if (!this.root.open.current) {
             if (INTERACTION_KEYS.includes(e.key))
                 return;
             if (e.key === kbd.TAB)
                 return;
-            if (e.key === kbd.BACKSPACE && inputValue === "")
+            if (e.key === kbd.BACKSPACE && this.root.inputValue === "")
                 return;
             this.root.handleOpen();
             // we need to wait for a tick after the menu opens to ensure the highlighted nodes are
             // set correctly.
-            afterTick(() => {
-                if (this.root.hasValue)
-                    return;
-                const candidateNodes = this.root.getCandidateNodes();
-                if (!candidateNodes.length)
-                    return;
-                if (e.key === kbd.ARROW_DOWN) {
-                    const firstCandidate = candidateNodes[0];
-                    this.root.setHighlightedNode(firstCandidate);
-                }
-                else if (e.key === kbd.ARROW_UP) {
-                    const lastCandidate = candidateNodes[candidateNodes.length - 1];
-                    this.root.setHighlightedNode(lastCandidate);
-                }
-            });
+            if (this.root.hasValue)
+                return;
+            const candidateNodes = this.root.getCandidateNodes();
+            if (!candidateNodes.length)
+                return;
+            if (e.key === kbd.ARROW_DOWN) {
+                const firstCandidate = candidateNodes[0];
+                this.root.setHighlightedNode(firstCandidate);
+            }
+            else if (e.key === kbd.ARROW_UP) {
+                const lastCandidate = candidateNodes[candidateNodes.length - 1];
+                this.root.setHighlightedNode(lastCandidate);
+            }
             return;
         }
         if (e.key === kbd.TAB) {
@@ -278,14 +269,13 @@ class SelectInputState {
         }
         if (e.key === kbd.ENTER && !e.isComposing) {
             e.preventDefault();
-            const highlightedValue = this.root.highlightedValue;
-            const isCurrentSelectedValue = highlightedValue === this.root.value.current;
+            const isCurrentSelectedValue = this.root.highlightedValue === this.root.value.current;
             if (!this.root.allowDeselect.current && isCurrentSelectedValue && !this.root.isMulti) {
                 this.root.handleClose();
                 return;
             }
-            if (highlightedValue) {
-                this.root.toggleItem(highlightedValue, this.root.highlightedLabel ?? undefined);
+            if (this.root.highlightedValue) {
+                this.root.toggleItem(this.root.highlightedValue, this.root.highlightedLabel ?? undefined);
             }
             if (!this.root.isMulti && !isCurrentSelectedValue) {
                 this.root.handleClose();
@@ -331,13 +321,10 @@ class SelectInputState {
         if (!this.root.highlightedNode) {
             this.root.setHighlightedToFirstCandidate();
         }
-        // this.root.setHighlightedToFirstCandidate();
     }
     oninput(e) {
         this.root.inputValue = e.currentTarget.value;
-        afterTick(() => {
-            this.root.setHighlightedToFirstCandidate();
-        });
+        this.root.setHighlightedToFirstCandidate();
     }
     props = $derived.by(() => ({
         id: this.#id.current,
@@ -452,12 +439,8 @@ class SelectTriggerState {
         this.#dataTypeahead.resetTypeahead();
         this.#domTypeahead.resetTypeahead();
     }
-    #handlePointerOpen(e) {
+    #handlePointerOpen(_) {
         this.#handleOpen();
-        this.root.triggerPointerDownPos = {
-            x: Math.round(e.pageX),
-            y: Math.round(e.pageY),
-        };
     }
     onkeydown(e) {
         this.root.isUsingKeyboard = true;
@@ -477,21 +460,19 @@ class SelectTriggerState {
             }
             // we need to wait for a tick after the menu opens to ensure
             // the highlighted nodes are set correctly
-            afterTick(() => {
-                if (this.root.hasValue)
-                    return;
-                const candidateNodes = this.root.getCandidateNodes();
-                if (!candidateNodes.length)
-                    return;
-                if (e.key === kbd.ARROW_DOWN) {
-                    const firstCandidate = candidateNodes[0];
-                    this.root.setHighlightedNode(firstCandidate);
-                }
-                else if (e.key === kbd.ARROW_UP) {
-                    const lastCandidate = candidateNodes[candidateNodes.length - 1];
-                    this.root.setHighlightedNode(lastCandidate);
-                }
-            });
+            if (this.root.hasValue)
+                return;
+            const candidateNodes = this.root.getCandidateNodes();
+            if (!candidateNodes.length)
+                return;
+            if (e.key === kbd.ARROW_DOWN) {
+                const firstCandidate = candidateNodes[0];
+                this.root.setHighlightedNode(firstCandidate);
+            }
+            else if (e.key === kbd.ARROW_UP) {
+                const lastCandidate = candidateNodes[candidateNodes.length - 1];
+                this.root.setHighlightedNode(lastCandidate);
+            }
             return;
         }
         if (e.key === kbd.TAB) {
@@ -500,15 +481,14 @@ class SelectTriggerState {
         }
         if ((e.key === kbd.ENTER || e.key === kbd.SPACE) && !e.isComposing) {
             e.preventDefault();
-            const highlightedValue = this.root.highlightedValue;
-            const isCurrentSelectedValue = highlightedValue === this.root.value.current;
+            const isCurrentSelectedValue = this.root.highlightedValue === this.root.value.current;
             if (!this.root.allowDeselect.current && isCurrentSelectedValue && !this.root.isMulti) {
                 this.root.handleClose();
                 return;
             }
             //"" is a valid value for a select item so we need to check for that
-            if (highlightedValue !== null) {
-                this.root.toggleItem(highlightedValue, this.root.highlightedLabel ?? undefined);
+            if (this.root.highlightedValue !== null) {
+                this.root.toggleItem(this.root.highlightedValue, this.root.highlightedLabel ?? undefined);
             }
             if (!this.root.isMulti && !isCurrentSelectedValue) {
                 this.root.handleClose();
@@ -578,7 +558,7 @@ class SelectTriggerState {
      * `pointerdown` fires before the `focus` event, so we can prevent the default
      * behavior of focusing the button and keep focus on the input.
      */
-    onpointerdown = (e) => {
+    onpointerdown(e) {
         if (this.root.disabled.current)
             return;
         // prevent opening on touch down which can be triggered when scrolling on touch devices
@@ -600,13 +580,13 @@ class SelectTriggerState {
                 this.root.handleClose();
             }
         }
-    };
-    onpointerup = (e) => {
+    }
+    onpointerup(e) {
         e.preventDefault();
         if (e.pointerType === "touch") {
             this.#handlePointerOpen(e);
         }
-    };
+    }
     props = $derived.by(() => ({
         id: this.#id.current,
         disabled: this.root.disabled.current ? true : undefined,
@@ -639,9 +619,12 @@ class SelectContentState {
             },
             deps: () => this.root.open.current,
         });
-        onDestroyEffect(() => (this.root.contentNode = null));
-        watch(() => this.root.open.current, (isOpen) => {
-            if (isOpen)
+        onDestroyEffect(() => {
+            this.root.contentNode = null;
+            this.isPositioned = false;
+        });
+        watch(() => this.root.open.current, () => {
+            if (this.root.open.current)
                 return;
             this.isPositioned = false;
         });
@@ -705,7 +688,6 @@ class SelectItemState {
     isSelected = $derived.by(() => this.root.includesItem(this.value.current));
     isHighlighted = $derived.by(() => this.root.highlightedValue === this.value.current);
     prevHighlighted = new Previous(() => this.isHighlighted);
-    textId = $state("");
     mounted = $state(false);
     constructor(props, root) {
         this.root = root;
@@ -716,7 +698,12 @@ class SelectItemState {
         this.onUnhighlight = props.onUnhighlight;
         this.#id = props.id;
         this.#ref = props.ref;
-        $effect(() => {
+        useRefById({
+            id: this.#id,
+            ref: this.#ref,
+            deps: () => this.mounted,
+        });
+        watch([() => this.isHighlighted, () => this.prevHighlighted.current], () => {
             if (this.isHighlighted) {
                 this.onHighlight.current();
             }
@@ -724,12 +711,8 @@ class SelectItemState {
                 this.onUnhighlight.current();
             }
         });
-        useRefById({
-            id: this.#id,
-            ref: this.#ref,
-        });
-        watch(() => this.mounted, (isMounted) => {
-            if (!isMounted)
+        watch(() => this.mounted, () => {
+            if (!this.mounted)
                 return;
             this.root.setInitialHighlightedNode();
         });
@@ -899,52 +882,69 @@ class SelectScrollButtonImplState {
     ref;
     content;
     root;
-    autoScrollTimer = $state(null);
+    autoScrollInterval = null;
+    userScrollTimer = -1;
+    isUserScrolling = false;
     onAutoScroll = noop;
-    mounted;
+    mounted = $state(false);
     constructor(props, content) {
         this.ref = props.ref;
         this.id = props.id;
-        this.mounted = props.mounted;
         this.content = content;
         this.root = content.root;
         useRefById({
             id: this.id,
             ref: this.ref,
-            deps: () => this.mounted.current,
+            deps: () => this.mounted,
         });
-        watch(() => this.mounted.current, (isMounted) => {
-            if (!isMounted)
+        watch(() => this.mounted, () => {
+            if (!this.mounted) {
+                this.isUserScrolling = false;
+                return;
+            }
+            if (this.isUserScrolling)
                 return;
             const activeItem = this.root.highlightedNode;
             activeItem?.scrollIntoView({ block: "nearest" });
         });
+        $effect(() => {
+            if (this.mounted)
+                return;
+            this.clearAutoScrollInterval();
+        });
         this.onpointerdown = this.onpointerdown.bind(this);
         this.onpointermove = this.onpointermove.bind(this);
         this.onpointerleave = this.onpointerleave.bind(this);
     }
-    clearAutoScrollTimer() {
-        if (this.autoScrollTimer === null)
+    handleUserScroll() {
+        window.clearTimeout(this.userScrollTimer);
+        this.isUserScrolling = true;
+        this.userScrollTimer = window.setTimeout(() => {
+            this.isUserScrolling = false;
+        }, 200);
+    }
+    clearAutoScrollInterval() {
+        if (this.autoScrollInterval === null)
             return;
-        window.clearInterval(this.autoScrollTimer);
-        this.autoScrollTimer = null;
+        window.clearInterval(this.autoScrollInterval);
+        this.autoScrollInterval = null;
     }
     onpointerdown(_) {
-        if (this.autoScrollTimer !== null)
+        if (this.autoScrollInterval !== null)
             return;
-        this.autoScrollTimer = window.setInterval(() => {
+        this.autoScrollInterval = window.setInterval(() => {
             this.onAutoScroll();
         }, 50);
     }
     onpointermove(_) {
-        if (this.autoScrollTimer !== null)
+        if (this.autoScrollInterval !== null)
             return;
-        this.autoScrollTimer = window.setInterval(() => {
+        this.autoScrollInterval = window.setInterval(() => {
             this.onAutoScroll();
         }, 50);
     }
     onpointerleave(_) {
-        this.clearAutoScrollTimer();
+        this.clearAutoScrollInterval();
     }
     props = $derived.by(() => ({
         id: this.id.current,
@@ -967,34 +967,41 @@ class SelectScrollDownButtonState {
         this.content = state.content;
         this.root = state.root;
         this.state.onAutoScroll = this.handleAutoScroll;
-        watch([() => this.content.viewportNode, () => this.content.isPositioned], ([viewportNode, isPositioned]) => {
-            if (!viewportNode || !isPositioned)
-                return;
-            const handleScroll = () => {
-                afterTick(() => {
-                    const maxScroll = viewportNode.scrollHeight - viewportNode.clientHeight;
-                    const paddingTop = Number.parseInt(getComputedStyle(viewportNode).paddingTop, 10);
-                    this.canScrollDown =
-                        Math.ceil(viewportNode.scrollTop) < maxScroll - paddingTop;
-                });
-            };
-            handleScroll();
-            return on(viewportNode, "scroll", handleScroll);
-        });
-        $effect(() => {
-            if (this.state.mounted.current)
+        watch([
+            () => this.content.viewportNode,
+            () => this.content.isPositioned,
+            () => this.root.open.current,
+        ], () => {
+            if (!this.content.viewportNode ||
+                !this.content.isPositioned ||
+                !this.root.open.current) {
                 return;
-            this.state.clearAutoScrollTimer();
+            }
+            this.handleScroll(true);
+            return on(this.content.viewportNode, "scroll", () => this.handleScroll());
         });
     }
+    /**
+     * @param manual - if true, it means the function was invoked manually outside of an event
+     * listener, so we don't call `handleUserScroll` to prevent the auto scroll from kicking in.
+     */
+    handleScroll = (manual = false) => {
+        if (!manual) {
+            this.state.handleUserScroll();
+        }
+        if (!this.content.viewportNode)
+            return;
+        const maxScroll = this.content.viewportNode.scrollHeight - this.content.viewportNode.clientHeight;
+        const paddingTop = Number.parseInt(getComputedStyle(this.content.viewportNode).paddingTop, 10);
+        this.canScrollDown =
+            Math.ceil(this.content.viewportNode.scrollTop) < maxScroll - paddingTop;
+    };
     handleAutoScroll = () => {
-        afterTick(() => {
-            const viewport = this.content.viewportNode;
-            const selectedItem = this.root.highlightedNode;
-            if (!viewport || !selectedItem)
-                return;
-            viewport.scrollTop = viewport.scrollTop + selectedItem.offsetHeight;
-        });
+        const viewport = this.content.viewportNode;
+        const selectedItem = this.root.highlightedNode;
+        if (!viewport || !selectedItem)
+            return;
+        viewport.scrollTop = viewport.scrollTop + selectedItem.offsetHeight;
     };
     props = $derived.by(() => ({ ...this.state.props, [this.root.bitsAttrs["scroll-down-button"]]: "" }));
 }
@@ -1008,30 +1015,31 @@ class SelectScrollUpButtonState {
         this.content = state.content;
         this.root = state.root;
         this.state.onAutoScroll = this.handleAutoScroll;
-        watch([() => this.content.viewportNode, () => this.content.isPositioned], ([viewportNode, isPositioned]) => {
-            if (!viewportNode || !isPositioned)
+        watch([() => this.content.viewportNode, () => this.content.isPositioned], () => {
+            if (!this.content.viewportNode || !this.content.isPositioned)
                 return;
-            const handleScroll = () => {
-                const paddingTop = Number.parseInt(getComputedStyle(viewportNode).paddingTop, 10);
-                this.canScrollUp = viewportNode.scrollTop - paddingTop > 0;
-            };
-            handleScroll();
-            return on(viewportNode, "scroll", handleScroll);
-        });
-        $effect(() => {
-            if (this.state.mounted.current)
-                return;
-            this.state.clearAutoScrollTimer();
+            this.handleScroll(true);
+            return on(this.content.viewportNode, "scroll", () => this.handleScroll());
         });
     }
+    /**
+     * @param manual - if true, it means the function was invoked manually outside of an event
+     * listener, so we don't call `handleUserScroll` to prevent the auto scroll from kicking in.
+     */
+    handleScroll = (manual = false) => {
+        if (!manual) {
+            this.state.handleUserScroll();
+        }
+        if (!this.content.viewportNode)
+            return;
+        const paddingTop = Number.parseInt(getComputedStyle(this.content.viewportNode).paddingTop, 10);
+        this.canScrollUp = this.content.viewportNode.scrollTop - paddingTop > 0.1;
+    };
     handleAutoScroll = () => {
-        afterTick(() => {
-            const viewport = this.content.viewportNode;
-            const selectedItem = this.root.highlightedNode;
-            if (!viewport || !selectedItem)
-                return;
-            viewport.scrollTop = viewport.scrollTop - selectedItem.offsetHeight;
-        });
+        if (!this.content.viewportNode || !this.root.highlightedNode)
+            return;
+        this.content.viewportNode.scrollTop =
+            this.content.viewportNode.scrollTop - this.root.highlightedNode.offsetHeight;
     };
     props = $derived.by(() => ({ ...this.state.props, [this.root.bitsAttrs["scroll-up-button"]]: "" }));
 }

package/dist/bits/utilities/floating-layer/components/floating-layer-content.svelte

@@ -24,6 +24,7 @@
 		style = {},
 		wrapperId = useId(),
 		customAnchor = null,
+		enabled,
 	}: ContentImplProps = $props();
 
 	const contentState = useFloatingContentState({
@@ -43,7 +44,7 @@
 		strategy: box.with(() => strategy),
 		dir: box.with(() => dir),
 		style: box.with(() => style),
-		enabled: box.with(() => false),
+		enabled: box.with(() => enabled),
 		wrapperId: box.with(() => wrapperId),
 		customAnchor: box.with(() => customAnchor),
 	});

package/dist/bits/utilities/floating-layer/types.d.ts

@@ -106,6 +106,7 @@ export type FloatingLayerContentImplProps = {
      * Callback that is called when the floating element is placed.
      */
     onPlaced?: () => void;
+    enabled: boolean;
 } & FloatingLayerContentProps;
 export type FloatingLayerAnchorProps = {
     id: string;

package/dist/bits/utilities/popper-layer/popper-layer-inner.svelte

@@ -70,6 +70,7 @@
 	{style}
 	{onPlaced}
 	{customAnchor}
+	{enabled}
 >
 	{#snippet content({ props: floatingProps, wrapperProps })}
 		{#if restProps.forceMount && enabled}

package/dist/internal/use-after-animations.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Getter } from "svelte-toolbelt";
+/**
+ * Calls a function the next frame after all animations have finished.
+ */
+export declare function useAfterAnimations(getNode: Getter<HTMLElement | null>): (fn: () => void) => void;

package/dist/internal/use-after-animations.svelte.js

@@ -0,0 +1,27 @@
+import { flushSync } from "svelte";
+/**
+ * Calls a function the next frame after all animations have finished.
+ */
+export function useAfterAnimations(getNode) {
+    let frame = -1;
+    function cancelFrame() {
+        cancelAnimationFrame(frame);
+    }
+    $effect(() => cancelFrame);
+    return (fn) => {
+        cancelFrame();
+        const node = getNode();
+        if (!node)
+            return;
+        if (typeof node.getAnimations !== "function" || globalThis.bitsAnimationsDisabled) {
+            fn();
+        }
+        else {
+            frame = requestAnimationFrame(() => {
+                Promise.allSettled(node.getAnimations().map((anim) => anim.finished)).then(() => {
+                    flushSync(fn);
+                });
+            });
+        }
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "1.0.0-next.82",
+  "version": "1.0.0-next.83",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",
@@ -43,7 +43,7 @@
     "@internationalized/date": "^3.5.6",
     "esm-env": "^1.1.2",
     "runed": "^0.23.2",
-    "svelte-toolbelt": "^0.7.0"
+    "svelte-toolbelt": "^0.7.1"
   },
   "peerDependencies": {
     "svelte": "^5.11.0"