@signal9/era-ui 8.0.0 → 9.0.0

package/dist/ai/suggestion/suggestion.svelte

@@ -16,13 +16,13 @@
 	} = $props();
 </script>
 
-<!-- A standalone pill is the sm tier: h-sm + rd-sm come from the Button
+<!-- A standalone pill is the sm tier: h-chip + rd-sm come from the Button
      variant; the sides take Chip's glyph-advance padding (pill-sm, ~2× the
      vertical inset) so the words breathe. Era pills are rd-sm, not
      full-round — touch mode alone pills the ladder. -->
 <Button
 	size="sm"
-	class={cn('shrink-0 px-(--era-pill-sm)', className)}
+	class={cn('shrink-0 px-(--era-chip-px)', className)}
 	onclick={() => onSelect?.(suggestion)}
 >
 	{#if children}{@render children()}{:else}{suggestion}{/if}

package/dist/ai/swarm/swarm-agent.svelte

@@ -55,7 +55,7 @@
 	tone="well"
 	data-status={agent.status}
 	class={cn(
-		'flex min-w-0 flex-col gap-(--era-gap) p-(--era-pad-sm)',
+		'flex min-w-0 flex-col gap-(--era-gap) p-(--era-pad-panel)',
 		agent.status === 'failed' && 'outline -outline-offset-1 outline-destructive/60',
 		className
 	)}

package/dist/ai/swarm/swarm-artifact.svelte

@@ -40,7 +40,7 @@
 <Card
 	tone="well"
 	data-kind={artifact.kind}
-	class={cn('flex min-w-0 flex-col gap-(--era-gap) p-(--era-pad-sm)', className)}
+	class={cn('flex min-w-0 flex-col gap-(--era-gap) p-(--era-pad-panel)', className)}
 	{...restProps}
 >
 	<div class="flex min-w-0 items-center gap-(--era-gap) text-body era-text-trim">

package/dist/ai/swarm/swarm-barrier.svelte

@@ -41,7 +41,7 @@
 	{...restProps}
 >
 	<div class="flex min-w-0 items-center gap-(--era-gap) text-body era-text-trim">
-		<GitMerge class="size-(--era-h-xs) shrink-0 text-muted" aria-hidden="true" />
+		<GitMerge class="size-(--era-h-icon) shrink-0 text-muted" aria-hidden="true" />
 		<span class="min-w-0 flex-1 truncate text-fg">{barrier.title}</span>
 		{#if barrier.key}
 			<span class="shrink-0 font-mono text-body text-muted">#{barrier.key}</span>

package/dist/ai/swarm/swarm-barriers.svelte

@@ -27,7 +27,7 @@
 {#if barriers.length > 0}
 	<div
 		class={cn(
-			'flex min-w-0 flex-col gap-(--era-pad-sm) border-t border-divider-faded p-(--era-pad-sm)',
+			'flex min-w-0 flex-col gap-(--era-pad-panel) border-t border-divider-faded p-(--era-pad-panel)',
 			className
 		)}
 		{...restProps}

package/dist/ai/swarm/swarm-counts.svelte

@@ -42,7 +42,7 @@
 	{/if}
 	{#if tally.sandboxes > 0}
 		<Badge>
-			<Box class="size-(--era-h-xs)" aria-hidden="true" />
+			<Box class="size-(--era-h-icon)" aria-hidden="true" />
 			{tally.sandboxes}
 		</Badge>
 	{/if}

package/dist/ai/swarm/swarm-footer.svelte

@@ -50,7 +50,7 @@
 
 <div
 	class={cn(
-		'flex h-(--era-h-md) shrink-0 items-center gap-(--era-gap) border-t border-divider-faded px-(--era-inset-md) font-mono text-body era-text-trim',
+		'flex h-(--era-h-control) shrink-0 items-center gap-(--era-gap) border-t border-divider-faded px-(--era-inset-control) font-mono text-body era-text-trim',
 		className
 	)}
 	{...restProps}

package/dist/ai/swarm/swarm-grid.svelte

@@ -34,13 +34,13 @@
      grow with the density axis instead of staying dense-sized in touch mode. -->
 <div
 	class={cn(
-		'grid min-w-0 grid-cols-[repeat(auto-fill,minmax(calc(var(--era-h-lg)*6),1fr))] gap-(--era-gap) p-(--era-gap)',
+		'grid min-w-0 grid-cols-[repeat(auto-fill,minmax(calc(var(--era-h-bar)*6),1fr))] gap-(--era-gap) p-(--era-gap)',
 		className
 	)}
 	{...restProps}
 >
 	{#if nodes.length === 0}
-		<div class="px-(--era-inset-md) py-(--era-gap) text-body text-muted">
+		<div class="px-(--era-inset-control) py-(--era-gap) text-body text-muted">
 			{#if empty}{@render empty()}{:else}No agents yet.{/if}
 		</div>
 	{:else}

package/dist/ai/swarm/swarm-header.svelte

@@ -43,7 +43,7 @@
      the end of a sentence you can hover for, never the count of what failed. -->
 <div
 	class={cn(
-		'flex h-(--era-h-md) shrink-0 items-center gap-(--era-gap) px-(--era-inset-md) text-body era-text-trim',
+		'flex h-(--era-h-control) shrink-0 items-center gap-(--era-gap) px-(--era-inset-control) text-body era-text-trim',
 		className
 	)}
 	{...restProps}

package/dist/ai/swarm/swarm-node.svelte

@@ -160,8 +160,8 @@
 	     highlight instantly so a fast pass down the tree doesn't smear. -->
 	<div
 		class={cn(
-			'flex h-(--era-h-md) items-center gap-(--era-gap) rounded-(--era-rd-md) pl-(--era-inset-md) text-body era-text-trim',
-			hasActions ? 'pr-(--era-xxs-inset-md)' : 'pr-(--era-inset-md)',
+			'flex h-(--era-h-control) items-center gap-(--era-gap) rounded-(--era-rd-control) pl-(--era-inset-control) text-body era-text-trim',
+			hasActions ? 'pr-(--era-pill-inset-control)' : 'pr-(--era-inset-control)',
 			(hasChildren || hasDetail) && 'cursor-pointer',
 			active
 				? 'bg-hover text-bright'
@@ -183,14 +183,14 @@
 			     single source of truth, without the ancestry. -->
 			<ChevronRight
 				class={cn(
-					'size-(--era-h-xs) shrink-0 text-muted transition-transform duration-(--era-duration) ease-(--era-ease)',
+					'size-(--era-h-icon) shrink-0 text-muted transition-transform duration-(--era-duration) ease-(--era-ease)',
 					open && 'rotate-90'
 				)}
 				aria-hidden="true"
 			/>
 		{:else}
 			<!-- Keeps every row's dot on the same column, expandable or not. -->
-			<span class="size-(--era-h-xs) shrink-0" aria-hidden="true"></span>
+			<span class="size-(--era-h-icon) shrink-0" aria-hidden="true"></span>
 		{/if}
 
 		<Dot status={agent.status} />
@@ -225,7 +225,7 @@
 					event.stopPropagation();
 					toggleDetail();
 				}}
-				class="shrink-0 era-interactive cursor-pointer rounded-(--era-rd-xxs) px-(--era-pill-xxs) font-mono text-body era-text-trim text-muted hover:bg-(--era-highlight) hover:text-fg data-[state=open]:bg-hover data-[state=open]:text-fg"
+				class="shrink-0 era-interactive cursor-pointer rounded-(--era-rd-pill) px-(--era-pill-px) font-mono text-body era-text-trim text-muted hover:bg-(--era-highlight) hover:text-fg data-[state=open]:bg-hover data-[state=open]:text-fg"
 			>
 				{detailLabel}
 			</button>
@@ -263,7 +263,7 @@
 		<Collapsible.Root bind:open={detailOpen}>
 			<Collapsible.Content class="era-collapse">
 				<div
-					class="min-w-0 pr-(--era-inset-md) pb-(--era-gap) pl-[calc(var(--era-inset-md)+var(--era-h-xs)+var(--era-gap))]"
+					class="min-w-0 pr-(--era-inset-control) pb-(--era-gap) pl-[calc(var(--era-inset-control)+var(--era-h-icon)+var(--era-gap))]"
 				>
 					{@render detail?.(agent)}
 				</div>
@@ -277,7 +277,7 @@
 			     straight down from the parent's own arrow into its children. -->
 			<div
 				role="group"
-				class="ml-[calc(var(--era-inset-md)+var(--era-h-xs)/2)] border-l border-divider-faded"
+				class="ml-[calc(var(--era-inset-control)+var(--era-h-icon)/2)] border-l border-divider-faded"
 			>
 				{@render children?.()}
 			</div>

package/dist/ai/swarm/swarm-role.svelte

@@ -59,6 +59,6 @@
 	)}
 	{...restProps}
 >
-	<Icon class="size-(--era-h-xs) shrink-0" aria-hidden="true" />
+	<Icon class="size-(--era-h-icon) shrink-0" aria-hidden="true" />
 	{name}
 </span>

package/dist/ai/swarm/swarm-root.svelte

@@ -52,7 +52,7 @@
 <div
 	bind:this={ref}
 	class={cn(
-		'flex min-w-0 flex-col rounded-(--era-rd-lg) bg-(--era-surface-bg) shadow-(--era-shadow)',
+		'flex min-w-0 flex-col rounded-(--era-rd-bar) bg-(--era-surface-bg) shadow-(--era-shadow)',
 		className
 	)}
 	{...restProps}

package/dist/ai/swarm/swarm-sandbox.svelte

@@ -58,16 +58,16 @@
 	<!-- busy: the box PULSES rather than gaining a second glyph — "a command is
 	     streaming through this VM" is motion, and motion is what says it. -->
 	<Box
-		class={cn('size-(--era-h-xs) shrink-0', sandbox.busy && 'animate-pulse')}
+		class={cn('size-(--era-h-icon) shrink-0', sandbox.busy && 'animate-pulse')}
 		aria-hidden="true"
 	/>
 	{#if sandbox.checkpoint}
 		<!-- A paused VM kept as a restore point — the camera badge, as the
 		     reference console draws it. -->
-		<Camera class="size-(--era-icon-xxs) shrink-0" aria-hidden="true" />
+		<Camera class="size-(--era-glyph-pill) shrink-0" aria-hidden="true" />
 	{:else if forkOf}
 		<!-- Live-forked from a parent VM; the lineage is in the title. -->
-		<GitBranch class="size-(--era-icon-xxs) shrink-0" aria-hidden="true" />
+		<GitBranch class="size-(--era-glyph-pill) shrink-0" aria-hidden="true" />
 	{/if}
 	{#if label}<span class="truncate">{sandbox.status}</span>{/if}
 </span>

package/dist/ai/swarm/swarm-tree.svelte

@@ -185,7 +185,7 @@
 	{...restProps}
 >
 	{#if rows.length === 0}
-		<div class="px-(--era-inset-md) py-(--era-gap) text-body text-muted">
+		<div class="px-(--era-inset-control) py-(--era-gap) text-body text-muted">
 			{#if empty}{@render empty()}{:else}No agents yet.{/if}
 		</div>
 	{:else}

package/dist/ai/task/task-content.svelte

@@ -9,7 +9,7 @@
 <!-- The task log rail: items hang off a left border, terminal-trace style. -->
 <Step.Content
 	class={cn(
-		'border-divider-faded border-s-2 bg-transparent p-0 ps-(--era-pad-sm) shadow-none',
+		'border-divider-faded border-s-2 bg-transparent p-0 ps-(--era-pad-panel) shadow-none',
 		className
 	)}
 >

package/dist/ai/task/task-trigger.svelte

@@ -7,6 +7,6 @@
 </script>
 
 <Step.Summary>
-	<Search class="size-(--era-h-xs) shrink-0" aria-hidden="true" />
+	<Search class="size-(--era-h-icon) shrink-0" aria-hidden="true" />
 	{#if children}{@render children()}{:else}{title}{/if}
 </Step.Summary>

package/dist/ai/tool/tool-chip.svelte

@@ -47,14 +47,14 @@
 	data-status={status}
 	{onclick}
 	class={cn(
-		'inline-flex h-(--era-h-xxs) max-w-full min-w-0 shrink-0 era-interactive cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-xxs) px-(--era-pill-xxs) text-body era-text-trim text-muted transition-colors duration-(--era-duration) ease-(--era-ease) hover:bg-(--era-highlight) hover:text-fg',
+		'inline-flex h-(--era-h-pill) max-w-full min-w-0 shrink-0 era-interactive cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-pill) px-(--era-pill-px) text-body era-text-trim text-muted transition-colors duration-(--era-duration) ease-(--era-ease) hover:bg-(--era-highlight) hover:text-fg',
 		active && 'bg-fill text-fg',
 		className
 	)}
 	{...restProps}
 >
 	<Icon
-		class={cn('size-(--era-h-xs) shrink-0', status === 'running' && 'animate-pulse')}
+		class={cn('size-(--era-h-icon) shrink-0', status === 'running' && 'animate-pulse')}
 		aria-hidden="true"
 	/>
 	<span class={cn('min-w-0 truncate', status === 'running' && 'era-shimmer')}>

package/dist/ai/tool/tool-exec.svelte

@@ -19,7 +19,7 @@
 	const failed = $derived(exitCode !== undefined && exitCode !== 0);
 </script>
 
-<div class="flex min-w-0 flex-col gap-(--era-pad-sm)">
+<div class="flex min-w-0 flex-col gap-(--era-pad-panel)">
 	{#if command || failed}
 		<div class="flex min-w-0 items-center gap-(--era-gap)">
 			{#if command}
@@ -39,14 +39,14 @@
 	{#if stdout}
 		<Step.Section label="stdout">
 			<pre
-				class="min-w-0 overflow-x-auto rounded-(--era-rd-md) bg-(--era-field-bg) p-(--era-pad-sm) font-mono text-body whitespace-pre-wrap text-muted shadow-(--era-shadow-well)">{stdout}</pre>
+				class="min-w-0 overflow-x-auto rounded-(--era-rd-control) bg-(--era-field-bg) p-(--era-pad-panel) font-mono text-body whitespace-pre-wrap text-muted shadow-(--era-shadow-well)">{stdout}</pre>
 		</Step.Section>
 	{/if}
 
 	{#if stderr}
 		<Step.Section label="stderr">
 			<pre
-				class="min-w-0 overflow-x-auto rounded-(--era-rd-md) bg-(--era-field-bg) p-(--era-pad-sm) font-mono text-body whitespace-pre-wrap text-destructive shadow-(--era-shadow-well)">{stderr}</pre>
+				class="min-w-0 overflow-x-auto rounded-(--era-rd-control) bg-(--era-field-bg) p-(--era-pad-panel) font-mono text-body whitespace-pre-wrap text-destructive shadow-(--era-shadow-well)">{stderr}</pre>
 		</Step.Section>
 	{/if}
 </div>

package/dist/ai/tool/tool-header.svelte

@@ -14,7 +14,7 @@
 </script>
 
 <Step.Summary>
-	<Wrench class="size-(--era-h-xs) shrink-0" aria-hidden="true" />
+	<Wrench class="size-(--era-h-icon) shrink-0" aria-hidden="true" />
 	<span class="truncate text-fg">{type}</span>
 	{@render children?.()}
 </Step.Summary>

package/dist/ai/web-preview/web-preview.svelte

@@ -17,17 +17,17 @@
 
 <div
 	class={cn(
-		'flex min-h-0 flex-col overflow-hidden rounded-(--era-rd-lg) bg-(--era-surface-bg) shadow-(--era-shadow-lg)',
+		'flex min-h-0 flex-col overflow-hidden rounded-(--era-rd-bar) bg-(--era-surface-bg) shadow-(--era-shadow-lg)',
 		className
 	)}
 >
 	<Bar size="md" class="shrink-0 gap-(--era-gap) rounded-none">
 		<Button icon size="sm" aria-label="Reload" onclick={() => (nonce += 1)}>
-			<RotateCw class="size-(--era-h-xs)" />
+			<RotateCw class="size-(--era-h-icon)" />
 		</Button>
 		<Input
 			bind:value={draft}
-			class="h-(--era-h-sm) flex-1"
+			class="h-(--era-h-chip) flex-1"
 			placeholder="https://…"
 			onkeydown={(e: KeyboardEvent) => {
 				if (e.key === 'Enter') {

package/dist/ai/workflow/canvas.svelte

@@ -12,7 +12,7 @@
 
 <!-- Thin era skin over Svelte Flow — the graph engine is xyflow's. This file
      lives on its own subpath so the dependency stays opt-in. -->
-<SvelteFlow bind:nodes bind:edges fitView class="rounded-(--era-rd-lg) shadow-(--era-shadow)">
+<SvelteFlow bind:nodes bind:edges fitView class="rounded-(--era-rd-bar) shadow-(--era-shadow)">
 	<Background bgColor="var(--color-1)" />
 	<Controls />
 	{@render children?.()}

package/dist/ai/workflow/node.svelte

@@ -12,18 +12,18 @@
 
 <div
 	class={cn(
-		'flex w-56 flex-col overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) text-body shadow-(--era-shadow-lg)',
+		'flex w-56 flex-col overflow-hidden rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) text-body shadow-(--era-shadow-lg)',
 		className
 	)}
 >
 	<Handle type="target" position={Position.Left} />
 	{#if title}
 		<div
-			class="flex h-(--era-h-md) items-center border-b border-divider-faded px-(--era-inset-md) font-medium text-bright"
+			class="flex h-(--era-h-control) items-center border-b border-divider-faded px-(--era-inset-control) font-medium text-bright"
 		>
 			{title}
 		</div>
 	{/if}
-	<div class="p-(--era-inset-md) text-fg">{@render children?.()}</div>
+	<div class="p-(--era-inset-control) text-fg">{@render children?.()}</div>
 	<Handle type="source" position={Position.Right} />
 </div>

package/dist/apps/llm-shell/llm-shell.svelte

@@ -116,7 +116,7 @@
 		<AI.Conversations.Root>
 			{#snippet header()}
 				<Button class="w-full justify-start" onclick={() => onNewChat?.()}>
-					<Plus class="size-xs" aria-hidden="true" />
+					<Plus class="size-icon" aria-hidden="true" />
 					New chat
 				</Button>
 			{/snippet}
@@ -143,7 +143,7 @@
 	<!-- Thread -->
 	<div class="flex min-w-0 flex-1 flex-col">
 		{#if runStatus !== 'idle'}
-			<div class="shrink-0 border-b border-divider px-(--era-pad-md) py-gutter">
+			<div class="shrink-0 border-b border-divider px-(--era-pad-card) py-gutter">
 				<AI.RunStatus.Root
 					status={runStatus}
 					tools={{
@@ -174,7 +174,7 @@
 					{:else}
 						<AI.Conversation.EmptyState title={emptyTitle} description={emptyDescription}>
 							{#snippet icon()}
-								<Sparkles class="size-md text-muted" />
+								<Sparkles class="size-control text-muted" />
 							{/snippet}
 						</AI.Conversation.EmptyState>
 					{/if}
@@ -187,7 +187,7 @@
 			<AI.Conversation.ScrollButton />
 		</AI.Conversation.Root>
 
-		<div class="mx-auto w-full max-w-2xl shrink-0 p-(--era-pad-md) pt-0">
+		<div class="mx-auto w-full max-w-2xl shrink-0 p-(--era-pad-card) pt-0">
 			{#if active && active.messages.length === 0 && suggestions.length > 0}
 				<div class="pb-(--era-gap)">
 					<AI.Suggestions.Root>
@@ -265,7 +265,7 @@
 			{#snippet expanded()}
 				{@const tool = block.tools.find((t) => t.id === openChip)}
 				{#if tool}
-					<Card tone="well" class="flex min-w-0 flex-col gap-(--era-pad-sm) p-(--era-pad-sm)">
+					<Card tone="well" class="flex min-w-0 flex-col gap-(--era-pad-panel) p-(--era-pad-panel)">
 						<AI.Tool.Input input={tool.input} />
 						<AI.Tool.Output output={tool.output} />
 					</Card>
@@ -314,10 +314,10 @@
 		{#if !block.streaming && block.text}
 			<AI.Message.Toolbar>
 				<AI.Actions.Action tooltip="Copy" onclick={() => copyText(block.text)}>
-					<Copy class="size-xs" />
+					<Copy class="size-icon" />
 				</AI.Actions.Action>
 				<AI.Actions.Action tooltip="Regenerate" onclick={() => copyText(block.text)}>
-					<RotateCcw class="size-xs" />
+					<RotateCcw class="size-icon" />
 				</AI.Actions.Action>
 			</AI.Message.Toolbar>
 			{#if block.usage}

package/dist/apps/notes/editor/slash-menu.svelte

@@ -44,16 +44,18 @@
 
 <!-- Rows carry shrink-0 deliberately. This is a flex COLUMN with a capped
      height, so without it flex compresses the children to fit rather than
-     letting the panel scroll: 12 items in an 8-row box rendered every h-md row
+     letting the panel scroll: 12 items in an 8-row box rendered every h-control row
      at 16px against 14px text, which read as a menu with no padding at all.
      overflow-y-auto never engaged, because the content had already been
      squashed to fit. -->
 <div
 	bind:this={list}
-	class="scrollbar-none flex max-h-[calc(var(--era-h-md)*8)] w-max min-w-48 flex-col overflow-y-auto rounded-md bg-elevated p-menu shadow-lg glass-blur"
+	class="scrollbar-none flex max-h-[calc(var(--era-h-control)*8)] w-max min-w-48 flex-col overflow-y-auto rounded-control bg-elevated p-menu shadow-lg glass-blur"
 >
 	{#if items.length === 0}
-		<div class="flex h-md shrink-0 items-center px-inset-md text-body era-text-trim text-muted">
+		<div
+			class="flex h-control shrink-0 items-center px-inset-control text-body era-text-trim text-muted"
+		>
 			No commands
 		</div>
 	{:else}
@@ -61,7 +63,7 @@
 			{@const Icon = item.icon}
 			<button
 				type="button"
-				class="flex h-md w-full shrink-0 cursor-pointer items-center gap-gutter rounded-item px-inset-md text-left text-body era-text-trim text-fg {i ===
+				class="flex h-control w-full shrink-0 cursor-pointer items-center gap-gutter rounded-menu-item px-inset-control text-left text-body era-text-trim text-fg {i ===
 				selected
 					? 'bg-highlight shadow-highlight'
 					: ''}"
@@ -73,7 +75,7 @@
 					onSelect(i);
 				}}
 			>
-				<Icon class="size-xs shrink-0" />
+				<Icon class="size-icon shrink-0" />
 				<span class="flex-1">{item.title}</span>
 				<span class="shrink-0 text-muted">{item.description}</span>
 			</button>

package/dist/apps/notes/notes.svelte

@@ -295,7 +295,7 @@
 		{#if store.loading}
 			<div class="flex flex-col gap-gutter p-gutter">
 				{#each Array.from({ length: 5 }, (_, i) => i) as i (i)}
-					<Skeleton class="h-md rounded-md" />
+					<Skeleton class="h-control rounded-control" />
 				{/each}
 			</div>
 		{:else if visible.length === 0}
@@ -322,7 +322,7 @@
 							     role="option" child of the listbox. A wrapper element there
 							     would put a non-option between them and break the relationship
 							     screen readers rely on.
-							     rounded-md, not rounded-item: item-rd is the radius for a row
+							     rounded-control, not rounded-menu-item: item-rd is the radius for a row
 							     inside a PANEL (it subtracts the panel's frame inset). A list
 							     row on a plain surface takes its own tier radius — the
 							     conversations-rail pattern. -->
@@ -331,7 +331,7 @@
 									{#snippet child({ props })}
 										<div
 											{...props}
-											class="group/row flex h-md cursor-pointer items-center gap-(--era-xxs-inset-md) rounded-md px-(--era-xxs-inset-md) era-text-trim {current
+											class="group/row flex h-control cursor-pointer items-center gap-(--era-pill-inset-control) rounded-control px-(--era-pill-inset-control) era-text-trim {current
 												? 'bg-hover text-bright shadow-(--era-shadow-pressed)'
 												: 'hover:bg-highlight hover:shadow-highlight'}"
 											role="option"
@@ -347,11 +347,11 @@
 												onRowKeydown(e);
 											}}
 										>
-											<span class="flex size-xxs shrink-0 items-center justify-center">
+											<span class="flex size-pill shrink-0 items-center justify-center">
 												{#if note.icon}
 													{note.icon}
 												{:else}
-													<FileText class="size-(--era-icon-xxs) text-muted" />
+													<FileText class="size-(--era-glyph-pill) text-muted" />
 												{/if}
 											</span>
 
@@ -370,7 +370,7 @@
 												{formatAge(note.updatedAt)}
 											</span>
 											<span
-												class="hidden shrink-0 items-center gap-(--era-xxs-inset-md) group-hover/row:flex"
+												class="hidden shrink-0 items-center gap-(--era-pill-inset-control) group-hover/row:flex"
 											>
 												<Button
 													icon
@@ -405,10 +405,10 @@
 								<ContextMenu.Content>
 									<ContextMenu.Item onSelect={() => store.togglePin(note.id)}>
 										{#if note.pinned}
-											<PinOff class="size-xs text-muted" />
+											<PinOff class="size-icon text-muted" />
 											Unpin note
 										{:else}
-											<Pin class="size-xs text-muted" />
+											<Pin class="size-icon text-muted" />
 											Pin note
 										{/if}
 									</ContextMenu.Item>
@@ -419,7 +419,7 @@
 									     uses, not a direct delete: a destructive action should not
 									     get easier to reach by arriving from a different gesture. -->
 									<ContextMenu.Item onSelect={() => (pendingDelete = note.id)}>
-										<Trash2 class="size-xs text-destructive" />
+										<Trash2 class="size-icon text-destructive" />
 										Delete note
 									</ContextMenu.Item>
 								</ContextMenu.Content>

package/dist/dev/audit/audits/_helpers.js

@@ -80,7 +80,7 @@ export function tokenPx(el, name) {
 }
 /** The five tier heights, in px, in the element's density context. */
 export function tiers(el) {
-    return ['--era-h-xs', '--era-h-xxs', '--era-h-sm', '--era-h-md', '--era-h-lg'].map((name) => ({
+    return ['--era-h-icon', '--era-h-pill', '--era-h-chip', '--era-h-control', '--era-h-bar'].map((name) => ({
         name,
         px: tokenPx(el, name)
     }));

package/dist/dev/audit/audits/resting-gap.js

@@ -12,7 +12,7 @@ import { BOUNDED_TIER_MAX } from '../../measure.js';
  *
  * That blind spot shipped: the Switch thumb rested one border-width too far
  * right at BOTH ends, so the gap at the left end and at the right end differed
- * by 2px (dense 5 vs 3, touch 9 vs 7). --era-xs-inset-sm is measured from the
+ * by 2px (dense 5 vs 3, touch 9 vs 7). --era-icon-inset-chip is measured from the
  * track's OUTER edge, but a translate-x starts from the CONTENT box inside the
  * 1px border, so offsetting by the raw token added the border on one side and
  * subtracted it on the other. Vertically it was always right, because

package/dist/dev/audit/audits/single-glyph-square.js

@@ -5,8 +5,8 @@ import { BOUNDED_TIER_MAX } from '../../measure.js';
  *
  * Rule 5: every element that can hold a single glyph carries a min-width equal to
  * its tier height, so one character renders as a perfect square (or circle, once
- * rounded) instead of a skinny vertical pill. Icon buttons take min-w-(--era-h-md);
- * Badge, Chip and the KV value cell take min-w-(--era-h-xxs).
+ * rounded) instead of a skinny vertical pill. Icon buttons take min-w-(--era-h-control);
+ * Badge, Chip and the KV value cell take min-w-(--era-h-pill).
  *
  * Drop the min-width and nothing looks wrong until content happens to BE one
  * character — a badge showing "1", a count that ticks from 10 down to 9 — and the

package/dist/dev/audit-overlay.svelte

@@ -59,10 +59,10 @@
 
 {#if dev && open}
 	<div
-		class="fixed right-4 bottom-4 z-50 flex max-h-[70vh] w-96 flex-col overflow-hidden rounded-(--era-rd-md) bg-surface font-mono text-body shadow-[inset_0_0_0_0.5px_var(--color-border),var(--era-shadow)]"
+		class="fixed right-4 bottom-4 z-50 flex max-h-[70vh] w-96 flex-col overflow-hidden rounded-(--era-rd-control) bg-surface font-mono text-body shadow-[inset_0_0_0_0.5px_var(--color-border),var(--era-shadow)]"
 	>
 		<header
-			class="flex items-center gap-(--era-xs-inset-sm) px-(--era-inset-sm) py-(--era-gap) shadow-[inset_0_-0.5px_0_0_var(--color-border)]"
+			class="flex items-center gap-(--era-icon-inset-chip) px-(--era-inset-chip) py-(--era-gap) shadow-[inset_0_-0.5px_0_0_var(--color-border)]"
 		>
 			<strong class="text-bright">audits</strong>
 			<span class="text-muted">
@@ -81,7 +81,7 @@
 				{@const enabled = registry.isEnabled(r.audit.id)}
 				<details open={r.issues.length > 0}>
 					<summary
-						class="flex cursor-pointer items-center gap-(--era-xs-inset-sm) px-(--era-inset-sm) py-(--era-gap) hover:bg-(--era-highlight)"
+						class="flex cursor-pointer items-center gap-(--era-icon-inset-chip) px-(--era-inset-chip) py-(--era-gap) hover:bg-(--era-highlight)"
 					>
 						<input
 							type="checkbox"
@@ -95,13 +95,13 @@
 						</span>
 					</summary>
 					{#if r.issues.length === 0}
-						<p class="px-(--era-inset-sm) py-(--era-gap) text-muted">
+						<p class="px-(--era-inset-chip) py-(--era-gap) text-muted">
 							{r.audit.description}
 						</p>
 					{:else}
 						{#each r.issues as issue, i (i)}
 							<button
-								class="flex w-full items-start gap-(--era-xs-inset-sm) px-(--era-inset-sm) py-(--era-gap) text-left hover:bg-(--era-highlight)"
+								class="flex w-full items-start gap-(--era-icon-inset-chip) px-(--era-inset-chip) py-(--era-gap) text-left hover:bg-(--era-highlight)"
 								onclick={() => highlight(issue.element)}
 							>
 								<span class="text-destructive">●</span>
@@ -114,9 +114,9 @@
 		</div>
 
 		<footer
-			class="flex items-center gap-(--era-gap) px-(--era-inset-sm) py-(--era-gap) text-muted shadow-[inset_0_0.5px_0_0_var(--color-border)]"
+			class="flex items-center gap-(--era-gap) px-(--era-inset-chip) py-(--era-gap) text-muted shadow-[inset_0_0.5px_0_0_var(--color-border)]"
 		>
-			<kbd class="rounded-(--era-rd-xs) bg-hover px-(--era-inset-sm) text-fg">
+			<kbd class="rounded-(--era-rd-icon) bg-hover px-(--era-inset-chip) text-fg">
 				{isMac ? '⌘' : 'ctrl'}⇧{key.toUpperCase()}
 			</kbd>
 			<span>toggle</span>

package/dist/dev/measure.d.ts

@@ -13,7 +13,7 @@ export declare const TOL = 0.5;
  * that false positive: a Card reported "radius step 5 ≠ implied gap 32.5"
  * because its 57px optical padding was read as if it were a tier inset.
  *
- * The tallest tier is --era-h-lg, which peaks at 64px on touch.
+ * The tallest tier is --era-h-bar, which peaks at 64px on touch.
  */
 export declare const BOUNDED_TIER_MAX = 64;
 /**

package/dist/dev/measure.js

@@ -34,7 +34,7 @@ export const TOL = 0.5;
  * that false positive: a Card reported "radius step 5 ≠ implied gap 32.5"
  * because its 57px optical padding was read as if it were a tier inset.
  *
- * The tallest tier is --era-h-lg, which peaks at 64px on touch.
+ * The tallest tier is --era-h-bar, which peaks at 64px on touch.
  */
 export const BOUNDED_TIER_MAX = 64;
 /**

package/dist/docs/badge.md

@@ -15,4 +15,4 @@
 
 - Non-interactive. For dismissible tokens use `Chip`. For labelled pairs use `KV`.
 - Uses the `xxs` tier tokens (height, radius, inset).
-- Inter-icon gap tightens to `--era-inset-xxs` when an SVG is present.
+- Inter-icon gap tightens to `--era-inset-pill` when an SVG is present.

package/dist/docs/css-utilities.d.ts

@@ -3,7 +3,7 @@ export interface CssUtility {
     name: string;
     /**
      * Every class the doc comment governs. Usually one; a scale documented as a
-     * run of consecutive `@utility` blocks under a single comment (h-xs … h-lg)
+     * run of consecutive `@utility` blocks under a single comment (h-icon … h-bar)
      * lists the whole ladder.
      */
     names: string[];