@signal9/era-ui 30.8.0 → 31.0.0

package/dist/ui/input/variants.d.ts

@@ -60,8 +60,8 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      *   on this tier read as one family.
      */
     size: {
-        control: "h-control rounded-control px-field";
-        pill: "h-pill rounded-pill px-pill";
+        control: "tier-control px-field";
+        pill: "tier-pill px-pill";
     };
     /**
      * Height OVERRIDES, for the fields that are not their tier's height. No
@@ -128,8 +128,8 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      *   on this tier read as one family.
      */
     size: {
-        control: "h-control rounded-control px-field";
-        pill: "h-pill rounded-pill px-pill";
+        control: "tier-control px-field";
+        pill: "tier-pill px-pill";
     };
     /**
      * Height OVERRIDES, for the fields that are not their tier's height. No
@@ -196,8 +196,8 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      *   on this tier read as one family.
      */
     size: {
-        control: "h-control rounded-control px-field";
-        pill: "h-pill rounded-pill px-pill";
+        control: "tier-control px-field";
+        pill: "tier-pill px-pill";
     };
     /**
      * Height OVERRIDES, for the fields that are not their tier's height. No

package/dist/ui/input/variants.js

@@ -63,8 +63,8 @@ export const inputVariants = tv({
          *   on this tier read as one family.
          */
         size: {
-            control: 'h-control rounded-control px-field',
-            pill: 'h-pill rounded-pill px-pill'
+            control: 'tier-control px-field',
+            pill: 'tier-pill px-pill'
         },
         /**
          * Height OVERRIDES, for the fields that are not their tier's height. No

package/dist/ui/kv/kv.svelte

@@ -24,7 +24,7 @@
 		// shrink-0 + nowrap like Badge/Chip: the overflow-hidden here is for the
 		// key cell's squared corners, not a licence to crush — squeezed, this pill
 		// clipped its value instead of bleeding it, which is quieter but no truer.
-		'inline-flex h-pill shrink-0 items-center overflow-hidden rounded-pill bg-fill font-mono text-body leading-none whitespace-nowrap shadow-sm',
+		'inline-flex tier-pill shrink-0 items-center overflow-hidden bg-fill font-mono text-body leading-none whitespace-nowrap shadow-sm',
 		className
 	)}
 	{...restProps}

package/dist/ui/menubar/menubar-root.svelte

@@ -32,6 +32,6 @@
 <Menubar.Root
 	bind:ref
 	bind:value
-	class={cn('flex h-bar items-center rounded-bar bg-well px-gutter shadow-sm', className)}
+	class={cn('flex tier-bar items-center bg-well px-gutter shadow-sm', className)}
 	{...restProps}
 />

package/dist/ui/menubar/menubar-trigger.svelte

@@ -13,7 +13,7 @@
 <Menubar.Trigger
 	bind:ref
 	class={cn(
-		'flex h-control items-center gap-gutter rounded-control px-inset-control text-body text-fg hover:bg-highlight focus:outline-none disabled:opacity-50 has-[svg]:gap-inset-control data-[state=open]:rounded-b-none data-[state=open]:bg-hover',
+		'flex tier-control items-center gap-gutter px-inset-control text-body text-fg hover:bg-highlight focus:outline-none disabled:opacity-50 has-[svg]:gap-inset-control data-[state=open]:rounded-b-none data-[state=open]:bg-hover',
 		className
 	)}
 	{...restProps}

package/dist/ui/nav/nav-bar.svelte

@@ -5,12 +5,12 @@
 	// Bar's geometry, imported rather than restated. A re-export here would be a
 	// second name for one thing; anyone who wants the variants imports them from
 	// Bar, which is where they are defined.
-	import { barVariants } from '../bar/bar.svelte';
+	import { barVariants, resolveBarContent, type BarContent, type BarSize } from '../bar/bar.svelte';
 
 	let {
 		ref = $bindable(null),
 		size = 'bar',
-		content = 'tier',
+		content,
 		divider = false,
 		label = 'Main',
 		children,
@@ -21,7 +21,7 @@
 		/** Height tier, exactly as Bar's — the geometry is Bar's, not a second copy. */
 		size?: 'chip' | 'control' | 'bar';
 		/** Tier of the items inside, so the wall stays concentric to them. */
-		content?: 'tier' | 'pill';
+		content?: BarContent;
 		/**
 		 * Draw Bar's flush cap-a-panel rule beneath the bar. Off by default,
 		 * because a nav that sits in a page already has whatever separation the
@@ -40,6 +40,8 @@
 		label?: string;
 		children?: Snippet;
 	} = $props();
+
+	const resolvedContent = $derived(resolveBarContent(size as BarSize, content));
 </script>
 
 <!--
@@ -53,7 +55,10 @@
 <nav
 	bind:this={ref}
 	aria-label={label}
-	class={cn(barVariants({ size, content, divider }), className)}
+	data-era-geometry={divider ? 'docked' : 'nested'}
+	data-era-tier={size}
+	data-era-contains={resolvedContent}
+	class={cn(barVariants({ size, content: resolvedContent, divider }), className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -1,11 +1,12 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
+import { type BarContent } from '../bar/bar.svelte';
 type $$ComponentProps = HTMLAttributes<HTMLElement> & {
     ref?: HTMLElement | null;
     /** Height tier, exactly as Bar's — the geometry is Bar's, not a second copy. */
     size?: 'chip' | 'control' | 'bar';
     /** Tier of the items inside, so the wall stays concentric to them. */
-    content?: 'tier' | 'pill';
+    content?: BarContent;
     /**
      * Draw Bar's flush cap-a-panel rule beneath the bar. Off by default,
      * because a nav that sits in a page already has whatever separation the

package/dist/ui/pane/pane-root.svelte

@@ -530,18 +530,9 @@
 		// content until the grip sets a size, and size containment would collapse
 		// that to zero) and NOT `paint` (the resize handles deliberately bleed
 		// outward, and paint containment clips them).
-		// --era-container-rd publishes this pane's ACTUAL radius, so any
-		// `rounded-row` descendant derives from the pane instead of from the
-		// utility's fallback. It used to be unset, and that fallback was silently
-		// deciding the geometry of every list in the app.
-		//
-		// The radius is rd-control and stays there. It was briefly raised to rd-bar
-		// to make `rounded-row` produce rd-control for the nav rows — which worked,
-		// and broke the corner it is measured against: the close button sits 4px
-		// from this corner, so at rd-bar it needed a 8.056 radius and had a pill's
-		// 5.056. Chasing the container was the wrong end. A row should carry the
-		// radius of its OWN tier, which is what the command items do now.
-		'group/pane absolute isolate flex flex-col rounded-control border border-divider bg-elevated shadow-lg glass-blur [contain:layout_style] [--era-container-rd:var(--era-rd-control)]',
+		// The pane is unbounded chrome. Bounded descendants carry their own tier;
+		// no inherited radius is allowed to rewrite a row from the outside in.
+		'group/pane absolute isolate flex flex-col rounded-control border border-divider bg-elevated shadow-lg glass-blur [contain:layout_style]',
 		// Auto-size to content until an explicit size is set (by the grip or a preset).
 		size ? '' : 'w-max',
 		// While Ctrl is held the whole pane is grabbable: a grab cursor hints it, and

package/dist/ui/pane/pane-tab.svelte

@@ -23,7 +23,7 @@
 		// trim pulls the box up to the alphabetic baseline, so the clip then slices
 		// every descender (the "logs" g, the "history" y). [text-box:normal] cancels
 		// it; leading-none + the strip's items-center still centre the label.
-		'flex h-pill cursor-pointer items-center gap-gutter rounded-pill px-pill text-body leading-none text-muted outline-none select-none [text-box:normal] hover:text-fg focus-visible:bg-highlight data-[state=active]:bg-hover data-[state=active]:text-bright',
+		'flex tier-pill cursor-pointer items-center gap-gutter px-pill text-body leading-none text-muted outline-none select-none [text-box:normal] hover:text-fg focus-visible:bg-highlight data-[state=active]:bg-hover data-[state=active]:text-bright',
 		className
 	)}
 	{...restProps}

package/dist/ui/select/select-trigger.svelte

@@ -14,7 +14,7 @@
 <Select.Trigger
 	bind:ref
 	class={cn(
-		'flex h-control w-full items-center justify-between gap-icon-inset-chip rounded-control bg-elevated px-inset-control text-body leading-none text-fg shadow-sm hover:bg-highlight focus:bg-highlight focus:outline-none disabled:opacity-50 data-[state=open]:rounded-b-none data-[state=open]:shadow-pressed',
+		'flex tier-control w-full items-center justify-between gap-icon-inset-chip bg-elevated px-inset-control text-body leading-none text-fg shadow-sm hover:bg-highlight focus:bg-highlight focus:outline-none disabled:opacity-50 data-[state=open]:rounded-b-none data-[state=open]:shadow-pressed',
 		className
 	)}
 	{...restProps}

package/dist/ui/slider/slider-thumb.svelte

@@ -8,7 +8,7 @@
 <Slider.Thumb
 	bind:ref
 	class={cn(
-		"relative block size-icon cursor-pointer rounded-icon bg-fg shadow-sm transition-transform duration-base will-change-transform after:absolute after:inset-[-13px] after:content-[''] hover:scale-105 focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:scale-[0.96]",
+		"relative block tier-icon w-icon cursor-pointer bg-fg shadow-sm transition-transform duration-base will-change-transform after:absolute after:inset-[-13px] after:content-[''] hover:scale-105 focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:scale-[0.96]",
 		className
 	)}
 	{...restProps}

package/dist/ui/step/step-summary.svelte

@@ -26,7 +26,7 @@
 <Collapsible.Trigger
 	bind:ref
 	class={cn(
-		'flex h-control w-full min-w-0 era-interactive cursor-pointer items-center gap-gutter rounded-control px-inset-control text-body leading-none text-muted transition-colors duration-base ease-base hover:text-fg',
+		'flex tier-control w-full min-w-0 era-interactive cursor-pointer items-center gap-gutter px-inset-control text-body leading-none text-muted transition-colors duration-base ease-base hover:text-fg',
 		className
 	)}
 	{...restProps}

package/dist/ui/switch/switch.svelte

@@ -32,7 +32,7 @@
 		// component that had worked around it with the border below rather than
 		// moving tier. This moves tier; the border stays, since a track needs a
 		// closed shape at chip size on every surface, not just the flat one.
-		'inline-flex h-chip w-[calc(var(--era-h-chip)+var(--era-h-icon))] shrink-0 era-interactive cursor-pointer items-center justify-center rounded-chip border border-divider bg-field shadow-well hover:bg-highlight data-[state=checked]:bg-fg',
+		'inline-flex tier-chip w-[calc(var(--era-h-chip)+var(--era-h-icon))] shrink-0 era-interactive cursor-pointer items-center justify-center border border-divider bg-field shadow-well hover:bg-highlight data-[state=checked]:bg-fg',
 		className
 	)}
 	{...restProps}
@@ -43,6 +43,6 @@
 	     vs bevel track-slide) scopes a rule to its own surface — see the
 	     surface-animation recipe in surfaces/base.css. -->
 	<Switch.Thumb
-		class="pointer-events-none block size-icon -translate-x-[calc(var(--era-h-icon)/2)] rounded-icon bg-fg transition-transform duration-base ease-base data-[state=checked]:translate-x-[calc(var(--era-h-icon)/2)] data-[state=checked]:bg-2"
+		class="pointer-events-none block tier-icon w-icon -translate-x-[calc(var(--era-h-icon)/2)] bg-fg transition-transform duration-base ease-base data-[state=checked]:translate-x-[calc(var(--era-h-icon)/2)] data-[state=checked]:bg-2"
 	/>
 </Switch.Root>

package/dist/ui/time-field/time-field-segment.svelte

@@ -18,7 +18,7 @@
 <TimeField.Segment
 	bind:ref
 	class={cn(
-		'era-token-ink h-chip rounded-chip px-[calc(var(--era-sp)/2)] focus:bg-highlight focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
+		'era-token-ink tier-chip px-[calc(var(--era-sp)/2)] focus:bg-highlight focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
 		className
 	)}
 	{...restProps}

package/dist/ui/time-range-field/time-range-field-segment.svelte

@@ -22,7 +22,7 @@
 <TimeRangeField.Segment
 	bind:ref
 	class={cn(
-		'era-token-ink h-chip rounded-chip px-[calc(var(--era-sp)/2)] focus:bg-highlight focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
+		'era-token-ink tier-chip px-[calc(var(--era-sp)/2)] focus:bg-highlight focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
 		className
 	)}
 	{...restProps}

package/dist/ui/timeline/timeline-step.svelte

@@ -73,7 +73,7 @@
 
 	<div
 		class={cn(
-			'flex h-control items-center justify-end gap-inset-control rounded-control px-inset-control shadow-sm outline outline-divider',
+			'flex tier-control items-center justify-end gap-inset-control px-inset-control shadow-sm outline outline-divider',
 			tone.bar,
 			className
 		)}

package/dist/ui/toggle-group/toggle-group-item.svelte

@@ -14,8 +14,8 @@
 		variants: {
 			variant: {
 				plain:
-					'h-control min-w-control rounded-control px-inset-control shadow-sm hover:shadow-highlight active:shadow-pressed',
-				segmented: 'h-chip min-w-chip rounded-chip px-inset-chip'
+					'min-w-control tier-control px-inset-control shadow-sm hover:shadow-highlight active:shadow-pressed',
+				segmented: 'min-w-chip tier-chip px-inset-chip'
 			}
 		},
 		defaultVariants: { variant: 'plain' }

package/dist/ui/toggle-group/toggle-group-item.svelte.d.ts

@@ -1,17 +1,17 @@
 export declare const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        plain: "h-control min-w-control rounded-control px-inset-control shadow-sm hover:shadow-highlight active:shadow-pressed";
-        segmented: "h-chip min-w-chip rounded-chip px-inset-chip";
+        plain: "min-w-control tier-control px-inset-control shadow-sm hover:shadow-highlight active:shadow-pressed";
+        segmented: "min-w-chip tier-chip px-inset-chip";
     };
 }, undefined, "inline-flex items-center justify-center text-body text-fg era-interactive not-has-[svg]:era-label-ink not-has-[svg]:text-center hover:bg-highlight focus:outline-none disabled:opacity-50 data-[state=on]:bg-fill data-[state=on]:text-bright data-[state=on]:shadow-pressed data-[state=on]:hover:shadow-pressed", {
     variant: {
-        plain: "h-control min-w-control rounded-control px-inset-control shadow-sm hover:shadow-highlight active:shadow-pressed";
-        segmented: "h-chip min-w-chip rounded-chip px-inset-chip";
+        plain: "min-w-control tier-control px-inset-control shadow-sm hover:shadow-highlight active:shadow-pressed";
+        segmented: "min-w-chip tier-chip px-inset-chip";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        plain: "h-control min-w-control rounded-control px-inset-control shadow-sm hover:shadow-highlight active:shadow-pressed";
-        segmented: "h-chip min-w-chip rounded-chip px-inset-chip";
+        plain: "min-w-control tier-control px-inset-control shadow-sm hover:shadow-highlight active:shadow-pressed";
+        segmented: "min-w-chip tier-chip px-inset-chip";
     };
 }, undefined>>;
 import { ToggleGroup } from 'bits-ui';

package/dist/ui/toggle-group/toggle-group-root.svelte

@@ -10,8 +10,7 @@
 		variants: {
 			variant: {
 				plain: 'gap-gutter',
-				segmented:
-					'h-control gap-chip-inset-control rounded-control bg-field p-chip-inset-control shadow-well'
+				segmented: 'gap-chip-inset-control tier-control bg-field p-chip-inset-control shadow-well'
 			}
 		},
 		defaultVariants: { variant: 'plain' }

package/dist/ui/toggle-group/toggle-group-root.svelte.d.ts

@@ -1,17 +1,17 @@
 export declare const toggleGroupVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         plain: "gap-gutter";
-        segmented: "h-control gap-chip-inset-control rounded-control bg-field p-chip-inset-control shadow-well";
+        segmented: "gap-chip-inset-control tier-control bg-field p-chip-inset-control shadow-well";
     };
 }, undefined, "inline-flex items-center", {
     variant: {
         plain: "gap-gutter";
-        segmented: "h-control gap-chip-inset-control rounded-control bg-field p-chip-inset-control shadow-well";
+        segmented: "gap-chip-inset-control tier-control bg-field p-chip-inset-control shadow-well";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         plain: "gap-gutter";
-        segmented: "h-control gap-chip-inset-control rounded-control bg-field p-chip-inset-control shadow-well";
+        segmented: "gap-chip-inset-control tier-control bg-field p-chip-inset-control shadow-well";
     };
 }, undefined>>;
 import { ToggleGroup } from 'bits-ui';

package/dist/ui/tooltip/tooltip-content.svelte

@@ -19,7 +19,7 @@
 		bind:ref
 		{...relay?.attrs}
 		class={cn(
-			'z-overlay inline-flex h-pill items-center gap-gutter rounded-pill bg-elevated px-inset-pill text-body leading-none whitespace-nowrap text-fg shadow-lg glass-blur has-[svg]:gap-inset-pill',
+			'z-overlay inline-flex tier-pill items-center gap-gutter bg-elevated px-inset-pill text-body leading-none whitespace-nowrap text-fg shadow-lg glass-blur has-[svg]:gap-inset-pill',
 			className
 		)}
 		{sideOffset}

package/dist/ui/tree/tree-item.svelte

@@ -54,7 +54,7 @@
 	data-depth={item.depth}
 	style="padding-left: calc(var(--spacing-gutter) + {item.depth} * var(--era-h-control) / 2)"
 	class={cn(
-		'flex h-control era-interactive cursor-default items-center gap-gutter rounded-control pr-icon-inset-control text-body',
+		'flex tier-control era-interactive cursor-default items-center gap-gutter pr-icon-inset-control text-body',
 		'hover:bg-highlight focus:outline-none focus-visible:bg-highlight',
 		selected ? 'bg-fill text-bright' : 'text-fg',
 		item.node.disabled && 'pointer-events-none opacity-50',

package/dist/ui/video-player/video-player.svelte

@@ -1058,7 +1058,7 @@
 						-->
 						<span
 							aria-hidden="true"
-							class="pointer-events-none absolute bottom-[calc(100%+(var(--era-h-bar)-var(--era-h-chip))/2+var(--era-gap))] left-(--era-video-hover-pct) inline-flex h-pill -translate-x-1/2 items-center gap-gutter rounded-pill bg-elevated px-inset-pill font-mono text-body leading-none whitespace-nowrap text-fg shadow-lg glass-blur"
+							class="pointer-events-none absolute bottom-[calc(100%+(var(--era-h-bar)-var(--era-h-chip))/2+var(--era-gap))] left-(--era-video-hover-pct) inline-flex tier-pill -translate-x-1/2 items-center gap-gutter bg-elevated px-inset-pill font-mono text-body leading-none whitespace-nowrap text-fg shadow-lg glass-blur"
 						>
 							<span class="tabular-nums">{hoverTimeLabel}</span>
 							{#if hoverChapter}

package/dist/utils/tw-merge-config.d.ts

@@ -5,6 +5,9 @@ export declare const SPACING: string[];
 export declare const twMergeConfig: {
     extend: {
         classGroups: {
+            'era-tier': {
+                tier: string[];
+            }[];
             'backdrop-blur': string[];
             'font-size': {
                 text: string[];

package/dist/utils/tw-merge-config.js

@@ -42,6 +42,7 @@ export const SPACING = [
     'pill-inset-bar',
     'chip-inset-control',
     'chip-inset-bar',
+    'control-inset-bar',
     'glyph-icon',
     'glyph-pill'
 ];
@@ -122,6 +123,9 @@ export const twMergeConfig = {
         classGroups: {
             ...spacingGroups,
             ...radiusGroups,
+            // A tier utility owns height and radius as one indivisible geometry choice.
+            // The last tier-* supplied by a consumer must replace the component default.
+            'era-tier': [{ tier: TIERS }],
             // glass-blur sets backdrop-filter, so it conflicts with backdrop-blur.
             'backdrop-blur': ['glass-blur'],
             // Registered font sizes — without this they read as colours.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "30.8.0",
+	"version": "31.0.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",
@@ -25,8 +25,8 @@
 		"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 check:doc-tokens && npm run check:audit-controls && npm run check:specimen-coverage && npm run check:eslint-rules && npm run check:install && npm run check:reachable && npm run check:double-edge && 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 && npm run check:audit-controls && npm run check:specimen-coverage && npm run check:eslint-rules && npm run check:install && npm run check:reachable && npm run check:double-edge",
+		"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 check:audit-controls && npm run check:specimen-coverage && npm run check:eslint-rules && npm run check:install && npm run check:reachable && npm run check:double-edge && npm run check:geometry && 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 && npm run check:audit-controls && npm run check:specimen-coverage && npm run check:eslint-rules && npm run check:install && npm run check:reachable && npm run check:double-edge && npm run check:geometry",
 		"test": "npm run test:visual",
 		"check:doc-tokens": "node --experimental-strip-types scripts/check-doc-tokens.ts",
 		"check:audit-controls": "node --experimental-strip-types scripts/check-audit-controls.ts",
@@ -35,6 +35,7 @@
 		"check:install": "node --experimental-strip-types scripts/check-install.ts",
 		"check:reachable": "node --experimental-strip-types scripts/check-reachable.ts",
 		"check:double-edge": "node --experimental-strip-types scripts/check-double-edge.ts",
+		"check:geometry": "node --experimental-strip-types scripts/check-geometry.ts",
 		"verify:published": "node scripts/verify-published.mjs"
 	},
 	"files": [

package/skill/SKILL.md

@@ -20,11 +20,11 @@ whole system re-derives per element, so any `data-*` axis override on any
 subtree just works.
 
 **Write named classes, not var classes.** Era's public styling API is pure
-Tailwind-looking utilities: `h-control rounded-control px-gutter shadow`, never
+Tailwind-looking utilities: `tier-control px-gutter shadow`, never
 `h-(--era-h-control)`-style var spellings. Where Tailwind already names the concept
 era overloads it (bare `shadow` is the
 surface chrome, `transition-colors` rides the motion axis); where it doesn't,
-era registers its own (`h-control`, `gap-gutter`, `p-card`). The `--era-*` custom
+era registers its own (`tier-control`, `gap-gutter`, `p-card`). The `--era-*` custom
 properties remain public as the escape hatch for the few things without a
 name — noted inline below — but reaching for one when a named class exists is
 a review finding.
@@ -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      | Geometry       | Width/min-width helpers      | Use for                              |
+| --------- | -------------- | ---------------------------- | ------------------------------------ |
+| `icon`    | `tier-icon`    | `w-icon`, `min-w-icon`       | a lucide glyph, switch thumbs        |
+| `pill`    | `tier-pill`    | `w-pill`, `min-w-pill`       | a badge/chip nested INSIDE a control |
+| `chip`    | `tier-chip`    | `w-chip`, `min-w-chip`       | standalone pills, switch tracks, KV  |
+| `control` | `tier-control` | `w-control`, `min-w-control` | buttons, inputs, selects, triggers   |
+| `bar`     | `tier-bar`     | `w-bar`, `min-w-bar`         | bars and bounded 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
@@ -86,20 +86,20 @@ corners axis.
    must equal the gap between the children, on every side. `gap-gutter`
    (= sp/2) is the universal inter-element gap, and `p-gutter` (+ `px-`/`py-`)
    is the matching gutter a scrollable list or rail owes its rows.
-2. **Concentricity** — `rd-T − rd-U = (h-T − h-U)/2` for every tier pair. So:
-   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
+2. **Concentricity** — `rd-T − rd-U = (h-T − h-U)/2` for every tier pair.
+   `tier-T` binds height and radius so they cannot drift. A bounded container
+   names the ACTUAL inner tier and owns the matching inset; nested corners then
+   share a center automatically. The concentric insets are advanced enough to stay
    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
-is `rounded-chip`, however big the panel. Choosing radius by visual importance
-is the #1 way concentricity breaks.
+**The boundary**: an unbounded surface has no height tier. Its exposed corner is
+either optical or derives OUTWARD from a declared corner-bearing child. Never
+derive a bounded row's radius inward from an ancestor; that makes the row's
+relationship with its own badge or chip depend on unrelated outer chrome.
 
 ## Padding: geometric vs optical