@signal9/era-ui 20.0.0 → 21.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/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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "20.0.0",
+	"version": "21.0.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",
@@ -25,9 +25,10 @@
 		"check:classes": "node --experimental-strip-types scripts/check-classes.ts",
 		"check:twmerge": "node --experimental-strip-types scripts/check-twmerge.ts",
 		"build:llm-docs": "node --experimental-strip-types scripts/build-llm-docs.ts",
-		"prebuild": "npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge && npm run build:llm-docs",
-		"validate": "npm run check && npm run lint && npm run format:check && npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge",
-		"test": "npm run test:visual"
+		"prebuild": "npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge && npm run check:doc-tokens && npm run build:llm-docs",
+		"validate": "npm run check && npm run lint && npm run format:check && npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge && npm run check:doc-tokens",
+		"test": "npm run test:visual",
+		"check:doc-tokens": "node --experimental-strip-types scripts/check-doc-tokens.ts"
 	},
 	"files": [
 		"dist",

package/skill/SKILL.md

@@ -64,13 +64,13 @@ Named for the ROLE each rung plays, never for its size — a scale whose names
 can invert is a scale nobody reads correctly (this library once shipped an
 `xxs` that was bigger than its `xs`).
 
-| Tier      | Height      | Square        | Radius           | Use for                                     |
-| --------- | ----------- | ------------- | ---------------- | ------------------------------------------- |
-| `icon`    | `h-icon`    | `size-icon`   | `rounded-icon`   | a lucide glyph, switch thumbs               |
-| `pill`    | `h-pill`    | `size-pill`   | `rounded-pill`   | a badge/chip nested INSIDE a control        |
-| `chip`    | `h-chip`    | `size-chip`   | `rounded-chip`   | standalone pills, switch tracks, KV         |
-| `control` | `h-control` | `size-control`| `rounded-control`| buttons, inputs, selects, triggers          |
-| `bar`     | `h-bar`     | `size-bar`    | `rounded-bar`    | bars, containers, dialog headers            |
+| Tier      | Height      | Square         | Radius            | Use for                              |
+| --------- | ----------- | -------------- | ----------------- | ------------------------------------ |
+| `icon`    | `h-icon`    | `size-icon`    | `rounded-icon`    | a lucide glyph, switch thumbs        |
+| `pill`    | `h-pill`    | `size-pill`    | `rounded-pill`    | a badge/chip nested INSIDE a control |
+| `chip`    | `h-chip`    | `size-chip`    | `rounded-chip`    | standalone pills, switch tracks, KV  |
+| `control` | `h-control` | `size-control` | `rounded-control` | buttons, inputs, selects, triggers   |
+| `bar`     | `h-bar`     | `size-bar`     | `rounded-bar`     | bars, containers, dialog headers     |
 
 `min-h-*`, `min-w-*` and `w-*` exist across the same rungs. There is no escape
 hatch here any more: `min-w-control` is a real class, because role names collide
@@ -90,8 +90,11 @@ corners axis.
    give EVERY element the radius of its OWN height tier, center children with
    the matching concentric inset, and nested corners share a center of
    curvature automatically. The concentric insets are advanced enough to stay
-   token-form: `--era-xs-inset-sm` (xs inside sm, = sp/2), `--era-xxs-inset-md`,
-   `--era-xs-inset-md`, `--era-xs-inset-lg`, `--era-sm-inset-lg`.
+   token-form, and each is named for the pair it centres:
+   `--era-icon-inset-chip` (an icon inside a chip, = sp/2),
+   `--era-icon-inset-pill`, `--era-pill-inset-control`, `--era-pill-inset-chip`,
+   `--era-icon-inset-control`, `--era-icon-inset-bar`, `--era-chip-inset-control`,
+   `--era-chip-inset-bar`.
 
 **The trap**: a container's radius follows its corner REGION's tier, never its
 overall bulk. A large panel whose corners are formed by a chip-tier handle bar