blume 2.0.1 → 2.0.2

package/src/components/islands/hooks.ts

@@ -308,12 +308,17 @@ export const useAssistant = (
           }
         }
         if (live()) {
-          // A 200 with nothing in it (no body, an empty stream) leaves the
-          // reader a blank bubble — that is not an answer.
+          // A 200 with nothing in it (no body, an empty stream) is not an
+          // answer. It is also how a provider failure after the 200 arrives
+          // (a bad key, a rate limit, an unknown model): the route's text
+          // stream carries only text, so the error ends it empty. Show the
+          // error notice instead of leaving a pulsing blank bubble.
           if (assistant.content) {
             outcome("ask_answer", { chars: assistant.content.length });
           } else {
             outcome("ask_error", { status });
+            assistant.content = errorMessage;
+            setMessages([...history, { ...assistant }]);
           }
         }
       } catch {

package/src/components/islands/webmcp.ts

@@ -1,3 +1,5 @@
+import { unescape } from "html-escaper";
+
 import type { SearchFn } from "../layout/search/types.ts";
 import { joinBase, prefixBase } from "./base-path.ts";
 
@@ -80,13 +82,15 @@ const isCallable = <T extends (...args: never[]) => void>(
 const TAG = /<[^>]*>?/gu;
 
 /**
- * Drop the `<mark>` highlighting (and any other markup) search hits carry.
- * The closing `>` is optional so every `<` starts a strip: a dangling
- * `<script` fragment can't survive the way it would if a full `<...>` pair
- * were required. The input is HTML, where a literal `<` is `&lt;`, so
- * consuming from every raw `<` loses nothing legitimate. Stripping repeats
- * to a fixed point so the no-fragment guarantee is explicit rather than an
- * artifact of the regex shape.
+ * Search-hit HTML as the plain text an agent reads: the `<mark>`
+ * highlighting (and any other markup) dropped, then the entities the
+ * highlighter escaped decoded (`&lt;T&gt; &amp;` → `<T> &`). The closing `>`
+ * is optional so every `<` starts a strip: a dangling `<script` fragment
+ * can't survive the way it would if a full `<...>` pair were required. The
+ * input is HTML, where a literal `<` is `&lt;`, so consuming from every raw
+ * `<` loses nothing legitimate. Stripping repeats to a fixed point so the
+ * no-fragment guarantee is explicit rather than an artifact of the regex
+ * shape; decoding comes last, so a decoded `<` is text, never a tag.
  */
 const plain = (html: string): string => {
   let stripped = html;
@@ -95,7 +99,7 @@ const plain = (html: string): string => {
     previous = stripped;
     stripped = stripped.replaceAll(TAG, "");
   } while (stripped !== previous);
-  return stripped;
+  return unescape(stripped);
 };
 
 export interface WebMcpToolOptions {

package/src/components/layout/Banner.astro

@@ -1,4 +1,5 @@
 ---
+import data from "blume:data";
 import { EN_UI } from "../../core/i18n-ui.ts";
 import type { UIStrings } from "../../core/i18n-ui.ts";
 import { withBase } from "../islands/base-path.ts";
@@ -18,13 +19,31 @@ interface Props {
     | null;
   /** Localized banner labels. */
   strings?: UIStrings["banner"];
+  /**
+   * Active locale of the page. The link follows it the way the sidebar's
+   * featured links do (`/guide` -> `/fr/guide` when French serves it).
+   * Absent, the link resolves for the default locale.
+   */
+  locale?: string;
 }
 
-const { banner, strings } = Astro.props;
+const { banner, strings, locale } = Astro.props;
 // Merge over the English baseline per key (rather than `strings ?? …`) so a
 // partial — or missing — strings object still resolves every label to a
 // default, matching the pattern PageFeedback and Search use.
 const b = { ...EN_UI.banner, ...strings };
+// The configured `banner.link.href` is authored as if the site were mounted at
+// root, in the default locale's path space; the locale's navigation carries it
+// localized and mounted under `basePath` (the default navigation on a
+// single-locale site). A banner a custom page passes with a link of its own
+// renders that link as given.
+const navigation =
+  (locale === undefined ? undefined : data.navigationByLocale[locale]) ??
+  data.navigation;
+const linkHref =
+  banner?.link && banner.link.href === data.config.banner?.link?.href
+    ? (navigation.bannerHref ?? banner.link.href)
+    : banner?.link?.href;
 ---
 
 {
@@ -37,13 +56,13 @@ const b = { ...EN_UI.banner, ...strings };
       {/* The message is authored in one language, whatever the page's
           direction: `dir="auto"` keeps its punctuation where it was typed. */}
       <span dir="auto">{banner.content}</span>
-      {banner.link && (
+      {banner.link && linkHref && (
         <a
           class="inline-flex items-center gap-1 font-medium underline underline-offset-2"
-          href={withBase(banner.link.href)}
+          href={withBase(linkHref)}
         >
           {banner.link.text}
-          <Icon name="arrow-right" size={14} />
+          <Icon class="rtl:-scale-x-100" name="arrow-right" size={14} />
         </a>
       )}
       {banner.dismissible && (

package/src/components/layout/Header.astro

@@ -17,6 +17,7 @@ import LanguageSwitcher from "./LanguageSwitcher.astro";
 import Logo from "./Logo.astro";
 import { currentTabForRoute } from "./nav-utils.ts";
 import NavSelector from "./NavSelector.astro";
+import NavTabMenu from "./NavTabMenu.astro";
 import { resolveSlot } from "./overrides.ts";
 import Search from "./Search.astro";
 
@@ -216,15 +217,27 @@ const clickScript = `(()=>{const dr=()=>{const h=document.querySelector("[data-b
   {
     navigation.tabs.length > 0 && (
       <nav aria-label={n.sections} class={tabsNavClass}>
-        {navigation.tabs.map((tab) => (
-          <a
-            aria-current={tab === activeTab ? "page" : undefined}
-            class="rounded-full px-3 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=page]:text-foreground"
-            href={withBase(tab.href ?? tab.path)}
-          >
-            {tab.label}
-          </a>
-        ))}
+        {navigation.tabs.map((tab) =>
+          tab.items && tab.items.length > 0 ? (
+            <NavTabMenu
+              active={tab === activeTab}
+              route={route}
+              tab={tab}
+              variant="bar"
+            />
+          ) : (
+            <a
+              aria-current={tab === activeTab ? "page" : undefined}
+              class="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=page]:text-foreground"
+              href={withBase(tab.href ?? tab.path)}
+            >
+              {tab.icon && (
+                <Icon class="shrink-0" name={tab.icon} size={14} />
+              )}
+              {tab.label}
+            </a>
+          )
+        )}
       </nav>
     )
   }

package/src/components/layout/Logo.astro

@@ -47,9 +47,14 @@ const brandHref =
 // it's omitted. An explicit `""` hides it (an image-only logo whose mark already
 // carries the wordmark).
 const brandText = logo?.text ?? site.title;
+// Without a wordmark the link's only content is the mark, and an inline SVG
+// mark is decorative (`aria-hidden`), so the link would have no accessible
+// name. Name it after the image's `alt`, else the site title.
+const linkLabel = brandText ? undefined : logoAlt || site.title;
 ---
 
 <a
+  aria-label={linkLabel}
   class="inline-flex min-w-0 items-center gap-2 font-semibold text-base text-foreground"
   href={withBase(brandHref)}
 >

package/src/components/layout/NavSelector.astro

@@ -38,6 +38,11 @@ const active =
 // it switches. Longer product names still collapse to the icon there.
 const label = active?.label ?? selector.label;
 const labelClass = label.length <= 6 ? undefined : "max-sm:hidden";
+// The accessible name carries the visible active label too (WCAG 2.5.3,
+// label in name), so a voice-control user can say "v2" to open it — the
+// language switcher's pattern.
+const summaryLabel =
+  label === selector.label ? selector.label : `${selector.label}: ${label}`;
 
 const iconButton =
   "inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-full border border-border bg-background px-3 text-muted-foreground text-sm transition-colors hover:border-foreground hover:text-foreground";
@@ -49,7 +54,7 @@ const menuRowClass =
   selector.items.length > 0 && (
     <details class="group relative" data-blume-dropdown>
       <summary
-        aria-label={selector.label}
+        aria-label={summaryLabel}
         class={`${iconButton} list-none [&::-webkit-details-marker]:hidden`}
       >
         {active?.icon && <Icon name={active.icon} size={16} />}

package/src/components/layout/NavTabMenu.astro

@@ -0,0 +1,133 @@
+---
+// A header tab with dropdown `items` (`navigation.tabs[].items`). In the
+// header's tab bar (`variant="bar"`) it is the nav selectors' floating
+// `<details>` dropdown: the `<summary>` is the disclosure button (the browser
+// exposes its expanded state), the panel a list of links, and the shared
+// light-dismiss closes it on an outside press, Escape (focus returns to the
+// tab), or focus leaving it. In a navigation drawer (`variant="drawer"`) the
+// same items expand in place under the tab, like a sidebar group, open from
+// the start on the tab's own section. Both are server-rendered and the scripts
+// delegate from `document`, so client-router swaps need no re-init.
+import type { NavTab } from "../../core/types.ts";
+import Icon from "../Icon.astro";
+import { withBase } from "../islands/base-path.ts";
+
+interface Props {
+  tab: NavTab;
+  /** The page's route, to mark the item it is on. */
+  route: string;
+  /** Whether the current route falls under this tab. */
+  active: boolean;
+  variant: "bar" | "drawer";
+}
+
+const { tab, route, active, variant } = Astro.props;
+const items = tab.items ?? [];
+// The tab itself is a button, not a page, so its "you are here" state is
+// `aria-current="true"` (current item of a set); an item is the page.
+const tabCurrent = active ? "true" : undefined;
+const itemCurrent = (path: string): "page" | undefined =>
+  path === route ? "page" : undefined;
+
+const barRowClass =
+  "flex w-full items-start gap-2.5 rounded-md px-2 py-1.5 text-start text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=page]:text-foreground";
+const drawerRowClass =
+  "flex items-center gap-2 rounded-[0.65rem] px-2.5 py-1.5 text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=page]:bg-muted aria-[current=page]:text-foreground";
+---
+
+{
+  variant === "bar" ? (
+    <details class="group relative" data-blume-dropdown>
+      <summary
+        aria-current={tabCurrent}
+        class="inline-flex cursor-pointer list-none items-center gap-1 rounded-full px-3 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=true]:text-foreground [&::-webkit-details-marker]:hidden"
+      >
+        {tab.icon && (
+          <Icon class="me-0.5 shrink-0" name={tab.icon} size={14} />
+        )}
+        {tab.label}
+        <Icon
+          class="transition-transform group-open:rotate-180"
+          name="chevron-down"
+          size={14}
+        />
+      </summary>
+      <div
+        class="absolute start-0 z-50 mt-2 min-w-56 max-w-[calc(100vw-1rem)] rounded-blume border border-border bg-background p-1 shadow-xl"
+        data-blume-dropdown-panel
+      >
+        {items.map((item) => (
+          <a
+            aria-current={itemCurrent(item.path)}
+            class={barRowClass}
+            href={withBase(item.path)}
+          >
+            {item.icon && <Icon class="mt-0.5" name={item.icon} size={16} />}
+            <span class="flex-1">
+              <span class="flex items-center gap-2">
+                {item.label}
+                {item.tag && (
+                  <span class="rounded-full bg-muted px-1.5 py-0.5 text-[0.65rem] text-muted-foreground">
+                    {item.tag}
+                  </span>
+                )}
+              </span>
+              {item.description && (
+                <span class="mt-0.5 block text-muted-foreground text-xs">
+                  {item.description}
+                </span>
+              )}
+            </span>
+          </a>
+        ))}
+      </div>
+    </details>
+  ) : (
+    <details class="group" open={active}>
+      <summary
+        aria-current={tabCurrent}
+        class="flex cursor-pointer list-none items-center gap-2 rounded-[0.65rem] px-2.5 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=true]:text-foreground [&::-webkit-details-marker]:hidden"
+      >
+        {tab.icon && <Icon class="shrink-0" name={tab.icon} size={14} />}
+        <span class="flex-1 truncate">{tab.label}</span>
+        <Icon
+          class="shrink-0 transition-transform group-open:rotate-180"
+          name="chevron-down"
+          size={14}
+        />
+      </summary>
+      <ul class="m-0 ms-2.5 list-none space-y-px border-border border-s p-0 ps-2">
+        {items.map((item) => (
+          <li>
+            <a
+              aria-current={itemCurrent(item.path)}
+              class={drawerRowClass}
+              href={withBase(item.path)}
+            >
+              {item.icon && (
+                <Icon class="shrink-0" name={item.icon} size={14} />
+              )}
+              <span class="flex-1 truncate">{item.label}</span>
+              {item.tag && (
+                <span class="shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[0.65rem] text-muted-foreground">
+                  {item.tag}
+                </span>
+              )}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </details>
+  )
+}
+
+<script>
+  import { installDropdownDismiss } from "../dropdown-dismiss.ts";
+  import { installDropdownClamp } from "./dropdown-clamp.ts";
+
+  // Outside-click / Escape / focus-out dismissal and viewport clamping for
+  // the header dropdown, shared with the nav selectors. The drawer variant
+  // opts into neither: it is an in-place disclosure, not a floating panel.
+  installDropdownDismiss();
+  installDropdownClamp();
+</script>

package/src/components/layout/NavTree.astro

@@ -79,6 +79,9 @@ const fragmentFor = (node: NavNode, id: string): string | undefined =>
 // blank — the PageActions pattern.
 const n = { ...EN_UI.nav, ...strings };
 
+/** The DOM id of a drill-in panel, which its drill button controls. */
+const navPanelId = (id: string): string => `blume-nav-panel-${id}`;
+
 const badgeBase =
   "shrink-0 rounded-full px-1.5 py-0.5 font-medium text-[0.65rem] leading-none";
 // HTTP-method, AsyncAPI-action, and GraphQL operation-kind badges (from a
@@ -165,6 +168,7 @@ const initialId =
             data-nav-panel={panel.id}
             data-nav-src={src}
             hidden={panel.id !== initialId}
+            id={navPanelId(panel.id)}
           >
             {/* The title is the only sidebar link to the section's own page, so
                 a routed panel keeps it as a link; without a route the whole row
@@ -174,7 +178,7 @@ const initialId =
               <div class="mb-3 flex items-center gap-0.5">
                 <button
                   aria-label={n.back}
-                  class="-ml-1 flex shrink-0 items-center justify-center self-stretch rounded-[0.65rem] px-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                  class="-ms-1 flex shrink-0 items-center justify-center self-stretch rounded-[0.65rem] px-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                   data-nav-back={panel.parentId}
                   type="button"
                 >
@@ -195,7 +199,7 @@ const initialId =
             ) : (
               <button
                 aria-label={`${n.back}: ${panel.label}`}
-                class="-ml-1 mb-3 flex w-full items-center gap-1.5 rounded-[0.65rem] p-1 text-left font-semibold text-foreground text-sm transition-colors hover:bg-muted"
+                class="-ms-1 mb-3 flex w-full items-center gap-1.5 rounded-[0.65rem] p-1 text-start font-semibold text-foreground text-sm transition-colors hover:bg-muted"
                 data-nav-back={panel.parentId}
                 type="button"
               >
@@ -293,11 +297,16 @@ const initialId =
         const spacing =
           index === 0 ? "mt-0" : display === "flat" ? "mt-6" : "mt-0.5";
 
-        // `page`: a single row that drills into this group's panel.
+        // `page`: a single row that drills into this group's panel. It
+        // controls that panel; NavTreeScript keeps `aria-expanded` in step
+        // with the panel shown (static markup, since cached subtrees and
+        // fragments can't carry per-page state).
         if (display === "page") {
           return (
             <li class={spacing}>
               <button
+                aria-controls={navPanelId(id)}
+                aria-expanded="false"
                 class="blume-nav-drill"
                 data-nav-to={id}
                 type="button"
@@ -377,7 +386,7 @@ const initialId =
                   </span>
                 </summary>
                 <div
-                  class="space-y-0.5 border-border border-l pl-3"
+                  class="space-y-0.5 border-border border-s ps-3"
                   data-nav-src={open ? undefined : fragmentFor(item, id)}
                 >
                   {/* A closed group's children are deferred (fetched into this
@@ -434,7 +443,7 @@ const initialId =
                   )}
                   <span class="truncate">{item.label}</span>
                   {item.badge && (
-                    <span class={`ml-auto ${badgeClassFor(item.badge)}`}>{item.badge}</span>
+                    <span class={`ms-auto ${badgeClassFor(item.badge)}`}>{item.badge}</span>
                   )}
                 </a>
               ) : (
@@ -448,7 +457,7 @@ const initialId =
                   )}
                   <span class="truncate">{item.label}</span>
                   {item.badge && (
-                    <span class={`ml-auto ${badgeClassFor(item.badge)}`}>{item.badge}</span>
+                    <span class={`ms-auto ${badgeClassFor(item.badge)}`}>{item.badge}</span>
                   )}
                 </>
               )}

package/src/components/layout/NavTreeCache.astro

@@ -4,7 +4,10 @@
 // once per group instead of once per page. Off in dev, where component edits
 // must show on the next request. The cached HTML references the page's icon
 // sprite (see icon-sprite.ts), so the symbols it used ride along and are
-// registered into whichever page reuses it.
+// registered into whichever page reuses it. A render with no sprite (the
+// `/blume-nav/` fragment route) inlines its icons instead, so it is cached
+// apart: sprite references reused there would point at symbols the page that
+// fetches the fragment may never have rendered.
 import type { NavNode } from "../../core/types.ts";
 import { iconSpriteFor, referencedIconSymbols } from "../icon-sprite.ts";
 import type { IconSymbol } from "../icon-sprite.ts";
@@ -19,7 +22,7 @@ const { node, variant } = Astro.props;
 const sprite = iconSpriteFor(Astro.locals);
 const { html, icons } = await cachedNavSubtree(
   node,
-  variant,
+  `${variant}|${sprite ? "sprite" : "inline"}`,
   async () => {
     const rendered = await Astro.slots.render("default");
     const used: [string, IconSymbol][] = [];

package/src/components/layout/NavTreeScript.astro

@@ -40,7 +40,12 @@
     return pending;
   };
 
-  /** Fill a deferred element from its fragment; a no-op once filled. */
+  /**
+   * Fill a deferred element from its fragment; a no-op once filled. The rows
+   * are appended, not swapped in: a drill-in panel keeps its own back row
+   * (the Back button and the section's title) above the deferred rows, and a
+   * collapsed group's slot is empty anyway.
+   */
   const fillDeferred = async (slot: HTMLElement): Promise<void> => {
     const src = slot.dataset.navSrc;
     if (!src) {
@@ -48,8 +53,12 @@
     }
     slot.setAttribute("aria-busy", "true");
     try {
-      slot.innerHTML = await loadFragment(src);
-      delete slot.dataset.navSrc;
+      const html = await loadFragment(src);
+      // Two opens racing on the same fetch fill it once.
+      if (slot.dataset.navSrc) {
+        slot.insertAdjacentHTML("beforeend", html);
+        delete slot.dataset.navSrc;
+      }
     } finally {
       slot.removeAttribute("aria-busy");
     }
@@ -179,21 +188,52 @@
       if (prev === next) {
         return;
       }
+      // The pressed drill or back button sits in the panel about to hide, so
+      // its focus has to move into the panel replacing it — left behind, the
+      // next Tab would leave the sidebar.
+      const hadFocus = prev?.contains(document.activeElement) ?? false;
       // Settle any in-flight slide before starting the next one.
       if (this.finishSlide) {
         this.finishSlide();
       }
       this.active = next;
       this.dataset.active = next.dataset.navPanel;
+      this.syncExpanded(next);
 
       if (!(animate && prev) || this.reduced()) {
         for (const panel of this.querySelectorAll<HTMLElement>("[data-nav-panel]")) {
           panel.hidden = panel !== next;
         }
-        return;
+      } else {
+        this.slide(prev, next, this.depth(next) > this.depth(prev));
       }
+      if (hadFocus && prev) {
+        this.focusInto(next, prev);
+      }
+    }
+
+    /** Each drill button is expanded exactly while the panel it opens shows. */
+    syncExpanded(shown: HTMLElement): void {
+      for (const drill of this.querySelectorAll("[data-nav-to]")) {
+        drill.setAttribute(
+          "aria-expanded",
+          String(drill.getAttribute("data-nav-to") === shown.dataset.navPanel)
+        );
+      }
+    }
 
-      this.slide(prev, next, this.depth(next) > this.depth(prev));
+    /**
+     * Focus `next` after leaving `prev`: going back, the drill button that
+     * opened `prev`; drilling in, the new panel's back button (its first
+     * control). `preventScroll` keeps the focus from scrolling the clipped
+     * container mid-slide.
+     */
+    focusInto(next: HTMLElement, prev: HTMLElement): void {
+      const target =
+        next.querySelector<HTMLElement>(
+          `[data-nav-to="${prev.dataset.navPanel}"]`
+        ) ?? next.querySelector<HTMLElement>("button, a[href]");
+      target?.focus({ preventScroll: true });
     }
 
     slide(out: HTMLElement, into: HTMLElement, forward: boolean): void {

package/src/components/layout/PageLayout.astro

@@ -38,6 +38,7 @@ import {
 } from "../../og/dimensions.ts";
 import { buildStructuredData } from "../../seo/jsonld.ts";
 import { normalizeXHandle } from "../../seo/x-handle.ts";
+import Icon from "../Icon.astro";
 import { stripBase, withBase } from "../islands/base-path.ts";
 import { pageDirection, pageLocale } from "./page-locale.ts";
 import { searchLocaleFor } from "./search-locale.ts";
@@ -55,6 +56,7 @@ import {
 } from "./head-scripts.ts";
 import Header from "./Header.astro";
 import { currentTabForRoute } from "./nav-utils.ts";
+import NavTabMenu from "./NavTabMenu.astro";
 import WebMcp from "./WebMcp.astro";
 
 interface Props {
@@ -387,7 +389,7 @@ createIconSprite(Astro.locals);
     >
     {/* Every new-tab link's aria-describedby target (see core/new-tab.ts). */}
     <span hidden id={NEW_TAB_HINT_ID}>{navStrings.opensInNewTab}</span>
-    <Banner banner={banner} strings={strings.banner} />
+    <Banner banner={banner} locale={locale} strings={strings.banner} />
     <Header
       assistantEnabled={assistantEnabled}
       assistantStrings={strings.assistant}
@@ -426,13 +428,25 @@ createIconSprite(Astro.locals);
               <ul class="m-0 list-none p-0">
                 {navigation.tabs.map((tab) => (
                   <li>
-                    <a
-                      aria-current={tab === activeTab ? "page" : undefined}
-                      class="block rounded-[0.65rem] px-2.5 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=page]:bg-muted aria-[current=page]:text-foreground"
-                      href={withBase(tab.href ?? tab.path)}
-                    >
-                      {tab.label}
-                    </a>
+                    {tab.items && tab.items.length > 0 ? (
+                      <NavTabMenu
+                        active={tab === activeTab}
+                        route={route}
+                        tab={tab}
+                        variant="drawer"
+                      />
+                    ) : (
+                      <a
+                        aria-current={tab === activeTab ? "page" : undefined}
+                        class="flex items-center gap-2 rounded-[0.65rem] px-2.5 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=page]:bg-muted aria-[current=page]:text-foreground"
+                        href={withBase(tab.href ?? tab.path)}
+                      >
+                        {tab.icon && (
+                          <Icon class="shrink-0" name={tab.icon} size={14} />
+                        )}
+                        <span class="flex-1 truncate">{tab.label}</span>
+                      </a>
+                    )}
                   </li>
                 ))}
               </ul>

package/src/components/layout/ReferenceLayout.astro

@@ -146,18 +146,21 @@ createIconSprite(Astro.locals);
     >
     {/* Every new-tab link's aria-describedby target (see core/new-tab.ts). */}
     <span hidden id={NEW_TAB_HINT_ID}>{navStrings.opensInNewTab}</span>
-    <Banner banner={banner} strings={strings.banner} />
+    <Banner banner={banner} locale={locale} strings={strings.banner} />
     <Header
       assistantStrings={strings.assistant}
       hasDrawer={false}
       hasSidebar={false}
       locale={locale}
       logo={logo}
+      navStrings={navStrings}
       navigation={navigation}
       route={route}
       searchEnabled={searchEnabled}
       searchLocale={searchLocale}
+      searchStrings={strings.search}
       site={site}
+      switcherStrings={strings.languageSwitcher}
     />
     <div
       class="h-[calc(100dvh-4rem)] overflow-auto border-border border-t [&>[data-scalar-client]]:h-full"

package/src/components/layout/RootLayout.astro

@@ -66,6 +66,7 @@ import {
   navGroupIds,
   sidebarForRoute,
 } from "./nav-utils.ts";
+import NavTabMenu from "./NavTabMenu.astro";
 import NavTree from "./NavTree.astro";
 import { resolveSlot } from "./overrides.ts";
 import { pageDirection, pageLocale } from "./page-locale.ts";
@@ -579,7 +580,7 @@ createIconSprite(Astro.locals);
     >
     {/* Every new-tab link's aria-describedby target (see core/new-tab.ts). */}
     <span hidden id={NEW_TAB_HINT_ID}>{navStrings.opensInNewTab}</span>
-    <Banner banner={banner} strings={strings.banner} />
+    <Banner banner={banner} locale={locale} strings={strings.banner} />
     <VersionBanner notice={versionNotice ?? null} />
     <HeaderSlot
       assistantEnabled={assistantEnabled}
@@ -677,13 +678,25 @@ createIconSprite(Astro.locals);
               <ul class="m-0 list-none p-0">
                 {navigation.tabs.map((tab) => (
                   <li>
-                    <a
-                      aria-current={tab === activeTab ? "page" : undefined}
-                      class="block rounded-[0.65rem] px-2.5 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=page]:bg-muted aria-[current=page]:text-foreground"
-                      href={withBase(tab.href ?? tab.path)}
-                    >
-                      {tab.label}
-                    </a>
+                    {tab.items && tab.items.length > 0 ? (
+                      <NavTabMenu
+                        active={tab === activeTab}
+                        route={page.route}
+                        tab={tab}
+                        variant="drawer"
+                      />
+                    ) : (
+                      <a
+                        aria-current={tab === activeTab ? "page" : undefined}
+                        class="flex items-center gap-2 rounded-[0.65rem] px-2.5 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=page]:bg-muted aria-[current=page]:text-foreground"
+                        href={withBase(tab.href ?? tab.path)}
+                      >
+                        {tab.icon && (
+                          <Icon class="shrink-0" name={tab.icon} size={14} />
+                        )}
+                        <span class="flex-1 truncate">{tab.label}</span>
+                      </a>
+                    )}
                   </li>
                 ))}
               </ul>