From 9806d6af633ad069ceb21c018302f2c002cccade Mon Sep 17 00:00:00 2001
From: Ronan Berder <hunvreus@gmail.com>
Date: Sat, 20 Jun 2026 18:18:11 +0800
Subject: [PATCH] Prepare 1.0.0-beta.4

---
 CHANGELOG.md                          |  6 ++
 docs/src/components/chart.mdx         |  4 +-
 docs/src/components/combobox.mdx      |  4 +-
 docs/src/components/command.mdx       | 18 +++---
 docs/src/components/dropdown-menu.mdx |  4 +-
 docs/src/components/popover.mdx       |  4 +-
 docs/src/components/scroll-area.mdx   |  8 +--
 docs/src/components/select.mdx        |  6 +-
 docs/src/components/sidebar.mdx       |  6 +-
 docs/src/components/slider.mdx        |  4 +-
 docs/src/components/tabs.mdx          |  4 +-
 docs/src/components/toast.mdx         |  4 +-
 docs/src/installation.mdx             | 12 ++--
 package-lock.json                     | 13 ++--
 package.json                          |  2 +-
 packages/cli/package.json             |  2 +-
 packages/css/package.json             |  2 +-
 src/css/base/base.css                 | 88 ++++++++++++++-------------
 src/css/compat/legacy.css             |  6 ++
 src/jinja/command.html.jinja          |  4 +-
 src/nunjucks/command.njk              |  4 +-
 21 files changed, 110 insertions(+), 95 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3b3ba6e..e0c3474 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## [1.0.0-beta.4] - 2026-06-20
+
+### Changed
+
+- Renamed the compact scrollbar utility from `scrollbar-thin` to `scrollbar-sm`; `scrollbar-thin` remains available through the compatibility stylesheet.
+
 ## [1.0.0-beta.3] - 2026-06-20
 
 ### Breaking Changes
diff --git a/docs/src/components/chart.mdx b/docs/src/components/chart.mdx
index fed0093..2e0cb23 100644
--- a/docs/src/components/chart.mdx
+++ b/docs/src/components/chart.mdx
@@ -16,8 +16,8 @@ Chart is an optional JavaScript helper. Load Chart.js first, then `basecoat.js`,
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.3/dist/js/basecoat.min.js" defer></script>
-<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.3/dist/js/chart.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/js/basecoat.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/js/chart.min.js" defer></script>
 ```
 
 ## Usage
diff --git a/docs/src/components/combobox.mdx b/docs/src/components/combobox.mdx
index d3630d4..dcef968 100644
--- a/docs/src/components/combobox.mdx
+++ b/docs/src/components/combobox.mdx
@@ -27,8 +27,8 @@
   <Step title="Include the JavaScript files">
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.3/dist/js/basecoat.min.js" defer></script>
-<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.3/dist/js/combobox.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/js/basecoat.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/js/combobox.min.js" defer></script>
 ```
 
   </Step>
diff --git a/docs/src/components/command.mdx b/docs/src/components/command.mdx
index 3c001c9..cc6774b 100644
--- a/docs/src/components/command.mdx
+++ b/docs/src/components/command.mdx
@@ -6,7 +6,7 @@
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
     <input type="text" id="demo-command-standalone-input" placeholder="Type a command or search..." autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-controls="demo-command-standalone-menu" />
   </header>
-  <div role="menu" id="demo-command-standalone-menu" aria-orientation="vertical" data-empty="No results found." class="scrollbar-thin">
+  <div role="menu" id="demo-command-standalone-menu" aria-orientation="vertical" data-empty="No results found." class="scrollbar-sm">
     <div role="group" aria-labelledby="suggestions">
       <span role="heading" id="suggestions">Suggestions</span>
       <div role="menuitem" data-filter="Calendar" data-keywords="date event schedule">
@@ -56,8 +56,8 @@ shadcn/ui's Command component is built on `cmdk`. Basecoat implements the same c
   <Step title="Include the JavaScript files">
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.3/dist/js/basecoat.min.js" defer></script>
-<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.3/dist/js/command.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/js/basecoat.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/js/command.min.js" defer></script>
 ```
 
   </Step>
@@ -69,7 +69,7 @@ shadcn/ui's Command component is built on `cmdk`. Basecoat implements the same c
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
     <input type="text" id="demo-command-standalone-input" placeholder="Type a command or search..." autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-controls="demo-command-standalone-menu" />
   </header>
-  <div role="menu" id="demo-command-standalone-menu" aria-orientation="vertical" data-empty="No results found." class="scrollbar-thin">
+  <div role="menu" id="demo-command-standalone-menu" aria-orientation="vertical" data-empty="No results found." class="scrollbar-sm">
     <div role="group" aria-labelledby="suggestions">
       <span role="heading" id="suggestions">Suggestions</span>
       <div role="menuitem" data-filter="Calendar" data-keywords="date event schedule">
@@ -187,7 +187,7 @@ A simple command menu in a dialog. The button also shows the keyboard shortcut u
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
       <input type="text" id="command-basic-input" placeholder="Type a command or search..." autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-controls="command-basic-menu" />
     </header>
-    <div role="menu" id="command-basic-menu" aria-orientation="vertical" data-empty="No results found." class="scrollbar-thin">
+    <div role="menu" id="command-basic-menu" aria-orientation="vertical" data-empty="No results found." class="scrollbar-sm">
       <div role="group" aria-labelledby="command-basic-suggestions">
         <span role="heading" id="command-basic-suggestions">Suggestions</span>
         <div role="menuitem" data-filter="Calendar" data-keywords="date event schedule">
@@ -242,7 +242,7 @@ A simple command menu in a dialog. The button also shows the keyboard shortcut u
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
     <input type="text" id="command-shortcuts-input" placeholder="Type a command or search..." autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-controls="command-shortcuts-menu" />
   </header>
-  <div role="menu" id="command-shortcuts-menu" aria-orientation="vertical" data-empty="No results found." class="scrollbar-thin">
+  <div role="menu" id="command-shortcuts-menu" aria-orientation="vertical" data-empty="No results found." class="scrollbar-sm">
     <div role="group" aria-labelledby="command-shortcuts-suggestions">
       <span role="heading" id="command-shortcuts-suggestions">Suggestions</span>
       <div role="menuitem" data-filter="Calendar" data-keywords="date event schedule">
@@ -291,7 +291,7 @@ A simple command menu in a dialog. The button also shows the keyboard shortcut u
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
     <input type="text" id="command-groups-input" placeholder="Type a command or search..." autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-controls="command-groups-menu" />
   </header>
-  <div role="menu" id="command-groups-menu" aria-orientation="vertical" data-empty="No results found." class="scrollbar-thin">
+  <div role="menu" id="command-groups-menu" aria-orientation="vertical" data-empty="No results found." class="scrollbar-sm">
     <div role="group" aria-labelledby="command-groups-suggestions">
       <span role="heading" id="command-groups-suggestions">Suggestions</span>
       <div role="menuitem" data-filter="Calendar" data-keywords="date event schedule">
@@ -335,7 +335,7 @@ A simple command menu in a dialog. The button also shows the keyboard shortcut u
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
     <input type="text" id="command-scrollable-input" placeholder="Type a command or search..." autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-controls="command-scrollable-menu" />
   </header>
-  <div role="menu" id="command-scrollable-menu" aria-orientation="vertical" data-empty="No results found." class="scrollbar-thin">
+  <div role="menu" id="command-scrollable-menu" aria-orientation="vertical" data-empty="No results found." class="scrollbar-sm">
     <div role="group" aria-labelledby="command-scrollable-heading">
       <span role="heading" id="command-scrollable-heading">Pages</span>
       <div role="menuitem" data-filter="Page 1">
@@ -426,7 +426,7 @@ Command supports document direction. Set `dir="rtl"` on the command root or a pa
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
       <input type="text" id="command-rtl-input" placeholder="اكتب أمراً أو ابحث..." autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-controls="command-rtl-menu" />
     </header>
-    <div role="menu" id="command-rtl-menu" aria-orientation="vertical" data-empty="No results found." class="scrollbar-thin">
+    <div role="menu" id="command-rtl-menu" aria-orientation="vertical" data-empty="No results found." class="scrollbar-sm">
       <div role="group" aria-labelledby="command-rtl-suggestions">
         <span role="heading" id="command-rtl-suggestions">اقتراحات</span>
         <div role="menuitem" data-filter="Calendar">
diff --git a/docs/src/components/dropdown-menu.mdx b/docs/src/components/dropdown-menu.mdx
index 4199b66..92e7c3a 100644
--- a/docs/src/components/dropdown-menu.mdx
+++ b/docs/src/components/dropdown-menu.mdx
@@ -40,8 +40,8 @@ Basecoat dropdown menus are inline-positioned relative to the `.dropdown-menu` w
 <Steps>
   <Step title="Include the JavaScript files">
 ```html
-<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.3/dist/js/basecoat.min.js" defer></script>
-<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.3/dist/js/dropdown-menu.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/js/basecoat.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/js/dropdown-menu.min.js" defer></script>
 ```
   </Step>
   <Step title="Add your dropdown menu HTML">
diff --git a/docs/src/components/popover.mdx b/docs/src/components/popover.mdx
index 46a55d4..ddf90d2 100644
--- a/docs/src/components/popover.mdx
+++ b/docs/src/components/popover.mdx
@@ -42,8 +42,8 @@ Basecoat popovers are inline-positioned relative to the `.popover` wrapper. This
   <Step title="Include the JavaScript files">
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.3/dist/js/basecoat.min.js" defer></script>
-<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.3/dist/js/popover.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/js/basecoat.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/js/popover.min.js" defer></script>
 ```
 
   </Step>
diff --git a/docs/src/components/scroll-area.mdx b/docs/src/components/scroll-area.mdx
index 0a5877d..9ab274e 100644
--- a/docs/src/components/scroll-area.mdx
+++ b/docs/src/components/scroll-area.mdx
@@ -25,7 +25,7 @@
 
 ## Usage
 
-Use `scrollbar` or `scrollbar-thin` on an element that already scrolls with `overflow-auto`, `overflow-y-auto`, or `overflow-x-auto`.
+Use `scrollbar` or `scrollbar-sm` on an element that already scrolls with `overflow-auto`, `overflow-y-auto`, or `overflow-x-auto`.
 
 ```html
 <div class="scrollbar h-72 overflow-y-auto rounded-md border p-4">
@@ -33,7 +33,7 @@ Use `scrollbar` or `scrollbar-thin` on an element that already scrolls with `ove
 </div>
 ```
 
-Use `scrollbar` or `scrollbar-thin` on an element that already scrolls with `overflow-auto`, `overflow-y-auto`, or `overflow-x-auto`.
+Use `scrollbar` or `scrollbar-sm` on an element that already scrolls with `overflow-auto`, `overflow-y-auto`, or `overflow-x-auto`.
 
 The utility augments native scrolling for cross-browser styling. It does not wrap content, replace browser scroll behavior, or require JavaScript.
 
@@ -64,12 +64,12 @@ Use `scrollbar` with `overflow-x-auto` for horizontal scrolling.
 
 ### Thin
 
-Use `scrollbar-thin` for compact scrollable regions like menus, listboxes, sidebars, and command results.
+Use `scrollbar-sm` for compact scrollable regions like menus, listboxes, sidebars, and command results.
 
 <Preview class="w-full max-w-64">
 <div class="w-full max-w-sm rounded-md border p-1">
   <div class="px-2 py-1.5 text-xs font-medium text-muted-foreground">Recent files</div>
-  <div class="scrollbar-thin max-h-48 overflow-y-auto">
+  <div class="scrollbar-sm max-h-48 overflow-y-auto">
     <button type="button" class="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-accent">
       <span>project-roadmap.md</span>
       <span class="text-xs text-muted-foreground">2m</span>
diff --git a/docs/src/components/select.mdx b/docs/src/components/select.mdx
index 5cc4e1e..61d6218 100644
--- a/docs/src/components/select.mdx
+++ b/docs/src/components/select.mdx
@@ -27,8 +27,8 @@
   <Step title="Include the JavaScript files">
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.3/dist/js/basecoat.min.js" defer></script>
-<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.3/dist/js/select.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/js/basecoat.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/js/select.min.js" defer></script>
 ```
 
   </Step>
@@ -173,7 +173,7 @@ Use `data-align` on the popover to align the list to the trigger edge. Basecoat
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down text-muted-foreground opacity-50 shrink-0"><path d="m6 9 6 6 6-6" /></svg>
   </button>
   <div id="select-679828-popover" data-popover aria-hidden="true">
-    <div role="listbox" id="select-679828-listbox" aria-orientation="vertical" aria-labelledby="select-679828-trigger" class="scrollbar-thin overflow-y-auto max-h-64">
+    <div role="listbox" id="select-679828-listbox" aria-orientation="vertical" aria-labelledby="select-679828-trigger" class="scrollbar-sm overflow-y-auto max-h-64">
       <div role="option" data-value="item-0" aria-selected="true">Item 0</div>
       <div role="option" data-value="item-1">Item 1</div>
       <div role="option" data-value="item-2">Item 2</div>
diff --git a/docs/src/components/sidebar.mdx b/docs/src/components/sidebar.mdx
index 318c37c..3cdc048 100644
--- a/docs/src/components/sidebar.mdx
+++ b/docs/src/components/sidebar.mdx
@@ -11,15 +11,15 @@ Sidebar uses a native `<aside>` next to your page content. Basecoat owns the fix
 <Steps>
   <Step title="Include the JavaScript files">
 ```html
-<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.3/dist/js/basecoat.min.js" defer></script>
-<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.3/dist/js/sidebar.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/js/basecoat.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/js/sidebar.min.js" defer></script>
 ```
   </Step>
   <Step title="Add your sidebar HTML">
 ```html
 <aside id="sidebar" class="sidebar" data-side="left">
   <nav aria-label="Sidebar navigation">
-    <section class="scrollbar-thin">
+    <section class="scrollbar-sm">
       <div role="group" aria-labelledby="group-label-content-1">
         <h3 id="group-label-content-1">Getting started</h3>
         <ul>
diff --git a/docs/src/components/slider.mdx b/docs/src/components/slider.mdx
index cff4087..4e9f799 100644
--- a/docs/src/components/slider.mdx
+++ b/docs/src/components/slider.mdx
@@ -15,8 +15,8 @@
 Use a native `<input type="range" class="input">`. Include `range.js` so Basecoat can keep the filled track in sync with the input value.
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.3/dist/js/basecoat.min.js" defer></script>
-<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.3/dist/js/range.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/js/basecoat.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/js/range.min.js" defer></script>
 ```
 
 ```html
diff --git a/docs/src/components/tabs.mdx b/docs/src/components/tabs.mdx
index c88a0f9..2a3dd0f 100644
--- a/docs/src/components/tabs.mdx
+++ b/docs/src/components/tabs.mdx
@@ -65,8 +65,8 @@
   <Step title="Include the JavaScript files">
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.3/dist/js/basecoat.min.js" defer></script>
-<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.3/dist/js/tabs.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/js/basecoat.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/js/tabs.min.js" defer></script>
 ```
 
   </Step>
diff --git a/docs/src/components/toast.mdx b/docs/src/components/toast.mdx
index e197356..7bc0596 100644
--- a/docs/src/components/toast.mdx
+++ b/docs/src/components/toast.mdx
@@ -42,8 +42,8 @@
   <Step title="Include the JavaScript files">
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.3/dist/js/basecoat.min.js" defer></script>
-<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.3/dist/js/toast.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/js/basecoat.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/js/toast.min.js" defer></script>
 ```
 
   </Step>
diff --git a/docs/src/installation.mdx b/docs/src/installation.mdx
index 2e45600..0cdfcf1 100644
--- a/docs/src/installation.mdx
+++ b/docs/src/installation.mdx
@@ -10,11 +10,11 @@ Basecoat can be used from a CDN or installed with npm. Use the CDN for simple st
 Use the default bundled stylesheet, or choose one standalone style bundle.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.3/dist/basecoat.cdn.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/basecoat.cdn.min.css" />
 ```
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.3/dist/basecoat-maia.cdn.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/basecoat-maia.cdn.min.css" />
 ```
 
   </Step>
@@ -23,15 +23,15 @@ Use the default bundled stylesheet, or choose one standalone style bundle.
 Most components are CSS-only. Interactive components need JavaScript. Use the all-in-one bundle when file size is not a concern.
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.3/dist/js/all.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/js/all.min.js" defer></script>
 ```
 
 Or load the Basecoat runtime once, then only the component scripts you use.
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.3/dist/js/basecoat.min.js" defer></script>
-<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.3/dist/js/dropdown-menu.min.js" defer></script>
-<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.3/dist/js/select.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/js/basecoat.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/js/dropdown-menu.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0-beta.4/dist/js/select.min.js" defer></script>
 ```
 
   </Step>
diff --git a/package-lock.json b/package-lock.json
index cc12b29..f7705d3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "basecoat",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "basecoat",
-      "version": "1.0.0-beta.3",
+      "version": "1.0.0-beta.4",
       "license": "MIT",
       "workspaces": [
         "packages/*"
@@ -30,6 +30,7 @@
       "version": "1.0.0-beta.2",
       "dev": true,
       "dependencies": {
+        "@astrojs/markdown-remark": "^7.2.0",
         "@astrojs/mdx": "^6.0.3",
         "@tailwindcss/vite": "4.1.17",
         "github-slugger": "^2.0.0",
@@ -40,12 +41,12 @@
       },
       "devDependencies": {
         "astro": "^6.4.6",
-        "basecoat-css": "1.0.0-beta.2",
+        "basecoat-css": "1.0.0-beta.3",
         "tailwindcss": "4.1.17"
       },
       "peerDependencies": {
         "astro": "^6.4.6",
-        "basecoat-css": "^1.0.0-beta.2",
+        "basecoat-css": "^1.0.0-beta.3",
         "tailwindcss": ">=4.1.17 <5"
       }
     },
@@ -8950,7 +8951,7 @@
     },
     "packages/cli": {
       "name": "basecoat-cli",
-      "version": "1.0.0-beta.3",
+      "version": "1.0.0-beta.4",
       "license": "MIT",
       "dependencies": {
         "commander": "^13.1.0",
@@ -8963,7 +8964,7 @@
     },
     "packages/css": {
       "name": "basecoat-css",
-      "version": "1.0.0-beta.3",
+      "version": "1.0.0-beta.4",
       "license": "MIT"
     }
   }
diff --git a/package.json b/package.json
index 9ae1277..469e185 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "basecoat",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "shadcn/ui for the rest of us",
   "author": "hunvreus",
   "type": "module",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 1e79e1c..c1dc119 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "basecoat-cli",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "Add Basecoat components to your project",
   "author": "hunvreus",
   "license": "MIT",
diff --git a/packages/css/package.json b/packages/css/package.json
index 83cda4b..b55555f 100644
--- a/packages/css/package.json
+++ b/packages/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "basecoat-css",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "Tailwind CSS for Basecoat components",
   "author": {
     "name": "hunvreus",
diff --git a/src/css/base/base.css b/src/css/base/base.css
index 037ac0e..7b2d423 100644
--- a/src/css/base/base.css
+++ b/src/css/base/base.css
@@ -38,7 +38,7 @@
   --scrollbar-track: transparent;
   --scrollbar-thumb: var(--border);
   --scrollbar-width: 0.625rem;
-  --scrollbar-thin-width: 0.375rem;
+  --scrollbar-sm-width: 0.375rem;
   --scrollbar-radius: 9999px;
   --chevron-down-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>'); /* --muted-foreground */
   --chevron-down-icon-50: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="oklch(0.556 0 0 / 0.5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>'); /* --muted-foreground + 50% opacity */
@@ -121,6 +121,50 @@
   --color-sidebar-ring: var(--sidebar-ring);
 }
 
+@utility scrollbar {
+  scrollbar-width: auto;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+
+  &::-webkit-scrollbar {
+    width: var(--scrollbar-width);
+    height: var(--scrollbar-width);
+  }
+  &::-webkit-scrollbar-track {
+    background: var(--scrollbar-track);
+  }
+  &::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb);
+    border-radius: var(--scrollbar-radius);
+    border: 1px solid transparent;
+    background-clip: padding-box;
+  }
+  &::-webkit-scrollbar-corner {
+    background: var(--scrollbar-track);
+  }
+}
+
+@utility scrollbar-sm {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+
+  &::-webkit-scrollbar {
+    width: var(--scrollbar-sm-width);
+    height: var(--scrollbar-sm-width);
+  }
+  &::-webkit-scrollbar-track {
+    background: var(--scrollbar-track);
+  }
+  &::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb);
+    border-radius: var(--scrollbar-radius);
+    border: 1px solid transparent;
+    background-clip: padding-box;
+  }
+  &::-webkit-scrollbar-corner {
+    background: var(--scrollbar-track);
+  }
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;
@@ -131,46 +175,4 @@
   body {
     @apply bg-background text-foreground overscroll-none antialiased;
   }
-  .scrollbar {
-    scrollbar-width: auto;
-    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
-
-    &::-webkit-scrollbar {
-      width: var(--scrollbar-width);
-      height: var(--scrollbar-width);
-    }
-    &::-webkit-scrollbar-track {
-      background: var(--scrollbar-track);
-    }
-    &::-webkit-scrollbar-thumb {
-      background: var(--scrollbar-thumb);
-      border-radius: var(--scrollbar-radius);
-      border: 1px solid transparent;
-      background-clip: padding-box;
-    }
-    &::-webkit-scrollbar-corner {
-      background: var(--scrollbar-track);
-    }
-  }
-  .scrollbar-thin {
-    scrollbar-width: thin;
-    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
-
-    &::-webkit-scrollbar {
-      width: var(--scrollbar-thin-width);
-      height: var(--scrollbar-thin-width);
-    }
-    &::-webkit-scrollbar-track {
-      background: var(--scrollbar-track);
-    }
-    &::-webkit-scrollbar-thumb {
-      background: var(--scrollbar-thumb);
-      border-radius: var(--scrollbar-radius);
-      border: 1px solid transparent;
-      background-clip: padding-box;
-    }
-    &::-webkit-scrollbar-corner {
-      background: var(--scrollbar-track);
-    }
-  }
 }
diff --git a/src/css/compat/legacy.css b/src/css/compat/legacy.css
index 7fdb49f..42c3f6f 100644
--- a/src/css/compat/legacy.css
+++ b/src/css/compat/legacy.css
@@ -1,6 +1,12 @@
 /* Legacy Basecoat class API compatibility.
    This layer preserves pre-1.0 visual classes for the default Basecoat style only. */
 
+@layer components {
+  .scrollbar-thin {
+    @apply scrollbar-sm;
+  }
+}
+
 @layer components {
   .btn-primary,
   .btn-secondary,
diff --git a/src/jinja/command.html.jinja b/src/jinja/command.html.jinja
index d7c3415..e72ac8f 100644
--- a/src/jinja/command.html.jinja
+++ b/src/jinja/command.html.jinja
@@ -50,7 +50,7 @@
     id="{{ id }}-menu"
     aria-orientation="vertical"
     data-empty="{{ empty_text }}"
-    class="scrollbar-thin {{ menu_attrs.class }}"
+    class="scrollbar-sm {{ menu_attrs.class }}"
     {% for key, value in menu_attrs.items() %}
       {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
     {% endfor %}
@@ -121,7 +121,7 @@
       id="{{ id }}-menu"
       aria-orientation="vertical"
       data-empty="{{ empty_text }}"
-      class="scrollbar-thin {{ menu_attrs.class }}"
+      class="scrollbar-sm {{ menu_attrs.class }}"
       {% for key, value in menu_attrs.items() %}
         {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
       {% endfor %}
diff --git a/src/nunjucks/command.njk b/src/nunjucks/command.njk
index 561f02c..60fee06 100644
--- a/src/nunjucks/command.njk
+++ b/src/nunjucks/command.njk
@@ -50,7 +50,7 @@
     id="{{ id }}-menu"
     aria-orientation="vertical"
     data-empty="{{ empty_text }}"
-    class="scrollbar-thin {{ menu_attrs.class }}"
+    class="scrollbar-sm {{ menu_attrs.class }}"
     {% for key, value in menu_attrs %}
       {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
     {% endfor %}
@@ -121,7 +121,7 @@
       id="{{ id }}-menu"
       aria-orientation="vertical"
       data-empty="{{ empty_text }}"
-      class="scrollbar-thin {{ menu_attrs.class }}"
+      class="scrollbar-sm {{ menu_attrs.class }}"
       {% for key, value in menu_attrs %}
         {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
       {% endfor %}