Add dedicated accordion component

[mdo]

This PR replaces and adds onto #30042. The goal of this is to replace our half-baked card accordion with a fully functioning accordion component, powered by the Collapse plugin. While this adds some CSS, personally I think it makes accordions more widely accessible (e.g., fewer requirements to creating the component).

According to the origin PR by @gijsroge, this does the following:

• Fixes Create standalone accordion component #30015, the original feature request issues
• Fixes Accordion: card-header border bottom hidden by card-body. #28134 by moving the border-bottom from the header to a border-top on the body
• Fixes position:sticky inside accordion #28873 by removing the overflow: hidden; on the .accordion-item
• Fixes .accordion-flush #25811 by adding an .accordion-flush variant (in addition to .accordion-striped, which may not be necessary IMO)

Also from that PR, there were some remaining todos. Design and code are largely final now with my latest changes here. Looking through https://www.w3.org/TR/wai-aria-practices-1.1/#accordion, I think we're largely in order. There's also this handy dandy example accordion they provide.

Preview: https://deploy-preview-32013--twbs-bootstrap.netlify.app/docs/5.0/components/accordion/

---

Some open questions from me now moving this forward:

• Do we need striping here? I think not, and may remove it shortly.
• Any other variations, documentation, etc we should be considering?

/cc @twbs/css-review

[MartijnCuppens]

The bottom border is missing when the last element is collapsing

The bottom border is below the focus state here:

[patrickhlauke]

Just gave this a quick check in terms of accessibility - of course, as it's based on our current one, it's all kosher.

One small request though: would it be possible to ditch the latin placeholder text for some generic english text? Even if it's just something that is self explanatory, like "This is the example content for the accordion panel. It is revealed when the accordion control is activated." or similar? It's not a huge deal, but it avoids having the page all of a sudden switch to absolutely incomprehensible gibberish for screen reader users, for instance.

[MartijnCuppens]

Fixed the remaining bugs by adding an additional accordion-collapse class.

[mdo]

Fixed the remaining bugs by adding an additional accordion-collapse class.

I... think I love you? Thank you for the fixes!

[XhmikosR]

Saved a few more bytes by reordering the SVG attributes :)

[patrickhlauke]

Fixed the remaining bugs by adding an additional accordion-collapse class.

oh, i just noticed that includes also changing the latin text. thank you, top stuff! (funnily enough, I've just written up a bug for another project that also uses lorem ipsum for their demos :) )