separator

docs/content/components/separator.md

@@ -52,20 +52,24 @@ npm install radix-vue
 
 Import all parts and piece them together.
 
-```jsx
-import * as Separator from 'radix-vue';
+```vue
+<script setup>
+import { Separator } from "radix-vue";
+</script>
 
-export default () => <Separator.Root />;
+<template>
+  <Separator />
+</template>
 ```
 
 ## API Reference
 
 ### Root
 
 The separator.
-```
+
 <PropsTable
-  data={[
+  :data="[
     {
       name: 'asChild',
       required: false,
@@ -75,34 +79,28 @@ The separator.
     },
     {
       name: 'orientation',
-      type: '"horizontal" | "vertical"',
+      type: '&quot;horizontal&quot; | &quot;vertical&quot;',
       typeSimple: 'enum',
-      default: '"horizontal"',
+      default: '&quot;horizontal&quot;',
       description: 'The orientation of the separator.',
     },
     {
       name: 'decorative',
       type: 'boolean',
-      description: (
-        <span>
-          When <Code>true</Code>, signifies that it is purely visual, carries no
-          semantic meaning, and ensures it is not present in the accessibility
-          tree.
-        </span>
-      ),
+      description: '<span> When <Code>true</Code>, signifies that it is purely visual, carries no semantic meaning, and ensures it is not present in the accessibility tree.</span>',
     },
-  ]}
+  ]"
 />
 
 <DataAttributesTable
-  data={[
+  :data="[
     {
       attribute: '[data-orientation]',
       values: ['vertical', 'horizontal'],
     },
-  ]}
+  ]"
 />
-```
+
 ## Accessibility
 
 Adheres to the [`separator` role requirements](https://www.w3.org/TR/wai-aria-1.2/#separator).

docs/content/components/slider.md

@@ -62,6 +62,13 @@ npm install radix-vue
 Import all parts and piece them together.
 
 ```jsx
+<script setup>
+import { Separator } from "radix-vue";
+</script>
+
+<template>
+  <Separator />
+</template>
 import * as Slider from 'radix-vue';
 
 export default () => (

docs/content/components/switch.md

@@ -55,6 +55,13 @@ npm install radix-vue
 Import all parts and piece them together.
 
 ```jsx
+<script setup>
+import { Separator } from "radix-vue";
+</script>
+
+<template>
+  <Separator />
+</template>
 import * as Switch from 'radix-vue';
 
 export default () => (

docs/content/components/tabs.md

@@ -60,6 +60,13 @@ npm install radix-vue
 Import all parts and piece them together.
 
 ```jsx
+<script setup>
+import { Separator } from "radix-vue";
+</script>
+
+<template>
+  <Separator />
+</template>
 import * as Tabs from 'radix-vue';
 
 export default () => (

docs/content/components/toggle-group.md

@@ -61,6 +61,13 @@ npm install radix-vue
 Import the component.
 
 ```jsx
+<script setup>
+import { Separator } from "radix-vue";
+</script>
+
+<template>
+  <Separator />
+</template>
 import * as ToggleGroup from 'radix-vue';
 
 export default () => (

docs/content/components/toggle.md

@@ -55,6 +55,13 @@ npm install radix-vue
 Import the component.
 
 ```vue
+<script setup>
+import { Separator } from "radix-vue";
+</script>
+
+<template>
+  <Separator />
+</template>
 import * as Toggle from 'radix-vue';
 
 export default () => <Toggle.Root />;

docs/content/components/toolbar.md

@@ -55,6 +55,13 @@ npm install radix-vue
 Import the component.
 
 ```jsx
+<script setup>
+import { Separator } from "radix-vue";
+</script>
+
+<template>
+  <Separator />
+</template>
 import * as Toolbar from 'radix-vue';
 
 export default () => (