@dogsbay/docs-layout 0.2.0-beta.91 → 0.2.0-beta.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dogsbay/docs-layout",
-  "version": "0.2.0-beta.91",
+  "version": "0.2.0-beta.93",
   "description": "Standard documentation layout components for Dogsbay",
   "type": "module",
   "exports": {
@@ -29,10 +29,11 @@
     "./json-ld": "./src/json-ld.ts"
   },
   "dependencies": {
-    "@dogsbay/ui": "0.2.0-beta.91",
-    "@dogsbay/primitives": "0.2.0-beta.91"
+    "@dogsbay/ui": "0.2.0-beta.93",
+    "@dogsbay/primitives": "0.2.0-beta.93"
   },
   "devDependencies": {
+    "happy-dom": "^20.8.9",
     "vitest": "^3.0.0"
   },
   "peerDependencies": {

package/src/DocsFooter.astro

@@ -37,6 +37,20 @@ const {
   llmsLinkHref = "/llms.txt",
   class: className,
 } = Astro.props;
+
+// `lastUpdated` is a canonical ISO string (e.g. "2026-06-16T00:00:00.000Z").
+// Render it as a clean, locale-stable date; UTC avoids an off-by-one when the
+// build host isn't on UTC. Non-date strings (e.g. a version/tag) pass through.
+function formatDate(value: string): string {
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return value;
+  return d.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    timeZone: "UTC",
+  });
+}
 ---
 
 <footer class:list={["mt-12 border-t pt-6", className]}>
@@ -49,7 +63,7 @@ const {
           Edit this page
         </a>
       )}
-      {lastUpdated && <span>Last updated: {lastUpdated}</span>}
+      {lastUpdated && <span>Last updated: {formatDate(lastUpdated)}</span>}
     </div>
   )}
 

package/src/docs-nav-client.ts

@@ -64,7 +64,7 @@ function hasActiveDescendant(item: NavItem, current: string): boolean {
  * sync. Padding is computed from `level` the same way (`8 + level*12`
  * pixels) so indentation lines up across the same render.
  */
-function renderItem(item: NavItem, current: string, level: number): HTMLLIElement {
+export function renderItem(item: NavItem, current: string, level: number): HTMLLIElement {
   const li = document.createElement("li");
   li.dataset.sidebar = "nav-tree-item";
 
@@ -73,7 +73,79 @@ function renderItem(item: NavItem, current: string, level: number): HTMLLIElemen
   const padLeft = `${8 + level * 12}px`;
   const heightClass = level === 0 ? "h-8" : "h-7";
 
-  if (hasChildren) {
+  if (hasChildren && item.href) {
+    // A branch that is ALSO a page (section landing page) uses the APG
+    // "disclosure navigation" pattern: a real link (navigates) and a
+    // SEPARATE toggle <button> (expands/collapses), as siblings. Nesting
+    // a focusable <a> inside the interactive <summary> — as this did
+    // before — is an axe `nested-interactive` violation ("interactive
+    // controls must not be nested"). Native <details> can't hold a
+    // visible-when-collapsed header link without that nesting, so a
+    // page-branch drops <details> for link + button + sibling submenu.
+    const open = active || hasActiveDescendant(item, current);
+    const submenuId = `nav-sub-${item.href.replace(/[^a-z0-9]+/gi, "-")}-${level}`;
+
+    const row = document.createElement("div");
+    row.className = [
+      "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",
+      heightClass,
+      active ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground" : "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+    row.style.paddingLeft = padLeft;
+
+    const toggle = document.createElement("button");
+    toggle.type = "button";
+    toggle.dataset.navToggle = "";
+    toggle.setAttribute("aria-controls", submenuId);
+    toggle.setAttribute("aria-expanded", String(open));
+    toggle.setAttribute("aria-label", `Toggle ${item.label} section`);
+    toggle.className =
+      "shrink-0 rounded outline-none ring-sidebar-ring focus-visible:ring-2";
+    toggle.innerHTML =
+      '<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>';
+    row.appendChild(toggle);
+
+    if (item.icon) {
+      const iconSpan = document.createElement("span");
+      iconSpan.className = "shrink-0 [&>svg]:size-4";
+      iconSpan.innerHTML = item.icon;
+      row.appendChild(iconSpan);
+    }
+
+    const link = document.createElement("a");
+    link.className =
+      "min-w-0 flex-1 truncate text-inherit no-underline outline-none ring-sidebar-ring focus-visible:ring-2";
+    link.href = item.href;
+    link.textContent = item.label;
+    link.dataset.navHref = item.href; // rehighlight keys off this
+    if (active) link.dataset.active = "true";
+    row.appendChild(link);
+
+    const submenu = document.createElement("ul");
+    submenu.id = submenuId;
+    submenu.dataset.navSubmenu = "";
+    submenu.className = "flex min-w-0 flex-col";
+    submenu.dataset.sidebar = "nav-tree";
+    submenu.dataset.level = String(level + 1);
+    for (const child of item.children!) {
+      submenu.appendChild(renderItem(child, current, level + 1));
+    }
+    if (!open) submenu.hidden = true;
+
+    toggle.addEventListener("click", () => {
+      const isOpen = toggle.getAttribute("aria-expanded") === "true";
+      toggle.setAttribute("aria-expanded", String(!isOpen));
+      submenu.hidden = isOpen;
+    });
+
+    li.appendChild(row);
+    li.appendChild(submenu);
+  } else if (hasChildren) {
+    // Pure grouping label (no href): native <details>/<summary> is fully
+    // accessible here — the summary is the only interactive control, and
+    // its label is a plain <span>. Zero-JS expand/collapse.
     const details = document.createElement("details");
     if (active || hasActiveDescendant(item, current)) details.open = true;
 
@@ -81,16 +153,11 @@ function renderItem(item: NavItem, current: string, level: number): HTMLLIElemen
     summary.className = [
       "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",
       heightClass,
-      active ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground" : "",
     ]
       .filter(Boolean)
       .join(" ");
     summary.style.paddingLeft = padLeft;
-    if (item.href) summary.dataset.navHref = item.href;
-    if (active) summary.dataset.active = "true";
 
-    // Chevron SVG — matches SidebarNavTree's rotation-on-open via CSS
-    // (`details[open] > summary [data-chevron] { transform: rotate(90deg); }`).
     summary.innerHTML =
       '<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>';
 
@@ -102,13 +169,12 @@ function renderItem(item: NavItem, current: string, level: number): HTMLLIElemen
     }
 
     const label = document.createElement("span");
-    label.className = "truncate";
+    label.className = "min-w-0 flex-1 truncate";
     label.textContent = item.label;
     summary.appendChild(label);
 
     details.appendChild(summary);
 
-    // Recurse — nested `<ul>` mirrors SidebarNavTree's `<Astro.self>`.
     const childUl = document.createElement("ul");
     childUl.className = "flex min-w-0 flex-col";
     childUl.dataset.sidebar = "nav-tree";
@@ -156,7 +222,7 @@ function renderItem(item: NavItem, current: string, level: number): HTMLLIElemen
   return li;
 }
 
-function renderTree(items: NavItem[], current: string, root: HTMLElement): void {
+export function renderTree(items: NavItem[], current: string, root: HTMLElement): void {
   const ul = document.createElement("ul");
   ul.className =
     "flex min-w-0 flex-col w-full group-data-[collapsible=icon]:hidden";
@@ -199,7 +265,9 @@ function rehighlight(root: HTMLElement, current: string): void {
       el.classList.remove(...ACTIVE_CLASSES);
     }
   }
-  // Expand ancestors of the new active item.
+  // Expand ancestors of the new active item — both native <details>
+  // groups and the button-driven [data-nav-submenu] disclosures used by
+  // section-landing (href) branches.
   const active = root.querySelector<HTMLElement>('[data-active="true"]');
   if (active) {
     let parent: HTMLElement | null = active.parentElement;
@@ -207,6 +275,13 @@ function rehighlight(root: HTMLElement, current: string): void {
       if (parent.tagName === "DETAILS") {
         (parent as HTMLDetailsElement).open = true;
       }
+      if (parent.matches("[data-nav-submenu]")) {
+        parent.hidden = false;
+        const toggle = root.querySelector<HTMLElement>(
+          `[data-nav-toggle][aria-controls="${parent.id}"]`,
+        );
+        toggle?.setAttribute("aria-expanded", "true");
+      }
       parent = parent.parentElement;
     }
   }