@nok-integration/storefront-react 0.18.0 → 0.18.2

package/dist/index.d.ts

@@ -3580,9 +3580,14 @@ export declare interface OrderConfirmationViewProps {
     /**
      * The frame's "Done". Omit it and no button renders.
      *
-     * Where it goes is the host's: in the embed this is the end of a checkout DAZN own, so
-     * only they know whether it closes the webview, returns to the shop, or goes somewhere
-     * else entirely.
+     * **It leaves the shop.** DAZN settled this on 21 Aug 2026: "Done = DAZN home, X = DAZN
+     * Shop home". The two are not the same destination and wiring both to the shop home —
+     * which is what the first integration did — loses the only way out of the shop at the
+     * end of a purchase.
+     *
+     * We cannot make that trip ourselves: the DAZN app's own home is not a route on our
+     * `/v1` surface and not something a `navigate('/')` can reach. So this stays the host's
+     * callback, and the header's `onClose` is the one that goes to the shop home.
      */
     onDone?: () => void;
 }

package/dist/index.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useRef, useCallback, useMemo, useEffect, useContext, createContext, forwardRef, useState } from "react";
+import { useContext, useEffect, useState, useRef, useCallback, useMemo, createContext, forwardRef } from "react";
 var client = {};
 var catalog = {};
 var zod = {};
@@ -5542,6 +5542,38 @@ function withAuthorization(init, token) {
   headers.set("authorization", `Bearer ${token}`);
   return { ...init, headers };
 }
+const ScreenTitleContext = createContext({ title: void 0, claim: () => () => {
+} });
+const SuppressedContext = createContext(false);
+function ScreenTitleProvider({ children }) {
+  const [title2, setTitle] = useState(void 0);
+  const held = useRef(void 0);
+  const claim = useCallback((next) => {
+    held.current = next;
+    setTitle(next);
+    return () => {
+      if (held.current !== next) return;
+      held.current = void 0;
+      setTitle(void 0);
+    };
+  }, []);
+  const value2 = useMemo(() => ({ title: title2, claim }), [title2, claim]);
+  return /* @__PURE__ */ jsx(ScreenTitleContext.Provider, { value: value2, children });
+}
+function useScreenTitle() {
+  return useContext(ScreenTitleContext).title;
+}
+function useSetScreenTitle(title2) {
+  const { claim } = useContext(ScreenTitleContext);
+  const suppressed = useContext(SuppressedContext);
+  useEffect(() => {
+    if (suppressed || title2 === void 0) return;
+    return claim(title2);
+  }, [claim, title2, suppressed]);
+}
+function NoScreenTitle({ children }) {
+  return /* @__PURE__ */ jsx(SuppressedContext.Provider, { value: true, children });
+}
 const ShopContext = createContext(null);
 function DaznShopProvider({
   children,
@@ -5631,7 +5663,7 @@ function DaznShopProvider({
     }),
     [api, market, theme, notifications, locale, assetBaseUrl, emit, subscribe, navigate]
   );
-  return /* @__PURE__ */ jsx(ShopContext.Provider, { value: value2, children });
+  return /* @__PURE__ */ jsx(ShopContext.Provider, { value: value2, children: /* @__PURE__ */ jsx(ScreenTitleProvider, { children }) });
 }
 function useShopOptional() {
   return useContext(ShopContext);
@@ -7542,6 +7574,19 @@ const styles$w = {
 function OrderConfirmationView(props) {
   return /* @__PURE__ */ jsx(ShopSurface, { tone: "light", fill: true, children: /* @__PURE__ */ jsx(OrderConfirmationContent, { ...props }) });
 }
+const CONFIRMATION_LABELS = {
+  packing: "Order placed",
+  on_its_way: "On the way"
+};
+function confirmationProgress(progress2) {
+  return progress2.map((entry) => {
+    if (entry.step === "delivered" && !entry.at) {
+      return { ...entry, label: "Estimated delivery" };
+    }
+    const relabelled = CONFIRMATION_LABELS[entry.step];
+    return relabelled ? { ...entry, label: relabelled } : { ...entry };
+  });
+}
 function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
   const { api } = useShop();
   const locale = useLocale(localeProp);
@@ -7581,7 +7626,7 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
       /* @__PURE__ */ jsx(
         OrderTimeline,
         {
-          progress: order.progress,
+          progress: confirmationProgress(order.progress),
           ...order.estimated_delivery ? { estimatedDelivery: order.estimated_delivery } : {},
           locale
         }
@@ -8454,6 +8499,7 @@ const styles$j = {
   lines
 };
 function CartView(props = {}) {
+  useSetScreenTitle("Cart");
   return /* @__PURE__ */ jsx(ShopSurface, { tone: "light", fill: true, className: styles$j.surface, children: /* @__PURE__ */ jsx(CartViewContent, { ...props }) });
 }
 function CartViewContent({
@@ -8644,7 +8690,7 @@ function CartSheetProvider({ children }) {
   const api = useMemo(() => ({ open, close: close2, isOpen }), [open, close2, isOpen]);
   return /* @__PURE__ */ jsxs(CartSheetContext.Provider, { value: api, children: [
     children,
-    isOpen && /* @__PURE__ */ jsx(BottomSheet, { open: true, onClose: close2, title: "Cart", children: /* @__PURE__ */ jsx(CartView, { onContinueShopping: close2 }) })
+    isOpen && /* @__PURE__ */ jsx(BottomSheet, { open: true, onClose: close2, title: "Cart", children: /* @__PURE__ */ jsx(NoScreenTitle, { children: /* @__PURE__ */ jsx(CartView, { onContinueShopping: close2 }) }) })
   ] });
 }
 const gallery = "_gallery_10mch_1";
@@ -10005,17 +10051,17 @@ function useCartCount() {
   }, [subscribe]);
   return count2;
 }
-const header$1 = "_header_oq0bd_25";
-const floating = "_floating_oq0bd_44";
-const scrolled = "_scrolled_oq0bd_87";
-const title$1 = "_title_oq0bd_161";
-const right = "_right_oq0bd_174";
-const spacer = "_spacer_oq0bd_187";
-const iconBtn = "_iconBtn_oq0bd_192";
-const menuBtn = "_menuBtn_oq0bd_219";
-const badge = "_badge_oq0bd_247";
-const closeSlot = "_closeSlot_oq0bd_274";
-const centred = "_centred_oq0bd_289";
+const header$1 = "_header_1yjrk_25";
+const floating = "_floating_1yjrk_44";
+const scrolled = "_scrolled_1yjrk_79";
+const title$1 = "_title_1yjrk_172";
+const right = "_right_1yjrk_185";
+const spacer = "_spacer_1yjrk_198";
+const iconBtn = "_iconBtn_1yjrk_203";
+const menuBtn = "_menuBtn_1yjrk_230";
+const badge = "_badge_1yjrk_258";
+const closeSlot = "_closeSlot_1yjrk_285";
+const centred = "_centred_1yjrk_300";
 const styles$1 = {
   header: header$1,
   floating,
@@ -10124,6 +10170,8 @@ function ShopBar({
   className
 }) {
   const cartCount = useCartCount();
+  const screenTitle = useScreenTitle();
+  const shownTitle = title2 ?? screenTitle;
   const atTop = useScrolledUnder(floating2 && scrolled2 === void 0);
   const isScrolled = scrolled2 ?? atTop;
   const cartLabel = cartCount === null ? "Cart" : cartCount === 0 ? "Cart, empty" : `Cart, ${cartCount} item${cartCount === 1 ? "" : "s"}`;
@@ -10135,7 +10183,7 @@ function ShopBar({
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("header", { className: classes, children: [
     onBack ? /* @__PURE__ */ jsx("button", { type: "button", className: styles$1.iconBtn, "aria-label": backLabel, onClick: onBack, children: /* @__PURE__ */ jsx(ChevronLeft, {}) }) : /* @__PURE__ */ jsx("span", { className: styles$1.spacer, "aria-hidden": "true" }),
-    title2 ? /* @__PURE__ */ jsx("span", { className: styles$1.title, children: title2 }) : null,
+    shownTitle ? /* @__PURE__ */ jsx("span", { className: styles$1.title, children: shownTitle }) : null,
     /* @__PURE__ */ jsxs("div", { className: styles$1.right, children: [
       showCart ? /* @__PURE__ */ jsxs(CartTrigger, { className: styles$1.iconBtn, "aria-label": cartLabel, children: [
         /* @__PURE__ */ jsx(CartIcon, {}),

package/dist/standalone/storefront.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useRef, useCallback, useMemo, useEffect, useContext, createContext, forwardRef, useState } from "react";
+import { useContext, useEffect, useState, useRef, useCallback, useMemo, createContext, forwardRef } from "react";
 var client = {};
 var catalog = {};
 var zod = {};
@@ -5542,6 +5542,38 @@ function withAuthorization(init, token) {
   headers.set("authorization", `Bearer ${token}`);
   return { ...init, headers };
 }
+const ScreenTitleContext = createContext({ title: void 0, claim: () => () => {
+} });
+const SuppressedContext = createContext(false);
+function ScreenTitleProvider({ children }) {
+  const [title2, setTitle] = useState(void 0);
+  const held = useRef(void 0);
+  const claim = useCallback((next) => {
+    held.current = next;
+    setTitle(next);
+    return () => {
+      if (held.current !== next) return;
+      held.current = void 0;
+      setTitle(void 0);
+    };
+  }, []);
+  const value2 = useMemo(() => ({ title: title2, claim }), [title2, claim]);
+  return /* @__PURE__ */ jsx(ScreenTitleContext.Provider, { value: value2, children });
+}
+function useScreenTitle() {
+  return useContext(ScreenTitleContext).title;
+}
+function useSetScreenTitle(title2) {
+  const { claim } = useContext(ScreenTitleContext);
+  const suppressed = useContext(SuppressedContext);
+  useEffect(() => {
+    if (suppressed || title2 === void 0) return;
+    return claim(title2);
+  }, [claim, title2, suppressed]);
+}
+function NoScreenTitle({ children }) {
+  return /* @__PURE__ */ jsx(SuppressedContext.Provider, { value: true, children });
+}
 const ShopContext = createContext(null);
 function DaznShopProvider({
   children,
@@ -5631,7 +5663,7 @@ function DaznShopProvider({
     }),
     [api, market, theme, notifications, locale, assetBaseUrl, emit, subscribe, navigate]
   );
-  return /* @__PURE__ */ jsx(ShopContext.Provider, { value: value2, children });
+  return /* @__PURE__ */ jsx(ShopContext.Provider, { value: value2, children: /* @__PURE__ */ jsx(ScreenTitleProvider, { children }) });
 }
 function useShopOptional() {
   return useContext(ShopContext);
@@ -7542,6 +7574,19 @@ const styles$w = {
 function OrderConfirmationView(props) {
   return /* @__PURE__ */ jsx(ShopSurface, { tone: "light", fill: true, children: /* @__PURE__ */ jsx(OrderConfirmationContent, { ...props }) });
 }
+const CONFIRMATION_LABELS = {
+  packing: "Order placed",
+  on_its_way: "On the way"
+};
+function confirmationProgress(progress2) {
+  return progress2.map((entry) => {
+    if (entry.step === "delivered" && !entry.at) {
+      return { ...entry, label: "Estimated delivery" };
+    }
+    const relabelled = CONFIRMATION_LABELS[entry.step];
+    return relabelled ? { ...entry, label: relabelled } : { ...entry };
+  });
+}
 function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
   const { api } = useShop();
   const locale = useLocale(localeProp);
@@ -7581,7 +7626,7 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
       /* @__PURE__ */ jsx(
         OrderTimeline,
         {
-          progress: order.progress,
+          progress: confirmationProgress(order.progress),
           ...order.estimated_delivery ? { estimatedDelivery: order.estimated_delivery } : {},
           locale
         }
@@ -8454,6 +8499,7 @@ const styles$j = {
   lines
 };
 function CartView(props = {}) {
+  useSetScreenTitle("Cart");
   return /* @__PURE__ */ jsx(ShopSurface, { tone: "light", fill: true, className: styles$j.surface, children: /* @__PURE__ */ jsx(CartViewContent, { ...props }) });
 }
 function CartViewContent({
@@ -8644,7 +8690,7 @@ function CartSheetProvider({ children }) {
   const api = useMemo(() => ({ open, close: close2, isOpen }), [open, close2, isOpen]);
   return /* @__PURE__ */ jsxs(CartSheetContext.Provider, { value: api, children: [
     children,
-    isOpen && /* @__PURE__ */ jsx(BottomSheet, { open: true, onClose: close2, title: "Cart", children: /* @__PURE__ */ jsx(CartView, { onContinueShopping: close2 }) })
+    isOpen && /* @__PURE__ */ jsx(BottomSheet, { open: true, onClose: close2, title: "Cart", children: /* @__PURE__ */ jsx(NoScreenTitle, { children: /* @__PURE__ */ jsx(CartView, { onContinueShopping: close2 }) }) })
   ] });
 }
 const gallery = "_gallery_10mch_1";
@@ -10005,17 +10051,17 @@ function useCartCount() {
   }, [subscribe]);
   return count2;
 }
-const header$1 = "_header_oq0bd_25";
-const floating = "_floating_oq0bd_44";
-const scrolled = "_scrolled_oq0bd_87";
-const title$1 = "_title_oq0bd_161";
-const right = "_right_oq0bd_174";
-const spacer = "_spacer_oq0bd_187";
-const iconBtn = "_iconBtn_oq0bd_192";
-const menuBtn = "_menuBtn_oq0bd_219";
-const badge = "_badge_oq0bd_247";
-const closeSlot = "_closeSlot_oq0bd_274";
-const centred = "_centred_oq0bd_289";
+const header$1 = "_header_1yjrk_25";
+const floating = "_floating_1yjrk_44";
+const scrolled = "_scrolled_1yjrk_79";
+const title$1 = "_title_1yjrk_172";
+const right = "_right_1yjrk_185";
+const spacer = "_spacer_1yjrk_198";
+const iconBtn = "_iconBtn_1yjrk_203";
+const menuBtn = "_menuBtn_1yjrk_230";
+const badge = "_badge_1yjrk_258";
+const closeSlot = "_closeSlot_1yjrk_285";
+const centred = "_centred_1yjrk_300";
 const styles$1 = {
   header: header$1,
   floating,
@@ -10124,6 +10170,8 @@ function ShopBar({
   className
 }) {
   const cartCount = useCartCount();
+  const screenTitle = useScreenTitle();
+  const shownTitle = title2 ?? screenTitle;
   const atTop = useScrolledUnder(floating2 && scrolled2 === void 0);
   const isScrolled = scrolled2 ?? atTop;
   const cartLabel = cartCount === null ? "Cart" : cartCount === 0 ? "Cart, empty" : `Cart, ${cartCount} item${cartCount === 1 ? "" : "s"}`;
@@ -10135,7 +10183,7 @@ function ShopBar({
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("header", { className: classes, children: [
     onBack ? /* @__PURE__ */ jsx("button", { type: "button", className: styles$1.iconBtn, "aria-label": backLabel, onClick: onBack, children: /* @__PURE__ */ jsx(ChevronLeft, {}) }) : /* @__PURE__ */ jsx("span", { className: styles$1.spacer, "aria-hidden": "true" }),
-    title2 ? /* @__PURE__ */ jsx("span", { className: styles$1.title, children: title2 }) : null,
+    shownTitle ? /* @__PURE__ */ jsx("span", { className: styles$1.title, children: shownTitle }) : null,
     /* @__PURE__ */ jsxs("div", { className: styles$1.right, children: [
       showCart ? /* @__PURE__ */ jsxs(CartTrigger, { className: styles$1.iconBtn, "aria-label": cartLabel, children: [
         /* @__PURE__ */ jsx(CartIcon, {}),

package/dist/standalone/styles.css

@@ -5384,7 +5384,7 @@
  * the sticky CTA bar (50), the size-guide sheet (60), the bottom sheets (900) and the
  * toast (1000).
  */
-._header_oq0bd_25 {
+._header_1yjrk_25 {
   position: sticky;
   top: 0;
   z-index: 40;
@@ -5426,24 +5426,35 @@
 /*
  * Overlaid rather than stacked, for screens whose artwork runs to the top of the display.
  *
- * `absolute`, so this deliberately opts OUT of the sticky default above: the category
- * hero scrolls away under its own title and a bar pinned over a photograph that is no
- * longer there would be a bar floating on nothing.
+ * Overlaid is about the ARTWORK, not about staying on screen. `mobile/hero` carries its
+ * own `mobile/header` instance at y=0, hidden, and positions the category title at y=106 —
+ * measured from the top of the SCREEN, not from under a bar. In flow the header pushes the
+ * picture down and every measurement inside it lands a bar height low, which is how the
+ * category page shipped.
  *
- * `mobile/hero` carries its own `mobile/header` instance at y=0, hidden, and positions the
- * category title at y=106 — measured from the top of the SCREEN, not from under a bar. In
- * flow the header pushes the picture down and every measurement inside it lands a bar
- * height low,
- * which is how the category page shipped.
+ * So it is taken out of the flow with a negative margin rather than with `absolute`, and
+ * it keeps the sticky default. This was `position: absolute` until 21 Aug 2026, and that
+ * scrolled the bar off the top of a category page: the back chevron, the cart badge and
+ * the menu were reachable only by scrolling back up. DAZN reported it.
+ *
+ * The give-away was in the component itself — a bar that had left the screen was still
+ * switching to `.scrolled` and painting a scrim on nothing. That state only means anything
+ * for a bar that is still there. It looked correct on the shop entry because the entry
+ * scrolls its own snap scroller and never the document, so `absolute` never moved.
+ *
+ * `sticky` rather than `fixed`: we are mounted in someone else's page, under chrome of
+ * theirs we cannot see. `fixed` pins to the viewport and would sit on top of it. Sticky
+ * stays inside our own box, wherever the host has put it.
  *
  * Declared after `.header` so it wins the background: both are one class, so the later
  * rule takes it.
  */
-._floating_oq0bd_44 {
-  position: absolute;
+._floating_1yjrk_44 {
+  position: sticky;
   top: 0;
-  left: 0;
-  right: 0;
+  /* Out of the flow without leaving it: the artwork below starts at y=0 and is drawn
+     under the bar, which is what `absolute` was really buying. */
+  margin-bottom: calc(-1 * var(--header-height));
   z-index: 5;
   /*
    * Clear at rest. The scrim belongs to `.scrolled` below.
@@ -5495,12 +5506,12 @@
  * Fixed rather than tokenised, like the hero's own palette: it is drawn over a photograph
  * and does not follow the surface.
  */
-._floating_oq0bd_44._scrolled_oq0bd_87 {
+._floating_1yjrk_44._scrolled_1yjrk_79 {
   background: rgba(8, 14, 18, 0.6);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  ._floating_oq0bd_44 {
+  ._floating_1yjrk_44 {
     transition: none;
   }
 }
@@ -5520,7 +5531,7 @@
  * the dark screens, and the light PDP header (5295:75116) has an empty title slot. Written
  * as a static white it would be invisible the first time a host passed one on a light page.
  */
-._title_oq0bd_161 {
+._title_1yjrk_172 {
   flex: 0 0 auto;
   width: 222px;
   min-width: 0;
@@ -5533,7 +5544,7 @@
   white-space: nowrap;
 }
 
-._right_oq0bd_174 {
+._right_1yjrk_185 {
   display: flex;
   align-items: center;
   gap: var(--space-16);
@@ -5546,12 +5557,12 @@
  * header without a back button would silently re-lay-out rather than simply losing one
  * icon. 24px is the icon box it stands in for.
  */
-._spacer_oq0bd_187 {
+._spacer_1yjrk_198 {
   width: 24px;
   height: 24px;
 }
 
-._iconBtn_oq0bd_192 {
+._iconBtn_1yjrk_203 {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -5567,7 +5578,7 @@
 }
 
 /* Expand the hit area to >=44px without moving the 24px icon off the 16px inset. */
-._iconBtn_oq0bd_192::after {
+._iconBtn_1yjrk_203::after {
   content: '';
   position: absolute;
   inset: -10px;
@@ -5578,12 +5589,12 @@
  * its glyph on the design's centre line — 16px from the right edge, not 12. Its own icon
  * stays 24px.
  */
-._menuBtn_oq0bd_219 {
+._menuBtn_1yjrk_230 {
   width: 32px;
   height: 32px;
 }
 
-._menuBtn_oq0bd_219::after {
+._menuBtn_1yjrk_230::after {
   inset: -6px;
 }
 
@@ -5606,7 +5617,7 @@
  *
  * Sits above the ::after hit area so the number is never painted underneath it.
  */
-._badge_oq0bd_247 {
+._badge_1yjrk_258 {
   position: absolute;
   top: -6px;
   left: 14px;
@@ -5633,13 +5644,13 @@
  * `context=checkout` (5295:74075). Both side slots are the 32px box the frame draws — the
  * left one empty, so the title centres on the screen rather than on what is left over.
  */
-._closeSlot_oq0bd_274 {
+._closeSlot_1yjrk_285 {
   flex: 0 0 auto;
   width: 32px;
   height: 32px;
 }
 
-._closeSlot_oq0bd_274._iconBtn_oq0bd_192::after {
+._closeSlot_1yjrk_285._iconBtn_1yjrk_203::after {
   inset: -6px;
 }
 
@@ -5648,7 +5659,7 @@
  * centres "Order #2304" between two equal slots, so it is the free space, not a measured
  * width. Same size, weight and colour as the shop entry's — one text style, two positions.
  */
-._centred_oq0bd_289 {
+._centred_1yjrk_300 {
   flex: 1 1 auto;
   width: auto;
   text-align: center;

package/dist/styles.css

@@ -5384,7 +5384,7 @@
  * the sticky CTA bar (50), the size-guide sheet (60), the bottom sheets (900) and the
  * toast (1000).
  */
-._header_oq0bd_25 {
+._header_1yjrk_25 {
   position: sticky;
   top: 0;
   z-index: 40;
@@ -5426,24 +5426,35 @@
 /*
  * Overlaid rather than stacked, for screens whose artwork runs to the top of the display.
  *
- * `absolute`, so this deliberately opts OUT of the sticky default above: the category
- * hero scrolls away under its own title and a bar pinned over a photograph that is no
- * longer there would be a bar floating on nothing.
+ * Overlaid is about the ARTWORK, not about staying on screen. `mobile/hero` carries its
+ * own `mobile/header` instance at y=0, hidden, and positions the category title at y=106 —
+ * measured from the top of the SCREEN, not from under a bar. In flow the header pushes the
+ * picture down and every measurement inside it lands a bar height low, which is how the
+ * category page shipped.
  *
- * `mobile/hero` carries its own `mobile/header` instance at y=0, hidden, and positions the
- * category title at y=106 — measured from the top of the SCREEN, not from under a bar. In
- * flow the header pushes the picture down and every measurement inside it lands a bar
- * height low,
- * which is how the category page shipped.
+ * So it is taken out of the flow with a negative margin rather than with `absolute`, and
+ * it keeps the sticky default. This was `position: absolute` until 21 Aug 2026, and that
+ * scrolled the bar off the top of a category page: the back chevron, the cart badge and
+ * the menu were reachable only by scrolling back up. DAZN reported it.
+ *
+ * The give-away was in the component itself — a bar that had left the screen was still
+ * switching to `.scrolled` and painting a scrim on nothing. That state only means anything
+ * for a bar that is still there. It looked correct on the shop entry because the entry
+ * scrolls its own snap scroller and never the document, so `absolute` never moved.
+ *
+ * `sticky` rather than `fixed`: we are mounted in someone else's page, under chrome of
+ * theirs we cannot see. `fixed` pins to the viewport and would sit on top of it. Sticky
+ * stays inside our own box, wherever the host has put it.
  *
  * Declared after `.header` so it wins the background: both are one class, so the later
  * rule takes it.
  */
-._floating_oq0bd_44 {
-  position: absolute;
+._floating_1yjrk_44 {
+  position: sticky;
   top: 0;
-  left: 0;
-  right: 0;
+  /* Out of the flow without leaving it: the artwork below starts at y=0 and is drawn
+     under the bar, which is what `absolute` was really buying. */
+  margin-bottom: calc(-1 * var(--header-height));
   z-index: 5;
   /*
    * Clear at rest. The scrim belongs to `.scrolled` below.
@@ -5495,12 +5506,12 @@
  * Fixed rather than tokenised, like the hero's own palette: it is drawn over a photograph
  * and does not follow the surface.
  */
-._floating_oq0bd_44._scrolled_oq0bd_87 {
+._floating_1yjrk_44._scrolled_1yjrk_79 {
   background: rgba(8, 14, 18, 0.6);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  ._floating_oq0bd_44 {
+  ._floating_1yjrk_44 {
     transition: none;
   }
 }
@@ -5520,7 +5531,7 @@
  * the dark screens, and the light PDP header (5295:75116) has an empty title slot. Written
  * as a static white it would be invisible the first time a host passed one on a light page.
  */
-._title_oq0bd_161 {
+._title_1yjrk_172 {
   flex: 0 0 auto;
   width: 222px;
   min-width: 0;
@@ -5533,7 +5544,7 @@
   white-space: nowrap;
 }
 
-._right_oq0bd_174 {
+._right_1yjrk_185 {
   display: flex;
   align-items: center;
   gap: var(--space-16);
@@ -5546,12 +5557,12 @@
  * header without a back button would silently re-lay-out rather than simply losing one
  * icon. 24px is the icon box it stands in for.
  */
-._spacer_oq0bd_187 {
+._spacer_1yjrk_198 {
   width: 24px;
   height: 24px;
 }
 
-._iconBtn_oq0bd_192 {
+._iconBtn_1yjrk_203 {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -5567,7 +5578,7 @@
 }
 
 /* Expand the hit area to >=44px without moving the 24px icon off the 16px inset. */
-._iconBtn_oq0bd_192::after {
+._iconBtn_1yjrk_203::after {
   content: '';
   position: absolute;
   inset: -10px;
@@ -5578,12 +5589,12 @@
  * its glyph on the design's centre line — 16px from the right edge, not 12. Its own icon
  * stays 24px.
  */
-._menuBtn_oq0bd_219 {
+._menuBtn_1yjrk_230 {
   width: 32px;
   height: 32px;
 }
 
-._menuBtn_oq0bd_219::after {
+._menuBtn_1yjrk_230::after {
   inset: -6px;
 }
 
@@ -5606,7 +5617,7 @@
  *
  * Sits above the ::after hit area so the number is never painted underneath it.
  */
-._badge_oq0bd_247 {
+._badge_1yjrk_258 {
   position: absolute;
   top: -6px;
   left: 14px;
@@ -5633,13 +5644,13 @@
  * `context=checkout` (5295:74075). Both side slots are the 32px box the frame draws — the
  * left one empty, so the title centres on the screen rather than on what is left over.
  */
-._closeSlot_oq0bd_274 {
+._closeSlot_1yjrk_285 {
   flex: 0 0 auto;
   width: 32px;
   height: 32px;
 }
 
-._closeSlot_oq0bd_274._iconBtn_oq0bd_192::after {
+._closeSlot_1yjrk_285._iconBtn_1yjrk_203::after {
   inset: -6px;
 }
 
@@ -5648,7 +5659,7 @@
  * centres "Order #2304" between two equal slots, so it is the free space, not a measured
  * width. Same size, weight and colour as the shop entry's — one text style, two positions.
  */
-._centred_oq0bd_289 {
+._centred_1yjrk_300 {
   flex: 1 1 auto;
   width: auto;
   text-align: center;

package/package.json

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