@tokenoftrust/cli 2.5.3 → 2.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokenoftrust/cli",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "description": "Token of Trust developer CLI — clone a tenant store, run it locally with save→reload, and submit it for preview. Installs the `tot` command.",
   "license": "Apache-2.0",
   "author": "Token of Trust",

package/src/declared-config.mjs

@@ -712,6 +712,15 @@ export function describeNicotineWarningPresentation(p) {
  * of every page; "block" is the reinforced box on the product page. Every interpolated value
  * is a validated hex colour, enum or number. Styling is inline (no utility classes), so the
  * markup renders the same wherever it is served, whatever stylesheet the page carries.
+ *
+ * Every presentation and visibility declaration is inline `!important`, which no tenant
+ * stylesheet rule can override: tenant CSS cannot hide, move, clip, fade or restyle the warning,
+ * and the text element re-asserts the warning's own presentation so a tenant `p { … }` rule does
+ * not reach it. What inline styles cannot stop is another element painting over the warning (a
+ * fixed or sticky header pinned to the top of the viewport). Raising the warning above page
+ * chrome would paint it over the tenant's own open menus and drawers, so occlusion is measured
+ * instead: the page browser gate (`validate-page-browser.mjs`, `nicotineWarning`) fails a page
+ * whose warning is covered at a phone, tablet or desktop width and names the covering element.
  * @param {unknown} declaration the tenant's `compliance.nicotineWarning`
  * @param {"bar" | "block"} variant
  */
@@ -719,11 +728,40 @@ export function nicotineWarningHtml(declaration, variant) {
   const { presentation, preset } = resolveNicotineWarning(declaration);
   const attrs = `style="${nicotineWarningStyle(presentation, variant)}" role="note" aria-label="Health warning" ` +
     `data-compliance="nicotine-warning" data-nicotine-warning-preset="${preset ?? "custom"}"`;
+  const text = NICOTINE_WARNING_TEXT_LOCK;
   return variant === "bar"
-    ? `<div ${attrs}><p class="container-prose" style="margin-block:0;padding-block:0.5rem;text-align:center">${NICOTINE_WARNING_TEXT}</p></div>`
-    : `<div ${attrs}><p style="margin:0">${NICOTINE_WARNING_TEXT}</p></div>`;
+    ? `<div ${attrs}><p class="container-prose" style="margin-block:0;padding-block:0.5rem;text-align:center;${text}">${NICOTINE_WARNING_TEXT}</p></div>`
+    : `<div ${attrs}><p style="margin:0;${text}">${NICOTINE_WARNING_TEXT}</p></div>`;
 }
 
+/** Declarations that keep the warning on screen, at full opacity, in its own place. */
+const NICOTINE_WARNING_VISIBILITY_LOCK = [
+  "display:block",
+  "visibility:visible",
+  "opacity:1",
+  "position:relative",
+  "inset:auto",
+  "transform:none",
+  "clip-path:none",
+  "filter:none",
+  "height:auto",
+  "max-height:none",
+  "overflow:visible",
+];
+
+/** The text element inherits the warning's presentation, whatever a tenant `p` rule says. */
+const NICOTINE_WARNING_TEXT_LOCK = [
+  "display:block",
+  "visibility:visible",
+  "opacity:1",
+  "color:inherit",
+  "font-size:inherit",
+  "font-weight:inherit",
+  "text-transform:inherit",
+  "letter-spacing:inherit",
+  "line-height:inherit",
+].map((d) => `${d}!important`).join(";");
+
 /**
  * Inline CSS for a presentation. `variant` "block" (the product page) never renders smaller
  * than 14px.
@@ -744,5 +782,6 @@ export function nicotineWarningStyle(p, variant) {
     `font-weight:${p.fontWeight}`,
     `font-size:${size}px`,
     "line-height:1.4",
-  ].join(";");
+    ...NICOTINE_WARNING_VISIBILITY_LOCK,
+  ].map((d) => `${d}!important`).join(";");
 }