@signal9/era-ui 7.0.0 → 9.0.0

package/dist/apps/notes/note-editor.svelte

@@ -18,6 +18,9 @@
 	import { untrack } from 'svelte';
 	import { Editor, type JSONContent } from '@tiptap/core';
 	import { noteExtensions } from './editor/extensions.js';
+	// Side-effect import: mounting the editor should not require the consumer to
+	// remember a stylesheet. Also published as `@signal9/era-ui/styles/prose`.
+	import '../../styles/prose.css';
 
 	interface Props {
 		/** Initial document. Later changes are ignored — re-key to reseed. */
@@ -167,367 +170,7 @@
 <!-- eslint-disable better-tailwindcss/no-unknown-classes -- era-notes-prose is defined in this component's scoped stylesheet -->
 <div class="era-notes-prose min-w-0 {className ?? ''}" {@attach initEditor}></div>
 
-<style>
-	/*
-	 * 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 :global(.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 :global(.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 :global(.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 :global(.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 :global(.tiptap p) {
-		margin: 0 0 var(--era-gap);
-	}
-	.era-notes-prose :global(.tiptap p:last-child) {
-		margin-bottom: 0;
-	}
-	.era-notes-prose :global(.tiptap h1) {
-		font-size: 1.5em;
-	}
-	.era-notes-prose :global(.tiptap h2) {
-		font-size: 1.25em;
-	}
-	.era-notes-prose :global(.tiptap h3) {
-		font-size: 1.1em;
-	}
-	.era-notes-prose :global(.tiptap h1),
-	.era-notes-prose :global(.tiptap h2),
-	.era-notes-prose :global(.tiptap h3) {
-		margin: 0 0 var(--era-gap);
-		font-weight: 600;
-		line-height: 1.6;
-		color: var(--color-bright);
-	}
-	.era-notes-prose :global(.tiptap strong) {
-		font-weight: 600;
-		color: var(--color-bright);
-	}
-	.era-notes-prose :global(.tiptap em) {
-		font-style: italic;
-	}
-	.era-notes-prose :global(.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 :global(.tiptap code) {
-		padding: 1px var(--era-inset-xxs);
-		border-radius: var(--era-rd-xxs);
-		background: var(--era-surface-bg-elevated);
-	}
-	.era-notes-prose :global(.tiptap pre) {
-		overflow-x: auto;
-		margin: 0 0 var(--era-gap);
-		padding: var(--era-inset-md);
-		border-radius: var(--era-rd-lg);
-		background: var(--color-surface);
-		box-shadow: var(--era-shadow);
-	}
-	.era-notes-prose :global(.tiptap pre code) {
-		padding: 0;
-		border-radius: 0;
-		background: transparent;
-	}
-
-	/* Syntax highlighting — the neutral scale, so it themes with everything else. */
-	.era-notes-prose :global(.tiptap pre .hljs-keyword),
-	.era-notes-prose :global(.tiptap pre .hljs-built_in) {
-		color: var(--color-9);
-	}
-	.era-notes-prose :global(.tiptap pre .hljs-string),
-	.era-notes-prose :global(.tiptap pre .hljs-regexp) {
-		color: var(--color-10);
-	}
-	.era-notes-prose :global(.tiptap pre .hljs-number),
-	.era-notes-prose :global(.tiptap pre .hljs-literal),
-	.era-notes-prose :global(.tiptap pre .hljs-type),
-	.era-notes-prose :global(.tiptap pre .hljs-class) {
-		color: var(--color-11);
-	}
-	.era-notes-prose :global(.tiptap pre .hljs-comment) {
-		color: var(--color-8);
-	}
-	.era-notes-prose :global(.tiptap pre .hljs-function),
-	.era-notes-prose :global(.tiptap pre .hljs-title) {
-		font-weight: 600;
-		color: var(--color-9);
-	}
-	.era-notes-prose :global(.tiptap pre .hljs-variable),
-	.era-notes-prose :global(.tiptap pre .hljs-attr) {
-		color: var(--color-12);
-	}
-	.era-notes-prose :global(.tiptap pre .hljs-params) {
-		color: var(--color-11);
-	}
-	.era-notes-prose :global(.tiptap pre .hljs-meta),
-	.era-notes-prose :global(.tiptap pre .hljs-tag) {
-		color: var(--color-10);
-	}
-
-	/* Blockquote */
-	.era-notes-prose :global(.tiptap blockquote) {
-		margin: 0 0 var(--era-gap);
-		padding-left: var(--era-inset-md);
-		border-left: 2px solid var(--era-divider-color);
-		color: var(--color-muted);
-	}
-
-	/* Lists */
-	.era-notes-prose :global(.tiptap li),
-	.era-notes-prose :global(.tiptap li p),
-	.era-notes-prose :global(.tiptap ul),
-	.era-notes-prose :global(.tiptap ol) {
-		margin: 0;
-	}
-	.era-notes-prose :global(.tiptap ul) {
-		padding-left: 1.4em;
-		list-style-type: disc;
-	}
-	.era-notes-prose :global(.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 :global(.tiptap .task-list) {
-		padding-left: 0;
-		list-style: none;
-	}
-	.era-notes-prose :global(.tiptap .task-item) {
-		display: flex;
-		gap: var(--era-gap);
-	}
-	.era-notes-prose :global(.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 :global(.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);
-		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 :global(.tiptap .task-item input[type='checkbox']:hover) {
-		background: var(--era-highlight);
-	}
-	.era-notes-prose :global(.tiptap .task-item input[type='checkbox']:checked) {
-		background: var(--color-primary);
-		box-shadow: var(--era-shadow-pressed);
-	}
-	.era-notes-prose :global(.tiptap .task-item[data-checked='true'] > div > p) {
-		color: var(--color-muted);
-		text-decoration: line-through;
-	}
-
-	/* Horizontal rule */
-	.era-notes-prose :global(.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 :global(.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 :global(.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 :global(.tiptap mark) {
-		padding: 1px 0;
-		background: var(--color-warning);
-		color: var(--color-warning-fg);
-	}
-
-	/* Table */
-	.era-notes-prose :global(.tiptap .note-table) {
-		width: 100%;
-		margin: 0 0 var(--era-gap);
-		border-collapse: collapse;
-		table-layout: fixed;
-	}
-	.era-notes-prose :global(.tiptap .note-table td),
-	.era-notes-prose :global(.tiptap .note-table th) {
-		padding: var(--era-inset-sm) var(--era-inset-md);
-		border: 1px solid var(--era-divider-color);
-		text-align: left;
-		vertical-align: top;
-	}
-	.era-notes-prose :global(.tiptap .note-table th) {
-		background: var(--color-surface);
-		font-weight: 600;
-		color: var(--color-bright);
-	}
-	.era-notes-prose :global(.tiptap .note-table td > p),
-	.era-notes-prose :global(.tiptap .note-table th > p) {
-		margin: 0;
-	}
-
-	/* Details (collapsible) */
-	.era-notes-prose :global(.tiptap details) {
-		margin: 0 0 var(--era-gap);
-		padding: var(--era-inset-sm) var(--era-inset-md);
-		border-radius: var(--era-rd-md);
-		background: var(--era-surface-bg-elevated);
-		box-shadow: var(--era-shadow);
-	}
-	.era-notes-prose :global(.tiptap details summary) {
-		font-weight: 600;
-		color: var(--color-bright);
-		cursor: pointer;
-	}
-	.era-notes-prose :global(.tiptap details > div) {
-		margin-top: var(--era-gap);
-	}
-
-	/* Image */
-	.era-notes-prose :global(.tiptap img) {
-		max-width: 100%;
-		height: auto;
-		border-radius: var(--era-rd-md);
-	}
-
-	/*
-	 * 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 :global(.tiptap .ProseMirror-selectednode) {
-		outline: 2px solid var(--color-primary);
-	}
-	.era-notes-prose :global(.tiptap li.ProseMirror-selectednode) {
-		outline: none;
-	}
-	.era-notes-prose :global(.tiptap li.ProseMirror-selectednode::after) {
-		border-color: var(--color-primary);
-	}
-	.era-notes-prose :global(.ProseMirror-gapcursor::after) {
-		border-top-color: var(--color-primary);
-	}
-	.era-notes-prose :global(.tiptap .selectedCell::after) {
-		background: var(--era-highlight);
-	}
-	.era-notes-prose :global(.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. */
-</style>
+<!-- The document styling lives in ../../styles/prose.css, imported above:
+     Svelte would scope a <style> block to this component, which is what made
+     era's prose typography unreachable for anyone building their own TipTap
+     instance. Same rules, addressable by anyone who sets .era-notes-prose. -->

package/dist/apps/notes/note-editor.svelte.d.ts

@@ -1,4 +1,5 @@
 import { type JSONContent } from '@tiptap/core';
+import '../../styles/prose.css';
 interface Props {
     /** Initial document. Later changes are ignored — re-key to reseed. */
     content: JSONContent;

package/dist/apps/notes/notes.svelte

@@ -295,7 +295,7 @@
 		{#if store.loading}
 			<div class="flex flex-col gap-gutter p-gutter">
 				{#each Array.from({ length: 5 }, (_, i) => i) as i (i)}
-					<Skeleton class="h-md rounded-md" />
+					<Skeleton class="h-control rounded-control" />
 				{/each}
 			</div>
 		{:else if visible.length === 0}
@@ -322,7 +322,7 @@
 							     role="option" child of the listbox. A wrapper element there
 							     would put a non-option between them and break the relationship
 							     screen readers rely on.
-							     rounded-md, not rounded-item: item-rd is the radius for a row
+							     rounded-control, not rounded-menu-item: item-rd is the radius for a row
 							     inside a PANEL (it subtracts the panel's frame inset). A list
 							     row on a plain surface takes its own tier radius — the
 							     conversations-rail pattern. -->
@@ -331,7 +331,7 @@
 									{#snippet child({ props })}
 										<div
 											{...props}
-											class="group/row flex h-md cursor-pointer items-center gap-(--era-xxs-inset-md) rounded-md px-(--era-xxs-inset-md) era-text-trim {current
+											class="group/row flex h-control cursor-pointer items-center gap-(--era-pill-inset-control) rounded-control px-(--era-pill-inset-control) era-text-trim {current
 												? 'bg-hover text-bright shadow-(--era-shadow-pressed)'
 												: 'hover:bg-highlight hover:shadow-highlight'}"
 											role="option"
@@ -347,11 +347,11 @@
 												onRowKeydown(e);
 											}}
 										>
-											<span class="flex size-xxs shrink-0 items-center justify-center">
+											<span class="flex size-pill shrink-0 items-center justify-center">
 												{#if note.icon}
 													{note.icon}
 												{:else}
-													<FileText class="size-(--era-icon-xxs) text-muted" />
+													<FileText class="size-(--era-glyph-pill) text-muted" />
 												{/if}
 											</span>
 
@@ -370,7 +370,7 @@
 												{formatAge(note.updatedAt)}
 											</span>
 											<span
-												class="hidden shrink-0 items-center gap-(--era-xxs-inset-md) group-hover/row:flex"
+												class="hidden shrink-0 items-center gap-(--era-pill-inset-control) group-hover/row:flex"
 											>
 												<Button
 													icon
@@ -405,10 +405,10 @@
 								<ContextMenu.Content>
 									<ContextMenu.Item onSelect={() => store.togglePin(note.id)}>
 										{#if note.pinned}
-											<PinOff class="size-xs text-muted" />
+											<PinOff class="size-icon text-muted" />
 											Unpin note
 										{:else}
-											<Pin class="size-xs text-muted" />
+											<Pin class="size-icon text-muted" />
 											Pin note
 										{/if}
 									</ContextMenu.Item>
@@ -419,7 +419,7 @@
 									     uses, not a direct delete: a destructive action should not
 									     get easier to reach by arriving from a different gesture. -->
 									<ContextMenu.Item onSelect={() => (pendingDelete = note.id)}>
-										<Trash2 class="size-xs text-destructive" />
+										<Trash2 class="size-icon text-destructive" />
 										Delete note
 									</ContextMenu.Item>
 								</ContextMenu.Content>

package/dist/dev/audit/audits/_helpers.js

@@ -80,7 +80,7 @@ export function tokenPx(el, name) {
 }
 /** The five tier heights, in px, in the element's density context. */
 export function tiers(el) {
-    return ['--era-h-xs', '--era-h-xxs', '--era-h-sm', '--era-h-md', '--era-h-lg'].map((name) => ({
+    return ['--era-h-icon', '--era-h-pill', '--era-h-chip', '--era-h-control', '--era-h-bar'].map((name) => ({
         name,
         px: tokenPx(el, name)
     }));

package/dist/dev/audit/audits/resting-gap.js

@@ -12,7 +12,7 @@ import { BOUNDED_TIER_MAX } from '../../measure.js';
  *
  * That blind spot shipped: the Switch thumb rested one border-width too far
  * right at BOTH ends, so the gap at the left end and at the right end differed
- * by 2px (dense 5 vs 3, touch 9 vs 7). --era-xs-inset-sm is measured from the
+ * by 2px (dense 5 vs 3, touch 9 vs 7). --era-icon-inset-chip is measured from the
  * track's OUTER edge, but a translate-x starts from the CONTENT box inside the
  * 1px border, so offsetting by the raw token added the border on one side and
  * subtracted it on the other. Vertically it was always right, because

package/dist/dev/audit/audits/single-glyph-square.js

@@ -5,8 +5,8 @@ import { BOUNDED_TIER_MAX } from '../../measure.js';
  *
  * Rule 5: every element that can hold a single glyph carries a min-width equal to
  * its tier height, so one character renders as a perfect square (or circle, once
- * rounded) instead of a skinny vertical pill. Icon buttons take min-w-(--era-h-md);
- * Badge, Chip and the KV value cell take min-w-(--era-h-xxs).
+ * rounded) instead of a skinny vertical pill. Icon buttons take min-w-(--era-h-control);
+ * Badge, Chip and the KV value cell take min-w-(--era-h-pill).
  *
  * Drop the min-width and nothing looks wrong until content happens to BE one
  * character — a badge showing "1", a count that ticks from 10 down to 9 — and the

package/dist/dev/audit-overlay.svelte

@@ -59,10 +59,10 @@
 
 {#if dev && open}
 	<div
-		class="fixed right-4 bottom-4 z-50 flex max-h-[70vh] w-96 flex-col overflow-hidden rounded-(--era-rd-md) bg-surface font-mono text-body shadow-[inset_0_0_0_0.5px_var(--color-border),var(--era-shadow)]"
+		class="fixed right-4 bottom-4 z-50 flex max-h-[70vh] w-96 flex-col overflow-hidden rounded-(--era-rd-control) bg-surface font-mono text-body shadow-[inset_0_0_0_0.5px_var(--color-border),var(--era-shadow)]"
 	>
 		<header
-			class="flex items-center gap-(--era-xs-inset-sm) px-(--era-inset-sm) py-(--era-gap) shadow-[inset_0_-0.5px_0_0_var(--color-border)]"
+			class="flex items-center gap-(--era-icon-inset-chip) px-(--era-inset-chip) py-(--era-gap) shadow-[inset_0_-0.5px_0_0_var(--color-border)]"
 		>
 			<strong class="text-bright">audits</strong>
 			<span class="text-muted">
@@ -81,7 +81,7 @@
 				{@const enabled = registry.isEnabled(r.audit.id)}
 				<details open={r.issues.length > 0}>
 					<summary
-						class="flex cursor-pointer items-center gap-(--era-xs-inset-sm) px-(--era-inset-sm) py-(--era-gap) hover:bg-(--era-highlight)"
+						class="flex cursor-pointer items-center gap-(--era-icon-inset-chip) px-(--era-inset-chip) py-(--era-gap) hover:bg-(--era-highlight)"
 					>
 						<input
 							type="checkbox"
@@ -95,13 +95,13 @@
 						</span>
 					</summary>
 					{#if r.issues.length === 0}
-						<p class="px-(--era-inset-sm) py-(--era-gap) text-muted">
+						<p class="px-(--era-inset-chip) py-(--era-gap) text-muted">
 							{r.audit.description}
 						</p>
 					{:else}
 						{#each r.issues as issue, i (i)}
 							<button
-								class="flex w-full items-start gap-(--era-xs-inset-sm) px-(--era-inset-sm) py-(--era-gap) text-left hover:bg-(--era-highlight)"
+								class="flex w-full items-start gap-(--era-icon-inset-chip) px-(--era-inset-chip) py-(--era-gap) text-left hover:bg-(--era-highlight)"
 								onclick={() => highlight(issue.element)}
 							>
 								<span class="text-destructive">●</span>
@@ -114,9 +114,9 @@
 		</div>
 
 		<footer
-			class="flex items-center gap-(--era-gap) px-(--era-inset-sm) py-(--era-gap) text-muted shadow-[inset_0_0.5px_0_0_var(--color-border)]"
+			class="flex items-center gap-(--era-gap) px-(--era-inset-chip) py-(--era-gap) text-muted shadow-[inset_0_0.5px_0_0_var(--color-border)]"
 		>
-			<kbd class="rounded-(--era-rd-xs) bg-hover px-(--era-inset-sm) text-fg">
+			<kbd class="rounded-(--era-rd-icon) bg-hover px-(--era-inset-chip) text-fg">
 				{isMac ? '⌘' : 'ctrl'}⇧{key.toUpperCase()}
 			</kbd>
 			<span>toggle</span>

package/dist/dev/measure.d.ts

@@ -13,7 +13,7 @@ export declare const TOL = 0.5;
  * that false positive: a Card reported "radius step 5 ≠ implied gap 32.5"
  * because its 57px optical padding was read as if it were a tier inset.
  *
- * The tallest tier is --era-h-lg, which peaks at 64px on touch.
+ * The tallest tier is --era-h-bar, which peaks at 64px on touch.
  */
 export declare const BOUNDED_TIER_MAX = 64;
 /**

package/dist/dev/measure.js

@@ -34,7 +34,7 @@ export const TOL = 0.5;
  * that false positive: a Card reported "radius step 5 ≠ implied gap 32.5"
  * because its 57px optical padding was read as if it were a tier inset.
  *
- * The tallest tier is --era-h-lg, which peaks at 64px on touch.
+ * The tallest tier is --era-h-bar, which peaks at 64px on touch.
  */
 export const BOUNDED_TIER_MAX = 64;
 /**

package/dist/docs/badge.md

@@ -15,4 +15,4 @@
 
 - Non-interactive. For dismissible tokens use `Chip`. For labelled pairs use `KV`.
 - Uses the `xxs` tier tokens (height, radius, inset).
-- Inter-icon gap tightens to `--era-inset-xxs` when an SVG is present.
+- Inter-icon gap tightens to `--era-inset-pill` when an SVG is present.

package/dist/docs/css-utilities.d.ts

@@ -3,7 +3,7 @@ export interface CssUtility {
     name: string;
     /**
      * Every class the doc comment governs. Usually one; a scale documented as a
-     * run of consecutive `@utility` blocks under a single comment (h-xs … h-lg)
+     * run of consecutive `@utility` blocks under a single comment (h-icon … h-bar)
      * lists the whole ladder.
      */
     names: string[];

package/dist/docs/css-utilities.js

@@ -65,7 +65,7 @@ function parseFile(file, source) {
         const names = [match[2]];
         let end = blockEnd(source, match.index + match[0].length - 1);
         // One doc comment may govern a RUN of consecutive @utility blocks — a
-        // ladder like h-xs…h-lg shares one story, and repeating it five times
+        // ladder like h-icon…h-bar shares one story, and repeating it five times
         // would drown the docs. Attach every block that follows the previous one
         // with nothing but whitespace in between; the next commented block never
         // matches here because the outer pattern requires the comment.
@@ -100,8 +100,8 @@ export function parseUtilities(sources) {
         .flatMap(([file, source]) => parseFile(file, source));
 }
 const INTRO = [
-    "era's styling API is pure class names — write `h-md rounded-md px-md shadow`,",
-    'never the `h-(--era-h-md)` var-class spelling. Everything below rides along',
+    "era's styling API is pure class names — write `h-control rounded-control px-gutter shadow`,",
+    'never the `h-(--era-h-control)` var-class spelling. Everything below rides along',
     'with the stylesheet and needs no import:',
     '',
     '```ts',
@@ -109,7 +109,7 @@ const INTRO = [
     '```',
     '',
     '```svelte',
-    '<button class="h-md rounded-md px-inset-md shadow text-body">era styled</button>',
+    '<button class="h-control rounded-control px-inset-control shadow text-body">era styled</button>',
     '```',
     '',
     'Alongside the `@utility` classes referenced below, era registers named theme',
@@ -119,8 +119,8 @@ const INTRO = [
     '',
     '| Stock-looking class | What it resolves to |',
     '|---|---|',
-    '| `rounded-xs/xxs/sm/md/lg` | the concentric radius ladder (collapses on `data-corners="square"`) |',
-    '| `rounded-item` | menu-row radius, concentric inside a `rounded-md` panel |',
+    '| `rounded-icon/xxs/sm/md/lg` | the concentric radius ladder (collapses on `data-corners="square"`) |',
+    '| `rounded-menu-item` | menu-row radius, concentric inside a `rounded-control` panel |',
     '| `shadow` / `shadow-lg` | resting control edge / floating panel chrome, per surface |',
     '| `shadow-well` / `shadow-pressed` / `shadow-highlight` | recessed, pressed/latched, hover-material chrome |',
     '| `bg-well` / `bg-elevated` / `bg-highlight` / `bg-overlay` | surface fills: resting, raised, transient feedback, modal scrim |',
@@ -130,9 +130,9 @@ const INTRO = [
     '',
     "Deliberate gaps: `w-*`/`min-w-*` tier names would shadow Tailwind's container",
     'scale (`min-w-md` stays 28rem), and the concentric-inset tokens are advanced',
-    'enough to stay var-form — `min-w-(--era-h-md)` etc. remain the escape hatch.'
+    'enough to stay var-form — `min-w-(--era-h-control)` etc. remain the escape hatch.'
 ].join('\n');
-/** `h-xs` for a single class, `h-xs · h-xxs · … · h-lg` for a ladder. */
+/** `h-icon` for a single class, `h-icon · h-pill · … · h-bar` for a ladder. */
 const label = (u) => u.names.join(' · ');
 /** Renders the utilities reference — the generated `utilities.md` body. */
 export function buildUtilitiesDoc(utilities) {

package/dist/docs/llms-txt.js

@@ -40,7 +40,7 @@ function orientation(origin) {
         'lg   = 4·sp         bars, top-level containers      32 / 40 / 48 px',
         '```',
         '',
-        'Heights (`--era-h-*`), insets (`--era-inset-*`), radii (`--era-rd-*`), and concentric gaps (`--era-xs-inset-sm`, `--era-xxs-inset-md`, …) are all `calc()` chains off `--era-sp`. Never hard-code pixel values — setting `data-mode` on any ancestor re-derives the whole subtree. Type is the second density input (12 px at dense, 14 px above); the spacing atom moves with it.',
+        'Heights (`--era-h-*`), insets (`--era-inset-*`), radii (`--era-rd-*`), and concentric gaps (`--era-icon-inset-chip`, `--era-pill-inset-control`, …) are all `calc()` chains off `--era-sp`. Never hard-code pixel values — setting `data-mode` on any ancestor re-derives the whole subtree. Type is the second density input (12 px at dense, 14 px above); the spacing atom moves with it.',
         '',
         '## Per-component docs',
         '',