@signal9/era-ui 7.0.0 → 9.0.0

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-sm) rounded-(--era-rd-sm)";
-        md: "h-(--era-h-md) rounded-(--era-rd-md)";
-        lg: "h-(--era-h-lg) rounded-(--era-rd-lg)";
+        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)";
     };
     /**
      * The tier of the CONTROLS inside, because that is what the bar's own
@@ -12,14 +12,14 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      * had each restated the two-tier value by hand, and the geometry spec had
      * been rewritten twice chasing which token they were restating.
      *
-     * - `tier` (default) — one tier smaller, the pairing above. sm⊃xs, md⊃sm
-     *   and lg⊃md all equal sp/2, which is why one token covers every size.
-     * - `xxs` — the compact pairing: xxs pills and fields (a filter beside an
+     * - `tier` (default) — one tier smaller, the pairing above. chip⊃icon, control⊃chip
+     *   and bar⊃control all equal sp/2, which is why one token covers every size.
+     * - `pill` — the compact pairing: pills and fields (a filter beside an
      *   xxs icon button, a title bar). Two tiers down, so the inset differs
      *   per size and comes from the compounds below.
      */
     content: {
-        tier: "gap-(--era-xs-inset-sm) px-(--era-xs-inset-sm)";
+        tier: "gap-(--era-icon-inset-chip) px-(--era-icon-inset-chip)";
         xxs: "";
     };
     /**
@@ -41,14 +41,14 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      *   both. Collapses to flat in square mode like every radius.
      */
     divider: {
-        true: "shrink-0 rounded-t-none rounded-b-(--era-rd-md) [box-shadow:0_1px_0_var(--color-divider-faded)]";
+        true: "shrink-0 rounded-t-none rounded-b-(--era-rd-control) [box-shadow:0_1px_0_var(--color-divider-faded)]";
         false: "";
     };
 }, undefined, "flex items-center era-text-trim", {
     size: {
-        sm: "h-(--era-h-sm) rounded-(--era-rd-sm)";
-        md: "h-(--era-h-md) rounded-(--era-rd-md)";
-        lg: "h-(--era-h-lg) rounded-(--era-rd-lg)";
+        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)";
     };
     /**
      * The tier of the CONTROLS inside, because that is what the bar's own
@@ -58,14 +58,14 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      * had each restated the two-tier value by hand, and the geometry spec had
      * been rewritten twice chasing which token they were restating.
      *
-     * - `tier` (default) — one tier smaller, the pairing above. sm⊃xs, md⊃sm
-     *   and lg⊃md all equal sp/2, which is why one token covers every size.
-     * - `xxs` — the compact pairing: xxs pills and fields (a filter beside an
+     * - `tier` (default) — one tier smaller, the pairing above. chip⊃icon, control⊃chip
+     *   and bar⊃control all equal sp/2, which is why one token covers every size.
+     * - `pill` — the compact pairing: pills and fields (a filter beside an
      *   xxs icon button, a title bar). Two tiers down, so the inset differs
      *   per size and comes from the compounds below.
      */
     content: {
-        tier: "gap-(--era-xs-inset-sm) px-(--era-xs-inset-sm)";
+        tier: "gap-(--era-icon-inset-chip) px-(--era-icon-inset-chip)";
         xxs: "";
     };
     /**
@@ -87,14 +87,14 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      *   both. Collapses to flat in square mode like every radius.
      */
     divider: {
-        true: "shrink-0 rounded-t-none rounded-b-(--era-rd-md) [box-shadow:0_1px_0_var(--color-divider-faded)]";
+        true: "shrink-0 rounded-t-none rounded-b-(--era-rd-control) [box-shadow:0_1px_0_var(--color-divider-faded)]";
         false: "";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        sm: "h-(--era-h-sm) rounded-(--era-rd-sm)";
-        md: "h-(--era-h-md) rounded-(--era-rd-md)";
-        lg: "h-(--era-h-lg) rounded-(--era-rd-lg)";
+        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)";
     };
     /**
      * The tier of the CONTROLS inside, because that is what the bar's own
@@ -104,14 +104,14 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      * had each restated the two-tier value by hand, and the geometry spec had
      * been rewritten twice chasing which token they were restating.
      *
-     * - `tier` (default) — one tier smaller, the pairing above. sm⊃xs, md⊃sm
-     *   and lg⊃md all equal sp/2, which is why one token covers every size.
-     * - `xxs` — the compact pairing: xxs pills and fields (a filter beside an
+     * - `tier` (default) — one tier smaller, the pairing above. chip⊃icon, control⊃chip
+     *   and bar⊃control all equal sp/2, which is why one token covers every size.
+     * - `pill` — the compact pairing: pills and fields (a filter beside an
      *   xxs icon button, a title bar). Two tiers down, so the inset differs
      *   per size and comes from the compounds below.
      */
     content: {
-        tier: "gap-(--era-xs-inset-sm) px-(--era-xs-inset-sm)";
+        tier: "gap-(--era-icon-inset-chip) px-(--era-icon-inset-chip)";
         xxs: "";
     };
     /**
@@ -133,7 +133,7 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      *   both. Collapses to flat in square mode like every radius.
      */
     divider: {
-        true: "shrink-0 rounded-t-none rounded-b-(--era-rd-md) [box-shadow:0_1px_0_var(--color-divider-faded)]";
+        true: "shrink-0 rounded-t-none rounded-b-(--era-rd-control) [box-shadow:0_1px_0_var(--color-divider-faded)]";
         false: "";
     };
 }, undefined>>;
@@ -145,8 +145,8 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     size?: 'sm' | 'md' | 'lg';
     /**
      * Tier of the controls inside — drives the bar's padding and gap so they
-     * stay concentric to them. `tier` (default) is one tier smaller; `xxs` is
-     * the compact pairing (xxs pills/fields in an sm or md bar).
+     * 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';
     /** The flush cap-a-panel chrome: outset divider below, bottom rd-md. */

package/dist/ui/button/button.svelte

@@ -72,7 +72,7 @@
 	-->
 	<span data-button-content class="inline-flex items-center justify-center [gap:inherit]">
 		{#if loading}
-			<LoaderCircle class="size-(--era-h-xs) shrink-0 animate-spin" aria-hidden="true" />
+			<LoaderCircle class="size-(--era-h-icon) shrink-0 animate-spin" aria-hidden="true" />
 			{#if loadingLabel}<span class="sr-only">{loadingLabel}</span>{/if}
 		{/if}
 		{@render children?.()}

package/dist/ui/button/variants.js

@@ -25,27 +25,27 @@ export const buttonVariants = tv({
         {
             variant: 'filled',
             size: 'default',
-            class: 'h-(--era-h-md) min-w-(--era-h-md) rounded-(--era-rd-md)'
+            class: 'h-(--era-h-control) min-w-(--era-h-control) rounded-(--era-rd-control)'
         },
         {
             variant: 'filled',
             size: 'sm',
-            class: 'h-(--era-h-sm) min-w-(--era-h-sm) rounded-(--era-rd-sm)'
+            class: 'h-(--era-h-chip) min-w-(--era-h-chip) rounded-(--era-rd-chip)'
         },
         {
             variant: 'filled',
             size: 'xxs',
-            class: 'h-(--era-h-xxs) min-w-(--era-h-xxs) rounded-(--era-rd-xxs)'
+            class: 'h-(--era-h-pill) min-w-(--era-h-pill) rounded-(--era-rd-pill)'
         },
         {
             variant: 'filled',
             size: 'xs',
-            class: 'h-(--era-h-xs) min-w-(--era-h-xs) rounded-(--era-rd-xs)'
+            class: 'h-(--era-h-icon) min-w-(--era-h-icon) rounded-(--era-rd-icon)'
         },
         {
             variant: 'filled',
             size: 'icon',
-            class: 'h-(--era-h-xs) min-w-(--era-h-xs) rounded-(--era-rd-xs)'
+            class: 'h-(--era-h-icon) min-w-(--era-h-icon) rounded-(--era-rd-icon)'
         },
         // filled insets; icon buttons go square instead. When an icon is present,
         // gap widens to match the wall inset so the icon sits in rhythm with it.
@@ -53,23 +53,23 @@ export const buttonVariants = tv({
             variant: 'filled',
             icon: false,
             size: 'default',
-            class: 'px-(--era-inset-md) has-[svg]:gap-(--era-inset-md)'
+            class: 'px-(--era-inset-control) has-[svg]:gap-(--era-inset-control)'
         },
         {
             variant: 'filled',
             icon: false,
             size: 'sm',
-            class: 'px-(--era-inset-sm) has-[svg]:gap-(--era-inset-sm)'
+            class: 'px-(--era-inset-chip) has-[svg]:gap-(--era-inset-chip)'
         },
-        { variant: 'filled', icon: false, size: 'xxs', class: 'px-(--era-pill-xxs)' },
-        { variant: 'filled', icon: false, size: 'xs', class: 'px-(--era-px-sm)' },
-        { variant: 'filled', icon: false, size: 'icon', class: 'px-(--era-px-sm)' },
+        { 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: 'icon', class: 'px-(--era-gap)' },
         { variant: 'filled', icon: true, class: 'aspect-square px-0' },
-        // Icon glyph sizing. The glyph is the icon tier (h-xs) at default/sm —
+        // Icon glyph sizing. The glyph is the icon tier (h-icon) at default/sm —
         // matching every text button's icon — but at the tight tiers, where the box
-        // itself nears h-xs, it steps below the legibility floor so it doesn't fill
+        // itself nears h-icon, it steps below the legibility floor so it doesn't fill
         // the box: sp+4 in xxs (pad 3), sp+2 in xs/icon (pad 2). Scoped to icon:true
-        // so text+icon buttons keep their h-xs glyph. The descendant selector
+        // so text+icon buttons keep their h-icon glyph. The descendant selector
         // outranks the consumer's own size-* on the svg, so no call site changes.
         //
         // default/sm were DESCRIBED by the comment above but had no rule, so an
@@ -78,11 +78,11 @@ 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-xs)' },
-        { icon: true, size: 'sm', class: '[&_svg]:size-(--era-h-xs)' },
-        { icon: true, size: 'xxs', class: '[&_svg]:size-(--era-icon-xxs)' },
-        { icon: true, size: 'xs', class: '[&_svg]:size-(--era-icon-xs)' },
-        { icon: true, size: 'icon', class: '[&_svg]:size-(--era-icon-xs)' },
+        { 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: 'icon', class: '[&_svg]:size-(--era-glyph-icon)' },
         // filled tones
         {
             variant: 'filled',

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

@@ -22,9 +22,9 @@
 		// shrink-0: a segmented control is its buttons' width — Badge/Chip's law
 		// one tier up. Squeezed, its rounded fill slid out from under the end
 		// buttons (measured 4px at touch on the board).
-		'flex shrink-0 gap-(--era-xs-inset-sm)',
+		'flex shrink-0 gap-(--era-icon-inset-chip)',
 		orientation === 'vertical'
-			? 'flex-col items-stretch p-(--era-xs-inset-sm) [&>*]:justify-start'
+			? 'flex-col items-stretch p-(--era-icon-inset-chip) [&>*]:justify-start'
 			: 'items-center',
 		className
 	)}

package/dist/ui/calendar/calendar-day.svelte

@@ -8,7 +8,7 @@
 <Calendar.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/calendar/calendar-head-cell.svelte

@@ -8,7 +8,7 @@
 <Calendar.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/calendar/calendar-header.svelte

@@ -7,6 +7,6 @@
 
 <Calendar.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/calendar/calendar-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/calendar/calendar-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/card/card.svelte

@@ -2,7 +2,7 @@
 	import { cn, tv } from '../../utils/index.js';
 
 	export const cardVariants = tv({
-		base: 'block w-full rounded-(--era-rd-lg) text-left text-fg',
+		base: 'block w-full rounded-(--era-rd-bar) text-left text-fg',
 		variants: {
 			tone: {
 				elevated: 'bg-(--era-surface-bg-elevated) shadow-(--era-shadow)',
@@ -31,7 +31,7 @@
 			// reported it as "cards aren't evenly spaced", which is exactly what it
 			// was: the even-gap law, broken by default, in the component that
 			// bounds more consumer content than any other.
-			sectioned: { true: 'p-0', false: 'p-(--era-pad-md)' },
+			sectioned: { true: 'p-0', false: 'p-(--era-pad-card)' },
 			interactive: {
 				true: 'cursor-pointer hover:bg-(--era-highlight) hover:shadow-(--era-highlight-shadow) focus-visible:bg-(--era-highlight) era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50'
 			}
@@ -113,15 +113,15 @@
 {#snippet body()}
 	{#if sectioned}
 		{#if header}
-			<div class="border-b border-divider-faded p-(--era-pad-md) text-bright">
+			<div class="border-b border-divider-faded p-(--era-pad-card) text-bright">
 				{@render header()}
 			</div>
 		{/if}
-		<div class="p-(--era-pad-md)">
+		<div class="p-(--era-pad-card)">
 			{@render children?.()}
 		</div>
 		{#if footer}
-			<div class="border-t border-divider-faded p-(--era-pad-md)">
+			<div class="border-t border-divider-faded p-(--era-pad-card)">
 				{@render footer()}
 			</div>
 		{/if}

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

@@ -7,12 +7,12 @@ export declare const cardVariants: import("tailwind-variants").TVReturnType<{
     };
     sectioned: {
         true: "p-0";
-        false: "p-(--era-pad-md)";
+        false: "p-(--era-pad-card)";
     };
     interactive: {
         true: "cursor-pointer hover:bg-(--era-highlight) hover:shadow-(--era-highlight-shadow) focus-visible:bg-(--era-highlight) era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
     };
-}, undefined, "block w-full rounded-(--era-rd-lg) text-left text-fg", {
+}, undefined, "block w-full rounded-(--era-rd-bar) text-left text-fg", {
     tone: {
         elevated: "bg-(--era-surface-bg-elevated) shadow-(--era-shadow)";
         surface: "bg-(--era-surface-bg)";
@@ -21,7 +21,7 @@ export declare const cardVariants: import("tailwind-variants").TVReturnType<{
     };
     sectioned: {
         true: "p-0";
-        false: "p-(--era-pad-md)";
+        false: "p-(--era-pad-card)";
     };
     interactive: {
         true: "cursor-pointer hover:bg-(--era-highlight) hover:shadow-(--era-highlight-shadow) focus-visible:bg-(--era-highlight) era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
@@ -35,7 +35,7 @@ export declare const cardVariants: import("tailwind-variants").TVReturnType<{
     };
     sectioned: {
         true: "p-0";
-        false: "p-(--era-pad-md)";
+        false: "p-(--era-pad-card)";
     };
     interactive: {
         true: "cursor-pointer hover:bg-(--era-highlight) hover:shadow-(--era-highlight-shadow) focus-visible:bg-(--era-highlight) era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";

package/dist/ui/checkbox/checkbox.svelte

@@ -18,16 +18,16 @@
 	bind:checked
 	bind:indeterminate
 	class={cn(
-		'group/checkbox 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/checkbox 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}
 >
 	{#snippet children({ checked, indeterminate })}
 		{#if indeterminate}
-			<Minus class="size-[calc(var(--era-h-xs)*0.75)] text-fg" />
+			<Minus class="size-[calc(var(--era-h-icon)*0.75)] text-fg" />
 		{:else if checked}
-			<Check class="size-[calc(var(--era-h-xs)*0.75)] text-fg" />
+			<Check class="size-[calc(var(--era-h-icon)*0.75)] text-fg" />
 		{/if}
 	{/snippet}
 </Checkbox.Root>

package/dist/ui/chip/chip.svelte

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

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

@@ -1,7 +1,7 @@
 export declare const chipVariants: import("tailwind-variants").TVReturnType<{
     size: {
-        sm: "h-(--era-h-sm) min-w-(--era-h-sm) rounded-(--era-rd-sm) pl-(--era-pill-sm)";
-        xxs: "h-(--era-h-xxs) min-w-(--era-h-xxs) rounded-(--era-rd-xxs) pl-(--era-pill-xxs)";
+        sm: "h-(--era-h-chip) min-w-(--era-h-chip) rounded-(--era-rd-chip) pl-(--era-chip-px)";
+        xxs: "h-(--era-h-pill) min-w-(--era-h-pill) rounded-(--era-rd-pill) pl-(--era-pill-px)";
     };
     dismissible: {
         true: "";
@@ -9,8 +9,8 @@ export declare const chipVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, "inline-flex shrink-0 items-center bg-fill font-mono text-body leading-none whitespace-nowrap text-fg shadow-(--era-shadow) era-text-trim", {
     size: {
-        sm: "h-(--era-h-sm) min-w-(--era-h-sm) rounded-(--era-rd-sm) pl-(--era-pill-sm)";
-        xxs: "h-(--era-h-xxs) min-w-(--era-h-xxs) rounded-(--era-rd-xxs) pl-(--era-pill-xxs)";
+        sm: "h-(--era-h-chip) min-w-(--era-h-chip) rounded-(--era-rd-chip) pl-(--era-chip-px)";
+        xxs: "h-(--era-h-pill) min-w-(--era-h-pill) rounded-(--era-rd-pill) pl-(--era-pill-px)";
     };
     dismissible: {
         true: "";
@@ -18,8 +18,8 @@ export declare const chipVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        sm: "h-(--era-h-sm) min-w-(--era-h-sm) rounded-(--era-rd-sm) pl-(--era-pill-sm)";
-        xxs: "h-(--era-h-xxs) min-w-(--era-h-xxs) rounded-(--era-rd-xxs) pl-(--era-pill-xxs)";
+        sm: "h-(--era-h-chip) min-w-(--era-h-chip) rounded-(--era-rd-chip) pl-(--era-chip-px)";
+        xxs: "h-(--era-h-pill) min-w-(--era-h-pill) rounded-(--era-rd-pill) pl-(--era-pill-px)";
     };
     dismissible: {
         true: "";
@@ -30,7 +30,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     ref?: HTMLDivElement | null;
-    /** `sm` (default) is the standalone free chip; `xxs` is the smaller pill
+    /** `sm` (default) is the standalone free chip; `pill` is the smaller pill
      * that nests inside an md container (a select trigger, a button). */
     size?: 'sm' | 'xxs';
     ondismiss?: () => void;

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

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

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

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

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

@@ -15,7 +15,7 @@
 	bind:ref
 	align="start"
 	class={cn(
-		'z-50 w-max min-w-(--bits-combobox-anchor-width) overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) p-(--era-panel-inset) shadow-(--era-shadow-lg) glass-blur data-[side=bottom]:rounded-t-none data-[side=top]:rounded-b-none',
+		'z-50 w-max min-w-(--bits-combobox-anchor-width) overflow-hidden rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) p-(--era-panel-inset) shadow-(--era-shadow-lg) glass-blur data-[side=bottom]:rounded-t-none data-[side=top]:rounded-b-none',
 		className
 	)}
 	{sideOffset}

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

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

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

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

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

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

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

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

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

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

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

@@ -8,7 +8,7 @@
 <Command.Item
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-md) px-(--era-inset-md) text-body era-text-trim text-fg outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-(--era-highlight)',
+		'flex h-(--era-h-control) cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-control) px-(--era-inset-control) text-body era-text-trim text-fg outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-(--era-highlight)',
 		className
 	)}
 	{...restProps}

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

@@ -8,7 +8,7 @@
 <Command.LinkItem
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-md) px-(--era-inset-md) text-body era-text-trim text-fg no-underline outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-(--era-highlight)',
+		'flex h-(--era-h-control) cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-control) px-(--era-inset-control) text-body era-text-trim text-fg no-underline outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-(--era-highlight)',
 		className
 	)}
 	{...restProps}