[Tech & Design] Add dividers to closed grouped vf-details rows #2438

Summary

Add top and bottom dividing lines to the closed state of grouped vf-details so users can distinguish adjacent rows before opening them.

Background and rationale

The current treatment shows a divider when a disclosure is open, between the header and body, but closed rows lack enough visual guidance.

In a grouped presentation, the divider should visually contain or "sandwich" each row so that section boundaries remain clear in both open and closed states. This treatment is only needed for grouped disclosures; a single vf-details does not require row separation.

User story

As a user scanning a grouped disclosure, I need clear boundaries between closed rows so that I can identify each available section and select the correct one.

Proposed work

• Add row dividers to the closed and open states of the grouped variant.
• Define how top, middle and bottom rows are separated.
• Keep the open-state divider between the summary and disclosed content.
• Ensure adjacent rows do not produce unintended double-width borders.
• Preserve visible hover and focus treatments.
• Do not apply grouped row dividers to the single vf-details presentation.
• Update component examples and design assets.

Acceptance criteria

• Every closed and opened row in a grouped vf-details presentation has a clear visual boundary.
• Row boundaries remain clear when one or more disclosures are open.