Drawer slide-out direction should be reversed in RTL mode

[oliversalzburg]

Describe the bug

When in RTL mode, a drawer set to placement="start" will slide out from the same direction as when in LTR mode. I believe it should slide out from the opposite side.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://plantdb.net/nursery/
2. Click on the language selector in the top right and switch to HE.
3. The drawer slide out icon button is now positioned in the top right.
4. Click the drawer slide out icon.

Screenshots

Browser / OS

• OS: Windows
• Browser: Chrome
• Browser version: 102.0.5005.63

[claviska]

Good call. It should be an easy fix. I can get to it tomorrow if nobody and it’s a PR in the meantime.

[oliversalzburg]

Maybe .sl-toast-stack needs to have the default position logic reversed in RTL as well.

I'll put that in another ticket. Doesn't seem trivial to me.

[claviska]

This was a bit more challenging due to the way animations are defined. Since there's no logical property for translateX, the Animation Registry needed to be refactored to support directionality.

Most of the existing animations don't require a RTL alternative, but customizations could easily require it so I've updated drawer and all other components to support this. I also made dir a required option for getAnimation() to ensure we can't forget it in future animations.

In short, ElementAnimation now supports an optional rtlKeyframes property that will be used when necessary. If rtlKeyframes isn't provided, the registry falls back to keyframes. This allows us to support a simple animation definition for most components, while allowing RTL customizations for those that use CSS properties without logical equivalents.

If anyone is interested in how all this works, refer to the Animation Registry utility: https://github.com/shoelace-style/shoelace/blob/next/src/utilities/animation-registry.ts

[oliversalzburg]

Wow. That is amazing. Excellent work. 👍