@xenia-martech/sdk-js 1.0.0-dev.28 → 1.0.0-dev.30

package/dist/client/react/index.js

@@ -1366,6 +1366,9 @@ function crossFadeReveal(outgoing, incoming) {
     el.style.opacity = "0";
     el.style.transform = revealTransform(0.94, -60);
   });
+  inContent.forEach((el) => {
+    if (el instanceof HTMLElement) void el.offsetHeight;
+  });
   nextFrame(() => {
     outContent.forEach((el) => {
       if (!(el instanceof HTMLElement)) return;
@@ -1819,6 +1822,17 @@ var STYLES = `
   border: 0; border-radius: var(--xenia-cta-radius, 8px); padding: var(--xenia-cta-padding, 8px 14px);
   font-size: var(--xenia-cta-size, 14px); font-family: inherit; cursor: pointer; }
 .xenia-wheel-spin:disabled { opacity: 0.6; cursor: default; }
+/* The spinner face and the win/loss screens are siblings toggled via the 'hidden' attribute \u2014
+   during crossFadeReveal's ~320ms crossfade, BOTH the outgoing and incoming screen are visible
+   (not hidden) at once, so without this they'd stack in normal block flow and roughly double
+   this box's height for that window. Since .xenia-modal's flexbox re-centers on every height
+   change, that briefly-doubled height yanks the whole card to a new position with ZERO
+   animation \u2014 right before the scale-down transition starts animating smoothly from that
+   already-jumped spot, reading as "not scaling from center". Grid-stacking every child into the
+   same cell (sized to the tallest non-hidden one) makes the outgoing/incoming screens overlay in
+   place instead of stacking, so there is no discrete height jump to correct for. */
+.xenia-spin-wheel { display: grid; }
+.xenia-spin-wheel > * { grid-area: 1 / 1; }
 /* No animation/transform here \u2014 spin-wheel's win/loss screens are ALWAYS full
    custom HTML now (winHtml/lossHtml), never this class's own generated icon/title/prize/cta
    content (those sub-classes below are unreachable dead CSS, kept only for backwards-compat with