@signal9/era-ui 10.0.0 → 11.0.0

package/dist/ui/aspect-ratio/aspect-ratio.svelte

@@ -10,10 +10,6 @@
 	}: PartProps<AspectRatio.RootProps> = $props();
 </script>
 
-<AspectRatio.Root
-	bind:ref
-	class={cn('overflow-hidden rounded-(--era-rd-control)', className)}
-	{...restProps}
->
+<AspectRatio.Root bind:ref class={cn('overflow-hidden rounded-control', className)} {...restProps}>
 	{@render children?.()}
 </AspectRatio.Root>

package/dist/ui/avatar/avatar-fallback.svelte

@@ -13,7 +13,7 @@
 <Avatar.Fallback
 	bind:ref
 	class={cn(
-		'inline-flex size-full items-center justify-center bg-(--era-surface-bg-elevated) text-body text-muted',
+		'inline-flex size-full items-center justify-center bg-elevated text-body text-muted',
 		className
 	)}
 	{...restProps}

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

@@ -13,7 +13,7 @@
 <Avatar.Root
 	bind:ref
 	class={cn(
-		'inline-flex size-(--era-h-control) shrink-0 items-center justify-center overflow-hidden rounded-full bg-(--era-surface-bg-elevated) text-fg shadow-(--era-shadow)',
+		'inline-flex size-control shrink-0 items-center justify-center overflow-hidden rounded-full bg-elevated text-fg shadow-sm',
 		className
 	)}
 	{...restProps}

package/dist/ui/badge/badge.svelte

@@ -19,7 +19,7 @@
 		// that cost. A badge holding an icon must stay flex to lay the icon out
 		// beside the text, and keeps the general trim — its line-height:1 plus
 		// flex centring, which is the best available when the text is anonymous.
-		base: 'inline-flex h-(--era-h-pill) min-w-(--era-h-pill) shrink-0 items-center justify-center gap-(--era-gap) rounded-(--era-rd-pill) px-(--era-pill-px) font-mono text-body leading-none whitespace-nowrap has-[svg]:gap-(--era-inset-pill) era-text-trim not-has-[svg]:era-token-ink',
+		base: 'inline-flex h-pill min-w-pill shrink-0 items-center justify-center gap-gutter rounded-pill px-pill font-mono text-body leading-none whitespace-nowrap has-[svg]:gap-inset-pill era-text-trim not-has-[svg]:era-token-ink',
 		variants: {
 			tone: {
 				default: 'bg-fill text-fg',

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

@@ -6,7 +6,7 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         success: "bg-success text-success-fg";
         warning: "bg-warning text-warning-fg";
     };
-}, undefined, "inline-flex h-(--era-h-pill) min-w-(--era-h-pill) shrink-0 items-center justify-center gap-(--era-gap) rounded-(--era-rd-pill) px-(--era-pill-px) font-mono text-body leading-none whitespace-nowrap has-[svg]:gap-(--era-inset-pill) era-text-trim not-has-[svg]:era-token-ink", {
+}, undefined, "inline-flex h-pill min-w-pill shrink-0 items-center justify-center gap-gutter rounded-pill px-pill font-mono text-body leading-none whitespace-nowrap has-[svg]:gap-inset-pill era-text-trim not-has-[svg]:era-token-ink", {
     tone: {
         default: "bg-fill text-fg";
         accent: "bg-primary text-primary-fg";

package/dist/ui/bar/bar.svelte

@@ -10,12 +10,12 @@
 	// Radius stays concentric to the height; gap/px are sp/2 (xs-inset-sm),
 	// the even gap for one-tier-smaller content at every size.
 	export const barVariants = tv({
-		base: 'flex items-center era-text-trim',
+		base: 'flex items-center leading-none',
 		variants: {
 			size: {
-				chip: 'h-(--era-h-chip) rounded-(--era-rd-chip)',
-				control: 'h-(--era-h-control) rounded-(--era-rd-control)',
-				bar: 'h-(--era-h-bar) rounded-(--era-rd-bar)'
+				chip: 'h-chip rounded-chip',
+				control: 'h-control rounded-control',
+				bar: 'h-bar rounded-bar'
 			},
 			/**
 			 * The tier of the CONTROLS inside, because that is what the bar's own
@@ -32,7 +32,7 @@
 			 *   per size and comes from the compounds below.
 			 */
 			content: {
-				tier: 'gap-(--era-icon-inset-chip) px-(--era-icon-inset-chip)',
+				tier: 'gap-icon-inset-chip px-icon-inset-chip',
 				pill: ''
 			},
 			/**
@@ -54,7 +54,7 @@
 			 *   both. Collapses to flat in square mode like every radius.
 			 */
 			divider: {
-				true: 'shrink-0 rounded-t-none rounded-b-(--era-rd-control) [box-shadow:0_1px_0_var(--color-divider-faded)]',
+				true: 'shrink-0 rounded-t-none rounded-b-control [box-shadow:0_1px_0_var(--color-divider-faded)]',
 				false: ''
 			}
 		},
@@ -63,7 +63,7 @@
 			{
 				size: 'control',
 				content: 'pill',
-				class: 'gap-(--era-pill-inset-control) px-(--era-pill-inset-control)'
+				class: 'gap-pill-inset-control px-pill-inset-control'
 			},
 			// chip ⊃ pill — its own token, not the text inset it used to borrow. The two
 			// were the same number only while type was 14px at every density; dense's
@@ -72,7 +72,7 @@
 			{
 				size: 'chip',
 				content: 'pill',
-				class: 'gap-(--era-pill-inset-chip) px-(--era-pill-inset-chip)'
+				class: 'gap-pill-inset-chip px-pill-inset-chip'
 			}
 		],
 		defaultVariants: { size: 'bar', content: 'tier', divider: false }

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

@@ -1,8 +1,8 @@
 export declare const barVariants: import("tailwind-variants").TVReturnType<{
     size: {
-        chip: "h-(--era-h-chip) rounded-(--era-rd-chip)";
-        control: "h-(--era-h-control) rounded-(--era-rd-control)";
-        bar: "h-(--era-h-bar) rounded-(--era-rd-bar)";
+        chip: "h-chip rounded-chip";
+        control: "h-control rounded-control";
+        bar: "h-bar rounded-bar";
     };
     /**
      * The tier of the CONTROLS inside, because that is what the bar's own
@@ -19,7 +19,7 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      *   per size and comes from the compounds below.
      */
     content: {
-        tier: "gap-(--era-icon-inset-chip) px-(--era-icon-inset-chip)";
+        tier: "gap-icon-inset-chip px-icon-inset-chip";
         pill: "";
     };
     /**
@@ -41,14 +41,14 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      *   both. Collapses to flat in square mode like every radius.
      */
     divider: {
-        true: "shrink-0 rounded-t-none rounded-b-(--era-rd-control) [box-shadow:0_1px_0_var(--color-divider-faded)]";
+        true: "shrink-0 rounded-t-none rounded-b-control [box-shadow:0_1px_0_var(--color-divider-faded)]";
         false: "";
     };
-}, undefined, "flex items-center era-text-trim", {
+}, undefined, "flex items-center leading-none", {
     size: {
-        chip: "h-(--era-h-chip) rounded-(--era-rd-chip)";
-        control: "h-(--era-h-control) rounded-(--era-rd-control)";
-        bar: "h-(--era-h-bar) rounded-(--era-rd-bar)";
+        chip: "h-chip rounded-chip";
+        control: "h-control rounded-control";
+        bar: "h-bar rounded-bar";
     };
     /**
      * The tier of the CONTROLS inside, because that is what the bar's own
@@ -65,7 +65,7 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      *   per size and comes from the compounds below.
      */
     content: {
-        tier: "gap-(--era-icon-inset-chip) px-(--era-icon-inset-chip)";
+        tier: "gap-icon-inset-chip px-icon-inset-chip";
         pill: "";
     };
     /**
@@ -87,14 +87,14 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      *   both. Collapses to flat in square mode like every radius.
      */
     divider: {
-        true: "shrink-0 rounded-t-none rounded-b-(--era-rd-control) [box-shadow:0_1px_0_var(--color-divider-faded)]";
+        true: "shrink-0 rounded-t-none rounded-b-control [box-shadow:0_1px_0_var(--color-divider-faded)]";
         false: "";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        chip: "h-(--era-h-chip) rounded-(--era-rd-chip)";
-        control: "h-(--era-h-control) rounded-(--era-rd-control)";
-        bar: "h-(--era-h-bar) rounded-(--era-rd-bar)";
+        chip: "h-chip rounded-chip";
+        control: "h-control rounded-control";
+        bar: "h-bar rounded-bar";
     };
     /**
      * The tier of the CONTROLS inside, because that is what the bar's own
@@ -111,7 +111,7 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      *   per size and comes from the compounds below.
      */
     content: {
-        tier: "gap-(--era-icon-inset-chip) px-(--era-icon-inset-chip)";
+        tier: "gap-icon-inset-chip px-icon-inset-chip";
         pill: "";
     };
     /**
@@ -133,7 +133,7 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      *   both. Collapses to flat in square mode like every radius.
      */
     divider: {
-        true: "shrink-0 rounded-t-none rounded-b-(--era-rd-control) [box-shadow:0_1px_0_var(--color-divider-faded)]";
+        true: "shrink-0 rounded-t-none rounded-b-control [box-shadow:0_1px_0_var(--color-divider-faded)]";
         false: "";
     };
 }, undefined>>;

package/dist/ui/button/button.svelte

@@ -70,9 +70,20 @@
 		and they separated on press. Wrapping unifies them, and `gap: inherit`
 		forwards the button's own gap so the icon/label spacing is unchanged.
 	-->
-	<span data-button-content class="inline-flex items-center justify-center [gap:inherit]">
+	<!--
+		not-has-[svg]:era-label-ink — a text-only button ink-centres its label.
+		The span is otherwise a flex box, and a flex box's bare text is an
+		ANONYMOUS item that `text-box-trim` can never reach, so the label fell back
+		to line-box centring by font metrics (the bug era-label-ink documents).
+		With an icon present the box must stay flex for the gap, and that case is
+		still on the fallback — typography/inert-trim reports it.
+	-->
+	<span
+		data-button-content
+		class="inline-flex items-center justify-center [gap:inherit] not-has-[svg]:era-label-ink"
+	>
 		{#if loading}
-			<LoaderCircle class="size-(--era-h-icon) shrink-0 animate-spin" aria-hidden="true" />
+			<LoaderCircle class="size-icon shrink-0 animate-spin" aria-hidden="true" />
 			{#if loadingLabel}<span class="sr-only">{loadingLabel}</span>{/if}
 		{/if}
 		{@render children?.()}

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

@@ -1,6 +1,6 @@
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        filled: "flex justify-center shadow-(--era-shadow) hover:shadow-(--era-highlight-shadow) active:shadow-(--era-shadow-pressed) [&:active>*]:translate-x-(--era-press-sink-x) [&:active>*]:translate-y-(--era-press-sink-y)";
+        filled: "flex justify-center shadow-sm hover:shadow-highlight active:shadow-pressed [&:active>*]:translate-x-(--era-press-sink-x) [&:active>*]:translate-y-(--era-press-sink-y)";
         link: "inline-flex underline-offset-2 hover:underline";
     };
     tone: {
@@ -22,9 +22,9 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     active: {
         true: "";
     };
-}, undefined, "items-center gap-(--era-gap) text-body era-interactive era-text-trim", {
+}, undefined, "items-center gap-gutter text-body era-interactive leading-none", {
     variant: {
-        filled: "flex justify-center shadow-(--era-shadow) hover:shadow-(--era-highlight-shadow) active:shadow-(--era-shadow-pressed) [&:active>*]:translate-x-(--era-press-sink-x) [&:active>*]:translate-y-(--era-press-sink-y)";
+        filled: "flex justify-center shadow-sm hover:shadow-highlight active:shadow-pressed [&:active>*]:translate-x-(--era-press-sink-x) [&:active>*]:translate-y-(--era-press-sink-y)";
         link: "inline-flex underline-offset-2 hover:underline";
     };
     tone: {
@@ -48,7 +48,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        filled: "flex justify-center shadow-(--era-shadow) hover:shadow-(--era-highlight-shadow) active:shadow-(--era-shadow-pressed) [&:active>*]:translate-x-(--era-press-sink-x) [&:active>*]:translate-y-(--era-press-sink-y)";
+        filled: "flex justify-center shadow-sm hover:shadow-highlight active:shadow-pressed [&:active>*]:translate-x-(--era-press-sink-x) [&:active>*]:translate-y-(--era-press-sink-y)";
         link: "inline-flex underline-offset-2 hover:underline";
     };
     tone: {

package/dist/ui/button/variants.js

@@ -3,7 +3,7 @@ import { tv } from '../../utils/index.js';
 // entirely, so all geometry lives on filled compound variants rather than a
 // plain size variant.
 export const buttonVariants = tv({
-    base: 'items-center gap-(--era-gap) text-body era-interactive era-text-trim',
+    base: 'items-center gap-gutter text-body era-interactive leading-none',
     variants: {
         variant: {
             // The active: press treatment is inert outside the bevel surface —
@@ -12,7 +12,7 @@ export const buttonVariants = tv({
             // (press-sink, `[&:active>*]` — the one content-wrapper span from
             // button.svelte) so the icon AND label depress together like a keycap
             // while the frame holds still.
-            filled: 'flex justify-center shadow-(--era-shadow) hover:shadow-(--era-highlight-shadow) active:shadow-(--era-shadow-pressed) [&:active>*]:translate-x-(--era-press-sink-x) [&:active>*]:translate-y-(--era-press-sink-y)',
+            filled: 'flex justify-center shadow-sm hover:shadow-highlight active:shadow-pressed [&:active>*]:translate-x-(--era-press-sink-x) [&:active>*]:translate-y-(--era-press-sink-y)',
             link: 'inline-flex underline-offset-2 hover:underline'
         },
         tone: { default: '', accent: '', destructive: '', success: '', warning: '' },
@@ -25,27 +25,27 @@ export const buttonVariants = tv({
         {
             variant: 'filled',
             size: 'control',
-            class: 'h-(--era-h-control) min-w-(--era-h-control) rounded-(--era-rd-control)'
+            class: 'h-control min-w-control rounded-control'
         },
         {
             variant: 'filled',
             size: 'chip',
-            class: 'h-(--era-h-chip) min-w-(--era-h-chip) rounded-(--era-rd-chip)'
+            class: 'h-chip min-w-chip rounded-chip'
         },
         {
             variant: 'filled',
             size: 'pill',
-            class: 'h-(--era-h-pill) min-w-(--era-h-pill) rounded-(--era-rd-pill)'
+            class: 'h-pill min-w-pill rounded-pill'
         },
         {
             variant: 'filled',
             size: 'icon',
-            class: 'h-(--era-h-icon) min-w-(--era-h-icon) rounded-(--era-rd-icon)'
+            class: 'h-icon min-w-icon rounded-icon'
         },
         {
             variant: 'filled',
             size: 'icon',
-            class: 'h-(--era-h-icon) min-w-(--era-h-icon) rounded-(--era-rd-icon)'
+            class: 'h-icon min-w-icon rounded-icon'
         },
         // filled insets; icon buttons go square instead. When an icon is present,
         // gap widens to match the wall inset so the icon sits in rhythm with it.
@@ -53,16 +53,16 @@ export const buttonVariants = tv({
             variant: 'filled',
             icon: false,
             size: 'control',
-            class: 'px-(--era-inset-control) has-[svg]:gap-(--era-inset-control)'
+            class: 'px-inset-control has-[svg]:gap-inset-control'
         },
         {
             variant: 'filled',
             icon: false,
             size: 'chip',
-            class: 'px-(--era-inset-chip) has-[svg]:gap-(--era-inset-chip)'
+            class: 'px-inset-chip has-[svg]:gap-inset-chip'
         },
-        { variant: 'filled', icon: false, size: 'pill', class: 'px-(--era-pill-px)' },
-        { variant: 'filled', icon: false, size: 'icon', class: 'px-(--era-gap)' },
+        { variant: 'filled', icon: false, size: 'pill', class: 'px-pill' },
+        { variant: 'filled', icon: false, size: 'icon', class: 'px-gutter' },
         { variant: 'filled', icon: true, class: 'aspect-square px-0' },
         // Icon glyph sizing. The glyph is the icon tier (h-icon) at default/sm —
         // matching every text button's icon — but at the tight tiers, where the box
@@ -77,15 +77,15 @@ export const buttonVariants = tv({
         // notes "new note" button rendered a 24px glyph in a 24px box — flush,
         // no padding at all. Stating them makes the documented intent real and
         // removes the dependency on every call site remembering.
-        { icon: true, size: 'control', class: '[&_svg]:size-(--era-h-icon)' },
-        { icon: true, size: 'chip', class: '[&_svg]:size-(--era-h-icon)' },
-        { icon: true, size: 'pill', class: '[&_svg]:size-(--era-glyph-pill)' },
-        { icon: true, size: 'icon', class: '[&_svg]:size-(--era-glyph-icon)' },
+        { icon: true, size: 'control', class: '[&_svg]:size-icon' },
+        { icon: true, size: 'chip', class: '[&_svg]:size-icon' },
+        { icon: true, size: 'pill', class: '[&_svg]:size-glyph-pill' },
+        { icon: true, size: 'icon', class: '[&_svg]:size-glyph-icon' },
         // filled tones
         {
             variant: 'filled',
             tone: 'default',
-            class: 'text-fg hover:bg-(--era-highlight) hover:text-bright'
+            class: 'text-fg hover:bg-highlight hover:text-bright'
         },
         {
             variant: 'filled',
@@ -101,14 +101,14 @@ export const buttonVariants = tv({
         { variant: 'filled', tone: 'warning', class: 'text-fg hover:bg-warning hover:text-warning-fg' },
         // Latched controls (Toggle on, current tab/page) hold the pressed face:
         // the pressed shadow, so a selected control sits DOWN like a
-        // physically-held key — and `hover:shadow-(--era-shadow-pressed)` keeps it
+        // physically-held key — and `hover:shadow-pressed` keeps it
         // down when the cursor is over it (else the base `hover:shadow-…highlight`
         // would raise it back up, the "it comes back up on hover" bug on bevel).
         // The result is two states, not three: raised, and held-down.
         {
             variant: 'filled',
             active: true,
-            class: 'bg-fill text-bright shadow-(--era-shadow-pressed) hover:shadow-(--era-shadow-pressed)'
+            class: 'bg-fill text-bright shadow-pressed hover:shadow-pressed'
         },
         // link tones: static prose until the cursor confirms interactivity
         { variant: 'link', tone: 'default', class: 'text-fg' },

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

@@ -22,9 +22,9 @@
 		// shrink-0: a segmented control is its buttons' width — Badge/Chip's law
 		// one tier up. Squeezed, its rounded fill slid out from under the end
 		// buttons (measured 4px at touch on the board).
-		'flex shrink-0 gap-(--era-icon-inset-chip)',
+		'flex shrink-0 gap-icon-inset-chip',
 		orientation === 'vertical'
-			? 'flex-col items-stretch p-(--era-icon-inset-chip) [&>*]:justify-start'
+			? 'flex-col items-stretch p-icon-inset-chip [&>*]:justify-start'
 			: 'items-center',
 		className
 	)}

package/dist/ui/calendar/calendar-day.svelte

@@ -8,7 +8,7 @@
 <Calendar.Day
 	bind:ref
 	class={cn(
-		'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',
+		'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',
 		className
 	)}
 	{...restProps}

package/dist/ui/calendar/calendar-grid-row.svelte

@@ -5,4 +5,4 @@
 	let { ref = $bindable(null), class: className, ...restProps }: Calendar.GridRowProps = $props();
 </script>
 
-<Calendar.GridRow bind:ref class={cn('flex gap-(--era-gap)', className)} {...restProps} />
+<Calendar.GridRow bind:ref class={cn('flex gap-gutter', className)} {...restProps} />

package/dist/ui/calendar/calendar-grid.svelte

@@ -5,4 +5,4 @@
 	let { ref = $bindable(null), class: className, ...restProps }: Calendar.GridProps = $props();
 </script>
 
-<Calendar.Grid bind:ref class={cn('flex flex-col gap-(--era-gap)', className)} {...restProps} />
+<Calendar.Grid bind:ref class={cn('flex flex-col gap-gutter', className)} {...restProps} />

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

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

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

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

package/dist/ui/calendar/calendar-next-button.svelte

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

package/dist/ui/calendar/calendar-prev-button.svelte

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

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

@@ -23,7 +23,7 @@
 	bind:ref
 	bind:value
 	bind:placeholder
-	class={cn('inline-flex flex-col gap-(--era-gap)', className)}
+	class={cn('inline-flex flex-col gap-gutter', className)}
 	fixedWeeks
 	weekdayFormat="short"
 	{...restPropsAsAny}

package/dist/ui/card/card.svelte

@@ -2,17 +2,17 @@
 	import { cn, tv } from '../../utils/index.js';
 
 	export const cardVariants = tv({
-		base: 'block w-full rounded-(--era-rd-bar) text-left text-fg',
+		base: 'block w-full rounded-bar text-left text-fg',
 		variants: {
 			tone: {
-				elevated: 'bg-(--era-surface-bg-elevated) shadow-(--era-shadow)',
-				surface: 'bg-(--era-surface-bg)',
+				elevated: 'bg-elevated shadow-sm',
+				surface: 'bg-well',
 				// The recessed tier, the container-level twin of --era-field-bg. The
 				// other two tones are RAISED (elevated) and level (surface); there was
 				// no way to say "sunken", so anything wanting one — a tool's output
 				// pane, an expanded chip body — hand-rolled the fill and shadow-well
 				// pair instead of importing this.
-				well: 'bg-(--era-field-bg) shadow-(--era-shadow-well)',
+				well: 'bg-field shadow-well',
 				flat: ''
 			},
 			// Sectioned layout (header / body / footer with dividers) omits the
@@ -21,7 +21,7 @@
 			// default button padding and lines up with the <div>/<a> variants.
 			//
 			// EVEN on all four sides. This carried a half-height top padding
-			// (pt-gutter against pb-pad-md) borrowed from `p-content`, whose
+			// (pt-gutter against pb-pad-md) borrowed from `p-section`, whose
 			// asymmetry is earned: a content panel always follows a section heading
 			// ROW, and that row's own bar already contributes slack above the text,
 			// so padding evenly on top of it spends the space twice. A card has no
@@ -31,9 +31,9 @@
 			// reported it as "cards aren't evenly spaced", which is exactly what it
 			// was: the even-gap law, broken by default, in the component that
 			// bounds more consumer content than any other.
-			sectioned: { true: 'p-0', false: 'p-(--era-pad-card)' },
+			sectioned: { true: 'p-0', false: 'p-card' },
 			interactive: {
-				true: 'cursor-pointer hover:bg-(--era-highlight) hover:shadow-(--era-highlight-shadow) focus-visible:bg-(--era-highlight) era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50'
+				true: 'cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50'
 			}
 		},
 		defaultVariants: { tone: 'elevated', sectioned: false, interactive: false }
@@ -113,15 +113,15 @@
 {#snippet body()}
 	{#if sectioned}
 		{#if header}
-			<div class="border-b border-divider-faded p-(--era-pad-card) text-bright">
+			<div class="border-b border-divider-faded p-card text-bright">
 				{@render header()}
 			</div>
 		{/if}
-		<div class="p-(--era-pad-card)">
+		<div class="p-card">
 			{@render children?.()}
 		</div>
 		{#if footer}
-			<div class="border-t border-divider-faded p-(--era-pad-card)">
+			<div class="border-t border-divider-faded p-card">
 				{@render footer()}
 			</div>
 		{/if}

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

@@ -1,44 +1,44 @@
 export declare const cardVariants: import("tailwind-variants").TVReturnType<{
     tone: {
-        elevated: "bg-(--era-surface-bg-elevated) shadow-(--era-shadow)";
-        surface: "bg-(--era-surface-bg)";
-        well: "bg-(--era-field-bg) shadow-(--era-shadow-well)";
+        elevated: "bg-elevated shadow-sm";
+        surface: "bg-well";
+        well: "bg-field shadow-well";
         flat: "";
     };
     sectioned: {
         true: "p-0";
-        false: "p-(--era-pad-card)";
+        false: "p-card";
     };
     interactive: {
-        true: "cursor-pointer hover:bg-(--era-highlight) hover:shadow-(--era-highlight-shadow) focus-visible:bg-(--era-highlight) era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
+        true: "cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
     };
-}, undefined, "block w-full rounded-(--era-rd-bar) text-left text-fg", {
+}, undefined, "block w-full rounded-bar text-left text-fg", {
     tone: {
-        elevated: "bg-(--era-surface-bg-elevated) shadow-(--era-shadow)";
-        surface: "bg-(--era-surface-bg)";
-        well: "bg-(--era-field-bg) shadow-(--era-shadow-well)";
+        elevated: "bg-elevated shadow-sm";
+        surface: "bg-well";
+        well: "bg-field shadow-well";
         flat: "";
     };
     sectioned: {
         true: "p-0";
-        false: "p-(--era-pad-card)";
+        false: "p-card";
     };
     interactive: {
-        true: "cursor-pointer hover:bg-(--era-highlight) hover:shadow-(--era-highlight-shadow) focus-visible:bg-(--era-highlight) era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
+        true: "cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     tone: {
-        elevated: "bg-(--era-surface-bg-elevated) shadow-(--era-shadow)";
-        surface: "bg-(--era-surface-bg)";
-        well: "bg-(--era-field-bg) shadow-(--era-shadow-well)";
+        elevated: "bg-elevated shadow-sm";
+        surface: "bg-well";
+        well: "bg-field shadow-well";
         flat: "";
     };
     sectioned: {
         true: "p-0";
-        false: "p-(--era-pad-card)";
+        false: "p-card";
     };
     interactive: {
-        true: "cursor-pointer hover:bg-(--era-highlight) hover:shadow-(--era-highlight-shadow) focus-visible:bg-(--era-highlight) era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
+        true: "cursor-pointer hover:bg-highlight hover:shadow-highlight focus-visible:bg-highlight era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
     };
 }, undefined>>;
 import type { Snippet } from 'svelte';

package/dist/ui/checkbox/checkbox-group.svelte

@@ -13,6 +13,6 @@
 <Checkbox.Group
 	bind:ref
 	bind:value
-	class={cn('flex flex-col gap-(--era-gap)', className)}
+	class={cn('flex flex-col gap-gutter', className)}
 	{...restProps}
 />

package/dist/ui/checkbox/checkbox.svelte

@@ -18,7 +18,7 @@
 	bind:checked
 	bind:indeterminate
 	class={cn(
-		'group/checkbox 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/checkbox flex size-icon shrink-0 era-interactive cursor-pointer items-center justify-center rounded-control bg-elevated shadow-well hover:bg-highlight',
 		className
 	)}
 	{...restProps}

package/dist/ui/chip/chip.svelte

@@ -13,18 +13,26 @@
 	export const chipVariants = tv({
 		// shrink-0 + nowrap for the same reason Badge carries them: the pill is
 		// already exactly its text's size, so any squeeze puts ink outside the fill.
-		base: 'inline-flex shrink-0 items-center bg-fill font-mono text-body leading-none whitespace-nowrap text-fg shadow-(--era-shadow) era-text-trim',
+		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-(--era-h-chip) min-w-(--era-h-chip) rounded-(--era-rd-chip) pl-(--era-chip-px)',
-				pill: 'h-(--era-h-pill) min-w-(--era-h-pill) rounded-(--era-rd-pill) pl-(--era-pill-px)'
+				chip: 'h-chip min-w-chip rounded-chip pl-chip',
+				pill: 'h-pill min-w-pill rounded-pill pl-pill'
 			},
 			dismissible: { true: '', false: '' }
 		},
 		compoundVariants: [
 			// Text-only: symmetric pill padding, inter-element gap for a lead icon.
-			{ size: 'chip', dismissible: false, class: 'gap-(--era-gap) pr-(--era-chip-px)' },
-			{ size: 'pill', dismissible: false, class: 'gap-(--era-gap) pr-(--era-pill-px)' },
+			{
+				size: 'chip',
+				dismissible: false,
+				class: 'gap-gutter pr-chip not-has-[svg]:era-label-ink not-has-[svg]:text-center'
+			},
+			{
+				size: 'pill',
+				dismissible: false,
+				class: 'gap-gutter pr-pill not-has-[svg]:era-label-ink not-has-[svg]:text-center'
+			},
 			// Dismissible, two geometries because the two tiers afford different ones:
 			//
 			//   chip — the pill-tier button NESTS, with its concentric gap mirrored as
@@ -41,9 +49,9 @@
 			{
 				size: 'chip',
 				dismissible: true,
-				class: 'gap-(--era-pill-inset-chip) pr-(--era-pill-inset-chip)'
+				class: 'gap-pill-inset-chip pr-pill-inset-chip'
 			},
-			{ size: 'pill', dismissible: true, class: 'gap-(--era-icon-inset-pill) pr-0' }
+			{ size: 'pill', dismissible: true, class: 'gap-icon-inset-pill pr-0' }
 		],
 		defaultVariants: { size: 'chip', dismissible: false }
 	});