@nok-integration/storefront-react 0.16.1 → 0.16.3

package/dist/index.mjs

@@ -5476,8 +5476,8 @@ function Skeleton({ width, height, radius, className, circle }) {
     }
   );
 }
-const surface$1 = "_surface_nj74o_10";
-const fill = "_fill_nj74o_35";
+const surface$1 = "_surface_cfqo9_10";
+const fill = "_fill_cfqo9_35";
 const styles$E = {
   surface: surface$1,
   fill
@@ -7403,15 +7403,15 @@ function CartSheetProvider({ children }) {
     isOpen && /* @__PURE__ */ jsx(BottomSheet, { open: true, onClose: close2, title: "Cart", children: /* @__PURE__ */ jsx(CartView, { onContinueShopping: close2 }) })
   ] });
 }
-const gallery = "_gallery_h8m00_1";
-const track$2 = "_track_h8m00_8";
-const slide$1 = "_slide_h8m00_19";
-const image$4 = "_image_h8m00_26";
-const placeholder$1 = "_placeholder_h8m00_30";
-const share = "_share_h8m00_37";
-const dots$2 = "_dots_h8m00_54";
-const dot$2 = "_dot_h8m00_54";
-const dotActive$2 = "_dotActive_h8m00_78";
+const gallery = "_gallery_1e69n_1";
+const track$2 = "_track_1e69n_8";
+const slide$1 = "_slide_1e69n_25";
+const image$4 = "_image_1e69n_32";
+const placeholder$1 = "_placeholder_1e69n_36";
+const share = "_share_1e69n_43";
+const dots$2 = "_dots_1e69n_60";
+const dot$2 = "_dot_1e69n_60";
+const dotActive$2 = "_dotActive_1e69n_84";
 const styles$i = {
   gallery,
   track: track$2,
@@ -8212,15 +8212,15 @@ function LifestyleImage({ images }) {
     )) })
   ] }) });
 }
-const section$2 = "_section_iy175_1";
-const track = "_track_iy175_8";
-const card = "_card_iy175_31";
-const quote = "_quote_iy175_43";
-const author = "_author_iy175_51";
-const dots = "_dots_iy175_57";
-const dot = "_dot_iy175_57";
-const dotActive = "_dotActive_iy175_70";
-const disclaimer = "_disclaimer_iy175_76";
+const section$2 = "_section_n8xka_1";
+const track = "_track_n8xka_8";
+const card = "_card_n8xka_38";
+const quote = "_quote_n8xka_50";
+const author = "_author_n8xka_58";
+const dots = "_dots_n8xka_64";
+const dot = "_dot_n8xka_64";
+const dotActive = "_dotActive_n8xka_77";
+const disclaimer = "_disclaimer_n8xka_83";
 const styles$6 = {
   section: section$2,
   track,

package/dist/standalone/storefront.mjs

@@ -5476,8 +5476,8 @@ function Skeleton({ width, height, radius, className, circle }) {
     }
   );
 }
-const surface$1 = "_surface_nj74o_10";
-const fill = "_fill_nj74o_35";
+const surface$1 = "_surface_cfqo9_10";
+const fill = "_fill_cfqo9_35";
 const styles$E = {
   surface: surface$1,
   fill
@@ -7403,15 +7403,15 @@ function CartSheetProvider({ children }) {
     isOpen && /* @__PURE__ */ jsx(BottomSheet, { open: true, onClose: close2, title: "Cart", children: /* @__PURE__ */ jsx(CartView, { onContinueShopping: close2 }) })
   ] });
 }
-const gallery = "_gallery_h8m00_1";
-const track$2 = "_track_h8m00_8";
-const slide$1 = "_slide_h8m00_19";
-const image$4 = "_image_h8m00_26";
-const placeholder$1 = "_placeholder_h8m00_30";
-const share = "_share_h8m00_37";
-const dots$2 = "_dots_h8m00_54";
-const dot$2 = "_dot_h8m00_54";
-const dotActive$2 = "_dotActive_h8m00_78";
+const gallery = "_gallery_1e69n_1";
+const track$2 = "_track_1e69n_8";
+const slide$1 = "_slide_1e69n_25";
+const image$4 = "_image_1e69n_32";
+const placeholder$1 = "_placeholder_1e69n_36";
+const share = "_share_1e69n_43";
+const dots$2 = "_dots_1e69n_60";
+const dot$2 = "_dot_1e69n_60";
+const dotActive$2 = "_dotActive_1e69n_84";
 const styles$i = {
   gallery,
   track: track$2,
@@ -8212,15 +8212,15 @@ function LifestyleImage({ images }) {
     )) })
   ] }) });
 }
-const section$2 = "_section_iy175_1";
-const track = "_track_iy175_8";
-const card = "_card_iy175_31";
-const quote = "_quote_iy175_43";
-const author = "_author_iy175_51";
-const dots = "_dots_iy175_57";
-const dot = "_dot_iy175_57";
-const dotActive = "_dotActive_iy175_70";
-const disclaimer = "_disclaimer_iy175_76";
+const section$2 = "_section_n8xka_1";
+const track = "_track_n8xka_8";
+const card = "_card_n8xka_38";
+const quote = "_quote_n8xka_50";
+const author = "_author_n8xka_58";
+const dots = "_dots_n8xka_64";
+const dot = "_dot_n8xka_64";
+const dotActive = "_dotActive_n8xka_77";
+const disclaimer = "_disclaimer_n8xka_83";
 const styles$6 = {
   section: section$2,
   track,

package/dist/standalone/styles.css

@@ -305,7 +305,7 @@
  * (serif, in a page that never set one) and its own background.
  */
 
-._surface_nj74o_10 {
+._surface_cfqo9_10 {
   font-family: var(--font-family-base);
   font-weight: var(--font-weight-regular);
   font-size: var(--type-paragraph-size);
@@ -316,9 +316,9 @@
   text-rendering: optimizeLegibility;
 }
 
-._surface_nj74o_10 *,
-._surface_nj74o_10 *::before,
-._surface_nj74o_10 *::after {
+._surface_cfqo9_10 *,
+._surface_cfqo9_10 *::before,
+._surface_cfqo9_10 *::after {
   box-sizing: border-box;
 }
 
@@ -330,7 +330,7 @@
  * through a screen of the opposite palette) is invisible in our own app, where the body
  * already matches, and so goes unnoticed until a partner reports it.
  */
-._fill_nj74o_35 {
+._fill_cfqo9_35 {
   /* Declared twice on purpose, and the order matters.
      `dvh` landed in Chrome 108 / iOS 15.4, and this package supports React 16.14 because
      that is what DAZN's app runs — an app that old can be paired with a WebView that old.
@@ -348,17 +348,31 @@
   min-height: calc(100dvh - var(--surface-top, 0px));
 }
 
-._surface_nj74o_10 :is(h1, h2, h3) {
+/*
+ * Base heading typography — a DEFAULT, which is why every part is wrapped in `:where()`.
+ *
+ * This is the same trap the link rule below documents, and it was still live here.
+ * `.surface h1` is specificity (0,1,1) and a CSS-module class is (0,1,0), so these rules
+ * beat every component that set its own heading size. The category hero asked for 40px in
+ * `PcpHero.module.css` and rendered at 24px — the `--type-heading-lg-size` below — which
+ * read as "the design is wrong" rather than "a base style is winning", and sent us
+ * measuring Figma twice before checking what the browser actually computed.
+ *
+ * `:where()` drops the whole selector to specificity (0,0,0), so ANY component class wins
+ * deterministically rather than by source order, while a heading that sets nothing still
+ * gets the scale. That is what a base style should be.
+ */
+:where(._surface_cfqo9_10) :where(h1, h2, h3) {
   margin: 0;
   font-weight: var(--font-weight-bold);
 }
 
-._surface_nj74o_10 h1 {
+:where(._surface_cfqo9_10) :where(h1) {
   font-size: var(--type-heading-lg-size);
   line-height: var(--type-heading-lg-line);
 }
 
-._surface_nj74o_10 h2 {
+:where(._surface_cfqo9_10) :where(h2) {
   font-size: var(--type-heading-md-size);
   line-height: var(--type-heading-md-line);
 }
@@ -377,27 +391,27 @@
  * Restricting the rule to unclassed anchors keeps what it is for — a bare `<a>` must never
  * render browser-blue — while leaving any anchor that carries a class in charge of itself.
  */
-._surface_nj74o_10 a:not([class]) {
+._surface_cfqo9_10 a:not([class]) {
   color: inherit;
 }
 
-._surface_nj74o_10 img {
+._surface_cfqo9_10 img {
   max-width: 100%;
   height: auto;
 }
 
 /* Visible focus for keyboard users — a WCAG 2.1 AA launch gate, so it cannot be left
    to the host to remember. */
-._surface_nj74o_10 :focus-visible {
+._surface_cfqo9_10 :focus-visible {
   outline: 2px solid var(--color-surface-max);
   outline-offset: 2px;
   border-radius: var(--radius-4);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  ._surface_nj74o_10 *,
-  ._surface_nj74o_10 *::before,
-  ._surface_nj74o_10 *::after {
+  ._surface_cfqo9_10 *,
+  ._surface_cfqo9_10 *::before,
+  ._surface_cfqo9_10 *::after {
     animation-duration: 0.001ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.001ms !important;
@@ -2109,14 +2123,14 @@
   gap: var(--space-20);
 }
 
-._gallery_h8m00_1 {
+._gallery_1e69n_1 {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
 }
 
-._track_h8m00_8 {
+._track_1e69n_8 {
   display: flex;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
@@ -2125,27 +2139,33 @@
      edge-to-edge and flush under the header. */
   aspect-ratio: 375 / 485;
   background: var(--color-surface-soft);
+  /* Same as the review carousel: the dots below are the indicator. */
+  scrollbar-width: none;
+}
+
+._track_1e69n_8::-webkit-scrollbar {
+  display: none;
 }
 
-._slide_h8m00_19 {
+._slide_1e69n_25 {
   position: relative;
   flex: 0 0 100%;
   scroll-snap-align: center;
   aspect-ratio: 375 / 485;
 }
 
-._image_h8m00_26 {
+._image_1e69n_32 {
   object-fit: cover;
 }
 
-._placeholder_h8m00_30 {
+._placeholder_1e69n_36 {
   width: 100%;
   aspect-ratio: 375 / 485;
   background: var(--color-surface-soft);
 }
 
 /* Share button — top-right chrome over the image (mobile/button: 32px, soft, radius-8). */
-._share_h8m00_37 {
+._share_1e69n_43 {
   position: absolute;
   top: var(--space-16);
   right: var(--space-16);
@@ -2162,13 +2182,13 @@
   cursor: pointer;
 }
 
-._dots_h8m00_54 {
+._dots_1e69n_60 {
   display: flex;
   justify-content: center;
   gap: var(--space-6);
 }
 
-._dot_h8m00_54 {
+._dot_1e69n_60 {
   width: 8px;
   height: 8px;
   padding: 0;
@@ -2180,13 +2200,13 @@
   position: relative;
 }
 
-._dot_h8m00_54::after {
+._dot_1e69n_60::after {
   content: '';
   position: absolute;
   inset: -18px;
 }
 
-._dotActive_h8m00_78 {
+._dotActive_1e69n_84 {
   background: var(--color-surface-max);
 }
 /*
@@ -2943,14 +2963,14 @@
 ._dotActive_9mquf_63 {
   background: #f9fafa;
 }
-._section_iy175_1 {
+._section_n8xka_1 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   padding: var(--space-24) 0 var(--space-16);
 }
 
-._track_iy175_8 {
+._track_n8xka_8 {
   display: flex;
   gap: var(--space-12);
   list-style: none;
@@ -2960,6 +2980,13 @@
   scroll-snap-type: x mandatory;
   scroll-padding-inline: var(--space-16);
   -webkit-overflow-scrolling: touch;
+  /* The dots are the position indicator. A native scrollbar under them says the same
+     thing twice, in a style nothing else on the page uses, and it is not in the frame. */
+  scrollbar-width: none;
+}
+
+._track_n8xka_8::-webkit-scrollbar {
+  display: none;
 }
 
 /*
@@ -2973,7 +3000,7 @@
  * is raised with DAZN's designers, and the card flips the moment they retune the token.
  * Everything else on this block follows Figma exactly.
  */
-._card_iy175_31 {
+._card_n8xka_38 {
   flex: 0 0 323px;
   max-width: calc(100% - var(--space-20));
   scroll-snap-align: start;
@@ -2985,7 +3012,7 @@
   background: #f9fafa;
 }
 
-._quote_iy175_43 {
+._quote_n8xka_50 {
   margin: 0;
   font-size: var(--type-heading-lg-size);
   line-height: 1.2;
@@ -2993,32 +3020,32 @@
   color: #0c161c;
 }
 
-._author_iy175_51 {
+._author_n8xka_58 {
   margin: 0;
   font-size: var(--type-trimmed-sm-size);
   color: #3d4549;
 }
 
-._dots_iy175_57 {
+._dots_n8xka_64 {
   display: flex;
   justify-content: center;
   gap: var(--space-8);
 }
 
-._dot_iy175_57 {
+._dot_n8xka_64 {
   width: 8px;
   height: 8px;
   border-radius: var(--radius-full);
   background: #9ea2a4;
 }
 
-._dotActive_iy175_70 {
+._dotActive_n8xka_77 {
   background: #f9fafa;
 }
 
 /* Quiet, but present. Not in the Figma frame — the component's own note makes it
    mandatory, and staff quotes shown as reviews without one is the failure it guards. */
-._disclaimer_iy175_76 {
+._disclaimer_n8xka_83 {
   margin: 0;
   padding: 0 var(--space-16);
   font-size: var(--type-trimmed-xs-size);

package/dist/styles.css

@@ -305,7 +305,7 @@
  * (serif, in a page that never set one) and its own background.
  */
 
-._surface_nj74o_10 {
+._surface_cfqo9_10 {
   font-family: var(--font-family-base);
   font-weight: var(--font-weight-regular);
   font-size: var(--type-paragraph-size);
@@ -316,9 +316,9 @@
   text-rendering: optimizeLegibility;
 }
 
-._surface_nj74o_10 *,
-._surface_nj74o_10 *::before,
-._surface_nj74o_10 *::after {
+._surface_cfqo9_10 *,
+._surface_cfqo9_10 *::before,
+._surface_cfqo9_10 *::after {
   box-sizing: border-box;
 }
 
@@ -330,7 +330,7 @@
  * through a screen of the opposite palette) is invisible in our own app, where the body
  * already matches, and so goes unnoticed until a partner reports it.
  */
-._fill_nj74o_35 {
+._fill_cfqo9_35 {
   /* Declared twice on purpose, and the order matters.
      `dvh` landed in Chrome 108 / iOS 15.4, and this package supports React 16.14 because
      that is what DAZN's app runs — an app that old can be paired with a WebView that old.
@@ -348,17 +348,31 @@
   min-height: calc(100dvh - var(--surface-top, 0px));
 }
 
-._surface_nj74o_10 :is(h1, h2, h3) {
+/*
+ * Base heading typography — a DEFAULT, which is why every part is wrapped in `:where()`.
+ *
+ * This is the same trap the link rule below documents, and it was still live here.
+ * `.surface h1` is specificity (0,1,1) and a CSS-module class is (0,1,0), so these rules
+ * beat every component that set its own heading size. The category hero asked for 40px in
+ * `PcpHero.module.css` and rendered at 24px — the `--type-heading-lg-size` below — which
+ * read as "the design is wrong" rather than "a base style is winning", and sent us
+ * measuring Figma twice before checking what the browser actually computed.
+ *
+ * `:where()` drops the whole selector to specificity (0,0,0), so ANY component class wins
+ * deterministically rather than by source order, while a heading that sets nothing still
+ * gets the scale. That is what a base style should be.
+ */
+:where(._surface_cfqo9_10) :where(h1, h2, h3) {
   margin: 0;
   font-weight: var(--font-weight-bold);
 }
 
-._surface_nj74o_10 h1 {
+:where(._surface_cfqo9_10) :where(h1) {
   font-size: var(--type-heading-lg-size);
   line-height: var(--type-heading-lg-line);
 }
 
-._surface_nj74o_10 h2 {
+:where(._surface_cfqo9_10) :where(h2) {
   font-size: var(--type-heading-md-size);
   line-height: var(--type-heading-md-line);
 }
@@ -377,27 +391,27 @@
  * Restricting the rule to unclassed anchors keeps what it is for — a bare `<a>` must never
  * render browser-blue — while leaving any anchor that carries a class in charge of itself.
  */
-._surface_nj74o_10 a:not([class]) {
+._surface_cfqo9_10 a:not([class]) {
   color: inherit;
 }
 
-._surface_nj74o_10 img {
+._surface_cfqo9_10 img {
   max-width: 100%;
   height: auto;
 }
 
 /* Visible focus for keyboard users — a WCAG 2.1 AA launch gate, so it cannot be left
    to the host to remember. */
-._surface_nj74o_10 :focus-visible {
+._surface_cfqo9_10 :focus-visible {
   outline: 2px solid var(--color-surface-max);
   outline-offset: 2px;
   border-radius: var(--radius-4);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  ._surface_nj74o_10 *,
-  ._surface_nj74o_10 *::before,
-  ._surface_nj74o_10 *::after {
+  ._surface_cfqo9_10 *,
+  ._surface_cfqo9_10 *::before,
+  ._surface_cfqo9_10 *::after {
     animation-duration: 0.001ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.001ms !important;
@@ -2109,14 +2123,14 @@
   gap: var(--space-20);
 }
 
-._gallery_h8m00_1 {
+._gallery_1e69n_1 {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
 }
 
-._track_h8m00_8 {
+._track_1e69n_8 {
   display: flex;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
@@ -2125,27 +2139,33 @@
      edge-to-edge and flush under the header. */
   aspect-ratio: 375 / 485;
   background: var(--color-surface-soft);
+  /* Same as the review carousel: the dots below are the indicator. */
+  scrollbar-width: none;
+}
+
+._track_1e69n_8::-webkit-scrollbar {
+  display: none;
 }
 
-._slide_h8m00_19 {
+._slide_1e69n_25 {
   position: relative;
   flex: 0 0 100%;
   scroll-snap-align: center;
   aspect-ratio: 375 / 485;
 }
 
-._image_h8m00_26 {
+._image_1e69n_32 {
   object-fit: cover;
 }
 
-._placeholder_h8m00_30 {
+._placeholder_1e69n_36 {
   width: 100%;
   aspect-ratio: 375 / 485;
   background: var(--color-surface-soft);
 }
 
 /* Share button — top-right chrome over the image (mobile/button: 32px, soft, radius-8). */
-._share_h8m00_37 {
+._share_1e69n_43 {
   position: absolute;
   top: var(--space-16);
   right: var(--space-16);
@@ -2162,13 +2182,13 @@
   cursor: pointer;
 }
 
-._dots_h8m00_54 {
+._dots_1e69n_60 {
   display: flex;
   justify-content: center;
   gap: var(--space-6);
 }
 
-._dot_h8m00_54 {
+._dot_1e69n_60 {
   width: 8px;
   height: 8px;
   padding: 0;
@@ -2180,13 +2200,13 @@
   position: relative;
 }
 
-._dot_h8m00_54::after {
+._dot_1e69n_60::after {
   content: '';
   position: absolute;
   inset: -18px;
 }
 
-._dotActive_h8m00_78 {
+._dotActive_1e69n_84 {
   background: var(--color-surface-max);
 }
 /*
@@ -2943,14 +2963,14 @@
 ._dotActive_9mquf_63 {
   background: #f9fafa;
 }
-._section_iy175_1 {
+._section_n8xka_1 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   padding: var(--space-24) 0 var(--space-16);
 }
 
-._track_iy175_8 {
+._track_n8xka_8 {
   display: flex;
   gap: var(--space-12);
   list-style: none;
@@ -2960,6 +2980,13 @@
   scroll-snap-type: x mandatory;
   scroll-padding-inline: var(--space-16);
   -webkit-overflow-scrolling: touch;
+  /* The dots are the position indicator. A native scrollbar under them says the same
+     thing twice, in a style nothing else on the page uses, and it is not in the frame. */
+  scrollbar-width: none;
+}
+
+._track_n8xka_8::-webkit-scrollbar {
+  display: none;
 }
 
 /*
@@ -2973,7 +3000,7 @@
  * is raised with DAZN's designers, and the card flips the moment they retune the token.
  * Everything else on this block follows Figma exactly.
  */
-._card_iy175_31 {
+._card_n8xka_38 {
   flex: 0 0 323px;
   max-width: calc(100% - var(--space-20));
   scroll-snap-align: start;
@@ -2985,7 +3012,7 @@
   background: #f9fafa;
 }
 
-._quote_iy175_43 {
+._quote_n8xka_50 {
   margin: 0;
   font-size: var(--type-heading-lg-size);
   line-height: 1.2;
@@ -2993,32 +3020,32 @@
   color: #0c161c;
 }
 
-._author_iy175_51 {
+._author_n8xka_58 {
   margin: 0;
   font-size: var(--type-trimmed-sm-size);
   color: #3d4549;
 }
 
-._dots_iy175_57 {
+._dots_n8xka_64 {
   display: flex;
   justify-content: center;
   gap: var(--space-8);
 }
 
-._dot_iy175_57 {
+._dot_n8xka_64 {
   width: 8px;
   height: 8px;
   border-radius: var(--radius-full);
   background: #9ea2a4;
 }
 
-._dotActive_iy175_70 {
+._dotActive_n8xka_77 {
   background: #f9fafa;
 }
 
 /* Quiet, but present. Not in the Figma frame — the component's own note makes it
    mandatory, and staff quotes shown as reviews without one is the failure it guards. */
-._disclaimer_iy175_76 {
+._disclaimer_n8xka_83 {
   margin: 0;
   padding: 0 var(--space-16);
   font-size: var(--type-trimmed-xs-size);

package/package.json

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