[Tech & Design] Create a grouped `vf-details--accordion` variant

[archibald-ebi]

Description

Design, implement and document an additive vf-details--accordion variant that groups multiple vf-details instances while keeping vf-details as the underlying disclosure component.

So that designers and devs don't have to keep making it themselves.

Background and rationale

The 'vf-details' review recommends retaining vf-details as the Visual Framework's primary disclosure component rather than introducing a separate vf-accordion component.

Teams already combine vf-details instances to create accordion-like groups. A supported variant would make that pattern more consistent for design and development while avoiding component duplication and class-name migration.

The grouped variant must still follow the disclosure guidance: content should be supplementary, concise or mid-form, closed by default and limited to a small number of rows. The report recommends no more than five stacked rows before content and information architecture are reconsidered.

User story

As a designer or developer, I need a supported grouped presentation of vf-details so that I can create a consistent short disclosure group without inventing a local accordion component.

Proposed work

• Define vf-details--accordion as an additive grouped variant, not a replacement base component.
• Use individual vf-details instances as the repeated molecule.
• Provide an approved stacking pattern using vf-stack and/or vf-grid.
• Define visual and interaction states for closed and open rows.
• Keep native <details> and <summary> behaviour for the core interaction.
• Support the documented content-size and row-count guidance.
• Decide whether grouped rows allow multiple sections to remain open or provide an additional single-open option.
• Update code examples, component documentation and design assets.

Acceptance criteria

• The grouped variant uses vf-details as its base component and does not introduce a separate vf-accordion package.
• The modifier name and API are documented and backwards compatible.
• The implementation uses native <details> and <summary> semantics for the core disclosure interaction.
• A documented layout pattern groups rows using approved Visual Framework layout utilities.
• Closed, open, hover and focus states are defined.
• The whole summary control has a clear and usable interactive target.
• The variant is documented for supplementary, concise or mid-form content only.
• Documentation states that more than five rows require content and design review.
• The default state is closed.
• The decision on single-open versus multi-open behaviour is documented and reflected consistently in code and examples.
• Keyboard, screen-reader, zoom and responsive behaviour are tested.
• Existing single vf-details implementations are visually and functionally unchanged unless they opt into the variant.

Out of scope

• Migrating every existing accordion-like implementation.
• Adding expand-all or collapse-all controls without separate user evidence.
• Supporting large forms, primary actions, deep nesting or specialist API documentation.