radiant-docs 0.1.37 → 0.1.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "radiant-docs",
-  "version": "0.1.37",
+  "version": "0.1.38",
   "description": "CLI tool for previewing Radiant documentation locally",
   "type": "module",
   "bin": {

package/template/astro.config.mjs

@@ -11,6 +11,7 @@ import path from "path";
 import { getConfig, validateMdxContent } from "./src/lib/validation";
 import remarkCodeBlockComponent from "./src/lib/mdx/remark-code-block-component";
 import remarkDemoteH1 from "./src/lib/mdx/remark-demote-h1";
+import remarkResolveInternalLinks from "./src/lib/mdx/remark-resolve-internal-links";
 import remarkStandaloneImageComponent from "./src/lib/mdx/remark-standalone-image-component";
 import rehypeExternalLinks from "./src/lib/mdx/rehype-external-links";
 import remarkGfm from "remark-gfm";
@@ -303,6 +304,7 @@ export default defineConfig({
     mdx({
       remarkPlugins: [
         remarkGfm,
+        remarkResolveInternalLinks,
         remarkDemoteH1,
         remarkStandaloneImageComponent,
         remarkCodeBlockComponent,

package/template/src/components/Footer.astro

@@ -91,7 +91,7 @@ const socialIcons: Record<string, string> = {
     href="https://radiant.io"
     class:list={[
       "group flex items-center gap-1.5 text-[13px] text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors duration-200",
-      askAiEnabled && "sm:pr-16",
+      askAiEnabled && "sm:pr-13",
     ]}
   >
     Built with <span

package/template/src/components/Header.astro

@@ -15,9 +15,9 @@ const config = await getConfig();
 
 <header
   class:list={[
-    "fixed z-30 top-1 inset-x-1 shadow-[0px_-20px_0px_20px_var(--color-neutral-100)] h-16 border-x border-t border-border rounded-t-2xl overflow-hidden border-b bg-background border-b-border-light",
+    "fixed z-30 top-1 inset-x-1 shadow-[0px_-20px_0px_20px_var(--background-dark)] h-16 border-x border-t border-border rounded-t-2xl overflow-hidden border-b bg-background border-b-border-light",
     config.navbar?.blur &&
-      "sm:bg-background/80 sm:backdrop-blur-[18px] sm:backdrop-saturate-50 sm:border-b-neutral-100/85 sm:bg-clip-padding",
+      "sm:bg-background/80 sm:backdrop-blur-[18px] sm:backdrop-saturate-50 sm:border-b-neutral-100/85 sm:dark:border-neutral-800/85 sm:bg-clip-padding",
   ]}
   data-pagefind-ignore
   data-vaul-scale-chrome
@@ -34,12 +34,12 @@ const config = await getConfig();
             x-bind:class="open ? 'rotate-90': ''"
           >
             <div
-              class="w-[14px] h-0.5 bg-neutral-900 rounded-full origin-[20%_50%] transition"
+              class="w-[14px] h-0.5 bg-neutral-900 dark:bg-white rounded-full origin-[20%_50%] transition"
               x-bind:class="open ? 'rotate-45': ''"
             >
             </div>
             <div
-              class="w-[14px] h-0.5 bg-neutral-900 rounded-full origin-[20%_50%] transition"
+              class="w-[14px] h-0.5 bg-neutral-900 dark:bg-white rounded-full origin-[20%_50%] transition"
               x-bind:class="open ? '-rotate-45': ''"
             >
             </div>
@@ -58,7 +58,7 @@ const config = await getConfig();
             showAskAiTrigger ? (
               <button
                 type="button"
-                class="hidden md:inline-flex items-center gap-2 h-8 rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-neutral-900/85 to-neutral-900 px-3 text-[13px] font-[350] text-white shadow-sm dark:bg-white dark:text-neutral-900 cursor-pointer"
+                class="hidden md:inline-flex items-center gap-2 h-8 rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-neutral-900/85 dark:from-neutral-100 to-neutral-900 dark:to-neutral-200 px-3 text-[13px] font-[350] dark:font-medium text-white shadow-sm dark:bg-white dark:text-neutral-900 cursor-pointer"
                 onclick="window.dispatchEvent(new CustomEvent('ask-ai:open'));"
               >
                 <img
@@ -87,7 +87,7 @@ const config = await getConfig();
                   {config.navbar.links.map((l, i, a) => (
                     <a
                       class:list={[
-                        "items-center gap-1 text-[13px] font-[450] text-neutral-600/85 hover:text-neutral-600 duration-200 px-1.5 py-[5px] whitespace-nowrap",
+                        "items-center gap-1 text-[13px] font-[450] dark:font-normal text-neutral-600/85 hover:text-neutral-600 dark:text-neutral-200/90 dark:hover:text-neutral-200 duration-200 px-1.5 py-[5px] whitespace-nowrap",
                         showAskAiTrigger && a.length === 3 && i === 2
                           ? "hidden 2xl:flex"
                           : "flex",
@@ -110,7 +110,7 @@ const config = await getConfig();
               {config.navbar.secondary && (
                 <a
                   class:list={[
-                    "h-[33px] items-center gap-1.5 px-[11px] text-[13px] bg-white/90 text-neutral-600/85 hover:text-neutral-600 rounded-lg [corner-shape:superellipse(1.2)] border border-neutral-200 shadow-xs hover:shadow-sm. transition-all whitespace-nowrap",
+                    "h-[33px] items-center gap-1.5 px-[11px] text-[13px] bg-white/90 dark:bg-neutral-800/80 text-neutral-600/85 hover:text-neutral-600 dark:text-neutral-200/95 dark:hover:text-neutral-200 rounded-lg [corner-shape:superellipse(1.2)] border border-neutral-200 dark:border-neutral-700/40 shadow-xs transition-all whitespace-nowrap",
                     config.navbar.primary ? "hidden lg:flex" : "flex",
                   ]}
                   href={config.navbar.secondary.href}
@@ -129,7 +129,7 @@ const config = await getConfig();
               {config.navbar.primary && (
                 <a
                   class:list={[
-                    "font-[350] h-8 flex items-center gap-2 px-3 text-[13px] rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-neutral-900/85 to-neutral-900 text-white duration-200 shadow-sm transition-all whitespace-nowrap",
+                    "font-[350] dark:font-[450] h-8 flex items-center gap-2 px-3 text-[13px] rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-neutral-900/85 to-neutral-900 dark:from-neutral-100 dark:to-neutral-200 text-white dark:text-neutral-950 duration-200 shadow-sm transition-all whitespace-nowrap",
                   ]}
                   href={config.navbar.primary.href}
                 >

package/template/src/components/OpenApiPage.astro

@@ -908,7 +908,7 @@ const formattedBodyDescription = bodyDescription
         {
           formattedDescription && (
             <div
-              class="mb-6 prose-rules text-neutral-500 **:text-neutral-500"
+              class="mb-6 prose-rules text-neutral-500 **:text-neutral-500 dark:text-neutral-400 dark:**:text-neutral-400"
               set:html={formattedDescription}
             />
           )
@@ -952,31 +952,31 @@ const formattedBodyDescription = bodyDescription
                   <h4 class="text-xl font-semibold">{headers[key]}</h4>
                   {key === "body" && formattedBodyDescription && (
                     <div
-                      class="mt-2 prose-rules prose-sm! text-neutral-500 **:text-neutral-500"
+                      class="mt-2 prose-rules prose-sm! text-neutral-500 **:text-neutral-500 dark:text-neutral-400 dark:**:text-neutral-400"
                       set:html={formattedBodyDescription}
                     />
                   )}
                   {hasCommonFields && (
                     <div x-data="{ expanded: false }" class="mt-4">
                       <div
-                        class="w-full overflow-hidden rounded-xl border border-neutral-200 bg-white transition-colors duration-200"
-                        x-bind:class="expanded ? 'border-neutral-300' : 'border-neutral-200'"
+                        class="w-full overflow-hidden rounded-xl border border-neutral-200 bg-white transition-colors duration-200 dark:border-neutral-800 dark:bg-(--rd-code-surface)"
+                        x-bind:class="expanded ? 'border-neutral-300 dark:border-neutral-700' : 'border-neutral-200 dark:border-neutral-800'"
                       >
                         <button
                           type="button"
                           x-on:click="expanded = !expanded"
                           x-bind:aria-expanded="expanded"
-                          class="group flex w-full items-center justify-between gap-3 px-4 py-2.5 text-left text-sm font-medium text-neutral-700 hover:bg-neutral-50 cursor-pointer transition-colors duration-200"
+                          class="group flex w-full items-center justify-between gap-3 px-4 py-2.5 text-left text-sm font-medium text-neutral-700 hover:bg-neutral-50 cursor-pointer transition-colors duration-200 dark:text-neutral-300 dark:hover:bg-neutral-800/60"
                         >
                           <span class="inline-flex items-center gap-2">
-                            <ListChevronsToggle class="size-4 shrink-0 text-neutral-400 group-hover:text-neutral-600 transition duration-200" />
+                            <ListChevronsToggle class="size-4 shrink-0 text-neutral-400 group-hover:text-neutral-600 transition duration-200 dark:text-neutral-500 dark:group-hover:text-neutral-300" />
                             <span>
                               {sectionFields.length} {noun}
                             </span>
                           </span>
                         </button>
                         <div x-show="expanded" x-collapse x-cloak>
-                          <div class="border-t border-neutral-100 p-4">
+                          <div class="border-t border-neutral-100 p-4 dark:border-neutral-800">
                             <ResponseFieldTree fields={sectionFields} />
                           </div>
                         </div>
@@ -990,30 +990,30 @@ const formattedBodyDescription = bodyDescription
                         hasCommonFields ? "mt-3" : "mt-4",
                       ]}
                     >
-                      <p class="text-xs text-neutral-500">
+                      <p class="text-xs text-neutral-500 dark:text-neutral-400">
                         {sectionVariantData?.variantType === "anyOf"
                           ? "One or more variants may apply."
                           : "One of these variants applies."}
                       </p>
                       {sectionVariants.map((variant, index) => (
                         <>
-                          <div class="rounded-lg border border-neutral-200 bg-white p-3">
-                            <div class="mb-2 text-xs font-medium text-neutral-600">
+                          <div class="rounded-lg border border-neutral-200 bg-white p-3 dark:border-neutral-800 dark:bg-neutral-900/60">
+                            <div class="mb-2 text-xs font-medium text-neutral-600 dark:text-neutral-400">
                               {variant.label}
                             </div>
                             <div x-data="{ expanded: false }">
                               <div
-                                class="w-full overflow-hidden rounded-lg border border-neutral-200 bg-white transition-colors duration-200"
-                                x-bind:class="expanded ? 'border-neutral-300' : 'border-neutral-200'"
+                                class="w-full overflow-hidden rounded-lg border border-neutral-200 bg-white transition-colors duration-200 dark:border-neutral-800 dark:bg-(--rd-code-surface)"
+                                x-bind:class="expanded ? 'border-neutral-300 dark:border-neutral-700' : 'border-neutral-200 dark:border-neutral-800'"
                               >
                                 <button
                                   type="button"
                                   x-on:click="expanded = !expanded"
                                   x-bind:aria-expanded="expanded"
-                                  class="group flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-xs font-medium text-neutral-700 hover:bg-neutral-50 cursor-pointer transition-colors duration-200"
+                                  class="group flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-xs font-medium text-neutral-700 hover:bg-neutral-50 cursor-pointer transition-colors duration-200 dark:text-neutral-300 dark:hover:bg-neutral-800/60"
                                 >
                                   <span class="inline-flex items-center gap-2">
-                                    <ListChevronsToggle class="size-4 shrink-0 text-neutral-400 group-hover:text-neutral-600 transition duration-200" />
+                                    <ListChevronsToggle class="size-4 shrink-0 text-neutral-400 group-hover:text-neutral-600 transition duration-200 dark:text-neutral-500 dark:group-hover:text-neutral-300" />
                                     <span>
                                       {variant.fields.length}{" "}
                                       {variant.fields.length === 1
@@ -1023,7 +1023,7 @@ const formattedBodyDescription = bodyDescription
                                   </span>
                                 </button>
                                 <div x-show="expanded" x-collapse x-cloak>
-                                  <div class="border-t border-neutral-100 px-3 py-3">
+                                  <div class="border-t border-neutral-100 px-3 py-3 dark:border-neutral-800">
                                     <ResponseFieldTree
                                       fields={variant.fields}
                                     />
@@ -1035,11 +1035,11 @@ const formattedBodyDescription = bodyDescription
                           {sectionVariantData?.variantType === "oneOf" &&
                             index < sectionVariants.length - 1 && (
                               <div class="flex items-center gap-2 py-0">
-                                <div class="h-px flex-1 bg-neutral-200" />
-                                <span class="px-1 text-[10px] uppercase tracking-wide text-neutral-500">
+                                <div class="h-px flex-1 bg-neutral-200 dark:bg-neutral-800" />
+                                <span class="px-1 text-[10px] uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
                                   OR
                                 </span>
-                                <div class="h-px flex-1 bg-neutral-200" />
+                                <div class="h-px flex-1 bg-neutral-200 dark:bg-neutral-800" />
                               </div>
                             )}
                         </>

package/template/src/components/Search.astro

@@ -12,7 +12,7 @@ import { Icon } from "astro-icon/components";
   <!-- Search Trigger Button -->
   <button
     x-on:click="open()"
-    class="md:bg-white/90 dark:md:bg-neutral-800 flex items-center gap-2 h-[33px] md:min-w-64 px-3 -mr-3 xs:mr-0 text-xs text-neutral-500/80 dark:text-neutral-400/80 hover:text-neutral-500 dark:hover:text-neutral-400 md:border border-border rounded-lg cursor-pointer md:shadow-xs md:hover:shadow-sm transition"
+    class="md:bg-white/90 dark:md:bg-neutral-800 flex items-center gap-2 h-[33px] md:min-w-64 px-3 -mr-3 xs:mr-0 text-xs text-neutral-500/80 dark:text-neutral-400/70 hover:text-neutral-500 dark:hover:text-neutral-400 md:border border-border rounded-lg cursor-pointer md:shadow-xs md:hover:shadow-sm transition"
   >
     <Icon name="lucide:search" class="size-5 md:size-4" />
     <span class="hidden md:inline">Search documentation</span>
@@ -49,11 +49,11 @@ import { Icon } from "astro-icon/components";
           <!-- Search Input -->
           <div
             class="flex items-center gap-3 px-4"
-            :class="{ 'border-b border-neutral-200/80': results.length > 0 || (query.length > 0 && !loading) }"
+            :class="{ 'border-b border-neutral-200/80 dark:border-neutral-700/70': results.length > 0 || (query.length > 0 && !loading) }"
           >
             <Icon
               name="lucide:search"
-              class="size-5 sm:size-[18px] text-neutral-400 shrink-0"
+              class="size-5 sm:size-[18px] text-neutral-400 dark:text-neutral-500 shrink-0"
             />
             <input
               x-ref="searchInput"
@@ -65,18 +65,18 @@ import { Icon } from "astro-icon/components";
               x-on:keydown.enter.prevent="goToSelected()"
               type="text"
               placeholder="Search documentation..."
-              class="flex-1 py-4 text-base bg-transparent outline-none placeholder:text-neutral-400 sm:text-sm"
+              class="flex-1 py-4 text-base bg-transparent text-neutral-900 dark:text-neutral-100 outline-none placeholder:text-neutral-400 dark:placeholder:text-neutral-500 sm:text-sm"
             />
             <div x-show="loading" class="shrink-0 p-1">
               <Icon
                 name="lucide:loader"
-                class="w-4 h-4 text-neutral-400 animate-spin"
+                class="w-4 h-4 text-neutral-400 dark:text-neutral-500 animate-spin"
               />
             </div>
             <button
               x-show="query.length > 0 && !loading"
               x-on:click="clear()"
-              class="shrink-0 p-1 text-neutral-400 hover:text-neutral-600 transition-colors"
+              class="shrink-0 p-1 text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors"
             >
               <Icon name="lucide:x" class="w-4 h-4" />
             </button>
@@ -87,14 +87,14 @@ import { Icon } from "astro-icon/components";
             <!-- No Results -->
             <div
               x-show="query.length > 0 && results.length === 0 && !loading"
-              class="px-4 py-8 text-center text-neutral-500"
+              class="px-4 py-8 text-center text-neutral-500 dark:text-neutral-400"
             >
               <Icon
                 name="lucide:search-slash"
-                class="size-8 mx-auto mb-3 text-neutral-300"
+                class="size-8 mx-auto mb-3 text-neutral-300 dark:text-neutral-600"
               />
               <p class="text-sm">
-                No results found for <strong class="text-neutral-600"
+                No results found for <strong class="text-neutral-600 dark:text-neutral-300"
                   >"<span x-text="query"></span>"</strong
                 >.
               </p>
@@ -103,7 +103,7 @@ import { Icon } from "astro-icon/components";
             <!-- Results List -->
             <ul
               x-show="results.length > 0"
-              class="divide-y divide-neutral-200/80"
+              class="divide-y divide-neutral-200/80 dark:divide-neutral-700/70"
             >
               <template
                 x-for="(result, index) in results"
@@ -115,30 +115,30 @@ import { Icon } from "astro-icon/components";
                     x-on:click="close()"
                     x-on:mouseenter="selectedIndex = index"
                     class="flex flex-col gap-1 px-4 py-3 transition-colors"
-                    :class="{ 'bg-neutral-100/60': selectedIndex === index }"
+                    :class="{ 'bg-neutral-100/60 dark:bg-neutral-700/30': selectedIndex === index }"
                   >
                     <div class="flex items-center gap-2">
                       <!-- Page icon -->
                       <Icon
                         name="lucide:file"
                         x-show="result.type === 'page'"
-                        class="w-4 h-4 text-neutral-400 shrink-0"
+                        class="w-4 h-4 text-neutral-400 dark:text-neutral-500 shrink-0"
                       />
                       <!-- Heading icon -->
                       <Icon
                         name="lucide:hash"
                         x-show="result.type === 'heading'"
-                        class="w-4 h-4 text-neutral-400 shrink-0"
+                        class="w-4 h-4 text-neutral-400 dark:text-neutral-500 shrink-0"
                       />
                       <!-- Content/body text icon -->
                       <Icon
                         name="lucide:text"
                         x-show="result.type === 'content'"
-                        class="w-4 h-4 text-neutral-400 shrink-0"
+                        class="w-4 h-4 text-neutral-400 dark:text-neutral-500 shrink-0"
                       />
                       <!-- Parent title breadcrumb -->
                       <span
-                        class="text-sm text-neutral-500 truncate"
+                        class="text-sm text-neutral-500 dark:text-neutral-400 truncate"
                         x-show="result.parentTitle"
                       >
                         <span x-text="result.parentTitle"></span>
@@ -147,17 +147,17 @@ import { Icon } from "astro-icon/components";
                       <!-- Title: highlighted for page/heading, plain for content -->
                       <span
                         x-show="result.type === 'page' || result.type === 'heading'"
-                        class="font-medium text-neutral-900 truncate [&_mark]:bg-neutral-200 [&_mark]:text-neutral-900 [&_mark]:rounded [&_mark]:px-0.5"
+                        class="font-medium text-neutral-900 dark:text-neutral-100 truncate [&_mark]:bg-neutral-200 [&_mark]:text-neutral-900 dark:[&_mark]:bg-neutral-700 dark:[&_mark]:text-neutral-100 [&_mark]:rounded [&_mark]:px-0.5"
                         x-html="highlightMatch(result.title, query)"></span>
                       <span
                         x-show="result.type === 'content'"
-                        class="font-medium text-neutral-900 truncate"
+                        class="font-medium text-neutral-900 dark:text-neutral-100 truncate"
                         x-text="result.title"></span>
                     </div>
                     <!-- Excerpt: only for content type -->
                     <p
                       x-show="result.type === 'content'"
-                      class="text-sm text-neutral-600 line-clamp-2 pl-6 [&_mark]:bg-neutral-200 [&_mark]:text-neutral-900 [&_mark]:rounded [&_mark]:px-0.5"
+                      class="text-sm text-neutral-600 dark:text-neutral-300 line-clamp-2 pl-6 [&_mark]:bg-neutral-200 [&_mark]:text-neutral-900 dark:[&_mark]:bg-neutral-700 dark:[&_mark]:text-neutral-100 [&_mark]:rounded [&_mark]:px-0.5"
                       x-html="result.excerpt"
                     >
                     </p>

package/template/src/components/Sidebar.astro

@@ -7,11 +7,13 @@ const config: DocsConfig = await getConfig();
 ---
 
 <aside class="flex flex-col h-full">
-  <nav class="overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+  <nav
+    class="overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+  >
     <SidebarMenu navigation={config.navigation} />
   </nav>
   <div
-    class="mt-auto bg-white z-10 p-3 border-t border-t-border-light flex gap-1.5 justify-end items-center"
+    class="mt-auto bg-background z-10 p-3 border-t border-t-border-light flex gap-1.5 justify-end items-center"
   >
     <span class="text-neutral-400 text-xs font-light">Theme</span>
     <ThemeSwitcher />

package/template/src/components/SidebarDropdown.astro

@@ -69,88 +69,91 @@ const currentPrefix = parentSlug
 <div x-data=`{
     open: false,
 }`>
-  <div
-    class:list={[
-      "mt-3 mx-2 z-10 relative",
-      menu.label && "rounded-lg bg-neutral-100 dark:bg-neutral-800/60 p-[3px]",
-    ]}
-  >
-    {
-      menu.label && (
-        <label class="font-semibold text-xs px-2 py-1.5 block">
-          {menu.label}
-        </label>
-      )
-    }
-    <div class="relative">
-      <button
-        class="flex items-center w-full text-sm text-neutral-700 dark:text-neutral-200 bg-white dark:bg-neutral-700/50 border-t border-x border-neutral-200/70 dark:border-neutral-700/40 dark:border-b rounded-lg shadow-xs px-3 py-2 cursor-pointer"
-        x-on:click="open = true"
-        aria-haspopup="menu"
-        aria-expanded
-      >
-        {
-          menu.items[currentMenuIndex].icon && (
-            <Icon
-              class="mr-2 size-4 opacity-80"
-              name={menu.items[currentMenuIndex].icon}
-            />
-          )
-        }
-        <span class="font-medium">{menu.items[currentMenuIndex].label}</span>
-        <Icon class="ml-auto" name="lucide:chevrons-up-down" />
-      </button>
-      <div class="fixed inset-0 z-50" x-show="open" x-on:click="open = false">
-      </div>
-      <ul
-        class:list={[
-          "z-50 absolute bg-white dark:bg-neutral-700/50 border border-neutral-200 rounded-lg inset-x-0 top-full py-[3px] shadow-xl overflow-hidden",
-          menu.label ? "mt-1.5" : "mt-1",
-        ]}
-        x-init
-        role="menu"
-        x-show="open"
-        x-transition.origin.top
-        x-cloak
-      >
-        {
-          menu.items.map(({ label }, index) => {
-            return (
-              <li
-                x-data={`{
+  <div class="mt-3 mx-2 z-10 relative dark:bg-neutral-900 rounded-lg">
+    <div
+      class:list={[
+        "",
+        menu.label &&
+          "rounded-lg bg-neutral-100 dark:bg-neutral-800/60 p-[3px]",
+      ]}
+    >
+      {
+        menu.label && (
+          <label class="font-semibold text-xs px-2 py-1.5 block">
+            {menu.label}
+          </label>
+        )
+      }
+      <div class="relative">
+        <button
+          class="flex items-center w-full text-sm text-neutral-700 dark:text-neutral-200 bg-white dark:bg-neutral-700/30 border-t border-x border-neutral-200/70 dark:border-neutral-700/40 dark:border-b rounded-lg shadow-xs px-3 py-2 cursor-pointer"
+          x-on:click="open = true"
+          aria-haspopup="menu"
+          aria-expanded
+        >
+          {
+            menu.items[currentMenuIndex].icon && (
+              <Icon
+                class="mr-2 size-4 opacity-80"
+                name={menu.items[currentMenuIndex].icon}
+              />
+            )
+          }
+          <span class="font-medium">{menu.items[currentMenuIndex].label}</span>
+          <Icon class="ml-auto" name="lucide:chevrons-up-down" />
+        </button>
+        <div class="fixed inset-0 z-50" x-show="open" x-on:click="open = false">
+        </div>
+        <ul
+          class:list={[
+            "z-50 absolute bg-white dark:bg-neutral-800 border dark:border-neutral-700/40 rounded-lg inset-x-0 top-full py-[3px] shadow-xl overflow-hidden",
+            menu.label ? "mt-1.5" : "mt-1",
+          ]}
+          x-init
+          role="menu"
+          x-show="open"
+          x-transition.origin.top
+          x-cloak
+        >
+          {
+            menu.items.map(({ label }, index) => {
+              return (
+                <li
+                  x-data={`{
                 index: ${index}
               }`}
-                role="menuitem"
-              >
-                <a
-                  class="flex items-center px-3 py-2 cursor-pointer text-sm text-neutral-700 relative z-0 before:-z-10 before:absolute before:inset-x-1 before:inset-y-px before:rounded-md before:duration-150"
-                  class:list={[
-                    index === currentMenuIndex
-                      ? "before:bg-neutral-200/50 text-neutral-900"
-                      : "hover:before:bg-neutral-100/70",
-                  ]}
-                  href={firstHrefOfMenuItems[index] ?? "/"}
+                  role="menuitem"
                 >
-                  {menu.items[index].icon && (
-                    <Icon
-                      class="mr-2 size-4 opacity-75"
-                      name={menu.items[index].icon}
-                    />
-                  )}
-                  {label}
-                  {index === currentMenuIndex && (
-                    <Icon
-                      class="ml-auto text-neutral-900 [&_path]:stroke-3"
-                      name="lucide:check"
-                      stroke-width={10}
-                    />
-                  )}
-                </a>
-              </li>
-            );
-          })
-        }
-      </ul>
+                  <a
+                    class="flex items-center px-3 py-2 cursor-pointer text-sm text-neutral-700 dark:text-neutral-300 relative z-0 before:-z-10 before:absolute before:inset-x-1 before:inset-y-px before:rounded-md before:duration-150"
+                    class:list={[
+                      index === currentMenuIndex
+                        ? "before:bg-neutral-200/50 dark:before:bg-neutral-700/50 text-neutral-900 dark:text-white"
+                        : "hover:before:bg-neutral-100/70 dark:hover:before:bg-neutral-700/30",
+                    ]}
+                    href={firstHrefOfMenuItems[index] ?? "/"}
+                  >
+                    {menu.items[index].icon && (
+                      <Icon
+                        class="mr-2 size-4 opacity-75"
+                        name={menu.items[index].icon}
+                      />
+                    )}
+                    {label}
+                    {index === currentMenuIndex && (
+                      <Icon
+                        class="ml-auto text-primary [&_path]:stroke-3"
+                        name="lucide:check"
+                        stroke-width={10}
+                      />
+                    )}
+                  </a>
+                </li>
+              );
+            })
+          }
+        </ul>
+      </div>
     </div>
   </div>
   <div

package/template/src/components/SidebarSegmented.astro

@@ -65,22 +65,22 @@ const currentPrefix = parentSlug
   : menuItemSlug;
 ---
 
-<div class="mt-3 mx-2">
+<div class="mt-3 mx-2 z-10 relative dark:bg-neutral-900 rounded-lg">
   {
     menu.label && (
       <label class="font-semibold text-xs px-2 pb-1 block">{menu.label}</label>
     )
   }
-  <ul class="rounded-lg bg-neutral-100 p-[3px]">
+  <ul class="rounded-lg bg-neutral-100 dark:bg-neutral-800/60 p-[3px]">
     {
       menu.items.map((item, index) => (
         <li>
           <a
-            class="flex items-center px-3 py-1.5 cursor-pointer text-sm rounded-md border-x border-t"
+            class="flex items-center px-3 py-1.5 cursor-pointer text-sm rounded-md border-x border-t transition-colors duration-150"
             class:list={[
               index === currentMenuIndex
-                ? "bg-white border-neutral-200/70 shadow-sm shadow-neutral-200 text-neutral-900"
-                : "text-neutral-600 border-transparent",
+                ? "bg-white dark:bg-neutral-700/30 border-neutral-200/70 dark:border-neutral-700/40 dark:border-b shadow-sm shadow-neutral-200/80 dark:shadow-neutral-950/20 text-neutral-900 dark:text-white"
+                : "text-neutral-600 dark:text-neutral-300 border-transparent hover:text-primary dark:hover:text-primary",
             ]}
             href={firstHrefOfMenuItems[index] ?? "/"}
           >