MWPW-206522: render mas-field as display:contents

[joaquinrivero]

Resolves https://jira.corp.adobe.com/browse/MWPW-206522

mas-field as display: contents.

Companion PR (milo): adobecom/milo#6586

• C1. Cover code with Unit Tests
• C2. Add a Nala test (check with #fishbags if needed)
• C3. Verify all Checks are green
• C4. PR description contains working Test Page link
• C5. Ready to demo from Test Page
• C6. Re-read Jira to validate all ACs

Test URLs:

• Before: https://main--da-cc--adobecom.aem.live/products/premiere/plans?instant=2026-08-19T00%3A00%3A00.000Z&mep=off&mas.preview=on&country=US&clearCaches.io
• After: https://main--da-cc--adobecom.aem.live/products/premiere/plans?instant=2026-08-19T00%3A00%3A00.000Z&mep=off&mas.preview=on&country=US&clearCaches.io&maslibs=MWPW-206522&milolibs=MWPW-202435

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch.
In case there are problems, just click the checkbox below to rerun the respective action.

• Re-sync branch

Commits

• c4b82a9 ✅ (latest)
• b36b9fe ✅

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 90.75%. Comparing base (2f2e131) to head (c4b82a9).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1210      +/-   ##
==========================================
+ Coverage   90.71%   90.75%   +0.03%     
==========================================
  Files         318      318              
  Lines      101712   101717       +5     
==========================================
+ Hits        92271    92312      +41     
+ Misses       9441     9405      -36     

Files with missing lines	Coverage Δ
web-components/src/mas-field.js	98.92% <100.00%> (+<0.01%)	⬆️

... and 6 files with indirect coverage changes

---

Continue to review full report in Codecov by Harness.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 2f2e131...c4b82a9. Read the comment docs.

🚀 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.

[Axelcureno]

Worth noting Milo's merch.css already sets mas-field { display: contents }, so this mainly fixes non-Milo hosts and drops the divergence. preview.css:836's comment still cites display: inline, stale now, but the override wins on specificity either way.

[Roycethan]

@joaquinrivero Regression observed:
"Free trial" shifts right by 16px (past one phantom span+gap), and "Buy now" shifts by 32px (past two)
https://main--da-cc--adobecom.aem.live/products/premiere/plans?maslibs=MWPW-206522&milolibs=MWPW-202435

[joaquinrivero]

Worth noting Milo's merch.css already sets mas-field { display: contents }, so this mainly fixes non-Milo hosts and drops the divergence. preview.css:836's comment still cites display: inline, stale now, but the override wins on specificity either way.

Good catch. The comment is fixed in #6586.