Web components Accordion (details): Pre-alpha

[amyleadem]

Summary

• Design a markup structure for the light and shadow DOM
• Design component variants, props, parts, slots, and vars

Research and planning tasks

• Gather code samples from the landscape
  • Note: Use the Landscape analysis code samples template to collect relevant code samples from across the landscape
• Identify and document the component’s critical content
  • Document the component content that is critical for end-user understanding. Note: This critical content should always appear on the page, even in non-JS environments.
• Design and document the structure for the light DOM
• Design and document the structure for the shadow DOM
• Design and document the expected component customization methods
  • List and define the proposed component variants
  • List and define props
  • List and define slots
  • List and define CSS Parts
  • List and define CSS Variables
  • List any component content that will need to be translated into other languages

[amyleadem]

Accordion component design plan

Landscape analysis

Accordion and details code samples from the landscape analysis (Google docs 🔒)

Proposed component structure

Critical content

Element	Required attributes	Content
Header text content	N/A	Header for the accordion panel
Panel text content	N/A	Content inside the accordion panel

Sample default implementation:

<usa-accordion>
  <details open="true">
    <summary>First Amendment</summary>
    <div slot="accordion-body">Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</div>
  </details>
  <details>
    <summary>Second Amendment</summary>
    <div slot="accordion-body">A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.</div>
  </details>
  <details>
    <summary>Third Amendment</summary>
    <div slot="accordion-body">No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law. 
    </div>
  </details>
</usa-accordion>

Shadow DOM

Variants

Current variants

USWDS 3 variant	Web components variant	Description	Defined via

Proposed additional variants

USWDS 3 variant	Web components variant	Description	Defined via

Props

Current variants

Property	Description	Expected values

Proposed additional variants

Property	Description	Expected values

Slots

Unnamed slot

CSS Parts

Part name	Element

CSS Variables

Current settings

USWDS 3 setting	CSS custom property	Description

Proposed additional setting

USWDS 3 setting	CSS custom property	Description

Translatable content