@signal9/era-ui 4.16.7 → 4.16.9

package/dist/apps/notes/notes.svelte

@@ -322,11 +322,10 @@
 							     role="option" child of the listbox. A wrapper element there
 							     would put a non-option between them and break the relationship
 							     screen readers rely on.
-							     rounded-md, not rounded-item: item-rd is the FLOATING-MENU row
-							     radius, gated by --era-item-rd-scale = 0 on flat — it ignores
-							     the corners axis there. A list row on a plain surface takes its
-							     own tier radius (the conversations-rail pattern), which rides
-							     the corners toggle. -->
+							     rounded-md, not rounded-item: item-rd is the radius for a row
+							     inside a PANEL (it subtracts the panel's frame inset). A list
+							     row on a plain surface takes its own tier radius — the
+							     conversations-rail pattern. -->
 							<ContextMenu.Root>
 								<ContextMenu.Trigger>
 									{#snippet child({ props })}

package/dist/dev/audit/audits/corners-axis.d.ts

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

package/dist/dev/audit/audits/corners-axis.js

@@ -0,0 +1,64 @@
+/*
+ * The corners axis is GLOBAL, or it is nothing.
+ *
+ * `data-corners` is a promise to a consumer: set it once, on any ancestor, and
+ * every corner in the subtree follows — no per-component opt-in, nothing to
+ * remember while building. A single radius that does not track the axis breaks
+ * the promise silently, and silently is the only way it ever breaks: the author
+ * sees the default setting and everything looks right.
+ *
+ * Two ways to fail it, and this audit only fires at data-corners="square"
+ * because that is where both become visible:
+ *
+ * 1. A HARDCODED radius — `rounded-[4px]`, an inline border-radius, a
+ *    third-party stylesheet. It survives the toggle because nothing derives it.
+ * 2. A radius gated on ANOTHER AXIS. This is the subtle one and it shipped:
+ *    --era-item-rd was multiplied by a surface-owned scale that flat set to 0,
+ *    so menu rows were square in ROUNDED mode on the default surface. A
+ *    consumer hit it, reported "I set rounded and my rows are square", and was
+ *    right. Surface owns fills, shadows and frames; corners owns radii.
+ *
+ * A DELIBERATE CIRCLE is not a corner and is exempt: a status dot, an avatar, a
+ * spinner track. The test is geometric rather than a class allowlist — radius
+ * ≥ half the shorter side on a roughly-square box is a circle by construction,
+ * whatever produced it — so a consumer's own circular element passes without
+ * era knowing anything about it. A pill (radius ≥ half the shorter side but
+ * clearly oblong) is exempt for the same reason: `rounded-full` on a 2×14 caret
+ * is a shape, not a corner treatment.
+ */
+/** A box this close to square, with a radius this large, is a circle/pill. */
+const SHAPE_SLOP = 0.6;
+export const cornersAxis = {
+    id: 'tokens/corners-axis',
+    name: 'Every corner follows the corners axis',
+    description: 'At data-corners="square" no element may keep a corner radius — a leftover radius is either hardcoded or gated on another axis, and either way the axis is not global.',
+    category: 'tokens',
+    severity: 'error',
+    selector: '*',
+    check(el) {
+        // Only meaningful at square: at rounded, a radius is the correct answer
+        // and the failing case (a radius the axis cannot reach) is indistinguishable
+        // from a deliberate 0.
+        if (!el.closest('[data-corners="square"]'))
+            return null;
+        const s = getComputedStyle(el);
+        const radius = parseFloat(s.borderTopLeftRadius) || 0;
+        if (radius <= 0)
+            return null;
+        const rect = el.getBoundingClientRect();
+        if (!rect.width || !rect.height)
+            return null;
+        // Shapes, not corners: a radius at or past half the shorter side is a
+        // circle or a pill — the element IS round, it does not merely have
+        // rounded corners.
+        if (radius >= Math.min(rect.width, rect.height) / 2 - SHAPE_SLOP)
+            return null;
+        const issue = {
+            auditId: 'tokens/corners-axis',
+            element: el,
+            message: `${radius.toFixed(1)}px corner radius at data-corners="square" — this radius does not track the corners axis. Use a rounded-* tier token (never a literal), and check it is not multiplied by a surface-owned scale.`,
+            details: { radius, width: +rect.width.toFixed(1), height: +rect.height.toFixed(1) }
+        };
+        return issue;
+    }
+};

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

@@ -1,6 +1,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 { flatChrome } from './flat-chrome.js';
 import { iconFlush } from './icon-flush.js';
 import { offAxisMotion } from './off-axis-motion.js';
@@ -12,4 +13,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, flatChrome, iconFlush, offAxisMotion, offTierHeight, pillHoldsItsInk, proseLeading, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };
+export { clippedGlyphs, collapsedTextTrim, concentricInset, cornersAxis, flatChrome, iconFlush, offAxisMotion, offTierHeight, pillHoldsItsInk, proseLeading, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };

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

@@ -2,6 +2,7 @@ import { registry } from '../registry.js';
 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 { flatChrome } from './flat-chrome.js';
 import { iconFlush } from './icon-flush.js';
 import { offAxisMotion } from './off-axis-motion.js';
@@ -13,7 +14,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, flatChrome, iconFlush, offAxisMotion, offTierHeight, pillHoldsItsInk, proseLeading, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };
+export { clippedGlyphs, collapsedTextTrim, concentricInset, cornersAxis, 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
@@ -25,6 +26,7 @@ export { clippedGlyphs, collapsedTextTrim, concentricInset, flatChrome, iconFlus
 registry.register(clippedGlyphs);
 registry.register(collapsedTextTrim);
 registry.register(concentricInset);
+registry.register(cornersAxis);
 registry.register(flatChrome);
 registry.register(iconFlush);
 registry.register(offAxisMotion);