radiant-docs 0.1.48 → 0.1.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "radiant-docs",
-  "version": "0.1.48",
+  "version": "0.1.49",
   "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/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/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"
@@ -279,12 +283,16 @@ 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",
+      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;

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

@@ -60,16 +60,20 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
 ---
 
 <div
-  class="rd-prose-block rd-component-preview flex w-full max-w-full min-w-0 flex-col"
+  class="rd-prose-block rd-component-preview isolate flex w-full max-w-full min-w-0 flex-col"
   data-rd-component-preview-root="true"
 >
   <div
-    class="w-full max-w-full min-w-0 overflow-x-auto rounded-t-xl border border-b-0 bg-white dark:bg-neutral-800/15 p-4 xs:p-6 sm:p-12 shadow-xs [&>:first-child]:mt-0! [&>:last-child]:mb-0!"
+    class="relative z-10 w-full max-w-full min-w-0 rounded-t-xl border-[0.5px] border-b-0 border-(--rd-code-tab-edge-border) bg-(--rd-code-surface) p-2"
   >
-    <slot />
+    <div
+      class="bg-white dark:bg-neutral-900/70 rounded-xl border-[0.5px] border-neutral-900/10 dark:border-white/8 p-4 xs:p-6 sm:p-9 sm:px-12 *:first:mt-0! *:last:mb-0! shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-8px_rgba(0,0,0,0.08)] dark:shadow-[0_-0.5px_1px_rgba(255,255,255,0.1),0_5px_12px_-4px_rgba(0,0,0,0.15)] overflow-x-auto"
+    >
+      <slot />
+    </div>
   </div>
   <div
-    class="rd-component-preview__code not-prose relative overflow-hidden rounded-b-xl bg-neutral-50 dark:bg-(--rd-code-surface)"
+    class="rd-component-preview__code not-prose relative z-0 overflow-hidden rounded-b-xl"
     data-rd-preview-expanded={isInitiallyExpanded ? "true" : "false"}
     style={{ "--rd-preview-visible-lines": String(visibleLines) }}
   >
@@ -82,16 +86,19 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
       hideLanguageIcon={hideLanguageIcon}
       highlightedLines={highlightedLines}
       collapsedLines={collapsedLines}
+      flushTop
     />
     <div
-      class="rd-component-preview__overlay pointer-events-none absolute inset-x-px inset-y-px hidden items-end justify-center rounded-b-xl pb-4"
+      class="rd-component-preview__overlay pointer-events-none absolute inset-0 hidden items-end justify-center rounded-b-xl pb-4"
       data-rd-preview-overlay
       aria-hidden="true"
     >
-      <div class="bg-white dark:bg-neutral-800">
+      <div
+        class="bg-white dark:bg-neutral-800 rounded-xl [corner-shape:superellipse(1.2)]"
+      >
         <button
           type="button"
-          class="pointer-events-auto inline-flex h-8 items-center justify-center rounded-md border border-neutral-200 bg-white px-3 text-sm font-medium text-neutral-700 shadow-xl transition-colors duration-150 hover:bg-neutral-50 cursor-pointer dark:border-neutral-700 dark:bg-neutral-700/30 dark:text-neutral-200 dark:hover:bg-neutral-700/50"
+          class="pointer-events-auto inline-flex h-8 items-center justify-center rounded-xl [corner-shape:superellipse(1.2)] border-[0.5px] border-neutral-900/10 dark:border-white/8 bg-linear-to-br from-white via-white/10 to-neutral-900/5 dark:from-white/7 dark:via-white/6 dark:to-white/2 px-3 text-sm font-medium text-neutral-600 hover:text-neutral-900 dark:text-neutral-300/90 hover:dark:text-neutral-200 transition-colors duration-200 hover:bg-neutral-50/80 cursor-pointer dark:hover:bg-neutral-700/30 shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-4px_rgba(0,0,0,0.08)] dark:shadow-[0_-0.5px_0px_rgba(255,255,255,0.15),0_5px_12px_-4px_rgba(0,0,0,0.6)]"
           data-rd-preview-expand
         >
           View code
@@ -174,36 +181,37 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
   .rd-component-preview__code[data-rd-preview-expanded="false"]
     .rd-component-preview__overlay {
     display: flex;
-    background: linear-gradient(
-      to top,
-      rgb(250 250 250 / 90%),
-      rgb(250 250 250 / 30%)
-    );
-  }
-
-  :global(.dark)
-    .rd-component-preview__code[data-rd-preview-expanded="false"]
-    .rd-component-preview__overlay {
-    background: linear-gradient(
-      to top,
-      color-mix(in srgb, var(--rd-code-surface) 90%, transparent),
-      color-mix(in srgb, var(--rd-code-surface) 35%, transparent)
-    );
   }
 
   .rd-component-preview__code :global([data-rd-code-scroll-area]) {
     overflow-y: hidden;
-    transition: max-height 280ms cubic-bezier(0.22, 1, 0.36, 1);
+    transition:
+      max-height 280ms cubic-bezier(0.22, 1, 0.36, 1),
+      mask-image 180ms ease-out;
   }
 
   .rd-component-preview__code[data-rd-preview-expanded="false"]
     :global([data-rd-code-scroll-area]) {
-    max-height: calc(var(--rd-preview-visible-lines, 5) * 1.5rem + 1.25rem);
+    max-height: calc(var(--rd-preview-visible-lines, 5) * 1.5rem + 0.75rem);
+    -webkit-mask-image: linear-gradient(
+      to bottom,
+      rgb(0 0 0 / 80%) 0%,
+      rgb(0 0 0 / 32%) 82%,
+      transparent 110%
+    );
+    mask-image: linear-gradient(
+      to bottom,
+      rgb(0 0 0 / 80%) 0%,
+      rgb(0 0 0 / 32%) 82%,
+      transparent 110%
+    );
   }
 
   .rd-component-preview__code[data-rd-preview-expanded="true"]
     :global([data-rd-code-scroll-area]) {
     max-height: var(--rd-preview-expanded-height, 200rem);
+    -webkit-mask-image: none;
+    mask-image: none;
   }
 </style>
 

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

@@ -1,10 +1,9 @@
 ---
 import { validateNoUnknownProps, validateProps } from "../../lib/component-error";
-import { renderMarkdown } from "../../lib/utils";
 import { resolveStaticAssetUrl } from "../../lib/static-asset-url";
 
 interface Props {
-  src: string;
+  src: string | { light?: string; dark?: string };
   alt?: string;
   title?: string;
   width?: number | string;
@@ -24,7 +23,7 @@ validateProps(
   "Image",
   imageProps,
   {
-    src: { required: true, type: "string" },
+    src: { required: true, type: ["string", "object"] },
     alt: { type: "string" },
     title: { type: "string" },
     width: { type: ["number", "string"] },
@@ -35,17 +34,51 @@ validateProps(
 
 const { src, alt, title, width, zoom = true } = imageProps as Props;
 const zoomEnabled = zoom !== false;
-const resolvedSrc = resolveStaticAssetUrl(src);
 const rawWidth = width;
-const imageAttrs: Record<string, unknown> = { src: resolvedSrc };
-if (typeof alt === "string") {
-  imageAttrs.alt = alt;
+
+function normalizeImageSource(value: Props["src"]): {
+  light: string;
+  dark?: string;
+} {
+  if (typeof value === "string") {
+    return { light: value };
+  }
+
+  const light = typeof value.light === "string" ? value.light : "";
+  const dark = typeof value.dark === "string" ? value.dark : undefined;
+
+  return { light, dark };
+}
+
+const normalizedSource = normalizeImageSource(src);
+if (!normalizedSource.light.trim()) {
+  throw new Error(
+    `[USER_ERROR]: <Image>: Invalid prop "src": object form requires a non-empty "light" string (in ${Astro.url.pathname})`,
+  );
 }
-if (width !== undefined) {
-  imageAttrs.width = width;
+
+const resolvedLightSrc = resolveStaticAssetUrl(normalizedSource.light);
+const resolvedDarkSrc =
+  typeof normalizedSource.dark === "string" && normalizedSource.dark.trim()
+    ? resolveStaticAssetUrl(normalizedSource.dark)
+    : undefined;
+const hasDarkSource =
+  typeof resolvedDarkSrc === "string" && resolvedDarkSrc !== resolvedLightSrc;
+
+function createImageAttrs(source: string): Record<string, unknown> {
+  const attrs: Record<string, unknown> = { src: source };
+  if (typeof alt === "string") {
+    attrs.alt = alt;
+  }
+  if (width !== undefined) {
+    attrs.width = width;
+  }
+  return attrs;
 }
 
-const zoomAttrs: Record<string, unknown> = { src: resolvedSrc };
+const lightImageAttrs = createImageAttrs(resolvedLightSrc);
+const darkImageAttrs = hasDarkSource ? createImageAttrs(resolvedDarkSrc!) : null;
+const zoomAttrs: Record<string, unknown> = { src: resolvedLightSrc };
 if (typeof alt === "string") {
   zoomAttrs.alt = alt;
 }
@@ -83,15 +116,15 @@ function isConstrainedWidthValue(value: unknown): boolean {
 
 const hasCustomImageWidth = isConstrainedWidthValue(rawWidth);
 
-const captionHtml =
-  typeof title === "string" && title.trim().length > 0
-    ? (await renderMarkdown(title)).replace(/^<p>([\s\S]*)<\/p>\n?$/, "$1")
-    : "";
+const slotCaptionHtml = Astro.slots.has("default")
+  ? (await Astro.slots.render("default")).trim()
+  : "";
+const hasCaption = slotCaptionHtml.length > 0;
 ---
 
 <figure
   class:list={[
-    "rd-prose-block p-1.5 pb-1 xs:pb-1.5 group border border-neutral-200 dark:border-neutral-800 shadow-xs bg-neutral-50 dark:bg-(--rd-code-surface) rounded-2xl",
+    "rd-prose-block p-1.5 pb-1 xs:pb-1.5 group border-[0.5px] border-neutral-900/8 dark:border-white/6 bg-(--rd-code-surface) rounded-2xl shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-8px_rgba(0,0,0,0.08)] dark:shadow-[0_-.5px_1px_rgba(255,255,255,0.15),0_5px_12px_-8px_rgba(0,0,0,0.2)]",
     hasCustomImageWidth ? "w-fit max-w-full mx-auto" : "w-full",
   ]}
   x-data="{ 
@@ -102,8 +135,16 @@ const captionHtml =
     style: 'visibility: hidden;',
     fullShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
     noShadow: '0 0 0 rgba(0, 0, 0, 0)',
+    zoomSrc: '',
+    activeImage() {
+      const darkImg = this.$refs.darkImg;
+      if (darkImg && window.getComputedStyle(darkImg).display !== 'none') {
+        return darkImg;
+      }
+      return this.$refs.lightImg;
+    },
     computeZoomSize() {
-      const img = this.$refs.img;
+      const img = this.activeImage();
       const zoomContainer = this.$refs.zoomViewport;
       if (!img || !zoomContainer) {
         this.zoomSize = `width: min(92vw, ${this.zoomMaxWidth}px);`;
@@ -138,9 +179,12 @@ const captionHtml =
       return this.zoomSize;
     },
     async zoom() {
+      const img = this.activeImage();
+      if (!img) return;
       // 1. Lock scroll and measure
       document.body.style.overflow = 'hidden';
-      const rect = this.$refs.img.getBoundingClientRect();
+      this.zoomSrc = img.currentSrc || img.src;
+      const rect = img.getBoundingClientRect();
       
       // 2. Prepare the zoomed image (hidden but in DOM)
       this.style = 'opacity: 0; transition: none;';
@@ -176,7 +220,9 @@ const captionHtml =
     },
     close() {
       document.body.style.overflow = 'auto';
-      const rect = this.$refs.img.getBoundingClientRect();
+      const img = this.activeImage();
+      if (!img) return;
+      const rect = img.getBoundingClientRect();
       const zRect = this.$refs.zoomedImg.getBoundingClientRect();
       
       const scale = rect.width / zRect.width;
@@ -194,25 +240,42 @@ const captionHtml =
   }"
 >
   <div
-    class="overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-(--rd-code-surface)"
+    class="overflow-hidden rounded-[11px]"
   >
     <img
-      {...imageAttrs}
-      x-ref="img"
+      {...lightImageAttrs}
+      x-ref="lightImg"
       title={title}
       class:list={[
         "h-auto my-0! block transition-opacity",
+        hasDarkSource && "dark:hidden",
         zoomEnabled && "cursor-zoom-in",
         hasCustomImageWidth ? "max-w-full" : "w-full",
       ]}
       :class="showZoomed ? 'opacity-0 duration-0' : 'opacity-100 duration-300'"
       @click={zoomEnabled ? "zoom()" : undefined}
     />
+    {
+      darkImageAttrs && (
+        <img
+          {...darkImageAttrs}
+          x-ref="darkImg"
+          title={title}
+          class:list={[
+            "h-auto my-0! hidden transition-opacity dark:block",
+            zoomEnabled && "cursor-zoom-in",
+            hasCustomImageWidth ? "max-w-full" : "w-full",
+          ]}
+          :class="showZoomed ? 'opacity-0 duration-0' : 'opacity-100 duration-300'"
+          @click={zoomEnabled ? "zoom()" : undefined}
+        />
+      )
+    }
   </div>
   {
-    title && (
-      <figcaption class="mt-1! xs:mt-1.5! text-center text-xs! xs:text-sm! text-neutral-500 dark:text-neutral-400 font-medium whitespace-pre-line leading-relaxed px-2">
-        <span set:html={captionHtml} />
+    hasCaption && (
+      <figcaption class="prose-rules mt-1! xs:mt-1.5! max-w-none! *:max-w-none! text-center text-xs! xs:text-sm! text-neutral-500 dark:text-neutral-400 leading-relaxed px-2">
+        <Fragment set:html={slotCaptionHtml} />
       </figcaption>
     )
   }
@@ -243,6 +306,7 @@ const captionHtml =
           <img
             {...zoomAttrs}
             x-ref="zoomedImg"
+            :src="zoomSrc || $el.getAttribute('src')"
             class="relative z-10 max-w-full max-h-full object-contain rounded-2xl shadow-none will-change-transform pointer-events-none"
             :style="style"
           />

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

@@ -21,14 +21,14 @@ validateProps(
 <div
   class:list={[
     "relative pl-10 step-item pb-4 last:pb-0 space-y-4",
-    "before:absolute before:left-[10.5px] before:top-8 before:bottom-0 before:w-px before:bg-linear-[transparent,var(--color-neutral-200)_10%,var(--color-neutral-200)_90%,transparent] dark:before:bg-linear-[transparent,var(--color-neutral-700)_10%,var(--color-neutral-700)_90%,transparent]",
+    "before:mask-b-from-90% before:absolute before:left-[13.25px] before:top-[28px] before:bottom-0 before:w-[1.5px] before:bg-neutral-900/8 dark:before:bg-neutral-50/8",
   ]}
   data-step-panel
 >
   <div
     class:list={[
       "flex items-center gap-1.5 not-prose",
-      "step-number before:size-6 before:bg-linear-to-b before:from-neutral-900/80 before:to-neutral-900 dark:before:from-neutral-100 dark:before:to-neutral-200 before:rounded-full before:text-white before:flex before:items-center before:justify-center before:text-xs before:font-bold dark:before:font-extrabold before:absolute before:left-px before:top-[3px] before:shadow-sm dark:before:bg-neutral-200 dark:before:text-neutral-900",
+      "step-number before:leading-none before:size-7 before:bg-neutral-900/6 dark:before:bg-neutral-50/6 before:rounded-full before:text-neutral-700 dark:before:text-neutral-100 before:flex before:items-center before:justify-center before:text-[13px] before:font-medium before:absolute before:left-0 before:top-0",
     ]}
   >
     <h3 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100">

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

@@ -30,12 +30,33 @@ if (labels.length === 0) {
   previousTab: null,
   transitionDirection: 1,
   isTransitioning: false,
-  transitionDurationMs: 300,
+  transitionDurationMs: 400,
+  transitionEasing: 'cubic-bezier(0.22, 1, 0.36, 1)',
   transitionTimeout: null,
   containerHeight: 'auto',
   markerStyle: { left: null, width: null },
   resizeHandler: 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;
+
+    if (
+      typeof window.matchMedia === 'function' &&
+      window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    ) {
+      this.transitionDurationMs = 0;
+    }
+  },
   init() {
+    this.readMotionTokens();
     this.resizeHandler = () => {
       this.updateMarker(this.activeTab);
       this.updateHeight(this.isTransitioning);
@@ -68,7 +89,7 @@ if (labels.length === 0) {
     this.isTransitioning = true;
     this.activeTab = index;
     this.updateMarker(this.activeTab);
-    this.updateHeight(true);
+    this.updateHeight();
 
     this.transitionTimeout = window.setTimeout(() => {
       this.isTransitioning = false;
@@ -87,7 +108,7 @@ if (labels.length === 0) {
     }
   },
   getPanelStyle(index) {
-    const base = 'position: absolute; inset: 0;';
+    const base = 'position: absolute; top: 0; left: 0; right: 0; width: 100%;';
 
     const isActive = index === this.activeTab;
     const isPrevious = this.isTransitioning && index === this.previousTab;
@@ -105,29 +126,23 @@ if (labels.length === 0) {
         this.transitionDirection === 1
           ? 'rd-tabs-slide-in-from-right'
           : 'rd-tabs-slide-in-from-left';
-      return `${base} opacity: 1; pointer-events: auto; visibility: visible; z-index: 2; animation: ${animationName} ${this.transitionDurationMs}ms ease-in-out both;`;
+      return `${base} opacity: 1; pointer-events: auto; visibility: visible; z-index: 2; animation: ${animationName} ${this.transitionDurationMs}ms ${this.transitionEasing} both;`;
     }
 
     const animationName =
       this.transitionDirection === 1
         ? 'rd-tabs-slide-out-to-left'
         : 'rd-tabs-slide-out-to-right';
-    return `${base} opacity: 1; pointer-events: none; visibility: visible; z-index: 1; animation: ${animationName} ${this.transitionDurationMs}ms ease-in-out both;`;
+    return `${base} opacity: 1; pointer-events: none; visibility: visible; z-index: 1; animation: ${animationName} ${this.transitionDurationMs}ms ${this.transitionEasing} both;`;
   },
-  updateHeight(includePrevious = false) {
+  updateHeight() {
     this.$nextTick(() => {
       const activeSlide = this.$refs['content-' + this.activeTab];
       if (!activeSlide) return;
+      const activeContent = activeSlide.querySelector('[data-rd-tabs-panel-content]');
+      const measuredElement = activeContent || activeSlide;
 
-      let nextHeight = activeSlide.scrollHeight;
-      if (includePrevious && this.previousTab !== null) {
-        const previousSlide = this.$refs['content-' + this.previousTab];
-        if (previousSlide) {
-          nextHeight = Math.max(nextHeight, previousSlide.scrollHeight);
-        }
-      }
-
-      this.containerHeight = nextHeight + 'px';
+      this.containerHeight = measuredElement.scrollHeight + 'px';
     });
   }
 }"
@@ -167,19 +182,28 @@ class="rd-prose-block">
   </ul>
 
   <div 
-    class="relative mt-4 overflow-hidden transition-[height] duration-300 ease-in-out"
-    :style="'height: ' + containerHeight"
+    class="relative mt-4 overflow-visible transition-[height] motion-reduce:transition-none"
+    :style="'height: ' + containerHeight + '; transition-duration: ' + transitionDurationMs + 'ms; transition-timing-function: ' + transitionEasing + ';'"
   >
-    { tabContents.map((content, index) => (
-      <div
-        {...(index !== 0 ? { "x-cloak": true } : {})}
-        x-ref={`content-${index}`}
-        class="prose-rules w-full max-w-none! *:max-w-none!"
-        :style={`getPanelStyle(${index})`}
-        style={index === 0 ? 'position: relative;' : ''}
-        set:html={content}
-      />
-    )) }
+    <div class="relative -mx-4 h-full overflow-x-clip overflow-y-visible">
+      <div class="relative mx-4 h-full">
+        { tabContents.map((content, index) => (
+          <div
+            {...(index !== 0 ? { "x-cloak": true } : {})}
+            x-ref={`content-${index}`}
+            class="w-full"
+            :style={`getPanelStyle(${index})`}
+            style={index === 0 ? 'position: relative;' : ''}
+          >
+            <div
+              data-rd-tabs-panel-content
+              class="prose-rules w-full max-w-none! *:max-w-none!"
+              set:html={content}
+            />
+          </div>
+        )) }
+      </div>
+    </div>
   </div>
 </div>
 
@@ -187,36 +211,44 @@ class="rd-prose-block">
   @keyframes rd-tabs-slide-in-from-right {
     from {
       transform: translateX(100%);
+      opacity: 0;
     }
     to {
       transform: translateX(0);
+      opacity: 1;
     }
   }
 
   @keyframes rd-tabs-slide-in-from-left {
     from {
       transform: translateX(-100%);
+      opacity: 0;
     }
     to {
       transform: translateX(0);
+      opacity: 1;
     }
   }
 
   @keyframes rd-tabs-slide-out-to-left {
     from {
       transform: translateX(0);
+      opacity: 1;
     }
     to {
       transform: translateX(-100%);
+      opacity: 0;
     }
   }
 
   @keyframes rd-tabs-slide-out-to-right {
     from {
       transform: translateX(0);
+      opacity: 1;
     }
     to {
       transform: translateX(100%);
+      opacity: 0;
     }
   }
 </style>

package/template/src/styles/global.css

@@ -55,12 +55,14 @@
   --border-light: var(--color-neutral-100);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
+  --rd-panel-transition-duration-ms: 400;
+  --rd-panel-transition-duration: 400ms;
+  --rd-panel-transition-easing: cubic-bezier(0.22, 1, 0.36, 1);
   --rd-code-surface: color-mix(
     in srgb,
     var(--color-neutral-100) 60%,
     var(--background) 40%
   );
-  --rd-code-header-surface: var(--color-white);
   --rd-code-tab-edge-bg: var(--rd-code-surface);
   --rd-code-tab-edge-border: color-mix(
     in oklab,
@@ -94,11 +96,6 @@
     var(--color-neutral-800) 55%,
     var(--color-neutral-900) 45%
   );
-  --rd-code-header-surface: color-mix(
-    in srgb,
-    var(--color-neutral-900) 100%,
-    var(--rd-code-surface) 0%
-  );
   --rd-code-tab-edge-bg: var(--rd-code-surface);
   --rd-code-tab-edge-border: color-mix(
     in oklab,