radiant-docs 0.1.48 → 0.1.50

package/package.json

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

package/template/src/components/LogoLink.astro

@@ -64,7 +64,7 @@ const darkLogoContainerStyle = `padding-top: ${darkLogo.paddingTop}px; padding-b
 
 <a
   href={logoHref}
-  class="h-full flex items-center justify-center gap-2 lg:gap-3 text-xl font-bold text-neutral-800 dark:text-neutral-100 overflow-hidden"
+  class="h-full flex items-center justify-center gap-2 lg:gap-2.5 text-xl font-bold text-neutral-800 dark:text-neutral-100 overflow-hidden"
 >
   {
     lightLogoUrl || darkLogoUrl ? (
@@ -95,7 +95,7 @@ const darkLogoContainerStyle = `padding-top: ${darkLogo.paddingTop}px; padding-b
     logoPillText && (
       <span
         class:list={[
-          "text-[10px] text-neutral-500 font-semibold bg-neutral-100 dark:bg-neutral-800 px-2 py-px rounded-full border border-neutral-200 dark:border-neutral-700/70 shadow-xs",
+          "text-[10px] text-neutral-500 dark:text-neutral-400 font-normal bg-neutral-100 dark:bg-neutral-800 px-2 py-px rounded-full border-[0.5px] border-neutral-900/8 dark:border-neutral-50/8",
         ]}
       >
         {logoPillText}

package/template/src/components/SidebarGroup.astro

@@ -22,7 +22,7 @@ const currentPrefix = parentSlug ? `${parentSlug}/${groupSlug}` : groupSlug;
   <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}
-    {item.tag && <Tag>{item.tag}</Tag>}
+    {item.tag && <Tag tag={item.tag} />}
   </div>
 
   <ul>

package/template/src/components/SidebarLink.astro

@@ -3,13 +3,13 @@ import { buildMdxPageHref, deriveTitleFromEntryId } from "../lib/utils";
 import Icon from "./ui/Icon.astro";
 import Tag from "./ui/Tag.astro";
 import { getCollection } from "astro:content";
-import { getConfig } from "../lib/validation";
+import { getConfig, type NavTag } from "../lib/validation";
 
 interface Props {
   path: string;
   groupSlug?: string;
   icon?: string | null;
-  tag?: string;
+  tag?: NavTag;
   title?: string;
 }
 
@@ -61,6 +61,6 @@ const isActive = currentPath === targetPath;
   <div class="flex items-center gap-2">
     {icon && <Icon name={icon} class="size-4 opacity-75" />}
     {text}
-    {tag && <Tag>{tag}</Tag>}
+    {tag && <Tag tag={tag} />}
   </div>
 </a>

package/template/src/components/SidebarSubgroup.astro

@@ -82,7 +82,7 @@ const containsActivePage = item.pages.some((child) => {
     <div class="flex items-center gap-2">
       {item.icon && <Icon name={item.icon} class="size-4 opacity-75" />}
       {item.group}
-      {item.tag && <Tag>{item.tag}</Tag>}
+      {item.tag && <Tag tag={item.tag} />}
     </div>
     <svg
       xmlns="http://www.w3.org/2000/svg"

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

@@ -325,13 +325,26 @@ const hasMultipleRequests = requestSnippetItems.length > 1;
     isTransitioning: false,
     isManagedSlot: false,
     transitionDirection: 1,
-    transitionDurationMs: 360,
+    transitionDurationMs: 400,
     transitionEasing: "cubic-bezier(0.22, 1, 0.36, 1)",
     tabSyncHandler: null,
     transitionTimeoutId: null,
     copyTimeoutId: null,
+    readMotionTokens() {
+      const styles = window.getComputedStyle(document.documentElement);
+      const configuredDurationMs = Number.parseFloat(
+        styles.getPropertyValue("--rd-panel-transition-duration-ms"),
+      );
+      this.transitionDurationMs = Number.isFinite(configuredDurationMs)
+        ? configuredDurationMs
+        : this.transitionDurationMs;
+      this.transitionEasing =
+        styles.getPropertyValue("--rd-panel-transition-easing").trim() ||
+        this.transitionEasing;
+    },
     init() {
       this.isManagedSlot = !!this.$root?.closest("[data-snippet-slot]");
+      this.readMotionTokens();
       if (
         typeof window.matchMedia === "function" &&
         window.matchMedia("(prefers-reduced-motion: reduce)").matches
@@ -348,6 +361,8 @@ const hasMultipleRequests = requestSnippetItems.length > 1;
         if (this.$refs.snippetPanels) {
           this.$refs.snippetPanels.style.transitionDuration =
             this.transitionDurationMs + "ms";
+          this.$refs.snippetPanels.style.transitionTimingFunction =
+            this.transitionEasing;
         }
         this.syncPill();
         this.syncSnippetHeight();
@@ -492,18 +507,18 @@ const hasMultipleRequests = requestSnippetItems.length > 1;
       class="flex h-full min-h-0 w-full max-w-full min-w-0 flex-col rounded-xl"
     >
       <div
-        class="flex items-center justify-between gap-2 bg-(--rd-code-header-surface)"
+        class="flex items-center justify-between gap-2"
       >
         {
           hasMultipleRequests ? (
             <div class="min-w-0 flex-1 overflow-hidden rounded-t-xl">
               <div
                 x-ref="tabList"
-                class="relative flex min-w-0 items-end gap-1 overflow-x-auto pl-1 pr-8 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+                class="relative flex min-w-0 items-end gap-1 overflow-x-auto overscroll-x-contain pl-1 pr-8 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
               >
                 <div
                   aria-hidden="true"
-                  class="pointer-events-none absolute top-1/2 z-0 h-[28px] -translate-y-1/2 rounded-[9px] border-[0.5px] border-(--rd-code-tab-edge-border) bg-(--rd-code-surface) transition-[left,width,opacity] duration-200 ease-out"
+                  class="pointer-events-none absolute top-0 z-0 h-[28px] rounded-[9px] border-[0.5px] border-(--rd-code-tab-edge-border) bg-(--rd-code-surface) transition-[left,width,opacity] duration-200 ease-out"
                   x-bind:class="pillVisible ? 'opacity-100' : 'opacity-0'"
                   x-bind:style="'left:' + pillLeft + 'px;width:' + pillWidth + 'px;'"
                 />
@@ -516,15 +531,17 @@ const hasMultipleRequests = requestSnippetItems.length > 1;
                     type="button"
                     x-bind:data-rd-snippet-tab="index"
                     x-on:click="select(index)"
-                    class="relative z-10 inline-flex h-9 items-center gap-2 border-0 bg-transparent px-3 py-1.5 text-xs font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer"
+                    class="relative z-10 inline-flex h-9 items-start border-0 bg-transparent px-3 py-0 text-xs font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer"
                     x-bind:class="selected === index ? 'text-foreground' : 'text-muted-foreground'"
                   >
-                    <span
-                      x-show="snippet.iconSvg"
-                      x-html="snippet.iconSvg"
-                      class="pointer-events-none inline-flex size-3.5 shrink-0 items-center rounded-[4px] transition-opacity duration-150"
-                      x-bind:class="selected === index ? 'opacity-100' : 'opacity-70'"></span>
-                    <span class="whitespace-pre leading-none" x-text="snippet.label"></span>
+                    <span class="pointer-events-none inline-flex h-[28px] items-center gap-2">
+                      <span
+                        x-show="snippet.iconSvg"
+                        x-html="snippet.iconSvg"
+                        class="inline-flex size-3.5 shrink-0 items-center rounded-[4px] transition-opacity duration-150"
+                        x-bind:class="selected === index ? 'opacity-100' : 'opacity-70'"></span>
+                      <span class="whitespace-pre leading-none" x-text="snippet.label"></span>
+                    </span>
                   </button>
                 </template>
               </div>
@@ -579,7 +596,8 @@ const hasMultipleRequests = requestSnippetItems.length > 1;
       <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
           x-ref="snippetPanels"
-          class="relative h-full overflow-auto transition-[height] duration-[360ms] ease-[cubic-bezier(0.22,1,0.36,1)] [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"
+          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"
+          style="transition-duration: var(--rd-panel-transition-duration); transition-timing-function: var(--rd-panel-transition-easing);"
         >
           {
             requestSnippetItems.map((snippet, index) => (

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

@@ -74,9 +74,7 @@ import { Icon } from "astro-icon/components";
     <div
       class="flex h-full min-h-0 w-full max-w-full min-w-0 flex-col rounded-xl"
     >
-      <div
-        class="flex items-center justify-between gap-2 bg-(--rd-code-header-surface)"
-      >
+      <div class="flex items-center justify-between gap-2">
         <div class="min-w-0 flex-1 overflow-hidden rounded-t-xl">
           <div
             x-ref="tabList"
@@ -84,7 +82,7 @@ import { Icon } from "astro-icon/components";
           >
             <div
               aria-hidden="true"
-              class="pointer-events-none absolute top-1/2 z-0 h-[28px] -translate-y-1/2 rounded-[9px] border-[0.5px] border-(--rd-code-tab-edge-border) bg-(--rd-code-surface) transition-[left,width,opacity] duration-200 ease-out"
+              class="pointer-events-none absolute top-0 z-0 h-[28px] rounded-[9px] border-[0.5px] border-(--rd-code-tab-edge-border) bg-(--rd-code-surface) transition-[left,width,opacity] duration-200 ease-out"
               x-bind:class="pillVisible ? 'opacity-100' : 'opacity-0'"
               x-bind:style="'left:' + pillLeft + 'px;width:' + pillWidth + 'px;'"
             >
@@ -95,11 +93,12 @@ import { Icon } from "astro-icon/components";
                 type="button"
                 x-bind:data-rd-response-tab="tab.id"
                 x-on:click="select(tab.id)"
-                class="relative z-10 inline-flex h-9 items-center gap-2 border-0 bg-transparent px-3 py-1.5 text-xs font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer"
+                class="relative z-10 inline-flex h-9 items-start border-0 bg-transparent px-3 py-0 text-xs font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer"
                 x-bind:class="selected === tab.id ? 'text-foreground' : 'text-muted-foreground'"
               >
-                <span class="whitespace-pre leading-none" x-text="tab.label"
-                ></span>
+                <span
+                  class="pointer-events-none inline-flex h-[28px] items-center whitespace-pre leading-none"
+                  x-text="tab.label"></span>
               </button>
             </template>
           </div>
@@ -147,7 +146,7 @@ import { Icon } from "astro-icon/components";
               x-show="!response || !response.highlightedData"
               class="text-sm px-4 py-4 xs:py-8 flex flex-col items-center justify-center h-full text-foreground"
             >
-              <div class="bg-(--rd-code-header-surface) p-2 rounded-xl mb-1">
+              <div class="p-2 rounded-xl mb-1">
                 <Icon
                   class="size-6 text-neutral-300 dark:text-neutral-600"
                   name="lucide:square-arrow-up-right"
@@ -171,7 +170,7 @@ import { Icon } from "astro-icon/components";
               x-show="!response || !response.highlightedHeaders"
               class="text-sm px-4 py-4 xs:py-8 flex flex-col items-center justify-center h-full text-foreground"
             >
-              <div class="bg-(--rd-code-header-surface) p-2 rounded-xl mb-1">
+              <div class="p-2 rounded-xl mb-1">
                 <Icon
                   class="size-6 text-neutral-300 dark:text-neutral-600"
                   name="lucide:square-arrow-up-right"

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

@@ -248,13 +248,26 @@ const hasMultipleResponses = responseSnippetItems.length > 1;
     isTransitioning: false,
     isManagedSlot: false,
     transitionDirection: 1,
-    transitionDurationMs: 360,
+    transitionDurationMs: 400,
     transitionEasing: "cubic-bezier(0.22, 1, 0.36, 1)",
     tabSyncHandler: null,
     transitionTimeoutId: null,
     copyTimeoutId: null,
+    readMotionTokens() {
+      const styles = window.getComputedStyle(document.documentElement);
+      const configuredDurationMs = Number.parseFloat(
+        styles.getPropertyValue("--rd-panel-transition-duration-ms"),
+      );
+      this.transitionDurationMs = Number.isFinite(configuredDurationMs)
+        ? configuredDurationMs
+        : this.transitionDurationMs;
+      this.transitionEasing =
+        styles.getPropertyValue("--rd-panel-transition-easing").trim() ||
+        this.transitionEasing;
+    },
     init() {
       this.isManagedSlot = !!this.$root?.closest("[data-snippet-slot]");
+      this.readMotionTokens();
       if (
         typeof window.matchMedia === "function" &&
         window.matchMedia("(prefers-reduced-motion: reduce)").matches
@@ -271,6 +284,8 @@ const hasMultipleResponses = responseSnippetItems.length > 1;
         if (this.$refs.snippetPanels) {
           this.$refs.snippetPanels.style.transitionDuration =
             this.transitionDurationMs + "ms";
+          this.$refs.snippetPanels.style.transitionTimingFunction =
+            this.transitionEasing;
         }
         this.syncPill();
         this.syncSnippetHeight();
@@ -415,7 +430,7 @@ const hasMultipleResponses = responseSnippetItems.length > 1;
       class="flex h-full min-h-0 w-full max-w-full min-w-0 flex-col rounded-xl"
     >
       <div
-        class="flex items-center justify-between gap-2 bg-(--rd-code-header-surface)"
+        class="flex items-center justify-between gap-2"
       >
         {
           hasMultipleResponses ? (
@@ -426,7 +441,7 @@ const hasMultipleResponses = responseSnippetItems.length > 1;
               >
                 <div
                   aria-hidden="true"
-                  class="pointer-events-none absolute top-1/2 z-0 h-[28px] -translate-y-1/2 rounded-[9px] border-[0.5px] border-(--rd-code-tab-edge-border) bg-(--rd-code-surface) transition-[left,width,opacity] duration-200 ease-out"
+                  class="pointer-events-none absolute top-0 z-0 h-[28px] rounded-[9px] border-[0.5px] border-(--rd-code-tab-edge-border) bg-(--rd-code-surface) transition-[left,width,opacity] duration-200 ease-out"
                   x-bind:class="pillVisible ? 'opacity-100' : 'opacity-0'"
                   x-bind:style="'left:' + pillLeft + 'px;width:' + pillWidth + 'px;'"
                 />
@@ -439,13 +454,15 @@ const hasMultipleResponses = responseSnippetItems.length > 1;
                     type="button"
                     x-bind:data-rd-snippet-tab="index"
                     x-on:click="select(index)"
-                    class="relative z-10 inline-flex h-9 items-center gap-2 border-0 bg-transparent px-3 py-1.5 text-xs font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer"
+                    class="relative z-10 inline-flex h-9 items-start border-0 bg-transparent px-3 py-0 text-xs font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer"
                     x-bind:class="selected === index ? 'text-foreground' : 'text-muted-foreground'"
                   >
-                    <span
-                      class="size-[7px] shrink-0 rounded-full transition-opacity duration-150"
-                      x-bind:class="(selected === index ? 'opacity-100 ' : 'opacity-70 ') + snippet.dotClass"></span>
-                    <span class="whitespace-pre leading-none" x-text="snippet.statusCode"></span>
+                    <span class="pointer-events-none inline-flex h-[28px] items-center gap-2">
+                      <span
+                        class="size-[7px] shrink-0 rounded-full transition-opacity duration-150"
+                        x-bind:class="(selected === index ? 'opacity-100 ' : 'opacity-70 ') + snippet.dotClass"></span>
+                      <span class="whitespace-pre leading-none" x-text="snippet.statusCode"></span>
+                    </span>
                   </button>
                 </template>
               </div>
@@ -499,7 +516,8 @@ const hasMultipleResponses = responseSnippetItems.length > 1;
       <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
           x-ref="snippetPanels"
-          class="relative h-full overflow-auto transition-[height] duration-[360ms] ease-[cubic-bezier(0.22,1,0.36,1)] [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"
+          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"
+          style="transition-duration: var(--rd-panel-transition-duration); transition-timing-function: var(--rd-panel-transition-easing);"
         >
           {
             responseSnippetItems.map((snippet, index) => (

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

@@ -2,13 +2,14 @@
 import Tag from "../ui/Tag.astro";
 import { buildOpenApiEndpointHref } from "../../lib/utils";
 import { methodColors } from "../../lib/utils";
+import type { NavTag } from "../../lib/validation";
 
 interface Props {
   method: string;
   path: string;
   summary?: string;
   title?: string;
-  tag?: string;
+  tag?: NavTag;
   parentSlug?: string;
 }
 
@@ -49,6 +50,6 @@ const isActive = currentPath === targetPath;
   </span>
   <div class="flex items-center gap-2 min-w-0">
     <span>{text}</span>
-    {tag && <Tag>{tag}</Tag>}
+    {tag && <Tag tag={tag} />}
   </div>
 </a>

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

@@ -1,5 +1,67 @@
+---
+import {
+  getConfig,
+  type NavTag,
+  type ThemeColorByMode,
+} from "../../lib/validation";
+
+interface Props {
+  tag?: NavTag;
+  color?: string | ThemeColorByMode;
+}
+
+const { tag, color } = Astro.props;
+const config = await getConfig();
+
+function getTagText(value: NavTag | undefined): string | undefined {
+  if (typeof value === "string") return value;
+  return value?.text;
+}
+
+function getTagColor(
+  value: NavTag | undefined,
+): string | ThemeColorByMode | undefined {
+  if (typeof value === "object" && value !== null) {
+    return value.color;
+  }
+  return undefined;
+}
+
+function resolveColorByMode(
+  value: string | ThemeColorByMode | undefined,
+): { light: string; dark: string } | undefined {
+  if (typeof value === "string") {
+    return { light: value, dark: value };
+  }
+
+  const light = value?.light ?? value?.dark;
+  const dark = value?.dark ?? value?.light;
+  if (!light || !dark) return undefined;
+
+  return { light, dark };
+}
+
+const text = getTagText(tag);
+const configuredColor =
+  color ?? getTagColor(tag) ?? config.theme?.tag?.color ?? undefined;
+const resolvedColor = resolveColorByMode(configuredColor);
+const colorStyle = resolvedColor
+  ? `--rd-tag-color-light:${resolvedColor.light};--rd-tag-color-dark:${resolvedColor.dark};`
+  : undefined;
+---
+
 <span
-  class="text-[9px] bg-blue-100/70 text-blue-800/90 border border-blue-800/10 px-1.5 py-px rounded-full tracking-wide font-semibold shrink-0 normal-case"
+  class="rd-tag text-[9px] border px-[5px] py-[2px] rounded-full tracking-wide leading-none font-medium shrink-0"
+  style={colorStyle}
 >
-  <slot />
+  {text ? text : <slot />}
 </span>
+
+<style>
+  .rd-tag {
+    --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);
+  }
+</style>

package/template/src/components/user/Accordion.astro

@@ -50,7 +50,7 @@ validateProps(
 }`
   x-init="id = (typeof register === 'function') ? register() : Math.random()"
   role="region"
-  class="rd-accordion block border-b border-neutral-800/10 dark:border-neutral-700/50 last:border-b-0. [&:first-child>h4>button]:pt-0 [&:last-child>div>div]:pb-0"
+  class="rd-accordion block border-b border-neutral-800/10 dark:border-neutral-700/50 last:border-b-0. [&:first-child>h4>button]:pt-0"
 >
   <h4 class="not-prose">
     <button
@@ -70,9 +70,23 @@ validateProps(
       />
     </button>
   </h4>
-  <div x-show="expanded" x-collapse>
-    <div class="prose-rules max-w-none! *:max-w-none! pb-4!">
-      <slot />
+  <div
+    class:list={[
+      "grid overflow-hidden transition-[grid-template-rows,opacity] motion-reduce:transition-none",
+      defaultOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0",
+    ]}
+    :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
+    :aria-hidden="(!expanded).toString()"
+    x-bind:inert="!expanded"
+    style="transition-duration: var(--rd-panel-transition-duration); transition-timing-function: var(--rd-panel-transition-easing);"
+  >
+    <div class="min-h-0 overflow-hidden">
+      <div
+        data-rd-accordion-content-inner
+        class="prose-rules max-w-none! *:max-w-none! pb-4!"
+      >
+        <slot />
+      </div>
     </div>
   </div>
 </div>

package/template/src/components/user/CodeBlock.astro

@@ -16,6 +16,7 @@ interface Props {
   showLineNumbers?: boolean | string;
   hideLanguageIcon?: boolean | string;
   inCodeGroup?: boolean | string;
+  flushTop?: boolean | string;
   highlightedLines?: string;
   collapsedLines?: string;
 }
@@ -28,6 +29,7 @@ const {
   showLineNumbers = false,
   hideLanguageIcon = false,
   inCodeGroup = false,
+  flushTop = false,
   highlightedLines = "",
   collapsedLines = "",
 } = Astro.props as Props;
@@ -191,6 +193,7 @@ const parsedShowFilename = parsedInCodeGroup
   : toBoolean(showFilename, false);
 const parsedShowLineNumbers = toBoolean(showLineNumbers, false);
 const parsedHideLanguageIcon = toBoolean(hideLanguageIcon, false);
+const parsedFlushTop = !parsedInCodeGroup && toBoolean(flushTop, false);
 const shouldRenderLanguageIcon = !parsedHideLanguageIcon;
 
 const trimmedFilename = filename.trim();
@@ -262,7 +265,8 @@ const renderedCodeLinesHtml = normalizedTokenLines
 
 <div
   class:list={[
-    "group/prose-code not-prose relative w-full max-w-full min-w-0 rounded-xl",
+    "group/prose-code not-prose relative w-full max-w-full min-w-0",
+    parsedFlushTop ? "rounded-b-xl" : "rounded-xl",
     parsedInCodeGroup ? "my-0" : "rd-prose-block",
   ]}
   data-rd-code-block-root="true"
@@ -278,13 +282,17 @@ const renderedCodeLinesHtml = normalizedTokenLines
 >
   <div
     class:list={[
-      "w-full max-w-full min-w-0 bg-(--rd-code-surface)",
-      parsedInCodeGroup ? "rounded-tr-none rounded-xl" : "rounded-xl",
+      "w-full max-w-full min-w-0",
+      parsedInCodeGroup
+        ? "rounded-tr-none rounded-xl"
+        : parsedFlushTop
+          ? "rounded-b-xl"
+          : "rounded-xl",
     ]}
   >
     {
       !parsedInCodeGroup && parsedShowFilename ? (
-        <div class="flex items-center justify-between gap-2 border-b-[0.5px] border-(--rd-code-tab-edge-border) bg-(--rd-code-header-surface)">
+        <div class="flex items-center justify-between gap-2 border-b-[0.5px] border-(--rd-code-tab-edge-border)">
           <div class="min-w-0 flex-1">
             <div class="relative h-9 w-fit max-w-full rounded-tl-xl bg-(--rd-code-surface)">
               <div class="absolute inset-x-0 -bottom-px h-px bg-(--rd-code-surface)" />
@@ -331,7 +339,9 @@ const renderedCodeLinesHtml = normalizedTokenLines
 
     <div
       class:list={[
-        "relative min-w-0 border-[0.5px] rounded-xl overflow-hidden border-(--rd-code-tab-edge-border)",
+        "relative min-w-0 border-[0.5px] overflow-hidden border-(--rd-code-tab-edge-border)",
+        parsedFlushTop ? "rounded-b-xl" : "rounded-xl",
+        parsedFlushTop && "border-t-0",
         parsedShowFilename && "border-t-0 rounded-t-none",
         parsedInCodeGroup && "rounded-tl-xl border-0!",
       ]}

package/template/src/components/user/CodeGroup.astro

@@ -7,19 +7,17 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
   class="rd-prose-block group/prose-code-group not-prose relative w-full max-w-full min-w-0 rounded-xl"
   data-rd-code-group-root="true"
 >
-  <div
-    class="relative z-10 overflow-visible rounded-t-xl bg-(--rd-code-header-surface)"
-  >
+  <div class="relative z-10 overflow-visible rounded-t-xl">
     <div class="flex min-w-0 items-end justify-between gap-2">
       <div class="min-w-0 flex-1 overflow-hidden rounded-t-xl">
         <div
           data-rd-code-group-tabs
-          class="relative flex min-w-0 items-end gap-1 overflow-x-auto pl-1 pr-8 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+          class="relative flex min-w-0 items-end gap-1 overflow-x-auto overscroll-x-contain pl-1 pr-8 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
         >
           <div
             data-rd-code-group-pill
             aria-hidden="true"
-            class="pointer-events-none absolute top-1/2 z-0 h-[28px] -translate-y-1/2 rounded-[9px] border-[0.5px] border-(--rd-code-tab-edge-border) bg-(--rd-code-surface) opacity-0 transition-[left,width,opacity] duration-200 ease-out"
+            class="pointer-events-none absolute top-0 z-0 h-[28px] rounded-[9px] border-[0.5px] border-(--rd-code-tab-edge-border) bg-(--rd-code-surface) opacity-0 transition-[left,width,opacity] duration-200 ease-out"
           >
           </div>
         </div>
@@ -58,7 +56,8 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
 
   <div
     data-rd-code-group-content
-    class="relative min-w-0 overflow-hidden transition-[height] duration-[360ms] ease-[cubic-bezier(0.22,1,0.36,1)] bg-(--rd-code-surface) rounded-xl rounded-tr-none border-[0.5px] border-(--rd-code-tab-edge-border)"
+    class="relative min-w-0 overflow-hidden transition-[height] bg-(--rd-code-surface) rounded-xl rounded-tr-none border-[0.5px] border-(--rd-code-tab-edge-border)"
+    style="transition-duration: var(--rd-panel-transition-duration); transition-timing-function: var(--rd-panel-transition-easing);"
   >
     <slot />
   </div>
@@ -91,8 +90,20 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
       const prefersReducedMotion =
         typeof window.matchMedia === "function" &&
         window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-      const TRANSITION_DURATION_MS = prefersReducedMotion ? 0 : 360;
-      const TRANSITION_EASING = "cubic-bezier(0.22, 1, 0.36, 1)";
+      const rootStyles = window.getComputedStyle(document.documentElement);
+      const configuredDurationMs = Number.parseFloat(
+        rootStyles.getPropertyValue("--rd-panel-transition-duration-ms"),
+      );
+      const configuredEasing = rootStyles
+        .getPropertyValue("--rd-panel-transition-easing")
+        .trim();
+      const TRANSITION_DURATION_MS = prefersReducedMotion
+        ? 0
+        : Number.isFinite(configuredDurationMs)
+          ? configuredDurationMs
+          : 400;
+      const TRANSITION_EASING =
+        configuredEasing || "cubic-bezier(0.22, 1, 0.36, 1)";
 
       let activeIndex = 0;
       let transitionTimeoutId = null;
@@ -138,10 +149,14 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
 
         const tabButton = document.createElement("button");
         tabButton.type = "button";
-        tabButton.className = `relative inline-flex h-9 items-center border-0 bg-transparent px-3 py-1.5 text-xs font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer ${hasTabIcon ? "gap-2" : ""}`;
+        tabButton.className =
+          "relative inline-flex h-9 items-start border-0 bg-transparent px-3 py-0 text-xs font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer";
         tabButton.setAttribute("aria-label", filename);
         tabButton.setAttribute("data-rd-code-group-tab", String(index));
 
+        const tabContent = document.createElement("span");
+        tabContent.className = `pointer-events-none inline-flex h-[28px] items-center ${hasTabIcon ? "gap-2" : ""}`;
+
         let iconContainer = null;
         if (hasTabIcon) {
           iconContainer = document.createElement("span");
@@ -155,9 +170,10 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
         labelElement.textContent = filename;
 
         if (iconContainer) {
-          tabButton.appendChild(iconContainer);
+          tabContent.appendChild(iconContainer);
         }
-        tabButton.appendChild(labelElement);
+        tabContent.appendChild(labelElement);
+        tabButton.appendChild(tabContent);
         tabWrapper.appendChild(tabButton);
         tabsElement.appendChild(tabWrapper);
 
@@ -182,6 +198,7 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
       });
 
       contentElement.style.transitionDuration = `${TRANSITION_DURATION_MS}ms`;
+      contentElement.style.transitionTimingFunction = TRANSITION_EASING;
 
       const syncPill = () => {
         const activeTab = tabs[activeIndex]?.tabWrapper;