feat(cds-overflow-menu-body): new menuOffset property

[maradwan26]

Closes #21512

Introduces new properties to cds-overflow-menu-body: menuOffset and menuOffsetFlip. Updates position calculations in floating-menu.ts, and adds menuOffset usage to the overflowmenu in cds-breadcrumb-item

This property can be used as a:

Static Object:

<cds-overflow-menu-body
.flipped=${true}
.menuOffsetFlip=${{ left: 50, top: 50 }}>

or a

Function

const OffSetFunction = (menuDirection) => {
    if (menuDirection === 'left') {
      return {
        top: 10,
        left: 20,
      };
    } else {
      return {
        left: 20,
        top: 50,
      };
    }
};

...

<cds-overflow-menu-body
direction="left"
.menuOffset=${OffSetFunction}>

Changelog

New

• (In React): Addressed an eslint-disable comment in OverflowMenu.tsx by removing the unused variable menuHeight, and updated the description of menuOffsetFlip to be more specific

• Added menuOffset handling in floating-menu.ts

  • New types, MenuOffset, MenuDirection, etc. that match React's
  • New functions resolveOffset(), getMenuOffset(), etc. that match the behaviour of the React implementation
  • Refactored the get position() function to behave exactly like React

• Added menuOffset and menuOffsetFlip properties to cds-overflow-menu-body

  • cds-overflow-menu-body overrides the getOffsetConfig from floating-menu and leaves the rest of the implementation to floating-menu.

Changed

• Updated cds-breadcrumb-item to use a menuOffset on its overflow menu

Removed

• Removed some rtl related code in floating-menu.ts that was flipping the menuOffset when in rtl which was messing with the semantics, (left would turn into right)

Testing / Reviewing

• Go to Breadcrumb/Breadcrumb With Overflow Menu story in WC storybook
• The menuOffset should match the React version of this story in both ltr and rtl
• There should be no regressions to floating-menu nor overflow-menu-body
• Feel free to pull this PR down and try out different menuOffset values, they should visually match the React counterpart

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

• Reviewed every line of the diff
• Updated documentation and storybook examples
• [ ] Wrote passing tests that cover this change
• Addressed any impact on accessibility (a11y)
• Tested for cross-browser consistency
• Validated that this code is ready for review and status checks should pass

[netlify]

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	e27d9d6
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/699761504e8db10008fd81f6
😎 Deploy Preview	https://deploy-preview-21575--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	e27d9d6
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/69976150fb13180008b59073
😎 Deploy Preview	https://deploy-preview-21575--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	46e3035
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/6997625d1b2af400083f0342
😎 Deploy Preview	https://deploy-preview-21575--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	46e3035
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/6997625d57eddb000861137c
😎 Deploy Preview	https://deploy-preview-21575--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[codecov]

Codecov Report

❌ Patch coverage is 71.77033% with 59 lines in your changes missing coverage. Please review.
✅ Project coverage is 87.16%. Comparing base (0e65384) to head (46e3035).

Files with missing lines	Patch %	Lines
...ents/src/components/floating-menu/floating-menu.ts	69.23%	44 Missing ⚠️
...nents/src/components/breadcrumb/breadcrumb-item.ts	52.38%	10 Missing ⚠️
...src/components/overflow-menu/overflow-menu-body.ts	84.84%	5 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #21575      +/-   ##
==========================================
- Coverage   87.21%   87.16%   -0.06%     
==========================================
  Files         538      538              
  Lines       43510    43650     +140     
  Branches     6667     6675       +8     
==========================================
+ Hits        37947    38046      +99     
- Misses       5402     5443      +41     
  Partials      161      161              

Flag	Coverage Δ
main-packages	86.81% <100.00%> (ø)
web-components	87.34% <71.63%> (-0.09%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.