Better grouping of details content and summary dropdown

[davidbgk]

trafficstars

• [x] Please search for duplicate or closed issues first.

Describe the issue

Current Behavior

For now (v1 and v2) I find the details/summary elements to be a bit disconnected from the actual unfolded content, especially when using the role="button".

Expected Behavior

That's the third time I add this to my custom CSS, it's just a suggestion of course:

details {
  border: 1px solid var(--secondary);
  border-radius: var(--border-radius);
  padding: var(--border-radius);
}

Maybe it'll help somebody else, I can make a PR for that.

Reproduction URL

The documentation provides good examples:

• https://picocss.com/docs/accordions.html
• https://v2.picocss.com/docs/accordion

[lucaslarroche]

I would prefer to keep it more neutral as is — not assuming the user prefer borders — but I would love to hear other user's thoughts.

[davidbgk]

To be more precise, we did it after user testing and feedback on UX. Users were lost and did not understand the relation between the summary and the detail element. I get that a lighter theme is closer to the philosophy of the picocss default design but if it hurts usability it might not be the best option.

PS: really glad you're back 🤗