@signal9/era-ui 4.7.2 → 4.9.0

package/dist/generated-docs/input.md

@@ -10,12 +10,14 @@ import { Input } from "$lib/ui/input";
 
 ## Props
 
-Inherits all props from `HTMLInputAttributes`.
+Inherits all props from `Omit<HTMLInputAttributes, 'size'>`.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `ref?` | `HTMLInputElement \| null` | `null` | bindable |
 | `icon?` | `Component<IconProps> \| null` | `null` | Lucide glyph rendered inside the field, left of the text. |
+| `size?` | `'md' \| 'xxs'` | `'md'` | Field tier. `xxs` is badge height — for compact chrome where the field
+sits level with xxs buttons. See inputVariants. |
 | `bare?` | `boolean` | `false` | Drop the field chrome — for an input inside a container that is already the field. |
 | `reveal?` | `boolean` | `false` | Hold the field chrome back until hover — for a title or label that IS the content. |
 | `value?` | `(forwarded)` | `''` | bindable |

package/dist/generated-docs/llms-full.txt

@@ -15,7 +15,7 @@ Named exports wrap a single primitive (`Button`, `Badge`, `Chip`, `Input`, …).
 
 Five orthogonal axes are exposed as HTML attributes on any ancestor. The entire subtree re-tiers through CSS inheritance — no JS, no context provider.
 
-- `data-mode`: **dense** (default) · balanced · spacious · touch — adjusts the spacing atom (`--era-sp`).
+- `data-mode`: **dense** (default) · balanced · spacious · touch — adjusts the spacing atom (`--era-sp`) and the type size (`--era-text`: 12px at dense, 14px above).
 - `data-surface`: **flat** (default) · glass · bevel — swaps the background treatment.
 - `data-corners`: **rounded** (default) · square — scales all radii toward 0.
 - `data-font`: **mono** (default) · sans · serif — switches the font stack.
@@ -249,7 +249,9 @@ centering the x-height band — the visual mass of MIXED-CASE text (caps and
 descenders cancel above/below). cap alphabetic is the spec-example recipe
 but is descender-blind (reads high; CSSWG #9148) — measured 4x worse here.
 Where text-box is supported it fully determines the box, so the two
-declarations never fight. Worst-case residual: 0.44px.
+declarations never fight. Worst-case residual: 0.44px (measured at 14px; the
+mechanism is font-relative, so dense's 12px inherits the same guarantee with
+a proportionally smaller residual).
 
 The hard rules concern overflow clipping, and there are TWO of them.
 
@@ -371,9 +373,11 @@ The class also owns `overflow: hidden` — animating height without it just
 spills the content out of the shrinking box.
 
 Timing rides the motion axis, so `instant` collapses it to a cut (0s) and
-`extra` stretches it, for free. Three components had a byte-identical copy of
-these keyframes under three different names before this existed; the panel
-that needs different motion should override `animation`, not re-declare it.
+`extra` stretches it, for free. Two components carried a byte-identical copy of
+these keyframes under two different names before this existed (a Step's body
+and the error panel's detail), and the swarm tree would have made a third; the
+panel that needs different motion should override `animation`, not re-declare
+it.
 
 Declared in `index.css`.
 
@@ -908,6 +912,9 @@ Inherits all props from `HTMLAttributes<HTMLDivElement>`.
 |------|------|---------|-------|
 | `ref?` | `HTMLDivElement \| null` | `null` | bindable |
 | `size?` | `'sm' \| 'md' \| 'lg'` | `'lg'` | Height tier (scales with density). Default `lg` — a full toolbar. |
+| `content?` | `'tier' \| 'xxs'` | `'tier'` | 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). |
 | `children?` | `Snippet` | — | — |
 
 <!-- end: bar -->
@@ -2848,12 +2855,14 @@ import { Input } from "$lib/ui/input";
 
 ## Props
 
-Inherits all props from `HTMLInputAttributes`.
+Inherits all props from `Omit<HTMLInputAttributes, 'size'>`.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `ref?` | `HTMLInputElement \| null` | `null` | bindable |
 | `icon?` | `Component<IconProps> \| null` | `null` | Lucide glyph rendered inside the field, left of the text. |
+| `size?` | `'md' \| 'xxs'` | `'md'` | Field tier. `xxs` is badge height — for compact chrome where the field
+sits level with xxs buttons. See inputVariants. |
 | `bare?` | `boolean` | `false` | Drop the field chrome — for an input inside a container that is already the field. |
 | `reveal?` | `boolean` | `false` | Hold the field chrome back until hover — for a title or label that IS the content. |
 | `value?` | `(forwarded)` | `''` | bindable |

package/dist/generated-docs/llms.txt

@@ -15,7 +15,7 @@ Named exports wrap a single primitive (`Button`, `Badge`, `Chip`, `Input`, …).
 
 Five orthogonal axes are exposed as HTML attributes on any ancestor. The entire subtree re-tiers through CSS inheritance — no JS, no context provider.
 
-- `data-mode`: **dense** (default) · balanced · spacious · touch — adjusts the spacing atom (`--era-sp`).
+- `data-mode`: **dense** (default) · balanced · spacious · touch — adjusts the spacing atom (`--era-sp`) and the type size (`--era-text`: 12px at dense, 14px above).
 - `data-surface`: **flat** (default) · glass · bevel — swaps the background treatment.
 - `data-corners`: **rounded** (default) · square — scales all radii toward 0.
 - `data-font`: **mono** (default) · sans · serif — switches the font stack.

package/dist/generated-docs/manifest.json

@@ -44,7 +44,7 @@
       "slug": "utilities",
       "title": "Utilities",
       "summary": "The CSS classes era ships alongside the components — links, ink-centred text, shimmer, hidden scrollbars.",
-      "tokenEstimate": 5277,
+      "tokenEstimate": 5333,
       "sections": [
         "Overview",
         "era-interactive",
@@ -159,7 +159,7 @@
       "slug": "bar",
       "title": "Bar",
       "summary": "A flex container for toolbars and headers, in three heights.",
-      "tokenEstimate": 118,
+      "tokenEstimate": 181,
       "sections": [
         "Import",
         "Props"
@@ -634,7 +634,7 @@
       "slug": "input",
       "title": "Input",
       "summary": "A text input field, with textarea variant.",
-      "tokenEstimate": 176,
+      "tokenEstimate": 219,
       "sections": [
         "Import",
         "Props"
@@ -997,7 +997,7 @@
       ],
       "file": "index.css",
       "useCase": "vertically center single-line control text (a label beside an icon, a button's own text) without a translateY nudge — fixed-height, non-editable elements only; see era-text-trim-caps for ALL-CAPS strings.",
-      "description": "Font-agnostic vertical ink-centering for single-line control text.\nMeasured verdict (4 fonts x 2 dpr, ink from device-pixel screenshots):\nthe offset has TWO causes — a fractional line box (14px x 1.5lh = 21px in\na 24px row places ink on a half pixel, ~1px error) and font ascent/descent\nasymmetry (+-1px, sign flips per font). line-height: 1 fixes the first and\nis the Firefox fallback; text-box ex/alphabetic fixes the second by\ncentering the x-height band — the visual mass of MIXED-CASE text (caps and\ndescenders cancel above/below). cap alphabetic is the spec-example recipe\nbut is descender-blind (reads high; CSSWG #9148) — measured 4x worse here.\nWhere text-box is supported it fully determines the box, so the two\ndeclarations never fight. Worst-case residual: 0.44px.\n\nThe hard rules concern overflow clipping, and there are TWO of them.\n\n1. NEVER on a NATIVE EDITABLE — <input>, <textarea>, <select>. These clip to\n   a UA-owned inner editor box that IS the trimmed line box, so a fixed\n   height does NOT hold it open: whatever you type gets its ascenders and\n   descenders sliced off (a \"d\" renders as an \"o\"). This rule used to read\n   the other way round — it claimed a fixed-height <input> was the trim's\n   intended home — and the Input component shipped chopped text as a result.\n   A tier-height input centres its own text; it needs no trim.\n\n2. NEVER on an AUTO-height element that clips — a `truncate` child, an\n   auto-height box with overflow-hidden. With no height to hold it open the\n   box collapses to the x-height band (~7.5px at 14px) and the clip chops the\n   glyphs into a middle stripe. Put the trim on the fixed-height ROW instead\n   and let the child centre via the row's items-center.\n\nA fixed-height NON-editable element is the safe home: the ink overflows the\ntrimmed LINE box but stays inside the padding box, which is what actually\nclips. Both rules are enforced at runtime by typography/collapsed-text-trim.",
+      "description": "Font-agnostic vertical ink-centering for single-line control text.\nMeasured verdict (4 fonts x 2 dpr, ink from device-pixel screenshots):\nthe offset has TWO causes — a fractional line box (14px x 1.5lh = 21px in\na 24px row places ink on a half pixel, ~1px error) and font ascent/descent\nasymmetry (+-1px, sign flips per font). line-height: 1 fixes the first and\nis the Firefox fallback; text-box ex/alphabetic fixes the second by\ncentering the x-height band — the visual mass of MIXED-CASE text (caps and\ndescenders cancel above/below). cap alphabetic is the spec-example recipe\nbut is descender-blind (reads high; CSSWG #9148) — measured 4x worse here.\nWhere text-box is supported it fully determines the box, so the two\ndeclarations never fight. Worst-case residual: 0.44px (measured at 14px; the\nmechanism is font-relative, so dense's 12px inherits the same guarantee with\na proportionally smaller residual).\n\nThe hard rules concern overflow clipping, and there are TWO of them.\n\n1. NEVER on a NATIVE EDITABLE — <input>, <textarea>, <select>. These clip to\n   a UA-owned inner editor box that IS the trimmed line box, so a fixed\n   height does NOT hold it open: whatever you type gets its ascenders and\n   descenders sliced off (a \"d\" renders as an \"o\"). This rule used to read\n   the other way round — it claimed a fixed-height <input> was the trim's\n   intended home — and the Input component shipped chopped text as a result.\n   A tier-height input centres its own text; it needs no trim.\n\n2. NEVER on an AUTO-height element that clips — a `truncate` child, an\n   auto-height box with overflow-hidden. With no height to hold it open the\n   box collapses to the x-height band (~7.5px at 14px) and the clip chops the\n   glyphs into a middle stripe. Put the trim on the fixed-height ROW instead\n   and let the child centre via the row's items-center.\n\nA fixed-height NON-editable element is the safe home: the ink overflows the\ntrimmed LINE box but stays inside the padding box, which is what actually\nclips. Both rules are enforced at runtime by typography/collapsed-text-trim.",
       "css": "@utility era-text-trim {\n\tline-height: 1;\n\ttext-box: trim-both ex alphabetic;\n}"
     },
     {
@@ -1037,7 +1037,7 @@
       ],
       "file": "index.css",
       "useCase": "the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden).",
-      "description": "The open/close animation for a bits-ui Collapsible.Content — the height\nsweep every disclosure in the library uses (a Step's body, an error panel's\ndetail, a swarm node's children).\n\nIt has to be a keyframe animation rather than a transition because the\nnatural height is only knowable at open time: bits measures the content and\npublishes `--bits-collapsible-content-height`, which the `to` frame reads.\nThe class also owns `overflow: hidden` — animating height without it just\nspills the content out of the shrinking box.\n\nTiming rides the motion axis, so `instant` collapses it to a cut (0s) and\n`extra` stretches it, for free. Three components had a byte-identical copy of\nthese keyframes under three different names before this existed; the panel\nthat needs different motion should override `animation`, not re-declare it.",
+      "description": "The open/close animation for a bits-ui Collapsible.Content — the height\nsweep every disclosure in the library uses (a Step's body, an error panel's\ndetail, a swarm node's children).\n\nIt has to be a keyframe animation rather than a transition because the\nnatural height is only knowable at open time: bits measures the content and\npublishes `--bits-collapsible-content-height`, which the `to` frame reads.\nThe class also owns `overflow: hidden` — animating height without it just\nspills the content out of the shrinking box.\n\nTiming rides the motion axis, so `instant` collapses it to a cut (0s) and\n`extra` stretches it, for free. Two components carried a byte-identical copy of\nthese keyframes under two different names before this existed (a Step's body\nand the error panel's detail), and the swarm tree would have made a third; the\npanel that needs different motion should override `animation`, not re-declare\nit.",
       "css": "@utility era-collapse {\n\toverflow: hidden;\n\t&[data-state='open'] {\n\t\tanimation: era-collapse-open var(--era-duration) var(--era-ease);\n\t}\n\t&[data-state='closed'] {\n\t\tanimation: era-collapse-close var(--era-duration) var(--era-ease);\n\t}\n}"
     },
     {

package/dist/generated-docs/utilities.json

@@ -37,7 +37,7 @@
       ],
       "file": "index.css",
       "useCase": "vertically center single-line control text (a label beside an icon, a button's own text) without a translateY nudge — fixed-height, non-editable elements only; see era-text-trim-caps for ALL-CAPS strings.",
-      "description": "Font-agnostic vertical ink-centering for single-line control text.\nMeasured verdict (4 fonts x 2 dpr, ink from device-pixel screenshots):\nthe offset has TWO causes — a fractional line box (14px x 1.5lh = 21px in\na 24px row places ink on a half pixel, ~1px error) and font ascent/descent\nasymmetry (+-1px, sign flips per font). line-height: 1 fixes the first and\nis the Firefox fallback; text-box ex/alphabetic fixes the second by\ncentering the x-height band — the visual mass of MIXED-CASE text (caps and\ndescenders cancel above/below). cap alphabetic is the spec-example recipe\nbut is descender-blind (reads high; CSSWG #9148) — measured 4x worse here.\nWhere text-box is supported it fully determines the box, so the two\ndeclarations never fight. Worst-case residual: 0.44px.\n\nThe hard rules concern overflow clipping, and there are TWO of them.\n\n1. NEVER on a NATIVE EDITABLE — <input>, <textarea>, <select>. These clip to\n   a UA-owned inner editor box that IS the trimmed line box, so a fixed\n   height does NOT hold it open: whatever you type gets its ascenders and\n   descenders sliced off (a \"d\" renders as an \"o\"). This rule used to read\n   the other way round — it claimed a fixed-height <input> was the trim's\n   intended home — and the Input component shipped chopped text as a result.\n   A tier-height input centres its own text; it needs no trim.\n\n2. NEVER on an AUTO-height element that clips — a `truncate` child, an\n   auto-height box with overflow-hidden. With no height to hold it open the\n   box collapses to the x-height band (~7.5px at 14px) and the clip chops the\n   glyphs into a middle stripe. Put the trim on the fixed-height ROW instead\n   and let the child centre via the row's items-center.\n\nA fixed-height NON-editable element is the safe home: the ink overflows the\ntrimmed LINE box but stays inside the padding box, which is what actually\nclips. Both rules are enforced at runtime by typography/collapsed-text-trim.",
+      "description": "Font-agnostic vertical ink-centering for single-line control text.\nMeasured verdict (4 fonts x 2 dpr, ink from device-pixel screenshots):\nthe offset has TWO causes — a fractional line box (14px x 1.5lh = 21px in\na 24px row places ink on a half pixel, ~1px error) and font ascent/descent\nasymmetry (+-1px, sign flips per font). line-height: 1 fixes the first and\nis the Firefox fallback; text-box ex/alphabetic fixes the second by\ncentering the x-height band — the visual mass of MIXED-CASE text (caps and\ndescenders cancel above/below). cap alphabetic is the spec-example recipe\nbut is descender-blind (reads high; CSSWG #9148) — measured 4x worse here.\nWhere text-box is supported it fully determines the box, so the two\ndeclarations never fight. Worst-case residual: 0.44px (measured at 14px; the\nmechanism is font-relative, so dense's 12px inherits the same guarantee with\na proportionally smaller residual).\n\nThe hard rules concern overflow clipping, and there are TWO of them.\n\n1. NEVER on a NATIVE EDITABLE — <input>, <textarea>, <select>. These clip to\n   a UA-owned inner editor box that IS the trimmed line box, so a fixed\n   height does NOT hold it open: whatever you type gets its ascenders and\n   descenders sliced off (a \"d\" renders as an \"o\"). This rule used to read\n   the other way round — it claimed a fixed-height <input> was the trim's\n   intended home — and the Input component shipped chopped text as a result.\n   A tier-height input centres its own text; it needs no trim.\n\n2. NEVER on an AUTO-height element that clips — a `truncate` child, an\n   auto-height box with overflow-hidden. With no height to hold it open the\n   box collapses to the x-height band (~7.5px at 14px) and the clip chops the\n   glyphs into a middle stripe. Put the trim on the fixed-height ROW instead\n   and let the child centre via the row's items-center.\n\nA fixed-height NON-editable element is the safe home: the ink overflows the\ntrimmed LINE box but stays inside the padding box, which is what actually\nclips. Both rules are enforced at runtime by typography/collapsed-text-trim.",
       "css": "@utility era-text-trim {\n\tline-height: 1;\n\ttext-box: trim-both ex alphabetic;\n}"
     },
     {
@@ -77,7 +77,7 @@
       ],
       "file": "index.css",
       "useCase": "the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden).",
-      "description": "The open/close animation for a bits-ui Collapsible.Content — the height\nsweep every disclosure in the library uses (a Step's body, an error panel's\ndetail, a swarm node's children).\n\nIt has to be a keyframe animation rather than a transition because the\nnatural height is only knowable at open time: bits measures the content and\npublishes `--bits-collapsible-content-height`, which the `to` frame reads.\nThe class also owns `overflow: hidden` — animating height without it just\nspills the content out of the shrinking box.\n\nTiming rides the motion axis, so `instant` collapses it to a cut (0s) and\n`extra` stretches it, for free. Three components had a byte-identical copy of\nthese keyframes under three different names before this existed; the panel\nthat needs different motion should override `animation`, not re-declare it.",
+      "description": "The open/close animation for a bits-ui Collapsible.Content — the height\nsweep every disclosure in the library uses (a Step's body, an error panel's\ndetail, a swarm node's children).\n\nIt has to be a keyframe animation rather than a transition because the\nnatural height is only knowable at open time: bits measures the content and\npublishes `--bits-collapsible-content-height`, which the `to` frame reads.\nThe class also owns `overflow: hidden` — animating height without it just\nspills the content out of the shrinking box.\n\nTiming rides the motion axis, so `instant` collapses it to a cut (0s) and\n`extra` stretches it, for free. Two components carried a byte-identical copy of\nthese keyframes under two different names before this existed (a Step's body\nand the error panel's detail), and the swarm tree would have made a third; the\npanel that needs different motion should override `animation`, not re-declare\nit.",
       "css": "@utility era-collapse {\n\toverflow: hidden;\n\t&[data-state='open'] {\n\t\tanimation: era-collapse-open var(--era-duration) var(--era-ease);\n\t}\n\t&[data-state='closed'] {\n\t\tanimation: era-collapse-close var(--era-duration) var(--era-ease);\n\t}\n}"
     },
     {

package/dist/generated-docs/utilities.md

@@ -146,7 +146,9 @@ centering the x-height band — the visual mass of MIXED-CASE text (caps and
 descenders cancel above/below). cap alphabetic is the spec-example recipe
 but is descender-blind (reads high; CSSWG #9148) — measured 4x worse here.
 Where text-box is supported it fully determines the box, so the two
-declarations never fight. Worst-case residual: 0.44px.
+declarations never fight. Worst-case residual: 0.44px (measured at 14px; the
+mechanism is font-relative, so dense's 12px inherits the same guarantee with
+a proportionally smaller residual).
 
 The hard rules concern overflow clipping, and there are TWO of them.
 
@@ -268,9 +270,11 @@ The class also owns `overflow: hidden` — animating height without it just
 spills the content out of the shrinking box.
 
 Timing rides the motion axis, so `instant` collapses it to a cut (0s) and
-`extra` stretches it, for free. Three components had a byte-identical copy of
-these keyframes under three different names before this existed; the panel
-that needs different motion should override `animation`, not re-declare it.
+`extra` stretches it, for free. Two components carried a byte-identical copy of
+these keyframes under two different names before this existed (a Step's body
+and the error panel's detail), and the swarm tree would have made a third; the
+panel that needs different motion should override `animation`, not re-declare
+it.
 
 Declared in `index.css`.
 

package/dist/styles/density.css

@@ -13,7 +13,7 @@
  *   lg  = 4·sp        (bars, containers)
  *
  * xs carries a +6 floor so icons stay legible (≥14px) at every sp. xxs sits
- * 4px above xs so 14px text has just enough pill around it while fitting
+ * 4px above xs so body text has just enough pill around it while fitting
  * inside an md container with a visible concentric gap (≥3px at dense). sm
  * keeps the generous 2·sp + 6 that gives switch thumbs their sp/2 slot and
  * KV rows their padded feel. md and lg are pure sp multiples so button and
@@ -43,6 +43,7 @@
  *   --era-px-{sm,md,lg}       sp/2                   — tier-to-tier nesting padding
  *   --era-gap                 sp/2                   — inter-element gap
  *   --era-inset-{xxs,sm,md}   (T − text)/2           — text-symmetric content padding
+ *                                                     (text is 12px at dense, 14 above)
  *   --era-xs-inset-sm         (sm − xs)/2 = sp/2     — centering an xs element inside sm
  *
  * OPTICAL PADDING (unbounded content containers)
@@ -52,7 +53,8 @@
  * height C inside a container of height T is (T − C)/2, linear in sp. But
  * cards, dialogs, and content panels have no bounding tier — their padding
  * is optical, and linear-in-sp padding falls behind as modes loosen: controls
- * grow linearly while text stays 14px, so whitespace must grow SUPER-linearly
+ * grow linearly while text barely moves (12px at dense, 14 above), so
+ * whitespace must grow SUPER-linearly
  * to hold the same perceived balance. (The tokens that already feel right
  * across modes — inset-md 5→17, content-p 16→48 — are exactly the convex
  * ones; the cramped ones — card's old sp/2 = 4→8 — are the linear ones.)
@@ -154,9 +156,9 @@
 
 	/* Content insets — text-symmetric padding (vertical centering, reused as
 	   horizontal only where the content is a single square glyph). */
-	--era-inset-xxs: max(0px, calc((var(--era-h-xxs) - var(--era-text)) / 2)); /* 2/3/4 */
-	--era-inset-sm: max(0px, calc((var(--era-h-sm) - var(--era-text)) / 2)); /* 4/6/8 */
-	--era-inset-md: max(0px, calc((var(--era-h-md) - var(--era-text)) / 2)); /* 5/8/11 */
+	--era-inset-xxs: max(0px, calc((var(--era-h-xxs) - var(--era-text)) / 2)); /* 3/3/4/6 */
+	--era-inset-sm: max(0px, calc((var(--era-h-sm) - var(--era-text)) / 2)); /* 5/6/8/12 */
+	--era-inset-md: max(0px, calc((var(--era-h-md) - var(--era-text)) / 2)); /* 6/8/11/17 */
 
 	/* Pill side padding — horizontal breathing room for badge/chip text.
 	   Text wants MORE horizontal than vertical padding: line-height adds
@@ -167,8 +169,8 @@
 	   is narrower than the line, this comes out ~2× the vertical inset on its
 	   own — and a lone glyph still measures exactly the tier width, so the
 	   "single glyph = square" floor (min-w = h) is preserved, not broken. */
-	--era-pill-xxs: max(0px, calc((var(--era-h-xxs) - 0.6 * var(--era-text)) / 2)); /* 4.8/5.8/6.8 */
-	--era-pill-sm: max(0px, calc((var(--era-h-sm) - 0.6 * var(--era-text)) / 2)); /* 6.8/8.8/10.8 */
+	--era-pill-xxs: max(0px, calc((var(--era-h-xxs) - 0.6 * var(--era-text)) / 2)); /* 5.4/5.8/6.8 */
+	--era-pill-sm: max(0px, calc((var(--era-h-sm) - 0.6 * var(--era-text)) / 2)); /* 7.4/8.8/10.8 */
 
 	/* Text-field side padding — the horizontal room where typed text starts in an
 	   md-tier input (Input, Textarea, combobox/command inputs, date/time fields).
@@ -261,7 +263,8 @@
 }
 
 /* -------------------------------------------------- */
-/* Mode inputs — just --era-sp (and static --era-text).   */
+/* Mode inputs — --era-sp, and --era-text (12 at dense,  */
+/* 14 above; see the dense block).                       */
 /* The derivation above re-runs per element wherever  */
 /* --era-sp is overridden. Animation timing is NOT here */
 /* — it's the motion axis (motion.css), orthogonal to */
@@ -286,7 +289,37 @@
 [data-mode='dense'] {
 	--era-sp: 0.5rem; /* 8px */
 	--era-density: 1; /* d = sp / 8px */
-	--era-text: 0.875rem; /* 14px — static across modes */
+	/* 12px at dense, 14px from balanced up (set in the block below).
+	 *
+	 * Type is the SECOND density input, and for a long time it was not one: the
+	 * token read "14px — static across modes", so dense and balanced differed in
+	 * their boxes and not in their type. That is what made dense feel like
+	 * balanced-with-tighter-gaps rather than a genuinely dense mode — the chrome
+	 * shrank while the thing inside it did not.
+	 *
+	 * 12px is the size the reference terminal app is built at, and it makes the
+	 * whole ladder line up with it: --era-inset-xxs becomes (18−12)/2 = 3px,
+	 * which is exactly the 3px that app hardcodes for the wall and gap of an
+	 * 18px control in a 24px bar. Same numbers, derived instead of typed.
+	 *
+	 * Everything text-derived follows: inset-xxs 2→3, inset-sm 4→5, inset-md
+	 * 5→6, pill-xxs 4.8→5.4. Heights do NOT — they are sp-derived, so the tier
+	 * ladder (14/18/22/24/32) is unchanged and dense stays dimensionally the
+	 * same mode it was.
+	 *
+	 * Only dense moves. Balanced/spacious/touch keep 14px: they exist for
+	 * reading comfort and pointer size, and shrinking their type would undo the
+	 * thing they are for. */
+	--era-text: 0.75rem; /* 12px */
+}
+
+/* Balanced and up: 14px, the comfortable reading size. Declared once here and
+ * inherited by spacious/touch so there is a single place the non-dense size
+ * lives. */
+[data-mode='balanced'],
+[data-mode='spacious'],
+[data-mode='touch'] {
+	--era-text: 0.875rem; /* 14px */
 }
 
 [data-mode='balanced'] {

package/dist/styles/index.css

@@ -126,7 +126,9 @@
  * descenders cancel above/below). cap alphabetic is the spec-example recipe
  * but is descender-blind (reads high; CSSWG #9148) — measured 4x worse here.
  * Where text-box is supported it fully determines the box, so the two
- * declarations never fight. Worst-case residual: 0.44px.
+ * declarations never fight. Worst-case residual: 0.44px (measured at 14px; the
+ * mechanism is font-relative, so dense's 12px inherits the same guarantee with
+ * a proportionally smaller residual).
  *
  * The hard rules concern overflow clipping, and there are TWO of them.
  *
@@ -234,9 +236,11 @@
  * spills the content out of the shrinking box.
  *
  * Timing rides the motion axis, so `instant` collapses it to a cut (0s) and
- * `extra` stretches it, for free. Three components had a byte-identical copy of
- * these keyframes under three different names before this existed; the panel
- * that needs different motion should override `animation`, not re-declare it.
+ * `extra` stretches it, for free. Two components carried a byte-identical copy of
+ * these keyframes under two different names before this existed (a Step's body
+ * and the error panel's detail), and the swarm tree would have made a third; the
+ * panel that needs different motion should override `animation`, not re-declare
+ * it.
  *
  * @use the height sweep for a bits-ui Collapsible.Content — put it on the
  * Content element itself (it carries its own overflow: hidden). */

package/dist/ui/bar/bar.svelte

@@ -10,15 +10,42 @@
 	// 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 gap-(--era-xs-inset-sm) px-(--era-xs-inset-sm) era-text-trim',
+		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)'
+			},
+			/**
+			 * The tier of the CONTROLS inside, because that is what the bar's own
+			 * padding and gap have to be concentric to — (bar − content)/2 on every
+			 * side. It is a variant rather than a caller's class because the ladder
+			 * math belongs next to the heights it is derived from: three call sites
+			 * 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
+			 *   xxs icon button, a title bar). Two tiers down, so the inset differs
+			 *   per size and comes from the compounds below.
+			 */
+			content: {
+				tier: 'gap-(--era-xs-inset-sm) px-(--era-xs-inset-sm)',
+				xxs: ''
 			}
 		},
-		defaultVariants: { size: 'lg' }
+		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 = (2sp + 6 − sp − 10)/2 = (sp − 4)/2, which is ALSO (h-xxs − text)/2
+			// at 14px text — the same number --era-inset-xxs already carries, so the
+			// identity is reused rather than a fifth token invented. (lg ⊃ xxs has no
+			// token because nothing pairs a page header with pill-tier controls.)
+			{ size: 'sm', content: 'xxs', class: 'gap-(--era-inset-xxs) px-(--era-inset-xxs)' }
+		],
+		defaultVariants: { size: 'lg', content: 'tier' }
 	});
 </script>
 
@@ -29,6 +56,7 @@
 	let {
 		ref = $bindable(null),
 		size = 'lg',
+		content = 'tier',
 		children,
 		class: className,
 		...restProps
@@ -36,10 +64,16 @@
 		ref?: HTMLDivElement | null;
 		/** Height tier (scales with density). Default `lg` — a full toolbar. */
 		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).
+		 */
+		content?: 'tier' | 'xxs';
 		children?: Snippet;
 	} = $props();
 </script>
 
-<div bind:this={ref} class={cn(barVariants({ size }), className)} {...restProps}>
+<div bind:this={ref} class={cn(barVariants({ size, content }), className)} {...restProps}>
 	{@render children?.()}
 </div>

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

@@ -4,18 +4,72 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
         md: "h-(--era-h-md) rounded-(--era-rd-md)";
         lg: "h-(--era-h-lg) rounded-(--era-rd-lg)";
     };
-}, undefined, "flex items-center gap-(--era-xs-inset-sm) px-(--era-xs-inset-sm) era-text-trim", {
+    /**
+     * The tier of the CONTROLS inside, because that is what the bar's own
+     * padding and gap have to be concentric to — (bar − content)/2 on every
+     * side. It is a variant rather than a caller's class because the ladder
+     * math belongs next to the heights it is derived from: three call sites
+     * 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
+     *   xxs icon button, a title bar). Two tiers down, so the inset differs
+     *   per size and comes from the compounds below.
+     */
+    content: {
+        tier: "gap-(--era-xs-inset-sm) px-(--era-xs-inset-sm)";
+        xxs: "";
+    };
+}, undefined, "flex items-center era-text-trim", {
     size: {
         sm: "h-(--era-h-sm) rounded-(--era-rd-sm)";
         md: "h-(--era-h-md) rounded-(--era-rd-md)";
         lg: "h-(--era-h-lg) rounded-(--era-rd-lg)";
     };
+    /**
+     * The tier of the CONTROLS inside, because that is what the bar's own
+     * padding and gap have to be concentric to — (bar − content)/2 on every
+     * side. It is a variant rather than a caller's class because the ladder
+     * math belongs next to the heights it is derived from: three call sites
+     * 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
+     *   xxs icon button, a title bar). Two tiers down, so the inset differs
+     *   per size and comes from the compounds below.
+     */
+    content: {
+        tier: "gap-(--era-xs-inset-sm) px-(--era-xs-inset-sm)";
+        xxs: "";
+    };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
         sm: "h-(--era-h-sm) rounded-(--era-rd-sm)";
         md: "h-(--era-h-md) rounded-(--era-rd-md)";
         lg: "h-(--era-h-lg) rounded-(--era-rd-lg)";
     };
+    /**
+     * The tier of the CONTROLS inside, because that is what the bar's own
+     * padding and gap have to be concentric to — (bar − content)/2 on every
+     * side. It is a variant rather than a caller's class because the ladder
+     * math belongs next to the heights it is derived from: three call sites
+     * 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
+     *   xxs icon button, a title bar). Two tiers down, so the inset differs
+     *   per size and comes from the compounds below.
+     */
+    content: {
+        tier: "gap-(--era-xs-inset-sm) px-(--era-xs-inset-sm)";
+        xxs: "";
+    };
 }, undefined>>;
 import type { HTMLAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
@@ -23,6 +77,12 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     ref?: HTMLDivElement | null;
     /** Height tier (scales with density). Default `lg` — a full toolbar. */
     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).
+     */
+    content?: 'tier' | 'xxs';
     children?: Snippet;
 };
 declare const Bar: import("svelte").Component<$$ComponentProps, {}, "ref">;

package/dist/ui/input/input.svelte

@@ -9,14 +9,25 @@
 		ref = $bindable(null),
 		value = $bindable(''),
 		icon = null,
+		size = 'md',
 		bare = false,
 		reveal = false,
 		class: className,
 		...restProps
-	}: HTMLInputAttributes & {
+		// The native `size` attribute (visible width in characters) is shadowed on
+		// purpose: era fields size by tier and by flex, never by character count,
+		// and `size` is the name every other component in the library uses for its
+		// tier. Consumers who genuinely want the HTML attribute can set it via
+		// {...restProps} spread from an object.
+	}: Omit<HTMLInputAttributes, 'size'> & {
 		ref?: HTMLInputElement | null;
 		/** Lucide glyph rendered inside the field, left of the text. */
 		icon?: Component<IconProps> | null;
+		/**
+		 * Field tier. `xxs` is badge height — for compact chrome where the field
+		 * sits level with xxs buttons. See inputVariants.
+		 */
+		size?: 'md' | 'xxs';
 		/** Drop the field chrome — for an input inside a container that is already the field. */
 		bare?: boolean;
 		/** Hold the field chrome back until hover — for a title or label that IS the content. */
@@ -34,6 +45,13 @@
 	// chrome" cannot tell a sanctioned exception from a regression — which is the
 	// hole the Notes fields sat in. Naming the kind closes it.
 	const kind = $derived(reveal ? 'reveal' : bare ? 'bare' : '');
+
+	// The field's glyph is the icon tier OF ITS OWN TIER, which is what puts it on
+	// the same optical footing as the icon button beside it: an md field pairs
+	// with a default button (h-xs glyph), an xxs field with an xxs button
+	// (icon-xxs). One size for both would leave the two glyphs in one bar drawn at
+	// different weights.
+	const glyphClass = $derived(size === 'xxs' ? 'size-(--era-icon-xxs)' : 'size-(--era-h-xs)');
 </script>
 
 {#if icon}
@@ -48,9 +66,10 @@
 	     arbitrary container that may carry its own fill. -->
 	<div
 		data-input-field={kind}
-		class={cn(inputVariants({ bare, reveal }), 'items-center gap-(--era-gap)', className)}
+		data-input-size={size}
+		class={cn(inputVariants({ bare, reveal, size }), 'items-center gap-(--era-gap)', className)}
 	>
-		<Icon class="size-(--era-h-xs) shrink-0 text-muted" />
+		<Icon class={cn('shrink-0 text-muted', glyphClass)} />
 		<input
 			bind:this={ref}
 			bind:value
@@ -63,7 +82,8 @@
 		bind:this={ref}
 		bind:value
 		data-input-field={kind}
-		class={cn(inputVariants({ bare, reveal }), textClass, className)}
+		data-input-size={size}
+		class={cn(inputVariants({ bare, reveal, size }), textClass, className)}
 		{...restProps}
 	/>
 {/if}

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

@@ -1,10 +1,15 @@
 import type { Component } from 'svelte';
 import type { IconProps } from '@lucide/svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
-type $$ComponentProps = HTMLInputAttributes & {
+type $$ComponentProps = Omit<HTMLInputAttributes, 'size'> & {
     ref?: HTMLInputElement | null;
     /** Lucide glyph rendered inside the field, left of the text. */
     icon?: Component<IconProps> | null;
+    /**
+     * Field tier. `xxs` is badge height — for compact chrome where the field
+     * sits level with xxs buttons. See inputVariants.
+     */
+    size?: 'md' | 'xxs';
     /** Drop the field chrome — for an input inside a container that is already the field. */
     bare?: boolean;
     /** Hold the field chrome back until hover — for a title or label that IS the content. */