@contentrain/astro-kit 0.32.0 → 0.33.1

package/components/header/fixtures.json

@@ -122,5 +122,94 @@
       ]
     }
   },
-  { "name": "tagline", "props": { "siteName": "Golden Agency", "tagline": "Websites that sell what you make", "items": [{ "label": "Home", "href": "/" }, { "label": "Services", "href": "/services/" }, { "label": "Contact", "href": "/contact/" }], "menuLabel": "Menu", "closeLabel": "Close" } }
+  { "name": "tagline", "props": { "siteName": "Golden Agency", "tagline": "Websites that sell what you make", "items": [{ "label": "Home", "href": "/" }, { "label": "Services", "href": "/services/" }, { "label": "Contact", "href": "/contact/" }], "menuLabel": "Menu", "closeLabel": "Close" } },
+  {
+    "name": "mega-menu",
+    "props": {
+      "siteName": "Northwind",
+      "menu": "mega",
+      "items": [
+        {
+          "label": "Hakkımızda",
+          "href": "/hakkimizda/"
+        },
+        {
+          "label": "Ürünlerimiz",
+          "href": "#",
+          "children": [
+            {
+              "label": "Aracım İçin",
+              "href": "#",
+              "children": [
+                {
+                  "label": "Trafik Sigortası",
+                  "href": "/urunlerimiz/trafik-sigortasi/"
+                },
+                {
+                  "label": "Kasko",
+                  "href": "/urunlerimiz/kasko/"
+                }
+              ]
+            },
+            {
+              "label": "Evim İçin",
+              "href": "#",
+              "children": [
+                {
+                  "label": "Dask",
+                  "href": "/urunlerimiz/dask/"
+                },
+                {
+                  "label": "Konut Sigortası",
+                  "href": "/urunlerimiz/konut-sigortasi/"
+                }
+              ]
+            },
+            {
+              "label": "Sağlığım İçin",
+              "href": "#",
+              "children": [
+                {
+                  "label": "Sağlık Sigortası",
+                  "href": "/urunlerimiz/saglik-sigortasi/"
+                },
+                {
+                  "label": "Tamamlayıcı Sağlık",
+                  "href": "/urunlerimiz/tamamlayici-saglik/"
+                }
+              ]
+            },
+            {
+              "label": "Diğer",
+              "href": "#",
+              "children": [
+                {
+                  "label": "İş Yeri Sigortası",
+                  "href": "/urunlerimiz/is-yeri-sigortasi/"
+                },
+                {
+                  "label": "Seyahat Sigortası",
+                  "href": "/urunlerimiz/seyahat-sigortasi/"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "label": "Anlaşmalı Sigorta Şirketleri",
+          "href": "/anlasmali-sigorta-sirketleri/"
+        },
+        {
+          "label": "İletişim",
+          "href": "/iletisim/"
+        }
+      ],
+      "action": {
+        "label": "Get a quote",
+        "href": "/contact/"
+      }
+    }
+  },
+  { "name": "search", "props": { "siteName": "Northwind Journal", "items": [{ "label": "Journal", "href": "/" }, { "label": "About", "href": "/about/" }], "search": { "label": "Search", "placeholder": "Search this site", "submitLabel": "Search" } } },
+  {"name": "mega-menu-search", "props": {"siteName": "Northwind", "menu": "mega", "items": [{"label": "Hakkımızda", "href": "/hakkimizda/"}, {"label": "Ürünlerimiz", "href": "#", "children": [{"label": "Aracım İçin", "href": "#", "children": [{"label": "Trafik Sigortası", "href": "/urunlerimiz/trafik-sigortasi/"}, {"label": "Kasko", "href": "/urunlerimiz/kasko/"}]}, {"label": "Evim İçin", "href": "#", "children": [{"label": "Dask", "href": "/urunlerimiz/dask/"}, {"label": "Konut Sigortası", "href": "/urunlerimiz/konut-sigortasi/"}]}, {"label": "Sağlığım İçin", "href": "#", "children": [{"label": "Sağlık Sigortası", "href": "/urunlerimiz/saglik-sigortasi/"}, {"label": "Tamamlayıcı Sağlık", "href": "/urunlerimiz/tamamlayici-saglik/"}]}, {"label": "Diğer", "href": "#", "children": [{"label": "İş Yeri Sigortası", "href": "/urunlerimiz/is-yeri-sigortasi/"}, {"label": "Seyahat Sigortası", "href": "/urunlerimiz/seyahat-sigortasi/"}]}]}, {"label": "Anlaşmalı Sigorta Şirketleri", "href": "/anlasmali-sigorta-sirketleri/"}, {"label": "İletişim", "href": "/iletisim/"}], "action": {"label": "Get a quote", "href": "/contact/"}, "search": {"label": "Search", "placeholder": "Ara", "submitLabel": "Ara"}}}
 ]

package/components/header/meta.json

@@ -3,12 +3,13 @@
   "name": "Header",
   "description": "Site header: brand (logo and/or name), navigation and an optional call-to-action button.",
   "category": "chrome",
-  "uses": ["nav"],
-  "shared": ["Button.astro", "KitImage.astro", "types.ts"],
+  "uses": ["nav", "search-box"],
+  "shared": ["Button.astro", "KitImage.astro", "safe-url.ts", "types.ts"],
   "variants": {
     "layout": { "options": ["split", "centered", "brand-left"], "default": "split", "description": "split: brand left, navigation right. centered: brand above centred navigation. brand-left: navigation right after the brand." },
     "tone": { "options": ["default", "inverse", "transparent"], "default": "default", "description": "Surface with a bottom border, dark (ink) background, or transparent over the hero that follows." },
-    "position": { "options": ["static", "sticky"], "default": "static", "description": "Sticky keeps the header at the top while scrolling." }
+    "position": { "options": ["static", "sticky"], "default": "static", "description": "Sticky keeps the header at the top while scrolling." },
+    "menu": { "options": ["flyout", "mega"], "default": "flyout", "description": "How submenus open on wide screens: a list under the item (flyout) or a wide panel of columns (mega). Submenus nest to any depth." }
   },
   "props": {
     "siteName": { "type": "string", "required": true, "description": "Site title (site.title)." },
@@ -26,6 +27,7 @@
     "homeHref": { "type": "url", "default": "/", "description": "Where the brand links." },
     "items": { "type": "array", "required": true, "items": { "type": "object", "fields": { "label": { "type": "string", "required": true }, "href": { "type": "url", "required": true }, "newTab": { "type": "boolean" }, "children": { "type": "array" } } }, "description": "Primary menu (menus → menu-items)." },
     "action": { "type": "object", "fields": { "label": { "type": "string", "required": true }, "href": { "type": "url", "required": true }, "style": { "type": "select", "options": ["primary", "secondary", "ghost"] } }, "description": "Header button, shown on wide screens." },
+    "search": { "type": "object", "fields": { "label": { "type": "string" }, "placeholder": { "type": "string" }, "submitLabel": { "type": "string" }, "action": { "type": "url" } }, "description": "A search field in the bar: a GET form to the site's search page (default /search); below the bar on a phone." },
     "navLabel": { "type": "string", "description": "Accessible name of the navigation (ui-strings nav.label)." },
     "menuLabel": { "type": "string", "description": "Narrow-screen toggle text (ui-strings nav.menu)." },
     "closeLabel": { "type": "string", "description": "Drawer close text (ui-strings nav.close)." }

package/components/hero/meta.json

@@ -9,6 +9,7 @@
     "KitImage.astro",
     "Section.astro",
     "measured.ts",
+    "safe-url.ts",
     "types.ts"
   ],
   "variants": {

package/components/language-switcher/LanguageSwitcher.astro

@@ -0,0 +1,68 @@
+---
+// Links to the same page in the site's other languages. Each link carries `hreflang` and its own `lang`, so the
+// language's name is read in that language; the current one is marked `aria-current`. A plain list, or a native
+// `<details>` menu that shows the current language: no JavaScript. The addresses come from the caller (the page's
+// equivalent in each language); a link without one is not drawn.
+import { tv } from 'tailwind-variants'
+import { safeHref } from '../_shared/safe-url'
+
+const switcher = tv({
+  slots: {
+    list: 'flex flex-wrap items-center gap-x-4 gap-y-1',
+    link: 'text-current no-underline opacity-80 hover:opacity-100 hover:underline aria-[current=true]:font-semibold aria-[current=true]:opacity-100',
+    summary: 'inline-flex cursor-pointer list-none items-center gap-2 rounded-md px-3 py-2 text-sm font-medium hover:bg-current/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent [&::-webkit-details-marker]:hidden',
+    panel: 'absolute z-30 mt-1 flex min-w-40 flex-col gap-1 rounded-lg border border-line bg-surface p-2 text-ink shadow-lg',
+  },
+  variants: {
+    layout: { list: {}, menu: {} },
+    align: { start: { panel: 'start-0' }, end: { panel: 'end-0' } },
+    // `name`: "Deutsch"; `code`: "DE".
+    labelStyle: { name: {}, code: { link: 'uppercase' } },
+  },
+  defaultVariants: { layout: 'list', align: 'start', labelStyle: 'name' },
+})
+
+interface Props {
+  /** The languages (none: nothing is drawn), `lang` a BCP 47 code ("de", "pt-BR"); `label` the language's own name ("Deutsch"). */
+  languages?: Array<{ lang: string, label: string, href: string, current?: boolean | undefined }> | undefined
+  /** Accessible name ("Language"). */
+  label?: string | undefined
+  layout?: 'list' | 'menu' | undefined
+  align?: 'start' | 'end' | undefined
+  labelStyle?: 'name' | 'code' | undefined
+}
+
+const { languages = [], label = 'Language', layout, align, labelStyle } = Astro.props
+const s = switcher({ layout, align, labelStyle })
+const shown = languages.filter(language => language.href)
+const current = shown.find(language => language.current)
+const text = (language: { lang: string, label: string }) => (labelStyle === 'code' ? language.lang.split('-')[0]! : language.label)
+---
+{shown.length > 1 && (layout === 'menu'
+  ? (
+    <details class="relative" data-cr-part="language-switcher">
+      <summary class={s.summary()}>
+        <span class="sr-only">{label}: </span>
+        <span lang={current?.lang}>{current ? text(current) : label}</span>
+        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6" /></svg>
+      </summary>
+      <ul class={s.panel()}>
+      {shown.map(language => (
+        <li>
+          <a href={safeHref(language.href)} lang={language.lang} hreflang={language.lang} aria-current={language.current ? 'true' : undefined} class={s.link()}>{text(language)}</a>
+        </li>
+      ))}
+      </ul>
+    </details>
+  )
+  : (
+    <nav aria-label={label} data-cr-part="language-switcher">
+      <ul class={s.list()}>
+      {shown.map(language => (
+        <li>
+          <a href={safeHref(language.href)} lang={language.lang} hreflang={language.lang} aria-current={language.current ? 'true' : undefined} class={s.link()}>{text(language)}</a>
+        </li>
+      ))}
+      </ul>
+    </nav>
+  ))}

package/components/language-switcher/fixtures.json

@@ -0,0 +1,51 @@
+[
+  {
+    "name": "list",
+    "props": {
+      "languages": [
+        {
+          "lang": "en",
+          "label": "English",
+          "href": "/about/",
+          "current": true
+        },
+        {
+          "lang": "de",
+          "label": "Deutsch",
+          "href": "/de/ueber-uns/"
+        },
+        {
+          "lang": "tr",
+          "label": "Türkçe",
+          "href": "/tr/hakkimizda/"
+        }
+      ]
+    }
+  },
+  {
+    "name": "menu-end-code",
+    "props": {
+      "layout": "menu",
+      "align": "end",
+      "labelStyle": "code",
+      "languages": [
+        {
+          "lang": "en",
+          "label": "English",
+          "href": "/",
+          "current": true
+        },
+        {
+          "lang": "pt-BR",
+          "label": "Português",
+          "href": "/pt/"
+        },
+        {
+          "lang": "ar",
+          "label": "العربية",
+          "href": "/ar/"
+        }
+      ]
+    }
+  }
+]

package/components/language-switcher/meta.json

@@ -0,0 +1,73 @@
+{
+  "id": "language-switcher",
+  "name": "LanguageSwitcher",
+  "description": "Links to the same page in the site's other languages, each with hreflang and its own lang; the current one is marked aria-current. A plain list or a native <details> menu; no JavaScript. The addresses are the page's equivalents in each language, supplied by the caller.",
+  "category": "chrome",
+  "uses": [],
+  "shared": ["safe-url.ts"],
+  "variants": {
+    "layout": {
+      "options": [
+        "list",
+        "menu"
+      ],
+      "default": "list",
+      "description": "A row of links, or a menu that shows the current language and opens on click."
+    },
+    "align": {
+      "options": [
+        "start",
+        "end"
+      ],
+      "default": "start",
+      "description": "Which edge the menu panel lines up with."
+    },
+    "labelStyle": {
+      "options": [
+        "name",
+        "code"
+      ],
+      "default": "name",
+      "description": "The language's own name (\"Deutsch\") or its code (\"DE\")."
+    }
+  },
+  "props": {
+    "languages": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "fields": {
+          "lang": {
+            "type": "string",
+            "required": true
+          },
+          "label": {
+            "type": "string",
+            "required": true
+          },
+          "href": {
+            "type": "url",
+            "required": true
+          },
+          "current": {
+            "type": "boolean"
+          }
+        }
+      },
+      "description": "The languages: BCP 47 code, the language's own name, the page's address in it, and whether it is the page being read."
+    },
+    "label": {
+      "type": "string",
+      "description": "Accessible name (ui-strings language.label)."
+    }
+  },
+  "slots": {},
+  "js": "none",
+  "dependencies": {},
+  "sources": {
+    "gutenberg": [
+      "polylang/language-switcher"
+    ]
+  },
+  "a11y": "List layout: a labelled <nav>; menu layout: a native <details> whose summary carries the label for assistive technology and the current language visibly. Every link has lang and hreflang, so screen readers pronounce each name in its language; the current one is aria-current=true. Fewer than two languages draw nothing."
+}

package/components/logo-cloud/LogoCloud.astro

@@ -8,6 +8,7 @@ import Section, { type Tone } from '../_shared/Section.astro'
 import { imageOf, type ImageSource } from '../_shared/image'
 import { measuredGrid } from '../_shared/measured'
 import type { MeasuredStyle } from '../_shared/types'
+import { safeHref } from '../_shared/safe-url'
 
 const cloud = tv({
   slots: {
@@ -101,7 +102,7 @@ const duration = `${Math.max(20, shown.length * 4)}s`
       {shown.map(({ image, href }) => (
         <li class={s.item()}>
           {href
-            ? <a href={href} class="group rounded-sm focus-visible:outline-2 focus-visible:outline-offset-4"><KitImage image={image} sizes="160px" class={s.logo()} /></a>
+            ? <a href={safeHref(href)} class="group rounded-sm focus-visible:outline-2 focus-visible:outline-offset-4"><KitImage image={image} sizes="160px" class={s.logo()} /></a>
             : <span class="group"><KitImage image={image} sizes="160px" class={s.logo()} /></span>}
         </li>
       ))}

package/components/logo-cloud/meta.json

@@ -9,6 +9,7 @@
     "Section.astro",
     "image.ts",
     "measured.ts",
+    "safe-url.ts",
     "types.ts"
   ],
   "variants": {

package/components/nav/Nav.astro

@@ -1,21 +1,27 @@
 ---
 // Site navigation. Wide screens get an inline list whose submenus open on
 // hover and keyboard focus (a chevron button marks the ones that have one); narrow screens get a toggle that opens the menu as
-// a native popover (drawer) or a <details> dropdown. No JavaScript.
+// a native popover (drawer) or a <details> dropdown. Submenus nest to any depth; `menu="mega"` draws them as a wide panel of
+// columns. Everything works without JavaScript; a small script (only when a menu has submenus) is the disclosure pattern's
+// last step: it keeps aria-expanded true to what is open and lets Escape close a panel and return to its button.
 import { tv } from 'tailwind-variants'
+import NavTree from './NavTree.astro'
 import type { NavItem } from '../_shared/types'
+import { safeHref } from '../_shared/safe-url'
 
 const nav = tv({
   slots: {
     list: 'hidden items-center md:flex',
     link: 'no-underline aria-[current=page]:font-semibold',
     // hidden, not invisible: a closed submenu takes no space, so one under the last item cannot widen the page.
-    sub: 'absolute top-full z-30 hidden min-w-48 rounded-lg border border-line bg-surface p-2 text-ink shadow-lg group-hover:block group-focus-within:block',
+    sub: 'absolute top-full z-30 hidden min-w-48 rounded-lg border border-line bg-surface p-2 text-ink shadow-lg group-hover:block group-focus-within:block group-data-[closed]:hidden!',
     toggle: 'inline-flex cursor-pointer list-none items-center gap-2 rounded-md px-3 py-2 text-sm font-medium hover:bg-current/10 md:hidden [&::-webkit-details-marker]:hidden',
   },
   variants: {
     // Submenus open towards the page: leftwards under an end-aligned menu.
     align: { start: { list: 'justify-start', sub: 'start-0' }, end: { list: 'justify-end', sub: 'end-0' }, center: { list: 'justify-center', sub: 'start-0' } },
+    // flyout: a list under the item. mega: a wide panel, one column per child with the grandchildren listed under it.
+    menu: { flyout: {}, mega: { sub: 'w-max max-w-[min(64rem,90vw)] p-5' } },
     density: { compact: { list: 'gap-5 text-sm' }, comfortable: { list: 'gap-8 text-base' } },
     // current: the surrounding text, dimmed until hovered. link: the site's link colour at full strength, as themes that
     // colour every link draw their menu; the toggle keeps the surrounding text.
@@ -24,7 +30,7 @@ const nav = tv({
       link: { link: 'text-[color:var(--color-link,var(--color-accent))]' },
     },
   },
-  defaultVariants: { align: 'end', density: 'compact', color: 'current' },
+  defaultVariants: { menu: 'flyout', align: 'end', density: 'compact', color: 'current' },
 })
 
 interface Props {
@@ -36,6 +42,7 @@ interface Props {
   /** Text on the drawer's close button ("Close"). */
   closeLabel?: string | undefined
   mobile?: 'popover' | 'details' | undefined
+  menu?: 'flyout' | 'mega' | undefined
   align?: 'start' | 'end' | 'center' | undefined
   density?: 'compact' | 'comfortable' | undefined
   color?: 'current' | 'link' | undefined
@@ -45,28 +52,40 @@ interface Props {
   part?: string | undefined
 }
 
-const { items, label = 'Main', menuLabel = 'Menu', closeLabel = 'Close', mobile = 'popover', align, density, color, id = 'site-nav', part } = Astro.props
-const { list, link, sub, toggle } = nav({ align, density, color })
+const { items, label = 'Main', menuLabel = 'Menu', closeLabel = 'Close', mobile = 'popover', menu, align, density, color, id = 'site-nav', part } = Astro.props
+const { list, link, sub, toggle } = nav({ menu, align, density, color })
 const current = Astro.url.pathname
 const drawer = `${id}-drawer`
+const hasSub = items.some(item => (item.children?.length ?? 0) > 0)
+// An empty href or "#" is a group label (a WordPress custom link), not a link.
+const real = (href: string | undefined) => !!href && href !== '#'
 ---
 {items.length > 0 && (
   <nav aria-label={label} data-cr-part={part} class="relative">
     <ul class={list()}>
-      {items.map(item => (
+      {items.map((item, index) => (
         <li class="group relative">
-          <a href={item.href} aria-current={item.href === current ? 'page' : undefined} target={item.newTab ? '_blank' : undefined} rel={item.newTab ? 'noopener' : undefined} class={link()}>{item.label}</a>
+          {real(item.href)
+            ? <a href={safeHref(item.href)} aria-current={item.href === current ? 'page' : undefined} target={item.newTab ? '_blank' : undefined} rel={item.newTab ? 'noopener' : undefined} class={link()}>{item.label}</a>
+            : !(item.children && item.children.length > 0) && <span class={link()}>{item.label}</span>}
           {item.children && item.children.length > 0 && (
             <>
-              {/* The chevron is the submenu's handle: focusing it (a tap on a touch screen, Tab on a keyboard) opens the submenu, with no script. */}
-              <button type="button" aria-haspopup="true" aria-label={item.label} class="ms-1 inline-flex cursor-pointer items-center align-middle opacity-80 hover:opacity-100">
-                <svg aria-hidden="true" viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
-              </button>
-            <ul class={sub()}>
-              {item.children.map(child => (
-                <li><a href={child.href} aria-current={child.href === current ? 'page' : undefined} class="block rounded-md px-3 py-2 text-sm text-ink no-underline hover:bg-surface-muted">{child.label}</a></li>
-              ))}
-            </ul>
+              {/* The button is the submenu's handle: focusing it (a tap on a touch screen, Tab on a keyboard) opens the submenu, with no script. With no real link of its own the item is the button, label and all. */}
+              {real(item.href)
+                ? (
+                  <button type="button" data-kit-sub aria-controls={`${id}-sub-${index}`} aria-label={item.label} class="ms-1 inline-flex cursor-pointer items-center align-middle opacity-80 hover:opacity-100">
+                    <svg aria-hidden="true" viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
+                  </button>
+                )
+                : (
+                  <button type="button" data-kit-sub aria-controls={`${id}-sub-${index}`} class={`${link()} inline-flex cursor-pointer items-center gap-1`}>
+                    {item.label}
+                    <svg aria-hidden="true" viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
+                  </button>
+                )}
+              <div id={`${id}-sub-${index}`} class={sub()}>
+                <NavTree items={item.children} current={current} kind={menu === 'mega' ? 'mega' : 'flyout'} />
+              </div>
             </>
           )}
         </li>
@@ -88,12 +107,10 @@ const drawer = `${id}-drawer`
             <ul class="flex flex-col gap-1">
               {items.map(item => (
                 <li>
-                  <a href={item.href} aria-current={item.href === current ? 'page' : undefined} class="block rounded-md px-3 py-2 text-ink no-underline hover:bg-surface-muted aria-[current=page]:font-semibold">{item.label}</a>
-                  {item.children && item.children.length > 0 && (
-                    <ul class="ms-3 border-s border-line ps-3">
-                      {item.children.map(child => <li><a href={child.href} class="block rounded-md px-3 py-1.5 text-sm text-ink-muted no-underline hover:text-ink">{child.label}</a></li>)}
-                    </ul>
-                  )}
+                  {real(item.href)
+                    ? <a href={safeHref(item.href)} aria-current={item.href === current ? 'page' : undefined} class="block rounded-md px-3 py-2 text-ink no-underline hover:bg-surface-muted aria-[current=page]:font-semibold">{item.label}</a>
+                    : <span class="block px-3 py-2 font-semibold text-ink">{item.label}</span>}
+                  {item.children && item.children.length > 0 && <NavTree items={item.children} current={current} kind="drawer" />}
                 </li>
               ))}
             </ul>
@@ -107,11 +124,47 @@ const drawer = `${id}-drawer`
             {menuLabel}
           </summary>
           <ul class="absolute end-0 z-30 mt-2 flex w-64 flex-col gap-1 rounded-lg border border-line bg-surface p-3 text-ink shadow-lg">
-            {items.flatMap(item => [item, ...(item.children ?? [])]).map(item => (
-              <li><a href={item.href} aria-current={item.href === current ? 'page' : undefined} class="block rounded-md px-3 py-2 text-sm text-ink no-underline hover:bg-surface-muted">{item.label}</a></li>
+            {items.map(item => (
+              <li>
+                {real(item.href)
+                  ? <a href={safeHref(item.href)} aria-current={item.href === current ? 'page' : undefined} class="block rounded-md px-3 py-2 text-sm text-ink no-underline hover:bg-surface-muted">{item.label}</a>
+                  : <span class="block px-3 py-2 text-sm font-semibold text-ink">{item.label}</span>}
+                {item.children && item.children.length > 0 && <NavTree items={item.children} current={current} kind="drawer" />}
+              </li>
             ))}
           </ul>
         </details>
       )}
   </nav>
 )}
+{hasSub && (
+  <script>
+    // Disclosure navigation, last step: aria-expanded follows what is open (hover, focus or a click), Escape closes the
+    // open panel and returns to its button. Without this script the panels still open on hover and focus.
+    for (const nav of document.querySelectorAll<HTMLElement>('nav')) {
+      for (const button of nav.querySelectorAll<HTMLButtonElement>('button[data-kit-sub]')) {
+        const item = button.closest<HTMLElement>('li')
+        const panel = item?.querySelector<HTMLElement>(`#${CSS.escape(button.getAttribute('aria-controls') ?? '')}`)
+        if (!item || !panel) continue
+        const sync = () => button.setAttribute('aria-expanded', String(!item.hasAttribute('data-closed') && getComputedStyle(panel).display !== 'none'))
+        sync()
+        item.addEventListener('mouseenter', () => { item.removeAttribute('data-closed'); queueMicrotask(sync) })
+        item.addEventListener('mouseleave', () => queueMicrotask(sync))
+        item.addEventListener('focusin', () => { item.removeAttribute('data-closed'); queueMicrotask(sync) })
+        item.addEventListener('focusout', () => queueMicrotask(sync))
+        item.addEventListener('keydown', (event) => {
+          if (event.key !== 'Escape' || item.hasAttribute('data-closed') || getComputedStyle(panel).display === 'none') return
+          event.preventDefault()
+          item.setAttribute('data-closed', '')
+          if (panel.contains(document.activeElement)) button.focus()
+          sync()
+        })
+        button.addEventListener('click', () => {
+          if (item.hasAttribute('data-closed')) item.removeAttribute('data-closed')
+          else if (getComputedStyle(panel).display !== 'none') item.setAttribute('data-closed', '')
+          sync()
+        })
+      }
+    }
+  </script>
+)}

package/components/nav/NavTree.astro

@@ -0,0 +1,40 @@
+---
+// The submenu levels of Nav, rendered recursively so a menu of any depth keeps every level. An entry with no real link
+// (an empty href or "#": a WordPress "custom link" used as a group heading) is a label, not `<a href="#">`.
+import NavTree from './NavTree.astro'
+import type { NavItem } from '../_shared/types'
+import { safeHref } from '../_shared/safe-url'
+
+interface Props {
+  items: NavItem[]
+  /** The current page's path, for aria-current. */
+  current?: string | undefined
+  /** flyout: a list under the item. drawer: the narrow-screen menu. mega: the columns of a wide panel. */
+  kind: 'flyout' | 'drawer' | 'mega'
+  /** 2 for the first level under a top item, 3 for the next. */
+  level?: number | undefined
+}
+
+const { items, current, kind, level = 2 } = Astro.props
+const real = (href: string | undefined) => !!href && href !== '#'
+// Column headings in a mega panel; deeper rows (and every drawer row below the top) are quieter.
+const heading = kind === 'mega' && level === 2
+const row = heading
+  ? 'block px-3 py-2 text-sm font-semibold text-ink'
+  : level === 2 && kind === 'flyout'
+    ? 'block px-3 py-2 text-sm text-ink'
+    : 'block px-3 py-1.5 text-sm text-ink-muted'
+const hover = 'rounded-md no-underline hover:bg-surface-muted hover:text-ink'
+// Nested lists are indented, except the first list of a flyout or mega panel, which fills the panel.
+const nested = kind === 'drawer' || level > 2 ? 'ms-3 border-s border-line ps-3' : ''
+---
+<ul class={heading ? 'grid grid-flow-col auto-cols-fr gap-x-8 gap-y-4' : nested}>
+  {items.map(item => (
+    <li>
+      {real(item.href)
+        ? <a href={safeHref(item.href)} aria-current={item.href === current ? 'page' : undefined} target={item.newTab ? '_blank' : undefined} rel={item.newTab ? 'noopener' : undefined} class={`${row} ${hover}`}>{item.label}</a>
+        : <span class={`${row} font-semibold`}>{item.label}</span>}
+      {item.children && item.children.length > 0 && <NavTree items={item.children} current={current} kind={kind === 'mega' ? 'flyout' : kind} level={level + 1} />}
+    </li>
+  ))}
+</ul>