@nok-integration/storefront-react 0.18.5 → 0.19.1

package/dist/styles.css

@@ -3647,14 +3647,14 @@
   gap: var(--space-20);
 }
 
-._gallery_10mch_1 {
+._gallery_9e68b_1 {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
 }
 
-._track_10mch_8 {
+._track_9e68b_8 {
   display: flex;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
@@ -3674,30 +3674,46 @@
   scrollbar-width: none;
 }
 
-._track_10mch_8::-webkit-scrollbar {
+._track_9e68b_8::-webkit-scrollbar {
   display: none;
 }
 
-._slide_10mch_32 {
+._slide_9e68b_32 {
   position: relative;
   flex: 0 0 100%;
   scroll-snap-align: center;
   aspect-ratio: 375 / 475;
 }
 
-._image_10mch_39 {
+._image_9e68b_39 {
   object-fit: cover;
 }
 
-._placeholder_10mch_43 {
+._placeholder_9e68b_43 {
   width: 100%;
   aspect-ratio: 375 / 475;
   background: var(--color-surface-soft);
 }
 
 /* Share button — top-right chrome over the image (mobile/button: 32px, soft, radius-8). */
-._share_10mch_50 {
+._share_9e68b_50 {
   position: absolute;
+  /*
+   * **Without this the button is drawn and cannot be tapped.**
+   *
+   * `.share` is the gallery's first child and the image track follows it. Both the button
+   * and the `fill` images inside the track are absolutely positioned and nothing here
+   * declared a `z-index`, so painting order fell to DOM order and every image won. A tap
+   * anywhere on the icon landed on the photograph — the control looked completely normal
+   * and did nothing, which is the failure mode this repo has been bitten by before.
+   *
+   * The pagination dots were never affected: they come *after* the track, so they were
+   * already on top by accident. That is why this survived review.
+   *
+   * Found by hit-testing `document.elementFromPoint` at the button's own centre, not by
+   * reading the stylesheet — from the CSS it looks correct.
+   */
+  z-index: 1;
   top: var(--space-16);
   right: var(--space-16);
   display: inline-flex;
@@ -3713,13 +3729,25 @@
   cursor: pointer;
 }
 
-._dots_10mch_67 {
+._dots_9e68b_83 {
   display: flex;
   justify-content: center;
   gap: var(--space-6);
 }
 
-._dot_10mch_67 {
+/*
+ * The icon is drawn at 32px because that is the box the design gives it; the TAP is 44px.
+ * Same trick as the header's controls — a negative-inset pseudo-element, so the hit area
+ * grows and not one pixel moves. Measured 32px of clear space above it, so symmetric
+ * expansion cannot reach the control overhead.
+ */
+._share_9e68b_50::after {
+  content: '';
+  position: absolute;
+  inset: -6px;
+}
+
+._dot_9e68b_83 {
   width: 8px;
   height: 8px;
   padding: 0;
@@ -3731,13 +3759,28 @@
   position: relative;
 }
 
-._dot_10mch_67::after {
+/*
+ * The hit area is tall, and only as wide as the dot's own column.
+ *
+ * It used to be `inset: -18px` on all four sides, which reads as "44px target" and behaved
+ * as the opposite. The dots are 8px with a 6px gap — a 14px pitch — so an 18px horizontal
+ * bleed put every dot's hit area completely over its neighbour's, and the later sibling
+ * paints on top. **Only the last dot was tappable**; aiming at the first selected the
+ * second. Measured by walking `elementFromPoint` outward from each dot's centre.
+ *
+ * 3px is half the gap, so the columns tile exactly and never overlap. That makes each dot
+ * 14px wide, which is under the 44px guideline and is the widest the design's own spacing
+ * allows without one dot stealing another's taps — a reliable 14x44 beats a nominal 44x44
+ * that belongs to the wrong control. Swiping the track remains the primary affordance, and
+ * it is unaffected.
+ */
+._dot_9e68b_83::after {
   content: '';
   position: absolute;
-  inset: -18px;
+  inset: -18px -3px;
 }
 
-._dotActive_10mch_91 {
+._dotActive_9e68b_134 {
   background: var(--color-surface-max);
 }
 /*
@@ -4115,18 +4158,18 @@
     animation: none;
   }
 }
-._root_9zj90_1 {
+._root_6sbl9_1 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
 }
 
-._header_9zj90_7 {
+._header_6sbl9_7 {
   display: flex;
   align-items: center;
 }
 
-._title_9zj90_12 {
+._title_6sbl9_12 {
   margin: 0;
   font-size: var(--type-trimmed-md-size);
   line-height: var(--type-trimmed-md-line);
@@ -4134,14 +4177,14 @@
   color: var(--color-text-default);
 }
 
-._chips_9zj90_20 {
+._chips_6sbl9_20 {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-8);
 }
 
 /* 48px square chips per the mobile/pdp/size component (radius-xs, not radius-sm). */
-._chip_9zj90_20 {
+._chip_6sbl9_20 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -4158,7 +4201,7 @@
   cursor: pointer;
 }
 
-._selected_9zj90_44 {
+._selected_6sbl9_44 {
   border-color: var(--color-surface-max);
   background: var(--color-surface-max);
   color: var(--color-text-strong);
@@ -4170,7 +4213,7 @@
  * range reads complete"), so a fan can see the range runs to XXL and that their size is
  * the one that has gone, rather than seeing a range with a hole in it.
  */
-._disabled_9zj90_56 {
+._disabled_6sbl9_56 {
   cursor: not-allowed;
   border-style: dashed;
   color: var(--color-text-disabled);
@@ -4178,14 +4221,16 @@
 
 /* Figma: regular weight, critical token. Bold read as a second heading next to the
    16px "Size" label above it. */
-._error_9zj90_64 {
+._error_6sbl9_64 {
   margin: 0;
   font-size: var(--type-trimmed-sm-size);
   font-weight: var(--font-weight-regular);
   color: var(--color-state-surface-critical-default);
 }
 
-._sizeGuide_9zj90_71 {
+._sizeGuide_6sbl9_71 {
+  /* Anchors the hit-area pseudo-element below. */
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
@@ -4199,9 +4244,23 @@
   cursor: pointer;
 }
 
-._chevron_9zj90_85 {
+._chevron_6sbl9_87 {
   display: block;
 }
+
+/*
+ * An 18px-tall text button is a 44px tap target.
+ *
+ * **Asymmetric on purpose.** There are only 11px of clear space between this row and the
+ * size chips above it, so a symmetric -13px would put this control's hit area *over* the
+ * chips — and a fan aiming at XL would open the size guide instead. It grows 8px up (3px
+ * of the gap left clear) and 18px down, into empty space: 8 + 18 + 18 = 44.
+ */
+._sizeGuide_6sbl9_71::after {
+  content: '';
+  position: absolute;
+  inset: -8px -8px -18px;
+}
 ._root_1h4ny_1 {
   display: flex;
   flex-direction: column;
@@ -4362,19 +4421,19 @@
   background: var(--color-surface-soft);
 }
 /* Figma mobile/pdp/details: heading+body group, then more/Less 4px under it. */
-._root_t4qba_2 {
+._root_9cj0g_2 {
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
 }
 
-._group_t4qba_8 {
+._group_9cj0g_8 {
   display: flex;
   flex-direction: column;
   gap: var(--space-8);
 }
 
-._title_t4qba_14 {
+._title_9cj0g_14 {
   margin: 0;
   font-size: var(--type-trimmed-md-size);
   line-height: var(--type-trimmed-md-line);
@@ -4382,18 +4441,18 @@
   color: var(--color-text-default);
 }
 
-._body_t4qba_22 {
+._body_9cj0g_22 {
   color: var(--color-text-subtle);
 }
 
-._paragraph_t4qba_26 {
+._paragraph_9cj0g_26 {
   margin: 0;
   font-size: var(--type-paragraph-size);
   line-height: var(--type-paragraph-line);
 }
 
 /* paragraph-spacing/lg between paragraphs, nothing after the last. */
-._paragraph_t4qba_26 + ._paragraph_t4qba_26 {
+._paragraph_9cj0g_26 + ._paragraph_9cj0g_26 {
   margin-top: var(--space-12);
 }
 
@@ -4406,12 +4465,14 @@
  * lines is exactly `font-size × line-height × 3`, so the cut lands on a line boundary
  * rather than through the middle of one.
  */
-._clamped_t4qba_46 {
+._clamped_9cj0g_46 {
   max-height: calc(var(--type-paragraph-size) * var(--type-paragraph-line) * 3);
   overflow: hidden;
 }
 
-._toggle_t4qba_51 {
+._toggle_9cj0g_51 {
+  /* Anchors the hit-area pseudo-element below. */
+  position: relative;
   align-self: flex-start;
   padding: 0;
   border: none;
@@ -4424,6 +4485,16 @@
   font-weight: var(--font-weight-bold);
   cursor: pointer;
 }
+
+/*
+ * 36x25 drawn, 44x45 tapped. The control sits in clear space — 266px above, 72px below —
+ * so this cannot overlap anything.
+ */
+._toggle_9cj0g_51::after {
+  content: '';
+  position: absolute;
+  inset: -10px -4px;
+}
 ._row_l4edh_1 {
   display: flex;
   flex-wrap: wrap;
@@ -5397,7 +5468,7 @@
  * the sticky CTA bar (50), the size-guide sheet (60), the bottom sheets (900) and the
  * toast (1000).
  */
-._header_1yjrk_25 {
+._header_8o3d7_25 {
   position: sticky;
   top: 0;
   z-index: 40;
@@ -5462,7 +5533,7 @@
  * Declared after `.header` so it wins the background: both are one class, so the later
  * rule takes it.
  */
-._floating_1yjrk_44 {
+._floating_8o3d7_44 {
   position: sticky;
   top: 0;
   /* Out of the flow without leaving it: the artwork below starts at y=0 and is drawn
@@ -5519,12 +5590,12 @@
  * Fixed rather than tokenised, like the hero's own palette: it is drawn over a photograph
  * and does not follow the surface.
  */
-._floating_1yjrk_44._scrolled_1yjrk_79 {
+._floating_8o3d7_44._scrolled_8o3d7_79 {
   background: rgba(8, 14, 18, 0.6);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  ._floating_1yjrk_44 {
+  ._floating_8o3d7_44 {
     transition: none;
   }
 }
@@ -5544,7 +5615,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_1yjrk_172 {
+._title_8o3d7_172 {
   flex: 0 0 auto;
   width: 222px;
   min-width: 0;
@@ -5557,7 +5628,27 @@
   white-space: nowrap;
 }
 
-._right_1yjrk_185 {
+/*
+ * The same title, on a bar that carries no icons — the cart (`4661:136810`) and the order
+ * screens.
+ *
+ * The 222px above is measured against a bar with the full 72px icon cluster on the right.
+ * Take the cluster away and `space-between` has 97px of slack to share between two gaps,
+ * which lands the text at x=88.5 — a title floating in the middle of an otherwise empty
+ * bar. The frame puts "Cart" hard against the chevron: box at x=16..40, text from 57, so
+ * one 16px gap and no more. DAZN reported it on 21 Aug 2026.
+ *
+ * `flex: 1 1 auto` rather than a second measured width, because there is nothing on the
+ * right to measure against: the title simply takes what is left, and a long order
+ * reference ellipsises instead of pushing a layout that has no other content in it.
+ */
+._title_8o3d7_172._leading_8o3d7_199 {
+  flex: 1 1 auto;
+  width: auto;
+  margin-left: var(--space-16);
+}
+
+._right_8o3d7_205 {
   display: flex;
   align-items: center;
   gap: var(--space-16);
@@ -5570,12 +5661,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_1yjrk_198 {
+._spacer_8o3d7_218 {
   width: 24px;
   height: 24px;
 }
 
-._iconBtn_1yjrk_203 {
+._iconBtn_8o3d7_223 {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -5591,7 +5682,7 @@
 }
 
 /* Expand the hit area to >=44px without moving the 24px icon off the 16px inset. */
-._iconBtn_1yjrk_203::after {
+._iconBtn_8o3d7_223::after {
   content: '';
   position: absolute;
   inset: -10px;
@@ -5602,12 +5693,12 @@
  * its glyph on the design's centre line — 16px from the right edge, not 12. Its own icon
  * stays 24px.
  */
-._menuBtn_1yjrk_230 {
+._menuBtn_8o3d7_250 {
   width: 32px;
   height: 32px;
 }
 
-._menuBtn_1yjrk_230::after {
+._menuBtn_8o3d7_250::after {
   inset: -6px;
 }
 
@@ -5630,7 +5721,7 @@
  *
  * Sits above the ::after hit area so the number is never painted underneath it.
  */
-._badge_1yjrk_258 {
+._badge_8o3d7_278 {
   position: absolute;
   top: -6px;
   left: 14px;
@@ -5657,13 +5748,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_1yjrk_285 {
+._closeSlot_8o3d7_305 {
   flex: 0 0 auto;
   width: 32px;
   height: 32px;
 }
 
-._closeSlot_1yjrk_285._iconBtn_1yjrk_203::after {
+._closeSlot_8o3d7_305._iconBtn_8o3d7_223::after {
   inset: -6px;
 }
 
@@ -5672,7 +5763,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_1yjrk_300 {
+._centred_8o3d7_320 {
   flex: 1 1 auto;
   width: auto;
   text-align: center;

package/package.json

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