@signal9/era-ui 20.0.0 → 21.0.0

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [21.0.0](https://github.com/sig-nine/era-ui/compare/v20.0.0...v21.0.0) (2026-08-09)
+
+### ⚠ BREAKING CHANGES
+
+* **bar:** a `Bar` with `size="control"` and the default `content="tier"`
+now pads and gaps by `chip-inset-control` (1/2/3) instead of `icon-inset-chip`
+(4/5/6). That is the concentric answer for the chip-tier content the variant
+describes, and it is visibly tighter. A control bar that actually holds
+icon-tier buttons was never described by `content="tier"` and was relying on the
+old value being wrong in a helpful direction — give it `size="chip"`, or pass
+the wall explicitly. `size="bar"` and `size="chip"` are unchanged in value;
+`size="bar"` now names its inset `gutter`, which is what era already calls that
+pairing, rather than borrowing icon-inset-chip's name for the same number.
+
+### Bug Fixes
+
+* **bar:** a bar's wall is the concentric inset for the pair it actually holds ([45f76a8](https://github.com/sig-nine/era-ui/commit/45f76a8c83c6d810c5346ccff03e1750342a57b4))
+
 ## [20.0.0](https://github.com/sig-nine/era-ui/compare/v19.0.0...v20.0.0) (2026-08-09)
 
 ### ⚠ BREAKING CHANGES

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

@@ -15,5 +15,6 @@ 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 { wallIsIsotropic } from './wall-is-isotropic.js';
 import { wallMatchesGap } from './wall-matches-gap.js';
-export { clippedGlyphs, collapsedTextTrim, concentricInset, cornersAxis, evenContainerPadding, flatChrome, invisibleBox, 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, wallIsIsotropic, wallMatchesGap };

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

@@ -16,8 +16,9 @@ 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 { wallIsIsotropic } from './wall-is-isotropic.js';
 import { wallMatchesGap } from './wall-matches-gap.js';
-export { clippedGlyphs, collapsedTextTrim, concentricInset, cornersAxis, evenContainerPadding, flatChrome, invisibleBox, 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, wallIsIsotropic, 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
@@ -43,4 +44,5 @@ registry.register(radiusConcentricity);
 registry.register(restingGap);
 registry.register(singleGlyphSquare);
 registry.register(uniformSiblingGaps);
+registry.register(wallIsIsotropic);
 registry.register(wallMatchesGap);

package/dist/dev/audit/audits/wall-is-isotropic.d.ts

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

package/dist/dev/audit/audits/wall-is-isotropic.js

@@ -0,0 +1,147 @@
+import { TOL, flexChildren, isHorizontalFlex, paintsChrome, tiers } from './_helpers.js';
+/*
+ * A bar's wall is the same on every side.
+ *
+ * THE EVEN-GAP LAW IS "on ALL sides", and era had two audits enforcing it one
+ * axis at a time, with nothing looking across them:
+ *
+ *   layout/wall-matches-gap        horizontal wall  vs  horizontal gap
+ *   layout/even-container-padding  padding-top      vs  padding-bottom
+ *
+ * A bar that pads 4px horizontally, gaps 4px horizontally, and centres its
+ * children to 1px vertically passes BOTH — the first sees 4 against 4, the
+ * second sees equal top and bottom padding — and is visibly wrong. Two shipped
+ * this way. Bar's content="tier" used one token for all three sizes on the
+ * reasoning that chip⊃icon, control⊃chip and bar⊃control all equal sp/2, which
+ * is true for two of them (chip is the rung that is not a clean sp multiple, so
+ * the difference cancels for the pairs that span it and survives for the pair
+ * that does not). The Taskbar padded px-inset-chip — a TEXT inset, (h-chip −
+ * text)/2 — where the concentric inset belonged. Both read to a user as "more
+ * space on the left than on the top", which is exactly how it was reported.
+ *
+ * WHY THE VERTICAL SIDE IS MEASURED, NOT READ. On a bar the vertical wall is
+ * usually not padding at all — it is what `align-items: center` produces from
+ * the leftover height, so padding-top is 0 and the real gap is
+ * (contentHeight − childHeight)/2. Reading the padding property would report
+ * zero and see nothing. That is the whole reason this class of bug was
+ * invisible to a rule written in terms of padding.
+ *
+ * SCOPE. Only centred horizontal flex rows with a BOUNDED height — a tier. An
+ * auto-height row has no leftover to distribute, so there is no vertical wall to
+ * compare against, and an unbounded container's padding is optical rather than
+ * geometric (see the geometric/optical split in density.css).
+ *
+ * DELIBERATE ASYMMETRY. Some era chrome is legitimately not isotropic: a pane
+ * handle sits its leading side at the text inset while the trailing side keeps
+ * the concentric wall. Those opt out with data-era-anisotropic, which is a claim
+ * a reviewer can check rather than a silence — the same shape as
+ * data-era-continuous on surface/invisible-box.
+ */
+export const wallIsIsotropic = {
+    id: 'layout/wall-is-isotropic',
+    name: 'A tier row walls its content evenly on every side',
+    description: 'In a fixed-height centred flex row, the horizontal padding must equal the vertical gap that align-items:center leaves above and below the tallest child. Comparing only within an axis passes a bar that pads 4px at the sides and 1px top and bottom.',
+    category: 'layout',
+    severity: 'warn',
+    selector: '*',
+    check(el) {
+        if (el.dataset?.eraAnisotropic !== undefined)
+            return null;
+        const s = getComputedStyle(el);
+        if (!isHorizontalFlex(s))
+            return null;
+        // Centred rows only: any other alignment means the vertical position is
+        // not a wall, it is a deliberate stretch/baseline/start.
+        if (s.alignItems !== 'center')
+            return null;
+        if (s.flexWrap === 'wrap')
+            return null;
+        // A WALL ONLY EXISTS WHERE CONTENT IS PACKED AGAINST ONE. justify-center
+        // splits the leftover width evenly on both sides, so the horizontal gap is
+        // (width − content)/2 and has nothing to do with padding — an icon button
+        // is exactly this: px-0, aspect-square, glyph centred, and its real
+        // horizontal gap equals its vertical one by construction. Reading
+        // padding-left there reports 0 against a true gap of 5 and flags every
+        // centred control in the library.
+        if (!/^(flex-)?start$|^normal$/.test(s.justifyContent))
+            return null;
+        const host = el;
+        const kids = flexChildren(host);
+        if (!kids.length)
+            return null;
+        const padTop = parseFloat(s.paddingTop) || 0;
+        const padBottom = parseFloat(s.paddingBottom) || 0;
+        const padLeft = parseFloat(s.paddingLeft) || 0;
+        const padRight = parseFloat(s.paddingRight) || 0;
+        // An asymmetric row is even-container-padding's / wall-matches-gap's
+        // business; this rule is about the two axes disagreeing.
+        if (Math.abs(padLeft - padRight) > TOL)
+            return null;
+        // THE ROW MUST CLAIM A WALL. A flush transparent row — a checkbox beside
+        // its label, a radio and its text — pads nothing and paints nothing: it is
+        // content in a line, not a container with edges, and its left edge is the
+        // text's edge. Asking it to inset by the concentric gap would push the
+        // label off the alignment it shares with the prose around it. A row claims
+        // a wall by padding horizontally or by painting a box.
+        if (padLeft <= TOL && !paintsChrome(host))
+            return null;
+        const contentH = host.clientHeight - padTop - padBottom;
+        if (contentH <= 0)
+            return null;
+        // The tallest child is what the wall is measured against — a short child
+        // beside a tall one has slack of its own, which is not the container's.
+        const tallest = Math.max(...kids.map((k) => k.getBoundingClientRect().height));
+        if (tallest <= 0)
+            return null;
+        // ONLY ROWS THAT HOLD A CONTROL BOX. The rule is about a bar walling the
+        // controls inside it, and it needs the child's BOX to mean something.
+        //
+        // Two things are deliberately out of scope, and both were measured before
+        // being excluded rather than assumed:
+        //
+        //   An ICON+TEXT row (file-upload's drop label, Step's summary) walls by
+        //   the TEXT inset, not by the icon's concentric one — that is Button's
+        //   own documented convention, `px-inset-control` with the gap widened to
+        //   match when an icon is present. Measuring those against the icon
+        //   reports 6-vs-5 on rows that are following the house rule.
+        //
+        //   A TEXT FIELD (date/time field and their ranges) walls by
+        //   --era-field-px, which density.css names and floors on purpose: it is
+        //   the room where typed text starts, and it is not the segment box's
+        //   concentric gap. Measuring those reports 8-vs-1 on a deliberate choice.
+        //
+        // What is left is the case the law is actually about — chrome holding
+        // controls — and it is where both shipped bugs were.
+        const CONTROL = 'button, a[href], input, select, textarea, [role="button"], [role="switch"],' +
+            ' [role="checkbox"], [role="radio"], [role="combobox"], [role="tab"], [role="menuitem"]';
+        const tallestKid = kids.find((k) => Math.abs(k.getBoundingClientRect().height - tallest) <= TOL);
+        if (!tallestKid)
+            return null;
+        if (!tallestKid.matches(CONTROL) && !tallestKid.querySelector(CONTROL))
+            return null;
+        // A control that is not on a tier is off-tier-height's problem, not this
+        // rule's — measuring a wall against a box of the wrong size compounds one
+        // defect into two reports.
+        const onTier = tiers(host).some((t) => Math.abs(t.px - tallest) <= TOL);
+        if (!onTier)
+            return null;
+        const vertical = (contentH - tallest) / 2 + padTop;
+        // Flush content (a child filling its row) has no vertical wall to match,
+        // and a stretched child would report a spurious zero.
+        if (vertical < TOL)
+            return null;
+        if (Math.abs(padLeft - vertical) <= TOL)
+            return null;
+        const issue = {
+            auditId: 'layout/wall-is-isotropic',
+            element: el,
+            message: `wall is ${padLeft.toFixed(1)}px at the sides but ${vertical.toFixed(1)}px above and below — the even-gap law is on ALL sides. Pad by the concentric inset for the pairing this row actually holds ((container − child)/2), not by a text inset or a neighbouring tier's token.`,
+            details: {
+                horizontal: padLeft,
+                vertical: +vertical.toFixed(2),
+                delta: +(padLeft - vertical).toFixed(2)
+            }
+        };
+        return issue;
+    }
+};