@signal9/era-ui 7.0.0 → 9.0.0

package/dist/styles/prose.css

@@ -0,0 +1,384 @@
+/*
+ * NOTE PROSE — the document styling for a TipTap editor on era's tokens.
+ *
+ * Every rule hangs off `.era-notes-prose`, so it applies to any editor you put
+ * that class on: `NoteEditor` sets it itself, and a hand-rolled TipTap instance
+ * gets the same typography by adding the class and importing this file.
+ *
+ * It used to live in note-editor.svelte's <style> block, which made it
+ * unreachable: Svelte scopes a component's styles, so the built rule was
+ * `.era-notes-prose.svelte-r0lddw` and the class did nothing on anyone else's
+ * element. 364 lines of document typography — headings, code blocks with
+ * highlight.js tokens, task lists, tables, details, the first-line optical
+ * inset — were effectively private to one component. Now they are
+ * `@signal9/era-ui/styles/prose`.
+ *
+ * NoteEditor imports this itself, so mounting it still needs no CSS ceremony.
+ * Import it directly only when you are building your own editor.
+ *
+ * Everything is expressed in era tokens, so a document tracks the density,
+ * theme, surface, corners and font axes exactly like the chrome around it.
+ */
+
+/*
+ * TipTap renders headless: the editable element it creates carries `.tiptap`,
+ * so every rule here is scoped to that inside this component's wrapper.
+ *
+ * Vertical rhythm is ONE value — --era-gap, the library's inter-element gap —
+ * on every block's bottom margin. A document then breathes at exactly the
+ * pace the surrounding chrome does, and loosens with density along with it.
+ *
+ * Font family is deliberately absent: the [data-font] axis sets it globally
+ * (with !important, by design), so anything declared here would either lose
+ * or break the axis promise.
+ */
+.era-notes-prose .tiptap {
+	outline: none;
+	min-height: 100%;
+	font-size: var(--era-text);
+	line-height: 1.6;
+	color: var(--color-fg);
+
+	/*
+	 * The first line's half-leading is not padding, but it reads as padding.
+	 *
+	 * line-height 1.6 puts ~8px of empty box above the first glyph's cap, on
+	 * top of the container's 8px inset — so the document opened 16px from the
+	 * top and 8px from the left, an asymmetry that grows with the first
+	 * block's font size (a note starting with a heading was the worst case).
+	 *
+	 * Trimming the block-start to the cap edge makes the ink itself sit on the
+	 * container's inset, so the first thing you read has the same space above
+	 * it as beside it, whatever block it happens to be. This is the block half
+	 * of what era-text-trim does for single-line controls; only the START is
+	 * trimmed, because the editor scrolls and trimming the end would put the
+	 * last line's descenders past the scrollable area.
+	 *
+	 * Firefox has no text-box yet and keeps the untrimmed leading — the same
+	 * graceful degradation era-text-trim already ships with.
+	 */
+	text-box-trim: trim-start;
+	text-box-edge: cap alphabetic;
+}
+
+/* The optical half of the trim. cap trimming is EXACT — the cap sits on the
+ * container inset to the pixel — but the LEFT side isn't: glyphs start with
+ * their side bearing (~0.07em of ink-free space inside the line box), so a
+ * geometrically-equal corner read top-tight. The first block gets that same
+ * allowance back as margin, in em so a heading's compensation scales with
+ * the heading — the corner then MEASURES slightly uneven and finally LOOKS
+ * even, which is the order optics always wins in.
+ *
+ * 0.22em, not the ~0.07em side-bearing alone: a first line is usually a
+ * heavy cap or a heading, and dense ink right at a boundary needs more
+ * room than a light vertical stem to feel equally far from it — the same
+ * reason display type sets its top margin above geometric equality. Tuned
+ * by eye against the left inset. */
+.era-notes-prose .tiptap > :first-child {
+	margin-top: 0.22em;
+}
+
+/* FALLBACK for engines without text-box (Firefox): the trim above silently
+ * disappears there, and the first line opened ~0.47em too low (measured:
+ * cap 16.4px from the top against 8px from the left, dense/mono) — the
+ * exact asymmetry the trim exists to remove. Approximate the same cut with
+ * a negative first-block margin: -0.45em is the first line's half-leading
+ * (0.3em at line-height 1.6) plus the ascent-above-cap of the ui stacks
+ * (~0.15-0.17em). In em on purpose — it scales with the FIRST BLOCK's own
+ * size, so a note opening on an h1 and one opening on a paragraph both
+ * land their cap on the container inset, which one padding value could
+ * never do for both (the reference terminal app's pt-1 is this same idea,
+ * tuned only for paragraphs). The margin collapses up through .tiptap and
+ * stops at the scroll container's padding, which is where it should act.
+ * Within ~1px of the trimmed geometry; engines with text-box never match
+ * this block and keep the exact version. */
+@supports not ((text-box-trim: trim-start) and (text-box-edge: cap alphabetic)) {
+	.era-notes-prose .tiptap > :first-child {
+		/* -0.45em of untrimmed leading, plus the same +0.22em optical
+		 * allowance the trimmed path adds above. */
+		margin-top: -0.23em;
+	}
+}
+
+/* Placeholder, via @tiptap/extension-placeholder */
+.era-notes-prose .tiptap p.is-editor-empty:first-child::before {
+	content: attr(data-placeholder);
+	float: left;
+	height: 0;
+	color: var(--color-muted);
+	pointer-events: none;
+}
+
+/* Typography */
+.era-notes-prose .tiptap p {
+	margin: 0 0 var(--era-gap);
+}
+.era-notes-prose .tiptap p:last-child {
+	margin-bottom: 0;
+}
+.era-notes-prose .tiptap h1 {
+	font-size: 1.5em;
+}
+.era-notes-prose .tiptap h2 {
+	font-size: 1.25em;
+}
+.era-notes-prose .tiptap h3 {
+	font-size: 1.1em;
+}
+.era-notes-prose .tiptap h1,
+.era-notes-prose .tiptap h2,
+.era-notes-prose .tiptap h3 {
+	margin: 0 0 var(--era-gap);
+	font-weight: 600;
+	line-height: 1.6;
+	color: var(--color-bright);
+}
+.era-notes-prose .tiptap strong {
+	font-weight: 600;
+	color: var(--color-bright);
+}
+.era-notes-prose .tiptap em {
+	font-style: italic;
+}
+.era-notes-prose .tiptap s {
+	text-decoration: line-through;
+	text-decoration-thickness: 0.5px;
+}
+
+/* Code — inline chips take the xxs radius, blocks the lg one a Card uses. */
+.era-notes-prose .tiptap code {
+	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-control);
+	border-radius: var(--era-rd-bar);
+	background: var(--color-surface);
+	box-shadow: var(--era-shadow);
+}
+.era-notes-prose .tiptap pre code {
+	padding: 0;
+	border-radius: 0;
+	background: transparent;
+}
+
+/* Syntax highlighting — the neutral scale, so it themes with everything else. */
+.era-notes-prose .tiptap pre .hljs-keyword,
+.era-notes-prose .tiptap pre .hljs-built_in {
+	color: var(--color-9);
+}
+.era-notes-prose .tiptap pre .hljs-string,
+.era-notes-prose .tiptap pre .hljs-regexp {
+	color: var(--color-10);
+}
+.era-notes-prose .tiptap pre .hljs-number,
+.era-notes-prose .tiptap pre .hljs-literal,
+.era-notes-prose .tiptap pre .hljs-type,
+.era-notes-prose .tiptap pre .hljs-class {
+	color: var(--color-11);
+}
+.era-notes-prose .tiptap pre .hljs-comment {
+	color: var(--color-8);
+}
+.era-notes-prose .tiptap pre .hljs-function,
+.era-notes-prose .tiptap pre .hljs-title {
+	font-weight: 600;
+	color: var(--color-9);
+}
+.era-notes-prose .tiptap pre .hljs-variable,
+.era-notes-prose .tiptap pre .hljs-attr {
+	color: var(--color-12);
+}
+.era-notes-prose .tiptap pre .hljs-params {
+	color: var(--color-11);
+}
+.era-notes-prose .tiptap pre .hljs-meta,
+.era-notes-prose .tiptap pre .hljs-tag {
+	color: var(--color-10);
+}
+
+/* Blockquote */
+.era-notes-prose .tiptap blockquote {
+	margin: 0 0 var(--era-gap);
+	padding-left: var(--era-inset-control);
+	border-left: 2px solid var(--era-divider-color);
+	color: var(--color-muted);
+}
+
+/* Lists */
+.era-notes-prose .tiptap li,
+.era-notes-prose .tiptap li p,
+.era-notes-prose .tiptap ul,
+.era-notes-prose .tiptap ol {
+	margin: 0;
+}
+.era-notes-prose .tiptap ul {
+	padding-left: 1.4em;
+	list-style-type: disc;
+}
+.era-notes-prose .tiptap ol {
+	padding-left: 1.9em;
+	list-style-type: decimal;
+}
+
+/* Task list — a checkbox styled like era's Checkbox, at the icon tier. */
+.era-notes-prose .tiptap .task-list {
+	padding-left: 0;
+	list-style: none;
+}
+.era-notes-prose .tiptap .task-item {
+	display: flex;
+	gap: var(--era-gap);
+}
+.era-notes-prose .tiptap .task-item label {
+	/* Match the line box so the box centres against the first line of text. */
+	display: flex;
+	align-items: center;
+	height: calc(var(--era-text) * 1.6);
+}
+.era-notes-prose .tiptap .task-item input[type='checkbox'] {
+	flex-shrink: 0;
+	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;
+	cursor: pointer;
+	transition:
+		background var(--era-duration) var(--era-ease),
+		box-shadow var(--era-duration) var(--era-ease);
+}
+.era-notes-prose .tiptap .task-item input[type='checkbox']:hover {
+	background: var(--era-highlight);
+}
+.era-notes-prose .tiptap .task-item input[type='checkbox']:checked {
+	background: var(--color-primary);
+	box-shadow: var(--era-shadow-pressed);
+}
+.era-notes-prose .tiptap .task-item[data-checked='true'] > div > p {
+	color: var(--color-muted);
+	text-decoration: line-through;
+}
+
+/* Horizontal rule */
+.era-notes-prose .tiptap hr {
+	margin: var(--era-gap) 0;
+	border: none;
+	border-top: 1px solid var(--era-divider-color);
+}
+
+/* Links — the era-link recipe, inlined because ProseMirror owns this DOM. */
+.era-notes-prose .tiptap a {
+	color: var(--color-link);
+	text-decoration-line: underline;
+	text-decoration-color: color-mix(in oklch, currentColor 30%, transparent);
+	text-underline-offset: 0.2em;
+	cursor: pointer;
+	transition: text-decoration-color var(--era-duration) var(--era-ease);
+}
+.era-notes-prose .tiptap a:hover {
+	text-decoration-color: currentColor;
+}
+
+/* Highlight — the warning token PAIR, not a wash of it.
+ *
+ * This was a 25% warning tint with `color: inherit`, which is two problems at
+ * once: at 25% the mark barely separates from the page, and pushing the alpha
+ * up to fix that puts light body text on yellow, which is worse. The pair
+ * exists for exactly this — warning-fg is dark in EVERY mode by design
+ * (see themes.css: yellow cannot carry light text), so a solid fill reads as
+ * a real highlighter and the text on it stays legible in both modes. */
+.era-notes-prose .tiptap mark {
+	padding: 1px 0;
+	background: var(--color-warning);
+	color: var(--color-warning-fg);
+}
+
+/* Table */
+.era-notes-prose .tiptap .note-table {
+	width: 100%;
+	margin: 0 0 var(--era-gap);
+	border-collapse: collapse;
+	table-layout: fixed;
+}
+.era-notes-prose .tiptap .note-table td,
+.era-notes-prose .tiptap .note-table th {
+	padding: var(--era-inset-chip) var(--era-inset-control);
+	border: 1px solid var(--era-divider-color);
+	text-align: left;
+	vertical-align: top;
+}
+.era-notes-prose .tiptap .note-table th {
+	background: var(--color-surface);
+	font-weight: 600;
+	color: var(--color-bright);
+}
+.era-notes-prose .tiptap .note-table td > p,
+.era-notes-prose .tiptap .note-table th > p {
+	margin: 0;
+}
+
+/* Details (collapsible) */
+.era-notes-prose .tiptap details {
+	margin: 0 0 var(--era-gap);
+	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);
+}
+.era-notes-prose .tiptap details summary {
+	font-weight: 600;
+	color: var(--color-bright);
+	cursor: pointer;
+}
+.era-notes-prose .tiptap details > div {
+	margin-top: var(--era-gap);
+}
+
+/* Image */
+.era-notes-prose .tiptap img {
+	max-width: 100%;
+	height: auto;
+	border-radius: var(--era-rd-control);
+}
+
+/*
+ * ProseMirror ships hardcoded selection colours (#8cf outlines, a black gap
+ * cursor, rgba(200,200,255,.4) cell selection, #adf resize handles). Each is
+ * overridden here or the editor shows chrome from a different design system.
+ */
+.era-notes-prose .tiptap .ProseMirror-selectednode {
+	outline: 2px solid var(--color-primary);
+}
+.era-notes-prose .tiptap li.ProseMirror-selectednode {
+	outline: none;
+}
+.era-notes-prose .tiptap li.ProseMirror-selectednode::after {
+	border-color: var(--color-primary);
+}
+.era-notes-prose .ProseMirror-gapcursor::after {
+	border-top-color: var(--color-primary);
+}
+.era-notes-prose .tiptap .selectedCell::after {
+	background: var(--era-highlight);
+}
+.era-notes-prose .tiptap .column-resize-handle {
+	background-color: var(--color-primary);
+}
+/* NO ::selection rule here, deliberately.
+ *
+ * era owns text selection as a surface token contract — --era-selection-bg /
+ * -fg / -shadow (surfaces/base.css), which is how flat gets inverse video,
+ * glass a glowing wash, and bevel an opaque accent bar. This file used to
+ * override it with `background: var(--color-4)` and no `color`, which threw
+ * all of that away AND left body text on a mid-scale grey: the band barely
+ * separated from the page and the glyphs sat on top of it at whatever
+ * contrast happened to fall out. Dropping the override restores both the
+ * contrast (bright fill, --color-1 glyphs) and the per-surface treatment.
+ *
+ * The ProseMirror overrides above are still needed — those replace hardcoded
+ * library chrome that no era token would otherwise reach. */

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. */