@signal9/era-ui 4.16.9 → 6.0.0

package/dist/dev/audit/audits/even-container-padding.d.ts

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

package/dist/dev/audit/audits/even-container-padding.js

@@ -0,0 +1,62 @@
+/*
+ * A box's content sits the same distance from its top edge as from its bottom.
+ *
+ * The even-gap law, stated for the containers the tier checks cannot see. The
+ * radius/height audits only apply to BOUNDED tier controls (a button in a bar),
+ * because their identity needs a height term. An unbounded container — a card,
+ * a panel, a popover body — has no tier, so nothing checked it at all, and the
+ * Card component shipped for weeks with half-height top padding: content 4px
+ * from the top edge against 8px from the bottom, on every card in every
+ * consumer app. It was reported from the outside as "cards aren't evenly
+ * spaced", which is precisely what it was.
+ *
+ * The rule is vertical only. Horizontal asymmetry is often correct and
+ * deliberate in era — a pane handle's leading side sits at the text inset while
+ * its trailing side keeps the concentric wall, a code block reserves room for
+ * its copy button — so flagging it would be noise. Nothing has a reason to sit
+ * closer to its top edge than its bottom.
+ *
+ * `p-content` is the one earned exception and is exempt by construction rather
+ * than by name: it subtracts the heading ROW's own slack from its top padding,
+ * so it only ever appears on a full-bleed section with no radius, and this
+ * audit looks only at rounded boxes — the ones that read as a container.
+ */
+/** Below this, a box is a hairline or a divider, not a container. */
+const MIN_BOX = 8;
+export const evenContainerPadding = {
+    id: 'layout/even-container-padding',
+    name: 'Container padding is vertically even',
+    description: 'A rounded container must pad its content equally at top and bottom — content closer to one edge than the other breaks the even-gap law on the surfaces that bound the most consumer content.',
+    category: 'layout',
+    severity: 'warn',
+    selector: '*',
+    check(el) {
+        const s = getComputedStyle(el);
+        // Rounded boxes only: a radius is what makes a box read as a container
+        // with edges, and it also excludes the full-bleed page sections whose
+        // top padding is legitimately reduced (see p-content).
+        if (parseFloat(s.borderTopLeftRadius) <= 0)
+            return null;
+        const top = parseFloat(s.paddingTop) || 0;
+        const bottom = parseFloat(s.paddingBottom) || 0;
+        if (top === bottom)
+            return null;
+        // A container pads BOTH sides or neither; one-sided padding is a spacer,
+        // not a container's inset.
+        if (top === 0 || bottom === 0)
+            return null;
+        const rect = el.getBoundingClientRect();
+        if (rect.height < MIN_BOX || rect.width < MIN_BOX)
+            return null;
+        // Sub-pixel drift from a calc() is not a design error.
+        if (Math.abs(top - bottom) < 0.51)
+            return null;
+        const issue = {
+            auditId: 'layout/even-container-padding',
+            element: el,
+            message: `padding-top ${top.toFixed(1)} ≠ padding-bottom ${bottom.toFixed(1)} — content sits ${top < bottom ? 'high' : 'low'} in its container. Pad evenly (p-card / p-panel), or drop the radius if this is a full-bleed section.`,
+            details: { top, bottom, delta: +(top - bottom).toFixed(2) }
+        };
+        return issue;
+    }
+};

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

@@ -2,6 +2,7 @@ import { clippedGlyphs } from './clipped-glyphs.js';
 import { collapsedTextTrim } from './collapsed-text-trim.js';
 import { concentricInset } from './concentric-inset.js';
 import { cornersAxis } from './corners-axis.js';
+import { evenContainerPadding } from './even-container-padding.js';
 import { flatChrome } from './flat-chrome.js';
 import { iconFlush } from './icon-flush.js';
 import { offAxisMotion } from './off-axis-motion.js';
@@ -13,4 +14,4 @@ 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, cornersAxis, flatChrome, iconFlush, offAxisMotion, offTierHeight, pillHoldsItsInk, proseLeading, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };
+export { clippedGlyphs, collapsedTextTrim, concentricInset, cornersAxis, evenContainerPadding, flatChrome, iconFlush, offAxisMotion, offTierHeight, pillHoldsItsInk, proseLeading, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };

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

@@ -3,6 +3,7 @@ import { clippedGlyphs } from './clipped-glyphs.js';
 import { collapsedTextTrim } from './collapsed-text-trim.js';
 import { concentricInset } from './concentric-inset.js';
 import { cornersAxis } from './corners-axis.js';
+import { evenContainerPadding } from './even-container-padding.js';
 import { flatChrome } from './flat-chrome.js';
 import { iconFlush } from './icon-flush.js';
 import { offAxisMotion } from './off-axis-motion.js';
@@ -14,7 +15,7 @@ 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, cornersAxis, flatChrome, iconFlush, offAxisMotion, offTierHeight, pillHoldsItsInk, proseLeading, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };
+export { clippedGlyphs, collapsedTextTrim, concentricInset, cornersAxis, evenContainerPadding, flatChrome, iconFlush, offAxisMotion, offTierHeight, pillHoldsItsInk, proseLeading, 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(clippedGlyphs);
 registry.register(collapsedTextTrim);
 registry.register(concentricInset);
 registry.register(cornersAxis);
+registry.register(evenContainerPadding);
 registry.register(flatChrome);
 registry.register(iconFlush);
 registry.register(offAxisMotion);