Document scrollbar-gutter-* utilities

src/app/(docs)/docs/index.tsx

@@ -219,6 +219,7 @@ export default {
     ["pointer-events", "/docs/pointer-events"],
     ["resize", "/docs/resize"],
     ["scroll-behavior", "/docs/scroll-behavior"],
+    ["scrollbar-gutter", "/docs/scrollbar-gutter"],
     ["scroll-margin", "/docs/scroll-margin"],
     ["scroll-padding", "/docs/scroll-padding"],
     ["scroll-snap-align", "/docs/scroll-snap-align"],

src/docs/scrollbar-gutter.mdx

@@ -0,0 +1,88 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+
+export const title = "scrollbar-gutter";
+export const description = "Utilities for controlling the gutter space reserved for an element's scrollbar.";
+
+<ApiTable
+  rows={[
+    ["scrollbar-gutter-auto", "scrollbar-gutter: auto;"],
+    ["scrollbar-gutter-stable", "scrollbar-gutter: stable;"],
+    ["scrollbar-gutter-both", "scrollbar-gutter: stable both-edges;"],
+  ]}
+/>
+
+## Examples
+
+### Reserving space for the scrollbar
+
+Use the `scrollbar-gutter-stable` utility to reserve space for the scrollbar even when an element isn't overflowing:
+
+<Figure>
+
+<Example>
+  {
+    <div className="mx-auto grid max-w-xl grid-cols-1 gap-6 text-sm/6 text-gray-600 sm:grid-cols-2 dark:text-gray-300">
+      <div>
+        <p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">scrollbar-gutter-auto</p>
+        <div className="h-40 overflow-auto rounded-lg bg-gray-50 py-4 scrollbar-gutter-auto dark:bg-white/5">
+          <p className="text-justify">
+            Hey everyone! It’s almost 2027 and we still don’t know if there are aliens living among us, or do we? Maybe
+            the person writing this is an alien. You will never know.
+          </p>
+        </div>
+      </div>
+      <div>
+        <p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">scrollbar-gutter-stable</p>
+        <div className="relative h-40 rounded-lg bg-gray-50 py-4 pr-4 scrollbar-gutter-stable dark:bg-white/5">
+          <p className="text-justify">
+            Hey everyone! It’s almost 2027 and we still don’t know if there are aliens living among us, or do we? Maybe
+            the person writing this is an alien. You will never know.
+          </p>
+          <div className="absolute top-0 right-0 bottom-0 w-4 rounded-r-lg border bg-[image:repeating-linear-gradient(315deg,currentColor_0,currentColor_1px,transparent_0,transparent_50%)] bg-[size:8px_8px] bg-top-left text-black/10 dark:text-white/12.5"></div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:scrollbar-gutter-stable] -->
+<div class="overflow-auto scrollbar-gutter-stable ...">
+  <!-- ... -->
+</div>
+```
+
+</Figure>
+
+### Reserving space on both sides
+
+Use the `scrollbar-gutter-both` utility to reserve matching gutter space on both sides of the element:
+
+```html
+<!-- [!code classes:scrollbar-gutter-both] -->
+<div class="overflow-auto scrollbar-gutter-both ...">
+  <!-- ... -->
+</div>
+```
+
+### Using the default gutter
+
+Use the `scrollbar-gutter-auto` utility to only reserve gutter space when the browser would normally show a scrollbar:
+
+```html
+<!-- [!code classes:scrollbar-gutter-auto] -->
+<div class="overflow-auto scrollbar-gutter-auto ...">
+  <!-- ... -->
+</div>
+```
+
+### Responsive design
+
+<ResponsiveDesign
+  property="scrollbar-gutter"
+  defaultClass="scrollbar-gutter-auto"
+  featuredClass="scrollbar-gutter-stable"
+/>