Accordion: Allow the default caret positions to be changed, for both open & closed, when required

[jasonahern]

Describe what feature you'd like. Pseudo-code, mockups, or screenshots of similar solutions are encouraged!

When an Accordion is used within the AppBar --> sidebarLeft, from a UI perspective it's more natural for the Accordion's default caret position to be pointing towards the right, when closed, for the caret to then point downwards, on open, on a full desktop app.

Granted that the default caret positions make sense when used on mobile, or in the middle of a layout, but when the Accordion is used on the left-hand side of a full desktop layout, the following change feels more natural.

Therefore, please can you consider adding in the ability to do the following :

What type of pull request would this be?

Enhancement

Any links to similar examples or other references we should review?

No response

[endigo9740]

Just a quick note - if we set props to control the reactive rotation states this should provide easy customization:

$: classesCaretState = openState ? 'rotate-180' : '';

Becomes

export let caretOpen = 'rotate-180';
export let caretClosed = '';

$: classesCaretState = openState ? caretOpen : caretClosed;

[endigo9740]

This can now be configured through two new props:

caretOpen = ''
caretClosed = '-rotate-90'

Preview: