Document the separator

Basecoat has no Separator component: an <hr> already renders as a 1px line in the border color. Add a docs page with horizontal, vertical, menu, list and RTL examples that mirror shadcn/ui's Separator docs.

site/src/docs/components/separator.mdx

@@ -0,0 +1,127 @@
+# Separator
+
+<Callout title="No dedicated component" icon="circle-alert">
+  There is no dedicated Separator component in Basecoat.
+</Callout>
+
+<Preview class="w-full max-w-sm">
+<div class="flex flex-col gap-4 text-sm">
+  <div class="flex flex-col gap-1.5">
+    <div class="leading-none font-medium">Basecoat</div>
+    <div class="text-muted-foreground">Tailwind components for any web stack</div>
+  </div>
+  <hr role="separator" />
+  <div>A set of components you can drop into any HTML page, styled like shadcn/ui.</div>
+</div>
+</Preview>
+
+## Usage
+
+<Steps>
+  <Step title="Include CSS">
+
+Import Tailwind and one full Basecoat style bundle.
+
+```css
+@import "tailwindcss";
+@import "basecoat-css/vega.css";
+```
+
+Or import only the base CSS, which sets the border color.
+
+```css
+@import "tailwindcss";
+@import "basecoat-css/base.css";
+```
+
+Separator is a native `<hr>` plus Tailwind utilities and has no dedicated component CSS file.
+
+Using CDN or bundler imports? See the [Installation page](/installation).
+
+  </Step>
+  <Step title="Add your separator HTML">
+
+Use an `<hr>`. Tailwind's preflight and Basecoat's base CSS render it as a 1px line in the `border` color, matching shadcn/ui's Separator.
+
+```html
+<hr role="separator" />
+```
+
+  </Step>
+</Steps>
+
+## Examples
+
+### Vertical
+
+Add `aria-orientation="vertical"` and swap the top border for an inline-start border. `self-stretch` makes it fill the height of a flex row.
+
+<Preview>
+<div class="flex h-5 items-center gap-4 text-sm">
+  <div>Blog</div>
+  <hr role="separator" aria-orientation="vertical" class="h-auto self-stretch border-t-0 border-s" />
+  <div>Docs</div>
+  <hr role="separator" aria-orientation="vertical" class="h-auto self-stretch border-t-0 border-s" />
+  <div>Source</div>
+</div>
+</Preview>
+
+### Menu
+
+Vertical separators between menu items with descriptions.
+
+<Preview>
+<div class="flex items-center gap-2 text-sm md:gap-4">
+  <div class="flex flex-col gap-1">
+    <span class="font-medium">Settings</span>
+    <span class="text-xs text-muted-foreground">Manage preferences</span>
+  </div>
+  <hr role="separator" aria-orientation="vertical" class="h-auto self-stretch border-t-0 border-s" />
+  <div class="flex flex-col gap-1">
+    <span class="font-medium">Account</span>
+    <span class="text-xs text-muted-foreground">Profile & security</span>
+  </div>
+  <hr role="separator" aria-orientation="vertical" class="hidden h-auto self-stretch border-t-0 border-s md:block" />
+  <div class="hidden flex-col gap-1 md:flex">
+    <span class="font-medium">Help</span>
+    <span class="text-xs text-muted-foreground">Support & docs</span>
+  </div>
+</div>
+</Preview>
+
+### List
+
+Horizontal separators between list items.
+
+<Preview class="w-full max-w-sm">
+<div class="flex flex-col gap-2 text-sm">
+  <dl class="flex items-center justify-between">
+    <dt>Item 1</dt>
+    <dd class="text-muted-foreground">Value 1</dd>
+  </dl>
+  <hr role="separator" />
+  <dl class="flex items-center justify-between">
+    <dt>Item 2</dt>
+    <dd class="text-muted-foreground">Value 2</dd>
+  </dl>
+  <hr role="separator" />
+  <dl class="flex items-center justify-between">
+    <dt>Item 3</dt>
+    <dd class="text-muted-foreground">Value 3</dd>
+  </dl>
+</div>
+</Preview>
+
+### RTL
+
+The vertical separator uses the logical `border-s` utility, so it needs no changes for right-to-left layouts.
+
+<Preview>
+<div dir="rtl" class="flex h-5 items-center gap-4 text-sm">
+  <div>المدونة</div>
+  <hr role="separator" aria-orientation="vertical" class="h-auto self-stretch border-t-0 border-s" />
+  <div>المستندات</div>
+  <hr role="separator" aria-orientation="vertical" class="h-auto self-stretch border-t-0 border-s" />
+  <div>المصدر</div>
+</div>
+</Preview>

site/src/docs/docs.json

@@ -94,6 +94,7 @@
         "components/radio-group",
         "components/select",
         "components/scroll-area",
+        "components/separator",
         "components/sidebar",
         "components/skeleton",
         "components/slider",