@dorsk/tsumikit 0.55.0 → 0.57.0

package/dist/components/atoms/Input.svelte

@@ -155,7 +155,14 @@
 	.input-lg {
 		min-height: var(--input-size, var(--control-height-large));
 		padding: var(--sp-3) var(--sp-4);
-		font-size: var(--fs-base);
+		font-size: max(16px, var(--fs-md));
+	}
+	/* iOS auto-zooms any field under 16px on focus; on touch the size modifiers
+	   carry their difference through padding and height alone. */
+	@media (pointer: coarse) {
+		.input-sm {
+			font-size: max(16px, var(--fs-sm));
+		}
 	}
 	.input-grow {
 		flex: 1 1 0;

package/dist/components/atoms/Select.svelte

@@ -228,7 +228,7 @@
 	.select.select-lg {
 		min-height: var(--select-size, var(--control-height-large));
 		padding: var(--sp-3) var(--sp-4);
-		font-size: var(--fs-base);
+		font-size: max(16px, var(--fs-md));
 	}
 	.select.compact {
 		padding: var(--sp-1) var(--sp-2);
@@ -296,6 +296,16 @@
 	.select-wrap.no-chevron .select-face.compact {
 		padding-right: var(--sp-2);
 	}
+	/* iOS auto-zooms any field under 16px on focus; on touch the size modifiers
+	   carry their difference through padding and height alone. */
+	@media (pointer: coarse) {
+		.select.compact {
+			font-size: max(16px, var(--fs-xs));
+		}
+		.select-face.compact {
+			font-size: max(16px, var(--fs-xs));
+		}
+	}
 	.select:disabled ~ .select-face {
 		color: var(--text-muted);
 	}

package/dist/components/atoms/Textarea.svelte

@@ -254,9 +254,16 @@
 	}
 	.textarea-lg {
 		padding: var(--sp-3) var(--sp-4);
-		font-size: var(--fs-base);
+		font-size: max(16px, var(--fs-md));
 		min-height: var(--textarea-size, var(--control-height-large));
 	}
+	/* iOS auto-zooms any field under 16px on focus; on touch the size modifiers
+	   carry their difference through padding and height alone. */
+	@media (pointer: coarse) {
+		.textarea-sm {
+			font-size: max(16px, var(--fs-sm));
+		}
+	}
 	.textarea[aria-invalid='true'],
 	.textarea[aria-invalid='true']:focus {
 		border-color: var(--danger);

package/dist/components/molecules/FilterInput.svelte

@@ -2,9 +2,10 @@
 	import type { FilterNode, Query } from '../../query/ast';
 
 	/**
-	 * The reactive parse context handed to the `inline` and `below` snippets so a
-	 * host can render arbitrary Svelte nodes (badges, custom components, chips)
-	 * either inline inside the bar or below it — all derived from the same value.
+	 * The reactive parse context handed to the `inline`, `display` and `below`
+	 * snippets so a host can render arbitrary Svelte nodes (badges, custom
+	 * components, chips) inside the bar, over the input or below it — all
+	 * derived from the same value.
 	 */
 	export interface FilterInputContext {
 		/** The parsed AST for the current value. */
@@ -68,6 +69,7 @@
 		onchange,
 		onsubmit,
 		inline,
+		display,
 		below,
 		class: klass = '',
 		style: styleProp = '',
@@ -124,6 +126,15 @@
 		 * inline (no below-bar chips). Receives the reactive parse context.
 		 */
 		inline?: Snippet<[FilterInputContext]>;
+		/**
+		 * Rendering of the value shown over the input while the field is blurred
+		 * and non-empty — a compact path, a formatted timestamp, a resolved id.
+		 * Focusing the input (click, Tab, `hotkey`, `context.focus()`) reveals the
+		 * raw text again. It is decoration, never a control: the overlay is
+		 * `aria-hidden`, takes no pointer events and adds no tab stop, so the
+		 * input stays the single focus target.
+		 */
+		display?: Snippet<[FilterInputContext]>;
 		/**
 		 * Content rendered below the bar (e.g. removable chips). FilterSearchBar
 		 * passes its chip row here; single-field hosts simply omit it.
@@ -181,6 +192,8 @@
 		focus: () => el?.focus()
 	});
 
+	const showDisplay = $derived(!!display && !focused && !!value);
+
 	// Emit the AST whenever the parse result changes.
 	$effect(() => {
 		onchange?.(ast, value);
@@ -352,31 +365,37 @@
 	<div class="fi__bar">
 		{#if icon}<span class="fi__icon"><Icon name={icon} label="Search" /></span>{/if}
 		{#if inline}{@render inline(ctx)}{/if}
-		<input
-			bind:this={el}
-			bind:value
-			class="fi__input"
-			id={id ?? field?.id}
-			aria-describedby={ariaDescribedby ?? field?.describedBy}
-			aria-invalid={ariaInvalid ?? (field?.invalid ? 'true' : undefined)}
-			spellcheck="false"
-			autocomplete="off"
-			placeholder={hint}
-			{oninput}
-			onclick={refresh}
-			onkeyup={(e) => {
-				if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') refresh();
-			}}
-			onfocus={() => {
-				focused = true;
-				refresh();
-			}}
-			onblur={() => {
-				focused = false;
-				setTimeout(() => (open = false), 120);
-			}}
-			{onkeydown}
-		/>
+		<span class="fi__field">
+			<input
+				bind:this={el}
+				bind:value
+				class="fi__input"
+				class:fi__input--masked={showDisplay}
+				id={id ?? field?.id}
+				aria-describedby={ariaDescribedby ?? field?.describedBy}
+				aria-invalid={ariaInvalid ?? (field?.invalid ? 'true' : undefined)}
+				spellcheck="false"
+				autocomplete="off"
+				placeholder={hint}
+				{oninput}
+				onclick={refresh}
+				onkeyup={(e) => {
+					if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') refresh();
+				}}
+				onfocus={() => {
+					focused = true;
+					refresh();
+				}}
+				onblur={() => {
+					focused = false;
+					setTimeout(() => (open = false), 120);
+				}}
+				{onkeydown}
+			/>
+			{#if display && showDisplay}
+				<span class="fi__display" aria-hidden="true">{@render display(ctx)}</span>
+			{/if}
+		</span>
 		{#if showHotkey && hotkey && !focused && !value}
 			<kbd class="fi__kbd" aria-hidden="true">{hotkey}</kbd>
 		{/if}
@@ -479,6 +498,22 @@
 		display: flex;
 		color: var(--text-faint);
 	}
+	.fi__field {
+		position: relative;
+		display: flex;
+		flex: 1;
+		min-width: 0;
+	}
+	.fi__display {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		min-width: 0;
+		overflow: hidden;
+		pointer-events: none;
+	}
 	.fi__input {
 		flex: 1;
 		border: 0;
@@ -492,6 +527,9 @@
 	.fi__input::placeholder {
 		color: var(--text-faint);
 	}
+	.fi__input--masked {
+		color: transparent;
+	}
 	.fi__clear {
 		display: flex;
 		border: 0;

package/dist/components/molecules/FilterInput.svelte.d.ts

@@ -1,8 +1,9 @@
 import type { FilterNode, Query } from '../../query/ast';
 /**
- * The reactive parse context handed to the `inline` and `below` snippets so a
- * host can render arbitrary Svelte nodes (badges, custom components, chips)
- * either inline inside the bar or below it — all derived from the same value.
+ * The reactive parse context handed to the `inline`, `display` and `below`
+ * snippets so a host can render arbitrary Svelte nodes (badges, custom
+ * components, chips) inside the bar, over the input or below it — all
+ * derived from the same value.
  */
 export interface FilterInputContext {
     /** The parsed AST for the current value. */
@@ -73,6 +74,15 @@ type Own = {
      * inline (no below-bar chips). Receives the reactive parse context.
      */
     inline?: Snippet<[FilterInputContext]>;
+    /**
+     * Rendering of the value shown over the input while the field is blurred
+     * and non-empty — a compact path, a formatted timestamp, a resolved id.
+     * Focusing the input (click, Tab, `hotkey`, `context.focus()`) reveals the
+     * raw text again. It is decoration, never a control: the overlay is
+     * `aria-hidden`, takes no pointer events and adds no tab stop, so the
+     * input stays the single focus target.
+     */
+    display?: Snippet<[FilterInputContext]>;
     /**
      * Content rendered below the bar (e.g. removable chips). FilterSearchBar
      * passes its chip row here; single-field hosts simply omit it.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.55.0",
+  "version": "0.57.0",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",