@nok-integration/storefront-react 0.16.0 → 0.16.2

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

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

package/dist/standalone/styles.css

@@ -3,6 +3,23 @@
  * as CSS custom properties. Mobile-first, 375pt base width, embedded in the DAZN app.
  * Values are display tokens only; money is always server-authoritative.
  */
+/*
+ * THE HOST PROVIDES THE TYPEFACE. There is deliberately no `@font-face` here.
+ *
+ * The name below is the one inside DAZN's own font files (`name` ID 1 = "DAZN Oscine"),
+ * so a host that already serves the face — as DAZN do on their pages — is matched exactly
+ * and the mounted components inherit it. Nothing to configure.
+ *
+ * Two reasons not to ship it in the package. A `url()` here resolves against the
+ * CONSUMER's origin, so any path we picked would 404 in every host but the one we guessed;
+ * and inlining the two faces as data URIs adds ~120 kB to a bundle that is 67 kB gzipped,
+ * which is most of a tripling to deliver something the host almost certainly already has.
+ *
+ * A host WITHOUT the face falls through to the system stack and renders correctly but not
+ * on-brand. If that is ever the situation, the fix belongs in the host, not here.
+ *
+ * Our own storefront is such a host and serves them from `app/theme.css`.
+ */
 :root {
   /* ── Typeface ─────────────────────────────────────────────────────────── */
   --font-family-base:
@@ -288,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);
@@ -299,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;
 }
 
@@ -313,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.
@@ -331,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);
 }
@@ -360,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;

package/dist/styles.css

@@ -3,6 +3,23 @@
  * as CSS custom properties. Mobile-first, 375pt base width, embedded in the DAZN app.
  * Values are display tokens only; money is always server-authoritative.
  */
+/*
+ * THE HOST PROVIDES THE TYPEFACE. There is deliberately no `@font-face` here.
+ *
+ * The name below is the one inside DAZN's own font files (`name` ID 1 = "DAZN Oscine"),
+ * so a host that already serves the face — as DAZN do on their pages — is matched exactly
+ * and the mounted components inherit it. Nothing to configure.
+ *
+ * Two reasons not to ship it in the package. A `url()` here resolves against the
+ * CONSUMER's origin, so any path we picked would 404 in every host but the one we guessed;
+ * and inlining the two faces as data URIs adds ~120 kB to a bundle that is 67 kB gzipped,
+ * which is most of a tripling to deliver something the host almost certainly already has.
+ *
+ * A host WITHOUT the face falls through to the system stack and renders correctly but not
+ * on-brand. If that is ever the situation, the fix belongs in the host, not here.
+ *
+ * Our own storefront is such a host and serves them from `app/theme.css`.
+ */
 :root {
   /* ── Typeface ─────────────────────────────────────────────────────────── */
   --font-family-base:
@@ -288,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);
@@ -299,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;
 }
 
@@ -313,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.
@@ -331,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);
 }
@@ -360,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;

package/package.json

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