Style buttons as selected on <details open>

[muan]

We are trying to convert more and more core function dropdowns on the site to using <details>. I'm currently working on https://github.com/github/github/pull/78190 and we need the selected state on <summary class="btn"> without the .selected class being added since the <details> pattern uses no JavaScript.

I'm curious what you all think about this, and if there is a better solution. ⭐ Happy to explore.

/cc @primer/ds-core

[shawnbot]

This gets a big 👍 from me.

Slightly off-topic of this PR, but I'm not quite sure where else to put it: Should we consider adding either <details> reset styles to primer-base or a utility class to reset them? I ask because @katmeister and I did some hacking in https://github.com/github/github/pull/77914/commits/8a9ab7f799492378bd9de2d6e5a6fd2be57956c0 that includes a reset snippet from one or your refactors, and I think it'd make it a lot easier to deprecate the details component/behavior in favor of the HTML5 elements.

That commit also adopts an approach that @keithamus suggested, minting some new classes: details-content--shown and --hidden vs. Details-content--shown. Maybe it's better to name them details-content--open and details-content--closed to be clearer, but what do you all think about that approach?

[muan]

@shawnbot thanks! I commented on that PR about the reset styles.

[shawnbot]

This is great. It means that folks can prototype with <details> and no JS! Let's get this included in 9.5.0 ASAP.