feat: add stackblitz to components

[heloiselui]

Closes #18474

First wave of components docs update to added "Open in Stackblitz".

Changelog

Changed

• Added Canvas to some components, so "Open in Stackblitz" should be displayed in storybook.
• Updated and created mdx file to some components.

Testing / Reviewing

• CI should pass
• Stories should work as expected
• Try to open a few stories on Stackblitz
• Need refinement and more tests

[netlify]

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

Name	Link
🔨 Latest commit	fb501d0
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/67b49bdec9d84d0008247380
😎 Deploy Preview	https://deploy-preview-18433--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 site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	fb501d0
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/67b49bde8ecdbe0008e98d50
😎 Deploy Preview	https://deploy-preview-18433--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 site configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	fb501d0
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/67b49bde4f57000008fac1c3
😎 Deploy Preview	https://deploy-preview-18433--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 site configuration.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 83.98%. Comparing base (73c1439) to head (fb501d0).
Report is 19 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #18433   +/-   ##
=======================================
  Coverage   83.98%   83.98%           
=======================================
  Files         408      408           
  Lines       14501    14501           
  Branches     4699     4679   -20     
=======================================
  Hits        12178    12178           
- Misses       2155     2156    +1     
+ Partials      168      167    -1     

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

[guidari]

LGTM 🚀
Awesome work!

[github-actions]

The content of this pull request will be made available as part of our next release. For the full schedule of upcoming releases, check out our Release Radar page.

[heloiselui]

This PR #18433 was created to add the "Open in StackBlitz" feature.

During the implementation of this PR, several issues were identified, including StackBlitz malfunctions, layout problems in StackBlitz and the Overview page, and the need for code updates. These issues were not addressed in this PR as they are outside its scope.

Below are the open issues for the identified problems:

• #18538 – Feels like it could be a big issue. It might be worth breaking it down into sub-issues to make it more manageable.
• #18661 – More related to layout and interaction of some components in StackBlitz.
• #18652 – Focuses on styling issues, like background colors, grid structures, and theme inconsistencies.
• #18546 – Covers more structural updates to the code.

Lauren also opened another one after reviewing the PR:

• #18657 - Some visual issues.