@nok-integration/storefront-react 0.19.9 → 0.19.10

package/dist/index.mjs

@@ -10567,24 +10567,24 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
   }
   return unavailable;
 }
-const showcase = "_showcase_1y51o_40";
-const panel = "_panel_1y51o_59";
-const image = "_image_1y51o_88";
-const heroImageBox = "_heroImageBox_1y51o_136";
-const hero = "_hero_1y51o_136";
-const heroContent = "_heroContent_1y51o_207";
-const heroText = "_heroText_1y51o_224";
-const logo = "_logo_1y51o_233";
-const heroTitle = "_heroTitle_1y51o_253";
-const heroSub = "_heroSub_1y51o_277";
-const swipe = "_swipe_1y51o_290";
-const swipeLabel = "_swipeLabel_1y51o_298";
-const chevron$1 = "_chevron_1y51o_304";
-const overlay$1 = "_overlay_1y51o_321";
-const copy = "_copy_1y51o_332";
-const title$2 = "_title_1y51o_337";
-const subtitle$1 = "_subtitle_1y51o_344";
-const cta = "_cta_1y51o_350";
+const showcase = "_showcase_a0wva_39";
+const panel = "_panel_a0wva_43";
+const image = "_image_a0wva_71";
+const heroImageBox = "_heroImageBox_a0wva_119";
+const hero = "_hero_a0wva_119";
+const heroContent = "_heroContent_a0wva_190";
+const heroText = "_heroText_a0wva_207";
+const logo = "_logo_a0wva_216";
+const heroTitle = "_heroTitle_a0wva_236";
+const heroSub = "_heroSub_a0wva_260";
+const swipe = "_swipe_a0wva_273";
+const swipeLabel = "_swipeLabel_a0wva_281";
+const chevron$1 = "_chevron_a0wva_287";
+const overlay$1 = "_overlay_a0wva_304";
+const copy = "_copy_a0wva_315";
+const title$2 = "_title_a0wva_320";
+const subtitle$1 = "_subtitle_a0wva_327";
+const cta = "_cta_a0wva_333";
 const styles$2 = {
   showcase,
   panel,
@@ -10605,41 +10605,35 @@ const styles$2 = {
   subtitle: subtitle$1,
   cta
 };
-const SETTLE_MS = 250;
-function useViewportHeight(ref, property, enabled = true) {
+const SETTLE_MS = 150;
+function useDocumentSnap(ref, enabled = true) {
   useEffect(() => {
     const el = ref.current;
-    if (!el || !enabled) return;
+    if (!el || !enabled || typeof document === "undefined") return;
+    const root2 = document.documentElement;
+    const previousType = root2.style.scrollSnapType;
+    const previousPadding = root2.style.scrollPaddingTop;
     let timer2;
-    const read = () => Math.round(window.visualViewport?.height ?? window.innerHeight);
-    const apply = () => {
-      const height = read();
-      if (height > 0) el.style.setProperty(property, `${height}px`);
-    };
-    const applySettled = () => {
-      const previous = el.clientHeight;
-      const index = previous > 0 ? Math.round(el.scrollTop / previous) : 0;
-      apply();
-      if (el.clientHeight > 0) el.scrollTo({
-        top: index * el.clientHeight,
-        behavior: "auto"
-      });
+    const syncPadding = () => {
+      const top = getComputedStyle(el).getPropertyValue("--showcase-top").trim();
+      root2.style.scrollPaddingTop = top === "" ? "0px" : top;
     };
     const schedule = () => {
       if (timer2) clearTimeout(timer2);
-      timer2 = setTimeout(applySettled, SETTLE_MS);
+      timer2 = setTimeout(syncPadding, SETTLE_MS);
     };
-    apply();
+    root2.style.scrollSnapType = "y mandatory";
+    syncPadding();
     window.addEventListener("resize", schedule);
     window.addEventListener("orientationchange", schedule);
-    window.visualViewport?.addEventListener("resize", schedule);
     return () => {
       if (timer2) clearTimeout(timer2);
       window.removeEventListener("resize", schedule);
       window.removeEventListener("orientationchange", schedule);
-      window.visualViewport?.removeEventListener("resize", schedule);
+      root2.style.scrollSnapType = previousType;
+      root2.style.scrollPaddingTop = previousPadding;
     };
-  }, [ref, property, enabled]);
+  }, [ref, enabled]);
 }
 const FALLBACK_PANELS = [{
   key: "all-items",
@@ -10753,7 +10747,7 @@ function HomeShowcase() {
   const panels = useSlides();
   const showcaseRef = useRef(null);
   useTopOffset(showcaseRef, "--showcase-top");
-  useViewportHeight(showcaseRef, "--showcase-vh");
+  useDocumentSnap(showcaseRef);
   return jsx(ShopSurface, {
     tone: "dark",
     children: jsxs("div", {

package/dist/standalone/storefront.mjs

@@ -10567,24 +10567,24 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
   }
   return unavailable;
 }
-const showcase = "_showcase_1y51o_40";
-const panel = "_panel_1y51o_59";
-const image = "_image_1y51o_88";
-const heroImageBox = "_heroImageBox_1y51o_136";
-const hero = "_hero_1y51o_136";
-const heroContent = "_heroContent_1y51o_207";
-const heroText = "_heroText_1y51o_224";
-const logo = "_logo_1y51o_233";
-const heroTitle = "_heroTitle_1y51o_253";
-const heroSub = "_heroSub_1y51o_277";
-const swipe = "_swipe_1y51o_290";
-const swipeLabel = "_swipeLabel_1y51o_298";
-const chevron$1 = "_chevron_1y51o_304";
-const overlay$1 = "_overlay_1y51o_321";
-const copy = "_copy_1y51o_332";
-const title$2 = "_title_1y51o_337";
-const subtitle$1 = "_subtitle_1y51o_344";
-const cta = "_cta_1y51o_350";
+const showcase = "_showcase_a0wva_39";
+const panel = "_panel_a0wva_43";
+const image = "_image_a0wva_71";
+const heroImageBox = "_heroImageBox_a0wva_119";
+const hero = "_hero_a0wva_119";
+const heroContent = "_heroContent_a0wva_190";
+const heroText = "_heroText_a0wva_207";
+const logo = "_logo_a0wva_216";
+const heroTitle = "_heroTitle_a0wva_236";
+const heroSub = "_heroSub_a0wva_260";
+const swipe = "_swipe_a0wva_273";
+const swipeLabel = "_swipeLabel_a0wva_281";
+const chevron$1 = "_chevron_a0wva_287";
+const overlay$1 = "_overlay_a0wva_304";
+const copy = "_copy_a0wva_315";
+const title$2 = "_title_a0wva_320";
+const subtitle$1 = "_subtitle_a0wva_327";
+const cta = "_cta_a0wva_333";
 const styles$2 = {
   showcase,
   panel,
@@ -10605,41 +10605,35 @@ const styles$2 = {
   subtitle: subtitle$1,
   cta
 };
-const SETTLE_MS = 250;
-function useViewportHeight(ref, property, enabled = true) {
+const SETTLE_MS = 150;
+function useDocumentSnap(ref, enabled = true) {
   useEffect(() => {
     const el = ref.current;
-    if (!el || !enabled) return;
+    if (!el || !enabled || typeof document === "undefined") return;
+    const root2 = document.documentElement;
+    const previousType = root2.style.scrollSnapType;
+    const previousPadding = root2.style.scrollPaddingTop;
     let timer2;
-    const read = () => Math.round(window.visualViewport?.height ?? window.innerHeight);
-    const apply = () => {
-      const height = read();
-      if (height > 0) el.style.setProperty(property, `${height}px`);
-    };
-    const applySettled = () => {
-      const previous = el.clientHeight;
-      const index = previous > 0 ? Math.round(el.scrollTop / previous) : 0;
-      apply();
-      if (el.clientHeight > 0) el.scrollTo({
-        top: index * el.clientHeight,
-        behavior: "auto"
-      });
+    const syncPadding = () => {
+      const top = getComputedStyle(el).getPropertyValue("--showcase-top").trim();
+      root2.style.scrollPaddingTop = top === "" ? "0px" : top;
     };
     const schedule = () => {
       if (timer2) clearTimeout(timer2);
-      timer2 = setTimeout(applySettled, SETTLE_MS);
+      timer2 = setTimeout(syncPadding, SETTLE_MS);
     };
-    apply();
+    root2.style.scrollSnapType = "y mandatory";
+    syncPadding();
     window.addEventListener("resize", schedule);
     window.addEventListener("orientationchange", schedule);
-    window.visualViewport?.addEventListener("resize", schedule);
     return () => {
       if (timer2) clearTimeout(timer2);
       window.removeEventListener("resize", schedule);
       window.removeEventListener("orientationchange", schedule);
-      window.visualViewport?.removeEventListener("resize", schedule);
+      root2.style.scrollSnapType = previousType;
+      root2.style.scrollPaddingTop = previousPadding;
     };
-  }, [ref, property, enabled]);
+  }, [ref, enabled]);
 }
 const FALLBACK_PANELS = [{
   key: "all-items",
@@ -10753,7 +10747,7 @@ function HomeShowcase() {
   const panels = useSlides();
   const showcaseRef = useRef(null);
   useTopOffset(showcaseRef, "--showcase-top");
-  useViewportHeight(showcaseRef, "--showcase-vh");
+  useDocumentSnap(showcaseRef);
   return jsx(ShopSurface, {
     tone: "dark",
     children: jsxs("div", {

package/dist/standalone/styles.css

@@ -3399,31 +3399,22 @@
   column-gap: var(--space-12);
   row-gap: var(--space-24);
 }
-._showcase_1y51o_40 {
-  height: calc(var(--showcase-vh, 100svh) - var(--showcase-top, 0px));
-  overflow-y: auto;
-  scroll-snap-type: y mandatory;
-  overscroll-behavior-y: contain;
-  -webkit-overflow-scrolling: touch;
+._showcase_a0wva_39 {
   background: #080e12;
-  scrollbar-width: none;
-}
-._showcase_1y51o_40::-webkit-scrollbar {
-  display: none;
 }
-._panel_1y51o_59 {
+._panel_a0wva_43 {
   position: relative;
-  height: calc(var(--showcase-vh, 100svh) - var(--showcase-top, 0px));
+  height: calc(100lvh - var(--showcase-top, 0px));
   scroll-snap-align: start;
   scroll-snap-stop: always;
   overflow: hidden;
   background: #080e12;
 }
-._image_1y51o_88 {
+._image_a0wva_71 {
   object-fit: cover;
   object-position: 50% var(--slide-focal-y, 50%);
 }
-._heroImageBox_1y51o_136 {
+._heroImageBox_a0wva_119 {
   position: absolute;
   top: 31px;
   left: 0;
@@ -3431,7 +3422,7 @@
   aspect-ratio: 750 / 1348;
   overflow: hidden;
 }
-._hero_1y51o_136::after {
+._hero_a0wva_119::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -3446,10 +3437,10 @@
       rgba(8, 14, 18, 1) 90%);
   pointer-events: none;
 }
-._hero_1y51o_136 ._image_1y51o_88 {
+._hero_a0wva_119 ._image_a0wva_71 {
   object-position: top;
 }
-._hero_1y51o_136 ._heroContent_1y51o_207 {
+._hero_a0wva_119 ._heroContent_a0wva_190 {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -3460,7 +3451,7 @@
   gap: 24px;
   align-items: stretch;
 }
-._heroText_1y51o_224 {
+._heroText_a0wva_207 {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -3468,11 +3459,11 @@
   padding: 0 24px;
   text-align: center;
 }
-._heroText_1y51o_224 ._logo_1y51o_233 {
+._heroText_a0wva_207 ._logo_a0wva_216 {
   width: 48px;
   height: 48px;
 }
-._heroTitle_1y51o_253 {
+._heroTitle_a0wva_236 {
   width: 100%;
   margin: 0;
   font-family:
@@ -3487,14 +3478,14 @@
   letter-spacing: -1.12px;
   color: #f9fafa;
 }
-._heroSub_1y51o_277 {
+._heroSub_a0wva_260 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
   max-width: 327px;
 }
-._swipe_1y51o_290 {
+._swipe_a0wva_273 {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -3502,19 +3493,19 @@
   padding: 8px 0;
   background: #080e12;
 }
-._swipeLabel_1y51o_298 {
+._swipeLabel_a0wva_281 {
   margin: 0;
   font-size: 14px;
   line-height: 1;
   color: rgba(255, 255, 255, 0.54);
 }
-._chevron_1y51o_304 {
+._chevron_a0wva_287 {
   width: 24px;
   height: 24px;
   color: rgba(255, 255, 255, 0.54);
-  animation: _bob_1y51o_1 1.8s ease-in-out infinite;
+  animation: _bob_a0wva_1 1.8s ease-in-out infinite;
 }
-@keyframes _bob_1y51o_1 {
+@keyframes _bob_a0wva_1 {
   0%, 100% {
     transform: translateY(0);
   }
@@ -3522,7 +3513,7 @@
     transform: translateY(4px);
   }
 }
-._overlay_1y51o_321 {
+._overlay_a0wva_304 {
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -3533,25 +3524,25 @@
   align-items: flex-start;
   padding: 0 24px 24px;
 }
-._copy_1y51o_332 {
+._copy_a0wva_315 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._title_1y51o_337 {
+._title_a0wva_320 {
   margin: 0;
   font-size: 32px;
   line-height: 1.2;
   font-weight: 700;
   color: #f9fafa;
 }
-._subtitle_1y51o_344 {
+._subtitle_a0wva_327 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
 }
-._cta_1y51o_350 {
+._cta_a0wva_333 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3565,15 +3556,15 @@
   font-weight: 700;
   text-decoration: none;
 }
-._cta_1y51o_350::after {
+._cta_a0wva_333::after {
   content: "";
   position: absolute;
   inset: 0;
 }
-._cta_1y51o_350:active {
+._cta_a0wva_333:active {
   background: rgba(249, 250, 250, 0.12);
 }
-._cta_1y51o_350:focus-visible {
+._cta_a0wva_333:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }

package/dist/styles.css

@@ -3399,31 +3399,22 @@
   column-gap: var(--space-12);
   row-gap: var(--space-24);
 }
-._showcase_1y51o_40 {
-  height: calc(var(--showcase-vh, 100svh) - var(--showcase-top, 0px));
-  overflow-y: auto;
-  scroll-snap-type: y mandatory;
-  overscroll-behavior-y: contain;
-  -webkit-overflow-scrolling: touch;
+._showcase_a0wva_39 {
   background: #080e12;
-  scrollbar-width: none;
-}
-._showcase_1y51o_40::-webkit-scrollbar {
-  display: none;
 }
-._panel_1y51o_59 {
+._panel_a0wva_43 {
   position: relative;
-  height: calc(var(--showcase-vh, 100svh) - var(--showcase-top, 0px));
+  height: calc(100lvh - var(--showcase-top, 0px));
   scroll-snap-align: start;
   scroll-snap-stop: always;
   overflow: hidden;
   background: #080e12;
 }
-._image_1y51o_88 {
+._image_a0wva_71 {
   object-fit: cover;
   object-position: 50% var(--slide-focal-y, 50%);
 }
-._heroImageBox_1y51o_136 {
+._heroImageBox_a0wva_119 {
   position: absolute;
   top: 31px;
   left: 0;
@@ -3431,7 +3422,7 @@
   aspect-ratio: 750 / 1348;
   overflow: hidden;
 }
-._hero_1y51o_136::after {
+._hero_a0wva_119::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -3446,10 +3437,10 @@
       rgba(8, 14, 18, 1) 90%);
   pointer-events: none;
 }
-._hero_1y51o_136 ._image_1y51o_88 {
+._hero_a0wva_119 ._image_a0wva_71 {
   object-position: top;
 }
-._hero_1y51o_136 ._heroContent_1y51o_207 {
+._hero_a0wva_119 ._heroContent_a0wva_190 {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -3460,7 +3451,7 @@
   gap: 24px;
   align-items: stretch;
 }
-._heroText_1y51o_224 {
+._heroText_a0wva_207 {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -3468,11 +3459,11 @@
   padding: 0 24px;
   text-align: center;
 }
-._heroText_1y51o_224 ._logo_1y51o_233 {
+._heroText_a0wva_207 ._logo_a0wva_216 {
   width: 48px;
   height: 48px;
 }
-._heroTitle_1y51o_253 {
+._heroTitle_a0wva_236 {
   width: 100%;
   margin: 0;
   font-family:
@@ -3487,14 +3478,14 @@
   letter-spacing: -1.12px;
   color: #f9fafa;
 }
-._heroSub_1y51o_277 {
+._heroSub_a0wva_260 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
   max-width: 327px;
 }
-._swipe_1y51o_290 {
+._swipe_a0wva_273 {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -3502,19 +3493,19 @@
   padding: 8px 0;
   background: #080e12;
 }
-._swipeLabel_1y51o_298 {
+._swipeLabel_a0wva_281 {
   margin: 0;
   font-size: 14px;
   line-height: 1;
   color: rgba(255, 255, 255, 0.54);
 }
-._chevron_1y51o_304 {
+._chevron_a0wva_287 {
   width: 24px;
   height: 24px;
   color: rgba(255, 255, 255, 0.54);
-  animation: _bob_1y51o_1 1.8s ease-in-out infinite;
+  animation: _bob_a0wva_1 1.8s ease-in-out infinite;
 }
-@keyframes _bob_1y51o_1 {
+@keyframes _bob_a0wva_1 {
   0%, 100% {
     transform: translateY(0);
   }
@@ -3522,7 +3513,7 @@
     transform: translateY(4px);
   }
 }
-._overlay_1y51o_321 {
+._overlay_a0wva_304 {
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -3533,25 +3524,25 @@
   align-items: flex-start;
   padding: 0 24px 24px;
 }
-._copy_1y51o_332 {
+._copy_a0wva_315 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._title_1y51o_337 {
+._title_a0wva_320 {
   margin: 0;
   font-size: 32px;
   line-height: 1.2;
   font-weight: 700;
   color: #f9fafa;
 }
-._subtitle_1y51o_344 {
+._subtitle_a0wva_327 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
 }
-._cta_1y51o_350 {
+._cta_a0wva_333 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3565,15 +3556,15 @@
   font-weight: 700;
   text-decoration: none;
 }
-._cta_1y51o_350::after {
+._cta_a0wva_333::after {
   content: "";
   position: absolute;
   inset: 0;
 }
-._cta_1y51o_350:active {
+._cta_a0wva_333:active {
   background: rgba(249, 250, 250, 0.12);
 }
-._cta_1y51o_350:focus-visible {
+._cta_a0wva_333:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nok-integration/storefront-react",
-  "version": "0.19.9",
+  "version": "0.19.10",
   "description": "Mountable React storefront components: catalogue, product detail and cart, mounted directly into a host DOM tree. No iframe.",
   "license": "UNLICENSED",
   "type": "module",