@nok-integration/storefront-react 0.16.2 → 0.16.4

package/dist/index.d.ts

@@ -3386,9 +3386,20 @@ export declare type ShopEvent = {
  * if the design is ours, and a mismatch if only half of it is.
  *
  * The cart count is real, never fabricated: `useCartCount` returns `null` until it knows,
- * and the badge stays hidden until then. It is shown at zero, as the design draws it —
- * `.cart.icon` has an explicit empty state carrying "0" — but a "0" that appears while the
- * cart is still loading and then jumps to "3" is a guess wearing a number.
+ * and the badge stays hidden until then — a "0" that appears while the cart is still
+ * loading and then jumps to "3" is a guess wearing a number.
+ *
+ * **The badge is also hidden at zero**, which is a deliberate departure from the frame:
+ * `.cart.icon` draws an explicit empty state carrying "0". DAZN asked for it removed on
+ * 17 Aug 2026 and they are right — a filled pill is an attention mark, and one that says
+ * there is nothing to look at spends the fan's attention to tell them so. The empty state
+ * is the icon on its own.
+ *
+ * `useCartCount` had said as much since it was written ("a badge must render nothing for
+ * `null` and nothing for `0`"); the component followed the frame instead, and the two
+ * disagreed in the codebase for as long as the badge existed. The count still
+ * distinguishes the two states, because the accessible name needs to: unknown reads
+ * "Cart", empty reads "Cart, empty".
  *
  * Mount it inside `DaznShopProvider`, and inside `CartSheet` if `showCart` is on, since
  * the trigger opens that sheet.

package/dist/index.mjs

@@ -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,
@@ -8717,7 +8717,7 @@ function ShopHeader({
     /* @__PURE__ */ jsxs("div", { className: styles$1.right, children: [
       showCart ? /* @__PURE__ */ jsxs(CartTrigger, { className: styles$1.iconBtn, "aria-label": cartLabel, children: [
         /* @__PURE__ */ jsx(CartIcon, {}),
-        cartCount === null ? null : /* @__PURE__ */ jsx("span", { className: styles$1.badge, "aria-hidden": "true", children: cartCount > 99 ? "99+" : cartCount })
+        cartCount !== null && cartCount > 0 ? /* @__PURE__ */ jsx("span", { className: styles$1.badge, "aria-hidden": "true", children: cartCount > 99 ? "99+" : cartCount }) : null
       ] }) : null,
       onMenu ? /* @__PURE__ */ jsx(
         "button",

package/dist/standalone/storefront.mjs

@@ -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,
@@ -8717,7 +8717,7 @@ function ShopHeader({
     /* @__PURE__ */ jsxs("div", { className: styles$1.right, children: [
       showCart ? /* @__PURE__ */ jsxs(CartTrigger, { className: styles$1.iconBtn, "aria-label": cartLabel, children: [
         /* @__PURE__ */ jsx(CartIcon, {}),
-        cartCount === null ? null : /* @__PURE__ */ jsx("span", { className: styles$1.badge, "aria-hidden": "true", children: cartCount > 99 ? "99+" : cartCount })
+        cartCount !== null && cartCount > 0 ? /* @__PURE__ */ jsx("span", { className: styles$1.badge, "aria-hidden": "true", children: cartCount > 99 ? "99+" : cartCount }) : null
       ] }) : null,
       onMenu ? /* @__PURE__ */ jsx(
         "button",

package/dist/standalone/styles.css

@@ -2123,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;
@@ -2139,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);
@@ -2176,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;
@@ -2194,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);
 }
 /*
@@ -2957,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;
@@ -2974,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;
 }
 
 /*
@@ -2987,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;
@@ -2999,7 +3012,7 @@
   background: #f9fafa;
 }
 
-._quote_iy175_43 {
+._quote_n8xka_50 {
   margin: 0;
   font-size: var(--type-heading-lg-size);
   line-height: 1.2;
@@ -3007,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

@@ -2123,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;
@@ -2139,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);
@@ -2176,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;
@@ -2194,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);
 }
 /*
@@ -2957,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;
@@ -2974,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;
 }
 
 /*
@@ -2987,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;
@@ -2999,7 +3012,7 @@
   background: #f9fafa;
 }
 
-._quote_iy175_43 {
+._quote_n8xka_50 {
   margin: 0;
   font-size: var(--type-heading-lg-size);
   line-height: 1.2;
@@ -3007,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,14 +1,11 @@
 {
   "name": "@nok-integration/storefront-react",
-  "version": "0.16.2",
+  "version": "0.16.4",
   "description": "Mountable React storefront components: catalogue, product detail and cart, mounted directly into a host DOM tree. No iframe.",
   "license": "UNLICENSED",
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
   "type": "module",
   "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
@@ -23,32 +20,18 @@
     "dist",
     "!dist/**/*.map"
   ],
-  "scripts": {
-    "build": "pnpm build:package && pnpm build:standalone",
-    "build:package": "vite build",
-    "build:standalone": "BUILD_TARGET=standalone vite build",
-    "typecheck": "tsc --noEmit",
-    "build:partner": "PARTNER_DROP=1 pnpm build && pnpm pack"
-  },
+  "sideEffects": [
+    "*.css"
+  ],
   "peerDependencies": {
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
-  "devDependencies": {
-    "@dazn/contracts": "^2.0.0",
-    "@microsoft/api-extractor": "^7.58.12",
-    "@types/react": "^19.1.0",
-    "@types/react-dom": "^19.1.0",
-    "@vitejs/plugin-react": "^4.3.4",
-    "typescript": "^5.7.3",
-    "vite": "^7.0.0",
-    "vite-plugin-dts": "^5.0.3"
-  },
-  "module": "./dist/index.mjs",
-  "sideEffects": [
-    "*.css"
-  ],
   "dependencies": {
     "zod": "^3.24.1"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   }
 }