@signal9/era-ui 10.0.0 → 11.0.0

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

@@ -493,7 +493,7 @@
 		// 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).
-		'group/pane absolute isolate flex flex-col rounded-(--era-rd-control) border border-divider bg-(--era-surface-bg-elevated) shadow-(--era-shadow-lg) glass-blur [contain:layout_style]',
+		'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-list.svelte

@@ -76,7 +76,7 @@
 <Tabs.List
 	bind:ref
 	class={cn(
-		'scrollbar-none flex min-w-0 touch-pan-x items-center gap-(--era-gap) overflow-x-auto',
+		'scrollbar-none flex min-w-0 touch-pan-x items-center gap-gutter overflow-x-auto',
 		className
 	)}
 	{...restProps}

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

@@ -15,6 +15,6 @@
      Pane.Content. -->
 <Tabs.Content
 	bind:ref
-	class={cn('min-h-0 flex-1 overflow-auto overscroll-contain p-(--era-pad-card)', className)}
+	class={cn('min-h-0 flex-1 overflow-auto overscroll-contain p-card', className)}
 	{...restProps}
 />

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-(--era-h-pill) cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-pill) px-(--era-pill-px) text-body leading-none text-muted outline-none select-none [text-box:normal] hover:text-fg focus-visible:bg-(--era-highlight) data-[state=active]:bg-hover data-[state=active]:text-bright',
+		'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',
 		className
 	)}
 	{...restProps}

package/dist/ui/pane/pane.svelte

@@ -84,7 +84,7 @@
 	     track when `center` is present and in the ml-auto cluster when it isn't —
 	     one close button, correct in both geometries. -->
 	<Handle {center} trail={onClose ? closeTrail : undefined}>
-		{#if icon}{@const Icon = icon}<Icon class="size-(--era-h-icon) shrink-0 text-muted" />{/if}
+		{#if icon}{@const Icon = icon}<Icon class="size-icon shrink-0 text-muted" />{/if}
 		{#if title}<span class="text-body text-bright">{title}</span>{/if}
 		{@render header?.()}
 	</Handle>

package/dist/ui/pin-input/pin-input-cell.svelte

@@ -14,7 +14,7 @@
 	bind:ref
 	{cell}
 	class={cn(
-		'relative flex h-(--era-h-control) min-w-(--era-h-control) items-center justify-center border-y border-r border-divider bg-(--era-surface-bg-elevated) text-body transition-colors duration-(--era-duration) outline-none first:rounded-l-(--era-rd-control) first:border-l last:rounded-r-(--era-rd-control) data-[active]:bg-(--era-highlight) [&:has(+_:not([data-pin-input-cell]))]:rounded-r-(--era-rd-control)',
+		'relative flex h-control min-w-control items-center justify-center border-y border-r border-divider bg-elevated text-body transition-colors duration-base outline-none first:rounded-l-control first:border-l last:rounded-r-control data-[active]:bg-highlight [&:has(+_:not([data-pin-input-cell]))]:rounded-r-control',
 		className
 	)}
 	{...restProps}

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

@@ -22,7 +22,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-popover-anchor-width) overflow-hidden rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) p-(--era-pad-card) shadow-(--era-shadow-lg) glass-blur',
+		'z-50 w-max min-w-(--bits-popover-anchor-width) overflow-hidden rounded-control bg-elevated p-card shadow-lg glass-blur',
 		className
 	)}
 	{sideOffset}

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

@@ -30,10 +30,7 @@
 			{variant}
 			{icon}
 			{active}
-			class={cn(
-				'data-[state=open]:rounded-b-none data-[state=open]:shadow-(--era-shadow-pressed)',
-				className
-			)}
+			class={cn('data-[state=open]:rounded-b-none data-[state=open]:shadow-pressed', className)}
 		>
 			{@render children?.()}
 		</Button>

package/dist/ui/progress/progress.svelte

@@ -20,14 +20,14 @@
 	{min}
 	{max}
 	class={cn(
-		'h-(--era-sp) w-full overflow-hidden rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) shadow-(--era-shadow-well)',
+		'h-(--era-sp) w-full overflow-hidden rounded-control bg-elevated shadow-well',
 		className
 	)}
 	{...restProps}
 >
 	{#if value != null}
 		<div
-			class="h-full w-full bg-fg transition-transform duration-(--era-duration) ease-(--era-ease)"
+			class="h-full w-full bg-fg transition-transform duration-base ease-base"
 			style="transform: translateX(-{100 - percentage}%)"
 		></div>
 	{:else}

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

@@ -8,12 +8,12 @@
 <RadioGroup.Item
 	bind:ref
 	class={cn(
-		'group/radio flex size-(--era-h-icon) shrink-0 era-interactive cursor-pointer items-center justify-center rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) shadow-(--era-shadow-well) hover:bg-(--era-highlight)',
+		'group/radio flex size-icon shrink-0 era-interactive cursor-pointer items-center justify-center rounded-control bg-elevated shadow-well hover:bg-highlight',
 		className
 	)}
 	{...restProps}
 >
 	<span
-		class="block size-1/2 rounded-(--era-rd-control) transition-colors duration-(--era-duration) group-data-[state=checked]/radio:bg-fg"
+		class="block size-1/2 rounded-control transition-colors duration-base group-data-[state=checked]/radio:bg-fg"
 	></span>
 </RadioGroup.Item>

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

@@ -13,6 +13,6 @@
 <RadioGroup.Root
 	bind:ref
 	bind:value
-	class={cn('flex flex-col gap-(--era-gap) data-[orientation=horizontal]:flex-row', className)}
+	class={cn('flex flex-col gap-gutter data-[orientation=horizontal]:flex-row', className)}
 	{...restProps}
 />

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

@@ -10,7 +10,7 @@
 <RatingGroup.Item
 	bind:ref
 	class={cn(
-		'inline-flex size-(--era-h-chip) items-center justify-center text-muted hover:text-bright focus:outline-none data-[state=checked]:text-primary',
+		'inline-flex size-chip items-center justify-center text-muted hover:text-bright focus:outline-none data-[state=checked]:text-primary',
 		className
 	)}
 	{...restProps}

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

@@ -15,6 +15,6 @@
 <RatingGroup.Root
 	bind:ref
 	bind:value
-	class={cn('inline-flex items-center gap-(--era-gap)', className)}
+	class={cn('inline-flex items-center gap-gutter', className)}
 	{...restProps}
 />

package/dist/ui/scroll-area/scroll-area-scrollbar.svelte

@@ -12,7 +12,7 @@
 <ScrollArea.Scrollbar
 	bind:ref
 	class={cn(
-		'flex touch-none p-px transition-opacity duration-(--era-duration) select-none data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:flex-row data-[orientation=vertical]:w-1.5 data-[orientation=vertical]:flex-col data-[state=hidden]:opacity-0 data-[state=visible]:opacity-100',
+		'flex touch-none p-px transition-opacity duration-base select-none data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:flex-row data-[orientation=vertical]:w-1.5 data-[orientation=vertical]:flex-col data-[state=hidden]:opacity-0 data-[state=visible]:opacity-100',
 		className
 	)}
 	{...restProps}

package/dist/ui/scroll-area/scroll-area-thumb.svelte

@@ -7,6 +7,6 @@
 
 <ScrollArea.Thumb
 	bind:ref
-	class={cn('rounded-(--era-rd-control) bg-divider hover:bg-muted', className)}
+	class={cn('rounded-control bg-divider hover:bg-muted', className)}
 	{...restProps}
 />

package/dist/ui/scroll-area/scroll-area.svelte

@@ -13,6 +13,6 @@
 <ScrollArea.Root
 	bind:ref
 	{type}
-	class={cn('relative overflow-hidden rounded-(--era-rd-bar)', className)}
+	class={cn('relative overflow-hidden rounded-bar', className)}
 	{...restProps}
 />

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

@@ -14,21 +14,22 @@
 <Select.Content
 	bind:ref
 	align="start"
-	// p-(--era-panel-inset), not p-(--era-panel-inset): the inset is SURFACE-owned and resolves
-	// to 0 on flat, so a menu there sat its rows flush against its own edges —
-	// the highlight ran edge to edge and the panel read as a list with no frame.
-	// The gutter is --era-gap, the same distance that separates the rows from
+	// p-gutter, not p-menu, was the fix considered first: the inset is
+	// SURFACE-owned and resolves to 0 on flat, so a menu there sat its rows flush
+	// against its own edges — the highlight ran edge to edge and the panel read
+	// as a list with no frame.
+	// That gutter would be --era-gap, the same distance that separates rows from
 	// each other, so a row sits an even gap from every edge (the pattern the
 	// conversations rail already documents). It is >= the panel inset at every
 	// density, so glass and bevel keep the frame protection the inset exists
 	// for.
-	// p-(--era-panel-inset), SURFACE-owned on purpose: 0 on flat — rows run the
+	// p-menu, SURFACE-owned on purpose: 0 on flat — rows run the
 	// panel's full width, flush, and the first row sits directly under the
 	// anchor bar (the reference terminal look) — while glass and bevel keep the
 	// 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 min-w-(--bits-select-anchor-width) overflow-hidden rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) p-(--era-panel-inset) shadow-(--era-shadow-lg) glass-blur data-[side=bottom]:rounded-t-none data-[side=top]:rounded-b-none',
+		'z-50 w-max min-w-(--bits-select-anchor-width) overflow-hidden rounded-control bg-elevated p-menu shadow-lg glass-blur data-[side=bottom]:rounded-t-none data-[side=top]:rounded-b-none',
 		className
 	)}
 	{sideOffset}

package/dist/ui/select/select-group-heading.svelte

@@ -12,10 +12,7 @@
 
 <Select.GroupHeading
 	bind:ref
-	class={cn(
-		'flex h-(--era-h-control) items-center px-(--era-inset-control) text-body text-muted',
-		className
-	)}
+	class={cn('flex h-control items-center px-inset-control text-body text-muted', className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -10,7 +10,7 @@
 <Select.Item
 	bind:ref
 	class={cn(
-		'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-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow)',
+		'flex h-control cursor-pointer items-center gap-gutter rounded-menu-item px-inset-control text-body text-fg data-[highlighted]:bg-highlight data-[highlighted]:shadow-highlight',
 		className
 	)}
 	{...restProps}

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

@@ -14,11 +14,11 @@
 <Select.Trigger
 	bind:ref
 	class={cn(
-		'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 era-text-trim text-fg shadow-(--era-shadow) hover:bg-(--era-highlight) 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-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',
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronDown class="size-(--era-h-icon) text-muted" />
+	<ChevronDown class="size-icon text-muted" />
 </Select.Trigger>

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

@@ -51,7 +51,7 @@
 				the horizontal rhythm matches the vertical one.
 			-->
 			<div
-				class="-ml-(--era-inset-pill) flex min-w-0 flex-wrap items-center gap-(--era-pill-inset-control)"
+				class="-ml-(--era-inset-pill) flex min-w-0 flex-wrap items-center gap-pill-inset-control"
 			>
 				{#each sel.selected as item (item.value)}
 					<Chip

package/dist/ui/separator/separator.svelte

@@ -19,7 +19,7 @@
 	const variantClass = $derived(
 		variant === 'slant'
 			? 'mx-[0.45em] inline-block h-[0.9em] w-[2px] shrink-0 translate-y-[0.08em] rotate-[18deg] rounded-full bg-muted/80 align-middle'
-			: 'bg-3 data-[orientation=horizontal]:mx-(--era-gap) data-[orientation=horizontal]:h-px data-[orientation=vertical]:my-(--era-gap) data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch'
+			: 'bg-3 data-[orientation=horizontal]:mx-gutter data-[orientation=horizontal]:h-px data-[orientation=vertical]:my-gutter data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch'
 	);
 </script>
 

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

@@ -7,7 +7,7 @@
 	// border-divider on every side: the pane's hairline-edge law — on flat,
 	// shadow-lg collapses to none and the sheet's edge was a bare tone step.
 	export const sheetVariants = tv({
-		base: 'fixed z-50 flex flex-col border border-divider bg-(--era-surface-bg) shadow-(--era-shadow-lg) glass-blur',
+		base: 'fixed z-50 flex flex-col border border-divider bg-well shadow-lg glass-blur',
 		variants: {
 			// The two axes meet at the corners: the SIDE picks which corners are
 			// detached from the screen edge, the HEADER picks their radius. Stated
@@ -28,7 +28,7 @@
 			 */
 			header: {
 				true: '[--sheet-rd:var(--era-rd-control)]',
-				false: '[--sheet-rd:var(--era-rd-bar)] gap-(--era-gap) overflow-y-auto p-(--era-pad-card)'
+				false: '[--sheet-rd:var(--era-rd-bar)] gap-gutter overflow-y-auto p-card'
 			}
 		},
 		defaultVariants: { side: 'bottom', header: false }
@@ -64,7 +64,7 @@
 	>
 		{#if header}
 			{@render header()}
-			<div class="flex min-h-0 flex-1 flex-col gap-(--era-gap) overflow-y-auto p-(--era-pad-card)">
+			<div class="flex min-h-0 flex-1 flex-col gap-gutter overflow-y-auto p-card">
 				{@render children?.()}
 			</div>
 		{:else}

package/dist/ui/sheet/sheet-content.svelte.d.ts

@@ -15,9 +15,9 @@ export declare const sheetVariants: import("tailwind-variants").TVReturnType<{
      */
     header: {
         true: "[--sheet-rd:var(--era-rd-control)]";
-        false: "[--sheet-rd:var(--era-rd-bar)] gap-(--era-gap) overflow-y-auto p-(--era-pad-card)";
+        false: "[--sheet-rd:var(--era-rd-bar)] gap-gutter overflow-y-auto p-card";
     };
-}, undefined, "fixed z-50 flex flex-col border border-divider bg-(--era-surface-bg) shadow-(--era-shadow-lg) glass-blur", {
+}, undefined, "fixed z-50 flex flex-col border border-divider bg-well shadow-lg glass-blur", {
     side: {
         top: "inset-x-0 top-0 max-h-[85dvh] rounded-b-(--sheet-rd)";
         bottom: "inset-x-0 bottom-0 max-h-[85dvh] rounded-t-(--sheet-rd)";
@@ -33,7 +33,7 @@ export declare const sheetVariants: import("tailwind-variants").TVReturnType<{
      */
     header: {
         true: "[--sheet-rd:var(--era-rd-control)]";
-        false: "[--sheet-rd:var(--era-rd-bar)] gap-(--era-gap) overflow-y-auto p-(--era-pad-card)";
+        false: "[--sheet-rd:var(--era-rd-bar)] gap-gutter overflow-y-auto p-card";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     side: {
@@ -51,7 +51,7 @@ export declare const sheetVariants: import("tailwind-variants").TVReturnType<{
      */
     header: {
         true: "[--sheet-rd:var(--era-rd-control)]";
-        false: "[--sheet-rd:var(--era-rd-bar)] gap-(--era-gap) overflow-y-auto p-(--era-pad-card)";
+        false: "[--sheet-rd:var(--era-rd-bar)] gap-gutter overflow-y-auto p-card";
     };
 }, undefined>>;
 import type { Snippet } from 'svelte';

package/dist/ui/skeleton/skeleton.svelte

@@ -2,12 +2,12 @@
 	import { cn, tv } from '../../utils/index.js';
 
 	export const skeletonVariants = tv({
-		base: 'animate-[skeleton-pulse_2s_ease-in-out_infinite] bg-(--era-surface-bg-elevated)',
+		base: 'animate-[skeleton-pulse_2s_ease-in-out_infinite] bg-elevated',
 		variants: {
 			variant: {
-				line: 'h-(--era-text) w-full rounded-(--era-rd-control)',
-				circle: 'size-(--era-h-bar) rounded-full',
-				block: 'h-24 w-full rounded-(--era-rd-control)'
+				line: 'h-(--era-text) w-full rounded-control',
+				circle: 'size-bar rounded-full',
+				block: 'h-24 w-full rounded-control'
 			}
 		},
 		defaultVariants: { variant: 'line' }

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

@@ -1,20 +1,20 @@
 export declare const skeletonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        line: "h-(--era-text) w-full rounded-(--era-rd-control)";
-        circle: "size-(--era-h-bar) rounded-full";
-        block: "h-24 w-full rounded-(--era-rd-control)";
+        line: "h-(--era-text) w-full rounded-control";
+        circle: "size-bar rounded-full";
+        block: "h-24 w-full rounded-control";
     };
-}, undefined, "animate-[skeleton-pulse_2s_ease-in-out_infinite] bg-(--era-surface-bg-elevated)", {
+}, undefined, "animate-[skeleton-pulse_2s_ease-in-out_infinite] bg-elevated", {
     variant: {
-        line: "h-(--era-text) w-full rounded-(--era-rd-control)";
-        circle: "size-(--era-h-bar) rounded-full";
-        block: "h-24 w-full rounded-(--era-rd-control)";
+        line: "h-(--era-text) w-full rounded-control";
+        circle: "size-bar rounded-full";
+        block: "h-24 w-full rounded-control";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        line: "h-(--era-text) w-full rounded-(--era-rd-control)";
-        circle: "size-(--era-h-bar) rounded-full";
-        block: "h-24 w-full rounded-(--era-rd-control)";
+        line: "h-(--era-text) w-full rounded-control";
+        circle: "size-bar rounded-full";
+        block: "h-24 w-full rounded-control";
     };
 }, undefined>>;
 import type { HTMLAttributes } from 'svelte/elements';

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

@@ -25,7 +25,7 @@
 
 <span
 	class={cn(
-		'relative h-[calc(var(--era-sp)/2)] w-full grow cursor-pointer overflow-hidden rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) shadow-(--era-shadow-well)',
+		'relative h-[calc(var(--era-sp)/2)] w-full grow cursor-pointer overflow-hidden rounded-control bg-elevated shadow-well',
 		trackClass
 	)}
 >

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

@@ -8,7 +8,7 @@
 <Slider.Thumb
 	bind:ref
 	class={cn(
-		"relative block size-(--era-h-icon) cursor-pointer rounded-(--era-rd-icon) bg-fg shadow-(--era-shadow) transition-transform duration-(--era-duration) 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 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]",
 		className
 	)}
 	{...restProps}

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

@@ -8,7 +8,7 @@
 <Slider.Tick
 	bind:ref
 	class={cn(
-		'h-[calc(var(--era-sp)/2)] w-px bg-divider-faded data-[bounded]:bg-(--era-surface-bg-elevated)',
+		'h-[calc(var(--era-sp)/2)] w-px bg-divider-faded data-[bounded]:bg-elevated',
 		className
 	)}
 	{...restProps}

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

@@ -17,7 +17,7 @@
 <Collapsible.Content bind:ref class="era-collapse" {...restProps}>
 	<div
 		class={cn(
-			'mt-(--era-gap) mb-(--era-gap) flex min-w-0 flex-col gap-(--era-pad-panel) rounded-(--era-rd-control) bg-(--era-surface-bg) p-(--era-pad-panel) shadow-(--era-shadow-well)',
+			'mt-gutter mb-gutter flex min-w-0 flex-col gap-panel rounded-control bg-well p-panel shadow-well',
 			className
 		)}
 	>

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

@@ -15,7 +15,7 @@
 	} = $props();
 </script>
 
-<div class={cn('flex min-w-0 flex-col gap-(--era-gap)', className)} {...restProps}>
+<div class={cn('flex min-w-0 flex-col gap-gutter', className)} {...restProps}>
 	{#if label}
 		<span class="text-[0.625rem] leading-none tracking-[0.15em] text-muted uppercase">{label}</span>
 	{/if}

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

@@ -26,30 +26,30 @@
 <Collapsible.Trigger
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-control) w-full min-w-0 era-interactive cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-control) px-(--era-inset-control) text-body era-text-trim text-muted transition-colors duration-(--era-duration) ease-(--era-ease) hover:text-fg',
+		'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',
 		className
 	)}
 	{...restProps}
 >
 	{#if step.status === 'running'}
-		<LoaderCircle class="size-(--era-h-icon) shrink-0 animate-spin" aria-hidden="true" />
+		<LoaderCircle class="size-icon shrink-0 animate-spin" aria-hidden="true" />
 	{:else if step.status === 'done'}
-		<CircleCheck class="size-(--era-h-icon) shrink-0 text-success" aria-hidden="true" />
+		<CircleCheck class="size-icon shrink-0 text-success" aria-hidden="true" />
 	{:else if step.status === 'error'}
-		<CircleX class="size-(--era-h-icon) shrink-0 text-destructive" aria-hidden="true" />
+		<CircleX class="size-icon shrink-0 text-destructive" aria-hidden="true" />
 	{:else}
-		<CircleDashed class="size-(--era-h-icon) shrink-0" aria-hidden="true" />
+		<CircleDashed class="size-icon shrink-0" aria-hidden="true" />
 	{/if}
 	<span
 		class={cn(
-			'flex min-w-0 flex-1 items-center gap-(--era-gap) truncate text-left',
+			'flex min-w-0 flex-1 items-center gap-gutter truncate text-left',
 			step.status === 'running' && 'era-shimmer'
 		)}
 	>
 		{@render children?.()}
 	</span>
 	<ChevronDown
-		class="size-(--era-h-icon) shrink-0 transition-transform duration-(--era-duration) ease-(--era-ease) group-data-[state=open]/step:rotate-180"
+		class="size-icon shrink-0 transition-transform duration-base ease-base group-data-[state=open]/step:rotate-180"
 		aria-hidden="true"
 	/>
 </Collapsible.Trigger>

package/dist/ui/switch/switch.svelte

@@ -27,7 +27,7 @@
 		// ORIGIN instead (translate-x = xs-inset-sm) silently adds the border to
 		// the left gap and subtracts it from the right, so the thumb rests 1px
 		// too far right in both states and the two ends differ by 2px.
-		'inline-flex h-(--era-h-chip) w-[calc(var(--era-h-chip)+var(--era-h-icon))] shrink-0 era-interactive cursor-pointer items-center justify-center rounded-(--era-rd-chip) border border-divider bg-(--era-surface-bg-elevated) shadow-(--era-shadow-well) hover:bg-(--era-highlight) data-[state=checked]:bg-fg',
+		'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-elevated shadow-well hover:bg-highlight data-[state=checked]:bg-fg',
 		className
 	)}
 	{...restProps}
@@ -38,6 +38,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-(--era-h-icon) -translate-x-[calc(var(--era-h-icon)/2)] rounded-(--era-rd-icon) bg-fg transition-transform duration-(--era-duration) ease-(--era-ease) data-[state=checked]:translate-x-[calc(var(--era-h-icon)/2)] data-[state=checked]:bg-2"
+		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"
 	/>
 </Switch.Root>

package/dist/ui/table/table-cell.svelte

@@ -17,7 +17,7 @@
 <td
 	bind:this={ref}
 	class={cn(
-		'h-(--era-h-control) px-(--era-inset-control) text-left align-middle [table[data-variant=cells]_&]:rounded-(--era-rd-chip) [table[data-variant=cells]_&]:bg-(--era-surface-bg-elevated) [table[data-variant=cells]_&]:px-(--era-inset-chip) [table[data-variant=cells]_&]:shadow-(--era-shadow)',
+		'h-control px-inset-control text-left align-middle [table[data-variant=cells]_&]:rounded-chip [table[data-variant=cells]_&]:bg-elevated [table[data-variant=cells]_&]:px-inset-chip [table[data-variant=cells]_&]:shadow-sm',
 		className
 	)}
 	{...restProps}

package/dist/ui/table/table-head-cell.svelte

@@ -17,7 +17,7 @@
 <th
 	bind:this={ref}
 	class={cn(
-		'h-(--era-h-control) px-(--era-inset-control) text-left align-middle font-medium text-muted [table[data-variant=cells]_&]:rounded-(--era-rd-chip) [table[data-variant=cells]_&]:bg-fill [table[data-variant=cells]_&]:px-(--era-inset-chip) [table[data-variant=cells]_&]:text-bright [table[data-variant=cells]_&]:shadow-(--era-shadow)',
+		'h-control px-inset-control text-left align-middle font-medium text-muted [table[data-variant=cells]_&]:rounded-chip [table[data-variant=cells]_&]:bg-fill [table[data-variant=cells]_&]:px-inset-chip [table[data-variant=cells]_&]:text-bright [table[data-variant=cells]_&]:shadow-sm',
 		className
 	)}
 	{...restProps}

package/dist/ui/table/table-row.svelte

@@ -17,7 +17,7 @@
 <tr
 	bind:this={ref}
 	class={cn(
-		'transition-colors duration-(--era-duration) [table:not([data-variant=cells])_&]:hover:bg-(--era-highlight) [table:not([data-variant=cells])_&>td]:border-b [table:not([data-variant=cells])_&>td]:border-[color-mix(in_oklch,var(--era-divider-color)_40%,transparent)] [table:not([data-variant=cells])_&>th]:border-b [table:not([data-variant=cells])_&>th]:border-[color-mix(in_oklch,var(--era-divider-color)_40%,transparent)]',
+		'transition-colors duration-base [table:not([data-variant=cells])_&]:hover:bg-highlight [table:not([data-variant=cells])_&>td]:border-b [table:not([data-variant=cells])_&>td]:border-[color-mix(in_oklch,var(--era-divider-color)_40%,transparent)] [table:not([data-variant=cells])_&>th]:border-b [table:not([data-variant=cells])_&>th]:border-[color-mix(in_oklch,var(--era-divider-color)_40%,transparent)]',
 		className
 	)}
 	{...restProps}

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

@@ -8,7 +8,7 @@
 <TimeField.Segment
 	bind:ref
 	class={cn(
-		'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',
+		'inline-flex h-chip items-center 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',
 		className
 	)}
 	{...restProps}

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

@@ -12,7 +12,7 @@
 <TimeRangeField.Segment
 	bind:ref
 	class={cn(
-		'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',
+		'inline-flex h-chip items-center 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',
 		className
 	)}
 	{...restProps}

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

@@ -10,7 +10,7 @@
 <ToggleGroup.Item
 	bind:ref
 	class={cn(
-		'inline-flex h-(--era-h-control) min-w-(--era-h-control) items-center justify-center rounded-(--era-rd-control) px-(--era-inset-control) text-body text-fg shadow-(--era-shadow) hover:bg-(--era-highlight) hover:shadow-(--era-highlight-shadow) focus:outline-none active:shadow-(--era-shadow-pressed) disabled:opacity-50 data-[state=on]:bg-fill data-[state=on]:text-bright data-[state=on]:shadow-(--era-shadow-pressed)',
+		'inline-flex h-control min-w-control items-center justify-center rounded-control px-inset-control text-body text-fg shadow-sm hover:bg-highlight hover:shadow-highlight focus:outline-none active:shadow-pressed disabled:opacity-50 data-[state=on]:bg-fill data-[state=on]:text-bright data-[state=on]:shadow-pressed',
 		className
 	)}
 	{...restProps}

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

@@ -12,7 +12,7 @@
 
 <ToggleGroup.Root
 	bind:ref
-	class={cn('inline-flex items-center gap-(--era-gap)', className)}
+	class={cn('inline-flex items-center gap-gutter', className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -15,7 +15,7 @@
 	<Tooltip.Content
 		bind:ref
 		class={cn(
-			'z-50 inline-flex h-(--era-h-pill) items-center gap-(--era-gap) rounded-(--era-rd-pill) bg-(--era-surface-bg-elevated) px-(--era-inset-pill) text-body leading-none whitespace-nowrap text-fg shadow-(--era-shadow-lg) glass-blur has-[svg]:gap-(--era-inset-pill)',
+			'z-50 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',
 			className
 		)}
 		{sideOffset}