menubar — File, Edit, View, ruled by the platform's gap

The composition protocol is the family's spine: MenubarItem owns the ONE id (mount-stable by contract), Trigger and Panel derive theirs (${id}-trigger / ${id}-panel) so aria-controls always resolves regardless of render order, and the panel registers its imperative show/hide handles at INIT under the panel id — first registration wins, a conditionally removed panel leaves no ghost handle. Both walkers are scoped with closest('[role=menu]'), so menubar panels AND nested dropdown-menu families never leak into the bar walk. Separators stay plain <hr>.

The panel is a popover=manual role=menu surface: the family owns dismissal (a document pointerdown outside-check plus panel Escape — popover=auto's light dismiss raced the trigger click), CSS anchor positioning places it (position-area: bottom span-right with a flip-block fallback and anchors-visible scroll hiding; a viewport-center fallback for engines without anchoring; a transparent ::backdrop — light dismiss must never dim). Motion is the shared surface kernel, ONE instance PER PANEL — a single shared animation slot would cancel the outgoing exit during a glide and ghost it at rest — anchored to the item's slot span, the live axis. And the promotion is IN PLACE: the panel renders inside the item's slot span and the top layer moves paint, not DOM, so the bar's stamps inherit down — measured, stamping --jx-radius-effective: 12px on the bar re-rendered the open panel at 12px. Body-appended portals would sever exactly that inheritance; this family carries none.

The eight axes split by role (all measured in the axes table below): density is the live two-channel ladder; radius is panel-only consumption; elevation splits bar-chrome 2xs from the panel's own level2 rung; theme is the split voice — live css chains re-derive under .dark while the stylex atom snapshots stay frozen light. Kinship: navigation-menu (the declaration-scope sibling whose panel promotes to the shared .jx-pop carrier — the menubar keeps its OWN panel law instead) and dropdown-menu (the item walk contract, duplicated deliberately so registry items stay independent).

Receipts: the density ladder (28/40/48px · 11/13/15px · 8/12/16px), the explicit-rung re-scope (data-density=lg stamped in place), the radius chain (0 → 12px → 0 on the open panel), the theme split (--card flipped 0.3211 while the bar card stayed white; hover pose 0.2178 dark; open pose 0.9551 light), the level2 shadow recipe and the variant blur split were measured on this page's served DOM (probe, task 31); the supply-only and zero-reader rows carry grep receipts over ui/menubar/ and surface-motion.ts. The universal demo folds in below, with a query() seat: the density lane rides the md viewport key (48rem).

<script lang="ts">
  import Menubar from '@ui/menubar/menubar.svelte';
  import { query } from '@lib/universal-props-query.svelte';
</script>

<!-- below 48rem the base (small) applies; at 48rem+ the md case (large)
     wins — 32px hits become 48px, the whole kernel ladder re-rungs -->
<Menubar label="responsive" density={query({ md: 'large' }, 'small')}>…</Menubar>

<script lang="ts">
  import Menubar from '@ui/menubar/menubar.svelte';
  import { query } from '@lib/universal-props-query.svelte';
</script>

<!-- below 48rem the base (small) applies; at 48rem+ the md case (large)
     wins — 32px hits become 48px, the whole kernel ladder re-rungs -->
<Menubar label="responsive" density={query({ md: 'large' }, 'small')}>…</Menubar>

<Menubar label="actions" density="large">…</Menubar>
<Menubar label="rounded" radius="medium">…</Menubar>
<Menubar label="dark" theme="dark">…</Menubar>