@signal9/era-ui 30.7.0 → 31.0.0

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

@@ -10,7 +10,7 @@ export declare const cardVariants: import("tailwind-variants").TVReturnType<{
         false: "p-card";
     };
     interactive: {
-        true: "cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight active:shadow-pressed era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
+        true: "cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight active:shadow-pressed [&:active>[data-card-content]]:translate-x-(--era-press-sink-x) [&:active>[data-card-content]]:translate-y-(--era-press-sink-y) era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
     };
 }, undefined, "block w-full rounded-bar text-left text-fg", {
     tone: {
@@ -24,7 +24,7 @@ export declare const cardVariants: import("tailwind-variants").TVReturnType<{
         false: "p-card";
     };
     interactive: {
-        true: "cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight active:shadow-pressed era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
+        true: "cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight active:shadow-pressed [&:active>[data-card-content]]:translate-x-(--era-press-sink-x) [&:active>[data-card-content]]:translate-y-(--era-press-sink-y) era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     tone: {
@@ -38,7 +38,7 @@ export declare const cardVariants: import("tailwind-variants").TVReturnType<{
         false: "p-card";
     };
     interactive: {
-        true: "cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight active:shadow-pressed era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
+        true: "cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight active:shadow-pressed [&:active>[data-card-content]]:translate-x-(--era-press-sink-x) [&:active>[data-card-content]]:translate-y-(--era-press-sink-y) era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
     };
 }, undefined>>;
 import type { Snippet } from 'svelte';
@@ -72,10 +72,22 @@ type $$ComponentProps = HTMLAttributes<HTMLElement> & AnchorBits & ButtonBits &
      * A CARD THAT IS PRESSABLE SHOULD USUALLY BE `elevated`. Passing `href`
      * or `onclick` turns on the interactive face — hover, focus, press — but
      * it deliberately does NOT override the tier you asked for, so a
-     * `surface` link card has no resting lift and reads flatter than the
-     * static cards around it. That combination was reported as a bug and it
-     * is a choice: a tone that silently changed under an event handler would
-     * be a worse one.
+     * `surface` link card does not get the raised tier's separation and can
+     * read flatter than the static cards around it. That combination was
+     * reported as a bug and it is a choice: a tone that silently changed
+     * under an event handler would be a worse one.
+     *
+     * HOW THE TIERS DIFFER IS SURFACE-DEPENDENT, so do not go looking for a
+     * fill difference on every surface. `base` mixes the elevated fill 6%
+     * toward `--color-bright` and adds a resting shadow, so there the tiers
+     * differ in COLOUR. `bevel` sets `--era-surface-bg-elevated` to
+     * `--era-surface-bg` outright — elevation is a chisel, not a tone, which
+     * is bevel's whole premise — so `surface` and `elevated` paint the
+     * IDENTICAL fill there and differ only in relief. A consumer measured
+     * exactly that on 30.8.0 bevel: both tones `oklch(0.195 0 none)` in dark,
+     * `0.863` in light, one variable, side by side. `glass` splits the tiers
+     * its own way again. So the tier is real on every surface; the thing
+     * carrying it is not always the fill.
      */
     tone?: 'elevated' | 'surface' | 'well' | 'flat';
     /** Rendered above the body with a subtle divider. */

package/dist/ui/chip/chip.svelte

@@ -16,8 +16,8 @@
 		base: 'inline-flex shrink-0 items-center bg-fill font-mono text-body leading-none whitespace-nowrap text-fg shadow-sm',
 		variants: {
 			size: {
-				chip: 'h-chip min-w-chip rounded-chip pl-chip',
-				pill: 'h-pill min-w-pill rounded-pill pl-pill'
+				chip: 'min-w-chip tier-chip pl-chip',
+				pill: 'min-w-pill tier-pill pl-pill'
 			},
 			dismissible: { true: '', false: '' }
 		},
@@ -110,6 +110,8 @@
 
 <div
 	bind:this={ref}
+	data-era-geometry="bounded"
+	data-era-tier={size}
 	class={cn(chipVariants({ size, dismissible: !!ondismiss }), className)}
 	{...restProps}
 >
@@ -156,6 +158,7 @@
 			<Button
 				icon
 				size="pill"
+				topology={size === 'pill' ? 'docked' : 'bounded'}
 				tone="destructive"
 				class={size === 'pill' ? 'rounded-l-none' : undefined}
 				onclick={ondismiss}

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

@@ -1,7 +1,7 @@
 export declare const chipVariants: import("tailwind-variants").TVReturnType<{
     size: {
-        chip: "h-chip min-w-chip rounded-chip pl-chip";
-        pill: "h-pill min-w-pill rounded-pill pl-pill";
+        chip: "min-w-chip tier-chip pl-chip";
+        pill: "min-w-pill tier-pill pl-pill";
     };
     dismissible: {
         true: "";
@@ -9,8 +9,8 @@ export declare const chipVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, "inline-flex shrink-0 items-center bg-fill font-mono text-body leading-none whitespace-nowrap text-fg shadow-sm", {
     size: {
-        chip: "h-chip min-w-chip rounded-chip pl-chip";
-        pill: "h-pill min-w-pill rounded-pill pl-pill";
+        chip: "min-w-chip tier-chip pl-chip";
+        pill: "min-w-pill tier-pill pl-pill";
     };
     dismissible: {
         true: "";
@@ -18,8 +18,8 @@ export declare const chipVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        chip: "h-chip min-w-chip rounded-chip pl-chip";
-        pill: "h-pill min-w-pill rounded-pill pl-pill";
+        chip: "min-w-chip tier-chip pl-chip";
+        pill: "min-w-pill tier-pill pl-pill";
     };
     dismissible: {
         true: "";

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

@@ -13,7 +13,7 @@
 <Collapsible.Trigger
 	bind:ref
 	class={cn(
-		'flex h-control w-full items-center rounded-control px-inset-control text-body text-fg hover:bg-highlight focus:outline-none disabled:opacity-50',
+		'flex tier-control w-full items-center px-inset-control text-body text-fg hover:bg-highlight focus:outline-none disabled:opacity-50',
 		className
 	)}
 	{...restProps}

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

@@ -14,7 +14,7 @@
 <Combobox.Trigger
 	bind:ref
 	class={cn(
-		'flex size-control shrink-0 items-center justify-center rounded-control text-muted focus:outline-none',
+		'flex tier-control w-control shrink-0 items-center justify-center text-muted focus:outline-none',
 		className
 	)}
 	{...restProps}

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

@@ -8,7 +8,7 @@
 <Command.Item
 	bind:ref
 	class={cn(
-		'flex h-control cursor-pointer items-center gap-gutter rounded-control px-inset-control text-body leading-none text-fg outline-none select-none not-has-[svg]:era-label-ink data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-highlight',
+		'flex tier-control cursor-pointer items-center gap-gutter px-inset-control text-body leading-none text-fg outline-none select-none not-has-[svg]:era-label-ink data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-highlight',
 		className
 	)}
 	{...restProps}

package/dist/ui/command/command-link-item.svelte

@@ -8,7 +8,7 @@
 <Command.LinkItem
 	bind:ref
 	class={cn(
-		'flex h-control cursor-pointer items-center gap-gutter rounded-control px-inset-control text-body leading-none text-fg no-underline outline-none select-none not-has-[svg]:era-label-ink data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-highlight',
+		'flex tier-control cursor-pointer items-center gap-gutter px-inset-control text-body leading-none text-fg no-underline outline-none select-none not-has-[svg]:era-label-ink data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-highlight',
 		className
 	)}
 	{...restProps}

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

@@ -24,13 +24,11 @@
 		// glass-blur, like every other floating panel (menus, dialogs, pickers):
 		// inert on opaque surfaces, blurs the backdrop when the palette floats.
 		!bare &&
-			// [--era-container-rd:…] publishes this panel's own radius, so the rows
-			// inside re-derive against rd-bar rather than the rd-control default.
-			// rd-bar − gutter IS rd-control, so the palette renders unchanged; what
-			// changes is that the rows now say WHY they are that radius.
+			// The panel is unbounded chrome; its bounded command rows carry their own
+			// control tier rather than inheriting geometry from this ancestor.
 			// No border: --era-shadow-lg is the edge on every surface, and a border
 			// alongside it draws two hairlines of the same colour on flat.
-			'overflow-hidden rounded-bar bg-well p-gutter shadow-lg glass-blur [--era-container-rd:var(--era-rd-bar)]',
+			'overflow-hidden rounded-bar bg-well p-gutter shadow-lg glass-blur',
 		className
 	)}
 	{...restProps}

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

@@ -18,7 +18,7 @@
 <DateField.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/date-picker/date-picker-day.svelte

@@ -8,7 +8,7 @@
 <DatePicker.Day
 	bind:ref
 	class={cn(
-		'inline-flex size-control cursor-default items-center justify-center rounded-control text-body text-fg hover:bg-highlight focus:outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[outside-month]:pointer-events-none data-[outside-month]:text-muted/40 data-[selected]:bg-hover data-[selected]:text-bright data-[unavailable]:text-muted data-[unavailable]:line-through',
+		'inline-flex tier-control w-control cursor-default items-center justify-center text-body text-fg hover:bg-highlight focus:outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[outside-month]:pointer-events-none data-[outside-month]:text-muted/40 data-[selected]:bg-hover data-[selected]:text-bright data-[unavailable]:text-muted data-[unavailable]:line-through',
 		className
 	)}
 	{...restProps}

package/dist/ui/date-picker/date-picker-segment.svelte

@@ -18,7 +18,7 @@
 <DatePicker.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/date-picker/date-picker-trigger.svelte

@@ -14,7 +14,7 @@
 <DatePicker.Trigger
 	bind:ref
 	class={cn(
-		'ml-auto flex size-chip shrink-0 items-center justify-center rounded-chip text-muted hover:bg-highlight hover:text-fg focus:outline-none',
+		'ml-auto flex tier-chip w-chip shrink-0 items-center justify-center text-muted hover:bg-highlight hover:text-fg focus:outline-none',
 		className
 	)}
 	{...restProps}

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

@@ -22,7 +22,7 @@
 <DateRangeField.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/date-range-picker/date-range-picker-day.svelte

@@ -12,7 +12,7 @@
 <DateRangePicker.Day
 	bind:ref
 	class={cn(
-		'inline-flex size-control cursor-default items-center justify-center rounded-control text-body text-fg hover:bg-highlight focus:outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-highlight data-[highlighted]:shadow-highlight data-[outside-month]:pointer-events-none data-[outside-month]:text-muted/40 data-[range-end]:bg-primary data-[range-end]:text-primary-fg data-[range-start]:bg-primary data-[range-start]:text-primary-fg data-[selected]:bg-hover data-[selected]:text-bright data-[unavailable]:text-muted data-[unavailable]:line-through',
+		'inline-flex tier-control w-control cursor-default items-center justify-center text-body text-fg hover:bg-highlight focus:outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-highlight data-[highlighted]:shadow-highlight data-[outside-month]:pointer-events-none data-[outside-month]:text-muted/40 data-[range-end]:bg-primary data-[range-end]:text-primary-fg data-[range-start]:bg-primary data-[range-start]:text-primary-fg data-[selected]:bg-hover data-[selected]:text-bright data-[unavailable]:text-muted data-[unavailable]:line-through',
 		className
 	)}
 	{...restProps}

package/dist/ui/date-range-picker/date-range-picker-segment.svelte

@@ -22,7 +22,7 @@
 <DateRangePicker.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/date-range-picker/date-range-picker-trigger.svelte

@@ -14,7 +14,7 @@
 <DateRangePicker.Trigger
 	bind:ref
 	class={cn(
-		'ml-auto flex size-chip shrink-0 items-center justify-center rounded-chip text-muted hover:bg-highlight hover:text-fg focus:outline-none',
+		'ml-auto flex tier-chip w-chip shrink-0 items-center justify-center text-muted hover:bg-highlight hover:text-fg focus:outline-none',
 		className
 	)}
 	{...restProps}

package/dist/ui/dialog/dialog-close.svelte

@@ -10,6 +10,7 @@
 		variant,
 		icon,
 		loading,
+		busy,
 		loadingLabel,
 		children,
 		class: className,
@@ -30,6 +31,7 @@
 			{variant}
 			{icon}
 			{loading}
+			{busy}
 			{loadingLabel}
 			class={className}
 		>

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

@@ -48,7 +48,25 @@
 
 	     Sheet.Content already had this exact treatment; Dialog and AlertDialog
 	     never got it. 85dvh matches Sheet's, deliberately — one ceiling for every
-	     floating panel, not three opinions.
+	     MODAL panel, not three opinions.
+
+	     SCOPE, and read this before you delete a max-height of your own: this
+	     covers Dialog, AlertDialog and Sheet. It does NOT cover the anchored
+	     surfaces — Popover, DropdownMenu, Select, Combobox, Menubar,
+	     ContextMenu and Tooltip have no ceiling at all today. If you keep a
+	     local max-height on one of those, KEEP IT; it is load-bearing, not
+	     vestigial.
+
+	     This paragraph exists because the sentence above it used to read "every
+	     floating panel", and a consumer reasoned correctly from it: floating
+	     panels have ceilings, therefore my Popover's max-height is a redundant
+	     workaround, therefore delete it. Right there, in the exact place you
+	     come to decide whether a workaround is still needed, and wrong one
+	     component over. A principle the library does not implement is worse
+	     than silence — silence sends you to measure. Carrying the ceiling to
+	     the anchored surfaces (anchor-aware, via bits-ui's
+	     --bits-*-content-available-height rather than viewport dvh) is the
+	     actual fix; until it lands, this says what is true instead.
 
 	     The BODY scrolls, not the panel, so a long form's footer stays put
 	     instead of scrolling away with the fields. -->

package/dist/ui/dropdown-menu/dropdown-menu-trigger.svelte

@@ -22,7 +22,7 @@
 <DropdownMenu.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 text-fg shadow-sm 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 text-fg shadow-sm 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/file-upload/file-upload.svelte

@@ -74,7 +74,7 @@
 	data-dragging={dragging || undefined}
 	data-disabled={disabled || undefined}
 	class={cn(
-		'flex h-control w-full items-center gap-gutter rounded-control bg-elevated px-inset-control font-mono text-body leading-none text-fg shadow-well transition-colors duration-base focus-within:bg-highlight hover:bg-highlight data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[dragging]:bg-highlight data-[dragging]:text-bright',
+		'flex tier-control w-full items-center gap-gutter bg-elevated px-inset-control font-mono text-body leading-none text-fg shadow-well transition-colors duration-base focus-within:bg-highlight hover:bg-highlight data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[dragging]:bg-highlight data-[dragging]:text-bright',
 		className
 	)}
 	ondragenter={onDragEnter}

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' }