fix(Drawer): bounce on drag-release in Default + 4 position variants

The Default story and the 4 Position variants all reproduced the same
animation-restart bug that the Snap Points variant had:

Cause 1: CSS \`animation: none\` on \`[data-swiping]\`

During drag, the \`[data-swiping]\` rule set \`animation: none\`,
transitioning animation-name from e.g. \`drawer-slide-bottom-in\` to
\`none\`. When data-swiping was removed on release, animation-name
went BACK to \`drawer-slide-bottom-in\` — which the browser interprets
as a brand-new animation declaration and restarts from keyframe 0.
The drawer visibly bounced to its off-screen start position
(translateY(100%), translateY(-100%), translateX(-100%),
translateX(100%)) and then slid all the way back after every drag
release.

Cause 2: Keyframes animated \`transform\`

The existing keyframes used \`transform: translateY(100%)\` etc, which
is the same CSS property used to apply the drag offset. Even without
cause 1, any keyframe running on top of the drag would clobber the
inline transform for its duration.

Fix (ported from the earlier Snap Points fix):

- Rewrite all 8 slide keyframes to animate the independent \`translate\`
  CSS property instead of \`transform\`, so they compose with the inline
  \`transform\` on the popup.
- Drop \`animation: none\` from the \`[data-swiping]\` overrides for all
  5 position/default variants. The enter animation is inert within
  450ms of mount, so there's no reason to suppress it during drag.
  We only need to zero transition-duration so the transform transition
  doesn't fight the raw pointer delta.
- Delete the duplicate \`<style>\` block from \`_Drawer.vue\` (it had its
  own copy of the buggy keyframe + the \`animation: none\` rule). The
  Default variant now inherits from \`Drawer.story.vue\`'s global styles
  like every other variant, so the fix lives in exactly one place.

Verified with raf-level instrumentation in histoire at 400x800 for
both the Default (bottom) and Position-Top variants:

  Default + small downward drag to +20px:
    dt=1023 end-of-drag: y=616, transform=translateY(20), tDur=0s
    dt=1197 first release frame: y=616, transform=translateY(20),
            tDur=0.45s  <-- starts exactly where drag ended
    dt=1205: translateY(19.15)
    dt=1213: translateY(18.23)
    ...smooth interpolation to translateY(0)

  Position-Top + small upward drag:
    y=0 -> drag -15px -> release -> settles at translateY(0) cleanly

44/44 tests still passing.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: zernonia

packages/core/src/Drawer/story/Drawer.story.vue

@@ -504,14 +504,21 @@ const navLinks = [
 /* === Keyframes === */
 @keyframes drawer-overlay-in { from { opacity: 0; } }
 @keyframes drawer-overlay-out { to { opacity: 0; } }
-@keyframes drawer-slide-bottom-in { from { transform: translateY(100%); } }
-@keyframes drawer-slide-bottom-out { to { transform: translateY(100%); } }
-@keyframes drawer-slide-top-in { from { transform: translateY(-100%); } }
-@keyframes drawer-slide-top-out { to { transform: translateY(-100%); } }
-@keyframes drawer-slide-left-in { from { transform: translateX(-100%); } }
-@keyframes drawer-slide-left-out { to { transform: translateX(-100%); } }
-@keyframes drawer-slide-right-in { from { transform: translateX(100%); } }
-@keyframes drawer-slide-right-out { to { transform: translateX(100%); } }
+/* Enter/exit keyframes use the independent `translate` CSS property rather
+ * than `transform` so they compose with the inline `transform` (which
+ * carries the live drag offset). If keyframes animated `transform` directly,
+ * they would clobber the drag offset for the duration of the animation,
+ * and any mid-drag release would visibly bounce to the start position of
+ * the keyframe (e.g. translateY(100%) for a bottom drawer) before sliding
+ * back to the final transform. */
+@keyframes drawer-slide-bottom-in { from { translate: 0 100%; } }
+@keyframes drawer-slide-bottom-out { to { translate: 0 100%; } }
+@keyframes drawer-slide-top-in { from { translate: 0 -100%; } }
+@keyframes drawer-slide-top-out { to { translate: 0 -100%; } }
+@keyframes drawer-slide-left-in { from { translate: -100% 0; } }
+@keyframes drawer-slide-left-out { to { translate: -100% 0; } }
+@keyframes drawer-slide-right-in { from { translate: 100% 0; } }
+@keyframes drawer-slide-right-out { to { translate: 100% 0; } }
 
 /* === Overlay === */
 .drawer-overlay {
@@ -736,7 +743,7 @@ const navLinks = [
   animation: drawer-slide-bottom-out 450ms cubic-bezier(0.32, 0.72, 0, 1);
 }
 .drawer-content-bottom[data-swiping] {
-  animation: none;
+  /* See the matching comment on .drawer-content-snap[data-swiping]. */
   transition-duration: 0ms;
   user-select: none;
 }
@@ -763,7 +770,11 @@ const navLinks = [
   animation: drawer-slide-top-out 450ms cubic-bezier(0.32, 0.72, 0, 1);
 }
 .drawer-content-top[data-swiping] {
-  animation: none;
+  /* Do NOT set `animation: none` here — see the matching comment on
+   * .drawer-content-snap[data-swiping] for the full explanation. Toggling
+   * animation-name on drag triggers a full re-run of the enter keyframe on
+   * release, bouncing the drawer to its off-screen start position. */
+  transition-duration: 0ms;
   user-select: none;
 }
 
@@ -789,7 +800,11 @@ const navLinks = [
   animation: drawer-slide-left-out 450ms cubic-bezier(0.32, 0.72, 0, 1);
 }
 .drawer-content-left[data-swiping] {
-  animation: none;
+  /* Do NOT set `animation: none` here — see the matching comment on
+   * .drawer-content-snap[data-swiping] for the full explanation. Toggling
+   * animation-name on drag triggers a full re-run of the enter keyframe on
+   * release, bouncing the drawer to its off-screen start position. */
+  transition-duration: 0ms;
   user-select: none;
 }
 
@@ -815,7 +830,11 @@ const navLinks = [
   animation: drawer-slide-right-out 450ms cubic-bezier(0.32, 0.72, 0, 1);
 }
 .drawer-content-right[data-swiping] {
-  animation: none;
+  /* Do NOT set `animation: none` here — see the matching comment on
+   * .drawer-content-snap[data-swiping] for the full explanation. Toggling
+   * animation-name on drag triggers a full re-run of the enter keyframe on
+   * release, bouncing the drawer to its off-screen start position. */
+  transition-duration: 0ms;
   user-select: none;
 }
 

packages/core/src/Drawer/story/_Drawer.vue

@@ -12,6 +12,12 @@ import {
   DrawerTrigger,
 } from '..'
 
+// Shared "default" drawer used by the Default story variant. All styles
+// (keyframes, .drawer-content-bottom, .drawer-handle, .drawer-overlay,
+// .drawer-button) are defined once in Drawer.story.vue's global <style>
+// block — do not duplicate them here or both rules compete and the
+// enter/exit keyframes collide with the drag transform on release
+// (the "bounce" bug).
 const open = ref(false)
 </script>
 
@@ -41,78 +47,3 @@ const open = ref(false)
     </DrawerPortal>
   </DrawerRoot>
 </template>
-
-<style>
-@keyframes drawer-overlay-in { from { opacity: 0; } }
-@keyframes drawer-overlay-out { to { opacity: 0; } }
-@keyframes drawer-slide-bottom-in {
-  from { transform: translateY(100%); }
-  to { transform: translateY(calc(var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px))); }
-}
-@keyframes drawer-slide-bottom-out { to { transform: translateY(100%); } }
-
-.drawer-overlay {
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.2);
-}
-.drawer-overlay[data-state="open"] {
-  animation: drawer-overlay-in 450ms cubic-bezier(0.32, 0.72, 0, 1);
-}
-.drawer-overlay[data-state="closed"] {
-  animation: drawer-overlay-out 450ms cubic-bezier(0.32, 0.72, 0, 1);
-}
-
-.drawer-content-bottom {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  flex-direction: column;
-  background: white;
-  border-radius: 1rem 1rem 0 0;
-  outline: none;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  transform: translateY(calc(var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px)));
-  transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
-  will-change: transform;
-}
-.drawer-content-bottom[data-state="open"] {
-  animation: drawer-slide-bottom-in 450ms cubic-bezier(0.32, 0.72, 0, 1);
-}
-.drawer-content-bottom[data-state="closed"] {
-  animation: drawer-slide-bottom-out 450ms cubic-bezier(0.32, 0.72, 0, 1);
-}
-.drawer-content-bottom[data-swiping] {
-  animation: none;
-  transition-duration: 0ms;
-  user-select: none;
-}
-
-.drawer-handle {
-  width: 3rem;
-  height: 0.25rem;
-  margin: 1rem auto 0;
-  border-radius: 9999px;
-  background-color: #d1d5db;
-  flex-shrink: 0;
-}
-
-.drawer-button {
-  display: inline-flex;
-  height: 2.5rem;
-  align-items: center;
-  justify-content: center;
-  padding: 0 0.875rem;
-  border: 1px solid #e5e7eb;
-  border-radius: 0.375rem;
-  background: #f9fafb;
-  font-size: 1rem;
-  cursor: pointer;
-}
-.drawer-button:hover {
-  background: #f3f4f6;
-}
-</style>