Paint the menu's panel chrome from the token contract and restyle the demo (3.0.0-beta.2)

[jasonrundell]

Why

The demo worked but looked broken. In v2 the demo's theme CSS painted the off-canvas nav and the mega / sub panels, added gutters and swapped in the angle icons by reaching into Emotion internals. The v3 migration dropped all of that and left no token to replace it, so on main today:

• mega and sub panels have no background and overprint the page copy on desktop and mobile;
• the desktop nav row sits below the painted 4rem shell (invisible on the Dark override);
• the mobile-only "back" heading links render on desktop too (the "StoreDeals" mash-up, duplicated Outdoors / Bedroom labels);
• nothing has a gutter, mega columns are bare flex children, links keep Topiary's underline plus a full-height hover block, and the chevron spans are empty.

What changed

Library (src/styles/style.css, rmmTokens.js, README token table)

• New tokens, each defaulting to a Topiary token with a fallback: --rmm-panel-bg, --rmm-panel-border, --rmm-panel-shadow, --rmm-panel-padding, --rmm-link-radius, --rmm-icon-stroke, --rmm-gutter, --rmm-column-min-width, --rmm-line-height.
• Removed --rmm-hamburger-top / --rmm-hamburger-left: the hamburger now sits inline at the right of a single 4rem top bar, so --rmm-menu-height defaults to --rmm-topbar-height.
• Large breakpoint: top bar and main list share one row inside the shell; each mega panel drops down full-width as an auto-fill grid of columns with a border and shadow; sub lists render inline; the mobile-only heading rows are hidden.
• Mobile: the nav, mega and sub panels paint --rmm-panel-bg, heading rows get a back chevron and a rule, forward items get a chevron.
• slideDirection now applies to every level: under rmm__nav--slide-right the mega and sub panels rest off the right edge and animate with the mirror-image keyframes (with matching reduced-motion transforms and large-breakpoint overrides), so a right-sliding menu enters from the same side at every depth.
• Links drop the underline inside the menu and hover as a rounded pill; chevrons are drawn from two borders so no icon assets ship; the top bar title takes --rmm-menu-text so dark override themes stay legible.
• styleContract.test.js now asserts every panel surface paints from --rmm-panel-bg, that the removed tokens are gone, and that the right-slide panel rules use the right keyframes. README token table updated (still contract-tested).

Demos

• Version bumped to 3.0.0-beta.1, then to 3.0.0-beta.2 (see note below); both demos reinstall from the repacked tarball.
• Vite demo: hero with a monospace prop readout, feature cards, each switcher in its own card, all from Topiary tokens so data-theme re-skins page and menu together. The five override themes gain panel tokens so Dark / Monokai / Retro / Synthwave panels match their bars.
• Vite demo: a second page at /slide-right/ (slide-right/index.html → src/slide-right.tsx, a second Vite entry) mounts the same app with slideDirection="right" from the first render, so each slide side has a sharable URL. The Slide direction card cross-links the two pages. The entries are resolved with relative paths on purpose: Vercel installs only demo/, so the config cannot rely on @types/node hoisted from the repo root.
• Next demo: page padding clears the fixed top bar.
• docs/release/v3.0.0.md records what changed since beta.0 and that beta.2 still needs publishing; README migration notes explain that v3 paints its own panels.

Why beta.2: the panel slide-direction fix (previous commit) verified correct locally in both dev and from-scratch production builds, but the reporter still saw the old left-slide behavior on the deployed Vercel preview after a hard refresh in an incognito window. The tarball's content had changed three times under the single version string 3.0.0-beta.1, which risks a file:-dependency install cache resolving by path/version and serving stale content. Bumping to 3.0.0-beta.2 forces every install, including Vercel's, to resolve genuinely fresh tarball content. docs/release/v3.0.0.md now says to repack and bump together on every content change going forward.

Verification

• npm test: 11 suites, 114 tests pass (includes axe scans, the new panel-chrome and slide-direction contract tests, README contract).
• scripts/a11y-walkthrough/walk.cjs against the rebuilt harness: ALL PASS (rows 13 / 13a / 13c, both reduced-motion settings).
• Vite demo: tsc -b, eslint, vite build clean, also with the repo-root node_modules hidden to mirror Vercel; screenshotted in all four Topiary themes and all five override themes at 1400px and 390px with Store and Outdoors open. Panels never show page content through them.
• Slide direction, measured mid-animation in a real browser against a from-scratch production build (tsc -b && vite build, served with vite preview, matching what Vercel runs): under "right" the nav, the Store mega panel and the Outdoors sub panel all enter from positive x offsets (from the right); under "left" all three enter from negative offsets. With prefers-reduced-motion: reduce the closed panels rest off the matching edge and the open ones sit at x = 0. Re-verified after the beta.2 bump from a fully clean install (deleted node_modules, the tarball, and dist first).
• Next demo: eslint and next build clean; next start SSR output carries data-theme and the menu markup.
• CI green and the Vercel preview deployed on the current head (3ee6a68).

Before / after

Before (main): the Store panel overprints the page; on the Dark override the nav links are invisible.
After: see the screenshots attached in the session; happy to add them here on request.

🤖 Generated with Claude Code

https://claude.ai/code/session_017NynwxzG7ZKWBaHW4QAmcp

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
react-mega-menu	Ready	Preview	Sep 4, 2026 2:39am UTC