@signal9/era-ui 20.0.0 → 22.0.0

package/dist/styles/density.css

@@ -6,45 +6,43 @@
  * TIER LADDER
  * ===========
  *
- *   xs  = sp + 6      (icon tier — the glyph itself; thumbs, dismiss, icon button)
- *   xxs = sp + 10     (pill that nests inside md — badge, chip in a button/trigger)
- *   sm  = 2·sp + 6    (standalone pill — switch track, KV row, free badge/chip)
- *   md  = 3·sp        (buttons, inputs, selects, triggers)
- *   lg  = 4·sp        (bars, containers)
+ * The rungs — icon, pill, chip, control, bar — are listed with their roles and
+ * per-mode values where they are declared, below. What belongs up here is why
+ * each formula has the shape it does:
  *
- * xs carries a +6 floor so icons stay legible (≥14px) at every sp. xxs sits
- * 4px above xs so body text has just enough pill around it while fitting
- * inside an md container with a visible concentric gap (≥3px at dense). sm
- * keeps the generous 2·sp + 6 that gives switch thumbs their sp/2 slot and
- * KV rows their padded feel. md and lg are pure sp multiples so button and
- * bar heights don't inflate.
+ *   icon    (sp + 6)     a +6 floor so a glyph stays legible (≥14px) at every sp.
+ *   pill    (sp + 10)    4px above icon: enough box around body text to read as
+ *                        a pill, while still fitting inside a control with a
+ *                        visible concentric gap (≥3px at dense).
+ *   chip    (2·sp + 6)   the generous rung — gives switch thumbs their sp/2 slot
+ *                        and KV rows their padded feel.
+ *   control (3·sp)       pure sp multiples, so button and bar heights don't
+ *   bar     (4·sp)       inflate as the modes loosen.
  *
  * Concentric nesting gaps:
- *   sm  ⊃ xs  = sp/2         (4/5/6 at dense/balanced/spacious)
- *   lg  ⊃ md  = sp/2         (4/5/6)
- *   md  ⊃ sm  = (sp−6)/2     (1/2/3 — tight but present)
- *   md  ⊃ xxs = (2sp−10)/2   (3/5/7 — the "pill inside a button" gap)
- *   xxs ⊃ xs  = 2            (flat; xxs is sized around text, not as a
- *                              container for xs content)
+ *   chip    ⊃ icon    = sp/2         (4/5/6 at dense/balanced/spacious)
+ *   bar     ⊃ control = sp/2         (4/5/6)
+ *   control ⊃ chip    = (sp−6)/2     (1/2/3 — tight but present)
+ *   control ⊃ pill    = (2sp−10)/2   (3/5/7 — the "pill inside a button" gap)
+ *   pill    ⊃ icon    = 2            (flat; pill is sized around text, not as a
+ *                                     container for icon content)
  *
- * Invariant xs < xxs < sm < md < lg holds for sp ≥ 7. Canonical range is
- * sp ∈ [8, 16] so this is mode-bounded.
+ * Invariant icon < pill < chip < control < bar holds for sp ≥ 7. Canonical
+ * range is sp ∈ [8, 16] so this is mode-bounded.
  *
- * xs IS the icon tier — no separate "icon" token. "Container for an icon"
- * and "the icon itself" are the same thing; any padding lives on the parent
- * (xxs / sm / md / lg).
- *
- * Dense values: 14, 18, 22, 24, 32.
- * Touch values: 22, 26, 38, 48, 64 (md ≥ 44px tap-target floor).
+ * icon IS the icon tier — there is no separate token for "a box holding one
+ * glyph", because that box and the glyph are the same size; any padding lives
+ * on the parent rung.
  *
  * INSETS
  * ======
  *
- *   --era-px-{sm,md,lg}       sp/2                   — tier-to-tier nesting padding
- *   --era-gap                 sp/2                   — inter-element gap
- *   --era-inset-{xxs,sm,md}   (T − text)/2           — text-symmetric content padding
- *                                                     (text is 12px at dense, 14 above)
- *   --era-icon-inset-chip         (sm − xs)/2 = sp/2     — centering an xs element inside sm
+ *   --era-gap                        sp/2            — inter-element gap, and the
+ *                                                      tier-to-tier nesting padding
+ *   --era-inset-{pill,chip,control}  (T − text)/2    — text-symmetric content padding
+ *                                                      (text is 12px at dense, 14 above)
+ *   --era-icon-inset-chip            (chip − icon)/2 — centring an icon-tier element
+ *                                     = sp/2           inside a chip
  *
  * OPTICAL PADDING (unbounded content containers)
  * ==============================================
@@ -56,7 +54,7 @@
  * grow linearly while text barely moves (12px at dense, 14 above), so
  * whitespace must grow SUPER-linearly
  * to hold the same perceived balance. (The tokens that already feel right
- * across modes — inset-md 5→17, content-p 16→48 — are exactly the convex
+ * across modes — inset-control 6→17, pad-content 16→48 — are exactly the convex
  * ones; the cramped ones — card's old sp/2 = 4→8 — are the linear ones.)
  *
  * The optical unit is the mean of the linear and quadratic scales:
@@ -73,17 +71,17 @@
  *   --era-pad-card   so      8 / 11.25 / 15 / 24  — cards, card sections, dialogs, popovers
  *   --era-pad-content   2·so    16 / 22.5 / 30 / 48  — full content panels (docs sections)
  *
- * Whitespace share rises with mode: pad-md / h-control = 0.33 dense → 0.50 touch.
+ * Whitespace share rises with mode: pad-card / h-control = 0.33 dense → 0.50 touch.
  *
  * IDENTITY USED AT NESTING SITES
  * ==============================
  *
- * A flush pill at an md-container edge needs −(inset-xxs) margin so
+ * A flush pill at a control-container edge needs −(inset-pill) margin so
  * the horizontal gap equals the vertical concentric gap. Proof:
- *   inset-md − xxs-inset-md
- *     = (md − text)/2 − (md − xxs)/2
- *     = (xxs − text)/2
- *     = inset-xxs.
+ *   inset-control − pill-inset-control
+ *     = (control − text)/2 − (control − pill)/2
+ *     = (pill − text)/2
+ *     = inset-pill.
  *
  * RADII (concentric progression, sp-derived)
  * ==========================================
@@ -146,12 +144,13 @@
 	--era-glyph-stroke-width: 1.75; /* Lucide SVG stroke, tuned to sit beside 14px body text */
 
 	/* Icon-button glyph sub-tiers. The glyph normally IS the icon tier (h-icon, the
-	   sp+6 legibility floor) — that's what every text button's icon and every md/sm
-	   icon button uses. But when the BOX collapses toward the icon tier — xxs, and
-	   xs/icon where box == h-icon — an h-icon glyph would fill it edge to edge. So the
-	   glyph steps below the floor by 2px per tier, preserving a concentric gap:
-	   sp+4 in an xxs box (pad 3), sp+2 in an xs box (pad 2). The dense pads then run
-	   2·3·4·5 across icon·pill·chip·control — a unit step off the floor, per Button. */
+	   sp+6 legibility floor) — that's what every text button's icon and every
+	   control/chip icon button uses. But when the BOX collapses toward the icon tier
+	   — a pill box, and an icon box where box == h-icon — an h-icon glyph would fill
+	   it edge to edge. So the glyph steps below the floor by 2px per tier, preserving
+	   a concentric gap: sp+4 in a pill box (pad 3), sp+2 in an icon box (pad 2). The
+	   dense pads then run 2·3·4·5 across icon·pill·chip·control — a unit step off the
+	   floor, per Button. */
 	--era-glyph-pill: calc(
 		var(--era-sp) + 0.25rem
 	); /* 12/14/16 = sp + 4 (glyph in a pill-tier button) */
@@ -211,33 +210,33 @@
 	--era-pill-px: max(0px, calc((var(--era-h-pill) - 0.6 * var(--era-text)) / 2)); /* 5.4/5.8/6.8 */
 	--era-chip-px: max(0px, calc((var(--era-h-chip) - 0.6 * var(--era-text)) / 2)); /* 7.4/8.8/10.8 */
 
-	/* Text-field side padding — the horizontal room where typed text starts in an
-	   md-tier input (Input, Textarea, combobox/command inputs, date/time fields).
-	   Purpose-named, NOT "pill": an input is not a pill, and it lives on the md
-	   tier while the pill tokens are sm/xxs.
+	/* Text-field side padding — the horizontal room where typed text starts in a
+	   control-tier input (Input, Textarea, combobox/command inputs, date/time fields).
+	   Purpose-named, NOT "pill": an input is not a pill, and it lives on the control
+	   tier while the pill tokens are chip/pill.
 
-	   It borrows pill-sm's glyph-advance derivation (the right shape for a STRING
-	   of text vs a single centered glyph) but floors it at 0.5rem. pill-sm is
-	   algebraically sp − 1.2px, so it grows slower than the md height (3·sp) and is
-	   proportionally TIGHTEST at dense — 6.8px in a 24px box read cramped. The
-	   floor only bites at dense (pill-sm ≥ 8.8 at every looser mode), lifting dense
+	   It borrows --era-chip-px's glyph-advance derivation (the right shape for a
+	   STRING of text vs a single centred glyph) but floors it at 0.5rem. chip-px is
+	   algebraically sp − 1.2px, so it grows slower than the control height (3·sp) and
+	   is proportionally TIGHTEST at dense — 6.8px in a 24px box read cramped. The
+	   floor only bites at dense (chip-px ≥ 8.8 at every looser mode), lifting dense
 	   to 8px and leaving balanced/spacious/touch exactly as they were. */
 	--era-field-px: max(var(--era-chip-px), 0.5rem); /* 8/8.8/10.8/14.8 — floor lifts dense only */
 
 	/* Concentric insets — center a smaller tier element inside a larger one. */
-	/* --era-icon-inset-chip stays at sp/2 by construction (sm − xs = sp), which is
-	   what switch thumbs and KV icons rely on. --era-pill-inset-control is the "pill
-	   inside a button" concentric gap used both vertically (trigger padding)
+	/* --era-icon-inset-chip stays at sp/2 by construction (chip − icon = sp), which
+	   is what switch thumbs and KV icons rely on. --era-pill-inset-control is the
+	   "pill inside a button" concentric gap used both vertically (trigger padding)
 	   and horizontally (inter-chip gap inside multi-select Value). */
 	--era-icon-inset-chip: calc((var(--era-h-chip) - var(--era-h-icon)) / 2); /* 4/5/6 = sp/2 */
 	--era-icon-inset-pill: calc(
 		(var(--era-h-pill) - var(--era-h-icon)) / 2
-	); /* 2 (flat) — center an xs element (dismiss button) inside xxs */
+	); /* 2 (flat) — centre an icon-tier element (dismiss button) inside a pill */
 	--era-pill-inset-control: calc(
 		(var(--era-h-control) - var(--era-h-pill)) / 2
 	); /* 3/5/7 = sp − 5 */
-	/* Centre an pill inside an sm one — a dismiss chip in a standalone chip, an
-	   xxs control in an sm bar.
+	/* Centre a pill inside a chip — a dismiss chip in a standalone chip, a
+	   pill-tier control in a chip-tier bar.
 	   It reads like a duplicate of --era-inset-pill (3/3/4/6) and used to BE one:
 	   while text was 14px everywhere, (h-chip − h-pill)/2 and (h-pill − text)/2 were
 	   the same number, and callers borrowed the text inset rather than declaring
@@ -246,16 +245,18 @@
 	--era-pill-inset-chip: calc((var(--era-h-chip) - var(--era-h-pill)) / 2); /* 2/3/4/6 */
 	--era-icon-inset-control: calc(
 		(var(--era-h-control) - var(--era-h-icon)) / 2
-	); /* 5/7/9 = sp − 3 — center an xs control inside an md bar (= rd-md − rd-xs) */
+	); /* 5/7/9 = sp − 3 — centre an icon control inside a control (= rd-control − rd-icon) */
 	--era-icon-inset-bar: calc(
 		(var(--era-h-bar) - var(--era-h-icon)) / 2
-	); /* 9/12/15 — center an xs control inside an lg bar (= rd-lg − rd-xs) */
+	); /* 9/12/15 — centre an icon control inside a bar (= rd-bar − rd-icon) */
 	--era-chip-inset-control: calc(
 		(var(--era-h-control) - var(--era-h-chip)) / 2
-	); /* 1/2/3 — center an sm control inside an md field (= rd-md − rd-sm), e.g. the date picker's trailing trigger */
+	); /* 1/2/3 — centre a chip control inside a control field (= rd-control − rd-chip),
+	   e.g. the date picker's trailing trigger */
 	--era-chip-inset-bar: calc(
 		(var(--era-h-bar) - var(--era-h-chip)) / 2
-	); /* 5/7/9 = sp − 3 — inset an sm panel (drag bar) concentrically in an lg pane (= rd-lg − rd-sm) */
+	); /* 5/7/9 = sp − 3 — inset a chip panel (drag bar) concentrically in a bar-tier
+	   pane (= rd-bar − rd-chip) */
 
 	/* Roundness ladder — golden base + concentric progression, both gated by scale. */
 	/* rd-T = scale · (R + (h-T − h-icon) / 2). R = sp / φ². max(0px, …) clamps tier
@@ -269,11 +270,11 @@
 	   a center of curvature with zero arithmetic.
 
 	   The one trap: a CONTAINER's radius follows its corner REGION's tier, never
-	   its overall bulk. A pane capped by an sm handle bar (xs controls at
-	   xs-inset-sm) is an sm corner region → rd-sm, however large the pane.
+	   its overall bulk. A pane capped by a chip-tier handle bar (icon controls at
+	   icon-inset-chip) is a chip corner region → rd-chip, however large the pane.
 	   Choosing rd by visual importance is how concentricity breaks. Precedents:
-	   Chip (sm shell + xs dismiss), Bar (h-T ↔ rd-T), Pane.Root (rd-sm), menu
-	   panels (rd-md, items at era-item-rd = rd-md − panel-inset). */
+	   Chip (chip shell + icon dismiss), Bar (h-T ↔ rd-T), Pane.Root (rd-chip), menu
+	   panels (rd-control, items at era-item-rd = rd-control − panel-inset). */
 	--era-roundness: calc(var(--era-roundness-scale) * var(--era-sp) / 2.618);
 	--era-rd-icon: max(0px, var(--era-roundness));
 	--era-rd-pill: max(
@@ -384,7 +385,7 @@
 }
 
 [data-mode='touch'] {
-	--era-sp: 1rem; /* 16px — md tier becomes 48px to clear the 44px tap-target floor */
+	--era-sp: 1rem; /* 16px — the control tier becomes 48px, clearing the 44px tap-target floor */
 	--era-density: 2;
 }
 

package/dist/styles/typography.css

@@ -37,19 +37,58 @@
 	--era-font-serif: ui-serif, Georgia, 'Times New Roman', serif;
 }
 
-[data-font='mono'],
-[data-font='mono'] * {
-	font-family: var(--era-font-mono) !important;
+/*
+ * THE AXIS RESOLVES BY DEPTH, WHICH IT DID NOT USED TO.
+ *
+ * These were three flat rules of the form
+ *
+ *   [data-font='mono'], [data-font='mono'] * { font-family: …!important }
+ *
+ * and every one of them matched at the same specificity. So for nested axes —
+ * mono inside sans — BOTH rules matched the inner element with equal weight and
+ * the cascade fell through to SOURCE ORDER: serif beat sans beat mono, whatever
+ * the DOM said. `data-font` was not a subtree axis at all, it was a document-wide
+ * one that happened to look right whenever only one value was in play. Every
+ * other era axis (mode, surface, corners, motion) nests correctly; this one
+ * silently did not, and a consumer scoping a serif panel inside a mono app got
+ * serif everywhere or nothing, depending on nothing they could see.
+ *
+ * The split below is what fixes it, and each half is doing a different job:
+ *
+ *   1. The [data-font='…'] rules set an INHERITED pointer. Inheritance resolves
+ *      by depth by definition — the nearest ancestor that declares it wins — so
+ *      nesting is correct for free and no specificity fight exists.
+ *
+ *   2. The application rule stays on `*` with `!important`, because era's own
+ *      token components carry Tailwind's `font-mono` utility (design rule 9:
+ *      Badge, Chip, KV, CodeBlock). A utility sets font-family ON the element,
+ *      which beats anything inherited, so applying the axis only to the
+ *      [data-font] host would let those components ignore it. Keeping the
+ *      application per-element also keeps the axis winning over a consumer's
+ *      own font utilities, which is what an app-level font switch has to do.
+ *
+ * THE CONTRACT THIS IMPLIES, stated because it is not guessable: --era-font-*
+ * is read where --era-font-stack is declared, which is the [data-font] element.
+ * Re-point a stack AT or ABOVE the element that carries the axis. Setting
+ * --era-font-mono on a descendant of it does nothing — the pointer was already
+ * resolved higher up. (That is why /audit re-asserts the shipped stacks on
+ * :root rather than on its own <main>.)
+ */
+[data-font='mono'] {
+	--era-font-stack: var(--era-font-mono);
+}
+
+[data-font='sans'] {
+	--era-font-stack: var(--era-font-sans);
 }
 
-[data-font='sans'],
-[data-font='sans'] * {
-	font-family: var(--era-font-sans) !important;
+[data-font='serif'] {
+	--era-font-stack: var(--era-font-serif);
 }
 
-[data-font='serif'],
-[data-font='serif'] * {
-	font-family: var(--era-font-serif) !important;
+[data-font],
+[data-font] * {
+	font-family: var(--era-font-stack) !important;
 }
 
 /*

package/dist/ui/bar/bar.svelte

@@ -1,14 +1,15 @@
 <script lang="ts" module>
 	import { cn, tv } from '../../utils/index.js';
 
-	// A Bar is a flex container sized to a tier height, holding one-tier-smaller
-	// controls with the even sp/2 gap. The height scales with density; pick the
-	// tier that fits the content:
-	//   lg (default) — full toolbar / page header of md controls (32/40/48/64)
-	//   md           — compact toolbar                            (24/30/36/48)
-	//   sm           — title / handle bar of xs icons+buttons     (22/26/30/38)
-	// Radius stays concentric to the height; gap/px are sp/2 (xs-inset-sm),
-	// the even gap for one-tier-smaller content at every size.
+	// A Bar is a flex container sized to a tier height, holding smaller controls
+	// at the even concentric gap. The height scales with density; pick the tier
+	// that fits the content:
+	//   bar (default) — full toolbar / page header of controls  (32/40/48/64)
+	//   control       — compact toolbar                          (24/30/36/48)
+	//   chip          — title / handle bar of icon buttons       (22/26/30/38)
+	// Radius stays concentric to the height. The gap and the wall are NOT one
+	// number across the sizes — see the content variant below for why, and what
+	// each pairing actually resolves to.
 	export const barVariants = tv({
 		base: 'flex items-center leading-none',
 		variants: {
@@ -25,14 +26,34 @@
 			 * had each restated the two-tier value by hand, and the geometry spec had
 			 * been rewritten twice chasing which token they were restating.
 			 *
-			 * - `tier` (default) — one tier smaller, the pairing above. chip⊃icon, control⊃chip
-			 *   and bar⊃control all equal sp/2, which is why one token covers every size.
-			 * - `pill` — the compact pairing: pills and fields (a filter beside an
-			 *   xxs icon button, a title bar). Two tiers down, so the inset differs
-			 *   per size and comes from the compounds below.
+			 * - `tier` (default) — one tier smaller, the pairing above. Each size gets
+			 *   its OWN token, from the compounds below.
+			 * - `pill` — the compact pairing: pills and fields (a filter beside a
+			 *   pill-tier icon button, a title bar). Two tiers down, so the inset
+			 *   differs per size and also comes from the compounds.
+			 *
+			 * THIS USED TO BE ONE CLASS FOR ALL THREE SIZES — `px-icon-inset-chip`,
+			 * on the stated reasoning that "chip⊃icon, control⊃chip and bar⊃control
+			 * all equal sp/2". Two of those three do. control⊃chip does not:
+			 *
+			 *   chip ⊃ icon    = ((2sp+6) − (sp+6))/2 = sp/2        4/5/6
+			 *   bar  ⊃ control = (4sp − 3sp)/2        = sp/2        4/5/6
+			 *   control ⊃ chip = (3sp − (2sp+6))/2    = (sp−6)/2    1/2/3   ← not sp/2
+			 *
+			 * chip is the one rung that is not a clean sp multiple (it carries the
+			 * same +6 legibility floor as icon), so the difference cancels for the
+			 * pair that spans it and survives for the pair that does not. A control
+			 * bar therefore padded 4px horizontally while items-center centred its
+			 * children to 1px — the wall was four times the gap it was meant to
+			 * match, which is what a reader sees as "more space on the left".
+			 *
+			 * No audit caught it: layout/wall-matches-gap compares the horizontal
+			 * wall to the horizontal gap (4 and 4 — even), and
+			 * layout/even-container-padding compares top to bottom (equal). Nothing
+			 * compared ACROSS the axes. layout/wall-is-isotropic now does.
 			 */
 			content: {
-				tier: 'gap-icon-inset-chip px-icon-inset-chip',
+				tier: '',
 				pill: ''
 			},
 			/**
@@ -59,6 +80,28 @@
 			}
 		},
 		compoundVariants: [
+			// content="tier" — one tier down, each pairing named for itself.
+			// chip ⊃ icon = sp/2.
+			{
+				size: 'chip',
+				content: 'tier',
+				class: 'gap-icon-inset-chip px-icon-inset-chip'
+			},
+			// control ⊃ chip = (sp−6)/2 — the tight-but-present rung, 1/2/3.
+			{
+				size: 'control',
+				content: 'tier',
+				class: 'gap-chip-inset-control px-chip-inset-control'
+			},
+			// bar ⊃ control = sp/2, which is exactly --era-gap. era already calls
+			// this pairing "the gutter" (see the rounded-row derivation in
+			// styles/index.css), so it takes that name rather than borrowing
+			// icon-inset-chip's — same number, but a reader can tell why.
+			{
+				size: 'bar',
+				content: 'tier',
+				class: 'gap-gutter px-gutter'
+			},
 			// control ⊃ pill = (3sp − sp − 10)/2 — the named token.
 			{
 				size: 'control',

package/dist/ui/bar/bar.svelte.d.ts

@@ -12,14 +12,34 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      * had each restated the two-tier value by hand, and the geometry spec had
      * been rewritten twice chasing which token they were restating.
      *
-     * - `tier` (default) — one tier smaller, the pairing above. chip⊃icon, control⊃chip
-     *   and bar⊃control all equal sp/2, which is why one token covers every size.
-     * - `pill` — the compact pairing: pills and fields (a filter beside an
-     *   xxs icon button, a title bar). Two tiers down, so the inset differs
-     *   per size and comes from the compounds below.
+     * - `tier` (default) — one tier smaller, the pairing above. Each size gets
+     *   its OWN token, from the compounds below.
+     * - `pill` — the compact pairing: pills and fields (a filter beside a
+     *   pill-tier icon button, a title bar). Two tiers down, so the inset
+     *   differs per size and also comes from the compounds.
+     *
+     * THIS USED TO BE ONE CLASS FOR ALL THREE SIZES — `px-icon-inset-chip`,
+     * on the stated reasoning that "chip⊃icon, control⊃chip and bar⊃control
+     * all equal sp/2". Two of those three do. control⊃chip does not:
+     *
+     *   chip ⊃ icon    = ((2sp+6) − (sp+6))/2 = sp/2        4/5/6
+     *   bar  ⊃ control = (4sp − 3sp)/2        = sp/2        4/5/6
+     *   control ⊃ chip = (3sp − (2sp+6))/2    = (sp−6)/2    1/2/3   ← not sp/2
+     *
+     * chip is the one rung that is not a clean sp multiple (it carries the
+     * same +6 legibility floor as icon), so the difference cancels for the
+     * pair that spans it and survives for the pair that does not. A control
+     * bar therefore padded 4px horizontally while items-center centred its
+     * children to 1px — the wall was four times the gap it was meant to
+     * match, which is what a reader sees as "more space on the left".
+     *
+     * No audit caught it: layout/wall-matches-gap compares the horizontal
+     * wall to the horizontal gap (4 and 4 — even), and
+     * layout/even-container-padding compares top to bottom (equal). Nothing
+     * compared ACROSS the axes. layout/wall-is-isotropic now does.
      */
     content: {
-        tier: "gap-icon-inset-chip px-icon-inset-chip";
+        tier: "";
         pill: "";
     };
     /**
@@ -58,14 +78,34 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      * had each restated the two-tier value by hand, and the geometry spec had
      * been rewritten twice chasing which token they were restating.
      *
-     * - `tier` (default) — one tier smaller, the pairing above. chip⊃icon, control⊃chip
-     *   and bar⊃control all equal sp/2, which is why one token covers every size.
-     * - `pill` — the compact pairing: pills and fields (a filter beside an
-     *   xxs icon button, a title bar). Two tiers down, so the inset differs
-     *   per size and comes from the compounds below.
+     * - `tier` (default) — one tier smaller, the pairing above. Each size gets
+     *   its OWN token, from the compounds below.
+     * - `pill` — the compact pairing: pills and fields (a filter beside a
+     *   pill-tier icon button, a title bar). Two tiers down, so the inset
+     *   differs per size and also comes from the compounds.
+     *
+     * THIS USED TO BE ONE CLASS FOR ALL THREE SIZES — `px-icon-inset-chip`,
+     * on the stated reasoning that "chip⊃icon, control⊃chip and bar⊃control
+     * all equal sp/2". Two of those three do. control⊃chip does not:
+     *
+     *   chip ⊃ icon    = ((2sp+6) − (sp+6))/2 = sp/2        4/5/6
+     *   bar  ⊃ control = (4sp − 3sp)/2        = sp/2        4/5/6
+     *   control ⊃ chip = (3sp − (2sp+6))/2    = (sp−6)/2    1/2/3   ← not sp/2
+     *
+     * chip is the one rung that is not a clean sp multiple (it carries the
+     * same +6 legibility floor as icon), so the difference cancels for the
+     * pair that spans it and survives for the pair that does not. A control
+     * bar therefore padded 4px horizontally while items-center centred its
+     * children to 1px — the wall was four times the gap it was meant to
+     * match, which is what a reader sees as "more space on the left".
+     *
+     * No audit caught it: layout/wall-matches-gap compares the horizontal
+     * wall to the horizontal gap (4 and 4 — even), and
+     * layout/even-container-padding compares top to bottom (equal). Nothing
+     * compared ACROSS the axes. layout/wall-is-isotropic now does.
      */
     content: {
-        tier: "gap-icon-inset-chip px-icon-inset-chip";
+        tier: "";
         pill: "";
     };
     /**
@@ -104,14 +144,34 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      * had each restated the two-tier value by hand, and the geometry spec had
      * been rewritten twice chasing which token they were restating.
      *
-     * - `tier` (default) — one tier smaller, the pairing above. chip⊃icon, control⊃chip
-     *   and bar⊃control all equal sp/2, which is why one token covers every size.
-     * - `pill` — the compact pairing: pills and fields (a filter beside an
-     *   xxs icon button, a title bar). Two tiers down, so the inset differs
-     *   per size and comes from the compounds below.
+     * - `tier` (default) — one tier smaller, the pairing above. Each size gets
+     *   its OWN token, from the compounds below.
+     * - `pill` — the compact pairing: pills and fields (a filter beside a
+     *   pill-tier icon button, a title bar). Two tiers down, so the inset
+     *   differs per size and also comes from the compounds.
+     *
+     * THIS USED TO BE ONE CLASS FOR ALL THREE SIZES — `px-icon-inset-chip`,
+     * on the stated reasoning that "chip⊃icon, control⊃chip and bar⊃control
+     * all equal sp/2". Two of those three do. control⊃chip does not:
+     *
+     *   chip ⊃ icon    = ((2sp+6) − (sp+6))/2 = sp/2        4/5/6
+     *   bar  ⊃ control = (4sp − 3sp)/2        = sp/2        4/5/6
+     *   control ⊃ chip = (3sp − (2sp+6))/2    = (sp−6)/2    1/2/3   ← not sp/2
+     *
+     * chip is the one rung that is not a clean sp multiple (it carries the
+     * same +6 legibility floor as icon), so the difference cancels for the
+     * pair that spans it and survives for the pair that does not. A control
+     * bar therefore padded 4px horizontally while items-center centred its
+     * children to 1px — the wall was four times the gap it was meant to
+     * match, which is what a reader sees as "more space on the left".
+     *
+     * No audit caught it: layout/wall-matches-gap compares the horizontal
+     * wall to the horizontal gap (4 and 4 — even), and
+     * layout/even-container-padding compares top to bottom (equal). Nothing
+     * compared ACROSS the axes. layout/wall-is-isotropic now does.
      */
     content: {
-        tier: "gap-icon-inset-chip px-icon-inset-chip";
+        tier: "";
         pill: "";
     };
     /**

package/dist/ui/card/card.svelte

@@ -144,6 +144,7 @@
 		aria-disabled={disabled || undefined}
 		tabindex={disabled ? -1 : undefined}
 		onclick={disabled ? (e) => e.preventDefault() : onclick}
+		data-era-unbounded
 		class={cn(cardVariants({ tone, sectioned, interactive: true }), className)}
 		{...restProps}
 	>
@@ -163,6 +164,7 @@
 		{name}
 		{value}
 		{onclick}
+		data-era-unbounded
 		class={cn(cardVariants({ tone, sectioned, interactive: true }), className)}
 		{...restProps}
 	>
@@ -171,6 +173,7 @@
 {:else}
 	<div
 		bind:this={ref as HTMLDivElement}
+		data-era-unbounded
 		class={cn(cardVariants({ tone, sectioned }), className)}
 		{...restProps}
 	>

package/dist/ui/date-field/date-field-input.svelte

@@ -6,8 +6,17 @@
 	let { ref = $bindable(null), class: className, ...restProps }: DateField.InputProps = $props();
 </script>
 
+<!-- A TEXT FIELD'S SIDE PADDING IS DELIBERATELY NOT ITS CONCENTRIC INSET.
+     --era-field-px is the room where typed text STARTS — purpose-named in
+     density.css and floored at 0.5rem because the derived 6.8px read cramped at
+     dense — while the segment boxes inside are chip-tier and centre 1px from the
+     top. So this row is 8px at the sides against 1px above and below, on
+     purpose, and it says so rather than being quietly skipped by
+     layout/wall-is-isotropic's heuristics: a claim a reviewer can check beats a
+     silence. -->
 <DateField.Input
 	bind:ref
+	data-era-anisotropic
 	data-input-field
 	class={cn(
 		inputVariants(),

package/dist/ui/date-range-field/date-range-field-input.svelte

@@ -10,8 +10,17 @@
 	}: DateRangeField.InputProps = $props();
 </script>
 
+<!-- A TEXT FIELD'S SIDE PADDING IS DELIBERATELY NOT ITS CONCENTRIC INSET.
+     --era-field-px is the room where typed text STARTS — purpose-named in
+     density.css and floored at 0.5rem because the derived 6.8px read cramped at
+     dense — while the segment boxes inside are chip-tier and centre 1px from the
+     top. So this row is 8px at the sides against 1px above and below, on
+     purpose, and it says so rather than being quietly skipped by
+     layout/wall-is-isotropic's heuristics: a claim a reviewer can check beats a
+     silence. -->
 <DateRangeField.Input
 	bind:ref
+	data-era-anisotropic
 	data-input-field
 	class={cn(
 		inputVariants(),