@signal9/era-ui 9.0.0 → 10.1.0

package/dist/os/taskbar.svelte

@@ -234,7 +234,7 @@
 	{#if pinned.length}
 		<div class="flex shrink-0 items-center gap-(--era-gap)">
 			{#each pinned as p (p.appId)}
-				<Button icon size="default" aria-label={p.title} onclick={() => pm.open(p.appId)}>
+				<Button icon size="control" aria-label={p.title} onclick={() => pm.open(p.appId)}>
 					{#if p.icon}{@const Icon = p.icon}<Icon class="size-(--era-h-icon)" />{/if}
 				</Button>
 			{/each}
@@ -288,7 +288,7 @@
 			{#each pm.workspaces as ws, i (ws.id)}
 				<Button
 					icon
-					size="default"
+					size="control"
 					active={pm.activeWorkspaceId === ws.id}
 					title={ws.name}
 					aria-label="Switch to workspace {i + 1} ({ws.name})"
@@ -308,7 +308,7 @@
 		     consumers' own affordances). -->
 		{#if notif.unread > 0}
 			<div class="relative">
-				<Button icon size="default" aria-label="Notifications" onclick={onNotifications}>
+				<Button icon size="control" aria-label="Notifications" onclick={onNotifications}>
 					<Bell class="size-(--era-h-icon)" />
 				</Button>
 				<span
@@ -347,7 +347,7 @@
 		     add rounded-full — a circle is not era's button language. -->
 		<Button
 			icon
-			size="default"
+			size="control"
 			tone="accent"
 			aria-label="Open command bar"
 			class="shadow-(--era-shadow-lg)"

package/dist/os/toast.svelte

@@ -36,7 +36,7 @@
 			     variant's [&_svg] selector and never applied). -->
 			<Button
 				icon
-				size="xxs"
+				size="pill"
 				aria-label="Dismiss"
 				class="-mt-1 -mr-1 shrink-0"
 				onclick={() => notif.dismiss(n.id)}
@@ -49,7 +49,7 @@
 			<div class="mt-(--era-inset-chip) flex flex-wrap gap-(--era-gap)">
 				{#each n.actions as action (action.label)}
 					<Button
-						size="xs"
+						size="icon"
 						tone={n.tone === 'default' ? 'default' : n.tone}
 						onclick={() => {
 							action.onClick();

package/dist/styles/index.css

@@ -227,7 +227,9 @@
  * the pair so the runtime audit can point at it). It exists so the failure mode
  * is a no-op instead of unreadable text. */
 .era-text-trim.truncate,
-.era-text-trim-caps.truncate {
+.era-text-trim-caps.truncate,
+.era-label-ink.truncate,
+.era-token-ink.truncate {
 	line-height: normal;
 	text-box: normal;
 }
@@ -271,6 +273,10 @@
  *
  * @use on a native single-line <input> (or the text layer that must mirror
  * one) inside a fixed-height field — never alongside era-text-trim. */
+@utility era-ink-center {
+	padding-bottom: 0.08em;
+}
+
 /* TOKEN INK — the ink centring for a pill whose content is a TOKEN: an id, a
  * count, a status, a tag. Font-independent, unlike everything it replaces.
  *
@@ -299,8 +305,9 @@
  * Prose and sentence-case labels keep era-text-trim; this is for tokens.
  *
  * @use the ink centring for a token pill — a badge, a KV value, any short
- * caps-or-digits label in a fixed-height box; it needs no icon sibling (with
- * one the box must stay flex, and the general trim applies). */
+ * caps-or-digits label in a fixed-height box, CENTRED horizontally and with no
+ * icon sibling. For a left-aligned sentence-case label use era-label-ink; when
+ * an icon really must sit beside the text, see the note there. */
 @utility era-token-ink {
 	display: block;
 	align-content: center;
@@ -309,8 +316,39 @@
 	text-box: trim-both cap alphabetic;
 }
 
-@utility era-ink-center {
-	padding-bottom: 0.08em;
+/* LABEL INK — era-token-ink's mixed-case sibling, and the general answer to
+ * "this fixed-height control holds one line of text".
+ *
+ * Same mechanism, same reason: `text-box-trim` needs a BLOCK box, so the row
+ * becomes one and `align-content` (block-container alignment) does the
+ * centring. What differs is the band and the alignment, because the content
+ * class differs — a label is sentence case, so the x-height band is the visual
+ * mass to centre (cap-band reads low on "System"), and it is laid out against
+ * the row's padding rather than centred in it.
+ *
+ * WHY IT EXISTS AT ALL: era's controls are flex, and a flex container's bare
+ * text is an ANONYMOUS flex item — a box no selector reaches and no
+ * non-inherited property touches. So `era-text-trim` on a flex row is inert,
+ * contributing only its `line-height: 1`, and the ink falls back to line-box
+ * centring by font metrics. era-token-ink already fixed that for centred
+ * tokens; this fixes it for everything else.
+ *
+ * THE ICON CASE IS NOT SOLVED, and cannot be from CSS: an icon beside the text
+ * needs the box to stay flex, which re-creates the anonymous item. A component
+ * whose children are an opaque slot therefore guards it —
+ * `not-has-[svg]:era-label-ink` — and ink-centres the text-only case while
+ * leaving the icon case on line-box centring. Splitting icon and label into
+ * separate slots is what would close it; typography/inert-trim reports every
+ * site still on the fallback.
+ *
+ * @use the ink centring for a fixed-height control holding ONE line of
+ * sentence-case text and no icon — a menu item, a nav trigger, a button label.
+ * Never alongside `truncate` (the trimmed box becomes the clip). */
+@utility era-label-ink {
+	display: block;
+	align-content: center;
+	line-height: 1;
+	text-box: trim-both ex alphabetic;
 }
 
 /* In-progress text shimmer — a bright sweep through muted text (the standard

package/dist/ui/bar/bar.svelte

@@ -10,12 +10,12 @@
 	// Radius stays concentric to the height; gap/px are sp/2 (xs-inset-sm),
 	// the even gap for one-tier-smaller content at every size.
 	export const barVariants = tv({
-		base: 'flex items-center era-text-trim',
+		base: 'flex items-center leading-none',
 		variants: {
 			size: {
-				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)'
+				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
@@ -33,7 +33,7 @@
 			 */
 			content: {
 				tier: 'gap-(--era-icon-inset-chip) px-(--era-icon-inset-chip)',
-				xxs: ''
+				pill: ''
 			},
 			/**
 			 * The flush header bar capping a panel — Pane.Handle, Dialog.Header,
@@ -61,8 +61,8 @@
 		compoundVariants: [
 			// control ⊃ pill = (3sp − sp − 10)/2 — the named token.
 			{
-				size: 'md',
-				content: 'xxs',
+				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
@@ -70,12 +70,12 @@
 			// 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',
+				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>
 
@@ -85,7 +85,7 @@
 
 	let {
 		ref = $bindable(null),
-		size = 'lg',
+		size = 'bar',
 		content = 'tier',
 		divider = false,
 		children,
@@ -94,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; `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-chip) rounded-(--era-rd-chip)";
-        md: "h-(--era-h-control) rounded-(--era-rd-control)";
-        lg: "h-(--era-h-bar) rounded-(--era-rd-bar)";
+        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
@@ -20,7 +20,7 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      */
     content: {
         tier: "gap-(--era-icon-inset-chip) px-(--era-icon-inset-chip)";
-        xxs: "";
+        pill: "";
     };
     /**
      * The flush header bar capping a panel — Pane.Handle, Dialog.Header,
@@ -44,11 +44,11 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
         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", {
+}, undefined, "flex items-center leading-none", {
     size: {
-        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)";
+        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
@@ -66,7 +66,7 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      */
     content: {
         tier: "gap-(--era-icon-inset-chip) px-(--era-icon-inset-chip)";
-        xxs: "";
+        pill: "";
     };
     /**
      * The flush header bar capping a panel — Pane.Handle, Dialog.Header,
@@ -92,9 +92,9 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        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)";
+        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
@@ -112,7 +112,7 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
      */
     content: {
         tier: "gap-(--era-icon-inset-chip) px-(--era-icon-inset-chip)";
-        xxs: "";
+        pill: "";
     };
     /**
      * The flush header bar capping a panel — Pane.Handle, Dialog.Header,
@@ -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; `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
@@ -70,7 +70,18 @@
 		and they separated on press. Wrapping unifies them, and `gap: inherit`
 		forwards the button's own gap so the icon/label spacing is unchanged.
 	-->
-	<span data-button-content class="inline-flex items-center justify-center [gap:inherit]">
+	<!--
+		not-has-[svg]:era-label-ink — a text-only button ink-centres its label.
+		The span is otherwise a flex box, and a flex box's bare text is an
+		ANONYMOUS item that `text-box-trim` can never reach, so the label fell back
+		to line-box centring by font metrics (the bug era-label-ink documents).
+		With an icon present the box must stay flex for the gap, and that case is
+		still on the fallback — typography/inert-trim reports it.
+	-->
+	<span
+		data-button-content
+		class="inline-flex items-center justify-center [gap:inherit] not-has-[svg]:era-label-ink"
+	>
 		{#if loading}
 			<LoaderCircle class="size-(--era-h-icon) shrink-0 animate-spin" aria-hidden="true" />
 			{#if loadingLabel}<span class="sr-only">{loadingLabel}</span>{/if}

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: {
@@ -23,7 +22,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     active: {
         true: "";
     };
-}, undefined, "items-center gap-(--era-gap) text-body era-interactive era-text-trim", {
+}, undefined, "items-center gap-(--era-gap) text-body era-interactive leading-none", {
     variant: {
         filled: "flex justify-center shadow-(--era-shadow) hover:shadow-(--era-highlight-shadow) active:shadow-(--era-shadow-pressed) [&:active>*]:translate-x-(--era-press-sink-x) [&:active>*]:translate-y-(--era-press-sink-y)";
         link: "inline-flex underline-offset-2 hover:underline";
@@ -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

@@ -3,7 +3,7 @@ import { tv } from '../../utils/index.js';
 // entirely, so all geometry lives on filled compound variants rather than a
 // plain size variant.
 export const buttonVariants = tv({
-    base: 'items-center gap-(--era-gap) text-body era-interactive era-text-trim',
+    base: 'items-center gap-(--era-gap) text-body era-interactive leading-none',
     variants: {
         variant: {
             // The active: press treatment is inert outside the bevel surface —
@@ -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,22 +24,22 @@ export const buttonVariants = tv({
         // filled geometry
         {
             variant: 'filled',
-            size: 'default',
+            size: 'control',
             class: 'h-(--era-h-control) min-w-(--era-h-control) rounded-(--era-rd-control)'
         },
         {
             variant: 'filled',
-            size: 'sm',
+            size: 'chip',
             class: 'h-(--era-h-chip) min-w-(--era-h-chip) rounded-(--era-rd-chip)'
         },
         {
             variant: 'filled',
-            size: 'xxs',
+            size: 'pill',
             class: 'h-(--era-h-pill) min-w-(--era-h-pill) rounded-(--era-rd-pill)'
         },
         {
             variant: 'filled',
-            size: 'xs',
+            size: 'icon',
             class: 'h-(--era-h-icon) min-w-(--era-h-icon) rounded-(--era-rd-icon)'
         },
         {
@@ -52,17 +52,16 @@ export const buttonVariants = tv({
         {
             variant: 'filled',
             icon: false,
-            size: 'default',
+            size: 'control',
             class: 'px-(--era-inset-control) has-[svg]:gap-(--era-inset-control)'
         },
         {
             variant: 'filled',
             icon: false,
-            size: 'sm',
+            size: 'chip',
             class: 'px-(--era-inset-chip) has-[svg]:gap-(--era-inset-chip)'
         },
-        { 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: '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-icon) at default/sm —
@@ -78,10 +77,9 @@ 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-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: '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
         {
@@ -123,7 +121,7 @@ export const buttonVariants = tv({
     defaultVariants: {
         variant: 'filled',
         tone: 'default',
-        size: 'default',
+        size: 'control',
         icon: false,
         active: false
     }

package/dist/ui/chip/chip.svelte

@@ -13,39 +13,49 @@
 	export const chipVariants = tv({
 		// shrink-0 + nowrap for the same reason Badge carries them: the pill is
 		// already exactly its text's size, so any squeeze puts ink outside the fill.
-		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',
+		base: 'inline-flex shrink-0 items-center bg-fill font-mono text-body leading-none whitespace-nowrap text-fg shadow-(--era-shadow)',
 		variants: {
 			size: {
-				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)'
+				chip: 'h-(--era-h-chip) min-w-(--era-h-chip) rounded-(--era-rd-chip) pl-(--era-chip-px)',
+				pill: '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-chip-px)' },
-			{ size: 'xxs', dismissible: false, class: 'gap-(--era-gap) pr-(--era-pill-px)' },
+			{
+				size: 'chip',
+				dismissible: false,
+				class:
+					'gap-(--era-gap) pr-(--era-chip-px) not-has-[svg]:era-label-ink not-has-[svg]:text-center'
+			},
+			{
+				size: 'pill',
+				dismissible: false,
+				class:
+					'gap-(--era-gap) pr-(--era-pill-px) not-has-[svg]:era-label-ink not-has-[svg]:text-center'
+			},
 			// Dismissible, two geometries because the two tiers afford different ones:
 			//
-			//   sm  — the xxs-tier button NESTS, with its concentric gap mirrored as
+			//   chip — the pill-tier button NESTS, with its concentric gap mirrored as
 			//         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
+			//   pill — nesting has run out of road: density.css's own note says xxs
 			//         "is sized around text, not as a container", and the best a
 			//         nested button managed here was 1px of pad. So the dismiss is a
 			//         flush END-CAP instead — a full-height segment of the pill
 			//         (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.
+			//         the cap shares rd-pill exactly rather than approximating it.
 			{
-				size: 'sm',
+				size: 'chip',
 				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' }
+			{ size: 'pill', dismissible: true, class: 'gap-(--era-icon-inset-pill) pr-0' }
 		],
-		defaultVariants: { size: 'sm', dismissible: false }
+		defaultVariants: { size: 'chip', dismissible: false }
 	});
 </script>
 
@@ -58,7 +68,7 @@
 
 	let {
 		ref = $bindable(null),
-		size = 'sm',
+		size = 'chip',
 		ondismiss,
 		children,
 		class: className,
@@ -67,7 +77,7 @@
 		ref?: HTMLDivElement | null;
 		/** `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';
+		size?: 'chip' | 'pill';
 		ondismiss?: () => void;
 		children?: Snippet;
 	} = $props();
@@ -93,9 +103,9 @@
 		     what reads as "segment of this pill" rather than "pill on a pill". -->
 		<Button
 			icon
-			size="xxs"
+			size="pill"
 			tone="destructive"
-			class={size === 'xxs' ? 'rounded-l-none' : undefined}
+			class={size === 'pill' ? 'rounded-l-none' : undefined}
 			onclick={ondismiss}
 			onpointerdown={(e: PointerEvent) => e.stopPropagation()}
 			onpointerup={(e: PointerEvent) => e.stopPropagation()}

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

@@ -1,16 +1,16 @@
 export declare const chipVariants: import("tailwind-variants").TVReturnType<{
     size: {
-        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)";
+        chip: "h-(--era-h-chip) min-w-(--era-h-chip) rounded-(--era-rd-chip) pl-(--era-chip-px)";
+        pill: "h-(--era-h-pill) min-w-(--era-h-pill) rounded-(--era-rd-pill) pl-(--era-pill-px)";
     };
     dismissible: {
         true: "";
         false: "";
     };
-}, 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", {
+}, undefined, "inline-flex shrink-0 items-center bg-fill font-mono text-body leading-none whitespace-nowrap text-fg shadow-(--era-shadow)", {
     size: {
-        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)";
+        chip: "h-(--era-h-chip) min-w-(--era-h-chip) rounded-(--era-rd-chip) pl-(--era-chip-px)";
+        pill: "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-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)";
+        chip: "h-(--era-h-chip) min-w-(--era-h-chip) rounded-(--era-rd-chip) pl-(--era-chip-px)";
+        pill: "h-(--era-h-pill) min-w-(--era-h-pill) rounded-(--era-rd-pill) pl-(--era-pill-px)";
     };
     dismissible: {
         true: "";
@@ -32,7 +32,7 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     ref?: HTMLDivElement | null;
     /** `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';
+    size?: 'chip' | 'pill';
     ondismiss?: () => void;
     children?: Snippet;
 };

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

@@ -8,7 +8,7 @@
 <Command.Item
 	bind:ref
 	class={cn(
-		'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)',
+		'flex h-(--era-h-control) cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-control) px-(--era-inset-control) text-body leading-none text-fg outline-none select-none not-has-[svg]:era-label-ink 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-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)',
+		'flex h-(--era-h-control) cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-control) px-(--era-inset-control) text-body leading-none text-fg no-underline outline-none select-none not-has-[svg]:era-label-ink data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-(--era-highlight)',
 		className
 	)}
 	{...restProps}