@signal9/era-ui 7.0.0 → 9.0.0

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

@@ -24,7 +24,7 @@
 		// glass-blur, like every other floating panel (menus, dialogs, pickers):
 		// inert on opaque surfaces, blurs the backdrop when the palette floats.
 		!bare &&
-			'overflow-hidden rounded-(--era-rd-lg) border border-(color:--era-border-color) bg-(--era-surface-bg) p-(--era-gap) shadow-(--era-shadow-lg) glass-blur',
+			'overflow-hidden rounded-(--era-rd-bar) border border-(color:--era-border-color) bg-(--era-surface-bg) p-(--era-gap) shadow-(--era-shadow-lg) glass-blur',
 		className
 	)}
 	{...restProps}

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

@@ -190,25 +190,27 @@
      glass-blur: a flat sheet on flat (shadow resolves to none), the chisel frame
      on bevel, frost on glass — so it reads as "dedicated" on every surface, not
      an undifferentiated rectangle. -->
-<div class={cn('relative flex h-(--era-h-md) w-full min-w-0 items-center font-mono', className)}>
-	<ChevronRight class="mx-(--era-gap) size-(--era-h-xs) shrink-0 text-fg" />
+<div
+	class={cn('relative flex h-(--era-h-control) w-full min-w-0 items-center font-mono', className)}
+>
+	<ChevronRight class="mx-(--era-gap) size-(--era-h-icon) shrink-0 text-fg" />
 
 	<!-- Completed segments: the locked prefix. Backspace (empty input) pops. -->
 	<!-- ONE chevron, one size, everywhere in the bar: the prompt's, the
-	     breadcrumb separators', and the submenu indicator's are all h-xs — the
+	     breadcrumb separators', and the submenu indicator's are all h-icon — the
 	     icon tier every other glyph in the bar sits on. They differ only in
 	     ink (fg for the live prompt, muted for the locked path), so
 	     "> workspace > which workspace" reads as one repeated mark, not three
 	     sizes of it. -->
 	{#each stack as seg (seg.value)}
 		<span class="shrink-0 text-body text-muted">{seg.label}</span>
-		<ChevronRight class="mx-(--era-gap) size-(--era-h-xs) shrink-0 text-muted" />
+		<ChevronRight class="mx-(--era-gap) size-(--era-h-icon) shrink-0 text-muted" />
 	{/each}
 
 	<!-- ONE source of truth for the field's type: font size and text colour live on
 	     the container, and both the input and the ghost mirror inherit them. Change
 	     the field's look here and the ghost follows automatically. -->
-	<!-- leading-(--era-h-md) is the whole trick for vertical alignment: line-height
+	<!-- leading-(--era-h-control) is the whole trick for vertical alignment: line-height
 	     equals the field height, so a single line of text fills the box and centres
 	     itself by the font's own metrics. The input and the ghost mirror BOTH inherit
 	     it, so they centre by the identical mechanism — no native-input-centering vs
@@ -217,9 +219,9 @@
 	     MIRROR that actually paints it did not — so in a host narrower than the
 	     prompt line (placeholder included), the text bled past the bar's rounded
 	     end where any real input would clip. Safe with the line-height centring:
-	     the box is the bar's full h-md, well above the ink (clipped-glyphs' law). -->
+	     the box is the bar's full h-control, well above the ink (clipped-glyphs' law). -->
 	<div
-		class="relative h-full min-w-0 flex-1 overflow-hidden text-body leading-(--era-h-md) text-bright"
+		class="relative h-full min-w-0 flex-1 overflow-hidden text-body leading-(--era-h-control) text-bright"
 	>
 		<!-- Transparent input: it owns editing and the caret only, so the visible text
 		     can come entirely from the mirror below (see it for why). Everything but
@@ -270,7 +272,9 @@
 			onmousedown={(e) => e.preventDefault()}
 		>
 			{#if !filtered.length}
-				<div class="flex h-(--era-h-md) items-center px-(--era-inset-md) text-body text-muted">
+				<div
+					class="flex h-(--era-h-control) items-center px-(--era-inset-control) text-body text-muted"
+				>
 					{empty}
 				</div>
 			{:else}
@@ -286,7 +290,7 @@
 						tabindex={-1}
 						aria-selected={i === selectedIndex}
 						class={cn(
-							'flex h-(--era-h-md) cursor-default items-center gap-(--era-gap) px-(--era-inset-md) text-body era-text-trim whitespace-nowrap',
+							'flex h-(--era-h-control) cursor-default items-center gap-(--era-gap) px-(--era-inset-control) text-body era-text-trim whitespace-nowrap',
 							i === selectedIndex ? 'bg-3 text-bright' : 'text-fg'
 						)}
 						onclick={() => choose(item)}
@@ -295,14 +299,14 @@
 							<span class="shrink-0">{item.icon}</span>
 						{:else if item.icon}
 							{@const Icon = item.icon}
-							<Icon class="size-(--era-h-xs) shrink-0 text-muted" />
+							<Icon class="size-(--era-h-icon) shrink-0 text-muted" />
 						{/if}
 						<span class="shrink-0">{item.label}</span>
 						{#if item.items}
-							<ChevronRight class="size-(--era-h-xs) shrink-0 text-muted" />
+							<ChevronRight class="size-(--era-h-icon) shrink-0 text-muted" />
 						{/if}
 						{#if item.sublabel}
-							<span class="ml-auto truncate pl-(--era-inset-md) text-body text-muted">
+							<span class="ml-auto truncate pl-(--era-inset-control) text-body text-muted">
 								{item.sublabel}
 							</span>
 						{/if}

package/dist/ui/context-menu/context-menu-checkbox-item.svelte

@@ -14,7 +14,7 @@
 	bind:ref
 	bind:checked
 	class={cn(
-		'flex h-(--era-h-md) cursor-pointer items-center rounded-(--era-item-rd) px-(--era-inset-md) text-body text-fg data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow)',
+		'flex h-(--era-h-control) cursor-pointer items-center rounded-(--era-item-rd) px-(--era-inset-control) text-body text-fg data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow)',
 		className
 	)}
 	{...restProps}

package/dist/ui/context-menu/context-menu-content.svelte

@@ -21,7 +21,7 @@
 		// 2px frame that stops a full-width highlight from breaking their chrome.
 		// A fixed gutter was tried here and rejected: it padded flat menus too.
 		class={cn(
-			'z-50 w-max overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) p-(--era-panel-inset) shadow-(--era-shadow-lg) glass-blur',
+			'z-50 w-max overflow-hidden rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) p-(--era-panel-inset) shadow-(--era-shadow-lg) glass-blur',
 			className
 		)}
 		{sideOffset}

package/dist/ui/context-menu/context-menu-group-heading.svelte

@@ -11,6 +11,9 @@
 
 <ContextMenu.GroupHeading
 	bind:ref
-	class={cn('flex h-(--era-h-md) items-center px-(--era-inset-md) text-body text-muted', className)}
+	class={cn(
+		'flex h-(--era-h-control) items-center px-(--era-inset-control) text-body text-muted',
+		className
+	)}
 	{...restProps}
 />

package/dist/ui/context-menu/context-menu-item.svelte

@@ -13,7 +13,7 @@
 <ContextMenu.Item
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) cursor-pointer items-center gap-(--era-gap) rounded-(--era-item-rd) px-(--era-inset-md) text-body text-fg data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow)',
+		'flex h-(--era-h-control) cursor-pointer items-center gap-(--era-gap) rounded-(--era-item-rd) px-(--era-inset-control) text-body text-fg data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow)',
 		className
 	)}
 	{...restProps}

package/dist/ui/context-menu/context-menu-radio-item.svelte

@@ -12,7 +12,7 @@
 <ContextMenu.RadioItem
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) cursor-pointer items-center rounded-(--era-item-rd) px-(--era-inset-md) text-body text-fg data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow)',
+		'flex h-(--era-h-control) cursor-pointer items-center rounded-(--era-item-rd) px-(--era-inset-control) text-body text-fg data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow)',
 		className
 	)}
 	{...restProps}

package/dist/ui/context-menu/context-menu-sub-content.svelte

@@ -15,7 +15,7 @@
 	<ContextMenu.SubContent
 		bind:ref
 		class={cn(
-			'z-50 w-max overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) p-(--era-panel-inset) shadow-(--era-shadow-lg) glass-blur',
+			'z-50 w-max overflow-hidden rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) p-(--era-panel-inset) shadow-(--era-shadow-lg) glass-blur',
 			className
 		)}
 		{sideOffset}

package/dist/ui/context-menu/context-menu-sub-trigger.svelte

@@ -14,11 +14,11 @@
 <ContextMenu.SubTrigger
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) cursor-pointer items-center justify-between gap-(--era-xs-inset-sm) rounded-(--era-item-rd) px-(--era-inset-md) text-body text-fg data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow) data-[state=open]:bg-hover',
+		'flex h-(--era-h-control) cursor-pointer items-center justify-between gap-(--era-icon-inset-chip) rounded-(--era-item-rd) px-(--era-inset-control) text-body text-fg data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow) data-[state=open]:bg-hover',
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronRight class="size-(--era-h-xs) text-muted" />
+	<ChevronRight class="size-(--era-h-icon) text-muted" />
 </ContextMenu.SubTrigger>

package/dist/ui/copy-button/copy-button.svelte

@@ -75,7 +75,7 @@
 	// leaving one does the reverse; timing rides the motion axis, so the swap
 	// snaps at instant, is decisive at normal, and overshoots at extra.
 	const iconBase =
-		'absolute inset-0 size-(--era-h-xs) transition-[opacity,scale,filter] duration-(--era-duration) ease-(--era-ease)';
+		'absolute inset-0 size-(--era-h-icon) transition-[opacity,scale,filter] duration-(--era-duration) ease-(--era-ease)';
 	const iconIn = 'scale-100 opacity-100 blur-none';
 	const iconOut = 'scale-25 opacity-0 blur-xs';
 </script>
@@ -89,7 +89,7 @@
 	onclick={copy}
 	{...restProps}
 >
-	<span class="relative block size-(--era-h-xs) shrink-0">
+	<span class="relative block size-(--era-h-icon) shrink-0">
 		<IdleIcon class={cn(iconBase, status === 'idle' ? iconIn : iconOut)} />
 		<SuccessIcon class={cn(iconBase, 'text-success', status === 'success' ? iconIn : iconOut)} />
 		<FailureIcon

package/dist/ui/cycle/cycle.svelte

@@ -140,7 +140,7 @@
 					{@render children(option)}
 				{:else if option.icon}
 					{@const Icon = option.icon}
-					<Icon class="size-(--era-h-xs) shrink-0" />
+					<Icon class="size-(--era-h-icon) shrink-0" />
 				{:else}
 					{option.label}
 				{/if}

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

@@ -8,7 +8,7 @@
 <DateField.Segment
 	bind:ref
 	class={cn(
-		'inline-flex h-(--era-h-sm) items-center rounded-(--era-rd-sm) px-[calc(var(--era-sp)/2)] focus:bg-(--era-highlight) focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
+		'inline-flex h-(--era-h-chip) items-center rounded-(--era-rd-chip) px-[calc(var(--era-sp)/2)] focus:bg-(--era-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-content.svelte

@@ -15,7 +15,7 @@
 	bind:ref
 	align="start"
 	class={cn(
-		'z-50 rounded-(--era-rd-lg) bg-(--era-surface-bg-elevated) p-(--era-pad-lg) shadow-(--era-shadow-lg) glass-blur',
+		'z-50 rounded-(--era-rd-bar) bg-(--era-surface-bg-elevated) p-(--era-pad-content) shadow-(--era-shadow-lg) glass-blur',
 		className
 	)}
 	{sideOffset}

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

@@ -8,7 +8,7 @@
 <DatePicker.Day
 	bind:ref
 	class={cn(
-		'inline-flex size-(--era-h-md) cursor-default items-center justify-center rounded-(--era-rd-md) text-body text-fg hover:bg-(--era-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 size-(--era-h-control) cursor-default items-center justify-center rounded-(--era-rd-control) text-body text-fg hover:bg-(--era-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-head-cell.svelte

@@ -12,7 +12,7 @@
 <DatePicker.HeadCell
 	bind:ref
 	class={cn(
-		'flex size-(--era-h-md) items-center justify-center text-body font-normal text-muted',
+		'flex size-(--era-h-control) items-center justify-center text-body font-normal text-muted',
 		className
 	)}
 	{...restProps}

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

@@ -7,6 +7,6 @@
 
 <DatePicker.Header
 	bind:ref
-	class={cn('flex h-(--era-h-md) items-center justify-between gap-(--era-gap)', className)}
+	class={cn('flex h-(--era-h-control) items-center justify-between gap-(--era-gap)', className)}
 	{...restProps}
 />

package/dist/ui/date-picker/date-picker-next-button.svelte

@@ -23,7 +23,7 @@
 			{#if children}
 				{@render children()}
 			{:else}
-				<ChevronRight class="size-(--era-h-xs)" />
+				<ChevronRight class="size-(--era-h-icon)" />
 			{/if}
 		</Button>
 	{/snippet}

package/dist/ui/date-picker/date-picker-prev-button.svelte

@@ -23,7 +23,7 @@
 			{#if children}
 				{@render children()}
 			{:else}
-				<ChevronLeft class="size-(--era-h-xs)" />
+				<ChevronLeft class="size-(--era-h-icon)" />
 			{/if}
 		</Button>
 	{/snippet}

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

@@ -8,7 +8,7 @@
 <DatePicker.Segment
 	bind:ref
 	class={cn(
-		'inline-flex h-(--era-h-sm) items-center rounded-(--era-rd-sm) px-[calc(var(--era-sp)/2)] focus:bg-(--era-highlight) focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
+		'inline-flex h-(--era-h-chip) items-center rounded-(--era-rd-chip) px-[calc(var(--era-sp)/2)] focus:bg-(--era-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-(--era-h-sm) shrink-0 items-center justify-center rounded-(--era-rd-sm) text-muted hover:bg-(--era-highlight) hover:text-fg focus:outline-none',
+		'ml-auto flex size-(--era-h-chip) shrink-0 items-center justify-center rounded-(--era-rd-chip) text-muted hover:bg-(--era-highlight) hover:text-fg focus:outline-none',
 		className
 	)}
 	{...restProps}
@@ -22,6 +22,6 @@
 	{#if children}
 		{@render children()}
 	{:else}
-		<CalendarDays class="size-(--era-h-xs)" />
+		<CalendarDays class="size-(--era-h-icon)" />
 	{/if}
 </DatePicker.Trigger>

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

@@ -12,7 +12,7 @@
 <DateRangeField.Segment
 	bind:ref
 	class={cn(
-		'inline-flex h-(--era-h-sm) items-center rounded-(--era-rd-sm) px-[calc(var(--era-sp)/2)] focus:bg-(--era-highlight) focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
+		'inline-flex h-(--era-h-chip) items-center rounded-(--era-rd-chip) px-[calc(var(--era-sp)/2)] focus:bg-(--era-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-content.svelte

@@ -15,7 +15,7 @@
 	bind:ref
 	align="start"
 	class={cn(
-		'z-50 rounded-(--era-rd-lg) bg-(--era-surface-bg-elevated) p-(--era-pad-lg) shadow-(--era-shadow-lg) glass-blur',
+		'z-50 rounded-(--era-rd-bar) bg-(--era-surface-bg-elevated) p-(--era-pad-content) shadow-(--era-shadow-lg) glass-blur',
 		className
 	)}
 	{sideOffset}

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

@@ -12,7 +12,7 @@
 <DateRangePicker.Day
 	bind:ref
 	class={cn(
-		'inline-flex size-(--era-h-md) cursor-default items-center justify-center rounded-(--era-rd-md) text-body text-fg hover:bg-(--era-highlight) focus:outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow) 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 size-(--era-h-control) cursor-default items-center justify-center rounded-(--era-rd-control) text-body text-fg hover:bg-(--era-highlight) focus:outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow) 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-head-cell.svelte

@@ -12,7 +12,7 @@
 <DateRangePicker.HeadCell
 	bind:ref
 	class={cn(
-		'flex size-(--era-h-md) items-center justify-center text-body font-normal text-muted',
+		'flex size-(--era-h-control) items-center justify-center text-body font-normal text-muted',
 		className
 	)}
 	{...restProps}

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

@@ -11,6 +11,6 @@
 
 <DateRangePicker.Header
 	bind:ref
-	class={cn('flex h-(--era-h-md) items-center justify-between gap-(--era-gap)', className)}
+	class={cn('flex h-(--era-h-control) items-center justify-between gap-(--era-gap)', className)}
 	{...restProps}
 />

package/dist/ui/date-range-picker/date-range-picker-next-button.svelte

@@ -23,7 +23,7 @@
 			{#if children}
 				{@render children()}
 			{:else}
-				<ChevronRight class="size-(--era-h-xs)" />
+				<ChevronRight class="size-(--era-h-icon)" />
 			{/if}
 		</Button>
 	{/snippet}

package/dist/ui/date-range-picker/date-range-picker-prev-button.svelte

@@ -23,7 +23,7 @@
 			{#if children}
 				{@render children()}
 			{:else}
-				<ChevronLeft class="size-(--era-h-xs)" />
+				<ChevronLeft class="size-(--era-h-icon)" />
 			{/if}
 		</Button>
 	{/snippet}

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

@@ -12,7 +12,7 @@
 <DateRangePicker.Segment
 	bind:ref
 	class={cn(
-		'inline-flex h-(--era-h-sm) items-center rounded-(--era-rd-sm) px-[calc(var(--era-sp)/2)] focus:bg-(--era-highlight) focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
+		'inline-flex h-(--era-h-chip) items-center rounded-(--era-rd-chip) px-[calc(var(--era-sp)/2)] focus:bg-(--era-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-(--era-h-sm) shrink-0 items-center justify-center rounded-(--era-rd-sm) text-muted hover:bg-(--era-highlight) hover:text-fg focus:outline-none',
+		'ml-auto flex size-(--era-h-chip) shrink-0 items-center justify-center rounded-(--era-rd-chip) text-muted hover:bg-(--era-highlight) hover:text-fg focus:outline-none',
 		className
 	)}
 	{...restProps}
@@ -22,6 +22,6 @@
 	{#if children}
 		{@render children()}
 	{:else}
-		<CalendarDays class="size-(--era-h-xs)" />
+		<CalendarDays class="size-(--era-h-icon)" />
 	{/if}
 </DateRangePicker.Trigger>

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

@@ -31,14 +31,16 @@
 		bind:ref
 		class={cn(
 			'fixed top-1/2 left-1/2 z-50 flex w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col border border-divider bg-(--era-surface-bg) shadow-(--era-shadow-lg) glass-blur',
-			header ? 'rounded-(--era-rd-md)' : 'gap-(--era-gap) rounded-(--era-rd-lg) p-(--era-pad-md)',
+			header
+				? 'rounded-(--era-rd-control)'
+				: 'gap-(--era-gap) rounded-(--era-rd-bar) p-(--era-pad-card)',
 			className
 		)}
 		{...restProps}
 	>
 		{#if header}
 			{@render header()}
-			<div class="flex min-h-0 flex-col gap-(--era-gap) p-(--era-pad-md)">
+			<div class="flex min-h-0 flex-col gap-(--era-gap) p-(--era-pad-card)">
 				{@render children?.()}
 			</div>
 		{:else}

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

@@ -21,7 +21,7 @@
      variant IS the cap law (outset divider, rd-md corners), shared with
      Pane.Handle. What this part adds:
 
-       · the leading side at --era-inset-md: a title has no corner to nest, so
+       · the leading side at --era-inset-control: a title has no corner to nest, so
          it takes the text inset, the same asymmetry the pane and the
          Conversations row document
        · the × is the dismiss family's: an xxs `Dialog.Close` whose tier
@@ -31,7 +31,7 @@
      `header` snippet, so the bar spans the panel edge to edge and the panel's
      radius follows this corner region (rd-md — the same law that sizes the
      pane's own corners). -->
-<Bar size="md" content="xxs" divider class={cn('pl-(--era-inset-md) select-none', className)}>
+<Bar size="md" content="xxs" divider class={cn('pl-(--era-inset-control) select-none', className)}>
 	{@render children?.()}
 	{#if dismissable}
 		<Close icon size="xxs" tone="destructive" aria-label="Close" class="ml-auto">

package/dist/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -14,7 +14,7 @@
 	bind:ref
 	bind:checked
 	class={cn(
-		'flex h-(--era-h-md) cursor-pointer items-center rounded-(--era-item-rd) px-(--era-inset-md) text-body text-fg data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow)',
+		'flex h-(--era-h-control) cursor-pointer items-center rounded-(--era-item-rd) px-(--era-inset-control) text-body text-fg data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow)',
 		className
 	)}
 	{...restProps}

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

@@ -29,7 +29,7 @@
 		// floating menu, like the context menu it should match: full radius, a
 		// gutter of air, shadow doing the separating.
 		class={cn(
-			'z-50 w-max min-w-(--bits-dropdown-menu-anchor-width) overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) p-(--era-panel-inset) shadow-(--era-shadow-lg) glass-blur',
+			'z-50 w-max min-w-(--bits-dropdown-menu-anchor-width) overflow-hidden rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) p-(--era-panel-inset) shadow-(--era-shadow-lg) glass-blur',
 			className
 		)}
 		{sideOffset}

package/dist/ui/dropdown-menu/dropdown-menu-group-heading.svelte

@@ -11,6 +11,9 @@
 
 <DropdownMenu.GroupHeading
 	bind:ref
-	class={cn('flex h-(--era-h-md) items-center px-(--era-inset-md) text-body text-muted', className)}
+	class={cn(
+		'flex h-(--era-h-control) items-center px-(--era-inset-control) text-body text-muted',
+		className
+	)}
 	{...restProps}
 />

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

@@ -13,7 +13,7 @@
 <DropdownMenu.Item
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) cursor-pointer items-center gap-(--era-gap) rounded-(--era-item-rd) px-(--era-inset-md) text-body text-fg data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow)',
+		'flex h-(--era-h-control) cursor-pointer items-center gap-(--era-gap) rounded-(--era-item-rd) px-(--era-inset-control) text-body text-fg data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow)',
 		className
 	)}
 	{...restProps}

package/dist/ui/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -12,7 +12,7 @@
 <DropdownMenu.RadioItem
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) cursor-pointer items-center rounded-(--era-item-rd) px-(--era-inset-md) text-body text-fg data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow)',
+		'flex h-(--era-h-control) cursor-pointer items-center rounded-(--era-item-rd) px-(--era-inset-control) text-body text-fg data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow)',
 		className
 	)}
 	{...restProps}

package/dist/ui/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -15,7 +15,7 @@
 	<DropdownMenu.SubContent
 		bind:ref
 		class={cn(
-			'z-50 w-max overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) p-(--era-panel-inset) shadow-(--era-shadow-lg) glass-blur',
+			'z-50 w-max overflow-hidden rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) p-(--era-panel-inset) shadow-(--era-shadow-lg) glass-blur',
 			className
 		)}
 		{sideOffset}

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

@@ -14,11 +14,11 @@
 <DropdownMenu.SubTrigger
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) cursor-pointer items-center justify-between gap-(--era-xs-inset-sm) rounded-(--era-item-rd) px-(--era-inset-md) text-body text-fg data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow) data-[state=open]:bg-hover',
+		'flex h-(--era-h-control) cursor-pointer items-center justify-between gap-(--era-icon-inset-chip) rounded-(--era-item-rd) px-(--era-inset-control) text-body text-fg data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow) data-[state=open]:bg-hover',
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronRight class="size-(--era-h-xs) text-muted" />
+	<ChevronRight class="size-(--era-h-icon) text-muted" />
 </DropdownMenu.SubTrigger>

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

@@ -14,11 +14,11 @@
 <DropdownMenu.Trigger
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) w-full items-center justify-between gap-(--era-xs-inset-sm) rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-inset-md) text-body text-fg shadow-(--era-shadow) focus:bg-(--era-highlight) focus:outline-none disabled:opacity-50 data-[state=open]:rounded-b-none data-[state=open]:shadow-(--era-shadow-pressed)',
+		'flex h-(--era-h-control) w-full items-center justify-between gap-(--era-icon-inset-chip) rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) px-(--era-inset-control) text-body text-fg shadow-(--era-shadow) focus:bg-(--era-highlight) focus:outline-none disabled:opacity-50 data-[state=open]:rounded-b-none data-[state=open]:shadow-(--era-shadow-pressed)',
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronDown class="size-(--era-h-xs) text-muted" />
+	<ChevronDown class="size-(--era-h-icon) text-muted" />
 </DropdownMenu.Trigger>

package/dist/ui/file-upload/file-upload.svelte

@@ -74,7 +74,7 @@
 	data-dragging={dragging || undefined}
 	data-disabled={disabled || undefined}
 	class={cn(
-		'flex h-(--era-h-md) w-full items-center gap-(--era-gap) rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-inset-md) font-mono text-body leading-none text-fg shadow-(--era-shadow-well) transition-colors duration-(--era-duration) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight) data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[dragging]:bg-(--era-highlight) data-[dragging]:text-bright',
+		'flex h-(--era-h-control) w-full items-center gap-(--era-gap) rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) px-(--era-inset-control) font-mono text-body leading-none text-fg shadow-(--era-shadow-well) transition-colors duration-(--era-duration) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight) data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[dragging]:bg-(--era-highlight) data-[dragging]:text-bright',
 		className
 	)}
 	ondragenter={onDragEnter}
@@ -82,7 +82,7 @@
 	ondragover={onDragOver}
 	ondrop={onDrop}
 >
-	<Upload class="size-(--era-h-xs) shrink-0" />
+	<Upload class="size-(--era-h-icon) shrink-0" />
 	<span class="truncate {files && files.length > 0 ? 'text-bright' : 'text-muted'}">
 		{label()}
 	</span>

package/dist/ui/input/input.svelte

@@ -24,7 +24,7 @@
 		/** Lucide glyph rendered inside the field, left of the text. */
 		icon?: Component<IconProps> | null;
 		/**
-		 * Field tier. `xxs` is badge height — for compact chrome where the field
+		 * Field tier. `pill` is badge height — for compact chrome where the field
 		 * sits level with xxs buttons. See inputVariants.
 		 */
 		size?: 'md' | 'xxs';
@@ -51,10 +51,10 @@
 
 	// The field's glyph is the icon tier OF ITS OWN TIER, which is what puts it on
 	// the same optical footing as the icon button beside it: an md field pairs
-	// with a default button (h-xs glyph), an xxs field with an xxs button
+	// with a default button (h-icon glyph), an xxs field with a pill-tier button
 	// (icon-xxs). One size for both would leave the two glyphs in one bar drawn at
 	// different weights.
-	const glyphClass = $derived(size === 'xxs' ? 'size-(--era-icon-xxs)' : 'size-(--era-h-xs)');
+	const glyphClass = $derived(size === 'xxs' ? 'size-(--era-glyph-pill)' : 'size-(--era-h-icon)');
 </script>
 
 {#if icon}

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

@@ -6,7 +6,7 @@ type $$ComponentProps = Omit<HTMLInputAttributes, 'size'> & {
     /** Lucide glyph rendered inside the field, left of the text. */
     icon?: Component<IconProps> | null;
     /**
-     * Field tier. `xxs` is badge height — for compact chrome where the field
+     * Field tier. `pill` is badge height — for compact chrome where the field
      * sits level with xxs buttons. See inputVariants.
      */
     size?: 'md' | 'xxs';

package/dist/ui/input/textarea.svelte

@@ -21,7 +21,7 @@
 		inputVariants({ height: 'auto' }),
 		// It grows, so the vertical inset has to be stated: the tier height is what
 		// centres one line of text in every other field, and there isn't one here.
-		'resize-y py-(--era-inset-md)',
+		'resize-y py-(--era-inset-control)',
 		className
 	)}
 	{...restProps}></textarea>