[vvaliyev]

Description

Adds the internal Style API v2 to Container with three slots.

root, the container box: properties background, border, box-shadow; token --awsui-style-border-radius, which also rounds the header, footer and media corners. Adjoining corners of stacked containers stay square.
header, rendered when header is set: properties background, border (the block-end side is the divider between the header and the content).
footer, rendered when footer is set: properties background, border (the block-start side is the divider between the content and the footer).

Header and footer have their own background because a consumer element inside the section (with disable*Paddings) cannot match the container's rounded corners without knowing the radius. Padding stays with the consumer through disable*Paddings; the content area has no slot since the root background covers it.

CSS changes that make the slots work:

• In visual refresh a header that is not sticky no longer paints its own background, so a background set on the root shows through (header and content tokens have the same value; full-page and cards headers keep theirs). Visible effects: the antialiased pixels of the container's top corners are a shade darker, which the visual regression suite reports on every page with a container header; inside the top-navigation context, where only the content token is overridden, a non-sticky header takes the content colour.
• The footer gets end corner radii from the radius value, as the header has start corner radii. A header or footer corner is rounded only where it sits on a rounded root corner: square on the media side, at stacked junctions, and inside the fitHeight wrapper, which clips to the box already.
• The header divider under media is zero-width instead of none, so a header border set through the mixin draws there too.
• The container-style mixin takes the radius as a parameter (default unchanged); the fit-height wrapper and media corners read the same radius chain as the root.

Known limits, unchanged from main: in the classic theme the root border and shadow are painted by pseudo-elements, so the root border and box-shadow properties do not replace them there; the media image keeps its rounded corners at a stacked junction.

The styleClassNames prop is internal and not part of the public ContainerProps. Design-token values and the v1 inline styles are unchanged.

Tracker section: P3d34KdbCd6o.

How has this been tested?

• npm run build; unit tests for src/container, src/cards, src/expandable-section, src/tabs, the table and sticky-header tests, and the style-docs snapshot; prettier, stylelint, eslint.
• New unit test src/container/__tests__/style-api.test.tsx: each slot class lands on its element in the default and stacked variants and with media, unknown keys are ignored, the prop does not reach the DOM.
• New dev page pages/container/style-api-v2 styled only through the generated container.root(), container.header() and container.footer() mixins: every row, media on top, two stacked containers, header and footer only, and a header filled by a consumer element with disableHeaderPaddings. Checked in the browser (light, dark, classic) that header and footer backgrounds stay inside the rounded corners and stacked junctions are square. Not in the visual regression suite yet, like the other style-api-v2 pages.
• Compiled CSS of every other component is unchanged; the console build of Container differs only by the CSS changes listed above.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.73%. Comparing base (324fda3) to head (40c4239).
⚠️ Report is 4 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #5192   +/-   ##
=======================================
  Coverage   97.73%   97.73%           
=======================================
  Files         996      998    +2     
  Lines       32224    32289   +65     
  Branches    11910    11939   +29     
=======================================
+ Hits        31495    31559   +64     
- Misses        684      685    +1     
  Partials       45       45           

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

[Copilot]

🟡 Changes recommended

Classic decoration overrides and stacked corner handling remain incomplete.

2 open issues

• Route classic decorations through container style overrides · New
• Reset media and fit-height wrapper corners in stacked layout · New

What changed in this PR

Adds internal Style API v2 support to Container, with root, header, and footer slots while keeping styleClassNames outside the public props interface.

Changes:

• Wires slot classes and documents supported styling properties.
• Shares custom corner radii across container surfaces and adjusts backgrounds and dividers.
• Adds slot-wiring tests, documentation snapshots, and a styled demo page.

File	Description
src/​internal/​styles/​forms/​mixins.scss	Parameterizes the container radius, retaining its default.
src/​container/​styles.scss	Defines slots and updates backgrounds, dividers, and corners.
src/​container/​internal.tsx	Applies internal slot classes to container elements.
src/​container/​__tests__/​style-api.test.tsx	Tests class placement and DOM prop filtering.
src/​__tests__/​snapshot-tests/​__snapshots__/​style-docs.test.ts.snap	Records Container’s styling documentation.
pages/​container/​style-api-v2.scss	Demonstrates generated slot mixins.
pages/​container/​style-api-v2.page.tsx	Adds styled Container examples.

_{Review effort: Balanced}

[vvaliyev]

Classic is out of scope for Style API v2: the classic theme is deprecated and v2 targets visual refresh, where the root paints its own border and has no shadow. Listed under known limits in the description.

[vvaliyev]

Added the stacked reset for the fit-height clipping wrapper, since it would otherwise clip a footer background to a rounded corner at the junction. The media image's corners at a stacked junction are unchanged from main and out of scope here.