@signal9/era-ui 9.0.0 → 10.0.0

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

@@ -4,10 +4,10 @@
 	let { onclick }: { onclick?: (e: MouseEvent) => void } = $props();
 </script>
 
-<!-- size="xxs", the close-affordance tier (Pane.Close, the chip dismiss): an
+<!-- size="pill", the close-affordance tier (Pane.Close, the chip dismiss): an
      18px hit target whose tier draws the 12px dismiss ink by itself. The <X>
      used to carry size-(--era-h-icon) — a class the Button variant's [&_svg]
      selector outranks, so it claimed 14px while 10 shipped. -->
-<Button icon size="xxs" aria-label="Close" {onclick}>
+<Button icon size="pill" aria-label="Close" {onclick}>
 	<X />
 </Button>

package/dist/ai/checkpoint.svelte

@@ -20,7 +20,7 @@
 
 <div class={cn('flex w-full items-center gap-(--era-gap) text-muted', className)}>
 	<Bookmark class="size-(--era-h-icon) shrink-0" aria-hidden="true" />
-	<Button variant="link" size="sm" onclick={onRestore}>
+	<Button variant="link" size="chip" onclick={onRestore}>
 		{#if children}{@render children()}{:else}{label}{/if}
 	</Button>
 	<Separator class="flex-1" />

package/dist/ai/context/context.svelte

@@ -23,7 +23,7 @@
 </script>
 
 <Popover.Root>
-	<Popover.Trigger size="sm" class={cn('gap-(--era-gap) tabular-nums', className)}>
+	<Popover.Trigger size="chip" class={cn('gap-(--era-gap) tabular-nums', className)}>
 		{Math.round(percent * 100)}%
 		<svg viewBox="0 0 24 24" class="size-(--era-h-icon) -rotate-90" aria-hidden="true">
 			<circle cx="12" cy="12" r="10" fill="none" stroke="var(--color-3)" stroke-width="3" />

package/dist/ai/conversation/conversation-scroll-button.svelte

@@ -16,7 +16,7 @@
 	>
 		<Button
 			icon
-			size="default"
+			size="control"
 			aria-label="Scroll to bottom"
 			class="rounded-full shadow-(--era-shadow-lg)"
 			onclick={() => stick.repin()}

package/dist/ai/conversations/conversations-item.svelte

@@ -203,7 +203,7 @@
 	>
 		<Button
 			icon
-			size="xxs"
+			size="pill"
 			aria-label={starred ? 'Unstar conversation' : 'Star conversation'}
 			aria-pressed={starred}
 			onclick={toggleStar}
@@ -212,14 +212,14 @@
 		</Button>
 
 		{#if showCancel}
-			<Button icon size="xxs" aria-label="Cancel generation" onclick={() => onCancel?.()}>
+			<Button icon size="pill" aria-label="Cancel generation" onclick={() => onCancel?.()}>
 				<X class="size-(--era-h-icon)" />
 			</Button>
 		{/if}
 
 		<Button
 			icon
-			size="xxs"
+			size="pill"
 			tone="destructive"
 			active={armed}
 			aria-label={armed ? 'Confirm delete conversation' : 'Delete conversation'}

package/dist/ai/message/message-branch-selector.svelte

@@ -12,13 +12,13 @@
 
 {#if ctrl.total > 1}
 	<ButtonGroup class={cn(className)}>
-		<Button icon size="sm" aria-label="Previous version" onclick={() => ctrl.previous()}>
+		<Button icon size="chip" aria-label="Previous version" onclick={() => ctrl.previous()}>
 			<ChevronLeft class="size-(--era-h-icon)" />
 		</Button>
 		<span class="flex items-center px-(--era-inset-chip) text-body text-muted tabular-nums">
 			{ctrl.current + 1} of {ctrl.total}
 		</span>
-		<Button icon size="sm" aria-label="Next version" onclick={() => ctrl.next()}>
+		<Button icon size="chip" aria-label="Next version" onclick={() => ctrl.next()}>
 			<ChevronRight class="size-(--era-h-icon)" />
 		</Button>
 	</ButtonGroup>

package/dist/ai/prompt-input/prompt-input-add-attachments.svelte

@@ -7,6 +7,6 @@
 	const attachments = getAttachmentsContext();
 </script>
 
-<Button icon size="default" aria-label={label} onclick={() => attachments.openFileDialog()}>
+<Button icon size="control" aria-label={label} onclick={() => attachments.openFileDialog()}>
 	<Plus class="size-(--era-h-icon)" />
 </Button>

package/dist/ai/prompt-input/prompt-input-submit.svelte

@@ -26,7 +26,7 @@
      resubmitting. -->
 <Button
 	icon
-	size="default"
+	size="control"
 	tone={generating ? 'default' : 'accent'}
 	type={generating ? 'button' : 'submit'}
 	aria-label={generating ? 'Stop' : 'Send'}

package/dist/ai/run-status/run-status.svelte

@@ -115,7 +115,7 @@
 		<div class="flex-1"></div>
 
 		{#if style.active && oncancel}
-			<Button size="xs" tone="destructive" onclick={() => oncancel?.()}>
+			<Button size="icon" tone="destructive" onclick={() => oncancel?.()}>
 				<X class="size-(--era-h-icon)" aria-hidden="true" />
 				Cancel
 			</Button>

package/dist/ai/suggestion/suggestion.svelte

@@ -21,7 +21,7 @@
      vertical inset) so the words breathe. Era pills are rd-sm, not
      full-round — touch mode alone pills the ladder. -->
 <Button
-	size="sm"
+	size="chip"
 	class={cn('shrink-0 px-(--era-chip-px)', className)}
 	onclick={() => onSelect?.(suggestion)}
 >

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

@@ -60,7 +60,7 @@
 {#if cancel}
 	<Button
 		icon
-		size="xxs"
+		size="pill"
 		tone="destructive"
 		aria-label="Cancel {agent.task}"
 		onclick={(event: MouseEvent) => {
@@ -74,7 +74,7 @@
 {#if open}
 	<Button
 		icon
-		size="xxs"
+		size="pill"
 		aria-label="Open {agent.task}"
 		onclick={(event: MouseEvent) => {
 			event.stopPropagation();

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

@@ -21,8 +21,8 @@
 		className
 	)}
 >
-	<Bar size="md" class="shrink-0 gap-(--era-gap) rounded-none">
-		<Button icon size="sm" aria-label="Reload" onclick={() => (nonce += 1)}>
+	<Bar size="control" class="shrink-0 gap-(--era-gap) rounded-none">
+		<Button icon size="chip" aria-label="Reload" onclick={() => (nonce += 1)}>
 			<RotateCw class="size-(--era-h-icon)" />
 		</Button>
 		<Input

package/dist/apps/notes/editor/bubble-toolbar.svelte

@@ -31,15 +31,15 @@
      leaves no discernible edge. border-divider-faded is the token'd hairline, so
      it still tracks the surface rather than being a drawn-on line. -->
 <Bar
-	size="md"
-	content="xxs"
+	size="control"
+	content="pill"
 	class="w-max border border-divider-faded bg-elevated shadow-lg glass-blur"
 >
 	{#each items as item (item.mark)}
 		{@const Icon = item.icon}
 		<Button
 			icon
-			size="xxs"
+			size="pill"
 			active={active[item.mark] ?? false}
 			aria-label={item.label}
 			title={item.label}

package/dist/apps/notes/notes.svelte

@@ -165,7 +165,7 @@
 
 {#snippet iconPicker(note: Note)}
 	<Popover.Root bind:open={iconPickerOpen}>
-		<Popover.Trigger icon size="xxs" aria-label="Change icon" title="Change icon">
+		<Popover.Trigger icon size="pill" aria-label="Change icon" title="Change icon">
 			{#if note.icon}
 				<span aria-hidden="true">{note.icon}</span>
 			{:else}
@@ -179,7 +179,7 @@
 						{#each row as glyph (glyph)}
 							<Button
 								icon
-								size="default"
+								size="control"
 								active={note.icon === glyph}
 								aria-label={glyph}
 								onclick={() => {
@@ -194,7 +194,7 @@
 				{/each}
 				{#if note.icon}
 					<Button
-						size="sm"
+						size="chip"
 						class="w-full"
 						onclick={() => {
 							store.setIcon(note.id, null);
@@ -219,7 +219,7 @@
 {#snippet titleField(note: Note, cls: string)}
 	<Input
 		reveal
-		size="xxs"
+		size="pill"
 		class={cls}
 		aria-label="Note title"
 		placeholder="Untitled"
@@ -265,7 +265,7 @@
 >
 	<!-- Sidebar: filter + note list -->
 	<div class="flex w-56 shrink-0 flex-col border-r border-divider-faded">
-		<!-- content="xxs": 24/30/36/48 of chrome around an 18/20/22/26 field and
+		<!-- content="pill": 24/30/36/48 of chrome around an 18/20/22/26 field and
 		     button, with Bar deriving the two-tier concentric inset. A notes sidebar
 		     is chrome around a list; at the lg/md pairing it was a 32px bar over
 		     24px rows and the chrome outweighed the content. This is the tier pair
@@ -277,17 +277,17 @@
 		     centred in 23px and sat 2.5px from the top against a 3px wall. Outset
 		     costs no layout, so the bar keeps its full tier height and every child
 		     sits the wall's distance from all four edges. -->
-		<Bar size="md" content="xxs" divider class="rounded-none">
+		<Bar size="control" content="pill" divider class="rounded-none">
 			<Input
 				icon={Search}
-				size="xxs"
+				size="pill"
 				class="min-w-0 flex-1"
 				type="text"
 				placeholder="Filter…"
 				aria-label="Filter notes"
 				bind:value={query}
 			/>
-			<Button icon size="xxs" aria-label="New note" title="New note" onclick={createNote}>
+			<Button icon size="pill" aria-label="New note" title="New note" onclick={createNote}>
 				<Plus />
 			</Button>
 		</Bar>
@@ -374,7 +374,7 @@
 											>
 												<Button
 													icon
-													size="xxs"
+													size="pill"
 													aria-label={note.pinned ? 'Unpin note' : 'Pin note'}
 													title={note.pinned ? 'Unpin note' : 'Pin note'}
 													active={note.pinned}
@@ -387,7 +387,7 @@
 												</Button>
 												<Button
 													icon
-													size="xxs"
+													size="pill"
 													tone="destructive"
 													aria-label="Delete note"
 													title="Delete note"
@@ -444,7 +444,7 @@
 			     header (see the snippets below) lives in the pane bar's centre and
 			     drawing it twice would title the document twice. -->
 			{#if !pane}
-				<Bar size="md" content="xxs" divider class="rounded-none">
+				<Bar size="control" content="pill" divider class="rounded-none">
 					{@render iconPicker(selected)}
 					{@render titleField(selected, 'min-w-0 flex-1')}
 					<!-- Fixed-width so the badge appearing and clearing never nudges the

package/dist/generated-docs/bar.md

@@ -15,8 +15,8 @@ Inherits all props from `HTMLAttributes<HTMLDivElement>`.
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `ref?` | `HTMLDivElement \| null` | `null` | bindable |
-| `size?` | `'sm' \| 'md' \| 'lg'` | `'lg'` | Height tier (scales with density). Default `lg` — a full toolbar. |
-| `content?` | `'tier' \| 'xxs'` | `'tier'` | Tier of the controls inside — drives the bar's padding and gap so they
+| `size?` | `'chip' \| 'control' \| 'bar'` | `'bar'` | Height tier (scales with density). Default `lg` — a full toolbar. |
+| `content?` | `'tier' \| 'pill'` | `'tier'` | Tier of the controls inside — drives the bar's padding and gap so they
 stay concentric to them. `tier` (default) is one tier smaller; `pill` is
 the compact pairing (pills/fields in an sm or md bar). |
 | `divider?` | `boolean` | `false` | The flush cap-a-panel chrome: outset divider below, bottom rd-md. |

package/dist/generated-docs/button.md

@@ -15,7 +15,7 @@ Inherits all props from `Button.RootProps`.
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `tone?` | `'default' \| 'accent' \| 'destructive' \| 'success' \| 'warning'` | `'default'` | — |
-| `size?` | `'default' \| 'sm' \| 'xxs' \| 'xs' \| 'icon'` | `'default'` | — |
+| `size?` | `'control' \| 'chip' \| 'pill' \| 'icon'` | `'control'` | — |
 | `variant?` | `'filled' \| 'link'` | `'filled'` | — |
 | `active?` | `boolean` | `false` | — |
 | `icon?` | `boolean` | `false` | — |

package/dist/generated-docs/chip.md

@@ -15,7 +15,7 @@ Inherits all props from `HTMLAttributes<HTMLDivElement>`.
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `ref?` | `HTMLDivElement \| null` | `null` | bindable |
-| `size?` | `'sm' \| 'xxs'` | `'sm'` | `sm` (default) is the standalone free chip; `pill` is the smaller pill
+| `size?` | `'chip' \| 'pill'` | `'chip'` | `sm` (default) is the standalone free chip; `pill` is the smaller pill
 that nests inside an md container (a select trigger, a button). |
 | `ondismiss?` | `() => void` | — | — |
 | `children?` | `Snippet` | — | — |

package/dist/generated-docs/input.md

@@ -16,7 +16,7 @@ Inherits all props from `Omit<HTMLInputAttributes, 'size'>`.
 |------|------|---------|-------|
 | `ref?` | `HTMLInputElement \| null` | `null` | bindable |
 | `icon?` | `Component<IconProps> \| null` | `null` | Lucide glyph rendered inside the field, left of the text. |
-| `size?` | `'md' \| 'xxs'` | `'md'` | Field tier. `pill` is badge height — for compact chrome where the field
+| `size?` | `'control' \| 'pill'` | `'control'` | Field tier. `pill` is badge height — for compact chrome where the field
 sits level with xxs buttons. See inputVariants. |
 | `bare?` | `boolean` | `false` | Drop the field chrome — for an input inside a container that is already the field. |
 | `reveal?` | `boolean` | `false` | Hold the field chrome back until hover — for a title or label that IS the content. |

package/dist/generated-docs/llms-full.txt

@@ -966,8 +966,8 @@ Inherits all props from `HTMLAttributes<HTMLDivElement>`.
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `ref?` | `HTMLDivElement \| null` | `null` | bindable |
-| `size?` | `'sm' \| 'md' \| 'lg'` | `'lg'` | Height tier (scales with density). Default `lg` — a full toolbar. |
-| `content?` | `'tier' \| 'xxs'` | `'tier'` | Tier of the controls inside — drives the bar's padding and gap so they
+| `size?` | `'chip' \| 'control' \| 'bar'` | `'bar'` | Height tier (scales with density). Default `lg` — a full toolbar. |
+| `content?` | `'tier' \| 'pill'` | `'tier'` | Tier of the controls inside — drives the bar's padding and gap so they
 stay concentric to them. `tier` (default) is one tier smaller; `pill` is
 the compact pairing (pills/fields in an sm or md bar). |
 | `divider?` | `boolean` | `false` | The flush cap-a-panel chrome: outset divider below, bottom rd-md. |
@@ -994,7 +994,7 @@ Inherits all props from `Button.RootProps`.
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `tone?` | `'default' \| 'accent' \| 'destructive' \| 'success' \| 'warning'` | `'default'` | — |
-| `size?` | `'default' \| 'sm' \| 'xxs' \| 'xs' \| 'icon'` | `'default'` | — |
+| `size?` | `'control' \| 'chip' \| 'pill' \| 'icon'` | `'control'` | — |
 | `variant?` | `'filled' \| 'link'` | `'filled'` | — |
 | `active?` | `boolean` | `false` | — |
 | `icon?` | `boolean` | `false` | — |
@@ -1142,7 +1142,7 @@ Inherits all props from `HTMLAttributes<HTMLDivElement>`.
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `ref?` | `HTMLDivElement \| null` | `null` | bindable |
-| `size?` | `'sm' \| 'xxs'` | `'sm'` | `sm` (default) is the standalone free chip; `pill` is the smaller pill
+| `size?` | `'chip' \| 'pill'` | `'chip'` | `sm` (default) is the standalone free chip; `pill` is the smaller pill
 that nests inside an md container (a select trigger, a button). |
 | `ondismiss?` | `() => void` | — | — |
 | `children?` | `Snippet` | — | — |
@@ -2933,7 +2933,7 @@ Inherits all props from `Omit<HTMLInputAttributes, 'size'>`.
 |------|------|---------|-------|
 | `ref?` | `HTMLInputElement \| null` | `null` | bindable |
 | `icon?` | `Component<IconProps> \| null` | `null` | Lucide glyph rendered inside the field, left of the text. |
-| `size?` | `'md' \| 'xxs'` | `'md'` | Field tier. `pill` is badge height — for compact chrome where the field
+| `size?` | `'control' \| 'pill'` | `'control'` | Field tier. `pill` is badge height — for compact chrome where the field
 sits level with xxs buttons. See inputVariants. |
 | `bare?` | `boolean` | `false` | Drop the field chrome — for an input inside a container that is already the field. |
 | `reveal?` | `boolean` | `false` | Hold the field chrome back until hover — for a title or label that IS the content. |

package/dist/generated-docs/manifest.json

@@ -159,7 +159,7 @@
       "slug": "bar",
       "title": "Bar",
       "summary": "A flex container for toolbars and headers, in three heights.",
-      "tokenEstimate": 206,
+      "tokenEstimate": 209,
       "sections": [
         "Import",
         "Props"
@@ -170,7 +170,7 @@
       "slug": "button",
       "title": "Button",
       "summary": "A flexible button or link element.",
-      "tokenEstimate": 453,
+      "tokenEstimate": 451,
       "sections": [
         "Import",
         "Props",
@@ -216,7 +216,7 @@
       "slug": "chip",
       "title": "Chip",
       "summary": "An interactive, optionally dismissible token.",
-      "tokenEstimate": 270,
+      "tokenEstimate": 272,
       "sections": [
         "Import",
         "Props",
@@ -635,7 +635,7 @@
       "slug": "input",
       "title": "Input",
       "summary": "A text input field, with textarea variant.",
-      "tokenEstimate": 219,
+      "tokenEstimate": 222,
       "sections": [
         "Import",
         "Props"

package/dist/os/notification-center.svelte

@@ -95,7 +95,7 @@
 
 			{#if notif.items.length}
 				<footer class="shrink-0 border-t border-divider-faded p-(--era-inset-chip)">
-					<Button variant="link" size="sm" class="w-full" onclick={() => notif.clear()}>
+					<Button variant="link" size="chip" class="w-full" onclick={() => notif.clear()}>
 						Clear all
 					</Button>
 				</footer>

package/dist/os/pane.svelte

@@ -124,7 +124,7 @@
 			     held preview recolours to the action it will commit — yellow for
 			     minimize, green for maximize — so the tone and glyph agree on what
 			     the release does. -->
-			<!-- size="xxs" is the handle's content tier (see Pane.Handle), and the glyph
+			<!-- size="pill" is the handle's content tier (see Pane.Handle), and the glyph
 			     matches Pane.Close exactly — sp+5, off the sub-tier ladder for the
 			     reason documented there. The two close affordances have to read as one
 			     weight, so whatever that one is, both take it.
@@ -138,7 +138,7 @@
 			     plain size-* on the <svg> loses to it. -->
 			<Button
 				icon
-				size="xxs"
+				size="pill"
 				tone={armed === 'minimize' ? 'warning' : armed === 'maximize' ? 'success' : 'destructive'}
 				class={armed === 'maximize'
 					? '[&_svg]:size-(--era-glyph-pill)'

package/dist/os/taskbar.svelte

@@ -234,7 +234,7 @@
 	{#if pinned.length}
 		<div class="flex shrink-0 items-center gap-(--era-gap)">
 			{#each pinned as p (p.appId)}
-				<Button icon size="default" aria-label={p.title} onclick={() => pm.open(p.appId)}>
+				<Button icon size="control" aria-label={p.title} onclick={() => pm.open(p.appId)}>
 					{#if p.icon}{@const Icon = p.icon}<Icon class="size-(--era-h-icon)" />{/if}
 				</Button>
 			{/each}
@@ -288,7 +288,7 @@
 			{#each pm.workspaces as ws, i (ws.id)}
 				<Button
 					icon
-					size="default"
+					size="control"
 					active={pm.activeWorkspaceId === ws.id}
 					title={ws.name}
 					aria-label="Switch to workspace {i + 1} ({ws.name})"
@@ -308,7 +308,7 @@
 		     consumers' own affordances). -->
 		{#if notif.unread > 0}
 			<div class="relative">
-				<Button icon size="default" aria-label="Notifications" onclick={onNotifications}>
+				<Button icon size="control" aria-label="Notifications" onclick={onNotifications}>
 					<Bell class="size-(--era-h-icon)" />
 				</Button>
 				<span
@@ -347,7 +347,7 @@
 		     add rounded-full — a circle is not era's button language. -->
 		<Button
 			icon
-			size="default"
+			size="control"
 			tone="accent"
 			aria-label="Open command bar"
 			class="shadow-(--era-shadow-lg)"

package/dist/os/toast.svelte

@@ -36,7 +36,7 @@
 			     variant's [&_svg] selector and never applied). -->
 			<Button
 				icon
-				size="xxs"
+				size="pill"
 				aria-label="Dismiss"
 				class="-mt-1 -mr-1 shrink-0"
 				onclick={() => notif.dismiss(n.id)}
@@ -49,7 +49,7 @@
 			<div class="mt-(--era-inset-chip) flex flex-wrap gap-(--era-gap)">
 				{#each n.actions as action (action.label)}
 					<Button
-						size="xs"
+						size="icon"
 						tone={n.tone === 'default' ? 'default' : n.tone}
 						onclick={() => {
 							action.onClick();

package/dist/ui/bar/bar.svelte

@@ -13,9 +13,9 @@
 		base: 'flex items-center era-text-trim',
 		variants: {
 			size: {
-				sm: 'h-(--era-h-chip) rounded-(--era-rd-chip)',
-				md: 'h-(--era-h-control) rounded-(--era-rd-control)',
-				lg: 'h-(--era-h-bar) rounded-(--era-rd-bar)'
+				chip: 'h-(--era-h-chip) rounded-(--era-rd-chip)',
+				control: 'h-(--era-h-control) rounded-(--era-rd-control)',
+				bar: 'h-(--era-h-bar) rounded-(--era-rd-bar)'
 			},
 			/**
 			 * The tier of the CONTROLS inside, because that is what the bar's own
@@ -33,7 +33,7 @@
 			 */
 			content: {
 				tier: 'gap-(--era-icon-inset-chip) px-(--era-icon-inset-chip)',
-				xxs: ''
+				pill: ''
 			},
 			/**
 			 * The flush header bar capping a panel — Pane.Handle, Dialog.Header,
@@ -61,8 +61,8 @@
 		compoundVariants: [
 			// control ⊃ pill = (3sp − sp − 10)/2 — the named token.
 			{
-				size: 'md',
-				content: 'xxs',
+				size: 'control',
+				content: 'pill',
 				class: 'gap-(--era-pill-inset-control) px-(--era-pill-inset-control)'
 			},
 			// chip ⊃ pill — its own token, not the text inset it used to borrow. The two
@@ -70,12 +70,12 @@
 			// 12px broke the tie and left this pairing a pixel wide. (bar ⊃ pill has no
 			// token because nothing pairs a page header with pill-tier controls.)
 			{
-				size: 'sm',
-				content: 'xxs',
+				size: 'chip',
+				content: 'pill',
 				class: 'gap-(--era-pill-inset-chip) px-(--era-pill-inset-chip)'
 			}
 		],
-		defaultVariants: { size: 'lg', content: 'tier', divider: false }
+		defaultVariants: { size: 'bar', content: 'tier', divider: false }
 	});
 </script>
 
@@ -85,7 +85,7 @@
 
 	let {
 		ref = $bindable(null),
-		size = 'lg',
+		size = 'bar',
 		content = 'tier',
 		divider = false,
 		children,
@@ -94,13 +94,13 @@
 	}: HTMLAttributes<HTMLDivElement> & {
 		ref?: HTMLDivElement | null;
 		/** Height tier (scales with density). Default `lg` — a full toolbar. */
-		size?: 'sm' | 'md' | 'lg';
+		size?: 'chip' | 'control' | 'bar';
 		/**
 		 * Tier of the controls inside — drives the bar's padding and gap so they
 		 * stay concentric to them. `tier` (default) is one tier smaller; `pill` is
 		 * the compact pairing (pills/fields in an sm or md bar).
 		 */
-		content?: 'tier' | 'xxs';
+		content?: 'tier' | 'pill';
 		/** The flush cap-a-panel chrome: outset divider below, bottom rd-md. */
 		divider?: boolean;
 		children?: Snippet;

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

@@ -1,8 +1,8 @@
 export declare const barVariants: import("tailwind-variants").TVReturnType<{
     size: {
-        sm: "h-(--era-h-chip) rounded-(--era-rd-chip)";
-        md: "h-(--era-h-control) rounded-(--era-rd-control)";
-        lg: "h-(--era-h-bar) rounded-(--era-rd-bar)";
+        chip: "h-(--era-h-chip) rounded-(--era-rd-chip)";
+        control: "h-(--era-h-control) rounded-(--era-rd-control)";
+        bar: "h-(--era-h-bar) rounded-(--era-rd-bar)";
     };
     /**
      * The tier of the CONTROLS inside, because that is what the bar's own
@@ -20,7 +20,7 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      */
     content: {
         tier: "gap-(--era-icon-inset-chip) px-(--era-icon-inset-chip)";
-        xxs: "";
+        pill: "";
     };
     /**
      * The flush header bar capping a panel — Pane.Handle, Dialog.Header,
@@ -46,9 +46,9 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, "flex items-center era-text-trim", {
     size: {
-        sm: "h-(--era-h-chip) rounded-(--era-rd-chip)";
-        md: "h-(--era-h-control) rounded-(--era-rd-control)";
-        lg: "h-(--era-h-bar) rounded-(--era-rd-bar)";
+        chip: "h-(--era-h-chip) rounded-(--era-rd-chip)";
+        control: "h-(--era-h-control) rounded-(--era-rd-control)";
+        bar: "h-(--era-h-bar) rounded-(--era-rd-bar)";
     };
     /**
      * The tier of the CONTROLS inside, because that is what the bar's own
@@ -66,7 +66,7 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      */
     content: {
         tier: "gap-(--era-icon-inset-chip) px-(--era-icon-inset-chip)";
-        xxs: "";
+        pill: "";
     };
     /**
      * The flush header bar capping a panel — Pane.Handle, Dialog.Header,
@@ -92,9 +92,9 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        sm: "h-(--era-h-chip) rounded-(--era-rd-chip)";
-        md: "h-(--era-h-control) rounded-(--era-rd-control)";
-        lg: "h-(--era-h-bar) rounded-(--era-rd-bar)";
+        chip: "h-(--era-h-chip) rounded-(--era-rd-chip)";
+        control: "h-(--era-h-control) rounded-(--era-rd-control)";
+        bar: "h-(--era-h-bar) rounded-(--era-rd-bar)";
     };
     /**
      * The tier of the CONTROLS inside, because that is what the bar's own
@@ -112,7 +112,7 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      */
     content: {
         tier: "gap-(--era-icon-inset-chip) px-(--era-icon-inset-chip)";
-        xxs: "";
+        pill: "";
     };
     /**
      * The flush header bar capping a panel — Pane.Handle, Dialog.Header,
@@ -142,13 +142,13 @@ import type { Snippet } from 'svelte';
 type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     ref?: HTMLDivElement | null;
     /** Height tier (scales with density). Default `lg` — a full toolbar. */
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'chip' | 'control' | 'bar';
     /**
      * Tier of the controls inside — drives the bar's padding and gap so they
      * stay concentric to them. `tier` (default) is one tier smaller; `pill` is
      * the compact pairing (pills/fields in an sm or md bar).
      */
-    content?: 'tier' | 'xxs';
+    content?: 'tier' | 'pill';
     /** The flush cap-a-panel chrome: outset divider below, bottom rd-md. */
     divider?: boolean;
     children?: Snippet;

package/dist/ui/button/button.svelte

@@ -8,7 +8,7 @@
 	let {
 		ref = $bindable(null),
 		tone = 'default',
-		size = 'default',
+		size = 'control',
 		variant = 'filled',
 		active = false,
 		icon = false,
@@ -20,7 +20,7 @@
 		...restProps
 	}: Button.RootProps & {
 		tone?: 'default' | 'accent' | 'destructive' | 'success' | 'warning';
-		size?: 'default' | 'sm' | 'xxs' | 'xs' | 'icon';
+		size?: 'control' | 'chip' | 'pill' | 'icon';
 		variant?: 'filled' | 'link';
 		active?: boolean;
 		icon?: boolean;
@@ -50,7 +50,7 @@
 	`size` is exposed for the same reason: bevel sinks a pressed icon by a fixed
 	1px, which is ~4% of a default button but ~7% of a 14px icon button, so the
 	smallest tier reads as over-travelling. The surface halves the sink for
-	size="xs"/"icon" (see bevel.css), and it can only do that if the size is on the
+	size="icon"/"icon" (see bevel.css), and it can only do that if the size is on the
 	DOM. Geometry lives in tv() compound classes, which CSS cannot query.
 -->
 <Button.Root

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

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import { Button } from 'bits-ui';
 type $$ComponentProps = Button.RootProps & {
     tone?: 'default' | 'accent' | 'destructive' | 'success' | 'warning';
-    size?: 'default' | 'sm' | 'xxs' | 'xs' | 'icon';
+    size?: 'control' | 'chip' | 'pill' | 'icon';
     variant?: 'filled' | 'link';
     active?: boolean;
     icon?: boolean;

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

@@ -3,7 +3,7 @@ export { Button };
 export { buttonVariants } from './variants.js';
 export interface ButtonVariants {
     tone?: 'default' | 'accent' | 'destructive' | 'success' | 'warning';
-    size?: 'default' | 'sm' | 'xxs' | 'xs' | 'icon';
+    size?: 'control' | 'chip' | 'pill' | 'icon';
     variant?: 'filled' | 'link';
     icon?: boolean;
     active?: boolean;

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

@@ -11,10 +11,9 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         warning: "";
     };
     size: {
-        default: "";
-        sm: "";
-        xxs: "";
-        xs: "";
+        control: "";
+        chip: "";
+        pill: "";
         icon: "";
     };
     icon: {
@@ -36,10 +35,9 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         warning: "";
     };
     size: {
-        default: "";
-        sm: "";
-        xxs: "";
-        xs: "";
+        control: "";
+        chip: "";
+        pill: "";
         icon: "";
     };
     icon: {
@@ -61,10 +59,9 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         warning: "";
     };
     size: {
-        default: "";
-        sm: "";
-        xxs: "";
-        xs: "";
+        control: "";
+        chip: "";
+        pill: "";
         icon: "";
     };
     icon: {

package/dist/ui/button/variants.js

@@ -16,7 +16,7 @@ export const buttonVariants = tv({
             link: 'inline-flex underline-offset-2 hover:underline'
         },
         tone: { default: '', accent: '', destructive: '', success: '', warning: '' },
-        size: { default: '', sm: '', xxs: '', xs: '', icon: '' },
+        size: { control: '', chip: '', pill: '', icon: '' },
         icon: { true: '' },
         active: { true: '' }
     },
@@ -24,22 +24,22 @@ export const buttonVariants = tv({
         // filled geometry
         {
             variant: 'filled',
-            size: 'default',
+            size: 'control',
             class: 'h-(--era-h-control) min-w-(--era-h-control) rounded-(--era-rd-control)'
         },
         {
             variant: 'filled',
-            size: 'sm',
+            size: 'chip',
             class: 'h-(--era-h-chip) min-w-(--era-h-chip) rounded-(--era-rd-chip)'
         },
         {
             variant: 'filled',
-            size: 'xxs',
+            size: 'pill',
             class: 'h-(--era-h-pill) min-w-(--era-h-pill) rounded-(--era-rd-pill)'
         },
         {
             variant: 'filled',
-            size: 'xs',
+            size: 'icon',
             class: 'h-(--era-h-icon) min-w-(--era-h-icon) rounded-(--era-rd-icon)'
         },
         {
@@ -52,17 +52,16 @@ export const buttonVariants = tv({
         {
             variant: 'filled',
             icon: false,
-            size: 'default',
+            size: 'control',
             class: 'px-(--era-inset-control) has-[svg]:gap-(--era-inset-control)'
         },
         {
             variant: 'filled',
             icon: false,
-            size: 'sm',
+            size: 'chip',
             class: 'px-(--era-inset-chip) has-[svg]:gap-(--era-inset-chip)'
         },
-        { variant: 'filled', icon: false, size: 'xxs', class: 'px-(--era-pill-px)' },
-        { variant: 'filled', icon: false, size: 'xs', class: 'px-(--era-gap)' },
+        { variant: 'filled', icon: false, size: 'pill', class: 'px-(--era-pill-px)' },
         { variant: 'filled', icon: false, size: 'icon', class: 'px-(--era-gap)' },
         { variant: 'filled', icon: true, class: 'aspect-square px-0' },
         // Icon glyph sizing. The glyph is the icon tier (h-icon) at default/sm —
@@ -78,10 +77,9 @@ export const buttonVariants = tv({
         // notes "new note" button rendered a 24px glyph in a 24px box — flush,
         // no padding at all. Stating them makes the documented intent real and
         // removes the dependency on every call site remembering.
-        { icon: true, size: 'default', class: '[&_svg]:size-(--era-h-icon)' },
-        { icon: true, size: 'sm', class: '[&_svg]:size-(--era-h-icon)' },
-        { icon: true, size: 'xxs', class: '[&_svg]:size-(--era-glyph-pill)' },
-        { icon: true, size: 'xs', class: '[&_svg]:size-(--era-glyph-icon)' },
+        { icon: true, size: 'control', class: '[&_svg]:size-(--era-h-icon)' },
+        { icon: true, size: 'chip', class: '[&_svg]:size-(--era-h-icon)' },
+        { icon: true, size: 'pill', class: '[&_svg]:size-(--era-glyph-pill)' },
         { icon: true, size: 'icon', class: '[&_svg]:size-(--era-glyph-icon)' },
         // filled tones
         {
@@ -123,7 +121,7 @@ export const buttonVariants = tv({
     defaultVariants: {
         variant: 'filled',
         tone: 'default',
-        size: 'default',
+        size: 'control',
         icon: false,
         active: false
     }

package/dist/ui/chip/chip.svelte

@@ -16,36 +16,36 @@
 		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-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)'
+				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)'
 			},
 			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-chip-px)' },
-			{ size: 'xxs', dismissible: false, class: 'gap-(--era-gap) pr-(--era-pill-px)' },
+			{ size: 'chip', dismissible: false, class: 'gap-(--era-gap) pr-(--era-chip-px)' },
+			{ size: 'pill', 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
+			//   chip — the pill-tier button NESTS, with its concentric gap mirrored as
 			//         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
+			//   pill — nesting has run out of road: density.css's own note says xxs
 			//         "is sized around text, not as a container", and the best a
 			//         nested button managed here was 1px of pad. So the dismiss is a
 			//         flush END-CAP instead — a full-height segment of the pill
 			//         (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.
+			//         the cap shares rd-pill exactly rather than approximating it.
 			{
-				size: 'sm',
+				size: 'chip',
 				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' }
+			{ size: 'pill', dismissible: true, class: 'gap-(--era-icon-inset-pill) pr-0' }
 		],
-		defaultVariants: { size: 'sm', dismissible: false }
+		defaultVariants: { size: 'chip', dismissible: false }
 	});
 </script>
 
@@ -58,7 +58,7 @@
 
 	let {
 		ref = $bindable(null),
-		size = 'sm',
+		size = 'chip',
 		ondismiss,
 		children,
 		class: className,
@@ -67,7 +67,7 @@
 		ref?: HTMLDivElement | null;
 		/** `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';
+		size?: 'chip' | 'pill';
 		ondismiss?: () => void;
 		children?: Snippet;
 	} = $props();
@@ -93,9 +93,9 @@
 		     what reads as "segment of this pill" rather than "pill on a pill". -->
 		<Button
 			icon
-			size="xxs"
+			size="pill"
 			tone="destructive"
-			class={size === 'xxs' ? 'rounded-l-none' : undefined}
+			class={size === 'pill' ? 'rounded-l-none' : undefined}
 			onclick={ondismiss}
 			onpointerdown={(e: PointerEvent) => e.stopPropagation()}
 			onpointerup={(e: PointerEvent) => e.stopPropagation()}

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-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)";
+        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)";
     };
     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-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)";
+        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)";
     };
     dismissible: {
         true: "";
@@ -18,8 +18,8 @@ export declare const chipVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        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)";
+        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)";
     };
     dismissible: {
         true: "";
@@ -32,7 +32,7 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     ref?: HTMLDivElement | null;
     /** `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';
+    size?: 'chip' | 'pill';
     ondismiss?: () => void;
     children?: Snippet;
 };

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

@@ -15,7 +15,7 @@
 		resetDelay = 1500,
 		label = 'Copy',
 		copiedLabel = 'Copied',
-		size = 'sm',
+		size = 'chip',
 		idleIcon: IdleIcon = Copy,
 		successIcon: SuccessIcon = Check,
 		failureIcon: FailureIcon = X,

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

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

package/dist/ui/input/input.svelte

@@ -9,7 +9,7 @@
 		ref = $bindable(null),
 		value = $bindable(''),
 		icon = null,
-		size = 'md',
+		size = 'control',
 		bare = false,
 		reveal = false,
 		class: className,
@@ -27,7 +27,7 @@
 		 * Field tier. `pill` is badge height — for compact chrome where the field
 		 * sits level with xxs buttons. See inputVariants.
 		 */
-		size?: 'md' | 'xxs';
+		size?: 'control' | 'pill';
 		/** Drop the field chrome — for an input inside a container that is already the field. */
 		bare?: boolean;
 		/** Hold the field chrome back until hover — for a title or label that IS the content. */
@@ -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 === 'xxs' ? 'size-(--era-glyph-pill)' : 'size-(--era-h-icon)');
+	const glyphClass = $derived(size === 'pill' ? 'size-(--era-glyph-pill)' : 'size-(--era-h-icon)');
 </script>
 
 {#if icon}

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

@@ -9,7 +9,7 @@ type $$ComponentProps = Omit<HTMLInputAttributes, 'size'> & {
      * Field tier. `pill` is badge height — for compact chrome where the field
      * sits level with xxs buttons. See inputVariants.
      */
-    size?: 'md' | 'xxs';
+    size?: 'control' | 'pill';
     /** Drop the field chrome — for an input inside a container that is already the field. */
     bare?: boolean;
     /** Hold the field chrome back until hover — for a title or label that IS the content. */

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

@@ -60,8 +60,8 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      *   on this tier read as one family.
      */
     size: {
-        md: "h-(--era-h-control) rounded-(--era-rd-control) px-(--era-field-px)";
-        xxs: "h-(--era-h-pill) rounded-(--era-rd-pill) px-(--era-pill-px)";
+        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)";
     };
     /**
      * Height OVERRIDES, for the fields that are not their tier's height. No
@@ -128,8 +128,8 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      *   on this tier read as one family.
      */
     size: {
-        md: "h-(--era-h-control) rounded-(--era-rd-control) px-(--era-field-px)";
-        xxs: "h-(--era-h-pill) rounded-(--era-rd-pill) px-(--era-pill-px)";
+        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)";
     };
     /**
      * Height OVERRIDES, for the fields that are not their tier's height. No
@@ -196,8 +196,8 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      *   on this tier read as one family.
      */
     size: {
-        md: "h-(--era-h-control) rounded-(--era-rd-control) px-(--era-field-px)";
-        xxs: "h-(--era-h-pill) rounded-(--era-rd-pill) px-(--era-pill-px)";
+        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)";
     };
     /**
      * Height OVERRIDES, for the fields that are not their tier's height. No

package/dist/ui/input/variants.js

@@ -63,8 +63,8 @@ export const inputVariants = tv({
          *   on this tier read as one family.
          */
         size: {
-            md: 'h-(--era-h-control) rounded-(--era-rd-control) px-(--era-field-px)',
-            xxs: 'h-(--era-h-pill) rounded-(--era-rd-pill) px-(--era-pill-px)'
+            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)'
         },
         /**
          * Height OVERRIDES, for the fields that are not their tier's height. No
@@ -100,5 +100,5 @@ export const inputVariants = tv({
         // second, differently-padded field.
         { bare: true, class: 'h-full rounded-none px-0' }
     ],
-    defaultVariants: { bare: false, reveal: false, size: 'md' }
+    defaultVariants: { bare: false, reveal: false, size: 'control' }
 });

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

@@ -13,7 +13,7 @@
 	} = $props();
 </script>
 
-<!-- A raw icon Button (size="xxs" = h-pill, rd-xxs), a tight SQUARE. No
+<!-- A raw icon Button (size="pill" = h-pill, rd-xxs), a tight SQUARE. No
      data-pane-control: it stays in the drag zone, so a press-and-drag moves the
      pane while a clean click still closes (neodrag starts a drag only on
      movement and suppresses the trailing click after a real drag). Its natural
@@ -45,7 +45,7 @@
 <Button
 	bind:ref
 	icon
-	size="xxs"
+	size="pill"
 	tone="destructive"
 	aria-label="Close"
 	class={cn('[&_svg]:size-[calc(var(--era-sp)+0.3125rem)]', className)}

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

@@ -35,13 +35,13 @@
      control ⊃ pill, not chip ⊃ icon: a title bar is the densest chrome in the library and
      was a tier too short for it — 22px at dense against the 24 the reference
      terminal app uses, with 14px controls where it uses 18. The pairing is what
-     carries that: content="xxs" puts the walls on --era-pill-inset-control (3/5/7/11),
+     carries that: content="pill" puts the walls on --era-pill-inset-control (3/5/7/11),
      which is the 3px that app hardcodes for exactly this bar. -->
 <Bar
 	bind:ref
 	data-pane-handle
-	size="md"
-	content="xxs"
+	size="control"
+	content="pill"
 	divider
 	class={cn(
 		// The cap chrome (outset divider, rd-md bottom corners) is Bar's `divider`

package/dist/ui/select/select-value.svelte

@@ -55,7 +55,7 @@
 			>
 				{#each sel.selected as item (item.value)}
 					<Chip
-						size="xxs"
+						size="pill"
 						ondismiss={snippet.disabled
 							? undefined
 							: () =>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "9.0.0",
+	"version": "10.0.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",