diff --git a/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts b/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts
index 7a32e7eac..eb8561ee3 100644
--- a/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts
@@ -17,6 +17,8 @@ import {
 	verifyContextDeps,
 } from "$lib/internal/index.js";
 import type { StyleProperties } from "$lib/shared/index.js";
+import { withTick } from "$lib/internal/with-tick.js";
+import { useNodeById } from "$lib/internal/elements.svelte.js";
 
 /**
  * BASE
@@ -28,6 +30,7 @@ type AccordionBaseStateProps = ReadonlyBoxedValues<{
 
 class AccordionBaseState {
 	id = undefined as unknown as ReadonlyBox<string>;
+	node = boxedState<HTMLElement | null>(null);
 	disabled: ReadonlyBox<boolean>;
 	#attrs = $derived({
 		id: this.id.value,
@@ -37,6 +40,15 @@ class AccordionBaseState {
 	constructor(props: AccordionBaseStateProps) {
 		this.id = props.id;
 		this.disabled = props.disabled;
+
+		useNodeById(this.id, this.node);
+	}
+
+	getTriggerNodes() {
+		if (!this.node.value) return [];
+		return Array.from(
+			this.node.value.querySelectorAll<HTMLElement>("[data-accordion-trigger]")
+		).filter((el) => !el.dataset.disabled);
 	}
 
 	get props() {
@@ -160,6 +172,7 @@ type AccordionTriggerStateProps = ReadonlyBoxedValues<{
 class AccordionTriggerState {
 	#disabled = undefined as unknown as ReadonlyBox<boolean>;
 	#id = undefined as unknown as ReadonlyBox<string>;
+	#node = boxedState<HTMLElement | null>(null);
 	#root = undefined as unknown as AccordionState;
 	#itemState = undefined as unknown as AccordionItemState;
 	#onclickProp = boxedState<AccordionTriggerStateProps["onclick"]>(readonlyBox(() => () => {}));
@@ -189,6 +202,8 @@ class AccordionTriggerState {
 		this.#onclickProp.value = props.onclick;
 		this.#onkeydownProp.value = props.onkeydown;
 		this.#id = props.id;
+
+		useNodeById(this.#id, this.#node);
 	}
 
 	#onclick = composeHandlers(this.#onclickProp, () => {
@@ -207,20 +222,12 @@ class AccordionTriggerState {
 			return;
 		}
 
-		if (!this.#root.id.value || !this.#id.value) return;
-
-		const rootEl = document.getElementById(this.#root.id.value);
-		if (!rootEl) return;
-		const itemEl = document.getElementById(this.#id.value);
-		if (!itemEl) return;
+		if (!this.#root.node.value || !this.#node.value) return;
 
-		const items = Array.from(rootEl.querySelectorAll<HTMLElement>("[data-accordion-trigger]"));
-		if (!items.length) return;
-
-		const candidateItems = items.filter((item) => !item.dataset.disabled);
+		const candidateItems = this.#root.getTriggerNodes();
 		if (!candidateItems.length) return;
 
-		const currentIndex = candidateItems.indexOf(itemEl);
+		const currentIndex = candidateItems.indexOf(this.#node.value);
 
 		const keyToIndex = {
 			[kbd.ARROW_DOWN]: (currentIndex + 1) % candidateItems.length,
@@ -282,11 +289,7 @@ class AccordionContentState {
 		this.#id = props.id;
 		this.#styleProp = props.style;
 
-		$effect.root(() => {
-			tick().then(() => {
-				this.node.value = document.getElementById(this.#id.value);
-			});
-		});
+		useNodeById(this.#id, this.node);
 
 		$effect.pre(() => {
 			const rAF = requestAnimationFrame(() => {
@@ -304,7 +307,7 @@ class AccordionContentState {
 			const node = this.node.value;
 			if (!node) return;
 
-			tick().then(() => {
+			withTick(() => {
 				if (!this.node) return;
 				// get the dimensions of the element
 				this.#originalStyles = this.#originalStyles || {
@@ -335,9 +338,9 @@ class AccordionContentState {
 	}
 }
 
-/**
- * CONTEXT METHODS
- */
+//
+// CONTEXT METHODS
+//
 
 export const ACCORDION_ROOT_KEY = Symbol("Accordion.Root");
 export const ACCORDION_ITEM_KEY = Symbol("Accordion.Item");
diff --git a/packages/bits-ui/src/lib/bits/checkbox/components/checkbox.svelte b/packages/bits-ui/src/lib/bits/checkbox/components/checkbox.svelte
index 468c065fa..2a189f359 100644
--- a/packages/bits-ui/src/lib/bits/checkbox/components/checkbox.svelte
+++ b/packages/bits-ui/src/lib/bits/checkbox/components/checkbox.svelte
@@ -8,6 +8,7 @@
 	let {
 		checked: checkedProp = $bindable(false),
 		onCheckedChange,
+		children,
 		disabled: disabledProp = false,
 		required: requiredProp = false,
 		name: nameProp,
@@ -58,6 +59,7 @@
 {:else}
 	<button bind:this={el} {...mergedProps}>
 		{@render indicator?.({ checked: checkboxState.checked.value })}
+		{@render children?.()}
 	</button>
 {/if}
 
diff --git a/packages/bits-ui/src/lib/bits/collapsible/collapsible.svelte.ts b/packages/bits-ui/src/lib/bits/collapsible/collapsible.svelte.ts
index 1064b6642..525885451 100644
--- a/packages/bits-ui/src/lib/bits/collapsible/collapsible.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/collapsible/collapsible.svelte.ts
@@ -13,6 +13,9 @@ import { generateId } from "$lib/internal/id.js";
 import { styleToString } from "$lib/internal/style.js";
 import { type EventCallback, composeHandlers } from "$lib/internal/events.js";
 import type { StyleProperties } from "$lib/shared/index.js";
+import { withTick } from "$lib/internal/with-tick.js";
+import { useNodeById } from "$lib/internal/elements.svelte.js";
+import { verifyContextDeps } from "$lib/internal/context.js";
 
 type CollapsibleRootStateProps = BoxedValues<{
 	open: boolean;
@@ -88,11 +91,7 @@ class CollapsibleContentState {
 		this.root.contentId = props.id;
 		this.#styleProp = props.style;
 
-		$effect.root(() => {
-			tick().then(() => {
-				this.node.value = document.getElementById(this.root.contentId.value);
-			});
-		});
+		useNodeById(this.root.contentId, this.node);
 
 		$effect.pre(() => {
 			const rAF = requestAnimationFrame(() => {
@@ -110,7 +109,7 @@ class CollapsibleContentState {
 			const node = this.node.value;
 			if (!node) return;
 
-			tick().then(() => {
+			withTick(() => {
 				if (!this.node) return;
 				// get the dimensions of the element
 				this.#originalStyles = this.#originalStyles || {
@@ -182,6 +181,7 @@ export function setCollapsibleRootState(props: CollapsibleRootStateProps) {
 }
 
 export function getCollapsibleRootState() {
+	verifyContextDeps(COLLAPSIBLE_ROOT_KEY);
 	return getContext<CollapsibleRootState>(COLLAPSIBLE_ROOT_KEY);
 }
 
diff --git a/packages/bits-ui/src/lib/bits/radio-group/components/radio-group-input.svelte b/packages/bits-ui/src/lib/bits/radio-group/components/radio-group-input.svelte
index 4bf6a6373..0fbba9978 100644
--- a/packages/bits-ui/src/lib/bits/radio-group/components/radio-group-input.svelte
+++ b/packages/bits-ui/src/lib/bits/radio-group/components/radio-group-input.svelte
@@ -1,26 +1,2 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import type { InputProps } from "../index.js";
-	import { getCtx } from "../ctx.js";
-
-	type $$Props = InputProps;
-
-	export let asChild: $$Props["asChild"] = false;
-	export let el: $$Props["el"] = undefined;
-
-	const {
-		elements: { hiddenInput },
-		getAttrs,
-	} = getCtx();
-
-	const attrs = getAttrs("input");
-
-	$: builder = $hiddenInput;
-	$: Object.assign(builder, attrs);
 </script>
-
-{#if asChild}
-	<slot {builder} />
-{:else}
-	<input bind:this={el} use:melt={builder} {...$$restProps} />
-{/if}
diff --git a/packages/bits-ui/src/lib/bits/radio-group/components/radio-group-item-indicator.svelte b/packages/bits-ui/src/lib/bits/radio-group/components/radio-group-item-indicator.svelte
deleted file mode 100644
index f4816ff14..000000000
--- a/packages/bits-ui/src/lib/bits/radio-group/components/radio-group-item-indicator.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { getRadioIndicator } from "../ctx.js";
-	import type { ItemIndicatorProps } from "../index.js";
-
-	type $$Props = ItemIndicatorProps;
-
-	export let asChild = false;
-	export let el: $$Props["el"] = undefined;
-
-	const {
-		helpers: { isChecked },
-		value,
-		getAttrs,
-	} = getRadioIndicator();
-
-	const attrs = getAttrs("item-indicator");
-	$: checked = $isChecked(value);
-</script>
-
-{#if asChild}
-	<slot {checked} {attrs} />
-{:else}
-	<div bind:this={el} {...attrs} {...$$restProps}>
-		{#if checked}
-			<slot {checked} {attrs} />
-		{/if}
-	</div>
-{/if}
diff --git a/packages/bits-ui/src/lib/bits/radio-group/components/radio-group-item.svelte b/packages/bits-ui/src/lib/bits/radio-group/components/radio-group-item.svelte
index 9875d83a9..7f2280bf8 100644
--- a/packages/bits-ui/src/lib/bits/radio-group/components/radio-group-item.svelte
+++ b/packages/bits-ui/src/lib/bits/radio-group/components/radio-group-item.svelte
@@ -1,41 +1,43 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { setItemCtx } from "../ctx.js";
-	import type { ItemEvents, ItemProps } from "../index.js";
-	import { createDispatcher } from "$lib/internal/events.js";
+	import type { ItemProps } from "../index.js";
+	import { setRadioGroupItemState } from "../radio-group.svelte.js";
+	import { generateId } from "$lib/internal/id.js";
+	import { readonlyBox } from "$lib/internal/box.svelte.js";
+	import { styleToString } from "$lib/internal/style.js";
 
-	type $$Props = ItemProps;
-	type $$Events = ItemEvents;
+	let {
+		id: idProp = generateId(),
+		asChild,
+		children,
+		child,
+		value: valueProp,
+		disabled: disabledProp = false,
+		onclick: onclickProp = () => {},
+		onkeydown: onkeydownProp = () => {},
+		el = $bindable(),
+		style = {},
+		...restProps
+	}: ItemProps = $props();
 
-	export let value: $$Props["value"];
-	export let disabled: $$Props["disabled"] = false;
-	export let asChild: $$Props["asChild"] = false;
-	export let el: $$Props["el"] = undefined;
+	const value = readonlyBox(() => valueProp);
+	const disabled = readonlyBox(() => disabledProp);
+	const id = readonlyBox(() => idProp);
+	const onclick = readonlyBox(() => onclickProp);
+	const onkeydown = readonlyBox(() => onkeydownProp);
 
-	const {
-		elements: { item },
-		getAttrs,
-	} = setItemCtx(value);
+	const item = setRadioGroupItemState({ value, disabled, id, onclick, onkeydown });
 
-	const dispatch = createDispatcher();
-	const attrs = getAttrs("item");
-
-	$: builder = $item({ value, disabled });
-	$: Object.assign(builder, attrs);
+	const mergedProps = $derived({
+		...restProps,
+		...item.props,
+		style: styleToString(style),
+	});
 </script>
 
 {#if asChild}
-	<slot {builder} />
+	{@render child?.({ props: mergedProps })}
 {:else}
-	<button
-		bind:this={el}
-		use:melt={builder}
-		type="button"
-		{...$$restProps}
-		on:m-click={dispatch}
-		on:m-focus={dispatch}
-		on:m-keydown={dispatch}
-	>
-		<slot {builder} />
+	<button bind:this={el} {...mergedProps}>
+		{@render children?.()}
 	</button>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/radio-group/components/radio-group.svelte b/packages/bits-ui/src/lib/bits/radio-group/components/radio-group.svelte
index d7ca96647..ed79f4681 100644
--- a/packages/bits-ui/src/lib/bits/radio-group/components/radio-group.svelte
+++ b/packages/bits-ui/src/lib/bits/radio-group/components/radio-group.svelte
@@ -1,54 +1,54 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { setCtx } from "../ctx.js";
-	import type { Props } from "../index.js";
+	import type { RootProps } from "../index.js";
+	import { setRadioGroupRootState } from "../radio-group.svelte.js";
+	import { generateId } from "$lib/internal/id.js";
+	import { box, readonlyBox } from "$lib/internal/box.svelte.js";
+	import { styleToString } from "$lib/internal/style.js";
 
-	type $$Props = Props;
-	export let required: $$Props["required"] = undefined;
-	export let disabled: $$Props["disabled"] = undefined;
-	export let value: $$Props["value"] = undefined;
-	export let onValueChange: $$Props["onValueChange"] = undefined;
-	export let loop: $$Props["loop"] = undefined;
-	export let orientation: $$Props["orientation"] = undefined;
-	export let asChild: $$Props["asChild"] = false;
-	export let el: $$Props["el"] = undefined;
+	let {
+		disabled: disabledProp = false,
+		asChild,
+		children,
+		child,
+		style,
+		value: valueProp = $bindable(""),
+		el = $bindable(),
+		orientation: orientationProp = "vertical",
+		loop: loopProp = true,
+		name: nameProp = undefined,
+		required: requiredProp = false,
+		id: idProp = generateId(),
+		onValueChange,
+		...restProps
+	}: RootProps = $props();
 
-	const {
-		elements: { root },
-		states: { value: localValue },
-		updateOption,
-		getAttrs,
-	} = setCtx({
-		required,
-		disabled,
-		defaultValue: value,
-		loop,
-		orientation,
-		onValueChange: ({ next }) => {
-			if (value !== next) {
-				onValueChange?.(next);
-				value = next;
-			}
-			return next;
-		},
-	});
-
-	const attrs = getAttrs("root");
+	const disabled = readonlyBox(() => disabledProp);
+	const value = box(
+		() => valueProp,
+		(v) => {
+			valueProp = v;
+			onValueChange?.(v);
+		}
+	);
+	const orientation = readonlyBox(() => orientationProp);
+	const loop = readonlyBox(() => loopProp);
+	const name = readonlyBox(() => nameProp);
+	const required = readonlyBox(() => requiredProp);
+	const id = readonlyBox(() => idProp);
 
-	$: value !== undefined && localValue.set(value);
-	$: updateOption("required", required);
-	$: updateOption("disabled", disabled);
-	$: updateOption("loop", loop);
-	$: updateOption("orientation", orientation);
+	const root = setRadioGroupRootState({ orientation, disabled, loop, name, required, id, value });
 
-	$: builder = $root;
-	$: Object.assign(builder, attrs);
+	const mergedProps = $derived({
+		...restProps,
+		...root.props,
+		style: styleToString(style),
+	});
 </script>
 
 {#if asChild}
-	<slot {builder} />
+	{@render child?.({ props: mergedProps })}
 {:else}
-	<div bind:this={el} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
+	<div bind:this={el} {...mergedProps}>
+		{@render children?.()}
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/radio-group/index.ts b/packages/bits-ui/src/lib/bits/radio-group/index.ts
index e52eb1542..5311f6065 100644
--- a/packages/bits-ui/src/lib/bits/radio-group/index.ts
+++ b/packages/bits-ui/src/lib/bits/radio-group/index.ts
@@ -1,12 +1,8 @@
 export { default as Root } from "./components/radio-group.svelte";
 export { default as Input } from "./components/radio-group-input.svelte";
 export { default as Item } from "./components/radio-group-item.svelte";
-export { default as ItemIndicator } from "./components/radio-group-item-indicator.svelte";
 
 export type {
-	RadioGroupProps as Props,
-	RadioGroupInputProps as InputProps,
+	RadioGroupRootProps as RootProps,
 	RadioGroupItemProps as ItemProps,
-	RadioGroupItemIndicatorProps as ItemIndicatorProps,
-	RadioGroupItemEvents as ItemEvents,
 } from "./types.js";
diff --git a/packages/bits-ui/src/lib/bits/radio-group/radio-group.svelte.ts b/packages/bits-ui/src/lib/bits/radio-group/radio-group.svelte.ts
new file mode 100644
index 000000000..9e1bf6371
--- /dev/null
+++ b/packages/bits-ui/src/lib/bits/radio-group/radio-group.svelte.ts
@@ -0,0 +1,211 @@
+import { getContext, setContext } from "svelte";
+import { getAriaChecked, getAriaRequired, getDataDisabled } from "$lib/internal/attrs.js";
+import {
+	type BoxedValues,
+	type ReadonlyBoxedValues,
+	boxedState,
+	readonlyBox,
+} from "$lib/internal/box.svelte.js";
+import { useNodeById } from "$lib/internal/elements.svelte.js";
+import { type EventCallback, composeHandlers } from "$lib/internal/events.js";
+import { getDirectionalKeys, kbd } from "$lib/internal/kbd.js";
+import { getElemDirection } from "$lib/internal/locale.js";
+import { withTick } from "$lib/internal/with-tick.js";
+import type { Orientation } from "$lib/shared/index.js";
+import { verifyContextDeps } from "$lib/internal/context.js";
+
+type RadioGroupRootStateProps = ReadonlyBoxedValues<{
+	id: string;
+	disabled: boolean;
+	required: boolean;
+	loop: boolean;
+	orientation: Orientation;
+	name: string | undefined;
+}> &
+	BoxedValues<{ value: string }>;
+
+class RadioGroupRootState {
+	id = undefined as unknown as RadioGroupRootStateProps["id"];
+	node = boxedState<HTMLElement | null>(null);
+	disabled = undefined as unknown as RadioGroupRootStateProps["disabled"];
+	required = undefined as unknown as RadioGroupRootStateProps["required"];
+	loop = undefined as unknown as RadioGroupRootStateProps["loop"];
+	orientation = undefined as unknown as RadioGroupRootStateProps["orientation"];
+	name = undefined as unknown as RadioGroupRootStateProps["name"];
+	value = undefined as unknown as RadioGroupRootStateProps["value"];
+	#attrs = $derived({
+		role: "radiogroup",
+		"aria-required": getAriaRequired(this.required.value),
+		"data-disabled": getDataDisabled(this.disabled.value),
+		"data-orientation": this.orientation.value,
+		"data-bits-radio-group": "",
+	} as const);
+
+	constructor(props: RadioGroupRootStateProps) {
+		this.id = props.id;
+		this.disabled = props.disabled;
+		this.required = props.required;
+		this.loop = props.loop;
+		this.orientation = props.orientation;
+		this.name = props.name;
+		this.value = props.value;
+
+		$effect.pre(() => {
+			// eslint-disable-next-line no-unused-expressions
+			this.id.value;
+
+			withTick(() => {
+				this.node.value = document.getElementById(this.id.value);
+			});
+		});
+	}
+
+	isChecked(value: string) {
+		return this.value.value === value;
+	}
+
+	selectValue(value: string) {
+		this.value.value = value;
+	}
+
+	getRadioItemNodes() {
+		if (!this.node.value) return [];
+		return Array.from(this.node.value.querySelectorAll("[data-bits-radio-group-item]")).filter(
+			(el): el is HTMLElement => el instanceof HTMLElement && !el.dataset.disabled
+		);
+	}
+
+	createItem(props: RadioGroupItemStateProps) {
+		return new RadioGroupItemState(props, this);
+	}
+
+	get props() {
+		return this.#attrs;
+	}
+}
+
+//
+// RADIO GROUP ITEM
+//
+
+type RadioGroupItemStateProps = ReadonlyBoxedValues<{
+	disabled: boolean;
+	value: string;
+	onclick: EventCallback<MouseEvent>;
+	onkeydown: EventCallback<KeyboardEvent>;
+	id: string;
+}>;
+
+class RadioGroupItemState {
+	#id = undefined as unknown as RadioGroupItemStateProps["id"];
+	#node = boxedState<HTMLElement | null>(null);
+	#root = undefined as unknown as RadioGroupRootState;
+	#disabled = undefined as unknown as RadioGroupItemStateProps["disabled"];
+	#value = undefined as unknown as RadioGroupItemStateProps["value"];
+	#isDisabled = $derived(this.#disabled.value || this.#root.disabled.value);
+	#isChecked = $derived(this.#root.isChecked(this.#value.value));
+	#onclickProp = boxedState<RadioGroupItemStateProps["onclick"]>(readonlyBox(() => () => {}));
+	#onkeydownProp = boxedState<RadioGroupItemStateProps["onkeydown"]>(readonlyBox(() => () => {}));
+
+	#attrs = $derived({
+		disabled: this.#isDisabled ? true : undefined,
+		"data-value": this.#value.value,
+		"data-orientation": this.#root.orientation.value,
+		"data-disabled": getDataDisabled(this.#isDisabled),
+		"data-state": this.#isChecked ? "checked" : "unchecked",
+		"aria-checked": getAriaChecked(this.#isChecked),
+		"data-bits-radio-group-item": "",
+		type: "button",
+		role: "radio",
+	} as const);
+
+	constructor(props: RadioGroupItemStateProps, root: RadioGroupRootState) {
+		this.#disabled = props.disabled;
+		this.#value = props.value;
+		this.#root = root;
+		this.#id = props.id;
+
+		useNodeById(this.#id, this.#node);
+	}
+
+	onclick = composeHandlers(this.#onclickProp, () => {
+		this.#root.selectValue(this.#value.value);
+	});
+
+	onkeydown = composeHandlers(this.#onkeydownProp, (e) => {
+		if (!this.#root.node.value || !this.#node.value) return;
+		const items = this.#root.getRadioItemNodes();
+		if (!items.length) return;
+
+		const currentIndex = items.indexOf(this.#node.value);
+
+		const dir = getElemDirection(this.#root.node.value);
+		const { nextKey, prevKey } = getDirectionalKeys(dir, this.#root.orientation.value);
+
+		let itemToFocus: HTMLElement | undefined;
+		const loop = this.#root.loop.value;
+
+		const keyMap = {
+			[nextKey]: () => {
+				e.preventDefault();
+				const nextIndex = currentIndex + 1;
+				if (nextIndex >= items.length && loop) {
+					itemToFocus = items[0];
+				} else {
+					itemToFocus = items[nextIndex];
+				}
+			},
+			[prevKey]: () => {
+				e.preventDefault();
+				const prevIndex = currentIndex - 1;
+				if (prevIndex < 0 && loop) {
+					itemToFocus = items[items.length - 1];
+				} else {
+					itemToFocus = items[prevIndex];
+				}
+			},
+			[kbd.HOME]: () => {
+				e.preventDefault();
+				itemToFocus = items[0];
+			},
+			[kbd.END]: () => {
+				e.preventDefault();
+				itemToFocus = items[items.length - 1];
+			},
+		};
+
+		keyMap[e.key]?.();
+
+		if (itemToFocus) {
+			itemToFocus.focus();
+			this.#root.selectValue(itemToFocus.dataset.value as string);
+		}
+	});
+
+	get props() {
+		return {
+			...this.#attrs,
+			onclick,
+			onkeydown,
+		};
+	}
+}
+
+//
+// CONTEXT METHODS
+//
+
+const RADIO_GROUP_ROOT_KEY = Symbol("RadioGroup.Root");
+
+export function setRadioGroupRootState(props: RadioGroupRootStateProps) {
+	return setContext(RADIO_GROUP_ROOT_KEY, new RadioGroupRootState(props));
+}
+
+export function getRadioGroupRootState() {
+	verifyContextDeps(RADIO_GROUP_ROOT_KEY);
+	return getContext<RadioGroupRootState>(RADIO_GROUP_ROOT_KEY);
+}
+
+export function setRadioGroupItemState(props: RadioGroupItemStateProps) {
+	return getRadioGroupRootState().createItem(props);
+}
diff --git a/packages/bits-ui/src/lib/bits/radio-group/types.ts b/packages/bits-ui/src/lib/bits/radio-group/types.ts
index f5f39aacc..e92fa47b3 100644
--- a/packages/bits-ui/src/lib/bits/radio-group/types.ts
+++ b/packages/bits-ui/src/lib/bits/radio-group/types.ts
@@ -1,58 +1,92 @@
-import type { HTMLButtonAttributes, HTMLInputAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
 import type {
-	RadioGroupItemProps as MeltRadioGroupItemProps,
-	CreateRadioGroupProps as MeltRadioGroupProps,
-} from "@melt-ui/svelte";
-import type {
-	DOMElement,
-	Expand,
-	HTMLDivAttributes,
-	ObjectVariation,
-	OmitValue,
+	EventCallback,
 	OnChangeFn,
+	PrimitiveButtonAttributes,
+	PrimitiveDivAttributes,
+	WithAsChild,
 } from "$lib/internal/index.js";
-import type { CustomEventHandler } from "$lib/index.js";
+import type { Orientation } from "$lib/index.js";
+
+export type RadioGroupRootPropsWithoutHTML = WithAsChild<{
+	/**
+	 * The orientation of the radio group. Used to determine
+	 * how keyboard navigation should work.
+	 *
+	 * @defaultValue "vertical"
+	 */
+	orientation?: Orientation;
 
-export type RadioGroupPropsWithoutHTML = Expand<
-	OmitValue<MeltRadioGroupProps> & {
-		/**
-		 * The value of the radio group.
-		 * You can bind this to a value to programmatically control the value.
-		 *
-		 * @defaultValue undefined
-		 */
+	/**
+	 * Whether to loop around the radio items when navigating
+	 * with the keyboard.
+	 *
+	 * @defaultValue true
+	 */
+	loop?: boolean;
 
-		value?: MeltRadioGroupProps["defaultValue"] & {};
+	/**
+	 * The value of the selected radio item.
+	 *
+	 * @defaultValue ""
+	 */
+	value?: string;
 
-		/**
-		 * A callback function called when the value changes.
-		 */
+	/**
+	 * The callback to call when the selected radio item changes.
+	 */
+	onValueChange?: OnChangeFn<string>;
 
-		onValueChange?: OnChangeFn<MeltRadioGroupProps["defaultValue"] & {}>;
-	} & DOMElement
->;
+	/**
+	 * The name to apply to the radio group's input element for
+	 * form submission. If not provided, a hidden input will not
+	 * be rendered and the radio group will not be part of a form.
+	 *
+	 * @defaultValue undefined
+	 */
+	name?: string;
 
-export type RadioGroupInputPropsWithoutHTML = DOMElement<HTMLInputElement>;
+	/**
+	 * Whether the radio group is disabled.
+	 *
+	 * @defaultValue false
+	 */
+	disabled?: boolean;
 
-export type RadioGroupItemPropsWithoutHTML = Expand<
-	ObjectVariation<MeltRadioGroupItemProps> & DOMElement<HTMLButtonElement>
->;
+	/**
+	 * Whether the radio group is required for form submission.
+	 * If `true`, ensure you provide a `name` prop so the hidden
+	 * input is rendered.
+	 */
+	required?: boolean;
+}>;
 
-export type RadioGroupItemIndicatorPropsWithoutHTML = DOMElement;
+export type RadioGroupRootProps = RadioGroupRootPropsWithoutHTML & PrimitiveDivAttributes;
 
-//
+export type RadioGroupItemPropsWithoutHTML = WithAsChild<{
+	/**
+	 * The value of the radio item.
+	 */
+	value: string;
 
-export type RadioGroupProps = RadioGroupPropsWithoutHTML & HTMLDivAttributes;
+	/**
+	 * Whether the radio item is disabled.
+	 *
+	 * @defaultValue false
+	 */
+	disabled?: boolean;
 
-export type RadioGroupInputProps = RadioGroupInputPropsWithoutHTML & HTMLInputAttributes;
+	onclick: EventCallback<MouseEvent>;
 
-export type RadioGroupItemProps = RadioGroupItemPropsWithoutHTML & HTMLButtonAttributes;
+	onkeydown: EventCallback<KeyboardEvent>;
 
-export type RadioGroupItemIndicatorProps = RadioGroupItemIndicatorPropsWithoutHTML &
-	HTMLDivAttributes;
+	/**
+	 * A snippet to render the radio item's indicator.
+	 * It receives the item's `checked` state as a prop
+	 * for conditional styling.
+	 */
+	indicator?: Snippet<[{ checked: boolean }]>;
+}>;
 
-export type RadioGroupItemEvents<T extends Element = HTMLButtonElement> = {
-	click: CustomEventHandler<MouseEvent, T>;
-	keydown: CustomEventHandler<KeyboardEvent, T>;
-	focus: CustomEventHandler<FocusEvent, T>;
-};
+export type RadioGroupItemProps = RadioGroupItemPropsWithoutHTML &
+	Omit<PrimitiveButtonAttributes, "value" | "disabled" | "onclick" | "onkeydown">;
diff --git a/packages/bits-ui/src/lib/internal/elements.svelte.ts b/packages/bits-ui/src/lib/internal/elements.svelte.ts
new file mode 100644
index 000000000..f61ecc32f
--- /dev/null
+++ b/packages/bits-ui/src/lib/internal/elements.svelte.ts
@@ -0,0 +1,20 @@
+import type { Box, ReadonlyBox } from "./box.svelte.js";
+import { withTick } from "./with-tick.js";
+
+/**
+ * Given a boxed ID of a node, finds the node with that ID and sets it to the boxed node.
+ * Reactive using `$effect.pre` to ensure when the ID changes, an update is triggered and
+ * new node is found.
+ *
+ * @param id The boxed ID of the node to find.
+ * @param node The boxed node to set the found node to.
+ */
+export function useNodeById(id: ReadonlyBox<string> | Box<string>, node: Box<HTMLElement | null>) {
+	$effect.pre(() => {
+		// eslint-disable-next-line no-unused-expressions
+		id.value;
+		withTick(() => {
+			node.value = document.getElementById(id.value);
+		});
+	});
+}
diff --git a/packages/bits-ui/src/lib/internal/kbd.ts b/packages/bits-ui/src/lib/internal/kbd.ts
index b3676de55..37df06861 100644
--- a/packages/bits-ui/src/lib/internal/kbd.ts
+++ b/packages/bits-ui/src/lib/internal/kbd.ts
@@ -1,3 +1,5 @@
+import type { Orientation, TextDirection } from "$lib/shared/index.js";
+
 export function getKbd() {
 	return {
 		ALT: "Alt",
@@ -71,3 +73,32 @@ export const kbd = {
 	CTRL: "Control",
 	ASTERISK: "*",
 };
+
+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.SPACE, kbd.ENTER];
+
+export function getNextKey(dir: TextDirection = "ltr", orientation: Orientation = "horizontal") {
+	return {
+		horizontal: dir === "rtl" ? kbd.ARROW_LEFT : kbd.ARROW_RIGHT,
+		vertical: kbd.ARROW_DOWN,
+	}[orientation];
+}
+
+export function getPrevKey(dir: TextDirection = "ltr", orientation: Orientation = "horizontal") {
+	return {
+		horizontal: dir === "rtl" ? kbd.ARROW_RIGHT : kbd.ARROW_LEFT,
+		vertical: kbd.ARROW_UP,
+	}[orientation];
+}
+
+export function getDirectionalKeys(
+	dir: TextDirection = "ltr",
+	orientation: Orientation = "horizontal"
+) {
+	return {
+		nextKey: getNextKey(dir, orientation),
+		prevKey: getPrevKey(dir, orientation),
+	};
+}
diff --git a/packages/bits-ui/src/lib/internal/locale.ts b/packages/bits-ui/src/lib/internal/locale.ts
new file mode 100644
index 000000000..7045bd97b
--- /dev/null
+++ b/packages/bits-ui/src/lib/internal/locale.ts
@@ -0,0 +1,13 @@
+// https://github.com/melt-ui/melt-ui
+import type { TextDirection } from "$lib/shared/index.js";
+
+/**
+ * Detects the text direction in the element.
+ * @returns {TextDirection} The text direction ('ltr' for left-to-right or 'rtl' for right-to-left).
+ */
+export function getElemDirection(elem: HTMLElement): TextDirection {
+	const style = window.getComputedStyle(elem);
+	const direction = style.getPropertyValue("direction");
+
+	return direction as TextDirection;
+}
diff --git a/packages/bits-ui/src/lib/internal/types.ts b/packages/bits-ui/src/lib/internal/types.ts
index fe9a3b0b7..53c3c40fc 100644
--- a/packages/bits-ui/src/lib/internal/types.ts
+++ b/packages/bits-ui/src/lib/internal/types.ts
@@ -121,8 +121,7 @@ export type TransitionProps<
 	outTransitionConfig?: TransitionParams<Out>;
 }>;
 
-export type Primitive<T> = Omit<T, "style">;
-
+type Primitive<T> = Omit<T, "style" | "id"> & { id?: string };
 export type PrimitiveButtonAttributes = Primitive<HTMLButtonAttributes>;
 export type PrimitiveDivAttributes = Primitive<HTMLDivAttributes>;
 export type PrimitiveInputAttributes = Primitive<HTMLInputAttributes>;
@@ -163,7 +162,3 @@ export type WithAsChild<T, U extends Record<PropertyKey, unknown> = {}> =
  * // Result type will be { a: number; }
  */
 export type Without<T extends object, U extends object> = Omit<T, keyof U>;
-
-export type ElementRef = { value?: HTMLElement | null | undefined };
-
-export type Ref<T> = { value: T };
diff --git a/packages/bits-ui/src/lib/internal/with-tick.ts b/packages/bits-ui/src/lib/internal/with-tick.ts
new file mode 100644
index 000000000..6b0143674
--- /dev/null
+++ b/packages/bits-ui/src/lib/internal/with-tick.ts
@@ -0,0 +1,5 @@
+import { tick } from "svelte";
+
+export function withTick(cb: () => void) {
+	tick().then(cb);
+}
diff --git a/packages/bits-ui/src/lib/shared/index.ts b/packages/bits-ui/src/lib/shared/index.ts
index 5c3ead93b..8d9b5facb 100644
--- a/packages/bits-ui/src/lib/shared/index.ts
+++ b/packages/bits-ui/src/lib/shared/index.ts
@@ -28,4 +28,7 @@ export type FocusProp = FocusTarget | ((defaultEl?: HTMLElement | null) => Focus
 
 export type StyleProperties = CSS.PropertiesHyphen;
 
+export type Orientation = "horizontal" | "vertical";
+export type TextDirection = "ltr" | "rtl";
+
 export type { Month, Page, PageItem, Ellipsis, EditableSegmentPart };