@ai-matrx/design-system 0.61.6 → 0.61.7

package/dist/index.js

@@ -350,12 +350,32 @@ function describe(el) {
   const t = (el.textContent ?? "").replace(/\s+/g, " ").trim();
   return t.length > 60 ? `${t.slice(0, 57)}\u2026` : t;
 }
+function ownTextNodes(el, view) {
+  const out = [];
+  const walker = el.ownerDocument.createTreeWalker(
+    el,
+    4
+    /* NodeFilter.SHOW_TEXT */
+  );
+  for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+    let offFlow = false;
+    for (let p = n.parentElement; p && p !== el; p = p.parentElement) {
+      const pcs = view.getComputedStyle(p);
+      if (pcs.position === "absolute" || pcs.position === "fixed" || pcs.display === "none") {
+        offFlow = true;
+        break;
+      }
+    }
+    if (!offFlow) out.push(n);
+  }
+  return out;
+}
 function findPillViolation(el, maxWidth = PILL_MAX_WIDTH_PX) {
   if (el.getAttribute("data-matrx-pill") === "off") return null;
-  const text = (el.textContent ?? "").trim();
-  if (!text) return null;
   const view = el.ownerDocument.defaultView;
   if (!view) return null;
+  const own = ownTextNodes(el, view);
+  if (!own.some((t) => (t.textContent ?? "").trim())) return null;
   const rect = el.getBoundingClientRect();
   if (rect.width === 0 || rect.height === 0) return null;
   const cs = view.getComputedStyle(el);
@@ -363,17 +383,21 @@ function findPillViolation(el, maxWidth = PILL_MAX_WIDTH_PX) {
   if (rect.width > maxWidth + 0.5) {
     return `pill is ${Math.round(rect.width)}px wide (budget ${maxWidth}px) holding "${describe(el)}" \u2014 a pill holds a short label: clamp it (Badge, or truncate + max-w + title) or render a list row.`;
   }
-  const lines = lineCount(el, cs, rect.height);
+  const lines = lineCount(el, own, cs, rect.height);
   if (lines > 1) {
     return `pill wraps to ${lines} lines holding "${describe(el)}" \u2014 a pill is one line: clamp it (Badge, or truncate + max-w + title) or render a list row.`;
   }
   return null;
 }
-function lineCount(el, cs, height) {
+function lineCount(el, own, cs, height) {
   const range = el.ownerDocument.createRange?.();
   if (range && typeof range.getClientRects === "function") {
-    range.selectNodeContents(el);
-    const rects = Array.from(range.getClientRects()).filter((r) => r.width > 0 && r.height > 0);
+    const rects = [];
+    for (const node of own) {
+      if (!(node.textContent ?? "").trim()) continue;
+      range.selectNodeContents(node);
+      rects.push(...Array.from(range.getClientRects()).filter((r) => r.width > 0 && r.height > 0));
+    }
     range.detach?.();
     if (rects.length) {
       const mids = [];