next: fix derived updates (#802)

.changeset/brown-pillows-hear.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix: Combobox & Select trigger default to `type="button"`

.changeset/famous-trains-notice.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix: derived updates

package.json

@@ -14,7 +14,6 @@
 		"test": "pnpm -F \"./packages/**\" --parallel --reporter append-only --color test",
 		"test:components": "pnpm -F tests test",
 		"test:utils": "pnpm -F bits-ui test"
-
 	},
 	"keywords": [],
 	"author": "Hunter Johnston <https://github.com/huntabyte>",
@@ -29,7 +28,7 @@
 		"prettier": "^3.2.5",
 		"prettier-plugin-svelte": "^3.2.2",
 		"prettier-plugin-tailwindcss": "0.5.13",
-		"svelte": "^5.0.0",
+		"svelte": "^5.1.0",
 		"svelte-eslint-parser": "^0.41.1",
 		"wrangler": "^3.44.0"
 	},

packages/bits-ui/package.json

@@ -36,7 +36,7 @@
 		"jest-axe": "^9.0.0",
 		"jsdom": "^24.1.0",
 		"publint": "^0.2.11",
-		"svelte": "^5.0.0",
+		"svelte": "^5.1.0",
 		"svelte-check": "4.0.3",
 		"tslib": "^2.7.0",
 		"typescript": "^5.6.2",

packages/bits-ui/src/lib/bits/combobox/components/combobox-trigger.svelte

@@ -9,6 +9,7 @@
 		ref = $bindable(null),
 		child,
 		children,
+		type = "button",
 		...restProps
 	}: ComboboxTriggerProps = $props();
 
@@ -20,7 +21,7 @@
 		),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, triggerState.props));
+	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
 </script>
 
 {#if child}

packages/bits-ui/src/lib/bits/radio-group/radio-group.svelte.ts

@@ -108,6 +108,10 @@ class RadioGroupItemState {
 			id: this.#id,
 			ref: this.#ref,
 		});
+
+		$effect(() => {
+			this.#tabIndex = this.#root.rovingFocusGroup.getTabIndex(this.#ref.current);
+		});
 	}
 
 	#onpointerdown = (e: PointerEvent) => {
@@ -132,7 +136,7 @@ class RadioGroupItemState {
 		this.#root.rovingFocusGroup.handleKeydown(this.#ref.current, e, true);
 	};
 
-	#tabIndex = $derived.by(() => this.#root.rovingFocusGroup.getTabIndex(this.#ref.current));
+	#tabIndex = $state(0);
 
 	snippetProps = $derived.by(() => ({ checked: this.#isChecked }));
 

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

@@ -10,6 +10,7 @@
 		ref = $bindable(null),
 		child,
 		children,
+		type = "button",
 		...restProps
 	}: SelectTriggerProps = $props();
 
@@ -21,7 +22,7 @@
 		),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, triggerState.props));
+	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
 </script>
 
 <FloatingLayer.Anchor {id}>

packages/bits-ui/src/lib/bits/toggle-group/toggle-group.svelte.ts

@@ -169,6 +169,14 @@ class ToggleGroupItemState {
 			id: this.#id,
 			ref: this.#ref,
 		});
+
+		$effect(() => {
+			if (!this.#root.rovingFocus.current) {
+				this.#tabIndex = 0;
+			} else {
+				this.#tabIndex = this.#root.rovingFocusGroup.getTabIndex(this.#ref.current);
+			}
+		});
 	}
 
 	toggleItem = () => {
@@ -203,11 +211,7 @@ class ToggleGroupItemState {
 		return this.#root.isMulti ? getAriaPressed(this.isPressed) : undefined;
 	});
 
-	#tabIndex = $derived.by(() =>
-		!this.#root.rovingFocus.current
-			? 0
-			: this.#root.rovingFocusGroup.getTabIndex(this.#ref.current)
-	);
+	#tabIndex = $state(0);
 
 	props = $derived.by(
 		() =>

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

@@ -210,6 +210,10 @@ class ToolbarGroupItemState {
 			id: this.#id,
 			ref: this.#ref,
 		});
+
+		$effect(() => {
+			this.#tabIndex = this.#root.rovingFocusGroup.getTabIndex(this.#ref.current);
+		});
 	}
 
 	toggleItem = () => {
@@ -252,7 +256,7 @@ class ToolbarGroupItemState {
 		return this.#group.isMulti ? getAriaPressed(this.isPressed) : undefined;
 	});
 
-	#tabIndex = $derived.by(() => this.#root.rovingFocusGroup.getTabIndex(this.#ref.current));
+	#tabIndex = $state(0);
 
 	props = $derived.by(
 		() =>
@@ -293,6 +297,10 @@ class ToolbarLinkState {
 			id: this.#id,
 			ref: this.#ref,
 		});
+
+		$effect(() => {
+			this.#tabIndex = this.#root.rovingFocusGroup.getTabIndex(this.#ref.current);
+		});
 	}
 
 	#onkeydown = (e: KeyboardEvent) => {
@@ -306,7 +314,7 @@ class ToolbarLinkState {
 		return undefined;
 	});
 
-	#tabIndex = $derived.by(() => this.#root.rovingFocusGroup.getTabIndex(this.#ref.current));
+	#tabIndex = $state(0);
 
 	props = $derived.by(() => ({
 		id: this.#id.current,
@@ -342,13 +350,17 @@ class ToolbarButtonState {
 			id: this.#id,
 			ref: this.#ref,
 		});
+
+		$effect(() => {
+			this.#tabIndex = this.#root.rovingFocusGroup.getTabIndex(this.#ref.current);
+		});
 	}
 
 	#onkeydown = (e: KeyboardEvent) => {
 		this.#root.rovingFocusGroup.handleKeydown(this.#ref.current, e);
 	};
 
-	#tabIndex = $derived.by(() => this.#root.rovingFocusGroup.getTabIndex(this.#ref.current));
+	#tabIndex = $state(0);
 
 	#role = $derived.by(() => {
 		if (!this.#ref.current) return undefined;

packages/tests/package.json

@@ -24,7 +24,7 @@
 		"jest-axe": "^9.0.0",
 		"jsdom": "^24.1.0",
 		"resize-observer-polyfill": "^1.5.1",
-		"svelte": "^5.0.0",
+		"svelte": "^5.1.0",
 		"svelte-check": "^4.0.3",
 		"typescript": "^5.6.2",
 		"vite": "^5.4.6",