fixes #867

docs/resources/changelog.md

@@ -18,6 +18,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug in `<sl-tree>` where dynamically changing slotted items wouldn't update the tree properly
 - Fixed a bug in `<sl-split-panel>` that caused the panel to stack when clicking on the divider in mobile versions of Chrome [#862](https://github.com/shoelace-style/shoelace/issues/862)
 - Fixed a bug in `<sl-popup>` that prevented flip fallbacks from working as intended
+- Fixed a bug that caused concurrent animations to work incorrectly when the durations were different [#867](https://github.com/shoelace-style/shoelace/issues/867)
 - Improved single selection in `<sl-tree>` so nodes expand and collapse and receive selection when clicking on the label
 - Renamed `expanded-icon` and `collapsed-icon` slots to `expand-icon` and `collapse-icon` in the experimental `<sl-tree>` and `<sl-tree-item>` components
 - Improved RTL support for `<sl-image-comparer>`

src/internal/animate.ts

@@ -9,7 +9,8 @@ export function animateTo(el: HTMLElement, keyframes: Keyframe[], options?: Keyf
 
     const animation = el.animate(keyframes, {
       ...options,
-      duration: prefersReducedMotion() ? 0 : options!.duration
+      duration: prefersReducedMotion() ? 0 : options!.duration,
+      fill: 'forwards'
     });
 
     animation.addEventListener('cancel', resolve, { once: true });