@signal9/era-ui 3.13.2 → 3.14.0

package/dist/apps/notes/notes.svelte

@@ -158,16 +158,10 @@
 			size="md"
 			class="shrink-0 gap-(--era-xxs-inset-md) rounded-none border-b border-divider-faded px-(--era-xxs-inset-md)"
 		>
-			<!-- The glyph is on the ICON tier but every other child of this bar is on
-			     the xxs tier, so a bare svg here gets the bar's 3px side padding
-			     against its own ~6px vertical inset. The holder puts it on the same
-			     tier as the new-note button — one even gap for every child — while
-			     the glyph itself stays icon-sized inside it. -->
-			<span class="flex size-xxs shrink-0 items-center justify-center">
-				<Search class="size-(--era-icon-xxs) text-muted" />
-			</span>
-			<input
-				class="h-full min-w-0 flex-1 bg-transparent text-body text-fg outline-none placeholder:text-muted"
+			<Input
+				icon={Search}
+				bare
+				class="min-w-0 flex-1"
 				type="text"
 				placeholder="Filter…"
 				aria-label="Filter notes"
@@ -329,11 +323,9 @@
 					</Popover.Content>
 				</Popover.Root>
 
-				<!-- Chromeless, like the filter input: an h-md Input inside an h-md bar
-				     fills it edge to edge, so the well would draw a box with no room
-				     around it. The bar is the container. -->
 				<Input
-					class="h-full min-w-0 flex-1 bg-transparent px-0 shadow-none"
+					bare
+					class="min-w-0 flex-1"
 					aria-label="Note title"
 					placeholder="Untitled"
 					value={selected.title}

package/dist/generated-docs/input.md

@@ -15,4 +15,6 @@ Inherits all props from `HTMLInputAttributes`.
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `ref?` | `HTMLInputElement \| null` | `null` | bindable |
+| `icon?` | `Component<IconProps> \| null` | `null` | Lucide glyph rendered inside the field, left of the text. |
+| `bare?` | `boolean` | `false` | Drop the field chrome — for an input inside a container that is already the field. |
 | `value?` | `(forwarded)` | `''` | bindable |

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

@@ -2753,6 +2753,8 @@ Inherits all props from `HTMLInputAttributes`.
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `ref?` | `HTMLInputElement \| null` | `null` | bindable |
+| `icon?` | `Component<IconProps> \| null` | `null` | Lucide glyph rendered inside the field, left of the text. |
+| `bare?` | `boolean` | `false` | Drop the field chrome — for an input inside a container that is already the field. |
 | `value?` | `(forwarded)` | `''` | bindable |
 
 <!-- end: input -->

package/dist/generated-docs/manifest.json

@@ -631,7 +631,7 @@
       "slug": "input",
       "title": "Input",
       "summary": "A text input field, with textarea variant.",
-      "tokenEstimate": 87,
+      "tokenEstimate": 145,
       "sections": [
         "Import",
         "Props"

package/dist/ui/input/input.svelte

@@ -1,27 +1,86 @@
+<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-surface-bg-elevated) 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 type { IconProps } from '@lucide/svelte';
 	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { cn } from '../../utils/index.js';
 
 	let {
 		ref = $bindable(null),
 		value = $bindable(''),
+		icon = null,
+		bare = false,
 		class: className,
 		...restProps
 	}: HTMLInputAttributes & {
 		ref?: HTMLInputElement | null;
+		/** Lucide glyph rendered inside the field, left of the text. */
+		icon?: Component<IconProps> | null;
+		/** Drop the field chrome — for an input inside a container that is already the field. */
+		bare?: boolean;
 	} = $props();
+
+	// 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';
 </script>
 
-<input
-	bind:this={ref}
-	bind:value
-	class={cn(
-		// 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-field-px) text-body text-fg shadow-(--era-shadow-well) placeholder:text-muted hover:bg-(--era-highlight) focus:bg-(--era-highlight)',
-		className
-	)}
-	{...restProps}
-/>
+{#if icon}
+	{@const Icon = icon}
+	<!-- 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)}>
+		<Icon class="size-(--era-h-xs) shrink-0 text-muted" />
+		<input
+			bind:this={ref}
+			bind:value
+			class={cn('h-full w-full min-w-0 bg-transparent outline-none', textClass)}
+			{...restProps}
+		/>
+	</div>
+{:else}
+	<input
+		bind:this={ref}
+		bind:value
+		class={cn(inputVariants({ bare }), textClass, className)}
+		{...restProps}
+	/>
+{/if}

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

@@ -1,7 +1,58 @@
+/**
+ * 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-surface-bg-elevated) 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-surface-bg-elevated) 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-surface-bg-elevated) 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';
 type $$ComponentProps = HTMLInputAttributes & {
     ref?: HTMLInputElement | null;
+    /** Lucide glyph rendered inside the field, left of the text. */
+    icon?: Component<IconProps> | null;
+    /** Drop the field chrome — for an input inside a container that is already the field. */
+    bare?: boolean;
 };
-declare const Input: import("svelte").Component<$$ComponentProps, {}, "value" | "ref">;
+declare const Input: Component<$$ComponentProps, {}, "value" | "ref">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/package.json

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