@signal9/era-ui 2.28.1 → 2.28.2

package/dist/dev/audit/audits/icon-flush.js

@@ -3,21 +3,24 @@ import { BOUNDED_TIER_MAX, getGaps } from '../../measure.js';
 /*
  * The zero-gap bug, caught at the source.
  *
- * This is the copy button's original defect made mechanical: it shipped as
- * `size="icon"` (an h-xs button) holding an `size-(--era-h-xs)` glyph, so
- * (14 − 14) / 2 = 0 — the icon filled its own button edge to edge and read as a
- * glyph jammed against its border. Every individual class was legal; the tier was
- * legal; only the NESTING was wrong, which is why nothing but a rendered
- * measurement could see it.
+ * The defect: an icon sized at the tier of a control that has PADDING it should
+ * be spending on the icon — a text button, a select trigger — so the glyph fills
+ * the box edge to edge and reads as jammed against its border. Every individual
+ * class is legal; the tier is legal; only the NESTING is wrong, which is why
+ * nothing but a rendered measurement can see it.
  *
- * The same shape recurs whenever an icon is sized at the tier of the control that
- * holds it, so the check is simply: an icon inside a bounded control must have
- * some breathing room.
+ * The exception is a purpose-built icon button — the `icon` variant, a zero-
+ * padding SQUARE (aspect-square px-0) that exists to hold exactly one glyph. It
+ * has no padding to spend, and it does not need any: a lucide glyph draws well
+ * inside its own viewBox, so a box that is flush is still optically inset, and
+ * the chip/pane dismiss buttons that render this way look right. A flush icon is
+ * the tier error ONLY where the container had room and didn't use it — so the
+ * check keys on that, not on flushness alone.
  */
 export const iconFlush = {
     id: 'layout/icon-flush',
     name: 'Icon flush against its control',
-    description: 'An icon inside a bounded control must leave a gap on every side. A zero gap means the glyph was sized at its container’s own tier and fills it edge to edge.',
+    description: 'An icon inside a PADDED bounded control must leave a gap on every side. A zero gap there means the glyph was sized at its container’s own tier and fills padding it should have spent on breathing room. A zero-padding square icon button is exempt — it exists to hold one glyph flush.',
     category: 'layout',
     severity: 'error',
     selector: 'svg',
@@ -33,7 +36,20 @@ export const iconFlush = {
         // The control has to actually be a control: a bare <span> wrapper around an
         // icon legitimately hugs it (that is how an icon gets centred inside a
         // button in the first place), so require chrome — a radius.
-        if (parseFloat(getComputedStyle(container).borderTopLeftRadius) <= 0)
+        const cs = getComputedStyle(container);
+        if (parseFloat(cs.borderTopLeftRadius) <= 0)
+            return null;
+        // A purpose-built icon button (aspect-square px-0) is a square with no
+        // padding to spend — holding its glyph flush is its whole job, not the tier
+        // error this hunts. The bug is an icon that ate a control's padding; a
+        // control with none can't have that bug. So exempt the square, unpadded
+        // holder and keep the audit pointed at padded controls.
+        const square = Math.abs(box.width - box.height) <= TOL;
+        const unpadded = parseFloat(cs.paddingTop) <= TOL &&
+            parseFloat(cs.paddingRight) <= TOL &&
+            parseFloat(cs.paddingBottom) <= TOL &&
+            parseFloat(cs.paddingLeft) <= TOL;
+        if (square && unpadded)
             return null;
         const g = getGaps(icon, container);
         const flushY = Math.abs(g.top) <= TOL && Math.abs(g.bottom) <= TOL;

package/package.json

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