@nok-integration/storefront-react 0.17.0 → 0.17.1

package/dist/index.mjs

@@ -9035,17 +9035,17 @@ function useCartCount() {
   }, [subscribe]);
   return count2;
 }
-const header$1 = "_header_1hcuj_25";
-const floating = "_floating_1hcuj_65";
-const scrolled = "_scrolled_1hcuj_72";
-const title$1 = "_title_1hcuj_121";
-const right = "_right_1hcuj_134";
-const spacer = "_spacer_1hcuj_147";
-const iconBtn = "_iconBtn_1hcuj_152";
-const menuBtn = "_menuBtn_1hcuj_179";
-const badge = "_badge_1hcuj_207";
-const closeSlot = "_closeSlot_1hcuj_234";
-const centred = "_centred_1hcuj_249";
+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 styles$1 = {
   header: header$1,
   floating,

package/dist/standalone/storefront.mjs

@@ -9035,17 +9035,17 @@ function useCartCount() {
   }, [subscribe]);
   return count2;
 }
-const header$1 = "_header_1hcuj_25";
-const floating = "_floating_1hcuj_65";
-const scrolled = "_scrolled_1hcuj_72";
-const title$1 = "_title_1hcuj_121";
-const right = "_right_1hcuj_134";
-const spacer = "_spacer_1hcuj_147";
-const iconBtn = "_iconBtn_1hcuj_152";
-const menuBtn = "_menuBtn_1hcuj_179";
-const badge = "_badge_1hcuj_207";
-const closeSlot = "_closeSlot_1hcuj_234";
-const centred = "_centred_1hcuj_249";
+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 styles$1 = {
   header: header$1,
   floating,

package/dist/standalone/styles.css

@@ -4014,7 +4014,7 @@
  * the sticky CTA bar (50), the size-guide sheet (60), the bottom sheets (900) and the
  * toast (1000).
  */
-._header_1hcuj_25 {
+._header_oq0bd_25 {
   position: sticky;
   top: 0;
   z-index: 40;
@@ -4023,7 +4023,22 @@
   justify-content: space-between;
   height: var(--header-height);
   padding: 0 var(--space-16);
-  background: var(--color-surface-default);
+  /*
+   * A fixed palette, not the inverting tokens, and this is the rule for the whole bar.
+   *
+   * There is no light/dark mode in this product. DAZN settled it on 7 Aug 2026: the
+   * palette follows the design, not the device, and `theme` was withdrawn in 0.6.0 because
+   * an override implied two designs where there is one. Each screen is drawn in the
+   * palette its frame carries, statically.
+   *
+   * So the bar has exactly two appearances and both come from the design system's
+   * `full-color` set, the one that does NOT invert with a mode: on a page it is #f9fafa with a #dddedf rule and #0c161c
+   * contents (the product, cart and order frames); over artwork it is `.floating` below.
+   * Reading `--color-surface-default` here made it a third thing — whatever the host's
+   * palette happened to be — which is exactly how DAZN got a white bar over the hero.
+   */
+  background: #f9fafa;
+  color: #0c161c;
   /*
    * semantic/base/border/full-color/default, drawn under the bar in the current frame
    * (5295:75116). It is what separates the header from a white PDP, which otherwise runs
@@ -4035,7 +4050,7 @@
    * up by one takes the difference from the frame from 5.7 of 255 to 3.6. It also put the
    * menu sheet 15px below the bar where `--header-height` plus `--space-16` says 16.
    */
-  box-shadow: inset 0 -1px 0 var(--color-border-default);
+  box-shadow: inset 0 -1px 0 #dddedf;
 }
 
 /*
@@ -4054,7 +4069,7 @@
  * Declared after `.header` so it wins the background: both are one class, so the later
  * rule takes it.
  */
-._floating_1hcuj_65 {
+._floating_oq0bd_44 {
   position: absolute;
   top: 0;
   left: 0;
@@ -4064,6 +4079,29 @@
    * Clear at rest. The scrim belongs to `.scrolled` below.
    */
   background: none;
+  /*
+  * Over artwork, the bar's contents are light. Always, and not because of a theme.
+  *
+  * `floating` means the bar is drawn over a photograph, and every frame that draws it that
+  * way draws the chevron, the cart, the overflow and the title in
+  * `semantic/base/text/static-light` #f9fafa. Everywhere else they take `text/default` and
+  * follow the surface, which is right for the white product header.
+  *
+  * This was a real bug and DAZN found it (20 Aug 2026). `ShopHeader` mounts OUTSIDE
+  * `ShopSurface` — that is what lets it sit above a screen rather than inside one — so it
+  * inherits the HOST's tokens, and in a host with no dark palette `--color-text-default`
+  * is #0c161c. Transparent bar, near-black glyphs, dark photograph: invisible.
+  *
+  * Our own storefront hid it completely, and that is the part worth remembering. Its
+  * `ThemeController` sets `data-theme="dark"` on <html> for the dark routes, so the header
+  * inherited a dark palette by accident of the host rather than by anything the package
+  * does. Every screenshot we took was of the one host where it happened to work. It is the
+  * same failure `ShopSurface` exists to prevent, one layer up in the chrome.
+  *
+  * A fixed hex rather than a token, for the reason the badge and the hero title are fixed:
+  * it is read against a photograph, so it must not follow the surface palette.
+  */
+  color: #f9fafa;
   transition: background-color 160ms ease;
   /* No rule over artwork: it exists to separate the bar from the page below it, and there
      is no page below it here. */
@@ -4087,16 +4125,18 @@
  * Fixed rather than tokenised, like the hero's own palette: it is drawn over a photograph
  * and does not follow the surface.
  */
-._floating_1hcuj_65._scrolled_1hcuj_72 {
+._floating_oq0bd_44._scrolled_oq0bd_87 {
   background: rgba(8, 14, 18, 0.6);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  ._floating_1hcuj_65 {
+  ._floating_oq0bd_44 {
     transition: none;
   }
 }
 
+
+
 /*
  * `DAZN Shop`, at the width the frame gives it.
  *
@@ -4110,20 +4150,20 @@
  * 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_1hcuj_121 {
+._title_oq0bd_161 {
   flex: 0 0 auto;
   width: 222px;
   min-width: 0;
   font-size: var(--type-caption-sm-size);
   line-height: var(--type-caption-sm-line);
   font-weight: var(--font-weight-bold);
-  color: var(--color-text-default);
+  color: inherit;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-._right_1hcuj_134 {
+._right_oq0bd_174 {
   display: flex;
   align-items: center;
   gap: var(--space-16);
@@ -4136,12 +4176,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_1hcuj_147 {
+._spacer_oq0bd_187 {
   width: 24px;
   height: 24px;
 }
 
-._iconBtn_1hcuj_152 {
+._iconBtn_oq0bd_192 {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -4151,13 +4191,13 @@
   padding: 0;
   border: none;
   background: none;
-  color: var(--color-text-default);
+  color: inherit;
   cursor: pointer;
   text-decoration: none;
 }
 
 /* Expand the hit area to >=44px without moving the 24px icon off the 16px inset. */
-._iconBtn_1hcuj_152::after {
+._iconBtn_oq0bd_192::after {
   content: '';
   position: absolute;
   inset: -10px;
@@ -4168,12 +4208,12 @@
  * its glyph on the design's centre line — 16px from the right edge, not 12. Its own icon
  * stays 24px.
  */
-._menuBtn_1hcuj_179 {
+._menuBtn_oq0bd_219 {
   width: 32px;
   height: 32px;
 }
 
-._menuBtn_1hcuj_179::after {
+._menuBtn_oq0bd_219::after {
   inset: -6px;
 }
 
@@ -4196,7 +4236,7 @@
  *
  * Sits above the ::after hit area so the number is never painted underneath it.
  */
-._badge_1hcuj_207 {
+._badge_oq0bd_247 {
   position: absolute;
   top: -6px;
   left: 14px;
@@ -4223,13 +4263,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_1hcuj_234 {
+._closeSlot_oq0bd_274 {
   flex: 0 0 auto;
   width: 32px;
   height: 32px;
 }
 
-._closeSlot_1hcuj_234._iconBtn_1hcuj_152::after {
+._closeSlot_oq0bd_274._iconBtn_oq0bd_192::after {
   inset: -6px;
 }
 
@@ -4238,7 +4278,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_1hcuj_249 {
+._centred_oq0bd_289 {
   flex: 1 1 auto;
   width: auto;
   text-align: center;

package/dist/styles.css

@@ -4014,7 +4014,7 @@
  * the sticky CTA bar (50), the size-guide sheet (60), the bottom sheets (900) and the
  * toast (1000).
  */
-._header_1hcuj_25 {
+._header_oq0bd_25 {
   position: sticky;
   top: 0;
   z-index: 40;
@@ -4023,7 +4023,22 @@
   justify-content: space-between;
   height: var(--header-height);
   padding: 0 var(--space-16);
-  background: var(--color-surface-default);
+  /*
+   * A fixed palette, not the inverting tokens, and this is the rule for the whole bar.
+   *
+   * There is no light/dark mode in this product. DAZN settled it on 7 Aug 2026: the
+   * palette follows the design, not the device, and `theme` was withdrawn in 0.6.0 because
+   * an override implied two designs where there is one. Each screen is drawn in the
+   * palette its frame carries, statically.
+   *
+   * So the bar has exactly two appearances and both come from the design system's
+   * `full-color` set, the one that does NOT invert with a mode: on a page it is #f9fafa with a #dddedf rule and #0c161c
+   * contents (the product, cart and order frames); over artwork it is `.floating` below.
+   * Reading `--color-surface-default` here made it a third thing — whatever the host's
+   * palette happened to be — which is exactly how DAZN got a white bar over the hero.
+   */
+  background: #f9fafa;
+  color: #0c161c;
   /*
    * semantic/base/border/full-color/default, drawn under the bar in the current frame
    * (5295:75116). It is what separates the header from a white PDP, which otherwise runs
@@ -4035,7 +4050,7 @@
    * up by one takes the difference from the frame from 5.7 of 255 to 3.6. It also put the
    * menu sheet 15px below the bar where `--header-height` plus `--space-16` says 16.
    */
-  box-shadow: inset 0 -1px 0 var(--color-border-default);
+  box-shadow: inset 0 -1px 0 #dddedf;
 }
 
 /*
@@ -4054,7 +4069,7 @@
  * Declared after `.header` so it wins the background: both are one class, so the later
  * rule takes it.
  */
-._floating_1hcuj_65 {
+._floating_oq0bd_44 {
   position: absolute;
   top: 0;
   left: 0;
@@ -4064,6 +4079,29 @@
    * Clear at rest. The scrim belongs to `.scrolled` below.
    */
   background: none;
+  /*
+  * Over artwork, the bar's contents are light. Always, and not because of a theme.
+  *
+  * `floating` means the bar is drawn over a photograph, and every frame that draws it that
+  * way draws the chevron, the cart, the overflow and the title in
+  * `semantic/base/text/static-light` #f9fafa. Everywhere else they take `text/default` and
+  * follow the surface, which is right for the white product header.
+  *
+  * This was a real bug and DAZN found it (20 Aug 2026). `ShopHeader` mounts OUTSIDE
+  * `ShopSurface` — that is what lets it sit above a screen rather than inside one — so it
+  * inherits the HOST's tokens, and in a host with no dark palette `--color-text-default`
+  * is #0c161c. Transparent bar, near-black glyphs, dark photograph: invisible.
+  *
+  * Our own storefront hid it completely, and that is the part worth remembering. Its
+  * `ThemeController` sets `data-theme="dark"` on <html> for the dark routes, so the header
+  * inherited a dark palette by accident of the host rather than by anything the package
+  * does. Every screenshot we took was of the one host where it happened to work. It is the
+  * same failure `ShopSurface` exists to prevent, one layer up in the chrome.
+  *
+  * A fixed hex rather than a token, for the reason the badge and the hero title are fixed:
+  * it is read against a photograph, so it must not follow the surface palette.
+  */
+  color: #f9fafa;
   transition: background-color 160ms ease;
   /* No rule over artwork: it exists to separate the bar from the page below it, and there
      is no page below it here. */
@@ -4087,16 +4125,18 @@
  * Fixed rather than tokenised, like the hero's own palette: it is drawn over a photograph
  * and does not follow the surface.
  */
-._floating_1hcuj_65._scrolled_1hcuj_72 {
+._floating_oq0bd_44._scrolled_oq0bd_87 {
   background: rgba(8, 14, 18, 0.6);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  ._floating_1hcuj_65 {
+  ._floating_oq0bd_44 {
     transition: none;
   }
 }
 
+
+
 /*
  * `DAZN Shop`, at the width the frame gives it.
  *
@@ -4110,20 +4150,20 @@
  * 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_1hcuj_121 {
+._title_oq0bd_161 {
   flex: 0 0 auto;
   width: 222px;
   min-width: 0;
   font-size: var(--type-caption-sm-size);
   line-height: var(--type-caption-sm-line);
   font-weight: var(--font-weight-bold);
-  color: var(--color-text-default);
+  color: inherit;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-._right_1hcuj_134 {
+._right_oq0bd_174 {
   display: flex;
   align-items: center;
   gap: var(--space-16);
@@ -4136,12 +4176,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_1hcuj_147 {
+._spacer_oq0bd_187 {
   width: 24px;
   height: 24px;
 }
 
-._iconBtn_1hcuj_152 {
+._iconBtn_oq0bd_192 {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -4151,13 +4191,13 @@
   padding: 0;
   border: none;
   background: none;
-  color: var(--color-text-default);
+  color: inherit;
   cursor: pointer;
   text-decoration: none;
 }
 
 /* Expand the hit area to >=44px without moving the 24px icon off the 16px inset. */
-._iconBtn_1hcuj_152::after {
+._iconBtn_oq0bd_192::after {
   content: '';
   position: absolute;
   inset: -10px;
@@ -4168,12 +4208,12 @@
  * its glyph on the design's centre line — 16px from the right edge, not 12. Its own icon
  * stays 24px.
  */
-._menuBtn_1hcuj_179 {
+._menuBtn_oq0bd_219 {
   width: 32px;
   height: 32px;
 }
 
-._menuBtn_1hcuj_179::after {
+._menuBtn_oq0bd_219::after {
   inset: -6px;
 }
 
@@ -4196,7 +4236,7 @@
  *
  * Sits above the ::after hit area so the number is never painted underneath it.
  */
-._badge_1hcuj_207 {
+._badge_oq0bd_247 {
   position: absolute;
   top: -6px;
   left: 14px;
@@ -4223,13 +4263,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_1hcuj_234 {
+._closeSlot_oq0bd_274 {
   flex: 0 0 auto;
   width: 32px;
   height: 32px;
 }
 
-._closeSlot_1hcuj_234._iconBtn_1hcuj_152::after {
+._closeSlot_oq0bd_274._iconBtn_oq0bd_192::after {
   inset: -6px;
 }
 
@@ -4238,7 +4278,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_1hcuj_249 {
+._centred_oq0bd_289 {
   flex: 1 1 auto;
   width: auto;
   text-align: center;

package/package.json

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