chore: make submenu positioning theme-aware

[rubencarvalho]

Description

This PR moves the submenu vertical offset from JavaScript to CSS custom properties to support theme-specific positioning values. The submenu popover positioning now respects each theme's design requirements:

• Spectrum/Express themes: -5px vertical offset
• Spectrum Two: -9px vertical offset

The changes involve:

• Extracting the vertical offset component from overlay.offset array and applying it via margin-block-start on the popover element
• Adding --swc-submenu-offset-block custom property in menu-item.css that references theme-specific values
• Defining --system-submenu-offset-block per theme in system-theme-bridge.css files
• Adjusting the overlay offset from [-10, -5] to [-10, 0] since vertical offset is now handled by CSS

Motivation and context

In the spectrum-two theme, submenus need different vertical offset across from spectrum and express themes to align properly with their parent menu items. Previously, the offset was hardcoded in JavaScript, making it not viable to adapt to theme-specific requirements. By moving this value to CSS custom properties, we enable each theme to define its own positioning.

This improves visual alignment across all supported themes.

Screenshots (if appropriate)

Before:

After:

---

Author's checklist

• I have read the CONTRIBUTING and PULL_REQUESTS documents.
• I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
• I have added automated tests to cover my changes.
• I have included a well-written changeset if my change needs to be published.
• I have included updated documentation if my change required it.

---

Reviewer's checklist

• Includes a Github Issue with appropriate flag or Jira ticket number without a link
• Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
• Automated tests cover all use cases and follow best practices for writing
• Validated on all supported browsers
• All VRTs are approved before the author can update Golden Hash

Manual review test cases

• Compare main vs this PR

  1. Visit the main example here
  2. Make sure you have selected "spectrum-two" theme
  3. Verify how the submenus are not aligned
  4. Compare to this PR here
  5. Make sure you have selected "spectrum-two" theme
  6. Expect the submenus to be aligned

Device review

• Did it pass in Desktop?
• Did it pass in (emulated) Mobile?
• Did it pass in (emulated) iPad?

[changeset-bot]

⚠️ No Changeset found

Latest commit: 53d43ce

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

📚 Branch Preview Links

• Documentation Site (first-gen)
• Storybook (first-gen)
• Storybook (second-gen)

🔍 First Generation Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

Deployed to Azure Blob Storage: pr-5966

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

[Rajdeepc]

You are overriding this in MenuItem.ts. Can you remove the inline style and place the rule here?
In menu-item.css

sp-popover { 
 margin-block-start: var(--swc-submenu-offset-block, -5px); 
}

And keep the existing host var:

:host { 
  --swc-submenu-offset-block: var(--system-submenu-offset-block, -5px); 
}

[rubencarvalho]

Done!

[Rajdeepc]

Are we letting downstream customers to override this. Is this the plan?

[rubencarvalho]

Moved this from inline style to the menu-item styles!

[Rajdeepc]

LGTM! If you update the hash we are good to go here. Thanks for resolving the review comments. Looks clean now.