@signal9/era-ui 8.0.0 → 9.0.0

package/dist/styles/prose.css

@@ -147,15 +147,15 @@
 
 /* Code — inline chips take the xxs radius, blocks the lg one a Card uses. */
 .era-notes-prose .tiptap code {
-	padding: 1px var(--era-inset-xxs);
-	border-radius: var(--era-rd-xxs);
+	padding: 1px var(--era-inset-pill);
+	border-radius: var(--era-rd-pill);
 	background: var(--era-surface-bg-elevated);
 }
 .era-notes-prose .tiptap pre {
 	overflow-x: auto;
 	margin: 0 0 var(--era-gap);
-	padding: var(--era-inset-md);
-	border-radius: var(--era-rd-lg);
+	padding: var(--era-inset-control);
+	border-radius: var(--era-rd-bar);
 	background: var(--color-surface);
 	box-shadow: var(--era-shadow);
 }
@@ -203,7 +203,7 @@
 /* Blockquote */
 .era-notes-prose .tiptap blockquote {
 	margin: 0 0 var(--era-gap);
-	padding-left: var(--era-inset-md);
+	padding-left: var(--era-inset-control);
 	border-left: 2px solid var(--era-divider-color);
 	color: var(--color-muted);
 }
@@ -241,9 +241,9 @@
 }
 .era-notes-prose .tiptap .task-item input[type='checkbox'] {
 	flex-shrink: 0;
-	width: calc(var(--era-h-xs) - 4px);
-	height: calc(var(--era-h-xs) - 4px);
-	border-radius: var(--era-rd-xs);
+	width: calc(var(--era-h-icon) - 4px);
+	height: calc(var(--era-h-icon) - 4px);
+	border-radius: var(--era-rd-icon);
 	background: var(--era-surface-bg-elevated);
 	box-shadow: var(--era-shadow-well);
 	appearance: none;
@@ -307,7 +307,7 @@
 }
 .era-notes-prose .tiptap .note-table td,
 .era-notes-prose .tiptap .note-table th {
-	padding: var(--era-inset-sm) var(--era-inset-md);
+	padding: var(--era-inset-chip) var(--era-inset-control);
 	border: 1px solid var(--era-divider-color);
 	text-align: left;
 	vertical-align: top;
@@ -325,8 +325,8 @@
 /* Details (collapsible) */
 .era-notes-prose .tiptap details {
 	margin: 0 0 var(--era-gap);
-	padding: var(--era-inset-sm) var(--era-inset-md);
-	border-radius: var(--era-rd-md);
+	padding: var(--era-inset-chip) var(--era-inset-control);
+	border-radius: var(--era-rd-control);
 	background: var(--era-surface-bg-elevated);
 	box-shadow: var(--era-shadow);
 }
@@ -343,7 +343,7 @@
 .era-notes-prose .tiptap img {
 	max-width: 100%;
 	height: auto;
-	border-radius: var(--era-rd-md);
+	border-radius: var(--era-rd-control);
 }
 
 /*

package/dist/styles/surfaces/base.css

@@ -161,7 +161,7 @@
 
 /* Concentric radius for a row inside a panel: the panel's radius minus its
  * inset. Declared on the universal selector (like the density ladder) so it
- * re-derives against each element's own --era-rd-md — density subtree
+ * re-derives against each element's own --era-rd-control — density subtree
  * overrides stay correct.
  *
  * NO SURFACE GATE. This used to be multiplied by --era-item-rd-scale, which
@@ -172,13 +172,13 @@
  * owns radii, globally, with no exceptions for a consumer to discover.
  *
  * The gate was also redundant. The formula already answers both axes on its
- * own: at data-corners="square" --era-rd-md collapses to 0, so this collapses
+ * own: at data-corners="square" --era-rd-control collapses to 0, so this collapses
  * with it; on flat --era-panel-inset is 0, so a flush full-width row simply
  * takes the panel's own radius — which is the concentric answer for a row
  * whose panel has no frame to nest inside. Flat menus keep their flush,
  * full-width rows; only the highlight's corners now follow the axis. */
 * {
-	--era-item-rd: max(0px, calc(var(--era-rd-md) - var(--era-panel-inset)));
+	--era-item-rd: max(0px, calc(var(--era-rd-control) - var(--era-panel-inset)));
 }
 
 /*

package/dist/styles/surfaces/bevel.css

@@ -110,8 +110,8 @@
 /*
  * SMALL-BUTTON SINK — the depression, scaled to the keycap.
  *
- * The 1px content sink is tuned for a default (h-md) button, where it is ~4% of
- * the box. On the h-xs tier — size="xs" and size="icon", the 14px squares a
+ * The 1px content sink is tuned for a default (h-control) button, where it is ~4% of
+ * the box. On the h-icon tier — size="xs" and size="icon", the 14px squares a
  * pane's close X is built from — that same 1px is ~7% of the box and the glyph,
  * which fills the button, visibly drops too far on press. Half the sink
  * (proportional: 14/24 ≈ 0.58, rounded to 0.5) puts the small keycap's travel

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

@@ -14,11 +14,11 @@
 <Accordion.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) px-(--era-inset-md) text-body text-fg hover:bg-(--era-highlight) hover:shadow-(--era-highlight-shadow) focus:outline-none disabled:opacity-50',
+		'flex h-(--era-h-control) w-full items-center justify-between gap-(--era-icon-inset-chip) rounded-(--era-rd-control) px-(--era-inset-control) text-body text-fg hover:bg-(--era-highlight) hover:shadow-(--era-highlight-shadow) focus:outline-none disabled:opacity-50',
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronDown class="size-(--era-h-xs) text-muted" />
+	<ChevronDown class="size-(--era-h-icon) text-muted" />
 </Accordion.Trigger>

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

@@ -15,7 +15,7 @@
 	<AlertDialog.Content
 		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 gap-(--era-gap) rounded-(--era-rd-lg) border border-divider bg-(--era-surface-bg) p-(--era-pad-md) shadow-(--era-shadow-lg) glass-blur',
+			'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 gap-(--era-gap) rounded-(--era-rd-bar) border border-divider bg-(--era-surface-bg) p-(--era-pad-card) shadow-(--era-shadow-lg) glass-blur',
 			className
 		)}
 		{...restProps}

package/dist/ui/aspect-ratio/aspect-ratio.svelte

@@ -12,7 +12,7 @@
 
 <AspectRatio.Root
 	bind:ref
-	class={cn('overflow-hidden rounded-(--era-rd-md)', className)}
+	class={cn('overflow-hidden rounded-(--era-rd-control)', className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -13,7 +13,7 @@
 <Avatar.Root
 	bind:ref
 	class={cn(
-		'inline-flex size-(--era-h-md) shrink-0 items-center justify-center overflow-hidden rounded-full bg-(--era-surface-bg-elevated) text-fg shadow-(--era-shadow)',
+		'inline-flex size-(--era-h-control) shrink-0 items-center justify-center overflow-hidden rounded-full bg-(--era-surface-bg-elevated) text-fg shadow-(--era-shadow)',
 		className
 	)}
 	{...restProps}

package/dist/ui/badge/badge.svelte

@@ -19,7 +19,7 @@
 		// that cost. A badge holding an icon must stay flex to lay the icon out
 		// beside the text, and keeps the general trim — its line-height:1 plus
 		// flex centring, which is the best available when the text is anonymous.
-		base: 'inline-flex h-(--era-h-xxs) min-w-(--era-h-xxs) shrink-0 items-center justify-center gap-(--era-gap) rounded-(--era-rd-xxs) px-(--era-pill-xxs) font-mono text-body leading-none whitespace-nowrap has-[svg]:gap-(--era-inset-xxs) era-text-trim not-has-[svg]:era-token-ink',
+		base: 'inline-flex h-(--era-h-pill) min-w-(--era-h-pill) shrink-0 items-center justify-center gap-(--era-gap) rounded-(--era-rd-pill) px-(--era-pill-px) font-mono text-body leading-none whitespace-nowrap has-[svg]:gap-(--era-inset-pill) era-text-trim not-has-[svg]:era-token-ink',
 		variants: {
 			tone: {
 				default: 'bg-fill text-fg',

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

@@ -6,7 +6,7 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         success: "bg-success text-success-fg";
         warning: "bg-warning text-warning-fg";
     };
-}, undefined, "inline-flex h-(--era-h-xxs) min-w-(--era-h-xxs) shrink-0 items-center justify-center gap-(--era-gap) rounded-(--era-rd-xxs) px-(--era-pill-xxs) font-mono text-body leading-none whitespace-nowrap has-[svg]:gap-(--era-inset-xxs) era-text-trim not-has-[svg]:era-token-ink", {
+}, undefined, "inline-flex h-(--era-h-pill) min-w-(--era-h-pill) shrink-0 items-center justify-center gap-(--era-gap) rounded-(--era-rd-pill) px-(--era-pill-px) font-mono text-body leading-none whitespace-nowrap has-[svg]:gap-(--era-inset-pill) era-text-trim not-has-[svg]:era-token-ink", {
     tone: {
         default: "bg-fill text-fg";
         accent: "bg-primary text-primary-fg";

package/dist/ui/bar/bar.svelte

@@ -13,9 +13,9 @@
 		base: 'flex items-center era-text-trim',
 		variants: {
 			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
@@ -25,14 +25,14 @@
 			 * 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: ''
 			},
 			/**
@@ -54,18 +54,26 @@
 			 *   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: ''
 			}
 		},
 		compoundVariants: [
-			// md ⊃ xxs = (3sp − sp − 10)/2 — the named token.
-			{ size: 'md', content: 'xxs', class: 'gap-(--era-xxs-inset-md) px-(--era-xxs-inset-md)' },
-			// sm ⊃ xxs — its own token, not the text inset it used to borrow. The two
+			// control ⊃ pill = (3sp − sp − 10)/2 — the named token.
+			{
+				size: 'md',
+				content: 'xxs',
+				class: 'gap-(--era-pill-inset-control) px-(--era-pill-inset-control)'
+			},
+			// chip ⊃ pill — its own token, not the text inset it used to borrow. The two
 			// were the same number only while type was 14px at every density; dense's
-			// 12px broke the tie and left this pairing a pixel wide. (lg ⊃ xxs has no
+			// 12px broke the tie and left this pairing a pixel wide. (bar ⊃ pill has no
 			// token because nothing pairs a page header with pill-tier controls.)
-			{ size: 'sm', content: 'xxs', class: 'gap-(--era-xxs-inset-sm) px-(--era-xxs-inset-sm)' }
+			{
+				size: 'sm',
+				content: 'xxs',
+				class: 'gap-(--era-pill-inset-chip) px-(--era-pill-inset-chip)'
+			}
 		],
 		defaultVariants: { size: 'lg', content: 'tier', divider: false }
 	});
@@ -89,8 +97,8 @@
 		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/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>