@specglass/theme-default 0.0.10 → 0.0.11

package/dist/themes/notdiamond-light.json

@@ -0,0 +1,168 @@
+{
+    "$schema": "https://raw.githubusercontent.com/shikijs/textmate-grammars-themes/main/packages/tm-themes/themes/light-plus.json",
+    "name": "notdiamond-light",
+    "displayName": "Not Diamond Light",
+    "type": "light",
+    "colors": {
+        "editor.background": "#fafafa",
+        "editor.foreground": "#18181b",
+        "editorLineNumber.foreground": "#a1a1aa",
+        "editorLineNumber.activeForeground": "#52525b",
+        "editor.selectionBackground": "#77e54430",
+        "editor.lineHighlightBackground": "#f4f4f5"
+    },
+    "tokenColors": [
+        {
+            "scope": ["comment", "punctuation.definition.comment"],
+            "settings": {
+                "foreground": "#71717a",
+                "fontStyle": "italic"
+            }
+        },
+        {
+            "scope": ["keyword", "storage.type", "storage.modifier"],
+            "settings": {
+                "foreground": "#16a34a"
+            }
+        },
+        {
+            "scope": ["keyword.operator", "keyword.operator.assignment"],
+            "settings": {
+                "foreground": "#52525b"
+            }
+        },
+        {
+            "scope": ["keyword.control.import", "keyword.control.export", "keyword.control.from"],
+            "settings": {
+                "foreground": "#16a34a"
+            }
+        },
+        {
+            "scope": ["string", "string.quoted"],
+            "settings": {
+                "foreground": "#c2410c"
+            }
+        },
+        {
+            "scope": ["string.template", "punctuation.definition.string.template"],
+            "settings": {
+                "foreground": "#c2410c"
+            }
+        },
+        {
+            "scope": ["constant.numeric"],
+            "settings": {
+                "foreground": "#7c3aed"
+            }
+        },
+        {
+            "scope": ["constant.language"],
+            "settings": {
+                "foreground": "#7c3aed"
+            }
+        },
+        {
+            "scope": ["variable", "variable.other"],
+            "settings": {
+                "foreground": "#18181b"
+            }
+        },
+        {
+            "scope": ["variable.parameter"],
+            "settings": {
+                "foreground": "#dc2626"
+            }
+        },
+        {
+            "scope": ["entity.name.function", "support.function"],
+            "settings": {
+                "foreground": "#0284c7"
+            }
+        },
+        {
+            "scope": ["entity.name.type", "entity.name.class", "support.type", "support.class"],
+            "settings": {
+                "foreground": "#0891b2"
+            }
+        },
+        {
+            "scope": ["entity.name.tag"],
+            "settings": {
+                "foreground": "#16a34a"
+            }
+        },
+        {
+            "scope": ["entity.other.attribute-name"],
+            "settings": {
+                "foreground": "#b45309"
+            }
+        },
+        {
+            "scope": ["punctuation"],
+            "settings": {
+                "foreground": "#52525b"
+            }
+        },
+        {
+            "scope": ["meta.brace"],
+            "settings": {
+                "foreground": "#52525b"
+            }
+        },
+        {
+            "scope": ["punctuation.definition.tag"],
+            "settings": {
+                "foreground": "#71717a"
+            }
+        },
+        {
+            "scope": ["support.type.property-name"],
+            "settings": {
+                "foreground": "#0284c7"
+            }
+        },
+        {
+            "scope": ["meta.object-literal.key"],
+            "settings": {
+                "foreground": "#18181b"
+            }
+        },
+        {
+            "scope": ["variable.other.property"],
+            "settings": {
+                "foreground": "#18181b"
+            }
+        },
+        {
+            "scope": ["markup.heading"],
+            "settings": {
+                "foreground": "#16a34a",
+                "fontStyle": "bold"
+            }
+        },
+        {
+            "scope": ["markup.bold"],
+            "settings": {
+                "fontStyle": "bold"
+            }
+        },
+        {
+            "scope": ["markup.italic"],
+            "settings": {
+                "fontStyle": "italic"
+            }
+        },
+        {
+            "scope": ["markup.inline.raw"],
+            "settings": {
+                "foreground": "#c2410c"
+            }
+        },
+        {
+            "scope": ["markup.list"],
+            "settings": {
+                "foreground": "#52525b"
+            }
+        }
+    ]
+}

package/dist/ui/command.js

@@ -6,9 +6,9 @@ import { Dialog, DialogContent, DialogTitle } from "./dialog";
 const Command = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive, { ref: ref, className: cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-surface text-text", className), ...props })));
 Command.displayName = CommandPrimitive.displayName;
 const CommandDialog = ({ children, shouldFilter, dialogTitle = "Search", ...props }) => {
-    return (_jsx(Dialog, { ...props, children: _jsxs(DialogContent, { className: "overflow-hidden p-0 shadow-lg", children: [_jsx(DialogTitle, { className: "sr-only", children: dialogTitle }), _jsx(Command, { shouldFilter: shouldFilter, className: cn("[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-text-muted", "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2", "[&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5", "[&_[cmdk-input]]:h-12", "[&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3", "[&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"), children: children })] }) }));
+    return (_jsx(Dialog, { ...props, children: _jsxs(DialogContent, { className: "overflow-hidden p-0 shadow-lg", children: [_jsx(DialogTitle, { className: "sr-only", children: dialogTitle }), _jsx(Command, { shouldFilter: shouldFilter, className: cn("[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-text-muted", "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2", "[&_[cmdk-input]]:h-12", "[&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3", "[&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"), children: children })] }) }));
 };
-const CommandInput = React.forwardRef(({ className, ...props }, ref) => (_jsxs("div", { className: "flex items-center border-b border-border px-3", "cmdk-input-wrapper": "", children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: "mr-2 h-4 w-4 shrink-0 opacity-50", children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("path", { d: "m21 21-4.3-4.3" })] }), _jsx(CommandPrimitive.Input, { ref: ref, className: cn("flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-text-muted disabled:cursor-not-allowed disabled:opacity-50", className), ...props })] })));
+const CommandInput = React.forwardRef(({ className, ...props }, ref) => (_jsxs("div", { className: "flex items-center border-b border-border px-3", "cmdk-input-wrapper": "", children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: "mr-2 h-4 w-4 shrink-0 opacity-50", children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("path", { d: "m21 21-4.3-4.3" })] }), _jsx(CommandPrimitive.Input, { ref: ref, className: cn("flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none focus-visible:outline-none placeholder:text-text-muted disabled:cursor-not-allowed disabled:opacity-50", className), ...props })] })));
 CommandInput.displayName = CommandPrimitive.Input.displayName;
 const CommandList = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.List, { ref: ref, className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className), ...props })));
 CommandList.displayName = CommandPrimitive.List.displayName;

package/dist/ui/dialog.js

@@ -6,9 +6,9 @@ const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
-const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props })));
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn("fixed inset-0 z-50 bg-black/60 backdrop-blur-sm transition-opacity duration-150 data-[state=open]:opacity-100 data-[state=closed]:opacity-0", className), ...props })));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-surface p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-surface transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-hover-bg data-[state=open]:text-text-muted", children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M18 6 6 18" }), _jsx("path", { d: "m6 6 12 12" })] }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn("fixed left-[50%] top-[20%] z-50 grid w-full max-w-lg translate-x-[-50%] gap-4 border border-border bg-surface p-6 shadow-2xl sm:rounded-xl", "transition-all duration-150 ease-out", "data-[state=open]:opacity-100 data-[state=open]:scale-100", "data-[state=closed]:opacity-0 data-[state=closed]:scale-[0.98]", className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: "absolute right-3 top-3 rounded-sm opacity-70 ring-offset-surface transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-hover-bg data-[state=open]:text-text-muted", children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M18 6 6 18" }), _jsx("path", { d: "m6 6 12 12" })] }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props }));
 DialogHeader.displayName = "DialogHeader";

package/dist/utils/shiki.d.ts

@@ -13,7 +13,7 @@ export interface HighlightOptions {
     highlightLines?: number[];
 }
 /**
- * Syntax-highlight `code` using Shiki dual-theme (github-light / github-dark).
+ * Syntax-highlight `code` using Shiki dual-theme (notdiamond-light / notdiamond-dark).
  * Returns raw HTML string with CSS variable tokens — ready for `set:html`.
  */
 export declare function highlight(code: string, lang: string, options?: HighlightOptions): Promise<string>;

package/dist/utils/shiki.js

@@ -9,6 +9,8 @@
  * inline colors — matching the fenced code block rendering path.
  */
 import { createHighlighter } from "shiki";
+import notdiamondDark from "../themes/notdiamond-dark.json";
+import notdiamondLight from "../themes/notdiamond-light.json";
 let highlighter = null;
 /**
  * Common language shorthand aliases that Shiki may not auto-resolve.
@@ -25,13 +27,13 @@ const LANG_ALIASES = {
     mdx: "markdown",
 };
 /**
- * Syntax-highlight `code` using Shiki dual-theme (github-light / github-dark).
+ * Syntax-highlight `code` using Shiki dual-theme (notdiamond-light / notdiamond-dark).
  * Returns raw HTML string with CSS variable tokens — ready for `set:html`.
  */
 export async function highlight(code, lang, options) {
     if (!highlighter) {
         highlighter = await createHighlighter({
-            themes: ["github-light", "github-dark"],
+            themes: [notdiamondLight, notdiamondDark],
             langs: [
                 "typescript",
                 "javascript",
@@ -76,7 +78,7 @@ export async function highlight(code, lang, options) {
     }));
     return highlighter.codeToHtml(code, {
         lang,
-        themes: { light: "github-light", dark: "github-dark" },
+        themes: { light: "notdiamond-light", dark: "notdiamond-dark" },
         defaultColor: false,
         ...(decorations?.length ? { decorations } : {}),
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@specglass/theme-default",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "Default theme for Specglass — layouts, components, React islands, and styles",
   "type": "module",
   "license": "MIT",
@@ -25,7 +25,8 @@
     "./styles/*": "./src/styles/*",
     "./utils/*": "./src/utils/*",
     "./ui/*": "./src/ui/*",
-    "./scripts/*": "./src/scripts/*"
+    "./scripts/*": "./src/scripts/*",
+    "./themes/*": "./src/themes/*"
   },
   "files": [
     "dist",
@@ -36,7 +37,8 @@
     "src/styles",
     "src/utils",
     "src/ui",
-    "src/scripts"
+    "src/scripts",
+    "src/themes"
   ],
   "scripts": {
     "build": "tsc",

package/src/components/ApiAuth.astro

@@ -19,6 +19,16 @@ const schemeTypeLabels: Record<string, string> = {
   openIdConnect: "OpenID Connect",
 };
 
+const schemeTypeColors: Record<string, string> = {
+  apiKey: "bg-amber-500/15 text-amber-700 dark:text-amber-400 border-amber-500/30",
+  http: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-400 border-emerald-500/30",
+  oauth2: "bg-blue-500/15 text-blue-700 dark:text-blue-400 border-blue-500/30",
+  openIdConnect: "bg-purple-500/15 text-purple-700 dark:text-purple-400 border-purple-500/30",
+};
+
+const defaultBadgeColor =
+  "bg-purple-500/15 text-purple-700 dark:text-purple-400 border-purple-500/30";
+
 const hasAuth = security.length > 0;
 const hasGlobalSchemes = securitySchemes && Object.keys(securitySchemes).length > 0;
 ---
@@ -26,8 +36,15 @@ const hasGlobalSchemes = securitySchemes && Object.keys(securitySchemes).length
 {
   (hasAuth || hasGlobalSchemes) && (
     <div class="mb-8">
-      <h3 class="text-sm font-semibold text-text-muted uppercase tracking-wider mb-3">
-        <span class="mr-1.5">🔒</span> Authentication
+      <h3 class="text-sm font-semibold text-text-muted uppercase tracking-wider mb-3 flex items-center gap-1.5">
+        <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path
+            fill-rule="evenodd"
+            d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z"
+            clip-rule="evenodd"
+          />
+        </svg>
+        Authentication
       </h3>
 
       {/* Per-endpoint security requirements */}
@@ -44,7 +61,12 @@ const hasGlobalSchemes = securitySchemes && Object.keys(securitySchemes).length
               ]}
             >
               {/* Scheme type badge */}
-              <span class="inline-flex shrink-0 items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-500/15 text-purple-700 dark:text-purple-400 border border-purple-500/30 mt-0.5">
+              <span
+                class:list={[
+                  "inline-flex shrink-0 items-center px-2 py-0.5 rounded-full text-xs font-medium border mt-0.5",
+                  schemeTypeColors[req.type] ?? defaultBadgeColor,
+                ]}
+              >
                 {schemeTypeLabels[req.type] ?? req.type}
               </span>
 
@@ -93,7 +115,12 @@ const hasGlobalSchemes = securitySchemes && Object.keys(securitySchemes).length
                 idx > 0 && "border-t border-border/50",
               ]}
             >
-              <span class="inline-flex shrink-0 items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-500/15 text-purple-700 dark:text-purple-400 border border-purple-500/30 mt-0.5">
+              <span
+                class:list={[
+                  "inline-flex shrink-0 items-center px-2 py-0.5 rounded-full text-xs font-medium border mt-0.5",
+                  schemeTypeColors[scheme.type] ?? defaultBadgeColor,
+                ]}
+              >
                 {schemeTypeLabels[scheme.type] ?? scheme.type}
               </span>
               <div class="min-w-0">

package/src/components/ApiEndpoint.astro

@@ -24,52 +24,75 @@ const methodColors: Record<string, string> = {
 const methodColor = methodColors[endpoint.method.toLowerCase()] ?? methodColors.get;
 ---
 
-<div id={`endpoint-${endpoint.method}-${endpoint.path.replace(/[{}\\/]/g, "-")}`} class="mb-8">
-  {/* Deprecated banner */}
-  {
-    endpoint.deprecated && (
-      <div class="mb-4 rounded-lg border border-amber-500/30 bg-amber-500/10 px-4 py-3 text-amber-700 dark:text-amber-300 text-sm">
-        <span class="font-semibold">⚠ Deprecated</span> — This endpoint is deprecated and may be
-        removed in a future version.
-      </div>
-    )
-  }
-
-  {/* Method + Path header */}
-  <div class="flex items-center gap-3 mb-4">
-    <span
-      class:list={[
-        "inline-flex items-center px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider border",
-        methodColor,
-      ]}
-    >
-      {endpoint.method.toUpperCase()}
-    </span>
-    <code class="text-lg font-mono text-text font-semibold break-all">
-      {endpoint.path}
-    </code>
+<div
+  id={`endpoint-${endpoint.method}-${endpoint.path.replace(/[{}\\\/]/g, "-")}`}
+  class="mb-8 rounded-lg border border-border bg-surface-1 overflow-hidden"
+>
+  {/* Method color accent bar at top */}
+  <div
+    class:list={[
+      "h-1",
+      {
+        "bg-emerald-500": endpoint.method.toLowerCase() === "get",
+        "bg-blue-500": endpoint.method.toLowerCase() === "post",
+        "bg-amber-500":
+          endpoint.method.toLowerCase() === "put" || endpoint.method.toLowerCase() === "patch",
+        "bg-red-500": endpoint.method.toLowerCase() === "delete",
+        "bg-purple-500": endpoint.method.toLowerCase() === "options",
+        "bg-gray-500": endpoint.method.toLowerCase() === "head",
+      },
+    ]}
+    aria-hidden="true"
+  >
   </div>
 
-  {/* Summary */}
-  {
-    endpoint.summary && (
-      <h1 class="text-xl font-semibold text-text mb-2 mt-0">{endpoint.summary}</h1>
-    )
-  }
+  <div class="p-6">
+    {/* Deprecated banner */}
+    {
+      endpoint.deprecated && (
+        <div class="mb-4 rounded-lg border border-amber-500/30 bg-amber-500/10 px-4 py-3 text-amber-700 dark:text-amber-300 text-sm">
+          <span class="font-semibold">⚠ Deprecated</span> — This endpoint is deprecated and may be
+          removed in a future version.
+        </div>
+      )
+    }
+
+    {/* Method + Path header */}
+    <div class="flex items-center gap-3 mb-4">
+      <span
+        class:list={[
+          "inline-flex items-center px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider border",
+          methodColor,
+        ]}
+      >
+        {endpoint.method.toUpperCase()}
+      </span>
+      <code class="text-lg font-mono text-text font-semibold break-all">
+        {endpoint.path}
+      </code>
+    </div>
 
-  {/* Description */}
-  {
-    endpoint.description && (
-      <p class="text-text-muted text-sm leading-relaxed mb-4">{endpoint.description}</p>
-    )
-  }
+    {/* Summary */}
+    {
+      endpoint.summary && (
+        <h1 class="text-xl font-semibold text-text mb-2 mt-0">{endpoint.summary}</h1>
+      )
+    }
 
-  {/* Operation ID */}
-  {
-    endpoint.operationId && (
-      <p class="text-xs text-text-muted/60 font-mono mb-4">
-        Operation ID: <code class="text-text-muted/80">{endpoint.operationId}</code>
-      </p>
-    )
-  }
+    {/* Description */}
+    {
+      endpoint.description && (
+        <p class="text-text-muted text-sm leading-relaxed mb-4">{endpoint.description}</p>
+      )
+    }
+
+    {/* Operation ID */}
+    {
+      endpoint.operationId && (
+        <p class="text-xs text-text-muted/60 font-mono mb-0">
+          Operation ID: <code class="text-text-muted/80">{endpoint.operationId}</code>
+        </p>
+      )
+    }
+  </div>
 </div>

package/src/components/ApiNavigation.astro

@@ -45,7 +45,7 @@ const methodBadgeColors: Record<string, string> = {
           data-api-nav-group={tag}
         >
           <svg
-            class="h-3 w-3 shrink-0 transition-transform"
+            class="h-3 w-3 shrink-0 rotate-90"
             viewBox="0 0 12 12"
             fill="currentColor"
             aria-hidden="true"
@@ -66,10 +66,10 @@ const methodBadgeColors: Record<string, string> = {
                 <a
                   href={`${basePath}/${slug}`}
                   class:list={[
-                    "flex items-center gap-2 px-3 py-1.5 rounded-md text-xs transition-colors group",
+                    "flex items-center gap-2 px-3 py-1.5 rounded-md text-xs group",
                     isActive
-                      ? "bg-primary/10 text-primary font-medium"
-                      : "text-text-muted hover:bg-surface-raised hover:text-text",
+                      ? "bg-surface-2 text-text font-medium"
+                      : "text-text-muted hover:bg-surface-2 hover:text-text",
                   ]}
                   aria-current={isActive ? "page" : undefined}
                 >
@@ -100,7 +100,7 @@ const methodBadgeColors: Record<string, string> = {
           data-api-nav-group="unsupported"
         >
           <svg
-            class="h-3 w-3 shrink-0 transition-transform rotate-90"
+            class="h-3 w-3 shrink-0 rotate-90"
             viewBox="0 0 12 12"
             fill="currentColor"
             aria-hidden="true"
@@ -124,10 +124,10 @@ const methodBadgeColors: Record<string, string> = {
                 <a
                   href={`${basePath}/${slug}`}
                   class:list={[
-                    "flex items-center gap-2 px-3 py-1.5 rounded-md text-xs transition-colors group",
+                    "flex items-center gap-2 px-3 py-1.5 rounded-md text-xs group border-l-2",
                     isActive
-                      ? "bg-amber-500/10 text-amber-700 dark:text-amber-400 font-medium"
-                      : "text-text-muted/60 hover:bg-surface-raised hover:text-text-muted",
+                      ? "bg-amber-500/10 text-amber-700 dark:text-amber-400 font-medium border-amber-500"
+                      : "text-text-muted/60 hover:bg-surface-raised hover:text-text-muted border-transparent",
                   ]}
                   aria-current={isActive ? "page" : undefined}
                   title={`Unsupported: ${err.reason}`}
@@ -170,8 +170,5 @@ const methodBadgeColors: Record<string, string> = {
         arrow?.classList.toggle("rotate-90", !isHidden);
       }
     });
-    // Default to expanded
-    const arrow = btn.querySelector("svg");
-    arrow?.classList.add("rotate-90");
   });
 </script>