docs: create documentation for separator component

- Create separator example and index.mdx
- Add Separator component to the list of headless menu components in menu.md

Author: NexonTreeHouse

apps/website/src/_state/component-statuses.ts

@@ -44,6 +44,7 @@ export const statusByComponent: ComponentKitsStatuses = {
     Combobox: ComponentStatus.Draft,
     Popover: ComponentStatus.Draft,
     Select: ComponentStatus.Draft,
+    Separator: ComponentStatus.Beta,
     Tabs: ComponentStatus.Beta,
     Toggle: ComponentStatus.Planned,
     Tooltip: ComponentStatus.Draft

apps/website/src/routes/docs/headless/(components)/separator/examples.tsx

@@ -0,0 +1,33 @@
+import { component$, Slot } from '@builder.io/qwik';
+import { Separator } from '@qwik-ui/headless';
+import { PreviewCodeExample } from '../../../_components/preview-code-example/preview-code-example';
+
+export const MainExample = component$(() => {
+  return (
+    <PreviewCodeExample>
+      <div q:slot="actualComponent">
+        <div>
+          <h1 class="text-lg">Qwik UI Headless</h1>
+          <p class="text-sm">Accessible, Unstyled Qwik UI Components</p>
+        </div>
+        <Separator orientation="horizontal" class="h-px my-1 bg-primary" />
+        <menu class="flex gap-2">
+          <li>
+            <a href="/docs/headless/introduction/">Introduction</a>
+          </li>
+          <Separator orientation="vertical" class="w-px mx-1 bg-primary" />
+          <li>
+            <a href="/docs/headless/install/">Installation</a>
+          </li>
+          <Separator orientation="vertical" class="w-px mx-1 bg-primary" />
+          <li>
+            <a href="/docs/headless/contributing/">Contributing</a>
+          </li>
+        </menu>
+      </div>
+      <div q:slot="codeExample">
+        <Slot />
+      </div>
+    </PreviewCodeExample>
+  );
+});

apps/website/src/routes/docs/headless/(components)/separator/index.mdx

@@ -0,0 +1,62 @@
+---
+title: Qwik UI | Separator
+---
+import { StatusBanner } from '../../../_components/status-banner/status-banner';
+import {statusByComponent} from '../../../../../_state/component-statuses';
+import { MainExample } from './examples';
+import { APITable } from '../../../_components/api-table/api-table';
+
+<StatusBanner status={statusByComponent.headless.Separator}/>
+
+# Separator
+
+#### A separator separates and distinguishes sections of content or groups of menuitems
+
+<MainExample>
+	```tsx
+	<div>
+		<div>
+			<h1 class="text-lg">Qwik UI Headless</h1>
+			<p class="text-sm">Accessible, Unstyled Qwik UI Components</p>
+		</div>
+		<Separator orientation="horizontal" class="h-px my-1 bg-primary" />
+		<menu class="flex gap-2">
+			<li>
+				<a href="/docs/headless/introduction/">Introduction</a>
+			</li>
+			<Separator orientation="vertical" class="w-px mx-1 bg-primary" />
+			<li>
+				<a href="/docs/headless/install/">Installation</a>
+			</li>
+			<Separator orientation="vertical" class="w-px mx-1 bg-primary" />
+			<li>
+				<a href="/docs/headless/contributing/">Contributing</a>
+			</li>
+		</menu>
+	</div>
+```
+</MainExample>
+
+Qwik UI's Separator implementation follows [WAI-Aria separator role requirements](https://www.w3.org/TR/wai-aria-1.2/#separator). This separator is static and should not be used for interactivity.
+
+##### ✨ Features
+- Supports both horizontal and vertical orientation
+
+## API
+<APITable
+	propDescriptors={[
+		{
+		name: "orientation",
+		type: "enum",
+		info: '"horizontal" | "vertical"',
+		description:
+			"The orientation of the separator. Defaults to horizontal.",
+		},
+		{
+		name: "decorative",
+		type: "boolean",
+		description:
+			"Indicates that the element is purely decorative and should not be included in the accessibility tree.",
+		},
+	]}
+/>

apps/website/src/routes/docs/headless/menu.md

@@ -12,6 +12,7 @@
 - [Combobox](/docs/headless/combobox)
 - [Popover](/docs/headless/popover)
 - [Select](/docs/headless/select)
+- [Separator](/docs/headless/separator)
 - [Tabs](/docs/headless/tabs)
 - [Toggle](/docs/headless/toggle)
 - [Tooltip](/docs/headless/tooltip)