[gethinwebster]

Description

Adds an optional subtle background to container and to the container and stacked variants of expandable section:

<Container background="subtle" header={<Header>Related resources</Header>}>...</Container>
<ExpandableSection variant="container" background="subtle" headerText="Advanced settings">...</ExpandableSection>

• The subtle surface is the neutral 50 reference colour in light mode and neutral 1000 in dark mode, in visual refresh and One Theme. Classic is unaffected.
• A divider separates the header from the content, spaced like the existing footer divider. A collapsed expandable section has no divider.
• The surface applies to everything inside the container, so nested table headers, tokens and chart markers match it instead of keeping the default container colour.
• The default (background="default") renders exactly as today.

Related links, issue #, if available: n/a

How has this been tested?

• New unit tests for both components (applied in visual refresh, ignored in classic and in expandable section variants that do not render a container, no attribute leaks to the DOM).
• Unit tests for every component that renders the internal container or expandable section (table, cards, side navigation, tabs, wizard, tutorial panel).
• New dev page container/subtle-background, added to the container screenshot suite. It covers header, footer, stacked, collapsed and expanded combinations, plus a container holding form controls, buttons, status indicators, tokens, a table and a pie chart.
• Checked the rendered page in visual refresh and One Theme, light and dark, including axe: no violations.
• Colour contrast: every design token was measured against the new surface. No text falls below 4.5:1 and no component border below 3:1. Seven chart palette colours drop from about 3.01:1 to 2.94:1 in light mode.

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests?
• Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.84%. Comparing base (d25043b) to head (dad2d2c).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #5270   +/-   ##
=======================================
  Coverage   97.83%   97.84%           
=======================================
  Files        1008     1008           
  Lines       32590    32600   +10     
  Branches    12098    12107    +9     
=======================================
+ Hits        31886    31896   +10     
+ Misses        698      663   -35     
- Partials        6       41   +35     

☔ View full report in Codecov by Harness.
📢 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.