diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 000000000..6c754afeb
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1 @@
+github: [zernonia]
diff --git a/.histoire/package.json b/.histoire/package.json
index 0cf080516..73b53094c 100644
--- a/.histoire/package.json
+++ b/.histoire/package.json
@@ -24,7 +24,7 @@
     "autoprefixer": "^10.4.14",
     "eslint": "^8.43.0",
     "histoire": "^0.16.2",
-    "postcss": "^8.4.26",
+    "postcss": "^8.4.31",
     "tailwindcss": "^3.3.3",
     "vite": "^4.3.9",
     "vue": "^3.3.4"
diff --git a/docs/.vitepress/contributors.ts b/docs/.vitepress/contributors.ts
index 67906690e..bcfa617af 100644
--- a/docs/.vitepress/contributors.ts
+++ b/docs/.vitepress/contributors.ts
@@ -50,6 +50,7 @@ const plainTeamMembers: CoreTeam[] = [
     github: 'zernonia',
     twitter: 'zernonia',
     desc: 'Core team member of Radix Vue',
+    sponsor: 'https://github.com/sponsors/zernonia',
   },
   {
     avatar: contributorsAvatars.khairulhaaziq,
diff --git a/docs/content/components/dialog.md b/docs/content/components/dialog.md
index 6a00a1245..d8856a4c6 100644
--- a/docs/content/components/dialog.md
+++ b/docs/content/components/dialog.md
@@ -226,7 +226,29 @@ Contains content to be rendered in the open dialog
           Event handler called when the escape key is down. It can be prevented by calling <Code>event.preventDefault</Code>.
         </span>
       `,
-    }
+    },
+    {
+      name: '@pointerDownOutside',
+      type: '(event: PointerDownOutsideEvent) => void',
+      typeSimple: 'function',
+      description: `
+        <span>
+          Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling <code>event.preventDefault</code>.
+        </span>
+      `,
+    },
+    {
+      name: '@interactOutside',
+      type: '(event: FocusEvent | MouseEvent | TouchEvent) => void',
+      typeSimple: 'function',
+      description: `
+        <span>
+          Event handler called when an interaction (pointer or focus event)
+          happens outside the bounds of the component. It can be prevented by
+          calling <code>event.preventDefault</code>.
+        </span>
+      `,
+    },
   ]"
 />
 
diff --git a/packages/radix-vue/src/Accordion/AccordionContent.vue b/packages/radix-vue/src/Accordion/AccordionContent.vue
index 467d3e142..556ed4e12 100644
--- a/packages/radix-vue/src/Accordion/AccordionContent.vue
+++ b/packages/radix-vue/src/Accordion/AccordionContent.vue
@@ -1,29 +1,28 @@
 <script setup lang="ts">
-import { inject } from 'vue'
 import { CollapsibleContent } from '../Collapsible'
-import { ACCORDION_ITEM_INJECTION_KEY } from './AccordionItem.vue'
-import { ACCORDION_INJECTION_KEY } from './AccordionRoot.vue'
+import { injectAccordionItemContext } from './AccordionItem.vue'
+import { injectAccordionRootContext } from './AccordionRoot.vue'
 import type { PrimitiveProps } from '@/Primitive'
 
 export interface AccordionContentProps extends PrimitiveProps {}
 
 const props = defineProps<AccordionContentProps>()
 
-const injectedRoot = inject(ACCORDION_INJECTION_KEY)
-const injectedItem = inject(ACCORDION_ITEM_INJECTION_KEY)
+const rootContext = injectAccordionRootContext()
+const itemContext = injectAccordionItemContext()
 </script>
 
 <template>
   <CollapsibleContent
-    :id="injectedItem?.triggerId"
+    :id="itemContext.triggerId"
     role="region"
-    :open="injectedItem?.open.value"
-    :hidden="!injectedItem?.open.value"
+    :open="itemContext.open.value"
+    :hidden="!itemContext.open.value"
     :as-child="props.asChild"
-    :aria-labelledby="injectedItem?.triggerId"
-    :data-state="injectedItem?.dataState.value"
-    :data-disabled="injectedItem?.dataDisabled.value"
-    :data-orientation="injectedRoot?.orientation"
+    :aria-labelledby="itemContext.triggerId"
+    :data-state="itemContext.dataState.value"
+    :data-disabled="itemContext.dataDisabled.value"
+    :data-orientation="rootContext.orientation"
     style="
       --radix-accordion-content-width: var(--radix-collapsible-content-width);
       --radix-accordion-content-height: var(--radix-collapsible-content-height);
diff --git a/packages/radix-vue/src/Accordion/AccordionHeader.vue b/packages/radix-vue/src/Accordion/AccordionHeader.vue
index e9c5f6044..af02408f2 100644
--- a/packages/radix-vue/src/Accordion/AccordionHeader.vue
+++ b/packages/radix-vue/src/Accordion/AccordionHeader.vue
@@ -1,24 +1,23 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { ACCORDION_ITEM_INJECTION_KEY } from './AccordionItem.vue'
-import { ACCORDION_INJECTION_KEY } from './AccordionRoot.vue'
+import { injectAccordionItemContext } from './AccordionItem.vue'
+import { injectAccordionRootContext } from './AccordionRoot.vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 
 export interface AccordionHeaderProps extends PrimitiveProps {}
 
 const props = defineProps<AccordionHeaderProps>()
 
-const injectedRoot = inject(ACCORDION_INJECTION_KEY)
-const injectedItem = inject(ACCORDION_ITEM_INJECTION_KEY)
+const rootContext = injectAccordionRootContext()
+const itemContext = injectAccordionItemContext()
 </script>
 
 <template>
   <Primitive
     :as="props.as || 'h3'"
     :as-child="props.asChild"
-    :data-orientation="injectedRoot?.orientation"
-    :data-state="injectedItem?.dataState.value"
-    :data-disabled="injectedItem?.dataDisabled.value"
+    :data-orientation="rootContext.orientation"
+    :data-state="itemContext.dataState.value"
+    :data-disabled="itemContext.dataDisabled.value"
   >
     <slot />
   </Primitive>
diff --git a/packages/radix-vue/src/Accordion/AccordionItem.vue b/packages/radix-vue/src/Accordion/AccordionItem.vue
index 7b55011d5..fa5132ed7 100644
--- a/packages/radix-vue/src/Accordion/AccordionItem.vue
+++ b/packages/radix-vue/src/Accordion/AccordionItem.vue
@@ -1,7 +1,8 @@
 <script lang="ts" context="module">
-import type { ComputedRef, InjectionKey, VNodeRef } from 'vue'
+import type { ComputedRef, VNodeRef } from 'vue'
 import type { CollapsibleRootProps } from '../Collapsible'
-import { ACCORDION_INJECTION_KEY } from './AccordionRoot.vue'
+import { injectAccordionRootContext } from './AccordionRoot.vue'
+import { createContext, useArrowNavigation, useId } from '@/shared'
 
 enum AccordionItemState {
   Open = 'open',
@@ -23,7 +24,7 @@ export interface AccordionItemProps
   value: string
 }
 
-interface AccordionItemProvideValue {
+interface AccordionItemContext {
   open: ComputedRef<boolean>
   dataState: ComputedRef<AccordionItemState>
   disabled: ComputedRef<boolean>
@@ -34,32 +35,31 @@ interface AccordionItemProvideValue {
   value: ComputedRef<string>
 }
 
-export const ACCORDION_ITEM_INJECTION_KEY
-  = Symbol() as InjectionKey<AccordionItemProvideValue>
+export const [injectAccordionItemContext, provideAccordionItemContext]
+  = createContext<AccordionItemContext>('AccordionItem')
 </script>
 
 <script setup lang="ts">
 import { CollapsibleRoot } from '@/Collapsible'
 import { usePrimitiveElement } from '@/Primitive'
-import { useArrowNavigation, useId } from '@/shared'
-import { computed, inject, provide } from 'vue'
+import { computed } from 'vue'
 
 const props = defineProps<AccordionItemProps>()
 
-const injectedRoot = inject(ACCORDION_INJECTION_KEY)
+const rootContext = injectAccordionRootContext()
 
 const open = computed(() =>
-  injectedRoot?.isSingle.value
-    ? props.value === injectedRoot.modelValue.value
-    : Array.isArray(injectedRoot?.modelValue.value)
-      && !!injectedRoot?.modelValue.value.includes(props.value),
+  rootContext.isSingle.value
+    ? props.value === rootContext.modelValue.value
+    : Array.isArray(rootContext.modelValue.value)
+      && rootContext.modelValue.value.includes(props.value),
 )
 
 const disabled = computed(() => {
   return (
-    injectedRoot?.disabled?.value
+    rootContext.disabled.value
     || props.disabled
-    || (!!injectedRoot?.isSingle.value && open.value && !injectedRoot?.collapsible)
+    || (rootContext.isSingle.value && open.value && !rootContext.collapsible)
   )
 })
 
@@ -71,7 +71,7 @@ const dataState = computed(() =>
 
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
-provide(ACCORDION_ITEM_INJECTION_KEY, {
+provideAccordionItemContext({
   open,
   dataState,
   disabled,
@@ -85,11 +85,11 @@ provide(ACCORDION_ITEM_INJECTION_KEY, {
 function handleArrowKey(e: KeyboardEvent) {
   useArrowNavigation(
     e,
-    currentElement.value!,
-    injectedRoot?.parentElement.value!,
+    currentElement.value,
+    rootContext.parentElement.value!,
     {
-      arrowKeyOptions: injectedRoot?.orientation,
-      dir: injectedRoot?.direction.value,
+      arrowKeyOptions: rootContext.orientation,
+      dir: rootContext.direction.value,
       focus: true,
     },
   )
@@ -100,7 +100,7 @@ defineExpose({ open })
 
 <template>
   <CollapsibleRoot
-    :data-orientation="injectedRoot?.orientation"
+    :data-orientation="rootContext.orientation"
     :data-disabled="dataDisabled"
     :data-state="dataState"
     :disabled="disabled"
diff --git a/packages/radix-vue/src/Accordion/AccordionRoot.vue b/packages/radix-vue/src/Accordion/AccordionRoot.vue
index 07cea4545..58c86953e 100644
--- a/packages/radix-vue/src/Accordion/AccordionRoot.vue
+++ b/packages/radix-vue/src/Accordion/AccordionRoot.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
-import type { ComputedRef, InjectionKey, Ref } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
 import type { DataOrientation, Direction, Type } from '@/shared/types'
-import { useDirection } from '@/shared'
+import { createContext, useDirection } from '@/shared'
 
 export interface AccordionRootProps extends PrimitiveProps {
   /**
@@ -54,11 +54,8 @@ export type AccordionRootEmits = {
   'update:modelValue': [value: string | string[] | undefined]
 }
 
-export const ACCORDION_INJECTION_KEY
-  = Symbol() as InjectionKey<AccordionProvideValue>
-
-export interface AccordionProvideValue {
-  disabled?: Ref<AccordionRootProps['disabled']>
+export type AccordionRootContext = {
+  disabled: Ref<AccordionRootProps['disabled']>
   direction: Ref<AccordionRootProps['dir']>
   orientation: AccordionRootProps['orientation']
   parentElement: Ref<HTMLElement | undefined>
@@ -67,6 +64,9 @@ export interface AccordionProvideValue {
   modelValue: Ref<string | undefined | string[]>
   collapsible: boolean
 }
+
+export const [injectAccordionRootContext, provideAccordionRootContext]
+  = createContext<AccordionRootContext>('AccordionRoot')
 </script>
 
 <script setup lang="ts">
@@ -76,7 +76,7 @@ import {
   usePrimitiveElement,
 } from '@/Primitive'
 import { useSingleOrMultipleValue } from '@/shared/useSingleOrMultipleValue'
-import { computed, provide, toRefs } from 'vue'
+import { computed, toRefs } from 'vue'
 
 const props = withDefaults(defineProps<AccordionRootProps>(), {
   asChild: false,
@@ -93,7 +93,7 @@ const { modelValue, changeModelValue } = useSingleOrMultipleValue(props, emits)
 const { primitiveElement, currentElement: parentElement }
   = usePrimitiveElement()
 
-provide<AccordionProvideValue>(ACCORDION_INJECTION_KEY, {
+provideAccordionRootContext({
   disabled,
   direction,
   orientation: props.orientation,
diff --git a/packages/radix-vue/src/Accordion/AccordionTrigger.vue b/packages/radix-vue/src/Accordion/AccordionTrigger.vue
index 17f21fcb4..2b0aedbf7 100644
--- a/packages/radix-vue/src/Accordion/AccordionTrigger.vue
+++ b/packages/radix-vue/src/Accordion/AccordionTrigger.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { ACCORDION_ITEM_INJECTION_KEY } from './AccordionItem.vue'
-import { ACCORDION_INJECTION_KEY } from './AccordionRoot.vue'
+import { injectAccordionItemContext } from './AccordionItem.vue'
+import { injectAccordionRootContext } from './AccordionRoot.vue'
 import { type PrimitiveProps } from '@/Primitive'
 import { CollapsibleTrigger } from '@/Collapsible'
 
@@ -9,30 +8,30 @@ export interface AccordionTriggerProps extends PrimitiveProps {}
 
 const props = defineProps<AccordionTriggerProps>()
 
-const injectedRoot = inject(ACCORDION_INJECTION_KEY)
-const injectedItem = inject(ACCORDION_ITEM_INJECTION_KEY)
+const rootContext = injectAccordionRootContext()
+const itemContext = injectAccordionItemContext()
 
 function changeItem() {
-  if (injectedItem?.disabled.value)
+  if (itemContext.disabled.value)
     return
-  injectedItem && injectedRoot?.changeModelValue(injectedItem.value.value)
+  rootContext.changeModelValue(itemContext.value.value)
 }
 </script>
 
 <template>
   <CollapsibleTrigger
-    :id="injectedItem?.triggerId"
-    :ref="injectedItem?.primitiveElement"
+    :id="itemContext.triggerId"
+    :ref="itemContext.primitiveElement"
     data-radix-vue-collection-item
     :as="props.as"
     :as-child="props.asChild"
-    :aria-controls="injectedItem?.triggerId"
-    :aria-disabled="injectedItem?.disabled.value || undefined"
-    :aria-expanded="injectedItem?.open.value || false"
-    :data-disabled="injectedItem?.dataDisabled.value"
-    :data-orientation="injectedRoot?.orientation"
-    :data-state="injectedItem?.dataState.value"
-    :disabled="injectedItem?.disabled?.value"
+    :aria-controls="itemContext.triggerId"
+    :aria-disabled="itemContext.disabled.value || undefined"
+    :aria-expanded="itemContext.open.value || false"
+    :data-disabled="itemContext.dataDisabled.value"
+    :data-orientation="rootContext.orientation"
+    :data-state="itemContext.dataState.value"
+    :disabled="itemContext.disabled.value"
     @click="changeItem"
   >
     <slot />
diff --git a/packages/radix-vue/src/AlertDialog/AlertDialogCancel.vue b/packages/radix-vue/src/AlertDialog/AlertDialogCancel.vue
index e132ec97b..104e43aeb 100644
--- a/packages/radix-vue/src/AlertDialog/AlertDialogCancel.vue
+++ b/packages/radix-vue/src/AlertDialog/AlertDialogCancel.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { inject, onMounted } from 'vue'
-import { ALERT_DIALOG_CONTENT_INJECTION_KEY } from './AlertDialogContent.vue'
+import { onMounted } from 'vue'
+import { injectAlertDialogContentContext } from './AlertDialogContent.vue'
 import { DialogClose, type DialogCloseProps } from '@/Dialog'
 import { usePrimitiveElement } from '@/Primitive'
 
 export interface AlertDialogCancelProps extends DialogCloseProps {}
 
 const props = defineProps<AlertDialogCancelProps>()
-const contentContext = inject(ALERT_DIALOG_CONTENT_INJECTION_KEY)
+const contentContext = injectAlertDialogContentContext()
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
 onMounted(() => {
-  contentContext!.onCancelElementChange(currentElement.value)
+  contentContext.onCancelElementChange(currentElement.value)
 })
 </script>
 
diff --git a/packages/radix-vue/src/AlertDialog/AlertDialogContent.vue b/packages/radix-vue/src/AlertDialog/AlertDialogContent.vue
index 9d960e9eb..a6d0cc9fa 100644
--- a/packages/radix-vue/src/AlertDialog/AlertDialogContent.vue
+++ b/packages/radix-vue/src/AlertDialog/AlertDialogContent.vue
@@ -1,23 +1,24 @@
 <script lang="ts">
-interface AlertDialogContentContextValue {
+import { createContext, useEmitAsProps } from '@/shared'
+
+interface AlertDialogContentContext {
   onCancelElementChange(el: HTMLElement | undefined): void
 }
 
-export const ALERT_DIALOG_CONTENT_INJECTION_KEY
-  = Symbol() as InjectionKey<AlertDialogContentContextValue>
+export const [injectAlertDialogContentContext, provideAlertDialogContentContext]
+  = createContext<AlertDialogContentContext>('AlertDialogContent')
 
 export interface AlertDialogContentProps extends DialogContentProps {}
 export type AlertDialogContentEmits = DialogContentEmits
 </script>
 
 <script setup lang="ts">
-import { type InjectionKey, nextTick, provide, ref } from 'vue'
+import { nextTick, ref } from 'vue'
 import {
   DialogContent,
   type DialogContentEmits,
   type DialogContentProps,
 } from '@/Dialog'
-import { useEmitAsProps } from '@/shared'
 
 const props = defineProps<AlertDialogContentProps>()
 const emits = defineEmits<AlertDialogContentEmits>()
@@ -26,7 +27,7 @@ const emitsAsProps = useEmitAsProps(emits)
 
 const cancelElement = ref<HTMLElement | undefined>()
 
-provide(ALERT_DIALOG_CONTENT_INJECTION_KEY, {
+provideAlertDialogContentContext({
   onCancelElementChange: (el) => {
     cancelElement.value = el
   },
diff --git a/packages/radix-vue/src/Avatar/AvatarFallback.vue b/packages/radix-vue/src/Avatar/AvatarFallback.vue
index ec182f0ff..bbf1af205 100644
--- a/packages/radix-vue/src/Avatar/AvatarFallback.vue
+++ b/packages/radix-vue/src/Avatar/AvatarFallback.vue
@@ -5,21 +5,21 @@ export interface AvatarFallbackProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { inject, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { Primitive, type PrimitiveProps } from '../Primitive'
-import { AVATAR_INJECTION_KEY } from './AvatarRoot.vue'
+import { injectAvatarRootContext } from './AvatarRoot.vue'
 
 const props = withDefaults(defineProps<AvatarFallbackProps>(), {
   delayMs: 0,
   as: 'span',
 })
 
-const context = inject(AVATAR_INJECTION_KEY)
+const rootContext = injectAvatarRootContext()
 
 const canRender = ref(false)
 let timeout: ReturnType<typeof setTimeout> | undefined
 
-watch(() => context?.imageLoadingStatus.value, (value) => {
+watch(rootContext.imageLoadingStatus, (value) => {
   if (value === 'loading') {
     canRender.value = false
     if (props.delayMs) {
@@ -37,7 +37,7 @@ watch(() => context?.imageLoadingStatus.value, (value) => {
 
 <template>
   <Primitive
-    v-if="canRender && context?.imageLoadingStatus.value !== 'loaded'"
+    v-if="canRender && rootContext.imageLoadingStatus.value !== 'loaded'"
     :as-child="props.asChild"
     :as="as"
   >
diff --git a/packages/radix-vue/src/Avatar/AvatarImage.vue b/packages/radix-vue/src/Avatar/AvatarImage.vue
index 3e0a675fa..d4f7f6d2a 100644
--- a/packages/radix-vue/src/Avatar/AvatarImage.vue
+++ b/packages/radix-vue/src/Avatar/AvatarImage.vue
@@ -8,16 +8,16 @@ export interface AvatarImageProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { inject, toRefs, watch } from 'vue'
+import { toRefs, watch } from 'vue'
 import { Primitive, type PrimitiveProps } from '../Primitive'
-import { AVATAR_INJECTION_KEY } from './AvatarRoot.vue'
+import { injectAvatarRootContext } from './AvatarRoot.vue'
 import { type ImageLoadingStatus, useImageLoadingStatus } from './utils'
 
 const props = withDefaults(defineProps<AvatarImageProps>(), { as: 'img' })
 const emits = defineEmits<AvatarImageEmits>()
 
 const { src } = toRefs(props)
-const context = inject(AVATAR_INJECTION_KEY)
+const rootContext = injectAvatarRootContext()
 
 const imageLoadingStatus = useImageLoadingStatus(src)
 
@@ -26,7 +26,7 @@ watch(
   (newValue) => {
     emits('loadingStatusChange', newValue)
     if (newValue !== 'idle')
-      context!.imageLoadingStatus.value = newValue
+      rootContext.imageLoadingStatus.value = newValue
   },
   { immediate: true },
 )
diff --git a/packages/radix-vue/src/Avatar/AvatarRoot.vue b/packages/radix-vue/src/Avatar/AvatarRoot.vue
index cfa81049c..73c923ca2 100644
--- a/packages/radix-vue/src/Avatar/AvatarRoot.vue
+++ b/packages/radix-vue/src/Avatar/AvatarRoot.vue
@@ -1,29 +1,28 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
 import type { ImageLoadingStatus } from './utils'
+import { createContext } from '@/shared'
 
 export interface AvatarRootProps extends PrimitiveProps {}
 
-export const AVATAR_INJECTION_KEY
-  = Symbol() as InjectionKey<AvatarProvideValue>
-
-interface AvatarProvideValue {
+export type AvatarRootContext = {
   imageLoadingStatus: Ref<ImageLoadingStatus>
 }
+
+export const [injectAvatarRootContext, provideAvatarRootContext]
+  = createContext<AvatarRootContext>('AvatarRoot')
 </script>
 
 <script setup lang="ts">
-import { provide, ref } from 'vue'
+import { ref } from 'vue'
 import { Primitive, type PrimitiveProps } from '../Primitive'
 
 const props = withDefaults(defineProps<AvatarRootProps>(), {
   as: 'span',
 })
 
-const imageLoadingStatusRef = ref<ImageLoadingStatus>('loading')
-
-provide(AVATAR_INJECTION_KEY, {
-  imageLoadingStatus: imageLoadingStatusRef,
+provideAvatarRootContext({
+  imageLoadingStatus: ref<ImageLoadingStatus>('loading'),
 })
 </script>
 
diff --git a/packages/radix-vue/src/Checkbox/CheckboxIndicator.vue b/packages/radix-vue/src/Checkbox/CheckboxIndicator.vue
index 6303f8c1a..9044b5807 100644
--- a/packages/radix-vue/src/Checkbox/CheckboxIndicator.vue
+++ b/packages/radix-vue/src/Checkbox/CheckboxIndicator.vue
@@ -5,8 +5,7 @@ export interface CheckboxIndicatorProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { inject } from 'vue'
-import { CHECKBOX_INJECTION_KEY } from './CheckboxRoot.vue'
+import { injectCheckboxRootContext } from './CheckboxRoot.vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 import { Presence } from '@/Presence'
 import { getState, isIndeterminate } from './utils'
@@ -15,14 +14,16 @@ withDefaults(defineProps<CheckboxIndicatorProps>(), {
   as: 'span',
 })
 
-const context = inject(CHECKBOX_INJECTION_KEY)
+const rootContext = injectCheckboxRootContext()
 </script>
 
 <template>
-  <Presence :present="forceMount || isIndeterminate(context!.state.value) || context?.state.value === true">
+  <Presence
+    :present="forceMount || isIndeterminate(rootContext.state.value) || rootContext.state.value === true"
+  >
     <Primitive
-      :data-state="getState(context!.state.value)"
-      :data-disabled="context?.disabled.value ? '' : undefined"
+      :data-state="getState(rootContext.state.value)"
+      :data-disabled="rootContext.disabled.value ? '' : undefined"
       :style="{ pointerEvents: 'none' }"
       :as-child="asChild"
       :as="as"
diff --git a/packages/radix-vue/src/Checkbox/CheckboxRoot.vue b/packages/radix-vue/src/Checkbox/CheckboxRoot.vue
index e193a8191..1f0359f84 100644
--- a/packages/radix-vue/src/Checkbox/CheckboxRoot.vue
+++ b/packages/radix-vue/src/Checkbox/CheckboxRoot.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
 import { useVModel } from '@vueuse/core'
-import { useFormControl } from '@/shared'
+import { createContext, useFormControl } from '@/shared'
 
 export interface CheckboxRootProps extends PrimitiveProps {
   defaultChecked?: boolean
@@ -17,13 +17,13 @@ export type CheckboxRootEmits = {
   'update:checked': [value: boolean]
 }
 
-interface CheckboxProvideValue {
+interface CheckboxRootContext {
   disabled: Ref<boolean>
   state: Ref<CheckedState>
 }
 
-export const CHECKBOX_INJECTION_KEY
-  = Symbol() as InjectionKey<CheckboxProvideValue>
+export const [injectCheckboxRootContext, provideCheckboxRootContext]
+  = createContext<CheckboxRootContext>('CheckboxRoot')
 
 export default {
   inheritAttrs: false,
@@ -31,7 +31,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, provide, toRefs } from 'vue'
+import { computed, toRefs } from 'vue'
 import { Primitive, type PrimitiveProps, usePrimitiveElement } from '@/Primitive'
 import type { CheckedState } from './utils'
 import { getState, isIndeterminate } from './utils'
@@ -51,9 +51,11 @@ const checked = useVModel(props, 'checked', emits, {
 
 const { primitiveElement, currentElement } = usePrimitiveElement()
 const isFormControl = useFormControl(currentElement)
-const ariaLabel = computed(() => props.id && currentElement.value ? (document.querySelector(`[for="${props.id}"]`) as HTMLLabelElement)?.innerText : undefined)
+const ariaLabel = computed(() => props.id && currentElement.value
+  ? (document.querySelector(`[for="${props.id}"]`) as HTMLLabelElement)?.innerText
+  : undefined)
 
-provide(CHECKBOX_INJECTION_KEY, {
+provideCheckboxRootContext({
   disabled,
   state: checked,
 })
diff --git a/packages/radix-vue/src/Collapsible/CollapsibleContent.vue b/packages/radix-vue/src/Collapsible/CollapsibleContent.vue
index 2fd2abf18..4b4ee08bd 100644
--- a/packages/radix-vue/src/Collapsible/CollapsibleContent.vue
+++ b/packages/radix-vue/src/Collapsible/CollapsibleContent.vue
@@ -6,8 +6,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'
-import { COLLAPSIBLE_INJECTION_KEY } from './CollapsibleRoot.vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { injectCollapsibleRootContext } from './CollapsibleRoot.vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -17,7 +17,7 @@ import { Presence } from '@/Presence'
 
 const props = defineProps<CollapsibleContentProps>()
 
-const injectedValue = inject(COLLAPSIBLE_INJECTION_KEY)
+const rootContext = injectCollapsibleRootContext()
 
 const presentRef = ref<InstanceType<typeof Presence>>()
 const { primitiveElement, currentElement } = usePrimitiveElement()
@@ -27,7 +27,7 @@ const height = ref(0)
 
 // when opening we want it to immediately open to retrieve dimensions
 // when closing we delay `present` to retrieve dimensions before closing
-const isOpen = computed(() => injectedValue?.open.value)
+const isOpen = computed(() => rootContext.open.value)
 const isMountAnimationPrevented = ref(isOpen.value)
 const currentStyle = ref<Record<string, string>>()
 
@@ -72,17 +72,17 @@ onMounted(() => {
 <template>
   <Presence
     ref="presentRef"
-    :present="injectedValue!.open.value"
+    :present="rootContext.open.value"
     :force-mount="true"
   >
     <Primitive
       v-bind="$attrs"
-      :id="injectedValue?.contentId"
+      :id="rootContext.contentId"
       ref="primitiveElement"
       :as-child="props.asChild"
       :as="as"
-      :data-state="injectedValue?.open.value ? 'open' : 'closed'"
-      :data-disabled="injectedValue?.disabled?.value ? 'true' : undefined"
+      :data-state="rootContext.open.value ? 'open' : 'closed'"
+      :data-disabled="rootContext.disabled?.value ? 'true' : undefined"
       :hidden="!presentRef?.present"
       :style="{
         [`--radix-collapsible-content-height`]: `${height}px`,
diff --git a/packages/radix-vue/src/Collapsible/CollapsibleRoot.vue b/packages/radix-vue/src/Collapsible/CollapsibleRoot.vue
index d16c03a8d..8f7ccb6d8 100644
--- a/packages/radix-vue/src/Collapsible/CollapsibleRoot.vue
+++ b/packages/radix-vue/src/Collapsible/CollapsibleRoot.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
-import { useId } from '@/shared'
+import type { Ref } from 'vue'
+import { createContext, useId } from '@/shared'
 
 export interface CollapsibleRootProps extends PrimitiveProps {
   defaultOpen?: boolean
@@ -12,19 +12,18 @@ export type CollapsibleRootEmits = {
   'update:open': [value: boolean]
 }
 
-interface CollapsibleProvideValue {
+interface CollapsibleRootContext {
   contentId: string
   disabled?: Ref<boolean>
   open: Ref<boolean>
   onOpenToggle(): void
 }
 
-export const COLLAPSIBLE_INJECTION_KEY
-  = Symbol() as InjectionKey<CollapsibleProvideValue>
+export const [injectCollapsibleRootContext, provideCollapsibleRootContext]
+  = createContext<CollapsibleRootContext>('CollapsibleRoot')
 </script>
 
 <script setup lang="ts">
-import { provide } from 'vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 import { useVModel } from '@vueuse/core'
 
@@ -42,7 +41,7 @@ const open = useVModel(props, 'open', emit, {
 
 const disabled = useVModel(props, 'disabled')
 
-provide(COLLAPSIBLE_INJECTION_KEY, {
+provideCollapsibleRootContext({
   contentId: useId(),
   disabled,
   open,
diff --git a/packages/radix-vue/src/Collapsible/CollapsibleTrigger.vue b/packages/radix-vue/src/Collapsible/CollapsibleTrigger.vue
index 66e538de2..f4b7de570 100644
--- a/packages/radix-vue/src/Collapsible/CollapsibleTrigger.vue
+++ b/packages/radix-vue/src/Collapsible/CollapsibleTrigger.vue
@@ -3,15 +3,14 @@ export interface CollapsibleTriggerProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
-import { inject } from 'vue'
 import { Primitive, type PrimitiveProps } from '../Primitive'
-import { COLLAPSIBLE_INJECTION_KEY } from './CollapsibleRoot.vue'
+import { injectCollapsibleRootContext } from './CollapsibleRoot.vue'
 
 const props = withDefaults(defineProps<CollapsibleTriggerProps>(), {
   as: 'button',
 })
 
-const injectedValue = inject(COLLAPSIBLE_INJECTION_KEY)
+const rootContext = injectCollapsibleRootContext()
 </script>
 
 <template>
@@ -19,12 +18,12 @@ const injectedValue = inject(COLLAPSIBLE_INJECTION_KEY)
     :type="as === 'button' ? 'button' : undefined"
     :as="as"
     :as-child="props.asChild"
-    :aria-controls="injectedValue?.contentId"
-    :aria-expanded="injectedValue?.open.value || false"
-    :data-state="injectedValue?.open.value ? 'open' : 'closed'"
-    :data-disabled="injectedValue?.disabled?.value ? '' : undefined"
-    :disabled="injectedValue?.disabled?.value"
-    @click="injectedValue?.onOpenToggle"
+    :aria-controls="rootContext.contentId"
+    :aria-expanded="rootContext.open.value"
+    :data-state="rootContext.open.value ? 'open' : 'closed'"
+    :data-disabled="rootContext.disabled?.value ? '' : undefined"
+    :disabled="rootContext.disabled?.value"
+    @click="rootContext.onOpenToggle"
   >
     <slot />
   </Primitive>
diff --git a/packages/radix-vue/src/Combobox/ComboboxArrow.vue b/packages/radix-vue/src/Combobox/ComboboxArrow.vue
index e2fbe1f1e..288f90c06 100644
--- a/packages/radix-vue/src/Combobox/ComboboxArrow.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxArrow.vue
@@ -1,19 +1,18 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { COMBOBOX_INJECT_KEY } from './ComboboxRoot.vue'
-import { COMBOBOX_CONTENT_INJECTION_KEY } from './ComboboxContentImpl.vue'
+import { injectComboboxRootContext } from './ComboboxRoot.vue'
+import { injectComboboxContentContext } from './ComboboxContentImpl.vue'
 import { PopperArrow, type PopperArrowProps } from '@/Popper'
 
 const props = defineProps<ComboboxArrowProps>()
-const context = inject(COMBOBOX_INJECT_KEY)
-const contentContext = inject(COMBOBOX_CONTENT_INJECTION_KEY)
+const rootContext = injectComboboxRootContext()
+const contentContext = injectComboboxContentContext()
 
 export interface ComboboxArrowProps extends PopperArrowProps {}
 </script>
 
 <template>
   <PopperArrow
-    v-if="context?.open.value && contentContext?.position.value === 'popper'"
+    v-if="rootContext.open.value && contentContext.position.value === 'popper'"
     v-bind="props"
   >
     <slot />
diff --git a/packages/radix-vue/src/Combobox/ComboboxCancel.vue b/packages/radix-vue/src/Combobox/ComboboxCancel.vue
index 6c8a93eb5..0ac6b15bd 100644
--- a/packages/radix-vue/src/Combobox/ComboboxCancel.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxCancel.vue
@@ -1,18 +1,17 @@
 <script setup lang="ts">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { inject } from 'vue'
-import { COMBOBOX_INJECT_KEY } from './ComboboxRoot.vue'
+import { injectComboboxRootContext } from './ComboboxRoot.vue'
 
 export interface ComboboxCancelProps extends PrimitiveProps {}
 const props = withDefaults(defineProps<ComboboxCancelProps>(), {
   as: 'button',
 })
 
-const context = inject(COMBOBOX_INJECT_KEY)
+const rootContext = injectComboboxRootContext()
 
 function handleClick() {
-  context!.searchTerm.value = ''
-  context?.inputElement.value?.focus()
+  rootContext.searchTerm.value = ''
+  rootContext.inputElement.value?.focus()
 }
 </script>
 
diff --git a/packages/radix-vue/src/Combobox/ComboboxContent.vue b/packages/radix-vue/src/Combobox/ComboboxContent.vue
index cf53372f4..179a4a559 100644
--- a/packages/radix-vue/src/Combobox/ComboboxContent.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxContent.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { COMBOBOX_INJECT_KEY } from './ComboboxRoot.vue'
+import { injectComboboxRootContext } from './ComboboxRoot.vue'
 import ComboboxContentImpl, { type ComboboxContentImplEmits, type ComboboxContentImplProps } from './ComboboxContentImpl.vue'
 import { Presence } from '@/Presence'
 import { useForwardPropsEmits } from '@/shared'
@@ -12,11 +11,11 @@ const props = defineProps<ComboboxContentProps>()
 const emits = defineEmits<ComboboxContentEmits>()
 const forwarded = useForwardPropsEmits(props, emits)
 
-const context = inject(COMBOBOX_INJECT_KEY)
+const rootContext = injectComboboxRootContext()
 </script>
 
 <template>
-  <Presence :present="context!.open.value">
+  <Presence :present="rootContext.open.value">
     <ComboboxContentImpl v-bind="{ ...forwarded, ...$attrs }">
       <slot />
     </ComboboxContentImpl>
diff --git a/packages/radix-vue/src/Combobox/ComboboxContentImpl.vue b/packages/radix-vue/src/Combobox/ComboboxContentImpl.vue
index 5b8f3053e..91317aa5a 100644
--- a/packages/radix-vue/src/Combobox/ComboboxContentImpl.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxContentImpl.vue
@@ -1,4 +1,10 @@
 <script lang="ts">
+import {
+  createContext,
+  useBodyScrollLock,
+  useHideOthers,
+} from '@/shared'
+
 export type ComboboxContentImplEmits = {
   closeAutoFocus: [event: Event]
   /**
@@ -19,26 +25,20 @@ export interface ComboboxContentImplProps extends PopperContentProps {
   disableOutsidePointerEvents?: boolean
 }
 
-export const COMBOBOX_CONTENT_INJECTION_KEY = Symbol() as InjectionKey<{
-  position: Ref<'inline' | 'popper'>
-}>
+export const [injectComboboxContentContext, provideComboboxContentContext]
+  = createContext<{
+    position: Ref<'inline' | 'popper'>
+  }>('ComboboxContent')
 </script>
 
 <script setup lang="ts">
 import {
-  type InjectionKey,
   type Ref,
   computed,
-  inject,
   onMounted,
-  provide,
   toRefs,
 } from 'vue'
-import { COMBOBOX_INJECT_KEY } from './ComboboxRoot.vue'
-import {
-  useBodyScrollLock,
-  useHideOthers,
-} from '@/shared'
+import { injectComboboxRootContext } from './ComboboxRoot.vue'
 import {
   DismissableLayer,
   type PointerDownOutsideEvent,
@@ -52,7 +52,7 @@ const props = withDefaults(defineProps<ComboboxContentImplProps>(), {
 const emits = defineEmits<ComboboxContentImplEmits>()
 
 const { position } = toRefs(props)
-const context = inject(COMBOBOX_INJECT_KEY)
+const rootContext = injectComboboxRootContext()
 
 useBodyScrollLock(props.bodyLock)
 
@@ -66,11 +66,11 @@ const pickedProps = computed(() => {
 })
 
 function handleLeave(ev: PointerEvent) {
-  context?.onSelectedValueChange('')
+  rootContext.onSelectedValueChange('')
 }
 
 onMounted(() => {
-  context?.onContentElementChange(currentElement.value)
+  rootContext.onContentElementChange(currentElement.value)
 })
 
 const popperStyle = {
@@ -86,9 +86,7 @@ const popperStyle = {
   '--radix-combobox-trigger-height': 'var(--radix-popper-anchor-height)',
 }
 
-provide(COMBOBOX_CONTENT_INJECTION_KEY, {
-  position,
-})
+provideComboboxContentContext({ position })
 </script>
 
 <template>
@@ -96,21 +94,21 @@ provide(COMBOBOX_CONTENT_INJECTION_KEY, {
     as-child
     :disable-outside-pointer-events="disableOutsidePointerEvents"
     @focus-outside.prevent
-    @dismiss="context?.onOpenChange(false)"
+    @dismiss="rootContext.onOpenChange(false)"
     @escape-key-down="emits('escapeKeyDown', $event)"
     @pointer-down-outside="(ev) => {
       // if clicking inside the combobox, prevent dismiss
-      if (context?.parentElement.value?.contains(ev.target as Node)) ev.preventDefault()
+      if (rootContext.parentElement.value?.contains(ev.target as Node)) ev.preventDefault()
       emits('pointerDownOutside', ev)
     }"
   >
     <component
       :is="position === 'popper' ? PopperContent : Primitive "
       v-bind="{ ...$attrs, ...pickedProps }"
-      :id="context?.contentId"
+      :id="rootContext.contentId"
       ref="primitiveElement"
       role="listbox"
-      :data-state="context?.open.value ? 'open' : 'closed'"
+      :data-state="rootContext.open.value ? 'open' : 'closed'"
       :style="{
         // flex layout so we can place the scroll buttons properly
         display: 'flex',
diff --git a/packages/radix-vue/src/Combobox/ComboboxEmpty.vue b/packages/radix-vue/src/Combobox/ComboboxEmpty.vue
index 9f9005091..8b27ac68a 100644
--- a/packages/radix-vue/src/Combobox/ComboboxEmpty.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxEmpty.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { computed, inject } from 'vue'
-import { COMBOBOX_INJECT_KEY } from './ComboboxRoot.vue'
+import { computed } from 'vue'
+import { injectComboboxRootContext } from './ComboboxRoot.vue'
 
 export interface ComboboxEmptyProps extends PrimitiveProps {}
 const props = defineProps<ComboboxEmptyProps>()
 
-const context = inject(COMBOBOX_INJECT_KEY)
+const rootContext = injectComboboxRootContext()
 // if no options, then show this
-const isEmpty = computed(() => context?.searchTerm.value && context.filteredOptions.value.length === 0)
+const isEmpty = computed(() => rootContext.searchTerm.value && rootContext.filteredOptions.value.length === 0)
 </script>
 
 <template>
diff --git a/packages/radix-vue/src/Combobox/ComboboxGroup.vue b/packages/radix-vue/src/Combobox/ComboboxGroup.vue
index 37906b910..1b56d87f0 100644
--- a/packages/radix-vue/src/Combobox/ComboboxGroup.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxGroup.vue
@@ -1,34 +1,37 @@
 <script lang="ts">
+import { createContext, useId } from '@/shared'
+import { injectComboboxRootContext } from './ComboboxRoot.vue'
+
 export interface ComboboxGroupProps extends PrimitiveProps {}
 
-interface SelectGroupContextValue {
+type ComboboxGroupContext = {
   id: string
   options?: Ref<Array<string | object>>
 }
-export const COMBOBOX_GROUP_INJECTION_KEY
-  = Symbol() as InjectionKey<SelectGroupContextValue>
+
+export const [injectComboboxGroupContext, provideComboboxGroupContext]
+  = createContext<ComboboxGroupContext>('ComboboxGroup')
 </script>
 
 <script setup lang="ts">
-import { type InjectionKey, type Ref, computed, inject, provide, ref } from 'vue'
+import { type Ref, computed, ref } from 'vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { useId } from '@/shared'
-import { COMBOBOX_INJECT_KEY } from './ComboboxRoot.vue'
 
 const props = defineProps<ComboboxGroupProps>()
 
 const id = useId()
 const options = ref<Array<string | object>>([])
-provide(COMBOBOX_GROUP_INJECTION_KEY, {
-  id,
-  options,
-})
 
-const context = inject(COMBOBOX_INJECT_KEY)
+const rootContext = injectComboboxRootContext()
 const isAnyChildInFilteredOptions = computed(() =>
-  !context?.isUserInputted.value
+  !rootContext.isUserInputted.value
    || options.value.length === 0
-   || context?.filteredOptions.value.map(i => JSON.stringify(i)).some(i => options.value.map(i => JSON.stringify(i)).includes(i)))
+   || rootContext.filteredOptions.value.map(i => JSON.stringify(i)).some(i => options.value.map(i => JSON.stringify(i)).includes(i)))
+
+provideComboboxGroupContext({
+  id,
+  options,
+})
 </script>
 
 <template>
diff --git a/packages/radix-vue/src/Combobox/ComboboxInput.vue b/packages/radix-vue/src/Combobox/ComboboxInput.vue
index 0e2dedea7..5e6a7f247 100644
--- a/packages/radix-vue/src/Combobox/ComboboxInput.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxInput.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, ref } from 'vue'
-import { COMBOBOX_INJECT_KEY } from './ComboboxRoot.vue'
+import { computed, onMounted, ref } from 'vue'
+import { injectComboboxRootContext } from './ComboboxRoot.vue'
 
 export interface ComboboxInputProps {
   type?: string
@@ -12,15 +12,15 @@ const props = withDefaults(defineProps<ComboboxInputProps>(), {
   type: 'text',
 })
 
-const context = inject(COMBOBOX_INJECT_KEY)
+const rootContext = injectComboboxRootContext()
 
 const elRef = ref<HTMLInputElement>()
 onMounted(() => {
   if (!elRef.value)
     return
 
-  context!.inputElement = elRef
-  context?.onInputElementChange(elRef.value)
+  rootContext.inputElement = elRef
+  rootContext.onInputElementChange(elRef.value)
 
   setTimeout(() => {
     // make sure all DOM was flush then only capture the focus
@@ -29,36 +29,36 @@ onMounted(() => {
   }, 1)
 })
 
-const disabled = computed(() => props.disabled || context?.disabled.value || false)
+const disabled = computed(() => props.disabled || rootContext.disabled.value || false)
 
 function handleKeyDown(ev: KeyboardEvent) {
-  if (!context?.open.value)
-    context?.onOpenChange(true)
+  if (!rootContext.open.value)
+    rootContext.onOpenChange(true)
   else
-    context.onInputNavigation(ev.key === 'ArrowUp' ? 'up' : 'down')
+    rootContext.onInputNavigation(ev.key === 'ArrowUp' ? 'up' : 'down')
 }
 
 function handleHomeEnd(ev: KeyboardEvent) {
-  if (!context?.open.value)
+  if (!rootContext.open.value)
     return
-  context.onInputNavigation(ev.key === 'Home' ? 'home' : 'end')
+  rootContext.onInputNavigation(ev.key === 'Home' ? 'home' : 'end')
 }
 
 function handleInput() {
-  if (!context?.open.value)
-    context?.onOpenChange(true)
+  if (!rootContext.open.value)
+    rootContext.onOpenChange(true)
 
-  context!.isUserInputted.value = true
+  rootContext.isUserInputted.value = true
 }
 </script>
 
 <template>
   <input
     ref="elRef"
-    v-model="context!.searchTerm.value"
+    v-model="rootContext.searchTerm.value"
     :type="type"
-    :aria-expanded="context?.open.value"
-    :aria-controls="context?.contentId"
+    :aria-expanded="rootContext.open.value"
+    :aria-controls="rootContext.contentId"
     :disabled="disabled"
     :aria-disabled="disabled ?? undefined"
     aria-autocomplete="list"
@@ -67,7 +67,7 @@ function handleInput() {
     autocomplete="false"
     @input="handleInput"
     @keydown.down.up.prevent="handleKeyDown"
-    @keydown.enter="context?.onInputEnter"
+    @keydown.enter="rootContext.onInputEnter"
     @keydown.home.end.prevent="handleHomeEnd"
   >
 </template>
diff --git a/packages/radix-vue/src/Combobox/ComboboxItem.vue b/packages/radix-vue/src/Combobox/ComboboxItem.vue
index 792dc7c5e..865c8689e 100644
--- a/packages/radix-vue/src/Combobox/ComboboxItem.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxItem.vue
@@ -1,11 +1,13 @@
 <script lang="ts">
+import { createContext, handleAndDispatchCustomEvent, useId } from '@/shared'
+
 export type SelectEvent = CustomEvent<{ originalEvent: PointerEvent; value?: string | object }>
-interface ComboboxItemContextValue {
+interface ComboboxItemContext {
   isSelected: Ref<boolean>
 }
 
-export const COMBOBOX_ITEM_INJECTION_KEY
-  = Symbol() as InjectionKey<ComboboxItemContextValue>
+export const [injectComboboxItemContext, provideComboboxItemContext]
+  = createContext<ComboboxItemContext>('ComboboxItem')
 
 export type ComboboxItemEmits = {
   select: [event: SelectEvent]
@@ -22,21 +24,17 @@ const COMBOBOX_SELECT = 'combobox.select'
 
 <script setup lang="ts">
 import {
-  type InjectionKey,
   type Ref,
   computed,
   getCurrentInstance,
-  inject,
   nextTick,
   onMounted,
   onUnmounted,
-  provide,
   ref,
   toRefs,
 } from 'vue'
-import { handleAndDispatchCustomEvent, useId } from '@/shared'
-import { COMBOBOX_INJECT_KEY } from './ComboboxRoot.vue'
-import { COMBOBOX_GROUP_INJECTION_KEY } from './ComboboxGroup.vue'
+import { injectComboboxRootContext } from './ComboboxRoot.vue'
+import { injectComboboxGroupContext } from './ComboboxGroup.vue'
 
 import {
   Primitive,
@@ -49,24 +47,24 @@ const emits = defineEmits<ComboboxItemEmits>()
 
 const { disabled } = toRefs(props)
 
-const context = inject(COMBOBOX_INJECT_KEY)
-const groupContext = inject(COMBOBOX_GROUP_INJECTION_KEY, { id: '', options: ref([]) })
+const rootContext = injectComboboxRootContext()
+const groupContext = injectComboboxGroupContext({ id: '', options: ref([]) })
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
 const isSelected = computed(() =>
-  context?.multiple.value && Array.isArray(context.modelValue.value)
-    ? context.modelValue.value?.includes(props.value as never)
-    : JSON.stringify(context?.modelValue?.value) === JSON.stringify(props.value),
+  rootContext.multiple.value && Array.isArray(rootContext.modelValue.value)
+    ? rootContext.modelValue.value?.includes(props.value as never)
+    : JSON.stringify(rootContext.modelValue?.value) === JSON.stringify(props.value),
 )
 
-const isFocused = computed(() => JSON.stringify(context?.selectedValue.value) === JSON.stringify(props.value))
+const isFocused = computed(() => JSON.stringify(rootContext.selectedValue.value) === JSON.stringify(props.value))
 const textValue = ref(props.textValue ?? '')
 const textId = useId()
 
 const isInOption = computed(() =>
-  context?.isUserInputted.value
-    ? context?.searchTerm.value === ''
-     || context?.filteredOptions.value.map(i => JSON.stringify(i)).includes(JSON.stringify(props.value))
+  rootContext.isUserInputted.value
+    ? rootContext.searchTerm.value === ''
+     || rootContext.filteredOptions.value.map(i => JSON.stringify(i)).includes(JSON.stringify(props.value))
     : true)
 
 async function handleSelect(ev: SelectEvent) {
@@ -75,7 +73,7 @@ async function handleSelect(ev: SelectEvent) {
     return
 
   if (!disabled.value && ev)
-    context!.onValueChange(props.value)
+    rootContext!.onValueChange(props.value)
 }
 
 function handleSelectCustomEvent(ev?: PointerEvent) {
@@ -90,7 +88,7 @@ async function handlePointerMove(event: PointerEvent) {
   if (event.defaultPrevented)
     return
 
-  context?.onSelectedValueChange(props.value)
+  rootContext.onSelectedValueChange(props.value)
 }
 
 if (props.value === '') {
@@ -102,10 +100,10 @@ if (props.value === '') {
 const instance = getCurrentInstance()
 onMounted(() => {
   if (instance)
-    context?.optionsInstance.value.add(instance)
+    rootContext.optionsInstance.value.add(instance)
 
-  if (!groupContext?.options?.value?.includes(props.value))
-    groupContext?.options?.value.push(props.value)
+  if (!groupContext.options?.value?.includes(props.value))
+    groupContext.options?.value.push(props.value)
 
   if (!textValue.value && currentElement.value?.textContent)
     textValue.value = currentElement.value.textContent
@@ -113,10 +111,10 @@ onMounted(() => {
 
 onUnmounted(() => {
   if (instance)
-    context?.optionsInstance.value.delete(instance)
+    rootContext.optionsInstance.value.delete(instance)
 })
 
-provide(COMBOBOX_ITEM_INJECTION_KEY, {
+provideComboboxItemContext({
   isSelected,
 })
 </script>
diff --git a/packages/radix-vue/src/Combobox/ComboboxItemIndicator.vue b/packages/radix-vue/src/Combobox/ComboboxItemIndicator.vue
index bd7e49f8d..6ba5fed5e 100644
--- a/packages/radix-vue/src/Combobox/ComboboxItemIndicator.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxItemIndicator.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { COMBOBOX_ITEM_INJECTION_KEY } from './ComboboxItem.vue'
+import { injectComboboxItemContext } from './ComboboxItem.vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 
 export interface ComboboxItemIndicatorProps extends PrimitiveProps {}
@@ -8,11 +7,11 @@ const props = withDefaults(defineProps<ComboboxItemIndicatorProps>(), {
   as: 'span',
 })
 
-const itemContext = inject(COMBOBOX_ITEM_INJECTION_KEY)
+const itemContext = injectComboboxItemContext()
 </script>
 
 <template>
-  <Primitive v-if="itemContext?.isSelected.value" aria-hidden v-bind="props">
+  <Primitive v-if="itemContext.isSelected.value" aria-hidden v-bind="props">
     <slot />
   </Primitive>
 </template>
diff --git a/packages/radix-vue/src/Combobox/ComboboxLabel.vue b/packages/radix-vue/src/Combobox/ComboboxLabel.vue
index fe6afc79a..9d973427d 100644
--- a/packages/radix-vue/src/Combobox/ComboboxLabel.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxLabel.vue
@@ -7,16 +7,13 @@ export interface ComboboxLabelProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { inject } from 'vue'
-import { COMBOBOX_GROUP_INJECTION_KEY } from './ComboboxGroup.vue'
+import { injectComboboxGroupContext } from './ComboboxGroup.vue'
 
 const props = withDefaults(defineProps<ComboboxLabelProps>(), {
   as: 'label',
 })
 
-const groupContext = inject(COMBOBOX_GROUP_INJECTION_KEY, {
-  id: '',
-})
+const groupContext = injectComboboxGroupContext({ id: '' })
 </script>
 
 <template>
diff --git a/packages/radix-vue/src/Combobox/ComboboxRoot.vue b/packages/radix-vue/src/Combobox/ComboboxRoot.vue
index 69d285411..ad6361723 100644
--- a/packages/radix-vue/src/Combobox/ComboboxRoot.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxRoot.vue
@@ -1,5 +1,7 @@
 <script lang="ts">
-interface ComboboxContextValue {
+import { createContext, useCollection, useDirection, useFormControl, useId } from '@/shared'
+
+type ComboboxRootContext = {
   modelValue: Ref<string | Array<string> | object | Array<object>>
   onValueChange: (val: string | object) => void
   searchTerm: Ref<string>
@@ -23,7 +25,8 @@ interface ComboboxContextValue {
   parentElement: Ref<HTMLElement | undefined>
 }
 
-export const COMBOBOX_INJECT_KEY = Symbol() as InjectionKey<ComboboxContextValue>
+export const [injectComboboxRootContext, provideComboboxRootContext]
+  = createContext<ComboboxRootContext>('ComboboxRoot')
 
 export type ComboboxRootEmits = {
   'update:modelValue': [value: string | Array<string> | object | Array<object>]
@@ -48,10 +51,9 @@ export interface ComboboxRootProps extends PrimitiveProps {
 <script setup lang="ts">
 import { PopperRoot } from '@/Popper'
 import { Primitive, type PrimitiveProps, usePrimitiveElement } from '@/Primitive'
-import { useCollection, useDirection, useFormControl, useId } from '@/shared'
 import type { Direction } from '@/shared/types'
 import { useVModel } from '@vueuse/core'
-import { type ComponentInternalInstance, type ComputedRef, type InjectionKey, type Ref, computed, nextTick, onMounted, provide, ref, toRefs, watch } from 'vue'
+import { type ComponentInternalInstance, type ComputedRef, type Ref, computed, nextTick, onMounted, ref, toRefs, watch } from 'vue'
 import { VisuallyHiddenInput } from '@/VisuallyHidden'
 
 const props = withDefaults(defineProps<ComboboxRootProps>(), {
@@ -145,7 +147,7 @@ onMounted(() => {
 
 const isFormControl = useFormControl(parentElement)
 
-provide(COMBOBOX_INJECT_KEY, {
+provideComboboxRootContext({
   searchTerm,
   modelValue,
   onValueChange,
diff --git a/packages/radix-vue/src/Combobox/ComboboxTrigger.vue b/packages/radix-vue/src/Combobox/ComboboxTrigger.vue
index 962359244..d60d888e5 100644
--- a/packages/radix-vue/src/Combobox/ComboboxTrigger.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { computed, inject } from 'vue'
-import { COMBOBOX_INJECT_KEY } from './ComboboxRoot.vue'
+import { computed } from 'vue'
+import { injectComboboxRootContext } from './ComboboxRoot.vue'
 
 export interface ComboboxTriggerProps extends PrimitiveProps {
   disabled?: boolean
@@ -11,8 +11,8 @@ const props = withDefaults(defineProps<ComboboxTriggerProps>(), {
   as: 'button',
 })
 
-const context = inject(COMBOBOX_INJECT_KEY)
-const disabled = computed(() => props.disabled || context?.disabled.value || false)
+const rootContext = injectComboboxRootContext()
+const disabled = computed(() => props.disabled || rootContext.disabled.value || false)
 </script>
 
 <template>
@@ -22,13 +22,13 @@ const disabled = computed(() => props.disabled || context?.disabled.value || fal
     tabindex="-1"
     aria-label="Show popup"
     aria-haspopup="listbox"
-    :aria-expanded="context?.open.value"
-    :aria-controls="context?.contentId"
-    :data-state="context?.open.value ? 'open' : 'closed'"
+    :aria-expanded="rootContext.open.value"
+    :aria-controls="rootContext.contentId"
+    :data-state="rootContext.open.value ? 'open' : 'closed'"
     :disabled="disabled"
     :data-disabled="disabled"
     :aria-disabled="disabled ?? undefined"
-    @click="context?.onOpenChange(!context.open.value)"
+    @click="rootContext.onOpenChange(!rootContext.open.value)"
   >
     <slot />
   </Primitive>
diff --git a/packages/radix-vue/src/ContextMenu/ContextMenuContent.vue b/packages/radix-vue/src/ContextMenu/ContextMenuContent.vue
index b65c27420..08222945f 100644
--- a/packages/radix-vue/src/ContextMenu/ContextMenuContent.vue
+++ b/packages/radix-vue/src/ContextMenu/ContextMenuContent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { inject, ref } from 'vue'
-import { CONTEXT_MENU_INJECTION_KEY } from './ContextMenuRoot.vue'
+import { ref } from 'vue'
+import { injectContextMenuRootContext } from './ContextMenuRoot.vue'
 import {
   MenuContent,
   type MenuContentEmits,
@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<ContextMenuContentProps>(), {
 })
 const emits = defineEmits<ContextMenuContentEmits>()
 
-const context = inject(CONTEXT_MENU_INJECTION_KEY)
+const rootContext = injectContextMenuRootContext()
 const hasInteractedOutside = ref(false)
 </script>
 
@@ -63,7 +63,7 @@ const hasInteractedOutside = ref(false)
     @interact-outside="
       (event) => {
         emits('interactOutside', event);
-        if (!event.defaultPrevented && !context?.modal.value)
+        if (!event.defaultPrevented && !rootContext.modal.value)
           hasInteractedOutside = true;
       }
     "
diff --git a/packages/radix-vue/src/ContextMenu/ContextMenuRoot.vue b/packages/radix-vue/src/ContextMenu/ContextMenuRoot.vue
index 1f386f7ae..0179650e9 100644
--- a/packages/radix-vue/src/ContextMenu/ContextMenuRoot.vue
+++ b/packages/radix-vue/src/ContextMenu/ContextMenuRoot.vue
@@ -1,17 +1,17 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
 import type { Direction } from '../shared/types'
-import { useDirection } from '@/shared'
+import { createContext, useDirection } from '@/shared'
 
-interface ContextMenuContextValue {
+type ContextMenuRootContext = {
   open: Ref<boolean>
   onOpenChange(open: boolean): void
   modal: Ref<boolean>
   dir: Ref<Direction>
 }
 
-export const CONTEXT_MENU_INJECTION_KEY
-  = Symbol() as InjectionKey<ContextMenuContextValue>
+export const [injectContextMenuRootContext, provideContextMenuRootContext]
+  = createContext<ContextMenuRootContext>('ContextMenuRoot')
 
 export interface ContextMenuRootProps {
   dir?: Direction
@@ -23,7 +23,7 @@ export type ContextMenuRootEmits = {
 </script>
 
 <script setup lang="ts">
-import { provide, ref, toRefs } from 'vue'
+import { ref, toRefs } from 'vue'
 import { MenuRoot } from '@/Menu'
 
 const props = withDefaults(defineProps<ContextMenuRootProps>(), {
@@ -35,7 +35,7 @@ const dir = useDirection(propDir)
 
 const open = ref(false)
 
-provide(CONTEXT_MENU_INJECTION_KEY, {
+provideContextMenuRootContext({
   open,
   onOpenChange: (value: boolean) => {
     open.value = value
diff --git a/packages/radix-vue/src/ContextMenu/ContextMenuTrigger.vue b/packages/radix-vue/src/ContextMenu/ContextMenuTrigger.vue
index 4de9e649a..94ee4eee0 100644
--- a/packages/radix-vue/src/ContextMenu/ContextMenuTrigger.vue
+++ b/packages/radix-vue/src/ContextMenu/ContextMenuTrigger.vue
@@ -8,8 +8,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, ref, toRefs } from 'vue'
-import { CONTEXT_MENU_INJECTION_KEY } from './ContextMenuRoot.vue'
+import { computed, nextTick, ref, toRefs } from 'vue'
+import { injectContextMenuRootContext } from './ContextMenuRoot.vue'
 import { isTouchOrPen } from './utils'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 import { MenuAnchor } from '@/Menu'
@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<ContextMenuTriggerProps>(), {
 })
 const { disabled } = toRefs(props)
 
-const context = inject(CONTEXT_MENU_INJECTION_KEY)
+const rootContext = injectContextMenuRootContext()
 const point = ref<Point>({ x: 0, y: 0 })
 const virtualEl = computed(() => ({
   getBoundingClientRect: () =>
@@ -43,7 +43,7 @@ function clearLongPress() {
 
 function handleOpen(event: MouseEvent | PointerEvent) {
   point.value = { x: event.clientX, y: event.clientY }
-  context?.onOpenChange(true)
+  rootContext.onOpenChange(true)
 }
 
 async function handleContextMenu(event: PointerEvent) {
@@ -84,7 +84,7 @@ async function handlePointerEvent(event: PointerEvent) {
   <Primitive
     :as="as"
     :as-child="asChild"
-    :data-state="context?.open.value ? 'open' : 'closed'"
+    :data-state="rootContext.open.value ? 'open' : 'closed'"
     :data-disabled="disabled ? '' : undefined"
     :style="{
       WebkitTouchCallout: 'none',
diff --git a/packages/radix-vue/src/ContextMenu/utils.ts b/packages/radix-vue/src/ContextMenu/utils.ts
index 0460cbbb1..2ae68ac91 100644
--- a/packages/radix-vue/src/ContextMenu/utils.ts
+++ b/packages/radix-vue/src/ContextMenu/utils.ts
@@ -1,12 +1,3 @@
-import { type InjectionKey, type Ref } from 'vue'
-
-interface ContextMenuItemContextValue {
-  modelValue: Ref<boolean>
-}
-
-export const CONTEXT_MENU_ITEM_SYMBOL
-  = Symbol() as InjectionKey<ContextMenuItemContextValue>
-
 export function isTouchOrPen(event: PointerEvent) {
   return event.pointerType !== 'mouse'
 }
diff --git a/packages/radix-vue/src/Dialog/DialogClose.vue b/packages/radix-vue/src/Dialog/DialogClose.vue
index 59d60ad63..8b5c9a5aa 100644
--- a/packages/radix-vue/src/Dialog/DialogClose.vue
+++ b/packages/radix-vue/src/Dialog/DialogClose.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { DIALOG_INJECTION_KEY } from './DialogRoot.vue'
+import { injectDialogRootContext } from './DialogRoot.vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 
 export interface DialogCloseProps extends PrimitiveProps {}
@@ -8,7 +7,7 @@ const props = withDefaults(defineProps<DialogCloseProps>(), {
   as: 'button',
 })
 
-const context = inject(DIALOG_INJECTION_KEY)
+const rootContext = injectDialogRootContext()
 </script>
 
 <template>
@@ -16,7 +15,7 @@ const context = inject(DIALOG_INJECTION_KEY)
     v-bind="props"
     :type="as === 'button' ? 'button' : undefined"
     aria-label="Close"
-    @click="context?.onOpenChange(false)"
+    @click="rootContext.onOpenChange(false)"
   >
     <slot />
   </Primitive>
diff --git a/packages/radix-vue/src/Dialog/DialogContent.vue b/packages/radix-vue/src/Dialog/DialogContent.vue
index f528cf6c8..e294d0ea0 100644
--- a/packages/radix-vue/src/Dialog/DialogContent.vue
+++ b/packages/radix-vue/src/Dialog/DialogContent.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { inject } from 'vue'
 import DialogContentModal from './DialogContentModal.vue'
 import DialogContentNonModal from './DialogContentNonModal.vue'
 import {
   type DialogContentImplEmits,
   type DialogContentImplProps,
 } from './DialogContentImpl.vue'
-import { DIALOG_INJECTION_KEY } from './DialogRoot.vue'
+import { injectDialogRootContext } from './DialogRoot.vue'
 import { Presence } from '@/Presence'
 import { useEmitAsProps } from '@/shared'
 
@@ -14,7 +13,7 @@ const props = defineProps<DialogContentProps>()
 
 const emits = defineEmits<DialogContentEmits>()
 
-const context = inject(DIALOG_INJECTION_KEY)
+const rootContext = injectDialogRootContext()
 
 export interface DialogContentProps extends DialogContentImplProps {}
 export type DialogContentEmits = DialogContentImplEmits
@@ -23,9 +22,9 @@ const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
-  <Presence :present="context!.open.value">
+  <Presence :present="rootContext.open.value">
     <DialogContentModal
-      v-if="context?.modal.value"
+      v-if="rootContext.modal.value"
       v-bind="{ ...props, ...emitsAsProps, ...$attrs }"
       @open-auto-focus="emits('openAutoFocus', $event)"
     >
diff --git a/packages/radix-vue/src/Dialog/DialogContentImpl.vue b/packages/radix-vue/src/Dialog/DialogContentImpl.vue
index c28e7b07f..308c02415 100644
--- a/packages/radix-vue/src/Dialog/DialogContentImpl.vue
+++ b/packages/radix-vue/src/Dialog/DialogContentImpl.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { DIALOG_INJECTION_KEY } from './DialogRoot.vue'
+import { injectDialogRootContext } from './DialogRoot.vue'
 import {
   DismissableLayer,
   type DismissableLayerEmits,
@@ -39,7 +38,7 @@ export type DialogContentImplEmits = DismissableLayerEmits & {
 const props = defineProps<DialogContentImplProps>()
 const emits = defineEmits<DialogContentImplEmits>()
 
-const context = inject(DIALOG_INJECTION_KEY)
+const rootContext = injectDialogRootContext()
 </script>
 
 <template>
@@ -52,15 +51,15 @@ const context = inject(DIALOG_INJECTION_KEY)
   >
     <DismissableLayer
       v-bind="$attrs"
-      :id="context!.contentId"
+      :id="rootContext.contentId"
       :as="as"
       :as-child="asChild"
       :disable-outside-pointer-events="disableOutsidePointerEvents"
       role="dialog"
-      :aria-describedby="context!.descriptionId"
-      :aria-labelledby="context!.titleId"
-      :data-state="getOpenState(context!.open.value)"
-      @dismiss="context?.onOpenChange(false)"
+      :aria-describedby="rootContext.descriptionId"
+      :aria-labelledby="rootContext.titleId"
+      :data-state="getOpenState(rootContext.open.value)"
+      @dismiss="rootContext.onOpenChange(false)"
       @escape-key-down="emits('escapeKeyDown', $event)"
       @focus-outside="emits('focusOutside', $event)"
       @interact-outside="emits('interactOutside', $event)"
diff --git a/packages/radix-vue/src/Dialog/DialogContentModal.vue b/packages/radix-vue/src/Dialog/DialogContentModal.vue
index d3f619173..f27bfa8ff 100644
--- a/packages/radix-vue/src/Dialog/DialogContentModal.vue
+++ b/packages/radix-vue/src/Dialog/DialogContentModal.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { DIALOG_INJECTION_KEY } from './DialogRoot.vue'
+import { injectDialogRootContext } from './DialogRoot.vue'
 import DialogContentImpl, {
   type DialogContentImplEmits,
   type DialogContentImplProps,
@@ -11,7 +10,7 @@ import { usePrimitiveElement } from '@/Primitive'
 const props = defineProps<DialogContentImplProps>()
 const emits = defineEmits<DialogContentImplEmits>()
 
-const context = inject(DIALOG_INJECTION_KEY)
+const rootContext = injectDialogRootContext()
 
 const emitsAsProps = useEmitAsProps(emits)
 
@@ -23,7 +22,7 @@ useHideOthers(currentElement)
   <DialogContentImpl
     ref="primitiveElement"
     v-bind="{ ...props, ...emitsAsProps }"
-    :trap-focus="context?.open.value"
+    :trap-focus="rootContext.open.value"
     :disable-outside-pointer-events="true"
     @close-auto-focus="
       (event) => {
@@ -31,7 +30,7 @@ useHideOthers(currentElement)
 
         if (!event.defaultPrevented) {
           event.preventDefault();
-          context?.triggerElement.value?.focus();
+          rootContext.triggerElement.value?.focus();
         }
       }
     "
diff --git a/packages/radix-vue/src/Dialog/DialogContentNonModal.vue b/packages/radix-vue/src/Dialog/DialogContentNonModal.vue
index 4f87ba993..07143771c 100644
--- a/packages/radix-vue/src/Dialog/DialogContentNonModal.vue
+++ b/packages/radix-vue/src/Dialog/DialogContentNonModal.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { inject, ref } from 'vue'
-import { DIALOG_INJECTION_KEY } from './DialogRoot.vue'
+import { ref } from 'vue'
+import { injectDialogRootContext } from './DialogRoot.vue'
 import DialogContentImpl, {
   type DialogContentImplEmits,
   type DialogContentImplProps,
@@ -12,7 +12,7 @@ const emits = defineEmits<DialogContentImplEmits>()
 
 const emitsAsProps = useEmitAsProps(emits)
 
-const context = inject(DIALOG_INJECTION_KEY)
+const rootContext = injectDialogRootContext()
 const hasInteractedOutsideRef = ref(false)
 const hasPointerDownOutsideRef = ref(false)
 </script>
@@ -27,7 +27,7 @@ const hasPointerDownOutsideRef = ref(false)
         emits('closeAutoFocus', event);
 
         if (!event.defaultPrevented) {
-          if (!hasInteractedOutsideRef) context?.triggerElement.value?.focus();
+          if (!hasInteractedOutsideRef) rootContext.triggerElement.value?.focus();
           // Always prevent auto focus because we either focus manually or want user agent focus
           event.preventDefault();
         }
@@ -48,7 +48,7 @@ const hasPointerDownOutsideRef = ref(false)
       // As the trigger is already setup to close, without doing so would
       // cause it to close and immediately open.
       const target = event.target as HTMLElement;
-      const targetIsTrigger = context?.triggerElement.value?.contains(target);
+      const targetIsTrigger = rootContext.triggerElement.value?.contains(target);
       if (targetIsTrigger) event.preventDefault();
 
       // On Safari if the trigger is inside a container with tabIndex={0}, when clicked
diff --git a/packages/radix-vue/src/Dialog/DialogDescription.vue b/packages/radix-vue/src/Dialog/DialogDescription.vue
index 6d950348a..845254258 100644
--- a/packages/radix-vue/src/Dialog/DialogDescription.vue
+++ b/packages/radix-vue/src/Dialog/DialogDescription.vue
@@ -1,16 +1,15 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { DIALOG_INJECTION_KEY } from './DialogRoot.vue'
+import { injectDialogRootContext } from './DialogRoot.vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 
 export interface DialogDescriptionProps extends PrimitiveProps {}
 const props = withDefaults(defineProps<DialogDescriptionProps>(), { as: 'p' })
 
-const context = inject(DIALOG_INJECTION_KEY)
+const rootContext = injectDialogRootContext()
 </script>
 
 <template>
-  <Primitive v-bind="props" :id="context?.descriptionId">
+  <Primitive v-bind="props" :id="rootContext.descriptionId">
     <slot />
   </Primitive>
 </template>
diff --git a/packages/radix-vue/src/Dialog/DialogOverlay.vue b/packages/radix-vue/src/Dialog/DialogOverlay.vue
index ba76fe754..e656f1eda 100644
--- a/packages/radix-vue/src/Dialog/DialogOverlay.vue
+++ b/packages/radix-vue/src/Dialog/DialogOverlay.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { inject, watch } from 'vue'
-import { DIALOG_INJECTION_KEY } from './DialogRoot.vue'
+import { watch } from 'vue'
+import { injectDialogRootContext } from './DialogRoot.vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 import { Presence } from '@/Presence'
 import { useBodyScrollLock } from '@/shared'
@@ -14,22 +14,22 @@ export interface DialogOverlayProps extends PrimitiveProps {
 }
 
 defineProps<DialogOverlayProps>()
-const context = inject(DIALOG_INJECTION_KEY)
+const rootContext = injectDialogRootContext()
 
 const isLocked = useBodyScrollLock()
 watch(
-  () => context?.open.value,
-  n => (isLocked.value = n ?? false),
+  rootContext.open,
+  isOpen => (isLocked.value = isOpen),
 )
 </script>
 
 <template>
-  <Presence v-if="context?.modal.value" :present="forceMount || context!.open.value">
+  <Presence v-if="rootContext?.modal.value" :present="forceMount || rootContext.open.value">
     <Primitive
       v-bind="$attrs"
       :as="as"
       :as-child="asChild"
-      :data-state="context?.open.value ? 'open' : 'closed'"
+      :data-state="rootContext.open.value ? 'open' : 'closed'"
       style="pointer-events: auto"
       data-aria-hidden="true"
       aria-hidden="true"
diff --git a/packages/radix-vue/src/Dialog/DialogRoot.vue b/packages/radix-vue/src/Dialog/DialogRoot.vue
index 806a3dc30..fc8c6e00e 100644
--- a/packages/radix-vue/src/Dialog/DialogRoot.vue
+++ b/packages/radix-vue/src/Dialog/DialogRoot.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
+import { createContext, useId } from '@/shared'
 
 export interface DialogRootProps {
   open?: boolean
@@ -11,10 +12,7 @@ export type DialogRootEmits = {
   'update:open': [value: boolean]
 }
 
-export const DIALOG_INJECTION_KEY
-  = Symbol() as InjectionKey<DialogProvideValue>
-
-export interface DialogProvideValue {
+export interface DialogRootContext {
   open: Readonly<Ref<boolean>>
   modal: Ref<boolean>
   openModal(): void
@@ -26,12 +24,14 @@ export interface DialogProvideValue {
   titleId: string
   descriptionId: string
 }
+
+export const [injectDialogRootContext, provideDialogRootContext]
+  = createContext<DialogRootContext>('DialogRoot')
 </script>
 
 <script setup lang="ts">
-import { provide, ref, toRefs } from 'vue'
+import { ref, toRefs } from 'vue'
 import { useVModel } from '@vueuse/core'
-import { useId } from '@/shared'
 
 const props = withDefaults(defineProps<DialogRootProps>(), {
   open: undefined,
@@ -48,7 +48,8 @@ const open = useVModel(props, 'open', emit, {
 const triggerElement = ref<HTMLElement>()
 const contentElement = ref<HTMLElement>()
 const { modal } = toRefs(props)
-provide<DialogProvideValue>(DIALOG_INJECTION_KEY, {
+
+provideDialogRootContext({
   open,
   modal,
   openModal: () => {
diff --git a/packages/radix-vue/src/Dialog/DialogTitle.vue b/packages/radix-vue/src/Dialog/DialogTitle.vue
index e926f563c..d21b53c17 100644
--- a/packages/radix-vue/src/Dialog/DialogTitle.vue
+++ b/packages/radix-vue/src/Dialog/DialogTitle.vue
@@ -1,16 +1,15 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { DIALOG_INJECTION_KEY } from './DialogRoot.vue'
+import { injectDialogRootContext } from './DialogRoot.vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 
 export interface DialogTitleProps extends PrimitiveProps {}
 const props = withDefaults(defineProps<DialogTitleProps>(), { as: 'h2' })
 
-const context = inject(DIALOG_INJECTION_KEY)
+const rootContext = injectDialogRootContext()
 </script>
 
 <template>
-  <Primitive v-bind="props" :id="context?.titleId">
+  <Primitive v-bind="props" :id="rootContext.titleId">
     <slot />
   </Primitive>
 </template>
diff --git a/packages/radix-vue/src/Dialog/DialogTrigger.vue b/packages/radix-vue/src/Dialog/DialogTrigger.vue
index fb9701958..793133fe3 100644
--- a/packages/radix-vue/src/Dialog/DialogTrigger.vue
+++ b/packages/radix-vue/src/Dialog/DialogTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { inject, onMounted } from 'vue'
-import { DIALOG_INJECTION_KEY } from './DialogRoot.vue'
+import { onMounted } from 'vue'
+import { injectDialogRootContext } from './DialogRoot.vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -12,11 +12,11 @@ export interface DialogTriggerProps extends PrimitiveProps {}
 const props = withDefaults(defineProps<DialogTriggerProps>(), {
   as: 'button',
 })
-const context = inject(DIALOG_INJECTION_KEY)
+const rootContext = injectDialogRootContext()
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
 onMounted(() => {
-  context!.triggerElement = currentElement
+  rootContext.triggerElement = currentElement
 })
 </script>
 
@@ -26,10 +26,10 @@ onMounted(() => {
     v-bind="props"
     :type="as === 'button' ? 'button' : undefined"
     aria-haspopup="dialog"
-    :aria-expanded="context?.open.value || false"
-    :aria-controls="context?.contentId"
-    :data-state="context?.open.value ? 'open' : 'closed'"
-    @click="context?.onOpenToggle"
+    :aria-expanded="rootContext.open.value || false"
+    :aria-controls="rootContext.contentId"
+    :data-state="rootContext.open.value ? 'open' : 'closed'"
+    @click="rootContext.onOpenToggle"
   >
     <slot />
   </Primitive>
diff --git a/packages/radix-vue/src/DropdownMenu/DropdownMenuContent.vue b/packages/radix-vue/src/DropdownMenu/DropdownMenuContent.vue
index 9eb458ded..6556bcd3b 100644
--- a/packages/radix-vue/src/DropdownMenu/DropdownMenuContent.vue
+++ b/packages/radix-vue/src/DropdownMenu/DropdownMenuContent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { inject, ref } from 'vue'
-import { DROPDOWN_MENU_INJECTION_KEY } from './DropdownMenuRoot.vue'
+import { ref } from 'vue'
+import { injectDropdownMenuRootContext } from './DropdownMenuRoot.vue'
 import {
   MenuContent,
   type MenuContentEmits,
@@ -15,7 +15,7 @@ const props = defineProps<DropdownMenuContentProps>()
 const emits = defineEmits<DropdownMenuContentEmits>()
 const forwarded = useForwardPropsEmits(props, emits)
 
-const context = inject(DROPDOWN_MENU_INJECTION_KEY)
+const rootContext = injectDropdownMenuRootContext()
 
 const hasInteractedOutsideRef = ref(false)
 
@@ -25,7 +25,7 @@ function handleCloseAutoFocus(event: Event) {
     return
   if (!hasInteractedOutsideRef.value) {
     setTimeout(() => {
-      context?.triggerElement.value?.focus()
+      rootContext.triggerElement.value?.focus()
     }, 0)
   }
   hasInteractedOutsideRef.value = false
@@ -38,8 +38,8 @@ function handleCloseAutoFocus(event: Event) {
 <template>
   <MenuContent
     v-bind="forwarded"
-    :id="context?.contentId"
-    :aria-labelledby="context?.triggerId"
+    :id="rootContext.contentId"
+    :aria-labelledby="rootContext?.triggerId"
     :style="{
       '--radix-dropdown-menu-content-transform-origin':
         'var(--radix-popper-transform-origin)',
@@ -58,7 +58,7 @@ function handleCloseAutoFocus(event: Event) {
       const originalEvent = event.detail.originalEvent as PointerEvent;
       const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
       const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
-      if (!context?.modal.value || isRightClick) hasInteractedOutsideRef = true;
+      if (!rootContext.modal.value || isRightClick) hasInteractedOutsideRef = true;
     }"
   >
     <slot />
diff --git a/packages/radix-vue/src/DropdownMenu/DropdownMenuRoot.vue b/packages/radix-vue/src/DropdownMenu/DropdownMenuRoot.vue
index 494182ab3..f48e4068c 100644
--- a/packages/radix-vue/src/DropdownMenu/DropdownMenuRoot.vue
+++ b/packages/radix-vue/src/DropdownMenu/DropdownMenuRoot.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
 import type { Direction } from '../shared/types'
+import { createContext, useDirection, useId } from '@/shared'
 
 export interface DropdownMenuRootProps {
   open?: boolean
@@ -12,10 +13,7 @@ export type DropdownMenuRootEmits = {
   'update:open': [value: boolean]
 }
 
-export const DROPDOWN_MENU_INJECTION_KEY
-  = Symbol() as InjectionKey<DropdownMenuProvideValue>
-
-export interface DropdownMenuProvideValue {
+export interface DropdownMenuRootContext {
   open: Readonly<Ref<boolean>>
   onOpenChange(open: boolean): void
   onOpenToggle(): void
@@ -25,13 +23,15 @@ export interface DropdownMenuProvideValue {
   modal: Ref<boolean>
   dir: Ref<Direction>
 }
+
+export const [injectDropdownMenuRootContext, provideDropdownMenuRootContext]
+  = createContext<DropdownMenuRootContext>('DropdownMenuRoot')
 </script>
 
 <script setup lang="ts">
-import { provide, ref, toRefs } from 'vue'
+import { ref, toRefs } from 'vue'
 import { useVModel } from '@vueuse/core'
 import { MenuRoot } from '@/Menu'
-import { useDirection, useId } from '@/shared'
 
 const props = withDefaults(defineProps<DropdownMenuRootProps>(), {
   modal: true,
@@ -48,7 +48,7 @@ const triggerElement = ref<HTMLElement>()
 
 const { modal, dir: propDir } = toRefs(props)
 const dir = useDirection(propDir)
-provide<DropdownMenuProvideValue>(DROPDOWN_MENU_INJECTION_KEY, {
+provideDropdownMenuRootContext({
   open,
   onOpenChange: (value) => {
     open.value = value
diff --git a/packages/radix-vue/src/DropdownMenu/DropdownMenuTrigger.vue b/packages/radix-vue/src/DropdownMenu/DropdownMenuTrigger.vue
index fa66a1847..b075b906a 100644
--- a/packages/radix-vue/src/DropdownMenu/DropdownMenuTrigger.vue
+++ b/packages/radix-vue/src/DropdownMenu/DropdownMenuTrigger.vue
@@ -5,8 +5,8 @@ export interface DropdownMenuTriggerProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { inject, nextTick, onMounted } from 'vue'
-import { DROPDOWN_MENU_INJECTION_KEY } from './DropdownMenuRoot.vue'
+import { nextTick, onMounted } from 'vue'
+import { injectDropdownMenuRootContext } from './DropdownMenuRoot.vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -18,48 +18,48 @@ const props = withDefaults(defineProps<DropdownMenuTriggerProps>(), {
   as: 'button',
 })
 
-const context = inject(DROPDOWN_MENU_INJECTION_KEY)
+const rootContext = injectDropdownMenuRootContext()
 
 const { primitiveElement, currentElement: triggerElement }
   = usePrimitiveElement()
 
 onMounted(() => {
-  context!.triggerElement = triggerElement
+  rootContext.triggerElement = triggerElement
 })
 </script>
 
 <template>
   <MenuAnchor as-child>
     <Primitive
-      :id="context?.triggerId"
+      :id="rootContext.triggerId"
       ref="primitiveElement"
       :type="as === 'button' ? 'button' : undefined"
       :as-child="props.asChild"
       :as="as"
       aria-haspopup="menu"
-      :aria-expanded="context?.open.value"
-      :aria-controls="context?.open.value ? context?.contentId : undefined"
+      :aria-expanded="rootContext.open.value"
+      :aria-controls="rootContext.open.value ? rootContext.contentId : undefined"
       :data-disabled="disabled ? '' : undefined"
       :disabled="disabled"
-      :data-state="context?.open.value ? 'open' : 'closed'"
+      :data-state="rootContext.open.value ? 'open' : 'closed'"
       @pointerdown="
         async (event) => {
           // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
           // but not when the control key is pressed (avoiding MacOS right click)
           if (!disabled && event.button === 0 && event.ctrlKey === false) {
-            context?.onOpenToggle();
+            rootContext?.onOpenToggle();
             await nextTick()
             // prevent trigger focusing when opening
             // this allows the content to be given focus without competition
-            if (context?.open.value) event.preventDefault();
+            if (rootContext.open.value) event.preventDefault();
           }
         }
       "
       @keydown.enter.space.arrow-down="
         (event) => {
           if (disabled) return;
-          if (['Enter', ' '].includes(event.key)) context?.onOpenToggle();
-          if (event.key === 'ArrowDown') context?.onOpenChange(true);
+          if (['Enter', ' '].includes(event.key)) rootContext.onOpenToggle();
+          if (event.key === 'ArrowDown') rootContext.onOpenChange(true);
           // prevent keydown from scrolling window / first focused item to execute
           // that keydown (inadvertently closing the menu)
           if (['Enter', ' ', 'ArrowDown'].includes(event.key))
diff --git a/packages/radix-vue/src/DropdownMenu/utils.ts b/packages/radix-vue/src/DropdownMenu/utils.ts
deleted file mode 100644
index 021390572..000000000
--- a/packages/radix-vue/src/DropdownMenu/utils.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { type InjectionKey, type Ref } from 'vue'
-
-interface DropdownMenuItemContextValue {
-  modelValue: Ref<boolean>
-}
-
-export const DROPDOWN_MENU_ITEM_SYMBOL
-  = Symbol() as InjectionKey<DropdownMenuItemContextValue>
diff --git a/packages/radix-vue/src/HoverCard/HoverCardContent.vue b/packages/radix-vue/src/HoverCard/HoverCardContent.vue
index c111f3c26..2ad5428bf 100644
--- a/packages/radix-vue/src/HoverCard/HoverCardContent.vue
+++ b/packages/radix-vue/src/HoverCard/HoverCardContent.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { inject } from 'vue'
 import {
-  HOVER_CARD_INJECTION_KEY,
+  injectHoverCardRootContext,
 } from './HoverCardRoot.vue'
 import { excludeTouch } from './utils'
 import { Presence } from '@/Presence'
@@ -15,17 +14,17 @@ const props = defineProps<HoverCardContentProps>()
 const emits = defineEmits<HoverCardContentEmits>()
 const forwarded = useForwardPropsEmits(props, emits)
 
-const context = inject(HOVER_CARD_INJECTION_KEY)
+const rootContext = injectHoverCardRootContext()
 </script>
 
 <template>
   <Presence
-    :present="context!.open.value"
+    :present="rootContext.open.value"
   >
     <HoverCardContentImpl
       v-bind="forwarded"
-      @pointerenter="excludeTouch(context!.onOpen)($event)"
-      @pointerleave="excludeTouch(context!.onClose)($event)"
+      @pointerenter="excludeTouch(rootContext.onOpen)($event)"
+      @pointerleave="excludeTouch(rootContext.onClose)($event)"
     >
       <slot />
     </HoverCardContentImpl>
diff --git a/packages/radix-vue/src/HoverCard/HoverCardContentImpl.vue b/packages/radix-vue/src/HoverCard/HoverCardContentImpl.vue
index beed9c4e5..580cb3fd8 100644
--- a/packages/radix-vue/src/HoverCard/HoverCardContentImpl.vue
+++ b/packages/radix-vue/src/HoverCard/HoverCardContentImpl.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { inject, nextTick, onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import {
-  HOVER_CARD_INJECTION_KEY,
+  injectHoverCardRootContext,
 } from './HoverCardRoot.vue'
 import { PopperContent, type PopperContentProps } from '@/Popper'
 import { DismissableLayer, type DismissableLayerEmits } from '@/DismissableLayer'
@@ -17,7 +17,7 @@ const emits = defineEmits<HoverCardContentImplEmits>()
 const forwarded = useForwardProps(props)
 
 const { primitiveElement, currentElement: contentElement } = usePrimitiveElement()
-const context = inject(HOVER_CARD_INJECTION_KEY)
+const rootContext = injectHoverCardRootContext()
 const containSelection = ref(false)
 
 let originalBodyUserSelect: string
@@ -40,13 +40,13 @@ watchEffect((cleanupFn) => {
 
 function handlePointerUp() {
   containSelection.value = false
-  context!.isPointerDownOnContentRef.value = false
+  rootContext.isPointerDownOnContentRef.value = false
 
   // Delay a frame to ensure we always access the latest selection
   nextTick(() => {
     const hasSelection = document.getSelection()?.toString() !== ''
     if (hasSelection)
-      context!.hasSelectionRef.value = true
+      rootContext.hasSelectionRef.value = true
   })
 }
 onMounted(() => {
@@ -60,8 +60,8 @@ onMounted(() => {
 
 onUnmounted(() => {
   document.removeEventListener('pointerup', handlePointerUp)
-  context!.hasSelectionRef.value = false
-  context!.isPointerDownOnContentRef.value = false
+  rootContext.hasSelectionRef.value = false
+  rootContext.isPointerDownOnContentRef.value = false
 })
 </script>
 
@@ -72,12 +72,12 @@ onUnmounted(() => {
     @escape-key-down="emits('escapeKeyDown', $event)"
     @pointer-down-outside="emits('pointerDownOutside', $event)"
     @focus-outside.prevent="emits('focusOutside', $event)"
-    @dismiss="context?.onDismiss"
+    @dismiss="rootContext.onDismiss"
   >
     <PopperContent
       ref="primitiveElement"
       v-bind="{ ...forwarded, ...$attrs }"
-      :data-state="context?.open.value ? 'open' : 'closed'"
+      :data-state="rootContext.open.value ? 'open' : 'closed'"
       :style="{
         'userSelect': containSelection ? 'text' : undefined,
         // Safari requires prefix
@@ -94,8 +94,8 @@ onUnmounted(() => {
         if (event.currentTarget.contains(event.target as HTMLElement)) {
           containSelection = true
         }
-        context!.hasSelectionRef.value = false;
-        context!.isPointerDownOnContentRef.value = true;
+        rootContext.hasSelectionRef.value = false;
+        rootContext.isPointerDownOnContentRef.value = true;
       }"
     >
       <slot />
diff --git a/packages/radix-vue/src/HoverCard/HoverCardRoot.vue b/packages/radix-vue/src/HoverCard/HoverCardRoot.vue
index dffc9d13b..3c1db52b1 100644
--- a/packages/radix-vue/src/HoverCard/HoverCardRoot.vue
+++ b/packages/radix-vue/src/HoverCard/HoverCardRoot.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
+import { createContext } from '@/shared'
 
 export interface HoverCardRootProps {
   defaultOpen?: false
@@ -11,10 +12,7 @@ export type HoverCardRootEmits = {
   'update:open': [value: boolean]
 }
 
-export const HOVER_CARD_INJECTION_KEY
-  = Symbol() as InjectionKey<HoverCardProvideValue>
-
-export interface HoverCardProvideValue {
+export interface HoverCardRootContext {
   open: Ref<boolean>
   onOpenChange(open: boolean): void
   onOpen(): void
@@ -23,10 +21,13 @@ export interface HoverCardProvideValue {
   hasSelectionRef: Ref<boolean>
   isPointerDownOnContentRef: Ref<boolean>
 }
+
+export const [injectHoverCardRootContext, provideHoverCardRootContext]
+  = createContext<HoverCardRootContext>('HoverCardRoot')
 </script>
 
 <script setup lang="ts">
-import { provide, ref, toRefs } from 'vue'
+import { ref, toRefs } from 'vue'
 import { useVModel } from '@vueuse/core'
 import { PopperRoot } from '@/Popper'
 
@@ -65,7 +66,7 @@ function handleDismiss() {
   open.value = false
 }
 
-provide<HoverCardProvideValue>(HOVER_CARD_INJECTION_KEY, {
+provideHoverCardRootContext({
   open,
   onOpenChange(value) {
     open.value = value
diff --git a/packages/radix-vue/src/HoverCard/HoverCardTrigger.vue b/packages/radix-vue/src/HoverCard/HoverCardTrigger.vue
index 216441d00..17e984e18 100644
--- a/packages/radix-vue/src/HoverCard/HoverCardTrigger.vue
+++ b/packages/radix-vue/src/HoverCard/HoverCardTrigger.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { inject } from 'vue'
 import {
-  HOVER_CARD_INJECTION_KEY,
+  injectHoverCardRootContext,
 } from './HoverCardRoot.vue'
 import {
   Primitive,
@@ -16,7 +15,7 @@ withDefaults(defineProps<HoverCardTriggerProps>(), {
   as: 'a',
 })
 
-const context = inject(HOVER_CARD_INJECTION_KEY)
+const rootContext = injectHoverCardRootContext()
 </script>
 
 <template>
@@ -24,11 +23,11 @@ const context = inject(HOVER_CARD_INJECTION_KEY)
     <Primitive
       :as-child="asChild"
       :as="as"
-      :data-state="context?.open.value ? 'open' : 'closed'"
-      @pointerenter="excludeTouch(context!.onOpen)($event)"
-      @pointerleave="excludeTouch(context!.onClose)($event)"
-      @focus="context!.onOpen()"
-      @blur="context!.onClose"
+      :data-state="rootContext.open.value ? 'open' : 'closed'"
+      @pointerenter="excludeTouch(rootContext.onOpen)($event)"
+      @pointerleave="excludeTouch(rootContext.onClose)($event)"
+      @focus="rootContext.onOpen()"
+      @blur="rootContext.onClose"
       @touchstart.prevent="() => {
         // prevent focus event on touch devices
       }"
diff --git a/packages/radix-vue/src/Menu/MenuCheckboxItem.vue b/packages/radix-vue/src/Menu/MenuCheckboxItem.vue
index 48c9fa572..9bb156682 100644
--- a/packages/radix-vue/src/Menu/MenuCheckboxItem.vue
+++ b/packages/radix-vue/src/Menu/MenuCheckboxItem.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { provide } from 'vue'
 import { useVModel } from '@vueuse/core'
 import { type CheckedState, getCheckedState, isIndeterminate } from './utils'
 import MenuItem, {
   type MenuItemEmits,
   type MenuItemProps,
 } from './MenuItem.vue'
-import { MENU_ITEM_INDICATOR_INJECTION_KEY } from './MenuItemIndicator.vue'
+import { provideMenuItemIndicatorContext } from './MenuItemIndicator.vue'
 
 export interface MenuCheckboxItemProps extends MenuItemProps {
   checked?: CheckedState
@@ -21,9 +20,7 @@ const props = withDefaults(defineProps<MenuCheckboxItemProps>(), {
 const emits = defineEmits<MenuCheckboxItemEmits>()
 const checked = useVModel(props, 'checked', emits)
 
-provide(MENU_ITEM_INDICATOR_INJECTION_KEY, {
-  checked,
-})
+provideMenuItemIndicatorContext({ checked })
 </script>
 
 <template>
diff --git a/packages/radix-vue/src/Menu/MenuContent.vue b/packages/radix-vue/src/Menu/MenuContent.vue
index 357080826..d627cd53e 100644
--- a/packages/radix-vue/src/Menu/MenuContent.vue
+++ b/packages/radix-vue/src/Menu/MenuContent.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { inject } from 'vue'
 import MenuRootContentModal from './MenuRootContentModal.vue'
 import MenuRootContentNonModal from './MenuRootContentNonModal.vue'
-import { MENU_INJECTION_KEY, MENU_ROOT_INJECTION_KEY } from './MenuRoot.vue'
+import { injectMenuContext, injectMenuRootContext } from './MenuRoot.vue'
 import {
   type MenuContentImplEmits,
   type MenuRootContentProps,
@@ -16,16 +15,16 @@ export type MenuContentEmits = MenuContentImplEmits
 const props = defineProps<MenuContentProps>()
 const emits = defineEmits<MenuContentEmits>()
 
-const context = inject(MENU_INJECTION_KEY)
-const rootContext = inject(MENU_ROOT_INJECTION_KEY)
+const menuContext = injectMenuContext()
+const rootContext = injectMenuRootContext()
 
 const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
-  <Presence :present="context!.open.value">
+  <Presence :present="menuContext.open.value">
     <MenuRootContentModal
-      v-if="rootContext?.modal.value"
+      v-if="rootContext.modal.value"
       v-bind="{ ...$attrs, ...props, ...emitsAsProps }"
     >
       <slot />
diff --git a/packages/radix-vue/src/Menu/MenuContentImpl.vue b/packages/radix-vue/src/Menu/MenuContentImpl.vue
index 391e05064..0ef787fb9 100644
--- a/packages/radix-vue/src/Menu/MenuContentImpl.vue
+++ b/packages/radix-vue/src/Menu/MenuContentImpl.vue
@@ -1,5 +1,14 @@
 <script lang="ts">
-export interface MenuContentContextValue {
+import {
+  createContext,
+  useArrowNavigation,
+  useBodyScrollLock,
+  useCollection,
+  useFocusGuards,
+  useTypeahead,
+} from '@/shared'
+
+export interface MenuContentContext {
   onItemEnter(event: PointerEvent): void
   onItemLeave(event: PointerEvent): void
   onTriggerLeave(event: PointerEvent): void
@@ -8,8 +17,8 @@ export interface MenuContentContextValue {
   onPointerGraceIntentChange(intent: GraceIntent | null): void
 }
 
-export const MENU_CONTENT_INJECTION_KEY
-  = Symbol() as InjectionKey<MenuContentContextValue>
+export const [injectMenuContentContext, provideMenuContentContext]
+  = createContext<MenuContentContext>('MenuContent')
 
 export interface MenuContentImplPrivateProps {
   disableOutsidePointerEvents?: DismissableLayerProps['disableOutsidePointerEvents']
@@ -58,16 +67,13 @@ export interface MenuRootContentProps
 
 <script setup lang="ts">
 import {
-  type InjectionKey,
   type Ref,
-  inject,
   onUnmounted,
-  provide,
   ref,
   toRefs,
   watch,
 } from 'vue'
-import { MENU_INJECTION_KEY, MENU_ROOT_INJECTION_KEY } from './MenuRoot.vue'
+import { injectMenuContext, injectMenuRootContext } from './MenuRoot.vue'
 import {
   FIRST_LAST_KEYS,
   type GraceIntent,
@@ -91,20 +97,13 @@ import {
 } from '@/Popper'
 import { usePrimitiveElement } from '@/Primitive'
 import { RovingFocusGroup, type RovingFocusGroupEmits } from '@/RovingFocus'
-import {
-  useArrowNavigation,
-  useBodyScrollLock,
-  useCollection,
-  useFocusGuards,
-  useTypeahead,
-} from '@/shared'
 
 const props = withDefaults(defineProps<MenuContentImplProps>(), {
   ...PopperContentPropsDefaultValue,
 })
 const emits = defineEmits<MenuContentImplEmits>()
-const context = inject(MENU_INJECTION_KEY)
-const rootContext = inject(MENU_ROOT_INJECTION_KEY)
+const menuContext = injectMenuContext()
+const rootContext = injectMenuRootContext()
 
 const { trapFocus, disableOutsidePointerEvents, loop } = toRefs(props)
 
@@ -125,7 +124,7 @@ const { primitiveElement, currentElement: contentElement }
 const collectionItems = createCollection(contentElement)
 
 watch(contentElement, (el) => {
-  context!.onContentChange(el)
+  menuContext!.onContentChange(el)
 })
 
 const { handleTypeaheadSearch } = useTypeahead(collectionItems)
@@ -230,24 +229,24 @@ function handlePointerMove(event: PointerEvent) {
   }
 }
 
-provide(MENU_CONTENT_INJECTION_KEY, {
-  onItemEnter: (event: PointerEvent) => {
+provideMenuContentContext({
+  onItemEnter: (event) => {
     if (isPointerMovingToSubmenu(event))
       event.preventDefault()
   },
-  onItemLeave: (event: PointerEvent) => {
+  onItemLeave: (event) => {
     if (isPointerMovingToSubmenu(event))
       return
     contentElement.value?.focus()
     currentItemId.value = null
   },
-  onTriggerLeave: (event: PointerEvent) => {
+  onTriggerLeave: (event) => {
     if (isPointerMovingToSubmenu(event))
       event.preventDefault()
   },
   searchRef,
   pointerGraceTimerRef,
-  onPointerGraceIntentChange: (intent: GraceIntent | null) => {
+  onPointerGraceIntentChange: (intent) => {
     pointerGraceIntentRef.value = intent
   },
 })
@@ -273,12 +272,12 @@ provide(MENU_CONTENT_INJECTION_KEY, {
         v-model:current-tab-stop-id="currentItemId"
         as-child
         orientation="vertical"
-        :dir="rootContext?.dir.value"
+        :dir="rootContext.dir.value"
         :loop="loop"
         @entry-focus="(event) => {
           emits('entryFocus', event)
           // only focus first item when using keyboard
-          if (!rootContext?.isUsingKeyboardRef.value) event.preventDefault();
+          if (!rootContext.isUsingKeyboardRef.value) event.preventDefault();
         }"
       >
         <PopperContent
@@ -288,8 +287,8 @@ provide(MENU_CONTENT_INJECTION_KEY, {
           :as-child="asChild"
           aria-orientation="vertical"
           data-radix-menu-content
-          :data-state="getOpenState(context!.open.value)"
-          :dir="rootContext!.dir.value"
+          :data-state="getOpenState(menuContext.open.value)"
+          :dir="rootContext.dir.value"
           :side="side"
           :side-offset="sideOffset"
           :align="align"
diff --git a/packages/radix-vue/src/Menu/MenuItem.vue b/packages/radix-vue/src/Menu/MenuItem.vue
index b7467f894..683bfed37 100644
--- a/packages/radix-vue/src/Menu/MenuItem.vue
+++ b/packages/radix-vue/src/Menu/MenuItem.vue
@@ -6,10 +6,10 @@ export interface MenuItemProps extends MenuItemImplProps {}
 </script>
 
 <script setup lang="ts">
-import { inject, nextTick, ref } from 'vue'
+import { nextTick, ref } from 'vue'
 import MenuItemImpl, { type MenuItemImplProps } from './MenuItemImpl.vue'
-import { MENU_ROOT_INJECTION_KEY } from './MenuRoot.vue'
-import { MENU_CONTENT_INJECTION_KEY } from './MenuContentImpl.vue'
+import { injectMenuRootContext } from './MenuRoot.vue'
+import { injectMenuContentContext } from './MenuContentImpl.vue'
 import { ITEM_SELECT, SELECTION_KEYS } from './utils'
 import { usePrimitiveElement } from '@/Primitive'
 
@@ -17,8 +17,8 @@ const props = defineProps<MenuItemProps>()
 const emits = defineEmits<MenuItemEmits>()
 
 const { primitiveElement, currentElement } = usePrimitiveElement()
-const rootContext = inject(MENU_ROOT_INJECTION_KEY)
-const contentContext = inject(MENU_CONTENT_INJECTION_KEY)
+const rootContext = injectMenuRootContext()
+const contentContext = injectMenuContentContext()
 
 const isPointerDownRef = ref(false)
 
@@ -34,7 +34,7 @@ async function handleSelect() {
     await nextTick()
     if (itemSelectEvent.defaultPrevented)
       isPointerDownRef.value = false
-    else rootContext!.onClose()
+    else rootContext.onClose()
   }
 }
 </script>
@@ -61,7 +61,7 @@ async function handleSelect() {
     "
     @keydown="
       async (event) => {
-        const isTypingAhead = contentContext!.searchRef.value !== '';
+        const isTypingAhead = contentContext.searchRef.value !== '';
         if (disabled || (isTypingAhead && event.key === ' ')) return;
         if (SELECTION_KEYS.includes(event.key)) {
           event.currentTarget.click();
diff --git a/packages/radix-vue/src/Menu/MenuItemImpl.vue b/packages/radix-vue/src/Menu/MenuItemImpl.vue
index 08baaba91..0113af48f 100644
--- a/packages/radix-vue/src/Menu/MenuItemImpl.vue
+++ b/packages/radix-vue/src/Menu/MenuItemImpl.vue
@@ -8,18 +8,18 @@ export interface MenuItemImplProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { MENU_CONTENT_INJECTION_KEY } from './MenuContentImpl.vue'
+import { injectMenuContentContext } from './MenuContentImpl.vue'
 import {
   Primitive,
   type PrimitiveProps,
   usePrimitiveElement,
 } from '@/Primitive'
-import { inject, nextTick, ref } from 'vue'
+import { nextTick, ref } from 'vue'
 
 const props = defineProps<MenuItemImplProps>()
 
 const { primitiveElement, currentElement } = usePrimitiveElement()
-const contentContext = inject(MENU_CONTENT_INJECTION_KEY)
+const contentContext = injectMenuContentContext()
 
 const isFocused = ref(false)
 
@@ -31,10 +31,10 @@ async function handlePointerMove(event: PointerEvent) {
     return
 
   if (props.disabled) {
-    contentContext!.onItemLeave(event)
+    contentContext.onItemLeave(event)
   }
   else {
-    contentContext!.onItemEnter(event)
+    contentContext.onItemEnter(event)
     if (!event.defaultPrevented) {
       const item = event.currentTarget
       item && (item as HTMLElement).focus()
@@ -49,7 +49,7 @@ async function handlePointerLeave(event: PointerEvent) {
   if (!isMouseEvent(event))
     return
 
-  contentContext!.onItemLeave(event)
+  contentContext.onItemLeave(event)
 }
 
 defineExpose({
diff --git a/packages/radix-vue/src/Menu/MenuItemIndicator.vue b/packages/radix-vue/src/Menu/MenuItemIndicator.vue
index 49c5bca66..1e82c17d6 100644
--- a/packages/radix-vue/src/Menu/MenuItemIndicator.vue
+++ b/packages/radix-vue/src/Menu/MenuItemIndicator.vue
@@ -1,14 +1,18 @@
 <script lang="ts">
-interface MenuItemIndicatorContextValue {
+import { createContext } from '@/shared'
+
+interface MenuItemIndicatorContext {
   checked: Ref<CheckedState>
 }
 
-export const MENU_ITEM_INDICATOR_INJECTION_KEY
-  = Symbol() as InjectionKey<MenuItemIndicatorContextValue>
+export const [injectMenuItemIndicatorContext, provideMenuItemIndicatorContext]
+  = createContext<MenuItemIndicatorContext>(
+    ['MenuCheckboxItem', 'MenuRadioItem'], 'MenuItemIndicatorContext',
+  )
 </script>
 
 <script setup lang="ts">
-import { type InjectionKey, type Ref, inject, ref } from 'vue'
+import { type Ref, ref } from 'vue'
 import { type CheckedState, getCheckedState, isIndeterminate } from './utils'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 import { Presence } from '@/Presence'
@@ -19,7 +23,7 @@ withDefaults(defineProps<MenuItemIndicatorProps>(), {
   as: 'span',
 })
 
-const indicatorContext = inject(MENU_ITEM_INDICATOR_INJECTION_KEY, {
+const indicatorContext = injectMenuItemIndicatorContext({
   checked: ref(false),
 })
 </script>
@@ -27,14 +31,14 @@ const indicatorContext = inject(MENU_ITEM_INDICATOR_INJECTION_KEY, {
 <template>
   <Presence
     :present="
-      isIndeterminate(indicatorContext?.checked.value)
-        || indicatorContext?.checked.value === true
+      isIndeterminate(indicatorContext.checked.value)
+        || indicatorContext.checked.value === true
     "
   >
     <Primitive
       :as="as"
       :as-child="asChild"
-      :data-state="getCheckedState(indicatorContext!.checked.value)"
+      :data-state="getCheckedState(indicatorContext.checked.value)"
     >
       <slot />
     </Primitive>
diff --git a/packages/radix-vue/src/Menu/MenuRadioGroup.vue b/packages/radix-vue/src/Menu/MenuRadioGroup.vue
index 5c4589e67..2764f2926 100644
--- a/packages/radix-vue/src/Menu/MenuRadioGroup.vue
+++ b/packages/radix-vue/src/Menu/MenuRadioGroup.vue
@@ -1,15 +1,17 @@
 <script lang="ts">
-interface MenuRadioGroupContextValue {
+import { createContext } from '@/shared'
+
+interface MenuRadioGroupContext {
   modelValue: Ref<string>
   onValueChange: (payload: string) => void
 }
 
-export const MENU_RADIO_GROUP_INJECTION_KEY
-  = Symbol() as InjectionKey<MenuRadioGroupContextValue>
+export const [injectMenuRadioGroupContext, provideMenuRadioGroupContext]
+  = createContext<MenuRadioGroupContext>('MenuRadioGroup')
 </script>
 
 <script setup lang="ts">
-import { type InjectionKey, type Ref, provide } from 'vue'
+import { type Ref } from 'vue'
 import { useVModel } from '@vueuse/core'
 import MenuGroup, { type MenuGroupProps } from './MenuGroup.vue'
 
@@ -26,10 +28,10 @@ const props = withDefaults(defineProps<MenuRadioGroupProps>(), {
 const emits = defineEmits<MenuRadioGroupEmits>()
 const modelValue = useVModel(props, 'modelValue', emits)
 
-provide(MENU_RADIO_GROUP_INJECTION_KEY, {
+provideMenuRadioGroupContext({
   modelValue,
-  onValueChange: (ev) => {
-    modelValue.value = ev
+  onValueChange: (payload) => {
+    modelValue.value = payload
   },
 })
 </script>
diff --git a/packages/radix-vue/src/Menu/MenuRadioItem.vue b/packages/radix-vue/src/Menu/MenuRadioItem.vue
index b97920ca1..1f111061d 100644
--- a/packages/radix-vue/src/Menu/MenuRadioItem.vue
+++ b/packages/radix-vue/src/Menu/MenuRadioItem.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { computed, inject, provide, toRefs } from 'vue'
+import { computed, toRefs } from 'vue'
 import { getCheckedState } from './utils'
 import MenuItem, {
   type MenuItemEmits,
   type MenuItemProps,
 } from './MenuItem.vue'
-import { MENU_RADIO_GROUP_INJECTION_KEY } from './MenuRadioGroup.vue'
-import { MENU_ITEM_INDICATOR_INJECTION_KEY } from './MenuItemIndicator.vue'
+import { injectMenuRadioGroupContext } from './MenuRadioGroup.vue'
+import { provideMenuItemIndicatorContext } from './MenuItemIndicator.vue'
 
 export interface MenuRadioItemProps extends MenuItemProps {
   value: string
@@ -17,14 +17,12 @@ const props = defineProps<MenuRadioItemProps>()
 const emits = defineEmits<MenuRadioItemEmits>()
 
 const { value } = toRefs(props)
-const radioGroupContext = inject(MENU_RADIO_GROUP_INJECTION_KEY)
+const radioGroupContext = injectMenuRadioGroupContext()
 const checked = computed(
-  () => radioGroupContext?.modelValue.value === value?.value,
+  () => radioGroupContext.modelValue.value === value?.value,
 )
 
-provide(MENU_ITEM_INDICATOR_INJECTION_KEY, {
-  checked,
-})
+provideMenuItemIndicatorContext({ checked })
 </script>
 
 <template>
@@ -36,7 +34,7 @@ provide(MENU_ITEM_INDICATOR_INJECTION_KEY, {
     @select="
       async (event) => {
         emits('select', event);
-        radioGroupContext?.onValueChange(value);
+        radioGroupContext.onValueChange(value);
       }
     "
   >
diff --git a/packages/radix-vue/src/Menu/MenuRoot.vue b/packages/radix-vue/src/Menu/MenuRoot.vue
index d3f3ac440..3d3778930 100644
--- a/packages/radix-vue/src/Menu/MenuRoot.vue
+++ b/packages/radix-vue/src/Menu/MenuRoot.vue
@@ -1,12 +1,14 @@
 <script lang="ts">
-export interface MenuContextValue {
+import { createContext, useDirection } from '@/shared'
+
+export interface MenuContext {
   open: Ref<boolean>
   onOpenChange(open: boolean): void
   content: Ref<HTMLElement | undefined>
   onContentChange(content: HTMLElement | undefined): void
 }
 
-export interface MenuRootContextValue {
+export interface MenuRootContext {
   onClose(): void
   dir: Ref<Direction>
   isUsingKeyboardRef: Ref<boolean>
@@ -20,16 +22,16 @@ export interface MenuProps {
   modal?: boolean
 }
 
-export const MENU_INJECTION_KEY = Symbol() as InjectionKey<MenuContextValue>
-export const MENU_ROOT_INJECTION_KEY
-  = Symbol() as InjectionKey<MenuRootContextValue>
+export const [injectMenuContext, provideMenuContext]
+  = createContext<MenuContext>(['MenuRoot', 'MenuSub'], 'MenuContext')
+
+export const [injectMenuRootContext, provideMenuRootContext]
+  = createContext<MenuRootContext>('MenuRoot')
 </script>
 
 <script setup lang="ts">
 import {
-  type InjectionKey,
   type Ref,
-  provide,
   ref,
   toRefs,
   watchEffect,
@@ -38,7 +40,6 @@ import { isClient } from '@vueuse/shared'
 import { useVModel } from '@vueuse/core'
 import { type Direction } from './utils'
 import { PopperRoot } from '@/Popper'
-import { useDirection } from '@/shared'
 
 const props = withDefaults(defineProps<MenuProps>(), {
   open: false,
@@ -83,7 +84,7 @@ watchEffect((cleanupFn) => {
   })
 })
 
-provide(MENU_INJECTION_KEY, {
+provideMenuContext({
   open,
   onOpenChange: (value) => {
     open.value = value
@@ -94,7 +95,7 @@ provide(MENU_INJECTION_KEY, {
   },
 })
 
-provide(MENU_ROOT_INJECTION_KEY, {
+provideMenuRootContext({
   onClose: () => {
     open.value = false
   },
diff --git a/packages/radix-vue/src/Menu/MenuRootContentModal.vue b/packages/radix-vue/src/Menu/MenuRootContentModal.vue
index 6b1e55e0f..215a36323 100644
--- a/packages/radix-vue/src/Menu/MenuRootContentModal.vue
+++ b/packages/radix-vue/src/Menu/MenuRootContentModal.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { inject } from 'vue'
 import MenuContentImpl, {
   type MenuContentImplEmits,
   type MenuRootContentProps,
 } from './MenuContentImpl.vue'
-import { MENU_INJECTION_KEY } from './MenuRoot.vue'
+import { injectMenuContext } from './MenuRoot.vue'
 import { useEmitAsProps, useHideOthers } from '@/shared'
 import { usePrimitiveElement } from '@/Primitive'
 
@@ -12,7 +11,7 @@ const props = defineProps<MenuRootContentModalProps>()
 
 const emits = defineEmits<MenuRootContentModalEmits>()
 
-const context = inject(MENU_INJECTION_KEY)
+const menuContext = injectMenuContext()
 
 interface MenuRootContentModalProps extends MenuRootContentProps {}
 type MenuRootContentModalEmits = MenuContentImplEmits
@@ -27,10 +26,10 @@ useHideOthers(currentElement)
   <MenuContentImpl
     ref="primitiveElement"
     v-bind="{ ...props, ...emitsAsProps }"
-    :trap-focus="context?.open.value"
-    :disable-outside-pointer-events="context?.open.value"
+    :trap-focus="menuContext.open.value"
+    :disable-outside-pointer-events="menuContext.open.value"
     :disable-outside-scroll="true"
-    @dismiss="context?.onOpenChange(false)"
+    @dismiss="menuContext.onOpenChange(false)"
     @focus-outside.prevent="emits('focusOutside', $event)"
   >
     <slot />
diff --git a/packages/radix-vue/src/Menu/MenuRootContentNonModal.vue b/packages/radix-vue/src/Menu/MenuRootContentNonModal.vue
index d89737c0e..890bc01da 100644
--- a/packages/radix-vue/src/Menu/MenuRootContentNonModal.vue
+++ b/packages/radix-vue/src/Menu/MenuRootContentNonModal.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import { inject } from 'vue'
 import MenuContentImpl, {
   type MenuContentImplEmits,
   type MenuRootContentProps,
 } from './MenuContentImpl.vue'
-import { MENU_INJECTION_KEY } from './MenuRoot.vue'
+import { injectMenuContext } from './MenuRoot.vue'
 import { useEmitAsProps } from '@/shared'
 
 const props = defineProps<MenuRootContentNonModalProps>()
 
 const emits = defineEmits<MenuRootContentModalEmits>()
 
-const context = inject(MENU_INJECTION_KEY)
+const menuContext = injectMenuContext()
 
 interface MenuRootContentNonModalProps extends MenuRootContentProps {}
 type MenuRootContentModalEmits = MenuContentImplEmits
@@ -25,7 +24,7 @@ const emitsAsProps = useEmitAsProps(emits)
     :trap-focus="false"
     :disable-outside-pointer-events="false"
     :disable-outside-scroll="false"
-    @dismiss="context?.onOpenChange(false)"
+    @dismiss="menuContext.onOpenChange(false)"
   >
     <slot />
   </MenuContentImpl>
diff --git a/packages/radix-vue/src/Menu/MenuSub.vue b/packages/radix-vue/src/Menu/MenuSub.vue
index 4a8dd1620..604ebb313 100644
--- a/packages/radix-vue/src/Menu/MenuSub.vue
+++ b/packages/radix-vue/src/Menu/MenuSub.vue
@@ -1,14 +1,16 @@
 <script lang="ts">
-export interface MenuSubContextValue {
+import { createContext, useId } from '@/shared'
+
+export interface MenuSubContext {
   contentId: string
   triggerId: string
   trigger: Ref<HTMLElement | undefined>
   onTriggerChange(trigger: HTMLElement | undefined): void
-  parentMenuContext?: MenuContextValue
+  parentMenuContext?: MenuContext
 }
 
-export const MENU_SUB_INJECTION_KEY
-  = Symbol() as InjectionKey<MenuSubContextValue>
+export const [injectMenuSubContext, provideMenuSubContext]
+  = createContext<MenuSubContext>('MenuSub')
 
 export interface MenuSubProps {
   open?: boolean
@@ -17,17 +19,13 @@ export interface MenuSubProps {
 
 <script setup lang="ts">
 import {
-  type InjectionKey,
   type Ref,
-  inject,
-  provide,
   ref,
   watchEffect,
 } from 'vue'
 import { useVModel } from '@vueuse/core'
-import { MENU_INJECTION_KEY, type MenuContextValue } from './MenuRoot.vue'
+import { type MenuContext, injectMenuContext, provideMenuContext } from './MenuRoot.vue'
 import { PopperRoot } from '@/Popper'
-import { useId } from '@/shared'
 
 const props = withDefaults(defineProps<MenuSubProps>(), {
   open: undefined,
@@ -41,7 +39,7 @@ const open = useVModel(props, 'open', emits, {
   passive: (props.open === undefined) as false,
 })
 
-const parentMenuContext = inject(MENU_INJECTION_KEY)
+const parentMenuContext = injectMenuContext()
 const trigger = ref<HTMLElement>()
 const content = ref<HTMLElement>()
 
@@ -52,7 +50,7 @@ watchEffect((cleanupFn) => {
   cleanupFn(() => (open.value = false))
 })
 
-provide(MENU_INJECTION_KEY, {
+provideMenuContext({
   open,
   onOpenChange: (value) => {
     open.value = value
@@ -63,7 +61,7 @@ provide(MENU_INJECTION_KEY, {
   },
 })
 
-provide(MENU_SUB_INJECTION_KEY, {
+provideMenuSubContext({
   triggerId: useId(),
   contentId: useId(),
   trigger,
diff --git a/packages/radix-vue/src/Menu/MenuSubContent.vue b/packages/radix-vue/src/Menu/MenuSubContent.vue
index d01febf6a..d647dea11 100644
--- a/packages/radix-vue/src/Menu/MenuSubContent.vue
+++ b/packages/radix-vue/src/Menu/MenuSubContent.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { inject } from 'vue'
 import MenuContentImpl, {
   type MenuContentImplEmits,
   type MenuContentImplProps,
 } from './MenuContentImpl.vue'
-import { MENU_INJECTION_KEY, MENU_ROOT_INJECTION_KEY } from './MenuRoot.vue'
-import { MENU_SUB_INJECTION_KEY } from './MenuSub.vue'
+import { injectMenuContext, injectMenuRootContext } from './MenuRoot.vue'
+import { injectMenuSubContext } from './MenuSub.vue'
 import { SUB_CLOSE_KEYS } from './utils'
 import { Presence } from '@/Presence'
 import { usePrimitiveElement } from '@/Primitive'
@@ -19,28 +18,28 @@ const emits = defineEmits<MenuSubContentEmits>()
 
 const forwarded = useForwardPropsEmits(props, emits)
 
-const context = inject(MENU_INJECTION_KEY)
-const rootContext = inject(MENU_ROOT_INJECTION_KEY)
-const subContext = inject(MENU_SUB_INJECTION_KEY)
+const menuContext = injectMenuContext()
+const rootContext = injectMenuRootContext()
+const menuSubContext = injectMenuSubContext()
 
 const { primitiveElement, currentElement: subContentElement }
   = usePrimitiveElement()
 </script>
 
 <template>
-  <Presence :present="context!.open.value">
+  <Presence :present="menuContext.open.value">
     <MenuContentImpl
       v-bind="forwarded"
-      :id="subContext!.contentId"
+      :id="menuSubContext.contentId"
       ref="primitiveElement"
-      :aria-labelledby="subContext!.triggerId"
+      :aria-labelledby="menuSubContext.triggerId"
       align="start"
-      :side="rootContext!.dir.value === 'rtl' ? 'left' : 'right'"
+      :side="rootContext.dir.value === 'rtl' ? 'left' : 'right'"
       :disable-outside-pointer-events="false"
       :disable-outside-scroll="false"
       :trap-focus="false"
       @open-auto-focus="(event) => {
-        if (rootContext!.isUsingKeyboardRef.value) subContentElement?.focus();
+        if (rootContext.isUsingKeyboardRef.value) subContentElement?.focus();
         // event.preventDefault();
       }"
       @close-auto-focus.prevent
@@ -49,13 +48,13 @@ const { primitiveElement, currentElement: subContentElement }
           if (event.defaultPrevented) return;
           // We prevent closing when the trigger is focused to avoid triggering a re-open animation
           // on pointer interaction.
-          if (event.target !== subContext!.trigger.value)
-            context!.onOpenChange(false);
+          if (event.target !== menuSubContext.trigger.value)
+            menuContext.onOpenChange(false);
         }
       "
       @escape-key-down="
         (event) => {
-          rootContext?.onClose();
+          rootContext.onClose();
           // ensure pressing escape in submenu doesn't escape full screen mode
           event.preventDefault();
         }
@@ -63,11 +62,11 @@ const { primitiveElement, currentElement: subContentElement }
       @keydown="(event: KeyboardEvent) => {
         // Submenu key events bubble through portals. We only care about keys in this menu.
         const isKeyDownInside = (event.currentTarget as HTMLElement)?.contains(event.target as HTMLElement);
-        const isCloseKey = SUB_CLOSE_KEYS[rootContext!.dir.value].includes(event.key);
+        const isCloseKey = SUB_CLOSE_KEYS[rootContext.dir.value].includes(event.key);
         if (isKeyDownInside && isCloseKey) {
-          context!.onOpenChange(false);
+          menuContext.onOpenChange(false);
           // We focus manually because we prevented it in `onCloseAutoFocus`
-          subContext!.trigger.value?.focus();
+          menuSubContext.trigger.value?.focus();
           // prevent window from scrolling
           event.preventDefault();
         }
diff --git a/packages/radix-vue/src/Menu/MenuSubTrigger.vue b/packages/radix-vue/src/Menu/MenuSubTrigger.vue
index 7cc054f59..9742e8b49 100644
--- a/packages/radix-vue/src/Menu/MenuSubTrigger.vue
+++ b/packages/radix-vue/src/Menu/MenuSubTrigger.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed, inject, nextTick, onUnmounted, ref } from 'vue'
+import { computed, nextTick, onUnmounted, ref } from 'vue'
 import MenuItemImpl, { type MenuItemImplProps } from './MenuItemImpl.vue'
-import { MENU_INJECTION_KEY, MENU_ROOT_INJECTION_KEY } from './MenuRoot.vue'
-import { MENU_SUB_INJECTION_KEY } from './MenuSub.vue'
-import { MENU_CONTENT_INJECTION_KEY } from './MenuContentImpl.vue'
+import { injectMenuContext, injectMenuRootContext } from './MenuRoot.vue'
+import { injectMenuSubContext } from './MenuSub.vue'
+import { injectMenuContentContext } from './MenuContentImpl.vue'
 import MenuAnchor from './MenuAnchor.vue'
 import { SUB_OPEN_KEYS, type Side, getOpenState, isMouseEvent } from './utils'
 
@@ -11,14 +11,14 @@ export interface MenuSubTriggerProps extends MenuItemImplProps {}
 
 const props = defineProps<MenuSubTriggerProps>()
 
-const context = inject(MENU_INJECTION_KEY)
-const rootContext = inject(MENU_ROOT_INJECTION_KEY)
-const subContext = inject(MENU_SUB_INJECTION_KEY)
-const contentContext = inject(MENU_CONTENT_INJECTION_KEY)
+const menuContext = injectMenuContext()
+const rootContext = injectMenuRootContext()
+const subContext = injectMenuSubContext()
+const contentContext = injectMenuContentContext()
 
 const openTimerRef = ref<number | null>(null)
 const pointerGraceTimerRef = computed(
-  () => contentContext?.pointerGraceTimerRef.value,
+  () => contentContext.pointerGraceTimerRef.value,
 )
 
 function clearOpenTimer() {
@@ -34,12 +34,12 @@ onUnmounted(() => {
 function handlePointerMove(event: PointerEvent) {
   if (!isMouseEvent(event))
     return
-  contentContext!.onItemEnter(event)
-  context!.onOpenChange(true)
+  contentContext.onItemEnter(event)
+  menuContext.onOpenChange(true)
   if (event.defaultPrevented)
     return
-  if (!props.disabled && !context?.open.value && !openTimerRef.value) {
-    contentContext!.onPointerGraceIntentChange(null)
+  if (!props.disabled && !menuContext.open.value && !openTimerRef.value) {
+    contentContext.onPointerGraceIntentChange(null)
     openTimerRef.value = window.setTimeout(() => {
       clearOpenTimer()
     }, 100)
@@ -51,18 +51,18 @@ function handlePointerLeave(event: PointerEvent) {
     return
   clearOpenTimer()
 
-  const contentRect = context!.content.value?.getBoundingClientRect()
+  const contentRect = menuContext.content.value?.getBoundingClientRect()
 
   if (contentRect) {
     // TODO: make sure to update this when we change positioning logic
-    const side = context!.content.value?.dataset.side as Side
+    const side = menuContext.content.value?.dataset.side as Side
 
     const rightSide = side === 'right'
     const bleed = rightSide ? -5 : +5
     const contentNearEdge = contentRect[rightSide ? 'left' : 'right']
     const contentFarEdge = contentRect[rightSide ? 'right' : 'left']
 
-    contentContext!.onPointerGraceIntentChange({
+    contentContext.onPointerGraceIntentChange({
       area: [
         // Apply a bleed on clientX to ensure that our exit point is
         // consistently within polygon bounds
@@ -76,32 +76,32 @@ function handlePointerLeave(event: PointerEvent) {
     })
 
     window.clearTimeout(pointerGraceTimerRef.value)
-    contentContext!.pointerGraceTimerRef.value = window.setTimeout(
-      () => contentContext!.onPointerGraceIntentChange(null),
+    contentContext.pointerGraceTimerRef.value = window.setTimeout(
+      () => contentContext.onPointerGraceIntentChange(null),
       300,
     )
   }
   else {
-    contentContext!.onTriggerLeave(event)
+    contentContext.onTriggerLeave(event)
     if (event.defaultPrevented)
       return
 
     // There's 100ms where the user may leave an item before the submenu was opened.
-    contentContext!.onPointerGraceIntentChange(null)
+    contentContext.onPointerGraceIntentChange(null)
   }
 }
 
 async function handleKeyDown(event: KeyboardEvent) {
-  const isTypingAhead = contentContext!.searchRef.value !== ''
+  const isTypingAhead = contentContext.searchRef.value !== ''
   if (props.disabled || (isTypingAhead && event.key === ' '))
     return
-  if (SUB_OPEN_KEYS[rootContext!.dir.value].includes(event.key)) {
-    context!.onOpenChange(true)
+  if (SUB_OPEN_KEYS[rootContext.dir.value].includes(event.key)) {
+    menuContext.onOpenChange(true)
 
     await nextTick()
     // The trigger may hold focus if opened via pointer interaction
     // so we ensure content is given focus again when switching to keyboard.
-    context!.content.value?.focus()
+    menuContext.content.value?.focus()
     // prevent window from scrolling
     event.preventDefault()
   }
@@ -119,7 +119,7 @@ async function handleKeyDown(event: KeyboardEvent) {
 <template>
   <MenuAnchor as-child>
     <MenuItemImpl
-      :id="subContext!.triggerId"
+      :id="subContext.triggerId"
       :ref="
         (vnode) => {
           // @ts-ignore
@@ -127,9 +127,9 @@ async function handleKeyDown(event: KeyboardEvent) {
         }
       "
       aria-haspopup="menu"
-      :aria-expanded="context!.open.value"
-      :aria-controls="subContext?.contentId"
-      :data-state="getOpenState(context!.open.value)"
+      :aria-expanded="menuContext.open.value"
+      :aria-controls="subContext.contentId"
+      :data-state="getOpenState(menuContext.open.value)"
       @click="
         async (event) => {
           if (props.disabled || event.defaultPrevented) return;
@@ -139,7 +139,7 @@ async function handleKeyDown(event: KeyboardEvent) {
            * between separate submenus.
            */
           event.currentTarget.focus();
-          if (!context!.open.value) context!.onOpenChange(true);
+          if (!menuContext.open.value) menuContext.onOpenChange(true);
         }
       "
       @pointermove="handlePointerMove"
diff --git a/packages/radix-vue/src/Menubar/MenubarContent.vue b/packages/radix-vue/src/Menubar/MenubarContent.vue
index 5492ea1f5..cb2678ceb 100644
--- a/packages/radix-vue/src/Menubar/MenubarContent.vue
+++ b/packages/radix-vue/src/Menubar/MenubarContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { inject, ref } from 'vue'
-import { MENUBAR_INJECTION_KEY } from './MenubarRoot.vue'
-import { MENUBAR_MENU_INJECTION_KEY } from './MenubarMenu.vue'
+import { ref } from 'vue'
+import { injectMenubarRootContext } from './MenubarRoot.vue'
+import { injectMenubarMenuContext } from './MenubarMenu.vue'
 import { MenuContent, type MenuContentEmits, type MenuContentProps } from '@/Menu'
 import { useCollection, useForwardPropsEmits } from '@/shared'
 import { wrapArray } from '@/shared/useTypeahead'
@@ -15,8 +15,8 @@ const props = withDefaults(defineProps<MenubarContentProps>(), {
 const emits = defineEmits<MenubarContentEmits>()
 const forwarded = useForwardPropsEmits(props, emits)
 
-const context = inject(MENUBAR_INJECTION_KEY)
-const menuContext = inject(MENUBAR_MENU_INJECTION_KEY)
+const rootContext = injectMenubarRootContext()
+const menuContext = injectMenubarMenuContext()
 
 const { injectCollection } = useCollection('menubar')
 const collections = injectCollection()
@@ -29,7 +29,7 @@ function handleArrowNavigation(event: KeyboardEvent) {
     'data-radix-menubar-subtrigger',
   )
 
-  const prevMenuKey = context?.dir.value === 'rtl' ? 'ArrowRight' : 'ArrowLeft'
+  const prevMenuKey = rootContext.dir.value === 'rtl' ? 'ArrowRight' : 'ArrowLeft'
   const isPrevKey = prevMenuKey === event.key
   const isNextKey = !isPrevKey
 
@@ -41,22 +41,22 @@ function handleArrowNavigation(event: KeyboardEvent) {
   if (isPrevKey)
     candidateValues.reverse()
 
-  const currentIndex = candidateValues.indexOf(menuContext?.value)
+  const currentIndex = candidateValues.indexOf(menuContext.value)
 
-  candidateValues = context?.loop.value
+  candidateValues = rootContext.loop.value
     ? wrapArray(candidateValues, currentIndex + 1)
     : candidateValues.slice(currentIndex + 1)
 
   const [nextValue] = candidateValues
   if (nextValue)
-    context?.onMenuOpen(nextValue)
+    rootContext.onMenuOpen(nextValue)
 }
 </script>
 
 <template>
   <MenuContent
-    :id="menuContext?.contentId"
-    :aria-labelledby="menuContext?.triggerId"
+    :id="menuContext.contentId"
+    :aria-labelledby="menuContext.triggerId"
     data-radix-menubar-content=""
     v-bind="forwarded"
     :style="{
@@ -70,9 +70,9 @@ function handleArrowNavigation(event: KeyboardEvent) {
       '--radix-menubar-trigger-height': 'var(--radix-popper-anchor-height)',
     }"
     @close-auto-focus="(event) => {
-      const menubarOpen = Boolean(context?.modelValue.value);
+      const menubarOpen = Boolean(rootContext.modelValue.value);
       if (!menubarOpen && !hasInteractedOutsideRef) {
-        menuContext!.triggerElement.value?.focus();
+        menuContext.triggerElement.value?.focus();
       }
 
       hasInteractedOutsideRef = false;
@@ -91,12 +91,12 @@ function handleArrowNavigation(event: KeyboardEvent) {
     "
     @open-auto-focus="
       (event) => {
-        if (!menuContext?.wasKeyboardTriggerOpenRef.value)
+        if (!menuContext.wasKeyboardTriggerOpenRef.value)
           event.preventDefault();
       }
     "
     @entry-focus="(event) => {
-      if (!menuContext?.wasKeyboardTriggerOpenRef.value) event.preventDefault()
+      if (!menuContext.wasKeyboardTriggerOpenRef.value) event.preventDefault()
     }"
     @keydown.arrow-right.arrow-left="handleArrowNavigation"
   >
diff --git a/packages/radix-vue/src/Menubar/MenubarMenu.vue b/packages/radix-vue/src/Menubar/MenubarMenu.vue
index 2f433542b..37fe214a4 100644
--- a/packages/radix-vue/src/Menubar/MenubarMenu.vue
+++ b/packages/radix-vue/src/Menubar/MenubarMenu.vue
@@ -1,44 +1,44 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
+import { createContext, useId } from '@/shared'
 
 export interface MenubarMenuProps {
   value?: string
 }
 
-export const MENUBAR_MENU_INJECTION_KEY
-  = Symbol() as InjectionKey<MenubarMenuProvideValue>
-
-interface MenubarMenuProvideValue {
+type MenubarMenuContext = {
   value: string
   triggerId: string
   triggerElement: Ref<HTMLElement | undefined>
   contentId: string
   wasKeyboardTriggerOpenRef: Ref<boolean>
 }
+
+export const [injectMenubarMenuContext, provideMenubarMenuContext]
+  = createContext<MenubarMenuContext>('MenubarMenu')
 </script>
 
 <script setup lang="ts">
-import { computed, inject, provide, ref, watch } from 'vue'
-import { MENUBAR_INJECTION_KEY } from './MenubarRoot.vue'
-import { useId } from '@/shared'
+import { computed, ref, watch } from 'vue'
+import { injectMenubarRootContext } from './MenubarRoot.vue'
 import { MenuRoot } from '@/Menu'
 
 const props = defineProps<MenubarMenuProps>()
 
 const value = props.value ?? useId()
-const context = inject(MENUBAR_INJECTION_KEY)
+const rootContext = injectMenubarRootContext()
 
 const triggerElement = ref<HTMLElement>()
 const wasKeyboardTriggerOpenRef = ref(false)
 
-const open = computed(() => context?.modelValue.value === value)
+const open = computed(() => rootContext.modelValue.value === value)
 
 watch(open, () => {
   if (!open.value)
     wasKeyboardTriggerOpenRef.value = false
 })
 
-provide(MENUBAR_MENU_INJECTION_KEY, {
+provideMenubarMenuContext({
   value,
   triggerElement,
   triggerId: value,
@@ -51,12 +51,12 @@ provide(MENUBAR_MENU_INJECTION_KEY, {
   <MenuRoot
     :open="open"
     :modal="false"
-    :dir="context?.dir.value"
+    :dir="rootContext.dir.value"
     @update:open="
       (value) => {
         // Menu only calls `@update:open` when dismissing so we
         // want to close our MenuBar based on the same events.
-        if (!value) context?.onMenuClose();
+        if (!value) rootContext.onMenuClose();
       }
     "
   >
diff --git a/packages/radix-vue/src/Menubar/MenubarRoot.vue b/packages/radix-vue/src/Menubar/MenubarRoot.vue
index 4c2d54098..0d8a4c424 100644
--- a/packages/radix-vue/src/Menubar/MenubarRoot.vue
+++ b/packages/radix-vue/src/Menubar/MenubarRoot.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
 import type { Direction } from '../shared/types'
-import { useCollection, useDirection } from '@/shared'
+import { createContext, useCollection, useDirection } from '@/shared'
 
 export interface MenubarRootProps {
   modelValue?: string
@@ -13,10 +13,7 @@ export type MenubarRootEmits = {
   'update:modelValue': [value: boolean]
 }
 
-export const MENUBAR_INJECTION_KEY
-  = Symbol() as InjectionKey<MenubarContextValue>
-
-export interface MenubarContextValue {
+export interface MenubarRootContext {
   modelValue: Ref<string>
   dir: Ref<Direction>
   loop: Ref<boolean>
@@ -24,10 +21,13 @@ export interface MenubarContextValue {
   onMenuClose(): void
   onMenuToggle(value: string): void
 }
+
+export const [injectMenubarRootContext, provideMenubarRootContext]
+  = createContext<MenubarRootContext>('MenubarRoot')
 </script>
 
 <script setup lang="ts">
-import { provide, ref, toRefs } from 'vue'
+import { ref, toRefs } from 'vue'
 import { Primitive, usePrimitiveElement } from '@/Primitive'
 import { RovingFocusGroup } from '@/RovingFocus'
 import { useVModel } from '@vueuse/core'
@@ -50,7 +50,7 @@ const currentTabStopId = ref<string | null>(null)
 
 const { dir: propDir, loop } = toRefs(props)
 const dir = useDirection(propDir)
-provide(MENUBAR_INJECTION_KEY, {
+provideMenubarRootContext({
   modelValue,
   dir,
   loop,
diff --git a/packages/radix-vue/src/Menubar/MenubarSubContent.vue b/packages/radix-vue/src/Menubar/MenubarSubContent.vue
index af1629ae2..6a53ced48 100644
--- a/packages/radix-vue/src/Menubar/MenubarSubContent.vue
+++ b/packages/radix-vue/src/Menubar/MenubarSubContent.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { MENUBAR_INJECTION_KEY } from './MenubarRoot.vue'
-import { MENUBAR_MENU_INJECTION_KEY } from './MenubarMenu.vue'
+import { injectMenubarRootContext } from './MenubarRoot.vue'
+import { injectMenubarMenuContext } from './MenubarMenu.vue'
 import {
   MenuSubContent,
   type MenuSubContentEmits,
@@ -19,8 +18,8 @@ const forwarded = useForwardPropsEmits(props, emits)
 
 const { injectCollection } = useCollection('menubar')
 
-const context = inject(MENUBAR_INJECTION_KEY)
-const menuContext = inject(MENUBAR_MENU_INJECTION_KEY)
+const rootContext = injectMenubarRootContext()
+const menuContext = injectMenubarMenuContext()
 const collections = injectCollection()
 
 function handleArrowNavigation(event: KeyboardEvent) {
@@ -35,15 +34,15 @@ function handleArrowNavigation(event: KeyboardEvent) {
 
   let candidateValues = collections.value.map(i => i.dataset.value)
 
-  const currentIndex = candidateValues.indexOf(menuContext?.value)
+  const currentIndex = candidateValues.indexOf(menuContext.value)
 
-  candidateValues = context?.loop.value
+  candidateValues = rootContext.loop.value
     ? wrapArray(candidateValues, currentIndex + 1)
     : candidateValues.slice(currentIndex + 1)
 
   const [nextValue] = candidateValues
   if (nextValue)
-    context?.onMenuOpen(nextValue)
+    rootContext.onMenuOpen(nextValue)
 }
 </script>
 
diff --git a/packages/radix-vue/src/Menubar/MenubarTrigger.vue b/packages/radix-vue/src/Menubar/MenubarTrigger.vue
index 980169b4f..e0f7a1a3e 100644
--- a/packages/radix-vue/src/Menubar/MenubarTrigger.vue
+++ b/packages/radix-vue/src/Menubar/MenubarTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, ref } from 'vue'
-import { MENUBAR_INJECTION_KEY } from './MenubarRoot.vue'
-import { MENUBAR_MENU_INJECTION_KEY } from './MenubarMenu.vue'
+import { computed, onMounted, ref } from 'vue'
+import { injectMenubarRootContext } from './MenubarRoot.vue'
+import { injectMenubarMenuContext } from './MenubarMenu.vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -17,18 +17,18 @@ export interface MenubarTriggerProps extends PrimitiveProps {
 withDefaults(defineProps<MenubarTriggerProps>(), {
   as: 'button',
 })
-const context = inject(MENUBAR_INJECTION_KEY)
-const menuContext = inject(MENUBAR_MENU_INJECTION_KEY)
+const rootContext = injectMenubarRootContext()
+const menuContext = injectMenubarMenuContext()
 
 const { primitiveElement, currentElement: triggerElement }
   = usePrimitiveElement()
 
 const isFocused = ref(false)
 
-const open = computed(() => context?.modelValue.value === menuContext?.value)
+const open = computed(() => rootContext.modelValue.value === menuContext.value)
 
 onMounted(() => {
-  menuContext!.triggerElement = triggerElement
+  menuContext.triggerElement = triggerElement
 })
 </script>
 
@@ -36,49 +36,49 @@ onMounted(() => {
   <RovingFocusItem
     as-child
     :focusable="!disabled"
-    :tab-stop-id="menuContext?.value"
+    :tab-stop-id="menuContext.value"
   >
     <MenuAnchor as-child>
       <Primitive
-        :id="menuContext?.triggerId"
+        :id="menuContext.triggerId"
         ref="primitiveElement"
         :as="as"
         :type="as === 'button' ? 'button' : undefined"
         role="menuitem"
         aria-haspopup="menu"
         :aria-expanded="open"
-        :aria-controls="open ? menuContext?.contentId : undefined"
+        :aria-controls="open ? menuContext.contentId : undefined"
         :data-highlighted="isFocused ? '' : undefined"
         :data-state="open ? 'open' : 'closed'"
         :data-disabled="disabled ? '' : undefined"
         :disabled="disabled"
-        :data-value="menuContext?.value"
+        :data-value="menuContext.value"
         data-radix-vue-collection-item
         @pointerdown="(event) => {
           // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
           // but not when the control key is pressed (avoiding MacOS right click)
           if (!disabled && event.button === 0 && event.ctrlKey === false) {
-            context!.onMenuOpen(menuContext!.value);
+            rootContext.onMenuOpen(menuContext.value);
             // prevent trigger focusing when opening
             // this allows the content to be given focus without competition
             if (!open) event.preventDefault();
           }
         }"
         @pointerenter="() => {
-          const menubarOpen = Boolean(context!.modelValue.value);
+          const menubarOpen = Boolean(rootContext.modelValue.value);
           if (menubarOpen && !open) {
-            context!.onMenuOpen(menuContext!.value);
+            rootContext.onMenuOpen(menuContext.value);
             triggerElement?.focus()
           }
         }"
         @keydown.enter.space.arrow-down="(event) => {
           if (disabled) return;
-          if (['Enter', ' '].includes(event.key)) context?.onMenuToggle(menuContext!.value);
-          if (event.key === 'ArrowDown') context?.onMenuOpen(menuContext!.value);
+          if (['Enter', ' '].includes(event.key)) rootContext.onMenuToggle(menuContext.value);
+          if (event.key === 'ArrowDown') rootContext.onMenuOpen(menuContext.value);
           // prevent keydown from scrolling window / first focused item to execute
           // that keydown (inadvertently closing the menu)
           if (['Enter', ' ', 'ArrowDown'].includes(event.key)) {
-            menuContext!.wasKeyboardTriggerOpenRef.value = true;
+            menuContext.wasKeyboardTriggerOpenRef.value = true;
             event.preventDefault();
           }
         }"
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue
index 58c5352a3..f5010bb31 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, inject } from 'vue'
-import { NAVIGATION_MENU_INJECTION_KEY } from './NavigationMenuRoot.vue'
-import { NAVIGATION_MENU_ITEM_INJECTION_KEY } from './NavigationMenuItem.vue'
+import { computed } from 'vue'
+import { injectNavigationMenuContext } from './NavigationMenuRoot.vue'
+import { injectNavigationMenuItemContext } from './NavigationMenuItem.vue'
 import { getOpenState } from './utils'
 import { Presence } from '@/Presence'
 import { type PointerDownOutsideEvent } from '@/DismissableLayer'
@@ -18,23 +18,23 @@ const emits = defineEmits<NavigationMenuContentEmits>()
 const emitsAsProps = useEmitAsProps(emits)
 
 const isClientMounted = useMounted()
-const context = inject(NAVIGATION_MENU_INJECTION_KEY)
-const itemContext = inject(NAVIGATION_MENU_ITEM_INJECTION_KEY)
+const menuContext = injectNavigationMenuContext()
+const itemContext = injectNavigationMenuItemContext()
 
-const open = computed(() => itemContext?.value === context?.modelValue.value)
+const open = computed(() => itemContext.value === menuContext.modelValue.value)
 
 // We persist the last active content value as the viewport may be animating out
 // and we want the content to remain mounted for the lifecycle of the viewport.
 const isLastActiveValue = computed(() => {
-  if (!context?.modelValue.value && context?.previousValue.value)
-    return (context?.previousValue.value === itemContext?.value)
+  if (!menuContext.modelValue.value && menuContext.previousValue.value)
+    return (menuContext.previousValue.value === itemContext.value)
   return false
 })
 
 function handlePointerDown(ev: PointerDownOutsideEvent) {
   emits('pointerDownOutside', ev)
   if (!ev.preventDefault)
-    context?.onContentLeave()
+    menuContext.onContentLeave()
 }
 </script>
 
@@ -45,16 +45,16 @@ export default {
 </script>
 
 <template>
-  <Teleport v-if="isClientMounted" :to="context?.viewport.value" :disabled="!context?.viewport.value">
+  <Teleport v-if="isClientMounted" :to="menuContext.viewport.value" :disabled="!menuContext.viewport.value">
     <Presence :present="open || isLastActiveValue">
       <NavigationMenuContentImpl
         :data-state="getOpenState(open)"
         :style="{
-          pointerEvents: !open && context?.isRootMenu ? 'none' : undefined,
+          pointerEvents: !open && menuContext.isRootMenu ? 'none' : undefined,
         }"
         v-bind="{ ...$attrs, ...props, ...emitsAsProps }"
-        @pointerenter="context?.onContentEnter(itemContext!.value)"
-        @pointerleave="context?.onContentLeave()"
+        @pointerenter="menuContext.onContentEnter(itemContext.value)"
+        @pointerleave="menuContext.onContentLeave()"
         @pointerdown="handlePointerDown"
         @focus-outside="emits('focusOutside', $event)"
         @interact-outside="emits('interactOutside', $event)"
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
index 6d795eaed..4e72bbb87 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
@@ -6,9 +6,8 @@ export type NavigationMenuContentImplEmits = DismissableLayerEmits
 </script>
 
 <script setup lang="ts">
-import { computed, inject, ref, watchEffect } from 'vue'
-import { NAVIGATION_MENU_INJECTION_KEY } from './NavigationMenuRoot.vue'
-
+import { computed, ref, watchEffect } from 'vue'
+import { injectNavigationMenuContext } from './NavigationMenuRoot.vue'
 import {
   EVENT_ROOT_CONTENT_DISMISS,
   focusFirst,
@@ -26,7 +25,7 @@ import {
 import { usePrimitiveElement } from '@/Primitive'
 import { useArrowNavigation, useCollection } from '@/shared'
 import type { PointerDownOutsideEvent } from '@/DismissableLayer/utils'
-import { NAVIGATION_MENU_ITEM_INJECTION_KEY } from './NavigationMenuItem.vue'
+import { injectNavigationMenuItemContext } from './NavigationMenuItem.vue'
 
 const props = defineProps<NavigationMenuContentImplProps>()
 const emits = defineEmits<NavigationMenuContentImplEmits>()
@@ -35,22 +34,22 @@ const { injectCollection } = useCollection('nav')
 const collectionItems = injectCollection()
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
-const context = inject(NAVIGATION_MENU_INJECTION_KEY)
-const itemContext = inject(NAVIGATION_MENU_ITEM_INJECTION_KEY)
+const menuContext = injectNavigationMenuContext()
+const itemContext = injectNavigationMenuItemContext()
 
-const triggerId = makeTriggerId(context!.baseId, itemContext!.value)
-const contentId = makeContentId(context!.baseId, itemContext!.value)
+const triggerId = makeTriggerId(menuContext.baseId, itemContext.value)
+const contentId = makeContentId(menuContext.baseId, itemContext.value)
 
 const prevMotionAttributeRef = ref<MotionAttribute | null>(null)
 const motionAttribute = computed(() => {
   const items = collectionItems.value
   const values = items.map(item => item.id.split('trigger-')[1])
-  if (context?.dir.value === 'rtl')
+  if (menuContext.dir.value === 'rtl')
     values.reverse()
-  const index = values.indexOf(context!.modelValue.value)
-  const prevIndex = values.indexOf(context!.previousValue.value)
-  const isSelected = itemContext!.value === context?.modelValue.value
-  const wasSelected = prevIndex === values.indexOf(itemContext!.value)
+  const index = values.indexOf(menuContext.modelValue.value)
+  const prevIndex = values.indexOf(menuContext.previousValue.value)
+  const isSelected = itemContext.value === menuContext.modelValue.value
+  const wasSelected = prevIndex === values.indexOf(itemContext.value)
 
   // We only want to update selected and the last selected content
   // this avoids animations being interrupted outside of that range
@@ -82,11 +81,11 @@ function handleFocusOutside(ev: FocusOutsideEvent) {
   emits('interactOutside', ev)
 
   if (!ev.defaultPrevented) {
-    itemContext!.onContentFocusOutside()
+    itemContext.onContentFocusOutside()
 
     const target = ev.target as HTMLElement
     // Only dismiss content when focus moves outside of the menu
-    if (context!.rootNavigationMenu?.value?.contains(target))
+    if (menuContext.rootNavigationMenu?.value?.contains(target))
       ev.preventDefault()
   }
 }
@@ -100,21 +99,21 @@ function handlePointerDownOutside(ev: PointerDownOutsideEvent) {
       item.contains(target),
     )
     const isRootViewport
-      = context?.isRootMenu && context.viewport.value?.contains(target)
+      = menuContext.isRootMenu && menuContext.viewport.value?.contains(target)
 
-    if (isTrigger || isRootViewport || !context?.isRootMenu)
+    if (isTrigger || isRootViewport || !menuContext.isRootMenu)
       ev.preventDefault()
   }
 }
 
 watchEffect((cleanupFn) => {
   const content = currentElement.value
-  if (context?.isRootMenu && content) {
+  if (menuContext.isRootMenu && content) {
     // Bubble dismiss to the root content node and focus its trigger
     const handleClose = () => {
-      itemContext!.onRootContentClose()
+      itemContext.onRootContentClose()
       if (content.contains(document.activeElement))
-        itemContext!.triggerRef.value?.focus()
+        itemContext.triggerRef.value?.focus()
     }
     content.addEventListener(EVENT_ROOT_CONTENT_DISMISS, handleClose)
 
@@ -128,9 +127,9 @@ function handleEscapeKeyDown(ev: KeyboardEvent) {
   emits('escapeKeyDown', ev)
 
   if (!ev.defaultPrevented) {
-    context!.onItemDismiss()
-    itemContext!.triggerRef?.value?.focus()
-    itemContext!.wasEscapeCloseRef.value = true
+    menuContext.onItemDismiss()
+    itemContext.triggerRef?.value?.focus()
+    itemContext.wasEscapeCloseRef.value = true
   }
 }
 
@@ -157,7 +156,7 @@ function handleKeydown(ev: KeyboardEvent) {
       // If we can't focus that means we're at the edges
       // so focus the proxy and let browser handle
       // tab/shift+tab keypress on the proxy instead
-      itemContext!.focusProxyRef.value?.focus()
+      itemContext.focusProxyRef.value?.focus()
       return
     }
   }
@@ -191,8 +190,8 @@ function handleDismiss() {
     ref="primitiveElement"
     :aria-labelledby="triggerId"
     :data-motion="motionAttribute"
-    :data-state="getOpenState(context?.modelValue.value === itemContext!.value)"
-    :data-orientation="context?.orientation"
+    :data-state="getOpenState(menuContext.modelValue.value === itemContext.value)"
+    :data-orientation="menuContext.orientation"
     v-bind="props"
     @keydown="handleKeydown"
     @escape-key-down="handleEscapeKeyDown"
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuIndicator.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuIndicator.vue
index 64dd57244..e754dd1ff 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuIndicator.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuIndicator.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, inject, ref, watchEffect } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
 import { useResizeObserver } from '@vueuse/core'
-import { NAVIGATION_MENU_INJECTION_KEY } from './NavigationMenuRoot.vue'
+import { injectNavigationMenuContext } from './NavigationMenuRoot.vue'
 import { useCollection } from '@/shared'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 import { Presence } from '@/Presence'
@@ -11,11 +11,11 @@ const props = defineProps<NavigationMenuIndicatorProps>()
 
 const { injectCollection } = useCollection('nav')
 const collectionItems = injectCollection()
-const context = inject(NAVIGATION_MENU_INJECTION_KEY)
+const menuContext = injectNavigationMenuContext()
 
 const position = ref<{ size: number; offset: number }>()
-const isHorizontal = computed(() => context?.orientation === 'horizontal')
-const isVisible = computed(() => !!context?.modelValue.value)
+const isHorizontal = computed(() => menuContext.orientation === 'horizontal')
+const isVisible = computed(() => !!menuContext.modelValue.value)
 
 const activeTrigger = ref<HTMLElement>()
 
@@ -33,19 +33,19 @@ function handlePositionChange() {
 }
 
 watchEffect(() => {
-  if (!context?.modelValue.value) {
+  if (!menuContext.modelValue.value) {
     position.value = undefined
     return
   }
   const items = collectionItems.value
   activeTrigger.value = items.find(item =>
-    item.id.includes(context?.modelValue.value),
+    item.id.includes(menuContext.modelValue.value),
   )
   handlePositionChange()
 })
 
 useResizeObserver(activeTrigger, handlePositionChange)
-useResizeObserver(context!.indicatorTrack, handlePositionChange)
+useResizeObserver(menuContext.indicatorTrack, handlePositionChange)
 </script>
 
 <script lang="ts">
@@ -56,14 +56,14 @@ export default {
 
 <template>
   <Teleport
-    v-if="context?.indicatorTrack.value"
-    :to="context?.indicatorTrack.value"
+    v-if="menuContext.indicatorTrack.value"
+    :to="menuContext.indicatorTrack.value"
   >
     <Presence :present="isVisible">
       <Primitive
         aria-hidden
         :data-state="isVisible ? 'visible' : 'hidden'"
-        :data-orientation="context.orientation"
+        :data-orientation="menuContext.orientation"
         :as-child="props.asChild"
         :as="as"
         :style="{
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
index 1dfa6c361..f750e475e 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
@@ -1,9 +1,11 @@
 <script lang="ts">
+import { createContext, useArrowNavigation, useCollection, useId } from '@/shared'
+
 export interface NavigationMenuItemProps extends PrimitiveProps {
   value?: string
 }
 
-export interface NavigationMenuItemContextValue {
+export type NavigationMenuItemContext = {
   value: string
   contentId: string
   triggerRef: Ref<HTMLElement | undefined>
@@ -15,13 +17,13 @@ export interface NavigationMenuItemContextValue {
   onRootContentClose(): void
 }
 
-export const NAVIGATION_MENU_ITEM_INJECTION_KEY
-  = Symbol() as InjectionKey<NavigationMenuItemContextValue>
+export const [injectNavigationMenuItemContext, provideNavigationMenuItemContext]
+  = createContext<NavigationMenuItemContext>('NavigationMenuItem')
 </script>
 
 <script setup lang="ts">
-import { type InjectionKey, type Ref, inject, provide, ref } from 'vue'
-import { NAVIGATION_MENU_INJECTION_KEY } from './NavigationMenuRoot.vue'
+import { type Ref, ref } from 'vue'
+import { injectNavigationMenuContext } from './NavigationMenuRoot.vue'
 import {
   focusFirst,
   getTabbableCandidates,
@@ -29,7 +31,6 @@ import {
   removeFromTabOrder,
 } from './utils'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { useArrowNavigation, useCollection, useId } from '@/shared'
 
 const props = withDefaults(defineProps<NavigationMenuItemProps>(), {
   as: 'li',
@@ -37,13 +38,13 @@ const props = withDefaults(defineProps<NavigationMenuItemProps>(), {
 const { injectCollection } = useCollection('nav')
 const collectionItems = injectCollection()
 
-const context = inject(NAVIGATION_MENU_INJECTION_KEY)
+const context = injectNavigationMenuContext()
 
 const value = props.value || useId()
 const triggerRef = ref<HTMLElement>()
 const focusProxyRef = ref<HTMLElement>()
 
-const contentId = makeContentId(context!.baseId, value)
+const contentId = makeContentId(context.baseId, value)
 
 let restoreContentTabOrderRef: () => void = () => ({})
 
@@ -67,7 +68,7 @@ function handleContentExit() {
   }
 }
 
-provide(NAVIGATION_MENU_ITEM_INJECTION_KEY, {
+provideNavigationMenuItemContext({
   value,
   contentId,
   triggerRef,
@@ -80,14 +81,14 @@ provide(NAVIGATION_MENU_ITEM_INJECTION_KEY, {
 })
 
 function handleClose() {
-  context?.onItemDismiss()
+  context.onItemDismiss()
   triggerRef.value?.focus()
 }
 
 function handleKeydown(ev: KeyboardEvent) {
   const currentFocus = document.activeElement as HTMLElement
   if (ev.keyCode === 32 || ev.key === 'Enter') {
-    if (context?.modelValue.value === value) {
+    if (context.modelValue.value === value) {
       handleClose()
       ev.preventDefault()
       return
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuList.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuList.vue
index 7f434e604..a1d205d01 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuList.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuList.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { inject, onMounted } from 'vue'
-import { NAVIGATION_MENU_INJECTION_KEY } from './NavigationMenuRoot.vue'
+import { onMounted } from 'vue'
+import { injectNavigationMenuContext } from './NavigationMenuRoot.vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -12,11 +12,11 @@ const props = withDefaults(defineProps<NavigationMenuListProps>(), {
   as: 'ul',
 })
 
-const context = inject(NAVIGATION_MENU_INJECTION_KEY)
+const menuContext = injectNavigationMenuContext()
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
 onMounted(() => {
-  context?.onIndicatorTrackChange(currentElement.value)
+  menuContext.onIndicatorTrackChange(currentElement.value)
 })
 </script>
 
@@ -32,7 +32,7 @@ export default {
       v-bind="$attrs"
       :as-child="props.asChild"
       :as="as"
-      :data-orientation="context?.orientation"
+      :data-orientation="menuContext.orientation"
     >
       <slot />
     </Primitive>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuRoot.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuRoot.vue
index b04f1fde1..ab6f343cd 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuRoot.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuRoot.vue
@@ -1,14 +1,12 @@
 <script lang="ts">
 import {
-  type InjectionKey,
   type Ref,
   computed,
-  provide,
   ref,
   toRefs,
 } from 'vue'
 import type { Direction, Orientation } from './utils'
-import { useCollection, useDirection, useId } from '@/shared'
+import { createContext, useCollection, useDirection, useId } from '@/shared'
 
 export interface NavigationMenuRootProps extends PrimitiveProps {
   modelValue?: string
@@ -30,7 +28,7 @@ export type NavigationMenuRootEmits = {
   'update:modelValue': [value: string]
 }
 
-export interface NavigationMenuContextValue {
+export interface NavigationMenuContext {
   isRootMenu: boolean
   modelValue: Ref<string>
   previousValue: Ref<string>
@@ -50,8 +48,8 @@ export interface NavigationMenuContextValue {
   onItemDismiss(): void
 }
 
-export const NAVIGATION_MENU_INJECTION_KEY
-  = Symbol() as InjectionKey<NavigationMenuContextValue>
+export const [injectNavigationMenuContext, provideNavigationMenuContext]
+  = createContext<NavigationMenuContext>(['NavigationMenuRoot', 'NavigationMenuSub'], 'NavigationMenuContext')
 </script>
 
 <script setup lang="ts">
@@ -102,7 +100,7 @@ const debouncedFn = useDebounceFn((val: string) => {
   modelValue.value = val
 }, computedDelay)
 
-provide(NAVIGATION_MENU_INJECTION_KEY, {
+provideNavigationMenuContext({
   isRootMenu: true,
   modelValue,
   previousValue,
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuSub.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuSub.vue
index 5dca86570..0431bce3f 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuSub.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuSub.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type Ref, inject, provide, ref } from 'vue'
+import { type Ref, ref } from 'vue'
 import { useVModel } from '@vueuse/core'
 import type { Orientation } from './utils'
-import { NAVIGATION_MENU_INJECTION_KEY } from './NavigationMenuRoot.vue'
+import { injectNavigationMenuContext, provideNavigationMenuContext } from './NavigationMenuRoot.vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -30,7 +30,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 }) as Ref<string>
 const previousValue = ref('')
 
-const context = inject(NAVIGATION_MENU_INJECTION_KEY)
+const menuContext = injectNavigationMenuContext()
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
 const indicatorTrack = ref<HTMLElement>()
@@ -39,8 +39,8 @@ const viewport = ref<HTMLElement>()
 const { createCollection } = useCollection('nav')
 createCollection(indicatorTrack)
 
-provide(NAVIGATION_MENU_INJECTION_KEY, {
-  ...context!,
+provideNavigationMenuContext({
+  ...menuContext,
   isRootMenu: false,
   modelValue,
   previousValue,
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue
index 7f4a45e9d..c27483aeb 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type VNode, computed, inject, onMounted, ref } from 'vue'
+import { type VNode, computed, onMounted, ref } from 'vue'
 import { unrefElement } from '@vueuse/core'
-import { NAVIGATION_MENU_INJECTION_KEY } from './NavigationMenuRoot.vue'
-import { NAVIGATION_MENU_ITEM_INJECTION_KEY } from './NavigationMenuItem.vue'
+import { injectNavigationMenuContext } from './NavigationMenuRoot.vue'
+import { injectNavigationMenuItemContext } from './NavigationMenuItem.vue'
 import { getOpenState, makeContentId, makeTriggerId } from './utils'
 import {
   Primitive,
@@ -19,8 +19,8 @@ const props = withDefaults(defineProps<NavigationMenuTriggerProps>(), {
   as: 'button',
 })
 
-const context = inject(NAVIGATION_MENU_INJECTION_KEY)
-const itemContext = inject(NAVIGATION_MENU_ITEM_INJECTION_KEY)
+const menuContext = injectNavigationMenuContext()
+const itemContext = injectNavigationMenuItemContext()
 
 const { primitiveElement, currentElement: triggerElement }
   = usePrimitiveElement()
@@ -30,17 +30,17 @@ const contentId = ref('')
 const hasPointerMoveOpenedRef = ref(false)
 const wasClickCloseRef = ref(false)
 
-const open = computed(() => itemContext?.value === context?.modelValue.value)
+const open = computed(() => itemContext.value === menuContext.modelValue.value)
 
 onMounted(() => {
-  itemContext!.triggerRef = triggerElement
-  triggerId.value = makeTriggerId(context!.baseId, itemContext!.value)
-  contentId.value = makeContentId(context!.baseId, itemContext!.value)
+  itemContext.triggerRef = triggerElement
+  triggerId.value = makeTriggerId(menuContext.baseId, itemContext.value)
+  contentId.value = makeContentId(menuContext.baseId, itemContext.value)
 })
 
 function handlePointerEnter() {
   wasClickCloseRef.value = false
-  itemContext!.wasEscapeCloseRef.value = false
+  itemContext.wasEscapeCloseRef.value = false
 }
 
 function handlePointerMove(ev: PointerEvent) {
@@ -48,11 +48,11 @@ function handlePointerMove(ev: PointerEvent) {
     if (
       props.disabled
       || wasClickCloseRef.value
-      || itemContext!.wasEscapeCloseRef.value
+      || itemContext.wasEscapeCloseRef.value
       || hasPointerMoveOpenedRef.value
     )
       return
-    context!.onTriggerEnter(itemContext!.value)
+    menuContext.onTriggerEnter(itemContext.value)
     hasPointerMoveOpenedRef.value = true
   }
 }
@@ -61,7 +61,7 @@ function handlePointerLeave(ev: PointerEvent) {
   if (ev.pointerType === 'mouse') {
     if (props.disabled)
       return
-    context!.onTriggerLeave()
+    menuContext.onTriggerLeave()
     hasPointerMoveOpenedRef.value = false
   }
 }
@@ -72,19 +72,19 @@ function handleClick() {
     return
 
   if (open.value)
-    context?.onItemSelect('')
-  else context?.onItemSelect(itemContext!.value)
+    menuContext.onItemSelect('')
+  else menuContext.onItemSelect(itemContext.value)
 
   wasClickCloseRef.value = open.value
 }
 
 function handleKeydown(ev: KeyboardEvent) {
-  const verticalEntryKey = context!.dir.value === 'rtl' ? 'ArrowLeft' : 'ArrowRight'
+  const verticalEntryKey = menuContext.dir.value === 'rtl' ? 'ArrowLeft' : 'ArrowRight'
   const entryKey = { horizontal: 'ArrowDown', vertical: verticalEntryKey }[
-    context!.orientation
+    menuContext.orientation
   ]
   if (open.value && ev.key === entryKey) {
-    itemContext!.onEntryKeyDown()
+    itemContext.onEntryKeyDown()
     // Prevent FocusGroupItem from handling the event
     ev.preventDefault()
     ev.stopPropagation()
@@ -93,19 +93,19 @@ function handleKeydown(ev: KeyboardEvent) {
 
 function setFocusProxyRef(node: VNode) {
   // @ts-expect-error unrefElement expect MaybeRef, but also support Vnode
-  itemContext!.focusProxyRef.value = unrefElement(node)
+  itemContext.focusProxyRef.value = unrefElement(node)
   return undefined
 }
 
 function handleVisuallyHiddenFocus(ev: FocusEvent) {
-  const content = document.getElementById(itemContext!.contentId)
+  const content = document.getElementById(itemContext.contentId)
   const prevFocusedElement = ev.relatedTarget as HTMLElement | null
 
   const wasTriggerFocused = prevFocusedElement === triggerElement.value
   const wasFocusFromContent = content?.contains(prevFocusedElement)
 
   if (wasTriggerFocused || !wasFocusFromContent)
-    itemContext!.onFocusProxyEnter(wasTriggerFocused ? 'start' : 'end')
+    itemContext.onFocusProxyEnter(wasTriggerFocused ? 'start' : 'end')
 }
 </script>
 
@@ -144,6 +144,6 @@ export default {
       :tabindex="0"
       @focus="handleVisuallyHiddenFocus"
     />
-    <span v-if="context?.viewport" :aria-owns="contentId" />
+    <span v-if="menuContext.viewport" :aria-owns="contentId" />
   </template>
 </template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue
index 16bc2c463..3a5a01634 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import {
   computed,
-  inject,
   nextTick,
   ref,
   watch,
 } from 'vue'
 import { useResizeObserver } from '@vueuse/core'
-import { NAVIGATION_MENU_INJECTION_KEY } from './NavigationMenuRoot.vue'
+import { injectNavigationMenuContext } from './NavigationMenuRoot.vue'
 import { getOpenState } from './utils'
 import {
   Primitive,
@@ -21,18 +20,18 @@ defineProps<NavigationMenuViewportProps>()
 
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
-const context = inject(NAVIGATION_MENU_INJECTION_KEY)
+const menuContext = injectNavigationMenuContext()
 
 const size = ref<{ width: number; height: number }>()
 
-const open = computed(() => !!context?.modelValue.value)
+const open = computed(() => !!menuContext.modelValue.value)
 // We persist the last active content value as the viewport may be animating out
 // and we want the content to remain mounted for the lifecycle of the viewport.
-const activeContentValue = computed(() => context!.modelValue.value)
+const activeContentValue = computed(() => menuContext.modelValue.value)
 
 watch(currentElement, () => {
   if (currentElement.value)
-    context!.onViewportChange(currentElement.value)
+    menuContext.onViewportChange(currentElement.value)
 })
 
 const content = ref<HTMLElement>()
@@ -70,15 +69,15 @@ export default {
       :as="as"
       :as-child="asChild"
       :data-state="getOpenState(open)"
-      :data-orientation="context?.orientation"
+      :data-orientation="menuContext.orientation"
       :style="{
         // Prevent interaction when animating out
-        pointerEvents: !open && context?.isRootMenu ? 'none' : undefined,
+        pointerEvents: !open && menuContext.isRootMenu ? 'none' : undefined,
         ['--radix-navigation-menu-viewport-width' as any]: size ? `${size?.width}px` : undefined,
         ['--radix-navigation-menu-viewport-height' as any]: size ? `${size?.height}px` : undefined,
       }"
-      @pointerenter="context?.onContentEnter(context!.modelValue.value)"
-      @pointerleave="context?.onContentLeave()"
+      @pointerenter="menuContext.onContentEnter(menuContext.modelValue.value)"
+      @pointerleave="menuContext.onContentLeave()"
     >
       <slot />
     </Primitive>
diff --git a/packages/radix-vue/src/Pagination/PaginationFirst.vue b/packages/radix-vue/src/Pagination/PaginationFirst.vue
index 23d0ff6ce..059afd820 100644
--- a/packages/radix-vue/src/Pagination/PaginationFirst.vue
+++ b/packages/radix-vue/src/Pagination/PaginationFirst.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { inject } from 'vue'
-import { PAGINATION_CONTEXT_VALUE } from './PaginationRoot.vue'
+import { injectPaginationRootContext } from './PaginationRoot.vue'
 
 export interface PaginationFirstProps extends PrimitiveProps {}
 const props = withDefaults(defineProps<PaginationFirstProps>(), { as: 'button' })
 
-const context = inject(PAGINATION_CONTEXT_VALUE)
+const rootContext = injectPaginationRootContext()
 </script>
 
 <template>
@@ -14,8 +13,8 @@ const context = inject(PAGINATION_CONTEXT_VALUE)
     v-bind="props"
     aria-label="First Page"
     :type="as === 'button' ? 'button' : undefined"
-    :disabled="context?.page.value === 1 || context?.disabled?.value"
-    @click="context?.onPageChange(1)"
+    :disabled="rootContext.page.value === 1 || rootContext.disabled.value"
+    @click="rootContext.onPageChange(1)"
   >
     <slot>First page</slot>
   </Primitive>
diff --git a/packages/radix-vue/src/Pagination/PaginationLast.vue b/packages/radix-vue/src/Pagination/PaginationLast.vue
index 49d7a309e..e549ad928 100644
--- a/packages/radix-vue/src/Pagination/PaginationLast.vue
+++ b/packages/radix-vue/src/Pagination/PaginationLast.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { inject } from 'vue'
-import { PAGINATION_CONTEXT_VALUE } from './PaginationRoot.vue'
+import { injectPaginationRootContext } from './PaginationRoot.vue'
 
 export interface PaginationLastProps extends PrimitiveProps {}
 const props = withDefaults(defineProps<PaginationLastProps>(), { as: 'button' })
 
-const context = inject(PAGINATION_CONTEXT_VALUE)
+const rootContext = injectPaginationRootContext()
 </script>
 
 <template>
@@ -14,8 +13,8 @@ const context = inject(PAGINATION_CONTEXT_VALUE)
     v-bind="props"
     aria-label="Last Page"
     :type="as === 'button' ? 'button' : undefined"
-    :disabled="context?.page.value === context?.pageCount.value || context?.disabled?.value"
-    @click="context?.onPageChange(context.pageCount.value)"
+    :disabled="rootContext.page.value === rootContext.pageCount.value || rootContext.disabled.value"
+    @click="rootContext.onPageChange(rootContext.pageCount.value)"
   >
     <slot>Last page</slot>
   </Primitive>
diff --git a/packages/radix-vue/src/Pagination/PaginationList.vue b/packages/radix-vue/src/Pagination/PaginationList.vue
index 0fe508fd1..18dd5c965 100644
--- a/packages/radix-vue/src/Pagination/PaginationList.vue
+++ b/packages/radix-vue/src/Pagination/PaginationList.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { computed, inject } from 'vue'
-import { PAGINATION_CONTEXT_VALUE } from './PaginationRoot.vue'
+import { computed } from 'vue'
+import { injectPaginationRootContext } from './PaginationRoot.vue'
 import { getRange, transform } from './utils'
 
 export interface PaginationListProps extends PrimitiveProps { }
 const props = defineProps<PaginationListProps>()
 
-const context = inject(PAGINATION_CONTEXT_VALUE)
+const rootContext = injectPaginationRootContext()
 
 const transformedRange = computed(() => {
   return transform(
     getRange(
-      context!.page.value, context!.pageCount.value, context!.siblingCount.value, context!.showEdges.value,
+      rootContext.page.value, rootContext.pageCount.value, rootContext.siblingCount.value, rootContext.showEdges.value,
     ),
   )
 })
diff --git a/packages/radix-vue/src/Pagination/PaginationListItem.vue b/packages/radix-vue/src/Pagination/PaginationListItem.vue
index 7c1864a8a..e429958f5 100644
--- a/packages/radix-vue/src/Pagination/PaginationListItem.vue
+++ b/packages/radix-vue/src/Pagination/PaginationListItem.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { computed, inject } from 'vue'
-import { PAGINATION_CONTEXT_VALUE } from './PaginationRoot.vue'
+import { computed } from 'vue'
+import { injectPaginationRootContext } from './PaginationRoot.vue'
 
 export interface PaginationListItemProps extends PrimitiveProps {
   value: number
 }
 const props = withDefaults(defineProps<PaginationListItemProps>(), { as: 'button' })
 
-const context = inject(PAGINATION_CONTEXT_VALUE)
-const isSelected = computed(() => context?.page.value === props.value)
+const rootContext = injectPaginationRootContext()
+const isSelected = computed(() => rootContext.page.value === props.value)
 </script>
 
 <template>
@@ -19,9 +19,9 @@ const isSelected = computed(() => context?.page.value === props.value)
     :aria-label="`Page ${value}`"
     :aria-current="isSelected ? 'page' : undefined"
     :data-selected="isSelected ? 'true' : undefined"
-    :disabled="context?.disabled?.value"
+    :disabled="rootContext.disabled.value"
     :type="as === 'button' ? 'button' : undefined"
-    @click="context?.onPageChange(value)"
+    @click="rootContext.onPageChange(value)"
   >
     <slot>{{ value }}</slot>
   </Primitive>
diff --git a/packages/radix-vue/src/Pagination/PaginationNext.vue b/packages/radix-vue/src/Pagination/PaginationNext.vue
index 7c52d8da9..9efb9ae93 100644
--- a/packages/radix-vue/src/Pagination/PaginationNext.vue
+++ b/packages/radix-vue/src/Pagination/PaginationNext.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { inject } from 'vue'
-import { PAGINATION_CONTEXT_VALUE } from './PaginationRoot.vue'
+import { injectPaginationRootContext } from './PaginationRoot.vue'
 
 export interface PaginationNextProps extends PrimitiveProps {}
 const props = withDefaults(defineProps<PaginationNextProps>(), { as: 'button' })
 
-const context = inject(PAGINATION_CONTEXT_VALUE)
+const rootContext = injectPaginationRootContext()
 </script>
 
 <template>
@@ -14,8 +13,8 @@ const context = inject(PAGINATION_CONTEXT_VALUE)
     v-bind="props"
     aria-label="Next Page"
     :type="as === 'button' ? 'button' : undefined"
-    :disabled="context?.page.value === context?.pageCount.value || context?.disabled?.value"
-    @click="context?.onPageChange(context.page.value + 1)"
+    :disabled="rootContext.page.value === rootContext.pageCount.value || rootContext.disabled.value"
+    @click="rootContext.onPageChange(rootContext.page.value + 1)"
   >
     <slot>Next page</slot>
   </Primitive>
diff --git a/packages/radix-vue/src/Pagination/PaginationPrev.vue b/packages/radix-vue/src/Pagination/PaginationPrev.vue
index aa874b454..467c2f1cf 100644
--- a/packages/radix-vue/src/Pagination/PaginationPrev.vue
+++ b/packages/radix-vue/src/Pagination/PaginationPrev.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { inject } from 'vue'
-import { PAGINATION_CONTEXT_VALUE } from './PaginationRoot.vue'
+import { injectPaginationRootContext } from './PaginationRoot.vue'
 
 export interface PaginationPrevProps extends PrimitiveProps {}
 const props = withDefaults(defineProps<PaginationPrevProps>(), { as: 'button' })
 
-const context = inject(PAGINATION_CONTEXT_VALUE)
+const rootContext = injectPaginationRootContext()
 </script>
 
 <template>
@@ -14,8 +13,8 @@ const context = inject(PAGINATION_CONTEXT_VALUE)
     v-bind="props"
     aria-label="Previous Page"
     :type="as === 'button' ? 'button' : undefined"
-    :disabled="context?.page.value === 1 || context?.disabled?.value"
-    @click="context?.onPageChange(context.page.value - 1)"
+    :disabled="rootContext.page.value === 1 || rootContext.disabled?.value"
+    @click="rootContext.onPageChange(rootContext.page.value - 1)"
   >
     <slot>Prev page</slot>
   </Primitive>
diff --git a/packages/radix-vue/src/Pagination/PaginationRoot.vue b/packages/radix-vue/src/Pagination/PaginationRoot.vue
index 39f7be8f0..a1cec1fe6 100644
--- a/packages/radix-vue/src/Pagination/PaginationRoot.vue
+++ b/packages/radix-vue/src/Pagination/PaginationRoot.vue
@@ -1,5 +1,7 @@
 <script lang="ts">
-interface PaginationRootContextValue {
+import { createContext } from '@/shared'
+
+type PaginationRootContext = {
   page: Ref<number>
   onPageChange: (value: number) => void
   pageCount: Ref<number>
@@ -8,14 +10,15 @@ interface PaginationRootContextValue {
   showEdges: Ref<boolean>
 }
 
-export const PAGINATION_CONTEXT_VALUE = Symbol() as InjectionKey<PaginationRootContextValue>
+export const [injectPaginationRootContext, providePaginationRootContext]
+  = createContext<PaginationRootContext>('PaginationRoot')
 </script>
 
 <script setup lang="ts">
 import { Primitive } from '@/Primitive'
 import type { PrimitiveProps } from '@/Primitive'
 import { useVModel } from '@vueuse/core'
-import { type InjectionKey, type Ref, computed, provide, toRefs } from 'vue'
+import { type Ref, computed, toRefs } from 'vue'
 
 export interface PaginationRootProps extends PrimitiveProps {
   page?: number
@@ -49,7 +52,7 @@ const page = useVModel(props, 'page', emits, {
 
 const pageCount = computed(() => Math.ceil(props.total / props.itemsPerPage))
 
-provide(PAGINATION_CONTEXT_VALUE, {
+providePaginationRootContext({
   page,
   onPageChange(value) {
     page.value = value
diff --git a/packages/radix-vue/src/Popover/PopoverAnchor.vue b/packages/radix-vue/src/Popover/PopoverAnchor.vue
index 221e25e4d..d4ff7e0a7 100644
--- a/packages/radix-vue/src/Popover/PopoverAnchor.vue
+++ b/packages/radix-vue/src/Popover/PopoverAnchor.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { inject, onBeforeMount, onUnmounted } from 'vue'
-import { POPOVER_INJECTION_KEY } from './PopoverRoot.vue'
+import { onBeforeMount, onUnmounted } from 'vue'
+import { injectPopoverRootContext } from './PopoverRoot.vue'
 import { PopperAnchor, type PopperAnchorProps } from '@/Popper'
 
 export interface PopoverAnchorProps extends PopperAnchorProps {}
 const props = defineProps<PopoverAnchorProps>()
 
-const context = inject(POPOVER_INJECTION_KEY)
+const rootContext = injectPopoverRootContext()
 
 onBeforeMount(() => {
-  context!.hasCustomAnchor.value = true
+  rootContext.hasCustomAnchor.value = true
 })
 onUnmounted(() => {
-  context!.hasCustomAnchor.value = false
+  rootContext.hasCustomAnchor.value = false
 })
 </script>
 
diff --git a/packages/radix-vue/src/Popover/PopoverClose.vue b/packages/radix-vue/src/Popover/PopoverClose.vue
index e3a094786..cb9aafe75 100644
--- a/packages/radix-vue/src/Popover/PopoverClose.vue
+++ b/packages/radix-vue/src/Popover/PopoverClose.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import { inject } from 'vue'
 import {
-  POPOVER_INJECTION_KEY,
-  type PopoverProvideValue,
+  injectPopoverRootContext,
 } from './PopoverRoot.vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 
@@ -10,7 +8,7 @@ const props = withDefaults(defineProps<PopoverCloseProps>(), {
   as: 'button',
 })
 
-const context = inject<PopoverProvideValue>(POPOVER_INJECTION_KEY)
+const rootContext = injectPopoverRootContext()
 
 export interface PopoverCloseProps extends PrimitiveProps {}
 </script>
@@ -20,7 +18,7 @@ export interface PopoverCloseProps extends PrimitiveProps {}
     :type="as === 'button' ? 'button' : undefined"
     :as="as"
     :as-child="props.asChild"
-    @click="context?.onOpenChange(false)"
+    @click="rootContext.onOpenChange(false)"
   >
     <slot />
   </Primitive>
diff --git a/packages/radix-vue/src/Popover/PopoverContent.vue b/packages/radix-vue/src/Popover/PopoverContent.vue
index 844bc938d..bbd727e45 100644
--- a/packages/radix-vue/src/Popover/PopoverContent.vue
+++ b/packages/radix-vue/src/Popover/PopoverContent.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { inject } from 'vue'
 import PopoverContentModal from './PopoverContentModal.vue'
 import PopoverContentNonModal from './PopoverContentNonModal.vue'
 import {
   type PopoverContentImplEmits,
   type PopoverContentImplProps,
 } from './PopoverContentImpl.vue'
-import { POPOVER_INJECTION_KEY } from './PopoverRoot.vue'
+import { injectPopoverRootContext } from './PopoverRoot.vue'
 import { useForwardPropsEmits } from '@/shared'
 import { Presence } from '@/Presence'
 
@@ -22,15 +21,15 @@ export type PopoverContentEmits = PopoverContentImplEmits
 const props = defineProps<PopoverContentProps>()
 const emits = defineEmits<PopoverContentEmits>()
 
-const context = inject(POPOVER_INJECTION_KEY)
+const rootContext = injectPopoverRootContext()
 
 const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <Presence :present="forceMount || context!.open.value">
+  <Presence :present="forceMount || rootContext.open.value">
     <PopoverContentModal
-      v-if="context?.modal.value"
+      v-if="rootContext.modal.value"
       v-bind="forwarded"
     >
       <slot />
diff --git a/packages/radix-vue/src/Popover/PopoverContentImpl.vue b/packages/radix-vue/src/Popover/PopoverContentImpl.vue
index ae714de72..e057c0ea9 100644
--- a/packages/radix-vue/src/Popover/PopoverContentImpl.vue
+++ b/packages/radix-vue/src/Popover/PopoverContentImpl.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { POPOVER_INJECTION_KEY } from './PopoverRoot.vue'
+import { injectPopoverRootContext } from './PopoverRoot.vue'
 import { PopperContent, type PopperContentProps } from '@/Popper'
 import {
   DismissableLayer,
@@ -38,7 +37,7 @@ const emits = defineEmits<PopoverContentImplEmits>()
 
 const forwarded = useForwardProps(props)
 
-const context = inject(POPOVER_INJECTION_KEY)
+const rootContext = injectPopoverRootContext()
 useFocusGuards()
 </script>
 
@@ -57,12 +56,12 @@ useFocusGuards()
       @interact-outside="emits('interactOutside', $event)"
       @escape-key-down="emits('escapeKeyDown', $event)"
       @focus-outside="emits('focusOutside', $event)"
-      @dismiss="context?.onOpenChange(false)"
+      @dismiss="rootContext.onOpenChange(false)"
     >
       <PopperContent
         v-bind="forwarded"
-        :id="context?.contentId"
-        :data-state="context?.open.value ? 'open' : 'closed'"
+        :id="rootContext.contentId"
+        :data-state="rootContext.open.value ? 'open' : 'closed'"
         role="dialog"
         :style="{
           '--radix-popover-content-transform-origin':
diff --git a/packages/radix-vue/src/Popover/PopoverContentModal.vue b/packages/radix-vue/src/Popover/PopoverContentModal.vue
index c2743476a..d80bf6489 100644
--- a/packages/radix-vue/src/Popover/PopoverContentModal.vue
+++ b/packages/radix-vue/src/Popover/PopoverContentModal.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { inject, ref } from 'vue'
+import { ref } from 'vue'
 import PopoverContentImpl, {
   type PopoverContentImplEmits,
   type PopoverContentImplProps,
 } from './PopoverContentImpl.vue'
-import { POPOVER_INJECTION_KEY } from './PopoverRoot.vue'
+import { injectPopoverRootContext } from './PopoverRoot.vue'
 import { useBodyScrollLock, useForwardPropsEmits, useHideOthers } from '@/shared'
 import { usePrimitiveElement } from '@/Primitive'
 
 const props = defineProps<PopoverContentImplProps>()
 const emits = defineEmits<PopoverContentImplEmits>()
-const context = inject(POPOVER_INJECTION_KEY)
+const rootContext = injectPopoverRootContext()
 const isRightClickOutsideRef = ref(false)
 
 useBodyScrollLock(true)
@@ -25,13 +25,13 @@ useHideOthers(currentElement)
   <PopoverContentImpl
     ref="primitiveElement"
     v-bind="forwarded"
-    :trap-focus="context?.open.value"
+    :trap-focus="rootContext.open.value"
     disable-outside-pointer-events
     @close-auto-focus.prevent="
       (event) => {
         emits('closeAutoFocus', event);
 
-        if (!isRightClickOutsideRef) context?.triggerElement.value?.focus();
+        if (!isRightClickOutsideRef) rootContext.triggerElement.value?.focus();
       }
     "
     @pointer-down-outside="
diff --git a/packages/radix-vue/src/Popover/PopoverContentNonModal.vue b/packages/radix-vue/src/Popover/PopoverContentNonModal.vue
index 424589f7f..170fef002 100644
--- a/packages/radix-vue/src/Popover/PopoverContentNonModal.vue
+++ b/packages/radix-vue/src/Popover/PopoverContentNonModal.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { inject, ref } from 'vue'
+import { ref } from 'vue'
 import PopoverContentImpl, {
   type PopoverContentImplEmits,
   type PopoverContentImplProps,
 } from './PopoverContentImpl.vue'
-import { POPOVER_INJECTION_KEY } from './PopoverRoot.vue'
+import { injectPopoverRootContext } from './PopoverRoot.vue'
 import { useForwardPropsEmits } from '@/shared'
 
 const props = defineProps<PopoverContentImplProps>()
 const emits = defineEmits<PopoverContentImplEmits>()
-const context = inject(POPOVER_INJECTION_KEY)
+const rootContext = injectPopoverRootContext()
 const hasInteractedOutsideRef = ref(false)
 const hasPointerDownOutsideRef = ref(false)
 
@@ -26,7 +26,7 @@ const forwarded = useForwardPropsEmits(props, emits)
         emits('closeAutoFocus', event);
 
         if (!event.defaultPrevented) {
-          if (!hasInteractedOutsideRef) context?.triggerElement.value?.focus();
+          if (!hasInteractedOutsideRef) rootContext.triggerElement.value?.focus();
           // Always prevent auto focus because we either focus manually or want user agent focus
           event.preventDefault();
         }
@@ -50,7 +50,7 @@ const forwarded = useForwardPropsEmits(props, emits)
         // As the trigger is already setup to close, without doing so would
         // cause it to close and immediately open.
         const target = event.target as HTMLElement;
-        const targetIsTrigger = context?.triggerElement.value?.contains(target);
+        const targetIsTrigger = rootContext.triggerElement.value?.contains(target);
         if (targetIsTrigger) event.preventDefault();
 
         // On Safari if the trigger is inside a container with tabIndex={0}, when clicked
diff --git a/packages/radix-vue/src/Popover/PopoverRoot.vue b/packages/radix-vue/src/Popover/PopoverRoot.vue
index 4ea8832c2..ffc35006e 100644
--- a/packages/radix-vue/src/Popover/PopoverRoot.vue
+++ b/packages/radix-vue/src/Popover/PopoverRoot.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
-import { useId } from '@/shared'
+import type { Ref } from 'vue'
+import { createContext, useId } from '@/shared'
 
 export interface PopoverRootProps {
   /**
@@ -22,10 +22,7 @@ export type PopoverRootEmits = {
   'update:open': [value: boolean]
 }
 
-export const POPOVER_INJECTION_KEY
-  = Symbol() as InjectionKey<PopoverProvideValue>
-
-export interface PopoverProvideValue {
+export interface PopoverRootContext {
   triggerElement: Ref<HTMLElement | undefined>
   contentId: string
   open: Ref<boolean>
@@ -34,10 +31,13 @@ export interface PopoverProvideValue {
   onOpenToggle(): void
   hasCustomAnchor: Ref<boolean>
 }
+
+export const [injectPopoverRootContext, providePopoverRootContext]
+  = createContext<PopoverRootContext>('PopoverRoot')
 </script>
 
 <script setup lang="ts">
-import { provide, ref, toRefs } from 'vue'
+import { ref, toRefs } from 'vue'
 import { useVModel } from '@vueuse/core'
 import { PopperRoot } from '@/Popper'
 
@@ -56,7 +56,7 @@ const open = useVModel(props, 'open', emit, {
 const triggerElement = ref<HTMLElement>()
 const hasCustomAnchor = ref(false)
 
-provide<PopoverProvideValue>(POPOVER_INJECTION_KEY, {
+providePopoverRootContext({
   contentId: useId(),
   modal,
   open,
diff --git a/packages/radix-vue/src/Popover/PopoverTrigger.vue b/packages/radix-vue/src/Popover/PopoverTrigger.vue
index f94ebc189..5c399f418 100644
--- a/packages/radix-vue/src/Popover/PopoverTrigger.vue
+++ b/packages/radix-vue/src/Popover/PopoverTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { inject, onMounted } from 'vue'
-import { POPOVER_INJECTION_KEY } from './PopoverRoot.vue'
+import { onMounted } from 'vue'
+import { injectPopoverRootContext } from './PopoverRoot.vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -13,13 +13,13 @@ const props = withDefaults(defineProps<PopoverTriggerProps>(), {
   as: 'button',
 })
 
-const context = inject(POPOVER_INJECTION_KEY)
+const rootContext = injectPopoverRootContext()
 
 const { primitiveElement, currentElement: triggerElement }
   = usePrimitiveElement()
 
 onMounted(() => {
-  context!.triggerElement.value = triggerElement.value
+  rootContext.triggerElement.value = triggerElement.value
 })
 
 defineExpose({ $el: triggerElement })
@@ -27,19 +27,19 @@ defineExpose({ $el: triggerElement })
 
 <template>
   <component
-    :is="context?.hasCustomAnchor.value ? Primitive : PopperAnchor"
+    :is="rootContext.hasCustomAnchor.value ? Primitive : PopperAnchor"
     as-child
   >
     <Primitive
       ref="primitiveElement"
       :type="as === 'button' ? 'button' : undefined"
       aria-haspopup="dialog"
-      :aria-expanded="context?.open.value"
-      :aria-controls="context?.contentId"
-      :data-state="context?.open.value ? 'open' : 'closed'"
+      :aria-expanded="rootContext.open.value"
+      :aria-controls="rootContext.contentId"
+      :data-state="rootContext.open.value ? 'open' : 'closed'"
       :as="as"
       :as-child="props.asChild"
-      @click="context!.onOpenToggle"
+      @click="rootContext.onOpenToggle"
     >
       <slot />
     </Primitive>
diff --git a/packages/radix-vue/src/Popper/PopperAnchor.vue b/packages/radix-vue/src/Popper/PopperAnchor.vue
index 76f4d6033..660ef77e5 100644
--- a/packages/radix-vue/src/Popper/PopperAnchor.vue
+++ b/packages/radix-vue/src/Popper/PopperAnchor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { inject, watch } from 'vue'
-import { type Measurable, POPPER_ROOT_KEY } from './PopperRoot.vue'
+import { watch } from 'vue'
+import { type Measurable, injectPopperRootContext } from './PopperRoot.vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -15,10 +15,10 @@ const props = defineProps<PopperAnchorProps>()
 
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
-const context = inject(POPPER_ROOT_KEY)
+const rootContext = injectPopperRootContext()
 
 watch(currentElement, () => {
-  context?.onAnchorChange(props.element ?? currentElement.value)
+  rootContext.onAnchorChange(props.element ?? currentElement.value)
 })
 </script>
 
diff --git a/packages/radix-vue/src/Popper/PopperArrow.vue b/packages/radix-vue/src/Popper/PopperArrow.vue
index d37d73ead..4b942e8a7 100644
--- a/packages/radix-vue/src/Popper/PopperArrow.vue
+++ b/packages/radix-vue/src/Popper/PopperArrow.vue
@@ -17,51 +17,47 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, inject } from 'vue'
+import { computed } from 'vue'
 import {
-  POPPER_CONTENT_KEY,
-  type PopperContentContextValue,
+  injectPopperContentContext,
 } from './PopperContent.vue'
 import Arrow from '@/shared/component/Arrow.vue'
 import { type ArrowProps } from '@/shared/component/Arrow.vue'
 
-const props = withDefaults(defineProps<PopperArrowProps>(), {
-  as: 'svg',
-})
+withDefaults(
+  defineProps<PopperArrowProps>(),
+  { as: 'svg' },
+)
 
-const contentContext = inject<PopperContentContextValue>(POPPER_CONTENT_KEY)
+const contentContext = injectPopperContentContext()
 
-const baseSide = computed(() =>
-  contentContext?.placedSide
-    ? OPPOSITE_SIDE[contentContext?.placedSide.value]
-    : '',
-)
+const baseSide = computed(() => OPPOSITE_SIDE[contentContext.placedSide.value])
 </script>
 
 <template>
   <span
     :ref="(el: HTMLElement) => {
-      contentContext!.onArrowChange(el)
+      contentContext.onArrowChange(el)
       return undefined
     }"
     :style="{
       position: 'absolute',
-      left: contentContext!.arrowX?.value ? `${contentContext!.arrowX?.value}px` : undefined,
-      top: contentContext!.arrowY?.value ? `${contentContext!.arrowY?.value}px` : undefined,
+      left: contentContext.arrowX?.value ? `${contentContext.arrowX?.value}px` : undefined,
+      top: contentContext.arrowY?.value ? `${contentContext.arrowY?.value}px` : undefined,
       [baseSide]: 0,
       transformOrigin: {
         top: '',
         right: '0 0',
         bottom: 'center 0',
         left: '100% 0',
-      }[contentContext!.placedSide.value],
+      }[contentContext.placedSide.value],
       transform: {
         top: 'translateY(100%)',
         right: 'translateY(50%) rotate(90deg) translateX(-50%)',
         bottom: `rotate(180deg)`,
         left: 'translateY(50%) rotate(-90deg) translateX(50%)',
-      }[contentContext!.placedSide.value],
-      visibility: contentContext!.shouldHideArrow.value ? 'hidden' : undefined,
+      }[contentContext.placedSide.value],
+      visibility: contentContext.shouldHideArrow.value ? 'hidden' : undefined,
     }"
   >
     <Arrow
diff --git a/packages/radix-vue/src/Popper/PopperContent.vue b/packages/radix-vue/src/Popper/PopperContent.vue
index 19f59fcda..1bc7299c9 100644
--- a/packages/radix-vue/src/Popper/PopperContent.vue
+++ b/packages/radix-vue/src/Popper/PopperContent.vue
@@ -1,13 +1,6 @@
 <script lang="ts">
-import type { ComponentPublicInstance, InjectionKey, Ref } from 'vue'
-
-export interface PopperContentContextValue {
-  placedSide: Ref<Side>
-  onArrowChange(arrow: HTMLElement | undefined): void
-  arrowX?: Ref<number>
-  arrowY?: Ref<number>
-  shouldHideArrow: Ref<boolean>
-}
+import type { ComponentPublicInstance, Ref } from 'vue'
+import { createContext, useForwardRef, useSize } from '@/shared'
 
 export const PopperContentPropsDefaultValue = {
   side: 'bottom' as Side,
@@ -113,8 +106,16 @@ export interface PopperContentProps extends PrimitiveProps {
   prioritizePosition?: boolean
 }
 
-export const POPPER_CONTENT_KEY
-  = Symbol() as InjectionKey<PopperContentContextValue>
+export interface PopperContentContext {
+  placedSide: Ref<Side>
+  onArrowChange(arrow: HTMLElement | undefined): void
+  arrowX?: Ref<number>
+  arrowY?: Ref<number>
+  shouldHideArrow: Ref<boolean>
+}
+
+export const [injectPopperContentContext, providePopperContentContext]
+  = createContext<PopperContentContext>('PopperContent')
 
 export default {
   inheritAttrs: false,
@@ -122,7 +123,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, inject, provide, ref, watchEffect } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
 import { computedEager } from '@vueuse/core'
 import {
   type Middleware,
@@ -137,7 +138,7 @@ import {
   size,
   useFloating,
 } from '@floating-ui/vue'
-import { POPPER_ROOT_KEY } from './PopperRoot.vue'
+import { injectPopperRootContext } from './PopperRoot.vue'
 import {
   type Align,
   type Side,
@@ -150,12 +151,11 @@ import {
   type PrimitiveProps,
   usePrimitiveElement,
 } from '@/Primitive'
-import { useForwardRef, useSize } from '@/shared'
 
 const props = withDefaults(defineProps<PopperContentProps>(), {
   ...PopperContentPropsDefaultValue,
 })
-const context = inject(POPPER_ROOT_KEY)
+const rootContext = injectPopperRootContext()
 
 const forwardRef = useForwardRef()
 const { primitiveElement, currentElement: contentElement }
@@ -250,7 +250,7 @@ const computedMiddleware = computedEager(() => {
 })
 
 const { floatingStyles, placement, isPositioned, middlewareData } = useFloating(
-  context!.anchor,
+  rootContext.anchor,
   floatingRef,
   {
     strategy: 'fixed',
@@ -290,11 +290,9 @@ watchEffect(() => {
 const arrowX = computed(() => middlewareData.value.arrow?.x ?? 0)
 const arrowY = computed(() => middlewareData.value.arrow?.y ?? 0)
 
-provide(POPPER_CONTENT_KEY, {
+providePopperContentContext({
   placedSide,
-  onArrowChange: (element: HTMLElement | undefined) => {
-    arrow.value = element
-  },
+  onArrowChange: element => arrow.value = element,
   arrowX,
   arrowY,
   shouldHideArrow: cannotCenterArrow,
diff --git a/packages/radix-vue/src/Popper/PopperRoot.vue b/packages/radix-vue/src/Popper/PopperRoot.vue
index dc4b801d0..52afc9dea 100644
--- a/packages/radix-vue/src/Popper/PopperRoot.vue
+++ b/packages/radix-vue/src/Popper/PopperRoot.vue
@@ -1,28 +1,28 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
+import { createContext } from '@/shared'
 
 export interface Measurable {
   getBoundingClientRect(): DOMRect
 }
 
-interface PopperContextValue {
+interface PopperRootContext {
   anchor: Ref<Measurable | HTMLElement | undefined>
   onAnchorChange(element: Measurable | HTMLElement | undefined): void
 }
 
-export const POPPER_ROOT_KEY = Symbol() as InjectionKey<PopperContextValue>
+export const [injectPopperRootContext, providePopperRootContext]
+  = createContext<PopperRootContext>('PopperRoot')
 </script>
 
 <script setup lang="ts">
-import { provide, ref } from 'vue'
+import { ref } from 'vue'
 
 const anchor = ref<Measurable | HTMLElement>()
 
-provide(POPPER_ROOT_KEY, {
+providePopperRootContext({
   anchor,
-  onAnchorChange: (element: Measurable | HTMLElement | undefined) => {
-    anchor.value = element
-  },
+  onAnchorChange: element => anchor.value = element,
 })
 </script>
 
diff --git a/packages/radix-vue/src/Progress/ProgressIndicator.vue b/packages/radix-vue/src/Progress/ProgressIndicator.vue
index 867e6bd93..4e846cea2 100644
--- a/packages/radix-vue/src/Progress/ProgressIndicator.vue
+++ b/packages/radix-vue/src/Progress/ProgressIndicator.vue
@@ -3,21 +3,20 @@ export interface ProgressIndicatorProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
-import { inject } from 'vue'
-import { PROGRESS_INJECTION_KEY } from './ProgressRoot.vue'
+import { injectProgressRootContext } from './ProgressRoot.vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 
 const props = defineProps<ProgressIndicatorProps>()
 
-const injectedValue = inject(PROGRESS_INJECTION_KEY)
+const rootContext = injectProgressRootContext()
 </script>
 
 <template>
   <Primitive
     v-bind="props"
-    :data-state="injectedValue?.progressState.value"
-    :data-value="injectedValue?.modelValue?.value ?? undefined"
-    :data-max="injectedValue?.max.value"
+    :data-state="rootContext.progressState.value"
+    :data-value="rootContext.modelValue?.value ?? undefined"
+    :data-max="rootContext.max.value"
   >
     <slot />
   </Primitive>
diff --git a/packages/radix-vue/src/Progress/ProgressRoot.vue b/packages/radix-vue/src/Progress/ProgressRoot.vue
index f7bce1a32..a10a8eb62 100644
--- a/packages/radix-vue/src/Progress/ProgressRoot.vue
+++ b/packages/radix-vue/src/Progress/ProgressRoot.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
-import type { ComputedRef, InjectionKey, Ref } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
+import { createContext } from '@/shared'
 
 export interface ProgressRootProps extends PrimitiveProps {
   modelValue?: number | null
@@ -13,15 +14,15 @@ export type ProgressRootEmits = {
 
 const DEFAULT_MAX = 100
 
-export const PROGRESS_INJECTION_KEY
-  = Symbol() as InjectionKey<ProgressProvideValue>
-
-interface ProgressProvideValue {
+interface ProgressRootContext {
   modelValue?: Readonly<Ref<ProgressRootProps['modelValue']>>
   max: Readonly<Ref<number>>
   progressState: ComputedRef<ProgressState>
 }
 
+export const [injectProgressRootContext, provideProgressRootContext]
+  = createContext<ProgressRootContext>('ProgressRoot')
+
 export type ProgressState = 'indeterminate' | 'loading' | 'complete'
 
 const isNumber = (v: any): v is number => typeof v === 'number'
@@ -58,7 +59,7 @@ function validateMax(max: number): number {
 
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
-import { computed, nextTick, provide, watch } from 'vue'
+import { computed, nextTick, watch } from 'vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 
 const props = withDefaults(defineProps<ProgressRootProps>(), {
@@ -109,7 +110,7 @@ const progressState = computed<ProgressState>(() => {
   return 'loading'
 })
 
-provide(PROGRESS_INJECTION_KEY, {
+provideProgressRootContext({
   modelValue,
   max,
   progressState,
diff --git a/packages/radix-vue/src/RadioGroup/Radio.vue b/packages/radix-vue/src/RadioGroup/Radio.vue
index d8b63ca12..8237dc1bc 100644
--- a/packages/radix-vue/src/RadioGroup/Radio.vue
+++ b/packages/radix-vue/src/RadioGroup/Radio.vue
@@ -13,10 +13,7 @@ export type RadioEmits = {
 </script>
 
 <script setup lang="ts">
-import {
-  computed,
-  toRefs,
-} from 'vue'
+import { computed, toRefs } from 'vue'
 import {
   Primitive,
   type PrimitiveProps,
diff --git a/packages/radix-vue/src/RadioGroup/RadioGroupIndicator.vue b/packages/radix-vue/src/RadioGroup/RadioGroupIndicator.vue
index 930977f3c..beb86d03e 100644
--- a/packages/radix-vue/src/RadioGroup/RadioGroupIndicator.vue
+++ b/packages/radix-vue/src/RadioGroup/RadioGroupIndicator.vue
@@ -3,22 +3,21 @@ export interface RadioGroupIndicatorProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
-import { inject } from 'vue'
-import { RADIO_GROUP_ITEM_INJECTION_KEY } from './RadioGroupItem.vue'
+import { injectRadioGroupItemContext } from './RadioGroupItem.vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 
 withDefaults(defineProps<RadioGroupIndicatorProps>(), {
   as: 'span',
 })
 
-const itemContext = inject(RADIO_GROUP_ITEM_INJECTION_KEY)
+const itemContext = injectRadioGroupItemContext()
 </script>
 
 <template>
   <Primitive
-    v-if="itemContext?.checked.value"
-    :data-state="itemContext?.checked.value ? 'checked' : 'unchecked'"
-    :data-disabled="itemContext?.disabled.value ? '' : undefined"
+    v-if="itemContext.checked.value"
+    :data-state="itemContext.checked.value ? 'checked' : 'unchecked'"
+    :data-disabled="itemContext.disabled.value ? '' : undefined"
     :as-child="asChild"
     :as="as"
   >
diff --git a/packages/radix-vue/src/RadioGroup/RadioGroupItem.vue b/packages/radix-vue/src/RadioGroup/RadioGroupItem.vue
index 5c9526447..2954ec660 100644
--- a/packages/radix-vue/src/RadioGroup/RadioGroupItem.vue
+++ b/packages/radix-vue/src/RadioGroup/RadioGroupItem.vue
@@ -1,13 +1,15 @@
 <script lang="ts">
+import { createContext } from '@/shared'
+
 export interface RadioGroupItemProps extends Omit<RadioProps, 'checked'> {}
 
-interface RadioItemProvideValue {
+interface RadioGroupItemContext {
   disabled: ComputedRef<boolean>
   checked: ComputedRef<boolean>
 }
 
-export const RADIO_GROUP_ITEM_INJECTION_KEY
-  = Symbol() as InjectionKey<RadioItemProvideValue>
+export const [injectRadioGroupItemContext, provideRadiogroupItemContext]
+  = createContext<RadioGroupItemContext>('RadioGroupItem')
 
 export default {
   inheritAttrs: false,
@@ -17,13 +19,10 @@ export default {
 <script setup lang="ts">
 import {
   type ComputedRef,
-  type InjectionKey,
   computed,
-  inject,
-  provide,
   ref,
 } from 'vue'
-import { RADIO_GROUP_INJECTION_KEY } from './RadioGroupRoot.vue'
+import { injectRadioGroupRootContext } from './RadioGroupRoot.vue'
 import {
   usePrimitiveElement,
 } from '@/Primitive'
@@ -37,12 +36,13 @@ const props = withDefaults(defineProps<RadioGroupItemProps>(), {
 })
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
-const context = inject(RADIO_GROUP_INJECTION_KEY)
+const rootContext = injectRadioGroupRootContext()
 
-const disabled = computed(() => context?.disabled.value || props.disabled)
-const checked = computed(() => context?.modelValue?.value === props.value)
+const disabled = computed(() => rootContext.disabled.value || props.disabled)
+const required = computed(() => rootContext.required.value || props.required)
+const checked = computed(() => rootContext.modelValue?.value === props.value)
 
-provide(RADIO_GROUP_ITEM_INJECTION_KEY, { disabled, checked })
+provideRadiogroupItemContext({ disabled, checked })
 
 const isArrowKeyPressed = ref(false)
 const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']
@@ -74,7 +74,8 @@ function handleFocus() {
       ref="primitiveElement"
       v-bind="{ ...$attrs, ...props }"
       :checked="checked"
-      @update:checked="context?.changeModelValue(value)"
+      :required="required"
+      @update:checked="rootContext.changeModelValue(value)"
       @keydown.enter.prevent
       @focus="handleFocus"
     >
diff --git a/packages/radix-vue/src/RadioGroup/RadioGroupRoot.vue b/packages/radix-vue/src/RadioGroup/RadioGroupRoot.vue
index a7a1bc3b6..ad5e92cbc 100644
--- a/packages/radix-vue/src/RadioGroup/RadioGroupRoot.vue
+++ b/packages/radix-vue/src/RadioGroup/RadioGroupRoot.vue
@@ -5,8 +5,8 @@ import {
 } from '@/Primitive'
 import type { DataOrientation, Direction } from '@/shared/types'
 import { useVModel } from '@vueuse/core'
-import type { InjectionKey, Ref } from 'vue'
-import { useDirection } from '@/shared'
+import type { Ref } from 'vue'
+import { createContext, useDirection } from '@/shared'
 
 export interface RadioGroupRootProps extends PrimitiveProps {
   modelValue?: string
@@ -22,7 +22,7 @@ export type RadioGroupRootEmits = {
   'update:modelValue': [payload: string]
 }
 
-interface RadioGroupProvideValue {
+interface RadioGroupRootContext {
   modelValue?: Readonly<Ref<string | undefined>>
   changeModelValue: (value?: string) => void
   disabled: Ref<boolean>
@@ -32,12 +32,12 @@ interface RadioGroupProvideValue {
   required: Ref<boolean>
 }
 
-export const RADIO_GROUP_INJECTION_KEY
-  = Symbol() as InjectionKey<RadioGroupProvideValue>
+export const [injectRadioGroupRootContext, provideRadioGroupRootContext]
+  = createContext<RadioGroupRootContext>('RadioGroupRoot')
 </script>
 
 <script setup lang="ts">
-import { provide, toRefs } from 'vue'
+import { toRefs } from 'vue'
 import { RovingFocusGroup } from '@/RovingFocus'
 
 const props = withDefaults(defineProps<RadioGroupRootProps>(), {
@@ -56,10 +56,9 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 
 const { disabled, loop, orientation, name, required, dir: propDir } = toRefs(props)
 const dir = useDirection(propDir)
-
-provide<RadioGroupProvideValue>(RADIO_GROUP_INJECTION_KEY, {
+provideRadioGroupRootContext({
   modelValue,
-  changeModelValue: (value?: string) => {
+  changeModelValue: (value) => {
     modelValue.value = value
   },
   disabled,
diff --git a/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue b/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue
index 051cc2ced..f982463c7 100644
--- a/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue
+++ b/packages/radix-vue/src/RovingFocus/RovingFocusGroup.vue
@@ -1,4 +1,6 @@
 <script lang="ts">
+import { createContext, useCollection, useDirection } from '@/shared'
+
 export interface RovingFocusGroupProps extends PrimitiveProps {
   /**
    * The orientation of the group.
@@ -23,7 +25,7 @@ export type RovingFocusGroupEmits = {
   'update:currentTabStopId': [value: string | null | undefined]
 }
 
-interface RovingContextValue {
+interface RovingContext {
   orientation: Ref<Orientation | undefined>
   dir: Ref<Direction>
   loop: Ref<boolean>
@@ -34,12 +36,12 @@ interface RovingContextValue {
   onFocusableItemRemove(): void
 }
 
-export const ROVING_FOCUS_INJECTION_KEY
-  = Symbol() as InjectionKey<RovingContextValue>
+export const [injectRovingFocusGroupContext, provideRovingFocusGroupContext]
+  = createContext<RovingContext>('RovingFocusGroup')
 </script>
 
 <script setup lang="ts">
-import { type InjectionKey, type Ref, provide, ref, toRefs } from 'vue'
+import { type Ref, ref, toRefs } from 'vue'
 import { useVModel } from '@vueuse/core'
 import {
   type Direction,
@@ -48,7 +50,6 @@ import {
   type Orientation,
 } from './utils'
 import { focusFirst } from './utils'
-import { useCollection, useDirection } from '@/shared'
 import {
   Primitive,
   type PrimitiveProps,
@@ -107,7 +108,7 @@ function handleFocus(event: FocusEvent) {
   isClickFocus.value = false
 }
 
-provide(ROVING_FOCUS_INJECTION_KEY, {
+provideRovingFocusGroupContext({
   loop,
   dir,
   orientation,
diff --git a/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue b/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue
index f605c1908..bcd1d2968 100644
--- a/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue
+++ b/packages/radix-vue/src/RovingFocus/RovingFocusItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, inject, nextTick, onMounted, onUnmounted } from 'vue'
-import { ROVING_FOCUS_INJECTION_KEY } from './RovingFocusGroup.vue'
+import { computed, nextTick, onMounted, onUnmounted } from 'vue'
+import { injectRovingFocusGroupContext } from './RovingFocusGroup.vue'
 import { focusFirst, getFocusIntent, wrapArray } from './utils'
 import { useCollection, useId } from '@/shared'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
@@ -17,30 +17,28 @@ const props = withDefaults(defineProps<RovingFocusItemProps>(), {
   as: 'span',
 })
 
-const context = inject(ROVING_FOCUS_INJECTION_KEY)
+const context = injectRovingFocusGroupContext()
 const autoId = useId()
 const id = computed(() => props.tabStopId || autoId)
 const isCurrentTabStop = computed(
-  () => context?.currentTabStopId.value === id.value,
+  () => context.currentTabStopId.value === id.value,
 )
 
 const { injectCollection } = useCollection('rovingFocus')
 const collections = injectCollection()
 
-const { onFocusableItemAdd, onFocusableItemRemove } = context!
-
 onMounted(() => {
   if (props.focusable)
-    onFocusableItemAdd()
+    context.onFocusableItemAdd()
 })
 onUnmounted(() => {
   if (props.focusable)
-    onFocusableItemRemove()
+    context.onFocusableItemRemove()
 })
 
 function handleKeydown(event: KeyboardEvent) {
   if (event.key === 'Tab' && event.shiftKey) {
-    context?.onItemShiftTab()
+    context.onItemShiftTab()
     return
   }
 
@@ -49,8 +47,8 @@ function handleKeydown(event: KeyboardEvent) {
 
   const focusIntent = getFocusIntent(
     event,
-    context?.orientation.value,
-    context?.dir.value,
+    context.orientation.value,
+    context.dir.value,
   )
 
   if (focusIntent !== undefined) {
@@ -67,7 +65,7 @@ function handleKeydown(event: KeyboardEvent) {
         event.currentTarget as HTMLElement,
       )
 
-      candidateNodes = context?.loop.value
+      candidateNodes = context.loop.value
         ? wrapArray(candidateNodes, currentIndex + 1)
         : candidateNodes.slice(currentIndex + 1)
     }
@@ -81,7 +79,7 @@ function handleKeydown(event: KeyboardEvent) {
   <Primitive
     data-radix-vue-collection-item
     :tabindex="isCurrentTabStop ? 0 : -1"
-    :data-orientation="context?.orientation.value"
+    :data-orientation="context.orientation.value"
     :data-active="active"
     :data-disabled="!focusable || undefined"
     :as="as"
@@ -92,10 +90,10 @@ function handleKeydown(event: KeyboardEvent) {
         // 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);
+        else context.onItemFocus(id);
       }
     "
-    @focus="context?.onItemFocus(id)"
+    @focus="context.onItemFocus(id)"
     @keydown="handleKeydown"
   >
     <slot />
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaCorner.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaCorner.vue
index ad28cf30d..db342e6eb 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaCorner.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaCorner.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { computed, inject } from 'vue'
-import { SCROLL_AREA_INJECTION_KEY } from './ScrollAreaRoot.vue'
+import { computed } from 'vue'
+import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import ScrollAreaCornerImpl from './ScrollAreaCornerImpl.vue'
 import { type PrimitiveProps } from '@/Primitive'
 
 export interface ScrollAreaCornerProps extends PrimitiveProps {}
 const props = defineProps<ScrollAreaCornerProps>()
 
-const context = inject(SCROLL_AREA_INJECTION_KEY)
+const rootContext = injectScrollAreaRootContext()
 
 const hasBothScrollbarsVisible = computed(
-  () => !!context?.scrollbarX.value && !!context.scrollbarY.value,
+  () => !!rootContext.scrollbarX.value && !!rootContext.scrollbarY.value,
 )
 const hasCorner = computed(
-  () => context?.type.value !== 'scroll' && hasBothScrollbarsVisible.value,
+  () => rootContext.type.value !== 'scroll' && hasBothScrollbarsVisible.value,
 )
 </script>
 
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaCornerImpl.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaCornerImpl.vue
index 0b16e143a..2bdec16d6 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaCornerImpl.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaCornerImpl.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { computed, inject, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useResizeObserver } from '@vueuse/core'
-import { SCROLL_AREA_INJECTION_KEY } from './ScrollAreaRoot.vue'
+import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import { Primitive } from '@/Primitive'
 
-const context = inject(SCROLL_AREA_INJECTION_KEY)
+const rootContext = injectScrollAreaRootContext()
 
 const width = ref(0)
 const height = ref(0)
@@ -12,22 +12,22 @@ const height = ref(0)
 const hasSize = computed(() => !!width.value && !!height.value)
 
 function setCornerHeight() {
-  const offsetHeight = context?.scrollbarX.value?.offsetHeight || 0
-  context?.onCornerHeightChange(offsetHeight)
+  const offsetHeight = rootContext.scrollbarX.value?.offsetHeight || 0
+  rootContext.onCornerHeightChange(offsetHeight)
   height.value = offsetHeight
 }
 function setCornerWidth() {
-  const offsetWidth = context?.scrollbarY.value?.offsetWidth || 0
-  context?.onCornerWidthChange(offsetWidth)
+  const offsetWidth = rootContext.scrollbarY.value?.offsetWidth || 0
+  rootContext.onCornerWidthChange(offsetWidth)
   width.value = offsetWidth
 }
 
-useResizeObserver(context?.scrollbarX.value, setCornerHeight)
-useResizeObserver(context?.scrollbarY.value, setCornerWidth)
+useResizeObserver(rootContext.scrollbarX.value, setCornerHeight)
+useResizeObserver(rootContext.scrollbarY.value, setCornerWidth)
 
 // because we are not remounting the component, useResizeObserver doesn't trigger, thus using watcher here
-watch(() => context?.scrollbarX.value, setCornerHeight)
-watch(() => context?.scrollbarY.value, setCornerWidth)
+watch(() => rootContext.scrollbarX.value, setCornerHeight)
+watch(() => rootContext.scrollbarY.value, setCornerWidth)
 </script>
 
 <template>
@@ -37,8 +37,8 @@ watch(() => context?.scrollbarY.value, setCornerWidth)
       width: `${width}px`,
       height: `${height}px`,
       position: 'absolute',
-      right: context!.dir.value === 'ltr' ? 0 : undefined,
-      left: context!.dir.value === 'rtl' ? 0 : undefined,
+      right: rootContext.dir.value === 'ltr' ? 0 : undefined,
+      left: rootContext.dir.value === 'rtl' ? 0 : undefined,
       bottom: 0,
     }"
     v-bind="$parent?.$props"
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaRoot.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaRoot.vue
index e0b42d9f2..8638f07f9 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaRoot.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaRoot.vue
@@ -1,9 +1,9 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
 import type { Direction, ScrollType } from './types'
-import { useDirection } from '@/shared'
+import { createContext, useDirection } from '@/shared'
 
-export interface ScrollAreaProvideValue {
+export interface ScrollAreaRootContext {
   type: Ref<ScrollType>
   dir: Ref<Direction>
   scrollHideDelay: Ref<number>
@@ -24,18 +24,18 @@ export interface ScrollAreaProvideValue {
   onCornerHeightChange(height: number): void
 }
 
+export const [injectScrollAreaRootContext, provideScrollAreaRootContext]
+  = createContext<ScrollAreaRootContext>('ScrollAreaRoot')
+
 export interface ScrollAreaRootProps extends PrimitiveProps {
   type?: ScrollType
   dir?: Direction
   scrollHideDelay?: number
 }
-
-export const SCROLL_AREA_INJECTION_KEY
-  = Symbol() as InjectionKey<ScrollAreaProvideValue>
 </script>
 
 <script setup lang="ts">
-import { provide, ref, toRefs } from 'vue'
+import { ref, toRefs } from 'vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -58,56 +58,43 @@ const scrollbarY = ref<HTMLElement>()
 const scrollbarXEnabled = ref(false)
 const scrollbarYEnabled = ref(false)
 
-function onViewportChange(el: HTMLElement) {
-  viewport.value = el
-}
-function onContentChange(el: HTMLElement) {
-  content.value = el
-}
-
-function onScrollbarXChange(scrollbar: HTMLElement) {
-  scrollbarX.value = scrollbar
-}
-function onScrollbarYChange(scrollbar: HTMLElement) {
-  scrollbarY.value = scrollbar
-}
-
-function onScrollbarXEnabledChange(rendered: boolean) {
-  scrollbarXEnabled.value = rendered
-}
-function onScrollbarYEnabledChange(rendered: boolean) {
-  scrollbarYEnabled.value = rendered
-}
-
-function onCornerWidthChange(width: number) {
-  cornerWidth.value = width
-}
-function onCornerHeightChange(height: number) {
-  cornerHeight.value = height
-}
-
 const { type, dir: propDir, scrollHideDelay } = toRefs(props)
 const dir = useDirection(propDir)
-
-provide<ScrollAreaProvideValue>(SCROLL_AREA_INJECTION_KEY, {
+provideScrollAreaRootContext({
   type,
   dir,
   scrollHideDelay,
   scrollArea,
   viewport,
-  onViewportChange,
+  onViewportChange: (el) => {
+    viewport.value = el || undefined
+  },
   content,
-  onContentChange,
+  onContentChange: (el) => {
+    content.value = el
+  },
   scrollbarX,
   scrollbarXEnabled,
   scrollbarY,
   scrollbarYEnabled,
-  onScrollbarXChange,
-  onScrollbarYChange,
-  onScrollbarXEnabledChange,
-  onScrollbarYEnabledChange,
-  onCornerWidthChange,
-  onCornerHeightChange,
+  onScrollbarXChange: (scrollbar) => {
+    scrollbarX.value = scrollbar || undefined
+  },
+  onScrollbarYChange: (scrollbar) => {
+    scrollbarY.value = scrollbar || undefined
+  },
+  onScrollbarXEnabledChange: (rendered) => {
+    scrollbarXEnabled.value = rendered
+  },
+  onScrollbarYEnabledChange: (rendered) => {
+    scrollbarYEnabled.value = rendered
+  },
+  onCornerWidthChange: (width) => {
+    cornerWidth.value = width
+  },
+  onCornerHeightChange: (height) => {
+    cornerHeight.value = height
+  },
 })
 </script>
 
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbar.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbar.vue
index b6aac62bc..db49fb921 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbar.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbar.vue
@@ -1,21 +1,19 @@
 <script lang="ts">
 import {
-  type InjectionKey,
   type Ref,
   computed,
-  inject,
   onUnmounted,
-  provide,
   toRefs,
   watch,
 } from 'vue'
+import { createContext } from '@/shared'
 
 export interface ScrollAreaScrollbarProps extends PrimitiveProps {
   orientation?: 'vertical' | 'horizontal'
   forceMount?: boolean
 }
 
-export interface ScrollAreaScollbarProvideValue {
+export interface ScrollAreaScollbarContext {
   as: Ref<AsTag>
   orientation: Ref<'vertical' | 'horizontal'>
   forceMount?: Ref<boolean>
@@ -23,8 +21,8 @@ export interface ScrollAreaScollbarProvideValue {
   asChild: Ref<boolean>
 }
 
-export const SCROLL_AREA_SCROLLBAR_INJECTION_KEY
-  = Symbol() as InjectionKey<ScrollAreaScollbarProvideValue>
+export const [injectScrollAreaScrollbarContext, provideScrollAreaScrollbarContext]
+  = createContext<ScrollAreaScollbarContext>('ScrollAreaScrollbar')
 
 export default {
   inheritAttrs: false,
@@ -32,7 +30,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { SCROLL_AREA_INJECTION_KEY } from './ScrollAreaRoot.vue'
+import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import ScrollAreaScrollbarHover from './ScrollAreaScrollbarHover.vue'
 import ScrollAreaScrollbarScroll from './ScrollAreaScrollbarScroll.vue'
 import ScrollAreaScrollbarAuto from './ScrollAreaScrollbarAuto.vue'
@@ -45,7 +43,7 @@ const props = withDefaults(defineProps<ScrollAreaScrollbarProps>(), {
   as: 'div',
 })
 
-const injectedValue = inject(SCROLL_AREA_INJECTION_KEY)
+const rootContext = injectScrollAreaRootContext()
 
 const isHorizontal = computed(() => props.orientation === 'horizontal')
 
@@ -53,19 +51,19 @@ watch(
   isHorizontal,
   () => {
     if (isHorizontal.value)
-      injectedValue?.onScrollbarXEnabledChange(true)
-    else injectedValue?.onScrollbarYEnabledChange(true)
+      rootContext.onScrollbarXEnabledChange(true)
+    else rootContext.onScrollbarYEnabledChange(true)
   },
   { immediate: true },
 )
 
 onUnmounted(() => {
-  injectedValue?.onScrollbarXEnabledChange(false)
-  injectedValue?.onScrollbarYEnabledChange(false)
+  rootContext.onScrollbarXEnabledChange(false)
+  rootContext.onScrollbarYEnabledChange(false)
 })
 
 const { orientation, forceMount, asChild, as } = toRefs(props)
-provide<ScrollAreaScollbarProvideValue>(SCROLL_AREA_SCROLLBAR_INJECTION_KEY, {
+provideScrollAreaScrollbarContext({
   orientation,
   forceMount,
   isHorizontal,
@@ -76,28 +74,28 @@ provide<ScrollAreaScollbarProvideValue>(SCROLL_AREA_SCROLLBAR_INJECTION_KEY, {
 
 <template>
   <ScrollAreaScrollbarHover
-    v-if="injectedValue?.type.value === 'hover'"
+    v-if="rootContext.type.value === 'hover'"
     v-bind="$attrs"
     :force-mount="forceMount"
   >
     <slot />
   </ScrollAreaScrollbarHover>
   <ScrollAreaScrollbarScroll
-    v-else-if="injectedValue?.type.value === 'scroll'"
+    v-else-if="rootContext.type.value === 'scroll'"
     v-bind="$attrs"
     :force-mount="forceMount"
   >
     <slot />
   </ScrollAreaScrollbarScroll>
   <ScrollAreaScrollbarAuto
-    v-else-if="injectedValue?.type.value === 'auto'"
+    v-else-if="rootContext.type.value === 'auto'"
     v-bind="$attrs"
     :force-mount="forceMount"
   >
     <slot />
   </ScrollAreaScrollbarAuto>
   <ScrollAreaScrollbarVisible
-    v-else-if="injectedValue?.type.value === 'always'"
+    v-else-if="rootContext.type.value === 'always'"
     v-bind="$attrs"
     data-state="visible"
     :force-mount="forceMount"
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarAuto.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarAuto.vue
index e155e14de..9b3199f5d 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarAuto.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarAuto.vue
@@ -1,25 +1,25 @@
 <script setup lang="ts">
-import { inject, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useDebounceFn, useResizeObserver } from '@vueuse/core'
-import { SCROLL_AREA_INJECTION_KEY } from './ScrollAreaRoot.vue'
-import { SCROLL_AREA_SCROLLBAR_INJECTION_KEY } from './ScrollAreaScrollbar.vue'
+import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
+import { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'
 import ScrollAreaScrollbarVisible from './ScrollAreaScrollbarVisible.vue'
 
-const rootContext = inject(SCROLL_AREA_INJECTION_KEY)
-const scrollbarContext = inject(SCROLL_AREA_SCROLLBAR_INJECTION_KEY)
+const rootContext = injectScrollAreaRootContext()
+const scrollbarContext = injectScrollAreaScrollbarContext()
 
 const visible = ref(false)
 
 const handleResize = useDebounceFn(() => {
-  if (rootContext?.viewport.value) {
+  if (rootContext.viewport.value) {
     const isOverflowX
-      = rootContext?.viewport.value.offsetWidth
-      < rootContext?.viewport.value.scrollWidth
+      = rootContext.viewport.value.offsetWidth
+      < rootContext.viewport.value.scrollWidth
     const isOverflowY
-      = rootContext?.viewport.value.offsetHeight
-      < rootContext?.viewport.value.scrollHeight
+      = rootContext.viewport.value.offsetHeight
+      < rootContext.viewport.value.scrollHeight
 
-    visible.value = scrollbarContext?.isHorizontal.value
+    visible.value = scrollbarContext.isHorizontal.value
       ? isOverflowX
       : isOverflowY
   }
@@ -27,8 +27,8 @@ const handleResize = useDebounceFn(() => {
 
 onMounted(() => handleResize())
 
-useResizeObserver(rootContext?.viewport, handleResize)
-useResizeObserver(rootContext?.content, handleResize)
+useResizeObserver(rootContext.viewport, handleResize)
+useResizeObserver(rootContext.content, handleResize)
 </script>
 
 <template>
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarHover.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarHover.vue
index a683f9ea2..5d46b5c20 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarHover.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarHover.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { inject, onMounted, onUnmounted, ref } from 'vue'
-import { SCROLL_AREA_INJECTION_KEY } from './ScrollAreaRoot.vue'
+import { onMounted, onUnmounted, ref } from 'vue'
+import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import ScrollAreaScrollbarAuto from './ScrollAreaScrollbarAuto.vue'
 
-const injectedValue = inject(SCROLL_AREA_INJECTION_KEY)
+const rootContext = injectScrollAreaRootContext()
 
 let timeout: ReturnType<typeof setTimeout> | undefined | number
 const visible = ref(false)
@@ -15,11 +15,11 @@ function handlePointerEnter() {
 function handlePointerLeave() {
   timeout = window.setTimeout(() => {
     visible.value = false
-  }, injectedValue?.scrollHideDelay.value)
+  }, rootContext.scrollHideDelay.value)
 }
 
 onMounted(() => {
-  const scrollArea = injectedValue?.scrollArea.value
+  const scrollArea = rootContext.scrollArea.value
 
   if (scrollArea) {
     scrollArea.addEventListener('pointerenter', handlePointerEnter)
@@ -28,7 +28,7 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  const scrollArea = injectedValue?.scrollArea.value
+  const scrollArea = rootContext.scrollArea.value
   if (scrollArea) {
     window.clearTimeout(timeout)
     scrollArea.removeEventListener('pointerenter', handlePointerEnter)
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarImpl.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarImpl.vue
index e979d2bfa..d0f2bbcf6 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarImpl.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarImpl.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { inject, onMounted, onUnmounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 import { useResizeObserver } from '@vueuse/core'
-import { SCROLL_AREA_INJECTION_KEY } from './ScrollAreaRoot.vue'
-import { SCROLL_AREA_SCROLLBAR_VISIBLE_INJECTION_KEY } from './ScrollAreaScrollbarVisible.vue'
-import { SCROLL_AREA_SCROLLBAR_INJECTION_KEY } from './ScrollAreaScrollbar.vue'
+import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
+import { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'
+import { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'
 import { toInt } from './utils'
 import { Primitive, usePrimitiveElement } from '@/Primitive'
 
@@ -13,12 +13,9 @@ const emit = defineEmits<{
   'onWheelScroll': [payload: { x: number; y: number }]
   'onThumbPointerDown': [payload: { x: number; y: number }]
 }>()
-const rootContext = inject(SCROLL_AREA_INJECTION_KEY)
-const scrollbarVisibleContext = inject(
-  SCROLL_AREA_SCROLLBAR_VISIBLE_INJECTION_KEY,
-)
-
-const scrollbarContext = inject(SCROLL_AREA_SCROLLBAR_INJECTION_KEY)
+const rootContext = injectScrollAreaRootContext()
+const scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext()
+const scrollbarContext = injectScrollAreaScrollbarContext()
 
 export interface ScrollAreaScrollbarImplProps {
   isHorizontal: boolean
@@ -47,7 +44,7 @@ function handlePointerDown(event: PointerEvent) {
     // so we remove text selection manually when scrolling
     prevWebkitUserSelectRef.value = document.body.style.webkitUserSelect
     document.body.style.webkitUserSelect = 'none'
-    if (rootContext?.viewport)
+    if (rootContext.viewport)
       rootContext.viewport.value!.style.scrollBehavior = 'auto'
 
     handleDragScroll(event)
@@ -64,15 +61,13 @@ function handlePointerUp(event: PointerEvent) {
     element.releasePointerCapture(event.pointerId)
 
   document.body.style.webkitUserSelect = prevWebkitUserSelectRef.value
-  if (rootContext?.viewport)
+  if (rootContext.viewport)
     rootContext.viewport.value!.style.scrollBehavior = ''
 
   rectRef.value = undefined
 }
 
 function handleWheel(event: WheelEvent) {
-  if (!scrollbarVisibleContext)
-    return
   const element = event.target as HTMLElement
   const isScrollbarWheel = scrollbar.value?.contains(element)
   const maxScrollPos
@@ -93,20 +88,20 @@ function handleSizeChange() {
   if (!scrollbar.value)
     return
   if (props.isHorizontal) {
-    scrollbarVisibleContext?.handleSizeChange({
-      content: rootContext?.viewport.value?.scrollWidth ?? 0,
-      viewport: rootContext?.viewport.value?.offsetWidth ?? 0,
+    scrollbarVisibleContext.handleSizeChange({
+      content: rootContext.viewport.value?.scrollWidth ?? 0,
+      viewport: rootContext.viewport.value?.offsetWidth ?? 0,
       scrollbar: {
-        size: scrollbar.value?.clientWidth ?? 0,
-        paddingStart: toInt(getComputedStyle(scrollbar.value!).paddingLeft),
-        paddingEnd: toInt(getComputedStyle(scrollbar.value!).paddingRight),
+        size: scrollbar.value.clientWidth ?? 0,
+        paddingStart: toInt(getComputedStyle(scrollbar.value).paddingLeft),
+        paddingEnd: toInt(getComputedStyle(scrollbar.value).paddingRight),
       },
     })
   }
   else {
-    scrollbarVisibleContext?.handleSizeChange({
-      content: rootContext?.viewport.value?.scrollHeight ?? 0,
-      viewport: rootContext?.viewport.value?.offsetHeight ?? 0,
+    scrollbarVisibleContext.handleSizeChange({
+      content: rootContext.viewport.value?.scrollHeight ?? 0,
+      viewport: rootContext.viewport.value?.offsetHeight ?? 0,
       scrollbar: {
         size: scrollbar.value?.clientHeight ?? 0,
         paddingStart: toInt(getComputedStyle(scrollbar.value!).paddingLeft),
@@ -117,7 +112,7 @@ function handleSizeChange() {
 }
 
 useResizeObserver(scrollbar, handleSizeChange)
-useResizeObserver(rootContext?.content, handleSizeChange)
+useResizeObserver(rootContext.content, handleSizeChange)
 </script>
 
 <template>
@@ -125,8 +120,8 @@ useResizeObserver(rootContext?.content, handleSizeChange)
     ref="primitiveElement"
     style="position: absolute"
     data-scrollbarimpl
-    :as="scrollbarContext?.as.value"
-    :as-child="scrollbarContext?.asChild.value"
+    :as="scrollbarContext.as.value"
+    :as-child="scrollbarContext.asChild.value"
     @pointerdown="handlePointerDown"
     @pointermove="handlePointerMove"
     @pointerup="handlePointerUp"
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarScroll.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarScroll.vue
index 6e034dfc6..815ac8da8 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarScroll.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarScroll.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { inject, watchEffect } from 'vue'
+import { watchEffect } from 'vue'
 import { useDebounceFn } from '@vueuse/core'
 import { useStateMachine } from '../shared/useStateMachine'
-import { SCROLL_AREA_INJECTION_KEY } from './ScrollAreaRoot.vue'
-import { SCROLL_AREA_SCROLLBAR_INJECTION_KEY } from './ScrollAreaScrollbar.vue'
+import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
+import { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'
 import ScrollAreaScrollbarVisible from './ScrollAreaScrollbarVisible.vue'
 
-const rootContext = inject(SCROLL_AREA_INJECTION_KEY)
-const scrollbarContext = inject(SCROLL_AREA_SCROLLBAR_INJECTION_KEY)
+const rootContext = injectScrollAreaRootContext()
+const scrollbarContext = injectScrollAreaScrollbarContext()
 
 const { state, dispatch } = useStateMachine('hidden', {
   hidden: {
@@ -32,7 +32,7 @@ watchEffect(() => {
   if (state.value === 'idle') {
     window.setTimeout(
       () => dispatch('HIDE'),
-      rootContext?.scrollHideDelay.value,
+      rootContext.scrollHideDelay.value,
     )
   }
 })
@@ -40,8 +40,8 @@ watchEffect(() => {
 const debounceScrollEnd = useDebounceFn(() => dispatch('SCROLL_END'), 100)
 
 watchEffect(() => {
-  const viewport = rootContext?.viewport.value
-  const scrollDirection = scrollbarContext?.isHorizontal.value
+  const viewport = rootContext.viewport.value
+  const scrollDirection = scrollbarContext.isHorizontal.value
     ? 'scrollLeft'
     : 'scrollTop'
 
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarVisible.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarVisible.vue
index 28ce9a1eb..aabc7e81c 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarVisible.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarVisible.vue
@@ -1,5 +1,7 @@
 <script lang="ts">
-export interface ScrollAreaScrollbarVisibleProvideValue {
+import { createContext } from '@/shared'
+
+export interface ScrollAreaScrollbarVisibleContext {
   sizes: Ref<Sizes>
   hasThumb: Ref<boolean>
   handleWheelScroll: (event: WheelEvent, payload: number) => void
@@ -14,22 +16,19 @@ export interface ScrollAreaScrollbarVisibleProvideValue {
   onThumbChange: (element: HTMLElement) => void
 }
 
-export const SCROLL_AREA_SCROLLBAR_VISIBLE_INJECTION_KEY
-  = Symbol() as InjectionKey<ScrollAreaScrollbarVisibleProvideValue>
+export const [injectScrollAreaScrollbarVisibleContext, provideScrollAreaScrollbarVisibleContext]
+  = createContext<ScrollAreaScrollbarVisibleContext>('ScrollAreaScrollbarVisible')
 </script>
 
 <script setup lang="ts">
 import {
-  type InjectionKey,
   type Ref,
   computed,
-  inject,
-  provide,
   ref,
 } from 'vue'
 import type { Direction, Sizes } from './types'
-import { SCROLL_AREA_INJECTION_KEY } from './ScrollAreaRoot.vue'
-import { SCROLL_AREA_SCROLLBAR_INJECTION_KEY } from './ScrollAreaScrollbar.vue'
+import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
+import { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'
 import ScrollAreaScrollbarX from './ScrollAreaScrollbarX.vue'
 import ScrollAreaScrollbarY from './ScrollAreaScrollbarY.vue'
 import {
@@ -39,8 +38,8 @@ import {
   isScrollingWithinScrollbarBounds,
 } from './utils'
 
-const rootContext = inject(SCROLL_AREA_INJECTION_KEY)
-const scrollbarContext = inject(SCROLL_AREA_SCROLLBAR_INJECTION_KEY)
+const rootContext = injectScrollAreaRootContext()
+const scrollbarContext = injectScrollAreaScrollbarContext()
 
 const sizes = ref<Sizes>({
   content: 0,
@@ -58,17 +57,17 @@ const pointerOffset = ref(0)
 
 function handleWheelScroll(event: WheelEvent, payload: number) {
   if (isShowingScrollbarX.value) {
-    const scrollPos = rootContext!.viewport.value!.scrollLeft + event.deltaY
+    const scrollPos = rootContext.viewport.value!.scrollLeft + event.deltaY
 
-    rootContext!.viewport.value!.scrollLeft = scrollPos
+    rootContext.viewport.value!.scrollLeft = scrollPos
     // prevent window scroll when wheeling on scrollbar
     if (isScrollingWithinScrollbarBounds(scrollPos, payload))
       event.preventDefault()
   }
   else {
-    const scrollPos = rootContext!.viewport.value!.scrollTop + event.deltaY
+    const scrollPos = rootContext.viewport.value!.scrollTop + event.deltaY
 
-    rootContext!.viewport.value!.scrollTop = scrollPos
+    rootContext.viewport.value!.scrollTop = scrollPos
     // prevent window scroll when wheeling on scrollbar
     if (isScrollingWithinScrollbarBounds(scrollPos, payload))
       event.preventDefault()
@@ -98,36 +97,36 @@ function getScrollPosition(pointerPos: number, dir?: Direction) {
 }
 
 const isShowingScrollbarX = computed(
-  () => scrollbarContext?.isHorizontal.value,
+  () => scrollbarContext.isHorizontal.value,
 )
 
 function onDragScroll(payload: number) {
   if (isShowingScrollbarX.value) {
-    rootContext!.viewport.value!.scrollLeft = getScrollPosition(
+    rootContext.viewport.value!.scrollLeft = getScrollPosition(
       payload,
-      rootContext!.dir?.value,
+      rootContext.dir.value,
     )
   }
   else {
-    rootContext!.viewport.value!.scrollTop = getScrollPosition(payload)
+    rootContext.viewport.value!.scrollTop = getScrollPosition(payload)
   }
 }
 
 function onThumbPositionChange() {
   if (isShowingScrollbarX.value) {
-    if (rootContext?.viewport.value && thumbRef.value) {
-      const scrollPos = rootContext?.viewport.value.scrollLeft
+    if (rootContext.viewport.value && thumbRef.value) {
+      const scrollPos = rootContext.viewport.value.scrollLeft
       const offset = getThumbOffsetFromScroll(
         scrollPos,
         sizes.value,
-        rootContext?.dir?.value,
+        rootContext.dir.value,
       )
       thumbRef.value.style.transform = `translate3d(${offset}px, 0, 0)`
     }
   }
   else {
-    if (rootContext?.viewport.value && thumbRef.value) {
-      const scrollPos = rootContext?.viewport.value.scrollTop
+    if (rootContext.viewport.value && thumbRef.value) {
+      const scrollPos = rootContext.viewport.value.scrollTop
       const offset = getThumbOffsetFromScroll(scrollPos, sizes.value)
       thumbRef.value.style.transform = `translate3d(0, ${offset}px, 0)`
     }
@@ -137,20 +136,17 @@ function onThumbChange(element: HTMLElement) {
   thumbRef.value = element
 }
 
-provide<ScrollAreaScrollbarVisibleProvideValue>(
-  SCROLL_AREA_SCROLLBAR_VISIBLE_INJECTION_KEY,
-  {
-    sizes,
-    hasThumb,
-    handleWheelScroll,
-    handleThumbDown,
-    handleThumbUp,
-    handleSizeChange,
-    onThumbPositionChange,
-    onThumbChange,
-    onDragScroll,
-  },
-)
+provideScrollAreaScrollbarVisibleContext({
+  sizes,
+  hasThumb,
+  handleWheelScroll,
+  handleThumbDown,
+  handleThumbUp,
+  handleSizeChange,
+  onThumbPositionChange,
+  onThumbChange,
+  onDragScroll,
+})
 </script>
 
 <template>
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarX.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarX.vue
index 953062e61..f5fd0cbe0 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarX.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarX.vue
@@ -1,25 +1,22 @@
 <script setup lang="ts">
-import { computed, inject, onMounted } from 'vue'
-import { SCROLL_AREA_SCROLLBAR_VISIBLE_INJECTION_KEY } from './ScrollAreaScrollbarVisible.vue'
-import { SCROLL_AREA_INJECTION_KEY } from './ScrollAreaRoot.vue'
+import { computed, onMounted } from 'vue'
+import { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'
+import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import ScrollAreaScrollbarImpl from './ScrollAreaScrollbarImpl.vue'
 import { getThumbSize } from './utils'
 import { usePrimitiveElement } from '@/Primitive'
 
-const rootContext = inject(SCROLL_AREA_INJECTION_KEY)
-
-const scrollbarVisibleContext = inject(
-  SCROLL_AREA_SCROLLBAR_VISIBLE_INJECTION_KEY,
-)
+const rootContext = injectScrollAreaRootContext()
+const scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext()
 
 const { primitiveElement, currentElement: scrollbarElement }
   = usePrimitiveElement()
 
 onMounted(() => {
   if (scrollbarElement.value)
-    rootContext?.onScrollbarXChange(scrollbarElement.value)
+    rootContext.onScrollbarXChange(scrollbarElement.value)
 })
-const sizes = computed(() => scrollbarVisibleContext?.sizes.value)
+const sizes = computed(() => scrollbarVisibleContext.sizes.value)
 </script>
 
 <template>
@@ -29,11 +26,11 @@ const sizes = computed(() => scrollbarVisibleContext?.sizes.value)
     data-orientation="horizontal"
     :style="{
       bottom: 0,
-      left: rootContext?.dir?.value === 'rtl' ? 'var(--radix-scroll-area-corner-width)' : 0,
-      right: rootContext?.dir?.value === 'ltr' ? 'var(--radix-scroll-area-corner-width)' : 0,
+      left: rootContext.dir.value === 'rtl' ? 'var(--radix-scroll-area-corner-width)' : 0,
+      right: rootContext.dir.value === 'ltr' ? 'var(--radix-scroll-area-corner-width)' : 0,
       ['--radix-scroll-area-thumb-width' as any]: sizes ? `${getThumbSize(sizes)}px` : undefined,
     }"
-    @on-drag-scroll="scrollbarVisibleContext?.onDragScroll($event.x)"
+    @on-drag-scroll="scrollbarVisibleContext.onDragScroll($event.x)"
   >
     <slot />
   </ScrollAreaScrollbarImpl>
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarY.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarY.vue
index 170310116..bc0d709dd 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarY.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarY.vue
@@ -1,26 +1,23 @@
 <script setup lang="ts">
-import { computed, inject, onMounted } from 'vue'
-import { SCROLL_AREA_SCROLLBAR_VISIBLE_INJECTION_KEY } from './ScrollAreaScrollbarVisible.vue'
-import { SCROLL_AREA_INJECTION_KEY } from './ScrollAreaRoot.vue'
+import { computed, onMounted } from 'vue'
+import { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'
+import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import ScrollAreaScrollbarImpl from './ScrollAreaScrollbarImpl.vue'
 import { getThumbSize } from './utils'
 import { usePrimitiveElement } from '@/Primitive'
 
-const rootContext = inject(SCROLL_AREA_INJECTION_KEY)
-
-const scrollbarContextVisible = inject(
-  SCROLL_AREA_SCROLLBAR_VISIBLE_INJECTION_KEY,
-)
+const rootContext = injectScrollAreaRootContext()
+const scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext()
 
 const { primitiveElement, currentElement: scrollbarElement }
   = usePrimitiveElement()
 
 onMounted(() => {
   if (scrollbarElement.value)
-    rootContext?.onScrollbarYChange(scrollbarElement.value)
+    rootContext.onScrollbarYChange(scrollbarElement.value)
 })
 
-const sizes = computed(() => scrollbarContextVisible?.sizes.value)
+const sizes = computed(() => scrollbarVisibleContext.sizes.value)
 </script>
 
 <template>
@@ -30,12 +27,12 @@ const sizes = computed(() => scrollbarContextVisible?.sizes.value)
     data-orientation="vertical"
     :style="{
       top: 0,
-      right: rootContext?.dir?.value === 'ltr' ? 0 : undefined,
-      left: rootContext?.dir?.value === 'rtl' ? 0 : undefined,
+      right: rootContext.dir.value === 'ltr' ? 0 : undefined,
+      left: rootContext.dir.value === 'rtl' ? 0 : undefined,
       bottom: 'var(--radix-scroll-area-corner-height)',
       ['--radix-scroll-area-thumb-height' as any]: sizes ? `${getThumbSize(sizes)}px` : undefined,
     }"
-    @on-drag-scroll="scrollbarContextVisible?.onDragScroll($event.y)"
+    @on-drag-scroll="scrollbarVisibleContext.onDragScroll($event.y)"
   >
     <slot />
   </ScrollAreaScrollbarImpl>
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaThumb.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaThumb.vue
index 96d34113d..c7552f53b 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaThumb.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaThumb.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, inject, onUnmounted, ref } from 'vue'
+import { computed, onUnmounted, ref } from 'vue'
 import { watchOnce } from '@vueuse/core'
 import {
   Primitive,
@@ -7,50 +7,47 @@ import {
   usePrimitiveElement,
 } from '../Primitive'
 import { addUnlinkedScrollListener } from './utils'
-import { SCROLL_AREA_INJECTION_KEY } from './ScrollAreaRoot.vue'
-import { SCROLL_AREA_SCROLLBAR_VISIBLE_INJECTION_KEY } from './ScrollAreaScrollbarVisible.vue'
+import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
+import { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'
 
 export interface ScrollAreaThumbProps extends PrimitiveProps {}
 const props = defineProps<ScrollAreaThumbProps>()
 
-const rootContext = inject(SCROLL_AREA_INJECTION_KEY)
-
-const scrollbarContextVisible = inject(
-  SCROLL_AREA_SCROLLBAR_VISIBLE_INJECTION_KEY,
-)
+const rootContext = injectScrollAreaRootContext()
+const scrollbarContextVisible = injectScrollAreaScrollbarVisibleContext()
 
 function handlePointerDown(event: MouseEvent) {
   const thumb = event.target as HTMLElement
   const thumbRect = thumb.getBoundingClientRect()
   const x = event.clientX - thumbRect.left
   const y = event.clientY - thumbRect.top
-  scrollbarContextVisible?.handleThumbDown(event, { x, y })
+  scrollbarContextVisible.handleThumbDown(event, { x, y })
 }
 
 function handlePointerUp(event: MouseEvent) {
-  scrollbarContextVisible?.handleThumbUp(event)
+  scrollbarContextVisible.handleThumbUp(event)
 }
 
 const { primitiveElement, currentElement: thumbElement }
   = usePrimitiveElement()
 const removeUnlinkedScrollListenerRef = ref<() => void>()
-const viewport = computed(() => rootContext?.viewport.value)
+const viewport = computed(() => rootContext.viewport.value)
 
 function handleScroll() {
   if (!removeUnlinkedScrollListenerRef.value) {
     const listener = addUnlinkedScrollListener(
       viewport.value!,
-      scrollbarContextVisible?.onThumbPositionChange,
+      scrollbarContextVisible.onThumbPositionChange,
     )
     removeUnlinkedScrollListenerRef.value = listener
-    scrollbarContextVisible?.onThumbPositionChange()
+    scrollbarContextVisible.onThumbPositionChange()
   }
 }
 
-const sizes = computed(() => scrollbarContextVisible?.sizes.value)
+const sizes = computed(() => scrollbarContextVisible.sizes.value)
 
 watchOnce(sizes, () => {
-  scrollbarContextVisible?.onThumbChange(thumbElement.value!)
+  scrollbarContextVisible.onThumbChange(thumbElement.value!)
   if (viewport.value) {
     /**
      * We only bind to native scroll event so we know when scroll starts and ends.
@@ -59,21 +56,21 @@ watchOnce(sizes, () => {
      * when relevant to avoid scroll-linked effects. We cancel the loop when scroll ends.
      * https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects
      */
-    scrollbarContextVisible?.onThumbPositionChange()
+    scrollbarContextVisible.onThumbPositionChange()
     viewport.value.addEventListener('scroll', handleScroll)
   }
 })
 
 onUnmounted(() => {
   viewport.value!.removeEventListener('scroll', handleScroll)
-  rootContext?.viewport.value?.removeEventListener('scroll', handleScroll)
+  rootContext.viewport.value?.removeEventListener('scroll', handleScroll)
 })
 </script>
 
 <template>
   <Primitive
     ref="primitiveElement"
-    :data-state="scrollbarContextVisible?.hasThumb ? 'visible' : 'hidden'"
+    :data-state="scrollbarContextVisible.hasThumb ? 'visible' : 'hidden'"
     :style="{
       width: 'var(--radix-scroll-area-thumb-width)',
       height: 'var(--radix-scroll-area-thumb-height)',
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaViewport.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaViewport.vue
index c7b2a3767..b26b4bed9 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaViewport.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaViewport.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { inject, onMounted, ref } from 'vue'
-import { SCROLL_AREA_INJECTION_KEY } from './ScrollAreaRoot.vue'
+import { onMounted, ref } from 'vue'
+import { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -10,7 +10,7 @@ import {
 export interface ScrollAreaViewportProps extends PrimitiveProps {}
 const props = defineProps<ScrollAreaViewportProps>()
 
-const rootContext = inject(SCROLL_AREA_INJECTION_KEY)
+const rootContext = injectScrollAreaRootContext()
 
 const { primitiveElement, currentElement: contentElement }
   = usePrimitiveElement()
@@ -18,8 +18,8 @@ const { primitiveElement, currentElement: contentElement }
 const viewportElement = ref<HTMLElement>()
 
 onMounted(() => {
-  rootContext?.onViewportChange(viewportElement.value!)
-  rootContext?.onContentChange(contentElement.value!)
+  rootContext.onViewportChange(viewportElement.value!)
+  rootContext.onContentChange(contentElement.value!)
 })
 </script>
 
@@ -58,8 +58,8 @@ export default {
        * the browser from having to work out whether to render native scrollbars or not,
        * we tell it to with the intention of hiding them in CSS.
        */
-      overflowX: rootContext?.scrollbarXEnabled.value ? 'scroll' : 'hidden',
-      overflowY: rootContext?.scrollbarYEnabled.value ? 'scroll' : 'hidden',
+      overflowX: rootContext.scrollbarXEnabled.value ? 'scroll' : 'hidden',
+      overflowY: rootContext.scrollbarYEnabled.value ? 'scroll' : 'hidden',
     }"
     v-bind="$attrs"
     :tabindex="0"
diff --git a/packages/radix-vue/src/Select/SelectArrow.vue b/packages/radix-vue/src/Select/SelectArrow.vue
index c416d3da8..f91e60856 100644
--- a/packages/radix-vue/src/Select/SelectArrow.vue
+++ b/packages/radix-vue/src/Select/SelectArrow.vue
@@ -1,19 +1,18 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { SELECT_INJECTION_KEY } from './SelectRoot.vue'
-import { SELECT_CONTENT_INJECTION_KEY } from './SelectContentImpl.vue'
+import { injectSelectRootContext } from './SelectRoot.vue'
+import { injectSelectContentContext } from './SelectContentImpl.vue'
 import { PopperArrow, type PopperArrowProps } from '@/Popper'
 
 const props = defineProps<SelectArrowProps>()
-const context = inject(SELECT_INJECTION_KEY)
-const contentContext = inject(SELECT_CONTENT_INJECTION_KEY)
+const rootContext = injectSelectRootContext()
+const contentContext = injectSelectContentContext()
 
 export interface SelectArrowProps extends PopperArrowProps {}
 </script>
 
 <template>
   <PopperArrow
-    v-if="context?.open.value && contentContext?.position === 'popper'"
+    v-if="rootContext.open.value && contentContext.position === 'popper'"
     v-bind="props"
   >
     <slot />
diff --git a/packages/radix-vue/src/Select/SelectContent.vue b/packages/radix-vue/src/Select/SelectContent.vue
index 7ce4c11b7..285e7d352 100644
--- a/packages/radix-vue/src/Select/SelectContent.vue
+++ b/packages/radix-vue/src/Select/SelectContent.vue
@@ -5,12 +5,12 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { inject, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import SelectContentImpl, {
   type SelectContentImplEmits,
   type SelectContentImplProps,
 } from './SelectContentImpl.vue'
-import { SELECT_INJECTION_KEY } from './SelectRoot.vue'
+import { injectSelectRootContext } from './SelectRoot.vue'
 import { Presence } from '@/Presence'
 import { useForwardPropsEmits } from '@/shared'
 import SelectProvider from './SelectProvider.vue'
@@ -25,7 +25,7 @@ const props = withDefaults(defineProps<SelectContentProps>(), {
 const emits = defineEmits<SelectContentEmits>()
 const forwarded = useForwardPropsEmits(props, emits)
 
-const context = inject(SELECT_INJECTION_KEY)
+const rootContext = injectSelectRootContext()
 
 const fragment = ref<DocumentFragment>()
 onMounted(() => {
@@ -36,14 +36,14 @@ const presenceRef = ref<InstanceType<typeof Presence>>()
 </script>
 
 <template>
-  <Presence ref="presenceRef" :present="context!.open.value">
+  <Presence ref="presenceRef" :present="rootContext.open.value">
     <SelectContentImpl v-bind="{ ...forwarded, ...$attrs }">
       <slot />
     </SelectContentImpl>
   </Presence>
 
   <Teleport v-if="!presenceRef?.present && fragment" :to="fragment">
-    <SelectProvider :context="context!">
+    <SelectProvider :context="rootContext">
       <div>
         <slot />
       </div>
diff --git a/packages/radix-vue/src/Select/SelectContentImpl.vue b/packages/radix-vue/src/Select/SelectContentImpl.vue
index a37cc32ab..4362b818a 100644
--- a/packages/radix-vue/src/Select/SelectContentImpl.vue
+++ b/packages/radix-vue/src/Select/SelectContentImpl.vue
@@ -1,5 +1,14 @@
 <script lang="ts">
-interface SelectContentContextValue {
+import {
+  createContext,
+  useBodyScrollLock,
+  useCollection,
+  useFocusGuards,
+  useHideOthers,
+  useTypeahead,
+} from '@/shared'
+
+interface SelectContentContext {
   content?: Ref<HTMLElement | undefined>
   viewport?: Ref<HTMLElement | undefined>
   onViewportChange: (node: HTMLElement | undefined) => void
@@ -22,14 +31,14 @@ interface SelectContentContextValue {
   searchRef?: Ref<string>
 }
 
-export const SelectContentDefaultContextValue: SelectContentContextValue = {
+export const SelectContentDefaultContextValue: SelectContentContext = {
   onViewportChange: () => {},
   itemTextRefCallback: () => {},
   itemRefCallback: () => {},
 }
 
-export const SELECT_CONTENT_INJECTION_KEY
-  = Symbol() as InjectionKey<SelectContentContextValue>
+export const [injectSelectContentContext, provideSelectContentContext]
+  = createContext<SelectContentContext>('SelectContent')
 
 export interface SelectContentImplProps extends PopperContentProps {
   position?: 'item-aligned' | 'popper'
@@ -53,26 +62,16 @@ export type SelectContentImplEmits = {
 <script setup lang="ts">
 import {
   type ComponentPublicInstance,
-  type InjectionKey,
   type Ref,
   computed,
-  inject,
-  provide,
   ref,
   watch,
   watchEffect,
 } from 'vue'
 import { unrefElement } from '@vueuse/core'
-import { SELECT_INJECTION_KEY } from './SelectRoot.vue'
+import { injectSelectRootContext } from './SelectRoot.vue'
 import SelectItemAlignedPosition from './SelectItemAlignedPosition.vue'
 import SelectPopperPosition from './SelectPopperPosition.vue'
-import {
-  useBodyScrollLock,
-  useCollection,
-  useFocusGuards,
-  useHideOthers,
-  useTypeahead,
-} from '@/shared'
 import { FocusScope } from '@/FocusScope'
 import {
   DismissableLayer,
@@ -84,7 +83,7 @@ import type { PopperContentProps } from '@/Popper'
 const props = defineProps<SelectContentImplProps>()
 const emits = defineEmits<SelectContentImplEmits>()
 
-const context = inject(SELECT_INJECTION_KEY)
+const rootContext = injectSelectRootContext()
 
 useFocusGuards()
 useBodyScrollLock(true)
@@ -113,7 +112,7 @@ watch(isPositioned, () => {
 
 // prevent selecting items on `pointerup` in some cases after opening from `pointerdown`
 // and close on `pointerup` outside.
-const { onOpenChange, triggerPointerDownPosRef } = context!
+const { onOpenChange, triggerPointerDownPosRef } = rootContext
 watchEffect((cleanupFn) => {
   if (!content.value)
     return
@@ -197,7 +196,7 @@ const pickedProps = computed(() => {
   else return {}
 })
 
-provide(SELECT_CONTENT_INJECTION_KEY, {
+provideSelectContentContext({
   content,
   viewport,
   onViewportChange: (node) => {
@@ -206,8 +205,8 @@ provide(SELECT_CONTENT_INJECTION_KEY, {
   itemRefCallback: (node, value, disabled) => {
     const isFirstValidItem = !firstValidItemFoundRef.value && !disabled
     const isSelectedItem
-      = context?.modelValue?.value !== undefined
-      && context?.modelValue?.value === value
+      = rootContext.modelValue?.value !== undefined
+      && rootContext.modelValue?.value === value
     if (isSelectedItem || isFirstValidItem) {
       selectedItem.value = node
       if (isFirstValidItem)
@@ -222,8 +221,8 @@ provide(SELECT_CONTENT_INJECTION_KEY, {
   itemTextRefCallback: (node, value, disabled) => {
     const isFirstValidItem = !firstValidItemFoundRef.value && !disabled
     const isSelectedItem
-      = context?.modelValue?.value !== undefined
-      && context?.modelValue?.value === value
+      = rootContext.modelValue?.value !== undefined
+      && rootContext.modelValue?.value === value
     if (isSelectedItem || isFirstValidItem)
       selectedItemText.value = node
   },
@@ -242,7 +241,7 @@ provide(SELECT_CONTENT_INJECTION_KEY, {
       (event) => {
         emits('closeAutoFocus', event);
         if (event.defaultPrevented) return;
-        context?.triggerElement.value?.focus({ preventScroll: true });
+        rootContext.triggerElement.value?.focus({ preventScroll: true });
         event.preventDefault();
       }
     "
@@ -251,7 +250,7 @@ provide(SELECT_CONTENT_INJECTION_KEY, {
       as-child
       disable-outside-pointer-events
       @focus-outside.prevent
-      @dismiss="context?.onOpenChange(false)"
+      @dismiss="rootContext.onOpenChange(false)"
       @escape-key-down="emits('escapeKeyDown', $event)"
       @pointer-down-outside="emits('pointerDownOutside', $event)"
     >
@@ -262,7 +261,7 @@ provide(SELECT_CONTENT_INJECTION_KEY, {
             : SelectItemAlignedPosition
         "
         v-bind="{ ...$attrs, ...pickedProps }"
-        :id="context?.contentId"
+        :id="rootContext.contentId"
         :ref="
           (vnode: ComponentPublicInstance) => {
             content = unrefElement(vnode) as HTMLElement
@@ -270,8 +269,8 @@ provide(SELECT_CONTENT_INJECTION_KEY, {
           }
         "
         role="listbox"
-        :data-state="context?.open.value ? 'open' : 'closed'"
-        :dir="context?.dir.value"
+        :data-state="rootContext.open.value ? 'open' : 'closed'"
+        :dir="rootContext.dir.value"
         :style="{
           // flex layout so we can place the scroll buttons properly
           display: 'flex',
@@ -281,7 +280,7 @@ provide(SELECT_CONTENT_INJECTION_KEY, {
         }"
         @contextmenu.prevent
         @placed="isPositioned = true"
-        @keydown="handleKeyDown"
+        @keydown="(handleKeyDown as any)"
       >
         <slot />
       </component>
diff --git a/packages/radix-vue/src/Select/SelectGroup.vue b/packages/radix-vue/src/Select/SelectGroup.vue
index 217da22d1..f635e2b4e 100644
--- a/packages/radix-vue/src/Select/SelectGroup.vue
+++ b/packages/radix-vue/src/Select/SelectGroup.vue
@@ -1,24 +1,23 @@
 <script lang="ts">
+import { createContext, useId } from '@/shared'
+
 export interface SelectGroupProps extends PrimitiveProps {}
 
-interface SelectGroupContextValue {
+interface SelectGroupContext {
   id: string
 }
-export const SELECT_GROUP_INJECTION_KEY
-  = Symbol() as InjectionKey<SelectGroupContextValue>
+
+export const [injectSelectGroupContext, provideSelectGroupContext]
+  = createContext<SelectGroupContext>('SelectGroup')
 </script>
 
 <script setup lang="ts">
-import { type InjectionKey, provide } from 'vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { useId } from '@/shared'
 
 const props = defineProps<SelectGroupProps>()
 
 const id = useId()
-provide(SELECT_GROUP_INJECTION_KEY, {
-  id,
-})
+provideSelectGroupContext({ id })
 </script>
 
 <template>
diff --git a/packages/radix-vue/src/Select/SelectItem.vue b/packages/radix-vue/src/Select/SelectItem.vue
index c5f81cd65..cd543a5b9 100644
--- a/packages/radix-vue/src/Select/SelectItem.vue
+++ b/packages/radix-vue/src/Select/SelectItem.vue
@@ -1,5 +1,7 @@
 <script lang="ts">
-interface SelectItemContextValue {
+import { createContext, useId } from '@/shared'
+
+interface SelectItemContext {
   value: string
   textId: string
   disabled: Ref<boolean>
@@ -7,8 +9,8 @@ interface SelectItemContextValue {
   onItemTextChange(node: HTMLElement | undefined): void
 }
 
-export const SELECT_ITEM_INJECTION_KEY
-  = Symbol() as InjectionKey<SelectItemContextValue>
+export const [injectSelectItemContext, provideSelectItemContext]
+  = createContext<SelectItemContext>('SelectItem')
 
 export interface SelectItemProps extends PrimitiveProps {
   value: string
@@ -19,34 +21,30 @@ export interface SelectItemProps extends PrimitiveProps {
 
 <script setup lang="ts">
 import {
-  type InjectionKey,
   type Ref,
   computed,
-  inject,
   nextTick,
   onMounted,
-  provide,
   ref,
   toRefs,
 } from 'vue'
-import { SELECT_INJECTION_KEY } from './SelectRoot.vue'
-import { SELECT_CONTENT_INJECTION_KEY, SelectContentDefaultContextValue } from './SelectContentImpl.vue'
+import { injectSelectRootContext } from './SelectRoot.vue'
+import { SelectContentDefaultContextValue, injectSelectContentContext } from './SelectContentImpl.vue'
 import { SELECTION_KEYS } from './utils'
 import {
   Primitive,
   type PrimitiveProps,
   usePrimitiveElement,
 } from '@/Primitive'
-import { useId } from '@/shared'
 
 const props = defineProps<SelectItemProps>()
 const { disabled } = toRefs(props)
 
-const context = inject(SELECT_INJECTION_KEY)
-const contentContext = inject(SELECT_CONTENT_INJECTION_KEY, SelectContentDefaultContextValue)
+const rootContext = injectSelectRootContext()
+const contentContext = injectSelectContentContext(SelectContentDefaultContextValue)
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
-const isSelected = computed(() => context?.modelValue?.value === props.value)
+const isSelected = computed(() => rootContext.modelValue?.value === props.value)
 const isFocused = ref(false)
 const textValue = ref(props.textValue ?? '')
 const textId = useId()
@@ -57,8 +55,8 @@ async function handleSelect(ev?: PointerEvent) {
     return
 
   if (!disabled.value) {
-    context!.onValueChange(props.value)
-    context!.onOpenChange(false)
+    rootContext.onValueChange(props.value)
+    rootContext.onOpenChange(false)
   }
 }
 
@@ -67,7 +65,7 @@ async function handlePointerMove(event: PointerEvent) {
   if (event.defaultPrevented)
     return
   if (disabled.value) {
-    contentContext!.onItemLeave?.()
+    contentContext.onItemLeave?.()
   }
   else {
     // even though safari doesn't support this option, it's acceptable
@@ -81,14 +79,14 @@ async function handlePointerLeave(event: PointerEvent) {
   if (event.defaultPrevented)
     return
   if (event.currentTarget === document.activeElement)
-    contentContext!.onItemLeave?.()
+    contentContext.onItemLeave?.()
 }
 
 async function handleKeyDown(event: KeyboardEvent) {
   await nextTick()
   if (event.defaultPrevented)
     return
-  const isTypingAhead = contentContext!.searchRef?.value !== ''
+  const isTypingAhead = contentContext.searchRef?.value !== ''
   if (isTypingAhead && event.key === ' ')
     return
   if (SELECTION_KEYS.includes(event.key))
@@ -107,14 +105,14 @@ if (props.value === '') {
 onMounted(() => {
   if (!currentElement.value)
     return
-  contentContext?.itemRefCallback(
+  contentContext.itemRefCallback(
     currentElement.value,
     props.value,
     props.disabled,
   )
 })
 
-provide(SELECT_ITEM_INJECTION_KEY, {
+provideSelectItemContext({
   value: props.value,
   disabled,
   textId,
diff --git a/packages/radix-vue/src/Select/SelectItemAlignedPosition.vue b/packages/radix-vue/src/Select/SelectItemAlignedPosition.vue
index 6a80ed34b..0176ad621 100644
--- a/packages/radix-vue/src/Select/SelectItemAlignedPosition.vue
+++ b/packages/radix-vue/src/Select/SelectItemAlignedPosition.vue
@@ -1,11 +1,26 @@
+<script lang="ts">
+import { createContext, useCollection } from '@/shared'
+
+interface SelectItemAlignedPositionContext {
+  contentWrapper?: Ref<HTMLElement | undefined>
+  shouldExpandOnScrollRef?: Ref<boolean>
+  onScrollButtonChange: (node: HTMLElement | undefined) => void
+}
+
+export const [injectSelectItemAlignedPositionContext, provideSelectItemAlignedPositionContext]
+  = createContext<SelectItemAlignedPositionContext>('SelectItemAlignedPosition')
+
+export default {
+  inheritAttrs: false,
+}
+</script>
+
 <script setup lang="ts">
-import { inject, nextTick, onMounted, provide, ref } from 'vue'
+import { type Ref, nextTick, onMounted, ref } from 'vue'
 import { clamp } from '@vueuse/shared'
-import { SELECT_INJECTION_KEY } from './SelectRoot.vue'
-import { SELECT_CONTENT_INJECTION_KEY } from './SelectContentImpl.vue'
+import { injectSelectRootContext } from './SelectRoot.vue'
+import { injectSelectContentContext } from './SelectContentImpl.vue'
 import { CONTENT_MARGIN } from './utils'
-import { SELECT_VIEWPORT_INJECTION_KEY } from './SelectViewport.vue'
-import { useCollection } from '@/shared'
 import {
   Primitive,
   type PrimitiveProps,
@@ -20,8 +35,8 @@ const emits = defineEmits<{
 }>()
 
 const { injectCollection } = useCollection()
-const context = inject(SELECT_INJECTION_KEY)
-const contentContext = inject(SELECT_CONTENT_INJECTION_KEY)
+const rootContext = injectSelectRootContext()
+const contentContext = injectSelectContentContext()
 const collectionItems = injectCollection()
 
 const shouldExpandOnScrollRef = ref(false)
@@ -36,25 +51,24 @@ const { viewport, selectedItem, selectedItemText, focusSelectedItem }
 
 function position() {
   if (
-    context
-    && context.triggerElement.value
-    && context.valueElement.value
+    rootContext.triggerElement.value
+    && rootContext.valueElement.value
     && contentWrapperElement.value
     && contentElement.value
     && viewport?.value
     && selectedItem?.value
     && selectedItemText?.value
   ) {
-    const triggerRect = context.triggerElement.value.getBoundingClientRect()
+    const triggerRect = rootContext.triggerElement.value.getBoundingClientRect()
 
     // -----------------------------------------------------------------------------------------
     //  Horizontal positioning
     // -----------------------------------------------------------------------------------------
     const contentRect = contentElement.value.getBoundingClientRect()
-    const valueNodeRect = context.valueElement.value.getBoundingClientRect()
+    const valueNodeRect = rootContext.valueElement.value.getBoundingClientRect()
     const itemTextRect = selectedItemText.value.getBoundingClientRect()
 
-    if (context.dir.value !== 'rtl') {
+    if (rootContext.dir.value !== 'rtl') {
       const itemTextOffset = itemTextRect.left - contentRect.left
       const left = valueNodeRect.left - itemTextOffset
       const leftDelta = triggerRect.left - left
@@ -205,19 +219,13 @@ function handleScrollButtonChange(node: HTMLElement | undefined) {
   }
 }
 
-provide(SELECT_VIEWPORT_INJECTION_KEY, {
+provideSelectItemAlignedPositionContext({
   contentWrapper: contentWrapperElement,
   shouldExpandOnScrollRef,
   onScrollButtonChange: handleScrollButtonChange,
 })
 </script>
 
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-}
-</script>
-
 <template>
   <div
     ref="contentWrapperElement"
diff --git a/packages/radix-vue/src/Select/SelectItemIndicator.vue b/packages/radix-vue/src/Select/SelectItemIndicator.vue
index ce9133ddd..dc5215715 100644
--- a/packages/radix-vue/src/Select/SelectItemIndicator.vue
+++ b/packages/radix-vue/src/Select/SelectItemIndicator.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { SELECT_ITEM_INJECTION_KEY } from './SelectItem.vue'
+import { injectSelectItemContext } from './SelectItem.vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 
 export interface SelectItemIndicatorProps extends PrimitiveProps {}
@@ -8,11 +7,11 @@ const props = withDefaults(defineProps<SelectItemIndicatorProps>(), {
   as: 'span',
 })
 
-const itemContext = inject(SELECT_ITEM_INJECTION_KEY)
+const itemContext = injectSelectItemContext()
 </script>
 
 <template>
-  <Primitive v-if="itemContext?.isSelected.value" aria-hidden v-bind="props">
+  <Primitive v-if="itemContext.isSelected.value" aria-hidden v-bind="props">
     <slot />
   </Primitive>
 </template>
diff --git a/packages/radix-vue/src/Select/SelectItemText.vue b/packages/radix-vue/src/Select/SelectItemText.vue
index ad011a1f7..3d7cc8682 100644
--- a/packages/radix-vue/src/Select/SelectItemText.vue
+++ b/packages/radix-vue/src/Select/SelectItemText.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed, h, inject, onBeforeUnmount, onMounted } from 'vue'
-import { SELECT_INJECTION_KEY, SELECT_NATIVE_OPTIONS_INJECTION_KEY } from './SelectRoot.vue'
-import { SELECT_CONTENT_INJECTION_KEY, SelectContentDefaultContextValue } from './SelectContentImpl.vue'
-import { SELECT_ITEM_INJECTION_KEY } from './SelectItem.vue'
+import { computed, h, onBeforeUnmount, onMounted } from 'vue'
+import { injectSelectNativeOptionsContext, injectSelectRootContext } from './SelectRoot.vue'
+import { SelectContentDefaultContextValue, injectSelectContentContext } from './SelectContentImpl.vue'
+import { injectSelectItemContext } from './SelectItem.vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -15,38 +15,37 @@ const props = withDefaults(defineProps<SelectItemTextProps>(), {
   as: 'span',
 })
 
-const context = inject(SELECT_INJECTION_KEY)
-const contentContext = inject(SELECT_CONTENT_INJECTION_KEY, SelectContentDefaultContextValue)
-const nativeOptionContext = inject(SELECT_NATIVE_OPTIONS_INJECTION_KEY)
-const itemContext = inject(SELECT_ITEM_INJECTION_KEY)
+const rootContext = injectSelectRootContext()
+const contentContext = injectSelectContentContext(SelectContentDefaultContextValue)
+const nativeOptionContext = injectSelectNativeOptionsContext()
+const itemContext = injectSelectItemContext()
 
 const { primitiveElement, currentElement: itemTextElement }
   = usePrimitiveElement()
 
 const nativeOption = computed(() => {
   return h('option', {
-    key: itemContext?.value,
-    value: itemContext?.value,
-    disabled: itemContext?.disabled.value,
+    key: itemContext.value,
+    value: itemContext.value,
+    disabled: itemContext.disabled.value,
     innerHTML: itemTextElement.value?.textContent,
   })
 })
 
-const { onNativeOptionAdd, onNativeOptionRemove } = nativeOptionContext!
 onMounted(() => {
   if (!itemTextElement.value)
     return
-  itemContext?.onItemTextChange(itemTextElement.value)
-  contentContext?.itemTextRefCallback(
+  itemContext.onItemTextChange(itemTextElement.value)
+  contentContext.itemTextRefCallback(
     itemTextElement.value,
-    itemContext!.value,
-    itemContext!.disabled.value,
+    itemContext.value,
+    itemContext.disabled.value,
   )
-  onNativeOptionAdd(nativeOption.value)
+  nativeOptionContext.onNativeOptionAdd(nativeOption.value)
 })
 
 onBeforeUnmount(() => {
-  onNativeOptionRemove(nativeOption.value)
+  nativeOptionContext.onNativeOptionRemove(nativeOption.value)
 })
 </script>
 
@@ -57,12 +56,14 @@ export default {
 </script>
 
 <template>
-  <Primitive :id="itemContext?.textId" ref="primitiveElement" v-bind="{ ...props, ...$attrs }">
+  <Primitive :id="itemContext.textId" ref="primitiveElement" v-bind="{ ...props, ...$attrs }">
     <slot />
   </Primitive>
 
   <!-- Portal the select item text into the trigger value node -->
-  <Teleport v-if="itemContext?.isSelected.value && context?.valueElement.value && !context.valueElementHasChildren.value" :to="context?.valueElement.value">
+  <Teleport
+    v-if="itemContext.isSelected.value && rootContext.valueElement.value && !rootContext.valueElementHasChildren.value" :to="rootContext.valueElement.value"
+  >
     <slot />
   </Teleport>
 </template>
diff --git a/packages/radix-vue/src/Select/SelectLabel.vue b/packages/radix-vue/src/Select/SelectLabel.vue
index 0728e118c..c5ea31c10 100644
--- a/packages/radix-vue/src/Select/SelectLabel.vue
+++ b/packages/radix-vue/src/Select/SelectLabel.vue
@@ -7,16 +7,13 @@ export interface SelectLabelProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { inject } from 'vue'
-import { SELECT_GROUP_INJECTION_KEY } from './SelectGroup.vue'
+import { injectSelectGroupContext } from './SelectGroup.vue'
 
 const props = withDefaults(defineProps<SelectLabelProps>(), {
   as: 'label',
 })
 
-const groupContext = inject(SELECT_GROUP_INJECTION_KEY, {
-  id: '',
-})
+const groupContext = injectSelectGroupContext({ id: '' })
 </script>
 
 <template>
diff --git a/packages/radix-vue/src/Select/SelectProvider.vue b/packages/radix-vue/src/Select/SelectProvider.vue
index 4cdb5cea6..fe6e3ded0 100644
--- a/packages/radix-vue/src/Select/SelectProvider.vue
+++ b/packages/radix-vue/src/Select/SelectProvider.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { provide } from 'vue'
-import { SELECT_INJECTION_KEY, type SelectProvideValue } from './SelectRoot.vue'
+import type { SelectRootContext } from './SelectRoot.vue'
+import { provideSelectRootContext } from './SelectRoot.vue'
 
 const props = defineProps<{
-  context: SelectProvideValue
+  context: SelectRootContext
 }>()
 
-provide(SELECT_INJECTION_KEY, props.context)
+provideSelectRootContext(props.context)
 </script>
 
 <template>
diff --git a/packages/radix-vue/src/Select/SelectRoot.vue b/packages/radix-vue/src/Select/SelectRoot.vue
index 54eecf513..c590b4e88 100644
--- a/packages/radix-vue/src/Select/SelectRoot.vue
+++ b/packages/radix-vue/src/Select/SelectRoot.vue
@@ -1,8 +1,8 @@
 <script lang="ts">
-import type { InjectionKey, Ref, VNode } from 'vue'
+import type { Ref, VNode } from 'vue'
 import type { DataOrientation, Direction } from '../shared/types'
 import BubbleSelect from './BubbleSelect.vue'
-import { useDirection, useFormControl, useId } from '@/shared'
+import { createContext, useDirection, useFormControl, useId } from '@/shared'
 
 export interface SelectRootProps {
   open?: boolean
@@ -21,10 +21,7 @@ export type SelectRootEmits = {
   'update:open': [value: boolean]
 }
 
-export const SELECT_INJECTION_KEY
-  = Symbol() as InjectionKey<SelectProvideValue>
-
-export interface SelectProvideValue {
+export interface SelectRootContext {
   triggerElement: Ref<HTMLElement | undefined>
   onTriggerChange(node: HTMLElement | undefined): void
   valueElement: Ref<HTMLElement | undefined>
@@ -42,17 +39,20 @@ export interface SelectProvideValue {
   disabled?: Ref<boolean>
 }
 
-export interface SelectNativeOptionsContextValue {
+export const [injectSelectRootContext, provideSelectRootContext]
+  = createContext<SelectRootContext>('SelectRoot')
+
+export interface SelectNativeOptionsContext {
   onNativeOptionAdd(option: VNode): void
   onNativeOptionRemove(option: VNode): void
 }
 
-export const SELECT_NATIVE_OPTIONS_INJECTION_KEY
-  = Symbol() as InjectionKey<SelectNativeOptionsContextValue>
+export const [injectSelectNativeOptionsContext, provideSelectNativeOptionsContext]
+  = createContext<SelectNativeOptionsContext>('SelectRoot')
 </script>
 
 <script setup lang="ts">
-import { computed, provide, ref, toRefs } from 'vue'
+import { computed, ref, toRefs } from 'vue'
 import { PopperRoot } from '@/Popper'
 import { useVModel } from '@vueuse/core'
 
@@ -85,27 +85,27 @@ const valueElementHasChildren = ref(false)
 
 const { required, disabled, dir: propDir } = toRefs(props)
 const dir = useDirection(propDir)
-provide<SelectProvideValue>(SELECT_INJECTION_KEY, {
+provideSelectRootContext({
   triggerElement,
-  onTriggerChange: (node: HTMLElement | undefined) => {
+  onTriggerChange: (node) => {
     triggerElement.value = node
   },
   valueElement,
-  onValueElementChange: (node: HTMLElement | undefined) => {
+  onValueElementChange: (node) => {
     valueElement.value = node
   },
   valueElementHasChildren,
-  onValueElementHasChildrenChange: (hasChildren: boolean) => {
+  onValueElementHasChildrenChange: (hasChildren) => {
     valueElementHasChildren.value = hasChildren
   },
   contentId: useId(),
   modelValue,
-  onValueChange: (value: string) => {
+  onValueChange: (value) => {
     modelValue.value = value
   },
   open,
   required,
-  onOpenChange: (value: boolean) => {
+  onOpenChange: (value) => {
     open.value = value
   },
   dir,
@@ -127,7 +127,7 @@ const nativeSelectKey = computed(() => {
     .join(';')
 })
 
-provide(SELECT_NATIVE_OPTIONS_INJECTION_KEY, {
+provideSelectNativeOptionsContext({
   onNativeOptionAdd: (option) => {
     nativeOptionsSet.value.add(option)
   },
diff --git a/packages/radix-vue/src/Select/SelectScrollButtonImpl.vue b/packages/radix-vue/src/Select/SelectScrollButtonImpl.vue
index ec2e0b56e..e3cda7cdc 100644
--- a/packages/radix-vue/src/Select/SelectScrollButtonImpl.vue
+++ b/packages/radix-vue/src/Select/SelectScrollButtonImpl.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { inject, onBeforeUnmount, ref, watchEffect } from 'vue'
-import { SELECT_CONTENT_INJECTION_KEY, SelectContentDefaultContextValue } from './SelectContentImpl.vue'
+import { onBeforeUnmount, ref, watchEffect } from 'vue'
+import { SelectContentDefaultContextValue, injectSelectContentContext } from './SelectContentImpl.vue'
 import { Primitive } from '@/Primitive'
 import { useCollection } from '@/shared'
 
@@ -12,7 +12,7 @@ const emits = defineEmits<SelectScrollButtonImplEmits>()
 const { injectCollection } = useCollection()
 
 const collectionItems = injectCollection()
-const contentContext = inject(SELECT_CONTENT_INJECTION_KEY, SelectContentDefaultContextValue)
+const contentContext = injectSelectContentContext(SelectContentDefaultContextValue)
 const autoScrollTimerRef = ref<number | null>(null)
 
 function clearAutoScrollTimer() {
@@ -38,7 +38,7 @@ function handlePointerDown() {
 }
 
 function handlePointerMove() {
-  contentContext!.onItemLeave?.()
+  contentContext.onItemLeave?.()
   if (autoScrollTimerRef.value === null) {
     autoScrollTimerRef.value = window.setInterval(() => {
       emits('autoScroll')
diff --git a/packages/radix-vue/src/Select/SelectScrollDownButton.vue b/packages/radix-vue/src/Select/SelectScrollDownButton.vue
index dc6fe080b..75b64d0dd 100644
--- a/packages/radix-vue/src/Select/SelectScrollDownButton.vue
+++ b/packages/radix-vue/src/Select/SelectScrollDownButton.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { inject, ref, watch, watchEffect } from 'vue'
-import { SELECT_CONTENT_INJECTION_KEY, SelectContentDefaultContextValue } from './SelectContentImpl.vue'
-import { SELECT_VIEWPORT_INJECTION_KEY } from './SelectViewport.vue'
+import { ref, watch, watchEffect } from 'vue'
+import { SelectContentDefaultContextValue, injectSelectContentContext } from './SelectContentImpl.vue'
 import SelectScrollButtonImpl from './SelectScrollButtonImpl.vue'
 import { type PrimitiveProps, usePrimitiveElement } from '@/Primitive'
+import { injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.vue'
 
 export interface SelectScrollDownButtonProps extends PrimitiveProps {}
 defineProps<SelectScrollDownButtonProps>()
 
-const contentContext = inject(SELECT_CONTENT_INJECTION_KEY, SelectContentDefaultContextValue)
-const viewportContext
-  = contentContext!.position === 'item-aligned'
-    ? inject(SELECT_VIEWPORT_INJECTION_KEY)
+const contentContext = injectSelectContentContext(SelectContentDefaultContextValue)
+const alignedPositionContext
+  = contentContext.position === 'item-aligned'
+    ? injectSelectItemAlignedPositionContext()
     : undefined
 
 const { primitiveElement, currentElement } = usePrimitiveElement()
@@ -19,8 +19,8 @@ const { primitiveElement, currentElement } = usePrimitiveElement()
 const canScrollDown = ref(false)
 
 watchEffect((cleanupFn) => {
-  if (contentContext!.viewport?.value && contentContext!.isPositioned?.value) {
-    const viewport = contentContext!.viewport.value
+  if (contentContext.viewport?.value && contentContext.isPositioned?.value) {
+    const viewport = contentContext.viewport.value
 
     function handleScroll() {
       const maxScroll = viewport.scrollHeight - viewport.clientHeight
@@ -37,7 +37,7 @@ watchEffect((cleanupFn) => {
 
 watch(currentElement, () => {
   if (currentElement.value)
-    viewportContext?.onScrollButtonChange(currentElement.value)
+    alignedPositionContext?.onScrollButtonChange(currentElement.value)
 })
 </script>
 
@@ -47,7 +47,7 @@ watch(currentElement, () => {
     ref="primitiveElement"
     @auto-scroll="
       () => {
-        const { viewport, selectedItem } = contentContext!;
+        const { viewport, selectedItem } = contentContext;
         if (viewport?.value && selectedItem?.value) {
           viewport.value.scrollTop = viewport.value.scrollTop + selectedItem.value.offsetHeight;
         }
diff --git a/packages/radix-vue/src/Select/SelectScrollUpButton.vue b/packages/radix-vue/src/Select/SelectScrollUpButton.vue
index dd03a2669..70a902a13 100644
--- a/packages/radix-vue/src/Select/SelectScrollUpButton.vue
+++ b/packages/radix-vue/src/Select/SelectScrollUpButton.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { inject, ref, watch, watchEffect } from 'vue'
-import { SELECT_CONTENT_INJECTION_KEY, SelectContentDefaultContextValue } from './SelectContentImpl.vue'
-import { SELECT_VIEWPORT_INJECTION_KEY } from './SelectViewport.vue'
+import { ref, watch, watchEffect } from 'vue'
+import { SelectContentDefaultContextValue, injectSelectContentContext } from './SelectContentImpl.vue'
 import SelectScrollButtonImpl from './SelectScrollButtonImpl.vue'
 import { type PrimitiveProps, usePrimitiveElement } from '@/Primitive'
+import { injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.vue'
 
 export interface SelectScrollUpButtonProps extends PrimitiveProps {}
 defineProps<SelectScrollUpButtonProps>()
 
-const contentContext = inject(SELECT_CONTENT_INJECTION_KEY, SelectContentDefaultContextValue)
-const viewportContext
-  = contentContext!.position === 'item-aligned'
-    ? inject(SELECT_VIEWPORT_INJECTION_KEY)
+const contentContext = injectSelectContentContext(SelectContentDefaultContextValue)
+const alignedPositionContext
+  = contentContext.position === 'item-aligned'
+    ? injectSelectItemAlignedPositionContext()
     : undefined
 
 const { primitiveElement, currentElement } = usePrimitiveElement()
@@ -19,8 +19,8 @@ const { primitiveElement, currentElement } = usePrimitiveElement()
 const canScrollUp = ref(false)
 
 watchEffect((cleanupFn) => {
-  if (contentContext!.viewport?.value && contentContext!.isPositioned?.value) {
-    const viewport = contentContext!.viewport.value
+  if (contentContext.viewport?.value && contentContext.isPositioned?.value) {
+    const viewport = contentContext.viewport.value
 
     function handleScroll() {
       canScrollUp.value = viewport.scrollTop > 0
@@ -34,7 +34,7 @@ watchEffect((cleanupFn) => {
 
 watch(currentElement, () => {
   if (currentElement.value)
-    viewportContext?.onScrollButtonChange(currentElement.value)
+    alignedPositionContext?.onScrollButtonChange(currentElement.value)
 })
 </script>
 
@@ -43,7 +43,7 @@ watch(currentElement, () => {
     v-if="canScrollUp"
     ref="primitiveElement"
     @auto-scroll="() => {
-      const { viewport, selectedItem } = contentContext!;
+      const { viewport, selectedItem } = contentContext;
       if (viewport?.value && selectedItem?.value) {
         viewport.value.scrollTop = viewport.value.scrollTop - selectedItem.value.offsetHeight;
       }
diff --git a/packages/radix-vue/src/Select/SelectTrigger.vue b/packages/radix-vue/src/Select/SelectTrigger.vue
index eef72d18e..cd7cc4ea2 100644
--- a/packages/radix-vue/src/Select/SelectTrigger.vue
+++ b/packages/radix-vue/src/Select/SelectTrigger.vue
@@ -5,10 +5,9 @@ export interface SelectTriggerProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { computed, inject, onMounted } from 'vue'
+import { computed, onMounted } from 'vue'
 import {
-  SELECT_INJECTION_KEY,
-  type SelectProvideValue,
+  injectSelectRootContext,
 } from './SelectRoot.vue'
 import { OPEN_KEYS, shouldShowPlaceholder } from './utils'
 import {
@@ -22,15 +21,15 @@ import { useCollection, useTypeahead } from '@/shared'
 const props = withDefaults(defineProps<SelectTriggerProps>(), {
   as: 'button',
 })
-const context = inject<SelectProvideValue>(SELECT_INJECTION_KEY)
+const rootContext = injectSelectRootContext()
 
-const isDisabled = computed(() => context?.disabled?.value || props.disabled)
+const isDisabled = computed(() => rootContext.disabled?.value || props.disabled)
 
 const { primitiveElement, currentElement: triggerElement }
   = usePrimitiveElement()
 
 onMounted(() => {
-  context!.triggerElement = triggerElement
+  rootContext.triggerElement = triggerElement
 })
 
 const { injectCollection } = useCollection()
@@ -40,7 +39,7 @@ const { search, handleTypeaheadSearch, resetTypeahead }
   = useTypeahead(collectionItems)
 function handleOpen() {
   if (!isDisabled.value) {
-    context!.onOpenChange(true)
+    rootContext.onOpenChange(true)
     // reset typeahead when we open
     resetTypeahead()
   }
@@ -53,16 +52,16 @@ function handleOpen() {
       ref="primitiveElement"
       role="combobox"
       :type="as === 'button' ? 'button' : undefined"
-      :aria-controls="context?.contentId"
-      :aria-expanded="context?.open.value || false"
-      :aria-required="context?.required?.value"
+      :aria-controls="rootContext.contentId"
+      :aria-expanded="rootContext.open.value || false"
+      :aria-required="rootContext.required?.value"
       aria-autocomplete="none"
       :disabled="disabled"
-      :dir="context?.dir.value"
-      :data-state="context?.open.value ? 'open' : 'closed'"
+      :dir="rootContext?.dir.value"
+      :data-state="rootContext?.open.value ? 'open' : 'closed'"
       :data-disabled="isDisabled ? '' : undefined"
       :data-placeholder="
-        shouldShowPlaceholder(context?.modelValue?.value) ? '' : undefined
+        shouldShowPlaceholder(rootContext.modelValue?.value) ? '' : undefined
       "
       :as-child="asChild"
       :as="as"
@@ -89,7 +88,7 @@ function handleOpen() {
           // but not when the control key is pressed (avoiding MacOS right click)
           if (event.button === 0 && event.ctrlKey === false) {
             handleOpen();
-            context!.triggerPointerDownPosRef.value = {
+            rootContext.triggerPointerDownPosRef.value = {
               x: Math.round(event.pageX),
               y: Math.round(event.pageY),
             };
diff --git a/packages/radix-vue/src/Select/SelectValue.vue b/packages/radix-vue/src/Select/SelectValue.vue
index 521a6dc5f..aab2ae963 100644
--- a/packages/radix-vue/src/Select/SelectValue.vue
+++ b/packages/radix-vue/src/Select/SelectValue.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { inject, onBeforeMount, onMounted, useSlots } from 'vue'
+import { onBeforeMount, onMounted, useSlots } from 'vue'
 import { shouldShowPlaceholder } from './utils'
-import { SELECT_INJECTION_KEY } from './SelectRoot.vue'
+import { injectSelectRootContext } from './SelectRoot.vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -20,16 +20,16 @@ withDefaults(defineProps<SelectValueProps>(), {
 
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
-const context = inject(SELECT_INJECTION_KEY)
+const rootContext = injectSelectRootContext()
 const slots = useSlots()
 
 onBeforeMount(() => {
   const hasChildren = !!renderSlotFragments(slots?.default?.()).length
-  context!.onValueElementHasChildrenChange(hasChildren)
+  rootContext.onValueElementHasChildrenChange(hasChildren)
 })
 
 onMounted(() => {
-  context!.valueElement = currentElement
+  rootContext.valueElement = currentElement
 })
 </script>
 
@@ -40,7 +40,7 @@ onMounted(() => {
     :as-child="asChild"
     :style="{ pointerEvents: 'none' }"
   >
-    <template v-if="shouldShowPlaceholder(context?.modelValue?.value)">
+    <template v-if="shouldShowPlaceholder(rootContext.modelValue?.value)">
       {{ placeholder }}
     </template>
 
diff --git a/packages/radix-vue/src/Select/SelectViewport.vue b/packages/radix-vue/src/Select/SelectViewport.vue
index 7ed6777c2..6bb56629a 100644
--- a/packages/radix-vue/src/Select/SelectViewport.vue
+++ b/packages/radix-vue/src/Select/SelectViewport.vue
@@ -1,32 +1,24 @@
 <script lang="ts">
-interface SelectViewportContextValue {
-  contentWrapper?: Ref<HTMLElement | undefined>
-  shouldExpandOnScrollRef?: Ref<boolean>
-  onScrollButtonChange: (node: HTMLElement | undefined) => void
-}
-
-export const SELECT_VIEWPORT_INJECTION_KEY
-  = Symbol() as InjectionKey<SelectViewportContextValue>
-
 export interface SelectViewportProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
-import { type InjectionKey, type Ref, inject, onMounted, ref } from 'vue'
-import { SELECT_CONTENT_INJECTION_KEY, SelectContentDefaultContextValue } from './SelectContentImpl.vue'
+import { onMounted, ref } from 'vue'
+import { SelectContentDefaultContextValue, injectSelectContentContext } from './SelectContentImpl.vue'
 import { CONTENT_MARGIN } from './utils'
 import {
   Primitive,
   type PrimitiveProps,
   usePrimitiveElement,
 } from '@/Primitive'
+import { injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.vue'
 
 const props = defineProps<SelectViewportProps>()
 
-const contentContext = inject(SELECT_CONTENT_INJECTION_KEY, SelectContentDefaultContextValue)
-const viewportContext
-  = contentContext?.position === 'item-aligned'
-    ? inject(SELECT_VIEWPORT_INJECTION_KEY)
+const contentContext = injectSelectContentContext(SelectContentDefaultContextValue)
+const alignedPositionContext
+  = contentContext.position === 'item-aligned'
+    ? injectSelectItemAlignedPositionContext()
     : undefined
 
 const { primitiveElement, currentElement } = usePrimitiveElement()
@@ -39,7 +31,7 @@ const prevScrollTopRef = ref(0)
 
 function handleScroll(event: WheelEvent) {
   const viewport = event.currentTarget as HTMLElement
-  const { shouldExpandOnScrollRef, contentWrapper } = viewportContext ?? {}
+  const { shouldExpandOnScrollRef, contentWrapper } = alignedPositionContext ?? {}
   if (shouldExpandOnScrollRef?.value && contentWrapper?.value) {
     const scrolledBy = Math.abs(prevScrollTopRef.value - viewport.scrollTop)
     if (scrolledBy > 0) {
diff --git a/packages/radix-vue/src/Slider/SliderHorizontal.vue b/packages/radix-vue/src/Slider/SliderHorizontal.vue
index 1d46f4f68..8387cf4c3 100644
--- a/packages/radix-vue/src/Slider/SliderHorizontal.vue
+++ b/packages/radix-vue/src/Slider/SliderHorizontal.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { usePrimitiveElement } from '@/Primitive'
 import SliderImpl from './SliderImpl.vue'
-import { computed, provide, ref, toRefs } from 'vue'
+import { computed, ref, toRefs } from 'vue'
 import type { Direction, SliderOrientationPrivateEmits, SliderOrientationPrivateProps } from './utils'
-import { BACK_KEYS, SLIDER_ORIENTATION_INJECTION_KEY, linearScale } from './utils'
+import { BACK_KEYS, linearScale, provideSliderOrientationContext } from './utils'
 
 interface SliderHorizontalProps extends SliderOrientationPrivateProps {
   dir?: Direction
@@ -28,7 +28,7 @@ function getValueFromPointer(pointerPosition: number) {
   return value(pointerPosition - rect.left)
 }
 
-provide(SLIDER_ORIENTATION_INJECTION_KEY, {
+provideSliderOrientationContext({
   startEdge: isSlidingFromLeft.value ? 'left' : 'right',
   endEdge: isSlidingFromLeft.value ? 'right' : 'left',
   direction: isSlidingFromLeft.value ? 1 : -1,
diff --git a/packages/radix-vue/src/Slider/SliderImpl.vue b/packages/radix-vue/src/Slider/SliderImpl.vue
index 66c5facab..908c48be3 100644
--- a/packages/radix-vue/src/Slider/SliderImpl.vue
+++ b/packages/radix-vue/src/Slider/SliderImpl.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { inject } from 'vue'
-import { SLIDER_INJECTION_KEY } from './SliderRoot.vue'
+import { injectSliderRootContext } from './SliderRoot.vue'
 import { ARROW_KEYS, PAGE_KEYS } from './utils'
 
 export type SliderImplEmits = {
@@ -19,7 +18,7 @@ const props = withDefaults(defineProps<SliderImplProps>(), {
   as: 'span',
 })
 const emits = defineEmits<SliderImplEmits>()
-const context = inject(SLIDER_INJECTION_KEY)
+const rootContext = injectSliderRootContext()
 </script>
 
 <template>
@@ -50,7 +49,7 @@ const context = inject(SLIDER_INJECTION_KEY)
       event.preventDefault();
       // Touch devices have a delay before focusing so won't focus if touch immediately moves
       // away from target (sliding). We want thumb to focus regardless.
-      if (context!.thumbElements.value.includes(target)) {
+      if (rootContext.thumbElements.value.includes(target)) {
         target.focus();
       }
       else {
diff --git a/packages/radix-vue/src/Slider/SliderRange.vue b/packages/radix-vue/src/Slider/SliderRange.vue
index ea9895fbe..0dbbbc71f 100644
--- a/packages/radix-vue/src/Slider/SliderRange.vue
+++ b/packages/radix-vue/src/Slider/SliderRange.vue
@@ -3,27 +3,27 @@ export interface SliderRangeProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
-import { computed, inject } from 'vue'
+import { computed } from 'vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { SLIDER_INJECTION_KEY } from './SliderRoot.vue'
-import { SLIDER_ORIENTATION_INJECTION_KEY, convertValueToPercentage } from './utils'
+import { injectSliderRootContext } from './SliderRoot.vue'
+import { convertValueToPercentage, injectSliderOrientationContext } from './utils'
 
 withDefaults(defineProps<SliderRangeProps>(), { as: 'span' })
-const context = inject(SLIDER_INJECTION_KEY)
-const orientation = inject(SLIDER_ORIENTATION_INJECTION_KEY)
+const rootContext = injectSliderRootContext()
+const orientation = injectSliderOrientationContext()
 
-const percentages = computed(() => context?.modelValue?.value?.map(value =>
-  convertValueToPercentage(value, context.min.value, context.max.value),
+const percentages = computed(() => rootContext.modelValue?.value?.map(value =>
+  convertValueToPercentage(value, rootContext.min.value, rootContext.max.value),
 ))
 
-const offsetStart = computed(() => context!.modelValue!.value!.length > 1 ? Math.min(...percentages.value!) : 0)
+const offsetStart = computed(() => rootContext.modelValue!.value!.length > 1 ? Math.min(...percentages.value!) : 0)
 const offsetEnd = computed(() => 100 - Math.max(...percentages.value!))
 </script>
 
 <template>
   <Primitive
-    :data-disabled="context?.disabled.value"
-    :data-orientation="context?.orientation.value"
+    :data-disabled="rootContext.disabled.value"
+    :data-orientation="rootContext.orientation.value"
     :as-child="asChild"
     :as="as"
     :style="{
diff --git a/packages/radix-vue/src/Slider/SliderRoot.vue b/packages/radix-vue/src/Slider/SliderRoot.vue
index 1cc47b40d..1cd12b352 100644
--- a/packages/radix-vue/src/Slider/SliderRoot.vue
+++ b/packages/radix-vue/src/Slider/SliderRoot.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { DataOrientation, Direction } from '../shared/types'
-import { useCollection, useDirection, useFormControl } from '@/shared'
+import { createContext, useCollection, useDirection, useFormControl } from '@/shared'
 
 export interface SliderRootProps extends PrimitiveProps {
   name?: string
@@ -16,7 +16,12 @@ export interface SliderRootProps extends PrimitiveProps {
   minStepsBetweenThumbs?: number
 }
 
-export interface SliderProvideValue {
+export type SliderRootEmits = {
+  'update:modelValue': [payload: number[] | undefined]
+  'valueCommit': [payload: number[]]
+}
+
+export interface SliderRootContext {
   orientation: Ref<DataOrientation>
   disabled: Ref<boolean>
   min: Ref<number>
@@ -26,13 +31,8 @@ export interface SliderProvideValue {
   thumbElements: Ref<HTMLElement[]>
 }
 
-export type SliderRootEmits = {
-  'update:modelValue': [payload: number[] | undefined]
-  'valueCommit': [payload: number[]]
-}
-
-export const SLIDER_INJECTION_KEY
-  = Symbol() as InjectionKey<SliderProvideValue>
+export const [injectSliderRootContext, provideSliderRootContext]
+  = createContext<SliderRootContext>('SliderRoot')
 
 export default {
   inheritAttrs: false,
@@ -42,7 +42,7 @@ export default {
 <script setup lang="ts">
 import SliderHorizontal from './SliderHorizontal.vue'
 import SliderVertical from './SliderVertical.vue'
-import { type InjectionKey, type Ref, provide, ref, toRefs } from 'vue'
+import { type Ref, ref, toRefs } from 'vue'
 import {
   type PrimitiveProps,
   usePrimitiveElement,
@@ -115,7 +115,7 @@ function updateValues(value: number, atIndex: number, { commit } = { commit: fal
 }
 
 const thumbElements = ref<HTMLElement[]>([])
-provide(SLIDER_INJECTION_KEY, {
+provideSliderRootContext({
   modelValue,
   valueIndexToChangeRef,
   thumbElements,
diff --git a/packages/radix-vue/src/Slider/SliderThumbImpl.vue b/packages/radix-vue/src/Slider/SliderThumbImpl.vue
index 4f7b90764..38325f12a 100644
--- a/packages/radix-vue/src/Slider/SliderThumbImpl.vue
+++ b/packages/radix-vue/src/Slider/SliderThumbImpl.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { Primitive, type PrimitiveProps, usePrimitiveElement } from '@/Primitive'
-import { computed, inject, onMounted, onUnmounted } from 'vue'
-import { SLIDER_INJECTION_KEY } from './SliderRoot.vue'
-import { SLIDER_ORIENTATION_INJECTION_KEY, convertValueToPercentage, getLabel, getThumbInBoundsOffset } from './utils'
+import { computed, onMounted, onUnmounted } from 'vue'
+import { injectSliderRootContext } from './SliderRoot.vue'
+import { convertValueToPercentage, getLabel, getThumbInBoundsOffset, injectSliderOrientationContext } from './utils'
 import { useSize } from '@/shared'
 import { useMounted } from '@vueuse/core'
 
@@ -12,14 +12,14 @@ export interface SliderThumbImplProps extends PrimitiveProps {
 
 const props = defineProps<SliderThumbImplProps>()
 
-const context = inject(SLIDER_INJECTION_KEY)
-const orientation = inject(SLIDER_ORIENTATION_INJECTION_KEY)
+const rootContext = injectSliderRootContext()
+const orientation = injectSliderOrientationContext()
 
 const { primitiveElement, currentElement: thumbElement } = usePrimitiveElement()
 
-const value = computed(() => context?.modelValue?.value?.[props.index])
-const percent = computed(() => value.value === undefined ? 0 : convertValueToPercentage(value.value, context?.min.value ?? 0, context?.max.value ?? 100))
-const label = computed(() => getLabel(props.index, context?.modelValue?.value?.length ?? 0))
+const value = computed(() => rootContext.modelValue?.value?.[props.index])
+const percent = computed(() => value.value === undefined ? 0 : convertValueToPercentage(value.value, rootContext.min.value ?? 0, rootContext.max.value ?? 100))
+const label = computed(() => getLabel(props.index, rootContext.modelValue?.value?.length ?? 0))
 const size = useSize(thumbElement)
 const orientationSize = computed(() => size[orientation!.size].value)
 const thumbInBoundsOffset = computed(() => orientationSize.value
@@ -28,11 +28,11 @@ const thumbInBoundsOffset = computed(() => orientationSize.value
 
 const isMounted = useMounted()
 onMounted(() => {
-  context?.thumbElements.value.push(thumbElement.value)
+  rootContext.thumbElements.value.push(thumbElement.value)
 })
 onUnmounted(() => {
-  const i = context?.thumbElements.value.findIndex(i => i === thumbElement.value) ?? -1
-  context?.thumbElements.value.splice(i, 1)
+  const i = rootContext.thumbElements.value.findIndex(i => i === thumbElement.value) ?? -1
+  rootContext.thumbElements.value.splice(i, 1)
 })
 
 defineExpose({
@@ -52,14 +52,14 @@ export default {
     ref="primitiveElement"
     role="slider"
     data-radix-vue-collection-item
-    :tabindex="context?.disabled.value ? undefined : 0"
+    :tabindex="rootContext.disabled.value ? undefined : 0"
     :aria-label="$attrs['aria-label'] || label"
-    :data-disabled="context?.disabled.value"
-    :data-orientation="context?.orientation.value"
+    :data-disabled="rootContext.disabled.value"
+    :data-orientation="rootContext.orientation.value"
     :aria-valuenow="value"
-    :aria-valuemin="context?.min.value"
-    :aria-valuemax="context?.max.value"
-    :aria-orientation="context?.orientation.value"
+    :aria-valuemin="rootContext.min.value"
+    :aria-valuemax="rootContext.max.value"
+    :aria-orientation="rootContext.orientation.value"
     :as-child="asChild"
     :as="as"
     :style="{
@@ -75,7 +75,7 @@ export default {
       display: !isMounted && value === undefined ? 'none' : undefined,
     }"
     @focus="() => {
-      context!.valueIndexToChangeRef.value = index
+      rootContext.valueIndexToChangeRef.value = index
     }"
   >
     <slot />
diff --git a/packages/radix-vue/src/Slider/SliderTrack.vue b/packages/radix-vue/src/Slider/SliderTrack.vue
index 589fa996d..b0e669f7e 100644
--- a/packages/radix-vue/src/Slider/SliderTrack.vue
+++ b/packages/radix-vue/src/Slider/SliderTrack.vue
@@ -3,21 +3,20 @@ export interface SliderTrackProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
-import { inject } from 'vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { SLIDER_INJECTION_KEY } from './SliderRoot.vue'
+import { injectSliderRootContext } from './SliderRoot.vue'
 
 const props = withDefaults(defineProps<SliderTrackProps>(), { as: 'span' })
 
-const context = inject(SLIDER_INJECTION_KEY)
+const rootContext = injectSliderRootContext()
 </script>
 
 <template>
   <Primitive
     :as-child="props.asChild"
     :as="as"
-    :data-disabled="context?.disabled.value"
-    :data-orientation="context?.orientation.value"
+    :data-disabled="rootContext.disabled.value"
+    :data-orientation="rootContext.orientation.value"
   >
     <slot />
   </Primitive>
diff --git a/packages/radix-vue/src/Slider/SliderVertical.vue b/packages/radix-vue/src/Slider/SliderVertical.vue
index 81561be28..16857ed3a 100644
--- a/packages/radix-vue/src/Slider/SliderVertical.vue
+++ b/packages/radix-vue/src/Slider/SliderVertical.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { usePrimitiveElement } from '@/Primitive'
 import SliderImpl from './SliderImpl.vue'
-import { computed, provide, ref, toRefs } from 'vue'
+import { computed, ref, toRefs } from 'vue'
 import type { SliderOrientationPrivateEmits, SliderOrientationPrivateProps } from './utils'
-import { BACK_KEYS, SLIDER_ORIENTATION_INJECTION_KEY, linearScale } from './utils'
+import { BACK_KEYS, linearScale, provideSliderOrientationContext } from './utils'
 
 interface SliderVerticalProps extends SliderOrientationPrivateProps {}
 const props = defineProps<SliderVerticalProps>()
@@ -25,7 +25,7 @@ function getValueFromPointer(pointerPosition: number) {
   return value(pointerPosition - rect.top)
 }
 
-provide(SLIDER_ORIENTATION_INJECTION_KEY, {
+provideSliderOrientationContext({
   startEdge: isSlidingFromBottom.value ? 'bottom' : 'top',
   endEdge: isSlidingFromBottom.value ? 'top' : 'bottom',
   size: 'height',
diff --git a/packages/radix-vue/src/Slider/utils.ts b/packages/radix-vue/src/Slider/utils.ts
index d82c3dcef..a9249f74f 100644
--- a/packages/radix-vue/src/Slider/utils.ts
+++ b/packages/radix-vue/src/Slider/utils.ts
@@ -1,4 +1,4 @@
-import type { InjectionKey } from 'vue'
+import { createContext } from '@/shared'
 
 export interface SliderOrientationPrivateProps {
   min: number
@@ -153,4 +153,5 @@ interface SliderOrientation {
   direction: number
 }
 
-export const SLIDER_ORIENTATION_INJECTION_KEY = Symbol() as InjectionKey<SliderOrientation>
+export const [injectSliderOrientationContext, provideSliderOrientationContext]
+  = createContext<SliderOrientation>(['SliderVertical', 'SliderHorizontal'])
diff --git a/packages/radix-vue/src/Switch/SwitchRoot.vue b/packages/radix-vue/src/Switch/SwitchRoot.vue
index 0bbb02ed8..7c34c8c41 100644
--- a/packages/radix-vue/src/Switch/SwitchRoot.vue
+++ b/packages/radix-vue/src/Switch/SwitchRoot.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
-import { useFormControl } from '@/shared'
+import type { Ref } from 'vue'
+import { createContext, useFormControl } from '@/shared'
 
 export interface SwitchRootProps extends PrimitiveProps {
   defaultChecked?: boolean
@@ -16,18 +16,18 @@ export type SwitchRootEmits = {
   'update:checked': [payload: boolean]
 }
 
-export const SWITCH_INJECTION_KEY
-  = Symbol() as InjectionKey<SwitchProvideValue>
-
-export interface SwitchProvideValue {
+export interface SwitchRootContext {
   checked?: Ref<boolean>
   toggleCheck: () => void
   disabled: Ref<boolean>
 }
+
+export const [injectSwitchRootContext, provideSwitchRootContext]
+  = createContext<SwitchRootContext>('SwitchRoot')
 </script>
 
 <script setup lang="ts">
-import { computed, provide, toRefs } from 'vue'
+import { computed, toRefs } from 'vue'
 import { useVModel } from '@vueuse/core'
 import { Primitive, type PrimitiveProps, usePrimitiveElement } from '@/Primitive'
 
@@ -55,7 +55,7 @@ const { primitiveElement, currentElement } = usePrimitiveElement()
 const isFormControl = useFormControl(currentElement)
 const ariaLabel = computed(() => props.id && currentElement.value ? (document.querySelector(`[for="${props.id}"]`) as HTMLLabelElement)?.innerText : undefined)
 
-provide<SwitchProvideValue>(SWITCH_INJECTION_KEY, {
+provideSwitchRootContext({
   checked,
   toggleCheck,
   disabled,
diff --git a/packages/radix-vue/src/Switch/SwitchThumb.vue b/packages/radix-vue/src/Switch/SwitchThumb.vue
index d18c67312..47905c2ab 100644
--- a/packages/radix-vue/src/Switch/SwitchThumb.vue
+++ b/packages/radix-vue/src/Switch/SwitchThumb.vue
@@ -3,21 +3,19 @@ export interface SwitchThumbProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
-import { inject } from 'vue'
 import {
-  SWITCH_INJECTION_KEY,
-  type SwitchProvideValue,
+  injectSwitchRootContext,
 } from './SwitchRoot.vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 
 withDefaults(defineProps<SwitchThumbProps>(), { as: 'span' })
-const injectedValue = inject<SwitchProvideValue>(SWITCH_INJECTION_KEY)
+const rootContext = injectSwitchRootContext()
 </script>
 
 <template>
   <Primitive
-    :data-state="injectedValue?.checked?.value ? 'checked' : 'unchecked'"
-    :data-disabled="injectedValue?.disabled.value ? '' : undefined"
+    :data-state="rootContext.checked?.value ? 'checked' : 'unchecked'"
+    :data-disabled="rootContext.disabled.value ? '' : undefined"
     :as-child="asChild"
     :as="as"
   >
diff --git a/packages/radix-vue/src/Tabs/TabsContent.vue b/packages/radix-vue/src/Tabs/TabsContent.vue
index 0bf4db6a1..f81b8beb4 100644
--- a/packages/radix-vue/src/Tabs/TabsContent.vue
+++ b/packages/radix-vue/src/Tabs/TabsContent.vue
@@ -6,19 +6,19 @@ export interface TabsContentProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { computed, inject, onMounted, ref } from 'vue'
-import { TABS_INJECTION_KEY } from './TabsRoot.vue'
+import { computed, onMounted, ref } from 'vue'
+import { injectTabsRootContext } from './TabsRoot.vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 import { makeContentId, makeTriggerId } from './utils'
 import { Presence } from '@/Presence'
 
 const props = defineProps<TabsContentProps>()
 
-const context = inject(TABS_INJECTION_KEY)
-const triggerId = computed(() => makeTriggerId(context!.baseId, props.value))
-const contentId = computed(() => makeContentId(context!.baseId, props.value))
+const rootContext = injectTabsRootContext()
+const triggerId = computed(() => makeTriggerId(rootContext.baseId, props.value))
+const contentId = computed(() => makeContentId(rootContext.baseId, props.value))
 
-const isSelected = computed(() => props.value === context?.modelValue.value)
+const isSelected = computed(() => props.value === rootContext.modelValue.value)
 const isMountAnimationPreventedRef = ref(isSelected.value)
 
 onMounted(() => {
@@ -36,7 +36,7 @@ const presenceRef = ref<InstanceType<typeof Presence>>()
       :as="as"
       role="tabpanel"
       :data-state="isSelected ? 'active' : 'inactive'"
-      :data-orientation="context?.orientation.value"
+      :data-orientation="rootContext.orientation.value"
       :aria-labelledby="triggerId"
       :hidden="!presenceRef?.present"
       tabindex="0"
diff --git a/packages/radix-vue/src/Tabs/TabsList.vue b/packages/radix-vue/src/Tabs/TabsList.vue
index bc3800939..0a2fb06f7 100644
--- a/packages/radix-vue/src/Tabs/TabsList.vue
+++ b/packages/radix-vue/src/Tabs/TabsList.vue
@@ -5,8 +5,8 @@ export interface TabsListProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { inject, toRefs } from 'vue'
-import { TABS_INJECTION_KEY } from './TabsRoot.vue'
+import { toRefs } from 'vue'
+import { injectTabsRootContext } from './TabsRoot.vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -18,16 +18,16 @@ const props = withDefaults(defineProps<TabsListProps>(), {
 })
 const { loop } = toRefs(props)
 
-const context = inject(TABS_INJECTION_KEY)
+const rootContext = injectTabsRootContext()
 </script>
 
 <template>
-  <RovingFocusGroup as-child :orientation="context?.orientation.value" :dir="context?.dir.value" :loop="loop">
+  <RovingFocusGroup as-child :orientation="rootContext.orientation.value" :dir="rootContext.dir.value" :loop="loop">
     <Primitive
       role="tablist"
       :as-child="asChild"
       :as="as"
-      :aria-orientation="context?.orientation.value"
+      :aria-orientation="rootContext.orientation.value"
     >
       <slot />
     </Primitive>
diff --git a/packages/radix-vue/src/Tabs/TabsRoot.vue b/packages/radix-vue/src/Tabs/TabsRoot.vue
index 927fc2e47..431b5b248 100644
--- a/packages/radix-vue/src/Tabs/TabsRoot.vue
+++ b/packages/radix-vue/src/Tabs/TabsRoot.vue
@@ -1,11 +1,21 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
 import { useVModel } from '@vueuse/core'
-import { provide, toRefs } from 'vue'
+import { toRefs } from 'vue'
 import type { DataOrientation, Direction } from '../shared/types'
-import { useDirection, useId } from '@/shared'
+import { createContext, useDirection, useId } from '@/shared'
 
-export const TABS_INJECTION_KEY = Symbol() as InjectionKey<TabsProvideValue>
+export interface TabsRootContext {
+  modelValue: Ref<string | undefined>
+  changeModelValue: (value: string) => void
+  orientation: Ref<DataOrientation>
+  dir: Ref<Direction>
+  activationMode: 'automatic' | 'manual'
+  baseId: string
+}
+
+export const [injectTabsRootContext, provideTabsRootContext]
+  = createContext<TabsRootContext>('TabsRoot')
 </script>
 
 <script setup lang="ts">
@@ -34,15 +44,6 @@ export type TabsRootEmits = {
   'update:modelValue': [payload: string]
 }
 
-export interface TabsProvideValue {
-  modelValue: Ref<string | undefined>
-  changeModelValue: (value: string) => void
-  orientation: Ref<DataOrientation>
-  dir: Ref<Direction>
-  activationMode: 'automatic' | 'manual'
-  baseId: string
-}
-
 const props = withDefaults(defineProps<TabsRootProps>(), {
   orientation: 'horizontal',
   activationMode: 'automatic',
@@ -56,7 +57,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
   passive: (props.modelValue === undefined) as false,
 })
 
-provide<TabsProvideValue>(TABS_INJECTION_KEY, {
+provideTabsRootContext({
   modelValue,
   changeModelValue: (value: string) => {
     modelValue.value = value
diff --git a/packages/radix-vue/src/Tabs/TabsTrigger.vue b/packages/radix-vue/src/Tabs/TabsTrigger.vue
index c35fdfdf0..2563ff0c8 100644
--- a/packages/radix-vue/src/Tabs/TabsTrigger.vue
+++ b/packages/radix-vue/src/Tabs/TabsTrigger.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, inject } from 'vue'
-import { TABS_INJECTION_KEY } from './TabsRoot.vue'
+import { computed } from 'vue'
+import { injectTabsRootContext } from './TabsRoot.vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -17,12 +17,12 @@ const props = withDefaults(defineProps<TabsTriggerProps>(), {
   disabled: false,
   as: 'button',
 })
-const context = inject(TABS_INJECTION_KEY)
+const rootContext = injectTabsRootContext()
 
-const triggerId = computed(() => makeTriggerId(context!.baseId, props.value))
-const contentId = computed(() => makeContentId(context!.baseId, props.value))
+const triggerId = computed(() => makeTriggerId(rootContext.baseId, props.value))
+const contentId = computed(() => makeContentId(rootContext.baseId, props.value))
 
-const isSelected = computed(() => props.value === context?.modelValue.value)
+const isSelected = computed(() => props.value === rootContext.modelValue.value)
 </script>
 
 <template>
@@ -38,25 +38,25 @@ const isSelected = computed(() => props.value === context?.modelValue.value)
       :data-state="isSelected ? 'active' : 'inactive'"
       :disabled="disabled"
       :data-disabled="disabled ? '' : undefined"
-      :data-orientation="context?.orientation.value"
+      :data-orientation="rootContext.orientation.value"
       @mousedown.left="(event) => {
         // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
         // but not when the control key is pressed (avoiding MacOS right click)
         if (!disabled && event.ctrlKey === false) {
-          context?.changeModelValue(value);
+          rootContext.changeModelValue(value);
         }
         else {
           // prevent focus to avoid accidental activation
           event.preventDefault();
         }
       }"
-      @keydown.enter.space="context?.changeModelValue(value)"
+      @keydown.enter.space="rootContext.changeModelValue(value)"
       @focus="() => {
         // handle 'automatic' activation if necessary
         // ie. activate tab following focus
-        const isAutomaticActivation = context?.activationMode !== 'manual';
+        const isAutomaticActivation = rootContext.activationMode !== 'manual';
         if (!isSelected && !disabled && isAutomaticActivation) {
-          context?.changeModelValue(value);
+          rootContext.changeModelValue(value);
         }
       }"
     >
diff --git a/packages/radix-vue/src/Toast/FocusProxy.vue b/packages/radix-vue/src/Toast/FocusProxy.vue
index 10a17e748..712306e70 100644
--- a/packages/radix-vue/src/Toast/FocusProxy.vue
+++ b/packages/radix-vue/src/Toast/FocusProxy.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { VisuallyHidden } from '@/VisuallyHidden'
-import { inject } from 'vue'
-import { TOAST_PROVIDER_INJECTION_KEY } from './ToastProvider.vue'
+import { injectToastProviderContext } from './ToastProvider.vue'
 
 const emits = defineEmits<{
   'focusFromOutsideViewport': [void]
 }>()
 
-const context = inject(TOAST_PROVIDER_INJECTION_KEY)
+const providerContext = injectToastProviderContext()
 </script>
 
 <template>
@@ -17,7 +16,7 @@ const context = inject(TOAST_PROVIDER_INJECTION_KEY)
     style="position: 'fixed'"
     @focus="(event) => {
       const prevFocusedElement = event.relatedTarget as HTMLElement | null;
-      const isFocusFromOutsideViewport = !context!.viewport.value?.contains(prevFocusedElement);
+      const isFocusFromOutsideViewport = !providerContext.viewport.value?.contains(prevFocusedElement);
       if (isFocusFromOutsideViewport) emits('focusFromOutsideViewport');
     }"
   >
diff --git a/packages/radix-vue/src/Toast/ToastAnnounce.vue b/packages/radix-vue/src/Toast/ToastAnnounce.vue
index 9069bfd4a..cd051397c 100644
--- a/packages/radix-vue/src/Toast/ToastAnnounce.vue
+++ b/packages/radix-vue/src/Toast/ToastAnnounce.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { inject, ref } from 'vue'
-import { TOAST_PROVIDER_INJECTION_KEY } from './ToastProvider.vue'
+import { ref } from 'vue'
+import { injectToastProviderContext } from './ToastProvider.vue'
 import { VisuallyHidden } from '@/VisuallyHidden'
 import { useTimeout } from '@vueuse/shared'
 import { useRafFn } from '@vueuse/core'
 
-const context = inject(TOAST_PROVIDER_INJECTION_KEY)
+const providerContext = injectToastProviderContext()
 
 const isAnnounced = useTimeout(1000)
 const renderAnnounceText = ref(false)
@@ -17,7 +17,7 @@ useRafFn(() => {
 
 <template>
   <VisuallyHidden v-if="isAnnounced || renderAnnounceText">
-    {{ context?.label.value }}
+    {{ providerContext.label.value }}
     <slot />
   </VisuallyHidden>
 </template>
diff --git a/packages/radix-vue/src/Toast/ToastClose.vue b/packages/radix-vue/src/Toast/ToastClose.vue
index 51ff5e31d..2304508d8 100644
--- a/packages/radix-vue/src/Toast/ToastClose.vue
+++ b/packages/radix-vue/src/Toast/ToastClose.vue
@@ -2,15 +2,14 @@
 import { Primitive } from '@/Primitive'
 import type { PrimitiveProps } from '@/Primitive'
 import ToastAnnounceExclude from './ToastAnnounceExclude.vue'
-import { TOAST_INTERACTIVE_CONTEXT } from './ToastImpl.vue'
-import { inject } from 'vue'
+import { injectToastRootContext } from './ToastRootImpl.vue'
 
 export interface ToastCloseProps extends PrimitiveProps {}
 const props = withDefaults(defineProps<ToastCloseProps>(), {
   as: 'button',
 })
 
-const interactiveContext = inject(TOAST_INTERACTIVE_CONTEXT)
+const rootContext = injectToastRootContext()
 </script>
 
 <template>
@@ -18,7 +17,7 @@ const interactiveContext = inject(TOAST_INTERACTIVE_CONTEXT)
     <Primitive
       v-bind="props"
       :type="as === 'button' ? 'button' : undefined "
-      @click="interactiveContext?.onClose()"
+      @click="rootContext.onClose()"
     >
       <slot />
     </Primitive>
diff --git a/packages/radix-vue/src/Toast/ToastProvider.vue b/packages/radix-vue/src/Toast/ToastProvider.vue
index b3ca997b2..8afe9c140 100644
--- a/packages/radix-vue/src/Toast/ToastProvider.vue
+++ b/packages/radix-vue/src/Toast/ToastProvider.vue
@@ -1,7 +1,8 @@
 <script lang="ts">
 import type { SwipeDirection } from './utils'
+import { createContext } from '@/shared'
 
-type ToastProviderContextValue = {
+type ToastProviderContext = {
   label: Ref<string>
   duration: Ref<number>
   swipeDirection: Ref< SwipeDirection>
@@ -15,7 +16,8 @@ type ToastProviderContextValue = {
   isClosePausedRef: Ref<boolean>
 }
 
-export const TOAST_PROVIDER_INJECTION_KEY = Symbol() as InjectionKey<ToastProviderContextValue>
+export const [injectToastProviderContext, provideToastProviderContext]
+  = createContext<ToastProviderContext>('ToastProvider')
 
 export interface ToastProviderProps {
   /**
@@ -43,7 +45,7 @@ export interface ToastProviderProps {
 </script>
 
 <script setup lang="ts">
-import { type InjectionKey, type Ref, provide, ref, toRefs } from 'vue'
+import { type Ref, ref, toRefs } from 'vue'
 
 const props = withDefaults(defineProps<ToastProviderProps>(), {
   label: 'Notification',
@@ -63,7 +65,7 @@ if (props.label && typeof props.label === 'string' && !props.label.trim()) {
   throw new Error(error)
 }
 
-provide(TOAST_PROVIDER_INJECTION_KEY, {
+provideToastProviderContext({
   label,
   duration,
   swipeDirection,
diff --git a/packages/radix-vue/src/Toast/ToastRoot.vue b/packages/radix-vue/src/Toast/ToastRoot.vue
index bc937da6f..cff09b241 100644
--- a/packages/radix-vue/src/Toast/ToastRoot.vue
+++ b/packages/radix-vue/src/Toast/ToastRoot.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Presence } from '@/Presence'
-import ToastImpl, { type ToastImplEmits, type ToastImplProps } from './ToastImpl.vue'
+import ToastRootImpl, { type ToastRootImplEmits, type ToastRootImplProps } from './ToastRootImpl.vue'
 import { useVModel } from '@vueuse/core'
 
 const props = withDefaults(defineProps<ToastRootProps>(), {
@@ -10,7 +10,7 @@ const props = withDefaults(defineProps<ToastRootProps>(), {
 })
 const emits = defineEmits<ToastRootEmits>()
 
-export interface ToastRootProps extends ToastImplProps {
+export interface ToastRootProps extends ToastRootImplProps {
   defaultOpen?: boolean
   /**
    * Used to force mounting when more control is needed. Useful when
@@ -19,7 +19,7 @@ export interface ToastRootProps extends ToastImplProps {
   forceMount?: true
 }
 
-export type ToastRootEmits = ToastImplEmits & {
+export type ToastRootEmits = ToastRootImplEmits & {
   'update:open': [value: boolean]
 }
 
@@ -31,7 +31,7 @@ const open = useVModel(props, 'open', emits, {
 
 <template>
   <Presence :present="forceMount || open">
-    <ToastImpl
+    <ToastRootImpl
       :open="open"
       :type="type"
       :duration="duration"
@@ -71,6 +71,6 @@ const open = useVModel(props, 'open', emits, {
       }"
     >
       <slot />
-    </ToastImpl>
+    </ToastRootImpl>
   </Presence>
 </template>
diff --git a/packages/radix-vue/src/Toast/ToastImpl.vue b/packages/radix-vue/src/Toast/ToastRootImpl.vue
similarity index 80%
rename from packages/radix-vue/src/Toast/ToastImpl.vue
rename to packages/radix-vue/src/Toast/ToastRootImpl.vue
index a7fd915ed..ee561ed35 100644
--- a/packages/radix-vue/src/Toast/ToastImpl.vue
+++ b/packages/radix-vue/src/Toast/ToastRootImpl.vue
@@ -1,7 +1,8 @@
 <script lang="ts">
-export const TOAST_INTERACTIVE_CONTEXT = Symbol() as InjectionKey<{
-  onClose(): void
-}>
+import { createContext, useForwardRef } from '@/shared'
+
+export const [injectToastRootContext, provideToastRootContext]
+  = createContext<{ onClose(): void }>('ToastRoot')
 
 export default {
   inheritAttrs: false,
@@ -10,16 +11,15 @@ export default {
 
 <script setup lang="ts">
 import { Primitive, type PrimitiveProps, usePrimitiveElement } from '@/Primitive'
-import { computed, inject, onMounted, onUnmounted, provide, ref, watchEffect } from 'vue'
-import type { ComponentPublicInstance, InjectionKey } from 'vue'
-import { TOAST_PROVIDER_INJECTION_KEY } from './ToastProvider.vue'
+import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
+import { injectToastProviderContext } from './ToastProvider.vue'
 import { getAnnounceTextContent, handleAndDispatchCustomEvent, isDeltaInDirection } from './utils'
 import { type SwipeEvent, TOAST_SWIPE_CANCEL, TOAST_SWIPE_END, TOAST_SWIPE_MOVE, TOAST_SWIPE_START, VIEWPORT_PAUSE, VIEWPORT_RESUME } from './utils'
 import ToastAnnounce from './ToastAnnounce.vue'
-import { useForwardRef } from '@/shared'
 import { onKeyStroke } from '@vueuse/core'
 
-export interface ToastImplProps extends PrimitiveProps {
+export interface ToastRootImplProps extends PrimitiveProps {
   type?: 'foreground' | 'background'
   open?: boolean
   /**
@@ -29,7 +29,7 @@ export interface ToastImplProps extends PrimitiveProps {
   duration?: number
 }
 
-export type ToastImplEmits = {
+export type ToastRootImplEmits = {
   'close': []
   'escapeKeyDown': [event: KeyboardEvent]
   'pause': []
@@ -40,19 +40,19 @@ export type ToastImplEmits = {
   'swipeEnd': [event: SwipeEvent]
 }
 
-const props = withDefaults(defineProps<ToastImplProps>(), {
+const props = withDefaults(defineProps<ToastRootImplProps>(), {
   open: false,
   as: 'li',
 })
 
-const emits = defineEmits<ToastImplEmits>()
+const emits = defineEmits<ToastRootImplEmits>()
 
 const forwardRef = useForwardRef()
 const { primitiveElement, currentElement } = usePrimitiveElement()
-const context = inject(TOAST_PROVIDER_INJECTION_KEY)
+const providerContext = injectToastProviderContext()
 const pointerStartRef = ref<{ x: number; y: number } | null>(null)
 const swipeDeltaRef = ref<{ x: number; y: number } | null>(null)
-const duration = computed(() => props.duration || context!.duration.value)
+const duration = computed(() => props.duration || providerContext.duration.value)
 
 const closeTimerStartTimeRef = ref(0)
 const closeTimerRemainingTimeRef = ref(duration.value)
@@ -71,7 +71,7 @@ function handleClose() {
   // count to SR users and ensure focus isn't lost
   const isFocusInToast = currentElement.value?.contains(document.activeElement)
   if (isFocusInToast)
-    context!.viewport.value?.focus()
+    providerContext.viewport.value?.focus()
   emits('close')
 }
 
@@ -83,7 +83,7 @@ if (props.type && !['foreground', 'background'].includes(props.type)) {
 }
 
 watchEffect((cleanupFn) => {
-  const viewport = context?.viewport.value
+  const viewport = providerContext.viewport.value
   if (viewport) {
     const handleResume = () => {
       startTimer(closeTimerRemainingTimeRef.value)
@@ -108,28 +108,26 @@ watchEffect((cleanupFn) => {
 // we include `open` in deps because closed !== unmounted when animating
 // so it could reopen before being completely unmounted
 watchEffect(() => {
-  if (props.open && !context?.isClosePausedRef.value)
+  if (props.open && !providerContext.isClosePausedRef.value)
     startTimer(duration.value)
 })
 
 onKeyStroke('Escape', (event) => {
   emits('escapeKeyDown', event)
   if (!event.defaultPrevented) {
-    context!.isFocusedToastEscapeKeyDownRef.value = true
+    providerContext.isFocusedToastEscapeKeyDownRef.value = true
     handleClose()
   }
 })
 
 onMounted(() => {
-  context?.onToastAdd()
+  providerContext.onToastAdd()
 })
 onUnmounted(() => {
-  context?.onToastRemove()
+  providerContext.onToastRemove()
 })
 
-provide(TOAST_INTERACTIVE_CONTEXT, {
-  onClose: handleClose,
-})
+provideToastRootContext({ onClose: handleClose })
 </script>
 
 <template>
@@ -142,7 +140,7 @@ provide(TOAST_INTERACTIVE_CONTEXT, {
     {{ announceTextContent }}
   </ToastAnnounce>
 
-  <Teleport :to="context?.viewport.value">
+  <Teleport :to="providerContext.viewport.value">
     <Primitive
       :ref="v => {
         forwardRef(v)
@@ -157,7 +155,7 @@ provide(TOAST_INTERACTIVE_CONTEXT, {
       :as="as"
       :as-child="asChild"
       :data-state="open ? 'open' : 'closed'"
-      :data-swipe-direction="context!.swipeDirection.value"
+      :data-swipe-direction="providerContext.swipeDirection.value"
       :style="{ userSelect: 'none', touchAction: 'none' }"
       @pointerdown.left="(event: PointerEvent) => {
         pointerStartRef = { x: event.clientX, y: event.clientY };
@@ -167,8 +165,8 @@ provide(TOAST_INTERACTIVE_CONTEXT, {
         const x = event.clientX - pointerStartRef.x;
         const y = event.clientY - pointerStartRef.y;
         const hasSwipeMoveStarted = Boolean(swipeDeltaRef);
-        const isHorizontalSwipe = ['left', 'right'].includes(context!.swipeDirection.value);
-        const clamp = ['left', 'up'].includes(context!.swipeDirection.value)
+        const isHorizontalSwipe = ['left', 'right'].includes(providerContext.swipeDirection.value);
+        const clamp = ['left', 'up'].includes(providerContext.swipeDirection.value)
           ? Math.min
           : Math.max;
         const clampedX = isHorizontalSwipe ? clamp(0, x) : 0;
@@ -180,7 +178,7 @@ provide(TOAST_INTERACTIVE_CONTEXT, {
           swipeDeltaRef = delta;
           handleAndDispatchCustomEvent(TOAST_SWIPE_MOVE, (ev: SwipeEvent) => emits('swipeMove', ev), eventDetail);
         }
-        else if (isDeltaInDirection(delta, context!.swipeDirection.value, moveStartBuffer)) {
+        else if (isDeltaInDirection(delta, providerContext.swipeDirection.value, moveStartBuffer)) {
           swipeDeltaRef = delta;
           handleAndDispatchCustomEvent(TOAST_SWIPE_START, (ev: SwipeEvent) => emits('swipeStart', ev), eventDetail);
           (event.target as HTMLElement).setPointerCapture(event.pointerId);
@@ -203,7 +201,7 @@ provide(TOAST_INTERACTIVE_CONTEXT, {
           const toast = event.currentTarget;
           const eventDetail = { originalEvent: event, delta };
           if (
-            isDeltaInDirection(delta, context!.swipeDirection.value, context!.swipeThreshold.value)
+            isDeltaInDirection(delta, providerContext.swipeDirection.value, providerContext.swipeThreshold.value)
           ) {
             handleAndDispatchCustomEvent(TOAST_SWIPE_END, (ev: SwipeEvent) => emits('swipeEnd', ev), eventDetail);
           }
diff --git a/packages/radix-vue/src/Toast/ToastViewport.vue b/packages/radix-vue/src/Toast/ToastViewport.vue
index b4a9ac12e..9db254780 100644
--- a/packages/radix-vue/src/Toast/ToastViewport.vue
+++ b/packages/radix-vue/src/Toast/ToastViewport.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { Primitive, usePrimitiveElement } from '@/Primitive'
 import type { PrimitiveProps } from '@/Primitive'
-import { type ComponentPublicInstance, computed, inject, onMounted, ref, toRefs, watchEffect } from 'vue'
-import { TOAST_PROVIDER_INJECTION_KEY } from './ToastProvider.vue'
+import { type ComponentPublicInstance, computed, onMounted, ref, toRefs, watchEffect } from 'vue'
+import { injectToastProviderContext } from './ToastProvider.vue'
 import { onKeyStroke, unrefElement } from '@vueuse/core'
 import FocusProxy from './FocusProxy.vue'
 import { focusFirst, getTabbableCandidates } from '@/FocusScope/utils'
@@ -34,8 +34,8 @@ const { hotkey, label } = toRefs(props)
 const { primitiveElement, currentElement } = usePrimitiveElement()
 const { createCollection } = useCollection()
 const collections = createCollection(currentElement)
-const context = inject(TOAST_PROVIDER_INJECTION_KEY)
-const hasToasts = computed(() => context!.toastCount.value > 0)
+const providerContext = injectToastProviderContext()
+const hasToasts = computed(() => providerContext.toastCount.value > 0)
 const headFocusProxyRef = ref<HTMLElement>()
 const tailFocusProxyRef = ref<HTMLElement>()
 
@@ -44,25 +44,25 @@ onKeyStroke(hotkey.value, () => {
 })
 
 onMounted(() => {
-  context?.onViewportChange(currentElement.value)
+  providerContext.onViewportChange(currentElement.value)
 })
 
 watchEffect((cleanupFn) => {
   const viewport = currentElement.value
-  if (hasToasts.value && viewport && context) {
+  if (hasToasts.value && viewport) {
     const handlePause = () => {
-      if (!context.isClosePausedRef.value) {
+      if (!providerContext.isClosePausedRef.value) {
         const pauseEvent = new CustomEvent(VIEWPORT_PAUSE)
         viewport.dispatchEvent(pauseEvent)
-        context.isClosePausedRef.value = true
+        providerContext.isClosePausedRef.value = true
       }
     }
 
     const handleResume = () => {
-      if (context.isClosePausedRef.value) {
+      if (providerContext.isClosePausedRef.value) {
         const resumeEvent = new CustomEvent(VIEWPORT_RESUME)
         viewport.dispatchEvent(resumeEvent)
-        context.isClosePausedRef.value = false
+        providerContext.isClosePausedRef.value = false
       }
     }
 
diff --git a/packages/radix-vue/src/Toggle/ToggleRoot.vue b/packages/radix-vue/src/Toggle/ToggleRoot.vue
index ac3455114..32c3bef68 100644
--- a/packages/radix-vue/src/Toggle/ToggleRoot.vue
+++ b/packages/radix-vue/src/Toggle/ToggleRoot.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { type ComputedRef, type InjectionKey, type Ref, computed } from 'vue'
+import { computed } from 'vue'
 
 export interface ToggleProps extends PrimitiveProps {
   /**
@@ -20,14 +20,6 @@ export type ToggleEmits = {
   'update:pressed': [value: boolean]
 }
 
-export const TOGGLE_INJECTION_KEY
-  = Symbol() as InjectionKey<ToggleProvideValue>
-
-export interface ToggleProvideValue {
-  modelValue?: Readonly<Ref<ToggleProps['pressed']>>
-  dataState: ComputedRef<DataState>
-}
-
 export type DataState = 'on' | 'off'
 </script>
 
diff --git a/packages/radix-vue/src/ToggleGroup/ToggleGroupItem.vue b/packages/radix-vue/src/ToggleGroup/ToggleGroupItem.vue
index 6b48d4c81..773609183 100644
--- a/packages/radix-vue/src/ToggleGroup/ToggleGroupItem.vue
+++ b/packages/radix-vue/src/ToggleGroup/ToggleGroupItem.vue
@@ -8,8 +8,8 @@ export interface ToggleGroupItemProps extends ToggleProps {
 </script>
 
 <script setup lang="ts">
-import { computed, inject } from 'vue'
-import { TOGGLE_GROUP_INJECTION_KEY } from './ToggleGroupRoot.vue'
+import { computed } from 'vue'
+import { injectToggleGroupRootContext } from './ToggleGroupRoot.vue'
 import { Toggle, type ToggleProps } from '@/Toggle'
 import { RovingFocusItem } from '@/RovingFocus'
 import { Primitive } from '@/Primitive'
@@ -18,14 +18,14 @@ const props = withDefaults(defineProps<ToggleGroupItemProps>(), {
   as: 'button',
 })
 
-const context = inject(TOGGLE_GROUP_INJECTION_KEY)
-const disabled = computed(() => context?.disabled?.value || props.disabled)
-const pressed = computed(() => context?.modelValue.value?.includes(props.value))
+const rootContext = injectToggleGroupRootContext()
+const disabled = computed(() => rootContext.disabled?.value || props.disabled)
+const pressed = computed(() => rootContext.modelValue.value?.includes(props.value))
 </script>
 
 <template>
   <component
-    :is="context?.rovingFocus.value ? RovingFocusItem : Primitive"
+    :is="rootContext.rovingFocus.value ? RovingFocusItem : Primitive"
     as-child
     :focusable="!disabled"
     :active="pressed"
@@ -34,11 +34,11 @@ const pressed = computed(() => context?.modelValue.value?.includes(props.value))
       v-bind="props"
       :disabled="disabled"
       :pressed="
-        context?.type === 'single'
-          ? context?.modelValue.value === value
-          : context?.modelValue.value?.includes(value)
+        rootContext.type === 'single'
+          ? rootContext.modelValue.value === value
+          : rootContext.modelValue.value?.includes(value)
       "
-      @update:pressed="context?.changeModelValue(value)"
+      @update:pressed="rootContext.changeModelValue(value)"
     >
       <slot />
     </Toggle>
diff --git a/packages/radix-vue/src/ToggleGroup/ToggleGroupRoot.vue b/packages/radix-vue/src/ToggleGroup/ToggleGroupRoot.vue
index e918b1d53..6af9b154d 100644
--- a/packages/radix-vue/src/ToggleGroup/ToggleGroupRoot.vue
+++ b/packages/radix-vue/src/ToggleGroup/ToggleGroupRoot.vue
@@ -1,9 +1,9 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
 import type { DataOrientation, Direction } from '../shared/types'
 import { useSingleOrMultipleValue } from '@/shared/useSingleOrMultipleValue'
 import { RovingFocusGroup } from '@/RovingFocus'
-import { useDirection } from '@/shared'
+import { createContext, useDirection } from '@/shared'
 
 type TypeEnum = 'single' | 'multiple'
 
@@ -21,10 +21,7 @@ export type ToggleGroupRootEmits = {
   'update:modelValue': [payload: string]
 }
 
-export const TOGGLE_GROUP_INJECTION_KEY
-  = Symbol() as InjectionKey<ToggleGroupProvideValue>
-
-interface ToggleGroupProvideValue {
+interface ToggleGroupRootContext {
   type: TypeEnum
   modelValue: Ref<string | string[] | undefined>
   changeModelValue: (value: string) => void
@@ -34,10 +31,13 @@ interface ToggleGroupProvideValue {
   rovingFocus: Ref<boolean>
   disabled?: Ref<boolean>
 }
+
+export const [injectToggleGroupRootContext, provideToggleGroupRootContext]
+  = createContext<ToggleGroupRootContext>('ToggleGroupRoot')
 </script>
 
 <script setup lang="ts">
-import { provide, toRefs } from 'vue'
+import { toRefs } from 'vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 
 const props = withDefaults(defineProps<ToggleGroupRootProps>(), {
@@ -54,7 +54,7 @@ const dir = useDirection(propDir)
 
 const { modelValue, changeModelValue } = useSingleOrMultipleValue(props, emits)
 
-provide(TOGGLE_GROUP_INJECTION_KEY, {
+provideToggleGroupRootContext({
   type: props.type,
   modelValue,
   changeModelValue,
diff --git a/packages/radix-vue/src/Toolbar/ToolbarRoot.vue b/packages/radix-vue/src/Toolbar/ToolbarRoot.vue
index c1450846f..681aafb66 100644
--- a/packages/radix-vue/src/Toolbar/ToolbarRoot.vue
+++ b/packages/radix-vue/src/Toolbar/ToolbarRoot.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
 import type { DataOrientation, Direction } from '@/shared/types'
-import { useDirection } from '@/shared'
+import { createContext, useDirection } from '@/shared'
 
 export interface ToolbarRootProps extends PrimitiveProps {
   orientation?: DataOrientation
@@ -9,17 +9,17 @@ export interface ToolbarRootProps extends PrimitiveProps {
   loop?: boolean
 }
 
-export const TOOLBAR_INJECTION_KEY
-  = Symbol() as InjectionKey<ToolbarProvideValue>
-
-export interface ToolbarProvideValue {
+export interface ToolbarRootContext {
   orientation: Ref<DataOrientation>
   dir: Ref<Direction>
 }
+
+export const [injectToolbarRootContext, provideToolbarRootContext]
+  = createContext<ToolbarRootContext>('ToolbarRoot')
 </script>
 
 <script setup lang="ts">
-import { provide, toRefs } from 'vue'
+import { toRefs } from 'vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 import { RovingFocusGroup } from '@/RovingFocus'
 
@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<ToolbarRootProps>(), {
 const { orientation, dir: propDir } = toRefs(props)
 const dir = useDirection(propDir)
 
-provide(TOOLBAR_INJECTION_KEY, { orientation, dir })
+provideToolbarRootContext({ orientation, dir })
 </script>
 
 <template>
diff --git a/packages/radix-vue/src/Toolbar/ToolbarSeparator.vue b/packages/radix-vue/src/Toolbar/ToolbarSeparator.vue
index 19dd87589..f9713aaaf 100644
--- a/packages/radix-vue/src/Toolbar/ToolbarSeparator.vue
+++ b/packages/radix-vue/src/Toolbar/ToolbarSeparator.vue
@@ -1,18 +1,17 @@
 <script setup lang="ts">
-import { inject } from 'vue'
 import BaseSeparator from '../shared/component/BaseSeparator.vue'
-import { TOOLBAR_INJECTION_KEY } from './ToolbarRoot.vue'
+import { injectToolbarRootContext } from './ToolbarRoot.vue'
 import { type PrimitiveProps } from '@/Primitive'
 
 export interface ToolbarSeparatorProps extends PrimitiveProps {}
 const props = defineProps<ToolbarSeparatorProps>()
 
-const context = inject(TOOLBAR_INJECTION_KEY)
+const rootContext = injectToolbarRootContext()
 </script>
 
 <template>
   <BaseSeparator
-    :orientation="context?.orientation.value"
+    :orientation="rootContext.orientation.value"
     :as-child="props.asChild"
     :as="as"
   >
diff --git a/packages/radix-vue/src/Toolbar/ToolbarToggleGroup.vue b/packages/radix-vue/src/Toolbar/ToolbarToggleGroup.vue
index b168054b4..977c4d4a9 100644
--- a/packages/radix-vue/src/Toolbar/ToolbarToggleGroup.vue
+++ b/packages/radix-vue/src/Toolbar/ToolbarToggleGroup.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { TOOLBAR_INJECTION_KEY } from './ToolbarRoot.vue'
+import { injectToolbarRootContext } from './ToolbarRoot.vue'
 import {
   ToggleGroupRoot,
   type ToggleGroupRootEmits,
@@ -12,7 +11,7 @@ const props = defineProps<ToolbarToggleGroupProps>()
 
 const emits = defineEmits<ToolbarToggleGroupEmits>()
 
-const context = inject(TOOLBAR_INJECTION_KEY)
+const rootContext = injectToolbarRootContext()
 
 export interface ToolbarToggleGroupProps extends ToggleGroupRootProps {}
 export type ToolbarToggleGroupEmits = ToggleGroupRootEmits
@@ -23,8 +22,8 @@ const emitsAsProps = useEmitAsProps(emits)
 <template>
   <ToggleGroupRoot
     v-bind="{ ...props, ...emitsAsProps }"
-    :data-orientation="context?.orientation.value"
-    :dir="context?.dir.value"
+    :data-orientation="rootContext.orientation.value"
+    :dir="rootContext.dir.value"
     :roving-focus="false"
   >
     <slot />
diff --git a/packages/radix-vue/src/Tooltip/TooltipContent.vue b/packages/radix-vue/src/Tooltip/TooltipContent.vue
index a1858c737..8709b138f 100644
--- a/packages/radix-vue/src/Tooltip/TooltipContent.vue
+++ b/packages/radix-vue/src/Tooltip/TooltipContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import TooltipContentImpl, { type TooltipContentImplEmits, type TooltipContentImplProps } from './TooltipContentImpl.vue'
 import TooltipContentHoverable from './TooltipContentHoverable.vue'
-import { injectTooltipRootContent } from './TooltipRoot.vue'
+import { injectTooltipRootContext } from './TooltipRoot.vue'
 import { useForwardPropsEmits } from '@/shared'
 
 export interface TooltipContentProps extends TooltipContentImplProps {}
@@ -12,14 +12,14 @@ const props = withDefaults(defineProps<TooltipContentProps>(), {
 })
 const emits = defineEmits<TooltipContentEmits>()
 
-const context = injectTooltipRootContent()
+const rootContext = injectTooltipRootContext()
 const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
   <component
-    :is="context.disableHoverableContent.value ? TooltipContentImpl : TooltipContentHoverable"
-    v-if="context.open.value"
+    :is="rootContext.disableHoverableContent.value ? TooltipContentImpl : TooltipContentHoverable"
+    v-if="rootContext.open.value"
     v-bind="forwarded"
   >
     <slot />
diff --git a/packages/radix-vue/src/Tooltip/TooltipContentHoverable.vue b/packages/radix-vue/src/Tooltip/TooltipContentHoverable.vue
index 3fe6da59f..16887d3c8 100644
--- a/packages/radix-vue/src/Tooltip/TooltipContentHoverable.vue
+++ b/packages/radix-vue/src/Tooltip/TooltipContentHoverable.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watchEffect } from 'vue'
 import TooltipContentImpl, { type TooltipContentImplProps } from './TooltipContentImpl.vue'
-import { injectTooltipRootContent } from './TooltipRoot.vue'
+import { injectTooltipRootContext } from './TooltipRoot.vue'
 import { injectTooltipProviderContext } from './TooltipProvider.vue'
 import { usePrimitiveElement } from '@/Primitive'
 import { type Polygon, getExitSideFromRect, getHull, getPaddedExitPoints, getPointsFromRect, isPointInPolygon } from './utils'
@@ -9,7 +9,7 @@ import { type Polygon, getExitSideFromRect, getHull, getPaddedExitPoints, getPoi
 const props = defineProps<TooltipContentImplProps>()
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
-const { trigger, onClose } = injectTooltipRootContent()
+const { trigger, onClose } = injectTooltipRootContext()
 const providerContext = injectTooltipProviderContext()
 
 const pointerGraceArea = ref<Polygon | null>(null)
diff --git a/packages/radix-vue/src/Tooltip/TooltipContentImpl.vue b/packages/radix-vue/src/Tooltip/TooltipContentImpl.vue
index 93db84b37..abb8b1bf3 100644
--- a/packages/radix-vue/src/Tooltip/TooltipContentImpl.vue
+++ b/packages/radix-vue/src/Tooltip/TooltipContentImpl.vue
@@ -40,7 +40,7 @@ import { PopperContent } from '@/Popper'
 import { type PrimitiveProps } from '@/Primitive'
 import { VisuallyHidden } from '@/VisuallyHidden'
 import { type VNode, computed, onMounted, ref, useSlots } from 'vue'
-import { injectTooltipRootContent } from './TooltipRoot.vue'
+import { injectTooltipRootContext } from './TooltipRoot.vue'
 import { DismissableLayer } from '@/DismissableLayer'
 
 const props = withDefaults(defineProps<TooltipContentImplProps>(), {
@@ -58,7 +58,7 @@ const props = withDefaults(defineProps<TooltipContentImplProps>(), {
 const emits = defineEmits<TooltipContentImplEmits>()
 
 const contentElement = ref<HTMLElement>()
-const context = injectTooltipRootContent()
+const rootContext = injectTooltipRootContext()
 
 const ariaLabel = computed(() => {
   if (props.ariaLabel)
@@ -86,11 +86,11 @@ onMounted(() => {
   // Close the tooltip if the trigger is scrolled
   useEventListener(window, 'scroll', (event) => {
     const target = event.target as HTMLElement
-    if (target?.contains(context.trigger.value!))
-      context.onClose()
+    if (target?.contains(rootContext.trigger.value!))
+      rootContext.onClose()
   })
   // Close this tooltip if another one opens
-  useEventListener(window, TOOLTIP_OPEN, context.onClose)
+  useEventListener(window, TOOLTIP_OPEN, rootContext.onClose)
 })
 </script>
 
@@ -106,11 +106,11 @@ onMounted(() => {
       emits('pointerDownOutside', event)
     }"
     @focus-outside.prevent
-    @dismiss="context.onClose()"
+    @dismiss="rootContext.onClose()"
   >
     <PopperContent
       ref="contentElement"
-      :data-state="context.stateAttribute.value"
+      :data-state="rootContext.stateAttribute.value"
       v-bind="{ ...$attrs, ...popperContentProps }"
       :style="{
         '--radix-tooltip-content-transform-origin': 'var(--radix-popper-transform-origin)',
@@ -121,7 +121,7 @@ onMounted(() => {
       }"
     >
       <slot />
-      <VisuallyHidden :id="context.contentId" role="tooltip">
+      <VisuallyHidden :id="rootContext.contentId" role="tooltip">
         {{ ariaLabel }}
       </VisuallyHidden>
     </PopperContent>
diff --git a/packages/radix-vue/src/Tooltip/TooltipProvider.vue b/packages/radix-vue/src/Tooltip/TooltipProvider.vue
index 6daf82a0e..0a3d64f7f 100644
--- a/packages/radix-vue/src/Tooltip/TooltipProvider.vue
+++ b/packages/radix-vue/src/Tooltip/TooltipProvider.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { createContext } from '@/shared'
 
-interface TooltipProviderContextValue {
+interface TooltipProviderContext {
   isOpenDelayed: Ref<boolean>
   delayDuration: Ref<number>
   onOpen(): void
@@ -13,7 +13,7 @@ interface TooltipProviderContextValue {
 }
 
 export const [injectTooltipProviderContext, provideTooltipProviderContext]
-  = createContext<TooltipProviderContextValue>('TooltipProvider')
+  = createContext<TooltipProviderContext>('TooltipProvider')
 
 export interface TooltipProviderProps {
   /**
diff --git a/packages/radix-vue/src/Tooltip/TooltipRoot.vue b/packages/radix-vue/src/Tooltip/TooltipRoot.vue
index 8ff0b141a..2c51e86c9 100644
--- a/packages/radix-vue/src/Tooltip/TooltipRoot.vue
+++ b/packages/radix-vue/src/Tooltip/TooltipRoot.vue
@@ -36,7 +36,7 @@ export type TooltipRootEmits = {
   'update:open': [value: boolean]
 }
 
-export interface TooltipContextValue {
+export interface TooltipContext {
   contentId: string
   open: Ref<boolean>
   stateAttribute: Ref<'closed' | 'delayed-open' | 'instant-open'>
@@ -50,8 +50,8 @@ export interface TooltipContextValue {
   disableClosingTrigger: Ref<boolean>
 }
 
-export const [injectTooltipRootContent, provideTooltipRootContext]
-  = createContext<TooltipContextValue>('TooltipRoot')
+export const [injectTooltipRootContext, provideTooltipRootContext]
+  = createContext<TooltipContext>('TooltipRoot')
 </script>
 
 <script setup lang="ts">
diff --git a/packages/radix-vue/src/Tooltip/TooltipTrigger.vue b/packages/radix-vue/src/Tooltip/TooltipTrigger.vue
index 4b0c87be2..3c4fd7b86 100644
--- a/packages/radix-vue/src/Tooltip/TooltipTrigger.vue
+++ b/packages/radix-vue/src/Tooltip/TooltipTrigger.vue
@@ -9,7 +9,7 @@ export interface TooltipTriggerProps extends PrimitiveProps {}
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { injectTooltipRootContent } from './TooltipRoot.vue'
+import { injectTooltipRootContext } from './TooltipRoot.vue'
 import { PopperAnchor } from '@/Popper'
 import {
   Primitive,
@@ -21,7 +21,7 @@ import { injectTooltipProviderContext } from './TooltipProvider.vue'
 const props = withDefaults(defineProps<TooltipTriggerProps>(), {
   as: 'button',
 })
-const context = injectTooltipRootContent()
+const rootContext = injectTooltipRootContext()
 const providerContext = injectTooltipProviderContext()
 
 const { primitiveElement, currentElement: triggerElement }
@@ -40,7 +40,7 @@ function handlePointerDown() {
 }
 
 onMounted(() => {
-  context.onTriggerChange(triggerElement.value)
+  rootContext.onTriggerChange(triggerElement.value)
 })
 </script>
 
@@ -49,9 +49,9 @@ onMounted(() => {
     <Primitive
       ref="primitiveElement"
       :aria-describedby="
-        context.open.value ? context.contentId : undefined
+        rootContext.open.value ? rootContext.contentId : undefined
       "
-      :data-state="context.stateAttribute.value"
+      :data-state="rootContext.stateAttribute.value"
       :as="as"
       :as-child="props.asChild"
       @pointermove="(event) => {
@@ -59,21 +59,21 @@ onMounted(() => {
         if (
           !hasPointerMoveOpened && !providerContext.isPointerInTransitRef.value
         ) {
-          context.onTriggerEnter();
+          rootContext.onTriggerEnter();
           hasPointerMoveOpened = true;
         }
       }"
       @pointerleave="(event) => {
-        context.onTriggerLeave();
+        rootContext.onTriggerLeave();
         hasPointerMoveOpened = false;
       }"
       @pointerdown="handlePointerDown"
       @focus="() => {
-        if (!isPointerDown) context.onOpen()
+        if (!isPointerDown) rootContext.onOpen()
       }"
-      @blur="context.onClose()"
+      @blur="rootContext.onClose()"
       @click="() => {
-        if (!context.disableClosingTrigger.value) context.onClose()
+        if (!rootContext.disableClosingTrigger.value) rootContext.onClose()
       }"
     >
       <slot />
diff --git a/packages/radix-vue/src/shared/createContext.ts b/packages/radix-vue/src/shared/createContext.ts
index 550f3c2db..6f5d68099 100644
--- a/packages/radix-vue/src/shared/createContext.ts
+++ b/packages/radix-vue/src/shared/createContext.ts
@@ -1,25 +1,50 @@
 import { type InjectionKey, inject, provide } from 'vue'
 
-export function createContext<ContextValue>(rootComponentName: string) {
-  const injectionKey: InjectionKey<ContextValue | null> = Symbol(
-    `${rootComponentName}Context`,
-  )
+/**
+ * @param providerComponentName - The name(s) of the component(s) providing the context.
+ *
+ * There are situations where context can come from multiple components. In such cases, you might need to give an array of component names to provide your context, instead of just a single string.
+ *
+ * @param contextName The description for injection key symbol.
+ */
+export function createContext<ContextValue>(
+  providerComponentName: string | string[],
+  contextName?: string,
+) {
+  const symbolDescription
+    = typeof providerComponentName === 'string' && !contextName
+      ? `${providerComponentName}Context`
+      : contextName
+
+  const injectionKey: InjectionKey<ContextValue | null> = Symbol(symbolDescription)
 
   /**
-   * @throws When failed to inject context and fallback not specified.
+   * @param fallback The context value to return if the injection fails.
+   *
+   * @throws When context injection failed and no fallback is specified.
    * This happens when the component injecting the context is not a child of the root component providing the context.
    */
-  const injectContext = <T extends ContextValue | null | undefined = ContextValue>(
-    fallback?: T,
-  ): T extends null ? ContextValue | null : ContextValue => {
+  const injectContext = <
+    T extends ContextValue | null | undefined = ContextValue,
+  >(
+      fallback?: T,
+    ): T extends null ? ContextValue | null : ContextValue => {
     const context = inject(injectionKey, fallback)
     if (context)
       return context
 
     if (context === null)
-      return null as any
+      return context as any
 
-    throw new Error(`Component must be used within ${rootComponentName}`)
+    throw new Error(
+      `Injection \`${injectionKey.toString()}\` not found. Component must be used within ${
+        Array.isArray(providerComponentName)
+          ? `one of the following components: ${providerComponentName.join(
+              ', ',
+            )}`
+          : `\`${providerComponentName}\``
+      }`,
+    )
   }
 
   const provideContext = (contextValue: ContextValue) => {
diff --git a/playground/vue3/package.json b/playground/vue3/package.json
index b756a2721..b4021281e 100644
--- a/playground/vue3/package.json
+++ b/playground/vue3/package.json
@@ -22,7 +22,7 @@
     "@vitejs/plugin-vue": "^4.1.0",
     "autoprefixer": "^10.4.14",
     "eslint": "^8.43.0",
-    "postcss": "^8.4.24",
+    "postcss": "^8.4.31",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.0.2",
     "unplugin-vue-components": "^0.25.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0a193c2c4..9d0bb2a14 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -76,7 +76,7 @@ importers:
         version: 10.4.1(vue@3.3.4)
       autoprefixer:
         specifier: ^10.4.14
-        version: 10.4.14(postcss@8.4.26)
+        version: 10.4.14(postcss@8.4.31)
       eslint:
         specifier: ^8.43.0
         version: 8.43.0
@@ -84,8 +84,8 @@ importers:
         specifier: ^0.16.2
         version: 0.16.2(@types/node@20.4.7)(vite@4.3.9)
       postcss:
-        specifier: ^8.4.26
-        version: 8.4.26
+        specifier: ^8.4.31
+        version: 8.4.31
       tailwindcss:
         specifier: ^3.3.3
         version: 3.3.3(ts-node@10.9.1)
@@ -3205,7 +3205,7 @@ packages:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
     dev: true
 
-  /autoprefixer@10.4.14(postcss@8.4.26):
+  /autoprefixer@10.4.14(postcss@8.4.31):
     resolution: {integrity: sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==}
     engines: {node: ^10 || ^12 || >=14}
     hasBin: true
@@ -3217,7 +3217,7 @@ packages:
       fraction.js: 4.2.1
       normalize-range: 0.1.2
       picocolors: 1.0.0
-      postcss: 8.4.26
+      postcss: 8.4.31
       postcss-value-parser: 4.2.0
     dev: true
 
@@ -3819,7 +3819,7 @@ packages:
     dev: true
 
   /concat-map@0.0.1:
-    resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
 
   /concat-stream@1.6.2:
@@ -7195,6 +7195,7 @@ packages:
       pathe: 1.1.1
       pkg-types: 1.0.3
       ufo: 1.3.0
+    dev: false
 
   /mlly@1.4.2:
     resolution: {integrity: sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==}
@@ -7952,15 +7953,6 @@ packages:
       source-map: 0.6.1
     dev: true
 
-  /postcss@8.4.26:
-    resolution: {integrity: sha512-jrXHFF8iTloAenySjM/ob3gSj7pCu0Ji49hnjqzsgSRa50hkWCKD0HQ+gMNJkW38jBI68MpAAg7ZWwHwX8NMMw==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.6
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
-    dev: true
-
   /postcss@8.4.31:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -9605,7 +9597,7 @@ packages:
     dependencies:
       cac: 6.7.14
       debug: 4.3.4
-      mlly: 1.4.1
+      mlly: 1.4.2
       pathe: 1.1.1
       picocolors: 1.0.0
       source-map: 0.6.1
@@ -9628,7 +9620,7 @@ packages:
     dependencies:
       cac: 6.7.14
       debug: 4.3.4
-      mlly: 1.4.1
+      mlly: 1.4.2
       pathe: 1.1.1
       picocolors: 1.0.0
       vite: 4.3.9(@types/node@18.16.18)
@@ -10251,7 +10243,6 @@ packages:
     resolution: {directory: packages/radix-vue, type: directory}
     id: file:packages/radix-vue
     name: radix-vue
-    version: 0.4.1
     dependencies:
       '@floating-ui/dom': 1.4.2
       '@floating-ui/vue': 1.0.1(vue@3.3.4)