@signal9/era-ui 2.27.0 → 2.27.1

package/dist/dev/audit/audits/collapsed-text-trim.js

@@ -2,37 +2,65 @@
  * The chopped-text bug.
  *
  * `era-text-trim` centres the ink by trimming the line box down to the x-height
- * band (text-box: trim-both ex alphabetic). That is exactly right on a control
- * with a FIXED height — the tier holds the box open and the trim only re-centres
- * what is inside it.
+ * band (text-box: trim-both ex alphabetic). It has two failure modes, and they
+ * are NOT the same check — the first one is why the Input shipped with every
+ * ascender sliced off the text you typed while this audit sat here reporting
+ * nothing.
  *
- * Put the same utility on an AUTO-height element that also clips its overflow
- * (`truncate`, `overflow-hidden`, an <input>) and the box collapses to the
- * ~7.5px x-height band. The clip then slices every ascender, cap and descender
- * off the glyphs, and the text renders as a chopped middle stripe.
+ * 1. NATIVE EDITABLES (<input>, <textarea>, <select>).
+ *    A fixed height does NOT make these safe. The UA lays out an inner editor
+ *    box and clips to IT, and that inner box is the trimmed line box — so the
+ *    trim collapses it to the x-height band no matter how tall the control is,
+ *    and the glyphs lose their tops and tails ("d" renders as "o"). The
+ *    element's own height therefore says nothing about whether it is broken:
+ *    the trim being ACTIVE is the whole defect. These elements also hold their
+ *    text in `value`, not in textContent, which is the other reason the old
+ *    height-and-textContent check could never fire on them.
  *
- * The tell is unmistakable in the geometry: a box shorter than its own font-size
- * that is still clipping. No static check can see it — whether the box collapses
- * depends on whether some OTHER class set a height.
+ * 2. AUTO-HEIGHT CLIPPING ELEMENTS (a `truncate` child, overflow-hidden with no
+ *    height). Nothing holds the box open, so it collapses to the ~7.5px band and
+ *    the clip chops the glyphs into a middle stripe. Here the tell IS geometric:
+ *    a box shorter than its own font-size that is still clipping. A FIXED-height
+ *    non-editable box is fine — the ink overflows the trimmed LINE box but stays
+ *    inside the padding box, which is what clips.
  */
+const EDITABLE = 'input, textarea, select';
+/** The trim, as the browser actually resolved it. Chromium exposes the longhand. */
+function activeTrim(s) {
+    const trim = s.getPropertyValue('text-box-trim').trim() || s.getPropertyValue('text-box').trim();
+    if (!trim || trim === 'none' || trim === 'normal')
+        return null;
+    return trim;
+}
 export const collapsedTextTrim = {
     id: 'typography/collapsed-text-trim',
     name: 'Trimmed text box has not collapsed',
-    description: 'era-text-trim on an auto-height element that clips overflow collapses the box to the x-height band, slicing the tops and tails off the glyphs.',
+    description: 'era-text-trim clips the glyphs when it lands on a native editable (any height) or on an auto-height element that clips its overflow.',
     category: 'layout',
     severity: 'error',
     selector: '*',
     check(el) {
         const s = getComputedStyle(el);
-        // Is the trim active on this element? Chromium exposes the longhand.
-        const trim = s.getPropertyValue('text-box-trim').trim() || s.getPropertyValue('text-box').trim();
-        if (!trim || trim === 'none' || trim === 'normal')
+        const trim = activeTrim(s);
+        if (!trim)
             return null;
-        // Is it clipping?
+        // (1) A native editable is broken by the trim at ANY height — it clips to the
+        // trimmed inner editor box. No geometry test, and no textContent test: an
+        // input's text lives in `value`, and an EMPTY input is just as broken, it
+        // simply has nothing to chop yet.
+        if (el.matches(EDITABLE)) {
+            const issue = {
+                auditId: 'typography/collapsed-text-trim',
+                element: el,
+                message: `text-box trim (${trim}) on a <${el.tagName.toLowerCase()}> — a native editable clips to the trimmed inner editor box, so the text you type loses its ascenders and descenders ("d" renders as "o"). Drop the trim; the tier height centres it.`,
+                details: { trim, tag: el.tagName.toLowerCase() }
+            };
+            return issue;
+        }
+        // (2) Everything else: only a collapsed, clipping box is a defect.
         const clips = /hidden|clip|auto|scroll/.test(s.overflowX + s.overflowY);
         if (!clips)
             return null;
-        // Does it hold any text of its own?
         if (!el.textContent?.trim())
             return null;
         const h = el.getBoundingClientRect().height;

package/dist/styles/index.css

@@ -101,20 +101,29 @@
  * Where text-box is supported it fully determines the box, so the two
  * declarations never fight. Worst-case residual: 0.44px.
  *
- * The one hard rule concerns overflow clipping, and it is HEIGHT-conditional.
- * On an AUTO-height element that also clips — a `truncate` child, a
- * <textarea>, an auto-height <input> — trim-both collapses the box to the
- * x-height band (~7.5px at 14px) and the clip slices off every ascender, cap,
- * and descender (text renders as a chopped middle stripe): NEVER do that.
- * A FIXED-height control is the intended home, and is safe: the explicit
- * `h-(--era-*)` overrides the collapse, so a single-line <input> (Input,
- * command-input) and clipping display tokens (KV) correctly carry it. For
- * truncating text, put the trim on the fixed-height ROW and let the child
- * center via the row's items-center.
+ * The hard rules concern overflow clipping, and there are TWO of them.
  *
- * @use vertically center single-line control text (a label beside an icon, an
- * input's own text) without a translateY nudge — fixed-height elements only;
- * see era-text-trim-caps for ALL-CAPS strings.
+ * 1. NEVER on a NATIVE EDITABLE — <input>, <textarea>, <select>. These clip to
+ *    a UA-owned inner editor box that IS the trimmed line box, so a fixed
+ *    height does NOT hold it open: whatever you type gets its ascenders and
+ *    descenders sliced off (a "d" renders as an "o"). This rule used to read
+ *    the other way round — it claimed a fixed-height <input> was the trim's
+ *    intended home — and the Input component shipped chopped text as a result.
+ *    A tier-height input centres its own text; it needs no trim.
+ *
+ * 2. NEVER on an AUTO-height element that clips — a `truncate` child, an
+ *    auto-height box with overflow-hidden. With no height to hold it open the
+ *    box collapses to the x-height band (~7.5px at 14px) and the clip chops the
+ *    glyphs into a middle stripe. Put the trim on the fixed-height ROW instead
+ *    and let the child centre via the row's items-center.
+ *
+ * A fixed-height NON-editable element is the safe home: the ink overflows the
+ * trimmed LINE box but stays inside the padding box, which is what actually
+ * clips. Both rules are enforced at runtime by typography/collapsed-text-trim.
+ *
+ * @use 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.
  */
 @utility era-text-trim {
 	line-height: 1;

package/dist/ui/input/input.svelte

@@ -16,7 +16,11 @@
 	bind:this={ref}
 	bind:value
 	class={cn(
-		'flex h-(--era-h-md) w-full era-interactive rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-inset-md) text-body era-text-trim text-fg shadow-(--era-shadow-well) placeholder:text-muted hover:bg-(--era-highlight) focus:bg-(--era-highlight)',
+		// No era-text-trim here: 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 the utility's note in styles/index.css.
+		'flex h-(--era-h-md) w-full era-interactive rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-inset-md) text-body text-fg shadow-(--era-shadow-well) placeholder:text-muted hover:bg-(--era-highlight) focus:bg-(--era-highlight)',
 		className
 	)}
 	{...restProps}

package/package.json

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