@signal9/era-ui 4.12.0 → 4.13.0

package/dist/dev/audit/audits/index.d.ts

@@ -5,9 +5,10 @@ import { flatChrome } from './flat-chrome.js';
 import { iconFlush } from './icon-flush.js';
 import { offAxisMotion } from './off-axis-motion.js';
 import { offTierHeight } from './off-tier-height.js';
+import { pillHoldsItsInk } from './pill-holds-its-ink.js';
 import { radiusConcentricity } from './radius-concentricity.js';
 import { restingGap } from './resting-gap.js';
 import { singleGlyphSquare } from './single-glyph-square.js';
 import { uniformSiblingGaps } from './uniform-sibling-gaps.js';
 import { wallMatchesGap } from './wall-matches-gap.js';
-export { clippedGlyphs, collapsedTextTrim, concentricInset, flatChrome, iconFlush, offAxisMotion, offTierHeight, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };
+export { clippedGlyphs, collapsedTextTrim, concentricInset, flatChrome, iconFlush, offAxisMotion, offTierHeight, pillHoldsItsInk, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };

package/dist/dev/audit/audits/index.js

@@ -6,12 +6,13 @@ import { flatChrome } from './flat-chrome.js';
 import { iconFlush } from './icon-flush.js';
 import { offAxisMotion } from './off-axis-motion.js';
 import { offTierHeight } from './off-tier-height.js';
+import { pillHoldsItsInk } from './pill-holds-its-ink.js';
 import { radiusConcentricity } from './radius-concentricity.js';
 import { restingGap } from './resting-gap.js';
 import { singleGlyphSquare } from './single-glyph-square.js';
 import { uniformSiblingGaps } from './uniform-sibling-gaps.js';
 import { wallMatchesGap } from './wall-matches-gap.js';
-export { clippedGlyphs, collapsedTextTrim, concentricInset, flatChrome, iconFlush, offAxisMotion, offTierHeight, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };
+export { clippedGlyphs, collapsedTextTrim, concentricInset, flatChrome, iconFlush, offAxisMotion, offTierHeight, pillHoldsItsInk, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };
 // Auto-register built-ins. Consumers can still unregister or add their own.
 //
 // Two of these only tell the truth on a particular axis setting, because the bug
@@ -27,6 +28,7 @@ registry.register(flatChrome);
 registry.register(iconFlush);
 registry.register(offAxisMotion);
 registry.register(offTierHeight);
+registry.register(pillHoldsItsInk);
 registry.register(radiusConcentricity);
 registry.register(restingGap);
 registry.register(singleGlyphSquare);

package/dist/dev/audit/audits/pill-holds-its-ink.d.ts

@@ -0,0 +1,2 @@
+import type { Audit } from '../types.js';
+export declare const pillHoldsItsInk: Audit;

package/dist/dev/audit/audits/pill-holds-its-ink.js

@@ -0,0 +1,53 @@
+import { BOUNDED_TIER_MAX } from '../../measure.js';
+import { paintsChrome } from './_helpers.js';
+/*
+ * A pill's background must be at least as wide as its ink.
+ *
+ * A badge or chip is sized BY its text — it has no slack to surrender — so when
+ * a flex ancestor squeezes it, the only thing that can give is the fill: the
+ * background narrows and the label bleeds past one or both rounded ends. The
+ * class string is identical squeezed and unsqueezed, which is why this is a
+ * runtime law and not a lint rule: only the rendered box can tell you.
+ *
+ * The tell is scrollWidth: content wider than the padding box, on an element
+ * that paints chrome and does NOT clip. An element that clips (Tool.Chip's
+ * truncating label, KV's squared key cell) has chosen the sanctioned answer to
+ * tightness — box holds, text truncates — and is exempt here (its failure mode
+ * is vertical, and typography/clipped-glyphs owns that).
+ *
+ * Bounded heights only: this is a law about tier-sized pills and controls. An
+ * unbounded container that "overflows" horizontally is a scroll region.
+ */
+export const pillHoldsItsInk = {
+    id: 'layout/pill-holds-its-ink',
+    name: 'Pill background holds its ink',
+    description: 'A chrome-painting, non-clipping element must be at least as wide as its content — squeezed pills slide the fill out from under the label.',
+    category: 'layout',
+    severity: 'error',
+    selector: '*',
+    check(el) {
+        const s = getComputedStyle(el);
+        if (s.overflowX !== 'visible')
+            return null; // clipping = the sanctioned fix
+        // An absolutely-positioned element is outside flex/grid layout, so nothing
+        // can squeeze it — its scrollWidth quirks (a slider thumb reports one) are
+        // not this bug.
+        if (s.position === 'absolute' || s.position === 'fixed')
+            return null;
+        if (!paintsChrome(el))
+            return null;
+        const h = el.getBoundingClientRect().height;
+        if (h === 0 || h > BOUNDED_TIER_MAX)
+            return null;
+        const bleed = el.scrollWidth - el.clientWidth;
+        if (bleed <= 1)
+            return null; // sub-pixel rounding
+        const issue = {
+            auditId: 'layout/pill-holds-its-ink',
+            element: el,
+            message: `ink is ${bleed}px wider than the pill that carries it (${el.scrollWidth} in ${el.clientWidth}) — a flex ancestor squeezed it; add shrink-0, or truncate an inner span if it must fit`,
+            details: { scrollWidth: el.scrollWidth, clientWidth: el.clientWidth, bleed }
+        };
+        return issue;
+    }
+};