feat(cds-modal): new enable-dialog-element feature flag

[maradwan26]

Closes #20540
Part of #19454

Adds enable-dialog-element feature flag to @carbon/web-components

Changelog

New

• Added modal-base.ts file

  • This file contains functions, attributes, etc. shared between cds-modal and cds-dialog that are then inherited by these components
  • Previously, cds-dialog extended directly from cds-modal, but this caused dependency issues with this feature flag, so things have been moved to modal-base, and now both cds-dialog and cds-modal extended modal-base instead

• Added enable-dialog-element feature flag and respective mdx and story

Changed

• Fixed a styles issue where when using enable-dialog-element, the borders from the Dialog and the Modal would stack, resulting in a 2px border.

Testing / Reviewing

• Go to Modal/Feature Flag in Web Components storybook
• Behaviour and functionality should match React counterpart
  • Both Modal and ComposedModal have this feature flag, I personally used ComposedModal as the point of reference
• The refactor to move some functions, attributes, etc. to modal-base should not cause any regressions to the Dialog or Modal components
• Feel free to pull down this branch and test out events and such, cds-dialog events are intentionally prevented from propagating (932f012) in favour of the cds-modal events when using this feature flag, to keep adopters' event handling usages consistent

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-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	22fcbce
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/69f256dab801290008d7ad2f
😎 Deploy Preview	https://deploy-preview-22144--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

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	22fcbce
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/69f256db62496600086d2818
😎 Deploy Preview	https://deploy-preview-22144--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

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

[codecov]

Codecov Report

❌ Patch coverage is 99.39210% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 95.10%. Comparing base (cb5b293) to head (22fcbce).

Files with missing lines	Patch %	Lines
...kages/web-components/src/components/modal/modal.ts	97.91%	1 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #22144      +/-   ##
==========================================
+ Coverage   95.06%   95.10%   +0.04%     
==========================================
  Files         541      543       +2     
  Lines       45217    45662     +445     
  Branches     6507     6563      +56     
==========================================
+ Hits        42985    43428     +443     
- Misses       2103     2104       +1     
- Partials      129      130       +1     

Flag	Coverage Δ
main-packages	89.13% <ø> (ø)
web-components	97.90% <99.39%> (+0.02%)	⬆️

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.