@nok-integration/storefront-react 0.18.0 → 0.18.1

package/dist/index.mjs

@@ -10005,17 +10005,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,

package/dist/standalone/storefront.mjs

@@ -10005,17 +10005,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,

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.1",
   "description": "Mountable React storefront components: catalogue, product detail and cart, mounted directly into a host DOM tree. No iframe.",
   "license": "UNLICENSED",
   "type": "module",