@ai-matrx/design-system 0.61.11 → 0.61.13

package/dist/index.js

@@ -385,6 +385,10 @@ 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 past = overflowPast(el, rect, view);
+  if (past) {
+    return `pill overflows ${past.what} by ${Math.round(past.by)}px holding "${describe(el)}" \u2014 a pill never runs past its row or the page gutter: let the row wrap and give the pill max-w-full with a truncating label.`;
+  }
   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.`;
@@ -395,6 +399,27 @@ function findPillViolation(el, maxWidth = PILL_MAX_WIDTH_PX) {
   }
   return null;
 }
+function overflowPast(el, rect, view) {
+  for (let p = el.parentElement; p; p = p.parentElement) {
+    const ox = view.getComputedStyle(p).overflowX;
+    if (ox === "auto" || ox === "scroll") return null;
+  }
+  const pinned = ["absolute", "fixed"].includes(view.getComputedStyle(el).position);
+  const parent = el.parentElement;
+  if (parent && !pinned) {
+    const pr = parent.getBoundingClientRect();
+    if (pr.width > 0) {
+      const by = Math.max(rect.right - pr.right, pr.left - rect.left);
+      if (by > 0.5) return { what: "its container", by };
+    }
+  }
+  const vw = el.ownerDocument.documentElement.clientWidth || view.innerWidth;
+  if (vw > 0) {
+    const by = Math.max(rect.right - vw, -rect.left);
+    if (by > 0.5) return { what: "the viewport", by };
+  }
+  return null;
+}
 function stretchSlack(el, own, cs, width, view) {
   const range = el.ownerDocument.createRange?.();
   if (!range || typeof range.getClientRects !== "function") return null;