@signal9/era-ui 10.1.0 → 12.0.0

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

@@ -30,17 +30,15 @@
 	<Dialog.Content
 		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-control)'
-				: 'gap-(--era-gap) rounded-(--era-rd-bar) p-(--era-pad-card)',
+			'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-well shadow-lg glass-blur',
+			header ? 'rounded-control' : 'gap-gutter rounded-bar p-card',
 			className
 		)}
 		{...restProps}
 	>
 		{#if header}
 			{@render header()}
-			<div class="flex min-h-0 flex-col gap-(--era-gap) p-(--era-pad-card)">
+			<div class="flex min-h-0 flex-col gap-gutter p-card">
 				{@render children?.()}
 			</div>
 		{:else}

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

@@ -31,12 +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="control"
-	content="pill"
-	divider
-	class={cn('pl-(--era-inset-control) select-none', className)}
->
+<Bar size="control" content="pill" divider class={cn('pl-inset-control select-none', className)}>
 	{@render children?.()}
 	{#if dismissable}
 		<Close icon size="pill" tone="destructive" aria-label="Close" class="ml-auto">

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

@@ -5,8 +5,4 @@
 	let { ref = $bindable(null), class: className, ...restProps }: Dialog.OverlayProps = $props();
 </script>
 
-<Dialog.Overlay
-	bind:ref
-	class={cn('fixed inset-0 z-50 bg-(--era-overlay-bg)', className)}
-	{...restProps}
-/>
+<Dialog.Overlay bind:ref class={cn('fixed inset-0 z-50 bg-overlay', className)} {...restProps} />

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

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

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

@@ -15,7 +15,7 @@
 	<DropdownMenu.Content
 		bind:ref
 		align="start"
-		// 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.
@@ -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-control) 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-control bg-elevated p-menu shadow-lg glass-blur',
 			className
 		)}
 		{sideOffset}

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

@@ -11,9 +11,6 @@
 
 <DropdownMenu.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}
 />

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

@@ -13,7 +13,7 @@
 <DropdownMenu.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-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 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-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-highlight data-[highlighted]:shadow-highlight',
 		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-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)',
+		'flex h-control cursor-pointer items-center rounded-menu-item px-inset-control text-body text-fg data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-highlight data-[highlighted]:shadow-highlight',
 		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-control) bg-(--era-surface-bg-elevated) p-(--era-panel-inset) shadow-(--era-shadow-lg) glass-blur',
+			'z-50 w-max overflow-hidden rounded-control bg-elevated p-menu 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-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',
+		'flex h-control cursor-pointer items-center justify-between gap-icon-inset-chip rounded-menu-item px-inset-control text-body text-fg data-[highlighted]:bg-highlight data-[highlighted]:shadow-highlight data-[state=open]:bg-hover',
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronRight class="size-(--era-h-icon) text-muted" />
+	<ChevronRight class="size-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-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)',
+		'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',
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronDown class="size-(--era-h-icon) text-muted" />
+	<ChevronDown class="size-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-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',
+		'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',
 		className
 	)}
 	ondragenter={onDragEnter}
@@ -82,7 +82,7 @@
 	ondragover={onDragOver}
 	ondrop={onDrop}
 >
-	<Upload class="size-(--era-h-icon) shrink-0" />
+	<Upload class="size-icon shrink-0" />
 	<span class="truncate {files && files.length > 0 ? 'text-bright' : 'text-muted'}">
 		{label()}
 	</span>

package/dist/ui/input/input.svelte

@@ -54,7 +54,7 @@
 	// 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 === 'pill' ? 'size-(--era-glyph-pill)' : 'size-(--era-h-icon)');
+	const glyphClass = $derived(size === 'pill' ? 'size-glyph-pill' : 'size-icon');
 </script>
 
 {#if icon}
@@ -70,7 +70,7 @@
 	<div
 		data-input-field={kind}
 		data-input-size={size}
-		class={cn(inputVariants({ bare, reveal, size }), 'items-center gap-(--era-gap)', className)}
+		class={cn(inputVariants({ bare, reveal, size }), 'items-center gap-gutter', className)}
 	>
 		<Icon class={cn('shrink-0 text-muted', glyphClass)} />
 		<input

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-control)',
+		'resize-y py-inset-control',
 		className
 	)}
 	{...restProps}></textarea>

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

@@ -24,7 +24,7 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      * edge to edge so the two have no gap between them.
      */
     bare: {
-        false: "bg-(--era-field-bg) shadow-(--era-shadow-well) hover:bg-(--era-field-highlight) focus-within:bg-(--era-field-highlight) focus:bg-(--era-field-highlight)";
+        false: "bg-field shadow-well hover:bg-field-highlight focus-within:bg-field-highlight focus:bg-field-highlight";
         true: "bg-transparent shadow-none";
     };
     /**
@@ -39,7 +39,7 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      * that is for it to be spelled once, next to it.
      */
     reveal: {
-        true: "bg-transparent shadow-none hover:bg-(--era-field-bg) hover:shadow-(--era-shadow-well) focus-within:shadow-(--era-shadow-well) focus:shadow-(--era-shadow-well)";
+        true: "bg-transparent shadow-none hover:bg-field hover:shadow-well focus-within:shadow-well focus:shadow-well";
         false: "";
     };
     /**
@@ -60,8 +60,8 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      *   on this tier read as one family.
      */
     size: {
-        control: "h-(--era-h-control) rounded-(--era-rd-control) px-(--era-field-px)";
-        pill: "h-(--era-h-pill) rounded-(--era-rd-pill) px-(--era-pill-px)";
+        control: "h-control rounded-control px-field";
+        pill: "h-pill rounded-pill px-pill";
     };
     /**
      * Height OVERRIDES, for the fields that are not their tier's height. No
@@ -69,7 +69,7 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      */
     height: {
         full: "h-full";
-        auto: "h-auto min-h-(--era-h-control)";
+        auto: "h-auto min-h-control";
     };
     /**
      * Side-padding OVERRIDES, same rule. `trailing` is for a field that holds a
@@ -80,7 +80,7 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      * below.
      */
     pad: {
-        trailing: "ps-(--era-field-px) pe-(--era-chip-inset-control)";
+        trailing: "ps-field pe-chip-inset-control";
         none: "px-0";
     };
 }, undefined, "flex w-full era-interactive text-body text-fg placeholder:text-muted", {
@@ -92,7 +92,7 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      * edge to edge so the two have no gap between them.
      */
     bare: {
-        false: "bg-(--era-field-bg) shadow-(--era-shadow-well) hover:bg-(--era-field-highlight) focus-within:bg-(--era-field-highlight) focus:bg-(--era-field-highlight)";
+        false: "bg-field shadow-well hover:bg-field-highlight focus-within:bg-field-highlight focus:bg-field-highlight";
         true: "bg-transparent shadow-none";
     };
     /**
@@ -107,7 +107,7 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      * that is for it to be spelled once, next to it.
      */
     reveal: {
-        true: "bg-transparent shadow-none hover:bg-(--era-field-bg) hover:shadow-(--era-shadow-well) focus-within:shadow-(--era-shadow-well) focus:shadow-(--era-shadow-well)";
+        true: "bg-transparent shadow-none hover:bg-field hover:shadow-well focus-within:shadow-well focus:shadow-well";
         false: "";
     };
     /**
@@ -128,8 +128,8 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      *   on this tier read as one family.
      */
     size: {
-        control: "h-(--era-h-control) rounded-(--era-rd-control) px-(--era-field-px)";
-        pill: "h-(--era-h-pill) rounded-(--era-rd-pill) px-(--era-pill-px)";
+        control: "h-control rounded-control px-field";
+        pill: "h-pill rounded-pill px-pill";
     };
     /**
      * Height OVERRIDES, for the fields that are not their tier's height. No
@@ -137,7 +137,7 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      */
     height: {
         full: "h-full";
-        auto: "h-auto min-h-(--era-h-control)";
+        auto: "h-auto min-h-control";
     };
     /**
      * Side-padding OVERRIDES, same rule. `trailing` is for a field that holds a
@@ -148,7 +148,7 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      * below.
      */
     pad: {
-        trailing: "ps-(--era-field-px) pe-(--era-chip-inset-control)";
+        trailing: "ps-field pe-chip-inset-control";
         none: "px-0";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
@@ -160,7 +160,7 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      * edge to edge so the two have no gap between them.
      */
     bare: {
-        false: "bg-(--era-field-bg) shadow-(--era-shadow-well) hover:bg-(--era-field-highlight) focus-within:bg-(--era-field-highlight) focus:bg-(--era-field-highlight)";
+        false: "bg-field shadow-well hover:bg-field-highlight focus-within:bg-field-highlight focus:bg-field-highlight";
         true: "bg-transparent shadow-none";
     };
     /**
@@ -175,7 +175,7 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      * that is for it to be spelled once, next to it.
      */
     reveal: {
-        true: "bg-transparent shadow-none hover:bg-(--era-field-bg) hover:shadow-(--era-shadow-well) focus-within:shadow-(--era-shadow-well) focus:shadow-(--era-shadow-well)";
+        true: "bg-transparent shadow-none hover:bg-field hover:shadow-well focus-within:shadow-well focus:shadow-well";
         false: "";
     };
     /**
@@ -196,8 +196,8 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      *   on this tier read as one family.
      */
     size: {
-        control: "h-(--era-h-control) rounded-(--era-rd-control) px-(--era-field-px)";
-        pill: "h-(--era-h-pill) rounded-(--era-rd-pill) px-(--era-pill-px)";
+        control: "h-control rounded-control px-field";
+        pill: "h-pill rounded-pill px-pill";
     };
     /**
      * Height OVERRIDES, for the fields that are not their tier's height. No
@@ -205,7 +205,7 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      */
     height: {
         full: "h-full";
-        auto: "h-auto min-h-(--era-h-control)";
+        auto: "h-auto min-h-control";
     };
     /**
      * Side-padding OVERRIDES, same rule. `trailing` is for a field that holds a
@@ -216,7 +216,7 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      * below.
      */
     pad: {
-        trailing: "ps-(--era-field-px) pe-(--era-chip-inset-control)";
+        trailing: "ps-field pe-chip-inset-control";
         none: "px-0";
     };
 }, undefined>>;

package/dist/ui/input/variants.js

@@ -27,7 +27,7 @@ export const inputVariants = tv({
          * edge to edge so the two have no gap between them.
          */
         bare: {
-            false: 'bg-(--era-field-bg) shadow-(--era-shadow-well) hover:bg-(--era-field-highlight) focus-within:bg-(--era-field-highlight) focus:bg-(--era-field-highlight)',
+            false: 'bg-field shadow-well hover:bg-field-highlight focus-within:bg-field-highlight focus:bg-field-highlight',
             true: 'bg-transparent shadow-none'
         },
         /**
@@ -42,7 +42,7 @@ export const inputVariants = tv({
          * that is for it to be spelled once, next to it.
          */
         reveal: {
-            true: 'bg-transparent shadow-none hover:bg-(--era-field-bg) hover:shadow-(--era-shadow-well) focus-within:shadow-(--era-shadow-well) focus:shadow-(--era-shadow-well)',
+            true: 'bg-transparent shadow-none hover:bg-field hover:shadow-well focus-within:shadow-well focus:shadow-well',
             false: ''
         },
         /**
@@ -63,8 +63,8 @@ export const inputVariants = tv({
          *   on this tier read as one family.
          */
         size: {
-            control: 'h-(--era-h-control) rounded-(--era-rd-control) px-(--era-field-px)',
-            pill: 'h-(--era-h-pill) rounded-(--era-rd-pill) px-(--era-pill-px)'
+            control: 'h-control rounded-control px-field',
+            pill: 'h-pill rounded-pill px-pill'
         },
         /**
          * Height OVERRIDES, for the fields that are not their tier's height. No
@@ -78,7 +78,7 @@ export const inputVariants = tv({
             full: 'h-full',
             // h-auto is load-bearing — it is what outranks the tier's own height so
             // the field can grow with its content (Textarea).
-            auto: 'h-auto min-h-(--era-h-control)'
+            auto: 'h-auto min-h-control'
         },
         /**
          * Side-padding OVERRIDES, same rule. `trailing` is for a field that holds a
@@ -89,7 +89,7 @@ export const inputVariants = tv({
          * below.
          */
         pad: {
-            trailing: 'ps-(--era-field-px) pe-(--era-chip-inset-control)',
+            trailing: 'ps-field pe-chip-inset-control',
             none: 'px-0'
         }
     },

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-(--era-h-pill) shrink-0 items-center overflow-hidden rounded-(--era-rd-pill) bg-fill font-mono text-body leading-none whitespace-nowrap shadow-(--era-shadow)',
+		'inline-flex h-pill shrink-0 items-center overflow-hidden rounded-pill bg-fill font-mono text-body leading-none whitespace-nowrap shadow-sm',
 		className
 	)}
 	{...restProps}
@@ -34,8 +34,7 @@
 	     status), and the block mechanism is the only one where text-box-trim
 	     actually runs — see era-token-ink. Stretching gives that block a full-
 	     height box for align-content to centre the trimmed line in. -->
-	<span
-		class="era-token-ink min-w-(--era-h-pill) self-stretch px-(--era-inset-chip) text-muted tabular-nums"
+	<span class="era-token-ink min-w-pill self-stretch px-inset-chip text-muted tabular-nums"
 		>{value}</span
 	>
 </span>

package/dist/ui/link-preview/link-preview-content.svelte

@@ -15,7 +15,7 @@
 	<LinkPreview.Content
 		bind:ref
 		class={cn(
-			'z-50 max-w-xs rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) p-(--era-inset-control) text-body shadow-(--era-shadow-lg) glass-blur',
+			'z-50 max-w-xs rounded-control bg-elevated p-inset-control text-body shadow-lg glass-blur',
 			className
 		)}
 		{sideOffset}

package/dist/ui/menubar/menubar-checkbox-item.svelte

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

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

@@ -15,7 +15,7 @@
 	<Menubar.Content
 		bind:ref
 		align="start"
-		// 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.
@@ -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-menubar-menu-anchor-width) overflow-hidden rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) p-(--era-panel-inset) shadow-(--era-shadow-lg) glass-blur',
+			'z-50 w-max min-w-(--bits-menubar-menu-anchor-width) overflow-hidden rounded-control bg-elevated p-menu shadow-lg glass-blur',
 			className
 		)}
 		{sideOffset}

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

@@ -11,9 +11,6 @@
 
 <Menubar.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}
 />

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

@@ -13,7 +13,7 @@
 <Menubar.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-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 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-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-highlight data-[highlighted]:shadow-highlight',
 		className
 	)}
 	{...restProps}

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

@@ -8,7 +8,7 @@
 <Menubar.RadioItem
 	bind:ref
 	class={cn(
-		'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)',
+		'flex h-control cursor-pointer items-center rounded-menu-item px-inset-control text-body text-fg data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-highlight data-[highlighted]:shadow-highlight',
 		className
 	)}
 	{...restProps}

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

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

package/dist/ui/menubar/menubar-sub-content.svelte

@@ -15,7 +15,7 @@
 	<Menubar.SubContent
 		bind:ref
 		class={cn(
-			'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',
+			'z-50 w-max overflow-hidden rounded-control bg-elevated p-menu shadow-lg glass-blur',
 			className
 		)}
 		{sideOffset}

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

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

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

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

package/dist/ui/meter/meter.svelte

@@ -20,13 +20,13 @@
 	{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}
 >
 	<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>
 </Meter.Root>

package/dist/ui/pagination/pagination-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/pagination/pagination-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/pagination/pagination-root.svelte

@@ -13,6 +13,6 @@
 <Pagination.Root
 	bind:ref
 	bind:page
-	class={cn('flex items-center gap-(--era-gap) text-body', className)}
+	class={cn('flex items-center gap-gutter text-body', className)}
 	{...restProps}
 />

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

@@ -19,7 +19,7 @@
      its content inside the flex column. -->
 <div
 	bind:this={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}
 >
 	{@render children?.()}

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}