From 531b4fd5b767ec264ca4454c37676a2b5b05325f Mon Sep 17 00:00:00 2001
From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Tue, 20 Oct 2026 01:16:06 -0700
Subject: [PATCH] Preserve the spinner section anchor

---
 src/components/ds/DsKit.tsx | 4 +++-
 src/routes/ds.spinner.tsx   | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/ds/DsKit.tsx b/src/components/ds/DsKit.tsx
index fb8bec834..358989dbd 100644
--- a/src/components/ds/DsKit.tsx
+++ b/src/components/ds/DsKit.tsx
@@ -78,11 +78,13 @@ export function DsPage({
 }
 
 export function DsSection({
+  id,
   title,
   description,
   children,
   className,
 }: {
+  id?: string
   title: string
   description?: React.ReactNode
   children: React.ReactNode
@@ -90,7 +92,7 @@ export function DsSection({
 }) {
   return (
     <section
-      id={toDsSectionId(title)}
+      id={id ?? toDsSectionId(title)}
       className={twMerge('scroll-mt-24 space-y-5', className)}
     >
       <div className={description ? 'min-h-[70px]' : undefined}>
diff --git a/src/routes/ds.spinner.tsx b/src/routes/ds.spinner.tsx
index 9c0cb00a8..7c478f304 100644
--- a/src/routes/ds.spinner.tsx
+++ b/src/routes/ds.spinner.tsx
@@ -18,6 +18,7 @@ function SpinnerPage() {
   return (
     <DsPage title="Spinners">
       <DsSection
+        id="sizes-and-color"
         title="Spinner"
         description={
           <>