@signal9/era-ui 7.0.0 → 9.0.0

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)";
+        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)";
     };
     /**
      * 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)";
+        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)";
     };
     /**
      * 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)";
+        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)";
     };
     /**
      * 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)'
+            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)'
         },
         /**
          * 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'
         }
     },

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>

package/dist/ui/link-preview/link-preview-content.svelte

@@ -15,7 +15,7 @@
 	<LinkPreview.Content
 		bind:ref
 		class={cn(
-			'z-50 max-w-xs rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) p-(--era-inset-md) text-body shadow-(--era-shadow-lg) glass-blur',
+			'z-50 max-w-xs rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) p-(--era-inset-control) text-body shadow-(--era-shadow-lg) glass-blur',
 			className
 		)}
 		{sideOffset}

package/dist/ui/menubar/menubar-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/menubar/menubar-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-menubar-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-menubar-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/menubar/menubar-group-heading.svelte

@@ -11,6 +11,9 @@
 
 <Menubar.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/menubar/menubar-item.svelte

@@ -13,7 +13,7 @@
 <Menubar.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/menubar/menubar-radio-item.svelte

@@ -8,7 +8,7 @@
 <Menubar.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/menubar/menubar-root.svelte

@@ -8,7 +8,7 @@
 <Menubar.Root
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-lg) items-center rounded-(--era-rd-lg) bg-(--era-surface-bg) px-(--era-px-lg) shadow-(--era-shadow)',
+		'flex h-(--era-h-bar) items-center rounded-(--era-rd-bar) bg-(--era-surface-bg) px-(--era-gap) shadow-(--era-shadow)',
 		className
 	)}
 	{...restProps}

package/dist/ui/menubar/menubar-sub-content.svelte

@@ -15,7 +15,7 @@
 	<Menubar.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/menubar/menubar-sub-trigger.svelte

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

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

@@ -13,7 +13,7 @@
 <Menubar.Trigger
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) items-center gap-(--era-gap) rounded-(--era-rd-md) px-(--era-inset-md) text-body text-fg hover:bg-(--era-highlight) focus:outline-none disabled:opacity-50 has-[svg]:gap-(--era-inset-md) data-[state=open]:rounded-b-none data-[state=open]:bg-hover',
+		'flex h-(--era-h-control) items-center gap-(--era-gap) rounded-(--era-rd-control) px-(--era-inset-control) text-body text-fg hover:bg-(--era-highlight) focus:outline-none disabled:opacity-50 has-[svg]:gap-(--era-inset-control) data-[state=open]:rounded-b-none data-[state=open]:bg-hover',
 		className
 	)}
 	{...restProps}

package/dist/ui/meter/meter.svelte

@@ -20,7 +20,7 @@
 	{min}
 	{max}
 	class={cn(
-		'h-(--era-sp) w-full overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) shadow-(--era-shadow-well)',
+		'h-(--era-sp) w-full overflow-hidden rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) shadow-(--era-shadow-well)',
 		className
 	)}
 	{...restProps}

package/dist/ui/pagination/pagination-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/pagination/pagination-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/pane/pane-close.svelte

@@ -13,7 +13,7 @@
 	} = $props();
 </script>
 
-<!-- A raw icon Button (size="xxs" = h-xxs, rd-xxs), a tight SQUARE. No
+<!-- A raw icon Button (size="xxs" = 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
@@ -22,7 +22,7 @@
 
      xxs rather than the tighter `icon` size, which is what the handle's tier
      asks for. The GLYPH is deliberately OFF the sub-tier ladder: sp+5, where the
-     ladder offers sp+4 (12px at dense, the xxs sub-tier) and the h-xs floor
+     ladder offers sp+4 (12px at dense, the xxs sub-tier) and the h-icon floor
      (14px). Both were tried and both are wrong here by a pixel — 12 reads
      visibly lighter than the reference terminal app's close button, 14 reads
      heavier — and a close button is the one control in the chrome you must be

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

@@ -19,7 +19,7 @@
      its content inside the flex column. -->
 <div
 	bind:this={ref}
-	class={cn('min-h-0 flex-1 overflow-auto overscroll-contain p-(--era-pad-md)', className)}
+	class={cn('min-h-0 flex-1 overflow-auto overscroll-contain p-(--era-pad-card)', className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -28,14 +28,14 @@
      WHOLE top — up to the very top pixel — is draggable. data-pane-handle marks
      it as the neodrag allow-zone. Transparent over the pane's rounded surface:
      the TOP corners defer to the pane radius, while the BOTTOM corners round to
-     --era-rd-md — so the inset divider curves up at the ends and the bar reads
+     --era-rd-control — so the inset divider curves up at the ends and the bar reads
      as a long pill. The corners axis collapses the radius to 0 in square mode,
      so it's flat there and pill-shaped only when rounded.
 
-     md ⊃ xxs, not sm ⊃ xs: a title bar is the densest chrome in the library and
+     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-xxs-inset-md (3/5/7/11),
+     carries that: content="xxs" 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

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

@@ -327,25 +327,25 @@
 			dir: 'n',
 			cursor: 'cursor-ns-resize',
 			place:
-				'top:0;left:var(--era-xs-inset-sm);right:var(--era-xs-inset-sm);translate:0 -100%;height:var(--era-xs-inset-sm)'
+				'top:0;left:var(--era-icon-inset-chip);right:var(--era-icon-inset-chip);translate:0 -100%;height:var(--era-icon-inset-chip)'
 		},
 		{
 			dir: 's',
 			cursor: 'cursor-ns-resize',
 			place:
-				'bottom:0;left:var(--era-xs-inset-sm);right:var(--era-xs-inset-sm);translate:0 50%;height:calc(var(--era-xs-inset-sm)*2)'
+				'bottom:0;left:var(--era-icon-inset-chip);right:var(--era-icon-inset-chip);translate:0 50%;height:calc(var(--era-icon-inset-chip)*2)'
 		},
 		{
 			dir: 'w',
 			cursor: 'cursor-ew-resize',
 			place:
-				'left:0;top:var(--era-xs-inset-sm);bottom:var(--era-xs-inset-sm);translate:-100% 0;width:var(--era-xs-inset-sm)'
+				'left:0;top:var(--era-icon-inset-chip);bottom:var(--era-icon-inset-chip);translate:-100% 0;width:var(--era-icon-inset-chip)'
 		},
 		{
 			dir: 'e',
 			cursor: 'cursor-ew-resize',
 			place:
-				'right:0;top:var(--era-xs-inset-sm);bottom:var(--era-xs-inset-sm);translate:50% 0;width:calc(var(--era-xs-inset-sm)*2)'
+				'right:0;top:var(--era-icon-inset-chip);bottom:var(--era-icon-inset-chip);translate:50% 0;width:calc(var(--era-icon-inset-chip)*2)'
 		},
 		// corners LAST — a square at each corner (diagonal gap filler), painted
 		// above the edges so the red grab zone is always on top of the blue.
@@ -353,19 +353,19 @@
 			dir: 'nw',
 			cursor: 'cursor-nwse-resize',
 			place:
-				'top:0;left:0;translate:-50% -50%;width:calc(var(--era-xs-inset-sm)*2);height:calc(var(--era-xs-inset-sm)*2)'
+				'top:0;left:0;translate:-50% -50%;width:calc(var(--era-icon-inset-chip)*2);height:calc(var(--era-icon-inset-chip)*2)'
 		},
 		{
 			dir: 'ne',
 			cursor: 'cursor-nesw-resize',
 			place:
-				'top:0;right:0;translate:50% -50%;width:calc(var(--era-xs-inset-sm)*2);height:calc(var(--era-xs-inset-sm)*2)'
+				'top:0;right:0;translate:50% -50%;width:calc(var(--era-icon-inset-chip)*2);height:calc(var(--era-icon-inset-chip)*2)'
 		},
 		{
 			dir: 'sw',
 			cursor: 'cursor-nesw-resize',
 			place:
-				'bottom:0;left:0;translate:-50% 50%;width:calc(var(--era-xs-inset-sm)*2);height:calc(var(--era-xs-inset-sm)*2)'
+				'bottom:0;left:0;translate:-50% 50%;width:calc(var(--era-icon-inset-chip)*2);height:calc(var(--era-icon-inset-chip)*2)'
 		},
 		{
 			// All four corners straddle (translate ±50%): 6px out AND 6px in, so they
@@ -373,7 +373,7 @@
 			dir: 'se',
 			cursor: 'cursor-nwse-resize',
 			place:
-				'bottom:0;right:0;translate:50% 50%;width:calc(var(--era-xs-inset-sm)*2);height:calc(var(--era-xs-inset-sm)*2)'
+				'bottom:0;right:0;translate:50% 50%;width:calc(var(--era-icon-inset-chip)*2);height:calc(var(--era-icon-inset-chip)*2)'
 		}
 	];
 
@@ -473,9 +473,9 @@
 		//
 		// rd-md, NOT rd-lg: a container's radius follows its corner REGION's tier,
 		// not its overall size. The pane's corners are formed by the grab bar, which
-		// is h-md holding h-xxs controls (the ×) — and the radius ladder is
-		// rd-T = R + (h-T − h-xs)/2, so rd-md − rd-xxs is exactly (h-md − h-xxs)/2 =
-		// --era-xxs-inset-md, the gap the × already sits at from the corner. The ×'s
+		// is h-control holding h-pill controls (the ×) — and the radius ladder is
+		// rd-T = R + (h-T − h-icon)/2, so rd-md − rd-xxs is exactly (h-control − h-pill)/2 =
+		// --era-pill-inset-control, the gap the × already sits at from the corner. The ×'s
 		// natural rd-xxs is therefore concentric inside rd-md by construction, the
 		// same way rd-xs was inside rd-sm before the handle moved up a tier.
 		// A hairline edge, because a floating pane is the one thing that must be
@@ -493,7 +493,7 @@
 		// content until the grip sets a size, and size containment would collapse
 		// that to zero) and NOT `paint` (the resize handles deliberately bleed
 		// outward, and paint containment clips them).
-		'group/pane absolute isolate flex flex-col rounded-(--era-rd-md) border border-divider bg-(--era-surface-bg-elevated) shadow-(--era-shadow-lg) glass-blur [contain:layout_style]',
+		'group/pane absolute isolate flex flex-col rounded-(--era-rd-control) border border-divider bg-(--era-surface-bg-elevated) shadow-(--era-shadow-lg) glass-blur [contain:layout_style]',
 		// Auto-size to content until an explicit size is set (by the grip or a preset).
 		size ? '' : 'w-max',
 		// While Ctrl is held the whole pane is grabbable: a grab cursor hints it, and

package/dist/ui/pane/pane-tab-list.svelte

@@ -71,7 +71,7 @@
      history y) are at risk at the clip edge. The real fix is on the tab itself —
      PaneTab cancels Tabs.Trigger's era-text-trim, which had pulled the box up to
      the baseline and fed the clip its descenders. The py-0.5 that used to back
-     that up is gone with it: the tab is now h-xxs, so its own box holds the line
+     that up is gone with it: the tab is now h-pill, so its own box holds the line
      box with room to spare and the clip edge sits a wall away. -->
 <Tabs.List
 	bind:ref

package/dist/ui/pane/pane-tab-panel.svelte

@@ -15,6 +15,6 @@
      Pane.Content. -->
 <Tabs.Content
 	bind:ref
-	class={cn('min-h-0 flex-1 overflow-auto overscroll-contain p-(--era-pad-md)', className)}
+	class={cn('min-h-0 flex-1 overflow-auto overscroll-contain p-(--era-pad-card)', className)}
 	{...restProps}
 />

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

@@ -23,7 +23,7 @@
 		// trim pulls the box up to the alphabetic baseline, so the clip then slices
 		// every descender (the "logs" g, the "history" y). [text-box:normal] cancels
 		// it; leading-none + the strip's items-center still centre the label.
-		'flex h-(--era-h-xxs) cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-xxs) px-(--era-pill-xxs) text-body leading-none text-muted outline-none select-none [text-box:normal] hover:text-fg focus-visible:bg-(--era-highlight) data-[state=active]:bg-hover data-[state=active]:text-bright',
+		'flex h-(--era-h-pill) cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-pill) px-(--era-pill-px) text-body leading-none text-muted outline-none select-none [text-box:normal] hover:text-fg focus-visible:bg-(--era-highlight) data-[state=active]:bg-hover data-[state=active]:text-bright',
 		className
 	)}
 	{...restProps}

package/dist/ui/pane/pane.svelte

@@ -84,7 +84,7 @@
 	     track when `center` is present and in the ml-auto cluster when it isn't —
 	     one close button, correct in both geometries. -->
 	<Handle {center} trail={onClose ? closeTrail : undefined}>
-		{#if icon}{@const Icon = icon}<Icon class="size-(--era-h-xs) shrink-0 text-muted" />{/if}
+		{#if icon}{@const Icon = icon}<Icon class="size-(--era-h-icon) shrink-0 text-muted" />{/if}
 		{#if title}<span class="text-body text-bright">{title}</span>{/if}
 		{@render header?.()}
 	</Handle>

package/dist/ui/pin-input/pin-input-cell.svelte

@@ -14,7 +14,7 @@
 	bind:ref
 	{cell}
 	class={cn(
-		'relative flex h-(--era-h-md) min-w-(--era-h-md) items-center justify-center border-y border-r border-divider bg-(--era-surface-bg-elevated) text-body transition-colors duration-(--era-duration) outline-none first:rounded-l-(--era-rd-md) first:border-l last:rounded-r-(--era-rd-md) data-[active]:bg-(--era-highlight) [&:has(+_:not([data-pin-input-cell]))]:rounded-r-(--era-rd-md)',
+		'relative flex h-(--era-h-control) min-w-(--era-h-control) items-center justify-center border-y border-r border-divider bg-(--era-surface-bg-elevated) text-body transition-colors duration-(--era-duration) outline-none first:rounded-l-(--era-rd-control) first:border-l last:rounded-r-(--era-rd-control) data-[active]:bg-(--era-highlight) [&:has(+_:not([data-pin-input-cell]))]:rounded-r-(--era-rd-control)',
 		className
 	)}
 	{...restProps}

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

@@ -22,7 +22,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-popover-anchor-width) overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) p-(--era-pad-md) shadow-(--era-shadow-lg) glass-blur',
+		'z-50 w-max min-w-(--bits-popover-anchor-width) overflow-hidden rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) p-(--era-pad-card) shadow-(--era-shadow-lg) glass-blur',
 		className
 	)}
 	{sideOffset}

package/dist/ui/progress/progress.svelte

@@ -20,7 +20,7 @@
 	{min}
 	{max}
 	class={cn(
-		'h-(--era-sp) w-full overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) shadow-(--era-shadow-well)',
+		'h-(--era-sp) w-full overflow-hidden rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) shadow-(--era-shadow-well)',
 		className
 	)}
 	{...restProps}

package/dist/ui/radio-group/radio-group-item.svelte

@@ -8,12 +8,12 @@
 <RadioGroup.Item
 	bind:ref
 	class={cn(
-		'group/radio flex size-(--era-h-xs) shrink-0 era-interactive cursor-pointer items-center justify-center rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) shadow-(--era-shadow-well) hover:bg-(--era-highlight)',
+		'group/radio flex size-(--era-h-icon) shrink-0 era-interactive cursor-pointer items-center justify-center rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) shadow-(--era-shadow-well) hover:bg-(--era-highlight)',
 		className
 	)}
 	{...restProps}
 >
 	<span
-		class="block size-1/2 rounded-(--era-rd-md) transition-colors duration-(--era-duration) group-data-[state=checked]/radio:bg-fg"
+		class="block size-1/2 rounded-(--era-rd-control) transition-colors duration-(--era-duration) group-data-[state=checked]/radio:bg-fg"
 	></span>
 </RadioGroup.Item>

package/dist/ui/rating-group/rating-group-item.svelte

@@ -10,7 +10,7 @@
 <RatingGroup.Item
 	bind:ref
 	class={cn(
-		'inline-flex size-(--era-h-sm) items-center justify-center text-muted hover:text-bright focus:outline-none data-[state=checked]:text-primary',
+		'inline-flex size-(--era-h-chip) items-center justify-center text-muted hover:text-bright focus:outline-none data-[state=checked]:text-primary',
 		className
 	)}
 	{...restProps}

package/dist/ui/scroll-area/scroll-area-thumb.svelte

@@ -7,6 +7,6 @@
 
 <ScrollArea.Thumb
 	bind:ref
-	class={cn('rounded-(--era-rd-md) bg-divider hover:bg-muted', className)}
+	class={cn('rounded-(--era-rd-control) bg-divider hover:bg-muted', className)}
 	{...restProps}
 />

package/dist/ui/scroll-area/scroll-area.svelte

@@ -13,6 +13,6 @@
 <ScrollArea.Root
 	bind:ref
 	{type}
-	class={cn('relative overflow-hidden rounded-(--era-rd-lg)', className)}
+	class={cn('relative overflow-hidden rounded-(--era-rd-bar)', className)}
 	{...restProps}
 />

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

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

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

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

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

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