radiant-docs 0.1.46 → 0.1.48

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

@@ -1,112 +1,167 @@
 ---
 import Icon from "../ui/Icon.astro";
-import warningIcon from "../../assets/icons/warning.svg?url";
-import infoIcon from "../../assets/icons/info.svg?url";
-import lightbulbIcon from "../../assets/icons/lightbulb.svg?url";
-import dangerIcon from "../../assets/icons/danger.svg?url";
-import successIcon from "../../assets/icons/check.svg?url";
 import { validateProps } from "../../lib/component-error";
 
 type CalloutType = "warning" | "info" | "tip" | "danger" | "success";
 
 interface Props {
   type?: CalloutType;
-  title?: string;
-  icon?: string;
+  title?: string | false;
+  icon?: string | false;
+  accent?: boolean;
   color?: string;
 }
 
 const typeDefaults: Record<
   CalloutType,
-  { icon: string; color: string; iconColor: string; title: string }
+  { icon: string; color: string; title: string }
 > = {
   warning: {
-    icon: warningIcon,
-    color: "bg-amber-500",
-    iconColor: "text-amber-500 dark:text-amber-400",
+    icon: "fluent:warning-16-filled",
+    color: "#FF990A",
     title: "Warning",
   },
   info: {
-    icon: infoIcon,
-    color: "bg-sky-600/80",
-    iconColor: "text-sky-600/80 dark:text-sky-400",
+    icon: "fluent:info-16-filled",
+    color: "#5589C5",
     title: "Info",
   },
   tip: {
-    icon: lightbulbIcon,
-    color: "bg-yellow-500",
-    iconColor: "text-yellow-500 dark:text-yellow-400",
+    icon: "fluent:lightbulb-filament-24-filled",
+    color: "#FFB400",
     title: "Tip",
   },
   danger: {
-    icon: dangerIcon,
-    color: "bg-red-600",
-    iconColor: "text-red-600 dark:text-red-400",
+    icon: "fluent:diamond-dismiss-24-filled",
+    color: "#E5484D",
     title: "Danger",
   },
   success: {
-    icon: successIcon,
-    color: "bg-green-600",
-    iconColor: "text-green-600 dark:text-green-400",
+    icon: "fluent:checkmark-starburst-24-filled",
+    color: "#46A758",
     title: "Success",
   },
 };
 
-const { type = "info", title, icon, color } = Astro.props;
+const rawProps = Astro.props as { icon?: unknown; title?: unknown };
+const rawIcon = rawProps.icon;
+const rawTitle = rawProps.title;
+const { type = "info", title, icon, accent = true, color } = Astro.props;
 
 validateProps(
   "Callout",
-  { type, title, icon, color },
+  { type, title, icon, accent, color },
   {
     type: { enum: ["warning", "info", "tip", "danger", "success"] },
-    title: { type: "string" },
-    icon: { type: "string" },
+    title: { type: ["string", "boolean"] },
+    icon: { type: ["string", "boolean"] },
+    accent: { type: "boolean" },
     color: { type: "string" },
   },
   Astro.url.pathname,
 );
 
+if (rawIcon === true) {
+  throw new Error(
+    `[USER_ERROR]: <Callout>: Invalid prop "icon": expected string or false, got true (in ${Astro.url.pathname})`,
+  );
+}
+
+if (rawTitle === true) {
+  throw new Error(
+    `[USER_ERROR]: <Callout>: Invalid prop "title": expected string or false, got true (in ${Astro.url.pathname})`,
+  );
+}
+
 const defaults = typeDefaults[type];
-const resolvedTitle = title ?? defaults.title;
+const resolvedTitle = title === false ? null : (title ?? defaults.title);
+const resolvedIcon = icon === false ? null : (icon ?? defaults.icon);
+const resolvedColor = color ?? defaults.color;
+const isIconifyName = (value: string) => {
+  const parts = value.split(":");
+  return (
+    parts.length === 2 &&
+    /^[a-z0-9-]+$/i.test(parts[0]) &&
+    /^[a-z0-9-]+$/i.test(parts[1])
+  );
+};
+const shouldUseIconComponent =
+  typeof resolvedIcon === "string" && isIconifyName(resolvedIcon);
+const hasTitle = typeof resolvedTitle === "string" && resolvedTitle.length > 0;
 ---
 
 <aside
   class:list={[
-    "rd-prose-block relative space-y-1 rounded-xl border-[0.5px]. border-neutral-900/8 bg-white px-4 py-3.5 pl-6 dark:border-neutral-800 dark:bg-(--rd-code-surface) shadow-[0px_1px_3px_0px_rgba(0,0,0,0.04),0px_0px_0px_0.8px_rgba(0,0,0,0.06)_inset,0px_-1px_0px_0px_rgba(0,0,0,0.06)_inset]",
+    "rd-prose-block relative space-y-1 rounded-xl border-[0.5px] bg-neutral-50/70 border-neutral-900/8 dark:border-white/6 px-4 py-3.5 dark:bg-(--rd-code-surface) shadow-[0_.5px_1px_rgba(0,0,0,0.15),0_5px_12px_-6px_rgba(0,0,0,0.08)] dark:shadow-[0_-.5px_1px_rgba(255,255,255,0.15),0_5px_12px_-6px_rgba(0,0,0,0.2)]",
+    accent ? "pl-6" : "pl-4",
   ]}
   role="note"
 >
-  <div
-    class:list={[
-      "absolute left-2.5 inset-y-2.5 w-[2px] rounded-full mb-0",
-      defaults.color,
-    ]}
-    style={color && { backgroundColor: color }}
-  >
-  </div>
-  <div class="flex items-center gap-2 not-prose mb-3">
-    {
-      icon ? (
-        <Icon
-          name={icon}
-          class={`size-4 ${defaults.iconColor}`}
-          style={color && { color: color }}
-        />
-      ) : (
-        <img src={defaults.icon} alt="" width="16" height="16" class="" />
-      )
-    }
-    <h6
-      class:list={[
-        "font-semibold text-sm text-neutral-900 dark:text-neutral-100",
-      ]}
-    >
-      {resolvedTitle}
-    </h6>
-  </div>
-  <div
-    class="prose-rules prose-sm! max-w-none! *:max-w-none! text-neutral-700 dark:text-neutral-300"
-  >
-    <slot />
-  </div>
+  {
+    accent && (
+      <div
+        class="absolute left-2.5 inset-y-2.5 w-[2px] rounded-full mb-0"
+        style={{ backgroundColor: resolvedColor }}
+      />
+    )
+  }
+  {
+    hasTitle ? (
+      <>
+        <div
+          class:list={[
+            "flex items-start gap-2 not-prose",
+            resolvedIcon && shouldUseIconComponent ? "mb-2" : "mb-1",
+          ]}
+        >
+          {resolvedIcon && shouldUseIconComponent ? (
+            <Icon
+              name={resolvedIcon}
+              class="size-5 shrink-0"
+              style={{ color: resolvedColor }}
+            />
+          ) : resolvedIcon ? (
+            <img
+              src={resolvedIcon}
+              alt=""
+              width="16"
+              height="16"
+              class="shrink-0 border border-white"
+            />
+          ) : null}
+          <h6
+            class:list={[
+              "font-semibold text-sm text-neutral-900 dark:text-neutral-100",
+            ]}
+          >
+            {resolvedTitle}
+          </h6>
+        </div>
+        <div class="prose-rules prose-sm! max-w-none! *:max-w-none! text-neutral-700 dark:text-neutral-300">
+          <slot />
+        </div>
+      </>
+    ) : (
+      <div class="flex items-start gap-2">
+        {resolvedIcon && shouldUseIconComponent ? (
+          <Icon
+            name={resolvedIcon}
+            class="mt-0.5 size-5 shrink-0"
+            style={{ color: resolvedColor }}
+          />
+        ) : resolvedIcon ? (
+          <img
+            src={resolvedIcon}
+            alt=""
+            width="16"
+            height="16"
+            class="mt-0.5 shrink-0 border border-white"
+          />
+        ) : null}
+        <div class="prose-rules prose-sm! max-w-none! min-w-0 flex-1 *:max-w-none! text-neutral-700 dark:text-neutral-300">
+          <slot />
+        </div>
+      </div>
+    )
+  }
 </aside>

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

@@ -199,10 +199,14 @@ const displayFilename =
     ? trimmedFilename
     : buildDefaultCodeFileName(normalizedLanguage);
 
-const { lines: tokenLines } = await getCodeLineTokens({
+const { lines: tokenLines, themeColors } = await getCodeLineTokens({
   code: raw,
   language: normalizedLanguage,
 });
+const codeThemeStyle = [
+  `--rd-code-line-highlight-theme-bg-light:${themeColors.lineHighlightBackground.light}`,
+  `--rd-code-line-highlight-theme-bg-dark:${themeColors.lineHighlightBackground.dark}`,
+].join(";");
 
 const rawLines = raw.split("\n");
 const normalizedRawLines = rawLines.length > 0 ? rawLines : [""];
@@ -244,12 +248,14 @@ const renderedCodeLinesHtml = normalizedTokenLines
 
     const lineContentClass = parsedShowLineNumbers
       ? "flex-1 whitespace-pre pr-4"
-      : "flex-1 whitespace-pre pr-4 pl-4";
-    const lineClass = isHighlighted
-      ? "flex min-w-full bg-neutral-100/80 dark:bg-neutral-800/70"
-      : "flex min-w-full";
+      : !parsedInCodeGroup && !parsedShowFilename
+        ? "flex-1 whitespace-pre pl-4 pr-8.5"
+        : "flex-1 whitespace-pre pl-4 pr-4";
+    const lineHighlightAttribute = isHighlighted
+      ? ' data-rd-code-line-highlighted="true"'
+      : "";
 
-    return `<span class="${lineClass}">${lineNumberHtml}<span class="${lineContentClass}">${tokenHtml}</span></span>`;
+    return `<span class="flex min-w-full"${lineHighlightAttribute}>${lineNumberHtml}<span class="${lineContentClass}">${tokenHtml}</span></span>`;
   })
   .join("");
 ---
@@ -257,7 +263,7 @@ const renderedCodeLinesHtml = normalizedTokenLines
 <div
   class:list={[
     "group/prose-code not-prose relative w-full max-w-full min-w-0 rounded-xl",
-    parsedInCodeGroup ? "my-0" : "rd-prose-block shadow-xs",
+    parsedInCodeGroup ? "my-0" : "rd-prose-block",
   ]}
   data-rd-code-block-root="true"
   data-rd-collapsed-lines={collapsedLinesValue}
@@ -268,21 +274,22 @@ const renderedCodeLinesHtml = normalizedTokenLines
   data-rd-tab-hide-icon={parsedInCodeGroup && parsedHideLanguageIcon
     ? "true"
     : undefined}
+  style={codeThemeStyle}
 >
   <div
     class:list={[
-      "w-full max-w-full min-w-0 overflow-hidden border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-(--rd-code-surface)",
-      parsedInCodeGroup ? "rounded-t-none rounded-b-xl" : "rounded-xl",
+      "w-full max-w-full min-w-0 bg-(--rd-code-surface)",
+      parsedInCodeGroup ? "rounded-tr-none rounded-xl" : "rounded-xl",
     ]}
   >
     {
       !parsedInCodeGroup && parsedShowFilename ? (
-        <div class="flex items-center justify-between gap-2 border-b border-neutral-200 bg-neutral-50 inset-shadow-sm inset-shadow-neutral-100/80 dark:border-neutral-800 dark:bg-neutral-900/60 dark:inset-shadow-neutral-900/80">
+        <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="min-w-0 flex-1">
-            <div class="relative h-9 w-fit max-w-full rounded-tl-xl bg-white dark:bg-(--rd-code-surface)">
-              <div class="absolute inset-x-0 -bottom-px h-px bg-white dark:bg-(--rd-code-surface)" />
-              <CodeTabEdge className="pointer-events-none absolute -top-px left-full z-10 h-[calc(100%+2px)]" />
-              <div class="relative z-20 inline-flex h-9 max-w-full items-center gap-2 pl-5 py-1.5 text-xs font-medium text-neutral-700 dark:text-neutral-300">
+            <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)" />
+              <CodeTabEdge className="pointer-events-none absolute -top-[0.5px] left-full z-10 h-[calc(100%+1.5px)]" />
+              <div class="relative z-20 inline-flex h-9 max-w-full items-center gap-2 pl-5 py-1.5 text-xs font-medium text-neutral-700 dark:text-neutral-300 rounded-tl-xl border-t-[0.5px] border-l-[0.5px] border-(--rd-code-tab-edge-border)">
                 {shouldRenderLanguageIcon ? (
                   <CodeLanguageIcon
                     language={normalizedLanguage}
@@ -294,8 +301,8 @@ const renderedCodeLinesHtml = normalizedTokenLines
               </div>
             </div>
           </div>
-          <div class="relative h-9 w-5 shrink-0 rounded-tr-xl bg-white dark:bg-(--rd-code-surface)">
-            <div class="absolute inset-x-0 -bottom-px h-px bg-white dark:bg-(--rd-code-surface)" />
+          <div class="relative h-9 w-5 shrink-0 rounded-tr-xl bg-(--rd-code-surface) border-t-[0.5px] border-r-[0.5px] border-(--rd-code-tab-edge-border)">
+            <div class="absolute inset-x-0 -bottom-px h-px bg-(--rd-code-surface)" />
             <CodeTabEdge className="pointer-events-none absolute -top-px right-full z-10 h-[calc(100%+2px)] rotate-y-180" />
             <button
               type="button"
@@ -323,7 +330,11 @@ const renderedCodeLinesHtml = normalizedTokenLines
     }
 
     <div
-      class="relative min-w-0"
+      class:list={[
+        "relative min-w-0 border-[0.5px] rounded-xl overflow-hidden border-(--rd-code-tab-edge-border)",
+        parsedShowFilename && "border-t-0 rounded-t-none",
+        parsedInCodeGroup && "rounded-tl-xl border-0!",
+      ]}
       data-rd-code-group-panel={parsedInCodeGroup ? "true" : undefined}
     >
       {
@@ -331,7 +342,7 @@ const renderedCodeLinesHtml = normalizedTokenLines
           <div class="pointer-events-none absolute right-2 top-2 z-20">
             <button
               type="button"
-              class="pointer-events-auto inline-flex size-7 appearance-none items-center justify-center rounded-md border border-neutral-200/80 text-neutral-500/80 bg-white/80 backdrop-blur-xs outline-none ring-0 transition-colors duration-150 hover:bg-neutral-50 hover:text-neutral-600 focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 cursor-pointer dark:border-neutral-700/50 dark:bg-(--rd-code-surface) dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-200"
+              class="pointer-events-none inline-flex size-7 appearance-none items-center justify-center rounded-md bg-(--rd-code-surface)/40 backdrop-blur-sm text-neutral-500/80 outline-none ring-0 transition-colors duration-150 hover:text-neutral-700 focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 cursor-pointer group-hover/prose-code:pointer-events-auto group-focus-within/prose-code:pointer-events-auto dark:text-neutral-400 dark:hover:text-neutral-200 relative before:absolute before:inset-1 hover:before:inset-0 before:rounded-md hover:before:bg-neutral-900/4 dark:hover:before:bg-white/4 before:duration-150"
               data-rd-copy-trigger="true"
               data-rd-copy-content={encodedRaw}
               aria-label="Copy code"
@@ -344,7 +355,7 @@ const renderedCodeLinesHtml = normalizedTokenLines
               />
               <Icon
                 name="lucide:check"
-                class="absolute size-3.5 stroke-3 origin-center scale-25 rotate-6 opacity-0 text-green-700/80 transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none dark:text-green-400/90"
+                class="absolute size-3.5 stroke-3 origin-center scale-25 rotate-6 opacity-0 text-green-800/70 transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none dark:text-green-400/90"
                 data-rd-copy-check
                 aria-hidden="true"
               />
@@ -372,7 +383,7 @@ const renderedCodeLinesHtml = normalizedTokenLines
         class="relative overflow-x-auto [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"
       >
         <pre
-          class="relative m-0 min-w-full bg-white p-0 text-[13px] leading-6 dark:bg-(--rd-code-surface)"><code data-rd-code-theme class="block min-w-full py-2.5 font-mono text-neutral-800 dark:text-neutral-200"><Fragment set:html={renderedCodeLinesHtml} /></code></pre>
+          class="relative m-0 min-w-full bg-(--rd-code-surface) p-0 text-[13px] leading-6"><code data-rd-code-theme class="block min-w-full py-2.5 font-mono text-neutral-800 dark:text-neutral-200"><Fragment set:html={renderedCodeLinesHtml} /></code></pre>
       </div>
     </div>
   </div>

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

@@ -4,11 +4,11 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
 ---
 
 <div
-  class="rd-prose-block group/prose-code-group not-prose relative w-full max-w-full min-w-0 shadow-xs rounded-xl"
+  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 border border-b-0 border-neutral-200 bg-neutral-50 inset-shadow-sm inset-shadow-neutral-100/80 dark:border-neutral-800 dark:bg-neutral-900/60 dark:inset-shadow-neutral-900/80"
+    class="relative z-10 overflow-visible rounded-t-xl bg-(--rd-code-header-surface)"
   >
     <div class="flex min-w-0 items-end justify-between gap-2">
       <div class="min-w-0 flex-1 overflow-hidden rounded-t-xl">
@@ -19,18 +19,16 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
           <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-neutral-200 bg-white opacity-0 transition-[left,width,opacity] duration-200 ease-out dark:border-neutral-700/70 dark:bg-(--rd-code-surface)"
+            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"
           >
           </div>
         </div>
       </div>
 
       <div
-        class="relative h-9 w-5 shrink-0 rounded-tr-xl bg-white dark:bg-(--rd-code-surface)"
+        class="relative h-9 w-5 shrink-0 rounded-tr-xl bg-(--rd-code-surface) border-t-[0.5px] border-r-[0.5px] border-(--rd-code-tab-edge-border)"
       >
-        <div
-          class="absolute inset-x-0 -bottom-px h-px bg-white dark:bg-(--rd-code-surface)"
-        >
+        <div class="absolute inset-x-0 -bottom-px h-px bg-(--rd-code-surface)">
         </div>
         <CodeTabEdge
           className="pointer-events-none absolute -top-px right-full z-10 h-[calc(100%+2px)] rotate-y-180"
@@ -49,7 +47,7 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
           />
           <Icon
             name="lucide:check"
-            class="absolute size-3.5 stroke-3 origin-center scale-25 rotate-6 opacity-0 text-green-700/80 transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none dark:text-green-400/90"
+            class="absolute size-3.5 stroke-3 origin-center scale-25 rotate-6 opacity-0 text-green-800/70 transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none dark:text-green-400/90"
             data-rd-copy-check
             aria-hidden="true"
           />
@@ -60,7 +58,7 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
 
   <div
     data-rd-code-group-content
-    class="relative min-w-0 overflow-hidden transition-[height] duration-300 ease-in-out"
+    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)"
   >
     <slot />
   </div>
@@ -93,7 +91,8 @@ 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 : 300;
+      const TRANSITION_DURATION_MS = prefersReducedMotion ? 0 : 360;
+      const TRANSITION_EASING = "cubic-bezier(0.22, 1, 0.36, 1)";
 
       let activeIndex = 0;
       let transitionTimeoutId = null;
@@ -139,7 +138,7 @@ 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 text-muted-foreground transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer ${hasTabIcon ? "gap-2" : ""}`;
+        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.setAttribute("aria-label", filename);
         tabButton.setAttribute("data-rd-code-group-tab", String(index));
 
@@ -205,12 +204,11 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
       const updateTabButtonStates = () => {
         tabs.forEach(({ tabButton, iconContainer }, index) => {
           const isActive = index === activeIndex;
-          tabButton.classList.toggle("text-foreground", isActive);
-          tabButton.classList.toggle("text-muted-foreground", !isActive);
-
+          tabButton.classList.toggle("text-neutral-500/80", !isActive);
+          tabButton.classList.toggle("dark:text-neutral-400/80", !isActive);
           if (!iconContainer) return;
-          iconContainer.classList.toggle("opacity-100", isActive);
           iconContainer.classList.toggle("opacity-80", !isActive);
+          iconContainer.classList.toggle("grayscale-100", !isActive);
         });
         syncPill();
       };
@@ -269,15 +267,31 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
         activeItemResizeObserver.observe(activeItem);
       };
 
+      const setItemToTransitionPosition = (itemElement) => {
+        itemElement.style.position = "absolute";
+        itemElement.style.inset = "";
+        itemElement.style.top = "0";
+        itemElement.style.right = "0";
+        itemElement.style.bottom = "";
+        itemElement.style.left = "0";
+      };
+
       const setPanelsToRestState = () => {
         tabs.forEach(({ itemElement, panelElement, frameElement }, index) => {
           const isActive = index === activeIndex;
           itemElement.style.position = isActive ? "relative" : "absolute";
-          itemElement.style.inset = isActive ? "" : "0";
+          itemElement.style.inset = "";
+          itemElement.style.top = isActive ? "" : "0";
+          itemElement.style.right = isActive ? "" : "0";
+          itemElement.style.bottom = isActive ? "" : "0";
+          itemElement.style.left = isActive ? "" : "0";
           itemElement.style.opacity = isActive ? "1" : "0";
           itemElement.style.visibility = isActive ? "visible" : "hidden";
           itemElement.style.pointerEvents = isActive ? "auto" : "none";
           itemElement.style.zIndex = isActive ? "1" : "0";
+          itemElement.style.transform = "translateX(0)";
+          itemElement.style.animation = "none";
+          itemElement.style.willChange = "auto";
           panelElement.style.transform = "translateX(0)";
           panelElement.style.animation = "none";
           panelElement.style.willChange = "auto";
@@ -313,8 +327,6 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
         const nextItem = nextTab?.itemElement;
         const previousPanel = previousTab?.panelElement;
         const nextPanel = nextTab?.panelElement;
-        const previousFrame = previousTab?.frameElement;
-        const nextFrame = nextTab?.frameElement;
         if (!previousItem || !nextItem || !previousPanel || !nextPanel) {
           normalizeToCurrentState();
           return;
@@ -331,37 +343,35 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
           });
         }
 
-        previousItem.style.position = "absolute";
-        previousItem.style.inset = "0";
+        setItemToTransitionPosition(previousItem);
         previousItem.style.opacity = "1";
         previousItem.style.visibility = "visible";
         previousItem.style.pointerEvents = "none";
         previousItem.style.zIndex = "1";
+        previousItem.style.transform = "translateX(0)";
+        previousItem.style.willChange = "transform, opacity";
         previousPanel.style.transform = "translateX(0)";
-        previousPanel.style.willChange = "transform";
-        if (previousFrame) {
-          previousFrame.style.height = "100%";
-        }
-        previousPanel.style.animation =
+        previousPanel.style.animation = "none";
+        previousPanel.style.willChange = "auto";
+        previousItem.style.animation =
           direction === 1
-            ? `rd-code-group-slide-out-to-left ${TRANSITION_DURATION_MS}ms ease-in-out both`
-            : `rd-code-group-slide-out-to-right ${TRANSITION_DURATION_MS}ms ease-in-out both`;
+            ? `rd-code-group-slide-out-to-left ${TRANSITION_DURATION_MS}ms ${TRANSITION_EASING} both`
+            : `rd-code-group-slide-out-to-right ${TRANSITION_DURATION_MS}ms ${TRANSITION_EASING} both`;
 
-        nextItem.style.position = "absolute";
-        nextItem.style.inset = "0";
+        setItemToTransitionPosition(nextItem);
         nextItem.style.opacity = "1";
         nextItem.style.visibility = "visible";
         nextItem.style.pointerEvents = "auto";
         nextItem.style.zIndex = "2";
+        nextItem.style.transform = "translateX(0)";
+        nextItem.style.willChange = "transform, opacity";
         nextPanel.style.transform = "translateX(0)";
-        nextPanel.style.willChange = "transform";
-        if (nextFrame) {
-          nextFrame.style.height = "100%";
-        }
-        nextPanel.style.animation =
+        nextPanel.style.animation = "none";
+        nextPanel.style.willChange = "auto";
+        nextItem.style.animation =
           direction === 1
-            ? `rd-code-group-slide-in-from-right ${TRANSITION_DURATION_MS}ms ease-in-out both`
-            : `rd-code-group-slide-in-from-left ${TRANSITION_DURATION_MS}ms ease-in-out both`;
+            ? `rd-code-group-slide-in-from-right ${TRANSITION_DURATION_MS}ms ${TRANSITION_EASING} both`
+            : `rd-code-group-slide-in-from-left ${TRANSITION_DURATION_MS}ms ${TRANSITION_EASING} both`;
 
         transitionTimeoutId = window.setTimeout(() => {
           transitionTimeoutId = null;