@signal9/era-ui 8.0.0 → 9.0.0

package/dist/ui/chip/chip.svelte

@@ -5,10 +5,10 @@
 	// ~2× the vertical inset — see density.css) so words breathe, and both
 	// nesting an xs dismiss button with the concentric xs-inset-T gap so the
 	// even-gap law holds at either size:
-	//   sm  (default) — the standalone free chip (h-sm = 2·sp + 6). Switch
+	//   sm  (default) — the standalone free chip (h-chip = 2·sp + 6). Switch
 	//                   track / KV row tier.
 	//   xxs           — the pill that nests INSIDE an md container (button,
-	//                   select trigger): h-xxs = sp + 10, leaving the 3/5/7
+	//                   select trigger): h-pill = sp + 10, leaving the 3/5/7
 	//                   concentric gap so it sits evenly inset, not cramped.
 	export const chipVariants = tv({
 		// shrink-0 + nowrap for the same reason Badge carries them: the pill is
@@ -16,19 +16,19 @@
 		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',
 		variants: {
 			size: {
-				sm: 'h-(--era-h-sm) min-w-(--era-h-sm) rounded-(--era-rd-sm) pl-(--era-pill-sm)',
-				xxs: 'h-(--era-h-xxs) min-w-(--era-h-xxs) rounded-(--era-rd-xxs) pl-(--era-pill-xxs)'
+				sm: 'h-(--era-h-chip) min-w-(--era-h-chip) rounded-(--era-rd-chip) pl-(--era-chip-px)',
+				xxs: 'h-(--era-h-pill) min-w-(--era-h-pill) rounded-(--era-rd-pill) pl-(--era-pill-px)'
 			},
 			dismissible: { true: '', false: '' }
 		},
 		compoundVariants: [
 			// Text-only: symmetric pill padding, inter-element gap for a lead icon.
-			{ size: 'sm', dismissible: false, class: 'gap-(--era-gap) pr-(--era-pill-sm)' },
-			{ size: 'xxs', dismissible: false, class: 'gap-(--era-gap) pr-(--era-pill-xxs)' },
+			{ size: 'sm', dismissible: false, class: 'gap-(--era-gap) pr-(--era-chip-px)' },
+			{ size: 'xxs', dismissible: false, class: 'gap-(--era-gap) pr-(--era-pill-px)' },
 			// Dismissible, two geometries because the two tiers afford different ones:
 			//
 			//   sm  — the xxs-tier button NESTS, with its concentric gap mirrored as
-			//         the right padding (--era-xxs-inset-sm). 18px of hit target, and
+			//         the right padding (--era-pill-inset-chip). 18px of hit target, and
 			//         since the dismiss glyph is 12px in every box, the ink sits where
 			//         the old 14px button put it — (h − glyph)/2 telescopes.
 			//   xxs — nesting has run out of road: density.css's own note says xxs
@@ -38,8 +38,12 @@
 			//         (pr-0; the button supplies the right edge). Flush means offset
 			//         zero, and at offset zero concentric radius = the chip's own, so
 			//         the cap shares rd-xxs exactly rather than approximating it.
-			{ size: 'sm', dismissible: true, class: 'gap-(--era-xxs-inset-sm) pr-(--era-xxs-inset-sm)' },
-			{ size: 'xxs', dismissible: true, class: 'gap-(--era-xs-inset-xxs) pr-0' }
+			{
+				size: 'sm',
+				dismissible: true,
+				class: 'gap-(--era-pill-inset-chip) pr-(--era-pill-inset-chip)'
+			},
+			{ size: 'xxs', dismissible: true, class: 'gap-(--era-icon-inset-pill) pr-0' }
 		],
 		defaultVariants: { size: 'sm', dismissible: false }
 	});
@@ -61,7 +65,7 @@
 		...restProps
 	}: HTMLAttributes<HTMLDivElement> & {
 		ref?: HTMLDivElement | null;
-		/** `sm` (default) is the standalone free chip; `xxs` is the smaller pill
+		/** `sm` (default) is the standalone free chip; `pill` is the smaller pill
 		 * that nests inside an md container (a select trigger, a button). */
 		size?: 'sm' | 'xxs';
 		ondismiss?: () => void;

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

@@ -1,7 +1,7 @@
 export declare const chipVariants: import("tailwind-variants").TVReturnType<{
     size: {
-        sm: "h-(--era-h-sm) min-w-(--era-h-sm) rounded-(--era-rd-sm) pl-(--era-pill-sm)";
-        xxs: "h-(--era-h-xxs) min-w-(--era-h-xxs) rounded-(--era-rd-xxs) pl-(--era-pill-xxs)";
+        sm: "h-(--era-h-chip) min-w-(--era-h-chip) rounded-(--era-rd-chip) pl-(--era-chip-px)";
+        xxs: "h-(--era-h-pill) min-w-(--era-h-pill) rounded-(--era-rd-pill) pl-(--era-pill-px)";
     };
     dismissible: {
         true: "";
@@ -9,8 +9,8 @@ export declare const chipVariants: import("tailwind-variants").TVReturnType<{
     };
 }, 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", {
     size: {
-        sm: "h-(--era-h-sm) min-w-(--era-h-sm) rounded-(--era-rd-sm) pl-(--era-pill-sm)";
-        xxs: "h-(--era-h-xxs) min-w-(--era-h-xxs) rounded-(--era-rd-xxs) pl-(--era-pill-xxs)";
+        sm: "h-(--era-h-chip) min-w-(--era-h-chip) rounded-(--era-rd-chip) pl-(--era-chip-px)";
+        xxs: "h-(--era-h-pill) min-w-(--era-h-pill) rounded-(--era-rd-pill) pl-(--era-pill-px)";
     };
     dismissible: {
         true: "";
@@ -18,8 +18,8 @@ export declare const chipVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        sm: "h-(--era-h-sm) min-w-(--era-h-sm) rounded-(--era-rd-sm) pl-(--era-pill-sm)";
-        xxs: "h-(--era-h-xxs) min-w-(--era-h-xxs) rounded-(--era-rd-xxs) pl-(--era-pill-xxs)";
+        sm: "h-(--era-h-chip) min-w-(--era-h-chip) rounded-(--era-rd-chip) pl-(--era-chip-px)";
+        xxs: "h-(--era-h-pill) min-w-(--era-h-pill) rounded-(--era-rd-pill) pl-(--era-pill-px)";
     };
     dismissible: {
         true: "";
@@ -30,7 +30,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     ref?: HTMLDivElement | null;
-    /** `sm` (default) is the standalone free chip; `xxs` is the smaller pill
+    /** `sm` (default) is the standalone free chip; `pill` is the smaller pill
      * that nests inside an md container (a select trigger, a button). */
     size?: 'sm' | 'xxs';
     ondismiss?: () => void;

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

@@ -33,19 +33,19 @@
 
      The radius stays rd-lg where the field's is rd-md, and that is the one
      deliberate difference: a container's radius follows its corner REGION, and
-     this corner holds the sm-tier copy button at --era-inset-md, so rd-sm + that
+     this corner holds the sm-tier copy button at --era-inset-control, so rd-sm + that
      inset is what the corner has to be. An md radius here would leave the button
      visibly off its curve. -->
 <div
 	bind:this={ref}
 	class={cn(
-		'relative rounded-(--era-rd-lg) bg-(--era-field-bg) shadow-(--era-shadow-well)',
+		'relative rounded-(--era-rd-bar) bg-(--era-field-bg) shadow-(--era-shadow-well)',
 		className
 	)}
 	{...restProps}
 >
 	<pre
-		class="overflow-x-auto px-(--era-field-px) py-(--era-inset-md) pr-[calc(var(--era-sm-inset-lg)+var(--era-h-sm)+var(--era-field-px))] font-mono text-body leading-body text-fg"><code
+		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
 			>{#if children}{@render children()}{:else}{code}{/if}</code
 		></pre>
 	{#if copyable}
@@ -53,16 +53,16 @@
 		     long lines would show through a chromeless one. It carries the block's
 		     OWN fill, so at rest it is pixel-identical to no background — it just
 		     occludes whatever scrolls beneath. -->
-		<!-- --era-sm-inset-lg on BOTH axes: an sm control in an rd-lg corner, and
+		<!-- --era-chip-inset-bar on BOTH axes: an sm control in an rd-lg corner, and
 		     the token IS the concentric inset for that pairing (rd-lg − rd-sm =
-		     (h-lg − h-sm)/2 — the corner identity). The old offsets centred the
+		     (h-bar − h-chip)/2 — the corner identity). The old offsets centred the
 		     button against the first TEXT LINE with the line-height constant baked
 		     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-sm-inset-lg) right-(--era-sm-inset-lg) bg-(--era-field-bg)"
+			class="absolute top-(--era-chip-inset-bar) right-(--era-chip-inset-bar) bg-(--era-field-bg)"
 		/>
 	{/if}
 </div>

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -8,7 +8,7 @@
 <Command.Item
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-md) px-(--era-inset-md) 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-(--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)',
 		className
 	)}
 	{...restProps}

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

@@ -8,7 +8,7 @@
 <Command.LinkItem
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-md) px-(--era-inset-md) 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-(--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)',
 		className
 	)}
 	{...restProps}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/ui/cycle/cycle.svelte

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

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

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

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

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

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

@@ -8,7 +8,7 @@
 <DatePicker.Day
 	bind:ref
 	class={cn(
-		'inline-flex size-(--era-h-md) cursor-default items-center justify-center rounded-(--era-rd-md) text-body text-fg hover:bg-(--era-highlight) focus:outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[outside-month]:pointer-events-none data-[outside-month]:text-muted/40 data-[selected]:bg-hover data-[selected]:text-bright data-[unavailable]:text-muted data-[unavailable]:line-through',
+		'inline-flex size-(--era-h-control) cursor-default items-center justify-center rounded-(--era-rd-control) text-body text-fg hover:bg-(--era-highlight) focus:outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[outside-month]:pointer-events-none data-[outside-month]:text-muted/40 data-[selected]:bg-hover data-[selected]:text-bright data-[unavailable]:text-muted data-[unavailable]:line-through',
 		className
 	)}
 	{...restProps}

package/dist/ui/date-picker/date-picker-head-cell.svelte

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/ui/date-range-picker/date-range-picker-head-cell.svelte

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

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

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

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

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

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

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