@signal9/era-ui 4.3.0 → 4.3.2

package/dist/styles/themes.css

@@ -391,11 +391,17 @@
 /* -------------------------------------------------- */
 /* Signalnine — dark (Tomorrow, measured)             */
 /*                                                    */
-/* The classic imageboard dark theme. Every gray and   */
-/* every accent below is Tomorrow Night's own value,   */
-/* converted to OKLCH — the scale reproduces its       */
-/* background, current-line, selection, comment and    */
-/* foreground exactly at steps 1, 2, 3, 8 and 11.      */
+/* The classic imageboard dark theme. The accents and   */
+/* the upper scale are Tomorrow Night's own values,     */
+/* converted to OKLCH — comment and foreground land     */
+/* exactly at steps 8 and 11.                           */
+/*                                                      */
+/* The DARK END is deliberately deeper than Tomorrow's. */
+/* Its #1d1f21 page read light next to era's other dark */
+/* themes, so the floor is the default theme's page      */
+/* plus a hair and steps 2-7 re-space from there. The    */
+/* identity lives in the greys' hue and the accents, not */
+/* in the exact page value.                              */
 /*                                                     */
 /* This replaces a scale that lurched warm through the  */
 /* middle so borders read faintly red against cold      */
@@ -413,17 +419,21 @@
 [data-theme='signalnine'].dark {
 	color-scheme: dark;
 
-	--color-1: oklch(0.238 0.005 248); /* #1d1f21  background */
-	--color-2: oklch(0.285 0.008 264); /* #282a2e  current line */
-	--color-3: oklch(0.351 0.012 258); /* #373b41  selection */
-	--color-4: oklch(0.405 0.012 258);
-	--color-5: oklch(0.46 0.011 257);
+	/* The floor is era's default-dark page (0.162) plus a hair, not Tomorrow's
+	 * own #1d1f21 — that read too light beside the other dark themes. Everything
+	 * from step 2 up re-spaces evenly from the new floor to the comment anchor,
+	 * so lowering the page did not leave a cliff between it and the panels. */
+	--color-1: oklch(0.168 0.005 248); /* #0d0f11 */
+	--color-2: oklch(0.225 0.007 258); /* #1a1c1f */
+	--color-3: oklch(0.29 0.01 258); /* #282c30 */
+	--color-4: oklch(0.355 0.011 258); /* #383c42 */
+	--color-5: oklch(0.435 0.011 257);
 	--color-6: oklch(0.515 0.01 256);
-	--color-7: oklch(0.57 0.009 255);
-	--color-8: oklch(0.677 0.006 200); /* #939899  comment */
+	--color-7: oklch(0.596 0.009 255);
+	--color-8: oklch(0.677 0.006 200); /* #939899  Tomorrow comment */
 	--color-9: oklch(0.73 0.005 190);
 	--color-10: oklch(0.78 0.005 180);
-	--color-11: oklch(0.83 0.004 157); /* #c5c8c6  foreground */
+	--color-11: oklch(0.83 0.004 157); /* #c5c8c6  Tomorrow foreground */
 	--color-12: oklch(0.9 0.004 157);
 
 	/* Border sits a step LOWER than the usual 5. Tomorrow's own rules are
@@ -432,7 +442,7 @@
 	 * page, inside the 1.7–3.2 the other dark themes hold. */
 	--color-border: var(--color-4);
 	--color-surface: var(--color-2);
-	--color-hover: oklch(0.32 0.011 260);
+	--color-hover: oklch(0.255 0.009 258);
 	--color-fg: var(--color-11);
 	--color-bright: var(--color-12);
 	/* Tomorrow's comment grey, which is what it uses for de-emphasised text. */
@@ -443,14 +453,14 @@
 	/* Tomorrow's accents, unmodified. They are pastels, so each takes DARK text
 	 * — the page colour — rather than white. */
 	--color-primary: oklch(0.6975 0.0551 244.3); /* #81a2be  blue */
-	--color-primary-fg: oklch(0.238 0.005 248);
+	--color-primary-fg: oklch(0.168 0.005 248);
 	--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
 	--color-destructive: oklch(0.6308 0.1298 21.4); /* #cc6666  red */
-	--color-destructive-fg: oklch(0.238 0.005 248);
+	--color-destructive-fg: oklch(0.168 0.005 248);
 	--color-success: oklch(0.7733 0.1095 113.4); /* #b5bd68  green */
-	--color-success-fg: oklch(0.238 0.005 248);
+	--color-success-fg: oklch(0.168 0.005 248);
 	--color-warning: oklch(0.8462 0.1115 82.9); /* #f0c674  yellow */
-	--color-warning-fg: oklch(0.238 0.005 248);
+	--color-warning-fg: oklch(0.168 0.005 248);
 }
 
 /* Signalnine — light (yahoo.co.jp, measured)         */

package/dist/ui/button/variants.js

@@ -71,6 +71,15 @@ export const buttonVariants = tv({
         // the box: sp+4 in xxs (pad 3), sp+2 in xs/icon (pad 2). Scoped to icon:true
         // so text+icon buttons keep their h-xs glyph. The descendant selector
         // outranks the consumer's own size-* on the svg, so no call site changes.
+        //
+        // default/sm were DESCRIBED by the comment above but had no rule, so an
+        // icon button at either size fell through to Lucide's own 24px default
+        // unless the call site happened to pass a size class. That is how the
+        // notes "new note" button rendered a 24px glyph in a 24px box — flush,
+        // no padding at all. Stating them makes the documented intent real and
+        // removes the dependency on every call site remembering.
+        { icon: true, size: 'default', class: '[&_svg]:size-(--era-h-xs)' },
+        { icon: true, size: 'sm', class: '[&_svg]:size-(--era-h-xs)' },
         { icon: true, size: 'xxs', class: '[&_svg]:size-(--era-icon-xxs)' },
         { icon: true, size: 'xs', class: '[&_svg]:size-(--era-icon-xs)' },
         { icon: true, size: 'icon', class: '[&_svg]:size-(--era-icon-xs)' },

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

@@ -1,14 +1,18 @@
 <script lang="ts">
 	import { Combobox } from 'bits-ui';
 	import { cn } from '../../utils/index.js';
+	import { inputVariants } from '../input/variants.js';
 
 	let { ref = $bindable(null), class: className, ...restProps }: Combobox.InputProps = $props();
 </script>
 
 <Combobox.Input
 	bind:ref
+	data-input-field
 	class={cn(
-		'flex h-(--era-h-md) w-full era-interactive rounded-(--era-rd-md) bg-(--era-field-bg) px-(--era-field-px) text-body text-fg shadow-(--era-shadow-well) placeholder:text-muted hover:bg-(--era-highlight) focus:bg-(--era-highlight) data-[state=open]:rounded-b-none data-[state=open]:shadow-(--era-shadow-pressed)',
+		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)',
 		className
 	)}
 	{...restProps}

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

@@ -2,7 +2,7 @@
 	import { Command } from 'bits-ui';
 	import type { Component } from 'svelte';
 	import type { IconProps } from '@lucide/svelte';
-	import { cn } from '../../utils/index.js';
+	import Input from '../input/input.svelte';
 
 	let {
 		ref = $bindable(null),
@@ -16,30 +16,20 @@
 	} = $props();
 </script>
 
-{#if icon}
-	{@const Icon = icon}
-	<div
-		class={cn(
-			'flex h-(--era-h-md) w-full era-interactive items-center gap-(--era-gap) rounded-(--era-rd-md) bg-(--era-field-bg) px-(--era-field-px) text-body era-text-trim text-fg shadow-(--era-shadow-well) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight)',
-			className
-		)}
-	>
-		<Icon class="size-(--era-h-xs) shrink-0 text-muted" />
-		<Command.Input
-			bind:ref
-			bind:value
-			class="h-full w-full bg-transparent text-fg outline-none placeholder:text-muted"
-			{...restProps}
-		/>
-	</div>
-{:else}
-	<Command.Input
-		bind:ref
-		bind:value
-		class={cn(
-			'flex h-(--era-h-md) w-full era-interactive rounded-(--era-rd-md) bg-(--era-field-bg) px-(--era-field-px) text-body text-fg shadow-(--era-shadow-well) placeholder:text-muted hover:bg-(--era-highlight) focus:bg-(--era-highlight)',
-			className
-		)}
-		{...restProps}
-	/>
-{/if}
+<!--
+	The search line of a command palette is a plain era Input, so this renders the
+	real component instead of a copy of its classes. It used to restate the whole
+	field chrome AND re-implement the icon branch — a second Input in all but
+	name, free to drift from the first, which it had.
+
+	`child` is what makes the delegation possible: bits hands us its behaviour as
+	props (the combobox roles, the active-descendant wiring, the ref attachment)
+	and we spread them onto our own element. `value` is bound in both places on
+	purpose — bits does not bind it for us in the child branch, so the Input's
+	binding is what feeds the palette's search state.
+-->
+<Command.Input bind:ref bind:value {...restProps}>
+	{#snippet child({ props })}
+		<Input bind:value {icon} class={className} {...props} />
+	{/snippet}
+</Command.Input>

package/dist/ui/date-field/date-field-input.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
 	import { DateField } from 'bits-ui';
 	import { cn } from '../../utils/index.js';
+	import { inputVariants } from '../input/variants.js';
 
 	let { ref = $bindable(null), class: className, ...restProps }: DateField.InputProps = $props();
 </script>
 
 <DateField.Input
 	bind:ref
+	data-input-field
 	class={cn(
-		'flex h-(--era-h-md) w-full items-center rounded-(--era-rd-md) bg-(--era-field-bg) px-(--era-field-px) text-body text-fg shadow-(--era-shadow-well) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight) disabled:opacity-50 data-[invalid]:text-destructive',
+		inputVariants(),
+		'items-center disabled:opacity-50 data-[invalid]:text-destructive',
 		className
 	)}
 	{...restProps}

package/dist/ui/date-picker/date-picker-input.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
 	import { DatePicker } from 'bits-ui';
 	import { cn } from '../../utils/index.js';
+	import { inputVariants } from '../input/variants.js';
 
 	let { ref = $bindable(null), class: className, ...restProps }: DatePicker.InputProps = $props();
 </script>
 
 <DatePicker.Input
 	bind:ref
+	data-input-field
 	class={cn(
-		'flex h-(--era-h-md) w-full items-center rounded-(--era-rd-md) bg-(--era-field-bg) ps-(--era-inset-md) pe-(--era-px-md) text-body text-fg shadow-(--era-shadow-well) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight) disabled:opacity-50 data-[invalid]:text-destructive',
+		inputVariants({ pad: 'trailing' }),
+		'items-center disabled:opacity-50 data-[invalid]:text-destructive',
 		className
 	)}
 	{...restProps}

package/dist/ui/date-range-field/date-range-field-input.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { DateRangeField } from 'bits-ui';
 	import { cn } from '../../utils/index.js';
+	import { inputVariants } from '../input/variants.js';
 
 	let {
 		ref = $bindable(null),
@@ -11,8 +12,10 @@
 
 <DateRangeField.Input
 	bind:ref
+	data-input-field
 	class={cn(
-		'flex h-(--era-h-md) w-full items-center rounded-(--era-rd-md) bg-(--era-field-bg) px-(--era-field-px) text-body text-fg shadow-(--era-shadow-well) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight) disabled:opacity-50 data-[invalid]:text-destructive',
+		inputVariants(),
+		'items-center disabled:opacity-50 data-[invalid]:text-destructive',
 		className
 	)}
 	{...restProps}

package/dist/ui/date-range-picker/date-range-picker-input.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { DateRangePicker } from 'bits-ui';
 	import { cn } from '../../utils/index.js';
+	import { inputVariants } from '../input/variants.js';
 
 	let {
 		ref = $bindable(null),
@@ -11,8 +12,10 @@
 
 <DateRangePicker.Input
 	bind:ref
+	data-input-field
 	class={cn(
-		'flex h-(--era-h-md) items-center rounded-(--era-rd-md) bg-(--era-field-bg) ps-(--era-inset-md) pe-(--era-px-md) text-body text-fg shadow-(--era-shadow-well) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight) disabled:opacity-50 data-[invalid]:text-destructive',
+		inputVariants({ pad: 'trailing' }),
+		'items-center disabled:opacity-50 data-[invalid]:text-destructive',
 		className
 	)}
 	{...restProps}

package/dist/ui/input/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Input } from './input.svelte';
 export { default as Textarea } from './textarea.svelte';
+export { inputVariants } from './variants.js';

package/dist/ui/input/index.js

@@ -1,2 +1,5 @@
 export { default as Input } from './input.svelte';
 export { default as Textarea } from './textarea.svelte';
+// The field chrome itself, so a component that builds its own field composes
+// this rather than restating it. See variants.ts.
+export { inputVariants } from './variants.js';

package/dist/ui/input/input.svelte

@@ -1,42 +1,7 @@
-<script lang="ts" module>
-	import { cn, tv } from '../../utils/index.js';
-
-	/**
-	 * The field shell — the chrome an input paints, minus the text styling.
-	 *
-	 * Split out as a variant because an `icon` input has to move that chrome onto
-	 * a WRAPPER (the glyph and the <input> sit inside one field), while a plain
-	 * one keeps it on the <input> itself. Both spellings therefore have to
-	 * describe the same box, and a variant is how they stay one description.
-	 */
-	export const inputVariants = tv({
-		base: 'flex w-full era-interactive text-body text-fg',
-		variants: {
-			/**
-			 * `bare` drops the field chrome entirely — no fill, no well, no side
-			 * padding. For an input nested in a container that is ALREADY the field:
-			 * a Bar acting as a toolbar, a header row. Without it the input draws a
-			 * second box inside the first, and at the same tier it fills its parent
-			 * edge to edge so the two have no gap between them.
-			 */
-			bare: {
-				false:
-					'h-(--era-h-md) rounded-(--era-rd-md) bg-(--era-field-bg) px-(--era-field-px) shadow-(--era-shadow-well) hover:bg-(--era-highlight) focus-within:bg-(--era-highlight) focus:bg-(--era-highlight)',
-				// h-full, NOT the md tier: a bare input's container IS the field, so it
-				// takes that container's height. Keeping h-md here made a bare input
-				// inside an h-md Bar overflow it by the bar's border — a −0.5px gap,
-				// which is the even-gap law failing by a hair rather than obviously.
-				// Implies a parent with a definite height, which is the only place
-				// `bare` makes sense anyway.
-				true: 'h-full bg-transparent px-0 shadow-none'
-			}
-		},
-		defaultVariants: { bare: false }
-	});
-</script>
-
 <script lang="ts">
 	import type { Component } from 'svelte';
+	import { cn } from '../../utils/index.js';
+	import { inputVariants } from './variants.js';
 	import type { IconProps } from '@lucide/svelte';
 	import type { HTMLInputAttributes } from 'svelte/elements';
 
@@ -67,7 +32,15 @@
 	<!-- The chrome moves to the wrapper so the glyph sits INSIDE the field. The
 	     glyph is on the icon tier of the field's own height, and the gap between
 	     it and the text is the universal inter-element gap. -->
-	<div class={cn(inputVariants({ bare }), 'items-center gap-(--era-gap)', className)}>
+	<!-- data-input-field marks whichever element actually PAINTS the field. With
+	     an icon that is this wrapper; without one it is the <input> itself. Tests
+	     and consumers can then target the field directly instead of guessing from
+	     the DOM shape — guessing breaks on a `bare` input, whose parent is an
+	     arbitrary container that may carry its own fill. -->
+	<div
+		data-input-field
+		class={cn(inputVariants({ bare }), 'items-center gap-(--era-gap)', className)}
+	>
 		<Icon class="size-(--era-h-xs) shrink-0 text-muted" />
 		<input
 			bind:this={ref}
@@ -80,6 +53,7 @@
 	<input
 		bind:this={ref}
 		bind:value
+		data-input-field
 		class={cn(inputVariants({ bare }), textClass, className)}
 		{...restProps}
 	/>

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

@@ -1,48 +1,3 @@
-/**
- * The field shell — the chrome an input paints, minus the text styling.
- *
- * Split out as a variant because an `icon` input has to move that chrome onto
- * a WRAPPER (the glyph and the <input> sit inside one field), while a plain
- * one keeps it on the <input> itself. Both spellings therefore have to
- * describe the same box, and a variant is how they stay one description.
- */
-export declare const inputVariants: import("tailwind-variants").TVReturnType<{
-    /**
-     * `bare` drops the field chrome entirely — no fill, no well, no side
-     * padding. For an input nested in a container that is ALREADY the field:
-     * a Bar acting as a toolbar, a header row. Without it the input draws a
-     * second box inside the first, and at the same tier it fills its parent
-     * edge to edge so the two have no gap between them.
-     */
-    bare: {
-        false: "h-(--era-h-md) rounded-(--era-rd-md) bg-(--era-field-bg) px-(--era-field-px) shadow-(--era-shadow-well) hover:bg-(--era-highlight) focus-within:bg-(--era-highlight) focus:bg-(--era-highlight)";
-        true: "h-full bg-transparent px-0 shadow-none";
-    };
-}, undefined, "flex w-full era-interactive text-body text-fg", {
-    /**
-     * `bare` drops the field chrome entirely — no fill, no well, no side
-     * padding. For an input nested in a container that is ALREADY the field:
-     * a Bar acting as a toolbar, a header row. Without it the input draws a
-     * second box inside the first, and at the same tier it fills its parent
-     * edge to edge so the two have no gap between them.
-     */
-    bare: {
-        false: "h-(--era-h-md) rounded-(--era-rd-md) bg-(--era-field-bg) px-(--era-field-px) shadow-(--era-shadow-well) hover:bg-(--era-highlight) focus-within:bg-(--era-highlight) focus:bg-(--era-highlight)";
-        true: "h-full bg-transparent px-0 shadow-none";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    /**
-     * `bare` drops the field chrome entirely — no fill, no well, no side
-     * padding. For an input nested in a container that is ALREADY the field:
-     * a Bar acting as a toolbar, a header row. Without it the input draws a
-     * second box inside the first, and at the same tier it fills its parent
-     * edge to edge so the two have no gap between them.
-     */
-    bare: {
-        false: "h-(--era-h-md) rounded-(--era-rd-md) bg-(--era-field-bg) px-(--era-field-px) shadow-(--era-shadow-well) hover:bg-(--era-highlight) focus-within:bg-(--era-highlight) focus:bg-(--era-highlight)";
-        true: "h-full bg-transparent px-0 shadow-none";
-    };
-}, undefined>>;
 import type { Component } from 'svelte';
 import type { IconProps } from '@lucide/svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';

package/dist/ui/input/textarea.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
 	import { cn } from '../../utils/index.js';
+	import { inputVariants } from './variants.js';
 
 	let {
 		ref = $bindable(null),
@@ -15,8 +16,12 @@
 <textarea
 	bind:this={ref}
 	bind:value
+	data-input-field
 	class={cn(
-		'flex min-h-(--era-h-md) w-full era-interactive resize-y rounded-(--era-rd-md) bg-(--era-field-bg) px-(--era-field-px) py-(--era-inset-md) text-body text-fg shadow-(--era-shadow-well) placeholder:text-muted hover:bg-(--era-highlight) focus:bg-(--era-highlight)',
+		inputVariants({ height: 'auto' }),
+		// It grows, so the vertical inset has to be stated: the tier height is what
+		// centres one line of text in every other field, and there isn't one here.
+		'resize-y py-(--era-inset-md)',
 		className
 	)}
 	{...restProps}

package/dist/ui/input/variants.d.ts

@@ -0,0 +1,108 @@
+/**
+ * THE field. Every text field in the library paints this and nothing else.
+ *
+ * This module exists because it did not: the chrome below was hand-copied into
+ * Input, Textarea, CommandInput, ComboboxInput and all six date/time field
+ * inputs, and the copies had already drifted apart — some used `focus:`, others
+ * `focus-within:`, some omitted `era-interactive`, the date picker used a
+ * different leading padding, and the Notes fields had dropped the chrome
+ * entirely. Nine restatements of one idea is nine chances to be inconsistent,
+ * so there is now one statement and the rest import it.
+ *
+ * A component that needs something different asks for it as a VARIANT here,
+ * where every other field can see it — never by respelling the base.
+ *
+ * `tests/visual/input-consistency.spec.ts` measures the rendered result across
+ * routes and fails if any two fields differ.
+ */
+export declare const inputVariants: import("tailwind-variants").TVReturnType<{
+    /**
+     * `bare` drops the field chrome entirely — no fill, no well, no side
+     * padding. For an input nested in a container that is ALREADY the field:
+     * a Bar acting as a toolbar, a header row. Without it the input draws a
+     * second box inside the first, and at the same tier it fills its parent
+     * edge to edge so the two have no gap between them.
+     */
+    bare: {
+        false: "rounded-(--era-rd-md) bg-(--era-field-bg) shadow-(--era-shadow-well) hover:bg-(--era-highlight) focus-within:bg-(--era-highlight) focus:bg-(--era-highlight)";
+        true: "bg-transparent shadow-none";
+    };
+    /** Vertical size. `auto` is for a field that grows with its content (Textarea). */
+    height: {
+        md: "h-(--era-h-md)";
+        full: "h-full";
+        auto: "min-h-(--era-h-md)";
+    };
+    /**
+     * Side padding. `trailing` is for a field that holds a control at its end
+     * (the date picker's calendar trigger): the leading edge keeps the shared
+     * text inset so the text still lines up with every other field, and the
+     * trailing edge becomes the concentric inset for that sm-tier control, so
+     * its gap to the field edge equals its gap above and below.
+     */
+    pad: {
+        even: "px-(--era-field-px)";
+        trailing: "ps-(--era-field-px) pe-(--era-sm-inset-md)";
+        none: "px-0";
+    };
+}, undefined, "flex w-full era-interactive text-body text-fg placeholder:text-muted", {
+    /**
+     * `bare` drops the field chrome entirely — no fill, no well, no side
+     * padding. For an input nested in a container that is ALREADY the field:
+     * a Bar acting as a toolbar, a header row. Without it the input draws a
+     * second box inside the first, and at the same tier it fills its parent
+     * edge to edge so the two have no gap between them.
+     */
+    bare: {
+        false: "rounded-(--era-rd-md) bg-(--era-field-bg) shadow-(--era-shadow-well) hover:bg-(--era-highlight) focus-within:bg-(--era-highlight) focus:bg-(--era-highlight)";
+        true: "bg-transparent shadow-none";
+    };
+    /** Vertical size. `auto` is for a field that grows with its content (Textarea). */
+    height: {
+        md: "h-(--era-h-md)";
+        full: "h-full";
+        auto: "min-h-(--era-h-md)";
+    };
+    /**
+     * Side padding. `trailing` is for a field that holds a control at its end
+     * (the date picker's calendar trigger): the leading edge keeps the shared
+     * text inset so the text still lines up with every other field, and the
+     * trailing edge becomes the concentric inset for that sm-tier control, so
+     * its gap to the field edge equals its gap above and below.
+     */
+    pad: {
+        even: "px-(--era-field-px)";
+        trailing: "ps-(--era-field-px) pe-(--era-sm-inset-md)";
+        none: "px-0";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    /**
+     * `bare` drops the field chrome entirely — no fill, no well, no side
+     * padding. For an input nested in a container that is ALREADY the field:
+     * a Bar acting as a toolbar, a header row. Without it the input draws a
+     * second box inside the first, and at the same tier it fills its parent
+     * edge to edge so the two have no gap between them.
+     */
+    bare: {
+        false: "rounded-(--era-rd-md) bg-(--era-field-bg) shadow-(--era-shadow-well) hover:bg-(--era-highlight) focus-within:bg-(--era-highlight) focus:bg-(--era-highlight)";
+        true: "bg-transparent shadow-none";
+    };
+    /** Vertical size. `auto` is for a field that grows with its content (Textarea). */
+    height: {
+        md: "h-(--era-h-md)";
+        full: "h-full";
+        auto: "min-h-(--era-h-md)";
+    };
+    /**
+     * Side padding. `trailing` is for a field that holds a control at its end
+     * (the date picker's calendar trigger): the leading edge keeps the shared
+     * text inset so the text still lines up with every other field, and the
+     * trailing edge becomes the concentric inset for that sm-tier control, so
+     * its gap to the field edge equals its gap above and below.
+     */
+    pad: {
+        even: "px-(--era-field-px)";
+        trailing: "ps-(--era-field-px) pe-(--era-sm-inset-md)";
+        none: "px-0";
+    };
+}, undefined>>;

package/dist/ui/input/variants.js

@@ -0,0 +1,63 @@
+import { tv } from '../../utils/index.js';
+/**
+ * THE field. Every text field in the library paints this and nothing else.
+ *
+ * This module exists because it did not: the chrome below was hand-copied into
+ * Input, Textarea, CommandInput, ComboboxInput and all six date/time field
+ * inputs, and the copies had already drifted apart — some used `focus:`, others
+ * `focus-within:`, some omitted `era-interactive`, the date picker used a
+ * different leading padding, and the Notes fields had dropped the chrome
+ * entirely. Nine restatements of one idea is nine chances to be inconsistent,
+ * so there is now one statement and the rest import it.
+ *
+ * A component that needs something different asks for it as a VARIANT here,
+ * where every other field can see it — never by respelling the base.
+ *
+ * `tests/visual/input-consistency.spec.ts` measures the rendered result across
+ * routes and fails if any two fields differ.
+ */
+export const inputVariants = tv({
+    base: 'flex w-full era-interactive text-body text-fg placeholder:text-muted',
+    variants: {
+        /**
+         * `bare` drops the field chrome entirely — no fill, no well, no side
+         * padding. For an input nested in a container that is ALREADY the field:
+         * a Bar acting as a toolbar, a header row. Without it the input draws a
+         * second box inside the first, and at the same tier it fills its parent
+         * edge to edge so the two have no gap between them.
+         */
+        bare: {
+            false: 'rounded-(--era-rd-md) bg-(--era-field-bg) shadow-(--era-shadow-well) hover:bg-(--era-highlight) focus-within:bg-(--era-highlight) focus:bg-(--era-highlight)',
+            true: 'bg-transparent shadow-none'
+        },
+        /** Vertical size. `auto` is for a field that grows with its content (Textarea). */
+        height: {
+            md: 'h-(--era-h-md)',
+            // h-full, NOT the md tier: a bare input's container IS the field, so it
+            // takes that container's height. Keeping h-md here made a bare input
+            // inside an h-md Bar overflow it by the bar's border — a −0.5px gap,
+            // which is the even-gap law failing by a hair rather than obviously.
+            full: 'h-full',
+            auto: 'min-h-(--era-h-md)'
+        },
+        /**
+         * Side padding. `trailing` is for a field that holds a control at its end
+         * (the date picker's calendar trigger): the leading edge keeps the shared
+         * text inset so the text still lines up with every other field, and the
+         * trailing edge becomes the concentric inset for that sm-tier control, so
+         * its gap to the field edge equals its gap above and below.
+         */
+        pad: {
+            even: 'px-(--era-field-px)',
+            trailing: 'ps-(--era-field-px) pe-(--era-sm-inset-md)',
+            none: 'px-0'
+        }
+    },
+    compoundVariants: [
+        // Chrome and padding travel together: a field with no chrome has no box to
+        // pad. Spelling this as a compound rather than leaving it to the caller is
+        // what stops `bare` from becoming a second, differently-padded field.
+        { bare: true, class: 'h-full px-0' }
+    ],
+    defaultVariants: { bare: false, height: 'md', pad: 'even' }
+});

package/dist/ui/time-field/time-field-input.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
 	import { TimeField } from 'bits-ui';
 	import { cn } from '../../utils/index.js';
+	import { inputVariants } from '../input/variants.js';
 
 	let { ref = $bindable(null), class: className, ...restProps }: TimeField.InputProps = $props();
 </script>
 
 <TimeField.Input
 	bind:ref
+	data-input-field
 	class={cn(
-		'flex h-(--era-h-md) w-full items-center rounded-(--era-rd-md) bg-(--era-field-bg) px-(--era-field-px) text-body text-fg shadow-(--era-shadow-well) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight) disabled:opacity-50 data-[invalid]:text-destructive',
+		inputVariants(),
+		'items-center disabled:opacity-50 data-[invalid]:text-destructive',
 		className
 	)}
 	{...restProps}

package/dist/ui/time-range-field/time-range-field-input.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { TimeRangeField } from 'bits-ui';
 	import { cn } from '../../utils/index.js';
+	import { inputVariants } from '../input/variants.js';
 
 	let {
 		ref = $bindable(null),
@@ -11,8 +12,10 @@
 
 <TimeRangeField.Input
 	bind:ref
+	data-input-field
 	class={cn(
-		'flex h-(--era-h-md) w-full items-center rounded-(--era-rd-md) bg-(--era-field-bg) px-(--era-field-px) text-body text-fg shadow-(--era-shadow-well) focus-within:bg-(--era-highlight) hover:bg-(--era-highlight) disabled:opacity-50 data-[invalid]:text-destructive',
+		inputVariants(),
+		'items-center disabled:opacity-50 data-[invalid]:text-destructive',
 		className
 	)}
 	{...restProps}

package/package.json

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