@signal9/era-ui 10.0.0 → 10.1.0

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

@@ -4,18 +4,20 @@
 
 ## Using the library
 
+This package is published to two registries under two names: `@signal9/era-ui` on npm (used throughout these docs) and `@sig-nine/era-ui` on GitHub Packages, where the scope must match the repo owner. Same code, same versions — pick the one your registry serves and keep the scope consistent.
+
 **One entry point per component.** There is no barrel that re-exports everything — importing a component can never drag in another one, or another one's dependencies.
 
 ```ts
-import { Button } from "@sig-nine/era-ui/button";
-import * as Select from "@sig-nine/era-ui/select";
-import * as Table from "@sig-nine/era-ui/table";
+import { Button } from "@signal9/era-ui/button";
+import * as Select from "@signal9/era-ui/select";
+import * as Table from "@signal9/era-ui/table";
 
 // The root is the SYSTEM layer only: cn/tv, keybindings, the axis
 // registry, and Mode. It imports no component.
-import { cn, ModeProvider } from "@sig-nine/era-ui";
+import { cn, ModeProvider } from "@signal9/era-ui";
 
-import "@sig-nine/era-ui/styles";  // source CSS, scanned by your Tailwind
+import "@signal9/era-ui/styles";  // source CSS, scanned by your Tailwind
 ```
 
 The path is always the component's own kebab-case name — `/button`, `/dropdown-menu`, `/date-range-picker` — and the other layers are namespaced: `/ai` and `/ai/<part>`, `/apps/<app>`, `/os`, `/audit`.
@@ -24,7 +26,7 @@ Named exports wrap a single primitive (`Button`, `Badge`, `Chip`, `Input`, …).
 
 ### Stylesheets
 
-`@sig-nine/era-ui/styles` is the source CSS — import it once and your own Tailwind build scans era's components and emits only the utilities they use. `@sig-nine/era-ui/css` is the prebuilt alternative for a project without Tailwind. Three more are opt-in, each single-purpose: `/styles/video-player` (vidstack's vendor CSS, needed only with `VideoPlayer`), `/styles/prose` (document typography for a TipTap editor — put `era-notes-prose` on your editor element; `NoteEditor` imports it already), and `/styles/themes` (the raw theme tokens).
+`@signal9/era-ui/styles` is the source CSS — import it once and your own Tailwind build scans era's components and emits only the utilities they use. `@signal9/era-ui/css` is the prebuilt alternative for a project without Tailwind. Three more are opt-in, each single-purpose: `/styles/video-player` (vidstack's vendor CSS, needed only with `VideoPlayer`), `/styles/prose` (document typography for a TipTap editor — put `era-notes-prose` on your editor element; `NoteEditor` imports it already), and `/styles/themes` (the raw theme tokens).
 
 ### Optional peers
 
@@ -58,7 +60,9 @@ 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-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-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` — the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box, CENTRED horizontally and with no icon sibling. For a left-aligned sentence-case label use era-label-ink; when an icon really must sit beside the text, see the note there.
+- `era-label-ink` — the ink centring for a fixed-height control holding ONE line of sentence-case text and no icon — a menu item, a nav trigger, a button label. Never alongside `truncate` (the trimmed box becomes the clip).
 - `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-icon · h-pill · h-chip · h-control · h-bar` — the tier-height ladder — h-icon (icon) · h-pill (nested pill) · h-chip (standalone pill) · h-control (control) · h-bar (bar); the named form of h-(--era-h-*).
@@ -131,7 +135,7 @@ never the `h-(--era-h-control)` var-class spelling. Everything below rides along
 with the stylesheet and needs no import:
 
 ```ts
-import "@sig-nine/era-ui/css";
+import "@signal9/era-ui/css";
 ```
 
 ```svelte
@@ -166,7 +170,9 @@ enough to stay var-form — `min-w-(--era-h-control)` etc. remain the escape hat
 | `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-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-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` | the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box, CENTRED horizontally and with no icon sibling. For a left-aligned sentence-case label use era-label-ink; when an icon really must sit beside the text, see the note there. |
+| `era-label-ink` | the ink centring for a fixed-height control holding ONE line of sentence-case text and no icon — a menu item, a nav trigger, a button label. Never alongside `truncate` (the trimmed box becomes the clip). |
 | `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-icon` `h-pill` `h-chip` `h-control` `h-bar` | the tier-height ladder — h-icon (icon) · h-pill (nested pill) · h-chip (standalone pill) · h-control (control) · h-bar (bar); the named form of h-(--era-h-*). |
@@ -357,9 +363,47 @@ Declared in `index.css`.
 }
 ```
 
-## era-token-ink · era-ink-center
+## 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.
+
+Declared in `index.css`.
+
+```css
+@utility era-ink-center {
+	padding-bottom: 0.08em;
+}
+```
+
+## era-token-ink
 
-**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).
+**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, CENTRED horizontally and with no icon sibling. For a left-aligned sentence-case label use era-label-ink; when an icon really must sit beside the text, see the note there.
 
 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.
@@ -398,9 +442,45 @@ Declared in `index.css`.
 	line-height: 1;
 	text-box: trim-both cap alphabetic;
 }
+```
 
-@utility era-ink-center {
-	padding-bottom: 0.08em;
+## era-label-ink
+
+**Use it for:** the ink centring for a fixed-height control holding ONE line of sentence-case text and no icon — a menu item, a nav trigger, a button label. Never alongside `truncate` (the trimmed box becomes the clip).
+
+LABEL INK — era-token-ink's mixed-case sibling, and the general answer to
+"this fixed-height control holds one line of text".
+
+Same mechanism, same reason: `text-box-trim` needs a BLOCK box, so the row
+becomes one and `align-content` (block-container alignment) does the
+centring. What differs is the band and the alignment, because the content
+class differs — a label is sentence case, so the x-height band is the visual
+mass to centre (cap-band reads low on "System"), and it is laid out against
+the row's padding rather than centred in it.
+
+WHY IT EXISTS AT ALL: era's controls are flex, and a flex container's bare
+text is an ANONYMOUS flex item — a box no selector reaches and no
+non-inherited property touches. So `era-text-trim` on a flex row is inert,
+contributing only its `line-height: 1`, and the ink falls back to line-box
+centring by font metrics. era-token-ink already fixed that for centred
+tokens; this fixes it for everything else.
+
+THE ICON CASE IS NOT SOLVED, and cannot be from CSS: an icon beside the text
+needs the box to stay flex, which re-creates the anonymous item. A component
+whose children are an opaque slot therefore guards it —
+`not-has-[svg]:era-label-ink` — and ink-centres the text-only case while
+leaving the icon case on line-box centring. Splitting icon and label into
+separate slots is what would close it; typography/inert-trim reports every
+site still on the fallback.
+
+Declared in `index.css`.
+
+```css
+@utility era-label-ink {
+	display: block;
+	align-content: center;
+	line-height: 1;
+	text-box: trim-both ex alphabetic;
 }
 ```
 
@@ -755,13 +835,13 @@ A complete notes app — rich-text editor, slash commands, local persistence.
 
 ## Usage
 
-Apps ship on their own subpath and are **not** re-exported from `@sig-nine/era-ui`.
+Apps ship on their own subpath and are **not** re-exported from `@signal9/era-ui`.
 Notes carries TipTap, and a consumer who never imports an app should never pay
 for it.
 
 ```svelte
 <script>
-	import { Notes } from '@sig-nine/era-ui/apps';
+	import { Notes } from '@signal9/era-ui/apps';
 </script>
 
 <Notes />
@@ -801,7 +881,7 @@ Persistence is one small interface, so server-backed hosting is a drop-in swap
 `load`/`save` may be sync or async:
 
 ```ts
-import { Notes, NotesStore } from '@sig-nine/era-ui/apps';
+import { Notes, NotesStore } from '@signal9/era-ui/apps';
 
 const store = new NotesStore({
 	adapter: {

package/dist/generated-docs/llms.txt

@@ -38,18 +38,20 @@ Full derivations: `{{ORIGIN}}/spacing.md` (the ladder and every token), `{{ORIGI
 
 ## Using the library
 
+This package is published to two registries under two names: `@signal9/era-ui` on npm (used throughout these docs) and `@sig-nine/era-ui` on GitHub Packages, where the scope must match the repo owner. Same code, same versions — pick the one your registry serves and keep the scope consistent.
+
 **One entry point per component.** There is no barrel that re-exports everything — importing a component can never drag in another one, or another one's dependencies.
 
 ```ts
-import { Button } from "@sig-nine/era-ui/button";
-import * as Select from "@sig-nine/era-ui/select";
-import * as Table from "@sig-nine/era-ui/table";
+import { Button } from "@signal9/era-ui/button";
+import * as Select from "@signal9/era-ui/select";
+import * as Table from "@signal9/era-ui/table";
 
 // The root is the SYSTEM layer only: cn/tv, keybindings, the axis
 // registry, and Mode. It imports no component.
-import { cn, ModeProvider } from "@sig-nine/era-ui";
+import { cn, ModeProvider } from "@signal9/era-ui";
 
-import "@sig-nine/era-ui/styles";  // source CSS, scanned by your Tailwind
+import "@signal9/era-ui/styles";  // source CSS, scanned by your Tailwind
 ```
 
 The path is always the component's own kebab-case name — `/button`, `/dropdown-menu`, `/date-range-picker` — and the other layers are namespaced: `/ai` and `/ai/<part>`, `/apps/<app>`, `/os`, `/audit`.
@@ -58,7 +60,7 @@ Named exports wrap a single primitive (`Button`, `Badge`, `Chip`, `Input`, …).
 
 ### Stylesheets
 
-`@sig-nine/era-ui/styles` is the source CSS — import it once and your own Tailwind build scans era's components and emits only the utilities they use. `@sig-nine/era-ui/css` is the prebuilt alternative for a project without Tailwind. Three more are opt-in, each single-purpose: `/styles/video-player` (vidstack's vendor CSS, needed only with `VideoPlayer`), `/styles/prose` (document typography for a TipTap editor — put `era-notes-prose` on your editor element; `NoteEditor` imports it already), and `/styles/themes` (the raw theme tokens).
+`@signal9/era-ui/styles` is the source CSS — import it once and your own Tailwind build scans era's components and emits only the utilities they use. `@signal9/era-ui/css` is the prebuilt alternative for a project without Tailwind. Three more are opt-in, each single-purpose: `/styles/video-player` (vidstack's vendor CSS, needed only with `VideoPlayer`), `/styles/prose` (document typography for a TipTap editor — put `era-notes-prose` on your editor element; `NoteEditor` imports it already), and `/styles/themes` (the raw theme tokens).
 
 ### Optional peers
 
@@ -96,7 +98,9 @@ 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-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-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` — the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box, CENTRED horizontally and with no icon sibling. For a left-aligned sentence-case label use era-label-ink; when an icon really must sit beside the text, see the note there.
+- `era-label-ink` — the ink centring for a fixed-height control holding ONE line of sentence-case text and no icon — a menu item, a nav trigger, a button label. Never alongside `truncate` (the trimmed box becomes the clip).
 - `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-icon · h-pill · h-chip · h-control · h-bar` — the tier-height ladder — h-icon (icon) · h-pill (nested pill) · h-chip (standalone pill) · h-control (control) · h-bar (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": 6147,
+      "tokenEstimate": 7162,
       "sections": [
         "Overview",
         "era-interactive",
@@ -53,7 +53,9 @@
         "era-text-trim",
         "truncate",
         "era-text-trim-caps",
-        "era-token-ink · era-ink-center",
+        "era-ink-center",
+        "era-token-ink",
+        "era-label-ink",
         "era-shimmer",
         "era-collapse",
         "h-icon · h-pill · h-chip · h-control · h-bar",
@@ -107,7 +109,7 @@
       "slug": "notes",
       "title": "Notes",
       "summary": "A complete notes app — rich-text editor, slash commands, local persistence.",
-      "tokenEstimate": 885,
+      "tokenEstimate": 884,
       "sections": [
         "Usage",
         "Peer dependencies",
@@ -1022,15 +1024,34 @@
       "css": "@utility era-text-trim-caps {\n\tline-height: 1;\n\ttext-box: trim-both cap alphabetic;\n}"
     },
     {
-      "name": "era-token-ink",
+      "name": "era-ink-center",
       "names": [
-        "era-token-ink",
         "era-ink-center"
       ],
       "file": "index.css",
-      "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).",
+      "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}"
+    },
+    {
+      "name": "era-token-ink",
+      "names": [
+        "era-token-ink"
+      ],
+      "file": "index.css",
+      "useCase": "the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box, CENTRED horizontally and with no icon sibling. For a left-aligned sentence-case label use era-label-ink; when an icon really must sit beside the text, see the note there.",
       "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}"
+      "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}"
+    },
+    {
+      "name": "era-label-ink",
+      "names": [
+        "era-label-ink"
+      ],
+      "file": "index.css",
+      "useCase": "the ink centring for a fixed-height control holding ONE line of sentence-case text and no icon — a menu item, a nav trigger, a button label. Never alongside `truncate` (the trimmed box becomes the clip).",
+      "description": "LABEL INK — era-token-ink's mixed-case sibling, and the general answer to\n\"this fixed-height control holds one line of text\".\n\nSame mechanism, same reason: `text-box-trim` needs a BLOCK box, so the row\nbecomes one and `align-content` (block-container alignment) does the\ncentring. What differs is the band and the alignment, because the content\nclass differs — a label is sentence case, so the x-height band is the visual\nmass to centre (cap-band reads low on \"System\"), and it is laid out against\nthe row's padding rather than centred in it.\n\nWHY IT EXISTS AT ALL: era's controls are flex, and a flex container's bare\ntext is an ANONYMOUS flex item — a box no selector reaches and no\nnon-inherited property touches. So `era-text-trim` on a flex row is inert,\ncontributing only its `line-height: 1`, and the ink falls back to line-box\ncentring by font metrics. era-token-ink already fixed that for centred\ntokens; this fixes it for everything else.\n\nTHE ICON CASE IS NOT SOLVED, and cannot be from CSS: an icon beside the text\nneeds the box to stay flex, which re-creates the anonymous item. A component\nwhose children are an opaque slot therefore guards it —\n`not-has-[svg]:era-label-ink` — and ink-centres the text-only case while\nleaving the icon case on line-box centring. Splitting icon and label into\nseparate slots is what would close it; typography/inert-trim reports every\nsite still on the fallback.",
+      "css": "@utility era-label-ink {\n\tdisplay: block;\n\talign-content: center;\n\tline-height: 1;\n\ttext-box: trim-both ex alphabetic;\n}"
     },
     {
       "name": "era-shimmer",

package/dist/generated-docs/notes.md

@@ -4,13 +4,13 @@ A complete notes app — rich-text editor, slash commands, local persistence.
 
 ## Usage
 
-Apps ship on their own subpath and are **not** re-exported from `@sig-nine/era-ui`.
+Apps ship on their own subpath and are **not** re-exported from `@signal9/era-ui`.
 Notes carries TipTap, and a consumer who never imports an app should never pay
 for it.
 
 ```svelte
 <script>
-	import { Notes } from '@sig-nine/era-ui/apps';
+	import { Notes } from '@signal9/era-ui/apps';
 </script>
 
 <Notes />
@@ -50,7 +50,7 @@ Persistence is one small interface, so server-backed hosting is a drop-in swap
 `load`/`save` may be sync or async:
 
 ```ts
-import { Notes, NotesStore } from '@sig-nine/era-ui/apps';
+import { Notes, NotesStore } from '@signal9/era-ui/apps';
 
 const store = new NotesStore({
 	adapter: {

package/dist/generated-docs/utilities.json

@@ -61,15 +61,34 @@
       "css": "@utility era-text-trim-caps {\n\tline-height: 1;\n\ttext-box: trim-both cap alphabetic;\n}"
     },
     {
-      "name": "era-token-ink",
+      "name": "era-ink-center",
       "names": [
-        "era-token-ink",
         "era-ink-center"
       ],
       "file": "index.css",
-      "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).",
+      "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}"
+    },
+    {
+      "name": "era-token-ink",
+      "names": [
+        "era-token-ink"
+      ],
+      "file": "index.css",
+      "useCase": "the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box, CENTRED horizontally and with no icon sibling. For a left-aligned sentence-case label use era-label-ink; when an icon really must sit beside the text, see the note there.",
       "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}"
+      "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}"
+    },
+    {
+      "name": "era-label-ink",
+      "names": [
+        "era-label-ink"
+      ],
+      "file": "index.css",
+      "useCase": "the ink centring for a fixed-height control holding ONE line of sentence-case text and no icon — a menu item, a nav trigger, a button label. Never alongside `truncate` (the trimmed box becomes the clip).",
+      "description": "LABEL INK — era-token-ink's mixed-case sibling, and the general answer to\n\"this fixed-height control holds one line of text\".\n\nSame mechanism, same reason: `text-box-trim` needs a BLOCK box, so the row\nbecomes one and `align-content` (block-container alignment) does the\ncentring. What differs is the band and the alignment, because the content\nclass differs — a label is sentence case, so the x-height band is the visual\nmass to centre (cap-band reads low on \"System\"), and it is laid out against\nthe row's padding rather than centred in it.\n\nWHY IT EXISTS AT ALL: era's controls are flex, and a flex container's bare\ntext is an ANONYMOUS flex item — a box no selector reaches and no\nnon-inherited property touches. So `era-text-trim` on a flex row is inert,\ncontributing only its `line-height: 1`, and the ink falls back to line-box\ncentring by font metrics. era-token-ink already fixed that for centred\ntokens; this fixes it for everything else.\n\nTHE ICON CASE IS NOT SOLVED, and cannot be from CSS: an icon beside the text\nneeds the box to stay flex, which re-creates the anonymous item. A component\nwhose children are an opaque slot therefore guards it —\n`not-has-[svg]:era-label-ink` — and ink-centres the text-only case while\nleaving the icon case on line-box centring. Splitting icon and label into\nseparate slots is what would close it; typography/inert-trim reports every\nsite still on the fallback.",
+      "css": "@utility era-label-ink {\n\tdisplay: block;\n\talign-content: center;\n\tline-height: 1;\n\ttext-box: trim-both ex alphabetic;\n}"
     },
     {
       "name": "era-shimmer",

package/dist/generated-docs/utilities.md

@@ -9,7 +9,7 @@ never the `h-(--era-h-control)` var-class spelling. Everything below rides along
 with the stylesheet and needs no import:
 
 ```ts
-import "@sig-nine/era-ui/css";
+import "@signal9/era-ui/css";
 ```
 
 ```svelte
@@ -44,7 +44,9 @@ enough to stay var-form — `min-w-(--era-h-control)` etc. remain the escape hat
 | `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-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-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` | the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box, CENTRED horizontally and with no icon sibling. For a left-aligned sentence-case label use era-label-ink; when an icon really must sit beside the text, see the note there. |
+| `era-label-ink` | the ink centring for a fixed-height control holding ONE line of sentence-case text and no icon — a menu item, a nav trigger, a button label. Never alongside `truncate` (the trimmed box becomes the clip). |
 | `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-icon` `h-pill` `h-chip` `h-control` `h-bar` | the tier-height ladder — h-icon (icon) · h-pill (nested pill) · h-chip (standalone pill) · h-control (control) · h-bar (bar); the named form of h-(--era-h-*). |
@@ -235,9 +237,47 @@ Declared in `index.css`.
 }
 ```
 
-## era-token-ink · era-ink-center
+## 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).
+**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.
+
+Declared in `index.css`.
+
+```css
+@utility era-ink-center {
+	padding-bottom: 0.08em;
+}
+```
+
+## era-token-ink
+
+**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, CENTRED horizontally and with no icon sibling. For a left-aligned sentence-case label use era-label-ink; when an icon really must sit beside the text, see the note there.
 
 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.
@@ -276,9 +316,45 @@ Declared in `index.css`.
 	line-height: 1;
 	text-box: trim-both cap alphabetic;
 }
+```
 
-@utility era-ink-center {
-	padding-bottom: 0.08em;
+## era-label-ink
+
+**Use it for:** the ink centring for a fixed-height control holding ONE line of sentence-case text and no icon — a menu item, a nav trigger, a button label. Never alongside `truncate` (the trimmed box becomes the clip).
+
+LABEL INK — era-token-ink's mixed-case sibling, and the general answer to
+"this fixed-height control holds one line of text".
+
+Same mechanism, same reason: `text-box-trim` needs a BLOCK box, so the row
+becomes one and `align-content` (block-container alignment) does the
+centring. What differs is the band and the alignment, because the content
+class differs — a label is sentence case, so the x-height band is the visual
+mass to centre (cap-band reads low on "System"), and it is laid out against
+the row's padding rather than centred in it.
+
+WHY IT EXISTS AT ALL: era's controls are flex, and a flex container's bare
+text is an ANONYMOUS flex item — a box no selector reaches and no
+non-inherited property touches. So `era-text-trim` on a flex row is inert,
+contributing only its `line-height: 1`, and the ink falls back to line-box
+centring by font metrics. era-token-ink already fixed that for centred
+tokens; this fixes it for everything else.
+
+THE ICON CASE IS NOT SOLVED, and cannot be from CSS: an icon beside the text
+needs the box to stay flex, which re-creates the anonymous item. A component
+whose children are an opaque slot therefore guards it —
+`not-has-[svg]:era-label-ink` — and ink-centres the text-only case while
+leaving the icon case on line-box centring. Splitting icon and label into
+separate slots is what would close it; typography/inert-trim reports every
+site still on the fallback.
+
+Declared in `index.css`.
+
+```css
+@utility era-label-ink {
+	display: block;
+	align-content: center;
+	line-height: 1;
+	text-box: trim-both ex alphabetic;
 }
 ```
 

package/dist/styles/index.css

@@ -227,7 +227,9 @@
  * the pair so the runtime audit can point at it). It exists so the failure mode
  * is a no-op instead of unreadable text. */
 .era-text-trim.truncate,
-.era-text-trim-caps.truncate {
+.era-text-trim-caps.truncate,
+.era-label-ink.truncate,
+.era-token-ink.truncate {
 	line-height: normal;
 	text-box: normal;
 }
@@ -271,6 +273,10 @@
  *
  * @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. */
+@utility era-ink-center {
+	padding-bottom: 0.08em;
+}
+
 /* 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.
  *
@@ -299,8 +305,9 @@
  * 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). */
+ * caps-or-digits label in a fixed-height box, CENTRED horizontally and with no
+ * icon sibling. For a left-aligned sentence-case label use era-label-ink; when
+ * an icon really must sit beside the text, see the note there. */
 @utility era-token-ink {
 	display: block;
 	align-content: center;
@@ -309,8 +316,39 @@
 	text-box: trim-both cap alphabetic;
 }
 
-@utility era-ink-center {
-	padding-bottom: 0.08em;
+/* LABEL INK — era-token-ink's mixed-case sibling, and the general answer to
+ * "this fixed-height control holds one line of text".
+ *
+ * Same mechanism, same reason: `text-box-trim` needs a BLOCK box, so the row
+ * becomes one and `align-content` (block-container alignment) does the
+ * centring. What differs is the band and the alignment, because the content
+ * class differs — a label is sentence case, so the x-height band is the visual
+ * mass to centre (cap-band reads low on "System"), and it is laid out against
+ * the row's padding rather than centred in it.
+ *
+ * WHY IT EXISTS AT ALL: era's controls are flex, and a flex container's bare
+ * text is an ANONYMOUS flex item — a box no selector reaches and no
+ * non-inherited property touches. So `era-text-trim` on a flex row is inert,
+ * contributing only its `line-height: 1`, and the ink falls back to line-box
+ * centring by font metrics. era-token-ink already fixed that for centred
+ * tokens; this fixes it for everything else.
+ *
+ * THE ICON CASE IS NOT SOLVED, and cannot be from CSS: an icon beside the text
+ * needs the box to stay flex, which re-creates the anonymous item. A component
+ * whose children are an opaque slot therefore guards it —
+ * `not-has-[svg]:era-label-ink` — and ink-centres the text-only case while
+ * leaving the icon case on line-box centring. Splitting icon and label into
+ * separate slots is what would close it; typography/inert-trim reports every
+ * site still on the fallback.
+ *
+ * @use the ink centring for a fixed-height control holding ONE line of
+ * sentence-case text and no icon — a menu item, a nav trigger, a button label.
+ * Never alongside `truncate` (the trimmed box becomes the clip). */
+@utility era-label-ink {
+	display: block;
+	align-content: center;
+	line-height: 1;
+	text-box: trim-both ex alphabetic;
 }
 
 /* In-progress text shimmer — a bright sweep through muted text (the standard

package/dist/ui/bar/bar.svelte

@@ -10,7 +10,7 @@
 	// 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 era-text-trim',
+		base: 'flex items-center leading-none',
 		variants: {
 			size: {
 				chip: 'h-(--era-h-chip) rounded-(--era-rd-chip)',

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

@@ -44,7 +44,7 @@ export declare const barVariants: import("tailwind-variants").TVReturnType<{
         true: "shrink-0 rounded-t-none rounded-b-(--era-rd-control) [box-shadow:0_1px_0_var(--color-divider-faded)]";
         false: "";
     };
-}, undefined, "flex items-center era-text-trim", {
+}, undefined, "flex items-center leading-none", {
     size: {
         chip: "h-(--era-h-chip) rounded-(--era-rd-chip)";
         control: "h-(--era-h-control) rounded-(--era-rd-control)";

package/dist/ui/button/button.svelte

@@ -70,7 +70,18 @@
 		and they separated on press. Wrapping unifies them, and `gap: inherit`
 		forwards the button's own gap so the icon/label spacing is unchanged.
 	-->
-	<span data-button-content class="inline-flex items-center justify-center [gap:inherit]">
+	<!--
+		not-has-[svg]:era-label-ink — a text-only button ink-centres its label.
+		The span is otherwise a flex box, and a flex box's bare text is an
+		ANONYMOUS item that `text-box-trim` can never reach, so the label fell back
+		to line-box centring by font metrics (the bug era-label-ink documents).
+		With an icon present the box must stay flex for the gap, and that case is
+		still on the fallback — typography/inert-trim reports it.
+	-->
+	<span
+		data-button-content
+		class="inline-flex items-center justify-center [gap:inherit] not-has-[svg]:era-label-ink"
+	>
 		{#if loading}
 			<LoaderCircle class="size-(--era-h-icon) shrink-0 animate-spin" aria-hidden="true" />
 			{#if loadingLabel}<span class="sr-only">{loadingLabel}</span>{/if}