Lock page scroll while a modal dialog is open

Pure CSS: html:has(<dialog>:modal) gets overflow: hidden. A scroll
timeline sets scrollbar-gutter: stable only when the page can scroll,
so the layout doesn't shift.

CHANGELOG.md

@@ -2,14 +2,11 @@
 
 ## [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.
 - Fixed long Tooltip text clipping instead of showing an ellipsis across all style packs.
+- Locked page scroll while a modal Dialog, Alert Dialog, Command Dialog or Drawer is open.
 
 ## [1.0.2] - 2026-07-06
 

site/src/docs/components/separator.mdx

@@ -1,134 +0,0 @@
-# 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 styles horizontal and vertical separators.
-
-```css
-@import "tailwindcss";
-@import "basecoat-css/base.css";
-```
-
-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>` 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>
-</Steps>
-
-## Examples
-
-### Vertical
-
-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" />
-  <div>Docs</div>
-  <hr role="separator" aria-orientation="vertical" />
-  <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" />
-  <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 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
-
-Separators follow document direction. Vertical separators use a logical inline-start border, so they need no changes.
-
-<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>

site/src/docs/docs.json

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

src/css/base/base.css

@@ -133,13 +133,4 @@
   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;
-  }
 }

src/css/components/dialog.css

@@ -1,5 +1,19 @@
 /* Dialog */
+@keyframes dialog-scroll-lock {
+  from, to {
+    scrollbar-gutter: stable;
+  }
+}
+
 @layer components {
+  /* Lock page scroll while a modal dialog is open. The scroll timeline only
+     reserves the scrollbar gutter if the page can scroll, so nothing shifts. */
+  html:has(:is(.dialog, .alert-dialog, .command-dialog, .drawer):modal) {
+    overflow: hidden;
+    animation: dialog-scroll-lock linear both;
+    animation-timeline: scroll(self);
+  }
+
   .dialog,
   .alert-dialog {
     @apply bg-transparent p-0 text-inherit opacity-0 transition-all transition-discrete backdrop:opacity-0 backdrop:transition-all backdrop:transition-discrete;