diff --git a/.changeset/mighty-chefs-cheer.md b/.changeset/mighty-chefs-cheer.md
new file mode 100644
index 000000000..4a98aab49
--- /dev/null
+++ b/.changeset/mighty-chefs-cheer.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+Breaking: replace existing `Select` implementation with `Listbox` and remove standalone `Listbox` as `Select` now has the exact functionality
diff --git a/.changeset/weak-ducks-brush.md b/.changeset/weak-ducks-brush.md
new file mode 100644
index 000000000..b7c85c1f5
--- /dev/null
+++ b/.changeset/weak-ducks-brush.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+Add support for typeahead select when the trigger is focused and content is closed via the `items` prop on `Select.Root`.
diff --git a/package.json b/package.json
index 2d5853890..8d8c227b6 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,9 @@
 		"lint": "prettier --check . && eslint .",
 		"lint:fix": "eslint --fix .",
 		"test": "pnpm -F \"./packages/**\" --parallel --reporter append-only --color test",
-		"test:components": "pnpm -F tests test"
+		"test:components": "pnpm -F tests test",
+		"test:utils": "pnpm -F bits-ui test"
+
 	},
 	"keywords": [],
 	"author": "Hunter Johnston <https://github.com/huntabyte>",
diff --git a/packages/bits-ui/package.json b/packages/bits-ui/package.json
index c7303c1d6..bd8b9ed5e 100644
--- a/packages/bits-ui/package.json
+++ b/packages/bits-ui/package.json
@@ -52,7 +52,7 @@
 		"@internationalized/date": "^3.5.6",
 		"esm-env": "^1.0.0",
 		"runed": "^0.15.2",
-		"svelte-toolbelt": "^0.4.1"
+		"svelte-toolbelt": "^0.4.4"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0-next.1"
diff --git a/packages/bits-ui/src/lib/bits/combobox/components/combobox-input.svelte b/packages/bits-ui/src/lib/bits/combobox/components/combobox-input.svelte
index 9b0fa8863..9402ab788 100644
--- a/packages/bits-ui/src/lib/bits/combobox/components/combobox-input.svelte
+++ b/packages/bits-ui/src/lib/bits/combobox/components/combobox-input.svelte
@@ -3,7 +3,7 @@
 	import type { ComboboxInputProps } from "../types.js";
 	import { useId } from "$lib/internal/use-id.js";
 	import { FloatingLayer } from "$lib/bits/utilities/floating-layer/index.js";
-	import { useListboxInput } from "$lib/bits/listbox/listbox.svelte.js";
+	import { useSelectInput } from "$lib/bits/select/select.svelte.js";
 
 	let {
 		id = useId(),
@@ -13,7 +13,7 @@
 		...restProps
 	}: ComboboxInputProps = $props();
 
-	const inputState = useListboxInput({
+	const inputState = useSelectInput({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,
diff --git a/packages/bits-ui/src/lib/bits/combobox/components/combobox-trigger.svelte b/packages/bits-ui/src/lib/bits/combobox/components/combobox-trigger.svelte
index 26c588a84..cebf121fa 100644
--- a/packages/bits-ui/src/lib/bits/combobox/components/combobox-trigger.svelte
+++ b/packages/bits-ui/src/lib/bits/combobox/components/combobox-trigger.svelte
@@ -2,7 +2,7 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { ComboboxTriggerProps } from "../types.js";
 	import { useId } from "$lib/internal/use-id.js";
-	import { useListboxComboTrigger } from "$lib/bits/listbox/listbox.svelte.js";
+	import { useSelectComboTrigger } from "$lib/bits/select/select.svelte.js";
 
 	let {
 		id = useId(),
@@ -12,7 +12,7 @@
 		...restProps
 	}: ComboboxTriggerProps = $props();
 
-	const triggerState = useListboxComboTrigger({
+	const triggerState = useSelectComboTrigger({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,
diff --git a/packages/bits-ui/src/lib/bits/combobox/components/combobox.svelte b/packages/bits-ui/src/lib/bits/combobox/components/combobox.svelte
index 0d00d83d7..a901a319d 100644
--- a/packages/bits-ui/src/lib/bits/combobox/components/combobox.svelte
+++ b/packages/bits-ui/src/lib/bits/combobox/components/combobox.svelte
@@ -3,8 +3,8 @@
 	import type { ComboboxRootProps } from "../types.js";
 	import { noop } from "$lib/internal/noop.js";
 	import FloatingLayer from "$lib/bits/utilities/floating-layer/components/floating-layer.svelte";
-	import { useListboxRoot } from "$lib/bits/listbox/listbox.svelte.js";
-	import ListboxHiddenInput from "$lib/bits/listbox/components/listbox-hidden-input.svelte";
+	import { useSelectRoot } from "$lib/bits/select/select.svelte.js";
+	import ListboxHiddenInput from "$lib/bits/select/components/select-hidden-input.svelte";
 
 	let {
 		value = $bindable(),
@@ -19,6 +19,7 @@
 		required = false,
 		controlledOpen = false,
 		controlledValue = false,
+		items = [],
 		children,
 	}: ComboboxRootProps = $props();
 
@@ -31,7 +32,7 @@
 		}
 	}
 
-	useListboxRoot({
+	const rootState = useSelectRoot({
 		type,
 		value: box.with(
 			() => value!,
@@ -61,6 +62,7 @@
 		scrollAlignment: box.with(() => scrollAlignment),
 		name: box.with(() => name),
 		isCombobox: true,
+		items: box.with(() => items),
 	});
 </script>
 
@@ -68,14 +70,14 @@
 	{@render children?.()}
 </FloatingLayer>
 
-{#if Array.isArray(value)}
-	{#if value.length === 0}
+{#if Array.isArray(rootState.value.current)}
+	{#if rootState.value.current.length === 0}
 		<ListboxHiddenInput value="" />
 	{:else}
-		{#each value as item}
+		{#each rootState.value.current as item}
 			<ListboxHiddenInput value={item} />
 		{/each}
 	{/if}
 {:else}
-	<ListboxHiddenInput {value} />
+	<ListboxHiddenInput bind:value={rootState.value.current as string} />
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/combobox/exports.ts b/packages/bits-ui/src/lib/bits/combobox/exports.ts
index 3a00d9062..4c1bde127 100644
--- a/packages/bits-ui/src/lib/bits/combobox/exports.ts
+++ b/packages/bits-ui/src/lib/bits/combobox/exports.ts
@@ -4,14 +4,14 @@ export { default as Separator } from "../separator/components/separator.svelte";
 export { default as Arrow } from "$lib/bits/utilities/arrow/arrow.svelte";
 export { default as Trigger } from "./components/combobox-trigger.svelte";
 export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte";
-export { default as Content } from "$lib/bits/listbox/components/listbox-content.svelte";
-export { default as ContentStatic } from "$lib/bits/listbox/components/listbox-content-static.svelte";
-export { default as Item } from "$lib/bits/listbox/components/listbox-item.svelte";
-export { default as Group } from "$lib/bits/listbox/components/listbox-group.svelte";
-export { default as GroupHeading } from "$lib/bits/listbox/components/listbox-group-heading.svelte";
-export { default as Viewport } from "$lib/bits/listbox/components/listbox-viewport.svelte";
-export { default as ScrollDownButton } from "$lib/bits/listbox/components/listbox-scroll-down-button.svelte";
-export { default as ScrollUpButton } from "$lib/bits/listbox/components/listbox-scroll-up-button.svelte";
+export { default as Content } from "$lib/bits/select/components/select-content.svelte";
+export { default as ContentStatic } from "$lib/bits/select/components/select-content-static.svelte";
+export { default as Item } from "$lib/bits/select/components/select-item.svelte";
+export { default as Group } from "$lib/bits/select/components/select-group.svelte";
+export { default as GroupHeading } from "$lib/bits/select/components/select-group-heading.svelte";
+export { default as Viewport } from "$lib/bits/select/components/select-viewport.svelte";
+export { default as ScrollDownButton } from "$lib/bits/select/components/select-scroll-down-button.svelte";
+export { default as ScrollUpButton } from "$lib/bits/select/components/select-scroll-up-button.svelte";
 
 export type {
 	ComboboxRootProps as RootProps,
diff --git a/packages/bits-ui/src/lib/bits/combobox/types.ts b/packages/bits-ui/src/lib/bits/combobox/types.ts
index 4cc4d570e..683128ecf 100644
--- a/packages/bits-ui/src/lib/bits/combobox/types.ts
+++ b/packages/bits-ui/src/lib/bits/combobox/types.ts
@@ -2,37 +2,37 @@ import type { BitsPrimitiveInputAttributes } from "$lib/shared/attributes.js";
 import type { WithChild, Without } from "$lib/internal/types.js";
 
 export type {
-	ListboxBaseRootPropsWithoutHTML as ComboboxBaseRootPropsWithoutHTML,
-	ListboxContentProps as ComboboxContentProps,
-	ListboxContentPropsWithoutHTML as ComboboxContentPropsWithoutHTML,
-	ListboxContentStaticProps as ComboboxContentStaticProps,
-	ListboxContentStaticPropsWithoutHTML as ComboboxContentStaticPropsWithoutHTML,
-	ListboxItemProps as ComboboxItemProps,
-	ListboxItemPropsWithoutHTML as ComboboxItemPropsWithoutHTML,
-	ListboxItemSnippetProps as ComboboxItemSnippetProps,
-	ListboxMultipleRootProps as ComboboxMultipleRootProps,
-	ListboxMultipleRootPropsWithoutHTML as ComboboxMultipleRootPropsWithoutHTML,
-	ListboxRootProps as ComboboxRootProps,
-	ListboxRootPropsWithoutHTML as ComboboxRootPropsWithoutHTML,
-	ListboxSingleRootProps as ComboboxSingleRootProps,
-	ListboxSingleRootPropsWithoutHTML as ComboboxSingleRootPropsWithoutHTML,
-	ListboxTriggerProps as ComboboxTriggerProps,
-	ListboxTriggerPropsWithoutHTML as ComboboxTriggerPropsWithoutHTML,
-	ListboxGroupPropsWithoutHTML as ComboboxGroupPropsWithoutHTML,
-	ListboxGroupProps as ComboboxGroupProps,
-	ListboxGroupHeadingPropsWithoutHTML as ComboboxGroupHeadingPropsWithoutHTML,
-	ListboxGroupHeadingProps as ComboboxGroupHeadingProps,
-	ListboxViewportPropsWithoutHTML as ComboboxViewportPropsWithoutHTML,
-	ListboxViewportProps as ComboboxViewportProps,
-	ListboxScrollDownButtonProps as ComboboxScrollDownButtonProps,
-	ListboxScrollDownButtonPropsWithoutHTML as ComboboxScrollDownButtonPropsWithoutHTML,
-	ListboxScrollUpButtonProps as ComboboxScrollUpButtonProps,
-	ListboxScrollUpButtonPropsWithoutHTML as ComboboxScrollUpButtonPropsWithoutHTML,
-	ListboxArrowProps as ComboboxArrowProps,
-	ListboxArrowPropsWithoutHTML as ComboboxArrowPropsWithoutHTML,
-	ListboxPortalProps as ComboboxPortalProps,
-	ListboxPortalPropsWithoutHTML as ComboboxPortalPropsWithoutHTML,
-} from "$lib/bits/listbox/types.js";
+	SelectBaseRootPropsWithoutHTML as ComboboxBaseRootPropsWithoutHTML,
+	SelectContentProps as ComboboxContentProps,
+	SelectContentPropsWithoutHTML as ComboboxContentPropsWithoutHTML,
+	SelectContentStaticProps as ComboboxContentStaticProps,
+	SelectContentStaticPropsWithoutHTML as ComboboxContentStaticPropsWithoutHTML,
+	SelectItemProps as ComboboxItemProps,
+	SelectItemPropsWithoutHTML as ComboboxItemPropsWithoutHTML,
+	SelectItemSnippetProps as ComboboxItemSnippetProps,
+	SelectMultipleRootProps as ComboboxMultipleRootProps,
+	SelectMultipleRootPropsWithoutHTML as ComboboxMultipleRootPropsWithoutHTML,
+	SelectRootProps as ComboboxRootProps,
+	SelectRootPropsWithoutHTML as ComboboxRootPropsWithoutHTML,
+	SelectSingleRootProps as ComboboxSingleRootProps,
+	SelectSingleRootPropsWithoutHTML as ComboboxSingleRootPropsWithoutHTML,
+	SelectTriggerProps as ComboboxTriggerProps,
+	SelectTriggerPropsWithoutHTML as ComboboxTriggerPropsWithoutHTML,
+	SelectGroupPropsWithoutHTML as ComboboxGroupPropsWithoutHTML,
+	SelectGroupProps as ComboboxGroupProps,
+	SelectGroupHeadingPropsWithoutHTML as ComboboxGroupHeadingPropsWithoutHTML,
+	SelectGroupHeadingProps as ComboboxGroupHeadingProps,
+	SelectViewportPropsWithoutHTML as ComboboxViewportPropsWithoutHTML,
+	SelectViewportProps as ComboboxViewportProps,
+	SelectScrollDownButtonProps as ComboboxScrollDownButtonProps,
+	SelectScrollDownButtonPropsWithoutHTML as ComboboxScrollDownButtonPropsWithoutHTML,
+	SelectScrollUpButtonProps as ComboboxScrollUpButtonProps,
+	SelectScrollUpButtonPropsWithoutHTML as ComboboxScrollUpButtonPropsWithoutHTML,
+	SelectArrowProps as ComboboxArrowProps,
+	SelectArrowPropsWithoutHTML as ComboboxArrowPropsWithoutHTML,
+	SelectPortalProps as ComboboxPortalProps,
+	SelectPortalPropsWithoutHTML as ComboboxPortalPropsWithoutHTML,
+} from "$lib/bits/select/types.js";
 
 export type ComboboxInputPropsWithoutHTML = WithChild<{
 	/**
diff --git a/packages/bits-ui/src/lib/bits/index.ts b/packages/bits-ui/src/lib/bits/index.ts
index 53a267809..c19d8477e 100644
--- a/packages/bits-ui/src/lib/bits/index.ts
+++ b/packages/bits-ui/src/lib/bits/index.ts
@@ -17,7 +17,6 @@ export { Dialog } from "./dialog/index.js";
 export { DropdownMenu } from "./dropdown-menu/index.js";
 export { Label } from "./label/index.js";
 export { LinkPreview } from "./link-preview/index.js";
-export { Listbox } from "./listbox/index.js";
 export { Menubar } from "./menubar/index.js";
 export { NavigationMenu } from "./navigation-menu/index.js";
 export { Pagination } from "./pagination/index.js";
diff --git a/packages/bits-ui/src/lib/bits/listbox/components/listbox-content.svelte b/packages/bits-ui/src/lib/bits/listbox/components/listbox-content.svelte
deleted file mode 100644
index bd033e8ff..000000000
--- a/packages/bits-ui/src/lib/bits/listbox/components/listbox-content.svelte
+++ /dev/null
@@ -1,76 +0,0 @@
-<script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
-	import type { ListboxContentProps } from "../types.js";
-	import { useListboxContent } from "../listbox.svelte.js";
-	import PopperLayer from "$lib/bits/utilities/popper-layer/popper-layer.svelte";
-	import { useId } from "$lib/internal/use-id.js";
-	import { noop } from "$lib/internal/noop.js";
-
-	let {
-		id = useId(),
-		ref = $bindable(null),
-		forceMount = false,
-		side = "bottom",
-		onInteractOutside = noop,
-		onEscapeKeydown = noop,
-		children,
-		child,
-		...restProps
-	}: ListboxContentProps = $props();
-
-	const contentState = useListboxContent({
-		id: box.with(() => id),
-		ref: box.with(
-			() => ref,
-			(v) => (ref = v)
-		),
-	});
-
-	const mergedProps = $derived(mergeProps(restProps, contentState.props));
-</script>
-
-<PopperLayer
-	{...mergedProps}
-	{side}
-	present={contentState.root.open.current || forceMount}
-	{id}
-	onInteractOutside={(e) => {
-		contentState.handleInteractOutside(e);
-		if (e.defaultPrevented) return;
-		onInteractOutside(e);
-		if (e.defaultPrevented) return;
-		contentState.root.closeMenu();
-	}}
-	onEscapeKeydown={(e) => {
-		onEscapeKeydown(e);
-		if (e.defaultPrevented) return;
-		contentState.root.closeMenu();
-	}}
-	onOpenAutoFocus={(e) => e.preventDefault()}
-	onCloseAutoFocus={(e) => e.preventDefault()}
-	trapFocus={false}
-	loop={false}
-	preventScroll={false}
-	onPlaced={() => (contentState.isPositioned = true)}
-	{forceMount}
->
-	{#snippet popper({ props })}
-		{@const finalProps = mergeProps(props, {
-			style: {
-				"--bits-listbox-content-transform-origin": "var(--bits-floating-transform-origin)",
-				"--bits-listbox-content-available-width": "var(--bits-floating-available-width)",
-				"--bits-listbox-content-available-height": "var(--bits-floating-available-height)",
-				"--bits-listbox-anchor-width": "var(--bits-floating-anchor-width)",
-				"--bits-listbox-anchor-height": "var(--bits-floating-anchor-height)",
-				...contentState.props.style,
-			},
-		})}
-		{#if child}
-			{@render child({ props: finalProps, ...contentState.snippetProps })}
-		{:else}
-			<div {...finalProps}>
-				{@render children?.()}
-			</div>
-		{/if}
-	{/snippet}
-</PopperLayer>
diff --git a/packages/bits-ui/src/lib/bits/listbox/components/listbox-group-heading.svelte b/packages/bits-ui/src/lib/bits/listbox/components/listbox-group-heading.svelte
deleted file mode 100644
index 378a9750d..000000000
--- a/packages/bits-ui/src/lib/bits/listbox/components/listbox-group-heading.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
-	import type { ListboxGroupHeadingProps } from "../types.js";
-	import { useListboxGroupHeading } from "../listbox.svelte.js";
-	import { useId } from "$lib/internal/use-id.js";
-
-	let {
-		id = useId(),
-		ref = $bindable(null),
-		child,
-		children,
-		...restProps
-	}: ListboxGroupHeadingProps = $props();
-
-	const groupHeadingState = useListboxGroupHeading({
-		id: box.with(() => id),
-		ref: box.with(
-			() => ref,
-			(v) => (ref = v)
-		),
-	});
-
-	const mergedProps = $derived(mergeProps(restProps, groupHeadingState.props));
-</script>
-
-{#if child}
-	{@render child({ props: mergedProps })}
-{:else}
-	<div {...mergedProps}>
-		{@render children?.()}
-	</div>
-{/if}
diff --git a/packages/bits-ui/src/lib/bits/listbox/components/listbox-group.svelte b/packages/bits-ui/src/lib/bits/listbox/components/listbox-group.svelte
deleted file mode 100644
index 4a5a8e50a..000000000
--- a/packages/bits-ui/src/lib/bits/listbox/components/listbox-group.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
-	import { useListboxGroup } from "../listbox.svelte.js";
-	import type { ListboxGroupProps } from "../types.js";
-	import { useId } from "$lib/internal/use-id.js";
-
-	let {
-		id = useId(),
-		ref = $bindable(null),
-		children,
-		child,
-		...restProps
-	}: ListboxGroupProps = $props();
-
-	const groupState = useListboxGroup({
-		id: box.with(() => id),
-		ref: box.with(
-			() => ref,
-			(v) => (ref = v)
-		),
-	});
-
-	const mergedProps = $derived(mergeProps(restProps, groupState.props));
-</script>
-
-{#if child}
-	{@render child({ props: mergedProps })}
-{:else}
-	<div {...mergedProps}>
-		{@render children?.()}
-	</div>
-{/if}
diff --git a/packages/bits-ui/src/lib/bits/listbox/components/listbox-item.svelte b/packages/bits-ui/src/lib/bits/listbox/components/listbox-item.svelte
deleted file mode 100644
index 4e5db2ae5..000000000
--- a/packages/bits-ui/src/lib/bits/listbox/components/listbox-item.svelte
+++ /dev/null
@@ -1,43 +0,0 @@
-<script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
-	import { useListboxItem } from "../listbox.svelte.js";
-	import type { ListboxItemProps } from "../types.js";
-	import { useId } from "$lib/internal/use-id.js";
-	import { noop } from "$lib/internal/noop.js";
-
-	let {
-		id = useId(),
-		ref = $bindable(null),
-		value,
-		label = value,
-		disabled = false,
-		children,
-		child,
-		onHighlight = noop,
-		onUnhighlight = noop,
-		...restProps
-	}: ListboxItemProps = $props();
-
-	const itemState = useListboxItem({
-		id: box.with(() => id),
-		ref: box.with(
-			() => ref,
-			(v) => (ref = v)
-		),
-		value: box.with(() => value),
-		disabled: box.with(() => disabled),
-		label: box.with(() => label),
-		onHighlight: box.with(() => onHighlight),
-		onUnhighlight: box.with(() => onUnhighlight),
-	});
-
-	const mergedProps = $derived(mergeProps(restProps, itemState.props));
-</script>
-
-{#if child}
-	{@render child({ props: mergedProps, ...itemState.snippetProps })}
-{:else}
-	<div {...mergedProps}>
-		{@render children?.(itemState.snippetProps)}
-	</div>
-{/if}
diff --git a/packages/bits-ui/src/lib/bits/listbox/components/listbox-scroll-down-button.svelte b/packages/bits-ui/src/lib/bits/listbox/components/listbox-scroll-down-button.svelte
deleted file mode 100644
index e59329e83..000000000
--- a/packages/bits-ui/src/lib/bits/listbox/components/listbox-scroll-down-button.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
-	import type { ListboxScrollDownButtonProps } from "../types.js";
-	import { useListboxScrollDownButton } from "../listbox.svelte.js";
-	import { useId } from "$lib/internal/use-id.js";
-	import { Mounted } from "$lib/bits/utilities/index.js";
-
-	let {
-		id = useId(),
-		ref = $bindable(null),
-		child,
-		children,
-		...restProps
-	}: ListboxScrollDownButtonProps = $props();
-
-	let mounted = $state(false);
-
-	const scrollDownButtonState = useListboxScrollDownButton({
-		id: box.with(() => id),
-		mounted: box.with(() => mounted),
-		ref: box.with(
-			() => ref,
-			(v) => (ref = v)
-		),
-	});
-
-	const mergedProps = $derived(mergeProps(restProps, scrollDownButtonState.props));
-</script>
-
-{#if scrollDownButtonState.canScrollDown}
-	<Mounted onMountedChange={(m) => (mounted = m)} />
-	{#if child}
-		{@render child({ props: restProps })}
-	{:else}
-		<div {...mergedProps}>
-			{@render children?.()}
-		</div>
-	{/if}
-{/if}
diff --git a/packages/bits-ui/src/lib/bits/listbox/components/listbox-scroll-up-button.svelte b/packages/bits-ui/src/lib/bits/listbox/components/listbox-scroll-up-button.svelte
deleted file mode 100644
index db43e2bf4..000000000
--- a/packages/bits-ui/src/lib/bits/listbox/components/listbox-scroll-up-button.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
-	import type { ListboxScrollUpButtonProps } from "../types.js";
-	import { useListboxScrollUpButton } from "../listbox.svelte.js";
-	import { useId } from "$lib/internal/use-id.js";
-	import { Mounted } from "$lib/bits/utilities/index.js";
-
-	let {
-		id = useId(),
-		ref = $bindable(null),
-		child,
-		children,
-		...restProps
-	}: ListboxScrollUpButtonProps = $props();
-
-	let mounted = $state(false);
-
-	const scrollDownButtonState = useListboxScrollUpButton({
-		id: box.with(() => id),
-		mounted: box.with(() => mounted),
-		ref: box.with(
-			() => ref,
-			(v) => (ref = v)
-		),
-	});
-
-	const mergedProps = $derived(mergeProps(restProps, scrollDownButtonState.props));
-</script>
-
-{#if scrollDownButtonState.canScrollUp}
-	<Mounted onMountedChange={(m) => (mounted = m)} />
-	{#if child}
-		{@render child({ props: restProps })}
-	{:else}
-		<div {...mergedProps}>
-			{@render children?.()}
-		</div>
-	{/if}
-{/if}
diff --git a/packages/bits-ui/src/lib/bits/listbox/components/listbox-trigger.svelte b/packages/bits-ui/src/lib/bits/listbox/components/listbox-trigger.svelte
deleted file mode 100644
index 8c2c423ed..000000000
--- a/packages/bits-ui/src/lib/bits/listbox/components/listbox-trigger.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
-	import { useListboxTrigger } from "../listbox.svelte.js";
-	import type { ListboxTriggerProps } from "../types.js";
-	import { useId } from "$lib/internal/use-id.js";
-	import { FloatingLayer } from "$lib/bits/utilities/floating-layer/index.js";
-
-	let {
-		id = useId(),
-		ref = $bindable(null),
-		child,
-		children,
-		...restProps
-	}: ListboxTriggerProps = $props();
-
-	const triggerState = useListboxTrigger({
-		id: box.with(() => id),
-		ref: box.with(
-			() => ref,
-			(v) => (ref = v)
-		),
-	});
-
-	const mergedProps = $derived(mergeProps(restProps, triggerState.props));
-</script>
-
-<FloatingLayer.Anchor {id}>
-	{#if child}
-		{@render child({ props: mergedProps })}
-	{:else}
-		<button {...mergedProps}>
-			{@render children?.()}
-		</button>
-	{/if}
-</FloatingLayer.Anchor>
diff --git a/packages/bits-ui/src/lib/bits/listbox/components/listbox-viewport.svelte b/packages/bits-ui/src/lib/bits/listbox/components/listbox-viewport.svelte
deleted file mode 100644
index e15600251..000000000
--- a/packages/bits-ui/src/lib/bits/listbox/components/listbox-viewport.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
-	import type { ListboxViewportProps } from "../types.js";
-	import { useListboxViewport } from "../listbox.svelte.js";
-	import { useId } from "$lib/internal/use-id.js";
-
-	let {
-		id = useId(),
-		ref = $bindable(null),
-		children,
-		child,
-		...restProps
-	}: ListboxViewportProps = $props();
-
-	const viewportState = useListboxViewport({
-		id: box.with(() => id),
-		ref: box.with(
-			() => ref,
-			(v) => (ref = v)
-		),
-	});
-
-	const mergedProps = $derived(mergeProps(restProps, viewportState.props));
-</script>
-
-{#if child}
-	{@render child({ props: mergedProps })}
-{:else}
-	<div {...mergedProps}>
-		{@render children?.()}
-	</div>
-{/if}
-
-<style>
-	/* Hide scrollbars cross browser and enable momentum scroll for touch devices */
-	:global([data-listbox-viewport]) {
-		scrollbar-width: none !important;
-		-ms-overflow-style: none !important;
-		-webkit-overflow-scrolling: touch !important;
-	}
-
-	:global([data-combobox-viewport]) {
-		scrollbar-width: none !important;
-		-ms-overflow-style: none !important;
-		-webkit-overflow-scrolling: touch !important;
-	}
-
-	:global([data-combobox-viewport])::-webkit-scrollbar {
-		display: none !important;
-	}
-	:global([data-listbox-viewport])::-webkit-scrollbar {
-		display: none !important;
-	}
-</style>
diff --git a/packages/bits-ui/src/lib/bits/listbox/components/listbox.svelte b/packages/bits-ui/src/lib/bits/listbox/components/listbox.svelte
deleted file mode 100644
index e3ad0c7bc..000000000
--- a/packages/bits-ui/src/lib/bits/listbox/components/listbox.svelte
+++ /dev/null
@@ -1,81 +0,0 @@
-<script lang="ts">
-	import { type WritableBox, box } from "svelte-toolbelt";
-	import { useListboxRoot } from "../listbox.svelte.js";
-	import type { ListboxRootProps } from "../types.js";
-	import ListboxHiddenInput from "./listbox-hidden-input.svelte";
-	import { noop } from "$lib/internal/noop.js";
-	import FloatingLayer from "$lib/bits/utilities/floating-layer/components/floating-layer.svelte";
-
-	let {
-		value = $bindable(),
-		onValueChange = noop,
-		name = "",
-		disabled = false,
-		type,
-		open = $bindable(false),
-		onOpenChange = noop,
-		loop = false,
-		scrollAlignment = "nearest",
-		required = false,
-		controlledOpen = false,
-		controlledValue = false,
-		children,
-	}: ListboxRootProps = $props();
-
-	if (value === undefined) {
-		const defaultValue = type === "single" ? "" : [];
-		if (controlledValue) {
-			onValueChange(defaultValue as any);
-		} else {
-			value = defaultValue;
-		}
-	}
-
-	useListboxRoot({
-		type,
-		value: box.with(
-			() => value!,
-			(v) => {
-				if (controlledValue) {
-					onValueChange(v as any);
-				} else {
-					value = v;
-					onValueChange(v as any);
-				}
-			}
-		) as WritableBox<string> | WritableBox<string[]>,
-		disabled: box.with(() => disabled),
-		required: box.with(() => required),
-		open: box.with(
-			() => open,
-			(v) => {
-				if (controlledOpen) {
-					onOpenChange(v);
-				} else {
-					open = v;
-					onOpenChange(v);
-				}
-			}
-		),
-		loop: box.with(() => loop),
-		scrollAlignment: box.with(() => scrollAlignment),
-		name: box.with(() => name),
-		isCombobox: false,
-	});
-</script>
-
-<FloatingLayer>
-	{@render children?.()}
-</FloatingLayer>
-
-{#if Array.isArray(value)}
-	{#if value.length === 0}
-		<ListboxHiddenInput value="" />
-	{:else}
-		{#each value as item}
-			<ListboxHiddenInput value={item} />
-		{/each}
-	{/if}
-{:else}
-	<ListboxHiddenInput {value} />
-{/if}
diff --git a/packages/bits-ui/src/lib/bits/listbox/exports.ts b/packages/bits-ui/src/lib/bits/listbox/exports.ts
deleted file mode 100644
index abf2e0746..000000000
--- a/packages/bits-ui/src/lib/bits/listbox/exports.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export { default as Root } from "./components/listbox.svelte";
-export { default as Content } from "./components/listbox-content.svelte";
-export { default as ContentStatic } from "./components/listbox-content-static.svelte";
-export { default as Item } from "./components/listbox-item.svelte";
-export { default as Group } from "./components/listbox-group.svelte";
-export { default as GroupHeading } from "./components/listbox-group-heading.svelte";
-export { default as Trigger } from "./components/listbox-trigger.svelte";
-export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte";
-export { default as Viewport } from "./components/listbox-viewport.svelte";
-export { default as ScrollUpButton } from "./components/listbox-scroll-up-button.svelte";
-export { default as ScrollDownButton } from "./components/listbox-scroll-down-button.svelte";
-
-export type {
-	ListboxRootProps as RootProps,
-	ListboxContentProps as ContentProps,
-	ListboxContentStaticProps as ContentStaticProps,
-	ListboxItemProps as ItemProps,
-	ListboxGroupProps as GroupProps,
-	ListboxGroupHeadingProps as GroupHeadingProps,
-	ListboxTriggerProps as TriggerProps,
-	ListboxViewportProps as ViewportProps,
-	ListboxScrollUpButtonProps as ScrollUpButtonProps,
-	ListboxScrollDownButtonProps as ScrollDownButtonProps,
-	ListboxPortalProps as PortalProps,
-} from "./types.js";
diff --git a/packages/bits-ui/src/lib/bits/listbox/index.ts b/packages/bits-ui/src/lib/bits/listbox/index.ts
deleted file mode 100644
index d8ae5c2a4..000000000
--- a/packages/bits-ui/src/lib/bits/listbox/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * as Listbox from "./exports.js";
diff --git a/packages/bits-ui/src/lib/bits/listbox/listbox.svelte.ts b/packages/bits-ui/src/lib/bits/listbox/listbox.svelte.ts
deleted file mode 100644
index c1e34f397..000000000
--- a/packages/bits-ui/src/lib/bits/listbox/listbox.svelte.ts
+++ /dev/null
@@ -1,1203 +0,0 @@
-import { Previous } from "runed";
-import { untrack } from "svelte";
-import { afterTick, srOnlyStyles, styleToString, useRefById } from "svelte-toolbelt";
-import type { InteractOutsideEvent } from "../utilities/dismissible-layer/types.js";
-import { backward, forward, next, prev } from "$lib/internal/arrays.js";
-import {
-	getAriaExpanded,
-	getAriaHidden,
-	getDataDisabled,
-	getDataOpenClosed,
-	getDisabled,
-	getRequired,
-} from "$lib/internal/attrs.js";
-import type { Box, ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js";
-import { createContext } from "$lib/internal/create-context.js";
-import { kbd } from "$lib/internal/kbd.js";
-import type { WithRefProps } from "$lib/internal/types.js";
-import { noop } from "$lib/internal/noop.js";
-import { addEventListener } from "$lib/internal/events.js";
-import { type Typeahead, useTypeahead } from "$lib/internal/use-typeahead.svelte.js";
-
-// prettier-ignore
-export const INTERACTION_KEYS = [kbd.ARROW_LEFT, kbd.ESCAPE, kbd.ARROW_RIGHT, kbd.SHIFT, kbd.CAPS_LOCK, kbd.CONTROL, kbd.ALT, kbd.META, kbd.ENTER, kbd.F1, kbd.F2, kbd.F3, kbd.F4, kbd.F5, kbd.F6, kbd.F7, kbd.F8, kbd.F9, kbd.F10, kbd.F11, kbd.F12];
-
-export const FIRST_KEYS = [kbd.ARROW_DOWN, kbd.PAGE_UP, kbd.HOME];
-export const LAST_KEYS = [kbd.ARROW_UP, kbd.PAGE_DOWN, kbd.END];
-export const FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS];
-export const SELECTION_KEYS = [kbd.ENTER, kbd.SPACE];
-
-type ListboxBaseRootStateProps = ReadableBoxedValues<{
-	disabled: boolean;
-	required: boolean;
-	name: string;
-	loop: boolean;
-	scrollAlignment: "nearest" | "center";
-}> &
-	WritableBoxedValues<{
-		open: boolean;
-	}> & {
-		isCombobox: boolean;
-	};
-
-class ListboxBaseRootState {
-	disabled: ListboxBaseRootStateProps["disabled"];
-	required: ListboxBaseRootStateProps["required"];
-	name: ListboxBaseRootStateProps["name"];
-	loop: ListboxBaseRootStateProps["loop"];
-	open: ListboxBaseRootStateProps["open"];
-	scrollAlignment: ListboxBaseRootStateProps["scrollAlignment"];
-	touchedInput = $state(false);
-	inputValue = $state<string>("");
-	inputNode = $state<HTMLElement | null>(null);
-	contentNode = $state<HTMLElement | null>(null);
-	triggerNode = $state<HTMLElement | null>(null);
-	highlightedNode = $state<HTMLElement | null>(null);
-	highlightedValue = $derived.by(() => {
-		if (!this.highlightedNode) return null;
-		return this.highlightedNode.getAttribute("data-value");
-	});
-	highlightedId = $derived.by(() => {
-		if (!this.highlightedNode) return undefined;
-		return this.highlightedNode.id;
-	});
-	highlightedLabel = $derived.by(() => {
-		if (!this.highlightedNode) return null;
-		return this.highlightedNode.getAttribute("data-label");
-	});
-	isUsingKeyboard = $state(false);
-	isCombobox = $state(false);
-	bitsAttrs: ListboxBitsAttrs;
-
-	constructor(props: ListboxBaseRootStateProps) {
-		this.disabled = props.disabled;
-		this.required = props.required;
-		this.name = props.name;
-		this.loop = props.loop;
-		this.open = props.open;
-		this.scrollAlignment = props.scrollAlignment;
-		this.isCombobox = props.isCombobox;
-
-		this.bitsAttrs = getListboxBitsAttrs(this);
-
-		$effect.pre(() => {
-			if (!this.open.current) {
-				this.setHighlightedNode(null);
-			}
-		});
-	}
-
-	setHighlightedNode = (node: HTMLElement | null) => {
-		this.highlightedNode = node;
-		if (node) {
-			if (this.isUsingKeyboard) {
-				node.scrollIntoView({ block: "nearest" });
-			}
-		}
-	};
-
-	getCandidateNodes = (): HTMLElement[] => {
-		const node = this.contentNode;
-		if (!node) return [];
-		const nodes = Array.from(
-			node.querySelectorAll<HTMLElement>(`[${this.bitsAttrs.item}]:not([data-disabled])`)
-		);
-		return nodes;
-	};
-
-	setHighlightedToFirstCandidate = () => {
-		this.setHighlightedNode(null);
-		const candidateNodes = this.getCandidateNodes();
-		if (!candidateNodes.length) return;
-		this.setHighlightedNode(candidateNodes[0]!);
-	};
-
-	getNodeByValue = (value: string): HTMLElement | null => {
-		const candidateNodes = this.getCandidateNodes();
-		return candidateNodes.find((node) => node.dataset.value === value) ?? null;
-	};
-
-	setOpen = (open: boolean) => {
-		this.open.current = open;
-	};
-
-	toggleOpen = () => {
-		this.open.current = !this.open.current;
-	};
-
-	openMenu = () => {
-		this.setOpen(true);
-	};
-
-	closeMenu = () => {
-		this.setHighlightedNode(null);
-		this.setOpen(false);
-	};
-
-	toggleMenu = () => {
-		this.toggleOpen();
-	};
-}
-
-type ListboxSingleRootStateProps = ListboxBaseRootStateProps &
-	WritableBoxedValues<{
-		value: string;
-	}>;
-
-class ListboxSingleRootState extends ListboxBaseRootState {
-	value: ListboxSingleRootStateProps["value"];
-	isMulti = false as const;
-	hasValue = $derived.by(() => this.value.current !== "");
-
-	constructor(props: ListboxSingleRootStateProps) {
-		super(props);
-		this.value = props.value;
-
-		$effect(() => {
-			if (!this.open.current && this.highlightedNode) {
-				this.setHighlightedNode(null);
-			}
-		});
-
-		$effect(() => {
-			if (!this.open.current) return;
-			afterTick(() => {
-				this.#setInitialHighlightedNode();
-			});
-		});
-	}
-
-	includesItem = (itemValue: string) => {
-		return this.value.current === itemValue;
-	};
-
-	toggleItem = (itemValue: string, itemLabel: string = itemValue) => {
-		this.value.current = this.includesItem(itemValue) ? "" : itemValue;
-		this.inputValue = itemLabel;
-	};
-
-	#setInitialHighlightedNode = () => {
-		if (this.highlightedNode) return;
-		if (this.value.current !== "") {
-			const node = this.getNodeByValue(this.value.current);
-			if (node) {
-				this.setHighlightedNode(node);
-				return;
-			}
-		}
-		// if no value is set, we want to highlight the first item
-		const firstCandidate = this.getCandidateNodes()[0];
-		if (!firstCandidate) return;
-		this.setHighlightedNode(firstCandidate);
-	};
-}
-
-type ListboxMultipleRootStateProps = ListboxBaseRootStateProps &
-	WritableBoxedValues<{
-		value: string[];
-	}>;
-
-class ListboxMultipleRootState extends ListboxBaseRootState {
-	value: ListboxMultipleRootStateProps["value"];
-	isMulti = true as const;
-	hasValue = $derived.by(() => this.value.current.length > 0);
-
-	constructor(props: ListboxMultipleRootStateProps) {
-		super(props);
-		this.value = props.value;
-
-		$effect(() => {
-			if (!this.open.current) return;
-			afterTick(() => {
-				if (!this.highlightedNode) {
-					this.#setInitialHighlightedNode();
-				}
-			});
-		});
-	}
-
-	includesItem = (itemValue: string) => {
-		return this.value.current.includes(itemValue);
-	};
-
-	toggleItem = (itemValue: string, itemLabel: string = itemValue) => {
-		if (this.includesItem(itemValue)) {
-			this.value.current = this.value.current.filter((v) => v !== itemValue);
-		} else {
-			this.value.current = [...this.value.current, itemValue];
-		}
-		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);
-				return;
-			}
-		}
-		// if no value is set, we want to highlight the first item
-		const firstCandidate = this.getCandidateNodes()[0];
-		if (!firstCandidate) return;
-		this.setHighlightedNode(firstCandidate);
-	};
-}
-
-type ListboxRootState = ListboxSingleRootState | ListboxMultipleRootState;
-
-type ListboxInputStateProps = WithRefProps;
-
-class ListboxInputState {
-	#id: ListboxInputStateProps["id"];
-	#ref: ListboxInputStateProps["ref"];
-	root: ListboxRootState;
-
-	constructor(props: ListboxInputStateProps, root: ListboxRootState) {
-		this.root = root;
-		this.#id = props.id;
-		this.#ref = props.ref;
-
-		useRefById({
-			id: this.#id,
-			ref: this.#ref,
-			onRefChange: (node) => {
-				this.root.inputNode = node;
-			},
-		});
-	}
-
-	#onkeydown = async (e: KeyboardEvent) => {
-		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 (INTERACTION_KEYS.includes(e.key)) return;
-			if (e.key === kbd.TAB) return;
-			if (e.key === kbd.BACKSPACE && inputValue === "") return;
-			this.root.openMenu();
-			// 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);
-				}
-			});
-			return;
-		}
-
-		if (e.key === kbd.TAB) {
-			this.root.closeMenu();
-			return;
-		}
-
-		if (e.key === kbd.ENTER && !e.isComposing) {
-			e.preventDefault();
-			const highlightedValue = this.root.highlightedValue;
-			if (highlightedValue) {
-				this.root.toggleItem(highlightedValue, this.root.highlightedLabel ?? undefined);
-			}
-			if (!this.root.isMulti) {
-				this.root.closeMenu();
-			}
-		}
-
-		if (e.key === kbd.ARROW_UP && e.altKey) {
-			this.root.closeMenu();
-		}
-
-		if (FIRST_LAST_KEYS.includes(e.key)) {
-			e.preventDefault();
-			const candidateNodes = this.root.getCandidateNodes();
-			const currHighlightedNode = this.root.highlightedNode;
-			const currIndex = currHighlightedNode
-				? candidateNodes.indexOf(currHighlightedNode)
-				: -1;
-
-			const loop = this.root.loop.current;
-			let nextItem: HTMLElement | undefined;
-
-			if (e.key === kbd.ARROW_DOWN) {
-				nextItem = next(candidateNodes, currIndex, loop);
-			} else if (e.key === kbd.ARROW_UP) {
-				nextItem = prev(candidateNodes, currIndex, loop);
-			} else if (e.key === kbd.PAGE_DOWN) {
-				nextItem = forward(candidateNodes, currIndex, 10, loop);
-			} else if (e.key === kbd.PAGE_UP) {
-				nextItem = backward(candidateNodes, currIndex, 10, loop);
-			} else if (e.key === kbd.HOME) {
-				nextItem = candidateNodes[0];
-			} else if (e.key === kbd.END) {
-				nextItem = candidateNodes[candidateNodes.length - 1];
-			}
-			if (!nextItem) return;
-			this.root.setHighlightedNode(nextItem);
-			return;
-		}
-
-		if (INTERACTION_KEYS.includes(e.key)) return;
-		if (!this.root.highlightedNode) {
-			this.root.setHighlightedToFirstCandidate();
-		}
-		// this.root.setHighlightedToFirstCandidate();
-	};
-
-	#oninput = (e: Event & { currentTarget: HTMLInputElement }) => {
-		this.root.inputValue = e.currentTarget.value;
-		this.root.setHighlightedToFirstCandidate();
-	};
-
-	props = $derived.by(
-		() =>
-			({
-				id: this.#id.current,
-				role: "combobox",
-				disabled: this.root.disabled.current ? true : undefined,
-				"aria-activedescendant": this.root.highlightedId,
-				"aria-autocomplete": "list",
-				"aria-expanded": getAriaExpanded(this.root.open.current),
-				"data-state": getDataOpenClosed(this.root.open.current),
-				"data-disabled": getDataDisabled(this.root.disabled.current),
-				onkeydown: this.#onkeydown,
-				oninput: this.#oninput,
-				[this.root.bitsAttrs.input]: "",
-			}) as const
-	);
-}
-
-type ListboxComboTriggerStateProps = WithRefProps;
-
-class ListboxComboTriggerState {
-	#id: ListboxComboTriggerStateProps["id"];
-	#ref: ListboxComboTriggerStateProps["ref"];
-	root: ListboxBaseRootState;
-
-	constructor(props: ListboxComboTriggerStateProps, root: ListboxBaseRootState) {
-		this.root = root;
-		this.#id = props.id;
-		this.#ref = props.ref;
-
-		useRefById({
-			id: this.#id,
-			ref: this.#ref,
-		});
-	}
-
-	#onkeydown = (e: KeyboardEvent) => {
-		if (e.key === kbd.ENTER || e.key === kbd.SPACE) {
-			e.preventDefault();
-			if (document.activeElement !== this.root.inputNode) {
-				this.root.inputNode?.focus();
-			}
-			this.root.toggleMenu();
-		}
-	};
-
-	/**
-	 * `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: MouseEvent) => {
-		if (this.root.disabled.current) return;
-		e.preventDefault();
-		if (document.activeElement !== this.root.inputNode) {
-			this.root.inputNode?.focus();
-		}
-		this.root.toggleMenu();
-	};
-
-	props = $derived.by(
-		() =>
-			({
-				id: this.#id.current,
-				disabled: this.root.disabled.current ? true : undefined,
-				"aria-haspopup": "listbox",
-				"data-state": getDataOpenClosed(this.root.open.current),
-				"data-disabled": getDataDisabled(this.root.disabled.current),
-				[this.root.bitsAttrs.trigger]: "",
-				onpointerdown: this.#onpointerdown,
-				onkeydown: this.#onkeydown,
-			}) as const
-	);
-}
-
-type ListboxTriggerStateProps = WithRefProps;
-
-class ListboxTriggerState {
-	#id: ListboxTriggerStateProps["id"];
-	#ref: ListboxTriggerStateProps["ref"];
-	root: ListboxRootState;
-	#typeahead: Typeahead;
-
-	constructor(props: ListboxTriggerStateProps, root: ListboxRootState) {
-		this.root = root;
-		this.#id = props.id;
-		this.#ref = props.ref;
-
-		useRefById({
-			id: this.#id,
-			ref: this.#ref,
-			onRefChange: (node) => {
-				this.root.triggerNode = node;
-			},
-		});
-
-		this.#typeahead = useTypeahead({
-			getCurrentItem: () => this.root.highlightedNode,
-			onMatch: (node) => {
-				this.root.setHighlightedNode(node);
-			},
-		});
-	}
-
-	#onkeydown = (e: KeyboardEvent) => {
-		this.root.isUsingKeyboard = true;
-		if (e.key === kbd.ARROW_UP || e.key === kbd.ARROW_DOWN) e.preventDefault();
-
-		if (!this.root.open.current) {
-			if (e.key === kbd.ENTER) return;
-
-			if (e.key === kbd.SPACE || e.key === kbd.ARROW_DOWN || e.key === kbd.ARROW_UP) {
-				e.preventDefault();
-				this.root.openMenu();
-			}
-
-			// 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);
-				}
-			});
-			return;
-		}
-
-		if (e.key === kbd.TAB) {
-			this.root.closeMenu();
-			return;
-		}
-
-		if ((e.key === kbd.ENTER || e.key === kbd.SPACE) && !e.isComposing) {
-			e.preventDefault();
-			const highlightedValue = this.root.highlightedValue;
-			if (highlightedValue) {
-				this.root.toggleItem(highlightedValue, this.root.highlightedLabel ?? undefined);
-			}
-			if (!this.root.isMulti) {
-				this.root.closeMenu();
-			}
-		}
-
-		if (e.key === kbd.ARROW_UP && e.altKey) {
-			this.root.closeMenu();
-		}
-
-		if (FIRST_LAST_KEYS.includes(e.key)) {
-			e.preventDefault();
-			const candidateNodes = this.root.getCandidateNodes();
-			const currHighlightedNode = this.root.highlightedNode;
-			const currIndex = currHighlightedNode
-				? candidateNodes.indexOf(currHighlightedNode)
-				: -1;
-
-			const loop = this.root.loop.current;
-			let nextItem: HTMLElement | undefined;
-
-			if (e.key === kbd.ARROW_DOWN) {
-				nextItem = next(candidateNodes, currIndex, loop);
-			} else if (e.key === kbd.ARROW_UP) {
-				nextItem = prev(candidateNodes, currIndex, loop);
-			} else if (e.key === kbd.PAGE_DOWN) {
-				nextItem = forward(candidateNodes, currIndex, 10, loop);
-			} else if (e.key === kbd.PAGE_UP) {
-				nextItem = backward(candidateNodes, currIndex, 10, loop);
-			} else if (e.key === kbd.HOME) {
-				nextItem = candidateNodes[0];
-			} else if (e.key === kbd.END) {
-				nextItem = candidateNodes[candidateNodes.length - 1];
-			}
-			if (!nextItem) return;
-			this.root.setHighlightedNode(nextItem);
-			return;
-		}
-		const isModifierKey = e.ctrlKey || e.altKey || e.metaKey;
-		const isCharacterKey = e.key.length === 1;
-
-		// prevent space from being considered with typeahead
-		if (e.code === "Space") return;
-
-		const candidateNodes = this.root.getCandidateNodes();
-
-		if (e.key === kbd.TAB) return;
-
-		if (!isModifierKey && isCharacterKey) {
-			this.#typeahead.handleTypeaheadSearch(e.key, candidateNodes);
-			return;
-		}
-
-		if (!this.root.highlightedNode) {
-			this.root.setHighlightedToFirstCandidate();
-		}
-	};
-
-	/**
-	 * `pointerdown` fires before the `focus` event, so we can prevent the default
-	 * behavior of focusing the button and keep focus on the input.
-	 */
-	#onpointerdown = () => {
-		if (this.root.disabled.current) return;
-		this.root.toggleMenu();
-	};
-
-	props = $derived.by(
-		() =>
-			({
-				id: this.#id.current,
-				disabled: this.root.disabled.current ? true : undefined,
-				"aria-haspopup": "listbox",
-				"data-state": getDataOpenClosed(this.root.open.current),
-				"data-disabled": getDataDisabled(this.root.disabled.current),
-				[this.root.bitsAttrs.trigger]: "",
-				onpointerdown: this.#onpointerdown,
-				onkeydown: this.#onkeydown,
-				// onclick: this.#onclick,
-			}) as const
-	);
-}
-
-type ListboxContentStateProps = WithRefProps;
-
-class ListboxContentState {
-	#id: ListboxContentStateProps["id"];
-	#ref: ListboxContentStateProps["ref"];
-	viewportNode = $state<HTMLElement | null>(null);
-	root: ListboxBaseRootState;
-	isPositioned = $state(false);
-
-	constructor(props: ListboxContentStateProps, root: ListboxBaseRootState) {
-		this.root = root;
-		this.#id = props.id;
-		this.#ref = props.ref;
-
-		useRefById({
-			id: this.#id,
-			ref: this.#ref,
-			onRefChange: (node) => {
-				this.root.contentNode = node;
-			},
-			deps: () => this.root.open.current,
-		});
-
-		$effect(() => {
-			return () => {
-				this.root.contentNode = null;
-			};
-		});
-
-		$effect(() => {
-			if (this.root.open.current === false) {
-				this.isPositioned = false;
-			}
-		});
-	}
-
-	#onpointermove = () => {
-		this.root.isUsingKeyboard = false;
-	};
-
-	#styles = $derived.by(() => {
-		if (this.root.isCombobox) {
-			return {
-				"--bits-combobox-content-transform-origin": "var(--bits-floating-transform-origin)",
-				"--bits-combobox-content-available-width": "var(--bits-floating-available-width)",
-				"--bits-combobox-content-available-height": "var(--bits-floating-available-height)",
-				"--bits-combobox-anchor-width": "var(--bits-floating-anchor-width)",
-				"--bits-combobox-anchor-height": "var(--bits-floating-anchor-height)",
-			};
-		} else {
-			return {
-				"--bits-listbox-content-transform-origin": "var(--bits-floating-transform-origin)",
-				"--bits-listbox-content-available-width": "var(--bits-floating-available-width)",
-				"--bits-listbox-content-available-height": "var(--bits-floating-available-height)",
-				"--bits-listbox-anchor-width": "var(--bits-floating-anchor-width)",
-				"--bits-listbox-anchor-height": "var(--bits-floating-anchor-height)",
-			};
-		}
-	});
-
-	handleInteractOutside = (e: InteractOutsideEvent) => {
-		if (e.target === this.root.triggerNode || e.target === this.root.inputNode) {
-			e.preventDefault();
-		}
-	};
-
-	snippetProps = $derived.by(() => ({ open: this.root.open.current }));
-
-	props = $derived.by(
-		() =>
-			({
-				id: this.#id.current,
-				role: "listbox",
-				"data-state": getDataOpenClosed(this.root.open.current),
-				[this.root.bitsAttrs.content]: "",
-				style: {
-					display: "flex",
-					flexDirection: "column",
-					outline: "none",
-					boxSizing: "border-box",
-					...this.#styles,
-				},
-				onpointermove: this.#onpointermove,
-			}) as const
-	);
-}
-
-type ListboxItemStateProps = WithRefProps<
-	ReadableBoxedValues<{
-		value: string;
-		disabled: boolean;
-		label: string;
-		onHighlight: () => void;
-		onUnhighlight: () => void;
-	}>
->;
-
-class ListboxItemState {
-	#id: ListboxItemStateProps["id"];
-	#ref: ListboxItemStateProps["ref"];
-	root: ListboxRootState;
-	value: ListboxItemStateProps["value"];
-	label: ListboxItemStateProps["label"];
-	onHighlight: ListboxItemStateProps["onHighlight"];
-	onUnhighlight: ListboxItemStateProps["onUnhighlight"];
-	disabled: ListboxItemStateProps["disabled"];
-	isSelected = $derived.by(() => this.root.includesItem(this.value.current));
-	isHighlighted = $derived.by(() => this.root.highlightedValue === this.value.current);
-	prevHighlighted = new Previous(() => this.isHighlighted);
-
-	constructor(props: ListboxItemStateProps, root: ListboxRootState) {
-		this.root = root;
-		this.value = props.value;
-		this.disabled = props.disabled;
-		this.label = props.label;
-		this.onHighlight = props.onHighlight;
-		this.onUnhighlight = props.onUnhighlight;
-		this.#id = props.id;
-		this.#ref = props.ref;
-
-		$effect(() => {
-			if (this.isHighlighted) {
-				this.onHighlight.current();
-			} else if (this.prevHighlighted.current) {
-				this.onUnhighlight.current();
-			}
-		});
-
-		useRefById({
-			id: this.#id,
-			ref: this.#ref,
-		});
-	}
-
-	snippetProps = $derived.by(() => ({
-		selected: this.isSelected,
-		highlighted: this.isHighlighted,
-	}));
-
-	#onpointerdown = (e: PointerEvent) => {
-		// prevent focus from leaving the combobox
-		e.preventDefault();
-	};
-
-	/**
-	 * Using `pointerup` instead of `click` allows power users to pointerdown
-	 * the trigger, then release pointerup on an item to select it vs having to do
-	 * multiple clicks.
-	 */
-	#onpointerup = (e: PointerEvent) => {
-		// prevent any default behavior
-		e.preventDefault();
-		if (this.disabled.current) return;
-		const isCurrentSelectedValue = this.value.current === this.root.value.current;
-		this.root.toggleItem(this.value.current, this.label.current);
-
-		if (!this.root.isMulti && !isCurrentSelectedValue) {
-			this.root.closeMenu();
-		}
-	};
-
-	#onpointermove = (_: PointerEvent) => {
-		if (this.root.highlightedNode !== this.#ref.current) {
-			this.root.setHighlightedNode(this.#ref.current);
-		}
-	};
-
-	props = $derived.by(
-		() =>
-			({
-				id: this.#id.current,
-				"aria-selected": this.root.includesItem(this.value.current) ? "true" : undefined,
-				"data-value": this.value.current,
-				"data-disabled": getDataDisabled(this.disabled.current),
-				"data-highlighted":
-					this.root.highlightedValue === this.value.current ? "" : undefined,
-				"data-selected": this.root.includesItem(this.value.current) ? "" : undefined,
-				"data-label": this.label.current,
-				[this.root.bitsAttrs.item]: "",
-
-				onpointermove: this.#onpointermove,
-				onpointerdown: this.#onpointerdown,
-				onpointerup: this.#onpointerup,
-			}) as const
-	);
-}
-
-type ListboxGroupStateProps = WithRefProps;
-
-class ListboxGroupState {
-	#id: ListboxGroupStateProps["id"];
-	#ref: ListboxGroupStateProps["ref"];
-	root: ListboxBaseRootState;
-	labelNode = $state<HTMLElement | null>(null);
-
-	constructor(props: ListboxGroupStateProps, root: ListboxBaseRootState) {
-		this.#id = props.id;
-		this.#ref = props.ref;
-		this.root = root;
-
-		useRefById({
-			id: this.#id,
-			ref: this.#ref,
-		});
-	}
-
-	props = $derived.by(
-		() =>
-			({
-				id: this.#id.current,
-				role: "group",
-				[this.root.bitsAttrs.group]: "",
-				"aria-labelledby": this.labelNode?.id ?? undefined,
-			}) as const
-	);
-}
-
-type ListboxGroupHeadingStateProps = WithRefProps;
-
-class ListboxGroupHeadingState {
-	#id: ListboxGroupHeadingStateProps["id"];
-	#ref: ListboxGroupHeadingStateProps["ref"];
-	group: ListboxGroupState;
-
-	constructor(props: ListboxGroupHeadingStateProps, group: ListboxGroupState) {
-		this.#id = props.id;
-		this.#ref = props.ref;
-		this.group = group;
-
-		useRefById({
-			id: this.#id,
-			ref: this.#ref,
-			onRefChange: (node) => {
-				group.labelNode = node;
-			},
-		});
-	}
-
-	props = $derived.by(
-		() =>
-			({
-				id: this.#id.current,
-				[this.group.root.bitsAttrs["group-label"]]: "",
-			}) as const
-	);
-}
-
-type ListboxHiddenInputStateProps = ReadableBoxedValues<{
-	value: string;
-}>;
-
-class ListboxHiddenInputState {
-	#value: ListboxHiddenInputStateProps["value"];
-	root: ListboxBaseRootState;
-	shouldRender = $derived.by(() => this.root.name.current !== "");
-
-	constructor(props: ListboxHiddenInputStateProps, root: ListboxBaseRootState) {
-		this.root = root;
-		this.#value = props.value;
-	}
-
-	props = $derived.by(
-		() =>
-			({
-				disabled: getDisabled(this.root.disabled.current),
-				required: getRequired(this.root.required.current),
-				name: this.root.name.current,
-				value: this.#value.current,
-				"aria-hidden": getAriaHidden(true),
-				style: styleToString(srOnlyStyles),
-			}) as const
-	);
-}
-
-type ListboxViewportStateProps = WithRefProps;
-
-class ListboxViewportState {
-	#id: ListboxViewportStateProps["id"];
-	#ref: ListboxViewportStateProps["ref"];
-	root: ListboxBaseRootState;
-	content: ListboxContentState;
-
-	constructor(props: ListboxViewportStateProps, content: ListboxContentState) {
-		this.#id = props.id;
-		this.#ref = props.ref;
-		this.content = content;
-		this.root = content.root;
-
-		useRefById({
-			id: this.#id,
-			ref: this.#ref,
-			onRefChange: (node) => {
-				this.content.viewportNode = node;
-			},
-			deps: () => this.root.open.current,
-		});
-	}
-
-	props = $derived.by(
-		() =>
-			({
-				id: this.#id.current,
-				role: "presentation",
-				[this.root.bitsAttrs.viewport]: "",
-				style: {
-					// we use position: 'relative' here on the `viewport` so that when we call
-					// `selectedItem.offsetTop` in calculations, the offset is relative to the viewport
-					// (independent of the scrollUpButton).
-					position: "relative",
-					flex: 1,
-					overflow: "auto",
-				},
-			}) as const
-	);
-}
-
-type ListboxScrollButtonImplStateProps = WithRefProps<ReadableBoxedValues<{ mounted: boolean }>>;
-
-class ListboxScrollButtonImplState {
-	id: ListboxScrollButtonImplStateProps["id"];
-	ref: ListboxScrollButtonImplStateProps["ref"];
-	content: ListboxContentState;
-	root: ListboxBaseRootState;
-	autoScrollTimer = $state<number | null>(null);
-	onAutoScroll: () => void = noop;
-	mounted: ListboxScrollButtonImplStateProps["mounted"];
-
-	constructor(props: ListboxScrollButtonImplStateProps, content: ListboxContentState) {
-		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,
-		});
-
-		$effect(() => {
-			if (!this.mounted.current) return;
-			const activeItem = untrack(() => this.root.highlightedNode);
-			activeItem?.scrollIntoView({ block: "nearest" });
-		});
-	}
-
-	clearAutoScrollTimer = () => {
-		if (this.autoScrollTimer === null) return;
-		window.clearInterval(this.autoScrollTimer);
-		this.autoScrollTimer = null;
-	};
-
-	#onpointerdown = () => {
-		if (this.autoScrollTimer !== null) return;
-		this.autoScrollTimer = window.setInterval(() => {
-			this.onAutoScroll();
-		}, 50);
-	};
-
-	#onpointermove = () => {
-		if (this.autoScrollTimer !== null) return;
-		this.autoScrollTimer = window.setInterval(() => {
-			this.onAutoScroll();
-		}, 50);
-	};
-
-	#onpointerleave = () => {
-		this.clearAutoScrollTimer();
-	};
-
-	props = $derived.by(
-		() =>
-			({
-				id: this.id.current,
-				"aria-hidden": getAriaHidden(true),
-				style: {
-					flexShrink: 0,
-				},
-				onpointerdown: this.#onpointerdown,
-				onpointermove: this.#onpointermove,
-				onpointerleave: this.#onpointerleave,
-			}) as const
-	);
-}
-
-class ListboxScrollDownButtonState {
-	state: ListboxScrollButtonImplState;
-	content: ListboxContentState;
-	root: ListboxBaseRootState;
-	canScrollDown = $state(false);
-
-	constructor(state: ListboxScrollButtonImplState) {
-		this.state = state;
-		this.content = state.content;
-		this.root = state.root;
-		this.state.onAutoScroll = this.handleAutoScroll;
-
-		$effect(() => {
-			const viewport = this.content.viewportNode;
-			const isPositioned = this.content.isPositioned;
-			if (!viewport || !isPositioned) return;
-
-			let cleanup = noop;
-
-			untrack(() => {
-				const handleScroll = () => {
-					afterTick(() => {
-						const maxScroll = viewport.scrollHeight - viewport.clientHeight;
-						const paddingTop = Number.parseInt(
-							getComputedStyle(viewport).paddingTop,
-							10
-						);
-
-						this.canScrollDown = Math.ceil(viewport.scrollTop) < maxScroll - paddingTop;
-					});
-				};
-				handleScroll();
-
-				cleanup = addEventListener(viewport, "scroll", handleScroll);
-			});
-
-			return cleanup;
-		});
-
-		$effect(() => {
-			if (this.state.mounted.current) return;
-			this.state.clearAutoScrollTimer();
-		});
-	}
-
-	handleAutoScroll = () => {
-		afterTick(() => {
-			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"]]: "" }) as const
-	);
-}
-
-class ListboxScrollUpButtonState {
-	state: ListboxScrollButtonImplState;
-	content: ListboxContentState;
-	root: ListboxBaseRootState;
-	canScrollUp = $state(false);
-
-	constructor(state: ListboxScrollButtonImplState) {
-		this.state = state;
-		this.content = state.content;
-		this.root = state.root;
-		this.state.onAutoScroll = this.handleAutoScroll;
-
-		$effect(() => {
-			const viewport = this.content.viewportNode;
-			const isPositioned = this.content.isPositioned;
-			if (!viewport || !isPositioned) return;
-
-			let cleanup = noop;
-
-			untrack(() => {
-				const handleScroll = () => {
-					const paddingTop = Number.parseInt(getComputedStyle(viewport).paddingTop, 10);
-					this.canScrollUp = viewport.scrollTop - paddingTop > 0;
-				};
-				handleScroll();
-
-				cleanup = addEventListener(viewport, "scroll", handleScroll);
-			});
-
-			return cleanup;
-		});
-
-		$effect(() => {
-			if (this.state.mounted.current) return;
-			this.state.clearAutoScrollTimer();
-		});
-	}
-
-	handleAutoScroll = () => {
-		afterTick(() => {
-			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-up-button"]]: "" }) as const
-	);
-}
-
-type InitListboxProps = {
-	type: "single" | "multiple";
-	value: Box<string> | Box<string[]>;
-} & ReadableBoxedValues<{
-	disabled: boolean;
-	required: boolean;
-	loop: boolean;
-	scrollAlignment: "nearest" | "center";
-	name: string;
-}> &
-	WritableBoxedValues<{
-		open: boolean;
-	}> & {
-		isCombobox: boolean;
-	};
-
-const [setListboxRootContext, getListboxRootContext] = createContext<ListboxRootState>([
-	"Listbox.Root",
-	"Combobox.Root",
-]);
-
-const [setListboxGroupContext, getListboxGroupContext] = createContext<ListboxGroupState>([
-	"Listbox.Group",
-	"Combobox.Group",
-]);
-
-const [setListboxContentContext, getListboxContentContext] = createContext<ListboxContentState>([
-	"Listbox.Content",
-	"Combobox.Content",
-]);
-
-export function useListboxRoot(props: InitListboxProps) {
-	const { type, ...rest } = props;
-
-	const rootState =
-		type === "single"
-			? new ListboxSingleRootState(rest as ListboxSingleRootStateProps)
-			: new ListboxMultipleRootState(rest as ListboxMultipleRootStateProps);
-
-	return setListboxRootContext(rootState);
-}
-
-export function useListboxInput(props: ListboxInputStateProps) {
-	return new ListboxInputState(props, getListboxRootContext());
-}
-
-export function useListboxContent(props: ListboxContentStateProps) {
-	return setListboxContentContext(new ListboxContentState(props, getListboxRootContext()));
-}
-
-export function useListboxTrigger(props: ListboxTriggerStateProps) {
-	return new ListboxTriggerState(props, getListboxRootContext());
-}
-
-export function useListboxComboTrigger(props: ListboxComboTriggerStateProps) {
-	return new ListboxComboTriggerState(props, getListboxRootContext());
-}
-
-export function useListboxItem(props: ListboxItemStateProps) {
-	return new ListboxItemState(props, getListboxRootContext());
-}
-
-export function useListboxViewport(props: ListboxViewportStateProps) {
-	return new ListboxViewportState(props, getListboxContentContext());
-}
-
-export function useListboxScrollUpButton(props: ListboxScrollButtonImplStateProps) {
-	return new ListboxScrollUpButtonState(
-		new ListboxScrollButtonImplState(props, getListboxContentContext())
-	);
-}
-
-export function useListboxScrollDownButton(props: ListboxScrollButtonImplStateProps) {
-	return new ListboxScrollDownButtonState(
-		new ListboxScrollButtonImplState(props, getListboxContentContext())
-	);
-}
-
-export function useListboxGroup(props: ListboxGroupStateProps) {
-	return setListboxGroupContext(new ListboxGroupState(props, getListboxRootContext()));
-}
-
-export function useListboxGroupHeading(props: ListboxGroupHeadingStateProps) {
-	return new ListboxGroupHeadingState(props, getListboxGroupContext());
-}
-
-export function useListboxHiddenInput(props: ListboxHiddenInputStateProps) {
-	return new ListboxHiddenInputState(props, getListboxRootContext());
-}
-
-////////////////////////////////////
-// Helpers
-////////////////////////////////////
-
-const listboxParts = [
-	"trigger",
-	"content",
-	"item",
-	"viewport",
-	"scroll-up-button",
-	"scroll-down-button",
-	"group",
-	"group-label",
-	"separator",
-	"arrow",
-	"input",
-] as const;
-
-type ListboxBitsAttrs = Record<(typeof listboxParts)[number], string>;
-
-export function getListboxBitsAttrs(root: ListboxBaseRootState): ListboxBitsAttrs {
-	const isCombobox = root.isCombobox;
-	const attrObj = {} as ListboxBitsAttrs;
-	for (const part of listboxParts) {
-		attrObj[part] = isCombobox ? `data-combobox-${part}` : `data-listbox-${part}`;
-	}
-	return attrObj;
-}
diff --git a/packages/bits-ui/src/lib/bits/listbox/types.ts b/packages/bits-ui/src/lib/bits/listbox/types.ts
deleted file mode 100644
index ce0d22659..000000000
--- a/packages/bits-ui/src/lib/bits/listbox/types.ts
+++ /dev/null
@@ -1,269 +0,0 @@
-import type { Expand } from "svelte-toolbelt";
-import type { PortalProps } from "../utilities/portal/types.js";
-import type { PopperLayerProps, PopperLayerStaticProps } from "../utilities/popper-layer/types.js";
-import type { ArrowProps, ArrowPropsWithoutHTML } from "../utilities/arrow/types.js";
-import type {
-	BitsPrimitiveButtonAttributes,
-	BitsPrimitiveDivAttributes,
-} from "$lib/shared/attributes.js";
-import type {
-	OnChangeFn,
-	WithChild,
-	WithChildNoChildrenSnippetProps,
-	WithChildren,
-	Without,
-} from "$lib/internal/types.js";
-
-export type ListboxBaseRootPropsWithoutHTML = WithChildren<{
-	/**
-	 * Whether the combobox is disabled.
-	 *
-	 * @defaultValue `false`
-	 */
-	disabled?: boolean;
-
-	/**
-	 * Whether the combobox is required (for form submission).
-	 *
-	 * @defaultValue `false`
-	 */
-	required?: boolean;
-
-	/**
-	 * The name to apply to the hidden input element for form submission.
-	 * If not provided, a hidden input will not be rendered and the combobox will not be part of a form.
-	 */
-	name?: string;
-
-	/**
-	 * Whether the combobox popover is open.
-	 *
-	 * @defaultValue `false`
-	 * @bindable
-	 */
-	open?: boolean;
-
-	/**
-	 * A callback function called when the open state changes.
-	 */
-	onOpenChange?: OnChangeFn<boolean>;
-
-	/**
-	 * Whether or not the combobox menu should loop through the items when navigating with the keyboard.
-	 *
-	 * @defaultValue `false`
-	 */
-	loop?: boolean;
-
-	/**
-	 * How to scroll the combobox items into view when navigating with the keyboard.
-	 *
-	 * @defaultValue `"nearest"`
-	 */
-	scrollAlignment?: "nearest" | "center";
-
-	/**
-	 * Whether or not the open state is controlled or not. If `true`, the component will not update
-	 * the open state internally, instead it will call `onOpenChange` when it would have
-	 * otherwise, and it is up to you to update the `open` prop that is passed to the component.
-	 *
-	 * @defaultValue false
-	 */
-	controlledOpen?: boolean;
-
-	/**
-	 * Whether or not the value state is controlled or not. If `true`, the component will not update
-	 * the value state internally, instead it will call `onValueChange` when it would have
-	 * otherwise, and it is up to you to update the `value` prop that is passed to the component.
-	 *
-	 * @defaultValue false
-	 */
-	controlledValue?: boolean;
-}>;
-
-export type ListboxSingleRootPropsWithoutHTML = {
-	/**
-	 * The value of the selected combobox item.
-	 *
-	 * @bindable
-	 */
-	value?: string;
-
-	/**
-	 * A callback function called when the value changes.
-	 */
-	onValueChange?: OnChangeFn<string>;
-
-	/**
-	 * The type of combobox.
-	 *
-	 * @required
-	 */
-	type: "single";
-};
-
-export type ListboxMultipleRootPropsWithoutHTML = {
-	/**
-	 * The value of the selected combobox item.
-	 *
-	 * @bindable
-	 */
-	value?: string[];
-
-	/**
-	 * A callback function called when the value changes.
-	 */
-	onValueChange?: OnChangeFn<string[]>;
-
-	/**
-	 * The type of combobox.
-	 *
-	 * @required
-	 */
-	type: "multiple";
-};
-
-export type ListboxSingleRootProps = ListboxBaseRootPropsWithoutHTML &
-	ListboxSingleRootPropsWithoutHTML &
-	Without<
-		BitsPrimitiveDivAttributes,
-		ListboxSingleRootPropsWithoutHTML | ListboxBaseRootPropsWithoutHTML
-	>;
-
-export type ListboxMultipleRootProps = ListboxBaseRootPropsWithoutHTML &
-	ListboxMultipleRootPropsWithoutHTML &
-	Without<
-		BitsPrimitiveDivAttributes,
-		ListboxMultipleRootPropsWithoutHTML | ListboxBaseRootPropsWithoutHTML
-	>;
-
-export type ListboxRootPropsWithoutHTML = ListboxBaseRootPropsWithoutHTML &
-	(ListboxSingleRootPropsWithoutHTML | ListboxMultipleRootPropsWithoutHTML);
-
-export type ListboxRootProps = ListboxRootPropsWithoutHTML;
-
-export type _SharedListboxContentProps = {
-	/**
-	 * Whether or not to loop through the items when navigating with the keyboard.
-	 *
-	 * @defaultValue `false`
-	 */
-	loop?: boolean;
-};
-
-export type ListboxContentSnippetProps = {
-	/**
-	 * Whether the content is open or closed. Used alongside the `forceMount` prop to conditionally
-	 * render the content using Svelte transitions.
-	 */
-	open: boolean;
-};
-
-export type ListboxContentPropsWithoutHTML = Expand<
-	WithChildNoChildrenSnippetProps<
-		Omit<PopperLayerProps, "content" | "onOpenAutoFocus" | "trapFocus"> &
-			_SharedListboxContentProps,
-		ListboxContentSnippetProps
-	>
->;
-
-export type ListboxContentProps = ListboxContentPropsWithoutHTML &
-	Without<BitsPrimitiveDivAttributes, ListboxContentPropsWithoutHTML>;
-
-export type ListboxContentStaticPropsWithoutHTML = Expand<
-	WithChildNoChildrenSnippetProps<
-		Omit<PopperLayerStaticProps, "content" | "onOpenAutoFocus" | "trapFocus"> &
-			_SharedListboxContentProps,
-		ListboxContentSnippetProps
-	>
->;
-
-export type ListboxContentStaticProps = ListboxContentStaticPropsWithoutHTML &
-	Without<BitsPrimitiveDivAttributes, ListboxContentStaticPropsWithoutHTML>;
-
-export type ListboxTriggerPropsWithoutHTML = WithChild;
-
-export type ListboxTriggerProps = ListboxTriggerPropsWithoutHTML &
-	Without<BitsPrimitiveButtonAttributes, ListboxTriggerPropsWithoutHTML>;
-
-export type ListboxItemSnippetProps = { selected: boolean; highlighted: boolean };
-
-export type ListboxItemPropsWithoutHTML = WithChild<
-	{
-		/**
-		 * The value of the item.
-		 *
-		 * @required
-		 */
-		value: string;
-
-		/**
-		 * The label of the item. If provided, this is the item that users will search for.
-		 * If not provided, the value will be used as the label.
-		 */
-		label?: string;
-
-		/**
-		 * Whether the item is disabled.
-		 *
-		 * @defaultValeu `false`
-		 */
-		disabled?: boolean;
-
-		/**
-		 * A callback function called when the item is highlighted. This can be used as a
-		 * replacement for `onfocus` since we don't actually focus the item and instead
-		 * rely on the `aria-activedescendant` attribute to indicate the highlighted item.
-		 */
-		onHighlight?: () => void;
-
-		/**
-		 * A callback function called when the item is unhighlighted. This can be used as a
-		 * replacement for `onblur` since we don't actually focus the item and instead
-		 * rely on the `aria-activedescendant` attribute to indicate the highlighted item.
-		 */
-		onUnhighlight?: () => void;
-	},
-	ListboxItemSnippetProps
->;
-
-export type ListboxItemProps = ListboxItemPropsWithoutHTML &
-	Without<BitsPrimitiveDivAttributes, ListboxItemPropsWithoutHTML>;
-
-export type ListboxGroupPropsWithoutHTML = WithChild;
-
-export type ListboxGroupProps = ListboxGroupPropsWithoutHTML &
-	Without<BitsPrimitiveDivAttributes, ListboxGroupPropsWithoutHTML>;
-
-export type ListboxGroupHeadingPropsWithoutHTML = WithChild;
-
-export type ListboxGroupHeadingProps = ListboxGroupHeadingPropsWithoutHTML &
-	Without<BitsPrimitiveDivAttributes, ListboxGroupHeadingPropsWithoutHTML>;
-
-export type ListboxSeparatorPropsWithoutHTML = WithChild;
-
-export type ListboxSeparatorProps = ListboxSeparatorPropsWithoutHTML &
-	Without<BitsPrimitiveDivAttributes, ListboxSeparatorPropsWithoutHTML>;
-
-export type ListboxPortalPropsWithoutHTML = PortalProps;
-
-export type ListboxPortalProps = ListboxPortalPropsWithoutHTML;
-
-export type ListboxArrowPropsWithoutHTML = ArrowPropsWithoutHTML;
-
-export type ListboxArrowProps = ArrowProps;
-
-export type ListboxViewportPropsWithoutHTML = WithChild;
-
-export type ListboxViewportProps = ListboxViewportPropsWithoutHTML &
-	Without<BitsPrimitiveDivAttributes, ListboxViewportPropsWithoutHTML>;
-
-export type ListboxScrollUpButtonPropsWithoutHTML = WithChild;
-
-export type ListboxScrollUpButtonProps = ListboxScrollUpButtonPropsWithoutHTML &
-	Without<BitsPrimitiveDivAttributes, ListboxScrollUpButtonPropsWithoutHTML>;
-
-export type ListboxScrollDownButtonPropsWithoutHTML = WithChild;
-
-export type ListboxScrollDownButtonProps = ListboxScrollDownButtonPropsWithoutHTML &
-	Without<BitsPrimitiveDivAttributes, ListboxScrollDownButtonPropsWithoutHTML>;
diff --git a/packages/bits-ui/src/lib/bits/menu/menu.svelte.ts b/packages/bits-ui/src/lib/bits/menu/menu.svelte.ts
index ff26ed641..23b753d30 100644
--- a/packages/bits-ui/src/lib/bits/menu/menu.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/menu/menu.svelte.ts
@@ -23,7 +23,7 @@ import { focusFirst } from "$lib/internal/focus.js";
 import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js";
 import { addEventListener } from "$lib/internal/events.js";
 import type { AnyFn, WithRefProps } from "$lib/internal/types.js";
-import { useTypeahead } from "$lib/internal/use-typeahead.svelte.js";
+import { useDOMTypeahead } from "$lib/internal/use-dom-typeahead.svelte.js";
 import { isElement, isElementOrSVGElement, isHTMLElement } from "$lib/internal/is.js";
 import { useRovingFocus } from "$lib/internal/use-roving-focus.svelte.js";
 import { kbd } from "$lib/internal/kbd.js";
@@ -180,7 +180,7 @@ class MenuContentState {
 	#pointerGraceIntent = $state<GraceIntent | null>(null);
 	#pointerDir = $state<Side>("right");
 	#lastPointerX = $state(0);
-	#handleTypeaheadSearch: ReturnType<typeof useTypeahead>["handleTypeaheadSearch"];
+	#handleTypeaheadSearch: ReturnType<typeof useDOMTypeahead>["handleTypeaheadSearch"];
 	rovingFocusGroup: ReturnType<typeof useRovingFocus>;
 	isMounted: MenuContentStateProps["isMounted"];
 	isFocusWithin = new IsFocusWithin(() => this.parentMenu.contentNode ?? undefined);
@@ -208,7 +208,7 @@ class MenuContentState {
 			window.clearTimeout(this.#timer);
 		});
 
-		this.#handleTypeaheadSearch = useTypeahead().handleTypeaheadSearch;
+		this.#handleTypeaheadSearch = useDOMTypeahead().handleTypeaheadSearch;
 		this.rovingFocusGroup = useRovingFocus({
 			rootNodeId: this.parentMenu.contentId,
 			candidateAttr: this.parentMenu.root.getAttr("item"),
diff --git a/packages/bits-ui/src/lib/bits/menubar/menubar.svelte.ts b/packages/bits-ui/src/lib/bits/menubar/menubar.svelte.ts
index e37e8b503..5575b9d45 100644
--- a/packages/bits-ui/src/lib/bits/menubar/menubar.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/menubar/menubar.svelte.ts
@@ -10,7 +10,7 @@ import type { Direction } from "$lib/shared/index.js";
 import { createContext } from "$lib/internal/create-context.js";
 import { getAriaExpanded, getDataDisabled, getDataOpenClosed } from "$lib/internal/attrs.js";
 import { kbd } from "$lib/internal/kbd.js";
-import { wrapArray } from "$lib/internal/use-typeahead.svelte.js";
+import { wrapArray } from "$lib/internal/arrays.js";
 import { isBrowser } from "$lib/internal/is.js";
 import type { WithRefProps } from "$lib/internal/types.js";
 
diff --git a/packages/bits-ui/src/lib/bits/select/components/select-arrow.svelte b/packages/bits-ui/src/lib/bits/select/components/select-arrow.svelte
deleted file mode 100644
index 4283053e1..000000000
--- a/packages/bits-ui/src/lib/bits/select/components/select-arrow.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
-	import type { SelectArrowProps } from "../types.js";
-	import { useSelectArrow } from "../select.svelte.js";
-	import FloatingLayerArrow from "$lib/bits/utilities/floating-layer/components/floating-layer-arrow.svelte";
-	import { useId } from "$lib/internal/use-id.js";
-
-	let { id = useId(), ref = $bindable(null), ...restProps }: SelectArrowProps = $props();
-
-	const arrowState = useSelectArrow({
-		id: box.with(() => id),
-		ref: box.with(
-			() => ref,
-			(v) => (ref = v)
-		),
-	});
-
-	const mergedProps = $derived(mergeProps(restProps, arrowState.props));
-</script>
-
-<FloatingLayerArrow {...mergedProps} />
diff --git a/packages/bits-ui/src/lib/bits/select/components/select-content-floating.svelte b/packages/bits-ui/src/lib/bits/select/components/select-content-floating.svelte
deleted file mode 100644
index c876fdf65..000000000
--- a/packages/bits-ui/src/lib/bits/select/components/select-content-floating.svelte
+++ /dev/null
@@ -1,73 +0,0 @@
-<script lang="ts">
-	import { mergeProps } from "svelte-toolbelt";
-	import { CONTENT_MARGIN, useSelectFloatingPosition } from "../select.svelte.js";
-	import type { SelectContentProps } from "../types.js";
-	import type { WithoutChildrenOrChild } from "$lib/shared/index.js";
-	import type { WithChild } from "$lib/internal/types.js";
-	import FloatingLayerContent from "$lib/bits/utilities/floating-layer/components/floating-layer-content.svelte";
-	import type { FloatingLayerContentImplProps } from "$lib/bits/utilities/floating-layer/types.js";
-	import ScrollLock from "$lib/bits/utilities/scroll-lock/scroll-lock.svelte";
-
-	let {
-		children,
-		child,
-		align = "start",
-		collisionPadding = CONTENT_MARGIN,
-		side = "bottom",
-		sideOffset = 0,
-		alignOffset = 0,
-		arrowPadding,
-		avoidCollisions,
-		collisionBoundary,
-		sticky,
-		hideWhenDetached,
-		updatePositionStrategy,
-		strategy,
-		dir,
-		preventScroll,
-		wrapperId,
-		style,
-		onPlaced,
-		id,
-		...restProps
-	}: WithoutChildrenOrChild<FloatingLayerContentImplProps> &
-		WithChild<SelectContentProps> & { enabled: boolean } = $props();
-
-	const contentFloatingState = useSelectFloatingPosition();
-
-	const mergedProps = $derived(mergeProps(restProps, contentFloatingState.content.props));
-</script>
-
-<FloatingLayerContent
-	{id}
-	{side}
-	{sideOffset}
-	{arrowPadding}
-	{alignOffset}
-	{collisionPadding}
-	{align}
-	{collisionBoundary}
-	{avoidCollisions}
-	{sticky}
-	{hideWhenDetached}
-	{updatePositionStrategy}
-	{strategy}
-	{dir}
-	{wrapperId}
-	{onPlaced}
-	{style}
->
-	{#snippet content({ props })}
-		<ScrollLock {preventScroll} />
-		{@const finalProps = mergeProps(props, mergedProps, {
-			style: contentFloatingState.props.style,
-		})}
-		{#if child}
-			{@render child({ props: finalProps })}
-		{:else}
-			<div {...finalProps}>
-				{@render children?.()}
-			</div>
-		{/if}
-	{/snippet}
-</FloatingLayerContent>
diff --git a/packages/bits-ui/src/lib/bits/select/components/select-content-impl.svelte b/packages/bits-ui/src/lib/bits/select/components/select-content-impl.svelte
deleted file mode 100644
index 68d501ea7..000000000
--- a/packages/bits-ui/src/lib/bits/select/components/select-content-impl.svelte
+++ /dev/null
@@ -1,90 +0,0 @@
-<script lang="ts">
-	import { mergeProps } from "svelte-toolbelt";
-	import type { SelectContentImplProps } from "../types.js";
-	import { SelectContentState } from "../select.svelte.js";
-	import SelectContentFloating from "./select-content-floating.svelte";
-	import SelectContentItemAligned from "./select-content-item-aligned.svelte";
-	import FocusScope from "$lib/bits/utilities/focus-scope/focus-scope.svelte";
-	import { noop } from "$lib/internal/noop.js";
-	import { useId } from "$lib/internal/use-id.js";
-	import EscapeLayer from "$lib/bits/utilities/escape-layer/escape-layer.svelte";
-	import DismissibleLayer from "$lib/bits/utilities/dismissible-layer/dismissible-layer.svelte";
-	import TextSelectionLayer from "$lib/bits/utilities/text-selection-layer/text-selection-layer.svelte";
-
-	let {
-		ref: _ref = $bindable(null),
-		id = useId(),
-		onOpenAutoFocus = noop,
-		onCloseAutoFocus = noop,
-		present,
-		position = "floating",
-		context,
-		onEscapeKeydown = noop,
-		onInteractOutside = noop,
-		...restProps
-	}: SelectContentImplProps & { present: boolean; context: SelectContentState } = $props();
-
-	const contentState = context;
-
-	const { children: _c, child: _ch, ...restWithoutChildren } = restProps;
-</script>
-
-<FocusScope
-	{id}
-	trapFocus={present}
-	onOpenAutoFocus={(e) => {
-		onOpenAutoFocus(e);
-		e.preventDefault();
-	}}
-	onCloseAutoFocus={(e) => {
-		onCloseAutoFocus(e);
-	}}
->
-	{#snippet focusScope({ props: focusScopeProps })}
-		<EscapeLayer
-			{...restWithoutChildren}
-			enabled={present}
-			onEscapeKeydown={(e) => {
-				onEscapeKeydown(e);
-				if (e.defaultPrevented) return;
-				contentState.root.handleClose();
-			}}
-		>
-			<DismissibleLayer
-				{...restWithoutChildren}
-				{id}
-				enabled={present}
-				onInteractOutside={(e) => {
-					onInteractOutside(e);
-					if (e.defaultPrevented) return;
-					contentState.root.handleClose();
-				}}
-			>
-				{#snippet children({ props: dismissibleProps })}
-					<TextSelectionLayer {...restWithoutChildren} {id} enabled={present}>
-						{@const mergedProps = mergeProps(
-							restWithoutChildren,
-							dismissibleProps,
-							focusScopeProps,
-							contentState.props,
-							{ style: { pointerEvents: "auto" } }
-						) as any}
-						{#if position === "floating"}
-							<SelectContentFloating
-								{...restProps}
-								{...mergedProps}
-								onPlaced={() => (contentState.isPositioned.current = true)}
-							/>
-						{:else}
-							<SelectContentItemAligned
-								{...restProps}
-								{...mergedProps}
-								onPlaced={() => (contentState.isPositioned.current = true)}
-							/>
-						{/if}
-					</TextSelectionLayer>
-				{/snippet}
-			</DismissibleLayer>
-		</EscapeLayer>
-	{/snippet}
-</FocusScope>
diff --git a/packages/bits-ui/src/lib/bits/select/components/select-content-item-aligned.svelte b/packages/bits-ui/src/lib/bits/select/components/select-content-item-aligned.svelte
deleted file mode 100644
index 4059ba7bc..000000000
--- a/packages/bits-ui/src/lib/bits/select/components/select-content-item-aligned.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
-	import { useSelectItemAlignedPosition } from "../select.svelte.js";
-	import type { WithChild } from "$lib/internal/types.js";
-	import { useBodyScrollLock } from "$lib/internal/use-body-scroll-lock.svelte.js";
-	import type { BitsPrimitiveDivAttributes } from "$lib/shared/attributes.js";
-
-	let {
-		child,
-		children,
-		preventScroll = true,
-		onPlaced,
-		...restProps
-	}: WithChild<BitsPrimitiveDivAttributes> & {
-		preventScroll?: boolean;
-		onPlaced: () => void;
-	} = $props();
-
-	const contentItemAlignedState = useSelectItemAlignedPosition({
-		onPlaced: box.with(() => onPlaced),
-	});
-
-	const mergedProps = $derived(mergeProps(restProps, contentItemAlignedState.props));
-	const mergedWrapperProps = $derived(mergeProps(contentItemAlignedState.wrapperProps, {}));
-
-	useBodyScrollLock(preventScroll);
-</script>
-
-<div {...mergedWrapperProps}>
-	{#if child}
-		{@render child({ props: mergedProps })}
-	{:else}
-		<div {...mergedProps}>
-			{@render children?.()}
-		</div>
-	{/if}
-</div>
diff --git a/packages/bits-ui/src/lib/bits/listbox/components/listbox-content-static.svelte b/packages/bits-ui/src/lib/bits/select/components/select-content-static.svelte
similarity index 84%
rename from packages/bits-ui/src/lib/bits/listbox/components/listbox-content-static.svelte
rename to packages/bits-ui/src/lib/bits/select/components/select-content-static.svelte
index 83106906f..ea6601dbf 100644
--- a/packages/bits-ui/src/lib/bits/listbox/components/listbox-content-static.svelte
+++ b/packages/bits-ui/src/lib/bits/select/components/select-content-static.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import type { ListboxContentStaticProps } from "../types.js";
-	import { useListboxContent } from "../listbox.svelte.js";
+	import type { SelectContentStaticProps } from "../types.js";
+	import { useSelectContent } from "../select.svelte.js";
 	import PopperLayer from "$lib/bits/utilities/popper-layer/popper-layer.svelte";
 	import { useId } from "$lib/internal/use-id.js";
 	import { noop } from "$lib/internal/noop.js";
@@ -15,9 +15,9 @@
 		children,
 		child,
 		...restProps
-	}: ListboxContentStaticProps = $props();
+	}: SelectContentStaticProps = $props();
 
-	const contentState = useListboxContent({
+	const contentState = useSelectContent({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,
@@ -38,12 +38,12 @@
 		if (e.defaultPrevented) return;
 		onInteractOutside(e);
 		if (e.defaultPrevented) return;
-		contentState.root.closeMenu();
+		contentState.root.handleClose();
 	}}
 	onEscapeKeydown={(e) => {
 		onEscapeKeydown(e);
 		if (e.defaultPrevented) return;
-		contentState.root.closeMenu();
+		contentState.root.handleClose();
 	}}
 	onOpenAutoFocus={(e) => e.preventDefault()}
 	onCloseAutoFocus={(e) => e.preventDefault()}
diff --git a/packages/bits-ui/src/lib/bits/select/components/select-content.svelte b/packages/bits-ui/src/lib/bits/select/components/select-content.svelte
index af02772c3..17d7f96e1 100644
--- a/packages/bits-ui/src/lib/bits/select/components/select-content.svelte
+++ b/packages/bits-ui/src/lib/bits/select/components/select-content.svelte
@@ -1,55 +1,76 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SelectContentProps } from "../types.js";
-	import { useSelectContent, useSelectContentFrag } from "../select.svelte.js";
-	import SelectProvider from "./select-provider.svelte";
-	import SelectContentImpl from "./select-content-impl.svelte";
+	import { useSelectContent } from "../select.svelte.js";
+	import PopperLayer from "$lib/bits/utilities/popper-layer/popper-layer.svelte";
 	import { useId } from "$lib/internal/use-id.js";
-	import Portal from "$lib/bits/utilities/portal/portal.svelte";
-	import PresenceLayer from "$lib/bits/utilities/presence-layer/presence-layer.svelte";
+	import { noop } from "$lib/internal/noop.js";
 
 	let {
 		id = useId(),
 		ref = $bindable(null),
 		forceMount = false,
-		position = "floating",
+		side = "bottom",
+		onInteractOutside = noop,
+		onEscapeKeydown = noop,
+		children,
+		child,
 		...restProps
 	}: SelectContentProps = $props();
 
-	const contentState = useSelectContentFrag();
-
-	const contentContext = useSelectContent({
+	const contentState = useSelectContent({
 		id: box.with(() => id),
-		position: box.with(() => position),
 		ref: box.with(
 			() => ref,
 			(v) => (ref = v)
 		),
 	});
 
-	const isPresent = $derived(contentState.root.open.current || forceMount);
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 </script>
 
-{#if isPresent}
-	<PresenceLayer present={isPresent} {id}>
-		{#snippet presence({ present })}
-			{@const finalProps = restProps as any}
-			<SelectContentImpl
-				{present}
-				{...finalProps}
-				{ref}
-				{id}
-				{position}
-				context={contentContext}
-			/>
-		{/snippet}
-	</PresenceLayer>
-{:else if contentState.root.contentFragment}
-	<Portal to={contentState.root.contentFragment}>
-		<div>
-			<SelectProvider rootContext={contentState.root}>
-				{@render restProps.children?.()}
-			</SelectProvider>
-		</div>
-	</Portal>
-{/if}
+<PopperLayer
+	{...mergedProps}
+	{side}
+	present={contentState.root.open.current || forceMount}
+	{id}
+	onInteractOutside={(e) => {
+		contentState.handleInteractOutside(e);
+		if (e.defaultPrevented) return;
+		onInteractOutside(e);
+		if (e.defaultPrevented) return;
+		contentState.root.handleClose();
+	}}
+	onEscapeKeydown={(e) => {
+		onEscapeKeydown(e);
+		if (e.defaultPrevented) return;
+		contentState.root.handleClose();
+	}}
+	onOpenAutoFocus={(e) => e.preventDefault()}
+	onCloseAutoFocus={(e) => e.preventDefault()}
+	trapFocus={false}
+	loop={false}
+	preventScroll={false}
+	onPlaced={() => (contentState.isPositioned = true)}
+	{forceMount}
+>
+	{#snippet popper({ props })}
+		{@const finalProps = mergeProps(props, {
+			style: {
+				"--bits-select-content-transform-origin": "var(--bits-floating-transform-origin)",
+				"--bits-select-content-available-width": "var(--bits-floating-available-width)",
+				"--bits-select-content-available-height": "var(--bits-floating-available-height)",
+				"--bits-select-anchor-width": "var(--bits-floating-anchor-width)",
+				"--bits-select-anchor-height": "var(--bits-floating-anchor-height)",
+				...contentState.props.style,
+			},
+		})}
+		{#if child}
+			{@render child({ props: finalProps, ...contentState.snippetProps })}
+		{:else}
+			<div {...finalProps}>
+				{@render children?.()}
+			</div>
+		{/if}
+	{/snippet}
+</PopperLayer>
diff --git a/packages/bits-ui/src/lib/bits/select/components/select-group-heading.svelte b/packages/bits-ui/src/lib/bits/select/components/select-group-heading.svelte
index b91971fa4..3a0a569be 100644
--- a/packages/bits-ui/src/lib/bits/select/components/select-group-heading.svelte
+++ b/packages/bits-ui/src/lib/bits/select/components/select-group-heading.svelte
@@ -5,10 +5,10 @@
 	import { useId } from "$lib/internal/use-id.js";
 
 	let {
-		children,
-		child,
-		ref = $bindable(null),
 		id = useId(),
+		ref = $bindable(null),
+		child,
+		children,
 		...restProps
 	}: SelectGroupHeadingProps = $props();
 
diff --git a/packages/bits-ui/src/lib/bits/select/components/select-group.svelte b/packages/bits-ui/src/lib/bits/select/components/select-group.svelte
index 72a48ce69..8d422e2b1 100644
--- a/packages/bits-ui/src/lib/bits/select/components/select-group.svelte
+++ b/packages/bits-ui/src/lib/bits/select/components/select-group.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import type { SelectGroupProps } from "../types.js";
 	import { useSelectGroup } from "../select.svelte.js";
+	import type { SelectGroupProps } from "../types.js";
 	import { useId } from "$lib/internal/use-id.js";
 
 	let {
-		children,
-		child,
 		id = useId(),
 		ref = $bindable(null),
+		children,
+		child,
 		...restProps
 	}: SelectGroupProps = $props();
 
@@ -19,6 +19,7 @@
 			(v) => (ref = v)
 		),
 	});
+
 	const mergedProps = $derived(mergeProps(restProps, groupState.props));
 </script>
 
diff --git a/packages/bits-ui/src/lib/bits/listbox/components/listbox-hidden-input.svelte b/packages/bits-ui/src/lib/bits/select/components/select-hidden-input.svelte
similarity index 60%
rename from packages/bits-ui/src/lib/bits/listbox/components/listbox-hidden-input.svelte
rename to packages/bits-ui/src/lib/bits/select/components/select-hidden-input.svelte
index 6391f9c0c..b899386a5 100644
--- a/packages/bits-ui/src/lib/bits/listbox/components/listbox-hidden-input.svelte
+++ b/packages/bits-ui/src/lib/bits/select/components/select-hidden-input.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
-	import { useListboxHiddenInput } from "../listbox.svelte.js";
+	import { useSelectHiddenInput } from "../select.svelte.js";
 	import VisuallyHidden from "$lib/bits/utilities/visually-hidden/visually-hidden.svelte";
 
 	type Props = {
 		value?: string;
 	};
 
-	let { value = "" }: Props = $props();
+	let { value = $bindable("") }: Props = $props();
 
-	const hiddenInputState = useListboxHiddenInput({
+	const hiddenInputState = useSelectHiddenInput({
 		value: box.with(() => value),
 	});
 </script>
 
 <VisuallyHidden>
 	{#if hiddenInputState.shouldRender}
-		<input {...hiddenInputState.props} />
+		<input {...hiddenInputState.props} bind:value />
 	{/if}
 </VisuallyHidden>
diff --git a/packages/bits-ui/src/lib/bits/select/components/select-icon.svelte b/packages/bits-ui/src/lib/bits/select/components/select-icon.svelte
deleted file mode 100644
index d33a52086..000000000
--- a/packages/bits-ui/src/lib/bits/select/components/select-icon.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
-	import type { SelectIconProps } from "../types.js";
-	import { useSelectIcon } from "../select.svelte.js";
-	import { useId } from "$lib/internal/use-id.js";
-
-	let {
-		children,
-		child,
-		id = useId(),
-		ref = $bindable(null),
-		...restProps
-	}: SelectIconProps = $props();
-
-	const iconState = useSelectIcon({
-		id: box.with(() => id),
-		ref: box.with(
-			() => ref,
-			(v) => (ref = v)
-		),
-	});
-
-	const mergedProps = $derived(mergeProps(restProps, iconState.props));
-</script>
-
-{#if child}
-	{@render child({ props: mergedProps })}
-{:else}
-	<span {...mergedProps}>
-		{#if children}
-			{@render children()}
-		{:else}
-			▼
-		{/if}
-	</span>
-{/if}
diff --git a/packages/bits-ui/src/lib/bits/select/components/select-item-text.svelte b/packages/bits-ui/src/lib/bits/select/components/select-item-text.svelte
deleted file mode 100644
index 02d85e861..000000000
--- a/packages/bits-ui/src/lib/bits/select/components/select-item-text.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
-	import type { SelectItemTextProps } from "../types.js";
-	import { useSelectItemText } from "../select.svelte.js";
-	import { useId } from "$lib/internal/use-id.js";
-	import Portal from "$lib/bits/utilities/portal/portal.svelte";
-
-	let {
-		id = useId(),
-		ref = $bindable(null),
-		children,
-		child,
-		...restProps
-	}: SelectItemTextProps = $props();
-
-	const itemTextState = useSelectItemText({
-		id: box.with(() => id),
-		ref: box.with(
-			() => ref,
-			(v) => (ref = v)
-		),
-	});
-
-	const mergedProps = $derived(mergeProps(restProps, itemTextState.props));
-</script>
-
-{#if itemTextState.item.isSelected && itemTextState.item.root.valueId.current && !itemTextState.item.root.valueNodeHasChildren.current && itemTextState.item.root.valueNode}
-	<Portal to={`#${itemTextState.item.root.valueId.current}`}>
-		{@render children?.()}
-	</Portal>
-{/if}
-
-{#if child}
-	{@render child({ props: mergedProps })}
-{:else}
-	<span {...mergedProps}>
-		{@render children?.()}
-	</span>
-{/if}
diff --git a/packages/bits-ui/src/lib/bits/select/components/select-item.svelte b/packages/bits-ui/src/lib/bits/select/components/select-item.svelte
index 7cc0f292f..b6a38b44e 100644
--- a/packages/bits-ui/src/lib/bits/select/components/select-item.svelte
+++ b/packages/bits-ui/src/lib/bits/select/components/select-item.svelte
@@ -1,38 +1,43 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import type { SelectItemProps } from "../types.js";
 	import { useSelectItem } from "../select.svelte.js";
+	import type { SelectItemProps } from "../types.js";
 	import { useId } from "$lib/internal/use-id.js";
+	import { noop } from "$lib/internal/noop.js";
 
 	let {
 		id = useId(),
-		value,
-		textValue = "",
 		ref = $bindable(null),
+		value,
+		label = value,
+		disabled = false,
 		children,
 		child,
-		disabled = false,
+		onHighlight = noop,
+		onUnhighlight = noop,
 		...restProps
 	}: SelectItemProps = $props();
 
 	const itemState = useSelectItem({
 		id: box.with(() => id),
-		disabled: box.with(() => disabled),
-		value: box.with(() => value),
-		textValue: box.with(() => textValue),
 		ref: box.with(
 			() => ref,
 			(v) => (ref = v)
 		),
+		value: box.with(() => value),
+		disabled: box.with(() => disabled),
+		label: box.with(() => label),
+		onHighlight: box.with(() => onHighlight),
+		onUnhighlight: box.with(() => onUnhighlight),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, itemState.props));
 </script>
 
 {#if child}
-	{@render child({ props: mergedProps, selected: itemState.isSelected })}
+	{@render child({ props: mergedProps, ...itemState.snippetProps })}
 {:else}
 	<div {...mergedProps}>
-		{@render children?.({ selected: itemState.isSelected })}
+		{@render children?.(itemState.snippetProps)}
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/select/components/select-native.svelte b/packages/bits-ui/src/lib/bits/select/components/select-native.svelte
deleted file mode 100644
index 25cbf089e..000000000
--- a/packages/bits-ui/src/lib/bits/select/components/select-native.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-	import type { HTMLSelectAttributes } from "svelte/elements";
-	import { mergeProps } from "svelte-toolbelt";
-	import { VisuallyHidden } from "$lib/bits/utilities/visually-hidden/index.js";
-
-	type Props = {
-		autofocus?: boolean;
-		disabled?: boolean;
-		form?: string;
-		multiple?: boolean;
-		name?: string;
-		required?: boolean;
-		size?: number;
-		value?: any;
-		children?: Snippet;
-	} & HTMLSelectAttributes;
-
-	let { value = $bindable(""), children, ...restProps }: Props = $props();
-
-	/**
-	 * A native `select` supports autofill, validation, and other browser features.
-	 *
-	 * We use `VisuallyHidden` rather than `display: "none"` because Safari won't autofill
-	 * if the input isn't visible.
-	 */
-</script>
-
-<VisuallyHidden>
-	{#snippet child({ props })}
-		{@const mergedProps = mergeProps(props, restProps, { "aria-hidden": "true" })}
-		<select bind:value {...mergedProps} data-value={value}>
-			{@render children?.()}
-		</select>
-	{/snippet}
-</VisuallyHidden>
diff --git a/packages/bits-ui/src/lib/bits/select/components/select-provider.svelte b/packages/bits-ui/src/lib/bits/select/components/select-provider.svelte
deleted file mode 100644
index 73d74aec9..000000000
--- a/packages/bits-ui/src/lib/bits/select/components/select-provider.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-	import { type Snippet } from "svelte";
-	import { type SelectRootState, setSelectRootContext } from "../select.svelte.js";
-
-	let { rootContext, children }: { rootContext: SelectRootState; children: Snippet } = $props();
-
-	setSelectRootContext(rootContext);
-</script>
-
-{@render children?.()}
diff --git a/packages/bits-ui/src/lib/bits/select/components/select-scroll-down-button-mounted.svelte b/packages/bits-ui/src/lib/bits/select/components/select-scroll-down-button-mounted.svelte
deleted file mode 100644
index a9940ef33..000000000
--- a/packages/bits-ui/src/lib/bits/select/components/select-scroll-down-button-mounted.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script lang="ts">
-	import { untrack } from "svelte";
-	import type { WritableBox } from "svelte-toolbelt";
-	import type { SelectScrollDownButtonProps } from "../types.js";
-
-	let {
-		children,
-		child,
-		mounted,
-		...restProps
-	}: SelectScrollDownButtonProps & {
-		mounted: WritableBox<boolean>;
-		style: string;
-	} = $props();
-
-	$effect(() => {
-		untrack(() => {
-			mounted.current = true;
-		});
-
-		return () => {
-			mounted.current = false;
-		};
-	});
-</script>
-
-{#if child}
-	{@render child({ props: restProps })}
-{:else}
-	<div {...restProps}>
-		{@render children?.()}
-	</div>
-{/if}
diff --git a/packages/bits-ui/src/lib/bits/select/components/select-scroll-down-button.svelte b/packages/bits-ui/src/lib/bits/select/components/select-scroll-down-button.svelte
index a900e1717..78bbe6369 100644
--- a/packages/bits-ui/src/lib/bits/select/components/select-scroll-down-button.svelte
+++ b/packages/bits-ui/src/lib/bits/select/components/select-scroll-down-button.svelte
@@ -1,28 +1,39 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import type { SelectScrollUpButtonProps } from "../types.js";
+	import type { SelectScrollDownButtonProps } from "../types.js";
 	import { useSelectScrollDownButton } from "../select.svelte.js";
-	import SelectScrollDownButtonMounted from "./select-scroll-down-button-mounted.svelte";
 	import { useId } from "$lib/internal/use-id.js";
+	import { Mounted } from "$lib/bits/utilities/index.js";
 
-	let { id = useId(), ref = $bindable(null), ...restProps }: SelectScrollUpButtonProps = $props();
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		child,
+		children,
+		...restProps
+	}: SelectScrollDownButtonProps = $props();
 
-	const mounted = box(false);
+	let mounted = $state(false);
 
 	const scrollDownButtonState = useSelectScrollDownButton({
 		id: box.with(() => id),
-		mounted: box.from(mounted),
+		mounted: box.with(() => mounted),
 		ref: box.with(
 			() => ref,
 			(v) => (ref = v)
 		),
 	});
 
-	const { child: _child, children: _children, ...restWithoutChildren } = restProps;
-	const mergedProps = $derived(mergeProps(restWithoutChildren, scrollDownButtonState.props));
-	const { style: _style, ...restWithoutStyle } = restProps;
+	const mergedProps = $derived(mergeProps(restProps, scrollDownButtonState.props));
 </script>
 
 {#if scrollDownButtonState.canScrollDown}
-	<SelectScrollDownButtonMounted {mounted} {...restWithoutStyle} {...mergedProps} />
+	<Mounted onMountedChange={(m) => (mounted = m)} />
+	{#if child}
+		{@render child({ props: restProps })}
+	{:else}
+		<div {...mergedProps}>
+			{@render children?.()}
+		</div>
+	{/if}
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/select/components/select-scroll-up-button-mounted.svelte b/packages/bits-ui/src/lib/bits/select/components/select-scroll-up-button-mounted.svelte
deleted file mode 100644
index 4ab80e133..000000000
--- a/packages/bits-ui/src/lib/bits/select/components/select-scroll-up-button-mounted.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script lang="ts">
-	import { untrack } from "svelte";
-	import type { WritableBox } from "svelte-toolbelt";
-	import type { SelectScrollUpButtonProps } from "../types.js";
-
-	let {
-		children,
-		child,
-		mounted,
-		...restProps
-	}: SelectScrollUpButtonProps & {
-		mounted: WritableBox<boolean>;
-		style: string;
-	} = $props();
-
-	$effect(() => {
-		untrack(() => {
-			mounted.current = true;
-		});
-
-		return () => {
-			mounted.current = false;
-		};
-	});
-</script>
-
-{#if child}
-	{@render child({ props: restProps })}
-{:else}
-	<div {...restProps}>
-		{@render children?.()}
-	</div>
-{/if}
diff --git a/packages/bits-ui/src/lib/bits/select/components/select-scroll-up-button.svelte b/packages/bits-ui/src/lib/bits/select/components/select-scroll-up-button.svelte
index 928198d46..5b0e2d6a6 100644
--- a/packages/bits-ui/src/lib/bits/select/components/select-scroll-up-button.svelte
+++ b/packages/bits-ui/src/lib/bits/select/components/select-scroll-up-button.svelte
@@ -2,27 +2,38 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { SelectScrollUpButtonProps } from "../types.js";
 	import { useSelectScrollUpButton } from "../select.svelte.js";
-	import SelectScrollUpButtonMounted from "./select-scroll-up-button-mounted.svelte";
 	import { useId } from "$lib/internal/use-id.js";
+	import { Mounted } from "$lib/bits/utilities/index.js";
 
-	let { id = useId(), ref = $bindable(null), ...restProps }: SelectScrollUpButtonProps = $props();
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		child,
+		children,
+		...restProps
+	}: SelectScrollUpButtonProps = $props();
 
-	const mounted = box(false);
+	let mounted = $state(false);
 
-	const scrollUpButtonState = useSelectScrollUpButton({
+	const scrollDownButtonState = useSelectScrollUpButton({
 		id: box.with(() => id),
-		mounted: box.from(mounted),
+		mounted: box.with(() => mounted),
 		ref: box.with(
 			() => ref,
 			(v) => (ref = v)
 		),
 	});
 
-	const { child: _child, children: _children, ...restWithoutChildren } = restProps;
-	const mergedProps = $derived(mergeProps(restWithoutChildren, scrollUpButtonState.props));
-	const { style: _style, ...restWithoutStyle } = restProps;
+	const mergedProps = $derived(mergeProps(restProps, scrollDownButtonState.props));
 </script>
 
-{#if scrollUpButtonState.canScrollUp}
-	<SelectScrollUpButtonMounted {...restWithoutStyle} {...mergedProps} {mounted} />
+{#if scrollDownButtonState.canScrollUp}
+	<Mounted onMountedChange={(m) => (mounted = m)} />
+	{#if child}
+		{@render child({ props: restProps })}
+	{:else}
+		<div {...mergedProps}>
+			{@render children?.()}
+		</div>
+	{/if}
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/select/components/select-separator.svelte b/packages/bits-ui/src/lib/bits/select/components/select-separator.svelte
deleted file mode 100644
index 3b1fa4ba7..000000000
--- a/packages/bits-ui/src/lib/bits/select/components/select-separator.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script lang="ts">
-	import { box, mergeProps } from "svelte-toolbelt";
-	import type { SelectSeparatorProps } from "../types.js";
-	import { useSelectSeparator } from "../select.svelte.js";
-	import { useId } from "$lib/internal/use-id.js";
-
-	let {
-		child,
-		children,
-		id = useId(),
-		ref = $bindable(null),
-		...restProps
-	}: SelectSeparatorProps = $props();
-
-	const separatorState = useSelectSeparator({
-		id: box.with(() => id),
-		ref: box.with(
-			() => ref,
-			(v) => (ref = v)
-		),
-	});
-
-	const mergedProps = $derived(mergeProps(restProps, separatorState.props));
-</script>
-
-{#if child}
-	{@render child({ props: mergedProps })}
-{:else}
-	<div {...mergedProps}>
-		{@render children?.()}
-	</div>
-{/if}
diff --git a/packages/bits-ui/src/lib/bits/select/components/select-trigger.svelte b/packages/bits-ui/src/lib/bits/select/components/select-trigger.svelte
index 3e389523a..77888259e 100644
--- a/packages/bits-ui/src/lib/bits/select/components/select-trigger.svelte
+++ b/packages/bits-ui/src/lib/bits/select/components/select-trigger.svelte
@@ -1,22 +1,20 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import type { SelectTriggerProps } from "../types.js";
 	import { useSelectTrigger } from "../select.svelte.js";
+	import type { SelectTriggerProps } from "../types.js";
 	import { useId } from "$lib/internal/use-id.js";
-	import FloatingLayerAnchor from "$lib/bits/utilities/floating-layer/components/floating-layer-anchor.svelte";
+	import { FloatingLayer } from "$lib/bits/utilities/floating-layer/index.js";
 
 	let {
 		id = useId(),
-		disabled = false,
 		ref = $bindable(null),
-		children,
 		child,
+		children,
 		...restProps
 	}: SelectTriggerProps = $props();
 
 	const triggerState = useSelectTrigger({
 		id: box.with(() => id),
-		disabled: box.with(() => disabled ?? false),
 		ref: box.with(
 			() => ref,
 			(v) => (ref = v)
@@ -26,7 +24,7 @@
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props));
 </script>
 
-<FloatingLayerAnchor {id}>
+<FloatingLayer.Anchor {id}>
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}
@@ -34,4 +32,4 @@
 			{@render children?.()}
 		</button>
 	{/if}
-</FloatingLayerAnchor>
+</FloatingLayer.Anchor>
diff --git a/packages/bits-ui/src/lib/bits/select/components/select-value.svelte b/packages/bits-ui/src/lib/bits/select/components/select-value.svelte
deleted file mode 100644
index 01b52694c..000000000
--- a/packages/bits-ui/src/lib/bits/select/components/select-value.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-	import { mergeProps } from "svelte-toolbelt";
-	import type { SelectValueProps } from "../types.js";
-	import { useSelectValue } from "../select.svelte.js";
-
-	let {
-		placeholder = "",
-		children,
-		child,
-		ref = $bindable(),
-		...restProps
-	}: SelectValueProps = $props();
-
-	const valueState = useSelectValue();
-
-	if (children) {
-		valueState.root.valueNodeHasChildren.current = true;
-	}
-
-	const mergedProps = $derived(
-		mergeProps(restProps, valueState.props, { style: { pointerEvents: "none" } })
-	);
-</script>
-
-{#if child}
-	{@render child({ props: mergedProps })}
-{:else}
-	<span {...mergedProps}>
-		{#if valueState.showPlaceholder}
-			{placeholder}
-		{:else}
-			{@render children?.()}
-		{/if}
-	</span>
-{/if}
diff --git a/packages/bits-ui/src/lib/bits/select/components/select-viewport.svelte b/packages/bits-ui/src/lib/bits/select/components/select-viewport.svelte
index b2a997445..c8dce801f 100644
--- a/packages/bits-ui/src/lib/bits/select/components/select-viewport.svelte
+++ b/packages/bits-ui/src/lib/bits/select/components/select-viewport.svelte
@@ -38,6 +38,16 @@
 		-ms-overflow-style: none !important;
 		-webkit-overflow-scrolling: touch !important;
 	}
+
+	:global([data-combobox-viewport]) {
+		scrollbar-width: none !important;
+		-ms-overflow-style: none !important;
+		-webkit-overflow-scrolling: touch !important;
+	}
+
+	:global([data-combobox-viewport])::-webkit-scrollbar {
+		display: none !important;
+	}
 	:global([data-select-viewport])::-webkit-scrollbar {
 		display: none !important;
 	}
diff --git a/packages/bits-ui/src/lib/bits/select/components/select.svelte b/packages/bits-ui/src/lib/bits/select/components/select.svelte
index 908d61bb1..ba2e5a4d9 100644
--- a/packages/bits-ui/src/lib/bits/select/components/select.svelte
+++ b/packages/bits-ui/src/lib/bits/select/components/select.svelte
@@ -1,28 +1,52 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { SelectRootProps } from "../types.js";
+	import { type WritableBox, box } from "svelte-toolbelt";
 	import { useSelectRoot } from "../select.svelte.js";
-	import SelectNative from "./select-native.svelte";
-	import FloatingLayer from "$lib/bits/utilities/floating-layer/components/floating-layer.svelte";
+	import type { SelectRootProps } from "../types.js";
+	import SelectHiddenInput from "./select-hidden-input.svelte";
 	import { noop } from "$lib/internal/noop.js";
+	import FloatingLayer from "$lib/bits/utilities/floating-layer/components/floating-layer.svelte";
 
 	let {
+		value = $bindable(),
+		onValueChange = noop,
+		name = "",
+		disabled = false,
+		type,
 		open = $bindable(false),
-		value = $bindable(""),
-		children,
 		onOpenChange = noop,
-		onValueChange = noop,
-		name = undefined,
+		loop = false,
+		scrollAlignment = "nearest",
 		required = false,
-		disabled = false,
-		autocomplete = undefined,
-		dir = "ltr",
 		controlledOpen = false,
 		controlledValue = false,
-		form,
+		items = [],
+		children,
 	}: SelectRootProps = $props();
 
+	if (value === undefined) {
+		const defaultValue = type === "single" ? "" : [];
+		if (controlledValue) {
+			onValueChange(defaultValue as any);
+		} else {
+			value = defaultValue;
+		}
+	}
+
 	const rootState = useSelectRoot({
+		type,
+		value: box.with(
+			() => value!,
+			(v) => {
+				if (controlledValue) {
+					onValueChange(v as any);
+				} else {
+					value = v;
+					onValueChange(v as any);
+				}
+			}
+		) as WritableBox<string> | WritableBox<string[]>,
+		disabled: box.with(() => disabled),
+		required: box.with(() => required),
 		open: box.with(
 			() => open,
 			(v) => {
@@ -30,56 +54,30 @@
 					onOpenChange(v);
 				} else {
 					open = v;
-					onOpenChange?.(v);
-				}
-			}
-		),
-		value: box.with(
-			() => value,
-			(v) => {
-				if (controlledValue) {
-					onValueChange(v);
-				} else {
-					value = v;
-					onValueChange?.(v);
+					onOpenChange(v);
 				}
 			}
 		),
-		required: box.with(() => required),
-		disabled: box.with(() => disabled),
-		dir: box.with(() => dir),
+		loop: box.with(() => loop),
+		scrollAlignment: box.with(() => scrollAlignment),
+		name: box.with(() => name),
+		isCombobox: false,
+		items: box.with(() => items),
 	});
 </script>
 
 <FloatingLayer>
 	{@render children?.()}
-	{#if rootState.isFormControl.current}
-		{#key rootState.nativeSelectKey}
-			<SelectNative
-				bind:value
-				aria-hidden="true"
-				tabindex={-1}
-				{required}
-				{name}
-				{autocomplete}
-				{disabled}
-				{form}
-				onchange={(e) => (value = e.currentTarget.value)}
-			>
-				{#if value === ""}
-					<option value=""></option>
-				{/if}
-				{#each rootState.nativeOptionsArr as opt, idx (opt.current.key + idx)}
-					<option
-						value={opt.current.value}
-						disabled={opt.current.disabled}
-						selected={opt.current.value === rootState.value.current}
-					>
-						<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-						{@html opt.current.innerHTML}
-					</option>
-				{/each}
-			</SelectNative>
-		{/key}
-	{/if}
 </FloatingLayer>
+
+{#if Array.isArray(rootState.value.current)}
+	{#if rootState.value.current.length === 0}
+		<SelectHiddenInput value="" />
+	{:else}
+		{#each rootState.value.current as item}
+			<SelectHiddenInput value={item} />
+		{/each}
+	{/if}
+{:else}
+	<SelectHiddenInput bind:value={rootState.value.current as string} />
+{/if}
diff --git a/packages/bits-ui/src/lib/bits/select/exports.ts b/packages/bits-ui/src/lib/bits/select/exports.ts
index 91123efbb..67b18df33 100644
--- a/packages/bits-ui/src/lib/bits/select/exports.ts
+++ b/packages/bits-ui/src/lib/bits/select/exports.ts
@@ -1,33 +1,25 @@
 export { default as Root } from "./components/select.svelte";
-export { default as Arrow } from "./components/select-arrow.svelte";
 export { default as Content } from "./components/select-content.svelte";
+export { default as ContentStatic } from "./components/select-content-static.svelte";
+export { default as Item } from "./components/select-item.svelte";
 export { default as Group } from "./components/select-group.svelte";
 export { default as GroupHeading } from "./components/select-group-heading.svelte";
-export { default as Item } from "./components/select-item.svelte";
-export { default as ItemText } from "./components/select-item-text.svelte";
-export { default as Separator } from "./components/select-separator.svelte";
 export { default as Trigger } from "./components/select-trigger.svelte";
-export { default as Value } from "./components/select-value.svelte";
+export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte";
 export { default as Viewport } from "./components/select-viewport.svelte";
 export { default as ScrollUpButton } from "./components/select-scroll-up-button.svelte";
 export { default as ScrollDownButton } from "./components/select-scroll-down-button.svelte";
-export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte";
 
 export type {
 	SelectRootProps as RootProps,
 	SelectContentProps as ContentProps,
+	SelectContentStaticProps as ContentStaticProps,
 	SelectItemProps as ItemProps,
+	SelectGroupProps as GroupProps,
+	SelectGroupHeadingProps as GroupHeadingProps,
 	SelectTriggerProps as TriggerProps,
-	SelectValueProps as ValueProps,
-	SelectItemTextProps as ItemTextProps,
-	SelectContentImplProps as ContentImplProps,
 	SelectViewportProps as ViewportProps,
-	SelectPortalProps as PortalProps,
-	SelectScrollUpButtonProps as ScrollDownButtonProps,
 	SelectScrollUpButtonProps as ScrollUpButtonProps,
-	SelectIconProps as IconProps,
-	SelectGroupProps as GroupProps,
-	SelectGroupHeadingProps as GroupHeadingProps,
-	SelectSeparatorProps as SeparatorProps,
-	SelectArrowProps as ArrowProps,
+	SelectScrollDownButtonProps as ScrollDownButtonProps,
+	SelectPortalProps as PortalProps,
 } from "./types.js";
diff --git a/packages/bits-ui/src/lib/bits/select/select.svelte.ts b/packages/bits-ui/src/lib/bits/select/select.svelte.ts
index ca42430ab..626109769 100644
--- a/packages/bits-ui/src/lib/bits/select/select.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/select/select.svelte.ts
@@ -1,209 +1,617 @@
-/**
- * This logic is adapted from Radix UI Select component.
- * https://github.com/radix-ui/primitives/blob/main/packages/react/select/src/Select.tsx
- * Credit to the Radix UI team for the original implementation.
- */
-import {
-	type ReadableBox,
-	type WritableBox,
-	afterSleep,
-	afterTick,
-	box,
-	useRefById,
-} from "svelte-toolbelt";
-import { SvelteMap } from "svelte/reactivity";
+import { Previous } from "runed";
 import { untrack } from "svelte";
-import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js";
-import { useId } from "$lib/internal/use-id.js";
-import type { Direction } from "$lib/shared/index.js";
-import { createContext } from "$lib/internal/create-context.js";
-import { useFormControl } from "$lib/internal/use-form-control.svelte.js";
-import { type Typeahead, useTypeahead } from "$lib/internal/use-typeahead.svelte.js";
+import { afterTick, srOnlyStyles, styleToString, useRefById } from "svelte-toolbelt";
+import type { InteractOutsideEvent } from "../utilities/dismissible-layer/types.js";
+import { backward, forward, next, prev } from "$lib/internal/arrays.js";
 import {
-	getAriaDisabled,
 	getAriaExpanded,
 	getAriaHidden,
-	getAriaRequired,
-	getAriaSelected,
-	getDataChecked,
 	getDataDisabled,
 	getDataOpenClosed,
+	getDisabled,
+	getRequired,
 } from "$lib/internal/attrs.js";
+import type { Box, ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js";
+import { createContext } from "$lib/internal/create-context.js";
 import { kbd } from "$lib/internal/kbd.js";
-import { clamp } from "$lib/internal/clamp.js";
+import type { WithRefProps } from "$lib/internal/types.js";
 import { noop } from "$lib/internal/noop.js";
 import { addEventListener } from "$lib/internal/events.js";
-import type { WithRefProps } from "$lib/internal/types.js";
+import { type DOMTypeahead, useDOMTypeahead } from "$lib/internal/use-dom-typeahead.svelte.js";
+import { type DataTypeahead, useDataTypeahead } from "$lib/internal/use-data-typeahead.svelte.js";
+
+// prettier-ignore
+export const INTERACTION_KEYS = [kbd.ARROW_LEFT, kbd.ESCAPE, kbd.ARROW_RIGHT, kbd.SHIFT, kbd.CAPS_LOCK, kbd.CONTROL, kbd.ALT, kbd.META, kbd.ENTER, kbd.F1, kbd.F2, kbd.F3, kbd.F4, kbd.F5, kbd.F6, kbd.F7, kbd.F8, kbd.F9, kbd.F10, kbd.F11, kbd.F12];
+
+export const FIRST_KEYS = [kbd.ARROW_DOWN, kbd.PAGE_UP, kbd.HOME];
+export const LAST_KEYS = [kbd.ARROW_UP, kbd.PAGE_DOWN, kbd.END];
+export const FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS];
+export const SELECTION_KEYS = [kbd.ENTER, kbd.SPACE];
 
-export const OPEN_KEYS = [kbd.SPACE, kbd.ENTER, kbd.ARROW_UP, kbd.ARROW_DOWN];
-export const SELECTION_KEYS = [" ", kbd.ENTER];
 export const CONTENT_MARGIN = 10;
 
-const TRIGGER_ATTR = "data-select-trigger";
-const CONTENT_ATTR = "data-select-content";
-const ITEM_ATTR = "data-select-item";
-const VIEWPORT_ATTR = "data-select-viewport";
-const VALUE_ATTR = "data-select-value";
-const ITEM_TEXT_ATTR = "data-select-item-text";
-const CONTENT_WRAPPER_ATTR = "data-select-content-wrapper";
-const SCROLL_UP_BUTTON_ATTR = "data-select-scroll-up-button";
-const SCROLL_DOWN_BUTTON_ATTR = "data-select-scroll-down-button";
-const GROUP_ATTR = "data-select-group";
-const GROUP_LABEL_ATTR = "data-select-group-label";
-const SEPARATOR_ATTR = "data-select-separator";
-const ARROW_ATTR = "data-select-arrow";
-const ICON_ATTR = "data-select-icon";
+type SelectBaseRootStateProps = ReadableBoxedValues<{
+	disabled: boolean;
+	required: boolean;
+	name: string;
+	loop: boolean;
+	scrollAlignment: "nearest" | "center";
+	items: { value: string; label: string; disabled?: boolean }[];
+}> &
+	WritableBoxedValues<{
+		open: boolean;
+	}> & {
+		isCombobox: boolean;
+	};
+
+class SelectBaseRootState {
+	disabled: SelectBaseRootStateProps["disabled"];
+	required: SelectBaseRootStateProps["required"];
+	name: SelectBaseRootStateProps["name"];
+	loop: SelectBaseRootStateProps["loop"];
+	open: SelectBaseRootStateProps["open"];
+	scrollAlignment: SelectBaseRootStateProps["scrollAlignment"];
+	items: SelectBaseRootStateProps["items"];
+	touchedInput = $state(false);
+	inputValue = $state<string>("");
+	inputNode = $state<HTMLElement | null>(null);
+	contentNode = $state<HTMLElement | null>(null);
+	triggerNode = $state<HTMLElement | null>(null);
+	valueId = $state("");
+	highlightedNode = $state<HTMLElement | null>(null);
+	highlightedValue = $derived.by(() => {
+		if (!this.highlightedNode) return null;
+		return this.highlightedNode.getAttribute("data-value");
+	});
+	highlightedId = $derived.by(() => {
+		if (!this.highlightedNode) return undefined;
+		return this.highlightedNode.id;
+	});
+	highlightedLabel = $derived.by(() => {
+		if (!this.highlightedNode) return null;
+		return this.highlightedNode.getAttribute("data-label");
+	});
+	isUsingKeyboard = $state(false);
+	isCombobox = $state(false);
+	bitsAttrs: SelectBitsAttrs;
+	triggerPointerDownPos = $state.raw<{ x: number; y: number } | null>({ x: 0, y: 0 });
+
+	constructor(props: SelectBaseRootStateProps) {
+		this.disabled = props.disabled;
+		this.required = props.required;
+		this.name = props.name;
+		this.loop = props.loop;
+		this.open = props.open;
+		this.scrollAlignment = props.scrollAlignment;
+		this.isCombobox = props.isCombobox;
+		this.items = props.items;
+
+		this.bitsAttrs = getSelectBitsAttrs(this);
+
+		$effect.pre(() => {
+			if (!this.open.current) {
+				this.setHighlightedNode(null);
+			}
+		});
+	}
+
+	setHighlightedNode = (node: HTMLElement | null) => {
+		this.highlightedNode = node;
+		if (node) {
+			if (this.isUsingKeyboard) {
+				node.scrollIntoView({ block: "nearest" });
+			}
+		}
+	};
+
+	getCandidateNodes = (): HTMLElement[] => {
+		const node = this.contentNode;
+		if (!node) return [];
+		const nodes = Array.from(
+			node.querySelectorAll<HTMLElement>(`[${this.bitsAttrs.item}]:not([data-disabled])`)
+		);
+		return nodes;
+	};
 
-export const [setSelectRootContext, getSelectRootContext] =
-	createContext<SelectRootState>("Select.Root");
+	setHighlightedToFirstCandidate = () => {
+		this.setHighlightedNode(null);
+		const candidateNodes = this.getCandidateNodes();
+		if (!candidateNodes.length) return;
+		this.setHighlightedNode(candidateNodes[0]!);
+	};
 
-export const [setSelectTriggerContext] = createContext<SelectTriggerState>("Select.Trigger");
+	getNodeByValue = (value: string): HTMLElement | null => {
+		const candidateNodes = this.getCandidateNodes();
+		return candidateNodes.find((node) => node.dataset.value === value) ?? null;
+	};
 
-export const [setSelectContentContext, getSelectContentContext] =
-	createContext<SelectContentState>("Select.Content");
+	setOpen = (open: boolean) => {
+		this.open.current = open;
+	};
 
-export const [setSelectItemContext, getSelectItemContext] =
-	createContext<SelectItemState>("Select.Item");
+	toggleOpen = () => {
+		this.open.current = !this.open.current;
+	};
 
-export const [setSelectContentItemAlignedContext, getSelectContentItemAlignedContext] =
-	createContext<SelectItemAlignedPositionState>("Select.ContentItemAligned");
+	handleOpen = () => {
+		this.setOpen(true);
+	};
 
-const [setSelectGroupContext, getSelectGroupContext] =
-	createContext<SelectGroupState>("Select.Group");
+	handleClose = () => {
+		this.setHighlightedNode(null);
+		this.setOpen(false);
+	};
 
-type SelectRootStateProps = WritableBoxedValues<{
-	open: boolean;
-	value: string;
-}> &
-	ReadableBoxedValues<{
-		dir: Direction;
-		disabled: boolean;
-		required: boolean;
+	toggleMenu = () => {
+		this.toggleOpen();
+	};
+}
+
+type SelectSingleRootStateProps = SelectBaseRootStateProps &
+	WritableBoxedValues<{
+		value: string;
 	}>;
 
-type SelectNativeOption = {
-	value: string;
-	key: string;
-	disabled: boolean;
-	innerHTML?: string | null;
-};
-
-export class SelectRootState {
-	open: SelectRootStateProps["open"];
-	value: SelectRootStateProps["value"];
-	dir: SelectRootStateProps["dir"];
-	disabled: SelectRootStateProps["disabled"];
-	required: SelectRootStateProps["required"];
-	triggerNode = $state<HTMLElement | null>(null);
-	valueId = box<string>(useId());
-	valueNodeHasChildren = box(false);
-	valueNode = $state<HTMLElement | null>(null);
-	contentNode = $state<HTMLElement | null>(null);
-	contentId = $state<string | undefined>(undefined);
-	triggerPointerDownPos = box<{ x: number; y: number } | null>({ x: 0, y: 0 });
-	contentFragment = $state<DocumentFragment | null>(null);
-
-	// A set of all the native options we'll use to render the native select element under the hood
-	#nativeOptionsSet = new SvelteMap<string, ReadableBox<SelectNativeOption>>();
-	// A key we'll use to rerender the native select when the options change to keep it in sync
-	nativeSelectKey = $derived.by(() => {
-		return Array.from(this.#nativeOptionsSet.values())
-			.map((opt) => opt.current.value)
-			.join(";");
+class SelectSingleRootState extends SelectBaseRootState {
+	value: SelectSingleRootStateProps["value"];
+	isMulti = false as const;
+	hasValue = $derived.by(() => this.value.current !== "");
+	currentLabel = $derived.by(() => {
+		if (!this.items.current.length) return "";
+		const match = this.items.current.find((item) => item.value === this.value.current)?.label;
+		return match ?? "";
+	});
+	candidateLabels: string[] = $derived.by(() => {
+		if (!this.items.current.length) return [];
+		const filteredItems = this.items.current.filter((item) => !item.disabled);
+		return filteredItems.map((item) => item.label);
+	});
+	dataTypeaheadEnabled = $derived.by(() => {
+		if (this.isMulti) return false;
+		if (this.items.current.length === 0) return false;
+		return true;
 	});
 
-	nativeOptionsArr = $derived.by(() => Array.from(this.#nativeOptionsSet.values()));
-	isFormControl = useFormControl(() => this.triggerNode);
-
-	constructor(props: SelectRootStateProps) {
-		this.open = props.open;
+	constructor(props: SelectSingleRootStateProps) {
+		super(props);
 		this.value = props.value;
-		this.dir = props.dir;
-		this.disabled = props.disabled;
-		this.required = props.required;
+
+		$effect(() => {
+			if (!this.open.current && this.highlightedNode) {
+				this.setHighlightedNode(null);
+			}
+		});
+
+		$effect(() => {
+			if (!this.open.current) return;
+			afterTick(() => {
+				this.#setInitialHighlightedNode();
+			});
+		});
 	}
 
-	handleClose = () => {
-		this.open.current = false;
-		this.focusTriggerNode();
+	includesItem = (itemValue: string) => {
+		return this.value.current === itemValue;
+	};
+
+	toggleItem = (itemValue: string, itemLabel: string = itemValue) => {
+		this.value.current = this.includesItem(itemValue) ? "" : itemValue;
+		this.inputValue = itemLabel;
 	};
 
-	focusTriggerNode = (preventScroll: boolean = true) => {
-		const node = this.triggerNode;
-		if (!node) return;
-		// this needs to be 10 otherwise Firefox doesn't focus the correct node
-		afterSleep(10, () => {
-			node.focus({ preventScroll });
+	#setInitialHighlightedNode = () => {
+		if (this.highlightedNode) return;
+		if (this.value.current !== "") {
+			const node = this.getNodeByValue(this.value.current);
+			if (node) {
+				this.setHighlightedNode(node);
+				return;
+			}
+		}
+		// if no value is set, we want to highlight the first item
+		const firstCandidate = this.getCandidateNodes()[0];
+		if (!firstCandidate) return;
+		this.setHighlightedNode(firstCandidate);
+	};
+}
+
+type SelectMultipleRootStateProps = SelectBaseRootStateProps &
+	WritableBoxedValues<{
+		value: string[];
+	}>;
+
+class SelectMultipleRootState extends SelectBaseRootState {
+	value: SelectMultipleRootStateProps["value"];
+	isMulti = true as const;
+	hasValue = $derived.by(() => this.value.current.length > 0);
+
+	constructor(props: SelectMultipleRootStateProps) {
+		super(props);
+		this.value = props.value;
+
+		$effect(() => {
+			if (!this.open.current) return;
+			afterTick(() => {
+				if (!this.highlightedNode) {
+					this.#setInitialHighlightedNode();
+				}
+			});
 		});
+	}
+
+	includesItem = (itemValue: string) => {
+		return this.value.current.includes(itemValue);
 	};
 
-	onNativeOptionAdd = (option: ReadableBox<SelectNativeOption>) => {
-		this.#nativeOptionsSet.set(option.current.value, option);
+	toggleItem = (itemValue: string, itemLabel: string = itemValue) => {
+		if (this.includesItem(itemValue)) {
+			this.value.current = this.value.current.filter((v) => v !== itemValue);
+		} else {
+			this.value.current = [...this.value.current, itemValue];
+		}
+		this.inputValue = itemLabel;
 	};
 
-	onNativeOptionRemove = (option: ReadableBox<SelectNativeOption>) => {
-		this.#nativeOptionsSet.delete(option.current.value);
+	#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);
+				return;
+			}
+		}
+		// if no value is set, we want to highlight the first item
+		const firstCandidate = this.getCandidateNodes()[0];
+		if (!firstCandidate) return;
+		this.setHighlightedNode(firstCandidate);
 	};
+}
 
-	getTriggerTypeaheadCandidateNodes = () => {
-		const node = this.contentFragment;
-		if (!node) return [];
-		return Array.from(
-			node.querySelectorAll<HTMLElement>(`[${ITEM_ATTR}]:not([data-disabled])`)
-		);
+type SelectRootState = SelectSingleRootState | SelectMultipleRootState;
+
+type SelectInputStateProps = WithRefProps;
+
+class SelectInputState {
+	#id: SelectInputStateProps["id"];
+	#ref: SelectInputStateProps["ref"];
+	root: SelectRootState;
+
+	constructor(props: SelectInputStateProps, root: SelectRootState) {
+		this.root = root;
+		this.#id = props.id;
+		this.#ref = props.ref;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+			onRefChange: (node) => {
+				this.root.inputNode = node;
+			},
+		});
+	}
+
+	#onkeydown = async (e: KeyboardEvent) => {
+		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 (INTERACTION_KEYS.includes(e.key)) return;
+			if (e.key === kbd.TAB) return;
+			if (e.key === kbd.BACKSPACE && 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);
+				}
+			});
+			return;
+		}
+
+		if (e.key === kbd.TAB) {
+			this.root.handleClose();
+			return;
+		}
+
+		if (e.key === kbd.ENTER && !e.isComposing) {
+			e.preventDefault();
+			const highlightedValue = this.root.highlightedValue;
+			if (highlightedValue) {
+				this.root.toggleItem(highlightedValue, this.root.highlightedLabel ?? undefined);
+			}
+			if (!this.root.isMulti) {
+				this.root.handleClose();
+			}
+		}
+
+		if (e.key === kbd.ARROW_UP && e.altKey) {
+			this.root.handleClose();
+		}
+
+		if (FIRST_LAST_KEYS.includes(e.key)) {
+			e.preventDefault();
+			const candidateNodes = this.root.getCandidateNodes();
+			const currHighlightedNode = this.root.highlightedNode;
+			const currIndex = currHighlightedNode
+				? candidateNodes.indexOf(currHighlightedNode)
+				: -1;
+
+			const loop = this.root.loop.current;
+			let nextItem: HTMLElement | undefined;
+
+			if (e.key === kbd.ARROW_DOWN) {
+				nextItem = next(candidateNodes, currIndex, loop);
+			} else if (e.key === kbd.ARROW_UP) {
+				nextItem = prev(candidateNodes, currIndex, loop);
+			} else if (e.key === kbd.PAGE_DOWN) {
+				nextItem = forward(candidateNodes, currIndex, 10, loop);
+			} else if (e.key === kbd.PAGE_UP) {
+				nextItem = backward(candidateNodes, currIndex, 10, loop);
+			} else if (e.key === kbd.HOME) {
+				nextItem = candidateNodes[0];
+			} else if (e.key === kbd.END) {
+				nextItem = candidateNodes[candidateNodes.length - 1];
+			}
+			if (!nextItem) return;
+			this.root.setHighlightedNode(nextItem);
+			return;
+		}
+
+		if (INTERACTION_KEYS.includes(e.key)) return;
+		if (!this.root.highlightedNode) {
+			this.root.setHighlightedToFirstCandidate();
+		}
+		// this.root.setHighlightedToFirstCandidate();
 	};
 
-	getCandidateNodes = () => {
-		const node = this.contentNode;
-		if (!node) return [];
-		return Array.from(
-			node.querySelectorAll<HTMLElement>(`[${ITEM_ATTR}]:not([data-disabled])`)
-		);
+	#oninput = (e: Event & { currentTarget: HTMLInputElement }) => {
+		this.root.inputValue = e.currentTarget.value;
+		this.root.setHighlightedToFirstCandidate();
 	};
+
+	props = $derived.by(
+		() =>
+			({
+				id: this.#id.current,
+				role: "combobox",
+				disabled: this.root.disabled.current ? true : undefined,
+				"aria-activedescendant": this.root.highlightedId,
+				"aria-autocomplete": "list",
+				"aria-expanded": getAriaExpanded(this.root.open.current),
+				"data-state": getDataOpenClosed(this.root.open.current),
+				"data-disabled": getDataDisabled(this.root.disabled.current),
+				onkeydown: this.#onkeydown,
+				oninput: this.#oninput,
+				[this.root.bitsAttrs.input]: "",
+			}) as const
+	);
 }
 
-type SelectTriggerStateProps = WithRefProps<
-	ReadableBoxedValues<{
-		disabled: boolean;
-	}>
->;
+type SelectComboTriggerStateProps = WithRefProps;
+
+class SelectComboTriggerState {
+	#id: SelectComboTriggerStateProps["id"];
+	#ref: SelectComboTriggerStateProps["ref"];
+	root: SelectBaseRootState;
+
+	constructor(props: SelectComboTriggerStateProps, root: SelectBaseRootState) {
+		this.root = root;
+		this.#id = props.id;
+		this.#ref = props.ref;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+		});
+	}
+
+	#onkeydown = (e: KeyboardEvent) => {
+		if (e.key === kbd.ENTER || e.key === kbd.SPACE) {
+			e.preventDefault();
+			if (document.activeElement !== this.root.inputNode) {
+				this.root.inputNode?.focus();
+			}
+			this.root.toggleMenu();
+		}
+	};
+
+	/**
+	 * `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: MouseEvent) => {
+		if (this.root.disabled.current) return;
+		e.preventDefault();
+		if (document.activeElement !== this.root.inputNode) {
+			this.root.inputNode?.focus();
+		}
+		this.root.toggleMenu();
+	};
+
+	props = $derived.by(
+		() =>
+			({
+				id: this.#id.current,
+				disabled: this.root.disabled.current ? true : undefined,
+				"aria-haspopup": "listbox",
+				"data-state": getDataOpenClosed(this.root.open.current),
+				"data-disabled": getDataDisabled(this.root.disabled.current),
+				[this.root.bitsAttrs.trigger]: "",
+				onpointerdown: this.#onpointerdown,
+				onkeydown: this.#onkeydown,
+			}) as const
+	);
+}
+
+type SelectTriggerStateProps = WithRefProps;
 
 class SelectTriggerState {
-	#root: SelectRootState;
 	#id: SelectTriggerStateProps["id"];
 	#ref: SelectTriggerStateProps["ref"];
-	#disabled: SelectTriggerStateProps["disabled"];
-	#typeahead: Typeahead;
-	#isDisabled = $derived.by(() => {
-		return this.#root.disabled.current || this.#disabled.current;
-	});
+	root: SelectRootState;
+	#domTypeahead: DOMTypeahead;
+	#dataTypeahead: DataTypeahead;
 
 	constructor(props: SelectTriggerStateProps, root: SelectRootState) {
+		this.root = root;
 		this.#id = props.id;
 		this.#ref = props.ref;
-		this.#root = root;
-		this.#disabled = props.disabled;
 
 		useRefById({
 			id: this.#id,
 			ref: this.#ref,
 			onRefChange: (node) => {
-				this.#root.triggerNode = node;
+				this.root.triggerNode = node;
 			},
 		});
 
-		this.#typeahead = useTypeahead();
+		this.#domTypeahead = useDOMTypeahead({
+			getCurrentItem: () => this.root.highlightedNode,
+			onMatch: (node) => {
+				this.root.setHighlightedNode(node);
+			},
+		});
+
+		this.#dataTypeahead = useDataTypeahead({
+			getCurrentItem: () => {
+				if (this.root.isMulti) return "";
+				return this.root.currentLabel;
+			},
+			onMatch: (label: string) => {
+				if (this.root.isMulti) return;
+				if (!this.root.items.current) return;
+				const matchedItem = this.root.items.current.find((item) => item.label === label);
+				if (!matchedItem) return;
+				this.root.value.current = matchedItem.value;
+			},
+			enabled: !this.root.isMulti && this.root.dataTypeaheadEnabled,
+		});
 	}
 
+	#onkeydown = (e: KeyboardEvent) => {
+		this.root.isUsingKeyboard = true;
+		if (e.key === kbd.ARROW_UP || e.key === kbd.ARROW_DOWN) e.preventDefault();
+
+		if (!this.root.open.current) {
+			if (e.key === kbd.ENTER) {
+				return;
+			} else if (e.key === kbd.SPACE || e.key === kbd.ARROW_DOWN || e.key === kbd.ARROW_UP) {
+				e.preventDefault();
+				this.root.handleOpen();
+			} else if (!this.root.isMulti && this.root.dataTypeaheadEnabled) {
+				this.#dataTypeahead.handleTypeaheadSearch(e.key, this.root.candidateLabels);
+				return;
+			}
+
+			// 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);
+				}
+			});
+			return;
+		}
+
+		if (e.key === kbd.TAB) {
+			this.root.handleClose();
+			return;
+		}
+
+		if ((e.key === kbd.ENTER || e.key === kbd.SPACE) && !e.isComposing) {
+			e.preventDefault();
+			const highlightedValue = this.root.highlightedValue;
+			if (highlightedValue) {
+				this.root.toggleItem(highlightedValue, this.root.highlightedLabel ?? undefined);
+			}
+			if (!this.root.isMulti) {
+				this.root.handleClose();
+			}
+		}
+
+		if (e.key === kbd.ARROW_UP && e.altKey) {
+			this.root.handleClose();
+		}
+
+		if (FIRST_LAST_KEYS.includes(e.key)) {
+			e.preventDefault();
+			const candidateNodes = this.root.getCandidateNodes();
+			const currHighlightedNode = this.root.highlightedNode;
+			const currIndex = currHighlightedNode
+				? candidateNodes.indexOf(currHighlightedNode)
+				: -1;
+
+			const loop = this.root.loop.current;
+			let nextItem: HTMLElement | undefined;
+
+			if (e.key === kbd.ARROW_DOWN) {
+				nextItem = next(candidateNodes, currIndex, loop);
+			} else if (e.key === kbd.ARROW_UP) {
+				nextItem = prev(candidateNodes, currIndex, loop);
+			} else if (e.key === kbd.PAGE_DOWN) {
+				nextItem = forward(candidateNodes, currIndex, 10, loop);
+			} else if (e.key === kbd.PAGE_UP) {
+				nextItem = backward(candidateNodes, currIndex, 10, loop);
+			} else if (e.key === kbd.HOME) {
+				nextItem = candidateNodes[0];
+			} else if (e.key === kbd.END) {
+				nextItem = candidateNodes[candidateNodes.length - 1];
+			}
+			if (!nextItem) return;
+			this.root.setHighlightedNode(nextItem);
+			return;
+		}
+		const isModifierKey = e.ctrlKey || e.altKey || e.metaKey;
+		const isCharacterKey = e.key.length === 1;
+
+		// prevent space from being considered with typeahead
+		if (e.code === "Space") return;
+
+		const candidateNodes = this.root.getCandidateNodes();
+
+		if (e.key === kbd.TAB) return;
+
+		if (!isModifierKey && isCharacterKey) {
+			this.#domTypeahead.handleTypeaheadSearch(e.key, candidateNodes);
+			return;
+		}
+
+		if (!this.root.highlightedNode) {
+			this.root.setHighlightedToFirstCandidate();
+		}
+	};
+
 	#handleOpen = () => {
-		if (this.#isDisabled) return;
-		this.#root.open.current = true;
-		this.#typeahead.resetTypeahead();
+		this.root.open.current = true;
+		this.#dataTypeahead.resetTypeahead();
+		this.#domTypeahead.resetTypeahead();
 	};
 
 	#handlePointerOpen = (e: PointerEvent) => {
 		this.#handleOpen();
-		this.#root.triggerPointerDownPos.current = {
+		this.root.triggerPointerDownPos = {
 			x: Math.round(e.pageX),
 			y: Math.round(e.pageY),
 		};
@@ -219,9 +627,13 @@ class SelectTriggerState {
 		currTarget.focus();
 	};
 
+	/**
+	 * `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: PointerEvent) => {
-		// prevent opening on touch down which can be triggered
-		// when scrolling on touch devices (unexpected)
+		if (this.root.disabled.current) return;
+		// prevent opening on touch down which can be triggered when scrolling on touch devices
 		if (e.pointerType === "touch") return e.preventDefault();
 
 		// prevent implicit pointer capture
@@ -233,11 +645,11 @@ class SelectTriggerState {
 		// only call the handle if it's a left click, since pointerdown is triggered
 		// by right clicks as well, but not when ctrl is pressed
 		if (e.button === 0 && e.ctrlKey === false) {
-			if (this.#root.open.current === false) {
+			if (this.root.open.current === false) {
 				this.#handlePointerOpen(e);
 				e.preventDefault();
 			} else {
-				this.#root.handleClose();
+				this.root.handleClose();
 			}
 		}
 	};
@@ -249,324 +661,91 @@ class SelectTriggerState {
 		}
 	};
 
-	#onkeydown = (e: KeyboardEvent) => {
-		const isTypingAhead = this.#typeahead.search.current !== "";
-		const isModifierKey = e.ctrlKey || e.altKey || e.metaKey;
-
-		if (!isModifierKey && e.key.length === 1) {
-			if (isTypingAhead && e.key === " ") return;
-		}
-		const newItem = this.#typeahead.handleTypeaheadSearch(
-			e.key,
-			this.#root.getTriggerTypeaheadCandidateNodes()
-		);
-
-		if (newItem && newItem.dataset.value) {
-			this.#root.value.current = newItem.dataset.value;
-		}
-
-		if (OPEN_KEYS.includes(e.key)) {
-			this.#handleOpen();
-			e.preventDefault();
-		}
-	};
-
 	props = $derived.by(
 		() =>
 			({
 				id: this.#id.current,
-				disabled: this.#isDisabled,
-				role: "combobox",
-				type: "button",
-				"aria-controls": this.#root.contentId,
-				"aria-expanded": getAriaExpanded(this.#root.open.current),
-				"aria-required": getAriaRequired(this.#root.required.current),
-				"aria-autocomplete": "none",
-				dir: this.#root.dir.current,
-				"data-state": getDataOpenClosed(this.#root.open.current),
-				"data-disabled": getDataDisabled(this.#isDisabled),
-				"data-placeholder": shouldShowPlaceholder(this.#root.value.current)
-					? ""
-					: undefined,
-				[TRIGGER_ATTR]: "",
-				onclick: this.#onclick,
-				onpointerdown: this.#onpointerdown,
-				onpointerup: this.#onpointerup,
-				onkeydown: this.#onkeydown,
-			}) as const
-	);
-}
-
-class SelectValueState {
-	root: SelectRootState;
-	showPlaceholder = $derived.by(() => shouldShowPlaceholder(this.root.value.current));
-	ref: WritableBox<HTMLElement | null> = box(null);
-
-	constructor(root: SelectRootState) {
-		this.root = root;
-
-		useRefById({
-			id: this.root.valueId,
-			ref: this.ref,
-			onRefChange: (node) => {
-				this.root.valueNode = node;
-			},
-		});
-	}
-
-	props = $derived.by(
-		() =>
-			({
-				id: this.root.valueId.current,
+				disabled: this.root.disabled.current ? true : undefined,
+				"aria-haspopup": "listbox",
 				"data-state": getDataOpenClosed(this.root.open.current),
 				"data-disabled": getDataDisabled(this.root.disabled.current),
-				[VALUE_ATTR]: "",
-				style: {
-					pointerEvents: "none",
-				},
+				[this.root.bitsAttrs.trigger]: "",
+				onpointerdown: this.#onpointerdown,
+				onkeydown: this.#onkeydown,
+				onclick: this.#onclick,
+				onpointerup: this.#onpointerup,
+				// onclick: this.#onclick,
 			}) as const
 	);
 }
 
-class SelectContentFragState {
-	root: SelectRootState;
-
-	constructor(root: SelectRootState) {
-		this.root = root;
-
-		$effect(() => {
-			this.root.contentFragment = new DocumentFragment();
-		});
-	}
-}
+type SelectContentStateProps = WithRefProps;
 
-type SelectContentStateProps = WithRefProps<
-	ReadableBoxedValues<{
-		position: "item-aligned" | "floating";
-	}>
->;
-
-export class SelectContentState {
+class SelectContentState {
 	id: SelectContentStateProps["id"];
 	ref: SelectContentStateProps["ref"];
-	root: SelectRootState;
 	viewportNode = $state<HTMLElement | null>(null);
-	selectedItemId = box<string>(useId());
-	selectedItemTextId = box<string>(useId());
-	selectedItemText = box<HTMLElement | null>(null);
-	position: SelectContentStateProps["position"];
-	isPositioned = box(false);
-	firstValidItemFound = box(false);
-	typeahead: Typeahead;
-	alignedPositionState: SelectItemAlignedPositionState | null = null;
+	root: SelectRootState;
+	isPositioned = $state(false);
 
 	constructor(props: SelectContentStateProps, root: SelectRootState) {
-		this.position = props.position;
+		this.root = root;
 		this.id = props.id;
 		this.ref = props.ref;
-		this.root = root;
-		this.typeahead = useTypeahead();
 
 		useRefById({
 			id: this.id,
 			ref: this.ref,
-			deps: () => this.root.open.current,
 			onRefChange: (node) => {
 				this.root.contentNode = node;
-				this.root.contentId = node?.id;
 			},
+			deps: () => this.root.open.current,
 		});
 
 		$effect(() => {
-			this.root.open.current;
-			return 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;
-
-						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;
-					};
-
-					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();
-					};
-				});
-			});
-		});
-
-		$effect(() => {
-			if (this.isPositioned.current) {
-				this.focusSelectedItem();
-			}
+			return () => {
+				this.root.contentNode = null;
+			};
 		});
 
 		$effect(() => {
 			if (this.root.open.current === false) {
-				this.isPositioned.current = false;
+				this.isPositioned = false;
 			}
 		});
 	}
 
-	focusFirst = (candidates: Array<HTMLElement | null>) => {
-		const [firstItem, ...restItems] = this.root.getCandidateNodes();
-		const [lastItem] = restItems.slice(-1);
-
-		const PREV_FOCUSED_ELEMENT = document.activeElement;
-
-		for (const candidate of candidates) {
-			if (candidate === PREV_FOCUSED_ELEMENT) return;
-			candidate?.scrollIntoView({ block: "nearest" });
-			// viewport might have padding so scroll to the edge when focusing first/last
-			const viewport = this.viewportNode;
-			if (candidate === firstItem && viewport) {
-				viewport.scrollTop = 0;
-			}
-			if (candidate === lastItem && viewport) {
-				viewport.scrollTop = viewport.scrollHeight;
-			}
-
-			candidate?.focus();
-
-			if (document.activeElement !== PREV_FOCUSED_ELEMENT) return;
-		}
-	};
-
-	onItemLeave = () => {
-		this.root.contentNode?.focus();
+	#onpointermove = () => {
+		this.root.isUsingKeyboard = false;
 	};
 
-	getSelectedItem = () => {
-		const candidates = this.root.getCandidateNodes();
-		const selectedItemNode =
-			candidates.find((node) => node?.dataset.value === this.root.value.current) ?? null;
-		const first = candidates[0] ?? null;
-		if (selectedItemNode) {
-			const selectedItemTextNode = selectedItemNode.querySelector<HTMLElement>(
-				`[${ITEM_TEXT_ATTR}]`
-			);
+	#styles = $derived.by(() => {
+		if (this.root.isCombobox) {
 			return {
-				selectedItemNode,
-				selectedItemTextNode,
+				"--bits-combobox-content-transform-origin": "var(--bits-floating-transform-origin)",
+				"--bits-combobox-content-available-width": "var(--bits-floating-available-width)",
+				"--bits-combobox-content-available-height": "var(--bits-floating-available-height)",
+				"--bits-combobox-anchor-width": "var(--bits-floating-anchor-width)",
+				"--bits-combobox-anchor-height": "var(--bits-floating-anchor-height)",
 			};
 		} else {
-			if (first) {
-				const firstItemText = first.querySelector<HTMLElement>(`[${ITEM_TEXT_ATTR}]`);
-				return {
-					selectedItemNode: first,
-					selectedItemTextNode: firstItemText,
-				};
-			}
-		}
-		return {
-			selectedItemNode: null,
-			selectedItemTextNode: null,
-		};
-	};
-
-	focusSelectedItem = () => {
-		afterTick(() => {
-			const candidates = this.root.getCandidateNodes();
-			const selected =
-				candidates.find((node) => node?.dataset.value === this.root.value.current) ?? null;
-			const first = candidates[0] ?? null;
-			this.focusFirst([selected, first]);
-		});
-	};
-
-	itemRegister = (value: string, disabled: boolean) => {
-		const isFirstValidItem = !this.firstValidItemFound.current && !disabled;
-		const isSelectedItem =
-			this.root.value.current !== undefined && this.root.value.current === value;
-
-		if (isSelectedItem || isFirstValidItem) {
-			if (isFirstValidItem) {
-				this.firstValidItemFound.current = true;
-			}
-		}
-	};
-
-	itemTextRegister = (node: HTMLElement | null, value: string, disabled: boolean) => {
-		const isFirstValidItem = !this.firstValidItemFound.current && !disabled;
-		const isSelectedItem =
-			this.root.value.current !== undefined && this.root.value.current === value;
-
-		if (isSelectedItem || isFirstValidItem) {
-			this.selectedItemText.current = node;
-		}
-	};
-
-	#onkeydown = (e: KeyboardEvent) => {
-		const isModifierKey = e.ctrlKey || e.altKey || e.metaKey;
-
-		if (e.key === "Tab") e.preventDefault();
-
-		if (!isModifierKey && e.key.length === 1) {
-			this.typeahead.handleTypeaheadSearch(e.key, this.root.getCandidateNodes());
+			return {
+				"--bits-select-content-transform-origin": "var(--bits-floating-transform-origin)",
+				"--bits-select-content-available-width": "var(--bits-floating-available-width)",
+				"--bits-select-content-available-height": "var(--bits-floating-available-height)",
+				"--bits-select-anchor-width": "var(--bits-floating-anchor-width)",
+				"--bits-select-anchor-height": "var(--bits-floating-anchor-height)",
+			};
 		}
+	});
 
-		if ([kbd.ARROW_UP, kbd.ARROW_DOWN, kbd.HOME, kbd.END].includes(e.key)) {
-			let candidateNodes = this.root.getCandidateNodes();
-
-			if (e.key === kbd.ARROW_UP || e.key === kbd.END) {
-				candidateNodes = candidateNodes.slice().reverse();
-			}
-
-			if (e.key === kbd.ARROW_UP || e.key === kbd.ARROW_DOWN) {
-				const currElement = e.target as HTMLElement;
-				const currIndex = candidateNodes.indexOf(currElement);
-				candidateNodes = candidateNodes.slice(currIndex + 1);
-			}
-
-			setTimeout(() => this.focusFirst(candidateNodes));
+	handleInteractOutside = (e: InteractOutsideEvent) => {
+		if (e.target === this.root.triggerNode || e.target === this.root.inputNode) {
 			e.preventDefault();
 		}
 	};
 
-	#oncontextmenu = (e: Event) => {
-		e.preventDefault();
-	};
+	snippetProps = $derived.by(() => ({ open: this.root.open.current }));
 
 	props = $derived.by(
 		() =>
@@ -574,15 +753,15 @@ export class SelectContentState {
 				id: this.id.current,
 				role: "listbox",
 				"data-state": getDataOpenClosed(this.root.open.current),
+				[this.root.bitsAttrs.content]: "",
 				style: {
 					display: "flex",
 					flexDirection: "column",
 					outline: "none",
+					boxSizing: "border-box",
+					...this.#styles,
 				},
-				oncontextmenu: this.#oncontextmenu,
-				onkeydown: this.#onkeydown,
-				tabIndex: -1,
-				[CONTENT_ATTR]: "",
+				onpointermove: this.#onpointermove,
 			}) as const
 	);
 }
@@ -591,7 +770,9 @@ type SelectItemStateProps = WithRefProps<
 	ReadableBoxedValues<{
 		value: string;
 		disabled: boolean;
-		textValue?: string;
+		label: string;
+		onHighlight: () => void;
+		onUnhighlight: () => void;
 	}>
 >;
 
@@ -599,191 +780,146 @@ class SelectItemState {
 	#id: SelectItemStateProps["id"];
 	#ref: SelectItemStateProps["ref"];
 	root: SelectRootState;
-	content: SelectContentState;
-	textId = box<string | undefined>(undefined);
 	value: SelectItemStateProps["value"];
+	label: SelectItemStateProps["label"];
+	onHighlight: SelectItemStateProps["onHighlight"];
+	onUnhighlight: SelectItemStateProps["onUnhighlight"];
 	disabled: SelectItemStateProps["disabled"];
-	textValue: SelectItemStateProps["textValue"];
-	isSelected = $derived.by(() => this.root.value.current === this.value.current);
-	isFocused = box(false);
-	node = box<HTMLElement | null>(null);
-	trueTextValue = box<string>("");
+	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("");
 
-	constructor(props: SelectItemStateProps, content: SelectContentState) {
-		this.#id = props.id;
-		this.#ref = props.ref;
-		this.root = content.root;
-		this.content = content;
+	constructor(props: SelectItemStateProps, root: SelectRootState) {
+		this.root = root;
 		this.value = props.value;
 		this.disabled = props.disabled;
-		this.textValue = props.textValue;
+		this.label = props.label;
+		this.onHighlight = props.onHighlight;
+		this.onUnhighlight = props.onUnhighlight;
+		this.#id = props.id;
+		this.#ref = props.ref;
+
+		$effect(() => {
+			if (this.isHighlighted) {
+				this.onHighlight.current();
+			} else if (this.prevHighlighted.current) {
+				this.onUnhighlight.current();
+			}
+		});
 
 		useRefById({
 			id: this.#id,
 			ref: this.#ref,
 		});
-
-		$effect(() => {
-			const node = this.#ref.current;
-			if (!node) return;
-			this.content.itemRegister(this.value.current, this.disabled.current);
-		});
 	}
 
-	onItemTextChange = (node: HTMLElement | null) => {
-		this.trueTextValue.current = ((this.textValue?.current || node?.textContent) ?? "").trim();
-	};
-
-	setTextId = (id: string) => {
-		this.textId.current = id;
-	};
-
-	handleSelect = async (e?: PointerEvent) => {
-		if (e?.defaultPrevented) return;
-
-		if (!this.disabled.current) {
-			this.root.value.current = this.value.current;
-			this.root.handleClose();
-		}
-	};
-
-	#onpointermove = async (e: PointerEvent) => {
-		if (e.defaultPrevented) return;
-		if (this.disabled.current) {
-			this.content.onItemLeave();
-		} else {
-			(e.currentTarget as HTMLElement).focus({ preventScroll: true });
-		}
-	};
-
-	#onpointerleave = async (e: PointerEvent) => {
-		if (e.defaultPrevented) return;
-		if (e.currentTarget === document.activeElement) {
-			this.content.onItemLeave();
-		}
-	};
+	snippetProps = $derived.by(() => ({
+		selected: this.isSelected,
+		highlighted: this.isHighlighted,
+	}));
 
 	#onpointerdown = (e: PointerEvent) => {
-		(e.currentTarget as HTMLElement).focus({ preventScroll: true });
-	};
-
-	#onpointerup = async (e: PointerEvent) => {
-		await this.handleSelect(e);
+		// prevent focus from leaving the combobox
+		e.preventDefault();
 	};
 
-	#onkeydown = async (e: KeyboardEvent) => {
+	/**
+	 * Using `pointerup` instead of `click` allows power users to pointerdown
+	 * the trigger, then release pointerup on an item to select it vs having to do
+	 * multiple clicks.
+	 */
+	#onpointerup = (e: PointerEvent) => {
 		if (e.defaultPrevented) return;
+		// prevent any default behavior
+		e.preventDefault();
+		if (this.disabled.current) return;
+		const isCurrentSelectedValue = this.value.current === this.root.value.current;
+		this.root.toggleItem(this.value.current, this.label.current);
 
-		const isTypingAhead = this.content.typeahead.search.current !== "";
-		if (isTypingAhead && e.key === kbd.SPACE) return;
-
-		if (SELECTION_KEYS.includes(e.key)) {
-			this.handleSelect();
+		if (!this.root.isMulti && !isCurrentSelectedValue) {
+			this.root.handleClose();
 		}
-
-		// prevent page scroll on space
-		if (e.key === kbd.SPACE) e.preventDefault();
 	};
 
-	#onfocus = () => {
-		this.isFocused.current = true;
-	};
-
-	#onblur = () => {
-		this.isFocused.current = false;
+	#onpointermove = (_: PointerEvent) => {
+		if (this.root.highlightedNode !== this.#ref.current) {
+			this.root.setHighlightedNode(this.#ref.current);
+		}
 	};
 
-	#ontouchend = (e: TouchEvent) => {
-		e.preventDefault();
-		e.stopPropagation();
+	setTextId = (id: string) => {
+		this.textId = id;
 	};
 
 	props = $derived.by(
 		() =>
 			({
 				id: this.#id.current,
-				role: "option",
-				"aria-labelledby": this.textId.current ?? undefined,
-				"data-highlighted": this.isFocused.current ? "" : undefined,
-				"aria-selected": getAriaSelected(this.isSelected),
-				"data-state": getDataChecked(this.isSelected),
-				"aria-disabled": getAriaDisabled(this.disabled.current),
-				"data-disabled": getDataDisabled(this.disabled.current),
-				"data-selected": this.isSelected ? "" : undefined,
+				"aria-selected": this.root.includesItem(this.value.current) ? "true" : undefined,
 				"data-value": this.value.current,
-				tabindex: this.disabled.current ? undefined : -1,
-				[ITEM_ATTR]: "",
-				//
-				onfocus: this.#onfocus,
+				"data-disabled": getDataDisabled(this.disabled.current),
+				"data-highlighted":
+					this.root.highlightedValue === this.value.current ? "" : undefined,
+				"data-selected": this.root.includesItem(this.value.current) ? "" : undefined,
+				"data-label": this.label.current,
+				[this.root.bitsAttrs.item]: "",
+
 				onpointermove: this.#onpointermove,
-				onpointerleave: this.#onpointerleave,
 				onpointerdown: this.#onpointerdown,
 				onpointerup: this.#onpointerup,
-				onkeydown: this.#onkeydown,
-				onblur: this.#onblur,
-				ontouchend: this.#ontouchend,
 			}) as const
 	);
 }
 
-type SelectItemTextStateProps = WithRefProps;
+type SelectGroupStateProps = WithRefProps;
 
-class SelectItemTextState {
-	item: SelectItemState;
-	#id: SelectItemTextStateProps["id"];
-	#ref: SelectItemTextStateProps["ref"];
-	node = box<HTMLElement | null>(null);
-	nativeOption = box.with(
-		() =>
-			({
-				key: this.item.value.current,
-				value: this.item.value.current,
-				disabled: this.item.disabled.current,
-				innerHTML: this.node.current?.textContent,
-			}) as const
-	);
+class SelectGroupState {
+	#id: SelectGroupStateProps["id"];
+	#ref: SelectGroupStateProps["ref"];
+	root: SelectBaseRootState;
+	labelNode = $state<HTMLElement | null>(null);
 
-	constructor(props: SelectItemTextStateProps, item: SelectItemState) {
+	constructor(props: SelectGroupStateProps, root: SelectBaseRootState) {
 		this.#id = props.id;
 		this.#ref = props.ref;
-		this.item = item;
-		this.item.setTextId(this.#id.current);
+		this.root = root;
 
 		useRefById({
 			id: this.#id,
 			ref: this.#ref,
 		});
+	}
 
-		$effect(() => {
-			this.item.setTextId(this.#id.current);
-		});
+	props = $derived.by(
+		() =>
+			({
+				id: this.#id.current,
+				role: "group",
+				[this.root.bitsAttrs.group]: "",
+				"aria-labelledby": this.labelNode?.id ?? undefined,
+			}) as const
+	);
+}
 
-		$effect(() => {
-			untrack(() => {
-				const textNode = this.item.root.contentFragment?.getElementById(this.#id.current);
-				if (!textNode) return;
-				this.item.onItemTextChange(textNode);
-				this.item.content.itemTextRegister(
-					textNode,
-					this.item.value.current,
-					this.item.disabled.current
-				);
-
-				this.item.root.onNativeOptionAdd(
-					box.with(() => ({
-						key: this.item.value.current,
-						value: this.item.value.current,
-						disabled: this.item.disabled.current,
-						innerHTML: textNode?.textContent,
-					}))
-				);
-			});
-		});
+type SelectGroupHeadingStateProps = WithRefProps;
+
+class SelectGroupHeadingState {
+	#id: SelectGroupHeadingStateProps["id"];
+	#ref: SelectGroupHeadingStateProps["ref"];
+	group: SelectGroupState;
 
-		$effect(() => {
-			return () => {
-				this.item.root.onNativeOptionRemove(this.nativeOption);
-			};
+	constructor(props: SelectGroupHeadingStateProps, group: SelectGroupState) {
+		this.#id = props.id;
+		this.#ref = props.ref;
+		this.group = group;
+
+		useRefById({
+			id: this.#id,
+			ref: this.#ref,
+			onRefChange: (node) => {
+				group.labelNode = node;
+			},
 		});
 	}
 
@@ -791,294 +927,80 @@ class SelectItemTextState {
 		() =>
 			({
 				id: this.#id.current,
-				[ITEM_TEXT_ATTR]: "",
+				[this.group.root.bitsAttrs["group-label"]]: "",
 			}) as const
 	);
 }
 
-type SelectItemAlignedPositionStateProps = ReadableBoxedValues<{
-	onPlaced: () => void;
+type SelectHiddenInputStateProps = ReadableBoxedValues<{
+	value: string;
 }>;
 
-class SelectItemAlignedPositionState {
-	root: SelectRootState;
-	content: SelectContentState;
-	shouldExpandOnScroll = $state(false);
-	shouldReposition = $state(false);
-	contentWrapperId = $state(useId());
-	onPlaced: SelectItemAlignedPositionStateProps["onPlaced"];
-	contentZIndex = $state("");
-
-	constructor(props: SelectItemAlignedPositionStateProps, content: SelectContentState) {
-		this.root = content.root;
-		this.content = content;
-		this.onPlaced = props.onPlaced;
+class SelectHiddenInputState {
+	#value: SelectHiddenInputStateProps["value"];
+	root: SelectBaseRootState;
+	shouldRender = $derived.by(() => this.root.name.current !== "");
 
-		$effect(() => {
-			afterTick(() => {
-				this.position();
-				const contentNode = document.getElementById(this.content.id.current);
-				if (contentNode) {
-					this.contentZIndex = window.getComputedStyle(contentNode).zIndex;
-				}
-			});
-		});
+	constructor(props: SelectHiddenInputStateProps, root: SelectBaseRootState) {
+		this.root = root;
+		this.#value = props.value;
 	}
 
-	position = () => {
-		afterTick(() => {
-			const { selectedItemNode, selectedItemTextNode } = this.content.getSelectedItem();
-			const contentNode = this.root.contentNode;
-			const contentWrapperNode = document.getElementById(this.contentWrapperId);
-			const viewportNode = this.content.viewportNode;
-			const triggerNode = this.root.triggerNode;
-			const valueNode = document.getElementById(this.root.valueId.current);
-
-			if (
-				!contentNode ||
-				!contentWrapperNode ||
-				!viewportNode ||
-				!selectedItemNode ||
-				!selectedItemTextNode ||
-				!triggerNode ||
-				!valueNode
-			) {
-				return;
-			}
-
-			const triggerRect = triggerNode.getBoundingClientRect();
-
-			// horizontal positioning
-			const contentRect = contentNode.getBoundingClientRect();
-			const valueRect = valueNode.getBoundingClientRect();
-			const itemTextRect = selectedItemTextNode.getBoundingClientRect();
-
-			if (this.root.dir.current === "rtl") {
-				const itemTextOffset = itemTextRect.left - contentRect.left;
-				const left = valueRect.left - itemTextOffset;
-				const leftDelta = triggerRect.left - left;
-				const minContentWidth = triggerRect.width + leftDelta;
-				const contentWidth = Math.max(minContentWidth, contentRect.width);
-				const rightEdge = window.innerWidth - CONTENT_MARGIN;
-				const clampedLeft = clamp(left, CONTENT_MARGIN, rightEdge - contentWidth);
-
-				contentWrapperNode.style.minWidth = `${minContentWidth}px`;
-				contentWrapperNode.style.left = `${clampedLeft}px`;
-			} else {
-				const itemTextOffset = contentRect.right - itemTextRect.right;
-				const right = window.innerWidth - valueRect.right - itemTextOffset;
-				const rightDelta = window.innerWidth - triggerRect.right - right;
-				const minContentWidth = triggerRect.width + rightDelta;
-				const contentWidth = Math.max(minContentWidth, contentRect.width);
-				const leftEdge = window.innerWidth - CONTENT_MARGIN;
-				const clampedRight = clamp(right, CONTENT_MARGIN, leftEdge - contentWidth);
-
-				contentWrapperNode.style.minWidth = `${minContentWidth}px`;
-				contentWrapperNode.style.right = `${clampedRight}px`;
-			}
-
-			// vertical positioning
-			const items = this.root.getCandidateNodes();
-
-			const availableHeight = window.innerHeight - CONTENT_MARGIN * 2;
-			const itemsHeight = viewportNode.scrollHeight;
-
-			const contentStyles = window.getComputedStyle(contentNode);
-
-			const contentBorderTopWidth = Number.parseInt(contentStyles.borderTopWidth, 10);
-			const contentPaddingTop = Number.parseInt(contentStyles.paddingTop, 10);
-
-			const contentBorderBottomWidth = Number.parseInt(contentStyles.borderBottomWidth, 10);
-			const contentPaddingBottom = Number.parseInt(contentStyles.paddingBottom, 10);
-
-			const fullContentHeight =
-				contentBorderTopWidth +
-				contentPaddingTop +
-				itemsHeight +
-				contentPaddingBottom +
-				contentBorderBottomWidth;
-
-			const minContentHeight = Math.min(selectedItemNode.offsetHeight * 5, fullContentHeight);
-
-			const viewportStyles = window.getComputedStyle(viewportNode);
-			const viewportPaddingTop = Number.parseInt(viewportStyles.paddingTop, 10);
-			const viewportPaddingBottom = Number.parseInt(viewportStyles.paddingBottom, 10);
-
-			const topEdgeToTriggerMiddle =
-				triggerRect.top + triggerRect.height / 2 - CONTENT_MARGIN;
-			const triggerMiddleToBottomEdge = availableHeight - topEdgeToTriggerMiddle;
-
-			const selectedItemHalfHeight = selectedItemNode.offsetHeight / 2;
-			const itemOffsetMiddle = selectedItemNode.offsetTop + selectedItemHalfHeight;
-			const contentTopToItemMiddle =
-				contentBorderTopWidth + contentPaddingTop + itemOffsetMiddle;
-			const itemMiddleToContentBottom = fullContentHeight - contentTopToItemMiddle;
-
-			const willAlignWithoutTopOverflow = contentTopToItemMiddle <= topEdgeToTriggerMiddle;
-
-			if (willAlignWithoutTopOverflow) {
-				const isLastItem = selectedItemNode === items[items.length - 1];
-				contentWrapperNode.style.bottom = `${0}px`;
-				const viewportOffsetBottom =
-					contentNode.clientHeight - viewportNode.offsetTop - viewportNode.offsetHeight;
-				const clampedTriggerMiddleToBottomEdge = Math.max(
-					triggerMiddleToBottomEdge,
-					selectedItemHalfHeight +
-						// viewport might have padding bottom, include it to avoid a scrollable viewport
-						(isLastItem ? viewportPaddingBottom : 0) +
-						viewportOffsetBottom +
-						contentBorderBottomWidth
-				);
-				const height = contentTopToItemMiddle + clampedTriggerMiddleToBottomEdge;
-				contentWrapperNode.style.height = `${height}px`;
-			} else {
-				const isFirstItem = selectedItemNode === items[0];
-				contentWrapperNode.style.top = `${0}px`;
-				const clampedTopEdgeToTriggerMiddle = Math.max(
-					topEdgeToTriggerMiddle,
-					contentBorderTopWidth +
-						viewportNode.offsetTop +
-						// viewport might have padding top, include it to avoid a scrollable viewport
-						(isFirstItem ? viewportPaddingTop : 0) +
-						selectedItemHalfHeight
-				);
-				const height = clampedTopEdgeToTriggerMiddle + itemMiddleToContentBottom;
-				contentWrapperNode.style.height = `${height}px`;
-				viewportNode.scrollTop =
-					contentTopToItemMiddle - topEdgeToTriggerMiddle + viewportNode.offsetTop;
-			}
-
-			contentWrapperNode.style.margin = `${CONTENT_MARGIN}px 0`;
-			contentWrapperNode.style.minHeight = `${minContentHeight}px`;
-			contentWrapperNode.style.maxHeight = `${availableHeight}px`;
-
-			this.onPlaced.current();
-		});
-		requestAnimationFrame(() => (this.shouldExpandOnScroll = true));
-	};
+	#onfocus = (e: FocusEvent) => {
+		e.preventDefault();
 
-	handleScrollButtonChange = (id: string) => {
-		afterTick(() => {
-			const node = document.getElementById(id);
-			if (!node) return;
-			if (!this.shouldReposition) return;
-			this.position();
-			this.content.focusSelectedItem();
-			this.shouldReposition = false;
-		});
+		if (!this.root.isCombobox) {
+			this.root.triggerNode?.focus();
+		} else {
+			this.root.inputNode?.focus();
+		}
 	};
 
-	wrapperProps = $derived.by(
-		() =>
-			({
-				id: this.contentWrapperId,
-				style: {
-					display: "flex",
-					flexDirection: "column",
-					position: "fixed",
-					zIndex: this.contentZIndex,
-				},
-				[CONTENT_WRAPPER_ATTR]: "",
-			}) as const
-	);
-
 	props = $derived.by(
 		() =>
 			({
-				id: this.content.id.current,
-				style: {
-					boxSizing: "border-box",
-					maxHeight: "100%",
-				},
+				disabled: getDisabled(this.root.disabled.current),
+				required: getRequired(this.root.required.current),
+				name: this.root.name.current,
+				value: this.#value.current,
+				style: styleToString(srOnlyStyles),
+				tabindex: -1,
+				onfocus: this.#onfocus,
 			}) as const
 	);
 }
 
-class SelectFloatingPositionState {
-	root: SelectRootState;
-	content: SelectContentState;
-
-	constructor(content: SelectContentState) {
-		this.root = content.root;
-		this.content = content;
-	}
-
-	props = {
-		style: {
-			boxSizing: "border-box",
-			"--bits-select-content-transform-origin": "var(--bits-floating-transform-origin)",
-			"--bits-select-content-available-width": "var(--bits-floating-available-width)",
-			"--bits-select-content-available-height": "var(--bits-floating-available-height)",
-			"--bits-select-anchor-width": "var(--bits-floating-anchor-width)",
-			"--bits-select-anchor-height": "var(--bits-floating-anchor-height)",
-		},
-	} as const;
-}
-
 type SelectViewportStateProps = WithRefProps;
 
 class SelectViewportState {
-	id: SelectViewportStateProps["id"];
-	ref: SelectViewportStateProps["ref"];
+	#id: SelectViewportStateProps["id"];
+	#ref: SelectViewportStateProps["ref"];
+	root: SelectBaseRootState;
 	content: SelectContentState;
 	prevScrollTop = $state(0);
 
 	constructor(props: SelectViewportStateProps, content: SelectContentState) {
-		this.id = props.id;
+		this.#id = props.id;
+		this.#ref = props.ref;
 		this.content = content;
-		this.ref = props.ref;
+		this.root = content.root;
 
 		useRefById({
-			id: this.id,
-			ref: this.ref,
+			id: this.#id,
+			ref: this.#ref,
 			onRefChange: (node) => {
 				this.content.viewportNode = node;
 			},
-			deps: () => this.content.root.open.current,
+			deps: () => this.root.open.current,
 		});
 	}
 
-	#onscroll = (e: WheelEvent) => {
-		afterTick(() => {
-			const viewport = e.currentTarget as HTMLElement;
-			const shouldExpandOnScroll =
-				this.content.alignedPositionState?.shouldExpandOnScroll ?? undefined;
-
-			const contentWrapper = document.getElementById(
-				this.content.alignedPositionState?.contentWrapperId ?? ""
-			);
-
-			if (shouldExpandOnScroll && contentWrapper) {
-				const scrolledBy = Math.abs(this.prevScrollTop - viewport.scrollTop);
-				if (scrolledBy > 0) {
-					const availableHeight = window.innerHeight - CONTENT_MARGIN * 2;
-					const cssMinHeight = Number.parseFloat(contentWrapper.style.minHeight);
-					const cssHeight = Number.parseFloat(contentWrapper.style.height);
-					const prevHeight = Math.max(cssMinHeight, cssHeight);
-
-					if (prevHeight < availableHeight) {
-						const nextHeight = prevHeight + scrolledBy;
-						const clampedNextHeight = Math.min(availableHeight, nextHeight);
-						const heightDiff = nextHeight - clampedNextHeight;
-
-						contentWrapper.style.height = `${clampedNextHeight}px`;
-						if (contentWrapper.style.bottom === "0px") {
-							viewport.scrollTop = heightDiff > 0 ? heightDiff : 0;
-							contentWrapper.style.justifyContent = "flex-end";
-						}
-					}
-				}
-			}
-			this.prevScrollTop = viewport.scrollTop;
-		});
-	};
-
 	props = $derived.by(
 		() =>
 			({
-				id: this.id.current,
+				id: this.#id.current,
 				role: "presentation",
-				[VIEWPORT_ATTR]: "",
+				[this.root.bitsAttrs.viewport]: "",
 				style: {
 					// we use position: 'relative' here on the `viewport` so that when we call
 					// `selectedItem.offsetTop` in calculations, the offset is relative to the viewport
@@ -1087,32 +1009,27 @@ class SelectViewportState {
 					flex: 1,
 					overflow: "auto",
 				},
-				onscroll: this.#onscroll,
 			}) as const
 	);
 }
 
-type SelectScrollButtonImplStateProps = WithRefProps<
-	ReadableBoxedValues<{
-		mounted: boolean;
-	}>
->;
+type SelectScrollButtonImplStateProps = WithRefProps<ReadableBoxedValues<{ mounted: boolean }>>;
 
 class SelectScrollButtonImplState {
 	id: SelectScrollButtonImplStateProps["id"];
 	ref: SelectScrollButtonImplStateProps["ref"];
 	content: SelectContentState;
-	alignedPositionState: SelectItemAlignedPositionState | null;
+	root: SelectBaseRootState;
 	autoScrollTimer = $state<number | null>(null);
 	onAutoScroll: () => void = noop;
 	mounted: SelectScrollButtonImplStateProps["mounted"];
 
 	constructor(props: SelectScrollButtonImplStateProps, content: SelectContentState) {
-		this.content = content;
 		this.ref = props.ref;
-		this.alignedPositionState = content.alignedPositionState;
 		this.id = props.id;
 		this.mounted = props.mounted;
+		this.content = content;
+		this.root = content.root;
 
 		useRefById({
 			id: this.id,
@@ -1121,26 +1038,16 @@ class SelectScrollButtonImplState {
 		});
 
 		$effect(() => {
-			if (this.mounted.current) {
-				const activeItem = this.content.root
-					.getCandidateNodes()
-					.find((node) => node === document.activeElement);
-				activeItem?.scrollIntoView({ block: "nearest" });
-			}
-		});
-
-		$effect(() => {
-			return () => {
-				this.clearAutoScrollTimer();
-			};
+			if (!this.mounted.current) return;
+			const activeItem = untrack(() => this.root.highlightedNode);
+			activeItem?.scrollIntoView({ block: "nearest" });
 		});
 	}
 
 	clearAutoScrollTimer = () => {
-		if (this.autoScrollTimer !== null) {
-			window.clearInterval(this.autoScrollTimer);
-			this.autoScrollTimer = null;
-		}
+		if (this.autoScrollTimer === null) return;
+		window.clearInterval(this.autoScrollTimer);
+		this.autoScrollTimer = null;
 	};
 
 	#onpointerdown = () => {
@@ -1151,7 +1058,6 @@ class SelectScrollButtonImplState {
 	};
 
 	#onpointermove = () => {
-		this.content.onItemLeave?.();
 		if (this.autoScrollTimer !== null) return;
 		this.autoScrollTimer = window.setInterval(() => {
 			this.onAutoScroll();
@@ -1166,7 +1072,7 @@ class SelectScrollButtonImplState {
 		() =>
 			({
 				id: this.id.current,
-				"aria-hidden": "true",
+				"aria-hidden": getAriaHidden(true),
 				style: {
 					flexShrink: 0,
 				},
@@ -1180,292 +1086,175 @@ class SelectScrollButtonImplState {
 class SelectScrollDownButtonState {
 	state: SelectScrollButtonImplState;
 	content: SelectContentState;
+	root: SelectBaseRootState;
 	canScrollDown = $state(false);
 
 	constructor(state: SelectScrollButtonImplState) {
 		this.state = state;
 		this.content = state.content;
+		this.root = state.root;
 		this.state.onAutoScroll = this.handleAutoScroll;
 
 		$effect(() => {
 			const viewport = this.content.viewportNode;
-			const isPositioned = this.content.isPositioned.current;
-
+			const isPositioned = this.content.isPositioned;
 			if (!viewport || !isPositioned) return;
 
 			let cleanup = noop;
 
 			untrack(() => {
 				const handleScroll = () => {
-					const maxScroll = viewport.scrollHeight - viewport.clientHeight;
-					this.canScrollDown = Math.ceil(viewport.scrollTop) < maxScroll;
+					afterTick(() => {
+						const maxScroll = viewport.scrollHeight - viewport.clientHeight;
+						const paddingTop = Number.parseInt(
+							getComputedStyle(viewport).paddingTop,
+							10
+						);
+
+						this.canScrollDown = Math.ceil(viewport.scrollTop) < maxScroll - paddingTop;
+					});
 				};
 				handleScroll();
 
 				cleanup = addEventListener(viewport, "scroll", handleScroll);
 			});
 
-			return () => {
-				cleanup();
-			};
-		});
-
-		$effect(() => {
-			if (this.state.mounted.current) {
-				this.state.alignedPositionState?.handleScrollButtonChange(this.state.id.current);
-			}
+			return cleanup;
 		});
 
 		$effect(() => {
-			if (!this.state.mounted.current) {
-				this.state.clearAutoScrollTimer();
-			}
+			if (this.state.mounted.current) return;
+			this.state.clearAutoScrollTimer();
 		});
 	}
 
 	handleAutoScroll = () => {
 		afterTick(() => {
 			const viewport = this.content.viewportNode;
-			const selectedItem = this.content.getSelectedItem().selectedItemNode;
-			if (!viewport || !selectedItem) {
-				return;
-			}
+			const selectedItem = this.root.highlightedNode;
+			if (!viewport || !selectedItem) return;
 			viewport.scrollTop = viewport.scrollTop + selectedItem.offsetHeight;
 		});
 	};
 
-	props = $derived.by(() => ({ ...this.state.props, [SCROLL_DOWN_BUTTON_ATTR]: "" }) as const);
+	props = $derived.by(
+		() => ({ ...this.state.props, [this.root.bitsAttrs["scroll-down-button"]]: "" }) as const
+	);
 }
 
 class SelectScrollUpButtonState {
 	state: SelectScrollButtonImplState;
 	content: SelectContentState;
+	root: SelectBaseRootState;
 	canScrollUp = $state(false);
 
 	constructor(state: SelectScrollButtonImplState) {
 		this.state = state;
 		this.content = state.content;
+		this.root = state.root;
 		this.state.onAutoScroll = this.handleAutoScroll;
 
 		$effect(() => {
-			let cleanup = noop;
-
-			cleanup();
 			const viewport = this.content.viewportNode;
-			const isPositioned = this.content.isPositioned.current;
-
+			const isPositioned = this.content.isPositioned;
 			if (!viewport || !isPositioned) return;
 
-			const handleScroll = () => {
-				this.canScrollUp = viewport.scrollTop > 0;
-			};
-			handleScroll();
+			let cleanup = noop;
 
-			cleanup = addEventListener(viewport, "scroll", handleScroll);
+			untrack(() => {
+				const handleScroll = () => {
+					const paddingTop = Number.parseInt(getComputedStyle(viewport).paddingTop, 10);
+					this.canScrollUp = viewport.scrollTop - paddingTop > 0;
+				};
+				handleScroll();
 
-			return () => {
-				cleanup();
-			};
-		});
+				cleanup = addEventListener(viewport, "scroll", handleScroll);
+			});
 
-		$effect(() => {
-			if (this.state.mounted.current) {
-				this.state.alignedPositionState?.handleScrollButtonChange(this.state.id.current);
-			}
+			return cleanup;
 		});
 
 		$effect(() => {
-			if (!this.state.mounted.current) {
-				this.state.clearAutoScrollTimer();
-			}
+			if (this.state.mounted.current) return;
+			this.state.clearAutoScrollTimer();
 		});
 	}
 
 	handleAutoScroll = () => {
 		afterTick(() => {
 			const viewport = this.content.viewportNode;
-			const selectedItem = this.content.getSelectedItem().selectedItemNode;
+			const selectedItem = this.root.highlightedNode;
 			if (!viewport || !selectedItem) return;
 			viewport.scrollTop = viewport.scrollTop - selectedItem.offsetHeight;
 		});
 	};
 
-	props = $derived.by(() => ({ ...this.state.props, [SCROLL_UP_BUTTON_ATTR]: "" }) as const);
-}
-
-type SelectGroupStateProps = WithRefProps;
-
-class SelectGroupState {
-	#id: SelectGroupStateProps["id"];
-	#ref: SelectGroupStateProps["ref"];
-	labelNode = $state<HTMLElement | null>(null);
-
-	constructor(props: SelectGroupStateProps) {
-		this.#id = props.id;
-		this.#ref = props.ref;
-
-		useRefById({
-			id: this.#id,
-			ref: this.#ref,
-		});
-	}
-
-	props = $derived.by(
-		() =>
-			({
-				id: this.#id.current,
-				role: "group",
-				"aria-labelledby": this.labelNode?.id ?? undefined,
-				[GROUP_ATTR]: "",
-			}) as const
-	);
-}
-
-type SelectGroupHeadingStateProps = WithRefProps;
-
-class SelectGroupHeadingState {
-	#id: SelectGroupHeadingStateProps["id"];
-	#ref: SelectGroupHeadingStateProps["ref"];
-	group: SelectGroupState;
-
-	constructor(props: SelectGroupHeadingStateProps, group: SelectGroupState) {
-		this.#ref = props.ref;
-		this.#id = props.id;
-		this.group = group;
-
-		useRefById({
-			id: this.#id,
-			ref: this.#ref,
-			onRefChange: (node) => {
-				this.group.labelNode = node;
-			},
-		});
-	}
-
-	props = $derived.by(
-		() =>
-			({
-				id: this.#id.current,
-				[GROUP_LABEL_ATTR]: "",
-			}) as const
-	);
-}
-
-type SelectSeparatorStateProps = WithRefProps;
-
-class SelectSeparatorState {
-	#id: SelectSeparatorStateProps["id"];
-	#ref: SelectSeparatorStateProps["ref"];
-
-	constructor(props: SelectSeparatorStateProps) {
-		this.#id = props.id;
-		this.#ref = props.ref;
-
-		useRefById({
-			id: this.#id,
-			ref: this.#ref,
-		});
-	}
-
 	props = $derived.by(
-		() =>
-			({
-				id: this.#id.current,
-				[SEPARATOR_ATTR]: "",
-				"aria-hidden": getAriaHidden(true),
-			}) as const
+		() => ({ ...this.state.props, [this.root.bitsAttrs["scroll-up-button"]]: "" }) as const
 	);
 }
 
-type SelectArrowStateProps = WithRefProps;
-
-class SelectArrowState {
-	#id: SelectArrowStateProps["id"];
-	#ref: SelectArrowStateProps["ref"];
-
-	constructor(props: SelectArrowStateProps) {
-		this.#id = props.id;
-		this.#ref = props.ref;
-
-		useRefById({
-			id: this.#id,
-			ref: this.#ref,
-		});
-	}
-
-	props = $derived.by(
-		() =>
-			({
-				id: this.#id.current,
-				[ARROW_ATTR]: "",
-				"aria-hidden": getAriaHidden(true),
-			}) as const
-	);
-}
+type InitSelectProps = {
+	type: "single" | "multiple";
+	value: Box<string> | Box<string[]>;
+} & ReadableBoxedValues<{
+	disabled: boolean;
+	required: boolean;
+	loop: boolean;
+	scrollAlignment: "nearest" | "center";
+	name: string;
+	items: { value: string; label: string; disabled?: boolean }[];
+}> &
+	WritableBoxedValues<{
+		open: boolean;
+	}> & {
+		isCombobox: boolean;
+	};
 
-type SelectIconStateProps = WithRefProps;
+const [setSelectRootContext, getSelectRootContext] = createContext<SelectRootState>([
+	"Select.Root",
+	"Combobox.Root",
+]);
 
-class SelectIconState {
-	#id: SelectIconStateProps["id"];
-	#ref: SelectIconStateProps["ref"];
+const [setSelectGroupContext, getSelectGroupContext] = createContext<SelectGroupState>([
+	"Select.Group",
+	"Combobox.Group",
+]);
 
-	constructor(props: SelectIconStateProps) {
-		this.#id = props.id;
-		this.#ref = props.ref;
+const [setSelectContentContext, getSelectContentContext] = createContext<SelectContentState>([
+	"Select.Content",
+	"Combobox.Content",
+]);
 
-		useRefById({
-			id: this.#id,
-			ref: this.#ref,
-		});
-	}
+export function useSelectRoot(props: InitSelectProps) {
+	const { type, ...rest } = props;
 
-	props = $derived.by(
-		() =>
-			({
-				id: this.#id.current,
-				[ICON_ATTR]: "",
-				"aria-hidden": getAriaHidden(true),
-			}) as const
-	);
-}
+	const rootState =
+		type === "single"
+			? new SelectSingleRootState(rest as SelectSingleRootStateProps)
+			: new SelectMultipleRootState(rest as SelectMultipleRootStateProps);
 
-export function useSelectRoot(props: SelectRootStateProps) {
-	return setSelectRootContext(new SelectRootState(props));
+	return setSelectRootContext(rootState);
 }
 
-export function useSelectContentFrag() {
-	return new SelectContentFragState(getSelectRootContext());
+export function useSelectInput(props: SelectInputStateProps) {
+	return new SelectInputState(props, getSelectRootContext());
 }
 
 export function useSelectContent(props: SelectContentStateProps) {
 	return setSelectContentContext(new SelectContentState(props, getSelectRootContext()));
 }
 
-export function useSelectItemAlignedPosition(props: SelectItemAlignedPositionStateProps) {
-	const contentContext = getSelectContentContext();
-	const alignedPositionState = new SelectItemAlignedPositionState(props, contentContext);
-	contentContext.alignedPositionState = alignedPositionState;
-	return setSelectContentItemAlignedContext(alignedPositionState);
-}
-
-export function useSelectFloatingPosition() {
-	return new SelectFloatingPositionState(getSelectContentContext());
-}
-
 export function useSelectTrigger(props: SelectTriggerStateProps) {
 	return new SelectTriggerState(props, getSelectRootContext());
 }
 
-export function useSelectValue() {
-	return new SelectValueState(getSelectRootContext());
+export function useSelectComboTrigger(props: SelectComboTriggerStateProps) {
+	return new SelectComboTriggerState(props, getSelectRootContext());
 }
 
 export function useSelectItem(props: SelectItemStateProps) {
-	return setSelectItemContext(new SelectItemState(props, getSelectContentContext()));
-}
-
-export function useSelectItemText(props: SelectItemTextStateProps) {
-	return new SelectItemTextState(props, getSelectItemContext());
+	return new SelectItemState(props, getSelectRootContext());
 }
 
 export function useSelectViewport(props: SelectViewportStateProps) {
@@ -1473,37 +1262,57 @@ export function useSelectViewport(props: SelectViewportStateProps) {
 }
 
 export function useSelectScrollUpButton(props: SelectScrollButtonImplStateProps) {
-	const state = new SelectScrollButtonImplState(props, getSelectContentContext());
-	return new SelectScrollUpButtonState(state);
+	return new SelectScrollUpButtonState(
+		new SelectScrollButtonImplState(props, getSelectContentContext())
+	);
 }
 
 export function useSelectScrollDownButton(props: SelectScrollButtonImplStateProps) {
-	const state = new SelectScrollButtonImplState(props, getSelectContentContext());
-	return new SelectScrollDownButtonState(state);
+	return new SelectScrollDownButtonState(
+		new SelectScrollButtonImplState(props, getSelectContentContext())
+	);
 }
 
 export function useSelectGroup(props: SelectGroupStateProps) {
-	return setSelectGroupContext(new SelectGroupState(props));
+	return setSelectGroupContext(new SelectGroupState(props, getSelectRootContext()));
 }
 
 export function useSelectGroupHeading(props: SelectGroupHeadingStateProps) {
 	return new SelectGroupHeadingState(props, getSelectGroupContext());
 }
 
-export function useSelectArrow(props: SelectArrowStateProps) {
-	return new SelectArrowState(props);
-}
-
-export function useSelectSeparator(props: SelectSeparatorStateProps) {
-	return new SelectSeparatorState(props);
+export function useSelectHiddenInput(props: SelectHiddenInputStateProps) {
+	return new SelectHiddenInputState(props, getSelectRootContext());
 }
 
-export function useSelectIcon(props: SelectIconStateProps) {
-	return new SelectIconState(props);
-}
-
-//
-
-export function shouldShowPlaceholder(value?: string) {
-	return value === "" || value === undefined;
+////////////////////////////////////
+// Helpers
+////////////////////////////////////
+
+const selectParts = [
+	"trigger",
+	"content",
+	"item",
+	"viewport",
+	"scroll-up-button",
+	"scroll-down-button",
+	"group",
+	"group-label",
+	"separator",
+	"arrow",
+	"input",
+	"content-wrapper",
+	"item-text",
+	"value",
+] as const;
+
+type SelectBitsAttrs = Record<(typeof selectParts)[number], string>;
+
+export function getSelectBitsAttrs(root: SelectBaseRootState): SelectBitsAttrs {
+	const isCombobox = root.isCombobox;
+	const attrObj = {} as SelectBitsAttrs;
+	for (const part of selectParts) {
+		attrObj[part] = isCombobox ? `data-combobox-${part}` : `data-select-${part}`;
+	}
+	return attrObj;
 }
diff --git a/packages/bits-ui/src/lib/bits/select/types.ts b/packages/bits-ui/src/lib/bits/select/types.ts
index 747e6f84b..25621d2ea 100644
--- a/packages/bits-ui/src/lib/bits/select/types.ts
+++ b/packages/bits-ui/src/lib/bits/select/types.ts
@@ -1,66 +1,66 @@
-import type { HTMLSelectAttributes } from "svelte/elements";
 import type { Expand } from "svelte-toolbelt";
-import type { PopperLayerProps } from "../utilities/popper-layer/types.js";
+import type { PortalProps } from "../utilities/portal/types.js";
+import type { PopperLayerProps, PopperLayerStaticProps } 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";
 import type {
 	BitsPrimitiveButtonAttributes,
 	BitsPrimitiveDivAttributes,
-	BitsPrimitiveSpanAttributes,
 } from "$lib/shared/attributes.js";
-import type { Direction } from "$lib/shared/index.js";
-import type { PortalProps } from "$lib/bits/utilities/portal/index.js";
-
-export type SelectRootPropsWithoutHTML = WithChildren<{
-	/**
-	 * The open state of the select.
-	 */
-	open?: boolean;
-
-	/**
-	 * A callback that is called when the select's open state changes.
-	 */
-	onOpenChange?: OnChangeFn<boolean>;
-
-	/**
-	 * The value of the select.
-	 */
-	value?: string;
-
+import type {
+	OnChangeFn,
+	WithChild,
+	WithChildNoChildrenSnippetProps,
+	WithChildren,
+	Without,
+} from "$lib/internal/types.js";
+
+export type SelectBaseRootPropsWithoutHTML = WithChildren<{
 	/**
-	 * A callback that is called when the select's value changes.
+	 * Whether the combobox is disabled.
+	 *
+	 * @defaultValue `false`
 	 */
-	onValueChange?: OnChangeFn<string>;
+	disabled?: boolean;
 
 	/**
-	 * The reading direction of the select.
+	 * Whether the combobox is required (for form submission).
+	 *
+	 * @defaultValue `false`
 	 */
-	dir?: Direction;
+	required?: boolean;
 
 	/**
-	 * The name of the select used in form submission.
+	 * The name to apply to the hidden input element for form submission.
+	 * If not provided, a hidden input will not be rendered and the combobox will not be part of a form.
 	 */
 	name?: string;
 
 	/**
-	 * The native HTML select autocomplete attribute.
+	 * Whether the combobox popover is open.
+	 *
+	 * @defaultValue `false`
+	 * @bindable
 	 */
-	autocomplete?: HTMLSelectAttributes["autocomplete"];
+	open?: boolean;
 
 	/**
-	 * The native HTML select `form` attribute.
+	 * A callback function called when the open state changes.
 	 */
-	form?: string;
+	onOpenChange?: OnChangeFn<boolean>;
 
 	/**
-	 * Whether the select is disabled.
+	 * Whether or not the combobox menu should loop through the items when navigating with the keyboard.
+	 *
+	 * @defaultValue `false`
 	 */
-	disabled?: boolean;
+	loop?: boolean;
 
 	/**
-	 * Whether the select is required.
+	 * How to scroll the combobox items into view when navigating with the keyboard.
+	 *
+	 * @defaultValue `"nearest"`
 	 */
-	required?: boolean;
+	scrollAlignment?: "nearest" | "center";
 
 	/**
 	 * Whether or not the open state is controlled or not. If `true`, the component will not update
@@ -79,8 +79,87 @@ export type SelectRootPropsWithoutHTML = WithChildren<{
 	 * @defaultValue false
 	 */
 	controlledValue?: boolean;
+
+	/**
+	 * Optionally provide an array of `value` and `label` pairs that will be used to match
+	 * and trigger selection when the trigger is focused and a key is pressed while the content
+	 * is closed. It's also used to handle form autofill.
+	 *
+	 * By providing this value, you enable selecting a value when the trigger is focused and a key
+	 * is pressed without the content being open, similar to how a native `<select>` works.
+	 * For this to work, you must
+	 *
+	 * The label is what the user will potentially search for via typeahead, and the value is what
+	 * is set as the selected value when a typeahead match is found.
+	 *
+	 * We can't rely on the individual `Item` components to do this because they may not ever be
+	 * mounted to do the DOM if using a conditional block with a Svelte transition or certain
+	 * animation libraries.
+	 *
+	 * IMPORTANT: This functionality is only available for single-select listboxes.
+	 */
+	items?: { value: string; label: string; disabled?: boolean }[];
 }>;
 
+export type SelectSingleRootPropsWithoutHTML = {
+	/**
+	 * The value of the selected combobox item.
+	 *
+	 * @bindable
+	 */
+	value?: string;
+
+	/**
+	 * A callback function called when the value changes.
+	 */
+	onValueChange?: OnChangeFn<string>;
+
+	/**
+	 * The type of combobox.
+	 *
+	 * @required
+	 */
+	type: "single";
+};
+
+export type SelectMultipleRootPropsWithoutHTML = {
+	/**
+	 * The value of the selected combobox item.
+	 *
+	 * @bindable
+	 */
+	value?: string[];
+
+	/**
+	 * A callback function called when the value changes.
+	 */
+	onValueChange?: OnChangeFn<string[]>;
+
+	/**
+	 * The type of combobox.
+	 *
+	 * @required
+	 */
+	type: "multiple";
+};
+
+export type SelectSingleRootProps = SelectBaseRootPropsWithoutHTML &
+	SelectSingleRootPropsWithoutHTML &
+	Without<
+		BitsPrimitiveDivAttributes,
+		SelectSingleRootPropsWithoutHTML | SelectBaseRootPropsWithoutHTML
+	>;
+
+export type SelectMultipleRootProps = SelectBaseRootPropsWithoutHTML &
+	SelectMultipleRootPropsWithoutHTML &
+	Without<
+		BitsPrimitiveDivAttributes,
+		SelectMultipleRootPropsWithoutHTML | SelectBaseRootPropsWithoutHTML
+	>;
+
+export type SelectRootPropsWithoutHTML = SelectBaseRootPropsWithoutHTML &
+	(SelectSingleRootPropsWithoutHTML | SelectMultipleRootPropsWithoutHTML);
+
 export type SelectRootProps = SelectRootPropsWithoutHTML;
 
 export type _SharedSelectContentProps = {
@@ -92,56 +171,78 @@ export type _SharedSelectContentProps = {
 	loop?: boolean;
 };
 
-export type SelectContentImplPropsWithoutHTML = Expand<
-	WithChild<
-		Omit<PopperLayerProps, "content"> & {
-			/**
-			 *  The positioning mode to use
-			 *
-			 *  `item-aligned` - behaves similarly to a native MacOS menu by positioning content relative to the active item. <br>
-			 *  `floating  (default)` - positions content in the same way as our other primitives, for example `Popover` or `DropdownMenu`.
-			 */
-			position?: "item-aligned" | "floating";
-		} & _SharedSelectContentProps
-	>
->;
-
-export type SelectContentImplProps = SelectContentImplPropsWithoutHTML &
-	Without<BitsPrimitiveDivAttributes, SelectContentImplPropsWithoutHTML>;
-
-export type SelectContentPropsWithoutHTML = SelectContentImplPropsWithoutHTML & {
+export type SelectContentSnippetProps = {
 	/**
-	 * Whether to force mount the content for use with certain animation libraries.
+	 * Whether the content is open or closed. Used alongside the `forceMount` prop to conditionally
+	 * render the content using Svelte transitions.
 	 */
-	forceMount?: boolean;
+	open: boolean;
 };
 
+export type SelectContentPropsWithoutHTML = Expand<
+	WithChildNoChildrenSnippetProps<
+		Omit<PopperLayerProps, "content" | "onOpenAutoFocus" | "trapFocus"> &
+			_SharedSelectContentProps,
+		SelectContentSnippetProps
+	>
+>;
+
 export type SelectContentProps = SelectContentPropsWithoutHTML &
 	Without<BitsPrimitiveDivAttributes, SelectContentPropsWithoutHTML>;
 
-export type SelectItemSnippetProps = { selected: boolean };
+export type SelectContentStaticPropsWithoutHTML = Expand<
+	WithChildNoChildrenSnippetProps<
+		Omit<PopperLayerStaticProps, "content" | "onOpenAutoFocus" | "trapFocus"> &
+			_SharedSelectContentProps,
+		SelectContentSnippetProps
+	>
+>;
+
+export type SelectContentStaticProps = SelectContentStaticPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, SelectContentStaticPropsWithoutHTML>;
+
+export type SelectTriggerPropsWithoutHTML = WithChild;
+
+export type SelectTriggerProps = SelectTriggerPropsWithoutHTML &
+	Without<BitsPrimitiveButtonAttributes, SelectTriggerPropsWithoutHTML>;
+
+export type SelectItemSnippetProps = { selected: boolean; highlighted: boolean };
 
 export type SelectItemPropsWithoutHTML = WithChild<
 	{
 		/**
 		 * The value of the item.
+		 *
+		 * @required
 		 */
 		value: string;
 
+		/**
+		 * The label of the item. If provided, this is the item that users will search for.
+		 * If not provided, the value will be used as the label.
+		 */
+		label?: string;
+
 		/**
 		 * Whether the item is disabled.
 		 *
-		 * @defaultValue false
+		 * @defaultValue `false`
 		 */
 		disabled?: boolean;
 
 		/**
-		 * Optionally provide text to use for typeahead purposes.
-		 *
-		 * By default, the typeahead behavior will use the `textContent` of the `SelectItemText`
-		 * component. Use this prop if the text content is not suitable for typeahead.
+		 * A callback function called when the item is highlighted. This can be used as a
+		 * replacement for `onfocus` since we don't actually focus the item and instead
+		 * rely on the `aria-activedescendant` attribute to indicate the highlighted item.
+		 */
+		onHighlight?: () => void;
+
+		/**
+		 * A callback function called when the item is unhighlighted. This can be used as a
+		 * replacement for `onblur` since we don't actually focus the item and instead
+		 * rely on the `aria-activedescendant` attribute to indicate the highlighted item.
 		 */
-		textValue?: string;
+		onUnhighlight?: () => void;
 	},
 	SelectItemSnippetProps
 >;
@@ -149,40 +250,34 @@ export type SelectItemPropsWithoutHTML = WithChild<
 export type SelectItemProps = SelectItemPropsWithoutHTML &
 	Without<BitsPrimitiveDivAttributes, SelectItemPropsWithoutHTML>;
 
-export type SelectTriggerPropsWithoutHTML = WithChild<{
-	/**
-	 * Whether the trigger is disabled.
-	 *
-	 * @defaultValue false
-	 */
-	disabled?: boolean | null | undefined;
-}>;
+export type SelectGroupPropsWithoutHTML = WithChild;
 
-export type SelectTriggerProps = SelectTriggerPropsWithoutHTML &
-	Without<BitsPrimitiveButtonAttributes, SelectTriggerPropsWithoutHTML>;
+export type SelectGroupProps = SelectGroupPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, SelectGroupPropsWithoutHTML>;
 
-export type SelectValuePropsWithoutHTML = WithChild<{
-	/**
-	 * The content to render inside the `Select.Value` when no `value` is set.
-	 */
-	placeholder?: string;
-}>;
+export type SelectGroupHeadingPropsWithoutHTML = WithChild;
 
-export type SelectValueProps = SelectValuePropsWithoutHTML &
-	Without<Omit<BitsPrimitiveSpanAttributes, "id">, SelectValuePropsWithoutHTML>;
+export type SelectGroupHeadingProps = SelectGroupHeadingPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, SelectGroupHeadingPropsWithoutHTML>;
 
-export type SelectItemTextPropsWithoutHTML = WithChild;
+export type SelectSeparatorPropsWithoutHTML = WithChild;
 
-export type SelectItemTextProps = SelectItemTextPropsWithoutHTML &
-	Without<BitsPrimitiveSpanAttributes, SelectItemTextPropsWithoutHTML>;
+export type SelectSeparatorProps = SelectSeparatorPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, SelectSeparatorPropsWithoutHTML>;
+
+export type SelectPortalPropsWithoutHTML = PortalProps;
+
+export type SelectPortalProps = SelectPortalPropsWithoutHTML;
+
+export type SelectArrowPropsWithoutHTML = ArrowPropsWithoutHTML;
+
+export type SelectArrowProps = ArrowProps;
 
 export type SelectViewportPropsWithoutHTML = WithChild;
+
 export type SelectViewportProps = SelectViewportPropsWithoutHTML &
 	Without<BitsPrimitiveDivAttributes, SelectViewportPropsWithoutHTML>;
 
-export type SelectPortalPropsWithoutHTML = PortalProps;
-export type SelectPortalProps = SelectPortalPropsWithoutHTML;
-
 export type SelectScrollUpButtonPropsWithoutHTML = WithChild;
 
 export type SelectScrollUpButtonProps = SelectScrollUpButtonPropsWithoutHTML &
@@ -192,27 +287,3 @@ export type SelectScrollDownButtonPropsWithoutHTML = WithChild;
 
 export type SelectScrollDownButtonProps = SelectScrollDownButtonPropsWithoutHTML &
 	Without<BitsPrimitiveDivAttributes, SelectScrollDownButtonPropsWithoutHTML>;
-
-export type SelectIconPropsWithoutHTML = WithChild;
-
-export type SelectIconProps = SelectIconPropsWithoutHTML &
-	Without<BitsPrimitiveSpanAttributes, SelectIconPropsWithoutHTML>;
-
-export type SelectGroupPropsWithoutHTML = WithChild;
-
-export type SelectGroupProps = SelectGroupPropsWithoutHTML &
-	Without<BitsPrimitiveDivAttributes, SelectGroupPropsWithoutHTML>;
-
-export type SelectGroupHeadingPropsWithoutHTML = WithChild;
-
-export type SelectGroupHeadingProps = SelectGroupHeadingPropsWithoutHTML &
-	Without<BitsPrimitiveDivAttributes, SelectGroupHeadingPropsWithoutHTML>;
-
-export type SelectSeparatorPropsWithoutHTML = WithChild;
-
-export type SelectSeparatorProps = SelectSeparatorPropsWithoutHTML &
-	Without<BitsPrimitiveDivAttributes, SelectSeparatorPropsWithoutHTML>;
-
-export type SelectArrowPropsWithoutHTML = ArrowPropsWithoutHTML;
-
-export type SelectArrowProps = ArrowProps;
diff --git a/packages/bits-ui/src/lib/internal/arrays.test.ts b/packages/bits-ui/src/lib/internal/arrays.test.ts
index cbf8d4f72..2be1a4858 100644
--- a/packages/bits-ui/src/lib/internal/arrays.test.ts
+++ b/packages/bits-ui/src/lib/internal/arrays.test.ts
@@ -1,5 +1,15 @@
 import { describe, expect, it } from "vitest";
-import { arraysAreEqual, backward, chunk, forward, isValidIndex, next, prev } from "./arrays.js";
+import {
+	arraysAreEqual,
+	backward,
+	chunk,
+	forward,
+	getNextMatch,
+	isValidIndex,
+	next,
+	prev,
+	wrapArray,
+} from "./arrays.js";
 
 describe("arraysAreEqual", () => {
 	it("should return true for two empty arrays", () => {
@@ -345,3 +355,95 @@ describe("backward function", () => {
 		expect(backward(testArray, 4, 11)).toBe(4);
 	});
 });
+
+describe("getNextMatch", () => {
+	const values = ["apple", "banana", "cherry", "date", "elderberry"];
+
+	it("should return the first match when no current match is provided", () => {
+		expect(getNextMatch(values, "b")).toBe("banana");
+	});
+
+	it("should return the next match when a current match is provided", () => {
+		expect(getNextMatch(values, "c", "cherry")).toBe(undefined);
+		expect(getNextMatch(values, "c", "banana")).toBe("cherry");
+	});
+
+	it("should handle repeated characters in search", () => {
+		expect(getNextMatch(values, "aaa", "apple")).toBe(undefined);
+		expect(getNextMatch(values, "aaa", "banana")).toBe("apple");
+	});
+
+	it("should wrap around the array when reaching the end", () => {
+		expect(getNextMatch(values, "d", "date")).toBe(undefined);
+		expect(getNextMatch(values, "a", "elderberry")).toBe("apple");
+	});
+
+	it("should be case-insensitive", () => {
+		expect(getNextMatch(values, "B", "apple")).toBe("banana");
+		expect(getNextMatch(values, "cH", "banana")).toBe("cherry");
+	});
+
+	it("should handle empty search string", () => {
+		expect(getNextMatch(values, "", "banana")).toBe(undefined);
+	});
+
+	it("should handle empty values array", () => {
+		expect(getNextMatch([], "a")).toBe(undefined);
+	});
+
+	it("should exclude current match when search is a single character", () => {
+		expect(getNextMatch(values, "a", "apple")).toBe(undefined);
+		expect(getNextMatch(values, "b", "banana")).toBe(undefined);
+	});
+
+	it("should not exclude current match when search is multiple characters", () => {
+		expect(getNextMatch(values, "ap", "apple")).toBe(undefined);
+		expect(getNextMatch(values, "ba", "banana")).toBe(undefined);
+	});
+
+	it("should handle values with common prefixes", () => {
+		const prefixValues = ["prefix1", "prefix2", "prefix3", "other"];
+		expect(getNextMatch(prefixValues, "pre", "prefix1")).toBe(undefined);
+		expect(getNextMatch(prefixValues, "pre", "prefix2")).toBe(undefined);
+		expect(getNextMatch(prefixValues, "pre", "prefix3")).toBe(undefined);
+		expect(getNextMatch(prefixValues, "pre", "other")).toBe("prefix1");
+	});
+
+	it("should cycle through values with common prefixes using single character search", () => {
+		const prefixValues = ["prefix1", "prefix2", "prefix3", "other"];
+		expect(getNextMatch(prefixValues, "p", "other")).toBe("prefix1");
+		expect(getNextMatch(prefixValues, "p", "prefix1")).toBe("prefix2");
+		expect(getNextMatch(prefixValues, "p", "prefix2")).toBe("prefix3");
+		expect(getNextMatch(prefixValues, "p", "prefix3")).toBe("prefix1");
+	});
+
+	it("should handle single character search with prefixed values", () => {
+		const prefixValues = ["prefix1", "prefix2", "prefix3", "other"];
+		expect(getNextMatch(prefixValues, "p")).toBe("prefix1");
+		expect(getNextMatch(prefixValues, "p", "prefix1")).toBe("prefix2");
+		expect(getNextMatch(prefixValues, "o")).toBe("other");
+		expect(getNextMatch(prefixValues, "o", "other")).toBe(undefined);
+	});
+});
+
+describe("wrapArray", () => {
+	it("should wrap the array starting from the given index", () => {
+		expect(wrapArray(["a", "b", "c", "d"], 2)).toEqual(["c", "d", "a", "b"]);
+	});
+
+	it("should handle start index 0 (no wrapping)", () => {
+		expect(wrapArray([1, 2, 3, 4, 5], 0)).toEqual([1, 2, 3, 4, 5]);
+	});
+
+	it("should wrap correctly with start index equal to array length", () => {
+		expect(wrapArray(["x", "y", "z"], 3)).toEqual(["x", "y", "z"]);
+	});
+
+	it("should work with empty array", () => {
+		expect(wrapArray([], 2)).toEqual([]);
+	});
+
+	it("should work with array of different types", () => {
+		expect(wrapArray([true, 42, "test"], 1)).toEqual([42, "test", true]);
+	});
+});
diff --git a/packages/bits-ui/src/lib/internal/arrays.ts b/packages/bits-ui/src/lib/internal/arrays.ts
index 87f75c91f..12f64f7f6 100644
--- a/packages/bits-ui/src/lib/internal/arrays.ts
+++ b/packages/bits-ui/src/lib/internal/arrays.ts
@@ -201,3 +201,41 @@ export function backward<T>(
 
 	return array[targetIndex];
 }
+
+/**
+ * This is the "meat" of the typeahead matching logic. It takes in all the values,
+ * the search and the current match, and returns the next match (or `undefined`).
+ *
+ * We normalize the search because if a user has repeatedly pressed a character,
+ * we want the exact same behavior as if we only had that one character
+ * (ie. cycle through options starting with that character)
+ *
+ * We also reorder the values by wrapping the array around the current match.
+ * This is so we always look forward from the current match, and picking the first
+ * match will always be the correct one.
+ *
+ * Finally, if the normalized search is exactly one character, we exclude the
+ * current match from the values because otherwise it would be the first to match always
+ * and focus would never move. This is as opposed to the regular case, where we
+ * don't want focus to move if the current match still matches.
+ */
+export function getNextMatch(values: string[], search: string, currentMatch?: string) {
+	const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
+	const normalizedSearch = isRepeated ? search[0]! : search;
+	const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
+	let wrappedValues = wrapArray(values, Math.max(currentMatchIndex, 0));
+	const excludeCurrentMatch = normalizedSearch.length === 1;
+	if (excludeCurrentMatch) wrappedValues = wrappedValues.filter((v) => v !== currentMatch);
+	const nextMatch = wrappedValues.find((value) =>
+		value?.toLowerCase().startsWith(normalizedSearch.toLowerCase())
+	);
+	return nextMatch !== currentMatch ? nextMatch : undefined;
+}
+
+/**
+ * Wraps an array around itself at a given start index
+ * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`
+ */
+export function wrapArray<T>(array: T[], startIndex: number) {
+	return array.map((_, index) => array[(startIndex + index) % array.length]) as T[];
+}
diff --git a/packages/bits-ui/src/lib/internal/use-data-typeahead.svelte.ts b/packages/bits-ui/src/lib/internal/use-data-typeahead.svelte.ts
new file mode 100644
index 000000000..3e916cfbf
--- /dev/null
+++ b/packages/bits-ui/src/lib/internal/use-data-typeahead.svelte.ts
@@ -0,0 +1,41 @@
+import { getNextMatch } from "./arrays.js";
+import { boxAutoReset } from "./box-auto-reset.svelte.js";
+
+export type DataTypeahead = ReturnType<typeof useDataTypeahead>;
+
+type UseDataTypeaheadOpts = {
+	onMatch: (value: string) => void;
+	getCurrentItem: () => string;
+	enabled: boolean;
+};
+
+export function useDataTypeahead(opts: UseDataTypeaheadOpts) {
+	// Reset `search` 1 second after it was last updated
+	const search = boxAutoReset("", 1000);
+
+	function handleTypeaheadSearch(key: string, candidateValues: string[]) {
+		if (!opts.enabled) return;
+		if (!candidateValues.length) return;
+
+		search.current = search.current + key;
+		const currentItem = opts.getCurrentItem();
+		const currentMatch = candidateValues.find((item) => item === currentItem) ?? "";
+		const values = candidateValues.map((item) => item ?? "");
+		const nextMatch = getNextMatch(values, search.current, currentMatch);
+		const newItem = candidateValues.find((item) => item === nextMatch);
+		if (newItem) {
+			opts.onMatch(newItem);
+		}
+		return newItem;
+	}
+
+	function resetTypeahead() {
+		search.current = "";
+	}
+
+	return {
+		search,
+		handleTypeaheadSearch,
+		resetTypeahead,
+	};
+}
diff --git a/packages/bits-ui/src/lib/internal/use-dom-typeahead.svelte.ts b/packages/bits-ui/src/lib/internal/use-dom-typeahead.svelte.ts
new file mode 100644
index 000000000..369575a86
--- /dev/null
+++ b/packages/bits-ui/src/lib/internal/use-dom-typeahead.svelte.ts
@@ -0,0 +1,44 @@
+import { getNextMatch } from "./arrays.js";
+import { boxAutoReset } from "./box-auto-reset.svelte.js";
+
+export type DOMTypeahead = ReturnType<typeof useDOMTypeahead>;
+
+type UseDOMTypeaheadOpts = {
+	onMatch?: (item: HTMLElement) => void;
+	getCurrentItem?: () => HTMLElement | null;
+};
+
+export function useDOMTypeahead(opts?: UseDOMTypeaheadOpts) {
+	// Reset `search` 1 second after it was last updated
+	const search = boxAutoReset("", 1000);
+
+	const onMatch = opts?.onMatch ?? ((node) => node.focus());
+	const getCurrentItem =
+		opts?.getCurrentItem ?? (() => document.activeElement as HTMLElement | null);
+
+	function handleTypeaheadSearch(key: string, candidates: HTMLElement[]) {
+		if (!candidates.length) return;
+
+		search.current = search.current + key;
+		const currentItem = getCurrentItem();
+		const currentMatch =
+			candidates.find((item) => item === currentItem)?.textContent?.trim() ?? "";
+		const values = candidates.map((item) => item.textContent?.trim() ?? "");
+		const nextMatch = getNextMatch(values, search.current, currentMatch);
+		const newItem = candidates.find((item) => item.textContent?.trim() === nextMatch);
+		if (newItem) {
+			onMatch(newItem);
+		}
+		return newItem;
+	}
+
+	function resetTypeahead() {
+		search.current = "";
+	}
+
+	return {
+		search,
+		handleTypeaheadSearch,
+		resetTypeahead,
+	};
+}
diff --git a/packages/bits-ui/src/lib/internal/use-typeahead.svelte.ts b/packages/bits-ui/src/lib/internal/use-typeahead.svelte.ts
deleted file mode 100644
index b0c8d5bb4..000000000
--- a/packages/bits-ui/src/lib/internal/use-typeahead.svelte.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { boxAutoReset } from "./box-auto-reset.svelte.js";
-
-export type Typeahead = ReturnType<typeof useTypeahead>;
-
-type TypeaheadOpts = {
-	onMatch?: (item: HTMLElement) => void;
-	getCurrentItem?: () => HTMLElement | null;
-};
-
-export function useTypeahead(opts?: TypeaheadOpts) {
-	// Reset `search` 1 second after it was last updated
-	const search = boxAutoReset("", 1000);
-
-	const onMatch = opts?.onMatch ?? ((node) => node.focus());
-	const getCurrentItem =
-		opts?.getCurrentItem ?? (() => document.activeElement as HTMLElement | null);
-
-	function handleTypeaheadSearch(key: string, candidates: HTMLElement[]) {
-		if (!candidates.length) return;
-
-		search.current = search.current + key;
-		const currentItem = getCurrentItem();
-		const currentMatch =
-			candidates.find((item) => item === currentItem)?.textContent?.trim() ?? "";
-		const values = candidates.map((item) => item.textContent?.trim() ?? "");
-		const nextMatch = getNextMatch(values, search.current, currentMatch);
-		const newItem = candidates.find((item) => item.textContent?.trim() === nextMatch);
-		if (newItem) {
-			onMatch(newItem);
-		}
-		return newItem;
-	}
-
-	function resetTypeahead() {
-		search.current = "";
-	}
-
-	return {
-		search,
-		handleTypeaheadSearch,
-		resetTypeahead,
-	};
-}
-
-/**
- * Wraps an array around itself at a given start index
- * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`
- */
-export function wrapArray<T>(array: T[], startIndex: number) {
-	return array.map((_, index) => array[(startIndex + index) % array.length]) as T[];
-}
-
-/**
- * This is the "meat" of the typeahead matching logic. It takes in all the values,
- * the search and the current match, and returns the next match (or `undefined`).
- *
- * We normalize the search because if a user has repeatedly pressed a character,
- * we want the exact same behavior as if we only had that one character
- * (ie. cycle through options starting with that character)
- *
- * We also reorder the values by wrapping the array around the current match.
- * This is so we always look forward from the current match, and picking the first
- * match will always be the correct one.
- *
- * Finally, if the normalized search is exactly one character, we exclude the
- * current match from the values because otherwise it would be the first to match always
- * and focus would never move. This is as opposed to the regular case, where we
- * don't want focus to move if the current match still matches.
- */
-export function getNextMatch(values: string[], search: string, currentMatch?: string) {
-	const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
-	const normalizedSearch = isRepeated ? search[0]! : search;
-	const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;
-	let wrappedValues = wrapArray(values, Math.max(currentMatchIndex, 0));
-	const excludeCurrentMatch = normalizedSearch.length === 1;
-	if (excludeCurrentMatch) wrappedValues = wrappedValues.filter((v) => v !== currentMatch);
-	const nextMatch = wrappedValues.find((value) =>
-		value?.toLowerCase().startsWith(normalizedSearch.toLowerCase())
-	);
-	return nextMatch !== currentMatch ? nextMatch : undefined;
-}
diff --git a/packages/bits-ui/src/lib/types.ts b/packages/bits-ui/src/lib/types.ts
index c635858db..402db24d5 100644
--- a/packages/bits-ui/src/lib/types.ts
+++ b/packages/bits-ui/src/lib/types.ts
@@ -17,7 +17,7 @@ export type * from "$lib/bits/dialog/types.js";
 export type * from "$lib/bits/dropdown-menu/types.js";
 export type * from "$lib/bits/label/types.js";
 export type * from "$lib/bits/link-preview/types.js";
-export type * from "$lib/bits/listbox/types.js";
+export type * from "$lib/bits/select/types.js";
 export type * from "$lib/bits/menubar/types.js";
 export type * from "$lib/bits/navigation-menu/types.js";
 export type * from "$lib/bits/pagination/types.js";
diff --git a/packages/tests/src/tests/listbox/listbox-test.svelte b/packages/tests/src/tests/listbox/listbox-test.svelte
deleted file mode 100644
index 0f8858f41..000000000
--- a/packages/tests/src/tests/listbox/listbox-test.svelte
+++ /dev/null
@@ -1,79 +0,0 @@
-<script lang="ts" module>
-	import {
-		Listbox,
-		type ListboxSingleRootProps,
-		type WithoutChildren,
-		type WithoutChildrenOrChild,
-	} from "bits-ui";
-	export type Item = {
-		value: string;
-		label: string;
-		disabled?: boolean;
-	};
-
-	export type ListboxSingleTestProps = WithoutChildren<ListboxSingleRootProps> & {
-		contentProps?: WithoutChildrenOrChild<Listbox.ContentProps>;
-		portalProps?: WithoutChildrenOrChild<Listbox.PortalProps>;
-		items: Item[];
-		searchValue?: string;
-	};
-</script>
-
-<script lang="ts">
-	let {
-		contentProps,
-		portalProps,
-		items,
-		value = "",
-		open = false,
-		searchValue = "",
-		...restProps
-	}: ListboxSingleTestProps = $props();
-
-	const filteredItems = $derived(
-		searchValue === ""
-			? items
-			: items.filter((item) => item.label.toLowerCase().includes(searchValue.toLowerCase()))
-	);
-
-	const selectedLabel = $derived(
-		value ? items.find((item) => item.value === value)?.label : "Open Listbox"
-	);
-</script>
-
-<main data-testid="main">
-	<Listbox.Root bind:value bind:open {...restProps} type="single">
-		<Listbox.Trigger data-testid="trigger">
-			{selectedLabel}
-		</Listbox.Trigger>
-		<Listbox.Portal {...portalProps}>
-			<Listbox.Content data-testid="content" {...contentProps}>
-				<Listbox.Group data-testid="group">
-					<Listbox.GroupHeading data-testid="group-label">Options</Listbox.GroupHeading>
-					{#each filteredItems as { value, label, disabled }}
-						<Listbox.Item data-testid={value} {disabled} {value} {label}>
-							{#snippet children({ selected })}
-								{#if selected}
-									<span data-testid="{value}-indicator">x</span>
-								{/if}
-								{label}
-							{/snippet}
-						</Listbox.Item>
-					{/each}
-				</Listbox.Group>
-			</Listbox.Content>
-		</Listbox.Portal>
-	</Listbox.Root>
-	<div data-testid="outside"></div>
-	<button data-testid="open-binding" onclick={() => (open = !open)}>
-		{open}
-	</button>
-	<button data-testid="value-binding" onclick={() => (value = "")}>
-		{#if value === ""}
-			empty
-		{:else}
-			{value}
-		{/if}
-	</button>
-</main>
-<div data-testid="portal-target" id="portal-target"></div>
diff --git a/packages/tests/src/tests/listbox/listbox.test.ts b/packages/tests/src/tests/listbox/listbox.test.ts
deleted file mode 100644
index a8c580ee8..000000000
--- a/packages/tests/src/tests/listbox/listbox.test.ts
+++ /dev/null
@@ -1,741 +0,0 @@
-import { render, waitFor } from "@testing-library/svelte";
-import { axe } from "jest-axe";
-import { describe, it } from "vitest";
-import { type Component, tick } from "svelte";
-import { type AnyFn, getTestKbd, setupUserEvents, sleep } from "../utils.js";
-import ListboxTest from "./listbox-test.svelte";
-import type { Item, ListboxSingleTestProps } from "./listbox-test.svelte";
-import type { ListboxMultipleTestProps } from "./listbox-multi-test.svelte";
-import ListboxMultiTest from "./listbox-multi-test.svelte";
-import type { ListboxForceMountTestProps } from "./listbox-force-mount-test.svelte";
-import ListboxForceMountTest from "./listbox-force-mount-test.svelte";
-
-const kbd = getTestKbd();
-
-const testItems: Item[] = [
-	{
-		value: "1",
-		label: "A",
-	},
-	{
-		value: "2",
-		label: "B",
-	},
-	{
-		value: "3",
-		label: "C",
-	},
-	{
-		value: "4",
-		label: "D",
-	},
-];
-
-function setupSingle(
-	props: Partial<ListboxSingleTestProps | ListboxForceMountTestProps> = {},
-	items: Item[] = testItems,
-	// eslint-disable-next-line ts/no-explicit-any
-	component: Component<any, any, any> = ListboxTest
-) {
-	const user = setupUserEvents();
-	// @ts-expect-error - testing lib needs to update their generic types
-	const returned = render(component, { name: "test", ...props, items });
-	const trigger = returned.getByTestId("trigger");
-	const openBinding = returned.getByTestId("open-binding");
-	const valueBinding = returned.getByTestId("value-binding");
-	const outside = returned.getByTestId("outside");
-
-	function getContent() {
-		return returned.queryByTestId("content");
-	}
-
-	function getHiddenInput(name = "test") {
-		return returned.container.querySelector(`input[name="${name}"]`);
-	}
-
-	return {
-		user,
-		trigger,
-		valueBinding,
-		openBinding,
-		outside,
-		getHiddenInput,
-		getContent,
-		...returned,
-	};
-}
-
-function setupMultiple(props: Partial<ListboxMultipleTestProps> = {}, items: Item[] = testItems) {
-	const user = setupUserEvents();
-	// @ts-expect-error - testing lib needs to update their generic types
-	const returned = render(ListboxMultiTest, { name: "test", ...props, items });
-	const trigger = returned.getByTestId("trigger");
-	const openBinding = returned.getByTestId("open-binding");
-	const valueBinding = returned.getByTestId("value-binding");
-	const outside = returned.getByTestId("outside");
-
-	function getHiddenInputs(name = "test") {
-		return returned.container.querySelectorAll<HTMLElement>(`input[name="${name}"]`);
-	}
-
-	function getContent() {
-		return returned.queryByTestId("content");
-	}
-
-	return {
-		user,
-		trigger,
-		openBinding,
-		valueBinding,
-		outside,
-		getHiddenInputs,
-		getContent,
-		...returned,
-	};
-}
-
-async function openSingle(
-	props: Partial<ListboxSingleTestProps> = {},
-	openWith: "click" | "type" | (string & {}) = "click",
-	searchValue?: string
-) {
-	const returned = setupSingle(props);
-
-	const { queryByTestId, getByTestId, user, trigger } = returned;
-	expect(queryByTestId("content")).toBeNull();
-	if (openWith === "click") {
-		await user.click(trigger);
-	} else {
-		trigger.focus();
-		await user.keyboard(openWith);
-	}
-	await waitFor(() => expect(queryByTestId("content")).not.toBeNull());
-	const content = getByTestId("content");
-	const group = returned.getByTestId("group");
-	const groupHeading = returned.getByTestId("group-label");
-	return {
-		...returned,
-		group,
-		groupHeading,
-		content,
-	};
-}
-
-async function openMultiple(
-	props: Partial<ListboxMultipleTestProps> = {},
-	openWith: "click" | "type" | (string & {}) = "click",
-	searchValue?: string
-) {
-	const returned = setupMultiple(props);
-	const { queryByTestId, getByTestId, user, trigger } = returned;
-	expect(queryByTestId("content")).toBeNull();
-	if (openWith === "click") {
-		await user.click(trigger);
-	} else {
-		trigger.focus();
-		await user.keyboard(openWith);
-	}
-	await waitFor(() => expect(queryByTestId("content")).not.toBeNull());
-	const content = getByTestId("content");
-	return {
-		...returned,
-		content,
-	};
-}
-
-const OPEN_KEYS = [kbd.ARROW_DOWN, kbd.ARROW_UP];
-
-describe("listbox - single", () => {
-	it("should have noaccessibility violations", async () => {
-		// @ts-expect-error - testing lib needs to update their generic types
-		const { container } = render(ListboxTest);
-		expect(await axe(container)).toHaveNoViolations();
-	});
-
-	it("should open on click", async () => {
-		await openSingle();
-	});
-
-	it.each(OPEN_KEYS)("should open on %s keydown", async (key) => {
-		await openSingle({}, key);
-	});
-
-	it("should applie the appropriate `aria-labelledby` attribute to the group", async () => {
-		const { group, groupHeading } = await openSingle();
-
-		expect(group).toHaveAttribute("aria-labelledby", groupHeading.id);
-	});
-
-	it("should select item with the enter key", async () => {
-		const { user, trigger } = await openSingle();
-		await user.keyboard(kbd.ARROW_DOWN);
-		await user.keyboard(kbd.ENTER);
-		await tick();
-		expect(trigger).toHaveTextContent("B");
-	});
-
-	it("should render an input if the `name` prop is passed", async () => {
-		const { getHiddenInput } = setupSingle();
-		expect(getHiddenInput()).toBeInTheDocument();
-	});
-
-	it("should not render an input if the `name` prop isn't passed or is an empty string/undefined", async () => {
-		const { getHiddenInput } = setupSingle({ name: "" });
-		expect(getHiddenInput()).not.toBeInTheDocument();
-	});
-
-	it("should sync the value prop to the hidden input", async () => {
-		const { getHiddenInput } = setupSingle({ value: "test" });
-		expect(getHiddenInput()).toHaveValue("test");
-	});
-
-	it("should sync the required prop to the hidden input", async () => {
-		const { getHiddenInput } = setupSingle({ required: true });
-		expect(getHiddenInput()).toHaveAttribute("required");
-	});
-
-	it("should sync the disabled prop to the hidden input", async () => {
-		const { getHiddenInput } = setupSingle({ disabled: true });
-		expect(getHiddenInput()).toHaveAttribute("disabled");
-	});
-
-	it("should close on escape keydown", async () => {
-		const { user, getContent } = await openSingle();
-		await user.keyboard(kbd.ESCAPE);
-		expect(getContent()).toBeNull();
-	});
-
-	it("should close on outside click", async () => {
-		const { user, getContent, outside } = await openSingle();
-		await sleep(100);
-		await user.click(outside);
-		await sleep(100);
-		expect(getContent()).toBeNull();
-	});
-
-	it("should portal to the body by default", async () => {
-		const { content } = await openSingle();
-		expect(content.parentElement?.parentElement).toBe(document.body);
-	});
-
-	it("should portal to a custom element if specified", async () => {
-		const { content, getByTestId } = await openSingle({
-			portalProps: { to: "#portal-target" },
-		});
-		const portalTarget = getByTestId("portal-target");
-		expect(content.parentElement?.parentElement).toBe(portalTarget);
-	});
-
-	it("should not portal if `disabled` is passed as portal prop", async () => {
-		const { content, getByTestId } = await openSingle({ portalProps: { disabled: true } });
-		const main = getByTestId("main");
-		expect(content.parentElement?.parentElement).toBe(main);
-	});
-
-	it("should respect binding the `open` prop", async () => {
-		const { getContent, user, openBinding } = await openSingle();
-		expect(openBinding).toHaveTextContent("true");
-		await user.click(openBinding);
-		expect(openBinding).toHaveTextContent("false");
-		await waitFor(() => expect(getContent()).toBeNull());
-		await user.click(openBinding);
-		expect(openBinding).toHaveTextContent("true");
-		await waitFor(() => expect(getContent()).not.toBeNull());
-	});
-
-	it("should respect binding the `value` prop", async () => {
-		const { user, valueBinding } = await openSingle({ value: "1" });
-		expect(valueBinding).toHaveTextContent("1");
-		await user.click(valueBinding);
-		expect(valueBinding).toHaveTextContent("empty");
-	});
-
-	it("should select items when clicked", async () => {
-		const { getByTestId, user, queryByTestId, trigger, getHiddenInput } = await openSingle();
-		const [item1] = getItems(getByTestId);
-		expect(queryByTestId("1-indicator")).toBeNull();
-		await user.click(item1!);
-		expect(trigger).toHaveTextContent("A");
-		expect(getHiddenInput()).toHaveValue("1");
-		await user.click(trigger);
-		expectSelected(item1!);
-		expect(queryByTestId("1-indicator")).not.toBeNull();
-	});
-
-	it("should navigate through the items using the keyboard (loop = false)", async () => {
-		const { getByTestId, user } = await openSingle({}, kbd.ARROW_DOWN);
-
-		const [item0, item1, item2, item3] = getItems(getByTestId);
-
-		expectHighlighted(item0!);
-		await user.keyboard(kbd.ARROW_DOWN);
-		expectHighlighted(item1!);
-		await user.keyboard(kbd.ARROW_DOWN);
-		expectHighlighted(item2!);
-		await user.keyboard(kbd.ARROW_DOWN);
-		expectHighlighted(item3!);
-		await user.keyboard(kbd.ARROW_DOWN);
-		expectHighlighted(item3!);
-		await user.keyboard(kbd.ARROW_UP);
-		expectHighlighted(item2!);
-		await user.keyboard(kbd.ARROW_UP);
-		expectHighlighted(item1!);
-		await user.keyboard(kbd.ARROW_UP);
-		expectHighlighted(item0!);
-		await user.keyboard(kbd.ARROW_UP);
-		expectHighlighted(item0!);
-	});
-
-	it("should navigate through the items using the keyboard (loop = true)", async () => {
-		const { getByTestId, user } = await openSingle(
-			{
-				loop: true,
-			},
-			kbd.ARROW_DOWN
-		);
-
-		const [item0, item1, item2, item3] = getItems(getByTestId);
-
-		expectHighlighted(item0!);
-		await user.keyboard(kbd.ARROW_DOWN);
-		expectHighlighted(item1!);
-		await user.keyboard(kbd.ARROW_DOWN);
-		expectHighlighted(item2!);
-		await user.keyboard(kbd.ARROW_DOWN);
-		expectHighlighted(item3!);
-		await user.keyboard(kbd.ARROW_DOWN);
-		expectNotHighlighted(item3!);
-		expectHighlighted(item0!);
-		await user.keyboard(kbd.ARROW_UP);
-		expectHighlighted(item3!);
-		await user.keyboard(kbd.ARROW_UP);
-		expectHighlighted(item2!);
-		await user.keyboard(kbd.ARROW_UP);
-		expectHighlighted(item1!);
-		await user.keyboard(kbd.ARROW_UP);
-		expectHighlighted(item0!);
-		await user.keyboard(kbd.ARROW_UP);
-		expectHighlighted(item3!);
-	});
-
-	it("should allow items to be selected using the keyboard", async () => {
-		const { getByTestId, user, trigger, getHiddenInput } = await openSingle({}, kbd.ARROW_DOWN);
-
-		const [item0, item1, item2, item3] = getItems(getByTestId);
-
-		await user.keyboard(kbd.ARROW_DOWN);
-		await user.keyboard(kbd.ARROW_DOWN);
-		await user.keyboard(kbd.ARROW_DOWN);
-		await user.keyboard(kbd.ENTER);
-		await sleep(100);
-		expect(getByTestId("trigger")).toHaveTextContent("D");
-		expect(getHiddenInput()).toHaveValue("4");
-		await user.click(trigger);
-		expectNotSelected([item0!, item1!, item2!]);
-		expectSelected(item3!);
-	});
-
-	it("should apply the `data-highlighted` attribute on mouseover", async () => {
-		const { getByTestId, user } = await openSingle({}, kbd.ARROW_DOWN);
-		const [item1, item2] = getItems(getByTestId);
-		await user.hover(item1!);
-		expectHighlighted(item1!);
-		await user.hover(item2!);
-		expectHighlighted(item2!);
-		expectNotHighlighted(item1!);
-	});
-
-	it.skip("should start keyboard navigation at the highlighted item even if hovered with mouse", async () => {
-		const { getByTestId, user, trigger } = await openSingle({}, kbd.ARROW_DOWN);
-		const [item1, item2, item3] = getItems(getByTestId);
-		await user.click(trigger);
-		await user.hover(item1!);
-		expectHighlighted(item1!);
-		await user.hover(item2!);
-		expectHighlighted(item2!);
-		expectNotHighlighted(item1!);
-		await user.keyboard(kbd.ARROW_DOWN);
-		expectHighlighted(item3!);
-		expectNotHighlighted(item2!);
-	});
-
-	it("should select a default item when provided", async () => {
-		const { getByTestId, queryByTestId, trigger, getHiddenInput } = await openSingle({
-			value: "2",
-		});
-		expect(queryByTestId("2-indicator")).not.toBeNull();
-		expect(trigger).toHaveTextContent("B");
-		expect(getHiddenInput()).toHaveValue("2");
-		const [_, item2] = getItems(getByTestId);
-		expectSelected(item2!);
-	});
-
-	it("should allow navigating after navigating to the bottom, closing, and reopening the menu", async () => {
-		const { getByTestId, user, getContent } = await openSingle();
-		const [item0, item1, item2, item3] = getItems(getByTestId);
-		expectHighlighted(item0!);
-		await user.keyboard(kbd.ARROW_DOWN);
-		expectHighlighted(item1!);
-		await user.keyboard(kbd.ARROW_DOWN);
-		expectHighlighted(item2!);
-		await user.keyboard(kbd.ARROW_DOWN);
-		expectHighlighted(item3!);
-		await user.keyboard(kbd.ARROW_DOWN);
-		expectHighlighted(item3!);
-		await user.keyboard(kbd.ESCAPE);
-		await waitFor(() => expect(getContent()).toBeNull());
-
-		await user.keyboard(kbd.ARROW_DOWN);
-		await waitFor(() => expect(getContent()).not.toBeNull());
-		const [i0, i1] = getItems(getByTestId);
-		expectHighlighted(i0!);
-		await user.keyboard(kbd.ARROW_DOWN);
-		expectHighlighted(i1!);
-	});
-
-	it("should forceMount the content when `forceMount` is true", async () => {
-		const { getByTestId } = setupSingle({}, [], ListboxForceMountTest);
-
-		const content = getByTestId("content");
-		expect(content).toBeVisible();
-	});
-
-	it("should forceMount the content when `forceMount` is true and the `open` snippet prop is used to conditionally render the content", async () => {
-		const { queryByTestId, getByTestId, user, trigger } = setupSingle(
-			{ withOpenCheck: true },
-			[],
-			ListboxForceMountTest
-		);
-
-		expect(queryByTestId("content")).toBeNull();
-
-		await user.click(trigger);
-
-		const content = getByTestId("content");
-		expect(content).toBeVisible();
-	});
-
-	it("should deselect the selected item when the user clicks on the selected item", async () => {
-		const { getByTestId, user, trigger } = await openSingle();
-		const [item0] = getItems(getByTestId);
-		await user.click(item0!);
-		expectSelected(item0!);
-		await user.click(trigger);
-
-		const [item0v2] = getItems(getByTestId);
-
-		await user.click(item0v2!);
-		expectNotSelected(item0v2!);
-	});
-});
-
-////////////////////////////////////
-// MULTIPLE
-////////////////////////////////////
-describe("listbox - multiple", () => {
-	it("should have no accessibility violations", async () => {
-		// @ts-expect-error - testing lib needs to update their generic types
-		const { container } = render(ListboxMultiTest);
-		expect(await axe(container)).toHaveNoViolations();
-	});
-
-	it("should open on click", async () => {
-		await openMultiple();
-	});
-
-	it.each(OPEN_KEYS)("should open on %s keydown", async (key) => {
-		await openMultiple({}, key);
-	});
-
-	it("should select item with the enter key", async () => {
-		const { user, trigger } = await openMultiple();
-		await user.keyboard(kbd.ARROW_DOWN);
-		await user.keyboard(kbd.ENTER);
-		expect(trigger).toHaveTextContent("B");
-	});
-
-	it("should render a hidden input if the `name` prop is passed", async () => {
-		const { getHiddenInputs } = setupMultiple();
-		expect(getHiddenInputs()).toHaveLength(1);
-	});
-
-	it("should render a hidden input for each value in the `value` array, each with the same `name` prop", async () => {
-		const { getHiddenInputs } = setupMultiple({ value: ["a", "b"] });
-		const hiddenInputs = getHiddenInputs();
-		expect(hiddenInputs).toHaveLength(2);
-		expect(hiddenInputs[0]).toHaveAttribute("name", "test");
-		expect(hiddenInputs[1]).toHaveAttribute("name", "test");
-	});
-
-	it("should sync the value prop to the hidden inputs", async () => {
-		const { getHiddenInputs } = setupMultiple({ value: ["a", "b"] });
-		const hiddenInputs = getHiddenInputs();
-		expect(hiddenInputs).toHaveLength(2);
-		expect(hiddenInputs[0]).toHaveValue("a");
-		expect(hiddenInputs[1]).toHaveValue("b");
-	});
-
-	it("should sync the required prop to the hidden inputs", async () => {
-		const { getHiddenInputs } = setupMultiple({ required: true, value: ["a", "b"] });
-		const hiddenInputs = getHiddenInputs();
-		expect(hiddenInputs).toHaveLength(2);
-
-		for (const hiddenInput of hiddenInputs) {
-			expect(hiddenInput).toHaveAttribute("required");
-		}
-	});
-
-	it("should sync the disabled prop to the hidden inputs", async () => {
-		const { getHiddenInputs } = setupMultiple({ disabled: true, value: ["a", "b"] });
-		const hiddenInputs = getHiddenInputs();
-		expect(hiddenInputs).toHaveLength(2);
-
-		for (const hiddenInput of hiddenInputs) {
-			expect(hiddenInput).toHaveAttribute("disabled");
-		}
-	});
-
-	it("should close on escape keydown", async () => {
-		const { user, getContent } = await openMultiple();
-		await user.keyboard(kbd.ESCAPE);
-		expect(getContent()).toBeNull();
-	});
-
-	it("should close on outside click", async () => {
-		const { user, getContent, outside } = await openMultiple();
-		await sleep(100);
-		await user.click(outside);
-		await sleep(100);
-		expect(getContent()).toBeNull();
-	});
-
-	it("should portal to the body by default", async () => {
-		const { content } = await openMultiple();
-		expect(content.parentElement?.parentElement).toBe(document.body);
-	});
-
-	it("should portal to a custom element if specified", async () => {
-		const { content, getByTestId } = await openMultiple({
-			portalProps: { to: "#portal-target" },
-		});
-		const portalTarget = getByTestId("portal-target");
-		expect(content.parentElement?.parentElement).toBe(portalTarget);
-	});
-
-	it("should not portal if `disabled` is passed as portal prop", async () => {
-		const { content, getByTestId } = await openMultiple({ portalProps: { disabled: true } });
-		const main = getByTestId("main");
-		expect(content.parentElement?.parentElement).toBe(main);
-	});
-
-	it("should respect binding the `open` prop", async () => {
-		const { getContent, getByTestId, user, openBinding } = await openMultiple();
-		expect(openBinding).toHaveTextContent("true");
-		await user.click(openBinding);
-		expect(openBinding).toHaveTextContent("false");
-		await waitFor(() => expect(getContent()).toBeNull());
-		await user.click(openBinding);
-		expect(openBinding).toHaveTextContent("true");
-		await waitFor(() => expect(getContent()).not.toBeNull());
-	});
-
-	it("should respect binding the `value` prop", async () => {
-		const { user, valueBinding } = await openMultiple({ value: ["1", "2"] });
-		expect(valueBinding.textContent).toEqual("1,2");
-		await user.click(valueBinding);
-		expect(valueBinding.textContent).toEqual("empty");
-	});
-
-	it("should select items when clicked", async () => {
-		const { getByTestId, user, queryByTestId, trigger, getHiddenInputs } = await openMultiple();
-		const [item] = getItems(getByTestId);
-		await waitFor(() => expect(queryByTestId("1-indicator")).toBeNull());
-		await user.click(item!);
-		expect(trigger).toHaveTextContent("A");
-		expect(getHiddenInputs()).toHaveLength(1);
-		expect(getHiddenInputs()[0]).toHaveValue("1");
-
-		expectSelected(item!);
-		await waitFor(() => expect(queryByTestId("1-indicator")).not.toBeNull());
-	});
-
-	it("should navigate through the items using the keyboard (loop = false)", async () => {
-		const { getByTestId, user } = await openMultiple({}, kbd.ARROW_DOWN);
-
-		const [item0, item1, item2, item3] = getItems(getByTestId);
-
-		expectHighlighted(item0!);
-		await user.keyboard(kbd.ARROW_DOWN);
-		expectHighlighted(item1!);
-		await user.keyboard(kbd.ARROW_DOWN);
-		expectHighlighted(item2!);
-		await user.keyboard(kbd.ARROW_DOWN);
-		expectHighlighted(item3!);
-		await user.keyboard(kbd.ARROW_DOWN);
-		expectHighlighted(item3!);
-		await user.keyboard(kbd.ARROW_UP);
-		expectHighlighted(item2!);
-		await user.keyboard(kbd.ARROW_UP);
-		expectHighlighted(item1!);
-		await user.keyboard(kbd.ARROW_UP);
-		expectHighlighted(item0!);
-		await user.keyboard(kbd.ARROW_UP);
-		expectHighlighted(item0!);
-	});
-
-	it("should navigate through the items using the keyboard (loop = true)", async () => {
-		const { getByTestId, user } = await openMultiple(
-			{
-				loop: true,
-			},
-			kbd.ARROW_DOWN
-		);
-
-		const [item0, item1, item2, item3] = getItems(getByTestId);
-
-		expectHighlighted(item0!);
-		await user.keyboard(kbd.ARROW_DOWN);
-		expectHighlighted(item1!);
-		await user.keyboard(kbd.ARROW_DOWN);
-		expectHighlighted(item2!);
-		await user.keyboard(kbd.ARROW_DOWN);
-		expectHighlighted(item3!);
-		await user.keyboard(kbd.ARROW_DOWN);
-		expectNotHighlighted(item3!);
-		expectHighlighted(item0!);
-		await user.keyboard(kbd.ARROW_UP);
-		expectHighlighted(item3!);
-		await user.keyboard(kbd.ARROW_UP);
-		expectHighlighted(item2!);
-		await user.keyboard(kbd.ARROW_UP);
-		expectHighlighted(item1!);
-		await user.keyboard(kbd.ARROW_UP);
-		expectHighlighted(item0!);
-		await user.keyboard(kbd.ARROW_UP);
-		expectHighlighted(item3!);
-	});
-
-	it("should allow items to be selected using the keyboard", async () => {
-		const { getByTestId, user, trigger, getHiddenInputs } = await openMultiple(
-			{},
-			kbd.ARROW_DOWN
-		);
-
-		const [item0, item1, item2, item3] = getItems(getByTestId);
-
-		await user.keyboard(kbd.ARROW_DOWN);
-		await user.keyboard(kbd.ARROW_DOWN);
-		await user.keyboard(kbd.ARROW_DOWN);
-		await user.keyboard(kbd.ENTER);
-		expect(trigger).toHaveTextContent("D");
-		const hiddenInputs = getHiddenInputs();
-		expect(hiddenInputs).toHaveLength(1);
-		expect(hiddenInputs[0]).toHaveValue("4");
-		await user.click(trigger);
-		expectNotSelected([item0!, item1!, item2!]);
-		expectSelected(item3!);
-	});
-
-	it("should allow multiple items to be selected using the keyboard", async () => {
-		const { getByTestId, user, trigger, getHiddenInputs } = await openMultiple(
-			{},
-			kbd.ARROW_DOWN
-		);
-
-		const [item0, item1, item2, item3] = getItems(getByTestId);
-
-		await user.keyboard(kbd.ARROW_DOWN);
-		await user.keyboard(kbd.ARROW_DOWN);
-		await user.keyboard(kbd.ARROW_DOWN);
-		await user.keyboard(kbd.ENTER);
-		expect(trigger).toHaveTextContent("D");
-		const hiddenInputs = getHiddenInputs();
-		expect(hiddenInputs).toHaveLength(1);
-		expect(hiddenInputs[0]).toHaveValue("4");
-		expectSelected(item3!);
-		expectNotSelected([item0!, item1!, item2!]);
-		await user.keyboard(kbd.ARROW_UP);
-		expectHighlighted(item2!);
-		await user.keyboard(kbd.ENTER);
-		expectSelected([item3!, item2!]);
-		expectNotSelected([item0!, item1!]);
-	});
-
-	it("should apply the `data-highlighted` attribute on mouseover", async () => {
-		const { getByTestId, user } = await openMultiple({}, kbd.ARROW_DOWN);
-		const [item1, item2] = getItems(getByTestId);
-		await user.hover(item1!);
-		expectHighlighted(item1!);
-		await user.hover(item2!);
-		expectHighlighted(item2!);
-		expectNotHighlighted(item1!);
-	});
-
-	it("should select a default item when provided", async () => {
-		const { getByTestId, queryByTestId, trigger, getHiddenInputs } = await openMultiple({
-			value: ["2"],
-		});
-		expect(queryByTestId("2-indicator")).not.toBeNull();
-		expect(trigger).toHaveTextContent("B");
-
-		expect(getHiddenInputs()[0]).toHaveValue("2");
-		const [_, item2] = getItems(getByTestId);
-		expectSelected(item2!);
-	});
-});
-
-function getItems(getter: AnyFn, items = testItems) {
-	const itemsArr: HTMLElement[] = [];
-	for (const item of items) {
-		itemsArr.push(getter(item.value));
-	}
-	return itemsArr as HTMLElement[];
-}
-
-////////////////////////////////////
-// HELPERS
-////////////////////////////////////
-
-function expectSelected(node: HTMLElement | HTMLElement[]) {
-	if (Array.isArray(node)) {
-		for (const n of node) {
-			expect(n).toHaveAttribute("data-selected");
-			expect(n).toHaveAttribute("aria-selected", "true");
-		}
-	} else {
-		expect(node).toHaveAttribute("data-selected");
-		expect(node).toHaveAttribute("aria-selected", "true");
-	}
-}
-
-function expectNotSelected(node: HTMLElement | HTMLElement[]) {
-	if (Array.isArray(node)) {
-		for (const n of node) {
-			expect(n).not.toHaveAttribute("data-selected");
-			expect(n).not.toHaveAttribute("aria-selected");
-		}
-	} else {
-		expect(node).not.toHaveAttribute("data-selected");
-		expect(node).not.toHaveAttribute("aria-selected");
-	}
-}
-
-function expectHighlighted(node: HTMLElement | HTMLElement[]) {
-	if (Array.isArray(node)) {
-		for (const n of node) {
-			expect(n).toHaveAttribute("data-highlighted");
-		}
-	} else {
-		expect(node).toHaveAttribute("data-highlighted");
-	}
-}
-
-function expectNotHighlighted(node: HTMLElement | HTMLElement[]) {
-	if (Array.isArray(node)) {
-		for (const n of node) {
-			expect(n).not.toHaveAttribute("data-highlighted");
-		}
-	} else {
-		expect(node).not.toHaveAttribute("data-highlighted");
-	}
-}
diff --git a/packages/tests/src/tests/listbox/listbox-force-mount-test.svelte b/packages/tests/src/tests/select/select-force-mount-test.svelte
similarity index 60%
rename from packages/tests/src/tests/listbox/listbox-force-mount-test.svelte
rename to packages/tests/src/tests/select/select-force-mount-test.svelte
index 6cd76cde1..708ce01d4 100644
--- a/packages/tests/src/tests/listbox/listbox-force-mount-test.svelte
+++ b/packages/tests/src/tests/select/select-force-mount-test.svelte
@@ -1,7 +1,7 @@
 <script lang="ts" module>
 	import {
-		Listbox,
-		type ListboxSingleRootProps,
+		Select,
+		type SelectSingleRootProps,
 		type WithoutChildren,
 		type WithoutChildrenOrChild,
 	} from "bits-ui";
@@ -11,9 +11,9 @@
 		disabled?: boolean;
 	};
 
-	export type ListboxForceMountTestProps = WithoutChildren<ListboxSingleRootProps> & {
-		contentProps?: WithoutChildrenOrChild<Listbox.ContentProps>;
-		portalProps?: WithoutChildrenOrChild<Listbox.PortalProps>;
+	export type SelectForceMountTestProps = WithoutChildren<SelectSingleRootProps> & {
+		contentProps?: WithoutChildrenOrChild<Select.ContentProps>;
+		portalProps?: WithoutChildrenOrChild<Select.PortalProps>;
 		items: Item[];
 		searchValue?: string;
 		withOpenCheck?: boolean;
@@ -30,7 +30,7 @@
 		searchValue = "",
 		withOpenCheck = false,
 		...restProps
-	}: ListboxForceMountTestProps = $props();
+	}: SelectForceMountTestProps = $props();
 
 	const filteredItems = $derived(
 		searchValue === ""
@@ -42,69 +42,64 @@
 </script>
 
 <main data-testid="main">
-	<Listbox.Root bind:value bind:open {...restProps}>
-		<Listbox.Trigger data-testid="trigger">
+	<Select.Root bind:value bind:open {...restProps}>
+		<Select.Trigger data-testid="trigger">
 			{#if selectedLabel}
 				{selectedLabel}
 			{:else}
 				Open combobox
 			{/if}
-		</Listbox.Trigger>
-		<Listbox.Portal {...portalProps}>
+		</Select.Trigger>
+		<Select.Portal {...portalProps}>
 			{#if withOpenCheck}
-				<Listbox.Content data-testid="content" {...contentProps} forceMount>
+				<Select.Content data-testid="content" {...contentProps} forceMount>
 					{#snippet child({ props, open })}
 						{#if open}
 							<div {...props}>
-								<Listbox.Group data-testid="group">
-									<Listbox.GroupHeading data-testid="group-label"
-										>Options</Listbox.GroupHeading
+								<Select.Group data-testid="group">
+									<Select.GroupHeading data-testid="group-label"
+										>Options</Select.GroupHeading
 									>
 									{#each filteredItems as { value, label, disabled }}
-										<Listbox.Item
-											data-testid={value}
-											{disabled}
-											{value}
-											{label}
-										>
+										<Select.Item data-testid={value} {disabled} {value} {label}>
 											{#snippet children({ selected })}
 												{#if selected}
 													<span data-testid="{value}-indicator">x</span>
 												{/if}
 												{label}
 											{/snippet}
-										</Listbox.Item>
+										</Select.Item>
 									{/each}
-								</Listbox.Group>
+								</Select.Group>
 							</div>
 						{/if}
 					{/snippet}
-				</Listbox.Content>
+				</Select.Content>
 			{:else}
-				<Listbox.Content data-testid="content" {...contentProps} forceMount>
+				<Select.Content data-testid="content" {...contentProps} forceMount>
 					{#snippet child({ props })}
 						<div {...props}>
-							<Listbox.Group data-testid="group">
-								<Listbox.GroupHeading data-testid="group-label"
-									>Options</Listbox.GroupHeading
+							<Select.Group data-testid="group">
+								<Select.GroupHeading data-testid="group-label"
+									>Options</Select.GroupHeading
 								>
 								{#each filteredItems as { value, label, disabled }}
-									<Listbox.Item data-testid={value} {disabled} {value} {label}>
+									<Select.Item data-testid={value} {disabled} {value} {label}>
 										{#snippet children({ selected })}
 											{#if selected}
 												<span data-testid="{value}-indicator">x</span>
 											{/if}
 											{label}
 										{/snippet}
-									</Listbox.Item>
+									</Select.Item>
 								{/each}
-							</Listbox.Group>
+							</Select.Group>
 						</div>
 					{/snippet}
-				</Listbox.Content>
+				</Select.Content>
 			{/if}
-		</Listbox.Portal>
-	</Listbox.Root>
+		</Select.Portal>
+	</Select.Root>
 	<div data-testid="outside"></div>
 	<button data-testid="open-binding" onclick={() => (open = !open)}>
 		{open}
diff --git a/packages/tests/src/tests/listbox/listbox-multi-test.svelte b/packages/tests/src/tests/select/select-multi-test.svelte
similarity index 54%
rename from packages/tests/src/tests/listbox/listbox-multi-test.svelte
rename to packages/tests/src/tests/select/select-multi-test.svelte
index d50f0b5b4..aa3ed1f39 100644
--- a/packages/tests/src/tests/listbox/listbox-multi-test.svelte
+++ b/packages/tests/src/tests/select/select-multi-test.svelte
@@ -1,7 +1,7 @@
 <script lang="ts" module>
 	import {
-		Listbox,
-		type ListboxMultipleRootProps,
+		Select,
+		type SelectMultipleRootProps,
 		type WithoutChildren,
 		type WithoutChildrenOrChild,
 	} from "bits-ui";
@@ -12,11 +12,12 @@
 		disabled?: boolean;
 	};
 
-	export type ListboxMultipleTestProps = WithoutChildren<ListboxMultipleRootProps> & {
-		contentProps?: WithoutChildrenOrChild<Listbox.ContentProps>;
-		portalProps?: WithoutChildrenOrChild<Listbox.PortalProps>;
+	export type SelectMultipleTestProps = WithoutChildren<SelectMultipleRootProps> & {
+		contentProps?: WithoutChildrenOrChild<Select.ContentProps>;
+		portalProps?: WithoutChildrenOrChild<Select.PortalProps>;
 		items: Item[];
 		searchValue?: string;
+		onSelectedLabelChange?: (value: string) => void;
 	};
 </script>
 
@@ -28,8 +29,9 @@
 		value = [],
 		open = false,
 		searchValue = "",
+		onSelectedLabelChange,
 		...restProps
-	}: ListboxMultipleTestProps = $props();
+	}: SelectMultipleTestProps = $props();
 
 	const filteredItems = $derived(
 		searchValue === ""
@@ -40,36 +42,40 @@
 	const selectedLabels = $derived(
 		filteredItems.filter((item) => value.includes(item.value)).map((item) => item.label)
 	);
+
+	const selectedLabel = $derived(
+		selectedLabels.length > 0 ? selectedLabels.join(", ") : "Open combobox"
+	);
+
+	$effect(() => {
+		onSelectedLabelChange?.(selectedLabel);
+	});
 </script>
 
 <main data-testid="main">
-	<Listbox.Root bind:value bind:open {...restProps} type="multiple">
-		<Listbox.Trigger data-testid="trigger">
-			{#if selectedLabels && selectedLabels.length}
-				{selectedLabels.join(", ")}
-			{:else}
-				Open combobox
-			{/if}
-		</Listbox.Trigger>
+	<Select.Root bind:value bind:open {...restProps} type="multiple">
+		<Select.Trigger data-testid="trigger">
+			{selectedLabel}
+		</Select.Trigger>
 
-		<Listbox.Portal {...portalProps}>
-			<Listbox.Content data-testid="content" {...contentProps}>
-				<Listbox.Group data-testid="group">
-					<Listbox.GroupHeading data-testid="group-label">Options</Listbox.GroupHeading>
+		<Select.Portal {...portalProps}>
+			<Select.Content data-testid="content" {...contentProps}>
+				<Select.Group data-testid="group">
+					<Select.GroupHeading data-testid="group-label">Options</Select.GroupHeading>
 					{#each filteredItems as { value, label, disabled }}
-						<Listbox.Item data-testid={value} {disabled} {value} {label}>
+						<Select.Item data-testid={value} {disabled} {value} {label}>
 							{#snippet children({ selected })}
 								{#if selected}
 									<span data-testid="{value}-indicator">x</span>
 								{/if}
 								{label}
 							{/snippet}
-						</Listbox.Item>
+						</Select.Item>
 					{/each}
-				</Listbox.Group>
-			</Listbox.Content>
-		</Listbox.Portal>
-	</Listbox.Root>
+				</Select.Group>
+			</Select.Content>
+		</Select.Portal>
+	</Select.Root>
 	<div data-testid="outside"></div>
 	<button data-testid="open-binding" onclick={() => (open = !open)}>
 		{open}
diff --git a/packages/tests/src/tests/select/select-test.svelte b/packages/tests/src/tests/select/select-test.svelte
index 2f445978d..1fcf9e636 100644
--- a/packages/tests/src/tests/select/select-test.svelte
+++ b/packages/tests/src/tests/select/select-test.svelte
@@ -1,88 +1,79 @@
 <script lang="ts" module>
-	import { Select } from "bits-ui";
+	import {
+		Select,
+		type SelectSingleRootProps,
+		type WithoutChildren,
+		type WithoutChildrenOrChild,
+	} from "bits-ui";
 	export type Item = {
 		value: string;
 		label: string;
 		disabled?: boolean;
 	};
 
-	export type SelectTestProps = Select.RootProps & {
-		options: Item[];
-		placeholder?: string;
-		portalProps?: Select.PortalProps;
-		contentProps?: Omit<Select.ContentProps, "children" | "asChild" | "child">;
-		onSubmit?: (value: string) => void;
+	export type SelectSingleTestProps = WithoutChildren<SelectSingleRootProps> & {
+		contentProps?: WithoutChildrenOrChild<Select.ContentProps>;
+		portalProps?: WithoutChildrenOrChild<Select.PortalProps>;
+		items: Item[];
+		searchValue?: string;
 	};
 </script>
 
 <script lang="ts">
 	let {
+		contentProps,
+		portalProps,
+		items,
 		value = "",
 		open = false,
-		placeholder = "select something",
-		options = [],
-		portalProps = {},
-		contentProps = {},
-		name = "theme",
-		onSubmit,
+		searchValue = "",
 		...restProps
-	}: SelectTestProps = $props();
+	}: SelectSingleTestProps = $props();
+
+	const filteredItems = $derived(
+		searchValue === ""
+			? items
+			: items.filter((item) => item.label.toLowerCase().includes(searchValue.toLowerCase()))
+	);
+
+	const selectedLabel = $derived(
+		value ? items.find((item) => item.value === value)?.label : "Open Listbox"
+	);
 </script>
 
-<main data-testid="main" class="relative">
-	<form
-		data-testid="form"
-		onsubmit={(e) => {
-			e.preventDefault();
-			const fd = new FormData(e.currentTarget);
-			onSubmit?.(String(fd.get(name)));
-		}}
-	>
-		<Select.Root bind:value bind:open {...restProps} {name}>
-			<Select.Trigger data-testid="trigger" aria-label="open select">
-				<Select.Value data-testid="value" {placeholder} />
-			</Select.Trigger>
-			<Select.Portal {...portalProps}>
-				<Select.Content data-testid="content" {...contentProps}>
-					<Select.ScrollUpButton data-testid="scroll-up-button" />
-					<Select.Viewport data-testid="viewport">
-						<Select.Separator data-testid="separator" />
-						<Select.Group data-testid="group">
-							<Select.GroupHeading data-testid="group-label"
-								>Options</Select.GroupHeading
-							>
-							{#each options as { value, label, disabled }}
-								<Select.Item data-testid={value} {disabled} {value}>
-									{#snippet children({ selected })}
-										{#if selected}
-											<span data-testid="{value}-indicator">x</span>
-										{/if}
-										<Select.ItemText data-testid="{value}-item-text">
-											{label}
-										</Select.ItemText>
-									{/snippet}
-								</Select.Item>
-							{/each}
-						</Select.Group>
-					</Select.Viewport>
-					<Select.ScrollDownButton data-testid="scroll-down-button" />
-				</Select.Content>
-			</Select.Portal>
-		</Select.Root>
-		<div data-testid="outside" class="absolute left-0 top-0 size-10"></div>
-		<button type="button" data-testid="open-binding" onclick={() => (open = !open)}>
-			{open}
-		</button>
-		<button
-			type="button"
-			data-testid="value-binding"
-			aria-label="value binding"
-			onclick={() => (value = "")}
-		>
+<main data-testid="main">
+	<Select.Root bind:value bind:open {...restProps} type="single">
+		<Select.Trigger data-testid="trigger">
+			{selectedLabel}
+		</Select.Trigger>
+		<Select.Portal {...portalProps}>
+			<Select.Content data-testid="content" {...contentProps}>
+				<Select.Group data-testid="group">
+					<Select.GroupHeading data-testid="group-label">Options</Select.GroupHeading>
+					{#each filteredItems as { value, label, disabled }}
+						<Select.Item data-testid={value} {disabled} {value} {label}>
+							{#snippet children({ selected })}
+								{#if selected}
+									<span data-testid="{value}-indicator">x</span>
+								{/if}
+								{label}
+							{/snippet}
+						</Select.Item>
+					{/each}
+				</Select.Group>
+			</Select.Content>
+		</Select.Portal>
+	</Select.Root>
+	<div data-testid="outside"></div>
+	<button data-testid="open-binding" onclick={() => (open = !open)}>
+		{open}
+	</button>
+	<button data-testid="value-binding" onclick={() => (value = "")}>
+		{#if value === ""}
+			empty
+		{:else}
 			{value}
-		</button>
-
-		<button data-testid="submit"> submit </button>
-	</form>
+		{/if}
+	</button>
 </main>
 <div data-testid="portal-target" id="portal-target"></div>
diff --git a/packages/tests/src/tests/select/select.test.ts b/packages/tests/src/tests/select/select.test.ts
index 09c391ea4..da9532701 100644
--- a/packages/tests/src/tests/select/select.test.ts
+++ b/packages/tests/src/tests/select/select.test.ts
@@ -1,9 +1,14 @@
 import { render, waitFor } from "@testing-library/svelte";
 import { axe } from "jest-axe";
 import { describe, it, vi } from "vitest";
-import { getTestKbd, setupUserEvents, sleep } from "../utils.js";
+import { type Component, tick } from "svelte";
+import { type AnyFn, getTestKbd, setupUserEvents, sleep } from "../utils.js";
 import SelectTest from "./select-test.svelte";
-import type { Item, SelectTestProps } from "./select-test.svelte";
+import type { Item, SelectSingleTestProps } from "./select-test.svelte";
+import type { SelectMultipleTestProps } from "./select-multi-test.svelte";
+import SelectMultiTest from "./select-multi-test.svelte";
+import type { SelectForceMountTestProps } from "./select-force-mount-test.svelte";
+import SelectForceMountTest from "./select-force-mount-test.svelte";
 
 const kbd = getTestKbd();
 
@@ -26,310 +31,717 @@ const testItems: Item[] = [
 	},
 ];
 
-function setup(props: Partial<SelectTestProps> = {}, options: Item[] = testItems) {
+function setupSingle(
+	props: Partial<SelectSingleTestProps | SelectForceMountTestProps> = {},
+	items: Item[] = testItems,
+	// eslint-disable-next-line ts/no-explicit-any
+	component: Component<any, any, any> = SelectTest
+) {
 	const user = setupUserEvents();
 	// @ts-expect-error - testing lib needs to update their generic types
-	const returned = render(SelectTest, { ...props, options });
+	const returned = render(component, { name: "test", ...props, items });
 	const trigger = returned.getByTestId("trigger");
-	const select = returned.container.querySelector("select");
+	const openBinding = returned.getByTestId("open-binding");
+	const valueBinding = returned.getByTestId("value-binding");
+	const outside = returned.getByTestId("outside");
+
+	function getContent() {
+		return returned.queryByTestId("content");
+	}
+
+	function getHiddenInput(name = "test") {
+		return returned.container.querySelector(`input[name="${name}"]`);
+	}
+
 	return {
+		user,
 		trigger,
+		valueBinding,
+		openBinding,
+		outside,
+		getHiddenInput,
+		getContent,
+		...returned,
+	};
+}
+
+function setupMultiple(props: Partial<SelectMultipleTestProps> = {}, items: Item[] = testItems) {
+	const user = setupUserEvents();
+	// @ts-expect-error - testing lib needs to update their generic types
+	const returned = render(SelectMultiTest, { name: "test", ...props, items });
+	const trigger = returned.getByTestId("trigger");
+	const openBinding = returned.getByTestId("open-binding");
+	const valueBinding = returned.getByTestId("value-binding");
+	const outside = returned.getByTestId("outside");
+
+	function getHiddenInputs(name = "test") {
+		return returned.container.querySelectorAll<HTMLElement>(`input[name="${name}"]`);
+	}
+
+	function getContent() {
+		return returned.queryByTestId("content");
+	}
+
+	return {
 		user,
-		select,
+		trigger,
+		openBinding,
+		valueBinding,
+		outside,
+		getHiddenInputs,
+		getContent,
 		...returned,
 	};
 }
-async function open(
-	props: Partial<SelectTestProps> = {},
-	openWith: "click" | (string & {}) = "click"
+
+async function openSingle(
+	props: Partial<SelectSingleTestProps> = {},
+	openWith: "click" | "type" | (string & {}) = "click",
+	searchValue?: string
 ) {
-	const returned = setup(props);
-	const { trigger, queryByTestId, user } = returned;
-	const contentInit = queryByTestId("content");
-	expect(contentInit).toBeNull();
+	const returned = setupSingle(props);
+
+	const { queryByTestId, getByTestId, user, trigger } = returned;
+	expect(queryByTestId("content")).toBeNull();
 	if (openWith === "click") {
 		await user.click(trigger);
 	} else {
 		trigger.focus();
 		await user.keyboard(openWith);
 	}
-	await sleep(50);
-	const content = queryByTestId("content");
-	await waitFor(() => expect(content).not.toBeNull());
-	expect(content).toHaveAttribute("data-state", "open");
+	await waitFor(() => expect(queryByTestId("content")).not.toBeNull());
+	const content = getByTestId("content");
+	const group = returned.getByTestId("group");
+	const groupHeading = returned.getByTestId("group-label");
+	return {
+		...returned,
+		group,
+		groupHeading,
+		content,
+	};
+}
 
-	return { content, ...returned };
+async function openMultiple(
+	props: Partial<SelectMultipleTestProps> = {},
+	openWith: "click" | "type" | (string & {}) = "click",
+	searchValue?: string
+) {
+	const returned = setupMultiple(props);
+	const { queryByTestId, getByTestId, user, trigger } = returned;
+	expect(queryByTestId("content")).toBeNull();
+	if (openWith === "click") {
+		await user.click(trigger);
+	} else {
+		trigger.focus();
+		await user.keyboard(openWith);
+	}
+	await waitFor(() => expect(queryByTestId("content")).not.toBeNull());
+	const content = getByTestId("content");
+	return {
+		...returned,
+		content,
+	};
 }
 
-const OPEN_KEYS = [kbd.ENTER, kbd.SPACE, kbd.ARROW_DOWN, kbd.ARROW_UP];
+const OPEN_KEYS = [kbd.ARROW_DOWN, kbd.ARROW_UP];
 
-describe("select", () => {
+describe("select - single", () => {
 	it("should have no accessibility violations", async () => {
 		// @ts-expect-error - testing lib needs to update their generic types
 		const { container } = render(SelectTest);
 		expect(await axe(container)).toHaveNoViolations();
 	});
 
-	it("should have bits data attrs", async () => {
-		const { getByTestId } = await open();
-		const parts = ["content", "trigger", "value", "group-label", "group", "viewport"];
+	it("should open on click", async () => {
+		await openSingle();
+	});
 
-		parts.forEach((part) => {
-			const el = getByTestId(part);
-			expect(el).toHaveAttribute(`data-select-${part}`);
-		});
+	it.each(OPEN_KEYS)("should open on %s keydown", async (key) => {
+		await openSingle({}, key);
+	});
 
-		const item = getByTestId("1");
-		expect(item).toHaveAttribute("data-select-item");
+	it("should apply the appropriate `aria-labelledby` attribute to the group", async () => {
+		const { group, groupHeading } = await openSingle();
 
-		const itemText = getByTestId("1-item-text");
-		expect(itemText).toHaveAttribute("data-select-item-text");
+		expect(group).toHaveAttribute("aria-labelledby", groupHeading.id);
 	});
 
-	it("should open on click", async () => {
-		await open();
+	it("should select item with the enter key", async () => {
+		const { user, trigger } = await openSingle();
+		trigger.focus();
+		await user.keyboard(kbd.ARROW_DOWN);
+		await user.keyboard(kbd.ENTER);
+		expect(trigger).toHaveTextContent("B");
 	});
 
-	it.each(OPEN_KEYS)("should open on %s keydown", async (key) => {
-		await open({}, key);
+	it("should render an input if the `name` prop is passed", async () => {
+		const { getHiddenInput } = setupSingle();
+		expect(getHiddenInput()).toBeInTheDocument();
 	});
 
-	it.each([kbd.SPACE, kbd.ENTER])("selects item with the %s key", async (key) => {
-		const { user, queryByTestId, getByTestId } = await open();
-		await user.keyboard(kbd.ARROW_DOWN);
-		await user.keyboard(key);
-		await waitFor(() => expect(queryByTestId("content")).toBeNull());
-		expect(getByTestId("value")).toHaveTextContent("B");
+	it("should not render an input if the `name` prop isn't passed or is an empty string/undefined", async () => {
+		const { getHiddenInput } = setupSingle({ name: "" });
+		expect(getHiddenInput()).not.toBeInTheDocument();
 	});
 
-	it("should render a `select` element when used within a form", async () => {});
+	it("should sync the value prop to the hidden input", async () => {
+		const { getHiddenInput } = setupSingle({ value: "test" });
+		expect(getHiddenInput()).toHaveValue("test");
+	});
 
-	it("should sync the name with the hidden select", async () => {
-		const { select } = setup({ name: "test" });
-		expect(select).toBeInTheDocument();
+	it("should sync the required prop to the hidden input", async () => {
+		const { getHiddenInput } = setupSingle({ required: true });
+		expect(getHiddenInput()).toHaveAttribute("required");
 	});
 
-	it("should sync the name prop to the hidden select", async () => {
-		const { select } = setup({ name: "test" });
-		expect(select).toHaveAttribute("name", "test");
+	it("should sync the disabled prop to the hidden input", async () => {
+		const { getHiddenInput } = setupSingle({ disabled: true });
+		expect(getHiddenInput()).toHaveAttribute("disabled");
 	});
 
-	it("should sync the value prop to the hidden select", async () => {
-		const { getByTestId, queryByTestId, select, trigger, user, container } = setup({
-			value: "2",
+	it("should close on escape keydown", async () => {
+		const { user, getContent } = await openSingle();
+		await user.keyboard(kbd.ESCAPE);
+		expect(getContent()).toBeNull();
+	});
+
+	it("should close on outside click", async () => {
+		const { user, getContent, outside } = await openSingle();
+		await sleep(100);
+		await user.click(outside);
+		await sleep(100);
+		expect(getContent()).toBeNull();
+	});
+
+	it("should portal to the body by default", async () => {
+		const { content } = await openSingle();
+		expect(content.parentElement?.parentElement).toBe(document.body);
+	});
+
+	it("should portal to a custom element if specified", async () => {
+		const { content, getByTestId } = await openSingle({
+			portalProps: { to: "#portal-target" },
 		});
-		expect(select).toHaveAttribute("data-value", "2");
+		const portalTarget = getByTestId("portal-target");
+		expect(content.parentElement?.parentElement).toBe(portalTarget);
+	});
+
+	it("should not portal if `disabled` is passed as portal prop", async () => {
+		const { content, getByTestId } = await openSingle({ portalProps: { disabled: true } });
+		const main = getByTestId("main");
+		expect(content.parentElement?.parentElement).toBe(main);
+	});
+
+	it("should respect binding the `open` prop", async () => {
+		const { getContent, user, openBinding } = await openSingle();
+		expect(openBinding).toHaveTextContent("true");
+		await user.click(openBinding);
+		expect(openBinding).toHaveTextContent("false");
+		await waitFor(() => expect(getContent()).toBeNull());
+		await user.click(openBinding);
+		expect(openBinding).toHaveTextContent("true");
+		await waitFor(() => expect(getContent()).not.toBeNull());
+	});
+
+	it("should respect binding the `value` prop", async () => {
+		const { user, valueBinding } = await openSingle({ value: "1" });
+		expect(valueBinding).toHaveTextContent("1");
+		await user.click(valueBinding);
+		expect(valueBinding).toHaveTextContent("empty");
+	});
+
+	it("should select items when clicked", async () => {
+		const { getByTestId, user, queryByTestId, trigger, getHiddenInput } = await openSingle();
+		const [item1] = getItems(getByTestId);
+		expect(queryByTestId("1-indicator")).toBeNull();
+		await user.click(item1!);
+		expect(trigger).toHaveTextContent("A");
+		expect(getHiddenInput()).toHaveValue("1");
 		await user.click(trigger);
+		expectSelected(item1!);
+		expect(queryByTestId("1-indicator")).not.toBeNull();
+	});
 
-		const item1 = getByTestId("1");
-		expect(item1).toBeVisible();
-		item1.focus();
+	it("should navigate through the items using the keyboard (loop = false)", async () => {
+		const { getByTestId, user } = await openSingle({}, kbd.ARROW_DOWN);
 
-		await user.keyboard(kbd.ENTER);
+		const [item0, item1, item2, item3] = getItems(getByTestId);
+
+		expectHighlighted(item0!);
+		await user.keyboard(kbd.ARROW_DOWN);
+		expectHighlighted(item1!);
+		await user.keyboard(kbd.ARROW_DOWN);
+		expectHighlighted(item2!);
+		await user.keyboard(kbd.ARROW_DOWN);
+		expectHighlighted(item3!);
+		await user.keyboard(kbd.ARROW_DOWN);
+		expectHighlighted(item3!);
+		await user.keyboard(kbd.ARROW_UP);
+		expectHighlighted(item2!);
+		await user.keyboard(kbd.ARROW_UP);
+		expectHighlighted(item1!);
+		await user.keyboard(kbd.ARROW_UP);
+		expectHighlighted(item0!);
+		await user.keyboard(kbd.ARROW_UP);
+		expectHighlighted(item0!);
+	});
+
+	it("should navigate through the items using the keyboard (loop = true)", async () => {
+		const { getByTestId, user } = await openSingle(
+			{
+				loop: true,
+			},
+			kbd.ARROW_DOWN
+		);
 
-		expect(container.querySelector("select")).toHaveAttribute("data-value", "1");
+		const [item0, item1, item2, item3] = getItems(getByTestId);
 
-		await waitFor(() => expect(queryByTestId("content")).toBeNull());
+		expectHighlighted(item0!);
+		await user.keyboard(kbd.ARROW_DOWN);
+		expectHighlighted(item1!);
+		await user.keyboard(kbd.ARROW_DOWN);
+		expectHighlighted(item2!);
+		await user.keyboard(kbd.ARROW_DOWN);
+		expectHighlighted(item3!);
+		await user.keyboard(kbd.ARROW_DOWN);
+		expectNotHighlighted(item3!);
+		expectHighlighted(item0!);
+		await user.keyboard(kbd.ARROW_UP);
+		expectHighlighted(item3!);
+		await user.keyboard(kbd.ARROW_UP);
+		expectHighlighted(item2!);
+		await user.keyboard(kbd.ARROW_UP);
+		expectHighlighted(item1!);
+		await user.keyboard(kbd.ARROW_UP);
+		expectHighlighted(item0!);
+		await user.keyboard(kbd.ARROW_UP);
+		expectHighlighted(item3!);
 	});
 
-	it("should submit the select value with the form", async () => {
-		const onSubmit = vi.fn();
-		const { getByTestId, user, trigger } = setup({ name: "test", onSubmit });
+	it("should allow items to be selected using the keyboard", async () => {
+		const { getByTestId, user, trigger, getHiddenInput } = await openSingle({}, kbd.ARROW_DOWN);
+
+		const [item0, item1, item2, item3] = getItems(getByTestId);
 
-		trigger.focus();
+		await user.keyboard(kbd.ARROW_DOWN);
+		await user.keyboard(kbd.ARROW_DOWN);
 		await user.keyboard(kbd.ARROW_DOWN);
 		await user.keyboard(kbd.ENTER);
+		await sleep(100);
+		expect(getByTestId("trigger")).toHaveTextContent("D");
+		expect(getHiddenInput()).toHaveValue("4");
+		await user.click(trigger);
+		expectNotSelected([item0!, item1!, item2!]);
+		expectSelected(item3!);
+	});
 
-		const submitButton = getByTestId("submit");
+	it("should apply the `data-highlighted` attribute on mouseover", async () => {
+		const { getByTestId, user } = await openSingle({}, kbd.ARROW_DOWN);
+		const [item1, item2] = getItems(getByTestId);
+		await user.hover(item1!);
+		expectHighlighted(item1!);
+		await user.hover(item2!);
+		expectHighlighted(item2!);
+		expectNotHighlighted(item1!);
+	});
 
-		await user.click(submitButton);
+	it.skip("should start keyboard navigation at the highlighted item even if hovered with mouse", async () => {
+		const { getByTestId, user, trigger } = await openSingle({}, kbd.ARROW_DOWN);
+		const [item1, item2, item3] = getItems(getByTestId);
+		await user.click(trigger);
+		await user.hover(item1!);
+		expectHighlighted(item1!);
+		await user.hover(item2!);
+		expectHighlighted(item2!);
+		expectNotHighlighted(item1!);
+		await user.keyboard(kbd.ARROW_DOWN);
+		expectHighlighted(item3!);
+		expectNotHighlighted(item2!);
+	});
 
-		expect(onSubmit).toHaveBeenCalledWith("1");
+	it("should select a default item when provided", async () => {
+		const { getByTestId, queryByTestId, trigger, getHiddenInput } = await openSingle({
+			value: "2",
+		});
+		expect(queryByTestId("2-indicator")).not.toBeNull();
+		expect(trigger).toHaveTextContent("B");
+		expect(getHiddenInput()).toHaveValue("2");
+		const [_, item2] = getItems(getByTestId);
+		expectSelected(item2!);
+	});
 
+	it("should allow navigating after navigating to the bottom, closing, and reopening the menu", async () => {
+		const { getByTestId, user, getContent, trigger } = await openSingle();
 		trigger.focus();
+
+		const [item0, item1, item2, item3] = getItems(getByTestId);
+		expectHighlighted(item0!);
 		await user.keyboard(kbd.ARROW_DOWN);
+		expectHighlighted(item1!);
 		await user.keyboard(kbd.ARROW_DOWN);
-		await user.keyboard(kbd.ENTER);
+		expectHighlighted(item2!);
+		await user.keyboard(kbd.ARROW_DOWN);
+		expectHighlighted(item3!);
+		await user.keyboard(kbd.ARROW_DOWN);
+		expectHighlighted(item3!);
+		await user.keyboard(kbd.ESCAPE);
+		await waitFor(() => expect(getContent()).toBeNull());
+
+		await user.keyboard(kbd.ARROW_DOWN);
+		await waitFor(() => expect(getContent()).not.toBeNull());
+		const [i0, i1] = getItems(getByTestId);
+		expectHighlighted(i0!);
+		await user.keyboard(kbd.ARROW_DOWN);
+		expectHighlighted(i1!);
+	});
 
-		await user.click(submitButton);
+	it("should forceMount the content when `forceMount` is true", async () => {
+		const { getByTestId } = setupSingle({}, [], SelectForceMountTest);
 
-		expect(onSubmit).toHaveBeenCalledWith("2");
+		const content = getByTestId("content");
+		expect(content).toBeVisible();
 	});
 
-	it("should sync the required prop to the hidden select", async () => {
-		const { select } = setup({ required: true });
-		expect(select).toHaveAttribute("required");
+	it("should forceMount the content when `forceMount` is true and the `open` snippet prop is used to conditionally render the content", async () => {
+		const { queryByTestId, getByTestId, user, trigger } = setupSingle(
+			{ withOpenCheck: true },
+			[],
+			SelectForceMountTest
+		);
+
+		expect(queryByTestId("content")).toBeNull();
+
+		await user.click(trigger);
+
+		const content = getByTestId("content");
+		expect(content).toBeVisible();
 	});
 
-	it("should sync the disabled prop to the hidden select", async () => {
-		const { select } = setup({ disabled: true });
-		expect(select).toHaveAttribute("disabled");
+	it("should deselect the selected item when the user clicks on the selected item", async () => {
+		const { getByTestId, user, trigger } = await openSingle();
+		const [item0] = getItems(getByTestId);
+		await user.click(item0!);
+		expectSelected(item0!);
+		await user.click(trigger);
+
+		const [item0v2] = getItems(getByTestId);
+
+		await user.click(item0v2!);
+		expectNotSelected(item0v2!);
 	});
+});
 
-	it("should close on escape keydown", async () => {
-		const { user, queryByTestId } = await open();
-		await user.keyboard(kbd.ESCAPE);
-		expect(queryByTestId("content")).toBeNull();
+////////////////////////////////////
+// MULTIPLE
+////////////////////////////////////
+describe("select - multiple", () => {
+	it("should have no accessibility violations", async () => {
+		// @ts-expect-error - testing lib needs to update their generic types
+		const { container } = render(SelectMultiTest);
+		expect(await axe(container)).toHaveNoViolations();
 	});
 
-	// this only fails during testing
-	it.skip("should close on outside click", async () => {
-		const onInteractOutside = vi.fn();
-		const { getByTestId, user } = await open({
-			contentProps: {
-				onInteractOutside,
-			},
+	it("should open on click", async () => {
+		await openMultiple();
+	});
+
+	it.each(OPEN_KEYS)("should open on %s keydown", async (key) => {
+		await openMultiple({}, key);
+	});
+
+	it("should select item with the enter key", async () => {
+		const mockFn = vi.fn();
+		const { user, trigger } = await openMultiple({
+			onSelectedLabelChange: mockFn,
 		});
-		await user.pointerDownUp(document.body);
+		trigger.focus();
+		await user.keyboard(kbd.ARROW_DOWN);
+		await user.keyboard(kbd.ENTER);
+		expect(mockFn).toHaveBeenCalledWith("B");
+	});
 
-		await waitFor(() => expect(onInteractOutside).toHaveBeenCalledTimes(1));
+	it("should render a hidden input if the `name` prop is passed", async () => {
+		const { getHiddenInputs } = setupMultiple();
+		expect(getHiddenInputs()).toHaveLength(1);
 	});
 
-	it("should portal to the body by default", async () => {
-		const { content } = await open();
-		const contentWrapper = content?.parentElement;
-		expect(contentWrapper?.parentElement).toBe(document.body);
+	it("should render a hidden input for each value in the `value` array, each with the same `name` prop", async () => {
+		const { getHiddenInputs } = setupMultiple({ value: ["a", "b"] });
+		const hiddenInputs = getHiddenInputs();
+		expect(hiddenInputs).toHaveLength(2);
+		expect(hiddenInputs[0]).toHaveAttribute("name", "test");
+		expect(hiddenInputs[1]).toHaveAttribute("name", "test");
 	});
 
-	it("should portal to a custom element if specified", async () => {
-		const { content, getByTestId } = await open({
-			portalProps: {
-				to: "#portal-target",
-			},
-		});
-		const portalTarget = getByTestId("portal-target");
-		const contentWrapper = content?.parentElement;
-		expect(contentWrapper?.parentElement).toBe(portalTarget);
+	it("should sync the value prop to the hidden inputs", async () => {
+		const { getHiddenInputs } = setupMultiple({ value: ["a", "b"] });
+		const hiddenInputs = getHiddenInputs();
+		expect(hiddenInputs).toHaveLength(2);
+		expect(hiddenInputs[0]).toHaveValue("a");
+		expect(hiddenInputs[1]).toHaveValue("b");
 	});
 
-	it("should not portal if `disabled` is passed to the portal", async () => {
-		const { content, getByTestId } = await open({ portalProps: { disabled: true } });
-		const form = getByTestId("form");
-		const contentWrapper = content?.parentElement;
-		expect(contentWrapper?.parentElement).toBe(form);
+	it("should sync the required prop to the hidden inputs", async () => {
+		const { getHiddenInputs } = setupMultiple({ required: true, value: ["a", "b"] });
+		const hiddenInputs = getHiddenInputs();
+		expect(hiddenInputs).toHaveLength(2);
+
+		for (const hiddenInput of hiddenInputs) {
+			expect(hiddenInput).toHaveAttribute("required");
+		}
 	});
 
-	it("should respect the `escapeKeydownBehavior` prop", async () => {
-		const { user, queryByTestId } = await open({
-			contentProps: {
-				escapeKeydownBehavior: "ignore",
-			},
-		});
+	it("should sync the disabled prop to the hidden inputs", async () => {
+		const { getHiddenInputs } = setupMultiple({ disabled: true, value: ["a", "b"] });
+		const hiddenInputs = getHiddenInputs();
+		expect(hiddenInputs).toHaveLength(2);
+
+		for (const hiddenInput of hiddenInputs) {
+			expect(hiddenInput).toHaveAttribute("disabled");
+		}
+	});
+
+	it("should close on escape keydown", async () => {
+		const { user, getContent } = await openMultiple();
 		await user.keyboard(kbd.ESCAPE);
-		await waitFor(() => expect(queryByTestId("content")).not.toBeNull());
+		expect(getContent()).toBeNull();
 	});
 
-	it("should respect the `interactOutsideBehavior` prop", async () => {
-		const { user, queryByTestId, getByTestId } = await open({
-			contentProps: {
-				interactOutsideBehavior: "ignore",
-			},
-		});
-		const outside = getByTestId("outside");
-		await user.click(outside);
+	it("should close on outside click", async () => {
+		const { user, getContent, outside } = await openMultiple();
+		await sleep(100);
 		await user.click(outside);
-		await waitFor(() => expect(queryByTestId("content")).not.toBeNull());
+		await sleep(100);
+		expect(getContent()).toBeNull();
 	});
 
-	it("should respect binding the `open` prop", async () => {
-		const { queryByTestId, getByTestId, user } = await open({
-			contentProps: {
-				interactOutsideBehavior: "ignore",
-			},
+	it("should portal to the body by default", async () => {
+		const { content } = await openMultiple();
+		expect(content.parentElement?.parentElement).toBe(document.body);
+	});
+
+	it("should portal to a custom element if specified", async () => {
+		const { content, getByTestId } = await openMultiple({
+			portalProps: { to: "#portal-target" },
 		});
-		const binding = getByTestId("open-binding");
-		expect(binding).toHaveTextContent("true");
-		await user.click(binding);
-		await waitFor(() => expect(binding).toHaveTextContent("false"));
-		await waitFor(() => expect(queryByTestId("content")).toBeNull());
-		await user.click(binding);
-		await waitFor(() => expect(binding).toHaveTextContent("true"));
-		await waitFor(() => expect(queryByTestId("content")).not.toBeNull());
+		const portalTarget = getByTestId("portal-target");
+		expect(content.parentElement?.parentElement).toBe(portalTarget);
+	});
+
+	it("should not portal if `disabled` is passed as portal prop", async () => {
+		const { content, getByTestId } = await openMultiple({ portalProps: { disabled: true } });
+		const main = getByTestId("main");
+		expect(content.parentElement?.parentElement).toBe(main);
+	});
+
+	it("should respect binding the `open` prop", async () => {
+		const { getContent, getByTestId, user, openBinding } = await openMultiple();
+		expect(openBinding).toHaveTextContent("true");
+		await user.click(openBinding);
+		expect(openBinding).toHaveTextContent("false");
+		await waitFor(() => expect(getContent()).toBeNull());
+		await user.click(openBinding);
+		expect(openBinding).toHaveTextContent("true");
+		await waitFor(() => expect(getContent()).not.toBeNull());
 	});
 
 	it("should respect binding the `value` prop", async () => {
-		const { getByTestId, user } = await open({ value: "1" });
-		const binding = getByTestId("value-binding");
-		expect(binding).toHaveTextContent("1");
-		await user.click(binding);
-		await waitFor(() => expect(binding).toHaveTextContent(""));
+		const { user, valueBinding } = await openMultiple({ value: ["1", "2"] });
+		expect(valueBinding.textContent).toEqual("1,2");
+		await user.click(valueBinding);
+		expect(valueBinding.textContent).toEqual("empty");
 	});
 
 	it("should select items when clicked", async () => {
-		const { user, queryByTestId, trigger, container } = await open();
-		const item = queryByTestId("1") as HTMLElement;
+		const { getByTestId, user, queryByTestId, trigger, getHiddenInputs } = await openMultiple();
+		const [item] = getItems(getByTestId);
 		await waitFor(() => expect(queryByTestId("1-indicator")).toBeNull());
-		await user.click(item);
-		await user.click(item);
-		const value = queryByTestId("value");
-		await waitFor(() => expect(value).toHaveTextContent("A"));
-		await waitFor(() =>
-			expect(container.querySelector("select")).toHaveAttribute("data-value", "1")
-		);
-		await user.click(trigger);
-		await waitFor(() => expect(queryByTestId("content")).not.toBeNull());
-		await waitFor(() => expect(queryByTestId("1")).toHaveAttribute("aria-selected", "true"));
-		await waitFor(() => expect(queryByTestId("1")).toHaveAttribute("data-selected"));
+		await user.click(item!);
+		expect(trigger).toHaveTextContent("A");
+		expect(getHiddenInputs()).toHaveLength(1);
+		expect(getHiddenInputs()[0]).toHaveValue("1");
+
+		expectSelected(item!);
 		await waitFor(() => expect(queryByTestId("1-indicator")).not.toBeNull());
 	});
 
-	it("should navigate through the items using the keyboard", async () => {
-		const { user, queryByTestId } = await open({}, kbd.ENTER);
+	it("should navigate through the items using the keyboard (loop = false)", async () => {
+		const { getByTestId, user } = await openMultiple({}, kbd.ARROW_DOWN);
+
+		const [item0, item1, item2, item3] = getItems(getByTestId);
 
-		await waitFor(() => expect(queryByTestId("1")).toHaveAttribute("data-highlighted"));
+		expectHighlighted(item0!);
 		await user.keyboard(kbd.ARROW_DOWN);
-		await waitFor(() => expect(queryByTestId("2")).toHaveAttribute("data-highlighted"));
+		expectHighlighted(item1!);
 		await user.keyboard(kbd.ARROW_DOWN);
-		await waitFor(() => expect(queryByTestId("3")).toHaveAttribute("data-highlighted"));
+		expectHighlighted(item2!);
 		await user.keyboard(kbd.ARROW_DOWN);
-		await waitFor(() => expect(queryByTestId("4")).toHaveAttribute("data-highlighted"));
+		expectHighlighted(item3!);
+		await user.keyboard(kbd.ARROW_DOWN);
+		expectHighlighted(item3!);
+		await user.keyboard(kbd.ARROW_UP);
+		expectHighlighted(item2!);
 		await user.keyboard(kbd.ARROW_UP);
-		await waitFor(() => expect(queryByTestId("3")).toHaveAttribute("data-highlighted"));
+		expectHighlighted(item1!);
 		await user.keyboard(kbd.ARROW_UP);
-		await waitFor(() => expect(queryByTestId("2")).toHaveAttribute("data-highlighted"));
+		expectHighlighted(item0!);
 		await user.keyboard(kbd.ARROW_UP);
-		await waitFor(() => expect(queryByTestId("1")).toHaveAttribute("data-highlighted"));
+		expectHighlighted(item0!);
+	});
+
+	it("should navigate through the items using the keyboard (loop = true)", async () => {
+		const { getByTestId, user } = await openMultiple(
+			{
+				loop: true,
+			},
+			kbd.ARROW_DOWN
+		);
+
+		const [item0, item1, item2, item3] = getItems(getByTestId);
+
+		expectHighlighted(item0!);
+		await user.keyboard(kbd.ARROW_DOWN);
+		expectHighlighted(item1!);
+		await user.keyboard(kbd.ARROW_DOWN);
+		expectHighlighted(item2!);
+		await user.keyboard(kbd.ARROW_DOWN);
+		expectHighlighted(item3!);
+		await user.keyboard(kbd.ARROW_DOWN);
+		expectNotHighlighted(item3!);
+		expectHighlighted(item0!);
+		await user.keyboard(kbd.ARROW_UP);
+		expectHighlighted(item3!);
+		await user.keyboard(kbd.ARROW_UP);
+		expectHighlighted(item2!);
+		await user.keyboard(kbd.ARROW_UP);
+		expectHighlighted(item1!);
+		await user.keyboard(kbd.ARROW_UP);
+		expectHighlighted(item0!);
+		await user.keyboard(kbd.ARROW_UP);
+		expectHighlighted(item3!);
 	});
 
 	it("should allow items to be selected using the keyboard", async () => {
-		const { getByTestId, user, queryByTestId, trigger } = await open({}, kbd.ENTER);
+		const { getByTestId, user, trigger, getHiddenInputs } = await openMultiple(
+			{},
+			kbd.ARROW_DOWN
+		);
+
+		const [item0, item1, item2, item3] = getItems(getByTestId);
 
 		await user.keyboard(kbd.ARROW_DOWN);
 		await user.keyboard(kbd.ARROW_DOWN);
 		await user.keyboard(kbd.ARROW_DOWN);
 		await user.keyboard(kbd.ENTER);
-		await waitFor(() => expect(queryByTestId("content")).toBeNull());
-		const value = getByTestId("value");
-		expect(value).toHaveTextContent("D");
+		expect(trigger).toHaveTextContent("D");
+		const hiddenInputs = getHiddenInputs();
+		expect(hiddenInputs).toHaveLength(1);
+		expect(hiddenInputs[0]).toHaveValue("4");
 		await user.click(trigger);
-		await waitFor(() => expect(queryByTestId("content")).not.toBeNull());
-		expect(queryByTestId("1")).not.toHaveAttribute("data-selected");
-		expect(queryByTestId("2")).not.toHaveAttribute("data-selected");
-		expect(queryByTestId("3")).not.toHaveAttribute("data-selected");
-		expect(queryByTestId("4")).toHaveAttribute("data-selected");
+		expectNotSelected([item0!, item1!, item2!]);
+		expectSelected(item3!);
+	});
+
+	it("should allow multiple items to be selected using the keyboard", async () => {
+		const { getByTestId, user, trigger, getHiddenInputs } = await openMultiple(
+			{},
+			kbd.ARROW_DOWN
+		);
+
+		const [item0, item1, item2, item3] = getItems(getByTestId);
+
+		await user.keyboard(kbd.ARROW_DOWN);
+		await user.keyboard(kbd.ARROW_DOWN);
+		await user.keyboard(kbd.ARROW_DOWN);
+		await user.keyboard(kbd.ENTER);
+		expect(trigger).toHaveTextContent("D");
+		const hiddenInputs = getHiddenInputs();
+		expect(hiddenInputs).toHaveLength(1);
+		expect(hiddenInputs[0]).toHaveValue("4");
+		expectSelected(item3!);
+		expectNotSelected([item0!, item1!, item2!]);
+		await user.keyboard(kbd.ARROW_UP);
+		expectHighlighted(item2!);
+		await user.keyboard(kbd.ENTER);
+		expectSelected([item3!, item2!]);
+		expectNotSelected([item0!, item1!]);
 	});
 
 	it("should apply the `data-highlighted` attribute on mouseover", async () => {
-		const { getByTestId, user } = await open({}, kbd.ENTER);
-		const item1 = getByTestId("1");
-		const item2 = getByTestId("2");
-		await user.hover(item1);
-		await waitFor(() => expect(item1).toHaveAttribute("data-highlighted"));
-		await user.hover(item2);
-		await waitFor(() => expect(item2).toHaveAttribute("data-highlighted"));
-		await waitFor(() => expect(item1).not.toHaveAttribute("data-highlighted"));
+		const { getByTestId, user } = await openMultiple({}, kbd.ARROW_DOWN);
+		const [item1, item2] = getItems(getByTestId);
+		await user.hover(item1!);
+		expectHighlighted(item1!);
+		await user.hover(item2!);
+		expectHighlighted(item2!);
+		expectNotHighlighted(item1!);
 	});
 
 	it("should select a default item when provided", async () => {
-		const { getByTestId, queryByTestId, container } = await open({
-			value: "2",
+		const { getByTestId, queryByTestId, trigger, getHiddenInputs } = await openMultiple({
+			value: ["2"],
 		});
 		expect(queryByTestId("2-indicator")).not.toBeNull();
-		const value = getByTestId("value");
-		expect(value).toHaveTextContent("B");
-		expect(container.querySelector("select")).toHaveAttribute("data-value", "2");
-		const item = getByTestId("2");
-		expect(item).toHaveAttribute("aria-selected", "true");
-		expect(item).toHaveAttribute("data-selected");
+		expect(trigger).toHaveTextContent("B");
+
+		expect(getHiddenInputs()[0]).toHaveValue("2");
+		const [_, item2] = getItems(getByTestId);
+		expectSelected(item2!);
 	});
 });
+
+function getItems(getter: AnyFn, items = testItems) {
+	const itemsArr: HTMLElement[] = [];
+	for (const item of items) {
+		itemsArr.push(getter(item.value));
+	}
+	return itemsArr as HTMLElement[];
+}
+
+////////////////////////////////////
+// HELPERS
+////////////////////////////////////
+
+function expectSelected(node: HTMLElement | HTMLElement[]) {
+	if (Array.isArray(node)) {
+		for (const n of node) {
+			expect(n).toHaveAttribute("data-selected");
+			expect(n).toHaveAttribute("aria-selected", "true");
+		}
+	} else {
+		expect(node).toHaveAttribute("data-selected");
+		expect(node).toHaveAttribute("aria-selected", "true");
+	}
+}
+
+function expectNotSelected(node: HTMLElement | HTMLElement[]) {
+	if (Array.isArray(node)) {
+		for (const n of node) {
+			expect(n).not.toHaveAttribute("data-selected");
+			expect(n).not.toHaveAttribute("aria-selected");
+		}
+	} else {
+		expect(node).not.toHaveAttribute("data-selected");
+		expect(node).not.toHaveAttribute("aria-selected");
+	}
+}
+
+function expectHighlighted(node: HTMLElement | HTMLElement[]) {
+	if (Array.isArray(node)) {
+		for (const n of node) {
+			expect(n).toHaveAttribute("data-highlighted");
+		}
+	} else {
+		expect(node).toHaveAttribute("data-highlighted");
+	}
+}
+
+function expectNotHighlighted(node: HTMLElement | HTMLElement[]) {
+	if (Array.isArray(node)) {
+		for (const n of node) {
+			expect(n).not.toHaveAttribute("data-highlighted");
+		}
+	} else {
+		expect(node).not.toHaveAttribute("data-highlighted");
+	}
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2d9907792..04cf1a7a2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -63,8 +63,8 @@ importers:
         specifier: ^0.15.2
         version: 0.15.2(svelte@5.0.0-next.260)
       svelte-toolbelt:
-        specifier: ^0.4.1
-        version: 0.4.1(svelte@5.0.0-next.260)
+        specifier: ^0.4.4
+        version: 0.4.4(svelte@5.0.0-next.260)
     devDependencies:
       '@sveltejs/kit':
         specifier: ^2.5.28
@@ -2861,6 +2861,9 @@ packages:
   inline-style-parser@0.2.3:
     resolution: {integrity: sha512-qlD8YNDqyTKTyuITrDOffsl6Tdhv+UC4hcdAVuQsK4IMQ99nSgd1MIA/Q+jQYoh9r3hVUXhYh7urSRmXPkW04g==}
 
+  inline-style-parser@0.2.4:
+    resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==}
+
   is-alphabetical@1.0.4:
     resolution: {integrity: sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==}
 
@@ -4171,6 +4174,9 @@ packages:
   style-to-object@1.0.6:
     resolution: {integrity: sha512-khxq+Qm3xEyZfKd/y9L3oIWQimxuc4STrQKtQn8aSDRHb8mFgpukgX1hdzfrMEW6JCjyJ8p89x+IUMVnCBI1PA==}
 
+  style-to-object@1.0.8:
+    resolution: {integrity: sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==}
+
   sucrase@3.35.0:
     resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -4214,9 +4220,9 @@ packages:
     peerDependencies:
       svelte: ^3.0.0 || ^4.0.0 || ^5.0.0-next.1
 
-  svelte-toolbelt@0.4.1:
-    resolution: {integrity: sha512-wRFa4YeimMpq7EptvtgX8d0IuBxqVRF7wymVWz92hs2VmQ33CGa40NvfIdK0Xm4ONRadU7FdpH6Gn2tUmEYEAg==}
-    engines: {node: '>=20', pnpm: '>=8.7.0'}
+  svelte-toolbelt@0.4.4:
+    resolution: {integrity: sha512-sNSJ4zUUVpou/p7O2IagMGfSPKHwqsOCYvDceFEMoPmkRXlNDvRethDDAzYM8hO3ayYpdEAPG4H8wsD385hspw==}
+    engines: {node: '>=18', pnpm: '>=8.7.0'}
     peerDependencies:
       svelte: ^5.0.0-next.126
 
@@ -7523,6 +7529,8 @@ snapshots:
 
   inline-style-parser@0.2.3: {}
 
+  inline-style-parser@0.2.4: {}
+
   is-alphabetical@1.0.4: {}
 
   is-alphabetical@2.0.1: {}
@@ -9116,6 +9124,10 @@ snapshots:
     dependencies:
       inline-style-parser: 0.2.3
 
+  style-to-object@1.0.8:
+    dependencies:
+      inline-style-parser: 0.2.4
+
   sucrase@3.35.0:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.5
@@ -9166,10 +9178,10 @@ snapshots:
     dependencies:
       svelte: 5.0.0-next.260
 
-  svelte-toolbelt@0.4.1(svelte@5.0.0-next.260):
+  svelte-toolbelt@0.4.4(svelte@5.0.0-next.260):
     dependencies:
       clsx: 2.1.1
-      style-to-object: 1.0.6
+      style-to-object: 1.0.8
       svelte: 5.0.0-next.260
 
   svelte2tsx@0.7.19(svelte@5.0.0-next.260)(typescript@5.6.2):
diff --git a/sites/docs/content/components/listbox.md b/sites/docs/content/components/listbox.md
deleted file mode 100644
index e6f9ab0c7..000000000
--- a/sites/docs/content/components/listbox.md
+++ /dev/null
@@ -1,451 +0,0 @@
----
-title: Listbox
-description: A list of options that can be selected by the user.
----
-
-<script>
-	import { APISection, ComponentPreviewV2, ListboxDemo, ListboxDemoCustomAnchor, ListboxDemoMultiple, Callout } from '$lib/components'
-	export let schemas;
-</script>
-
-<ComponentPreviewV2 name="listbox-demo" comp="Listbox">
-
-{#snippet preview()}
-<ListboxDemo />
-{/snippet}
-
-</ComponentPreviewV2>
-
-## Overview
-
-The Listbox component provides users with a selectable list of options. It's designed to offer an enhanced selection experience with features like typeahead search, keyboard navigation, and customizable grouping. This component is particularly useful for scenarios where users need to choose from a predefined set of options, offering more functionality than a standard select element.
-
-## Key Features
-
--   **Typeahead Search**: Users can quickly find options by typing
--   **Keyboard Navigation**: Full support for keyboard interactions, allowing users to navigate through options using arrow keys, enter to select, and more.
--   **Grouped Options**: Ability to organize options into logical groups, enhancing readability and organization of large option sets.
--   **Scroll Management**: Includes scroll up/down buttons for easy navigation in long lists.
--   **Accessibility**: Built-in ARIA attributes and keyboard support ensure compatibility with screen readers and adherence to accessibility standards.
--   **Portal Support**: Option to render the listbox content in a portal, preventing layout issues in complex UI structures.
-
-## Architecture
-
-The Listbox component is composed of several sub-components, each with a specific role:
-
--   **Root**: The main container component that manages the state and context for the combobox.
--   **Trigger**: The button or element that opens the dropdown list.
--   **Portal**: Responsible for portalling the dropdown content to the body or a custom target.
--   **Group**: A container for grouped items, used to group related items.
--   **GroupHeading**: A heading for a group of items, providing a descriptive label for the group.
--   **Item**: An individual item within the list.
--   **Separator**: A visual separator between items.
--   **Content**: The dropdown container that displays the items. It uses [Floating UI](https://floating-ui.com/) to position the content relative to the trigger.
--   **ContentStatic** (Optional): An alternative to the Content component, that enables you to opt-out of Floating UI and position the content yourself.
--   **Arrow**: An arrow element that points to the trigger when using the `Combobox.Content` component.
-
-## Structure
-
-Here's an overview of how the Listbox component is structured in code:
-
-```svelte
-<script lang="ts">
-	import { Listbox } from "bits-ui";
-</script>
-
-<Listbox.Root>
-	<Listbox.Trigger />
-	<Listbox.Portal>
-		<Listbox.Content>
-			<Listbox.ScrollUpButton />
-			<Listbox.Viewport>
-				<Listbox.Item />
-				<Listbox.Group>
-					<Listbox.GroupHeading />
-					<Listbox.Item />
-				</Listbox.Group>
-				<Listbox.ScrollDownButton />
-			</Listbox.Viewport>
-		</Listbox.Content>
-	</Listbox.Portal>
-</Listbox.Root>
-```
-
-## Reusable Components
-
-As you can see from the structure above, there are a number of pieces that make up the `Listbox` component. These pieces are provided to give you maximum flexibility and customization options, but can be a burden to write out everywhere you need to use a listbox in your application.
-
-To ease this burden, it's recommended to create your own reusable listbox component that wraps the primitives and provides a more convenient API for your use cases.
-
-Here's an example of how you might create a reusable `MyListbox` component that receives a list of options and renders each of them as an item.
-
-```svelte title="MyListbox.svelte"
-<script lang="ts">
-	import { Listbox, type WithoutChildren } from "bits-ui";
-
-	type Props = WithoutChildren<Listbox.RootProps> & {
-		placeholder?: string;
-		items: { value: string; label: string; disabled?: boolean }[];
-		contentProps?: WithoutChildren<Listbox.ContentProps>;
-		// any other specific component props if needed
-	};
-
-	let { value = $bindable(""), items, contentProps, placeholder, ...restProps }: Props = $props();
-
-	const selectedLabel = $derived(items.find((item) => item.value === value)?.label);
-</script>
-
-<Listbox.Root bind:value {...restProps}>
-	<Listbox.Trigger>
-		{#if selectedLabel}
-			<Listbox.Value>
-				{selectedLabel}
-			</Listbox.Value>
-		{:else}
-			<Listbox.Value {placeholder} />
-		{/if}
-	</Listbox.Trigger>
-	<Listbox.Portal>
-		<Listbox.Content {...contentProps}>
-			<Listbox.ScrollUpButton>up</Listbox.ScrollUpButton>
-			<Listbox.Viewport>
-				{#each items as { value, label, disabled } (value)}
-					<Listbox.Item {value} textValue={label} {disabled}>
-						{#snippet children({ selected })}
-							{selected ? "✅" : ""}
-							<Listbox.ItemText>
-								{item.label}
-							</Listbox.ItemText>
-						{/snippet}
-					</Listbox.Item>
-				{/each}
-			</Listbox.Viewport>
-			<Listbox.ScrollDownButton>down</Listbox.ScrollDownButton>
-		</Listbox.Content>
-	</Listbox.Portal>
-</Listbox.Root>
-```
-
-You can then use the `MyListbox` component throughout your application like so:
-
-```svelte
-<script lang="ts">
-	import MyListbox from "$lib/components/MyListbox.svelte";
-
-	const items = [
-		{ value: "apple", label: "Apple" },
-		{ value: "banana", label: "Banana" },
-		{ value: "cherry", label: "Cherry" },
-	];
-
-	let fruit = $state("apple");
-</script>
-
-<MyListbox {items} bind:value={fruit} />
-```
-
-## Managing Value State
-
-Bits UI offers several approaches to manage and synchronize the Listbox's value state, catering to different levels of control and integration needs.
-
-### 1. Two-Way Binding
-
-For seamless state synchronization, use Svelte's `bind:value` directive. This method automatically keeps your local state in sync with the component's internal state.
-
-```svelte
-<script lang="ts">
-	import { Listbox } from "bits-ui";
-	let myValue = $state("");
-</script>
-
-<button onclick={() => (myValue = "A")}> Select A </button>
-
-<Listbox.Root bind:value={myValue}>
-	<!-- ... -->
-</Listbox.Root>
-```
-
-#### Key Benefits
-
--   Simplifies state management
--   Automatically updates `myValue` when the internal state changes (e.g., via clicking on an item)
--   Allows external control (e.g., selecting an item via a separate button)
-
-### 2. Change Handler
-
-For more granular control or to perform additional logic on state changes, use the `onValueChange` prop. This approach is useful when you need to execute custom logic alongside state updates.
-
-```svelte
-<script lang="ts">
-	import { Listbox } from "bits-ui";
-	let myValue = $state("");
-</script>
-
-<Listbox.Root
-	value={myValue}
-	onValueChange={(value) => {
-		myValue = value;
-		// additional logic here.
-	}}
->
-	<!-- ... -->
-</Listbox.Root>
-```
-
-#### Use Cases
-
--   Implementing custom behaviors on value change
--   Integrating with external state management solutions
--   Triggering side effects (e.g., logging, data fetching)
-
-### 3. Fully Controlled
-
-For complete control over the component's value state, use the `controlledValue` prop. This approach requires you to manually manage the value state, giving you full control over when and how the component responds to value change events.
-
-To implement controlled state:
-
-1. Set the `controlledValue` prop to `true` on the `Listbox.Root` component.
-2. Provide a `value` prop to `Listbox.Root`, which should be a variable holding the current state.
-3. Implement an `onValueChange` handler to update the state when the internal state changes.
-
-```svelte
-<script lang="ts">
-	import { Listbox } from "bits-ui";
-	let myValue = $state("");
-</script>
-
-<Listbox.Root controlledValue value={myValue} onValueChange={(v) => (myValue = v)}>
-	<!-- ... -->
-</Listbox.Root>
-```
-
-#### When to Use
-
--   Implementing complex open/close logic
--   Coordinating multiple UI elements
--   Debugging state-related issues
-
-<Callout>
-
-While powerful, fully controlled state should be used judiciously as it increases complexity and can cause unexpected behaviors if not handled carefully.
-
-For more in-depth information on controlled components and advanced state management techniques, refer to our [Controlled State](/docs/controlled-state) documentation.
-
-</Callout>
-
-## Managing Open State
-
-Bits UI offers several approaches to manage and synchronize the Listbox's open state, catering to different levels of control and integration needs.
-
-### 1. Two-Way Binding
-
-For seamless state synchronization, use Svelte's `bind:open` directive. This method automatically keeps your local state in sync with the component's internal state.
-
-```svelte
-<script lang="ts">
-	import { Listbox } from "bits-ui";
-	let myOpen = $state(false);
-</script>
-
-<button onclick={() => (myOpen = true)}> Open </button>
-
-<Listbox.Root bind:open={myOpen}>
-	<!-- ... -->
-</Listbox.Root>
-```
-
-#### Key Benefits
-
--   Simplifies state management
--   Automatically updates `myOpen` when the internal state changes (e.g., via clicking on the trigger/input)
--   Allows external control (e.g., opening via a separate button)
-
-### 2. Change Handler
-
-For more granular control or to perform additional logic on state changes, use the `onOpenChange` prop. This approach is useful when you need to execute custom logic alongside state updates.
-
-```svelte
-<script lang="ts">
-	import { Listbox } from "bits-ui";
-	let myOpen = $state(false);
-</script>
-
-<Listbox.Root
-	open={myOpen}
-	onOpenChange={(o) => {
-		myOpen = o;
-		// additional logic here.
-	}}
->
-	<!-- ... -->
-</Listbox.Root>
-```
-
-#### Use Cases
-
--   Implementing custom behaviors on open change
--   Integrating with external state management solutions
--   Triggering side effects (e.g., logging, data fetching)
-
-### 3. Fully Controlled
-
-For complete control over the component's value state, use the `controlledOpen` prop. This approach requires you to manually manage the value state, giving you full control over when and how the component responds to value change events.
-
-To implement controlled state:
-
-1. Set the `controlledOpen` prop to `true` on the `Listbox.Root` component.
-2. Provide an `open` prop to `Listbox.Root`, which should be a variable holding the current state.
-3. Implement an `onOpenChange` handler to update the state when the internal state changes.
-
-```svelte
-<script lang="ts">
-	import { Listbox } from "bits-ui";
-	let myOpen = $state(false);
-</script>
-
-<Listbox.Root controlledOpen open={myOpen} onOpenChange={(v) => (myOpen = v)}>
-	<!-- ... -->
-</Listbox.Root>
-```
-
-#### When to Use
-
--   Implementing complex open/close logic
--   Coordinating multiple UI elements
--   Debugging state-related issues
-
-<Callout>
-
-While powerful, fully controlled state should be used judiciously as it increases complexity and can cause unexpected behaviors if not handled carefully.
-
-For more in-depth information on controlled components and advanced state management techniques, refer to our [Controlled State](/docs/controlled-state) documentation.
-
-</Callout>
-
-## Multiple Selection
-
-The `type` prop can be set to `'multiple'` to allow multiple items to be selected at a time.
-
-```svelte
-<script lang="ts">
-	import { Listbox } from "bits-ui";
-
-	let value = $state<string[]>([]);
-</script>
-
-<Listbox.Root type="multiple" bind:value>
-	<!-- ... -->
-</Listbox.Root>
-```
-
-<ComponentPreviewV2 name="listbox-demo-multiple" comp="Listbox">
-
-{#snippet preview()}
-<ListboxDemoMultiple />
-{/snippet}
-
-</ComponentPreviewV2>
-
-## Opt-out of Floating UI
-
-When you use the `Listbox.Content` component, Bits UI uses [Floating UI](https://floating-ui.com/) to position the content relative to the trigger, similar to other popover-like components.
-
-You can opt-out of this behavior by instead using the `Listbox.ContentStatic` component.
-
-```svelte {4,14}
-<Listbox.Root>
-	<Listbox.Trigger />
-	<Listbox.Portal>
-		<Listbox.ContentStatic>
-			<Listbox.ScrollUpButton />
-			<Listbox.Viewport>
-				<Listbox.Item />
-				<Listbox.Group>
-					<Listbox.GroupHeading />
-					<Listbox.Item />
-				</Listbox.Group>
-				<Listbox.ScrollDownButton />
-			</Listbox.Viewport>
-		</Listbox.ContentStatic>
-	</Listbox.Portal>
-</Listbox.Root>
-```
-
-When using this component, you'll need to handle the positioning of the content yourself. Keep in mind that using `Listbox.Portal` alongside `Listbox.ContentStatic` may result in some unexpected positioning behavior, feel free to not use the portal or work around it.
-
-## Custom Anchor
-
-By default, the `Listbox.Content` is anchored to the `Listbox.Trigger` component, which determines where the content is positioned.
-
-If you wish to instead anchor the content to a different element, you can pass either a selector string or an `HTMLElement` to the `customAnchor` prop of the `Listbox.Content` component.
-
-```svelte
-<script lang="ts">
-	import { Listbox } from "bits-ui";
-
-	let customAnchor = $state<HTMLElement>(null!);
-</script>
-
-<div bind:this={customAnchor}></div>
-
-<Listbox.Root>
-	<Listbox.Trigger />
-	<Listbox.Content {customAnchor}>
-		<!-- ... -->
-	</Listbox.Content>
-</Listbox.Root>
-```
-
-<ListboxDemoCustomAnchor />
-
-## What is the Viewport?
-
-The `Listbox.Viewport` component is used to determine the size of the content in order to determine whether or not the scroll up and down buttons should be rendered.
-
-If you wish to set a minimum/maximum height for the select content, you should apply it to the `Listbox.Viewport` component.
-
-## Scroll Up/Down Buttons
-
-The `Listbox.ScrollUpButton` and `Listbox.ScrollDownButton` components are used to render the scroll up and down buttons when the select content is larger than the viewport.
-
-You must use the `Listbox.Viewport` component when using the scroll buttons.
-
-## Native Scrolling/Overflow
-
-If you don't want to use the scroll buttons and prefer to use the standard scrollbar/overflow behavior, you can omit the `Listbox.Scroll[Up|Down]Button` components and the `Listbox.Viewport` component.
-
-You'll need to set a height on the `Listbox.Content` component and appropriate `overflow` styles to enable scrolling.
-
-## Scroll Lock
-
-By default, when a user opens the listbox, scrolling outside the content will be disabled. You can override this behavior by setting the `preventScroll` prop to `false`.
-
-```svelte /preventScroll={false}/
-<Listbox.Content preventScroll={false}>
-	<!-- ... -->
-</Listbox.Content>
-```
-
-## Highlighted Items
-
-The Listbox component follows the [WAI-ARIA descendant pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#combobox) for highlighting items. This means that the `Listbox.Trigger` retains focus the entire time, even when navigating with the keyboard, and items are highlighted as the user navigates them.
-
-### Styling Highlighted Items
-
-You can use the `data-highlighted` attribute on the `Listbox.Item` component to style the item differently when it is highlighted.
-
-### onHighlight / onUnhighlight
-
-To trigger side effects when an item is highlighted or unhighlighted, you can use the `onHighlight` and `onUnhighlight` props.
-
-```svelte
-<Listbox.Item onHighlight={() => console.log('I am highlighted!')} onUnhighlight={() => console.log('I am unhighlighted!')} />
-<!-- ... -->
-</Listbox.Item>
-```
-
-## Select vs. Listbox
-
-Use `Select` as a drop-in replacement for `<select>`, supporting form auto-fill. Use `Listbox` for multi-select or custom single-select needs outside forms. For single-select within forms, prefer `Select`.
-
-<APISection {schemas} />
diff --git a/sites/docs/content/components/select.md b/sites/docs/content/components/select.md
index 65edc139a..aa67b5a62 100644
--- a/sites/docs/content/components/select.md
+++ b/sites/docs/content/components/select.md
@@ -4,7 +4,7 @@ description: Enables users to choose from a list of options presented in a dropd
 ---
 
 <script>
-	import { APISection, ComponentPreviewV2, SelectDemo, SelectDemoPositioning } from '$lib/components/index.js'
+	import { APISection, ComponentPreviewV2, SelectDemo, SelectDemoCustomAnchor, SelectDemoMultiple, Callout } from '$lib/components'
 	export let schemas;
 </script>
 
@@ -18,34 +18,54 @@ description: Enables users to choose from a list of options presented in a dropd
 
 ## Overview
 
-The `Select` component can be used as a replacement for the native `<select>` element in your application. It provides a more flexible and customizable way to select an option from a list of options. The component offers a variety of features, such as typeahead, keyboard navigation, scroll up/down buttons, and more.
+The Select component provides users with a selectable list of options. It's designed to offer an enhanced selection experience with features like typeahead search, keyboard navigation, and customizable grouping. This component is particularly useful for scenarios where users need to choose from a predefined set of options, offering more functionality than a standard select element.
+
+## Key Features
+
+-   **Typeahead Search**: Users can quickly find options by typing
+-   **Keyboard Navigation**: Full support for keyboard interactions, allowing users to navigate through options using arrow keys, enter to select, and more.
+-   **Grouped Options**: Ability to organize options into logical groups, enhancing readability and organization of large option sets.
+-   **Scroll Management**: Includes scroll up/down buttons for easy navigation in long lists.
+-   **Accessibility**: Built-in ARIA attributes and keyboard support ensure compatibility with screen readers and adherence to accessibility standards.
+-   **Portal Support**: Option to render the select content in a portal, preventing layout issues in complex UI structures.
+
+## Architecture
+
+The Select component is composed of several sub-components, each with a specific role:
+
+-   **Root**: The main container component that manages the state and context for the combobox.
+-   **Trigger**: The button or element that opens the dropdown list.
+-   **Portal**: Responsible for portalling the dropdown content to the body or a custom target.
+-   **Group**: A container for grouped items, used to group related items.
+-   **GroupHeading**: A heading for a group of items, providing a descriptive label for the group.
+-   **Item**: An individual item within the list.
+-   **Separator**: A visual separator between items.
+-   **Content**: The dropdown container that displays the items. It uses [Floating UI](https://floating-ui.com/) to position the content relative to the trigger.
+-   **ContentStatic** (Optional): An alternative to the Content component, that enables you to opt-out of Floating UI and position the content yourself.
+-   **Arrow**: An arrow element that points to the trigger when using the `Combobox.Content` component.
 
 ## Structure
 
+Here's an overview of how the Select component is structured in code:
+
 ```svelte
 <script lang="ts">
 	import { Select } from "bits-ui";
 </script>
 
 <Select.Root>
-	<Select.Trigger>
-		<Select.Value />
-	</Select.Trigger>
+	<Select.Trigger />
 	<Select.Portal>
 		<Select.Content>
 			<Select.ScrollUpButton />
 			<Select.Viewport>
-				<Select.Item>
-					<Select.ItemText />
-				</Select.Item>
+				<Select.Item />
 				<Select.Group>
 					<Select.GroupHeading />
-					<Select.Item>
-						<Select.ItemText />
-					</Select.Item>
+					<Select.Item />
 				</Select.Group>
+				<Select.ScrollDownButton />
 			</Select.Viewport>
-			<Select.ScrollDownButton />
 		</Select.Content>
 	</Select.Portal>
 </Select.Root>
@@ -53,9 +73,9 @@ The `Select` component can be used as a replacement for the native `<select>` el
 
 ## Reusable Components
 
-As you can see from the structure above, there are a number of pieces that make up the `Select` component. These pieces are provided to give you maximum flexibility and customization options, but can be a burden to write out everywhere you need to use a `Select` in your application.
+As you can see from the structure above, there are a number of pieces that make up the `Select` component. These pieces are provided to give you maximum flexibility and customization options, but can be a burden to write out everywhere you need to use a select in your application.
 
-To ease this burden, it's recommended to create your own reusable `Select` component that wraps the primitives and provides a more convenient API for your use cases.
+To ease this burden, it's recommended to create your own reusable select component that wraps the primitives and provides a more convenient API for your use cases.
 
 Here's an example of how you might create a reusable `MySelect` component that receives a list of options and renders each of them as an item.
 
@@ -94,7 +114,7 @@ Here's an example of how you might create a reusable `MySelect` component that r
 						{#snippet children({ selected })}
 							{selected ? "✅" : ""}
 							<Select.ItemText>
-								{label}
+								{item.label}
 							</Select.ItemText>
 						{/snippet}
 					</Select.Item>
@@ -124,37 +144,41 @@ You can then use the `MySelect` component throughout your application like so:
 <MySelect {items} bind:value={fruit} />
 ```
 
-## Value State
+## Managing Value State
 
-The `value` represents the currently selected item/option within the select menu. Bits UI provides flexible options for controlling and synchronizing the Select's value state.
+Bits UI offers several approaches to manage and synchronize the Select's value state, catering to different levels of control and integration needs.
 
-### Two-Way Binding
+### 1. Two-Way Binding
 
-Use the `bind:value` directive for effortless two-way synchronization between your local state and the Select's internal state.
+For seamless state synchronization, use Svelte's `bind:value` directive. This method automatically keeps your local state in sync with the component's internal state.
 
-```svelte {3,6,8}
+```svelte
 <script lang="ts">
 	import { Select } from "bits-ui";
-	let myValue = $state<string>("");
+	let myValue = $state("");
 </script>
 
-<button onclick={() => (myValue = "apple")}> Apple </button>
+<button onclick={() => (myValue = "A")}> Select A </button>
 
 <Select.Root bind:value={myValue}>
 	<!-- ... -->
 </Select.Root>
 ```
 
-This setup enables toggling the value via the custom button and ensures the local `myValue` state updates when the Select's value changes through any internal means (e.g., clicking on an item's button).
+#### Key Benefits
 
-### Change Handler
+-   Simplifies state management
+-   Automatically updates `myValue` when the internal state changes (e.g., via clicking on an item)
+-   Allows external control (e.g., selecting an item via a separate button)
 
-You can also use the `onValueChange` prop to update local state when the Select's `value` state changes. This is useful when you don't want two-way binding for one reason or another, or you want to perform additional logic when the Select changes.
+### 2. Change Handler
 
-```svelte {3,7-11}
+For more granular control or to perform additional logic on state changes, use the `onValueChange` prop. This approach is useful when you need to execute custom logic alongside state updates.
+
+```svelte
 <script lang="ts">
 	import { Select } from "bits-ui";
-	let myValue = $state<string>("");
+	let myValue = $state("");
 </script>
 
 <Select.Root
@@ -168,43 +192,88 @@ You can also use the `onValueChange` prop to update local state when the Select'
 </Select.Root>
 ```
 
-## Open State
+#### Use Cases
 
-The `open` state represents whether or not the select content is open. Bits UI provides flexible options for controlling and synchronizing the Select's open state.
+-   Implementing custom behaviors on value change
+-   Integrating with external state management solutions
+-   Triggering side effects (e.g., logging, data fetching)
 
-### Two-Way Binding
+### 3. Fully Controlled
 
-Use the `bind:open` directive for effortless two-way synchronization between your local state and the Select's internal state.
+For complete control over the component's value state, use the `controlledValue` prop. This approach requires you to manually manage the value state, giving you full control over when and how the component responds to value change events.
 
-```svelte {3,6,8}
+To implement controlled state:
+
+1. Set the `controlledValue` prop to `true` on the `Select.Root` component.
+2. Provide a `value` prop to `Select.Root`, which should be a variable holding the current state.
+3. Implement an `onValueChange` handler to update the state when the internal state changes.
+
+```svelte
 <script lang="ts">
 	import { Select } from "bits-ui";
-	let isOpen = $state(false);
+	let myValue = $state("");
 </script>
 
-<button onclick={() => (open = true)}> Open select </button>
+<Select.Root controlledValue value={myValue} onValueChange={(v) => (myValue = v)}>
+	<!-- ... -->
+</Select.Root>
+```
+
+#### When to Use
+
+-   Implementing complex open/close logic
+-   Coordinating multiple UI elements
+-   Debugging state-related issues
+
+<Callout>
+
+While powerful, fully controlled state should be used judiciously as it increases complexity and can cause unexpected behaviors if not handled carefully.
 
-<Select.Root bind:open={isOpen}>
+For more in-depth information on controlled components and advanced state management techniques, refer to our [Controlled State](/docs/controlled-state) documentation.
+
+</Callout>
+
+## Managing Open State
+
+Bits UI offers several approaches to manage and synchronize the Select's open state, catering to different levels of control and integration needs.
+
+### 1. Two-Way Binding
+
+For seamless state synchronization, use Svelte's `bind:open` directive. This method automatically keeps your local state in sync with the component's internal state.
+
+```svelte
+<script lang="ts">
+	import { Select } from "bits-ui";
+	let myOpen = $state(false);
+</script>
+
+<button onclick={() => (myOpen = true)}> Open </button>
+
+<Select.Root bind:open={myOpen}>
 	<!-- ... -->
 </Select.Root>
 ```
 
-This setup enables toggling the Select via the custom button and ensures the local `isOpen` state updates when the Select's open state changes through any internal means e.g. clicking on the trigger or outside the content.
+#### Key Benefits
+
+-   Simplifies state management
+-   Automatically updates `myOpen` when the internal state changes (e.g., via clicking on the trigger/input)
+-   Allows external control (e.g., opening via a separate button)
 
-### Change Handler
+### 2. Change Handler
 
-You can also use the `onOpenChange` prop to update local state when the Select's `open` state changes. This is useful when you don't want two-way binding for one reason or another, or you want to perform additional logic when the Select changes.
+For more granular control or to perform additional logic on state changes, use the `onOpenChange` prop. This approach is useful when you need to execute custom logic alongside state updates.
 
-```svelte {3,7-11}
+```svelte
 <script lang="ts">
 	import { Select } from "bits-ui";
-	let isOpen = $state(false);
+	let myOpen = $state(false);
 </script>
 
 <Select.Root
-	open={isOpen}
-	onOpenChange={(open) => {
-		isOpen = open;
+	open={myOpen}
+	onOpenChange={(o) => {
+		myOpen = o;
 		// additional logic here.
 	}}
 >
@@ -212,98 +281,167 @@ You can also use the `onOpenChange` prop to update local state when the Select's
 </Select.Root>
 ```
 
-## Positioning
+#### Use Cases
 
-The `Select` component supports two different positioning strategies for the content. The default positioning strategy is `floating`, which uses Floating UI to position the content relative to the trigger, similar to other popover-like components. If you prefer a more native-like experience, you can set the `position` prop to `item-aligned`, which will position the content relative to the trigger, similar to a native `<select>` element.
+-   Implementing custom behaviors on open change
+-   Integrating with external state management solutions
+-   Triggering side effects (e.g., logging, data fetching)
 
-```svelte /position="item-aligned"/ /position="floating"/
-<Select.Content position="floating">
-	<!-- ... -->
-</Select.Content>
+### 3. Fully Controlled
+
+For complete control over the component's value state, use the `controlledOpen` prop. This approach requires you to manually manage the value state, giving you full control over when and how the component responds to value change events.
+
+To implement controlled state:
 
-<!-- or -->
+1. Set the `controlledOpen` prop to `true` on the `Select.Root` component.
+2. Provide an `open` prop to `Select.Root`, which should be a variable holding the current state.
+3. Implement an `onOpenChange` handler to update the state when the internal state changes.
+
+```svelte
+<script lang="ts">
+	import { Select } from "bits-ui";
+	let myOpen = $state(false);
+</script>
 
-<Select.Content position="item-aligned">
+<Select.Root controlledOpen open={myOpen} onOpenChange={(v) => (myOpen = v)}>
 	<!-- ... -->
-</Select.Content>
+</Select.Root>
 ```
 
-Here's an example of both strategies in action:
+#### When to Use
+
+-   Implementing complex open/close logic
+-   Coordinating multiple UI elements
+-   Debugging state-related issues
+
+<Callout>
+
+While powerful, fully controlled state should be used judiciously as it increases complexity and can cause unexpected behaviors if not handled carefully.
 
-<SelectDemoPositioning />
+For more in-depth information on controlled components and advanced state management techniques, refer to our [Controlled State](/docs/controlled-state) documentation.
 
-NOTE: When using the `"item-aligned"` positioning strategy, the props related to configuring Floating UI on the `Select.Content` component will be ignored.
+</Callout>
 
-## HTML Forms
+## Multiple Selection
 
-The `Select` component is designed to work seamlessly with HTML forms. You can use the `name` prop to associate the select with a form field.
+The `type` prop can be set to `'multiple'` to allow multiple items to be selected at a time.
 
-```svelte /name="theme"/
-<Select.Root name="theme">
+```svelte
+<script lang="ts">
+	import { Select } from "bits-ui";
+
+	let value = $state<string[]>([]);
+</script>
+
+<Select.Root type="multiple" bind:value>
 	<!-- ... -->
 </Select.Root>
 ```
 
-## Server-side Rendering
+<ComponentPreviewV2 name="select-demo-multiple" comp="Select">
 
-To accomplish some of the nice features of the `Select` component, such as typeahead while the select content is closed and the trigger is focused, we leverage portals to send items into the `Select.Value` component.
+{#snippet preview()}
+<SelectDemoMultiple />
+{/snippet}
 
-Portals only work client-side, so if you are using SvelteKit with SSR, you'll need to handle the case where a default value is provided, otherwise, there will be a flicker of the placeholder value before the default value is portalled into the `Select.Value` component. We're demonstrating this in the featured demo at the top of this page, but here's an example of how you might handle this:
+</ComponentPreviewV2>
 
-```svelte title="+page.svelte"
-<script lang="ts">
-	// default value is provided via page data from a load function
-	let { data } = $props();
+## Opt-out of Floating UI
 
-	let options = [
-		{ value: "apple", label: "Apple" },
-		{ value: "banana", label: "Banana" },
-		{ value: "cherry", label: "Cherry" },
-	];
+When you use the `Select.Content` component, Bits UI uses [Floating UI](https://floating-ui.com/) to position the content relative to the trigger, similar to other popover-like components.
+
+You can opt-out of this behavior by instead using the `Select.ContentStatic` component.
+
+```svelte {4,14}
+<Select.Root>
+	<Select.Trigger />
+	<Select.Portal>
+		<Select.ContentStatic>
+			<Select.ScrollUpButton />
+			<Select.Viewport>
+				<Select.Item />
+				<Select.Group>
+					<Select.GroupHeading />
+					<Select.Item />
+				</Select.Group>
+				<Select.ScrollDownButton />
+			</Select.Viewport>
+		</Select.ContentStatic>
+	</Select.Portal>
+</Select.Root>
+```
+
+When using this component, you'll need to handle the positioning of the content yourself. Keep in mind that using `Select.Portal` alongside `Select.ContentStatic` may result in some unexpected positioning behavior, feel free to not use the portal or work around it.
 
-	let value = $state(data.fruit);
+## Custom Anchor
 
-	const selectedLabel = $derived(options.find((option) => option.value === data.fruit)?.label);
+By default, the `Select.Content` is anchored to the `Select.Trigger` component, which determines where the content is positioned.
+
+If you wish to instead anchor the content to a different element, you can pass either a selector string or an `HTMLElement` to the `customAnchor` prop of the `Select.Content` component.
+
+```svelte
+<script lang="ts">
+	import { Select } from "bits-ui";
+
+	let customAnchor = $state<HTMLElement>(null!);
 </script>
 
-<Select.Root value={data.fruit} onValueChange={(v) => (data.fruit = v)}>
-	<Select.Trigger>
-		{#if selectedLabel}
-			<Select.Value>
-				{selectedLabel}
-			</Select.Value>
-		{:else}
-			<Select.Value placeholder="Select a fruit" />
-		{/if}
-	</Select.Trigger>
-	<!-- ... other select components -->
+<div bind:this={customAnchor}></div>
+
+<Select.Root>
+	<Select.Trigger />
+	<Select.Content {customAnchor}>
+		<!-- ... -->
+	</Select.Content>
 </Select.Root>
 ```
 
+<SelectDemoCustomAnchor />
+
+## What is the Viewport?
+
+The `Select.Viewport` component is used to determine the size of the content in order to determine whether or not the scroll up and down buttons should be rendered.
+
+If you wish to set a minimum/maximum height for the select content, you should apply it to the `Select.Viewport` component.
+
+## Scroll Up/Down Buttons
+
+The `Select.ScrollUpButton` and `Select.ScrollDownButton` components are used to render the scroll up and down buttons when the select content is larger than the viewport.
+
+You must use the `Select.Viewport` component when using the scroll buttons.
+
+## Native Scrolling/Overflow
+
+If you don't want to use the scroll buttons and prefer to use the standard scrollbar/overflow behavior, you can omit the `Select.Scroll[Up|Down]Button` components and the `Select.Viewport` component.
+
+You'll need to set a height on the `Select.Content` component and appropriate `overflow` styles to enable scrolling.
+
 ## Scroll Lock
 
-By default, when a user opens the select, scrolling outside the content will be disabled. You can override this behavior by setting the `preventScroll` prop to `false`.
+By default, when a user opens the select, scrolling outside the content will not be disabled. You can override this behavior by setting the `preventScroll` prop to `true`.
 
 ```svelte /preventScroll={false}/
-<Select.Content preventScroll={false}>
+<Select.Content preventScroll={true}>
 	<!-- ... -->
 </Select.Content>
 ```
 
-## What is the Viewport?
+## Highlighted Items
 
-The `Select.Viewport` component is used to determine the size of the select content in order to determine whether or not the scroll up and down buttons should be rendered. If you wish to set a minimum/maximum height for the select content, you should apply it to the `Select.Viewport` component.
+The Select component follows the [WAI-ARIA descendant pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#combobox) for highlighting items. This means that the `Select.Trigger` retains focus the entire time, even when navigating with the keyboard, and items are highlighted as the user navigates them.
 
-## Scroll Up/Down Buttons
+### Styling Highlighted Items
 
-The `Select.ScrollUpButton` and `Select.ScrollDownButton` components are used to render the scroll up and down buttons when the select content is larger than the viewport.
+You can use the `data-highlighted` attribute on the `Select.Item` component to style the item differently when it is highlighted.
 
-## Multiple Select
+### onHighlight / onUnhighlight
 
-The `Select` component does not support multiple selections. If you're looking for a multi-select component, check out the [Listbox](/docs/components/listbox) component.
+To trigger side effects when an item is highlighted or unhighlighted, you can use the `onHighlight` and `onUnhighlight` props.
 
-## Select vs. Listbox
-
-Use `Select` as a drop-in replacement for `<select>`, supporting form auto-fill. Use `Listbox` for multi-select or custom single-select needs outside forms. For single-select within forms, prefer `Select`.
+```svelte
+<Select.Item onHighlight={() => console.log('I am highlighted!')} onUnhighlight={() => console.log('I am unhighlighted!')} />
+<!-- ... -->
+</Select.Item>
+```
 
 <APISection {schemas} />
diff --git a/sites/docs/src/lib/components/demos/index.ts b/sites/docs/src/lib/components/demos/index.ts
index 44728440b..ce27f1a9b 100644
--- a/sites/docs/src/lib/components/demos/index.ts
+++ b/sites/docs/src/lib/components/demos/index.ts
@@ -24,10 +24,10 @@ export { default as DialogDemoNested } from "./dialog-demo-nested.svelte";
 export { default as DropdownMenuDemo } from "./dropdown-menu-demo.svelte";
 export { default as LabelDemo } from "./label-demo.svelte";
 export { default as LinkPreviewDemo } from "./link-preview-demo.svelte";
-export { default as ListboxDemo } from "./listbox-demo.svelte";
-export { default as ListboxDemoCustom } from "./listbox-demo-custom.svelte";
-export { default as ListboxDemoCustomAnchor } from "./listbox-demo-custom-anchor.svelte";
-export { default as ListboxDemoMultiple } from "./listbox-demo-multiple.svelte";
+export { default as SelectDemo } from "./select-demo.svelte";
+export { default as SelectDemoCustom } from "./select-demo-custom.svelte";
+export { default as SelectDemoCustomAnchor } from "./select-demo-custom-anchor.svelte";
+export { default as SelectDemoMultiple } from "./select-demo-multiple.svelte";
 export { default as MenubarDemo } from "./menubar-demo.svelte";
 export { default as NavigationMenuDemo } from "./navigation-menu-demo.svelte";
 export { default as PaginationDemo } from "./pagination-demo.svelte";
@@ -38,7 +38,6 @@ export { default as RadioGroupDemo } from "./radio-group-demo.svelte";
 export { default as RangeCalendarDemo } from "./range-calendar-demo.svelte";
 export { default as ScrollAreaDemo } from "./scroll-area-demo.svelte";
 export { default as ScrollAreaDemoCustom } from "./scroll-area-demo-custom.svelte";
-export { default as SelectDemo } from "./select-demo.svelte";
 export { default as SeparatorDemo } from "./separator-demo.svelte";
 export { default as SliderDemo } from "./slider-demo.svelte";
 export { default as SwitchDemo } from "./switch-demo.svelte";
@@ -51,5 +50,3 @@ export { default as TooltipDemo } from "./tooltip-demo.svelte";
 export { default as TooltipDemoCustom } from "./tooltip-demo-custom.svelte";
 export { default as TooltipDemoDelayDuration } from "./tooltip-demo-delay-duration.svelte";
 export { default as DateFieldDemoCustom } from "./date-field-demo-custom.svelte";
-export { default as SelectDemoCustom } from "./select-demo-custom.svelte";
-export { default as SelectDemoPositioning } from "./select-demo-positioning.svelte";
diff --git a/sites/docs/src/lib/components/demos/listbox-demo-custom.svelte b/sites/docs/src/lib/components/demos/listbox-demo-custom.svelte
deleted file mode 100644
index df1c5e977..000000000
--- a/sites/docs/src/lib/components/demos/listbox-demo-custom.svelte
+++ /dev/null
@@ -1,84 +0,0 @@
-<script lang="ts">
-	import { Listbox, type ListboxSingleRootProps, type WithoutChildrenOrChild } from "bits-ui";
-	import Check from "phosphor-svelte/lib/Check";
-	import Palette from "phosphor-svelte/lib/Palette";
-	import CaretUpDown from "phosphor-svelte/lib/CaretUpDown";
-	import CaretDoubleUp from "phosphor-svelte/lib/CaretDoubleUp";
-	import CaretDoubleDown from "phosphor-svelte/lib/CaretDoubleDown";
-
-	type Props = Omit<ListboxSingleRootProps, "type"> & {
-		contentProps?: WithoutChildrenOrChild<Listbox.ContentProps>;
-	};
-
-	let { value = $bindable(""), contentProps, ...restProps }: Props = $props();
-
-	const themes = [
-		{ value: "light-monochrome", label: "Light Monochrome" },
-		{ value: "dark-green", label: "Dark Green" },
-		{ value: "svelte-orange", label: "Svelte Orange" },
-		{ value: "punk-pink", label: "Punk Pink" },
-		{ value: "ocean-blue", label: "Ocean Blue" },
-		{ value: "sunset-red", label: "Sunset Red" },
-		{ value: "forest-green", label: "Forest Green" },
-		{ value: "lavender-purple", label: "Lavender Purple" },
-		{ value: "mustard-yellow", label: "Mustard Yellow" },
-		{ value: "slate-gray", label: "Slate Gray" },
-		{ value: "neon-green", label: "Neon Green" },
-		{ value: "coral-reef", label: "Coral Reef" },
-		{ value: "midnight-blue", label: "Midnight Blue" },
-		{ value: "crimson-red", label: "Crimson Red" },
-		{ value: "mint-green", label: "Mint Green" },
-		{ value: "pastel-pink", label: "Pastel Pink" },
-		{ value: "golden-yellow", label: "Golden Yellow" },
-		{ value: "deep-purple", label: "Deep Purple" },
-		{ value: "turquoise-blue", label: "Turquoise Blue" },
-		{ value: "burnt-orange", label: "Burnt Orange" },
-	];
-
-	const selectedLabel = $derived(
-		value ? themes.find((theme) => theme.value === value)?.label : "Select a theme"
-	);
-</script>
-
-<Listbox.Root {...restProps} type="single" bind:value>
-	<Listbox.Trigger
-		class="inline-flex h-input w-[296px] select-none items-center rounded-9px border border-border-input bg-background px-[11px] text-sm transition-colors placeholder:text-foreground-alt/50"
-		aria-label="Select a theme"
-	>
-		<Palette class="mr-[9px] size-6 text-muted-foreground" />
-		{selectedLabel}
-		<CaretUpDown class="ml-auto size-6 text-muted-foreground" />
-	</Listbox.Trigger>
-	<Listbox.Portal>
-		<Listbox.Content
-			class="max-h-96 w-[var(--bits-listbox-anchor-width)] min-w-[var(--bits-listbox-anchor-width)] rounded-xl border border-muted bg-background px-1 py-3 shadow-popover outline-none"
-			sideOffset={10}
-			{...contentProps}
-		>
-			<Listbox.ScrollUpButton class="flex w-full items-center justify-center">
-				<CaretDoubleUp class="size-3" />
-			</Listbox.ScrollUpButton>
-			<Listbox.Viewport class="p-1">
-				{#each themes as theme, i (i + theme.value)}
-					<Listbox.Item
-						class="flex h-10 w-full select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm capitalize outline-none duration-75 data-[highlighted]:bg-muted"
-						value={theme.value}
-						label={theme.label}
-					>
-						{#snippet children({ selected })}
-							{theme.label}
-							{#if selected}
-								<div class="ml-auto">
-									<Check />
-								</div>
-							{/if}
-						{/snippet}
-					</Listbox.Item>
-				{/each}
-			</Listbox.Viewport>
-			<Listbox.ScrollDownButton class="flex w-full items-center justify-center">
-				<CaretDoubleDown class="size-3" />
-			</Listbox.ScrollDownButton>
-		</Listbox.Content>
-	</Listbox.Portal>
-</Listbox.Root>
diff --git a/sites/docs/src/lib/components/demos/listbox-demo.svelte b/sites/docs/src/lib/components/demos/listbox-demo.svelte
deleted file mode 100644
index acc57802f..000000000
--- a/sites/docs/src/lib/components/demos/listbox-demo.svelte
+++ /dev/null
@@ -1,78 +0,0 @@
-<script lang="ts">
-	import { Listbox } from "bits-ui";
-	import Check from "phosphor-svelte/lib/Check";
-	import Palette from "phosphor-svelte/lib/Palette";
-	import CaretUpDown from "phosphor-svelte/lib/CaretUpDown";
-	import CaretDoubleUp from "phosphor-svelte/lib/CaretDoubleUp";
-	import CaretDoubleDown from "phosphor-svelte/lib/CaretDoubleDown";
-
-	const themes = [
-		{ value: "light-monochrome", label: "Light Monochrome" },
-		{ value: "dark-green", label: "Dark Green" },
-		{ value: "svelte-orange", label: "Svelte Orange" },
-		{ value: "punk-pink", label: "Punk Pink" },
-		{ value: "ocean-blue", label: "Ocean Blue" },
-		{ value: "sunset-red", label: "Sunset Red" },
-		{ value: "forest-green", label: "Forest Green" },
-		{ value: "lavender-purple", label: "Lavender Purple" },
-		{ value: "mustard-yellow", label: "Mustard Yellow" },
-		{ value: "slate-gray", label: "Slate Gray" },
-		{ value: "neon-green", label: "Neon Green" },
-		{ value: "coral-reef", label: "Coral Reef" },
-		{ value: "midnight-blue", label: "Midnight Blue" },
-		{ value: "crimson-red", label: "Crimson Red" },
-		{ value: "mint-green", label: "Mint Green" },
-		{ value: "pastel-pink", label: "Pastel Pink" },
-		{ value: "golden-yellow", label: "Golden Yellow" },
-		{ value: "deep-purple", label: "Deep Purple" },
-		{ value: "turquoise-blue", label: "Turquoise Blue" },
-		{ value: "burnt-orange", label: "Burnt Orange" },
-	];
-
-	let value = $state<string>("");
-	const selectedLabel = $derived(
-		value ? themes.find((theme) => theme.value === value)?.label : "Select a theme"
-	);
-</script>
-
-<Listbox.Root type="single" bind:value>
-	<Listbox.Trigger
-		class="inline-flex h-input w-[296px] select-none items-center rounded-9px border border-border-input bg-background px-[11px] text-sm transition-colors placeholder:text-foreground-alt/50"
-		aria-label="Select a theme"
-	>
-		<Palette class="mr-[9px] size-6 text-muted-foreground" />
-		{selectedLabel}
-		<CaretUpDown class="ml-auto size-6 text-muted-foreground" />
-	</Listbox.Trigger>
-	<Listbox.Portal>
-		<Listbox.Content
-			class="max-h-96 w-[var(--bits-listbox-anchor-width)] min-w-[var(--bits-listbox-anchor-width)] rounded-xl border border-muted bg-background px-1 py-3 shadow-popover outline-none"
-			sideOffset={10}
-		>
-			<Listbox.ScrollUpButton class="flex w-full items-center justify-center">
-				<CaretDoubleUp class="size-3" />
-			</Listbox.ScrollUpButton>
-			<Listbox.Viewport class="p-1">
-				{#each themes as theme, i (i + theme.value)}
-					<Listbox.Item
-						class="flex h-10 w-full select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm capitalize outline-none duration-75 data-[highlighted]:bg-muted"
-						value={theme.value}
-						label={theme.label}
-					>
-						{#snippet children({ selected })}
-							{theme.label}
-							{#if selected}
-								<div class="ml-auto">
-									<Check />
-								</div>
-							{/if}
-						{/snippet}
-					</Listbox.Item>
-				{/each}
-			</Listbox.Viewport>
-			<Listbox.ScrollDownButton class="flex w-full items-center justify-center">
-				<CaretDoubleDown class="size-3" />
-			</Listbox.ScrollDownButton>
-		</Listbox.Content>
-	</Listbox.Portal>
-</Listbox.Root>
diff --git a/sites/docs/src/lib/components/demos/listbox-demo-custom-anchor.svelte b/sites/docs/src/lib/components/demos/select-demo-custom-anchor.svelte
similarity index 82%
rename from sites/docs/src/lib/components/demos/listbox-demo-custom-anchor.svelte
rename to sites/docs/src/lib/components/demos/select-demo-custom-anchor.svelte
index 2fdc3ff73..b3c053bb7 100644
--- a/sites/docs/src/lib/components/demos/listbox-demo-custom-anchor.svelte
+++ b/sites/docs/src/lib/components/demos/select-demo-custom-anchor.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import DemoContainer from "../demo-container.svelte";
-	import ListboxDemoCustom from "./listbox-demo-custom.svelte";
+	import SelectDemoCustom from "./select-demo-custom.svelte";
 
 	let customAnchor = $state<HTMLElement>(null!);
 </script>
@@ -8,7 +8,7 @@
 <DemoContainer size="xs" wrapperClass="rounded-bl-card rounded-br-card">
 	<div class="flex items-center gap-6">
 		<div class="rounded-md border p-3" bind:this={customAnchor}>Custom Anchor</div>
-		<ListboxDemoCustom
+		<SelectDemoCustom
 			contentProps={{
 				customAnchor,
 			}}
diff --git a/sites/docs/src/lib/components/demos/select-demo-custom.svelte b/sites/docs/src/lib/components/demos/select-demo-custom.svelte
index e0d15c13b..9031413ec 100644
--- a/sites/docs/src/lib/components/demos/select-demo-custom.svelte
+++ b/sites/docs/src/lib/components/demos/select-demo-custom.svelte
@@ -1,18 +1,16 @@
 <script lang="ts">
-	import { Select, type WithoutChildren } from "bits-ui";
-	import CaretUpDown from "phosphor-svelte/lib/CaretUpDown";
+	import { Select, type SelectSingleRootProps, type WithoutChildrenOrChild } from "bits-ui";
 	import Check from "phosphor-svelte/lib/Check";
 	import Palette from "phosphor-svelte/lib/Palette";
-	import CaretDoubleDown from "phosphor-svelte/lib/CaretDoubleDown";
+	import CaretUpDown from "phosphor-svelte/lib/CaretUpDown";
 	import CaretDoubleUp from "phosphor-svelte/lib/CaretDoubleUp";
+	import CaretDoubleDown from "phosphor-svelte/lib/CaretDoubleDown";
+
+	type Props = Omit<SelectSingleRootProps, "type"> & {
+		contentProps?: WithoutChildrenOrChild<Select.ContentProps>;
+	};
 
-	let {
-		value = $bindable(""),
-		contentProps,
-		...restProps
-	}: WithoutChildren<Select.RootProps> & {
-		contentProps?: WithoutChildren<Select.ContentProps>;
-	} = $props();
+	let { value = $bindable(""), contentProps, ...restProps }: Props = $props();
 
 	const themes = [
 		{ value: "light-monochrome", label: "Light Monochrome" },
@@ -37,53 +35,48 @@
 		{ value: "burnt-orange", label: "Burnt Orange" },
 	];
 
-	const selectedLabel = $derived(themes.find((theme) => theme.value === value)?.label);
+	const selectedLabel = $derived(
+		value ? themes.find((theme) => theme.value === value)?.label : "Select a theme"
+	);
 </script>
 
-<Select.Root name="hello" bind:value {...restProps}>
+<Select.Root {...restProps} type="single" bind:value items={themes}>
 	<Select.Trigger
 		class="inline-flex h-input w-[296px] select-none items-center rounded-9px border border-border-input bg-background px-[11px] text-sm transition-colors placeholder:text-foreground-alt/50"
 		aria-label="Select a theme"
 	>
 		<Palette class="mr-[9px] size-6 text-muted-foreground" />
-		{#if selectedLabel}
-			<Select.Value class="text-sm">
-				{selectedLabel}
-			</Select.Value>
-		{:else}
-			<Select.Value class="text-sm" placeholder="Select a theme" />
-		{/if}
+		{selectedLabel}
 		<CaretUpDown class="ml-auto size-6 text-muted-foreground" />
 	</Select.Trigger>
 	<Select.Portal>
 		<Select.Content
+			class="max-h-96 w-[var(--bits-select-anchor-width)] min-w-[var(--bits-select-anchor-width)] rounded-xl border border-muted bg-background px-1 py-3 shadow-popover outline-none"
+			sideOffset={10}
 			{...contentProps}
-			class="focus-override z-50 max-h-96 w-full min-w-[296px] select-none rounded-xl border border-muted bg-background px-1 py-3 shadow-popover outline-none"
-			sideOffset={8}
 		>
 			<Select.ScrollUpButton class="flex w-full items-center justify-center">
 				<CaretDoubleUp class="size-3" />
 			</Select.ScrollUpButton>
 			<Select.Viewport class="p-1">
-				{#each themes as theme}
+				{#each themes as theme, i (i + theme.value)}
 					<Select.Item
-						class="focus-override flex h-10 w-full select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm outline-none transition-all duration-75 focus:outline-none focus-visible:outline-none data-[highlighted]:bg-muted"
+						class="flex h-10 w-full select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm capitalize outline-none duration-75 data-[highlighted]:bg-muted"
 						value={theme.value}
+						label={theme.label}
 					>
 						{#snippet children({ selected })}
-							<Select.ItemText>
-								{theme.label}
-							</Select.ItemText>
+							{theme.label}
 							{#if selected}
-								<span class="ml-auto">
+								<div class="ml-auto">
 									<Check />
-								</span>
+								</div>
 							{/if}
 						{/snippet}
 					</Select.Item>
 				{/each}
 			</Select.Viewport>
-			<Select.ScrollDownButton class="flex w-full items-center justify-center py-1">
+			<Select.ScrollDownButton class="flex w-full items-center justify-center">
 				<CaretDoubleDown class="size-3" />
 			</Select.ScrollDownButton>
 		</Select.Content>
diff --git a/sites/docs/src/lib/components/demos/listbox-demo-multiple.svelte b/sites/docs/src/lib/components/demos/select-demo-multiple.svelte
similarity index 78%
rename from sites/docs/src/lib/components/demos/listbox-demo-multiple.svelte
rename to sites/docs/src/lib/components/demos/select-demo-multiple.svelte
index ce4b622b0..d7d0d3f74 100644
--- a/sites/docs/src/lib/components/demos/listbox-demo-multiple.svelte
+++ b/sites/docs/src/lib/components/demos/select-demo-multiple.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Listbox } from "bits-ui";
+	import { Select } from "bits-ui";
 	import Check from "phosphor-svelte/lib/Check";
 	import Palette from "phosphor-svelte/lib/Palette";
 	import CaretUpDown from "phosphor-svelte/lib/CaretUpDown";
@@ -40,26 +40,26 @@
 	);
 </script>
 
-<Listbox.Root type="multiple" bind:value>
-	<Listbox.Trigger
+<Select.Root type="multiple" bind:value>
+	<Select.Trigger
 		class="inline-flex h-input w-[296px] select-none items-center rounded-9px border border-border-input bg-background px-[11px] text-sm transition-colors placeholder:text-foreground-alt/50"
 		aria-label="Select a theme"
 	>
 		<Palette class="mr-[9px] size-6 text-muted-foreground" />
 		{selectedLabel}
 		<CaretUpDown class="ml-auto size-6 text-muted-foreground" />
-	</Listbox.Trigger>
-	<Listbox.Portal>
-		<Listbox.Content
-			class="max-h-96 w-[var(--bits-listbox-anchor-width)] min-w-[var(--bits-listbox-anchor-width)] rounded-xl border border-muted bg-background px-1 py-3 shadow-popover outline-none"
+	</Select.Trigger>
+	<Select.Portal>
+		<Select.Content
+			class="max-h-96 w-[var(--bits-select-anchor-width)] min-w-[var(--bits-select-anchor-width)] rounded-xl border border-muted bg-background px-1 py-3 shadow-popover outline-none"
 			sideOffset={10}
 		>
-			<Listbox.ScrollUpButton class="flex w-full items-center justify-center">
+			<Select.ScrollUpButton class="flex w-full items-center justify-center">
 				<CaretDoubleUp class="size-3" />
-			</Listbox.ScrollUpButton>
-			<Listbox.Viewport class="p-1">
+			</Select.ScrollUpButton>
+			<Select.Viewport class="p-1">
 				{#each themes as theme, i (i + theme.value)}
-					<Listbox.Item
+					<Select.Item
 						class="flex h-10 w-full select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm capitalize outline-none duration-75 data-[highlighted]:bg-muted"
 						value={theme.value}
 						label={theme.label}
@@ -72,12 +72,12 @@
 								</div>
 							{/if}
 						{/snippet}
-					</Listbox.Item>
+					</Select.Item>
 				{/each}
-			</Listbox.Viewport>
-			<Listbox.ScrollDownButton class="flex w-full items-center justify-center">
+			</Select.Viewport>
+			<Select.ScrollDownButton class="flex w-full items-center justify-center">
 				<CaretDoubleDown class="size-3" />
-			</Listbox.ScrollDownButton>
-		</Listbox.Content>
-	</Listbox.Portal>
-</Listbox.Root>
+			</Select.ScrollDownButton>
+		</Select.Content>
+	</Select.Portal>
+</Select.Root>
diff --git a/sites/docs/src/lib/components/demos/select-demo-positioning.svelte b/sites/docs/src/lib/components/demos/select-demo-positioning.svelte
deleted file mode 100644
index f2d9aefc5..000000000
--- a/sites/docs/src/lib/components/demos/select-demo-positioning.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="ts">
-	import DemoContainer from "../demo-container.svelte";
-	import SelectDemoCustom from "./select-demo-custom.svelte";
-</script>
-
-<DemoContainer size="sm" wrapperClass="rounded-bl-card rounded-br-card mt-4" class="gap-4">
-	<div class="flex flex-col items-center gap-4">
-		<SelectDemoCustom contentProps={{ position: "floating" }} value="neon-green" />
-		<pre>position="floating"</pre>
-	</div>
-	<div class="flex flex-col items-center gap-4">
-		<SelectDemoCustom contentProps={{ position: "item-aligned" }} value="neon-green" />
-		<pre>position="item-aligned"</pre>
-	</div>
-</DemoContainer>
diff --git a/sites/docs/src/lib/components/demos/select-demo.svelte b/sites/docs/src/lib/components/demos/select-demo.svelte
index e8e9e98ff..695044187 100644
--- a/sites/docs/src/lib/components/demos/select-demo.svelte
+++ b/sites/docs/src/lib/components/demos/select-demo.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { Select } from "bits-ui";
-	import CaretUpDown from "phosphor-svelte/lib/CaretUpDown";
 	import Check from "phosphor-svelte/lib/Check";
 	import Palette from "phosphor-svelte/lib/Palette";
-	import CaretDoubleDown from "phosphor-svelte/lib/CaretDoubleDown";
+	import CaretUpDown from "phosphor-svelte/lib/CaretUpDown";
 	import CaretDoubleUp from "phosphor-svelte/lib/CaretDoubleUp";
+	import CaretDoubleDown from "phosphor-svelte/lib/CaretDoubleDown";
 
 	const themes = [
 		{ value: "light-monochrome", label: "Light Monochrome" },
@@ -29,54 +29,48 @@
 		{ value: "burnt-orange", label: "Burnt Orange" },
 	];
 
-	let value = $state("");
-	const selectedLabel = $derived(themes.find((theme) => theme.value === value)?.label);
+	let value = $state<string>("");
+	const selectedLabel = $derived(
+		value ? themes.find((theme) => theme.value === value)?.label : "Select a theme"
+	);
 </script>
 
-<Select.Root name="hello" bind:value>
+<Select.Root type="single" bind:value items={themes}>
 	<Select.Trigger
 		class="inline-flex h-input w-[296px] select-none items-center rounded-9px border border-border-input bg-background px-[11px] text-sm transition-colors placeholder:text-foreground-alt/50"
 		aria-label="Select a theme"
 	>
 		<Palette class="mr-[9px] size-6 text-muted-foreground" />
-		{#if selectedLabel}
-			<Select.Value class="text-sm">
-				{selectedLabel}
-			</Select.Value>
-		{:else}
-			<Select.Value class="text-sm" placeholder="Select a theme" />
-		{/if}
+		{selectedLabel}
 		<CaretUpDown class="ml-auto size-6 text-muted-foreground" />
 	</Select.Trigger>
 	<Select.Portal>
 		<Select.Content
-			class="focus-override z-50 max-h-96 w-full min-w-[296px] rounded-xl border border-muted bg-background px-1 py-3 shadow-popover outline-none"
-			sideOffset={8}
-			preventScroll={false}
+			class="focus-override z-50 max-h-96 w-[var(--bits-select-anchor-width)] min-w-[var(--bits-select-anchor-width)] select-none rounded-xl border border-muted bg-background px-1 py-3 shadow-popover outline-none"
+			sideOffset={10}
 		>
 			<Select.ScrollUpButton class="flex w-full items-center justify-center">
 				<CaretDoubleUp class="size-3" />
 			</Select.ScrollUpButton>
 			<Select.Viewport class="p-1">
-				{#each themes as theme}
+				{#each themes as theme, i (i + theme.value)}
 					<Select.Item
-						class="focus-override flex h-10 w-full select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm outline-none transition-all duration-75 focus:outline-none focus-visible:outline-none data-[highlighted]:bg-muted"
+						class="flex h-10 w-full select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm capitalize outline-none duration-75 data-[highlighted]:bg-muted"
 						value={theme.value}
+						label={theme.label}
 					>
 						{#snippet children({ selected })}
-							<Select.ItemText>
-								{theme.label}
-							</Select.ItemText>
+							{theme.label}
 							{#if selected}
-								<span class="ml-auto">
+								<div class="ml-auto">
 									<Check />
-								</span>
+								</div>
 							{/if}
 						{/snippet}
 					</Select.Item>
 				{/each}
 			</Select.Viewport>
-			<Select.ScrollDownButton class="flex w-full items-center justify-center py-1">
+			<Select.ScrollDownButton class="flex w-full items-center justify-center">
 				<CaretDoubleDown class="size-3" />
 			</Select.ScrollDownButton>
 		</Select.Content>
diff --git a/sites/docs/src/lib/content/api-reference/combobox.api.ts b/sites/docs/src/lib/content/api-reference/combobox.api.ts
index 6562af778..ffe3f9bb1 100644
--- a/sites/docs/src/lib/content/api-reference/combobox.api.ts
+++ b/sites/docs/src/lib/content/api-reference/combobox.api.ts
@@ -20,6 +20,7 @@ import {
 	StringOrArrayStringProp,
 } from "./extended-types/shared/index.js";
 import { ComboboxScrollAlignmentProp } from "./extended-types/combobox/index.js";
+import { ItemsProp } from "./extended-types/select/index.js";
 import {
 	arrowProps,
 	childrenSnippet,
@@ -32,6 +33,7 @@ import {
 	createEnumDataAttr,
 	createEnumProp,
 	createFunctionProp,
+	createPropSchema,
 	createStringProp,
 	createUnionProp,
 	dirProp,
@@ -110,6 +112,14 @@ export const root = createApiSchema<ComboboxRootPropsWithoutHTML>({
 			default: C.FALSE,
 			description: "Whether or not the combobox menu should loop through items.",
 		}),
+		items: createPropSchema({
+			type: {
+				type: "array",
+				definition: ItemsProp,
+			},
+			description:
+				"Optionally provide an array of objects representing the items in the select for autofill capabilities. Only applicable to combobox's with type `single`",
+		}),
 		children: childrenSnippet(),
 	},
 });
diff --git a/sites/docs/src/lib/content/api-reference/extended-types/select/index.ts b/sites/docs/src/lib/content/api-reference/extended-types/select/index.ts
index 252829efc..d2a5cea52 100644
--- a/sites/docs/src/lib/content/api-reference/extended-types/select/index.ts
+++ b/sites/docs/src/lib/content/api-reference/extended-types/select/index.ts
@@ -1 +1 @@
-export { default as SelectPositionProp } from "./position-prop.md";
+export { default as ItemsProp } from "./items-prop.md";
diff --git a/sites/docs/src/lib/content/api-reference/extended-types/select/items-prop.md b/sites/docs/src/lib/content/api-reference/extended-types/select/items-prop.md
new file mode 100644
index 000000000..6b72f1bac
--- /dev/null
+++ b/sites/docs/src/lib/content/api-reference/extended-types/select/items-prop.md
@@ -0,0 +1,3 @@
+```ts
+{ value: string; label: string; disabled?: boolean}[]
+```
diff --git a/sites/docs/src/lib/content/api-reference/extended-types/select/position-prop.md b/sites/docs/src/lib/content/api-reference/extended-types/select/position-prop.md
deleted file mode 100644
index c5b45a39d..000000000
--- a/sites/docs/src/lib/content/api-reference/extended-types/select/position-prop.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```ts
-"floating" | "item-aligned";
-```
diff --git a/sites/docs/src/lib/content/api-reference/index.ts b/sites/docs/src/lib/content/api-reference/index.ts
index c922615ff..b71bca756 100644
--- a/sites/docs/src/lib/content/api-reference/index.ts
+++ b/sites/docs/src/lib/content/api-reference/index.ts
@@ -35,7 +35,6 @@ import { toggle } from "./toggle.api.js";
 import { toolbar } from "./toolbar.api.js";
 import { tooltip } from "./tooltip.api.js";
 import { menubar } from "./menubar.api.js";
-import { listbox } from "./listbox.api.js";
 import type { APISchema } from "$lib/types/index.js";
 
 export const bits = [
@@ -58,7 +57,6 @@ export const bits = [
 	"dropdown-menu",
 	"label",
 	"link-preview",
-	"listbox",
 	"menubar",
 	"navigation-menu",
 	"pagination",
@@ -107,7 +105,6 @@ export const apiSchemas: Record<Bit, APISchema[]> = {
 	"dropdown-menu": dropdownMenu,
 	label,
 	"link-preview": linkPreview,
-	listbox,
 	menubar,
 	"navigation-menu": navigationMenu,
 	pagination,
diff --git a/sites/docs/src/lib/content/api-reference/listbox.api.ts b/sites/docs/src/lib/content/api-reference/listbox.api.ts
deleted file mode 100644
index 6f8bcc305..000000000
--- a/sites/docs/src/lib/content/api-reference/listbox.api.ts
+++ /dev/null
@@ -1,370 +0,0 @@
-import type {
-	ListboxArrowPropsWithoutHTML,
-	ListboxContentPropsWithoutHTML,
-	ListboxContentStaticPropsWithoutHTML,
-	ListboxGroupHeadingPropsWithoutHTML,
-	ListboxGroupPropsWithoutHTML,
-	ListboxItemPropsWithoutHTML,
-	ListboxRootPropsWithoutHTML,
-	ListboxScrollDownButtonPropsWithoutHTML,
-	ListboxScrollUpButtonPropsWithoutHTML,
-	ListboxTriggerPropsWithoutHTML,
-	ListboxViewportPropsWithoutHTML,
-} from "bits-ui";
-import {
-	NoopProp,
-	OnChangeStringOrArrayProp,
-	OnOpenChangeProp,
-	OpenChildSnippetProps,
-	OpenChildrenSnippetProps,
-	OpenClosedProp,
-	SingleOrMultipleProp,
-	StringOrArrayStringProp,
-} from "./extended-types/shared/index.js";
-import { ComboboxScrollAlignmentProp } from "./extended-types/combobox/index.js";
-import {
-	arrowProps,
-	childrenSnippet,
-	controlledOpenProp,
-	controlledValueProp,
-	createApiSchema,
-	createBooleanProp,
-	createCSSVarSchema,
-	createDataAttrSchema,
-	createEnumDataAttr,
-	createEnumProp,
-	createFunctionProp,
-	createStringProp,
-	createUnionProp,
-	dirProp,
-	dismissibleLayerProps,
-	escapeLayerProps,
-	floatingProps,
-	focusScopeProps,
-	forceMountProp,
-	onCloseAutoFocusProp,
-	preventOverflowTextSelectionProp,
-	preventScrollProp,
-	withChildProps,
-} from "$lib/content/api-reference/helpers.js";
-import * as C from "$lib/content/constants.js";
-
-const stateDataAttr = createEnumDataAttr({
-	name: "state",
-	options: ["open", "closed"],
-	description: "The listbox's open state.",
-	definition: OpenClosedProp,
-});
-
-export const root = createApiSchema<ListboxRootPropsWithoutHTML>({
-	title: "Root",
-	description: "The root listbox component which manages & scopes the state of the listbox.",
-	props: {
-		type: createEnumProp({
-			options: ["single", "multiple"],
-			description: "The type of selection to use for the listbox.",
-			required: true,
-			definition: SingleOrMultipleProp,
-		}),
-		value: createUnionProp({
-			options: ["string", "string[]"],
-			default: "",
-			description:
-				"The value of the listbox. When the type is `'single'`, this should be a string. When the type is `'multiple'`, this should be an array of strings.",
-			bindable: true,
-			definition: StringOrArrayStringProp,
-		}),
-		onValueChange: createFunctionProp({
-			definition: OnChangeStringOrArrayProp,
-			description:
-				"A callback that is fired when the listbox value changes. When the type is `'single'`, the argument will be a string. When the type is `'multiple'`, the argument will be an array of strings.",
-		}),
-		controlledValue: controlledValueProp,
-		open: createBooleanProp({
-			default: C.FALSE,
-			description: "The open state of the listbox menu.",
-			bindable: true,
-		}),
-		onOpenChange: createFunctionProp({
-			definition: OnOpenChangeProp,
-			description: "A callback that is fired when the listbox menu's open state changes.",
-		}),
-		controlledOpen: controlledOpenProp,
-		disabled: createBooleanProp({
-			default: C.FALSE,
-			description: "Whether or not the listbox component is disabled.",
-		}),
-		name: createStringProp({
-			description:
-				"The name to apply to the hidden input element for form submission. If provided, a hidden input element will be rendered to submit the value of the listbox.",
-		}),
-		required: createBooleanProp({
-			default: C.FALSE,
-			description: "Whether or not the listbox menu is required.",
-		}),
-		scrollAlignment: createEnumProp({
-			options: ["nearest", "center"],
-			default: "'nearest'",
-			description: "The alignment of the highlighted item when scrolling.",
-			definition: ComboboxScrollAlignmentProp,
-		}),
-		loop: createBooleanProp({
-			default: C.FALSE,
-			description: "Whether or not the listbox menu should loop through items.",
-		}),
-		children: childrenSnippet(),
-	},
-});
-
-export const content = createApiSchema<ListboxContentPropsWithoutHTML>({
-	title: "Content",
-	description: "The element which contains the listbox's items.",
-	props: {
-		...floatingProps(),
-		...escapeLayerProps,
-		...dismissibleLayerProps,
-		onCloseAutoFocus: onCloseAutoFocusProp,
-		preventOverflowTextSelection: preventOverflowTextSelectionProp,
-		dir: dirProp,
-		loop: createBooleanProp({
-			default: C.FALSE,
-			description:
-				"Whether or not the listbox should loop through items when reaching the end.",
-		}),
-		forceMount: forceMountProp,
-		preventScroll: {
-			...preventScrollProp,
-			default: C.FALSE,
-		},
-		...withChildProps({
-			elType: "HTMLDivElement",
-			childrenDef: OpenChildrenSnippetProps,
-			childDef: OpenChildSnippetProps,
-		}),
-	},
-	dataAttributes: [
-		stateDataAttr,
-		createDataAttrSchema({
-			name: "listbox-content",
-			description: "Present on the content element.",
-		}),
-	],
-	cssVars: [
-		createCSSVarSchema({
-			name: "--bits-listbox-content-transform-origin",
-			description: "The transform origin of the listbox content element.",
-		}),
-		createCSSVarSchema({
-			name: "--bits-listbox-content-available-width",
-			description: "The available width of the listbox content element.",
-		}),
-		createCSSVarSchema({
-			name: "--bits-listbox-content-available-height",
-			description: "The available height of the listbox content element.",
-		}),
-		createCSSVarSchema({
-			name: "--bits-listbox-anchor-width",
-			description: "The width of the listbox trigger element.",
-		}),
-		createCSSVarSchema({
-			name: "--bits-listbox-anchor-height",
-			description: "The height of the listbox trigger element.",
-		}),
-	],
-});
-
-export const contentStatic = createApiSchema<ListboxContentStaticPropsWithoutHTML>({
-	title: "ContentStatic",
-	description: "The element which contains the listbox's items. (Static/No Floating UI)",
-	props: {
-		...escapeLayerProps,
-		...dismissibleLayerProps,
-		...focusScopeProps,
-		preventScroll: preventScrollProp,
-		preventOverflowTextSelection: preventOverflowTextSelectionProp,
-		dir: dirProp,
-		loop: createBooleanProp({
-			default: C.FALSE,
-			description:
-				"Whether or not the listbox should loop through items when reaching the end.",
-		}),
-		forceMount: forceMountProp,
-		...withChildProps({
-			elType: "HTMLDivElement",
-			childrenDef: OpenChildrenSnippetProps,
-			childDef: OpenChildSnippetProps,
-		}),
-	},
-	dataAttributes: [
-		stateDataAttr,
-		createDataAttrSchema({
-			name: "listbox-content",
-			description: "Present on the content element.",
-		}),
-	],
-});
-
-export const item = createApiSchema<ListboxItemPropsWithoutHTML>({
-	title: "Item",
-	description: "A listbox item, which must be a child of the `Listbox.Content` component.",
-	props: {
-		value: createStringProp({
-			description: "The value of the item.",
-			required: true,
-		}),
-		label: createStringProp({
-			description:
-				"The label of the item, which is what the list will be filtered by using typeahead behavior.",
-		}),
-		disabled: createBooleanProp({
-			default: C.FALSE,
-			description:
-				"Whether or not the listbox item is disabled. This will prevent interaction/selection.",
-		}),
-		onHighlight: createFunctionProp({
-			definition: NoopProp,
-			description: "A callback that is fired when the item is highlighted.",
-		}),
-		onUnhighlight: createFunctionProp({
-			definition: NoopProp,
-			description: "A callback that is fired when the item is unhighlighted.",
-		}),
-		...withChildProps({ elType: "HTMLDivElement" }),
-	},
-	dataAttributes: [
-		createDataAttrSchema({
-			name: "value",
-			description: "The value of the listbox item.",
-			value: "string",
-		}),
-		createDataAttrSchema({
-			name: "label",
-			description: "The label of the listbox item.",
-			value: "string",
-		}),
-		createDataAttrSchema({
-			name: "disabled",
-			description: "Present when the item is disabled.",
-		}),
-		createDataAttrSchema({
-			name: "highlighted",
-			description:
-				"Present when the item is highlighted, which is either via keyboard navigation of the menu or hover.",
-		}),
-		createDataAttrSchema({
-			name: "selected",
-			description: "Present when the item is selected.",
-		}),
-		createDataAttrSchema({
-			name: "listbox-item",
-			description: "Present on the item element.",
-		}),
-	],
-});
-
-export const trigger = createApiSchema<ListboxTriggerPropsWithoutHTML>({
-	title: "Trigger",
-	description: "A button which toggles the listbox's open state.",
-	props: withChildProps({ elType: "HTMLButtonElement" }),
-	dataAttributes: [
-		stateDataAttr,
-		createDataAttrSchema({
-			name: "disabled",
-			description: "Present when the listbox is disabled.",
-		}),
-		createDataAttrSchema({
-			name: "listbox-trigger",
-			description: "Present on the trigger element.",
-		}),
-	],
-});
-
-export const viewport = createApiSchema<ListboxViewportPropsWithoutHTML>({
-	title: "Viewport",
-	description:
-		"An optional element to track the scroll position of the listbox for rendering the scroll up/down buttons.",
-	props: withChildProps({ elType: "HTMLDivElement" }),
-	dataAttributes: [
-		createDataAttrSchema({
-			name: "listbox-viewport",
-			description: "Present on the viewport element.",
-		}),
-	],
-});
-
-export const scrollUpButton = createApiSchema<ListboxScrollUpButtonPropsWithoutHTML>({
-	title: "ScrollUpButton",
-	description:
-		"An optional scroll up button element to improve the scroll experience within the listbox. Should be used in conjunction with the `Listbox.Viewport` component.",
-	props: withChildProps({ elType: "HTMLDivElement" }),
-	dataAttributes: [
-		createDataAttrSchema({
-			name: "listbox-scroll-up-button",
-			description: "Present on the scroll up button element.",
-		}),
-	],
-});
-
-export const scrollDownButton = createApiSchema<ListboxScrollDownButtonPropsWithoutHTML>({
-	title: "ScrollDownButton",
-	description:
-		"An optional scroll down button element to improve the scroll experience within the listbox. Should be used in conjunction with the `Listbox.Viewport` component.",
-	props: withChildProps({ elType: "HTMLDivElement" }),
-	dataAttributes: [
-		createDataAttrSchema({
-			name: "listbox-scroll-down-button",
-			description: "Present on the scroll down button element.",
-		}),
-	],
-});
-
-export const group = createApiSchema<ListboxGroupPropsWithoutHTML>({
-	title: "Group",
-	description: "A group of related listbox items.",
-	props: withChildProps({ elType: "HTMLDivElement" }),
-	dataAttributes: [
-		createDataAttrSchema({
-			name: "listbox-group",
-			description: "Present on the group element.",
-		}),
-	],
-});
-
-export const groupHeading = createApiSchema<ListboxGroupHeadingPropsWithoutHTML>({
-	title: "GroupHeading",
-	description:
-		"A heading for the parent listbox group. This is used to describe a group of related listbox items.",
-	props: withChildProps({ elType: "HTMLDivElement" }),
-	dataAttributes: [
-		createDataAttrSchema({
-			name: "listbox-group-heading",
-			description: "Present on the group heading element.",
-		}),
-	],
-});
-
-export const arrow = createApiSchema<ListboxArrowPropsWithoutHTML>({
-	title: "Arrow",
-	description: "An optional arrow element which points to the content when open.",
-	props: arrowProps,
-	dataAttributes: [
-		createDataAttrSchema({
-			name: "arrow",
-			description: "Present on the arrow element.",
-		}),
-	],
-});
-
-export const listbox = [
-	root,
-	trigger,
-	content,
-	contentStatic,
-	item,
-	viewport,
-	scrollUpButton,
-	scrollDownButton,
-	group,
-	groupHeading,
-	arrow,
-];
diff --git a/sites/docs/src/lib/content/api-reference/select.api.ts b/sites/docs/src/lib/content/api-reference/select.api.ts
index f720610df..a4b9fe1f9 100644
--- a/sites/docs/src/lib/content/api-reference/select.api.ts
+++ b/sites/docs/src/lib/content/api-reference/select.api.ts
@@ -1,23 +1,28 @@
 import type {
 	SelectArrowPropsWithoutHTML,
 	SelectContentPropsWithoutHTML,
+	SelectContentStaticPropsWithoutHTML,
 	SelectGroupHeadingPropsWithoutHTML,
 	SelectGroupPropsWithoutHTML,
 	SelectItemPropsWithoutHTML,
 	SelectRootPropsWithoutHTML,
 	SelectScrollDownButtonPropsWithoutHTML,
 	SelectScrollUpButtonPropsWithoutHTML,
-	SelectSeparatorPropsWithoutHTML,
 	SelectTriggerPropsWithoutHTML,
-	SelectValuePropsWithoutHTML,
 	SelectViewportPropsWithoutHTML,
 } from "bits-ui";
 import {
+	NoopProp,
+	OnChangeStringOrArrayProp,
 	OnOpenChangeProp,
-	OnStringValueChangeProp,
+	OpenChildSnippetProps,
+	OpenChildrenSnippetProps,
 	OpenClosedProp,
+	SingleOrMultipleProp,
+	StringOrArrayStringProp,
 } from "./extended-types/shared/index.js";
-import { SelectPositionProp } from "./extended-types/select/index.js";
+import { ComboboxScrollAlignmentProp } from "./extended-types/combobox/index.js";
+import { ItemsProp } from "./extended-types/select/index.js";
 import {
 	arrowProps,
 	childrenSnippet,
@@ -25,35 +30,56 @@ import {
 	controlledValueProp,
 	createApiSchema,
 	createBooleanProp,
+	createCSSVarSchema,
 	createDataAttrSchema,
+	createEnumDataAttr,
 	createEnumProp,
 	createFunctionProp,
+	createObjectProp,
 	createStringProp,
+	createUnionProp,
 	dirProp,
 	dismissibleLayerProps,
-	enums,
 	escapeLayerProps,
 	floatingProps,
 	focusScopeProps,
 	forceMountProp,
+	onCloseAutoFocusProp,
 	preventOverflowTextSelectionProp,
 	preventScrollProp,
 	withChildProps,
 } from "$lib/content/api-reference/helpers.js";
 import * as C from "$lib/content/constants.js";
 
+const stateDataAttr = createEnumDataAttr({
+	name: "state",
+	options: ["open", "closed"],
+	description: "The select's open state.",
+	definition: OpenClosedProp,
+});
+
 export const root = createApiSchema<SelectRootPropsWithoutHTML>({
 	title: "Root",
 	description: "The root select component which manages & scopes the state of the select.",
 	props: {
-		value: createStringProp({
-			description: "The value of the currently selected select item.",
+		type: createEnumProp({
+			options: ["single", "multiple"],
+			description: "The type of selection to use for the select.",
+			required: true,
+			definition: SingleOrMultipleProp,
+		}),
+		value: createUnionProp({
+			options: ["string", "string[]"],
+			default: "",
+			description:
+				"The value of the select. When the type is `'single'`, this should be a string. When the type is `'multiple'`, this should be an array of strings.",
 			bindable: true,
-			default: "''",
+			definition: StringOrArrayStringProp,
 		}),
 		onValueChange: createFunctionProp({
-			definition: OnStringValueChangeProp,
-			description: "A callback that is fired when the select menu's value changes.",
+			definition: OnChangeStringOrArrayProp,
+			description:
+				"A callback that is fired when the select value changes. When the type is `'single'`, the argument will be a string. When the type is `'multiple'`, the argument will be an array of strings.",
 		}),
 		controlledValue: controlledValueProp,
 		open: createBooleanProp({
@@ -68,237 +94,270 @@ export const root = createApiSchema<SelectRootPropsWithoutHTML>({
 		controlledOpen: controlledOpenProp,
 		disabled: createBooleanProp({
 			default: C.FALSE,
-			description: "Whether or not the select menu is disabled.",
-		}),
-		autocomplete: createStringProp({
-			description: "The autocomplete attribute of the select.",
-		}),
-		dir: dirProp,
-		form: createStringProp({
-			description: "The form attribute of the select.",
+			description: "Whether or not the select component is disabled.",
 		}),
 		name: createStringProp({
-			description: "The name to apply to the hidden input element for form submission.",
+			description:
+				"The name to apply to the hidden input element for form submission. If provided, a hidden input element will be rendered to submit the value of the select.",
 		}),
 		required: createBooleanProp({
 			default: C.FALSE,
 			description: "Whether or not the select menu is required.",
 		}),
+		scrollAlignment: createEnumProp({
+			options: ["nearest", "center"],
+			default: "'nearest'",
+			description: "The alignment of the highlighted item when scrolling.",
+			definition: ComboboxScrollAlignmentProp,
+		}),
+		loop: createBooleanProp({
+			default: C.FALSE,
+			description: "Whether or not the select menu should loop through items.",
+		}),
+		items: createObjectProp({
+			definition: ItemsProp,
+			description:
+				"Optionally provide an array of `value` and `label` pairs that will be used to match and trigger selection when the trigger is focused and a key is pressed while the content is closed. Additionally, this will be used for form autofill when the type is single.",
+		}),
 		children: childrenSnippet(),
 	},
 });
 
-export const trigger = createApiSchema<SelectTriggerPropsWithoutHTML>({
-	title: "Trigger",
-	description: "The button element which toggles the select menu's open state.",
+export const content = createApiSchema<SelectContentPropsWithoutHTML>({
+	title: "Content",
+	description: "The element which contains the select's items.",
 	props: {
-		disabled: createBooleanProp({
+		...floatingProps(),
+		...escapeLayerProps,
+		...dismissibleLayerProps,
+		onCloseAutoFocus: onCloseAutoFocusProp,
+		preventOverflowTextSelection: preventOverflowTextSelectionProp,
+		dir: dirProp,
+		loop: createBooleanProp({
+			default: C.FALSE,
+			description:
+				"Whether or not the select should loop through items when reaching the end.",
+		}),
+		forceMount: forceMountProp,
+		preventScroll: {
+			...preventScrollProp,
 			default: C.FALSE,
-			description: "Whether or not the select menu trigger is disabled.",
+		},
+		...withChildProps({
+			elType: "HTMLDivElement",
+			childrenDef: OpenChildrenSnippetProps,
+			childDef: OpenChildSnippetProps,
 		}),
-		...withChildProps({ elType: "HTMLButtonElement" }),
 	},
 	dataAttributes: [
+		stateDataAttr,
 		createDataAttrSchema({
-			name: "state",
-			definition: OpenClosedProp,
-			description: "The dropdown menu's open state.",
-			isEnum: true,
+			name: "select-content",
+			description: "Present on the content element.",
 		}),
-		createDataAttrSchema({
-			name: "disabled",
-			description: "Present when the trigger is disabled.",
+	],
+	cssVars: [
+		createCSSVarSchema({
+			name: "--bits-select-content-transform-origin",
+			description: "The transform origin of the select content element.",
 		}),
-		createDataAttrSchema({
-			name: "select-trigger",
-			description: "Present on the select trigger element.",
+		createCSSVarSchema({
+			name: "--bits-select-content-available-width",
+			description: "The available width of the select content element.",
+		}),
+		createCSSVarSchema({
+			name: "--bits-select-content-available-height",
+			description: "The available height of the select content element.",
+		}),
+		createCSSVarSchema({
+			name: "--bits-select-anchor-width",
+			description: "The width of the select trigger element.",
+		}),
+		createCSSVarSchema({
+			name: "--bits-select-anchor-height",
+			description: "The height of the select trigger element.",
 		}),
 	],
 });
 
-export const content = createApiSchema<SelectContentPropsWithoutHTML>({
-	title: "Content",
-	description: "The content/menu element which contains the select menu's items.",
+export const contentStatic = createApiSchema<SelectContentStaticPropsWithoutHTML>({
+	title: "ContentStatic",
+	description: "The element which contains the select's items. (Static/No Floating UI)",
 	props: {
-		position: createEnumProp({
-			options: ["floating", "item-aligned"],
-			default: "floating",
-			description:
-				"The positioning strategy to use for the content. If set to 'item-aligned', the content will be positioned relative to the trigger, similar to a native select. If set to `floating`, the content will use Floating UI to position itself similar to other popover-like components.",
-			definition: SelectPositionProp,
-		}),
-		dir: dirProp,
-		...floatingProps(),
-		...dismissibleLayerProps,
 		...escapeLayerProps,
+		...dismissibleLayerProps,
 		...focusScopeProps,
-		preventOverflowTextSelection: preventOverflowTextSelectionProp,
 		preventScroll: preventScrollProp,
-		forceMount: forceMountProp,
+		preventOverflowTextSelection: preventOverflowTextSelectionProp,
+		dir: dirProp,
 		loop: createBooleanProp({
 			default: C.FALSE,
 			description:
-				"Whether or not the select menu should loop through items when reaching the end.",
+				"Whether or not the select should loop through items when reaching the end.",
+		}),
+		forceMount: forceMountProp,
+		...withChildProps({
+			elType: "HTMLDivElement",
+			childrenDef: OpenChildrenSnippetProps,
+			childDef: OpenChildSnippetProps,
 		}),
-		...withChildProps({ elType: "HTMLDivElement" }),
 	},
 	dataAttributes: [
+		stateDataAttr,
 		createDataAttrSchema({
 			name: "select-content",
-			description: "Present on the select content element.",
+			description: "Present on the content element.",
 		}),
 	],
 });
 
 export const item = createApiSchema<SelectItemPropsWithoutHTML>({
 	title: "Item",
-	description: "A select item, which must be a child of the `Select.Content` component.",
+	description: "A select item, which must be a child of the `select.Content` component.",
 	props: {
 		value: createStringProp({
-			description: "The value of the select item.",
+			description: "The value of the item.",
 			required: true,
 		}),
-		textValue: createStringProp({
-			description: "The text value of the select item, which is used for typeahead purposes.",
+		label: createStringProp({
+			description:
+				"The label of the item, which is what the list will be filtered by using typeahead behavior.",
 		}),
 		disabled: createBooleanProp({
 			default: C.FALSE,
 			description:
 				"Whether or not the select item is disabled. This will prevent interaction/selection.",
 		}),
+		onHighlight: createFunctionProp({
+			definition: NoopProp,
+			description: "A callback that is fired when the item is highlighted.",
+		}),
+		onUnhighlight: createFunctionProp({
+			definition: NoopProp,
+			description: "A callback that is fired when the item is unhighlighted.",
+		}),
 		...withChildProps({ elType: "HTMLDivElement" }),
 	},
 	dataAttributes: [
-		{
-			name: "state",
-			description: "The state of the item.",
-			value: enums("selected", "hovered"),
-			isEnum: true,
-			definition: OpenClosedProp,
-		},
-
 		createDataAttrSchema({
-			name: "highlighted",
-			description: "Present when the item is highlighted, via keyboard navigation or hover.",
+			name: "value",
+			description: "The value of the select item.",
+			value: "string",
+		}),
+		createDataAttrSchema({
+			name: "label",
+			description: "The label of the select item.",
+			value: "string",
 		}),
 		createDataAttrSchema({
 			name: "disabled",
 			description: "Present when the item is disabled.",
 		}),
 		createDataAttrSchema({
-			name: "select-item",
-			description: "Present on the select item element.",
-		}),
-	],
-});
-
-export const value = createApiSchema<SelectValuePropsWithoutHTML>({
-	title: "Value",
-	description:
-		"A representation of the select menu's value, which is typically displayed in the trigger.",
-	props: {
-		placeholder: createStringProp({
-			description: "A placeholder value to display when no value is selected.",
+			name: "highlighted",
+			description:
+				"Present when the item is highlighted, which is either via keyboard navigation of the menu or hover.",
 		}),
-		...withChildProps({ elType: "HTMLDivElement" }),
-	},
-	dataAttributes: [
 		createDataAttrSchema({
-			name: "select-value",
-			description: "Present on the select value element.",
+			name: "selected",
+			description: "Present when the item is selected.",
 		}),
 		createDataAttrSchema({
-			name: "placeholder",
-			description:
-				"Present when the placeholder is being displayed (there isn't a value selected). You can use this to style the placeholder differently than the selected value.",
+			name: "select-item",
+			description: "Present on the item element.",
 		}),
 	],
 });
 
-export const group = createApiSchema<SelectGroupPropsWithoutHTML>({
-	title: "Group",
-	description: "An accessible group of select menu items.",
-	props: withChildProps({ elType: "HTMLDivElement" }),
+export const trigger = createApiSchema<SelectTriggerPropsWithoutHTML>({
+	title: "Trigger",
+	description: "A button which toggles the select's open state.",
+	props: withChildProps({ elType: "HTMLButtonElement" }),
 	dataAttributes: [
+		stateDataAttr,
 		createDataAttrSchema({
-			name: "select-group",
-			description: "Present on the select group element.",
+			name: "disabled",
+			description: "Present when the select is disabled.",
+		}),
+		createDataAttrSchema({
+			name: "select-trigger",
+			description: "Present on the trigger element.",
 		}),
 	],
 });
 
-export const groupHeading = createApiSchema<SelectGroupHeadingPropsWithoutHTML>({
-	title: "GroupHeading",
+export const viewport = createApiSchema<SelectViewportPropsWithoutHTML>({
+	title: "Viewport",
 	description:
-		"A heading for the select menu which will be skipped when navigating with the keyboard. This must be a child of the `Select.Group` component.",
+		"An optional element to track the scroll position of the select for rendering the scroll up/down buttons.",
 	props: withChildProps({ elType: "HTMLDivElement" }),
 	dataAttributes: [
 		createDataAttrSchema({
-			name: "select-group-heading",
-			description: "Present on the select group heading element.",
+			name: "select-viewport",
+			description: "Present on the viewport element.",
 		}),
 	],
 });
 
-export const separator = createApiSchema<SelectSeparatorPropsWithoutHTML>({
-	title: "Separator",
-	description: "A visual separator for use between select items or groups.",
+export const scrollUpButton = createApiSchema<SelectScrollUpButtonPropsWithoutHTML>({
+	title: "ScrollUpButton",
+	description:
+		"An optional scroll up button element to improve the scroll experience within the select. Should be used in conjunction with the `select.Viewport` component.",
 	props: withChildProps({ elType: "HTMLDivElement" }),
 	dataAttributes: [
 		createDataAttrSchema({
-			name: "separator-root",
-			description: "Present on the select separator element.",
+			name: "select-scroll-up-button",
+			description: "Present on the scroll up button element.",
 		}),
 	],
 });
 
-export const arrow = createApiSchema<SelectArrowPropsWithoutHTML>({
-	title: "Arrow",
-	description: "An optional arrow element which points to the trigger when open.",
-	props: arrowProps,
+export const scrollDownButton = createApiSchema<SelectScrollDownButtonPropsWithoutHTML>({
+	title: "ScrollDownButton",
+	description:
+		"An optional scroll down button element to improve the scroll experience within the select. Should be used in conjunction with the `select.Viewport` component.",
+	props: withChildProps({ elType: "HTMLDivElement" }),
 	dataAttributes: [
 		createDataAttrSchema({
-			name: "arrow",
-			description: "Present on the select arrow element.",
+			name: "select-scroll-down-button",
+			description: "Present on the scroll down button element.",
 		}),
 	],
 });
 
-export const viewport = createApiSchema<SelectViewportPropsWithoutHTML>({
-	title: "Viewport",
-	description:
-		"An optional element to track the scroll position of the select for rendering the scroll up/down buttons.",
+export const group = createApiSchema<SelectGroupPropsWithoutHTML>({
+	title: "Group",
+	description: "A group of related select items.",
 	props: withChildProps({ elType: "HTMLDivElement" }),
 	dataAttributes: [
 		createDataAttrSchema({
-			name: "select-viewport",
-			description: "Present on the viewport element.",
+			name: "select-group",
+			description: "Present on the group element.",
 		}),
 	],
 });
 
-export const scrollUpButton = createApiSchema<SelectScrollUpButtonPropsWithoutHTML>({
-	title: "ScrollUpButton",
+export const groupHeading = createApiSchema<SelectGroupHeadingPropsWithoutHTML>({
+	title: "GroupHeading",
 	description:
-		"An optional scroll up button element to improve the scroll experience within the select. Should be used in conjunction with the `Select.Viewport` component.",
+		"A heading for the parent select group. This is used to describe a group of related select items.",
 	props: withChildProps({ elType: "HTMLDivElement" }),
 	dataAttributes: [
 		createDataAttrSchema({
-			name: "select-scroll-up-button",
-			description: "Present on the scroll up button element.",
+			name: "select-group-heading",
+			description: "Present on the group heading element.",
 		}),
 	],
 });
 
-export const scrollDownButton = createApiSchema<SelectScrollDownButtonPropsWithoutHTML>({
-	title: "ScrollDownButton",
-	description:
-		"An optional scroll down button element to improve the scroll experience within the select. Should be used in conjunction with the `Select.Viewport` component.",
-	props: withChildProps({ elType: "HTMLDivElement" }),
+export const arrow = createApiSchema<SelectArrowPropsWithoutHTML>({
+	title: "Arrow",
+	description: "An optional arrow element which points to the content when open.",
+	props: arrowProps,
 	dataAttributes: [
 		createDataAttrSchema({
-			name: "select-scroll-down-button",
-			description: "Present on the scroll down button element.",
+			name: "arrow",
+			description: "Present on the arrow element.",
 		}),
 	],
 });
@@ -307,13 +366,12 @@ export const select = [
 	root,
 	trigger,
 	content,
+	contentStatic,
 	item,
-	value,
 	viewport,
 	scrollUpButton,
 	scrollDownButton,
 	group,
 	groupHeading,
-	separator,
 	arrow,
 ];
diff --git a/sites/docs/src/routes/(main)/sink/+page.svelte b/sites/docs/src/routes/(main)/sink/+page.svelte
index 1c7ddef50..e69de29bb 100644
--- a/sites/docs/src/routes/(main)/sink/+page.svelte
+++ b/sites/docs/src/routes/(main)/sink/+page.svelte
@@ -1,19 +0,0 @@
-<script lang="ts">
-	import { Avatar } from "bits-ui";
-</script>
-
-<div class="mt-12 grid w-full justify-center gap-12">
-	<Avatar.Root class="h-32 w-32">
-		<Avatar.Image src="https://picsum.photos/200" alt="random-pic" crossorigin="anonymous" />
-		<Avatar.Fallback>Not loaded</Avatar.Fallback>
-	</Avatar.Root>
-
-	<Avatar.Root class="h-32 w-32">
-		<Avatar.Image
-			src="https://github.com/huntabyte.png"
-			alt="@huntabyte"
-			crossorigin="anonymous"
-		/>
-		<Avatar.Fallback>Not loaded</Avatar.Fallback>
-	</Avatar.Root>
-</div>