diff --git a/packages/radix-vue/src/Separator/Separator.story.vue b/packages/radix-vue/src/Separator/Separator.story.vue
index a5d99ed49..cacd30df7 100644
--- a/packages/radix-vue/src/Separator/Separator.story.vue
+++ b/packages/radix-vue/src/Separator/Separator.story.vue
@@ -13,6 +13,7 @@ import { Separator } from "./";
An open-source UI component library.
diff --git a/packages/radix-vue/src/Separator/Separator.vue b/packages/radix-vue/src/Separator/Separator.vue
index ddb261eda..5482e16f9 100644
--- a/packages/radix-vue/src/Separator/Separator.vue
+++ b/packages/radix-vue/src/Separator/Separator.vue
@@ -1,20 +1,19 @@
-
+
+
+
diff --git a/packages/radix-vue/src/Separator/index.ts b/packages/radix-vue/src/Separator/index.ts
index aae7f1a62..7d30789b8 100644
--- a/packages/radix-vue/src/Separator/index.ts
+++ b/packages/radix-vue/src/Separator/index.ts
@@ -1 +1 @@
-export { default as Separator } from "./Separator.vue";
+export { default as Separator, type SeparatorProps } from "./Separator.vue";
diff --git a/packages/radix-vue/src/shared/component/BaseSeparator.vue b/packages/radix-vue/src/shared/component/BaseSeparator.vue
index 9cbddf2b6..9f0a3fcc8 100644
--- a/packages/radix-vue/src/shared/component/BaseSeparator.vue
+++ b/packages/radix-vue/src/shared/component/BaseSeparator.vue
@@ -1,9 +1,17 @@
@@ -12,15 +20,36 @@ export interface BaseSeparatorProps extends PrimitiveProps {
import { Primitive } from "@/Primitive";
const props = withDefaults(defineProps
(), {
- asChild: false,
orientation: "horizontal",
});
+
+const ORIENTATIONS = ["horizontal", "vertical"] as const;
+function isValidOrientation(orientation: any): orientation is DataOrientation {
+ return ORIENTATIONS.includes(orientation);
+}
+
+const computedOrientation = computed(() =>
+ isValidOrientation(props.orientation) ? props.orientation : "horizontal"
+);
+// `aria-orientation` defaults to `horizontal` so we only need it if `orientation` is vertical
+const ariaOrientation = computed(() =>
+ computedOrientation.value === "vertical" ? props.orientation : undefined
+);
+
+const semanticProps = computed(() =>
+ props.decorative
+ ? { role: "none" }
+ : { "aria-orientation": ariaOrientation.value, role: "separator" }
+);
+ :as="as"
+ :as-child="asChild"
+ :data-orientation="computedOrientation"
+ v-bind="semanticProps"
+ >
+
+