feat(menu): modernize Menu to Material Design 3 specs

[matkoson]

Motivation

Modernize Menu / Menu.Item to the latest Material Design 3 specs. Reuse theme tokens (shape, typography, motion, color roles) and extract component tokens in the same pattern as Checkbox / FAB / ConnectedButtonGroup.

Spec re-check (M3 menus)

Re-checked M3 menus specs and overview:

• Container shape corner.large; item first/last/selected corner.medium.
• Label labelLarge; supporting bodySmall; trailing supporting labelLarge.
• Default container fill is MD3 surfaceContainerLow. The elevation prop controls shadow only (Paper’s elevation.level2 maps to different surfaceContainer tones, so it is not used as the menu fill).
• Selected items use tertiaryContainer / onTertiaryContainer.
• Expressive choices: optional colorScheme="vibrant"; spring-animated item corner morph as focus/selection moves; optional badge and lightweight submenu portal surface; Menu.Section group gaps (8dp) in addition to Divider.

Changes

Tokens / Menu / Menu.Item

• Container fill surfaceContainerLow; surface corner.large; first/last/selected item corner.medium via layout context (no cloneElement / no displayName filtering)
• labelLarge, supporting + trailing supporting text, selected colors (disabled wins with content opacity)
• Spring open/close via toRawSpring + reduce-motion snap
• colorScheme standard | vibrant
• Menu.Section group gaps; badge; lightweight submenu portal; Animated.spring per-corner radius morph on focus/selection

Example / docs / tests

• Example: selection, supporting, vibrant, sections, badge, submenu
• Docs + theme colors tables for selected/vibrant roles; refreshed Android + iOS screenshots
• Unit tests for shape, colors, supporting text, dense, motion/reduce-motion, badge, submenu

Related issue

Fixes callstack#4977

Test plan

• yarn typecheck / yarn lint / Menu unit tests
• Full unit test suite green
• Android visual matrix (Pixel 9 Pro XL emulator)
• iOS visual matrix (iPhone 16 Pro simulator)

Visual verification

Platform	closed	icons + disabled	selected + supporting	vibrant	bottom anchor
Android (Pixel 9 Pro XL)
iOS (iPhone 16 Pro)

Docs screenshots: docs/public/screenshots/menu-*.png and menu-ios-*.png.

[coderabbitai]

Warning

Review limit reached

You’ve reached a temporary PR review limit under our Fair Usage Limits Policy.

Your recent review volume is higher than typical usage, so adaptive limits are currently applied.

Next review available in: 2 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: bd51055c-a7fc-41e7-bc89-5aa9c10ae8bb

📥 Commits

Reviewing files that changed from the base of the PR and between 1b2b043 and b4ff449.

⛔ Files ignored due to path filters (13)

• docs/public/screenshots/menu-0.png is excluded by !**/*.png
• docs/public/screenshots/menu-1.png is excluded by !**/*.png
• docs/public/screenshots/menu-2.png is excluded by !**/*.png
• docs/public/screenshots/menu-3.png is excluded by !**/*.png
• docs/public/screenshots/menu-4.png is excluded by !**/*.png
• docs/public/screenshots/menu-ios-bottom.png is excluded by !**/*.png
• docs/public/screenshots/menu-ios-closed.png is excluded by !**/*.png
• docs/public/screenshots/menu-ios-icons.png is excluded by !**/*.png
• docs/public/screenshots/menu-ios-selected.png is excluded by !**/*.png
• docs/public/screenshots/menu-ios-vibrant.png is excluded by !**/*.png
• docs/public/screenshots/menu-item.png is excluded by !**/*.png
• src/components/__tests__/__snapshots__/Menu.test.tsx.snap is excluded by !**/*.snap
• src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (19)

• docs/6.x/docs/components/FAB/FABMenu.mdx
• docs/6.x/docs/components/Menu/Menu.mdx
• docs/6.x/docs/components/Menu/MenuItem.mdx
• docs/src/data/componentDocs6x.json
• docs/src/data/screenshots.ts
• docs/src/data/themeColors.ts
• example/src/Examples/MenuExample.tsx
• jest/setNodeEnv.js
• jest/testSetup.js
• package.json
• src/components/Menu/Menu.tsx
• src/components/Menu/MenuItem.tsx
• src/components/Menu/composeMenuChildren.tsx
• src/components/Menu/context.tsx
• src/components/Menu/motion.ts
• src/components/Menu/tokens.ts
• src/components/Menu/utils.ts
• src/components/__tests__/Menu.test.tsx
• src/components/__tests__/MenuItem.test.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/modernize-menu

---

_{Comment @coderabbitai help to get the list of available commands.}