@signal9/era-ui 4.15.4 → 4.16.0

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

@@ -39,6 +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; see era-text-trim-caps for ALL-CAPS strings.
 - `truncate` — single-line horizontal truncation with an ellipsis — safe inside a trimmed or leading-none row; 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 use it for mixed-case text.
+- `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-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-*).
@@ -147,6 +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; see era-text-trim-caps for ALL-CAPS strings. |
 | `truncate` | single-line horizontal truncation with an ellipsis — safe inside a trimmed or leading-none row; 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 use it for mixed-case text. |
+| `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-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-*). |
@@ -331,6 +333,37 @@ 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 — measured: ((asc − desc) − x-height)/2 = 0.120em on the mono and sans
+stacks, 0.105em on serif — so a field's text sat visibly below the trimmed
+label right beside it in the same bar.
+
+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.23em;
+}
+```
+
 ## era-shimmer
 
 **Use it for:** the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text.

package/dist/generated-docs/llms.txt

@@ -43,6 +43,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; see era-text-trim-caps for ALL-CAPS strings.
 - `truncate` — single-line horizontal truncation with an ellipsis — safe inside a trimmed or leading-none row; 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 use it for mixed-case text.
+- `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-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": 5333,
+      "tokenEstimate": 5715,
       "sections": [
         "Overview",
         "era-interactive",
@@ -53,6 +53,7 @@
         "era-text-trim",
         "truncate",
         "era-text-trim-caps",
+        "era-ink-center",
         "era-shimmer",
         "era-collapse",
         "h-xs · h-xxs · h-sm · h-md · h-lg",
@@ -1021,6 +1022,16 @@
       "description": "ALL-CAPS single-line text (kbd hints, acronym badges): the x-height band\nmisjudges caps-only strings — cap/alphabetic edges are the right box.",
       "css": "@utility era-text-trim-caps {\n\tline-height: 1;\n\ttext-box: trim-both cap alphabetic;\n}"
     },
+    {
+      "name": "era-ink-center",
+      "names": [
+        "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 — measured: ((asc − desc) − x-height)/2 = 0.120em on the mono and sans\nstacks, 0.105em on serif — so a field's text sat visibly below the trimmed\nlabel right beside it in the same bar.\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.23em;\n}"
+    },
     {
       "name": "era-shimmer",
       "names": [

package/dist/generated-docs/utilities.json

@@ -60,6 +60,16 @@
       "description": "ALL-CAPS single-line text (kbd hints, acronym badges): the x-height band\nmisjudges caps-only strings — cap/alphabetic edges are the right box.",
       "css": "@utility era-text-trim-caps {\n\tline-height: 1;\n\ttext-box: trim-both cap alphabetic;\n}"
     },
+    {
+      "name": "era-ink-center",
+      "names": [
+        "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 — measured: ((asc − desc) − x-height)/2 = 0.120em on the mono and sans\nstacks, 0.105em on serif — so a field's text sat visibly below the trimmed\nlabel right beside it in the same bar.\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.23em;\n}"
+    },
     {
       "name": "era-shimmer",
       "names": [

package/dist/generated-docs/utilities.md

@@ -44,6 +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; see era-text-trim-caps for ALL-CAPS strings. |
 | `truncate` | single-line horizontal truncation with an ellipsis — safe inside a trimmed or leading-none row; 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 use it for mixed-case text. |
+| `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-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-*). |
@@ -228,6 +229,37 @@ 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 — measured: ((asc − desc) − x-height)/2 = 0.120em on the mono and sans
+stacks, 0.105em on serif — so a field's text sat visibly below the trimmed
+label right beside it in the same bar.
+
+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.23em;
+}
+```
+
 ## era-shimmer
 
 **Use it for:** the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text.

package/dist/styles/index.css

@@ -196,6 +196,31 @@
 	text-box: trim-both cap alphabetic;
 }
 
+/* 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 — measured: ((asc − desc) − x-height)/2 = 0.120em on the mono and sans
+ * stacks, 0.105em on serif — so a field's text sat visibly below the trimmed
+ * label right beside it in the same bar.
+ *
+ * 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.
+ *
+ * @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.23em;
+}
+
 /* In-progress text shimmer — a bright sweep through muted text (the standard
  * "working…" label treatment in streaming UIs). Timing derives from the motion
  * axis (10× --era-duration ≈ 1.5s at normal, 2.6s at extra); at instant the

package/dist/ui/combobox/combobox-input.svelte

@@ -11,8 +11,8 @@
 	data-input-field
 	class={cn(
 		inputVariants(),
-		// The open list is docked to the field, so the seam between them opens up.
-		'data-[state=open]:rounded-b-none data-[state=open]:shadow-(--era-shadow-pressed)',
+		// era-ink-center: the same font-box-vs-ink correction Input documents.
+		'era-ink-center data-[state=open]:rounded-b-none data-[state=open]:shadow-(--era-shadow-pressed)',
 		className
 	)}
 	{...restProps}

package/dist/ui/input/input.svelte

@@ -36,9 +36,12 @@
 
 	// No era-text-trim on the <input> itself, in either branch: an <input> clips to
 	// a UA-owned inner editor box that IS the trimmed line box, so the trim slices
-	// the ascenders and descenders off what you type (a "d" renders as an "o"). The
-	// fixed tier height centres the text on its own. See styles/index.css.
-	const textClass = 'text-body text-fg placeholder:text-muted';
+	// the ascenders and descenders off what you type (a "d" renders as an "o").
+	// era-ink-center is the editable's substitute — the tier height centres the
+	// FONT BOX, which parks the visible band ~0.115em low (the stacks' ascent far
+	// outweighs their descent), and the padding lift re-centres the ink itself.
+	// See styles/index.css.
+	const textClass = 'text-body text-fg placeholder:text-muted era-ink-center';
 
 	// The marker says WHICH field this is, not just that it is one. `bare` and
 	// `reveal` both render chrome-less at rest, so a test that only sees "no

package/dist/ui/pin-input/pin-input-cell.svelte

@@ -20,7 +20,10 @@
 	{...restProps}
 >
 	{#if cell.char !== null}
-		<div>{cell.char}</div>
+		<!-- era-text-trim-caps, the numerals/caps variant: an OTP glyph is a digit
+		     or a capital, and the x-height band misjudges both. On the CHAR, not
+		     the cell — the cell is a flex box whose own line boxes hold no ink. -->
+		<div class="era-text-trim-caps">{cell.char}</div>
 	{/if}
 	{#if cell.hasFakeCaret}
 		<div class="pointer-events-none absolute inset-0 flex items-center justify-center">

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "4.15.4",
+	"version": "4.16.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",