@signal9/era-ui 4.12.0 → 4.12.1

package/dist/dev/audit/audits/index.d.ts

@@ -5,9 +5,10 @@ import { flatChrome } from './flat-chrome.js';
 import { iconFlush } from './icon-flush.js';
 import { offAxisMotion } from './off-axis-motion.js';
 import { offTierHeight } from './off-tier-height.js';
+import { pillHoldsItsInk } from './pill-holds-its-ink.js';
 import { radiusConcentricity } from './radius-concentricity.js';
 import { restingGap } from './resting-gap.js';
 import { singleGlyphSquare } from './single-glyph-square.js';
 import { uniformSiblingGaps } from './uniform-sibling-gaps.js';
 import { wallMatchesGap } from './wall-matches-gap.js';
-export { clippedGlyphs, collapsedTextTrim, concentricInset, flatChrome, iconFlush, offAxisMotion, offTierHeight, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };
+export { clippedGlyphs, collapsedTextTrim, concentricInset, flatChrome, iconFlush, offAxisMotion, offTierHeight, pillHoldsItsInk, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };

package/dist/dev/audit/audits/index.js

@@ -6,12 +6,13 @@ import { flatChrome } from './flat-chrome.js';
 import { iconFlush } from './icon-flush.js';
 import { offAxisMotion } from './off-axis-motion.js';
 import { offTierHeight } from './off-tier-height.js';
+import { pillHoldsItsInk } from './pill-holds-its-ink.js';
 import { radiusConcentricity } from './radius-concentricity.js';
 import { restingGap } from './resting-gap.js';
 import { singleGlyphSquare } from './single-glyph-square.js';
 import { uniformSiblingGaps } from './uniform-sibling-gaps.js';
 import { wallMatchesGap } from './wall-matches-gap.js';
-export { clippedGlyphs, collapsedTextTrim, concentricInset, flatChrome, iconFlush, offAxisMotion, offTierHeight, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };
+export { clippedGlyphs, collapsedTextTrim, concentricInset, flatChrome, iconFlush, offAxisMotion, offTierHeight, pillHoldsItsInk, radiusConcentricity, restingGap, singleGlyphSquare, uniformSiblingGaps, wallMatchesGap };
 // Auto-register built-ins. Consumers can still unregister or add their own.
 //
 // Two of these only tell the truth on a particular axis setting, because the bug
@@ -27,6 +28,7 @@ registry.register(flatChrome);
 registry.register(iconFlush);
 registry.register(offAxisMotion);
 registry.register(offTierHeight);
+registry.register(pillHoldsItsInk);
 registry.register(radiusConcentricity);
 registry.register(restingGap);
 registry.register(singleGlyphSquare);

package/dist/dev/audit/audits/pill-holds-its-ink.d.ts

@@ -0,0 +1,2 @@
+import type { Audit } from '../types.js';
+export declare const pillHoldsItsInk: Audit;

package/dist/dev/audit/audits/pill-holds-its-ink.js

@@ -0,0 +1,53 @@
+import { BOUNDED_TIER_MAX } from '../../measure.js';
+import { paintsChrome } from './_helpers.js';
+/*
+ * A pill's background must be at least as wide as its ink.
+ *
+ * A badge or chip is sized BY its text — it has no slack to surrender — so when
+ * a flex ancestor squeezes it, the only thing that can give is the fill: the
+ * background narrows and the label bleeds past one or both rounded ends. The
+ * class string is identical squeezed and unsqueezed, which is why this is a
+ * runtime law and not a lint rule: only the rendered box can tell you.
+ *
+ * The tell is scrollWidth: content wider than the padding box, on an element
+ * that paints chrome and does NOT clip. An element that clips (Tool.Chip's
+ * truncating label, KV's squared key cell) has chosen the sanctioned answer to
+ * tightness — box holds, text truncates — and is exempt here (its failure mode
+ * is vertical, and typography/clipped-glyphs owns that).
+ *
+ * Bounded heights only: this is a law about tier-sized pills and controls. An
+ * unbounded container that "overflows" horizontally is a scroll region.
+ */
+export const pillHoldsItsInk = {
+    id: 'layout/pill-holds-its-ink',
+    name: 'Pill background holds its ink',
+    description: 'A chrome-painting, non-clipping element must be at least as wide as its content — squeezed pills slide the fill out from under the label.',
+    category: 'layout',
+    severity: 'error',
+    selector: '*',
+    check(el) {
+        const s = getComputedStyle(el);
+        if (s.overflowX !== 'visible')
+            return null; // clipping = the sanctioned fix
+        // An absolutely-positioned element is outside flex/grid layout, so nothing
+        // can squeeze it — its scrollWidth quirks (a slider thumb reports one) are
+        // not this bug.
+        if (s.position === 'absolute' || s.position === 'fixed')
+            return null;
+        if (!paintsChrome(el))
+            return null;
+        const h = el.getBoundingClientRect().height;
+        if (h === 0 || h > BOUNDED_TIER_MAX)
+            return null;
+        const bleed = el.scrollWidth - el.clientWidth;
+        if (bleed <= 1)
+            return null; // sub-pixel rounding
+        const issue = {
+            auditId: 'layout/pill-holds-its-ink',
+            element: el,
+            message: `ink is ${bleed}px wider than the pill that carries it (${el.scrollWidth} in ${el.clientWidth}) — a flex ancestor squeezed it; add shrink-0, or truncate an inner span if it must fit`,
+            details: { scrollWidth: el.scrollWidth, clientWidth: el.clientWidth, bleed }
+        };
+        return issue;
+    }
+};

package/dist/ui/badge/badge.svelte

@@ -5,7 +5,13 @@
 		// min-w matches height (design rule #5): a single glyph — a count, a
 		// keycap letter — renders as a perfect square/circle instead of a
 		// skinny pill; wider content is unaffected.
-		base: 'inline-flex h-(--era-h-xxs) min-w-(--era-h-xxs) items-center justify-center gap-(--era-gap) rounded-(--era-rd-xxs) px-(--era-pill-xxs) font-mono text-body leading-none has-[svg]:gap-(--era-inset-xxs) era-text-trim',
+		//
+		// shrink-0 + whitespace-nowrap: a pill IS its text's size — it has no slack
+		// to give up, so letting a flex ancestor squeeze it just slid the background
+		// 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',
 		variants: {
 			tone: {
 				default: 'bg-hover 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) items-center justify-center gap-(--era-gap) rounded-(--era-rd-xxs) px-(--era-pill-xxs) font-mono text-body leading-none 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", {
     tone: {
         default: "bg-hover text-fg";
         accent: "bg-primary text-primary-fg";

package/dist/ui/button-group/button-group.svelte

@@ -19,7 +19,10 @@
 <div
 	bind:this={ref}
 	class={cn(
-		'flex gap-(--era-xs-inset-sm)',
+		// shrink-0: a segmented control is its buttons' width — Badge/Chip's law
+		// one tier up. Squeezed, its rounded fill slid out from under the end
+		// buttons (measured 4px at touch on the board).
+		'flex shrink-0 gap-(--era-xs-inset-sm)',
 		orientation === 'vertical'
 			? 'flex-col items-stretch p-(--era-xs-inset-sm) [&>*]:justify-start'
 			: 'items-center',

package/dist/ui/chip/chip.svelte

@@ -11,7 +11,9 @@
 	//                   select trigger): h-xxs = sp + 10, leaving the 3/5/7
 	//                   concentric gap so it sits evenly inset, not cramped.
 	export const chipVariants = tv({
-		base: 'inline-flex items-center bg-hover font-mono text-body leading-none text-fg shadow-(--era-shadow) era-text-trim',
+		// shrink-0 + nowrap for the same reason Badge carries them: the pill is
+		// already exactly its text's size, so any squeeze puts ink outside the fill.
+		base: 'inline-flex shrink-0 items-center bg-hover font-mono text-body leading-none whitespace-nowrap text-fg shadow-(--era-shadow) era-text-trim',
 		variants: {
 			size: {
 				sm: 'h-(--era-h-sm) min-w-(--era-h-sm) rounded-(--era-rd-sm) pl-(--era-pill-sm)',

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

@@ -7,7 +7,7 @@ export declare const chipVariants: import("tailwind-variants").TVReturnType<{
         true: "";
         false: "";
     };
-}, undefined, "inline-flex items-center bg-hover font-mono text-body leading-none text-fg shadow-(--era-shadow) era-text-trim", {
+}, undefined, "inline-flex shrink-0 items-center bg-hover font-mono text-body leading-none whitespace-nowrap text-fg shadow-(--era-shadow) era-text-trim", {
     size: {
         sm: "h-(--era-h-sm) min-w-(--era-h-sm) rounded-(--era-rd-sm) pl-(--era-pill-sm)";
         xxs: "h-(--era-h-xxs) min-w-(--era-h-xxs) rounded-(--era-rd-xxs) pl-(--era-pill-xxs)";

package/dist/ui/command-bar/command-bar.svelte

@@ -207,7 +207,14 @@
 	     itself by the font's own metrics. The input and the ghost mirror BOTH inherit
 	     it, so they centre by the identical mechanism — no native-input-centering vs
 	     flex-centering divergence that reads as the ghost sitting a hair high. -->
-	<div class="relative h-full min-w-0 flex-1 text-body leading-(--era-h-md) text-bright">
+	<!-- overflow-hidden: the transparent <input> clips its text natively, but the
+	     MIRROR that actually paints it did not — so in a host narrower than the
+	     prompt line (placeholder included), the text bled past the bar's rounded
+	     end where any real input would clip. Safe with the line-height centring:
+	     the box is the bar's full h-md, well above the ink (clipped-glyphs' law). -->
+	<div
+		class="relative h-full min-w-0 flex-1 overflow-hidden text-body leading-(--era-h-md) text-bright"
+	>
 		<!-- Transparent input: it owns editing and the caret only, so the visible text
 		     can come entirely from the mirror below (see it for why). Everything but
 		     the see-through fill is inherited: font + line-height from the container,

package/dist/ui/kv/kv.svelte

@@ -21,7 +21,10 @@
 <span
 	bind:this={ref}
 	class={cn(
-		'inline-flex h-(--era-h-xxs) items-center overflow-hidden rounded-(--era-rd-xxs) bg-hover font-mono text-body era-text-trim leading-none shadow-(--era-shadow)',
+		// shrink-0 + nowrap like Badge/Chip: the overflow-hidden here is for the
+		// key cell's squared corners, not a licence to crush — squeezed, this pill
+		// clipped its value instead of bleeding it, which is quieter but no truer.
+		'inline-flex h-(--era-h-xxs) shrink-0 items-center overflow-hidden rounded-(--era-rd-xxs) bg-hover font-mono text-body era-text-trim leading-none whitespace-nowrap shadow-(--era-shadow)',
 		className
 	)}
 	{...restProps}

package/package.json

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