@signal9/era-ui 8.0.0 → 10.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)'
+				chip: 'h-(--era-h-chip) rounded-(--era-rd-chip)',
+				control: 'h-(--era-h-control) rounded-(--era-rd-control)',
+				bar: 'h-(--era-h-bar) rounded-(--era-rd-bar)'
 			},
 			/**
 			 * The tier of the CONTROLS inside, because that is what the bar's own
@@ -25,15 +25,15 @@
 			 * 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)',
-				xxs: ''
+				tier: 'gap-(--era-icon-inset-chip) px-(--era-icon-inset-chip)',
+				pill: ''
 			},
 			/**
 			 * The flush header bar capping a panel — Pane.Handle, Dialog.Header,
@@ -54,20 +54,28 @@
 			 *   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: 'control',
+				content: 'pill',
+				class: 'gap-(--era-pill-inset-control) px-(--era-pill-inset-control)'
+			},
+			// chip ⊃ pill — its own token, not the text inset it used to borrow. The two
 			// 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: 'chip',
+				content: 'pill',
+				class: 'gap-(--era-pill-inset-chip) px-(--era-pill-inset-chip)'
+			}
 		],
-		defaultVariants: { size: 'lg', content: 'tier', divider: false }
+		defaultVariants: { size: 'bar', content: 'tier', divider: false }
 	});
 </script>
 
@@ -77,7 +85,7 @@
 
 	let {
 		ref = $bindable(null),
-		size = 'lg',
+		size = 'bar',
 		content = 'tier',
 		divider = false,
 		children,
@@ -86,13 +94,13 @@
 	}: HTMLAttributes<HTMLDivElement> & {
 		ref?: HTMLDivElement | null;
 		/** Height tier (scales with density). Default `lg` — a full toolbar. */
-		size?: 'sm' | 'md' | 'lg';
+		size?: 'chip' | 'control' | 'bar';
 		/**
 		 * Tier of the controls inside — drives the bar's padding and gap so they
-		 * stay concentric to them. `tier` (default) is one tier smaller; `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';
+		content?: 'tier' | 'pill';
 		/** The flush cap-a-panel chrome: outset divider below, bottom rd-md. */
 		divider?: boolean;
 		children?: Snippet;

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

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

package/dist/ui/button/button.svelte

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

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

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

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

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

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

package/dist/ui/button/variants.js

@@ -16,7 +16,7 @@ export const buttonVariants = tv({
             link: 'inline-flex underline-offset-2 hover:underline'
         },
         tone: { default: '', accent: '', destructive: '', success: '', warning: '' },
-        size: { default: '', sm: '', xxs: '', xs: '', icon: '' },
+        size: { control: '', chip: '', pill: '', icon: '' },
         icon: { true: '' },
         active: { true: '' }
     },
@@ -24,52 +24,51 @@ export const buttonVariants = tv({
         // filled geometry
         {
             variant: 'filled',
-            size: 'default',
-            class: 'h-(--era-h-md) min-w-(--era-h-md) rounded-(--era-rd-md)'
+            size: 'control',
+            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)'
+            size: 'chip',
+            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)'
+            size: 'pill',
+            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)'
+            size: 'icon',
+            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.
         {
             variant: 'filled',
             icon: false,
-            size: 'default',
-            class: 'px-(--era-inset-md) has-[svg]:gap-(--era-inset-md)'
+            size: 'control',
+            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)'
+            size: 'chip',
+            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: 'pill', class: 'px-(--era-pill-px)' },
+        { variant: 'filled', icon: false, size: 'icon', class: 'px-(--era-gap)' },
         { variant: 'filled', icon: true, class: 'aspect-square px-0' },
-        // Icon glyph sizing. The glyph is the icon tier (h-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 +77,10 @@ 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: 'control', class: '[&_svg]:size-(--era-h-icon)' },
+        { icon: true, size: 'chip', class: '[&_svg]:size-(--era-h-icon)' },
+        { icon: true, size: 'pill', class: '[&_svg]:size-(--era-glyph-pill)' },
+        { icon: true, size: 'icon', class: '[&_svg]:size-(--era-glyph-icon)' },
         // filled tones
         {
             variant: 'filled',
@@ -123,7 +121,7 @@ export const buttonVariants = tv({
     defaultVariants: {
         variant: 'filled',
         tone: 'default',
-        size: 'default',
+        size: 'control',
         icon: false,
         active: false
     }

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}