next: Component Preview overhaul (#608)

package.json

@@ -26,7 +26,7 @@
 		"prettier": "^3.2.5",
 		"prettier-plugin-svelte": "^3.2.2",
 		"prettier-plugin-tailwindcss": "0.5.13",
-		"svelte": "5.0.0-next.182",
+		"svelte": "5.0.0-next.181",
 		"svelte-eslint-parser": "^0.34.1",
 		"wrangler": "^3.44.0"
 	},

packages/bits-ui/package.json

@@ -45,7 +45,7 @@
 		"jsdom": "^24.0.0",
 		"publint": "^0.2.7",
 		"resize-observer-polyfill": "^1.5.1",
-		"svelte": "5.0.0-next.182",
+		"svelte": "5.0.0-next.181",
 		"svelte-check": "^3.6.9",
 		"tslib": "^2.6.2",
 		"typescript": "^5.5.3",
@@ -63,7 +63,7 @@
 		"clsx": "^2.1.0",
 		"esm-env": "^1.0.0",
 		"nanoid": "^5.0.5",
-		"runed": "^0.12.1",
+		"runed": "^0.15.0",
 		"scule": "^1.3.0",
 		"style-object-to-css-string": "^1.1.3",
 		"style-to-object": "^1.0.6",

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

@@ -1,5 +1,6 @@
 import { onDestroy, onMount } from "svelte";
 import { SvelteSet } from "svelte/reactivity";
+import { IsFocusWithin } from "runed";
 import { focusFirst } from "../utilities/focus-scope/utils.js";
 import {
 	getAriaDisabled,
@@ -136,6 +137,7 @@ export class ListboxContentState {
 	rovingFocusGroup: UseRovingFocusReturn;
 	#handleTypeaheadSearch: ReturnType<typeof useTypeahead>["handleTypeaheadSearch"];
 	focusedItemId = $state("");
+	focusWithin = new IsFocusWithin(() => this.ref.value ?? undefined);
 
 	constructor(props: ListboxContentStateProps, root: ListboxRootState) {
 		this.id = props.id;
@@ -190,11 +192,53 @@ export class ListboxContentState {
 					}
 				}
 				const firstCandidate = candidateNodes[0];
-				if (firstCandidate) [(this.focusedItemId = firstCandidate.id)];
+				if (firstCandidate) {
+					this.focusedItemId = firstCandidate.id;
+				}
+			}
+		});
+
+		$effect(() => {
+			if (!this.focusWithin.current) {
+				this.focusedItemId = this.getNodeIdToFocus() ?? "";
 			}
 		});
 	}
 
+	/**
+	 * Get the node to focus when the listbox loses focus and then
+	 * regains focus. In the case of a single-select listbox, if an item is
+	 * selected, we want to focus that item. If no item is selected, we want to
+	 * focus the first item in the list.
+	 *
+	 * In the case of a multi-select listbox, if at least one or more items are
+	 * selected, we want to focus the first selected item. If no items are selected,
+	 * we want to focus the first item in the list.
+	 */
+	getNodeIdToFocus = () => {
+		const candidateNodes = this.getCandidateNodes();
+		if (this.root.isMulti && this.root.value.value.length) {
+			const firstValue = this.root.value.value[0];
+			if (firstValue !== undefined) {
+				const candidateNode = candidateNodes.find(
+					(node) => node.dataset.value === firstValue
+				);
+				if (candidateNode) {
+					return candidateNode.id;
+				}
+			}
+		} else if (!this.root.isMulti && this.root.value.value) {
+			const candidateNode = candidateNodes.find(
+				(node) => node.dataset.value === this.root.value.value
+			);
+			if (candidateNode) {
+				return candidateNode.id;
+			}
+		}
+		const firstCandidate = candidateNodes[0];
+		return firstCandidate?.id;
+	};
+
 	isFocusedItem = (id: string) => {
 		return this.focusedItemId === id;
 	};