@signal9/era-ui 8.0.0 → 9.0.0

package/dist/styles/density.css

@@ -44,7 +44,7 @@
  *   --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-xs-inset-sm         (sm − xs)/2 = sp/2     — centering an xs element inside sm
+ *   --era-icon-inset-chip         (sm − xs)/2 = sp/2     — centering an xs element inside sm
  *
  * OPTICAL PADDING (unbounded content containers)
  * ==============================================
@@ -69,17 +69,17 @@
  * reproduces the empirically-tuned old content-p curve (16/24/32/48), so this
  * names the law the system had already converged on rather than inventing one.
  *
- *   --era-pad-sm   so/2    4 / 5.6 / 7.5 / 12   — compact shells, menu panels
- *   --era-pad-md   so      8 / 11.25 / 15 / 24  — cards, card sections, dialogs, popovers
- *   --era-pad-lg   2·so    16 / 22.5 / 30 / 48  — full content panels (docs sections)
+ *   --era-pad-panel   so/2    4 / 5.6 / 7.5 / 12   — compact shells, menu panels
+ *   --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-md = 0.33 dense → 0.50 touch.
- * --era-content-p is kept as an alias of --era-pad-lg.
+ * Whitespace share rises with mode: pad-md / h-control = 0.33 dense → 0.50 touch.
+ * --era-content-p is kept as an alias of --era-pad-content.
  *
  * IDENTITY USED AT NESTING SITES
  * ==============================
  *
- * A flush xxs pill at an md-container edge needs −(inset-xxs) margin so
+ * A flush pill at an md-container edge needs −(inset-xxs) margin so
  * the horizontal gap equals the vertical concentric gap. Proof:
  *   inset-md − xxs-inset-md
  *     = (md − text)/2 − (md − xxs)/2
@@ -89,7 +89,7 @@
  * RADII (concentric progression, sp-derived)
  * ==========================================
  *
- *   rd-T = scale · (R + (h-T − h-xs) / 2)     where R = sp / φ²
+ *   rd-T = scale · (R + (h-T − h-icon) / 2)     where R = sp / φ²
  *
  * Both R and the per-tier concentric term are multiplied by scale. The corners
  * toggle flips scale 1 ↔ 0 so every rd collapses together. Because scale is
@@ -108,7 +108,7 @@
  * mechanism handles data-corners on any subtree.
  *
  * Without the * selector this wouldn't work: custom-property var() refs
- * resolve at computed-value time. If --era-h-lg = calc(4 * var(--era-sp)) were
+ * resolve at computed-value time. If --era-h-bar = calc(4 * var(--era-sp)) were
  * declared only on :root, descendants would inherit root's already-resolved
  * 2rem and no subtree override of --era-sp could retroactively change it.
  */
@@ -127,29 +127,50 @@
 /* -------------------------------------------------- */
 * {
 	/* Tier heights */
-	--era-h-xs: calc(var(--era-sp) + 0.375rem); /* 14/16/18 = sp + 6 (icon tier) */
-	--era-icon-stroke-width: 1.75; /* Lucide SVG stroke, tuned to sit beside 14px body text */
+	/* THE TIER LADDER, named for what each rung IS rather than for a t-shirt size.
+	 *
+	 * It used to read xs / xxs / sm / md / lg, and those names actively lied: xs
+	 * was 14px and xxs was 18, so the scale that every component, token and
+	 * consumer is written in had "xxs" LARGER than "xs". Nobody reads it that way
+	 * once, let alone every time. Roles cannot invert:
+	 *
+	 *   icon     14/16/18/22   a lucide glyph, and the box that holds just one
+	 *   pill     18/20/22/26   a badge or chip — nests INSIDE a control
+	 *   chip     22/26/30/38   a standalone pill: switch track, KV row
+	 *   control  24/30/36/48   the workhorse — button, row, input, trigger
+	 *   bar      32/40/48/64   a toolbar, a page header
+	 *
+	 * The concentric insets read as prose now too: --era-pill-inset-control is
+	 * "the inset that centres a pill inside a control", which is exactly what it
+	 * computes. */
+	--era-h-icon: calc(var(--era-sp) + 0.375rem); /* 14/16/18/22 = sp + 6 */
+	--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-xs, the
+	/* 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-xs — an h-xs glyph would fill it edge to edge. So the
+	   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 xs·xxs·sm·md — a unit step off the floor, per Button. */
-	--era-icon-xxs: calc(var(--era-sp) + 0.25rem); /* 12/14/16 = sp + 4 (glyph in an xxs button) */
-	--era-icon-xs: calc(
+	   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) */
+	--era-glyph-icon: calc(
 		var(--era-sp) + 0.125rem
-	); /* 10/12/14 = sp + 2 (glyph in an xs/icon button) */
-	--era-h-xxs: calc(var(--era-sp) + 0.625rem); /* 18/20/22 = sp + 10 (nested pill tier) */
-	--era-h-sm: calc(2 * var(--era-sp) + 0.375rem); /* 22/26/30 = 2·sp + 6 (standalone pill) */
-	--era-h-md: calc(3 * var(--era-sp)); /* 24/30/36 = 3·sp */
-	--era-h-lg: calc(4 * var(--era-sp)); /* 32/40/48 = 4·sp */
+	); /* 10/12/14 = sp + 2 (glyph in an icon-tier button) */
+	--era-h-pill: calc(var(--era-sp) + 0.625rem); /* 18/20/22 = sp + 10 (nested pill tier) */
+	--era-h-chip: calc(2 * var(--era-sp) + 0.375rem); /* 22/26/30 = 2·sp + 6 (standalone pill) */
+	--era-h-control: calc(3 * var(--era-sp)); /* 24/30/36 = 3·sp */
+	--era-h-bar: calc(4 * var(--era-sp)); /* 32/40/48 = 4·sp */
 
 	/* Tier horizontal padding */
-	--era-px-sm: calc(var(--era-sp) * 0.5); /* 4/5/6 */
-	--era-px-md: calc(var(--era-sp) * 0.5); /* 4/5/6 */
-	--era-px-lg: calc(var(--era-sp) * 0.5); /* 4/5/6 */
+	/* --era-px-chip / -control / -bar used to live here as three separate
+	   "tier horizontal padding" tokens. All three were `sp * 0.5` — the same
+	   value as --era-gap below, so the ladder had FOUR names for one number and
+	   a reader had to diff the definitions to learn they were identical. One
+	   token now; if a tier ever genuinely needs its own, it earns its own name
+	   then. */
 
 	/* Inter-item gap */
 	--era-gap: calc(var(--era-sp) * 0.5); /* 4/5/6 */
@@ -175,9 +196,9 @@
 
 	/* Content insets — text-symmetric padding (vertical centering, reused as
 	   horizontal only where the content is a single square glyph). */
-	--era-inset-xxs: max(0px, calc((var(--era-h-xxs) - var(--era-text)) / 2)); /* 3/3/4/6 */
-	--era-inset-sm: max(0px, calc((var(--era-h-sm) - var(--era-text)) / 2)); /* 5/6/8/12 */
-	--era-inset-md: max(0px, calc((var(--era-h-md) - var(--era-text)) / 2)); /* 6/8/11/17 */
+	--era-inset-pill: max(0px, calc((var(--era-h-pill) - var(--era-text)) / 2)); /* 3/3/4/6 */
+	--era-inset-chip: max(0px, calc((var(--era-h-chip) - var(--era-text)) / 2)); /* 5/6/8/12 */
+	--era-inset-control: max(0px, calc((var(--era-h-control) - var(--era-text)) / 2)); /* 6/8/11/17 */
 
 	/* Pill side padding — horizontal breathing room for badge/chip text.
 	   Text wants MORE horizontal than vertical padding: line-height adds
@@ -188,8 +209,8 @@
 	   is narrower than the line, this comes out ~2× the vertical inset on its
 	   own — and a lone glyph still measures exactly the tier width, so the
 	   "single glyph = square" floor (min-w = h) is preserved, not broken. */
-	--era-pill-xxs: max(0px, calc((var(--era-h-xxs) - 0.6 * var(--era-text)) / 2)); /* 5.4/5.8/6.8 */
-	--era-pill-sm: max(0px, calc((var(--era-h-sm) - 0.6 * var(--era-text)) / 2)); /* 7.4/8.8/10.8 */
+	--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).
@@ -202,42 +223,44 @@
 	   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
 	   to 8px and leaving balanced/spacious/touch exactly as they were. */
-	--era-field-px: max(var(--era-pill-sm), 0.5rem); /* 8/8.8/10.8/14.8 — floor lifts dense only */
+	--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-xs-inset-sm stays at sp/2 by construction (sm − xs = sp), which is
-	   what switch thumbs and KV icons rely on. --era-xxs-inset-md is the "pill
+	/* --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)
 	   and horizontally (inter-chip gap inside multi-select Value). */
-	--era-xs-inset-sm: calc((var(--era-h-sm) - var(--era-h-xs)) / 2); /* 4/5/6 = sp/2 */
-	--era-xs-inset-xxs: calc(
-		(var(--era-h-xxs) - var(--era-h-xs)) / 2
+	--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 */
-	--era-xxs-inset-md: calc((var(--era-h-md) - var(--era-h-xxs)) / 2); /* 3/5/7 = sp − 5 */
-	/* Centre an xxs pill inside an sm one — a dismiss chip in a standalone chip, an
+	--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.
-	   It reads like a duplicate of --era-inset-xxs (3/3/4/6) and used to BE one:
-	   while text was 14px everywhere, (h-sm − h-xxs)/2 and (h-xxs − text)/2 were
+	   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
 	   this. Dense's 12px type broke that tie — 2 against 3 — so the pairing now has
 	   its own name and cannot drift again with the type scale. */
-	--era-xxs-inset-sm: calc((var(--era-h-sm) - var(--era-h-xxs)) / 2); /* 2/3/4/6 */
-	--era-xs-inset-md: calc(
-		(var(--era-h-md) - var(--era-h-xs)) / 2
+	--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) */
-	--era-xs-inset-lg: calc(
-		(var(--era-h-lg) - var(--era-h-xs)) / 2
+	--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) */
-	--era-sm-inset-md: calc(
-		(var(--era-h-md) - var(--era-h-sm)) / 2
+	--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 */
-	--era-sm-inset-lg: calc(
-		(var(--era-h-lg) - var(--era-h-sm)) / 2
+	--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) */
 
 	/* Roundness ladder — golden base + concentric progression, both gated by scale. */
-	/* rd-T = scale · (R + (h-T − h-xs) / 2). R = sp / φ². max(0px, …) clamps tier
-	   inversion at sp < 6 where h-md/h-lg drop below h-xs. data-corners="square"
+	/* rd-T = scale · (R + (h-T − h-icon) / 2). R = sp / φ². max(0px, …) clamps tier
+	   inversion at sp < 6 where h-control/h-bar drop below h-icon. data-corners="square"
 	   sets scale to 0 (animated via @property), zeroing every radius.
 
 	   CONCENTRICITY LAW — the ladder exists to make this automatic:
@@ -253,40 +276,43 @@
 	   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). */
 	--era-roundness: calc(var(--era-roundness-scale) * var(--era-sp) / 2.618);
-	--era-rd-xs: max(0px, var(--era-roundness));
-	--era-rd-xxs: max(
+	--era-rd-icon: max(0px, var(--era-roundness));
+	--era-rd-pill: max(
 		0px,
 		calc(
-			var(--era-roundness) + var(--era-roundness-scale) * (var(--era-h-xxs) - var(--era-h-xs)) / 2
+			var(--era-roundness) + var(--era-roundness-scale) * (var(--era-h-pill) - var(--era-h-icon)) /
+				2
 		)
 	);
-	--era-rd-sm: max(
+	--era-rd-chip: max(
 		0px,
 		calc(
-			var(--era-roundness) + var(--era-roundness-scale) * (var(--era-h-sm) - var(--era-h-xs)) / 2
+			var(--era-roundness) + var(--era-roundness-scale) * (var(--era-h-chip) - var(--era-h-icon)) /
+				2
 		)
 	);
-	--era-rd-md: max(
+	--era-rd-control: max(
 		0px,
 		calc(
-			var(--era-roundness) + var(--era-roundness-scale) * (var(--era-h-md) - var(--era-h-xs)) / 2
+			var(--era-roundness) + var(--era-roundness-scale) *
+				(var(--era-h-control) - var(--era-h-icon)) / 2
 		)
 	);
-	--era-rd-lg: max(
+	--era-rd-bar: max(
 		0px,
 		calc(
-			var(--era-roundness) + var(--era-roundness-scale) * (var(--era-h-lg) - var(--era-h-xs)) / 2
+			var(--era-roundness) + var(--era-roundness-scale) * (var(--era-h-bar) - var(--era-h-icon)) / 2
 		)
 	);
 
 	/* Optical padding — so = sp·(1 + d)/2; see OPTICAL PADDING above. */
 	--era-so: calc(var(--era-sp) * (1 + var(--era-density)) / 2); /* 8/11.25/15/24 */
-	--era-pad-sm: calc(var(--era-so) / 2); /* 4/5.6/7.5/12 */
-	--era-pad-md: var(--era-so); /* 8/11.25/15/24 */
-	--era-pad-lg: calc(var(--era-so) * 2); /* 16/22.5/30/48 */
+	--era-pad-panel: calc(var(--era-so) / 2); /* 4/5.6/7.5/12 */
+	--era-pad-card: var(--era-so); /* 8/11.25/15/24 */
+	--era-pad-content: calc(var(--era-so) * 2); /* 16/22.5/30/48 */
 
 	/* Content padding — alias of pad-lg (formerly 4·sp − 16 ≈ the same curve) */
-	--era-content-p: var(--era-pad-lg);
+	--era-content-p: var(--era-pad-content);
 }
 
 /* -------------------------------------------------- */
@@ -325,7 +351,7 @@
 	 * shrank while the thing inside it did not.
 	 *
 	 * 12px is the size the reference terminal app is built at, and it makes the
-	 * whole ladder line up with it: --era-inset-xxs becomes (18−12)/2 = 3px,
+	 * whole ladder line up with it: --era-inset-pill becomes (18−12)/2 = 3px,
 	 * which is exactly the 3px that app hardcodes for the wall and gap of an
 	 * 18px control in a 24px bar. Same numbers, derived instead of typed.
 	 *
@@ -364,14 +390,14 @@
 	--era-density: 2;
 }
 
-/* Touch mode goes full pill. Setting roundness to scale · h-xs / 2 makes the
-   existing concentric term (h-T − h-xs)/2 sum to h-T/2 for every tier, so
+/* Touch mode goes full pill. Setting roundness to scale · h-icon / 2 makes the
+   existing concentric term (h-T − h-icon)/2 sum to h-T/2 for every tier, so
    rd-xs … rd-lg all equal h-T/2. Needs the descendant selector because
    --era-roundness is declared on * and would otherwise overwrite this on
    children. Square toggle still collapses everything via scale = 0. */
 [data-mode='touch'],
 [data-mode='touch'] * {
-	--era-roundness: calc(var(--era-roundness-scale) * var(--era-h-xs) / 2);
+	--era-roundness: calc(var(--era-roundness-scale) * var(--era-h-icon) / 2);
 }
 
 /* -------------------------------------------------- */

package/dist/styles/index.css

@@ -20,7 +20,7 @@
  *
  * The split is by DEPENDENCY WEIGHT, not by layer, and that is deliberate.
  * Tailwind utilities DEDUPE — 60-odd components share one small vocabulary of
- * flex/h-md/items-center, so scanning every layer below costs almost nothing
+ * flex/h-control/items-center, so scanning every layer below costs almost nothing
  * and cannot be forgotten. Third-party CSS is the opposite: it is unshared,
  * heavy, and belongs to exactly one component. Split what is unshared; keep
  * what is shared whole. */
@@ -41,7 +41,7 @@
  * Set it from an Era token globally so every imported Lucide component tracks
  * the same optical weight as adjacent body text and can be tuned in one place. */
 :where(.lucide) {
-	stroke-width: var(--era-icon-stroke-width);
+	stroke-width: var(--era-glyph-stroke-width);
 }
 
 /* The mask glyph is the one piece of type the UA picks for you, so era picks it
@@ -395,16 +395,16 @@
 /* THE PUBLIC CLASS API                                               */
 /*                                                                    */
 /* Era's consumer-facing styling surface is NAMED utilities — a user  */
-/* of the library writes `h-md rounded-md px-md shadow`, never        */
-/* `h-(--era-h-md)`-style var classes. Where Tailwind already has a   */
-/* name for the concept (rounded-md, shadow, ease) era OVERLOADS it   */
+/* of the library writes `h-control rounded-control px-gutter shadow`, never        */
+/* `h-(--era-h-control)`-style var classes. Where Tailwind already has a   */
+/* name for the concept (rounded-control, shadow, ease) era OVERLOADS it   */
 /* so stock-looking markup renders on-design; where it doesn't, era   */
-/* registers its own (h-md, px-md, gap-gutter, p-card).               */
+/* registers its own (h-control, px-gutter, gap-gutter, p-card).               */
 /*                                                                    */
 /* The --era-* custom properties remain the internal contract (and    */
 /* the escape hatch for anything without a name — e.g. min-w-* tier   */
 /* names are NOT registered because Tailwind's container scale        */
-/* already owns min-w-md/lg; use min-w-(--era-h-md) there).           */
+/* already owns min-w-md/lg; use min-w-(--era-h-control) there).           */
 /*                                                                    */
 /* Everything here is a thin name over a token, so the full axis      */
 /* system — density, surface, corners, motion — flows through         */
@@ -420,16 +420,16 @@
 	 * at runtime by typography/prose-leading. */
 	--leading-body: var(--era-leading);
 	/* Radius ladder — Tailwind's own rounded-* names now walk era's concentric
-	 * ladder (rd-T = rd-xs + (h-T − h-xs)/2), ride the corners toggle, and
-	 * collapse to 0 on square. rounded-item is the menu-row radius
-	 * (rd-md − panel-inset) that keeps rows concentric inside a rounded-md
+	 * ladder (rd-T = rd-xs + (h-T − h-icon)/2), ride the corners toggle, and
+	 * collapse to 0 on square. rounded-menu-item is the menu-row radius
+	 * (rd-md − panel-inset) that keeps rows concentric inside a rounded-control
 	 * panel on every surface. */
-	--radius-xs: var(--era-rd-xs);
-	--radius-xxs: var(--era-rd-xxs);
-	--radius-sm: var(--era-rd-sm);
-	--radius-md: var(--era-rd-md);
-	--radius-lg: var(--era-rd-lg);
-	--radius-item: var(--era-item-rd);
+	--radius-icon: var(--era-rd-icon);
+	--radius-pill: var(--era-rd-pill);
+	--radius-chip: var(--era-rd-chip);
+	--radius-control: var(--era-rd-control);
+	--radius-bar: var(--era-rd-bar);
+	--radius-menu-item: var(--era-item-rd);
 	/* Surface chrome — bare `shadow` is the resting control edge, shadow-lg the
 	 * floating panel, shadow-well the recessed container, shadow-pressed the
 	 * active/latched face, shadow-highlight the material half of hover feedback.
@@ -503,82 +503,70 @@
 /*                                                                    */
 /* Static utilities (not @theme) because Tailwind's spacing namespace */
 /* is shared across h/w/p/m/gap — registering `md` there would give   */
-/* px-md and h-md the SAME value, and era's tiers and insets are      */
+/* px-gutter and h-control the SAME value, and era's tiers and insets are      */
 /* different token families. Each name below maps to exactly one      */
 /* token. Kept terse; the ladder itself is documented in density.css  */
 /* and on the /spacing page.                                          */
 /* ------------------------------------------------------------------ */
 
-/* @use the tier-height ladder — h-xs (icon) · h-xxs (nested pill) · h-sm
- * (standalone pill) · h-md (control) · h-lg (bar); the named form of
+/* @use the tier-height ladder — h-icon (icon) · h-pill (nested pill) · h-chip
+ * (standalone pill) · h-control (control) · h-bar (bar); the named form of
  * h-(--era-h-*). */
-@utility h-xs {
-	height: var(--era-h-xs);
+@utility h-icon {
+	height: var(--era-h-icon);
 }
-@utility h-xxs {
-	height: var(--era-h-xxs);
+@utility h-pill {
+	height: var(--era-h-pill);
 }
-@utility h-sm {
-	height: var(--era-h-sm);
+@utility h-chip {
+	height: var(--era-h-chip);
 }
-@utility h-md {
-	height: var(--era-h-md);
+@utility h-control {
+	height: var(--era-h-control);
 }
-@utility h-lg {
-	height: var(--era-h-lg);
+@utility h-bar {
+	height: var(--era-h-bar);
 }
 
 /* @use minimum tier height for containers that may grow — a bar that is at
- * least lg-tier but can wrap (min-h-lg). */
-@utility min-h-xs {
-	min-height: var(--era-h-xs);
+ * least lg-tier but can wrap (min-h-bar). */
+@utility min-h-icon {
+	min-height: var(--era-h-icon);
 }
-@utility min-h-xxs {
-	min-height: var(--era-h-xxs);
+@utility min-h-pill {
+	min-height: var(--era-h-pill);
 }
-@utility min-h-sm {
-	min-height: var(--era-h-sm);
+@utility min-h-chip {
+	min-height: var(--era-h-chip);
 }
-@utility min-h-md {
-	min-height: var(--era-h-md);
+@utility min-h-control {
+	min-height: var(--era-h-control);
 }
-@utility min-h-lg {
-	min-height: var(--era-h-lg);
+@utility min-h-bar {
+	min-height: var(--era-h-bar);
 }
 
-/* @use a tier-sized square — size-xs is THE icon size (a Lucide glyph beside
- * body text), size-md a square control face. */
-@utility size-xs {
-	width: var(--era-h-xs);
-	height: var(--era-h-xs);
+/* @use a tier-sized square — size-icon is THE icon size (a Lucide glyph beside
+ * body text), size-control a square control face. */
+@utility size-icon {
+	width: var(--era-h-icon);
+	height: var(--era-h-icon);
 }
-@utility size-xxs {
-	width: var(--era-h-xxs);
-	height: var(--era-h-xxs);
+@utility size-pill {
+	width: var(--era-h-pill);
+	height: var(--era-h-pill);
 }
-@utility size-sm {
-	width: var(--era-h-sm);
-	height: var(--era-h-sm);
+@utility size-chip {
+	width: var(--era-h-chip);
+	height: var(--era-h-chip);
 }
-@utility size-md {
-	width: var(--era-h-md);
-	height: var(--era-h-md);
+@utility size-control {
+	width: var(--era-h-control);
+	height: var(--era-h-control);
 }
-@utility size-lg {
-	width: var(--era-h-lg);
-	height: var(--era-h-lg);
-}
-
-/* @use tier-to-tier nesting padding (sp/2) — the horizontal padding of a bar
- * or row that holds tiered controls; the named form of px-(--era-px-*). */
-@utility px-sm {
-	padding-inline: var(--era-px-sm);
-}
-@utility px-md {
-	padding-inline: var(--era-px-md);
-}
-@utility px-lg {
-	padding-inline: var(--era-px-lg);
+@utility size-bar {
+	width: var(--era-h-bar);
+	height: var(--era-h-bar);
 }
 
 /* @use the inter-element gap (sp/2) — flex/grid gap between sibling controls,
@@ -598,46 +586,46 @@
 }
 
 /* @use text-symmetric content padding — (tier − text)/2, the inset that
- * vertically centers body text in its tier; px-inset-md is a text button's
- * side padding, p-inset-md a code block's. */
-@utility p-inset-xxs {
-	padding: var(--era-inset-xxs);
+ * vertically centers body text in its tier; px-inset-control is a text button's
+ * side padding, p-inset-control a code block's. */
+@utility p-inset-pill {
+	padding: var(--era-inset-pill);
 }
-@utility p-inset-sm {
-	padding: var(--era-inset-sm);
+@utility p-inset-chip {
+	padding: var(--era-inset-chip);
 }
-@utility p-inset-md {
-	padding: var(--era-inset-md);
+@utility p-inset-control {
+	padding: var(--era-inset-control);
 }
-@utility px-inset-xxs {
-	padding-inline: var(--era-inset-xxs);
+@utility px-inset-pill {
+	padding-inline: var(--era-inset-pill);
 }
-@utility px-inset-sm {
-	padding-inline: var(--era-inset-sm);
+@utility px-inset-chip {
+	padding-inline: var(--era-inset-chip);
 }
-@utility px-inset-md {
-	padding-inline: var(--era-inset-md);
+@utility px-inset-control {
+	padding-inline: var(--era-inset-control);
 }
-@utility py-inset-xxs {
-	padding-block: var(--era-inset-xxs);
+@utility py-inset-pill {
+	padding-block: var(--era-inset-pill);
 }
-@utility py-inset-sm {
-	padding-block: var(--era-inset-sm);
+@utility py-inset-chip {
+	padding-block: var(--era-inset-chip);
 }
-@utility py-inset-md {
-	padding-block: var(--era-inset-md);
+@utility py-inset-control {
+	padding-block: var(--era-inset-control);
 }
 
 /* @use pill side padding — the wider-than-vertical horizontal breathing room
  * badge/chip text wants (glyph-advance derived, ~2× the vertical inset). */
-@utility px-pill-xxs {
-	padding-inline: var(--era-pill-xxs);
+@utility px-pill {
+	padding-inline: var(--era-pill-px);
 }
-@utility px-pill-sm {
-	padding-inline: var(--era-pill-sm);
+@utility px-chip {
+	padding-inline: var(--era-chip-px);
 }
 
-/* @use text-field side padding — where typed text starts in an md-tier input;
+/* @use text-field side padding — where typed text starts in a control-tier input;
  * the named form of px-(--era-field-px). */
 @utility px-field {
 	padding-inline: var(--era-field-px);
@@ -648,21 +636,21 @@
  * full content panels. Grows super-linearly with density so whitespace holds
  * its perceived share as controls loosen. */
 @utility p-panel {
-	padding: var(--era-pad-sm);
+	padding: var(--era-pad-panel);
 }
 @utility p-card {
-	padding: var(--era-pad-md);
+	padding: var(--era-pad-card);
 }
 /* A content panel always follows a section header ROW, and that row already
- * contributes its own slack: the heading's text sits in an h-lg bar, so there
- * is (h-lg − text)/2 of empty bar under its glyphs before the panel even
+ * contributes its own slack: the heading's text sits in an h-bar bar, so there
+ * is (h-bar − text)/2 of empty bar under its glyphs before the panel even
  * starts. Padding the panel evenly on top of that spends the space twice — the
  * header ends up floating between the section above and the paragraph it
  * introduces rather than binding to it.
  *
  * So the block-start pays only the REMAINDER. The target is the indent: the
  * space under a heading should measure the same as the space beside the text,
- * which is --era-content-p. The header row already supplies (h-lg − text)/2 of
+ * which is --era-content-p. The header row already supplies (h-bar − text)/2 of
  * it, so the panel adds what's left, and heading-to-paragraph reads equal to
  * the paragraph's own inset. Subtracting one --era-gap (the previous rule) left
  * the header's slack unaccounted for and the heading still detached.
@@ -672,12 +660,12 @@
  * exceed the inset outright. */
 @utility p-content {
 	padding: var(--era-content-p);
-	padding-top: max(0px, calc(var(--era-content-p) - (var(--era-h-lg) - var(--era-text)) / 2));
+	padding-top: max(0px, calc(var(--era-content-p) - (var(--era-h-bar) - var(--era-text)) / 2));
 }
 
 /* @use menu-panel padding — the surface-owned inset (0 on flat, 2px on
  * glass/bevel) that keeps row highlights inside a floating panel's frame;
- * pairs with rounded-item on the rows. */
+ * pairs with rounded-menu-item on the rows. */
 @utility p-menu {
 	padding: var(--era-panel-inset);
 }