reallysimpledocs 1.0.0-beta.2 → 1.0.0-beta.4

package/src/runtime/components/DefaultContentHeader.astro

@@ -0,0 +1,19 @@
+---
+import Moon from "lucide-static/icons/moon.svg?raw";
+import Sun from "lucide-static/icons/sun.svg?raw";
+---
+
+<nav class="hidden items-center gap-2 sm:flex">
+  <button
+    type="button"
+    aria-label="Toggle dark mode"
+    data-tooltip="Toggle dark mode"
+    data-side="bottom"
+    data-align="end"
+    onclick="document.dispatchEvent(new CustomEvent('basecoat:theme'))"
+    class="btn-sm-icon-ghost"
+  >
+    <span class="hidden dark:block"><Fragment set:html={Sun} /></span>
+    <span class="block dark:hidden"><Fragment set:html={Moon} /></span>
+  </button>
+</nav>

package/src/runtime/components/DefaultSidebarFooter.astro

@@ -0,0 +1,2 @@
+---
+---

package/src/runtime/components/DocsLayout.astro

@@ -4,12 +4,11 @@ import ArrowLeft from "lucide-static/icons/arrow-left.svg?raw";
 import ArrowRight from "lucide-static/icons/arrow-right.svg?raw";
 import Check from "lucide-static/icons/check.svg?raw";
 import Copy from "lucide-static/icons/copy.svg?raw";
-import Menu from "lucide-static/icons/menu.svg?raw";
-import Moon from "lucide-static/icons/moon.svg?raw";
 import PanelLeft from "lucide-static/icons/panel-left.svg?raw";
 import Search from "lucide-static/icons/search.svg?raw";
-import Sun from "lucide-static/icons/sun.svg?raw";
-import X from "lucide-static/icons/x.svg?raw";
+import ChevronRight from "lucide-static/icons/chevron-right.svg?raw";
+import Ellipsis from "lucide-static/icons/ellipsis.svg?raw";
+import ContentHeader from "virtual:reallysimpledocs/components/ContentHeader";
 import ClaudeLogo from "../../icons/logos/claude.svg?raw";
 import CursorLogo from "../../icons/logos/cursor.svg?raw";
 import MarkdownLogo from "../../icons/logos/markdown.svg?raw";
@@ -18,18 +17,36 @@ import BaseLayout from "./BaseLayout.astro";
 import CommandDialog from "./CommandDialog.astro";
 import DropdownMenu from "./DropdownMenu.astro";
 import Sidebar from "./Sidebar.astro";
-import { buildMenus, getNavigation } from "../lib/docs.js";
+import { buildMenus, getBreadcrumbs, getNavigation } from "../lib/docs.js";
 import { addSvgClass } from "../lib/html.js";
+import { renderDropdownMenu } from "../lib/macros.js";
 import { routeFilePath } from "../lib/paths.js";
 import { getSite } from "../lib/site.js";
 
 const { page, headings } = Astro.props;
 const site = getSite(config);
 const navigation = getNavigation(config, page);
+const breadcrumbs = getBreadcrumbs(config, page);
 const { sidebar } = buildMenus(config, page.slug);
+const hasToc = headings.length > 0;
 const searchIndexUrl = routeFilePath(config.routeBase, "search-index.json");
+const chevronRightIcon = addSvgClass(ChevronRight, "size-3.5");
+const ellipsisIcon = addSvgClass(Ellipsis, "size-4");
 const panelLeftIcon = addSvgClass(PanelLeft, "size-4");
 const searchIcon = addSvgClass(Search, "size-4");
+const breadcrumbItems =
+  breadcrumbs.length < 2
+    ? []
+    : breadcrumbs.length > 3
+    ? [
+        breadcrumbs[0],
+        {
+          type: "dropdown",
+          items: breadcrumbs.slice(1, -1),
+        },
+        breadcrumbs.at(-1),
+      ]
+    : breadcrumbs;
 const siteUrl = Astro.site?.toString().replace(/\/$/, "") || site.url || "";
 const pageUrl = `${siteUrl}${page.path}`;
 const llmPrompt = `Read from ${pageUrl} so I can ask questions about it.`;
@@ -84,74 +101,74 @@ const actionItems = [
           <Fragment set:html={panelLeftIcon} />
         </button>
 
+        {
+          breadcrumbItems.length > 0 && (
+            <nav class="hidden min-w-0 overflow-visible md:block" aria-label="Breadcrumb">
+              <ol class="flex min-w-0 items-center gap-1.5 overflow-visible text-sm text-muted-foreground">
+                {breadcrumbItems.map((crumb, index) => {
+                  const current = index === breadcrumbItems.length - 1;
+                  return (
+                    <>
+                      {index > 0 && (
+                        <li class="shrink-0" aria-hidden="true">
+                          <Fragment set:html={chevronRightIcon} />
+                        </li>
+                      )}
+                      <li class="inline-flex min-w-0 items-center gap-1.5 overflow-visible">
+                        {crumb.type === "dropdown" ? (
+                          <Fragment
+                            set:html={renderDropdownMenu({
+                              id: `breadcrumb-${page.slug.replace(/[^a-z0-9_-]/gi, "-")}`,
+                              trigger: ellipsisIcon,
+                              items: crumb.items.map((item) => ({
+                                label: item.label,
+                                url: item.url,
+                              })),
+                              triggerAttrs: {
+                                class: "flex size-4 items-center justify-center hover:text-foreground cursor-pointer",
+                                "aria-label": "Show breadcrumb pages",
+                              },
+                              popoverAttrs: { "data-align": "start" },
+                            })}
+                          />
+                        ) : current || !crumb.url ? (
+                          <span class="truncate font-medium text-foreground">{crumb.label}</span>
+                        ) : (
+                          <a href={crumb.url} class="truncate transition-colors hover:text-foreground">
+                            {crumb.label}
+                          </a>
+                        )}
+                      </li>
+                    </>
+                  );
+                })}
+              </ol>
+            </nav>
+          )
+        }
+
         <button
           type="button"
-          class="relative flex h-8 w-full min-w-0 max-w-72 cursor-text items-center gap-x-2 rounded-md border border-input bg-background px-3 py-1 text-base text-muted-foreground outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:bg-input/30 sm:ml-auto md:text-sm"
+          class="btn-sm-icon-ghost ml-auto sm:hidden"
+          aria-label="Search"
+          data-tooltip="Search"
+          data-side="bottom"
           onclick="window.rsdOpenCommandSearch ? window.rsdOpenCommandSearch() : document.getElementById('command-search')?.showModal()"
         >
           <Fragment set:html={searchIcon} />
-          Search the docs...
-          <kbd class="kbd ml-auto -mr-1.5">⌘K</kbd>
         </button>
 
-        <nav class="hidden items-center gap-2 sm:flex">
-          {
-            (site.links || []).map((link) => (
-              <a
-                class={link.attrs?.class || "btn-sm-outline"}
-                href={link.url}
-                aria-label={link.label}
-                data-tooltip={link.label}
-                data-side="bottom"
-                target={link.attrs?.target}
-                rel={link.attrs?.rel}
-              >
-                {link.icon && <Fragment set:html={link.icon} />}
-                {!link.iconOnly && link.label}
-              </a>
-            ))
-          }
-          <button
-            type="button"
-            aria-label="Toggle dark mode"
-            data-tooltip="Toggle dark mode"
-            data-side="bottom"
-            data-align="end"
-            onclick="document.dispatchEvent(new CustomEvent('basecoat:theme'))"
-            class="btn-sm-icon-outline"
-          >
-            <span class="hidden dark:block"><Fragment set:html={Sun} /></span>
-            <span class="block dark:hidden"><Fragment set:html={Moon} /></span>
-          </button>
-        </nav>
+        <button
+          type="button"
+          class="relative hidden h-8 w-full min-w-0 max-w-72 cursor-text items-center gap-x-2 rounded-md border border-input bg-background px-3 py-1 text-base text-muted-foreground outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:bg-input/30 sm:ml-auto sm:flex md:text-sm"
+          onclick="window.rsdOpenCommandSearch ? window.rsdOpenCommandSearch() : document.getElementById('command-search')?.showModal()"
+        >
+          <Fragment set:html={searchIcon} />
+          Search...
+          <kbd class="kbd ml-auto -mr-1.5">⌘K</kbd>
+        </button>
 
-        <div class="sm:hidden">
-          <button
-            type="button"
-            class="btn-sm-icon-ghost peer group"
-            aria-label="Toggle menu"
-            aria-expanded="false"
-            aria-controls="mobile-menu"
-            onclick="this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true')"
-          >
-            <span class="group-aria-expanded:hidden"><Fragment set:html={Menu} /></span>
-            <span class="hidden group-aria-expanded:block"><Fragment set:html={X} /></span>
-          </button>
-          <nav
-            id="mobile-menu"
-            class="fixed inset-0 top-14 z-50 flex invisible -translate-y-16 scale-95 flex-col gap-2 bg-background p-4 opacity-0 transition-all pointer-events-none peer-aria-expanded:visible peer-aria-expanded:translate-y-0 peer-aria-expanded:scale-100 peer-aria-expanded:opacity-100 peer-aria-expanded:pointer-events-auto"
-            data-mobile-menu
-          >
-            {
-              (site.links || []).map((link) => (
-                <a class="btn-lg-ghost justify-between" href={link.url} target={link.attrs?.target} rel={link.attrs?.rel}>
-                  <span>{link.label}</span>
-                  {link.icon && <Fragment set:html={link.icon} />}
-                </a>
-              ))
-            }
-          </nav>
-        </div>
+        <ContentHeader site={site} page={page} navigation={navigation} config={config} />
       </div>
     </header>
 
@@ -221,22 +238,24 @@ const actionItems = [
           </footer>
         </div>
       </article>
-      <aside class="hidden w-56 xl:block">
-        <div class="docs-toc sticky top-20 space-y-2 text-sm [&_a]:text-muted-foreground [&_a]:hover:text-foreground [&_a[data-active='true']]:text-foreground [&_ol]:space-y-2 [&_ol_ol]:mt-2 [&_ol_ol]:pl-3" data-docs-toc>
-          <h2 class="flex items-center gap-1 font-medium">
-            On this page
-          </h2>
-          <ol>
-            {
-              headings.map((heading) => (
-                <li class={heading.depth === 3 ? "pl-3" : ""}>
-                  <a href={`#${heading.id}`} data-toc-link>{heading.text}</a>
-                </li>
-              ))
-            }
-          </ol>
-        </div>
-      </aside>
+      {
+        hasToc && (
+          <aside class="hidden w-56 xl:block">
+            <div class="docs-toc sticky top-20 space-y-2 text-sm [&_a]:text-muted-foreground [&_a]:hover:text-foreground [&_a[data-active='true']]:text-foreground [&_ol]:space-y-2 [&_ol_ol]:mt-2 [&_ol_ol]:pl-3" data-docs-toc>
+              <h2 class="flex items-center gap-1 font-medium text-muted-foreground">On this page</h2>
+              <ol>
+                {headings.map((heading) => (
+                  <li class={heading.depth === 3 ? "pl-3" : ""}>
+                    <a href={`#${heading.id}`} data-toc-link>
+                      {heading.text}
+                    </a>
+                  </li>
+                ))}
+              </ol>
+            </div>
+          </aside>
+        )
+      }
     </div>
   </main>
 

package/src/runtime/components/Sidebar.astro

@@ -1,6 +1,7 @@
 ---
 import config from "virtual:reallysimpledocs/config";
 import SidebarHeader from "virtual:reallysimpledocs/components/SidebarHeader";
+import SidebarFooter from "virtual:reallysimpledocs/components/SidebarFooter";
 import { renderSidebarContent } from "../lib/macros.js";
 import { getSite } from "../lib/site.js";
 
@@ -16,5 +17,8 @@ const site = getSite(config);
     <section class="scrollbar">
       <Fragment set:html={renderSidebarContent(menu, "sidebar-content")} />
     </section>
+    <footer>
+      <SidebarFooter site={site} />
+    </footer>
   </nav>
 </aside>

package/src/runtime/components/mdx/Callout.astro

@@ -1,29 +1,23 @@
 ---
-import CircleAlert from "lucide-static/icons/circle-alert.svg?raw";
-import Info from "lucide-static/icons/info.svg?raw";
-import Lightbulb from "lucide-static/icons/lightbulb.svg?raw";
-import TriangleAlert from "lucide-static/icons/triangle-alert.svg?raw";
 import * as lucideIcons from "lucide-static";
 import { addSvgClass } from "../../lib/html.js";
 
-const { type, variant, title, icon: showIcon = true, class: className = "" } = Astro.props;
-const normalizedType = String(variant || type || "note").toLowerCase();
-const calloutType = normalizedType === "note" ? "info" : normalizedType;
-const destructive = calloutType === "danger";
-const labels = {
-  note: "Note",
-  info: "Info",
-  tip: "Tip",
-  warning: "Warning",
-  danger: "Danger",
-};
-const icons = {
-  note: Info,
-  info: Info,
-  tip: Lightbulb,
-  warning: TriangleAlert,
-  danger: CircleAlert,
-};
+const { type, title = "Note", icon: iconName, action, class: className = "" } = Astro.props;
+const normalizedType = String(type || "").toLowerCase();
+const calloutType = normalizedType === "warning" || normalizedType === "destructive" ? normalizedType : "";
+const destructive = calloutType === "destructive";
+const actionLabel = action?.label;
+const actionClass = action?.class || "btn-sm-secondary";
+const actionAttrs = action
+  ? {
+      ...action.attrs,
+      href: action.href,
+      target: action.target,
+      rel: action.rel,
+      onclick: action.onclick,
+      class: actionClass,
+    }
+  : {};
 
 function resolveNamedIcon(name) {
   if (!name || typeof name !== "string") return "";
@@ -39,16 +33,32 @@ function resolveNamedIcon(name) {
   return lucideIcons[pascalName] || "";
 }
 
-const iconSource =
-  showIcon === false ? "" : typeof showIcon === "string" ? resolveNamedIcon(showIcon) : icons[normalizedType] || Info;
+const iconSource = typeof iconName === "string" ? resolveNamedIcon(iconName) : "";
 const icon = addSvgClass(iconSource, "size-4");
-const heading = title || labels[normalizedType] || labels.note;
+const heading = title;
+const variantClass =
+  calloutType === "warning"
+    ? "[&>svg]:text-amber-700 [&>h3]:text-amber-700 [&>section]:text-amber-700 dark:[&>svg]:text-amber-300 dark:[&>h3]:text-amber-300 dark:[&>section]:text-amber-300"
+    : destructive
+      ? "[&>svg]:text-destructive [&>h3]:text-destructive [&>section]:text-destructive"
+      : "";
 ---
 
-<div class:list={[destructive ? "alert-destructive" : "alert", className]} data-variant={calloutType}>
+<div class:list={[destructive ? "alert-destructive" : "alert", "my-6", variantClass, className]}>
   {icon && <Fragment set:html={icon} />}
   <h3>{heading}</h3>
   <section>
     <slot />
   </section>
+  {
+    actionLabel && (
+      <footer>
+        {action?.href ? (
+          <a {...actionAttrs}>{actionLabel}</a>
+        ) : (
+          <button type="button" {...actionAttrs}>{actionLabel}</button>
+        )}
+      </footer>
+    )
+  }
 </div>

package/src/runtime/components/mdx/Card.astro

@@ -1,13 +1,14 @@
 ---
 const { title, description, href, class: className = "" } = Astro.props;
 const Tag = href ? "a" : "article";
+const classes = [
+  "my-6 block w-full rounded-lg border bg-card p-3 text-card-foreground no-underline",
+  href && "transition-colors hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
+  className,
+];
 ---
 
-<Tag href={href} class:list={["card w-full no-underline", href && "docs-card-link", className]}>
-  {(title || description) && (
-    <header>
-      {title && <h3>{title}</h3>}
-      {description && <p>{description}</p>}
-    </header>
-  )}
+<Tag href={href} class:list={classes}>
+  {title && <h3 class="font-medium">{title}</h3>}
+  {description && <p class="mt-1 text-sm text-muted-foreground">{description}</p>}
 </Tag>

package/src/runtime/components/mdx/CardGrid.astro

@@ -2,6 +2,6 @@
 const { class: className = "" } = Astro.props;
 ---
 
-<div class:list={["grid w-full gap-4 sm:grid-cols-2", className]}>
+<div class:list={["my-6 grid w-full gap-4 sm:grid-cols-2 [&>*]:my-0", className]}>
   <slot />
 </div>

package/src/runtime/components/mdx/Code.astro

@@ -1,19 +1,39 @@
 ---
-import { codeToHtml } from "shiki";
+import { highlightCode } from "../../lib/highlight.js";
 
-const { code = "", lang = "text", title, class: className = "" } = Astro.props;
-const highlightLang = String(lang || "text").toLowerCase() === "mdx" ? "tsx" : String(lang || "text");
-const html = await codeToHtml(String(code || ""), {
-  lang: highlightLang,
-  themes: {
-    light: "github-light",
-    dark: "github-dark",
-  },
-  defaultColor: false,
-});
+const { lang = "text", title, class: className = "" } = Astro.props;
+const slotHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
+const rawCode = decodeSlotText(slotHtml);
+const html = await highlightCode(rawCode, lang);
+const classes = [
+  "relative my-6 w-full max-w-full overflow-hidden rounded-lg",
+  className,
+];
+
+function decodeSlotText(value) {
+  return String(value || "")
+    .replace(/^<p>/, "")
+    .replace(/<\/p>$/, "")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&amp;/g, "&")
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .trim();
+}
 ---
 
-<div class:list={["code-block", className]}>
-  {title && <header><span>{title}</span></header>}
+<div
+  data-code-block
+  data-code-title={title || undefined}
+  class:list={classes}
+>
+  {
+    title && (
+      <header class="flex h-10 items-center gap-2 border-b border-border/50 bg-muted/50 px-3 text-sm font-medium">
+        <span class="mr-auto">{title}</span>
+      </header>
+    )
+  }
   <Fragment set:html={html} />
 </div>

package/src/runtime/components/mdx/CodeGroup.astro

@@ -1,21 +1,45 @@
 ---
-import Code from "./Code.astro";
-
-const { tabs = [], defaultTab, class: className = "" } = Astro.props;
+const { defaultTab, class: className = "" } = Astro.props;
 const id = `code-group-${Math.random().toString(36).slice(2)}`;
-const normalizedTabs = tabs.map((tab, index) => ({
-  ...tab,
-  value: tab.value || tab.label || String(index),
-  lang: tab.lang || "text",
-  code: tab.code || "",
-}));
+const slotHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
+const normalizedTabs = parseCodeTabs(slotHtml);
 const defaultValue = defaultTab || normalizedTabs[0]?.value;
+const classes = [
+  "relative my-6 w-full max-w-full overflow-hidden rounded-lg [&>[role=tabpanel]]:border-t-0 [&_[data-code-block]]:my-0 [&_[data-code-block]]:min-w-0 [&_[data-code-block]]:rounded-none [&_[data-code-block]>header]:hidden",
+  className,
+];
+
+function parseCodeTabs(html) {
+  const blocks = [];
+  const pattern =
+    /<div\b(?=[^>]*\bdata-code-block\b)(?=[^>]*\bdata-code-title="([^"]*)")[^>]*>([\s\S]*?)<\/div>/g;
+  let match;
+  while ((match = pattern.exec(html))) {
+    const label = decodeHtml(match[1]).trim();
+    if (!label) continue;
+    blocks.push({
+      label,
+      value: label,
+      html: match[0],
+    });
+  }
+  return blocks;
+}
+
+function decodeHtml(value) {
+  return String(value || "")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&amp;/g, "&")
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'");
+}
 ---
 
-<div class:list={["code-group", className]}>
-  <header>
-    <div class="tabs">
-      <nav role="tablist" aria-orientation="horizontal" data-variant="line">
+<div class:list={classes} data-code-group>
+  <header class="flex h-10 items-center gap-2 border-b border-border/50 bg-muted/50 px-3 text-sm font-medium">
+    <div class="tabs my-0 min-w-0 max-w-full gap-0">
+      <nav class="h-full justify-start rounded-none bg-transparent p-0" role="tablist" aria-orientation="horizontal" data-variant="line">
         {
           normalizedTabs.map((tab, index) => {
             const selected = tab.value === defaultValue;
@@ -48,7 +72,7 @@ const defaultValue = defaultTab || normalizedTabs[0]?.value;
           aria-selected={selected ? "true" : "false"}
           hidden={!selected}
         >
-          <Code code={tab.code} lang={tab.lang} />
+          <Fragment set:html={tab.html} />
         </div>
       );
     })

package/src/runtime/components/mdx/Preview.astro

@@ -1,14 +1,18 @@
 ---
-import Code from "./Code.astro";
+import { highlightCode } from "../../lib/highlight.js";
 
 const { code = "", lang = "html", title = "Preview", class: className = "" } = Astro.props;
 const id = `preview-${Math.random().toString(36).slice(2)}`;
+const html = await highlightCode(code, lang);
 ---
 
-<section class="preview">
-  <header>
-    <div class="tabs">
-      <nav role="tablist" aria-orientation="horizontal" data-variant="line">
+<section
+  class="relative my-6 max-w-full overflow-visible rounded-lg border [&>[role=tabpanel]]:border-t-0 [&>[data-code-panel]_[data-code-block]]:my-0 [&>[data-code-panel]_[data-code-block]]:min-w-0 [&>[data-code-panel]_[data-code-block]]:rounded-none"
+  data-preview
+>
+  <header class="flex h-10 items-center gap-2 border-b border-border/50 bg-muted/50 px-3 text-sm font-medium">
+    <div class="tabs my-0 min-w-0 max-w-full gap-0">
+      <nav class="h-full justify-start rounded-none bg-transparent p-0" role="tablist" aria-orientation="horizontal" data-variant="line">
         <button
           type="button"
           role="tab"
@@ -39,6 +43,7 @@ const id = `preview-${Math.random().toString(36).slice(2)}`;
     aria-labelledby={`${id}-preview-tab`}
     tabindex="-1"
     aria-selected="true"
+    class="flex min-h-64 w-full items-center justify-center p-6"
   >
     <div class={className}>
       <slot />
@@ -53,6 +58,11 @@ const id = `preview-${Math.random().toString(36).slice(2)}`;
     aria-selected="false"
     hidden
   >
-    <Code code={code} lang={lang} />
+    <div
+      class="relative my-6 w-full max-w-full overflow-hidden rounded-lg"
+      data-code-block
+    >
+      <Fragment set:html={html} />
+    </div>
   </section>
 </section>

package/src/runtime/components/mdx/Steps.astro

@@ -1,7 +1,11 @@
 ---
 const { class: className = "" } = Astro.props;
+const classes = [
+  "mb-12 mt-6 [counter-reset:step] md:ml-4 md:border-l md:pl-8 [&>section]:mb-10 [&>section]:[counter-increment:step] [&>section:last-child]:mb-0 [&>section>*+*]:mt-6 [&>section>*]:leading-relaxed [&>section>*:first-child]:mt-0 [&>section>*:last-child]:mb-0 [&>section>h3+*]:mt-4 [&>section>h3]:relative [&>section>h3]:scroll-m-28 [&>section>h3]:text-lg [&>section>h3]:font-medium [&>section>h3]:tracking-tight [&>section>h3]:before:mr-4 [&>section>h3]:before:inline-flex [&>section>h3]:before:size-7 [&>section>h3]:before:items-center [&>section>h3]:before:justify-center [&>section>h3]:before:rounded-full [&>section>h3]:before:bg-muted [&>section>h3]:before:text-sm [&>section>h3]:before:font-medium [&>section>h3]:before:text-muted-foreground [&>section>h3]:before:content-[counter(step)] md:[&>section>h3]:before:absolute md:[&>section>h3]:before:left-0 md:[&>section>h3]:before:top-0 md:[&>section>h3]:before:mr-0 md:[&>section>h3]:before:-translate-x-[2.875rem]",
+  className,
+];
 ---
 
-<div role="list" class:list={["steps", className]}>
+<div role="list" class:list={classes}>
   <slot />
 </div>

package/src/runtime/components/mdx/Tabs.astro

@@ -9,7 +9,7 @@ const normalizedTabs = tabs.map((tab, index) => ({
 const defaultValue = defaultTab || normalizedTabs.find((tab) => !tab.disabled)?.value || normalizedTabs[0]?.value;
 ---
 
-<div class:list={["tabs", className]}>
+<div class:list={["tabs my-6", className]}>
   <nav role="tablist" aria-orientation={orientation} data-variant={variant}>
     {
       normalizedTabs.map((tab, index) => {