@signal9/era-ui 10.0.0 → 11.0.0

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

@@ -1,16 +1,16 @@
 export declare const chipVariants: import("tailwind-variants").TVReturnType<{
     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: "";
     };
-}, undefined, "inline-flex shrink-0 items-center bg-fill font-mono text-body leading-none whitespace-nowrap text-fg shadow-(--era-shadow) era-text-trim", {
+}, undefined, "inline-flex shrink-0 items-center bg-fill font-mono text-body leading-none whitespace-nowrap text-fg shadow-sm", {
     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: "";
@@ -18,8 +18,8 @@ export declare const chipVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     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: "";

package/dist/ui/code-block/code-block.svelte

@@ -38,14 +38,11 @@
      visibly off its curve. -->
 <div
 	bind:this={ref}
-	class={cn(
-		'relative rounded-(--era-rd-bar) bg-(--era-field-bg) shadow-(--era-shadow-well)',
-		className
-	)}
+	class={cn('relative rounded-bar bg-field shadow-well', className)}
 	{...restProps}
 >
 	<pre
-		class="overflow-x-auto px-(--era-field-px) py-(--era-inset-control) pr-[calc(var(--era-chip-inset-bar)+var(--era-h-chip)+var(--era-field-px))] font-mono text-body leading-body text-fg"><code
+		class="overflow-x-auto px-field py-inset-control pr-[calc(var(--era-chip-inset-bar)+var(--era-h-chip)+var(--era-field-px))] font-mono text-body leading-body text-fg"><code
 			>{#if children}{@render children()}{:else}{code}{/if}</code
 		></pre>
 	{#if copyable}
@@ -60,9 +57,6 @@
 		     in, which broke the moment the leading changed and was never the
 		     corner's own law: the button sat 4.75px from the top and 6.15px from
 		     the right edge at dense, visibly off the curve. -->
-		<CopyButton
-			text={copyText}
-			class="absolute top-(--era-chip-inset-bar) right-(--era-chip-inset-bar) bg-(--era-field-bg)"
-		/>
+		<CopyButton text={copyText} class="absolute top-chip-inset-bar right-chip-inset-bar bg-field" />
 	{/if}
 </div>

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

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

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

@@ -15,7 +15,7 @@
 	bind:ref
 	align="start"
 	class={cn(
-		'z-50 w-max min-w-(--bits-combobox-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-combobox-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/combobox/combobox-empty.svelte

@@ -11,12 +11,7 @@
 	} = $props();
 </script>
 
-<div
-	class={cn(
-		'flex h-(--era-h-control) items-center px-(--era-inset-control) text-body text-muted',
-		className
-	)}
->
+<div class={cn('flex h-control items-center px-inset-control text-body text-muted', className)}>
 	{#if children}
 		{@render children()}
 	{:else}

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

@@ -12,10 +12,7 @@
 
 <Combobox.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/combobox/combobox-input.svelte

@@ -12,7 +12,7 @@
 	class={cn(
 		inputVariants(),
 		// era-ink-center: the same font-box-vs-ink correction Input documents.
-		'era-ink-center data-[state=open]:rounded-b-none data-[state=open]:shadow-(--era-shadow-pressed)',
+		'era-ink-center data-[state=open]:rounded-b-none data-[state=open]:shadow-pressed',
 		className
 	)}
 	{...restProps}

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

@@ -10,7 +10,7 @@
 <Combobox.Item
 	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-[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-[highlighted]:bg-highlight data-[highlighted]:shadow-highlight',
 		className
 	)}
 	{...restProps}

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

@@ -14,7 +14,7 @@
 <Combobox.Trigger
 	bind:ref
 	class={cn(
-		'flex size-(--era-h-control) shrink-0 items-center justify-center rounded-(--era-rd-control) text-muted focus:outline-none',
+		'flex size-control shrink-0 items-center justify-center rounded-control text-muted focus:outline-none',
 		className
 	)}
 	{...restProps}
@@ -22,6 +22,6 @@
 	{#if children}
 		{@render children()}
 	{:else}
-		<ChevronDown class="size-(--era-h-icon)" />
+		<ChevronDown class="size-icon" />
 	{/if}
 </Combobox.Trigger>

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

@@ -11,9 +11,6 @@
 
 <Command.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/command/command-group-items.svelte

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

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

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

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

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

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

@@ -20,11 +20,11 @@
 	bind:ref
 	bind:value
 	class={cn(
-		'flex flex-col gap-(--era-gap)',
+		'flex flex-col gap-gutter',
 		// 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-bar) border border-(color:--era-border-color) bg-(--era-surface-bg) p-(--era-gap) shadow-(--era-shadow-lg) glass-blur',
+			'overflow-hidden rounded-bar border border-(color:--era-border-color) bg-well p-gutter shadow-lg glass-blur',
 		className
 	)}
 	{...restProps}

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

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

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

@@ -190,10 +190,8 @@
      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-control) w-full min-w-0 items-center font-mono', className)}
->
-	<ChevronRight class="mx-(--era-gap) size-(--era-h-icon) shrink-0 text-fg" />
+<div class={cn('relative flex h-control w-full min-w-0 items-center font-mono', className)}>
+	<ChevronRight class="mx-gutter size-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
@@ -204,7 +202,7 @@
 	     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-icon) shrink-0 text-muted" />
+		<ChevronRight class="mx-gutter size-icon shrink-0 text-muted" />
 	{/each}
 
 	<!-- ONE source of truth for the field's type: font size and text colour live on
@@ -268,13 +266,11 @@
 			role="listbox"
 			tabindex="-1"
 			aria-label="Commands"
-			class="absolute top-full left-0 z-50 max-h-64 w-full overflow-x-hidden overflow-y-auto bg-(--era-surface-bg-elevated) shadow-(--era-shadow-lg) glass-blur"
+			class="absolute top-full left-0 z-50 max-h-64 w-full overflow-x-hidden overflow-y-auto bg-elevated shadow-lg glass-blur"
 			onmousedown={(e) => e.preventDefault()}
 		>
 			{#if !filtered.length}
-				<div
-					class="flex h-(--era-h-control) items-center px-(--era-inset-control) text-body text-muted"
-				>
+				<div class="flex h-control items-center px-inset-control text-body text-muted">
 					{empty}
 				</div>
 			{:else}
@@ -290,7 +286,7 @@
 						tabindex={-1}
 						aria-selected={i === selectedIndex}
 						class={cn(
-							'flex h-(--era-h-control) cursor-default items-center gap-(--era-gap) px-(--era-inset-control) text-body era-text-trim whitespace-nowrap',
+							'flex h-control cursor-default items-center gap-gutter px-inset-control text-body leading-none whitespace-nowrap',
 							i === selectedIndex ? 'bg-3 text-bright' : 'text-fg'
 						)}
 						onclick={() => choose(item)}
@@ -299,14 +295,14 @@
 							<span class="shrink-0">{item.icon}</span>
 						{:else if item.icon}
 							{@const Icon = item.icon}
-							<Icon class="size-(--era-h-icon) shrink-0 text-muted" />
+							<Icon class="size-icon shrink-0 text-muted" />
 						{/if}
 						<span class="shrink-0">{item.label}</span>
 						{#if item.items}
-							<ChevronRight class="size-(--era-h-icon) shrink-0 text-muted" />
+							<ChevronRight class="size-icon shrink-0 text-muted" />
 						{/if}
 						{#if item.sublabel}
-							<span class="ml-auto truncate pl-(--era-inset-control) text-body text-muted">
+							<span class="ml-auto truncate pl-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-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/context-menu/context-menu-content.svelte

@@ -15,13 +15,13 @@
 	<ContextMenu.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.
 		// A fixed gutter was tried here and rejected: it padded flat menus too.
 		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/context-menu/context-menu-group-heading.svelte

@@ -11,9 +11,6 @@
 
 <ContextMenu.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/context-menu/context-menu-item.svelte

@@ -13,7 +13,7 @@
 <ContextMenu.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/context-menu/context-menu-radio-item.svelte

@@ -12,7 +12,7 @@
 <ContextMenu.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/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-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/context-menu/context-menu-sub-trigger.svelte

@@ -14,11 +14,11 @@
 <ContextMenu.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" />
 </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-icon) transition-[opacity,scale,filter] duration-(--era-duration) ease-(--era-ease)';
+		'absolute inset-0 size-icon transition-[opacity,scale,filter] duration-base ease-base';
 	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-icon) shrink-0">
+	<span class="relative block size-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

@@ -103,7 +103,7 @@
 	// unmounts can only animate its enter. Timing rides the motion axis, so the
 	// swap snaps at instant, is decisive at normal, and overshoots at extra.
 	const faceBase =
-		'col-start-1 row-start-1 flex items-center justify-center transition-[opacity,scale,filter] duration-(--era-duration) ease-(--era-ease)';
+		'col-start-1 row-start-1 flex items-center justify-center transition-[opacity,scale,filter] duration-base ease-base';
 	const faceIn = 'scale-100 opacity-100 blur-none';
 	const faceOut = 'pointer-events-none scale-25 opacity-0 blur-xs';
 </script>
@@ -140,7 +140,7 @@
 					{@render children(option)}
 				{:else if option.icon}
 					{@const Icon = option.icon}
-					<Icon class="size-(--era-h-icon) shrink-0" />
+					<Icon class="size-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-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/date-picker/date-picker-calendar.svelte

@@ -11,6 +11,6 @@
 
 <DatePicker.Calendar
 	bind:ref
-	class={cn('inline-flex flex-col gap-(--era-gap)', className)}
+	class={cn('inline-flex flex-col gap-gutter', className)}
 	{...restProps}
 />

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

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

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

@@ -8,7 +8,7 @@
 <DatePicker.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/date-picker/date-picker-grid-row.svelte

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

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

@@ -5,4 +5,4 @@
 	let { ref = $bindable(null), class: className, ...restProps }: DatePicker.GridProps = $props();
 </script>
 
-<DatePicker.Grid bind:ref class={cn('flex flex-col gap-(--era-gap)', className)} {...restProps} />
+<DatePicker.Grid bind:ref class={cn('flex flex-col gap-gutter', 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-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/date-picker/date-picker-header.svelte

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

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

@@ -14,7 +14,7 @@
 <DatePicker.Trigger
 	bind:ref
 	class={cn(
-		'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',
+		'ml-auto flex size-chip shrink-0 items-center justify-center rounded-chip text-muted hover:bg-highlight hover:text-fg focus:outline-none',
 		className
 	)}
 	{...restProps}
@@ -22,6 +22,6 @@
 	{#if children}
 		{@render children()}
 	{:else}
-		<CalendarDays class="size-(--era-h-icon)" />
+		<CalendarDays class="size-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-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/date-range-picker/date-range-picker-calendar.svelte

@@ -11,6 +11,6 @@
 
 <DateRangePicker.Calendar
 	bind:ref
-	class={cn('inline-flex flex-col gap-(--era-gap)', className)}
+	class={cn('inline-flex flex-col gap-gutter', className)}
 	{...restProps}
 />

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

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

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

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

package/dist/ui/date-range-picker/date-range-picker-grid-row.svelte

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

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

@@ -9,8 +9,4 @@
 	}: DateRangePicker.GridProps = $props();
 </script>
 
-<DateRangePicker.Grid
-	bind:ref
-	class={cn('flex flex-col gap-(--era-gap)', className)}
-	{...restProps}
-/>
+<DateRangePicker.Grid bind:ref class={cn('flex flex-col gap-gutter', 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-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/date-range-picker/date-range-picker-header.svelte

@@ -11,6 +11,6 @@
 
 <DateRangePicker.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/date-range-picker/date-range-picker-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}