next: update Svelte and other deps

package.json

@@ -22,12 +22,12 @@
 		"@huntabyte/eslint-plugin": "^0.1.0",
 		"@svitejs/changesets-changelog-github-compact": "^1.1.0",
 		"eslint": "^9.0.0",
-		"eslint-plugin-svelte": "^2.37.0",
+		"eslint-plugin-svelte": "^2.44.0",
 		"prettier": "^3.2.5",
 		"prettier-plugin-svelte": "^3.2.2",
 		"prettier-plugin-tailwindcss": "0.5.13",
-		"svelte": "5.0.0-next.208",
-		"svelte-eslint-parser": "^0.41.0",
+		"svelte": "5.0.0-next.251",
+		"svelte-eslint-parser": "^0.41.1",
 		"wrangler": "^3.44.0"
 	},
 	"type": "module",

packages/bits-ui/package.json

@@ -28,8 +28,8 @@
 	],
 	"devDependencies": {
 		"@sveltejs/kit": "^2.5.18",
-		"@sveltejs/package": "^2.3.2",
-		"@sveltejs/vite-plugin-svelte": "^3.1.1",
+		"@sveltejs/package": "^2.3.5",
+		"@sveltejs/vite-plugin-svelte": "4.0.0-next.7",
 		"@testing-library/dom": "^10.3.1",
 		"@testing-library/jest-dom": "^6.4.6",
 		"@testing-library/svelte": "^5.2.1",
@@ -42,13 +42,13 @@
 		"csstype": "^3.1.3",
 		"jest-axe": "^9.0.0",
 		"jsdom": "^24.1.0",
-		"publint": "^0.2.8",
+		"publint": "^0.2.11",
 		"resize-observer-polyfill": "^1.5.1",
-		"svelte": "5.0.0-next.208",
-		"svelte-check": "^3.8.4",
-		"tslib": "^2.6.3",
-		"typescript": "^5.5.3",
-		"vite": "^5.3.3",
+		"svelte": "5.0.0-next.251",
+		"svelte-check": "3.8.6",
+		"tslib": "^2.7.0",
+		"typescript": "^5.6.2",
+		"vite": "^5.4.6",
 		"vitest": "^2.0.2"
 	},
 	"svelte": "./dist/index.js",
@@ -60,11 +60,11 @@
 		"@internationalized/date": "^3.5.4",
 		"clsx": "^2.1.1",
 		"esm-env": "^1.0.0",
-		"runed": "^0.15.0",
+		"runed": "^0.15.2",
 		"scule": "^1.3.0",
 		"style-object-to-css-string": "^1.1.3",
 		"style-to-object": "^1.0.6",
-		"svelte-toolbelt": "^0.1.0"
+		"svelte-toolbelt": "^0.3.1"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0-next.1"

packages/bits-ui/src/lib/bits/calendar/calendar.svelte.ts

@@ -218,16 +218,19 @@ export class CalendarRootState {
 		/**
 		 * Synchronize the placeholder value with the current value.
 		 */
-		watch(this.value, () => {
-			const value = this.value.current;
-			if (Array.isArray(value) && value.length) {
-				const lastValue = value[value.length - 1];
-				if (lastValue && this.placeholder.current !== lastValue) {
-					this.placeholder.current = lastValue;
+		$effect(() => {
+			this.value.current;
+			untrack(() => {
+				const value = this.value.current;
+				if (Array.isArray(value) && value.length) {
+					const lastValue = value[value.length - 1];
+					if (lastValue && this.placeholder.current !== lastValue) {
+						this.placeholder.current = lastValue;
+					}
+				} else if (!Array.isArray(value) && value && this.placeholder.current !== value) {
+					this.placeholder.current = value;
 				}
-			} else if (!Array.isArray(value) && value && this.placeholder.current !== value) {
-				this.placeholder.current = value;
-			}
+			});
 		});
 	}
 

packages/bits-ui/src/lib/bits/date-range-picker/components/date-range-picker.svelte

@@ -83,10 +83,8 @@
 		value: box.with(
 			() => value as DateRange,
 			(v) => {
-				if (!$state.is(value, v)) {
-					value = v;
-					onValueChange(v);
-				}
+				value = v;
+				onValueChange(v);
 			}
 		),
 		placeholder: box.with(

packages/bits-ui/src/lib/bits/menu/menu.svelte.ts

@@ -1,5 +1,5 @@
 import { box } from "svelte-toolbelt";
-import { tick } from "svelte";
+import { tick, untrack } from "svelte";
 import { IsFocusWithin } from "runed";
 import {
 	FIRST_LAST_KEYS,
@@ -145,8 +145,11 @@ class MenuMenuState {
 		this.parentMenu = parentMenu;
 
 		if (parentMenu) {
-			watch(parentMenu.open, (v) => {
-				if (!v) this.open.current = false;
+			$effect(() => {
+				parentMenu.open;
+				untrack(() => {
+					if (!this.parentMenu?.open) this.open.current = false;
+				});
 			});
 		}
 	}

packages/bits-ui/src/lib/bits/menu/types.ts

@@ -72,7 +72,7 @@ export type MenuCheckboxItemPropsWithoutHTML =
 		 *
 		 * Supports two-way binding with `bind:checked`.
 		 */
-		checked?: boolean | "indeterminate" | undefined;
+		checked?: boolean | "indeterminate";
 
 		/**
 		 * A callback that is fired when the checked state changes.

packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts

@@ -86,20 +86,24 @@ class NavigationMenuRootState {
 			ref: this.rootRef,
 		});
 
-		watch(this.value, (curr) => {
-			const isOpen = curr !== "";
-			const hasSkipDelayDuration = this.skipDelayDuration.current > 0;
-
-			if (isOpen) {
-				window.clearTimeout(this.skipDelayTimer);
-				if (hasSkipDelayDuration) this.isOpenDelayed = false;
-			} else {
-				window.clearTimeout(this.skipDelayTimer);
-				this.skipDelayTimer = window.setTimeout(
-					() => (this.isOpenDelayed = true),
-					this.skipDelayDuration.current
-				);
-			}
+		$effect(() => {
+			this.value.current;
+			untrack(() => {
+				const curr = this.value.current;
+				const isOpen = curr !== "";
+				const hasSkipDelayDuration = this.skipDelayDuration.current > 0;
+
+				if (isOpen) {
+					window.clearTimeout(this.skipDelayTimer);
+					if (hasSkipDelayDuration) this.isOpenDelayed = false;
+				} else {
+					window.clearTimeout(this.skipDelayTimer);
+					this.skipDelayTimer = window.setTimeout(
+						() => (this.isOpenDelayed = true),
+						this.skipDelayDuration.current
+					);
+				}
+			});
 		});
 
 		$effect(() => {

packages/bits-ui/src/lib/bits/range-calendar/components/range-calendar.svelte

@@ -58,10 +58,8 @@
 		value: box.with(
 			() => (value === undefined ? { start: undefined, end: undefined } : value),
 			(v) => {
-				if (!$state.is(v, value)) {
-					value = v;
-					onValueChange(v as any);
-				}
+				value = v;
+				onValueChange(v as any);
 			}
 		),
 		placeholder: box.with(

packages/bits-ui/src/lib/bits/range-calendar/range-calendar.svelte.ts

@@ -27,12 +27,8 @@ import {
 	type CalendarPrevButtonStateProps,
 } from "../calendar/calendar.svelte.js";
 import type { DateRange, Month } from "$lib/shared/index.js";
-import {
-	type ReadableBoxedValues,
-	type WritableBoxedValues,
-	watch,
-} from "$lib/internal/box.svelte.js";
-import type { OnChangeFn, WithRefProps } from "$lib/internal/types.js";
+import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js";
+import type { WithRefProps } from "$lib/internal/types.js";
 import { type Announcer, getAnnouncer } from "$lib/shared/date/announcer.js";
 import { type Formatter, createFormatter } from "$lib/shared/date/formatter.js";
 import { useId } from "$lib/internal/useId.js";
@@ -216,11 +212,14 @@ export class RangeCalendarRootState {
 		/**
 		 * Synchronize the placeholder value with the current start value
 		 */
-		watch(this.value, () => {
-			const startValue = this.value.current.start;
-			if (startValue && this.placeholder.current !== startValue) {
-				this.placeholder.current = startValue;
-			}
+		$effect(() => {
+			this.value.current;
+			untrack(() => {
+				const startValue = this.value.current.start;
+				if (startValue && this.placeholder.current !== startValue) {
+					this.placeholder.current = startValue;
+				}
+			});
 		});
 
 		$effect(() => {

packages/bits-ui/src/lib/bits/scroll-area/scroll-area.svelte.ts

@@ -374,7 +374,7 @@ class ScrollAreaScrollbarVisibleState {
 	root: ScrollAreaRootState;
 	thumbNode = $state<HTMLElement | null>(null);
 	pointerOffset = $state(0);
-	sizes = $state.frozen<Sizes>({
+	sizes = $state.raw<Sizes>({
 		content: 0,
 		viewport: 0,
 		scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 },
@@ -696,7 +696,7 @@ class ScrollAreaScrollbarSharedState {
 	scrollbarState: ScrollbarAxis;
 	root: ScrollAreaRootState;
 	scrollbarVis: ScrollAreaScrollbarVisibleState;
-	rect = $state.frozen<DOMRect | null>(null);
+	rect = $state.raw<DOMRect | null>(null);
 	prevWebkitUserSelect = $state<string>("");
 	handleResize: () => void;
 	handleThumbPositionChange: () => void;

packages/bits-ui/src/lib/bits/select/components/select-content-floating.svelte

@@ -6,6 +6,7 @@
 	import type { WithChild } from "$lib/internal/types.js";
 	import { FloatingLayer } from "$lib/bits/utilities/floating-layer/index.js";
 	import type { FloatingLayerContentImplProps } from "$lib/bits/utilities/floating-layer/types.js";
+	import ScrollLock from "$lib/bits/utilities/scroll-lock/scroll-lock.svelte";
 
 	let {
 		children,
@@ -52,12 +53,12 @@
 	{updatePositionStrategy}
 	{strategy}
 	{dir}
-	{preventScroll}
 	{wrapperId}
 	{onPlaced}
 	{style}
 >
 	{#snippet content({ props })}
+		<ScrollLock {preventScroll} />
 		{@const finalProps = mergeProps(props, mergedProps, {
 			style: contentFloatingState.props.style,
 		})}

packages/bits-ui/src/lib/bits/select/components/select-native.svelte

@@ -5,7 +5,6 @@
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 
 	type Props = {
-		autocomplete?: string;
 		autofocus?: boolean;
 		disabled?: boolean;
 		form?: string;

packages/bits-ui/src/lib/bits/select/select.svelte.ts

@@ -392,57 +392,62 @@ export class SelectContentState {
 			},
 		});
 
-		watch(this.root.open, () => {
-			let cleanup = [noop];
-
-			afterTick(() => {
-				const node = document.getElementById(this.id.current);
-				if (!node) return;
-
-				let pointerMoveDelta = { x: 0, y: 0 };
-
-				const handlePointerMove = (e: PointerEvent) => {
-					pointerMoveDelta = {
-						x: Math.abs(
-							Math.round(e.pageX) - (this.root.triggerPointerDownPos.current?.x ?? 0)
-						),
-						y: Math.abs(
-							Math.round(e.pageY) - (this.root.triggerPointerDownPos.current?.y ?? 0)
-						),
+		$effect(() => {
+			this.root.open.current;
+			untrack(() => {
+				let cleanup = [noop];
+
+				afterTick(() => {
+					const node = document.getElementById(this.id.current);
+					if (!node) return;
+
+					let pointerMoveDelta = { x: 0, y: 0 };
+
+					const handlePointerMove = (e: PointerEvent) => {
+						pointerMoveDelta = {
+							x: Math.abs(
+								Math.round(e.pageX) -
+									(this.root.triggerPointerDownPos.current?.x ?? 0)
+							),
+							y: Math.abs(
+								Math.round(e.pageY) -
+									(this.root.triggerPointerDownPos.current?.y ?? 0)
+							),
+						};
 					};
-				};
 
-				const handlePointerUp = (e: PointerEvent) => {
-					if (e.pointerType === "touch") return;
+					const handlePointerUp = (e: PointerEvent) => {
+						if (e.pointerType === "touch") return;
 
-					if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) {
-						e.preventDefault();
-					} else {
-						if (!this.root.contentNode?.contains(e.target as HTMLElement)) {
-							this.root.handleClose();
+						if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) {
+							e.preventDefault();
+						} else {
+							if (!this.root.contentNode?.contains(e.target as HTMLElement)) {
+								this.root.handleClose();
+							}
 						}
-					}
-					document.removeEventListener("pointermove", handlePointerMove);
-					this.root.triggerPointerDownPos.current = null;
-				};
+						document.removeEventListener("pointermove", handlePointerMove);
+						this.root.triggerPointerDownPos.current = null;
+					};
 
-				if (this.root.triggerPointerDownPos.current !== null) {
-					const pointerMove = addEventListener(
-						document,
-						"pointermove",
-						handlePointerMove
-					);
-					const pointerUp = addEventListener(document, "pointerup", handlePointerUp, {
-						capture: true,
-						once: true,
-					});
-					for (const cleanupFn of cleanup) cleanupFn();
-					cleanup = [pointerMove, pointerUp];
-				}
+					if (this.root.triggerPointerDownPos.current !== null) {
+						const pointerMove = addEventListener(
+							document,
+							"pointermove",
+							handlePointerMove
+						);
+						const pointerUp = addEventListener(document, "pointerup", handlePointerUp, {
+							capture: true,
+							once: true,
+						});
+						for (const cleanupFn of cleanup) cleanupFn();
+						cleanup = [pointerMove, pointerUp];
+					}
 
-				return () => {
-					for (const cleanupFn of cleanup) cleanupFn();
-				};
+					return () => {
+						for (const cleanupFn of cleanup) cleanupFn();
+					};
+				});
 			});
 		});
 

packages/bits-ui/src/lib/bits/select/types.ts

@@ -1,3 +1,4 @@
+import type { HTMLSelectAttributes } from "svelte/elements";
 import type { PopperLayerProps } from "../utilities/popper-layer/types.js";
 import type { ArrowProps, ArrowPropsWithoutHTML } from "../utilities/arrow/types.js";
 import type { OnChangeFn, WithChild, WithChildren, Without } from "$lib/internal/types.js";
@@ -43,7 +44,7 @@ export type SelectRootPropsWithoutHTML = WithChildren<{
 	/**
 	 * The native HTML select autocomplete attribute.
 	 */
-	autocomplete?: string;
+	autocomplete?: HTMLSelectAttributes["autocomplete"];
 
 	/**
 	 * The native HTML select `form` attribute.