@stapel/listings-react 0.30.5 → 0.30.6

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @stapel/listings-react
 
+## 0.30.6
+
+### Patch Changes
+
+- 0fccad9: The title clamp outranks a host's own selector on the same element
+
+  `-webkit-line-clamp` does nothing without `display: -webkit-box`, and that one
+  declaration was the easiest in the rule for a container to overwrite by
+  accident. A single class selector scores (0,1,0) — exactly what
+  `[data-testid="listings-serp-title"]` scores — so whichever sheet loaded last
+  won.
+
+  Measured on a live storefront: the host set `display: block` on its title
+  testids to stop two inline spans running together, that rule came second, and
+  every clamp in the app went inert. The class was on the element, the sheet was
+  in the head, `-webkit-line-clamp: 2` was in the computed style, and a
+  113-character title drew three lines — every check that could be made without
+  a browser passed.
+
+  The rule now repeats its own class, scoring (0,2,0). It cannot lose that tie,
+  and still loses to a host that really means it.
+
 ## 0.30.5
 
 ### Patch Changes

package/dist/default/titleClamp.d.ts

@@ -42,6 +42,27 @@ export declare const TITLE_CLAMP_LINES = 2;
 export declare const TITLE_CLAMP_CLASS = "stapel-listing-title-clamp";
 /** The `href` the hoisted stylesheet is deduplicated by. */
 export declare const TITLE_CLAMP_STYLE_HREF = "stapel-listings-title-clamp";
-/** The rule itself, as text, so a test can assert it. */
+/**
+ * The rule itself, as text, so a test can assert it.
+ *
+ * ── Why the class is written TWICE ────────────────────────────────────────
+ *
+ * `-webkit-line-clamp` does nothing without `display: -webkit-box`, so that
+ * one declaration is the whole clamp — and it is the easiest declaration in
+ * the rule for a host to overwrite by accident. A single class selector scores
+ * (0,1,0), exactly the same as the `[data-testid="…-title"]` selector a
+ * container naturally reaches for, so whichever stylesheet loads LAST wins.
+ * Measured on a live storefront (2026-09-13): the host set `display: block` on
+ * its title testids to stop two inline spans running together, that rule
+ * happened to come second, and every clamp in the app went inert — the class
+ * was on the element, the sheet was in the head, `-webkit-line-clamp: 2` was
+ * in the computed style, and a 113-character title still drew three lines.
+ *
+ * Repeating the class scores (0,2,0), which outranks any single class or
+ * attribute selector whatever the load order, and still loses to a host that
+ * really means it (an id, a doubled selector of its own, `!important`). That
+ * is the right place on the ladder: a clamp that cannot be overridden at all
+ * is a different bug.
+ */
 export declare function titleClampCss(): string;
 //# sourceMappingURL=titleClamp.d.ts.map

package/dist/default/titleClamp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"titleClamp.d.ts","sourceRoot":"","sources":["../../src/default/titleClamp.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,mDAAmD;AACnD,eAAO,MAAM,iBAAiB,IAAI,CAAC;AAEnC,yCAAyC;AACzC,eAAO,MAAM,iBAAiB,+BAA+B,CAAC;AAE9D,4DAA4D;AAC5D,eAAO,MAAM,sBAAsB,gCAAgC,CAAC;AAEpE,yDAAyD;AACzD,wBAAgB,aAAa,IAAI,MAAM,CAMtC"}
+{"version":3,"file":"titleClamp.d.ts","sourceRoot":"","sources":["../../src/default/titleClamp.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,mDAAmD;AACnD,eAAO,MAAM,iBAAiB,IAAI,CAAC;AAEnC,yCAAyC;AACzC,eAAO,MAAM,iBAAiB,+BAA+B,CAAC;AAE9D,4DAA4D;AAC5D,eAAO,MAAM,sBAAsB,gCAAgC,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,aAAa,IAAI,MAAM,CAOtC"}

package/dist/default/titleClamp.js

@@ -42,9 +42,31 @@ export const TITLE_CLAMP_LINES = 2;
 export const TITLE_CLAMP_CLASS = "stapel-listing-title-clamp";
 /** The `href` the hoisted stylesheet is deduplicated by. */
 export const TITLE_CLAMP_STYLE_HREF = "stapel-listings-title-clamp";
-/** The rule itself, as text, so a test can assert it. */
+/**
+ * The rule itself, as text, so a test can assert it.
+ *
+ * ── Why the class is written TWICE ────────────────────────────────────────
+ *
+ * `-webkit-line-clamp` does nothing without `display: -webkit-box`, so that
+ * one declaration is the whole clamp — and it is the easiest declaration in
+ * the rule for a host to overwrite by accident. A single class selector scores
+ * (0,1,0), exactly the same as the `[data-testid="…-title"]` selector a
+ * container naturally reaches for, so whichever stylesheet loads LAST wins.
+ * Measured on a live storefront (2026-09-13): the host set `display: block` on
+ * its title testids to stop two inline spans running together, that rule
+ * happened to come second, and every clamp in the app went inert — the class
+ * was on the element, the sheet was in the head, `-webkit-line-clamp: 2` was
+ * in the computed style, and a 113-character title still drew three lines.
+ *
+ * Repeating the class scores (0,2,0), which outranks any single class or
+ * attribute selector whatever the load order, and still loses to a host that
+ * really means it (an id, a doubled selector of its own, `!important`). That
+ * is the right place on the ladder: a clamp that cannot be overridden at all
+ * is a different bug.
+ */
 export function titleClampCss() {
-    return (`.${TITLE_CLAMP_CLASS}{display:-webkit-box;-webkit-box-orient:vertical;` +
+    const self = `.${TITLE_CLAMP_CLASS}.${TITLE_CLAMP_CLASS}`;
+    return (`${self}{display:-webkit-box;-webkit-box-orient:vertical;` +
         `-webkit-line-clamp:${String(TITLE_CLAMP_LINES)};overflow:hidden;` +
         `overflow-wrap:normal}`);
 }

package/dist/default/titleClamp.js.map

@@ -1 +1 @@
-{"version":3,"file":"titleClamp.js","sourceRoot":"","sources":["../../src/default/titleClamp.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,mDAAmD;AACnD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,CAAC;AAEnC,yCAAyC;AACzC,MAAM,CAAC,MAAM,iBAAiB,GAAG,4BAA4B,CAAC;AAE9D,4DAA4D;AAC5D,MAAM,CAAC,MAAM,sBAAsB,GAAG,6BAA6B,CAAC;AAEpE,yDAAyD;AACzD,MAAM,UAAU,aAAa;IAC3B,OAAO,CACL,IAAI,iBAAiB,mDAAmD;QACxE,sBAAsB,MAAM,CAAC,iBAAiB,CAAC,mBAAmB;QAClE,uBAAuB,CACxB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"titleClamp.js","sourceRoot":"","sources":["../../src/default/titleClamp.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,mDAAmD;AACnD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,CAAC;AAEnC,yCAAyC;AACzC,MAAM,CAAC,MAAM,iBAAiB,GAAG,4BAA4B,CAAC;AAE9D,4DAA4D;AAC5D,MAAM,CAAC,MAAM,sBAAsB,GAAG,6BAA6B,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,aAAa;IAC3B,MAAM,IAAI,GAAG,IAAI,iBAAiB,IAAI,iBAAiB,EAAE,CAAC;IAC1D,OAAO,CACL,GAAG,IAAI,mDAAmD;QAC1D,sBAAsB,MAAM,CAAC,iBAAiB,CAAC,mBAAmB;QAClE,uBAAuB,CACxB,CAAC;AACJ,CAAC"}

package/llms.txt

@@ -1,4 +1,4 @@
-# @stapel/listings-react 0.30.5
+# @stapel/listings-react 0.30.6
 
 Headless React flow pair for stapel-listings (contract >=0.22 <0.23) — business + state, zero visual opinion.
 Built on @stapel/core: typed client + StapelApiError envelope, auth token refresh,

package/manifest.json

@@ -1,7 +1,7 @@
 {
   "$generated": "by scripts/gen-manifest.mjs — do not edit; drift-gated (pnpm gen:manifest:check)",
   "package": "@stapel/listings-react",
-  "version": "0.30.5",
+  "version": "0.30.6",
   "backend": {
     "module": "stapel-listings",
     "contract": ">=0.22 <0.23"

package/nav-manifest.json

@@ -1,6 +1,6 @@
 {
   "package": "@stapel/listings-react",
-  "version": "0.30.5",
+  "version": "0.30.6",
   "entries": [
     {
       "id": "listings.detail",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stapel/listings-react",
-  "version": "0.30.5",
+  "version": "0.30.6",
   "description": "Headless React pair for stapel-listings: a typed client over the draft twin, the composer that turns a category schema into a submittable listing, and the owner's dashboard. Two independent axes are rendered as two — lifecycle `status` decides visibility and `moderation_status` decides nothing about it, so an edit to a live listing stays live and says 'under review' instead of vanishing. Feature values are drawn and mirrored by @stapel/attributes-react; photos arrive as an injected upload bag whose `refs` ARE `images_draft` and whose `settled` gates the submit; a publish refusal is routed onto the control that caused it by slug. Zero visual opinion in the main entry; an opt-in /default subpath ships the antd skin.",
   "license": "MIT",
   "repository": {
@@ -106,9 +106,9 @@
     "@stapel/core": "^0.26.1",
     "@stapel/currencies-react": "^0.4.0",
     "@stapel/image": "^0.4.2",
+    "@stapel/showcase": "^0.3.0",
     "@stapel/tokens": "^0.8.0",
-    "@stapel/tokens-antd": "^0.18.1",
-    "@stapel/showcase": "^0.3.0"
+    "@stapel/tokens-antd": "^0.18.1"
   },
   "engines": {
     "node": ">=22"

package/src/analytics/generated/events.json

@@ -1,7 +1,7 @@
 {
   "$generated": "by scripts/gen-events.mjs — do not edit; drift-gated (pnpm gen:events:check)",
   "package": "@stapel/listings-react",
-  "version": "0.30.5",
+  "version": "0.30.6",
   "defined": [],
   "flows": []
 }

package/src/default/titleClamp.ts

@@ -46,10 +46,32 @@ export const TITLE_CLAMP_CLASS = "stapel-listing-title-clamp";
 /** The `href` the hoisted stylesheet is deduplicated by. */
 export const TITLE_CLAMP_STYLE_HREF = "stapel-listings-title-clamp";
 
-/** The rule itself, as text, so a test can assert it. */
+/**
+ * The rule itself, as text, so a test can assert it.
+ *
+ * ── Why the class is written TWICE ────────────────────────────────────────
+ *
+ * `-webkit-line-clamp` does nothing without `display: -webkit-box`, so that
+ * one declaration is the whole clamp — and it is the easiest declaration in
+ * the rule for a host to overwrite by accident. A single class selector scores
+ * (0,1,0), exactly the same as the `[data-testid="…-title"]` selector a
+ * container naturally reaches for, so whichever stylesheet loads LAST wins.
+ * Measured on a live storefront (2026-09-13): the host set `display: block` on
+ * its title testids to stop two inline spans running together, that rule
+ * happened to come second, and every clamp in the app went inert — the class
+ * was on the element, the sheet was in the head, `-webkit-line-clamp: 2` was
+ * in the computed style, and a 113-character title still drew three lines.
+ *
+ * Repeating the class scores (0,2,0), which outranks any single class or
+ * attribute selector whatever the load order, and still loses to a host that
+ * really means it (an id, a doubled selector of its own, `!important`). That
+ * is the right place on the ladder: a clamp that cannot be overridden at all
+ * is a different bug.
+ */
 export function titleClampCss(): string {
+  const self = `.${TITLE_CLAMP_CLASS}.${TITLE_CLAMP_CLASS}`;
   return (
-    `.${TITLE_CLAMP_CLASS}{display:-webkit-box;-webkit-box-orient:vertical;` +
+    `${self}{display:-webkit-box;-webkit-box-orient:vertical;` +
     `-webkit-line-clamp:${String(TITLE_CLAMP_LINES)};overflow:hidden;` +
     `overflow-wrap:normal}`
   );