@signal9/era-ui 4.3.1 → 4.4.0

package/dist/styles/density.css

@@ -199,6 +199,9 @@
 	--era-xs-inset-lg: calc(
 		(var(--era-h-lg) - var(--era-h-xs)) / 2
 	); /* 9/12/15 — center an xs control inside an lg bar (= rd-lg − rd-xs) */
+	--era-sm-inset-md: calc(
+		(var(--era-h-md) - var(--era-h-sm)) / 2
+	); /* 1/2/3 — center an sm control inside an md field (= rd-md − rd-sm), e.g. the date picker's trailing trigger */
 	--era-sm-inset-lg: calc(
 		(var(--era-h-lg) - var(--era-h-sm)) / 2
 	); /* 5/7/9 = sp − 3 — inset an sm panel (drag bar) concentrically in an lg pane (= rd-lg − rd-sm) */

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';
 
@@ -45,6 +10,7 @@
 		value = $bindable(''),
 		icon = null,
 		bare = false,
+		reveal = false,
 		class: className,
 		...restProps
 	}: HTMLInputAttributes & {
@@ -53,6 +19,8 @@
 		icon?: Component<IconProps> | null;
 		/** Drop the field chrome — for an input inside a container that is already the field. */
 		bare?: boolean;
+		/** Hold the field chrome back until hover — for a title or label that IS the content. */
+		reveal?: boolean;
 	} = $props();
 
 	// No era-text-trim on the <input> itself, in either branch: an <input> clips to
@@ -60,6 +28,12 @@
 	// 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 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
+	// chrome" cannot tell a sanctioned exception from a regression — which is the
+	// hole the Notes fields sat in. Naming the kind closes it.
+	const kind = $derived(reveal ? 'reveal' : bare ? 'bare' : '');
 </script>
 
 {#if icon}
@@ -67,7 +41,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={kind}
+		class={cn(inputVariants({ bare, reveal }), 'items-center gap-(--era-gap)', className)}
+	>
 		<Icon class="size-(--era-h-xs) shrink-0 text-muted" />
 		<input
 			bind:this={ref}
@@ -80,7 +62,8 @@
 	<input
 		bind:this={ref}
 		bind:value
-		class={cn(inputVariants({ bare }), textClass, className)}
+		data-input-field={kind}
+		class={cn(inputVariants({ bare, reveal }), textClass, className)}
 		{...restProps}
 	/>
 {/if}

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';
@@ -52,6 +7,8 @@ type $$ComponentProps = HTMLInputAttributes & {
     icon?: Component<IconProps> | null;
     /** Drop the field chrome — for an input inside a container that is already the field. */
     bare?: boolean;
+    /** Hold the field chrome back until hover — for a title or label that IS the content. */
+    reveal?: boolean;
 };
 declare const Input: Component<$$ComponentProps, {}, "value" | "ref">;
 type Input = ReturnType<typeof Input>;

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,153 @@
+/**
+ * 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";
+    };
+    /**
+     * `reveal` holds the field back until the pointer arrives: no fill and no
+     * well at rest, the ordinary resting field on hover, the ordinary focused
+     * field on focus. For a field whose value is really the page's own content
+     * rather than a form entry — a document title, a renameable label — where
+     * a box drawn around it at all times competes with the thing it names.
+     *
+     * It is deliberately a variant here and not a one-off class on the caller:
+     * a revealed field has to reveal THE field, and the only way to guarantee
+     * that is for it to be spelled once, next to it.
+     */
+    reveal: {
+        true: "bg-transparent shadow-none hover:bg-(--era-field-bg) hover:shadow-(--era-shadow-well) focus-within:shadow-(--era-shadow-well) focus:shadow-(--era-shadow-well)";
+        false: "";
+    };
+    /** 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";
+    };
+    /**
+     * `reveal` holds the field back until the pointer arrives: no fill and no
+     * well at rest, the ordinary resting field on hover, the ordinary focused
+     * field on focus. For a field whose value is really the page's own content
+     * rather than a form entry — a document title, a renameable label — where
+     * a box drawn around it at all times competes with the thing it names.
+     *
+     * It is deliberately a variant here and not a one-off class on the caller:
+     * a revealed field has to reveal THE field, and the only way to guarantee
+     * that is for it to be spelled once, next to it.
+     */
+    reveal: {
+        true: "bg-transparent shadow-none hover:bg-(--era-field-bg) hover:shadow-(--era-shadow-well) focus-within:shadow-(--era-shadow-well) focus:shadow-(--era-shadow-well)";
+        false: "";
+    };
+    /** 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";
+    };
+    /**
+     * `reveal` holds the field back until the pointer arrives: no fill and no
+     * well at rest, the ordinary resting field on hover, the ordinary focused
+     * field on focus. For a field whose value is really the page's own content
+     * rather than a form entry — a document title, a renameable label — where
+     * a box drawn around it at all times competes with the thing it names.
+     *
+     * It is deliberately a variant here and not a one-off class on the caller:
+     * a revealed field has to reveal THE field, and the only way to guarantee
+     * that is for it to be spelled once, next to it.
+     */
+    reveal: {
+        true: "bg-transparent shadow-none hover:bg-(--era-field-bg) hover:shadow-(--era-shadow-well) focus-within:shadow-(--era-shadow-well) focus:shadow-(--era-shadow-well)";
+        false: "";
+    };
+    /** 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,78 @@
+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'
+        },
+        /**
+         * `reveal` holds the field back until the pointer arrives: no fill and no
+         * well at rest, the ordinary resting field on hover, the ordinary focused
+         * field on focus. For a field whose value is really the page's own content
+         * rather than a form entry — a document title, a renameable label — where
+         * a box drawn around it at all times competes with the thing it names.
+         *
+         * It is deliberately a variant here and not a one-off class on the caller:
+         * a revealed field has to reveal THE field, and the only way to guarantee
+         * that is for it to be spelled once, next to it.
+         */
+        reveal: {
+            true: 'bg-transparent shadow-none hover:bg-(--era-field-bg) hover:shadow-(--era-shadow-well) focus-within:shadow-(--era-shadow-well) focus:shadow-(--era-shadow-well)',
+            false: ''
+        },
+        /** 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, reveal: 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}