@nok-integration/storefront-react 0.16.3 → 0.16.5

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

@@ -5951,8 +5951,8 @@ function PriceBlock({
   return /* @__PURE__ */ jsxs("div", { className: [styles$y.root, styles$y[size], styles$y[align], styles$y[variant]].join(" "), children: [
     /* @__PURE__ */ jsx("span", { className: styles$y.price, children: format(price2) }),
     hasCompare && /* @__PURE__ */ jsxs("span", { className: styles$y.compareAt, children: [
-      /* @__PURE__ */ jsx("span", { className: "visually-hidden", children: "Was " }),
-      format(compareAt2)
+      /* @__PURE__ */ jsx("span", { className: "visually-hidden", children: `Was ${format(compareAt2)}` }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: format(compareAt2) })
     ] }),
     hasCompare && variant === "badge" && pct !== void 0 && /* @__PURE__ */ jsx(SaleBadge, { pct })
   ] });
@@ -6289,15 +6289,9 @@ function OrderTrackingContent({ orderRef, locale: localeProp }) {
       /* @__PURE__ */ jsxs("div", { className: styles$v.title, children: [
         /* @__PURE__ */ jsx("h1", { className: styles$v.headline, children: order.headline }),
         /* @__PURE__ */ jsxs("p", { className: styles$v.subtitle, children: [
-          /* @__PURE__ */ jsxs("span", { children: [
-            "Order #",
-            shortRef$1(order.order_ref)
-          ] }),
+          /* @__PURE__ */ jsx("span", { children: `Order #${shortRef$1(order.order_ref)}` }),
           /* @__PURE__ */ jsx("span", { className: styles$v.dot, "aria-hidden": "true" }),
-          /* @__PURE__ */ jsxs("span", { children: [
-            "Placed ",
-            formatPlaced$1(order.placed_at, locale)
-          ] })
+          /* @__PURE__ */ jsx("span", { children: `Placed ${formatPlaced$1(order.placed_at, locale)}` })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: styles$v.widget, children: [
@@ -6311,11 +6305,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp }) {
             rel: "noopener noreferrer",
             children: [
               "Track order",
-              /* @__PURE__ */ jsxs("span", { className: styles$v.srOnly, children: [
-                " (opens ",
-                order.tracking.carrier,
-                " in a new tab)"
-              ] })
+              /* @__PURE__ */ jsx("span", { className: styles$v.srOnly, children: ` (opens ${order.tracking.carrier} in a new tab)` })
             ]
           }
         )
@@ -6529,10 +6519,7 @@ function OrderCard({
   const body2 = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: styles$t.head, children: [
       /* @__PURE__ */ jsxs("div", { className: styles$t.heading, children: [
-        /* @__PURE__ */ jsxs("span", { className: styles$t.title, children: [
-          "Order #",
-          shortRef(order.order_ref)
-        ] }),
+        /* @__PURE__ */ jsx("span", { className: styles$t.title, children: `Order #${shortRef(order.order_ref)}` }),
         /* @__PURE__ */ jsx("span", { className: styles$t.date, children: formatPlaced(order.placed_at, locale) })
       ] }),
       /* @__PURE__ */ jsx(OrderStatusBadge, { status: order.status })
@@ -6570,11 +6557,7 @@ function Thumbnails({ order }) {
           "+",
           overflow
         ] }),
-        /* @__PURE__ */ jsxs("span", { className: "visually-hidden", children: [
-          "and ",
-          overflow,
-          " more items"
-        ] })
+        /* @__PURE__ */ jsx("span", { className: "visually-hidden", children: `and ${overflow} more items` })
       ] })
     ] }, `${src}-${i}`);
   }) });
@@ -7713,10 +7696,7 @@ function ColorSelector({ colours, selected: selected2, onSelect }) {
               c.image ? /* @__PURE__ */ jsx(ShopImage, { src: c.image, alt: "", fill: true, sizes: "79px", className: styles$f.image }) : /* @__PURE__ */ jsx("span", { className: styles$f.placeholder, "aria-hidden": "true" }),
               soldOut && /* @__PURE__ */ jsx("span", { className: styles$f.scrim, "aria-hidden": "true", children: "Out of stock" })
             ] }),
-            lowStock && /* @__PURE__ */ jsxs("span", { className: styles$f.stockBadge, "aria-hidden": "true", children: [
-              c.remaining,
-              " left"
-            ] })
+            lowStock && /* @__PURE__ */ jsx("span", { className: styles$f.stockBadge, "aria-hidden": "true", children: `${c.remaining} left` })
           ]
         },
         c.value
@@ -8717,7 +8697,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

@@ -5951,8 +5951,8 @@ function PriceBlock({
   return /* @__PURE__ */ jsxs("div", { className: [styles$y.root, styles$y[size], styles$y[align], styles$y[variant]].join(" "), children: [
     /* @__PURE__ */ jsx("span", { className: styles$y.price, children: format(price2) }),
     hasCompare && /* @__PURE__ */ jsxs("span", { className: styles$y.compareAt, children: [
-      /* @__PURE__ */ jsx("span", { className: "visually-hidden", children: "Was " }),
-      format(compareAt2)
+      /* @__PURE__ */ jsx("span", { className: "visually-hidden", children: `Was ${format(compareAt2)}` }),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: format(compareAt2) })
     ] }),
     hasCompare && variant === "badge" && pct !== void 0 && /* @__PURE__ */ jsx(SaleBadge, { pct })
   ] });
@@ -6289,15 +6289,9 @@ function OrderTrackingContent({ orderRef, locale: localeProp }) {
       /* @__PURE__ */ jsxs("div", { className: styles$v.title, children: [
         /* @__PURE__ */ jsx("h1", { className: styles$v.headline, children: order.headline }),
         /* @__PURE__ */ jsxs("p", { className: styles$v.subtitle, children: [
-          /* @__PURE__ */ jsxs("span", { children: [
-            "Order #",
-            shortRef$1(order.order_ref)
-          ] }),
+          /* @__PURE__ */ jsx("span", { children: `Order #${shortRef$1(order.order_ref)}` }),
           /* @__PURE__ */ jsx("span", { className: styles$v.dot, "aria-hidden": "true" }),
-          /* @__PURE__ */ jsxs("span", { children: [
-            "Placed ",
-            formatPlaced$1(order.placed_at, locale)
-          ] })
+          /* @__PURE__ */ jsx("span", { children: `Placed ${formatPlaced$1(order.placed_at, locale)}` })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: styles$v.widget, children: [
@@ -6311,11 +6305,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp }) {
             rel: "noopener noreferrer",
             children: [
               "Track order",
-              /* @__PURE__ */ jsxs("span", { className: styles$v.srOnly, children: [
-                " (opens ",
-                order.tracking.carrier,
-                " in a new tab)"
-              ] })
+              /* @__PURE__ */ jsx("span", { className: styles$v.srOnly, children: ` (opens ${order.tracking.carrier} in a new tab)` })
             ]
           }
         )
@@ -6529,10 +6519,7 @@ function OrderCard({
   const body2 = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: styles$t.head, children: [
       /* @__PURE__ */ jsxs("div", { className: styles$t.heading, children: [
-        /* @__PURE__ */ jsxs("span", { className: styles$t.title, children: [
-          "Order #",
-          shortRef(order.order_ref)
-        ] }),
+        /* @__PURE__ */ jsx("span", { className: styles$t.title, children: `Order #${shortRef(order.order_ref)}` }),
         /* @__PURE__ */ jsx("span", { className: styles$t.date, children: formatPlaced(order.placed_at, locale) })
       ] }),
       /* @__PURE__ */ jsx(OrderStatusBadge, { status: order.status })
@@ -6570,11 +6557,7 @@ function Thumbnails({ order }) {
           "+",
           overflow
         ] }),
-        /* @__PURE__ */ jsxs("span", { className: "visually-hidden", children: [
-          "and ",
-          overflow,
-          " more items"
-        ] })
+        /* @__PURE__ */ jsx("span", { className: "visually-hidden", children: `and ${overflow} more items` })
       ] })
     ] }, `${src}-${i}`);
   }) });
@@ -7713,10 +7696,7 @@ function ColorSelector({ colours, selected: selected2, onSelect }) {
               c.image ? /* @__PURE__ */ jsx(ShopImage, { src: c.image, alt: "", fill: true, sizes: "79px", className: styles$f.image }) : /* @__PURE__ */ jsx("span", { className: styles$f.placeholder, "aria-hidden": "true" }),
               soldOut && /* @__PURE__ */ jsx("span", { className: styles$f.scrim, "aria-hidden": "true", children: "Out of stock" })
             ] }),
-            lowStock && /* @__PURE__ */ jsxs("span", { className: styles$f.stockBadge, "aria-hidden": "true", children: [
-              c.remaining,
-              " left"
-            ] })
+            lowStock && /* @__PURE__ */ jsx("span", { className: styles$f.stockBadge, "aria-hidden": "true", children: `${c.remaining} left` })
           ]
         },
         c.value
@@ -8717,7 +8697,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/package.json

@@ -1,14 +1,11 @@
 {
   "name": "@nok-integration/storefront-react",
-  "version": "0.16.3",
+  "version": "0.16.5",
   "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/"
   }
 }