@signal9/era-ui 8.0.0 → 10.0.0

package/dist/apps/notes/notes.svelte

@@ -165,7 +165,7 @@
 
 {#snippet iconPicker(note: Note)}
 	<Popover.Root bind:open={iconPickerOpen}>
-		<Popover.Trigger icon size="xxs" aria-label="Change icon" title="Change icon">
+		<Popover.Trigger icon size="pill" aria-label="Change icon" title="Change icon">
 			{#if note.icon}
 				<span aria-hidden="true">{note.icon}</span>
 			{:else}
@@ -179,7 +179,7 @@
 						{#each row as glyph (glyph)}
 							<Button
 								icon
-								size="default"
+								size="control"
 								active={note.icon === glyph}
 								aria-label={glyph}
 								onclick={() => {
@@ -194,7 +194,7 @@
 				{/each}
 				{#if note.icon}
 					<Button
-						size="sm"
+						size="chip"
 						class="w-full"
 						onclick={() => {
 							store.setIcon(note.id, null);
@@ -219,7 +219,7 @@
 {#snippet titleField(note: Note, cls: string)}
 	<Input
 		reveal
-		size="xxs"
+		size="pill"
 		class={cls}
 		aria-label="Note title"
 		placeholder="Untitled"
@@ -265,7 +265,7 @@
 >
 	<!-- Sidebar: filter + note list -->
 	<div class="flex w-56 shrink-0 flex-col border-r border-divider-faded">
-		<!-- content="xxs": 24/30/36/48 of chrome around an 18/20/22/26 field and
+		<!-- content="pill": 24/30/36/48 of chrome around an 18/20/22/26 field and
 		     button, with Bar deriving the two-tier concentric inset. A notes sidebar
 		     is chrome around a list; at the lg/md pairing it was a 32px bar over
 		     24px rows and the chrome outweighed the content. This is the tier pair
@@ -277,17 +277,17 @@
 		     centred in 23px and sat 2.5px from the top against a 3px wall. Outset
 		     costs no layout, so the bar keeps its full tier height and every child
 		     sits the wall's distance from all four edges. -->
-		<Bar size="md" content="xxs" divider class="rounded-none">
+		<Bar size="control" content="pill" divider class="rounded-none">
 			<Input
 				icon={Search}
-				size="xxs"
+				size="pill"
 				class="min-w-0 flex-1"
 				type="text"
 				placeholder="Filter…"
 				aria-label="Filter notes"
 				bind:value={query}
 			/>
-			<Button icon size="xxs" aria-label="New note" title="New note" onclick={createNote}>
+			<Button icon size="pill" aria-label="New note" title="New note" onclick={createNote}>
 				<Plus />
 			</Button>
 		</Bar>
@@ -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,11 +370,11 @@
 												{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
-													size="xxs"
+													size="pill"
 													aria-label={note.pinned ? 'Unpin note' : 'Pin note'}
 													title={note.pinned ? 'Unpin note' : 'Pin note'}
 													active={note.pinned}
@@ -387,7 +387,7 @@
 												</Button>
 												<Button
 													icon
-													size="xxs"
+													size="pill"
 													tone="destructive"
 													aria-label="Delete note"
 													title="Delete note"
@@ -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>
@@ -444,7 +444,7 @@
 			     header (see the snippets below) lives in the pane bar's centre and
 			     drawing it twice would title the document twice. -->
 			{#if !pane}
-				<Bar size="md" content="xxs" divider class="rounded-none">
+				<Bar size="control" content="pill" divider class="rounded-none">
 					{@render iconPicker(selected)}
 					{@render titleField(selected, 'min-w-0 flex-1')}
 					<!-- Fixed-width so the badge appearing and clearing never nudges the

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',
         '',