@dogsbay/ui 0.2.0-beta.91 → 0.2.0-beta.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dogsbay/ui",
-  "version": "0.2.0-beta.91",
+  "version": "0.2.0-beta.93",
   "description": "Accessible UI components for Astro, inspired by Base UI and shadcn",
   "type": "module",
   "exports": {
@@ -11,9 +11,9 @@
   },
   "peerDependencies": {
     "astro": "^5.0.0 || ^6.0.0 || ^7.0.0",
-    "@dogsbay/primitives": "0.2.0-beta.91",
-    "@dogsbay/elements": "0.2.0-beta.91",
-    "@dogsbay/icons": "0.2.0-beta.91"
+    "@dogsbay/primitives": "0.2.0-beta.93",
+    "@dogsbay/icons": "0.2.0-beta.93",
+    "@dogsbay/elements": "0.2.0-beta.93"
   },
   "optionalDependencies": {
     "shiki": "^4.0.0",

package/src/code-block/CodeBlock.astro

@@ -42,6 +42,15 @@ const {
   ...rest
 } = Astro.props;
 
+// AsciiDoc/docs language tokens that are not Shiki grammars → the nearest real
+// one, so the block actually highlights (and data-language is meaningful)
+// instead of silently falling back to plaintext. The header still shows the
+// original label (`lang` below), only the highlighter input is aliased. #009.
+const LANG_ALIASES: Record<string, string> = {
+  terminal: "bash",
+};
+const shikiLang = LANG_ALIASES[lang.toLowerCase()] ?? lang.toLowerCase();
+
 // Show header bar based on showTitle prop:
 // - true: show when there's a title or a declared language (default, original behavior)
 // - false: never show
@@ -107,7 +116,7 @@ const floatingCopy = copy && !showHeader;
     </div>
   )}
   <div class="relative overflow-x-auto [&_pre]:!m-0 [&_pre]:!rounded-none [&_pre]:!border-0 [&_pre]:px-4 [&_pre]:py-3">
-    <Code code={code} lang={lang.toLowerCase()} themes={{ light: "github-light-default", dark: theme }} defaultColor={false} />
+    <Code code={code} lang={shikiLang} themes={{ light: "github-light-default", dark: theme }} defaultColor={false} />
     {floatingCopy && (
       <button
         class:list={[codeBlockCopy(), "absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity"]}

package/src/content-renderer/ContentRenderer.astro

@@ -177,7 +177,7 @@ function withBaseUrl(src: string | undefined): string {
   <Fragment set:html={
     `<h${node.props!.level} id="${node.props!.slug || ''}" class="group scroll-mt-20">` +
     `${node.inline ? inlineToHtml(node.inline) : (node.html?.replace(/<h\d[^>]*>|<\/h\d>/g, '') || node.props!.text || '')}` +
-    `<a href="#${node.props!.slug || ''}" class="no-underline ml-2 opacity-0 group-hover:opacity-50 transition-opacity text-muted-foreground" aria-label="Link to this heading">¶</a>` +
+    `<a href="#${node.props!.slug || ''}" class="heading-anchor no-underline ml-2 opacity-0 group-hover:opacity-50 transition-opacity text-muted-foreground" aria-label="Link to this heading">¶</a>` +
     `</h${node.props!.level}>`
   } />
 )}
@@ -295,7 +295,18 @@ function withBaseUrl(src: string | undefined): string {
 {/* ── Table ──────────────────────────────────────────────── */}
 {node.type === "table" && (
   <Table class="my-4">
-    {children.map(child => <Astro.self node={child} images={images} icons={icons} />)}
+    {(node.props?.headerRows as string[][] | undefined)?.length ? (
+      <TableHeader>
+        {(node.props!.headerRows as string[][]).map((row) => (
+          <TableRow>{row.map((cell) => <TableHead set:html={cell} />)}</TableRow>
+        ))}
+      </TableHeader>
+    ) : null}
+    <TableBody>
+      {((node.props?.bodyRows as string[][] | undefined) ?? []).map((row) => (
+        <TableRow>{row.map((cell) => <TableCell set:html={cell} />)}</TableRow>
+      ))}
+    </TableBody>
   </Table>
 )}
 {node.type === "thead" && <TableHeader>{children.map(child => <Astro.self node={child} images={images} icons={icons} />)}</TableHeader>}

package/src/sidebar/SidebarNavTree.astro

@@ -54,24 +54,71 @@ 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}
+              >{item.label}</a>
+            </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>
             </summary>
             <Astro.self items={item.children!} currentPath={currentPath} level={level + 1} />
           </details>
@@ -100,7 +147,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/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 {