diff --git a/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue b/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue
new file mode 100644
index 000000000..2c54eea69
--- /dev/null
+++ b/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue
@@ -0,0 +1,143 @@
+<script lang="ts">
+export interface RovingFocusGroupProps extends PrimitiveProps {
+  /**
+   * The orientation of the group.
+   * Mainly so arrow navigation is done accordingly (left & right vs. up & down)
+   */
+  orientation?: Orientation;
+  /**
+   * The direction of navigation between items.
+   */
+  dir?: Direction;
+  /**
+   * Whether keyboard navigation should loop around
+   * @defaultValue false
+   */
+  loop?: boolean;
+  currentTabStopId?: string;
+  defaultCurrentTabStopId?: string;
+}
+
+export interface RovingFocusGroupEmits {
+  (e: "entryFocus", event: Event): void;
+}
+
+type RovingContextValue = {
+  orientation: Ref<Orientation>;
+  dir: Ref<Direction>;
+  loop: Ref<boolean>;
+  currentTabStopId: Ref<string | undefined>;
+  onItemFocus(tabStopId: string): void;
+  onItemShiftTab(): void;
+  onFocusableItemAdd(): void;
+  onFocusableItemRemove(): void;
+};
+
+export const ROVING_FOCUS_INJECTION_KEY =
+  Symbol() as InjectionKey<RovingContextValue>;
+</script>
+
+<script setup lang="ts">
+import { ref, type InjectionKey, provide, type Ref, toRefs } from "vue";
+import {
+  type Orientation,
+  type Direction,
+  ENTRY_FOCUS,
+  EVENT_OPTIONS,
+} from "./utils";
+import { useNewCollection } from "@/shared";
+import {
+  Primitive,
+  usePrimitiveElement,
+  type PrimitiveProps,
+} from "@/Primitive";
+import { focusFirst } from "./utils";
+import { useActiveElement } from "@vueuse/core";
+
+const props = withDefaults(defineProps<RovingFocusGroupProps>(), {
+  loop: false,
+  dir: "ltr",
+  orientation: "horizontal",
+});
+const { loop, orientation, dir } = toRefs(props);
+const emits = defineEmits<RovingFocusGroupEmits>();
+
+const currentTabStopId = ref(props.defaultCurrentTabStopId);
+const isTabbingBackOut = ref(false);
+const isClickFocus = ref(false);
+const focusableItemsCount = ref(0);
+
+const activeElement = useActiveElement();
+const { primitiveElement, currentElement } = usePrimitiveElement();
+const { createCollection } = useNewCollection("rovingFocus");
+const collections = createCollection(currentElement);
+
+const handleFocus = (event: FocusEvent) => {
+  // We normally wouldn't need this check, because we already check
+  // that the focus is on the current target and not bubbling to it.
+  // We do this because Safari doesn't focus buttons when clicked, and
+  // instead, the wrapper will get focused and not through a bubbling event.
+  const isKeyboardFocus = !isClickFocus.value;
+
+  if (
+    event.currentTarget &&
+    event.target === event.currentTarget &&
+    isKeyboardFocus &&
+    !isTabbingBackOut.value
+  ) {
+    const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
+    event.currentTarget.dispatchEvent(entryFocusEvent);
+
+    emits("entryFocus", event);
+
+    if (!entryFocusEvent.defaultPrevented) {
+      const items = collections.value;
+      const activeItem = items.find((item) => item === activeElement.value);
+      const currentItem = items.find(
+        (item) => item.id === currentTabStopId.value
+      );
+      const candidateItems = [activeItem, currentItem, ...items].filter(
+        Boolean
+      ) as typeof items;
+      focusFirst(candidateItems);
+    }
+  }
+
+  isClickFocus.value = false;
+};
+
+provide(ROVING_FOCUS_INJECTION_KEY, {
+  loop,
+  dir,
+  orientation,
+  currentTabStopId,
+  onItemFocus: (tabStopId) => {
+    currentTabStopId.value = tabStopId;
+  },
+  onItemShiftTab: () => {
+    isTabbingBackOut.value = true;
+  },
+  onFocusableItemAdd: () => {
+    focusableItemsCount.value++;
+  },
+  onFocusableItemRemove: () => {
+    focusableItemsCount.value--;
+  },
+});
+</script>
+
+<template>
+  <Primitive
+    ref="primitiveElement"
+    :tabindex="isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0"
+    :data-orientation="orientation"
+    :as="as"
+    :as-child="asChild"
+    style="outline: none"
+    @mousedown="isClickFocus = true"
+    @focus="handleFocus"
+    @blur="isTabbingBackOut = false"
+  >
+    <slot></slot>
+  </Primitive>
+</template>
diff --git a/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue b/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue
new file mode 100644
index 000000000..a14da79d1
--- /dev/null
+++ b/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { Primitive, type PrimitiveProps } from "@/Primitive";
+import { computed, inject, nextTick, onMounted, onUnmounted } from "vue";
+import { ROVING_FOCUS_INJECTION_KEY } from "./RovingFocusGroup.vue";
+import { useId, useNewCollection } from "@/shared";
+import { focusFirst, getFocusIntent, wrapArray } from "./utils";
+
+export interface RovingFocusItemProps extends PrimitiveProps {
+  tabStopId?: string;
+  focusable?: boolean;
+  active?: boolean;
+}
+
+const props = withDefaults(defineProps<RovingFocusItemProps>(), {
+  focusable: true,
+  active: true,
+  as: "span",
+});
+
+const context = inject(ROVING_FOCUS_INJECTION_KEY);
+const autoId = useId();
+const id = computed(() => props.tabStopId || autoId);
+const isCurrentTabStop = computed(
+  () => context?.currentTabStopId.value === id.value
+);
+
+const { injectCollection } = useNewCollection("rovingFocus");
+const collections = injectCollection();
+
+const { onFocusableItemAdd, onFocusableItemRemove } = context!;
+
+onMounted(() => {
+  if (props.focusable) onFocusableItemAdd();
+});
+onUnmounted(() => {
+  if (props.focusable) onFocusableItemRemove();
+});
+
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === "Tab" && event.shiftKey) {
+    context?.onItemShiftTab();
+    return;
+  }
+
+  if (event.target !== event.currentTarget) return;
+
+  const focusIntent = getFocusIntent(
+    event,
+    context?.orientation.value,
+    context?.dir.value
+  );
+
+  if (focusIntent !== undefined) {
+    event.preventDefault();
+    let candidateNodes = [...collections.value];
+
+    if (focusIntent === "last") candidateNodes.reverse();
+    else if (focusIntent === "prev" || focusIntent === "next") {
+      if (focusIntent === "prev") candidateNodes.reverse();
+      const currentIndex = candidateNodes.indexOf(
+        event.currentTarget as HTMLElement
+      );
+
+      candidateNodes = context?.loop.value
+        ? wrapArray(candidateNodes, currentIndex + 1)
+        : candidateNodes.slice(currentIndex + 1);
+    }
+
+    nextTick(() => focusFirst(candidateNodes));
+  }
+};
+</script>
+
+<template>
+  <Primitive
+    data-radix-vue-collection-item
+    :tabindex="isCurrentTabStop ? 0 : -1"
+    :data-orientation="context?.orientation.value"
+    :as="as"
+    :as-child="asChild"
+    @mousedown="
+      (event) => {
+        // We prevent focusing non-focusable items on `mousedown`.
+        // Even though the item has tabIndex={-1}, that only means take it out of the tab order.
+        if (!focusable) event.preventDefault();
+        // Safari doesn't focus a button when clicked so we run our logic on mousedown also
+        else context?.onItemFocus(id);
+      }
+    "
+    @focus="context?.onItemFocus(id)"
+    @keydown="handleKeydown"
+  >
+    <slot></slot>
+  </Primitive>
+</template>
diff --git a/packages/radix-vue/src/RovingFocus/index.ts b/packages/radix-vue/src/RovingFocus/index.ts
new file mode 100644
index 000000000..6272f1381
--- /dev/null
+++ b/packages/radix-vue/src/RovingFocus/index.ts
@@ -0,0 +1,9 @@
+export {
+  default as RovingFocusGroup,
+  type RovingFocusGroupProps,
+  type RovingFocusGroupEmits,
+} from "./RovingFocusGroup.vue";
+export {
+  default as RovingFocusItem,
+  type RovingFocusItemProps,
+} from "./RovingFocusItem.vue";
diff --git a/packages/radix-vue/src/RovingFocus/story/RovingFocusBasic.story.vue b/packages/radix-vue/src/RovingFocus/story/RovingFocusBasic.story.vue
new file mode 100644
index 000000000..8346b65ba
--- /dev/null
+++ b/packages/radix-vue/src/RovingFocus/story/RovingFocusBasic.story.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Button from "./_Button.vue";
+import ButtonGroup from "./_ButtonGroup.vue";
+
+const dir = ref<"ltr" | "rtl">("ltr");
+</script>
+
+<template>
+  <Story
+    group="utilities"
+    title="Roving Focus/Basic"
+    :layout="{ type: 'grid', width: '50%' }"
+    auto-props-disabled
+  >
+    <Variant title="No orientation (both) + no looping">
+      <ButtonGroup :dir="dir" defaultValue="two">
+        <Button value="one">One</Button>
+        <Button value="two">Two</Button>
+        <Button disabled value="three"> Three </Button>
+        <Button value="four">Four</Button>
+      </ButtonGroup>
+    </Variant>
+
+    <Variant title="No orientation (both) +  looping">
+      <ButtonGroup :dir="dir" defaultValue="two" loop>
+        <Button value="one">One</Button>
+        <Button value="two">Two</Button>
+        <Button disabled value="three"> Three </Button>
+        <Button value="four">Four</Button>
+      </ButtonGroup>
+    </Variant>
+
+    <Variant title="Horizontal orientation + no looping">
+      <ButtonGroup :dir="dir" :orientation="'horizontal'">
+        <Button value="one">One</Button>
+        <Button value="two">Two</Button>
+        <Button disabled value="three"> Three </Button>
+        <Button value="four">Four</Button>
+      </ButtonGroup>
+    </Variant>
+
+    <Variant title="Horizontal orientation + looping">
+      <ButtonGroup :dir="dir" :orientation="'horizontal'" loop>
+        <Button value="one">One</Button>
+        <Button value="two">Two</Button>
+        <Button disabled value="three"> Three </Button>
+        <Button value="four">Four</Button>
+      </ButtonGroup>
+    </Variant>
+
+    <Variant title="Vertical orientation + no looping">
+      <ButtonGroup :dir="dir" :orientation="'vertical'">
+        <Button value="one">One</Button>
+        <Button value="two">Two</Button>
+        <Button disabled value="three"> Three </Button>
+        <Button value="four">Four</Button>
+      </ButtonGroup>
+    </Variant>
+
+    <Variant title="Vertical orientation + looping">
+      <ButtonGroup :dir="dir" :orientation="'vertical'" loop>
+        <Button value="one">One</Button>
+        <Button value="two">Two</Button>
+        <Button disabled value="three"> Three </Button>
+        <Button value="four">Four</Button>
+      </ButtonGroup>
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/radix-vue/src/RovingFocus/story/_Button.vue b/packages/radix-vue/src/RovingFocus/story/_Button.vue
new file mode 100644
index 000000000..afeea5d55
--- /dev/null
+++ b/packages/radix-vue/src/RovingFocus/story/_Button.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed, inject, ref } from "vue";
+import { RovingFocusItem, type RovingFocusItemProps } from "../";
+
+interface Props extends RovingFocusItemProps {
+  value: string;
+  disabled?: boolean;
+}
+const props = defineProps<Props>();
+
+const context = inject("rovingFocusDemo", {
+  value: ref(""),
+});
+const isSelected = computed(() => context.value.value === props.value);
+</script>
+
+<template>
+  <RovingFocusItem asChild :active="isSelected" :focusable="!disabled">
+    <button
+      class="border-2 border-blue-600 px-4 py-2 rounded-md"
+      :class="{ 'bg-gray-900 text-white': isSelected }"
+      @click="context.value.value = props.value"
+      @focus="
+        (event: FocusEvent) => {
+          if (context.value.value !== undefined) {
+            (event.target as HTMLElement)?.click();
+          }
+        }
+      "
+      :disabled="disabled"
+    >
+      <slot></slot>
+    </button>
+  </RovingFocusItem>
+</template>
diff --git a/packages/radix-vue/src/RovingFocus/story/_ButtonGroup.vue b/packages/radix-vue/src/RovingFocus/story/_ButtonGroup.vue
new file mode 100644
index 000000000..864517de9
--- /dev/null
+++ b/packages/radix-vue/src/RovingFocus/story/_ButtonGroup.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { provide, ref } from "vue";
+import { RovingFocusGroup, type RovingFocusGroupProps } from "../";
+
+interface Props extends RovingFocusGroupProps {
+  defaultValue?: string;
+}
+const props = defineProps<Props>();
+
+const value = ref(props.defaultValue ?? "");
+
+provide("rovingFocusDemo", {
+  value,
+});
+</script>
+
+<template>
+  <RovingFocusGroup
+    v-model="value"
+    v-bind="props"
+    class="inline-flex gap-4 p-2"
+    :class="orientation === 'vertical' ? 'flex-col' : 'flex-row'"
+  >
+    <slot></slot>
+  </RovingFocusGroup>
+</template>
diff --git a/packages/radix-vue/src/RovingFocus/utils.ts b/packages/radix-vue/src/RovingFocus/utils.ts
new file mode 100644
index 000000000..a6726f2ca
--- /dev/null
+++ b/packages/radix-vue/src/RovingFocus/utils.ts
@@ -0,0 +1,55 @@
+export type Orientation = "horizontal" | "vertical";
+export type Direction = "ltr" | "rtl";
+
+export const ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
+export const EVENT_OPTIONS = { bubbles: false, cancelable: true };
+
+// prettier-ignore
+export const MAP_KEY_TO_FOCUS_INTENT: Record<string, FocusIntent> = {
+  ArrowLeft: 'prev', ArrowUp: 'prev',
+  ArrowRight: 'next', ArrowDown: 'next',
+  PageUp: 'first', Home: 'first',
+  PageDown: 'last', End: 'last',
+};
+
+export function getDirectionAwareKey(key: string, dir?: Direction) {
+  if (dir !== "rtl") return key;
+  return key === "ArrowLeft"
+    ? "ArrowRight"
+    : key === "ArrowRight"
+    ? "ArrowLeft"
+    : key;
+}
+
+type FocusIntent = "first" | "last" | "prev" | "next";
+
+export function getFocusIntent(
+  event: KeyboardEvent,
+  orientation?: Orientation,
+  dir?: Direction
+) {
+  const key = getDirectionAwareKey(event.key, dir);
+  if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key))
+    return undefined;
+  if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key))
+    return undefined;
+  return MAP_KEY_TO_FOCUS_INTENT[key];
+}
+
+export function focusFirst(candidates: HTMLElement[]) {
+  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+  for (const candidate of candidates) {
+    // if focus is already where we want to go, we don't want to keep going through the candidates
+    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+    candidate.focus();
+    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+  }
+}
+
+/**
+ * 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]);
+}
diff --git a/packages/radix-vue/src/Toggle/ToggleRoot.vue b/packages/radix-vue/src/Toggle/ToggleRoot.vue
index 1de3d88a5..6ab6fc967 100644
--- a/packages/radix-vue/src/Toggle/ToggleRoot.vue
+++ b/packages/radix-vue/src/Toggle/ToggleRoot.vue
@@ -55,28 +55,19 @@ const togglePressed = () => {
 const dataState = computed<DataState>(() => {
   return pressed.value ? "on" : "off";
 });
-
-const handleKeydown = (e: KeyboardEvent) => {
-  if (e.key === "Enter") {
-    togglePressed();
-  }
-};
 </script>
 
 <template>
   <Primitive
+    :type="as === 'button' ? 'button' : undefined"
     :as-child="props.asChild"
     :as="as"
-    :value="pressed"
-    v-bind="pressed"
-    role="checkbox"
-    :aria-checked="pressed"
+    :aria-pressed="pressed"
     :data-state="dataState"
-    :data-disabled="props.disabled"
-    :disabled="props.disabled"
+    :data-disabled="disabled ? '' : undefined"
+    :disabled="disabled"
     @click="togglePressed"
-    @keydown="handleKeydown"
-    style="position: relative"
+    @keydown.enter="togglePressed"
   >
     <slot />
   </Primitive>
diff --git a/packages/radix-vue/src/ToggleGroup/ToggleGroup.story.vue b/packages/radix-vue/src/ToggleGroup/ToggleGroup.story.vue
index 1be7010cc..d5c9c02a0 100644
--- a/packages/radix-vue/src/ToggleGroup/ToggleGroup.story.vue
+++ b/packages/radix-vue/src/ToggleGroup/ToggleGroup.story.vue
@@ -3,7 +3,7 @@ import { ToggleGroupItem, ToggleGroupRoot } from "./";
 import { Icon } from "@iconify/vue";
 import { ref } from "vue";
 
-const toggleStateSingle = ref();
+const toggleStateSingle = ref("left");
 const toggleStateMultiple = ref(["italic"]);
 
 const toggleGroupItemClasses =
@@ -11,9 +11,9 @@ const toggleGroupItemClasses =
 </script>
 
 <template>
-  <Story title="Toggle Group" :layout="{ type: 'single', iframe: true }">
+  <Story title="Toggle Group" :layout="{ type: 'single', iframe: false }">
     <Variant title="default">
-      <ToggleGroupRoot v-model="toggleStateSingle" disabled class="flex">
+      <ToggleGroupRoot v-model="toggleStateSingle" class="flex">
         <ToggleGroupItem
           value="left"
           aria-label="Toggle italic"
@@ -38,13 +38,13 @@ const toggleGroupItemClasses =
       </ToggleGroupRoot>
       <br />
       <ToggleGroupRoot
-        v-model="toggleStateMultiple"
+        :default-value="['bold', 'italic']"
         type="multiple"
         class="flex"
       >
         <ToggleGroupItem
           value="bold"
-          aria-label="Toggle italic"
+          aria-label="Toggle Bold"
           :class="toggleGroupItemClasses"
         >
           <Icon icon="radix-icons:font-bold" class="text-black" />
@@ -58,7 +58,7 @@ const toggleGroupItemClasses =
         </ToggleGroupItem>
         <ToggleGroupItem
           value="strikethrough"
-          aria-label="Toggle italic"
+          aria-label="Toggle Strikethrough"
           :class="toggleGroupItemClasses"
         >
           <Icon icon="radix-icons:strikethrough" class="text-black" />
diff --git a/packages/radix-vue/src/ToggleGroup/ToggleGroupItem.vue b/packages/radix-vue/src/ToggleGroup/ToggleGroupItem.vue
index 6eba95de9..48e412cab 100644
--- a/packages/radix-vue/src/ToggleGroup/ToggleGroupItem.vue
+++ b/packages/radix-vue/src/ToggleGroup/ToggleGroupItem.vue
@@ -1,114 +1,45 @@
 <script lang="ts">
-export interface ToggleGroupItemProps extends PrimitiveProps {
-  value?: string;
-  disabled?: boolean;
+export interface ToggleGroupItemProps extends ToggleProps {
+  /**
+   * A string value for the toggle group item. All items within a toggle group should use a unique value.
+   */
+  value: string;
 }
 </script>
 
 <script setup lang="ts">
-import { inject, computed, onMounted } from "vue";
-import {
-  Primitive,
-  usePrimitiveElement,
-  type PrimitiveProps,
-} from "@/Primitive";
+import { computed, inject } from "vue";
+import { Toggle, type ToggleProps } from "@/Toggle";
 import { TOGGLE_GROUP_INJECTION_KEY } from "./ToggleGroupRoot.vue";
-import { useArrowNavigation } from "../shared";
-
-const injectedValue = inject(TOGGLE_GROUP_INJECTION_KEY);
+import { RovingFocusItem } from "@/RovingFocus";
+import { Primitive } from "@/Primitive";
 
 const props = withDefaults(defineProps<ToggleGroupItemProps>(), {
   as: "button",
 });
 
-const { primitiveElement, currentElement } = usePrimitiveElement();
-
-onMounted(() => {
-  injectedValue?.itemsArray.value?.push(currentElement.value!);
-});
-
-const state = computed(() => {
-  if (injectedValue?.type === "multiple") {
-    return injectedValue?.modelValue?.value?.includes(props.value!)
-      ? "on"
-      : "off";
-  } else {
-    return injectedValue?.modelValue?.value === props.value ? "on" : "off";
-  }
-});
-
-const checkedState = computed(() => {
-  if (injectedValue?.type === "multiple") {
-    return injectedValue?.modelValue?.value?.includes(props.value!);
-  } else {
-    return injectedValue?.modelValue?.value === props.value;
-  }
-});
-
-function handleKeydown(e: KeyboardEvent) {
-  if (!injectedValue?.rovingFocus || injectedValue?.rootDisabled) {
-    return;
-  }
-  if (
-    e.key === "ArrowLeft" ||
-    e.key === "ArrowRight" ||
-    e.key === "ArrowUp" ||
-    e.key === "ArrowDown"
-  ) {
-    e.preventDefault();
-  }
-  const newSelectedElement = useArrowNavigation(
-    e,
-    currentElement.value!,
-    injectedValue?.parentElement.value!,
-    { loop: injectedValue?.loop }
-  );
-
-  if (newSelectedElement) {
-    newSelectedElement.focus();
-    injectedValue!.currentFocusedElement!.value = newSelectedElement;
-  }
-}
-
-const getTabIndex = computed(() => {
-  if (!injectedValue?.currentFocusedElement?.value) {
-    return injectedValue?.modelValue?.value === props.value ? "0" : "-1";
-  } else
-    return injectedValue?.currentFocusedElement?.value === currentElement.value
-      ? "0"
-      : "-1";
-});
-
-const getRole = computed(() => {
-  return injectedValue?.type === "multiple" ? "checkbox" : "radio";
-});
-
-function handleChangeValue() {
-  if (injectedValue?.rootDisabled) {
-    return;
-  }
-  injectedValue?.changeModelValue(props.value!);
-  injectedValue!.currentFocusedElement.value = currentElement.value;
-}
+const context = inject(TOGGLE_GROUP_INJECTION_KEY);
+const disabled = computed(() => context?.disabled?.value || props.disabled);
 </script>
 
 <template>
-  <Primitive
-    :as-child="props.asChild"
-    :as="as"
-    ref="primitiveElement"
-    :type="as === 'button' ? 'button' : undefined"
-    :role="getRole"
-    :data-state="state"
-    :disabled="props.disabled || injectedValue?.rootDisabled"
-    :data-disabled="props.disabled ? '' : undefined"
-    :aria-checked="checkedState"
-    :data-orientation="injectedValue?.orientation"
-    @click="handleChangeValue"
-    @keydown="handleKeydown"
-    data-radix-vue-collection-item
-    :tabindex="getTabIndex"
+  <component
+    :is="context?.rovingFocus.value ? RovingFocusItem : Primitive"
+    asChild
+    :focusable="!disabled"
+    :active="pressed"
   >
-    <slot />
-  </Primitive>
+    <Toggle
+      v-bind="props"
+      :disabled="disabled"
+      :pressed="
+        context?.type === 'single'
+          ? context?.modelValue.value === value
+          : context?.modelValue.value?.includes(value)
+      "
+      @update:pressed="context?.changeModelValue(value)"
+    >
+      <slot></slot>
+    </Toggle>
+  </component>
 </template>
diff --git a/packages/radix-vue/src/ToggleGroup/ToggleGroupRoot.vue b/packages/radix-vue/src/ToggleGroup/ToggleGroupRoot.vue
index 0d9e0c811..548a2131a 100644
--- a/packages/radix-vue/src/ToggleGroup/ToggleGroupRoot.vue
+++ b/packages/radix-vue/src/ToggleGroup/ToggleGroupRoot.vue
@@ -1,20 +1,20 @@
 <script lang="ts">
 import type { Ref, InjectionKey } from "vue";
 import type { DataOrientation, Direction } from "../shared/types";
+import { useSingleOrMultipleValue } from "@/shared/useSingleOrMultipleValue";
+import { RovingFocusGroup } from "@/RovingFocus";
 
 type TypeEnum = "single" | "multiple";
 
 export interface ToggleGroupRootProps extends PrimitiveProps {
   type?: TypeEnum;
-  value?: string;
-  defaultValue?: string;
-  //onValueChange?: void;
-  disabled?: boolean;
+  defaultValue?: string | string[];
+  modelValue?: string | string[];
   rovingFocus?: boolean;
+  disabled?: boolean;
   orientation?: DataOrientation;
   dir?: Direction;
-  loop: boolean;
-  modelValue?: string | string[];
+  loop?: boolean;
 }
 export interface ToggleGroupRootEmits {
   (e: "update:modelValue", payload: string): void;
@@ -25,116 +25,55 @@ export const TOGGLE_GROUP_INJECTION_KEY =
 
 interface ToggleGroupProvideValue {
   type: TypeEnum;
-  modelValue?: Readonly<Ref<string | string[] | undefined>>;
+  modelValue: Ref<string | string[] | undefined>;
   changeModelValue: (value: string) => void;
-  parentElement: Ref<HTMLElement | undefined>;
-  currentFocusedElement: Ref<HTMLElement | undefined>;
-  activeValue?: Readonly<Ref<string>>;
-  dir?: Direction;
+  dir?: Ref<Direction>;
   orientation?: DataOrientation;
-  loop: boolean;
-  itemsArray: Ref<HTMLElement[] | undefined>;
-  rovingFocus: boolean;
-  rootDisabled?: boolean;
+  loop: Ref<boolean>;
+  rovingFocus: Ref<boolean>;
+  disabled?: Ref<boolean>;
 }
 </script>
 
 <script setup lang="ts">
-import { ref, provide, watch } from "vue";
-import { useVModel, useActiveElement } from "@vueuse/core";
-import {
-  Primitive,
-  usePrimitiveElement,
-  type PrimitiveProps,
-} from "@/Primitive";
+import { provide, toRefs } from "vue";
+import { Primitive, type PrimitiveProps } from "@/Primitive";
 
 const props = withDefaults(defineProps<ToggleGroupRootProps>(), {
   type: "single",
-  loop: false,
+  loop: true,
   dir: "ltr",
   orientation: "horizontal",
   rovingFocus: true,
   disabled: false,
 });
+const { loop, rovingFocus, disabled, dir } = toRefs(props);
 
 const emits = defineEmits<ToggleGroupRootEmits>();
-
-const { primitiveElement, currentElement: parentElement } =
-  usePrimitiveElement();
-
-const activeValue = ref();
-const currentFocusedElementRef = ref<HTMLElement>();
-const activeElement = useActiveElement();
-const itemsArray = ref<HTMLElement[]>([]);
-
-const modelValue = useVModel(props, "modelValue", emits, {
-  defaultValue: props.defaultValue,
-  passive: true,
-});
+const { modelValue, changeModelValue } = useSingleOrMultipleValue(props, emits);
 
 provide(TOGGLE_GROUP_INJECTION_KEY, {
   type: props.type,
   modelValue,
-  changeModelValue: changeModelValue,
-  parentElement,
-  activeValue: activeValue,
-  currentFocusedElement: currentFocusedElementRef,
-  dir: props.dir,
+  changeModelValue,
+  dir,
   orientation: props.orientation,
-  loop: props.loop,
-  itemsArray,
-  rovingFocus: props.rovingFocus,
-  rootDisabled: props.disabled,
+  loop,
+  rovingFocus,
+  disabled,
 });
-
-function changeModelValue(value: string) {
-  if (props.type === "single") {
-    modelValue.value = value;
-  } else {
-    let modelValueArray = props.modelValue as string[];
-    if (modelValueArray.includes(value)) {
-      let index = modelValueArray.findIndex((i) => i === value);
-      modelValueArray.splice(index, 1);
-    } else {
-      modelValueArray.push(value);
-    }
-    modelValue.value = modelValueArray;
-  }
-}
-
-watch(
-  activeElement,
-  () => {
-    if (activeElement.value === parentElement.value && !props.disabled) {
-      if (!itemsArray.value.length) {
-        return;
-      }
-      if (!currentFocusedElementRef.value) {
-        let filteredItemsArray = itemsArray.value.filter(
-          (i) => !i.hasAttribute("disabled") && !i.hasAttribute("data-disabled")
-        );
-        filteredItemsArray[0].focus();
-        currentFocusedElementRef.value = filteredItemsArray[0];
-      } else {
-        currentFocusedElementRef.value.focus();
-      }
-    }
-  },
-  { immediate: true }
-);
 </script>
 
 <template>
-  <Primitive
-    :as-child="props.asChild"
-    :as="as"
-    ref="primitiveElement"
-    role="group"
-    :dir="props.dir"
-    tabindex="0"
-    aria-label="Text alignment"
-    :data-orientation="props.orientation"
+  <component
+    :is="rovingFocus ? RovingFocusGroup : Primitive"
+    asChild
+    :orientation="rovingFocus ? orientation : undefined"
+    :dir="dir"
+    :loop="rovingFocus ? loop : undefined"
   >
-    <slot />
-  </Primitive>
+    <Primitive ref="primitiveElement" role="group" :as-child="asChild" :as="as">
+      <slot :model-value="modelValue" />
+    </Primitive>
+  </component>
 </template>
diff --git a/packages/radix-vue/src/Toolbar/Toolbar.story.vue b/packages/radix-vue/src/Toolbar/Toolbar.story.vue
index 122900120..06f8e01b3 100644
--- a/packages/radix-vue/src/Toolbar/Toolbar.story.vue
+++ b/packages/radix-vue/src/Toolbar/Toolbar.story.vue
@@ -15,7 +15,7 @@ const toggleStateMultiple = ref([]);
 </script>
 
 <template>
-  <Story title="Toolbar" :layout="{ type: 'single', iframe: true }">
+  <Story title="Toolbar" :layout="{ type: 'single', iframe: false }">
     <Variant title="default">
       <ToolbarRoot
         class="flex p-[10px] w-full min-w-max rounded-md bg-white shadow-[0_2px_10px] shadow-blackA7"
diff --git a/packages/radix-vue/src/Toolbar/ToolbarButton.vue b/packages/radix-vue/src/Toolbar/ToolbarButton.vue
index e767b1209..9e80f95a6 100644
--- a/packages/radix-vue/src/Toolbar/ToolbarButton.vue
+++ b/packages/radix-vue/src/Toolbar/ToolbarButton.vue
@@ -1,45 +1,17 @@
-<script lang="ts">
-export interface ToolbarButtonProps extends PrimitiveProps {}
-</script>
-
 <script setup lang="ts">
-import { inject } from "vue";
-import {
-  Primitive,
-  usePrimitiveElement,
-  type PrimitiveProps,
-} from "@/Primitive";
-import { TOOLBAR_INJECTION_KEY } from "./ToolbarRoot.vue";
-import { useArrowNavigation } from "../shared";
-
-const props = withDefaults(defineProps<ToolbarButtonProps>(), { as: "button" });
-const injectedValue = inject(TOOLBAR_INJECTION_KEY);
-
-const { primitiveElement, currentElement } = usePrimitiveElement();
+import { Primitive, type PrimitiveProps } from "@/Primitive";
+import { RovingFocusItem } from "@/RovingFocus";
 
-function handleKeydown(e: KeyboardEvent) {
-  const newSelectedElement = useArrowNavigation(
-    e,
-    currentElement.value!,
-    injectedValue?.parentElement.value!
-  );
-  newSelectedElement?.focus();
+export interface ToolbarButtonProps extends PrimitiveProps {
+  disabled?: boolean;
 }
+const props = withDefaults(defineProps<ToolbarButtonProps>(), { as: "button" });
 </script>
 
 <template>
-  <Primitive
-    ref="primitiveElement"
-    :data-orientation="injectedValue?.orientation"
-    :as-child="props.asChild"
-    :as="as"
-    :type="as === 'button' ? 'button' : undefined"
-    :tabindex="
-      injectedValue?.activeElement.value === currentElement ? '0' : '-1'
-    "
-    @keydown="handleKeydown"
-    data-radix-vue-collection-item
-  >
-    <slot />
-  </Primitive>
+  <RovingFocusItem asChild :focusable="!disabled">
+    <Primitive :type="as === 'button' ? 'button' : undefined" v-bind="props">
+      <slot></slot>
+    </Primitive>
+  </RovingFocusItem>
 </template>
diff --git a/packages/radix-vue/src/Toolbar/ToolbarLink.vue b/packages/radix-vue/src/Toolbar/ToolbarLink.vue
index 78f4c8d57..bf68836b5 100644
--- a/packages/radix-vue/src/Toolbar/ToolbarLink.vue
+++ b/packages/radix-vue/src/Toolbar/ToolbarLink.vue
@@ -1,43 +1,20 @@
-<script lang="ts">
-export interface ToolbarLinkProps extends PrimitiveProps {}
-</script>
-
 <script setup lang="ts">
-import { inject } from "vue";
-import {
-  Primitive,
-  usePrimitiveElement,
-  type PrimitiveProps,
-} from "@/Primitive";
-import { TOOLBAR_INJECTION_KEY } from "./ToolbarRoot.vue";
-import { useArrowNavigation } from "../shared";
+import { Primitive, type PrimitiveProps } from "@/Primitive";
+import { RovingFocusItem } from "@/RovingFocus";
 
+export interface ToolbarLinkProps extends PrimitiveProps {}
 const props = withDefaults(defineProps<ToolbarLinkProps>(), { as: "a" });
-const injectedValue = inject(TOOLBAR_INJECTION_KEY);
-
-const { primitiveElement, currentElement } = usePrimitiveElement();
-
-function handleKeydown(e: KeyboardEvent) {
-  const newSelectedElement = useArrowNavigation(
-    e,
-    currentElement.value!,
-    injectedValue?.parentElement.value!
-  );
-  newSelectedElement?.focus();
-}
 </script>
 
 <template>
-  <Primitive
-    ref="primitiveElement"
-    :tabindex="
-      injectedValue?.activeElement.value === currentElement ? '0' : '-1'
-    "
-    :as="as"
-    :as-child="props.asChild"
-    @keydown="handleKeydown"
-    data-radix-vue-collection-item
-  >
-    <slot />
-  </Primitive>
+  <RovingFocusItem asChild focusable>
+    <Primitive
+      v-bind="props"
+      @keydown="(event: KeyboardEvent) => {
+      if(event.key === ' ') (event.currentTarget as HTMLElement)?.click()
+    }"
+    >
+      <slot></slot>
+    </Primitive>
+  </RovingFocusItem>
 </template>
diff --git a/packages/radix-vue/src/Toolbar/ToolbarRoot.vue b/packages/radix-vue/src/Toolbar/ToolbarRoot.vue
index 385d7e679..4661886c5 100644
--- a/packages/radix-vue/src/Toolbar/ToolbarRoot.vue
+++ b/packages/radix-vue/src/Toolbar/ToolbarRoot.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
-import type { Ref, InjectionKey } from "vue";
-import type { DataOrientation, Direction } from "../shared/types";
+import type { InjectionKey, Ref } from "vue";
+import type { DataOrientation, Direction } from "@/shared/types";
 
 export interface ToolbarRootProps extends PrimitiveProps {
   orientation?: DataOrientation;
@@ -12,49 +12,34 @@ export const TOOLBAR_INJECTION_KEY =
   Symbol() as InjectionKey<ToolbarProvideValue>;
 
 export interface ToolbarProvideValue {
-  parentElement: Ref<HTMLElement | undefined>;
-  activeElement: Ref<HTMLElement | undefined>;
-  orientation: DataOrientation;
+  orientation: Ref<DataOrientation>;
+  dir: Ref<Direction>;
 }
 </script>
 
 <script setup lang="ts">
-import { ref, provide } from "vue";
-import {
-  Primitive,
-  usePrimitiveElement,
-  type PrimitiveProps,
-} from "@/Primitive";
+import { provide, toRefs } from "vue";
+import { Primitive, type PrimitiveProps } from "@/Primitive";
+import { RovingFocusGroup } from "@/RovingFocus";
 
 const props = withDefaults(defineProps<ToolbarRootProps>(), {
   orientation: "horizontal",
   dir: "ltr",
 });
+const { orientation, dir } = toRefs(props);
 
-const { primitiveElement, currentElement: parentElement } =
-  usePrimitiveElement();
-
-const activeElementRef = ref<HTMLElement>();
-
-provide(TOOLBAR_INJECTION_KEY, {
-  parentElement,
-  activeElement: activeElementRef,
-  orientation: props.orientation,
-});
+provide(TOOLBAR_INJECTION_KEY, { orientation, dir });
 </script>
 
 <template>
-  <Primitive
-    ref="primitiveElement"
-    role="toolbar"
-    tabindex="0"
-    style="outline: none"
-    :aria-orientation="props.orientation"
-    :dir="props.dir"
-    :data-orientation="props.orientation"
-    :as-child="props.asChild"
-    :as="as"
-  >
-    <slot />
-  </Primitive>
+  <RovingFocusGroup asChild :orientation="orientation" :dir="dir" :loop="loop">
+    <Primitive
+      role="toolbar"
+      :aria-orientation="orientation"
+      :as-child="asChild"
+      :as="as"
+    >
+      <slot />
+    </Primitive>
+  </RovingFocusGroup>
 </template>
diff --git a/packages/radix-vue/src/Toolbar/ToolbarSeparator.vue b/packages/radix-vue/src/Toolbar/ToolbarSeparator.vue
index 4250b6be4..f29c5092a 100644
--- a/packages/radix-vue/src/Toolbar/ToolbarSeparator.vue
+++ b/packages/radix-vue/src/Toolbar/ToolbarSeparator.vue
@@ -1,14 +1,21 @@
-<script lang="ts">
-import BaseSeparator from "../shared/component/BaseSeparator.vue";
+<script setup lang="ts">
+import { inject } from "vue";
 import { type PrimitiveProps } from "@/Primitive";
+import { TOOLBAR_INJECTION_KEY } from "./ToolbarRoot.vue";
+import BaseSeparator from "../shared/component/BaseSeparator.vue";
 
 export interface ToolbarSeparatorProps extends PrimitiveProps {}
-</script>
-
-<script setup lang="ts">
 const props = defineProps<ToolbarSeparatorProps>();
+
+const context = inject(TOOLBAR_INJECTION_KEY);
 </script>
 
 <template>
-  <BaseSeparator :as-child="props.asChild" :as="as" />
+  <BaseSeparator
+    :orientation="context?.orientation.value"
+    :as-child="props.asChild"
+    :as="as"
+  >
+    <slot></slot>
+  </BaseSeparator>
 </template>
diff --git a/packages/radix-vue/src/Toolbar/ToolbarToggleGroup.vue b/packages/radix-vue/src/Toolbar/ToolbarToggleGroup.vue
index df667a7cc..5ef0f37f0 100644
--- a/packages/radix-vue/src/Toolbar/ToolbarToggleGroup.vue
+++ b/packages/radix-vue/src/Toolbar/ToolbarToggleGroup.vue
@@ -1,86 +1,31 @@
-<script lang="ts">
-import type { Ref, InjectionKey } from "vue";
-import type { DataOrientation, Direction } from "../shared/types";
-
-type TypeEnum = "single" | "multiple";
-
-export interface ToolbarToggleGroupProps extends PrimitiveProps {
-  type?: TypeEnum;
-  value?: string;
-  defaultValue?: string;
-  //onValueChange?: void;
-  disabled?: boolean;
-  rovingFocus?: boolean;
-  orientation?: DataOrientation;
-  dir?: Direction;
-  loop?: boolean;
-  modelValue?: string | string[];
-}
-export interface ToolbarToggleGroupEmits {
-  (e: "update:modelValue", payload: string | string[] | undefined): void;
-}
-
-export const TOOLBAR_TOGGLE_GROUP_INJECTION_KEY =
-  Symbol() as InjectionKey<ToolbarToggleGroupProvideValue>;
-
-export interface ToolbarToggleGroupProvideValue {
-  type: TypeEnum;
-  modelValue?: Readonly<Ref<string | string[] | undefined>>;
-  changeModelValue: (value: string | undefined) => void;
-  parentElement: Ref<HTMLElement | undefined>;
-  orientation: DataOrientation;
-}
-</script>
-
 <script setup lang="ts">
-import { toRef, provide } from "vue";
 import {
-  Primitive,
-  usePrimitiveElement,
-  type PrimitiveProps,
-} from "@/Primitive";
+  ToggleGroupRoot,
+  type ToggleGroupRootProps,
+  type ToggleGroupRootEmits,
+} from "@/ToggleGroup";
+import { inject } from "vue";
+import { TOOLBAR_INJECTION_KEY } from "./ToolbarRoot.vue";
+import { useEmitAsProps } from "@/shared";
 
-const props = withDefaults(defineProps<ToolbarToggleGroupProps>(), {
-  type: "single",
-});
+const context = inject(TOOLBAR_INJECTION_KEY);
 
-const emits = defineEmits<ToolbarToggleGroupEmits>();
+export interface ToolbarToggleGroupProps extends ToggleGroupRootProps {}
+export type ToolbarToggleGroupEmits = ToggleGroupRootEmits;
 
-const { primitiveElement, currentElement: parentElement } =
-  usePrimitiveElement();
+const props = defineProps<ToolbarToggleGroupProps>();
+const emits = defineEmits<ToolbarToggleGroupEmits>();
 
-provide(TOOLBAR_TOGGLE_GROUP_INJECTION_KEY, {
-  type: props.type,
-  modelValue: toRef(() => props.modelValue),
-  changeModelValue: (value: string | undefined) => {
-    if (props.type === "single") {
-      emits("update:modelValue", value);
-    } else {
-      if (!value) return;
-      let modelValueArray = props.modelValue as string[];
-      if (modelValueArray.includes(value)) {
-        let index = modelValueArray.findIndex((i) => i === value);
-        modelValueArray.splice(index, 1);
-      } else {
-        modelValueArray.push(value);
-      }
-      emits("update:modelValue", modelValueArray);
-    }
-  },
-  orientation: props.orientation ? props.orientation : "horizontal",
-  parentElement,
-});
+const emitsAsProps = useEmitAsProps(emits);
 </script>
 
 <template>
-  <Primitive
-    ref="primitiveElement"
-    role="group"
-    :dir="props.dir"
-    :as-child="props.asChild"
-    :as="as"
-    aria-label="Text alignment"
+  <ToggleGroupRoot
+    v-bind="{ ...props, ...emitsAsProps }"
+    :data-orientation="context?.orientation.value"
+    :dir="context?.dir.value"
+    :roving-focus="false"
   >
-    <slot />
-  </Primitive>
+    <slot></slot>
+  </ToggleGroupRoot>
 </template>
diff --git a/packages/radix-vue/src/Toolbar/ToolbarToggleItem.vue b/packages/radix-vue/src/Toolbar/ToolbarToggleItem.vue
index 12b18e6f2..f77c2e5f9 100644
--- a/packages/radix-vue/src/Toolbar/ToolbarToggleItem.vue
+++ b/packages/radix-vue/src/Toolbar/ToolbarToggleItem.vue
@@ -1,55 +1,15 @@
 <script setup lang="ts">
-import { ref, inject, computed } from "vue";
-import { Primitive, type PrimitiveProps } from "@/Primitive";
-import { TOOLBAR_TOGGLE_GROUP_INJECTION_KEY } from "./ToolbarToggleGroup.vue";
-import { TOOLBAR_INJECTION_KEY } from "./ToolbarRoot.vue";
-import { useArrowNavigation } from "../shared";
-
-export interface ToolbarToggleItemProps extends PrimitiveProps {
-  value?: string;
-  disabled?: boolean;
-}
-
-const injectedValue = inject(TOOLBAR_TOGGLE_GROUP_INJECTION_KEY);
-const rootInjectedValue = inject(TOOLBAR_INJECTION_KEY);
+import { ToggleGroupItem, type ToggleGroupItemProps } from "@/ToggleGroup";
+import ToolbarButton from "./ToolbarButton.vue";
 
+export interface ToolbarToggleItemProps extends ToggleGroupItemProps {}
 const props = defineProps<ToolbarToggleItemProps>();
-
-const state = computed(() => {
-  if (injectedValue?.type === "multiple") {
-    return injectedValue?.modelValue?.value?.includes(props.value!)
-      ? "on"
-      : "off";
-  } else {
-    return injectedValue?.modelValue?.value === props.value ? "on" : "off";
-  }
-});
-
-const currentToggleElement = ref<HTMLElement | undefined>();
-
-function handleKeydown(e: KeyboardEvent) {
-  const newSelectedElement = useArrowNavigation(
-    e,
-    currentToggleElement.value!,
-    rootInjectedValue?.parentElement.value!
-  );
-  newSelectedElement?.focus();
-}
 </script>
 
 <template>
-  <Primitive
-    type="button"
-    :data-state="state"
-    :data-disabled="props.disabled"
-    :data-orientation="injectedValue?.orientation"
-    :as-child="props.asChild"
-    :as="as"
-    @click="injectedValue!.changeModelValue(props.value)"
-    ref="currentToggleElement"
-    @keydown="handleKeydown"
-    data-radix-vue-collection-item
-  >
-    <slot />
-  </Primitive>
+  <ToolbarButton asChild>
+    <ToggleGroupItem v-bind="props">
+      <slot></slot>
+    </ToggleGroupItem>
+  </ToolbarButton>
 </template>