From 2f1cb006b0bbdbfcc5e45569560f2d06252a490a Mon Sep 17 00:00:00 2001
From: grugbraindev <178141691+grugbraindev@users.noreply.github.com>
Date: Fri, 23 Oct 2026 11:25:11 +0800
Subject: [PATCH] Style vertical separators in base CSS

Add a low-specificity base rule so <hr aria-orientation="vertical"> renders
as a 1px inline-start line that stretches to its row, matching shadcn/ui's
vertical Separator. Rewrite the Separator docs to use it without utility
classes, note role="none" for decorative separators, and add a changelog
entry.
---
 CHANGELOG.md                           |  4 +++
 site/src/docs/components/separator.mdx | 39 +++++++++++++++-----------
 src/css/base/base.css                  |  9 ++++++
 3 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3ceea18..26754f4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Added
+
+- Added vertical separators: `<hr aria-orientation="vertical">` renders as a 1px line that fills its row.
+
 ### Fixed
 
 - Prevented Escape from dismissing an enclosing dialog while closing an open Combobox popup.
diff --git a/site/src/docs/components/separator.mdx b/site/src/docs/components/separator.mdx
index 1183a97..5277b99 100644
--- a/site/src/docs/components/separator.mdx
+++ b/site/src/docs/components/separator.mdx
@@ -27,24 +27,30 @@ Import Tailwind and one full Basecoat style bundle.
 @import "basecoat-css/vega.css";
 ```
 
-Or import only the base CSS, which sets the border color.
+Or import only the base CSS, which styles horizontal and vertical separators.
 
 ```css
 @import "tailwindcss";
 @import "basecoat-css/base.css";
 ```
 
-Separator is a native `<hr>` plus Tailwind utilities and has no dedicated component CSS file.
+Separator is a native `<hr>` 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.
+Use an `<hr>` with `role="separator"`. It renders as a 1px line in the `border` color, matching shadcn/ui's Separator.
 
 ```html
 <hr role="separator" />
+```
+
+If the separator is purely decorative, use `role="none"` instead so assistive technologies skip it. This is what shadcn/ui's `decorative` prop does.
+
+```html
+<hr role="none" />
 ```
 
   </Step>
@@ -54,14 +60,14 @@ Use an `<hr>`. Tailwind's preflight and Basecoat's base CSS render it as a 1px l
 
 ### 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.
+Add `aria-orientation="vertical"` for a vertical separator. It fills the height of its 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" />
+  <hr role="separator" aria-orientation="vertical" />
   <div>Docs</div>
-  <hr role="separator" aria-orientation="vertical" class="h-auto self-stretch border-t-0 border-s" />
+  <hr role="separator" aria-orientation="vertical" />
   <div>Source</div>
 </div>
 </Preview>
@@ -76,12 +82,12 @@ Vertical separators between menu items with descriptions.
     <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" />
+  <hr role="separator" aria-orientation="vertical" />
   <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" />
+  <hr role="separator" aria-orientation="vertical" class="hidden 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>
@@ -114,14 +120,15 @@ Horizontal separators between list items.
 
 ### RTL
 
-The vertical separator uses the logical `border-s` utility, so it needs no changes for right-to-left layouts.
+Separators follow document direction. Vertical separators use a logical inline-start border, so they need no changes.
 
-<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>
+<Preview class="w-full max-w-sm">
+<div dir="rtl" 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 لأي بيئة ويب</div>
+  </div>
+  <hr role="separator" />
+  <div>مجموعة من المكونات يمكنك إضافتها إلى أي صفحة HTML، بتصميم مثل shadcn/ui.</div>
 </div>
 </Preview>
diff --git a/src/css/base/base.css b/src/css/base/base.css
index cbe838a..4dd6b33 100644
--- a/src/css/base/base.css
+++ b/src/css/base/base.css
@@ -133,4 +133,13 @@
   body {
     @apply bg-background text-foreground overscroll-none;
   }
+  hr:where([aria-orientation='vertical']) {
+    flex-shrink: 0;
+    align-self: stretch;
+    inline-size: 1px;
+    block-size: auto;
+    margin: 0;
+    border-block-start-width: 0;
+    border-inline-start-width: 1px;
+  }
 }