Detail

[1ntEgr8]

Overview

Analogue to the HTML <details> element. Also known as accordion in many libraries.

Use Cases

Useful for displaying summaries of information, and providing the user the ability to see more details by toggling the component.

Prior Art/Examples

• material ui called accordion
• shoelace
• base web
• chakra ui

---

Note: The following section is optional for making the issue, but must be filled in for a possible PR to be merged

API

Component name:

• <fl-details> or <fl-accordion> (see question below)

Attributes:	Property	Description	Type	Default
open	Opens the component if set to true	boolean	false
disabled	Disables the component	boolean	false
summary	Can be used to set a pure text summary. If you need to use HTML, use the summary slot	string	undefined

Slots:	Slot	Description
summary	A slot to display the summary of an element. Use if you want to display HTML in the summary.

CSS Parts:

• What CSS Parts does your component expose?

Example usage

Provide a short snippet of code showing how your component could potentially be used

<fl-details summary="Summary title goes here">
    More info woo!!
</fl-details>

<fl-details>
    <h1 slot="summary">i go in the summary slot</h1>
    More info in here!
</fl-details>

Questions to be answered

• What should the name of the component be? I'm leaning more towards details because it gives some sort of an idea for what it may be used for.