@signal9/era-ui 8.0.0 → 10.0.0

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}

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

@@ -12,7 +12,7 @@
 <DateRangePicker.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-trigger.svelte

@@ -14,7 +14,7 @@
 <DateRangePicker.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}
 </DateRangePicker.Trigger>

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

@@ -31,14 +31,16 @@
 		bind:ref
 		class={cn(
 			'fixed top-1/2 left-1/2 z-50 flex w-full max-w-md -translate-x-1/2 -translate-y-1/2 flex-col border border-divider bg-(--era-surface-bg) shadow-(--era-shadow-lg) glass-blur',
-			header ? 'rounded-(--era-rd-md)' : 'gap-(--era-gap) rounded-(--era-rd-lg) p-(--era-pad-md)',
+			header
+				? 'rounded-(--era-rd-control)'
+				: 'gap-(--era-gap) rounded-(--era-rd-bar) p-(--era-pad-card)',
 			className
 		)}
 		{...restProps}
 	>
 		{#if header}
 			{@render header()}
-			<div class="flex min-h-0 flex-col gap-(--era-gap) p-(--era-pad-md)">
+			<div class="flex min-h-0 flex-col gap-(--era-gap) p-(--era-pad-card)">
 				{@render children?.()}
 			</div>
 		{:else}

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

@@ -21,7 +21,7 @@
      variant IS the cap law (outset divider, rd-md corners), shared with
      Pane.Handle. What this part adds:
 
-       · the leading side at --era-inset-md: a title has no corner to nest, so
+       · the leading side at --era-inset-control: a title has no corner to nest, so
          it takes the text inset, the same asymmetry the pane and the
          Conversations row document
        · the × is the dismiss family's: an xxs `Dialog.Close` whose tier
@@ -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-md) 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/dropdown-menu/dropdown-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/dropdown-menu/dropdown-menu-content.svelte

@@ -29,7 +29,7 @@
 		// floating menu, like the context menu it should match: full radius, a
 		// gutter of air, shadow doing the separating.
 		class={cn(
-			'z-50 w-max min-w-(--bits-dropdown-menu-anchor-width) overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) p-(--era-panel-inset) shadow-(--era-shadow-lg) glass-blur',
+			'z-50 w-max min-w-(--bits-dropdown-menu-anchor-width) overflow-hidden rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) p-(--era-panel-inset) shadow-(--era-shadow-lg) glass-blur',
 			className
 		)}
 		{sideOffset}

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

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

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

@@ -12,7 +12,7 @@
 <DropdownMenu.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/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -15,7 +15,7 @@
 	<DropdownMenu.SubContent
 		bind:ref
 		class={cn(
-			'z-50 w-max overflow-hidden rounded-(--era-rd-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/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -14,11 +14,11 @@
 <DropdownMenu.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" />
 </DropdownMenu.SubTrigger>

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

@@ -14,11 +14,11 @@
 <DropdownMenu.Trigger
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) w-full items-center justify-between gap-(--era-xs-inset-sm) rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-inset-md) text-body text-fg shadow-(--era-shadow) focus:bg-(--era-highlight) focus:outline-none disabled:opacity-50 data-[state=open]:rounded-b-none data-[state=open]:shadow-(--era-shadow-pressed)',
+		'flex h-(--era-h-control) w-full items-center justify-between gap-(--era-icon-inset-chip) rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) px-(--era-inset-control) text-body text-fg shadow-(--era-shadow) focus:bg-(--era-highlight) focus:outline-none disabled:opacity-50 data-[state=open]:rounded-b-none data-[state=open]:shadow-(--era-shadow-pressed)',
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronDown class="size-(--era-h-xs) text-muted" />
+	<ChevronDown class="size-(--era-h-icon) text-muted" />
 </DropdownMenu.Trigger>

package/dist/ui/file-upload/file-upload.svelte

@@ -74,7 +74,7 @@
 	data-dragging={dragging || undefined}
 	data-disabled={disabled || undefined}
 	class={cn(
-		'flex h-(--era-h-md) w-full items-center gap-(--era-gap) rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-inset-md) font-mono text-body leading-none text-fg shadow-(--era-shadow-well) transition-colors duration-(--era-duration) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight) data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[dragging]:bg-(--era-highlight) data-[dragging]:text-bright',
+		'flex h-(--era-h-control) w-full items-center gap-(--era-gap) rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) px-(--era-inset-control) font-mono text-body leading-none text-fg shadow-(--era-shadow-well) transition-colors duration-(--era-duration) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight) data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[dragging]:bg-(--era-highlight) data-[dragging]:text-bright',
 		className
 	)}
 	ondragenter={onDragEnter}
@@ -82,7 +82,7 @@
 	ondragover={onDragOver}
 	ondrop={onDrop}
 >
-	<Upload class="size-(--era-h-xs) shrink-0" />
+	<Upload class="size-(--era-h-icon) shrink-0" />
 	<span class="truncate {files && files.length > 0 ? 'text-bright' : 'text-muted'}">
 		{label()}
 	</span>

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,
@@ -24,10 +24,10 @@
 		/** Lucide glyph rendered inside the field, left of the text. */
 		icon?: Component<IconProps> | null;
 		/**
-		 * Field tier. `xxs` is badge height — for compact chrome where the field
+		 * 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. */
@@ -51,10 +51,10 @@
 
 	// The field's glyph is the icon tier OF ITS OWN TIER, which is what puts it on
 	// the same optical footing as the icon button beside it: an md field pairs
-	// with a default button (h-xs glyph), an xxs field with an xxs button
+	// 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-icon-xxs)' : 'size-(--era-h-xs)');
+	const glyphClass = $derived(size === 'pill' ? 'size-(--era-glyph-pill)' : 'size-(--era-h-icon)');
 </script>
 
 {#if icon}

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

@@ -6,10 +6,10 @@ type $$ComponentProps = Omit<HTMLInputAttributes, 'size'> & {
     /** Lucide glyph rendered inside the field, left of the text. */
     icon?: Component<IconProps> | null;
     /**
-     * Field tier. `xxs` is badge height — for compact chrome where the field
+     * 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/textarea.svelte

@@ -21,7 +21,7 @@
 		inputVariants({ height: 'auto' }),
 		// It grows, so the vertical inset has to be stated: the tier height is what
 		// centres one line of text in every other field, and there isn't one here.
-		'resize-y py-(--era-inset-md)',
+		'resize-y py-(--era-inset-control)',
 		className
 	)}
 	{...restProps}></textarea>

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

@@ -50,18 +50,18 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      * - `md` (default) — THE field, and the pairing an md bar's md content
      *   expects. Its --era-field-px is glyph-advance derived: the padding a
      *   STRING of text wants, not a single centred glyph.
-     * - `xxs` — the pill-tier field, at badge height (18/20/22/26). This is the
+     * - `pill` — the pill-tier field, at badge height (18/20/22/26). This is the
      *   SMALLEST tier that can hold body text at all: its inset is
-     *   (h-xxs − text)/2, so 2px remain to centre 14px text in, where the tier
-     *   below (h-xs) IS the text size and has none left. For compact chrome —
+     *   (h-pill − text)/2, so 2px remain to centre 14px text in, where the tier
+     *   below (h-icon) IS the text size and has none left. For compact chrome —
      *   a filter that sits level with an xxs icon button, a title bar that
      *   shouldn't outweigh the document under it. Side padding is
-     *   --era-pill-xxs, exactly what Badge and Chip use, so a field and a pill
+     *   --era-pill-px, exactly what Badge and Chip use, so a field and a pill
      *   on this tier read as one family.
      */
     size: {
-        md: "h-(--era-h-md) rounded-(--era-rd-md) px-(--era-field-px)";
-        xxs: "h-(--era-h-xxs) rounded-(--era-rd-xxs) px-(--era-pill-xxs)";
+        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
@@ -69,7 +69,7 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      */
     height: {
         full: "h-full";
-        auto: "h-auto min-h-(--era-h-md)";
+        auto: "h-auto min-h-(--era-h-control)";
     };
     /**
      * Side-padding OVERRIDES, same rule. `trailing` is for a field that holds a
@@ -80,7 +80,7 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      * below.
      */
     pad: {
-        trailing: "ps-(--era-field-px) pe-(--era-sm-inset-md)";
+        trailing: "ps-(--era-field-px) pe-(--era-chip-inset-control)";
         none: "px-0";
     };
 }, undefined, "flex w-full era-interactive text-body text-fg placeholder:text-muted", {
@@ -118,18 +118,18 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      * - `md` (default) — THE field, and the pairing an md bar's md content
      *   expects. Its --era-field-px is glyph-advance derived: the padding a
      *   STRING of text wants, not a single centred glyph.
-     * - `xxs` — the pill-tier field, at badge height (18/20/22/26). This is the
+     * - `pill` — the pill-tier field, at badge height (18/20/22/26). This is the
      *   SMALLEST tier that can hold body text at all: its inset is
-     *   (h-xxs − text)/2, so 2px remain to centre 14px text in, where the tier
-     *   below (h-xs) IS the text size and has none left. For compact chrome —
+     *   (h-pill − text)/2, so 2px remain to centre 14px text in, where the tier
+     *   below (h-icon) IS the text size and has none left. For compact chrome —
      *   a filter that sits level with an xxs icon button, a title bar that
      *   shouldn't outweigh the document under it. Side padding is
-     *   --era-pill-xxs, exactly what Badge and Chip use, so a field and a pill
+     *   --era-pill-px, exactly what Badge and Chip use, so a field and a pill
      *   on this tier read as one family.
      */
     size: {
-        md: "h-(--era-h-md) rounded-(--era-rd-md) px-(--era-field-px)";
-        xxs: "h-(--era-h-xxs) rounded-(--era-rd-xxs) px-(--era-pill-xxs)";
+        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
@@ -137,7 +137,7 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      */
     height: {
         full: "h-full";
-        auto: "h-auto min-h-(--era-h-md)";
+        auto: "h-auto min-h-(--era-h-control)";
     };
     /**
      * Side-padding OVERRIDES, same rule. `trailing` is for a field that holds a
@@ -148,7 +148,7 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      * below.
      */
     pad: {
-        trailing: "ps-(--era-field-px) pe-(--era-sm-inset-md)";
+        trailing: "ps-(--era-field-px) pe-(--era-chip-inset-control)";
         none: "px-0";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
@@ -186,18 +186,18 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      * - `md` (default) — THE field, and the pairing an md bar's md content
      *   expects. Its --era-field-px is glyph-advance derived: the padding a
      *   STRING of text wants, not a single centred glyph.
-     * - `xxs` — the pill-tier field, at badge height (18/20/22/26). This is the
+     * - `pill` — the pill-tier field, at badge height (18/20/22/26). This is the
      *   SMALLEST tier that can hold body text at all: its inset is
-     *   (h-xxs − text)/2, so 2px remain to centre 14px text in, where the tier
-     *   below (h-xs) IS the text size and has none left. For compact chrome —
+     *   (h-pill − text)/2, so 2px remain to centre 14px text in, where the tier
+     *   below (h-icon) IS the text size and has none left. For compact chrome —
      *   a filter that sits level with an xxs icon button, a title bar that
      *   shouldn't outweigh the document under it. Side padding is
-     *   --era-pill-xxs, exactly what Badge and Chip use, so a field and a pill
+     *   --era-pill-px, exactly what Badge and Chip use, so a field and a pill
      *   on this tier read as one family.
      */
     size: {
-        md: "h-(--era-h-md) rounded-(--era-rd-md) px-(--era-field-px)";
-        xxs: "h-(--era-h-xxs) rounded-(--era-rd-xxs) px-(--era-pill-xxs)";
+        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
@@ -205,7 +205,7 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      */
     height: {
         full: "h-full";
-        auto: "h-auto min-h-(--era-h-md)";
+        auto: "h-auto min-h-(--era-h-control)";
     };
     /**
      * Side-padding OVERRIDES, same rule. `trailing` is for a field that holds a
@@ -216,7 +216,7 @@ export declare const inputVariants: import("tailwind-variants").TVReturnType<{
      * below.
      */
     pad: {
-        trailing: "ps-(--era-field-px) pe-(--era-sm-inset-md)";
+        trailing: "ps-(--era-field-px) pe-(--era-chip-inset-control)";
         none: "px-0";
     };
 }, undefined>>;

package/dist/ui/input/variants.js

@@ -53,18 +53,18 @@ export const inputVariants = tv({
          * - `md` (default) — THE field, and the pairing an md bar's md content
          *   expects. Its --era-field-px is glyph-advance derived: the padding a
          *   STRING of text wants, not a single centred glyph.
-         * - `xxs` — the pill-tier field, at badge height (18/20/22/26). This is the
+         * - `pill` — the pill-tier field, at badge height (18/20/22/26). This is the
          *   SMALLEST tier that can hold body text at all: its inset is
-         *   (h-xxs − text)/2, so 2px remain to centre 14px text in, where the tier
-         *   below (h-xs) IS the text size and has none left. For compact chrome —
+         *   (h-pill − text)/2, so 2px remain to centre 14px text in, where the tier
+         *   below (h-icon) IS the text size and has none left. For compact chrome —
          *   a filter that sits level with an xxs icon button, a title bar that
          *   shouldn't outweigh the document under it. Side padding is
-         *   --era-pill-xxs, exactly what Badge and Chip use, so a field and a pill
+         *   --era-pill-px, exactly what Badge and Chip use, so a field and a pill
          *   on this tier read as one family.
          */
         size: {
-            md: 'h-(--era-h-md) rounded-(--era-rd-md) px-(--era-field-px)',
-            xxs: 'h-(--era-h-xxs) rounded-(--era-rd-xxs) px-(--era-pill-xxs)'
+            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
@@ -73,12 +73,12 @@ export const inputVariants = tv({
         height: {
             // h-full, NOT a tier height: a bare input's container IS the field, so it
             // takes that container's height. Keeping a tier height here made a bare
-            // input inside an h-md Bar overflow it by the bar's border — a −0.5px
+            // input inside an h-control Bar overflow it by the bar's border — a −0.5px
             // gap, which is the even-gap law failing by a hair rather than obviously.
             full: 'h-full',
             // h-auto is load-bearing — it is what outranks the tier's own height so
             // the field can grow with its content (Textarea).
-            auto: 'h-auto min-h-(--era-h-md)'
+            auto: 'h-auto min-h-(--era-h-control)'
         },
         /**
          * Side-padding OVERRIDES, same rule. `trailing` is for a field that holds a
@@ -89,7 +89,7 @@ export const inputVariants = tv({
          * below.
          */
         pad: {
-            trailing: 'ps-(--era-field-px) pe-(--era-sm-inset-md)',
+            trailing: 'ps-(--era-field-px) pe-(--era-chip-inset-control)',
             none: 'px-0'
         }
     },
@@ -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/kv/kv.svelte

@@ -24,7 +24,7 @@
 		// shrink-0 + nowrap like Badge/Chip: the overflow-hidden here is for the
 		// key cell's squared corners, not a licence to crush — squeezed, this pill
 		// clipped its value instead of bleeding it, which is quieter but no truer.
-		'inline-flex h-(--era-h-xxs) shrink-0 items-center overflow-hidden rounded-(--era-rd-xxs) bg-fill font-mono text-body era-text-trim leading-none whitespace-nowrap shadow-(--era-shadow)',
+		'inline-flex h-(--era-h-pill) shrink-0 items-center overflow-hidden rounded-(--era-rd-pill) bg-fill font-mono text-body era-text-trim leading-none whitespace-nowrap shadow-(--era-shadow)',
 		className
 	)}
 	{...restProps}
@@ -35,7 +35,7 @@
 	     actually runs — see era-token-ink. Stretching gives that block a full-
 	     height box for align-content to centre the trimmed line in. -->
 	<span
-		class="era-token-ink min-w-(--era-h-xxs) self-stretch px-(--era-inset-sm) text-muted tabular-nums"
+		class="era-token-ink min-w-(--era-h-pill) self-stretch px-(--era-inset-chip) text-muted tabular-nums"
 		>{value}</span
 	>
 </span>