fix(dropdown): add autoalign behavior

[heloiselui]

Closes #20859

This PR add autoalign behavior in web components Dropdown

Changelog

New

• Added autoalign attribute to all stories.

Changed

• Added Floating UI in cds-dropdown so the menu can auto-align to the trigger.
• Corrected controller imports naming to match the shared Floating UI controller, cds-popover and cds-toggletip import FloatingUIContoller to import FloatingUIController

Removed

• None

Testing / Reviewing

• Go to WC Deploy Preview > Dropdown > Experimental Auto Align
• Check autoalign to all story example is in the controls section.

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

More details can be found in the pull request guide

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	f64bae6
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/694bd08269cab10008e258fd
😎 Deploy Preview	https://deploy-preview-21185--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	f64bae6
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/694bd0824a1fca0008b59072
😎 Deploy Preview	https://deploy-preview-21185--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 carbon-elements ready!

Name	Link
🔨 Latest commit	f64bae6
🔍 Latest deploy log	https://app.netlify.com/projects/carbon-elements/deploys/694bd082d4e919000872653a
😎 Deploy Preview	https://deploy-preview-21185--carbon-elements.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 90.42553% with 9 lines in your changes missing coverage. Please review.
✅ Project coverage is 85.05%. Comparing base (4ddc1a8) to head (f64bae6).

Files with missing lines	Patch %	Lines
...web-components/src/components/dropdown/dropdown.ts	90.00%	8 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #21185      +/-   ##
==========================================
- Coverage   85.12%   85.05%   -0.07%     
==========================================
  Files         532      532              
  Lines       41136    41223      +87     
  Branches     6379     6395      +16     
==========================================
+ Hits        35015    35061      +46     
- Misses       5958     5997      +39     
- Partials      163      165       +2     

Flag	Coverage Δ
main-packages	85.69% <ø> (ø)
web-components	84.69% <90.42%> (-0.05%)	⬇️

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.

[2nikhiltom]

This LGTM . thanks @heloiselui
Just one observation
Downdown is opening on left/right as well - I think for dropdown it should open at top or bottom, I see same behaviour in react as well

Screen.Recording.2025-12-18.at.19.35.57.mov

[heloiselui]

This LGTM . thanks @heloiselui Just one observation Downdown is opening on left/right as well - I think for dropdown it should open at top or bottom, I see same behaviour in react as well

I think this is related to the FloatingUIController, since we see the same behavior in the Menu button as well. I’ll open an issue for this: https://web-components.carbondesignsystem.com/?path=/story/components-menu-button--experimental-auto-align
Thanks @2nikhiltom

[2nikhiltom]

I do not want to block the merge for this , The Downdown opening on left/right as well can be fixed as a separate PR. @heloiselui surfaced this same issue with menu-button

[heloiselui]

I do not want to block the merge for this , The Downdown opening on left/right as well can be fixed as a separate PR. @heloiselui surfaced this same issue with menu-button

@2nikhiltom Thanks, just open an issue for this #21207

[sunny-babbar]

This appears to be working, LGTM.

[sunny-babbar]

@heloiselui Just one comment in react it appears to shift to the right / off centered.
In web components it appears centered.

React example:

Web components example:

[emyarod]

looks good to me! just awaiting visual review confirmation