[vvaliyev]

Description

Adds the internal Style API v2 to Item card: root, header (rendered when header, description, icon or actions is set) and footer. The default rendering of Item card and Cards does not change: every existing declaration keeps its value as the fallback, and the new header and footer corner radii and zero-width transparent divider borders paint nothing by default. v1 style and v2 styleClassNames are not meant to be combined on one instance; v1 behaviour is unchanged from main, with one fix: a v1 footer divider on a card that has only a footer now follows the card's rounded top corners instead of running straight through them.

The style-docs snapshot and the VR registration of the dev page follow in one PR for all components.

Tracker section: P3d34KdbCd6o.

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

How has this been tested?

Unit tests for every slot, dev page item-card/style-api-v2, build and lint green.

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.

[Copilot]

🟡 Changes recommended

ItemCard still applies the legacy border radius inline, overriding the v2 root radius and causing mismatched corners between the outline, background, and shadow.

1 open issue

• Legacy inline radius overrides the v2 root radius · New

What changed in this PR

Adds internal Style API v2 support to ItemCard, exposing root, header, and footer styling slots while preserving default rendering and legacy styling fallbacks.

Changes:

• Adds slot class names and styling tokens for borders and corner radii.
• Preserves legacy footer-divider behavior and adds unit coverage.
• Adds a demo page showing combined and individual slot styling.

File	Description
src/​item-card/​styles.scss	Defines slot styling, token fallbacks, and section corner radii.
src/​item-card/​style.tsx	Preserves legacy footer-divider defaults.
src/​item-card/​internal.tsx	Applies internal styling classes to each slot.
src/​item-card/​__tests__/​styles.test.tsx	Tests partially specified footer dividers.
src/​item-card/​__tests__/​style-api.test.tsx	Tests slot classes, conditional rendering, and DOM prop filtering.
pages/​item-card/​style-api-v2.scss	Defines demo styles for all three slots.
pages/​item-card/​style-api-v2.page.tsx	Demonstrates slot styling across card variants.

_{Review effort: Balanced}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.82%. Comparing base (ab62434) to head (7d504bd).
⚠️ Report is 9 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #5246      +/-   ##
==========================================
- Coverage   97.82%   97.82%   -0.01%     
==========================================
  Files        1006     1006              
  Lines       32621    32577      -44     
  Branches    12117    12103      -14     
==========================================
- Hits        31913    31868      -45     
- Misses        666      667       +1     
  Partials       42       42              

☔ 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

The border-radius change breaks published v1 API compatibility by misinterpreting or rejecting valid shorthand values, producing unintended elliptical or square corners.

2 open issues

• Preserve v1 border-radius shorthand compatibility · New
• Legacy inline radius overrides the v2 root radius

_{Review effort: Balanced}

[Copilot]

🟡 Changes recommended

Header and footer corner properties incorrectly receive the full border-radius shorthand, causing malformed or square corners that can let section backgrounds extend outside the rounded card.

2 open issues

• Inherit expanded card corner radii for header and footer · New
• Legacy inline radius overrides the v2 root radius

1 resolved since last review

• Preserve v1 border-radius shorthand compatibility

_{Review effort: Balanced}

[Copilot]

🟡 Changes recommended

Header and footer backgrounds can extend beyond the card’s rounded boundary with percentage or large fixed radii, requiring a styling fix and browser regression coverage.

2 open issues

• Keep header and footer backgrounds within the card’s rounded outline · New
• Legacy inline radius overrides the v2 root radius

1 resolved since last review

• Inherit expanded card corner radii for header and footer

_{Review effort: Balanced}

[Copilot]

🟢 Approval recommended

No active review issues are reported for the ItemCard Style API v2 changes.

No open issues 🎉

2 resolved since last review

• Keep header and footer backgrounds within the card’s rounded outline
• Legacy inline radius overrides the v2 root radius

_{Review effort: Balanced}