@dogsbay/ui 0.2.0-beta.13 → 0.2.0-beta.131

package/src/endpoint-card/EndpointCard.astro

@@ -51,10 +51,68 @@ const { method, path, baseUrl, summary, description, deprecated = false, class:
 
   {summary && <p class="text-sm text-muted-foreground">{summary}</p>}
   {description && description !== summary && (
-    <div class="text-sm text-muted-foreground" set:html={description} />
+    <div class="api-description text-sm text-muted-foreground" set:html={description} />
   )}
 
   <div class="space-y-3">
     <slot />
   </div>
 </div>
+
+<style is:global>
+  /* An operation's description is Markdown rendered to HTML (lists, code,
+     paragraphs), placed where the page's prose styles do not reach: without
+     these a bulleted field list reads as loose lines. */
+  .api-description > * + * {
+    margin-top: 0.5rem;
+  }
+  .api-description ul {
+    list-style: disc;
+    padding-left: 1.25rem;
+  }
+  .api-description ol {
+    list-style: decimal;
+    padding-left: 1.25rem;
+  }
+  .api-description li + li,
+  .api-description li > ul,
+  .api-description li > ol {
+    margin-top: 0.125rem;
+  }
+  .api-description ul ul {
+    list-style: circle;
+  }
+  /* Field names (`id`, `scm_type`) stand out in the JSON key colour,
+     on a faint tint of it. Override --api-field in the theme to change it; a site
+     scaffolded before the token existed gets --api-post, the same blue. */
+  .api-description code {
+    font-family: var(--font-mono, ui-monospace, monospace);
+    font-size: 0.85em;
+    font-weight: 600;
+    color: var(--api-field, var(--api-post, var(--foreground)));
+    background-color: color-mix(in oklab, var(--api-field, var(--api-post, var(--foreground))) 8%, transparent);
+    border-radius: 0.25rem;
+    padding: 0.0625rem 0.3rem;
+  }
+  /* A code block in a description (a JSON shape, `?order_by=`) is one
+     full-width block, as Swagger UI shows it: the chip styling above,
+     applied per line, read as a stack of separate highlights. */
+  .api-description pre {
+    overflow-x: auto;
+    border-radius: 0.375rem;
+    padding: 0.5rem 0.75rem;
+    background-color: var(--code-background, color-mix(in oklab, var(--foreground) 6%, transparent));
+  }
+  .api-description pre code {
+    display: block;
+    padding: 0;
+    border-radius: 0;
+    background: none;
+    white-space: pre;
+  }
+  .api-description a {
+    color: var(--primary);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+</style>

package/src/files/FileTree.astro

@@ -0,0 +1,16 @@
+---
+/**
+ * FileTree — the `:::files` directive: a nested list shown as folders and files.
+ * The markup is fileTreeHtml (markup.ts), shared with dogsbay-ssg.
+ */
+import { fileTreeHtml, type FileTreeItem } from "./markup.js";
+
+interface Props {
+  items: FileTreeItem[];
+  class?: string;
+}
+
+const { items, class: className } = Astro.props;
+---
+
+<Fragment set:html={fileTreeHtml(items, className ?? "")} />

package/src/files/index.ts

@@ -0,0 +1,2 @@
+export { default as FileTree } from "./FileTree.astro";
+export { fileTreeHtml, type FileTreeItem } from "./markup.js";

package/src/files/markup.ts

@@ -0,0 +1,34 @@
+/**
+ * The `:::files` tree, written once for both pipelines: FileTree.astro renders it,
+ * and dogsbay-ssg copies this file (scripts/sync-astro-styles.mjs) and calls it.
+ * Each pipeline turns an entry's inline Markdown into `label` HTML itself.
+ */
+
+export interface FileTreeItem {
+  /** The entry's label as HTML (already escaped). */
+  label: string;
+  /** A folder: it has entries, or its name ends in "/". */
+  folder: boolean;
+  children: FileTreeItem[];
+}
+
+const svg = (body: string) =>
+  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 shrink-0 text-muted-foreground" aria-hidden="true" focusable="false">${body}</svg>`;
+// Lucide folder and file (ISC licence).
+const FOLDER = svg('<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>');
+const FILE = svg('<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/>');
+
+function list(items: FileTreeItem[], nested: boolean): string {
+  const cls = nested ? "m-0 ml-2 list-none border-l border-border pl-4" : "m-0 list-none p-0";
+  return `<ul class="${cls}">${items
+    .map(
+      (it) =>
+        `<li class="my-0.5" data-kind="${it.folder ? "folder" : "file"}"><span class="inline-flex items-center gap-1.5">${it.folder ? FOLDER : FILE}<span>${it.label}</span></span>${it.children.length ? list(it.children, true) : ""}</li>`,
+    )
+    .join("")}</ul>`;
+}
+
+/** The whole tree, in a bordered, monospaced box. */
+export function fileTreeHtml(items: FileTreeItem[], extraClass = ""): string {
+  return `<div class="not-prose my-4 overflow-x-auto rounded-lg border bg-card p-3 font-mono text-sm${extraClass ? ` ${extraClass}` : ""}" data-component="files">${list(items, false)}</div>`;
+}

package/src/image/Image.astro

@@ -47,6 +47,27 @@ const captionText = caption || title;
 const w = width || (imageData ? imageData.width : undefined);
 const h = height || (imageData ? imageData.height : undefined);
 
+// When `imageData` is unavailable (image not in import.meta.glob —
+// e.g. SVG, PDF, or build-time `imageOptimization: false`), the
+// `<img src={src}>` fallback fires with the raw markdown src. For
+// absolute paths like `/_assets/foo.png`, we need to prefix with
+// Astro's `base` so the URL resolves on subpath-mounted deploys
+// (GH Pages project pages, multi-mount Cloudflare).
+//
+// `<AstroImage>` does this automatically; raw `<img>` does not.
+//
+// Skip prefixing for: external URLs (http/https), data: URIs,
+// and paths that already start with `import.meta.env.BASE_URL`
+// (defensive; shouldn't normally happen).
+const baseUrl = import.meta.env.BASE_URL.replace(/\/$/, "");
+const resolvedSrc =
+  baseUrl &&
+  src.startsWith("/") &&
+  !src.startsWith(`${baseUrl}/`) &&
+  !/^(?:[a-z]+:|\/\/)/i.test(src)
+    ? `${baseUrl}${src}`
+    : src;
+
 const alignClass = align === "left"
   ? "float-left mr-4 mb-2"
   : align === "right"
@@ -71,7 +92,7 @@ const alignClass = align === "left"
       />
     ) : (
       <img
-        src={src}
+        src={resolvedSrc}
         alt={alt}
         title={title}
         width={w}
@@ -102,7 +123,7 @@ const alignClass = align === "left"
   />
 ) : (
   <img
-    src={src}
+    src={resolvedSrc}
     alt={alt}
     title={title}
     width={w}

package/src/kbd/Kbd.astro

@@ -1,9 +1,8 @@
 ---
 import { tv } from "tailwind-variants";
+import { KBD_CLASS } from "./variants.js";
 
-const kbd = tv({
-  base: "pointer-events-none inline-flex h-5 items-center justify-center gap-1 rounded border bg-muted px-1.5 font-mono text-xs font-medium text-muted-foreground shadow-[0_1px_0_1px] shadow-muted",
-});
+const kbd = tv({ base: KBD_CLASS });
 
 interface Props {
   class?: string;

package/src/kbd/variants.ts

@@ -0,0 +1,3 @@
+/** Kbd.astro's classes, shared with dogsbay-ssg (copied by scripts/sync-astro-styles.mjs). */
+export const KBD_CLASS =
+  "pointer-events-none inline-flex h-5 items-center justify-center gap-1 rounded border bg-muted px-1.5 font-mono text-xs font-medium text-muted-foreground shadow-[0_1px_0_1px] shadow-muted";

package/src/link-card/LinkCard.astro

@@ -1,8 +1,10 @@
 ---
 import { tv } from "tailwind-variants";
+import Icon from "../icon/Icon.astro";
 
 const linkCard = tv({
-  base: "group flex flex-col gap-1 rounded-lg border bg-card p-4 text-card-foreground shadow-sm transition-colors hover:bg-accent/50",
+  // not-prose: the page's link underline would otherwise run under every line of the card
+  base: "not-prose group flex flex-col gap-1 rounded-lg border bg-card p-4 text-card-foreground no-underline shadow-sm transition-colors hover:bg-accent/50",
 });
 
 const linkCardTitle = tv({
@@ -17,16 +19,21 @@ interface Props {
   title: string;
   description?: string;
   href: string;
+  /** An icon before the title: a name (`rocket`, `mdi:home`) as the Icon component takes. */
+  icon?: string;
   class?: string;
   [key: string]: unknown;
 }
 
-const { title, description, href, class: className, ...rest } = Astro.props;
+const { title, description, href, icon, class: className, ...rest } = Astro.props;
 ---
 
 <a href={href} class={linkCard({ class: className })} {...rest}>
   <div class="flex items-center justify-between">
-    <span class={linkCardTitle()}>{title}</span>
+    <span class="flex min-w-0 items-center gap-2">
+      {icon && <Icon name={icon} class="size-4 shrink-0 text-muted-foreground" />}
+      <span class={linkCardTitle()}>{title}</span>
+    </span>
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="16"

package/src/property-list/PropertyList.astro

@@ -47,9 +47,10 @@ const groups = locationOrder
 <div class={className}>
   {groups.map((group) => (
     <div class="mb-4 last:mb-0">
-      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+      {/* A label, not a heading: under an embed's tag h2 an h4 skipped a level (axe heading-order). */}
+      <p class="mb-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
         {group.label}
-      </h4>
+      </p>
       <div class="rounded-lg border bg-card">
         {group.params.map((param) => (
           <PropertyItem

package/src/sidebar/SidebarNavMark.astro

@@ -0,0 +1,85 @@
+---
+/**
+ * A nav state marker (changed / new / removed / moved).
+ *
+ * Accessibility contract — the reason this is a component and not a
+ * coloured dot inlined three times:
+ *
+ *  - **Never colour alone** (WCAG 1.4.1): each kind gets a distinct
+ *    GLYPH (+ • − →), so it is readable in greyscale and by anyone who
+ *    does not perceive the hue difference. Colour only reinforces.
+ *  - **Survives forced-colors** (Windows High Contrast strips
+ *    background-color): the glyph is real text, so it always renders;
+ *    `currentColor` keeps it visible when the palette is overridden.
+ *  - **Announced, not implied**: a visually-hidden word rides along, so
+ *    the row reads "MySQL, changed". `title` alone is not enough — it is
+ *    unreliable in screen readers and invisible to touch users.
+ *  - **aria-hidden on the glyph** so it is not announced twice.
+ */
+interface Props {
+  kind: "added" | "changed" | "removed" | "moved";
+  /** Announced text; defaults to the kind (or "contains X" for a subtree). */
+  label?: string;
+  /** True when this summarizes DESCENDANTS (a collapsed group). */
+  subtree?: boolean;
+  class?: string;
+}
+
+const { kind, label, subtree = false, class: className } = Astro.props;
+
+const GLYPH: Record<Props["kind"], string> = {
+  added: "+",
+  changed: "•",
+  removed: "−",
+  moved: "→",
+};
+
+const text = label ?? (subtree ? `contains ${kind}` : kind);
+---
+
+<span
+  class:list={["db-nav-mark", className]}
+  data-nav-mark={kind}
+  data-nav-mark-subtree={subtree ? "" : undefined}
+  title={text}
+>
+  <span aria-hidden="true">{GLYPH[kind]}</span>
+  <span class="sr-only">{text}</span>
+</span>
+
+<style is:global>
+  .db-nav-mark {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    margin-left: auto; /* right-aligned: labels stay flush-left and scannable */
+    border-radius: 99px;
+    font-size: 0.75rem;
+    line-height: 1;
+    font-weight: 700;
+    /* colour REINFORCES the glyph; it never carries the meaning alone */
+    color: var(--color-muted-foreground, currentColor);
+  }
+  .db-nav-mark[data-nav-mark="added"] { color: var(--color-success, oklch(0.72 0.19 150)); }
+  .db-nav-mark[data-nav-mark="changed"] { color: var(--color-warning, oklch(0.8 0.16 85)); }
+  .db-nav-mark[data-nav-mark="removed"] { color: var(--color-destructive, oklch(0.64 0.21 25)); }
+  .db-nav-mark[data-nav-mark="moved"] { color: var(--color-info, oklch(0.7 0.14 240)); }
+  /* A subtree marker is a hint, not a claim about this row — mute it. */
+  .db-nav-mark[data-nav-mark-subtree] { opacity: 0.55; }
+
+  /* Removed pages get a second non-colour signal — but ONLY a page that
+     is itself removed. A subtree aggregate is a claim about descendants;
+     striking through a surviving group would tell the reader the whole
+     section was deleted. */
+  [data-nav-mark-row="removed"]:not([data-nav-mark-subtree]) {
+    text-decoration: line-through;
+    opacity: 0.7;
+  }
+
+  @media (forced-colors: active) {
+    .db-nav-mark { color: CanvasText; }
+  }
+</style>

package/src/sidebar/SidebarNavTree.astro

@@ -1,4 +1,5 @@
 ---
+import SidebarNavMark from "./SidebarNavMark.astro";
 /**
  * Recursive sidebar navigation tree.
  * Renders a data-driven tree with native <details>/<summary> for zero-JS expand/collapse.
@@ -8,11 +9,18 @@
  *   <SidebarNavTree items={navItems} currentPath={Astro.url.pathname} />
  */
 
+interface NavMark {
+  kind: "added" | "changed" | "removed" | "moved";
+  label?: string;
+  subtree?: boolean;
+}
+
 interface NavItem {
   label: string;
   href?: string;
   icon?: string;         // Raw SVG string (rendered via set:html)
   children?: NavItem[];
+  mark?: NavMark;
 }
 
 interface Props {
@@ -24,6 +32,13 @@ interface Props {
 
 const { items, currentPath, level = 0, class: className } = Astro.props;
 
+/**
+ * Markers are rendered by SidebarNavMark, which owns the accessibility
+ * contract (distinct glyph so colour is never the sole channel,
+ * visually-hidden text so the row announces "MySQL, changed",
+ * forced-colors survival). See that component.
+ */
+
 const normalizedPath = currentPath.replace(/\/$/, "") || "/";
 
 function isActive(href: string) {
@@ -54,24 +69,78 @@ const paddingLeft = `${8 + level * 12}px`;
     const active = item.href ? isActive(item.href) : false;
     const hasChildren = item.children && item.children.length > 0;
     const shouldOpen = hasChildren && hasActiveDescendant(item);
+    const open = shouldOpen || active;
+    // A branch that is ALSO a page (has an href) is a section landing
+    // page; it uses the button-driven disclosure below and needs a
+    // stable id linking its toggle button to its submenu.
+    const submenuId = item.href
+      ? `nav-sub-${item.href.replace(/[^a-z0-9]+/gi, "-")}-${level}`
+      : undefined;
 
     return (
       <li data-sidebar="nav-tree-item">
-        {hasChildren ? (
+        {hasChildren && item.href ? (
+          /*
+            Section landing page: APG "disclosure navigation" pattern — a
+            real link (navigates) + a SEPARATE toggle <button> (expands),
+            as siblings. Nesting a focusable <a> inside the interactive
+            <summary> is an axe `nested-interactive` violation, and native
+            <details> can't show a header link when collapsed without that
+            nesting. Progressive enhancement: the submenu's server state
+            (hidden unless open) is correct with no JS — the link still
+            works and the active section is expanded — and the inline
+            script wires the toggle button when JS is available.
+          */
+          <Fragment>
+            <div
+              class:list={[
+                "flex w-full min-w-0 items-center gap-2 rounded-md text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+                level === 0 ? "h-8" : "h-7",
+                active && "bg-sidebar-accent font-medium text-sidebar-accent-foreground",
+              ]}
+              style={`padding-left: ${paddingLeft};`}
+            >
+              <button
+                type="button"
+                data-nav-toggle
+                aria-controls={submenuId}
+                aria-expanded={open ? "true" : "false"}
+                aria-label={`Toggle ${item.label} section`}
+                class="shrink-0 rounded outline-none ring-sidebar-ring focus-visible:ring-2"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 shrink-0 transition-transform duration-200" data-chevron aria-hidden="true"><polyline points="9 18 15 12 9 6" /></svg>
+              </button>
+              {item.icon && <span class="shrink-0 [&>svg]:size-4" set:html={item.icon} />}
+              <a
+                href={item.href}
+                class="min-w-0 flex-1 truncate text-inherit no-underline outline-none ring-sidebar-ring focus-visible:ring-2"
+                data-nav-href={item.href}
+                data-active={active || undefined}
+                data-nav-mark-row={item.mark?.subtree ? undefined : item.mark?.kind}
+              >{item.label}</a>
+              {item.mark && (
+                <SidebarNavMark kind={item.mark.kind} label={item.mark.label} subtree={item.mark.subtree} />
+              )}
+            </div>
+            <div id={submenuId} data-nav-submenu hidden={!open}>
+              <Astro.self items={item.children!} currentPath={currentPath} level={level + 1} />
+            </div>
+          </Fragment>
+        ) : hasChildren ? (
           <details open={shouldOpen || active}>
             <summary
               class:list={[
                 "flex w-full min-w-0 cursor-pointer items-center gap-2 rounded-md text-sm text-sidebar-foreground outline-none [list-style:none] ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&::-webkit-details-marker]:hidden",
                 level === 0 ? "h-8" : "h-7",
-                active && "bg-sidebar-accent font-medium text-sidebar-accent-foreground",
               ]}
               style={`padding-left: ${paddingLeft};`}
-              data-nav-href={item.href || undefined}
-              data-active={active || undefined}
             >
               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 shrink-0 transition-transform duration-200" data-chevron aria-hidden="true"><polyline points="9 18 15 12 9 6" /></svg>
               {item.icon && <span class="shrink-0 [&>svg]:size-4" set:html={item.icon} />}
-              <span class="truncate">{item.label}</span>
+              <span class="min-w-0 flex-1 truncate">{item.label}</span>
+              {item.mark && (
+                <SidebarNavMark kind={item.mark.kind} label={item.mark.label} subtree={item.mark.subtree} />
+              )}
             </summary>
             <Astro.self items={item.children!} currentPath={currentPath} level={level + 1} />
           </details>
@@ -86,12 +155,22 @@ const paddingLeft = `${8 + level * 12}px`;
             style={`padding-left: ${paddingLeft};`}
             data-active={active || undefined}
             data-nav-href={item.href}
+            {/*
+              A SUBTREE mark is a claim about descendants, never about
+              this row — striking through a surviving group because one
+              child was deleted tells the reader the whole section is
+              gone (code review, 2026-07-13).
+            */}
+            data-nav-mark-row={item.mark?.subtree ? undefined : item.mark?.kind}
           >
             {/* Spacer to align with chevron in branch items */}
             <span class="size-4 shrink-0" />
             {/* Icon (level 0 only) */}
             {item.icon && <span class="shrink-0 [&>svg]:size-4" set:html={item.icon} />}
-            <span class="truncate">{item.label}</span>
+            <span class="min-w-0 flex-1 truncate">{item.label}</span>
+            {item.mark && (
+              <SidebarNavMark kind={item.mark.kind} label={item.mark.label} subtree={item.mark.subtree} />
+            )}
           </a>
         )}
       </li>
@@ -100,7 +179,32 @@ const paddingLeft = `${8 + level * 12}px`;
 </ul>
 
 <style is:global>
-  details[open] > summary [data-chevron] {
+  details[open] > summary [data-chevron],
+  [data-nav-toggle][aria-expanded="true"] [data-chevron] {
     transform: rotate(90deg);
   }
 </style>
+
+<script>
+  // Wire the section-landing disclosure toggles (APG disclosure-nav).
+  // The link navigates on its own; this button just expands/collapses
+  // the sibling submenu. Server-rendered state is already correct, so
+  // with no JS the link still works and the active section is open.
+  // Idempotent + re-run after view transitions.
+  function wireNavToggles() {
+    document
+      .querySelectorAll<HTMLButtonElement>("[data-nav-toggle]:not([data-wired])")
+      .forEach((btn) => {
+        btn.dataset.wired = "1";
+        const id = btn.getAttribute("aria-controls");
+        const submenu = id ? document.getElementById(id) : null;
+        btn.addEventListener("click", () => {
+          const isOpen = btn.getAttribute("aria-expanded") === "true";
+          btn.setAttribute("aria-expanded", String(!isOpen));
+          if (submenu) submenu.hidden = isOpen;
+        });
+      });
+  }
+  wireNavToggles();
+  document.addEventListener("astro:page-load", wireNavToggles);
+</script>

package/src/sidebar/sidebar.ts

@@ -202,7 +202,7 @@ function openMobile(provider: HTMLElement) {
   }
 
   // Lock scroll
-  ScrollLock.lock();
+  ScrollLock.activate();
 
   // Focus first focusable element in sidebar
   requestAnimationFrame(() => {
@@ -237,7 +237,7 @@ function closeMobile(provider: HTMLElement) {
   }
 
   // Unlock scroll
-  ScrollLock.unlock();
+  ScrollLock.deactivate();
 
   // Return focus to trigger
   const trigger = instance.provider.querySelector(

package/src/steps/Steps.astro

@@ -119,4 +119,9 @@ const { class: className, ...rest } = Astro.props;
     background: var(--color-border);
     opacity: 0.6;
   }
+
+  /* A step's title on its own line, above its detail (format-astro and render-html mark it) */
+  .steps-list > :global(li) > :global(.step-title) {
+    display: block;
+  }
 </style>

package/src/steps/SubSteps.astro

@@ -70,4 +70,9 @@ const { class: className, ...rest } = Astro.props;
     background: var(--color-border);
     opacity: 0.6;
   }
+
+  /* A step's title on its own line, above its detail (format-astro and render-html mark it) */
+  .sub-steps-list > :global(li) > :global(.step-title) {
+    display: block;
+  }
 </style>

package/src/table/Table.astro

@@ -6,19 +6,33 @@ const tableContainer = tv({
 });
 
 const table = tv({
-  base: "w-full caption-bottom text-sm",
+  base: "w-full caption-top text-sm",
 });
 
 interface Props {
   class?: string;
+  /**
+   * Optional table caption, rendered as a `<caption>`: the table's title,
+   * above it and left-aligned.
+   * For a caption with markup, use the `caption` slot instead.
+   */
+  caption?: string;
   [key: string]: unknown;
 }
 
-const { class: className, ...rest } = Astro.props;
+const { class: className, caption, ...rest } = Astro.props;
+
+// A table's caption is its title: above the table, left-aligned, in the body color
+const captionClass = "mb-2 text-left text-sm font-medium text-foreground";
 ---
 
 <div class={tableContainer()}>
   <table class={table({ class: className })} {...rest}>
+    {Astro.slots.has("caption") ? (
+      <caption class={captionClass}><slot name="caption" /></caption>
+    ) : (
+      caption && <caption class={captionClass}>{caption}</caption>
+    )}
     <slot />
   </table>
 </div>

package/src/table/TableCell.astro

@@ -2,7 +2,7 @@
 import { tv } from "tailwind-variants";
 
 const tableCell = tv({
-  base: "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+  base: "p-2 align-top [&:has([role=checkbox])]:pr-0",
 });
 
 interface Props {

package/src/table/TableHead.astro

@@ -2,7 +2,7 @@
 import { tv } from "tailwind-variants";
 
 const tableHead = tv({
-  base: "h-10 px-2 text-left align-middle font-semibold text-muted-foreground whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+  base: "px-2 py-2 text-left align-bottom font-semibold text-muted-foreground [&:has([role=checkbox])]:pr-0",
 });
 
 interface Props {

package/src/toc/TableOfContents.astro

@@ -99,40 +99,40 @@ const filtered = headings.filter(
     line-height: 1.4;
   }
   .toc-kind-class {
-    background-color: oklch(0.55 0.18 265 / 0.15);
-    color: oklch(0.55 0.18 265);
+    background-color: oklch(0.44 0.18 265 / 0.15);
+    color: oklch(0.44 0.18 265);
   }
   :global(.dark) .toc-kind-class {
     background-color: oklch(0.7 0.15 265 / 0.2);
     color: oklch(0.7 0.15 265);
   }
   .toc-kind-meth {
-    background-color: oklch(0.55 0.15 155 / 0.15);
-    color: oklch(0.55 0.15 155);
+    background-color: oklch(0.44 0.15 155 / 0.15);
+    color: oklch(0.44 0.15 155);
   }
   :global(.dark) .toc-kind-meth {
     background-color: oklch(0.7 0.15 155 / 0.2);
     color: oklch(0.7 0.15 155);
   }
   .toc-kind-attr {
-    background-color: oklch(0.6 0.15 55 / 0.15);
-    color: oklch(0.6 0.15 55);
+    background-color: oklch(0.44 0.15 55 / 0.15);
+    color: oklch(0.44 0.15 55);
   }
   :global(.dark) .toc-kind-attr {
     background-color: oklch(0.75 0.15 55 / 0.2);
     color: oklch(0.75 0.15 55);
   }
   .toc-kind-func {
-    background-color: oklch(0.55 0.18 330 / 0.15);
-    color: oklch(0.55 0.18 330);
+    background-color: oklch(0.44 0.18 330 / 0.15);
+    color: oklch(0.44 0.18 330);
   }
   :global(.dark) .toc-kind-func {
     background-color: oklch(0.7 0.15 330 / 0.2);
     color: oklch(0.7 0.15 330);
   }
   .toc-kind-module {
-    background-color: oklch(0.5 0.12 200 / 0.15);
-    color: oklch(0.5 0.12 200);
+    background-color: oklch(0.44 0.12 200 / 0.15);
+    color: oklch(0.44 0.12 200);
   }
   :global(.dark) .toc-kind-module {
     background-color: oklch(0.65 0.12 200 / 0.2);