@signal9/era-ui 14.1.1 → 14.2.0

package/dist/dev/audit/audits/flat-chrome.js

@@ -15,6 +15,12 @@
  *
  * Run this on a NON-FLAT surface (bevel is the harshest): the surface promises a
  * shadow, so a floating panel that resolves to `box-shadow: none` is broken.
+ *
+ * FLAT IS NOT UNAUDITED, though this audit skips it. "Flat's tokens resolve to
+ * none, so there is nothing to assert" was true of THIS rule and false of the
+ * surface — it left the default surface uncovered, and two invisible-control
+ * bugs shipped in the gap. surface/invisible-box carries the assertion that does
+ * hold there: a box must differ from what it sits on, by tone or by an edge.
  */
 export const flatChrome = {
     id: 'surface/flat-chrome',
@@ -25,8 +31,8 @@ export const flatChrome = {
     selector: '[role="menu"], [role="listbox"], [role="dialog"], [data-dialog-content], [data-popover-content], [data-select-content], [data-dropdown-menu-content], [data-combobox-content], [data-menubar-content], [data-context-menu-content]',
     check(el) {
         const surface = el.closest('[data-surface]')?.getAttribute('data-surface') ?? 'flat';
-        // On flat the tokens legitimately resolve to `none` — there is nothing to
-        // assert. The whole point of the rule only exists on a surface with depth.
+        // On flat the tokens legitimately resolve to `none`, so THIS rule has
+        // nothing to assert — see surface/invisible-box for the one that does.
         if (surface === 'flat')
             return null;
         const s = getComputedStyle(el);

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

@@ -4,6 +4,7 @@ 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 { invisibleBox } from './invisible-box.js';
 import { anonymousText } from './anonymous-text.js';
 import { iconFlush } from './icon-flush.js';
 import { offAxisMotion } from './off-axis-motion.js';
@@ -15,4 +16,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, evenContainerPadding, flatChrome, iconFlush, anonymousText, offAxisMotion, offTierHeight, pillHoldsItsInk, proseLeading, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };
+export { clippedGlyphs, collapsedTextTrim, concentricInset, cornersAxis, evenContainerPadding, flatChrome, invisibleBox, iconFlush, anonymousText, offAxisMotion, offTierHeight, pillHoldsItsInk, proseLeading, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };

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

@@ -5,6 +5,7 @@ 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 { invisibleBox } from './invisible-box.js';
 import { anonymousText } from './anonymous-text.js';
 import { iconFlush } from './icon-flush.js';
 import { offAxisMotion } from './off-axis-motion.js';
@@ -16,7 +17,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, evenContainerPadding, flatChrome, iconFlush, anonymousText, offAxisMotion, offTierHeight, pillHoldsItsInk, proseLeading, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };
+export { clippedGlyphs, collapsedTextTrim, concentricInset, cornersAxis, evenContainerPadding, flatChrome, invisibleBox, iconFlush, anonymousText, 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
@@ -31,6 +32,7 @@ registry.register(concentricInset);
 registry.register(cornersAxis);
 registry.register(evenContainerPadding);
 registry.register(flatChrome);
+registry.register(invisibleBox);
 registry.register(iconFlush);
 registry.register(anonymousText);
 registry.register(offAxisMotion);

package/dist/dev/audit/audits/invisible-box.d.ts

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

package/dist/dev/audit/audits/invisible-box.js

@@ -0,0 +1,92 @@
+/*
+ * A box you cannot see: same fill as what it sits on, and no edge.
+ *
+ * THE COMPLEMENT OF surface/flat-chrome, and the surface that audit could not
+ * cover. flat-chrome asks "does this floating panel reference a shadow token?"
+ * and skips flat entirely, on the reasoning that flat's tokens legitimately
+ * resolve to `none` so there is nothing to assert. That reasoning is what left
+ * flat — the DEFAULT surface — unaudited, and two bugs shipped inside the gap:
+ * Checkbox filled `bg-elevated` on a `bg-elevated` Card with an inert
+ * `shadow-well`, and every floating panel did the same with an inert
+ * `shadow-lg`. Both were invisible; neither could be seen by any check era had.
+ *
+ * The assertion flat needs is not "has a shadow". It is the more basic one:
+ * A BOX THAT PAINTS A FILL MUST BE DISTINGUISHABLE FROM WHAT IT PAINTS OVER.
+ * Flat satisfies that with tone or a hairline rather than depth, which is a
+ * legitimate answer — but "no tone difference AND no edge" is not.
+ *
+ * A contrast checker does not catch this. Those compare text to its background
+ * and would pass every one of these cleanly: the text is perfectly legible, it
+ * is the CONTAINER that has vanished, taking the boundary between a control and
+ * the page with it. For a floating panel that is worse than invisible, because
+ * the panel's text then interleaves with the content underneath.
+ *
+ * Why it runs on every surface, not just flat: the law is general, and a surface
+ * that splits its tiers passes it for free. Making it flat-only would encode the
+ * same assumption that produced the blind spot.
+ *
+ * WHAT IT DELIBERATELY IGNORES. Anything transparent (a positioning wrapper, a
+ * layout div) is not painting a box and owes nothing. So is an element whose
+ * fill genuinely matches because it is a continuation of its parent rather than
+ * a thing on top of it — the caller marks those with data-era-continuous, which
+ * is a claim a reviewer can check rather than a silence.
+ */
+/** Fills that mean "I am not painting a box". */
+function isTransparent(color) {
+    return color === 'transparent' || /,\s*0\)\s*$/.test(color) || color === 'rgba(0, 0, 0, 0)';
+}
+/** The nearest ancestor that actually paints, which is what this box sits on. */
+function paintedBackdrop(el) {
+    for (let p = el.parentElement; p; p = p.parentElement) {
+        const color = getComputedStyle(p).backgroundColor;
+        if (!isTransparent(color))
+            return { el: p, color };
+    }
+    return null;
+}
+/** Any edge at all: a border, a ring or shadow, or an outline. */
+function hasEdge(s) {
+    if (s.boxShadow && s.boxShadow !== 'none')
+        return true;
+    if (s.outlineStyle && s.outlineStyle !== 'none' && parseFloat(s.outlineWidth) > 0)
+        return true;
+    // Written out rather than built from a side name: the Tailwind lint reads
+    // `border${side}Width` as a concatenated CLASS, which it is not, and silencing
+    // that rule to keep the loop is a worse trade than four explicit reads.
+    const sides = [
+        [s.borderTopWidth, s.borderTopStyle, s.borderTopColor],
+        [s.borderRightWidth, s.borderRightStyle, s.borderRightColor],
+        [s.borderBottomWidth, s.borderBottomStyle, s.borderBottomColor],
+        [s.borderLeftWidth, s.borderLeftStyle, s.borderLeftColor]
+    ];
+    return sides.some(([width, style, color]) => parseFloat(width) > 0 && style !== 'none' && !isTransparent(color));
+}
+export const invisibleBox = {
+    id: 'surface/invisible-box',
+    name: 'A filled box is distinguishable from its backdrop',
+    description: 'An element that paints a background must differ from what it sits on, by tone or by an edge. Identical fill with no border, shadow or outline is an invisible container — a contrast checker passes it because the TEXT is fine and only the box has vanished.',
+    category: 'tokens',
+    severity: 'warn',
+    // Chrome that claims to be a surface of its own. A bare layout div is not in
+    // scope; it has no fill to be invisible with.
+    selector: '[role="menu"], [role="listbox"], [role="dialog"], [role="checkbox"], [role="radio"], [data-dialog-content], [data-popover-content], [data-select-content], [data-dropdown-menu-content], [data-combobox-content], [data-menubar-content], [data-context-menu-content], [data-tooltip-content], [data-card-root], [data-checkbox-root], [data-switch-root]',
+    check(el) {
+        if (el.dataset?.eraContinuous !== undefined)
+            return null;
+        const s = getComputedStyle(el);
+        if (isTransparent(s.backgroundColor))
+            return null;
+        if (hasEdge(s))
+            return null;
+        const backdrop = paintedBackdrop(el);
+        if (!backdrop || backdrop.color !== s.backgroundColor)
+            return null;
+        const issue = {
+            auditId: 'surface/invisible-box',
+            element: el,
+            message: `fill is identical to its backdrop (${s.backgroundColor}) and it has no border, shadow or outline — the box is invisible. Give it a tone of its own or an edge; on a surface whose shadows resolve to none, an edge means a hairline.`,
+            details: { fill: s.backgroundColor, backdrop: backdrop.color }
+        };
+        return issue;
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "14.1.1",
+	"version": "14.2.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",