@owlmeans/web-panel 0.1.18-rc.9 → 0.1.18

package/src/components/nav/consts.local.ts

@@ -0,0 +1,64 @@
+/**
+ * The horizontal rhythm of the whole page, applied identically to the header row, the content
+ * and the footer row.
+ *
+ * It lives in ONE constant because the three regions have to agree: a content area with its own
+ * width sits visibly inset from a full-width header, which reads as a mistake rather than as a
+ * design. Adjust it through `containerClassName`, which is MERGED over this — never by giving
+ * the content a width of its own.
+ */
+export const CONTAINER = 'mx-auto w-full max-w-6xl px-4'
+
+/**
+ * A 44px target and a ring that is actually visible: the shadcn button draws its focus ring at
+ * half the ring colour's alpha, which on a white header is close to nothing, and a menu button is
+ * the one control a keyboard user on a narrow window has to find before anything else.
+ */
+export const TARGET = 'size-11 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background'
+
+export const ENTRY_ACTIVE = 'bg-accent text-accent-foreground'
+
+/**
+ * Section entries are LINKS, not buttons.
+ *
+ * The shadcn primitive styles its links as menu tiles — a filled hover/active background, a
+ * radius and tile padding — which reads as a row of buttons across the top of an application.
+ * These classes land after the primitive's, so `cn`'s tailwind-merge drops the conflicting
+ * ones; every neutralised utility here has a counterpart in the primitive, and removing one
+ * brings the tile back.
+ */
+export const SECTION_LINK = [
+  'bg-transparent hover:bg-transparent focus:bg-transparent',
+  'rounded-none px-0 py-1',
+  'text-sm font-medium text-muted-foreground',
+  'hover:text-foreground hover:underline underline-offset-4',
+  // Radix marks the active link with a VALUELESS `data-active`, so the state has to be matched
+  // on the attribute's presence. `data-[active=true]` — which the shadcn primitive itself uses —
+  // matches nothing here, which is why its own active styling never showed either.
+  'data-[active]:text-foreground data-[active]:underline data-[active]:bg-transparent',
+  'cursor-pointer',
+].join(' ')
+
+/**
+ * Invisible until it takes focus, then a pill in the top-left corner above everything — the
+ * inverse of the page's own surface (`bg-foreground text-background`), so it reads on any theme.
+ *
+ * The padding is focus-only: `sr-only` zeroes padding, but a plain `px-4` sorts after it and wins,
+ * which leaves a 32px box behind the clip instead of the 1px one assistive tech expects.
+ */
+export const SKIP_LINK = [
+  'sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-3',
+  'rounded-full bg-foreground text-sm font-semibold text-background',
+  'outline-none focus-visible:ring-[3px] focus-visible:ring-ring focus-visible:ring-offset-2',
+  'focus-visible:ring-offset-background',
+].join(' ')
+
+/**
+ * Sheet entries are LINKS, exactly as the section menu's are — a real `href` keeps each one
+ * focusable, openable in a new tab and announced as a link — and each row is a 44px touch target.
+ */
+export const ENTRY = [
+  'flex min-h-11 items-center gap-2 rounded-md px-3 text-sm font-medium text-foreground',
+  'hover:bg-accent hover:text-accent-foreground',
+  'outline-none focus-visible:ring-[3px] focus-visible:ring-ring',
+].join(' ')

package/src/components/nav/index.ts

@@ -1,5 +1,6 @@
 export type * from './types.js'
 
 export * from './layout.js'
+export * from './mobile.js'
 export * from './side.js'
 export * from './top.js'

package/src/components/nav/layout.tsx

@@ -1,47 +1,205 @@
-import type { FC } from 'react'
+import { useRef, type FC, type MouseEvent } from 'react'
 import { useNavigate } from '@owlmeans/client'
-import { cn } from '@/lib/utils'
+import { navLabelHelper } from '@owlmeans/client-panel'
+import { cn } from '../../@/lib/utils.js'
 import { Footer } from '../footer/component.js'
 
+import { useWideNav } from './viewport.js'
+import { MobileNav } from './mobile.js'
 import { SideNav } from './side.js'
 import { TopNav } from './top.js'
 import type { NavLayoutProps } from './types.js'
+import { CONTAINER, SKIP_LINK } from './consts.local.js'
 
 /**
  * The standard two-layer application shell.
  *
- * A layout entrypoint elevates a component that renders this and nothing else — the screen
+ * A layout entrypoint binds a component that renders this and nothing else — the screen
  * arrives as `children`. The side menu is mounted twice on purpose: one column for wide
  * viewports and one strip for narrow ones. Both render only when the active section has
  * more than one screen, so the single-screen case costs nothing but the elements' absence.
+ *
+ * `mobileMenu` swaps the narrow viewport's navigation for a menu button and a sheet holding
+ * both levels: the section menu hides below `md`, and the strip is not mounted at all, because
+ * the sheet already lists the screens it would show. Wide viewports are unaffected either way.
+ *
+ * The skip link comes FIRST in the root, ahead of the header — the first thing a keyboard reaches
+ * — and moves focus to `<main id="main">`, past the brand, the menus and the actions.
  */
 export const NavLayout: FC<NavLayoutProps> = ({
-  nav, translate, title, home, actions, footer, children, className, style, contentClassName
+  nav,
+  translate = navLabelHelper.defaultNavTranslate,
+  title,
+  home,
+  actions,
+  footer,
+  children,
+  className,
+  style,
+  headerClassName,
+  contentClassName,
+  containerClassName,
+  mobileMenu = false,
+  skipLinkLabel,
+  themeToggle,
+  navTestId
 }) => {
   const navigator = useNavigate()
-  const brandAlias = home ?? nav.sections.find(section => section.items.length > 0)?.items[0]?.alias
+  const wide = useWideNav()
+  // The switcher's names go through `translate` like every other shell string, with the caller's
+  // own labels winning; `false`/absent stays absent, so the footer renders exactly as it did.
+  const toggle =
+    themeToggle == null || themeToggle === false
+      ? undefined
+      : {
+          labels: {
+            toLight:
+              (themeToggle === true ? undefined : themeToggle.labels?.toLight) ??
+              translate('shell.toLight', 'Switch to light mode'),
+            toDark:
+              (themeToggle === true ? undefined : themeToggle.labels?.toDark) ??
+              translate('shell.toDark', 'Switch to dark mode')
+          }
+        }
+  const toggleProp = toggle != null ? { themeToggle: toggle } : {}
+  const main = useRef<HTMLElement>(null)
+  const skipLabel = skipLinkLabel === false ? null : (skipLinkLabel ?? translate('shell.skip', 'Skip to content'))
+  // Focus is moved by hand rather than left to the fragment navigation `href="#main"` would
+  // perform: that changes the location, and the router reads a location change as navigation.
+  // The `href` stays so the link is a link — focusable, announced, and working without script.
+  const skip = (event: MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault()
+    main.current?.focus()
+  }
+  const brandAlias = home ?? nav.sections.find((section) => section.items.length > 0)?.items[0]?.alias
+  // MERGED over the default, never substituted for it. `containerClassName` is how a design
+  // adjusts ONE aspect of the rhythm — almost always the width — and a caller passing
+  // `max-w-[1280px]` means "wider", not "no padding and no centring". Substituting dropped
+  // `px-4` and `mx-auto` along with the width it replaced, which is a page whose header,
+  // content and footer all run flush to the window edge. tailwind-merge keeps the override
+  // winning on the utility it names and leaves the rest of the rhythm standing, so a width-only
+  // value stays a width-only change; `px-8` still overrides the padding when that is the intent.
+  const container = cn(CONTAINER, containerClassName)
 
-  return <div
-    className={cn('flex min-h-screen flex-col bg-background text-foreground', className)}
-    style={style}
-  >
-    <header className="sticky top-0 z-40 border-b bg-background">
-      <div className="flex h-14 items-center gap-4 px-4">
-        {title != null ? <a
-          onClick={brandAlias != null ? navigator.press(brandAlias) : undefined}
-          className={cn('text-lg font-semibold', brandAlias != null && 'cursor-pointer')}
-        >{title}</a> : null}
-        <TopNav config={nav} translate={translate} ariaLabel="Sections" />
-        <div className="ml-auto flex items-center gap-2">{actions}</div>
+  return (
+    <div className={cn('flex min-h-screen flex-col bg-background text-foreground', className)} style={style}>
+      {/*
+       * Before `header`, never inside it: `header`'s own first `div` is the shared-rhythm row a
+       * position-based query locates, and a skip link is not part of any row.
+       */}
+      {skipLabel != null && (
+        <a href="#main" onClick={skip} data-skip-link className={SKIP_LINK}>
+          {skipLabel}
+        </a>
+      )}
+      {/*
+       * The header is a SURFACE, and it states both halves of one.
+       *
+       * It has to paint an opaque background — it is sticky, and content scrolls underneath —
+       * which makes it a different surface from the root behind it. A colour set on the root
+       * (`className="bg-secondary text-secondary-foreground"`, a dark application shell) then
+       * inherits INTO this bar while its own `bg-background` stays put, and every child that
+       * states no colour of its own — the brand, a ghost-variant action button — is painted in
+       * the foreground of a surface it is not on. That is light-on-light, it raises nothing at
+       * build or run time, and it is invisible only to whoever opens the page.
+       *
+       * `text-foreground` is what stops the inheritance at the boundary. It is not decoration
+       * and it is not redundant with the root: pairing has to be restated by every element that
+       * repaints its own background. `headerClassName` lands after it, so an app that wants a
+       * dark bar overrides BOTH halves through tailwind-merge.
+       *
+       * The `data-nav-backdrop` layer underneath is what keeps that promise even when
+       * `headerClassName` does NOT: a restyle that hands it an invalid Tailwind v4 arbitrary-value
+       * class (`bg-[--x]`, dropped silently), a bare `bg-transparent`, or a translucent surface
+       * (`bg-x/50`) used to leave the sticky bar with no background paint at all, and page content
+       * scrolled visibly through the menu. `-z-10` keeps it behind everything `header` renders and
+       * `pointer-events-none` keeps it out of the way of clicks; it paints `bg-background` no
+       * matter what `headerClassName` does or fails to do, and a caller who genuinely wants a dark
+       * bar still gets it because `headerClassName`'s own background paints OVER this one.
+       */}
+      <header className={cn('sticky top-0 z-40 isolate border-b bg-background text-foreground', headerClassName)}>
+        <div className={cn('flex h-14 items-center gap-6', container)}>
+          {title != null ? (
+            <a
+              onClick={brandAlias != null ? navigator.press(brandAlias) : undefined}
+              className={cn(
+                'brand flex items-center gap-2 text-lg font-semibold',
+                brandAlias != null && 'cursor-pointer'
+              )}
+            >
+              {title}
+            </a>
+          ) : null}
+          {(!mobileMenu || wide) && (
+            <TopNav
+              config={nav}
+              translate={translate}
+              ariaLabel="Sections"
+              testId={navTestId}
+              className={mobileMenu ? 'hidden md:flex' : undefined}
+            />
+          )}
+          {/*
+           * The menu button goes INTO the actions row, after the actions, rather than being a
+           * sibling of it: the row is what `ml-auto` pushes to the far edge, and the actions — a
+           * "Get started" button, a sign-in link — have to stay visible at every width beside it.
+           */}
+          <div className="ml-auto flex items-center gap-2">
+            {actions}
+            {mobileMenu && !wide && (
+              <MobileNav config={nav} translate={translate} ariaLabel="Sections" className="md:hidden" />
+            )}
+          </div>
+        </div>
+        {!mobileMenu && (
+          <SideNav config={nav} translate={translate} variant="bar" ariaLabel="Screens" className="md:hidden" />
+        )}
+        {/*
+         * Last in source order, not first — `header`'s own FIRST `div` child is what the layout
+         * test locates to measure the shared rhythm (`header > div`, `.first()`), and this element
+         * is not part of that rhythm. Negative z-index inside `header`'s own `isolate` stacking
+         * context paints a layer behind every normal-flow child regardless of where it sits in the
+         * DOM, so moving it here changes nothing about what is visible — only which `div` a
+         * position-based query finds first.
+         */}
+        <div
+          aria-hidden="true"
+          data-nav-backdrop
+          className="absolute inset-0 -z-10 bg-background pointer-events-none"
+        />
+      </header>
+      <div className="flex flex-1">
+        <SideNav config={nav} translate={translate} variant="side" ariaLabel="Screens" className="hidden md:block" />
+        {/*
+         * `tabIndex={-1}` makes the skip link's target focusable by script without putting it in
+         * the tab order. With the skip link disabled the id is not claimed either: an application
+         * that renders its own skip link owns its own `#main`, and two elements must not share it.
+         */}
+        <main
+          ref={main}
+          {...(skipLabel != null ? { id: 'main', tabIndex: -1 } : {})}
+          className={cn('flex-1 py-8 outline-none', contentClassName)}
+        >
+          <div className={cn(container)}>{children}</div>
+        </main>
       </div>
-      <SideNav config={nav} translate={translate} variant="bar" ariaLabel="Screens" className="md:hidden" />
-    </header>
-    <div className="flex flex-1">
-      <SideNav config={nav} translate={translate} variant="side" ariaLabel="Screens" className="hidden md:block" />
-      <main className={cn('flex-1 px-4 py-6', contentClassName)}>{children}</main>
+      {/*
+       * The footer is rendered unconditionally, `footer` prop or not: `Footer` itself renders the
+       * platform/owner credit line even when there are no links and no children, and only that
+       * component gets to decide there is nothing to show. Gating this on `footer` used to make
+       * the credit disappear from every layout that never passed one.
+       *
+       * A NODE footer goes in as `content`, not as children: children join the centred link row,
+       * which squeezes an application's own footer layout (a brand, a description, link columns)
+       * into a shrink-wrapped, centred line. `content` is a full-width block on the shell's rhythm.
+       */}
+      {Array.isArray(footer) ? (
+        <Footer links={footer} translate={translate} containerClassName={container} {...toggleProp} />
+      ) : footer != null ? (
+        <Footer containerClassName={container} content={footer} {...toggleProp} />
+      ) : (
+        <Footer containerClassName={container} {...toggleProp} />
+      )}
     </div>
-    {Array.isArray(footer)
-      ? <Footer links={footer} translate={translate} />
-      : footer != null ? <Footer>{footer}</Footer> : null}
-  </div>
+  )
 }

package/src/components/nav/mobile.tsx

@@ -0,0 +1,165 @@
+import { useId, useState, type FC, type MouseEvent } from 'react'
+import { MenuIcon, XIcon } from 'lucide-react'
+import { usePanelNav, navLabelHelper } from '@owlmeans/client-panel'
+import { cn } from '../../@/lib/utils.js'
+import { Button } from '../../@/components/ui/button.js'
+import { Sheet, SheetClose, SheetContent, SheetTitle, SheetTrigger } from '../../@/components/ui/sheet.js'
+
+import type { MobileNavProps } from './types.js'
+import { ENTRY_ACTIVE, TARGET, ENTRY } from './consts.local.js'
+
+/**
+ * Both navigation levels behind one menu button — what a narrow viewport gets instead of the
+ * section menu.
+ *
+ * The sheet lists every section; a section holding more than one screen lists its screens under
+ * the section's name, and a single-screen section is one link carrying the section's own label —
+ * the same rule the side menu follows, so a destination never appears twice. Labels resolve
+ * exactly as `TopNav` and `SideNav` resolve theirs (`nav.<section>`, `modules.<alias>`), through
+ * the same `translate` prop.
+ *
+ * Pressing an entry navigates in-app AND closes the sheet. Both happen in the anchor's own click
+ * handler: the `preventDefault()` that stops a full page load is not something a dialog notices,
+ * so a sheet left to close itself would stay open over the screen it just navigated to.
+ *
+ * `className` and `style` land on the TRIGGER — the only element the sheet places in the host's
+ * flow; the sheet itself is portalled to the document body.
+ */
+export const MobileNav: FC<MobileNavProps> = ({
+  config,
+  translate = navLabelHelper.defaultNavTranslate,
+  ariaLabel,
+  className,
+  style
+}) => {
+  const model = usePanelNav(config)
+  const [open, setOpen] = useState(false)
+  const id = useId()
+
+  if (model.sections.length < 1) {
+    return null
+  }
+
+  // Keys outside the `nav.` family on purpose: `nav.<name>` addresses a SECTION, and an
+  // application is free to have a section called `menu`.
+  const label = translate('shell.menu', 'Menu')
+  const closeLabel = translate('shell.close', 'Close')
+
+  const follow = (go: () => void) => (event: MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault()
+    setOpen(false)
+    go()
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label={label}
+          data-nav-menu-trigger
+          className={cn(TARGET, className)}
+          style={style}
+        >
+          <MenuIcon className="size-6" aria-hidden="true" />
+        </Button>
+      </SheetTrigger>
+      {/*
+       * `text-foreground` beside the primitive's `bg-background`: the sheet is portalled to the
+       * document body, so it inherits nothing from the shell and states both halves of its surface
+       * itself — the same rule the header follows.
+       *
+       * No description, deliberately: the title names the dialog, and Radix only warns about a
+       * missing one unless `aria-describedby` is passed explicitly as undefined.
+       */}
+      <SheetContent
+        side="right"
+        showCloseButton={false}
+        aria-describedby={undefined}
+        data-nav-sheet
+        className="gap-0 p-0 text-foreground"
+      >
+        <div className="flex h-14 shrink-0 items-center justify-between border-b pl-4 pr-2">
+          <SheetTitle className="text-base">{label}</SheetTitle>
+          <SheetClose asChild>
+            <Button variant="ghost" size="icon" aria-label={closeLabel} className={TARGET}>
+              <XIcon className="size-5" aria-hidden="true" />
+            </Button>
+          </SheetClose>
+        </div>
+        <nav aria-label={ariaLabel} className="flex-1 overflow-y-auto p-2">
+          <ul className="flex flex-col gap-1">
+            {model.sections.map((section) => {
+              const sectionLabel = navLabelHelper.resolveNavLabel(
+                translate,
+                section.label,
+                `nav.${section.name}`,
+                section.name
+              )
+
+              if (section.items.length > 1) {
+                const heading = `${id}-${section.name}`
+
+                return (
+                  <li key={section.name} className="pt-2">
+                    <p
+                      id={heading}
+                      className={cn(
+                        'px-3 pb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground',
+                        model.isSectionActive(section) && 'text-foreground'
+                      )}
+                    >
+                      {sectionLabel}
+                    </p>
+                    <ul aria-labelledby={heading} className="flex flex-col gap-1">
+                      {section.items.map((item) => {
+                        const active = model.isItemActive(item)
+
+                        return (
+                          <li key={item.alias}>
+                            <a
+                              data-testid={item.testId}
+                              href={model.hrefOf(item)}
+                              onClick={follow(model.goItem(item))}
+                              aria-current={active ? 'page' : undefined}
+                              className={cn(ENTRY, active && ENTRY_ACTIVE)}
+                            >
+                              {item.Icon != null ? <item.Icon className="size-4" /> : null}
+                              {navLabelHelper.resolveNavLabel(
+                                translate,
+                                item.label,
+                                `modules.${item.alias}`,
+                                item.alias
+                              )}
+                            </a>
+                          </li>
+                        )
+                      })}
+                    </ul>
+                  </li>
+                )
+              }
+
+              const active = model.isSectionActive(section)
+
+              return (
+                <li key={section.name}>
+                  <a
+                    data-testid={section.testId}
+                    href={model.hrefOf(section)}
+                    onClick={follow(model.goSection(section))}
+                    aria-current={active ? 'page' : undefined}
+                    className={cn(ENTRY, active && ENTRY_ACTIVE)}
+                  >
+                    {sectionLabel}
+                  </a>
+                </li>
+              )
+            })}
+          </ul>
+        </nav>
+      </SheetContent>
+    </Sheet>
+  )
+}

package/src/components/nav/side.tsx

@@ -1,8 +1,9 @@
 import type { FC } from 'react'
-import { defaultNavTranslate, resolveNavLabel, usePanelNav } from '@owlmeans/client-panel'
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
+import { usePanelNav, navLabelHelper } from '@owlmeans/client-panel'
+import { cn } from '../../@/lib/utils.js'
+import { Button } from '../../@/components/ui/button.js'
 
+import { useWideNav } from './viewport.js'
 import type { SideNavProps } from './types.js'
 
 /**
@@ -12,41 +13,56 @@ import type { SideNavProps } from './types.js'
  * are already on is noise. The component still exists in the tree, so a section that grows
  * a second screen gains its side menu with no layout change.
  */
-export const SideNav: FC<SideNavProps> = (
-  { config, translate = defaultNavTranslate, variant = 'side', ariaLabel, className, style }
-) => {
+export const SideNav: FC<SideNavProps> = ({
+  config,
+  translate = navLabelHelper.defaultNavTranslate,
+  variant = 'side',
+  ariaLabel,
+  className,
+  style
+}) => {
   const model = usePanelNav(config)
+  const wide = useWideNav()
 
   if (!model.showSide || model.active == null) {
     return null
   }
 
-  const items = model.active.items.map(item => {
-    const label = resolveNavLabel(translate, item.label, `modules.${item.alias}`, item.alias)
+  const items = model.active.items.map((item) => {
+    const label = navLabelHelper.resolveNavLabel(translate, item.label, `modules.${item.alias}`, item.alias)
 
-    return <Button
-      key={item.alias}
-      variant="ghost"
-      size={variant === 'bar' ? 'sm' : 'default'}
-      onClick={model.goItem(item)}
-      aria-current={model.isItemActive(item) ? 'page' : undefined}
-      className={cn(
-        variant === 'bar' ? 'shrink-0' : 'w-full justify-start',
-        model.isItemActive(item) && 'bg-accent text-accent-foreground'
-      )}
-    >
-      {item.Icon != null ? <item.Icon className="size-4" /> : null}
-      {label}
-    </Button>
+    return (
+      <Button
+        key={item.alias}
+        data-testid={(variant === 'side' ? wide : !wide) ? item.testId : undefined}
+        variant="ghost"
+        size={variant === 'bar' ? 'sm' : 'default'}
+        onClick={model.goItem(item)}
+        aria-current={model.isItemActive(item) ? 'page' : undefined}
+        className={cn(
+          variant === 'bar' ? 'shrink-0' : 'w-full justify-start',
+          model.isItemActive(item) && 'bg-accent text-accent-foreground'
+        )}
+      >
+        {item.Icon != null ? <item.Icon className="size-4" /> : null}
+        {label}
+      </Button>
+    )
   })
 
-  return variant === 'bar'
-    ? <nav
+  return variant === 'bar' ? (
+    <nav
       aria-label={ariaLabel}
       className={cn('flex gap-1 overflow-x-auto border-b px-2 py-1', className)}
       style={style}
-    >{items}</nav>
-    : <aside className={cn('w-56 shrink-0 border-r', className)} style={style}>
-      <nav aria-label={ariaLabel} className="flex flex-col gap-1 p-3">{items}</nav>
+    >
+      {items}
+    </nav>
+  ) : (
+    <aside className={cn('w-56 shrink-0 border-r', className)} style={style}>
+      <nav aria-label={ariaLabel} className="flex flex-col gap-1 p-3">
+        {items}
+      </nav>
     </aside>
+  )
 }

package/src/components/nav/top.tsx

@@ -1,11 +1,15 @@
 import type { FC } from 'react'
-import { defaultNavTranslate, resolveNavLabel, usePanelNav } from '@owlmeans/client-panel'
-import { cn } from '@/lib/utils'
+import { usePanelNav, navLabelHelper } from '@owlmeans/client-panel'
+import { cn } from '../../@/lib/utils.js'
 import {
-  NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, navigationMenuTriggerStyle
-} from '@/components/ui/navigation-menu'
+  NavigationMenu,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList
+} from '../../@/components/ui/navigation-menu.js'
 
 import type { TopNavProps } from './types.js'
+import { SECTION_LINK } from './consts.local.js'
 
 /**
  * The first navigation level — one entry per section.
@@ -13,29 +17,47 @@ import type { TopNavProps } from './types.js'
  * Pressing a section goes to its first screen; the side menu then offers the rest. The
  * viewport is off because no section opens a panel: these are links, not dropdowns.
  */
-export const TopNav: FC<TopNavProps> = ({ config, translate = defaultNavTranslate, ariaLabel, className, style }) => {
+export const TopNav: FC<TopNavProps> = ({
+  config,
+  translate = navLabelHelper.defaultNavTranslate,
+  ariaLabel,
+  testId,
+  className,
+  style
+}) => {
   const model = usePanelNav(config)
 
   if (model.sections.length < 1) {
     return null
   }
 
-  return <NavigationMenu viewport={false} aria-label={ariaLabel} className={className} style={style}>
-    <NavigationMenuList className="flex-wrap">
-      {model.sections.map(section => {
-        const go = model.goSection(section)
+  return (
+    <NavigationMenu viewport={false} aria-label={ariaLabel} data-testid={testId} className={className} style={style}>
+      <NavigationMenuList className="flex-wrap gap-4">
+        {model.sections.map((section) => {
+          const go = model.goSection(section)
 
-        return <NavigationMenuItem key={section.name}>
-          <NavigationMenuLink
-            active={model.isSectionActive(section)}
-            // A real `href` keeps the entry focusable and openable in a new tab; the click is
-            // still handled in-app, so the browser never reloads the whole application.
-            href={model.hrefOf(section)}
-            onClick={event => { event.preventDefault(); go() }}
-            className={cn(navigationMenuTriggerStyle(), 'cursor-pointer')}
-          >{resolveNavLabel(translate, section.label, `nav.${section.name}`, section.name)}</NavigationMenuLink>
-        </NavigationMenuItem>
-      })}
-    </NavigationMenuList>
-  </NavigationMenu>
+          return (
+            <NavigationMenuItem key={section.name}>
+              <NavigationMenuLink
+                active={model.isSectionActive(section)}
+                aria-current={model.isSectionActive(section) ? 'page' : undefined}
+                data-testid={section.testId}
+                // A real `href` keeps the entry focusable and openable in a new tab; the click is
+                // still handled in-app, so the browser never reloads the whole application.
+                href={model.hrefOf(section)}
+                onClick={(event) => {
+                  event.preventDefault()
+                  go()
+                }}
+                className={cn(SECTION_LINK)}
+              >
+                {navLabelHelper.resolveNavLabel(translate, section.label, `nav.${section.name}`, section.name)}
+              </NavigationMenuLink>
+            </NavigationMenuItem>
+          )
+        })}
+      </NavigationMenuList>
+    </NavigationMenu>
+  )
 }