fix(Drawer): snap story enter animation clobbers snap-point transform

Problem: when the drawer opens at snap=0.5, the CSS keyframe animation
`drawer-slide-bottom-in` was animating the `transform` property from
translateY(100%) to translateY(0). Because `transform` is the same CSS
property used to apply the snap-point offset, the keyframe clobbered
the inline transform for the full 450ms of the enter animation. The
drawer slid in all the way to translateY(0) (snap=1.0), then the
animation ended and the inline transform reasserted, snapping the
drawer down to translateY(400) (snap=0.5). Visible as a brief "slide
past 50% then drop back" flicker.

Fix: switch the snap-points drawer to a dedicated `drawer-snap-slide-in`
/ `drawer-snap-slide-out` pair keyed on the independent `translate` CSS
property instead of `transform`. `translate` and `transform` are
composable: the keyframe animates `translate: 0 100dvh -> 0 0` while
the inline `transform: translateY(calc(snap-offset + swipe-y))` stays
applied throughout. Enter/exit now slide from below the viewport up to
the active snap point in a single continuous motion.

Only the snap-points drawer needs this; the regular bottom/top/left/
right variants keep the original `transform`-keyframe animations
because they have no snap-point offset to preserve.

Verified in histoire: open at 0.5 slides in to 50%, Snap 100% expands
smoothly via inline transform transition, Snap 50% returns smoothly,
Close slides off-screen. 32/32 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

@@ -473,6 +473,13 @@ const navLinks = [
  * then the snap-point-offset transform slides the popup down to visually
  * reveal only the active snap point's portion. Ported from BaseUI's
  * snap-points demo CSS.
+ *
+ * Enter/exit animations use the independent `translate` CSS property so
+ * they compose with the inline `transform` (which carries the snap point
+ * offset) instead of replacing it. If we used `transform` in the keyframes,
+ * the enter animation would clobber the snap-point transform and the drawer
+ * would briefly slide up to fully-open (snap 1.0) before settling at the
+ * active snap point — a visible flicker.
  */
 .drawer-content-snap {
   position: fixed;
@@ -489,19 +496,25 @@ const navLinks = [
   overflow: visible;
   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;
+  will-change: transform, translate;
 }
 .drawer-content-snap[data-state="open"] {
-  animation: drawer-slide-bottom-in 450ms cubic-bezier(0.32, 0.72, 0, 1);
+  animation: drawer-snap-slide-in 450ms cubic-bezier(0.32, 0.72, 0, 1);
 }
 .drawer-content-snap[data-state="closed"] {
-  animation: drawer-slide-bottom-out 450ms cubic-bezier(0.32, 0.72, 0, 1);
+  animation: drawer-snap-slide-out 450ms cubic-bezier(0.32, 0.72, 0, 1);
 }
 .drawer-content-snap[data-swiping] {
   animation: none;
   transition-duration: 0ms;
   user-select: none;
 }
+@keyframes drawer-snap-slide-in {
+  from { translate: 0 100dvh; }
+}
+@keyframes drawer-snap-slide-out {
+  to { translate: 0 100dvh; }
+}
 .drawer-snap-handle {
   flex-shrink: 0;
 }