radiant-docs 0.1.59 → 0.1.61

package/template/src/components/SidebarGroup.astro

@@ -18,7 +18,7 @@ const groupSlug = slugify(item.group);
 const currentPrefix = parentSlug ? `${parentSlug}/${groupSlug}` : groupSlug;
 ---
 
-<li class="my-8 first:my-0 last:my-0">
+<li class="my-8 first:mt-0 last:mb-0">
   <div class:list={["text-sm font-semibold mb-2 flex items-center gap-2 px-2"]}>
     {item.icon && <Icon name={item.icon} class="size-4 text-neutral-500" />}
     {item.group}

package/template/src/components/ThemeSwitcher.astro

@@ -4,15 +4,15 @@ import { Icon } from "astro-icon/components";
 
 <div
   x-data="{
-        forcedTheme: (() => {
+        initialTheme: (() => {
             const mode = new URLSearchParams(window.location.search).get('mode');
             return mode === 'light' || mode === 'dark' ? mode : null;
         })(),
         theme: localStorage.getItem('theme') || 'system',
         themeSwitchFrameId: null,
         init() {
-            if (this.forcedTheme) {
-                this.theme = this.forcedTheme;
+            if (this.initialTheme) {
+                this.theme = this.initialTheme;
             }
 
             this.updateDOM();
@@ -22,13 +22,6 @@ import { Icon } from "astro-icon/components";
 
             // Watch for changes to the 'theme' state
             this.$watch('theme', val => {
-                if (this.forcedTheme) {
-                    this.theme = this.forcedTheme;
-                    this.updateDOM();
-                    this.$nextTick(() => this.updateMarker());
-                    return;
-                }
-
                 localStorage.setItem('theme', val);
                 this.updateDOM();
                 this.$nextTick(() => this.updateMarker())
@@ -46,7 +39,7 @@ import { Icon } from "astro-icon/components";
         updateDOM() {
             const root = document.documentElement;
             root.classList.add('is-switching-theme');
-            const activeTheme = this.forcedTheme || this.theme;
+            const activeTheme = this.theme;
             const isDark = activeTheme === 'dark' || 
               (activeTheme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
 
@@ -64,7 +57,7 @@ import { Icon } from "astro-icon/components";
         markerStyle: { left: null, width: null },
         updateMarker() {
             // Use the theme name as the ref key
-            const markerTheme = this.forcedTheme || this.theme;
+            const markerTheme = this.theme;
             const el = this.$refs[markerTheme];
             if (el) {
                 this.markerStyle = {
@@ -86,7 +79,6 @@ import { Icon } from "astro-icon/components";
     x-ref="light"
     @click="theme = 'light'"
     :class="theme === 'light' ? 'text-neutral-800' : 'text-neutral-500'"
-    :disabled="Boolean(forcedTheme)"
     class="p-[5px] rounded-full text-sm font-medium transition-all cursor-pointer z-10"
   >
     <Icon name="lucide:sun-medium" class="size-[13px]" />
@@ -96,7 +88,6 @@ import { Icon } from "astro-icon/components";
     x-ref="dark"
     @click="theme = 'dark'"
     :class="theme === 'dark' ? 'text-neutral-300' : 'text-neutral-500'"
-    :disabled="Boolean(forcedTheme)"
     class="p-[5px] rounded-full text-sm font-medium transition-all cursor-pointer z-10"
   >
     <Icon name="lucide:moon" class="size-[13px]" />
@@ -106,7 +97,6 @@ import { Icon } from "astro-icon/components";
     x-ref="system"
     @click="theme = 'system'"
     :class="theme === 'system' ? 'text-neutral-800 dark:text-neutral-300' : 'text-neutral-500'"
-    :disabled="Boolean(forcedTheme)"
     class="p-[6px] rounded-full text-sm font-medium transition-all cursor-pointer z-10"
   >
     <Icon name="lucide:monitor" class="size-[12px]" />

package/template/src/components/chat/AssistantEmbedPanel.tsx

@@ -1963,7 +1963,7 @@ export default function AssistantEmbedPanel({
           <AssistantPanelIcon
             color={launcherIconColor}
             imageSrc={launcherIconImageSrc}
-            className="assistant-embed-header-icon inline-flex size-9 shrink-0 items-center justify-center rounded-md dark:border-[0.5px] border-neutral-900/7 bg-radial from-neutral-700/5 dark:from-white/7 to-neutral-900/7 dark:to-white/5 to-60% text-neutral-900 dark:border-white/7 dark:text-neutral-50 [&_img]:block [&_img]:size-5.5 [&_img]:object-contain [&_svg]:static [&_svg]:block [&_svg]:size-5 [&_svg]:transform-none [&_svg]:opacity-100"
+            className="assistant-embed-header-icon inline-flex size-9 shrink-0 items-center justify-center rounded-md dark:border-[0.5px] border-neutral-900/7 bg-neutral-700/7 dark:bg-white/6 text-neutral-900 dark:border-white/7 dark:text-neutral-50 [&_img]:block [&_img]:size-5.5 [&_img]:object-contain [&_svg]:static [&_svg]:block [&_svg]:size-5 [&_svg]:transform-none [&_svg]:opacity-100"
           />
           <div className="min-w-0 space-y-px">
             <p className="truncate text-sm font-medium leading-3.5 text-neutral-900 dark:text-neutral-50">
@@ -2198,14 +2198,25 @@ export default function AssistantEmbedPanel({
             </p>
             <button
               type="button"
-              className="mt-1 inline-flex items-center gap-1.5 rounded-md border border-neutral-900/8 bg-white px-2.5 py-1.5 text-[13px] font-medium text-neutral-700 shadow-xs transition hover:bg-neutral-50 dark:border-white/10 dark:bg-white/5 dark:text-neutral-200 dark:hover:bg-white/10 cursor-pointer"
+              className="mt-1 inline-flex items-center gap-1.5 rounded-md border border-neutral-900/8 bg-white px-2.5 py-1.5 text-[13px] font-medium text-neutral-700 shadow-xs transition hover:bg-neutral-50/80 dark:border-white/10 dark:bg-white/5 dark:text-neutral-200 dark:hover:bg-white/10 cursor-pointer"
               onClick={handleUnavailableBack}
             >
-              <Icon
-                icon="lucide:arrow-left"
-                className="size-3.5"
-                aria-hidden="true"
-              />
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="14px"
+                height="14px"
+                viewBox="0 0 24 24"
+              >
+                <path d="M0 0h24v24H0z" fill="none" />
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="m12 19l-7-7l7-7m7 7H5"
+                />
+              </svg>
               Back
             </button>
           </div>

package/template/src/components/endpoint/PlaygroundBar.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from "astro-icon/components";
-import { methodColors } from "../../lib/utils";
+import { methodTagColors } from "../../lib/utils";
 import type { OpenApiRoute } from "../../lib/routes";
 
 interface Props {
@@ -9,18 +9,26 @@ interface Props {
 }
 
 const { route, serverUrl } = Astro.props;
+const methodColor =
+  methodTagColors[route.openApiMethod.toLowerCase()] ?? methodTagColors.get;
+
+const pathParts = route.openApiPath
+  .split(/(\{[^}]+\})/g)
+  .filter(Boolean)
+  .map((text) => ({
+    text,
+    isParam: text.startsWith("{") && text.endsWith("}"),
+  }));
 ---
 
 <div
-  class="min-w-0 flex-1 flex items-center p-1 border border-neutral-200 bg-white rounded-xl shadow-xs overflow-hidden dark:border-neutral-800 dark:bg-(--rd-code-surface)"
+  class="min-w-0 flex-1 flex items-center p-1 border-[0.5px] border-neutral-900/8 bg-white rounded-xl shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-6px_rgba(0,0,0,0.08)] overflow-hidden dark:border-white/6 dark:bg-(--rd-code-surface) dark:shadow-[0_-.5px_1px_rgba(255,255,255,0.15),0_5px_12px_-6px_rgba(0,0,0,0.2)]"
 >
   <span
-    class:list={[
-      "shrink-0 inline-block px-1.5 ml-1 text-sm font-semibold rounded-md uppercase border",
-      methodColors[route.openApiMethod.toLowerCase()] || methodColors.get,
-    ]}
+    class="rd-endpoint-method-tag shrink-0 inline-block px-1.5 ml-1 text-sm font-semibold rounded-md uppercase border"
+    style={`--rd-tag-color-light:${methodColor};--rd-tag-color-dark:${methodColor};`}
   >
-    {route.openApiMethod}
+    {route.openApiMethod.toUpperCase()}
   </span>
   <code
     class="group flex-1 mx-2 h-[30px] flex items-center text-[13px] text-neutral-600 dark:text-neutral-300 min-w-0 relative cursor-pointer"
@@ -41,8 +49,23 @@ const { route, serverUrl } = Astro.props;
                 }
               }`
   >
-    <span class="truncate min-w-0 flex-1">
-      {route.openApiPath}
+    <span
+      class="flex min-w-0 flex-1 items-center overflow-hidden whitespace-nowrap"
+    >
+      {
+        pathParts.map((part) =>
+          part.isParam ? (
+            <span
+              class="rd-endpoint-path-param inline-block rounded-sm border p-px leading-none"
+              style={`--rd-tag-color-light:${methodColor};--rd-tag-color-dark:${methodColor};`}
+            >
+              {part.text}
+            </span>
+          ) : (
+            <span>{part.text}</span>
+          ),
+        )
+      }
     </span>
     <div
       class="absolute right-0 top-1/2 -translate-y-1/2 flex items-center gap-1 text-[12px] px-1.5 py-px bg-white border border-neutral-200 rounded-md duration-200 opacity-0 scale-75 group-hover:scale-100 group-hover:opacity-100 group-hover:duration-200 group-hover:ease-out group-hover:delay-75 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300"
@@ -62,3 +85,25 @@ const { route, serverUrl } = Astro.props;
   </code>
   <slot />
 </div>
+
+<style>
+  .rd-endpoint-method-tag,
+  .rd-endpoint-path-param {
+    --rd-tag-color: var(--rd-tag-color-light, var(--color-theme));
+    background-color: color-mix(in oklab, var(--rd-tag-color) 8%, transparent);
+    border-color: color-mix(in oklab, var(--rd-tag-color) 0%, transparent);
+    color: color-mix(in oklab, var(--rd-tag-color) 95%, transparent);
+  }
+
+  :global(.dark) .rd-endpoint-method-tag,
+  :global(.dark) .rd-endpoint-path-param,
+  :global([data-theme="dark"]) .rd-endpoint-method-tag,
+  :global([data-theme="dark"]) .rd-endpoint-path-param {
+    --rd-tag-color: var(
+      --rd-tag-color-dark,
+      var(--rd-tag-color-light, var(--color-theme))
+    );
+    background-color: color-mix(in oklab, var(--rd-tag-color) 12%, transparent);
+    color: color-mix(in oklab, var(--rd-tag-color) 85%, transparent);
+  }
+</style>

package/template/src/components/endpoint/PlaygroundField.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from "astro-icon/components";
-import type { Field as FieldType } from "../OpenApiPage.astro";
+import type { OpenApiField as FieldType } from "../../lib/openapi/operation-doc";
 import Field from "../ui/Field.astro";
 
 interface Props {

package/template/src/components/endpoint/PlaygroundForm.astro

@@ -5,15 +5,18 @@ import type { OpenApiRoute } from "../../lib/routes";
 import { getConfig } from "../../lib/validation";
 import { renderMarkdown } from "../../lib/utils";
 import {
-  headers,
-  type RequestFields,
-  type RequestSectionVariantData,
-} from "../OpenApiPage.astro";
+  OPENAPI_REQUEST_SECTION_LABELS,
+  type OpenApiRequestFields,
+  type OpenApiRequestSectionVariantData,
+} from "../../lib/openapi/operation-doc";
 import Accordion from "../user/Accordion.astro";
 import PlaygroundBar from "./PlaygroundBar.astro";
 import ResponseDisplay from "./ResponseDisplay.astro";
 import PlaygroundField from "./PlaygroundField.astro";
 
+type RequestFields = OpenApiRequestFields;
+type RequestSectionVariantData = OpenApiRequestSectionVariantData;
+
 interface Props {
   route: OpenApiRoute;
   serverUrl?: string;
@@ -33,6 +36,7 @@ const {
   bodyDescription = "",
   bodyDefaultKind,
 } = Astro.props;
+const headers: Record<string, string> = OPENAPI_REQUEST_SECTION_LABELS;
 const config = await getConfig();
 const configuredProxyUrl =
   typeof import.meta.env.PUBLIC_PROXY_URL === "string"
@@ -583,7 +587,7 @@ const sectionVariantFieldNames = Object.fromEntries(
             }
 
             return (
-              <div class="border border-neutral-200 bg-white shadow-xs rounded-xl p-4 pb-0 dark:border-neutral-800 dark:bg-(--rd-code-surface) [&_[role='region']]:border-b-0">
+              <div class="border-[0.5px] border-neutral-900/8 bg-white shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-6px_rgba(0,0,0,0.08)] rounded-xl p-4 pb-0 dark:border-white/6 dark:bg-(--rd-code-surface) dark:shadow-[0_-.5px_1px_rgba(255,255,255,0.15),0_5px_12px_-6px_rgba(0,0,0,0.2)] [&_[role='region']]:border-b-0">
                 <Accordion title={headers[key]} defaultOpen titleSize="xl">
                   {key === "body" && formattedBodyDescription && (
                     <div

package/template/src/components/endpoint/RequestSnippets.astro

@@ -593,7 +593,12 @@ const hasMultipleRequests = requestSnippetItems.length > 1;
         </div>
       </div>
 
-      <div class="relative min-h-0 min-w-0 flex-1 overflow-hidden rounded-b-xl rounded-tl-xl border-[0.5px] border-(--rd-code-tab-edge-border) bg-(--rd-code-surface)">
+      <div
+        class:list={[
+          "relative min-h-0 min-w-0 flex-1 overflow-hidden rounded-b-xl border-[0.5px] border-(--rd-code-tab-edge-border) bg-(--rd-code-surface)",
+          hasMultipleRequests && "rounded-tl-xl",
+        ]}
+      >
         <div
           x-ref="snippetPanels"
           class="relative h-full overflow-auto transition-[height] motion-reduce:transition-none [scrollbar-width:thin] [scrollbar-color:var(--color-neutral-300)_transparent] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-neutral-300/70 hover:[&::-webkit-scrollbar-thumb]:bg-neutral-300/90 dark:[scrollbar-color:var(--color-neutral-700)_transparent] dark:[&::-webkit-scrollbar-thumb]:bg-neutral-700/70 dark:hover:[&::-webkit-scrollbar-thumb]:bg-neutral-700/90"

package/template/src/components/endpoint/ResponseFieldTree.astro

@@ -46,7 +46,9 @@ function countImmediateChildren(field: ResponseField): number {
 }
 ---
 
-<div class="flex flex-col gap-4 divide-y divide-neutral-100 dark:divide-neutral-800 *:pb-3 *:last:pb-0">
+<div
+  class="flex flex-col gap-4 divide-y divide-neutral-100 dark:divide-neutral-800 *:pb-3 *:last:pb-0"
+>
   {
     fields.map((field) => {
       const revealedFieldCount = countImmediateChildren(field);
@@ -69,10 +71,7 @@ function countImmediateChildren(field: ResponseField): number {
             exclusiveMaximum={field.exclusiveMaximum}
           />
           {hasExpandableContent && (
-            <div
-              class="mt-2 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'"
-            >
+            <div class="mt-2.5 w-full overflow-hidden rounded-lg border-[0.5px] border-neutral-900/8 bg-white shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-6px_rgba(0,0,0,0.08)] transition-colors duration-200 dark:border-white/6 dark:bg-(--rd-code-surface) dark:shadow-[0_-.5px_1px_rgba(255,255,255,0.15),0_5px_12px_-6px_rgba(0,0,0,0.2)]">
               <button
                 type="button"
                 x-on:click="expanded = !expanded"
@@ -83,19 +82,21 @@ function countImmediateChildren(field: ResponseField): number {
                   <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>
                     {revealedFieldCount}{" "}
-                    {revealedFieldCount === 1
-                      ? "field"
-                      : "fields"}
+                    {revealedFieldCount === 1 ? "field" : "fields"}
                   </span>
                 </span>
               </button>
               <div x-show="expanded" x-collapse x-cloak>
                 <div class="border-t border-neutral-100 px-3 py-3 dark:border-neutral-800">
-                  {field.nested && field.nested.length > 0 && nestedFieldCount > 0 && (
-                    <Astro.self fields={field.nested} depth={depth + 1} />
-                  )}
+                  {field.nested &&
+                    field.nested.length > 0 &&
+                    nestedFieldCount > 0 && (
+                      <Astro.self fields={field.nested} depth={depth + 1} />
+                    )}
                   {field.variants && field.variants.length > 0 && (
-                    <div class:list={["space-y-2", nestedFieldCount > 0 && "mt-3"]}>
+                    <div
+                      class:list={["space-y-2", nestedFieldCount > 0 && "mt-3"]}
+                    >
                       <p class="text-xs text-neutral-500 dark:text-neutral-400">
                         {field.variantType === "anyOf"
                           ? "One or more variants may apply."
@@ -107,7 +108,10 @@ function countImmediateChildren(field: ResponseField): number {
                             <div class="mb-2 text-xs font-medium text-neutral-600 dark:text-neutral-400">
                               {variant.label}
                             </div>
-                            <Astro.self fields={variant.fields} depth={depth + 1} />
+                            <Astro.self
+                              fields={variant.fields}
+                              depth={depth + 1}
+                            />
                           </div>
                           {field.variantType === "oneOf" &&
                             index < field.variants.length - 1 && (

package/template/src/components/endpoint/ResponseFields.astro

@@ -771,10 +771,9 @@ Object.entries(responses)
             {response.variants && response.variants.length > 0 && (
               <p class="mb-2 text-xs text-neutral-500 dark:text-neutral-400">Common fields</p>
             )}
-            <div x-data="{ expanded: false }">
+            <div x-data="{ expanded: true }">
               <div
-                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'"
+                class="w-full overflow-hidden rounded-xl border-[0.5px] border-neutral-900/8 bg-white shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-6px_rgba(0,0,0,0.08)] transition-colors duration-200 dark:border-white/6 dark:bg-(--rd-code-surface) dark:shadow-[0_-.5px_1px_rgba(255,255,255,0.15),0_5px_12px_-6px_rgba(0,0,0,0.2)]"
               >
                 <button
                   type="button"
@@ -814,10 +813,9 @@ Object.entries(responses)
                   <div class="mb-2 text-xs font-medium text-neutral-600 dark:text-neutral-400">
                     {variant.label}
                   </div>
-                  <div x-data="{ expanded: false }">
+                  <div x-data="{ expanded: true }">
                     <div
-                      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'"
+                      class="w-full overflow-hidden rounded-lg border-[0.5px] border-neutral-900/8 bg-white shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-6px_rgba(0,0,0,0.08)] transition-colors duration-200 dark:border-white/6 dark:bg-(--rd-code-surface) dark:shadow-[0_-.5px_1px_rgba(255,255,255,0.15),0_5px_12px_-6px_rgba(0,0,0,0.2)]"
                     >
                       <button
                         type="button"

package/template/src/components/endpoint/ResponseSnippets.astro

@@ -513,7 +513,12 @@ const hasMultipleResponses = responseSnippetItems.length > 1;
         </div>
       </div>
 
-      <div class="relative min-h-0 min-w-0 flex-1 overflow-hidden rounded-b-xl rounded-tl-xl border-[0.5px] border-(--rd-code-tab-edge-border) bg-(--rd-code-surface)">
+      <div
+        class:list={[
+          "relative min-h-0 min-w-0 flex-1 overflow-hidden rounded-b-xl border-[0.5px] border-(--rd-code-tab-edge-border) bg-(--rd-code-surface)",
+          hasMultipleResponses && "rounded-tl-xl",
+        ]}
+      >
         <div
           x-ref="snippetPanels"
           class="relative h-full overflow-auto transition-[height] motion-reduce:transition-none [scrollbar-width:thin] [scrollbar-color:var(--color-neutral-300)_transparent] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-neutral-300/70 hover:[&::-webkit-scrollbar-thumb]:bg-neutral-300/90 dark:[scrollbar-color:var(--color-neutral-700)_transparent] dark:[&::-webkit-scrollbar-thumb]:bg-neutral-700/70 dark:hover:[&::-webkit-scrollbar-thumb]:bg-neutral-700/90"

package/template/src/components/sidebar/SidebarEndpointLink.astro

@@ -1,6 +1,6 @@
 ---
 import Tag from "../ui/Tag.astro";
-import { methodColors } from "../../lib/utils";
+import { methodTagColors } from "../../lib/utils";
 import { getOpenApiEndpointRouteHref } from "../../lib/routes";
 import type { NavTag } from "../../lib/validation";
 
@@ -34,6 +34,10 @@ const href = await getOpenApiEndpointRouteHref({
 
 // Use summary for title, fallback to method + path
 const text = title || summary || `${normalizedMethod.toUpperCase()} ${pathStr}`;
+const methodLabel = (
+  normalizedMethod !== "delete" ? normalizedMethod : "del"
+).toUpperCase();
+const methodColor = methodTagColors[normalizedMethod] ?? methodTagColors.get;
 
 // Normalize paths for comparison (remove trailing slashes)
 const currentPath = Astro.url.pathname.replace(/\/$/, "");
@@ -44,22 +48,15 @@ const isActive = currentPath === targetPath;
 <a
   href={href}
   class:list={[
-    "flex items-center px-2 py-[7px] text-sm relative z-0 before:-z-10 before:absolute before:inset-x-0 before:inset-y-px before:rounded-md before:duration-150",
+    "flex items-center gap-2 px-2 py-[7px] text-sm relative z-0 before:-z-10 before:absolute before:inset-x-0 before:inset-y-px before:rounded-md before:duration-150",
     isActive
       ? "before:bg-neutral-200/50 dark:before:bg-neutral-800 text-neutral-900 dark:text-neutral-200"
       : "text-neutral-600 dark:text-neutral-400 hover:before:bg-neutral-100/70 dark:hover:before:bg-neutral-800/50 hover:text-neutral-900 dark:hover:text-neutral-300",
   ]}
 >
-  <span
-    class:list={[
-      "px-1 py-px mr-1.5 border rounded-md text-[10px] font-semibold uppercase",
-      methodColors[normalizedMethod] ?? methodColors.get,
-    ]}
-  >
-    {normalizedMethod !== "delete" ? normalizedMethod : "del"}
-  </span>
-  <div class="flex items-center gap-2 min-w-0">
-    <span>{text}</span>
+  <div class="flex min-w-0 flex-1 items-center gap-2">
+    <span class="min-w-0 truncate">{text}</span>
     {tag && <Tag tag={tag} />}
   </div>
+  <Tag color={methodColor}>{methodLabel}</Tag>
 </a>

package/template/src/components/sidebar/SidebarOpenApi.astro

@@ -31,7 +31,7 @@ const openApiDoc = await loadOpenApiSpec(openApiPath);
 
 // Helper function to parse endpoint string
 function parseEndpointString(
-  endpointStr: string
+  endpointStr: string,
 ): { method: string; path: string } | null {
   const trimmed = endpointStr.trim();
   const parts = trimmed.split(/\s+/);
@@ -57,7 +57,7 @@ function shouldIncludeEndpoint(
   method: string,
   pathStr: string,
   include?: string[],
-  exclude?: string[]
+  exclude?: string[],
 ): boolean {
   const normalizedMethod = method.toUpperCase();
   const normalizedPath = pathStr.toLowerCase();
@@ -168,13 +168,7 @@ const sortedTagGroups: TagGroup[] = Array.from(tagGroups.entries())
     // If there are tagged groups, render them (including "Other" if it exists)
     hasTaggedGroups
       ? sortedTagGroups.map((group, index) => (
-          <li
-            class={
-              index > 0
-                ? "mt-5 pt-[25px] relative before:absolute before:top-0 before:inset-x-0 before:h-px before:bg-linear-[90deg,transparent,var(--color-neutral-200)_20%,var(--color-neutral-200)_80%,transparent] dark:before:bg-linear-[90deg,transparent,var(--color-neutral-700)_20%,var(--color-neutral-700)_80%,transparent]"
-                : ""
-            }
-          >
+          <li class="my-8 first:mt-0 last:mb-0">
             <div class="text-sm font-semibold mb-2 flex items-center gap-2 px-2">
               {group.tag}
             </div>

package/template/src/components/ui/Field.astro

@@ -1,5 +1,6 @@
 ---
-import { renderMarkdown } from "../../lib/utils";
+import { methodTagColors, renderMarkdown } from "../../lib/utils";
+import Tag from "./Tag.astro";
 
 interface Props {
   name: string;
@@ -73,6 +74,9 @@ if (hasMinLength && hasMaxLength) {
 } else if (hasMaxLength) {
   stringLengthLabel = `length <= ${maxLength}`;
 }
+
+const codeChipClass =
+  "mx-px px-[5px] pr-1 bg-neutral-100/80 text-neutral-700/90 rounded-sm leading-none font-mono font-normal border border-neutral-900/4 after:hidden before:hidden dark:bg-neutral-800/90 dark:text-neutral-200/90 dark:border-white/3";
 ---
 
 <div class="space-y-3">
@@ -80,15 +84,14 @@ if (hasMinLength && hasMaxLength) {
     <span class="font-medium leading-4">
       {name}
     </span>
-    <code
-      class="text-[10px] font-medium text-neutral-500 border border-neutral-200/80 bg-neutral-50 px-1 rounded-sm dark:text-neutral-300 dark:border-neutral-700/70 dark:bg-neutral-900/70"
-      >{type}</code
-    >
+    <code class:list={["text-[10px] py-[1.5px]", codeChipClass]}>
+      {type}
+    </code>
     {
       required && (
-        <div class="text-red-700/70 bg-red-50 border border-red-700/10 rounded-full px-1.5 text-[10px] font-mono font-medium leading-none py-0.5 pb-0.5 h-fit dark:text-red-300 dark:bg-red-950/40 dark:border-red-900/40">
+        <Tag color={methodTagColors.delete} class="text-[10px]!">
           required
-        </div>
+        </Tag>
       )
     }
     {
@@ -114,14 +117,14 @@ if (hasMinLength && hasMaxLength) {
         <span class="font-medium text-xs">Options:</span>
         {enumValues.map((v, i, a) => {
           return (
-            <div class="flex">
-              <span class="text-[11px] font-medium text-neutral-600 border border-neutral-200 bg-neutral-50 px-1 py-px rounded-md dark:text-neutral-300 dark:border-neutral-700 dark:bg-neutral-900/70">
-                <code>{v}</code>
-              </span>
+            <div class="inline-flex items-center leading-none">
+              <code class:list={["text-[11px] py-[2px]", codeChipClass]}>
+                {v}
+              </code>
               {a.length - 2 === i ? (
-                <span class="ml-1"> or </span>
+                <span class="ml-1 leading-none"> or </span>
               ) : (
-                a.length - 1 !== i && <span>, </span>
+                a.length - 1 !== i && <span class="leading-none">, </span>
               )}
             </div>
           );
@@ -133,7 +136,7 @@ if (hasMinLength && hasMaxLength) {
     numericRangeLabel && (
       <div class="text-sm">
         <span class="font-medium text-xs">Range:</span>
-        <code class="text-[11px] font-medium text-neutral-600 border border-neutral-200 bg-neutral-50 px-1 py-px rounded-md dark:text-neutral-300 dark:border-neutral-700 dark:bg-neutral-900/70">
+        <code class:list={["text-[11px]", codeChipClass]}>
           {numericRangeLabel}
         </code>
       </div>
@@ -143,7 +146,7 @@ if (hasMinLength && hasMaxLength) {
     stringLengthLabel && (
       <div class="text-sm">
         <span class="font-medium text-xs">Length:</span>
-        <code class="text-[11px] font-medium text-neutral-600 border border-neutral-200 bg-neutral-50 px-1 py-px rounded-md dark:text-neutral-300 dark:border-neutral-700 dark:bg-neutral-900/70">
+        <code class:list={["text-[11px]", codeChipClass]}>
           {stringLengthLabel}
         </code>
       </div>

package/template/src/components/ui/Tag.astro

@@ -8,9 +8,10 @@ import {
 interface Props {
   tag?: NavTag;
   color?: string | ThemeColorByMode;
+  class?: string;
 }
 
-const { tag, color } = Astro.props;
+const { tag, color, class: className } = Astro.props;
 const config = await getConfig();
 
 function getTagText(value: NavTag | undefined): string | undefined {
@@ -51,7 +52,10 @@ const colorStyle = resolvedColor
 ---
 
 <span
-  class="rd-tag text-[9px] border px-[5px] py-[2px] rounded-full tracking-wide leading-none font-medium shrink-0"
+  class:list={[
+    "rd-tag text-[9px] border px-[5px] py-[2px] rounded-full tracking-wide leading-none font-medium shrink-0",
+    className,
+  ]}
   style={colorStyle}
 >
   {text ? text : <slot />}
@@ -64,4 +68,14 @@ const colorStyle = resolvedColor
     border-color: color-mix(in oklab, var(--rd-tag-color) 0%, transparent);
     color: color-mix(in oklab, var(--rd-tag-color) 95%, transparent);
   }
+
+  :global(.dark) .rd-tag,
+  :global([data-theme="dark"]) .rd-tag {
+    --rd-tag-color: var(
+      --rd-tag-color-dark,
+      var(--rd-tag-color-light, var(--color-theme))
+    );
+    background-color: color-mix(in oklab, var(--rd-tag-color) 12%, transparent);
+    color: color-mix(in oklab, var(--rd-tag-color) 85%, transparent);
+  }
 </style>

package/template/src/layouts/Layout.astro

@@ -11,6 +11,7 @@ import { getFaviconConfig } from "../lib/favicon";
 import { getDocsFontCss, getDocsFontPreloads } from "../lib/font-css";
 import { resolveStaticAssetUrl } from "../lib/static-asset-url";
 import { getDocsThemeCss } from "../lib/theme-css";
+import { resolvePageDescription } from "../lib/page-description";
 
 interface Props {
   pageTitle?: string;
@@ -39,14 +40,11 @@ const neutralPaletteCss = getDocsThemeCss(config.theme);
 const fontCss = getDocsFontCss(config.theme);
 const fontPreloads = getDocsFontPreloads(config.theme);
 const resolvedPageTitle = pageTitle?.trim();
-const resolvedPageDescription =
-  typeof pageDescription === "string" && pageDescription.trim().length > 0
-    ? pageDescription.trim()
-    : undefined;
-const fallbackDescription = resolvedPageTitle
-  ? `Learn about ${resolvedPageTitle} in the ${config.title} documentation.`
-  : `${config.title} documentation.`;
-const resolvedMetaDescription = resolvedPageDescription ?? fallbackDescription;
+const resolvedMetaDescription = resolvePageDescription({
+  pageTitle: resolvedPageTitle,
+  pageDescription,
+  docsTitle: config.title,
+});
 const documentTitle = resolvedPageTitle
   ? `${resolvedPageTitle} | ${config.title}`
   : `${config.title} Docs`;
@@ -240,18 +238,15 @@ const askAiEnabled = isDev || orgTier >= 3;
     <!-- Edges -->
     <div
       class="fixed top-1 inset-x-1 h-16 -z-10 bg-background-dark"
-      data-vaul-scale-chrome
     >
       <div class="bg-background w-full h-full rounded-t-2xl"></div>
     </div>
     <div
       class="fixed top-[63px] z-30 w-[5px] right-0 bottom-0 bg-background-dark border-l border-l-border"
-      data-vaul-scale-chrome
     >
     </div>
     <div
       class="fixed top-[63px] z-30 w-[5px] left-0 bottom-0 bg-background-dark border-r border-r-border"
-      data-vaul-scale-chrome
     >
     </div>
 
@@ -279,7 +274,6 @@ const askAiEnabled = isDev || orgTier >= 3;
     <!-- Main Content -->
     <div
       class="mx-1 mt-1 px-4 sm:px-6 lg:pl-[calc(288px+32px)] pt-16 lg:pr-8 bg-background"
-      data-vaul-scale-chrome
     >
       <main class="mx-auto pt-16 pb-16 min-h-[calc(100vh-64px)]">
         <slot />