@signal9/era-ui 4.16.9 → 6.0.0

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

@@ -39,7 +39,7 @@ Classes, not components — they need no import beyond the stylesheet. Reach for
 - `era-text-trim` — 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: never on an <input>/<textarea>, and never on the same element as `truncate` or any overflow clip — put it on the fixed-height ROW and let the truncating child centre inside it. See era-text-trim-caps for ALL-CAPS.
 - `truncate` — single-line horizontal truncation with an ellipsis — put it on the truncating CHILD inside a trimmed or leading-none row, never on the same element as era-text-trim; it will not clip ascenders or descenders.
 - `era-text-trim-caps` — the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never for mixed-case text (a label like "System" reads high; use era-text-trim), and never on the same element as `truncate`.
-- `era-ink-center` — on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim.
+- `era-token-ink · era-ink-center` — the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box; it needs no icon sibling (with one the box must stay flex, and the general trim applies).
 - `era-shimmer` — the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text.
 - `era-collapse` — the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden).
 - `h-xs · h-xxs · h-sm · h-md · h-lg` — the tier-height ladder — h-xs (icon) · h-xxs (nested pill) · h-sm (standalone pill) · h-md (control) · h-lg (bar); the named form of h-(--era-h-*).
@@ -148,7 +148,7 @@ enough to stay var-form — `min-w-(--era-h-md)` etc. remain the escape hatch.
 | `era-text-trim` | 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: never on an <input>/<textarea>, and never on the same element as `truncate` or any overflow clip — put it on the fixed-height ROW and let the truncating child centre inside it. See era-text-trim-caps for ALL-CAPS. |
 | `truncate` | single-line horizontal truncation with an ellipsis — put it on the truncating CHILD inside a trimmed or leading-none row, never on the same element as era-text-trim; it will not clip ascenders or descenders. |
 | `era-text-trim-caps` | the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never for mixed-case text (a label like "System" reads high; use era-text-trim), and never on the same element as `truncate`. |
-| `era-ink-center` | on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim. |
+| `era-token-ink` `era-ink-center` | the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box; it needs no icon sibling (with one the box must stay flex, and the general trim applies). |
 | `era-shimmer` | the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text. |
 | `era-collapse` | the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden). |
 | `h-xs` `h-xxs` `h-sm` `h-md` `h-lg` | the tier-height ladder — h-xs (icon) · h-xxs (nested pill) · h-sm (standalone pill) · h-md (control) · h-lg (bar); the named form of h-(--era-h-*). |
@@ -340,39 +340,48 @@ Declared in `index.css`.
 }
 ```
 
-## era-ink-center
+## era-token-ink · era-ink-center
 
-**Use it for:** on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim.
+**Use it for:** the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box; it needs no icon sibling (with one the box must stay flex, and the general trim applies).
 
-The EDITABLE counterpart of era-text-trim — for native <input>s, which the
-trim is forbidden on (it collapses the UA's inner editor box and slices the
-glyphs; see typography/collapsed-text-trim).
+TOKEN INK — the ink centring for a pill whose content is a TOKEN: an id, a
+count, a status, a tag. Font-independent, unlike everything it replaces.
 
-Without help, a tier-height input centres its text by FONT BOX, and the ui
-stacks' font box is deeply asymmetric: ascent ≈1.07em against descent
-≈0.29em. Centring that box parks the visible band (caps, x-height) ~0.115em
-LOW — so a field's text sat visibly below the trimmed label beside it.
+THE BUG IT FIXES, which had been shipping library-wide and invisibly:
+`text-box-trim` DOES NOTHING ON A FLEX CONTAINER. Era's controls are all
+flex, and a flex container's bare text becomes an ANONYMOUS flex item — a box
+no selector can reach and no non-inherited property can touch. So
+`era-text-trim` on a Badge, a Chip, a Button or a Bar contributed exactly one
+thing: `line-height: 1`. The ink was then centred by `align-items: center`
+on the LINE BOX, which is precisely the font-metric-dependent centring the
+trim exists to eliminate. Measured on the shipped mono stack: a badge reading
+"AC-2.1" sat 2px high in an 18px pill, and no amount of tuning the trim's
+BAND changed it, because the trim was never running.
 
-The value is OPTICAL, not the derivation's: pure x-band centring computes
-to ~0.23em of padding, but pixel-measured against real Title-Case text it
-over-lifts — the eye weighs the cap-to-baseline mass, which x-band
-centring parks ~2px high (caps 2.75px off the top against 5.7px of air
-under the baseline, measured at dense). 0.08em splits the difference
-between the x-band ideal and the cap-band ideal, landing caps ~3.7px in an
-18px field with ~4.7px under the baseline — the reading where neither
-band's partisans win and neither complains.
+The mechanism here restores it: a BLOCK box (where text-box-trim does apply)
+whose trimmed line box is then centred by `align-content` — block-container
+alignment, so no flex formatting context and no anonymous item. The browser
+computes the band from the font's own metrics, which is what makes it hold
+across ui-monospace, system-ui and ui-serif instead of needing a constant
+per stack.
 
-The lift is padding, not a translateY: an icon-less Input paints the field
-chrome itself, and a transform would drag the field along with the ink.
-padding-bottom shrinks the content box from below, and a single-line input
-re-centres its line box in what remains — the ink rises by exactly half the
-padding, the chrome doesn't move, and the caret and selection follow the
-text. In em on purpose: the correction is a fraction of the type, so it
-holds across every density and text size with one value.
+CAP band, not the x-height band the general trim uses, because the content
+class is different: a token is caps and digits (both cap-height), and
+centring the x-band parks them high by (cap − x)/2. Measured on the shipped
+stacks, cap-band centring takes an id/count/status from −2.0px to 0.0.
+Prose and sentence-case labels keep era-text-trim; this is for tokens.
 
 Declared in `index.css`.
 
 ```css
+@utility era-token-ink {
+	display: block;
+	align-content: center;
+	text-align: center;
+	line-height: 1;
+	text-box: trim-both cap alphabetic;
+}
+
 @utility era-ink-center {
 	padding-bottom: 0.08em;
 }

package/dist/generated-docs/llms.txt

@@ -14,6 +14,8 @@ A container with a BOUNDED tier height (bar, row, trigger, pill) takes geometric
 
 **3. The even-gap law.** Inside any container, `(container_height − child_height) / 2` must equal the gap on ALL four sides. A `h-xxs` control in a `h-md` bar sits on a 3px wall at dense — so the bar's padding AND the gap between its children are that same value. `gap-gutter` / `p-gutter` is the standard inter-element gap (sp/2); the concentric insets (`p-inset-*`) are the text-symmetric ones.
 
+The same law in its simplest form, for containers with no tier: **a box pads its content equally at top and bottom.** Horizontal asymmetry is often deliberate (a bar's leading side sits at the text inset while its trailing side keeps the concentric wall); vertical asymmetry is a bug — nothing should sit closer to its top edge than its bottom, and era audits for it.
+
 **4. Radius follows the corner REGION's tier, not the box's size.**
 `rounded-xs · xxs · sm · md · lg` walk the same ladder as the heights, and the ladder is built so that `rd_outer − rd_inner` equals the concentric gap — nested corners then share a centre of curvature automatically. A big panel whose corner is formed by an `h-md` bar takes `rounded-md`, not `rounded-lg`. Never hardcode a radius: `data-corners="square"` collapses the tokens to 0 and a literal value would survive it.
 
@@ -28,6 +30,8 @@ Text that WRAPS is the opposite regime: it needs leading, so it carries `leading
 
 **7. Colour comes from semantic tokens, not the ramp.** `text-fg` (controls/labels) · `text-bright` (emphasis, headings) · `text-muted` (body copy) · `text-destructive` / `-success` / `-warning`. Fills: `bg-hover` for a latched ROW, `bg-fill` for a standing pill, `bg-highlight` for transient hover. These compose across themes; a raw scale step does not.
 
+**Nesting a pill in a card.** A pill at a card's corner is NOT governed by the concentric identity — that law needs a height term and a card has no tier. The card pads optically, the pill keeps its own tier radius; do not hand-tune padding to chase the corner. If a container genuinely IS tier-height chrome (a bar, a row, a trigger) then it is bounded and the concentric rule applies in full.
+
 **Verifying your own output.** era ships a runtime audit that measures these laws against rendered DOM — tier conformance, even gaps, concentric radii, chopped glyphs, wrapping text at control leading. If you are generating markup, render it and run the audit rather than eyeballing: it is the same instrument the library's own test suite asserts against.
 
 Full derivations: `{{ORIGIN}}/spacing.md` (the ladder and every token), `{{ORIGIN}}/text.md` (type and trim), `{{ORIGIN}}/utilities.md` (every class, what it emits, when to use it).
@@ -73,7 +77,7 @@ Classes, not components — they need no import beyond the stylesheet. Reach for
 - `era-text-trim` — 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: never on an <input>/<textarea>, and never on the same element as `truncate` or any overflow clip — put it on the fixed-height ROW and let the truncating child centre inside it. See era-text-trim-caps for ALL-CAPS.
 - `truncate` — single-line horizontal truncation with an ellipsis — put it on the truncating CHILD inside a trimmed or leading-none row, never on the same element as era-text-trim; it will not clip ascenders or descenders.
 - `era-text-trim-caps` — the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never for mixed-case text (a label like "System" reads high; use era-text-trim), and never on the same element as `truncate`.
-- `era-ink-center` — on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim.
+- `era-token-ink · era-ink-center` — the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box; it needs no icon sibling (with one the box must stay flex, and the general trim applies).
 - `era-shimmer` — the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text.
 - `era-collapse` — the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden).
 - `h-xs · h-xxs · h-sm · h-md · h-lg` — the tier-height ladder — h-xs (icon) · h-xxs (nested pill) · h-sm (standalone pill) · h-md (control) · h-lg (bar); the named form of h-(--era-h-*).

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": 6097,
+      "tokenEstimate": 6197,
       "sections": [
         "Overview",
         "era-interactive",
@@ -53,7 +53,7 @@
         "era-text-trim",
         "truncate",
         "era-text-trim-caps",
-        "era-ink-center",
+        "era-token-ink · era-ink-center",
         "era-shimmer",
         "era-collapse",
         "h-xs · h-xxs · h-sm · h-md · h-lg",
@@ -1023,14 +1023,15 @@
       "css": "@utility era-text-trim-caps {\n\tline-height: 1;\n\ttext-box: trim-both cap alphabetic;\n}"
     },
     {
-      "name": "era-ink-center",
+      "name": "era-token-ink",
       "names": [
+        "era-token-ink",
         "era-ink-center"
       ],
       "file": "index.css",
-      "useCase": "on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim.",
-      "description": "The EDITABLE counterpart of era-text-trim — for native <input>s, which the\ntrim is forbidden on (it collapses the UA's inner editor box and slices the\nglyphs; see typography/collapsed-text-trim).\n\nWithout help, a tier-height input centres its text by FONT BOX, and the ui\nstacks' font box is deeply asymmetric: ascent ≈1.07em against descent\n≈0.29em. Centring that box parks the visible band (caps, x-height) ~0.115em\nLOW — so a field's text sat visibly below the trimmed label beside it.\n\nThe value is OPTICAL, not the derivation's: pure x-band centring computes\nto ~0.23em of padding, but pixel-measured against real Title-Case text it\nover-lifts — the eye weighs the cap-to-baseline mass, which x-band\ncentring parks ~2px high (caps 2.75px off the top against 5.7px of air\nunder the baseline, measured at dense). 0.08em splits the difference\nbetween the x-band ideal and the cap-band ideal, landing caps ~3.7px in an\n18px field with ~4.7px under the baseline — the reading where neither\nband's partisans win and neither complains.\n\nThe lift is padding, not a translateY: an icon-less Input paints the field\nchrome itself, and a transform would drag the field along with the ink.\npadding-bottom shrinks the content box from below, and a single-line input\nre-centres its line box in what remains — the ink rises by exactly half the\npadding, the chrome doesn't move, and the caret and selection follow the\ntext. In em on purpose: the correction is a fraction of the type, so it\nholds across every density and text size with one value.",
-      "css": "@utility era-ink-center {\n\tpadding-bottom: 0.08em;\n}"
+      "useCase": "the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box; it needs no icon sibling (with one the box must stay flex, and the general trim applies).",
+      "description": "TOKEN INK — the ink centring for a pill whose content is a TOKEN: an id, a\ncount, a status, a tag. Font-independent, unlike everything it replaces.\n\nTHE BUG IT FIXES, which had been shipping library-wide and invisibly:\n`text-box-trim` DOES NOTHING ON A FLEX CONTAINER. Era's controls are all\nflex, and a flex container's bare text becomes an ANONYMOUS flex item — a box\nno selector can reach and no non-inherited property can touch. So\n`era-text-trim` on a Badge, a Chip, a Button or a Bar contributed exactly one\nthing: `line-height: 1`. The ink was then centred by `align-items: center`\non the LINE BOX, which is precisely the font-metric-dependent centring the\ntrim exists to eliminate. Measured on the shipped mono stack: a badge reading\n\"AC-2.1\" sat 2px high in an 18px pill, and no amount of tuning the trim's\nBAND changed it, because the trim was never running.\n\nThe mechanism here restores it: a BLOCK box (where text-box-trim does apply)\nwhose trimmed line box is then centred by `align-content` — block-container\nalignment, so no flex formatting context and no anonymous item. The browser\ncomputes the band from the font's own metrics, which is what makes it hold\nacross ui-monospace, system-ui and ui-serif instead of needing a constant\nper stack.\n\nCAP band, not the x-height band the general trim uses, because the content\nclass is different: a token is caps and digits (both cap-height), and\ncentring the x-band parks them high by (cap − x)/2. Measured on the shipped\nstacks, cap-band centring takes an id/count/status from −2.0px to 0.0.\nProse and sentence-case labels keep era-text-trim; this is for tokens.",
+      "css": "@utility era-token-ink {\n\tdisplay: block;\n\talign-content: center;\n\ttext-align: center;\n\tline-height: 1;\n\ttext-box: trim-both cap alphabetic;\n}\n\n@utility era-ink-center {\n\tpadding-bottom: 0.08em;\n}"
     },
     {
       "name": "era-shimmer",

package/dist/generated-docs/utilities.json

@@ -61,14 +61,15 @@
       "css": "@utility era-text-trim-caps {\n\tline-height: 1;\n\ttext-box: trim-both cap alphabetic;\n}"
     },
     {
-      "name": "era-ink-center",
+      "name": "era-token-ink",
       "names": [
+        "era-token-ink",
         "era-ink-center"
       ],
       "file": "index.css",
-      "useCase": "on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim.",
-      "description": "The EDITABLE counterpart of era-text-trim — for native <input>s, which the\ntrim is forbidden on (it collapses the UA's inner editor box and slices the\nglyphs; see typography/collapsed-text-trim).\n\nWithout help, a tier-height input centres its text by FONT BOX, and the ui\nstacks' font box is deeply asymmetric: ascent ≈1.07em against descent\n≈0.29em. Centring that box parks the visible band (caps, x-height) ~0.115em\nLOW — so a field's text sat visibly below the trimmed label beside it.\n\nThe value is OPTICAL, not the derivation's: pure x-band centring computes\nto ~0.23em of padding, but pixel-measured against real Title-Case text it\nover-lifts — the eye weighs the cap-to-baseline mass, which x-band\ncentring parks ~2px high (caps 2.75px off the top against 5.7px of air\nunder the baseline, measured at dense). 0.08em splits the difference\nbetween the x-band ideal and the cap-band ideal, landing caps ~3.7px in an\n18px field with ~4.7px under the baseline — the reading where neither\nband's partisans win and neither complains.\n\nThe lift is padding, not a translateY: an icon-less Input paints the field\nchrome itself, and a transform would drag the field along with the ink.\npadding-bottom shrinks the content box from below, and a single-line input\nre-centres its line box in what remains — the ink rises by exactly half the\npadding, the chrome doesn't move, and the caret and selection follow the\ntext. In em on purpose: the correction is a fraction of the type, so it\nholds across every density and text size with one value.",
-      "css": "@utility era-ink-center {\n\tpadding-bottom: 0.08em;\n}"
+      "useCase": "the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box; it needs no icon sibling (with one the box must stay flex, and the general trim applies).",
+      "description": "TOKEN INK — the ink centring for a pill whose content is a TOKEN: an id, a\ncount, a status, a tag. Font-independent, unlike everything it replaces.\n\nTHE BUG IT FIXES, which had been shipping library-wide and invisibly:\n`text-box-trim` DOES NOTHING ON A FLEX CONTAINER. Era's controls are all\nflex, and a flex container's bare text becomes an ANONYMOUS flex item — a box\nno selector can reach and no non-inherited property can touch. So\n`era-text-trim` on a Badge, a Chip, a Button or a Bar contributed exactly one\nthing: `line-height: 1`. The ink was then centred by `align-items: center`\non the LINE BOX, which is precisely the font-metric-dependent centring the\ntrim exists to eliminate. Measured on the shipped mono stack: a badge reading\n\"AC-2.1\" sat 2px high in an 18px pill, and no amount of tuning the trim's\nBAND changed it, because the trim was never running.\n\nThe mechanism here restores it: a BLOCK box (where text-box-trim does apply)\nwhose trimmed line box is then centred by `align-content` — block-container\nalignment, so no flex formatting context and no anonymous item. The browser\ncomputes the band from the font's own metrics, which is what makes it hold\nacross ui-monospace, system-ui and ui-serif instead of needing a constant\nper stack.\n\nCAP band, not the x-height band the general trim uses, because the content\nclass is different: a token is caps and digits (both cap-height), and\ncentring the x-band parks them high by (cap − x)/2. Measured on the shipped\nstacks, cap-band centring takes an id/count/status from −2.0px to 0.0.\nProse and sentence-case labels keep era-text-trim; this is for tokens.",
+      "css": "@utility era-token-ink {\n\tdisplay: block;\n\talign-content: center;\n\ttext-align: center;\n\tline-height: 1;\n\ttext-box: trim-both cap alphabetic;\n}\n\n@utility era-ink-center {\n\tpadding-bottom: 0.08em;\n}"
     },
     {
       "name": "era-shimmer",

package/dist/generated-docs/utilities.md

@@ -44,7 +44,7 @@ enough to stay var-form — `min-w-(--era-h-md)` etc. remain the escape hatch.
 | `era-text-trim` | 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: never on an <input>/<textarea>, and never on the same element as `truncate` or any overflow clip — put it on the fixed-height ROW and let the truncating child centre inside it. See era-text-trim-caps for ALL-CAPS. |
 | `truncate` | single-line horizontal truncation with an ellipsis — put it on the truncating CHILD inside a trimmed or leading-none row, never on the same element as era-text-trim; it will not clip ascenders or descenders. |
 | `era-text-trim-caps` | the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never for mixed-case text (a label like "System" reads high; use era-text-trim), and never on the same element as `truncate`. |
-| `era-ink-center` | on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim. |
+| `era-token-ink` `era-ink-center` | the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box; it needs no icon sibling (with one the box must stay flex, and the general trim applies). |
 | `era-shimmer` | the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text. |
 | `era-collapse` | the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden). |
 | `h-xs` `h-xxs` `h-sm` `h-md` `h-lg` | the tier-height ladder — h-xs (icon) · h-xxs (nested pill) · h-sm (standalone pill) · h-md (control) · h-lg (bar); the named form of h-(--era-h-*). |
@@ -236,39 +236,48 @@ Declared in `index.css`.
 }
 ```
 
-## era-ink-center
-
-**Use it for:** on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim.
-
-The EDITABLE counterpart of era-text-trim — for native <input>s, which the
-trim is forbidden on (it collapses the UA's inner editor box and slices the
-glyphs; see typography/collapsed-text-trim).
-
-Without help, a tier-height input centres its text by FONT BOX, and the ui
-stacks' font box is deeply asymmetric: ascent ≈1.07em against descent
-≈0.29em. Centring that box parks the visible band (caps, x-height) ~0.115em
-LOW — so a field's text sat visibly below the trimmed label beside it.
-
-The value is OPTICAL, not the derivation's: pure x-band centring computes
-to ~0.23em of padding, but pixel-measured against real Title-Case text it
-over-lifts — the eye weighs the cap-to-baseline mass, which x-band
-centring parks ~2px high (caps 2.75px off the top against 5.7px of air
-under the baseline, measured at dense). 0.08em splits the difference
-between the x-band ideal and the cap-band ideal, landing caps ~3.7px in an
-18px field with ~4.7px under the baseline — the reading where neither
-band's partisans win and neither complains.
-
-The lift is padding, not a translateY: an icon-less Input paints the field
-chrome itself, and a transform would drag the field along with the ink.
-padding-bottom shrinks the content box from below, and a single-line input
-re-centres its line box in what remains — the ink rises by exactly half the
-padding, the chrome doesn't move, and the caret and selection follow the
-text. In em on purpose: the correction is a fraction of the type, so it
-holds across every density and text size with one value.
+## era-token-ink · era-ink-center
+
+**Use it for:** the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box; it needs no icon sibling (with one the box must stay flex, and the general trim applies).
+
+TOKEN INK — the ink centring for a pill whose content is a TOKEN: an id, a
+count, a status, a tag. Font-independent, unlike everything it replaces.
+
+THE BUG IT FIXES, which had been shipping library-wide and invisibly:
+`text-box-trim` DOES NOTHING ON A FLEX CONTAINER. Era's controls are all
+flex, and a flex container's bare text becomes an ANONYMOUS flex item — a box
+no selector can reach and no non-inherited property can touch. So
+`era-text-trim` on a Badge, a Chip, a Button or a Bar contributed exactly one
+thing: `line-height: 1`. The ink was then centred by `align-items: center`
+on the LINE BOX, which is precisely the font-metric-dependent centring the
+trim exists to eliminate. Measured on the shipped mono stack: a badge reading
+"AC-2.1" sat 2px high in an 18px pill, and no amount of tuning the trim's
+BAND changed it, because the trim was never running.
+
+The mechanism here restores it: a BLOCK box (where text-box-trim does apply)
+whose trimmed line box is then centred by `align-content` — block-container
+alignment, so no flex formatting context and no anonymous item. The browser
+computes the band from the font's own metrics, which is what makes it hold
+across ui-monospace, system-ui and ui-serif instead of needing a constant
+per stack.
+
+CAP band, not the x-height band the general trim uses, because the content
+class is different: a token is caps and digits (both cap-height), and
+centring the x-band parks them high by (cap − x)/2. Measured on the shipped
+stacks, cap-band centring takes an id/count/status from −2.0px to 0.0.
+Prose and sentence-case labels keep era-text-trim; this is for tokens.
 
 Declared in `index.css`.
 
 ```css
+@utility era-token-ink {
+	display: block;
+	align-content: center;
+	text-align: center;
+	line-height: 1;
+	text-box: trim-both cap alphabetic;
+}
+
 @utility era-ink-center {
 	padding-bottom: 0.08em;
 }

package/dist/styles/index.css

@@ -261,6 +261,44 @@
  *
  * @use on a native single-line <input> (or the text layer that must mirror
  * one) inside a fixed-height field — never alongside era-text-trim. */
+/* TOKEN INK — the ink centring for a pill whose content is a TOKEN: an id, a
+ * count, a status, a tag. Font-independent, unlike everything it replaces.
+ *
+ * THE BUG IT FIXES, which had been shipping library-wide and invisibly:
+ * `text-box-trim` DOES NOTHING ON A FLEX CONTAINER. Era's controls are all
+ * flex, and a flex container's bare text becomes an ANONYMOUS flex item — a box
+ * no selector can reach and no non-inherited property can touch. So
+ * `era-text-trim` on a Badge, a Chip, a Button or a Bar contributed exactly one
+ * thing: `line-height: 1`. The ink was then centred by `align-items: center`
+ * on the LINE BOX, which is precisely the font-metric-dependent centring the
+ * trim exists to eliminate. Measured on the shipped mono stack: a badge reading
+ * "AC-2.1" sat 2px high in an 18px pill, and no amount of tuning the trim's
+ * BAND changed it, because the trim was never running.
+ *
+ * The mechanism here restores it: a BLOCK box (where text-box-trim does apply)
+ * whose trimmed line box is then centred by `align-content` — block-container
+ * alignment, so no flex formatting context and no anonymous item. The browser
+ * computes the band from the font's own metrics, which is what makes it hold
+ * across ui-monospace, system-ui and ui-serif instead of needing a constant
+ * per stack.
+ *
+ * CAP band, not the x-height band the general trim uses, because the content
+ * class is different: a token is caps and digits (both cap-height), and
+ * centring the x-band parks them high by (cap − x)/2. Measured on the shipped
+ * stacks, cap-band centring takes an id/count/status from −2.0px to 0.0.
+ * Prose and sentence-case labels keep era-text-trim; this is for tokens.
+ *
+ * @use the ink centring for a token pill — a badge, a KV value, any short
+ * caps-or-digits label in a fixed-height box; it needs no icon sibling (with
+ * one the box must stay flex, and the general trim applies). */
+@utility era-token-ink {
+	display: block;
+	align-content: center;
+	text-align: center;
+	line-height: 1;
+	text-box: trim-both cap alphabetic;
+}
+
 @utility era-ink-center {
 	padding-bottom: 0.08em;
 }

package/dist/styles/typography.css

@@ -12,27 +12,44 @@
  * absolute root size (e.g. `html { font-size: 16px }`); see the docs' layout.css.
  */
 
+/*
+ * THE SHIPPED STACKS — named, and read directly.
+ *
+ * These rules used to say `var(--font-mono, <era's stack>)`, treating era's
+ * list as a fallback. It never once applied. Tailwind v4 ALWAYS defines
+ * --font-mono in its own base theme, so the fallback arm was unreachable and
+ * every consumer silently rendered TAILWIND's font stack — while era's docs,
+ * which pin --font-mono to generic `monospace` for taste, rendered a third
+ * thing. Three different fonts: one the library believed it shipped, one
+ * consumers actually got, one the maintainer verified against. Font metrics
+ * drive ink centring, so every alignment constant tuned in the docs was
+ * calibrated against a font nobody else renders — which is why the same
+ * "text isn't vertically centred" bug kept coming back from consumers and
+ * kept looking fine here.
+ *
+ * The axis now reads era's OWN namespaced token, which nothing upstream
+ * defines. A consumer (or these docs) re-points a stack by setting
+ * --era-font-mono / -sans / -serif; nothing can do it by accident.
+ */
+:root {
+	--era-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+	--era-font-sans: system-ui, sans-serif;
+	--era-font-serif: ui-serif, Georgia, 'Times New Roman', serif;
+}
+
 [data-font='mono'],
 [data-font='mono'] * {
-	font-family: var(
-		--font-mono,
-		ui-monospace,
-		'SF Mono',
-		Menlo,
-		Consolas,
-		'Liberation Mono',
-		monospace
-	) !important;
+	font-family: var(--era-font-mono) !important;
 }
 
 [data-font='sans'],
 [data-font='sans'] * {
-	font-family: var(--font-sans, system-ui, sans-serif) !important;
+	font-family: var(--era-font-sans) !important;
 }
 
 [data-font='serif'],
 [data-font='serif'] * {
-	font-family: var(--font-serif, ui-serif, Georgia, 'Times New Roman', serif) !important;
+	font-family: var(--era-font-serif) !important;
 }
 
 /*

package/dist/ui/badge/badge.svelte

@@ -11,7 +11,15 @@
 		// out from under the ink and the label bled past the fill. A pill that must
 		// fit a tight row does it the Tool.Chip way: the BOX holds and an inner
 		// min-w-0 span truncates. Enforced at runtime by layout/pill-holds-its-ink.
-		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]: the ink mechanism switches with the content SHAPE.
+		//
+		// A badge holding only a token (the overwhelming case — an id, a count, a
+		// status) becomes a BLOCK box so text-box-trim can actually run; see
+		// era-token-ink for why the trim is inert on a flex container and what
+		// 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',
 		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", {
+}, 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", {
     tone: {
         default: "bg-fill text-fg";
         accent: "bg-primary text-primary-fg";

package/dist/ui/card/card.svelte

@@ -19,7 +19,19 @@
 			// outer padding — each section pads itself so dividers run edge-to-edge.
 			// `p-0` (not just "no class") so a <button> card drops the browser's
 			// default button padding and lines up with the <div>/<a> variants.
-			sectioned: { true: 'p-0', false: 'px-(--era-pad-md) pt-(--era-gap) pb-(--era-pad-md)' },
+			//
+			// EVEN on all four sides. This carried a half-height top padding
+			// (pt-gutter against pb-pad-md) borrowed from `p-content`, whose
+			// asymmetry is earned: a content panel always follows a section heading
+			// ROW, and that row's own bar already contributes slack above the text,
+			// so padding evenly on top of it spends the space twice. A card has no
+			// row above it — its own top edge IS the boundary — so the borrowed
+			// rule had nothing to subtract and simply made every card top-heavy
+			// (4px above the content against 8px below it, at dense). A consumer
+			// reported it as "cards aren't evenly spaced", which is exactly what it
+			// was: the even-gap law, broken by default, in the component that
+			// bounds more consumer content than any other.
+			sectioned: { true: 'p-0', false: 'p-(--era-pad-md)' },
 			interactive: {
 				true: 'cursor-pointer hover:bg-(--era-highlight) hover:shadow-(--era-highlight-shadow) focus-visible:bg-(--era-highlight) era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50'
 			}
@@ -101,17 +113,15 @@
 {#snippet body()}
 	{#if sectioned}
 		{#if header}
-			<div
-				class="border-b border-divider-faded px-(--era-pad-md) pt-(--era-gap) pb-(--era-pad-md) text-bright"
-			>
+			<div class="border-b border-divider-faded p-(--era-pad-md) text-bright">
 				{@render header()}
 			</div>
 		{/if}
-		<div class="px-(--era-pad-md) pt-(--era-gap) pb-(--era-pad-md)">
+		<div class="p-(--era-pad-md)">
 			{@render children?.()}
 		</div>
 		{#if footer}
-			<div class="border-t border-divider-faded px-(--era-pad-md) pt-(--era-gap) pb-(--era-pad-md)">
+			<div class="border-t border-divider-faded p-(--era-pad-md)">
 				{@render footer()}
 			</div>
 		{/if}

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

@@ -7,7 +7,7 @@ export declare const cardVariants: import("tailwind-variants").TVReturnType<{
     };
     sectioned: {
         true: "p-0";
-        false: "px-(--era-pad-md) pt-(--era-gap) pb-(--era-pad-md)";
+        false: "p-(--era-pad-md)";
     };
     interactive: {
         true: "cursor-pointer hover:bg-(--era-highlight) hover:shadow-(--era-highlight-shadow) focus-visible:bg-(--era-highlight) era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
@@ -21,7 +21,7 @@ export declare const cardVariants: import("tailwind-variants").TVReturnType<{
     };
     sectioned: {
         true: "p-0";
-        false: "px-(--era-pad-md) pt-(--era-gap) pb-(--era-pad-md)";
+        false: "p-(--era-pad-md)";
     };
     interactive: {
         true: "cursor-pointer hover:bg-(--era-highlight) hover:shadow-(--era-highlight-shadow) focus-visible:bg-(--era-highlight) era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
@@ -35,7 +35,7 @@ export declare const cardVariants: import("tailwind-variants").TVReturnType<{
     };
     sectioned: {
         true: "p-0";
-        false: "px-(--era-pad-md) pt-(--era-gap) pb-(--era-pad-md)";
+        false: "p-(--era-pad-md)";
     };
     interactive: {
         true: "cursor-pointer hover:bg-(--era-highlight) hover:shadow-(--era-highlight-shadow) focus-visible:bg-(--era-highlight) era-interactive aria-disabled:cursor-not-allowed aria-disabled:opacity-50";

package/dist/ui/kv/kv.svelte

@@ -30,7 +30,12 @@
 	{...restProps}
 >
 	<Badge {tone} class="h-full rounded-none border-r border-divider py-0">{key}</Badge>
-	<span class="min-w-(--era-h-xxs) px-(--era-inset-sm) text-center text-muted tabular-nums"
+	<!-- self-stretch + era-token-ink: a KV value is a token (a number, an id, a
+	     status), and the block mechanism is the only one where text-box-trim
+	     actually runs — see era-token-ink. Stretching gives that block a full-
+	     height box for align-content to centre the trimmed line in. -->
+	<span
+		class="era-token-ink min-w-(--era-h-xxs) self-stretch px-(--era-inset-sm) text-muted tabular-nums"
 		>{value}</span
 	>
 </span>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "4.16.9",
+	"version": "6.0.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",
@@ -119,6 +119,7 @@
 		"@types/node": "^24.13.3",
 		"@types/three": "^0.184.1",
 		"@xyflow/svelte": "^1.6.2",
+		"conventional-changelog-conventionalcommits": "^10.2.1",
 		"eslint": "^9.39.5",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-better-tailwindcss": "^4.7.0",