runeforge 0.0.47 → 0.0.48

package/dist/components/crud/Field.svelte

@@ -199,6 +199,7 @@
 				/>
 			{:else}
 				<Select
+					id={field.attribute}
 					name={field.attribute}
 					bind:value={record[field.attribute] as string}
 					options={selectOptions}
@@ -250,11 +251,7 @@
 					style="position-anchor:{dateAnchorName}; position-try-fallbacks:flip-block;"
 					class="dropdown mt-1 rounded-box border border-base-content/10 bg-base-100 p-2 shadow-lg"
 				>
-					<calendar-date
-						class="cally"
-						bind:this={calendarDateEl}
-						value={datePart}
-					>
+					<calendar-date class="cally" bind:this={calendarDateEl} value={datePart}>
 						<svg
 							aria-label={strings.previous}
 							class="fill-current size-4"
@@ -309,6 +306,7 @@
 				/>
 			{:else}
 				<MultiSelect
+					id={field.attribute}
 					name={field.attribute}
 					bind:value={record[field.attribute] as string[]}
 					options={selectOptions}

package/dist/components/crud/views/List.svelte

@@ -328,13 +328,13 @@
 				class="btn-outline"
 				disabled={!isView && selected.size === 0}
 				title={bulkAction.tooltip ?? bulkAction.label}
-				aria-label={bulkAction.tooltip ?? bulkAction.label}
+				aria-label={bulkAction.label ? undefined : bulkAction.tooltip}
 				onclick={measuring ? undefined : () => handleBulkAction(bulkAction)}
 			>
 				<BulkIcon class="size-4" />
 				{#if bulkAction.label}
 					{bulkAction.label}{#if !isView}
-						({selected.size})
+						&nbsp;({selected.size})
 					{/if}
 				{/if}
 			</Button>
@@ -505,7 +505,7 @@
 								>
 									<BulkIcon class="size-4" />
 									{bulkAction.label ?? bulkAction.tooltip}{#if !isView}
-										({selected.size})
+										&nbsp;({selected.size})
 									{/if}
 								</Button>
 							{/if}

package/dist/components/form/MultiSelect.svelte

@@ -1,198 +1,248 @@
 <script lang="ts">
-  import { SvelteMap } from 'svelte/reactivity';
-  import { getStrings } from '../../i18n/context.js';
-  import { getIconSet } from '../../icons/context.js';
-  import { defaultIconSet } from '../../icons/sets/default.js';
-  import Button from './Button.svelte';
-  import type { SearchResolver, SelectOption } from '../../types/attribute.js';
-
-  const strings = getStrings();
-  const icons = $derived(getIconSet() ?? defaultIconSet);
-
-  let {
-    name,
-    value = $bindable([]),
-    options = [],
-    search: searchFn,
-    searchDebounceMs = 300,
-    placeholder = strings.selectPlaceholder,
-    error = '',
-    disabled = false,
-    // When passed, the dropdown's top row selects every option instead of
-    // clearing the selection (labelled `strings.selectAll` instead of
-    // `placeholder`) — clearing moves to the trigger's own × button instead.
-    // Left unset, existing callers keep today's behavior unchanged: top row
-    // clears, no × button.
-    onSelectAll,
-  }: {
-    name?: string;
-    value?: string[];
-    options?: SelectOption[];
-    search?: SearchResolver;
-    searchDebounceMs?: number;
-    placeholder?: string;
-    error?: string;
-    disabled?: boolean;
-    onSelectAll?: () => void;
-  } = $props();
-
-  const popId = $props.id();
-  const anchorName = `--multiselect-anchor-${popId}`;
-
-  let query = $state('');
-  let popoverEl: HTMLElement | undefined = $state();
-
-  let remoteResults = $state<SelectOption[] | null>(null);
-  let searching = $state(false);
-  const pickedLabels = new SvelteMap<string, string>();
-
-  let searchToken = 0;
-  $effect(() => {
-    if (!searchFn) return;
-    const q = query.trim();
-    if (!q) {
-      remoteResults = null;
-      searching = false;
-      return;
-    }
-    const token = ++searchToken;
-    searching = true;
-    const timer = setTimeout(() => {
-      searchFn(q).then((results) => {
-        if (token !== searchToken) return; // stale response, a newer query took over
-        remoteResults = results;
-        searching = false;
-      });
-    }, searchDebounceMs);
-    return () => clearTimeout(timer);
-  });
-
-  const filtered = $derived(
-    searchFn
-      ? (remoteResults ?? options)
-      : query.trim()
-        ? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))
-        : options
-  );
-
-  const selectedLabels = $derived(
-    value.map((v) => options.find((o) => o.value === v)?.label ?? pickedLabels.get(v) ?? v)
-  );
-  const buttonLabel = $derived(value.length === 0 ? placeholder : strings.selectedCount(value.length));
-
-  function toggle(option: SelectOption) {
-    if (value.includes(option.value)) {
-      value = value.filter((v) => v !== option.value);
-    } else {
-      value = [...value, option.value];
-      pickedLabels.set(option.value, option.label);
-    }
-  }
-
-  function clear() {
-    value = [];
-    pickedLabels.clear();
-    query = '';
-  }
-
-  function onToggle(e: Event) {
-    if ((e as ToggleEvent).newState === 'closed') query = '';
-  }
-
-  const hasSelection = $derived(value.length > 0);
-
-  function clearFromTrigger(e: MouseEvent) {
-    // Stop the click from also reaching the popover-trigger button
-    // underneath (they're overlapping siblings, not nested) so clearing
-    // doesn't toggle the dropdown open at the same time.
-    e.preventDefault();
-    e.stopPropagation();
-    clear();
-  }
+	import { SvelteMap } from 'svelte/reactivity';
+	import { getStrings } from '../../i18n/context.js';
+	import { getIconSet } from '../../icons/context.js';
+	import { defaultIconSet } from '../../icons/sets/default.js';
+	import Button from './Button.svelte';
+	import type { SearchResolver, SelectOption } from '../../types/attribute.js';
+
+	const strings = getStrings();
+	const icons = $derived(getIconSet() ?? defaultIconSet);
+
+	let {
+		name,
+		id,
+		value = $bindable([]),
+		options = [],
+		search: searchFn,
+		searchDebounceMs = 300,
+		placeholder = strings.selectPlaceholder,
+		error = '',
+		disabled = false,
+		// When passed, the dropdown's top row selects every option instead of
+		// clearing the selection (labelled `strings.selectAll` instead of
+		// `placeholder`) — clearing moves to the trigger's own × button instead.
+		// Left unset, existing callers keep today's behavior unchanged: top row
+		// clears, no × button.
+		onSelectAll
+	}: {
+		name?: string;
+		id?: string;
+		value?: string[];
+		options?: SelectOption[];
+		search?: SearchResolver;
+		searchDebounceMs?: number;
+		placeholder?: string;
+		error?: string;
+		disabled?: boolean;
+		onSelectAll?: () => void;
+	} = $props();
+
+	const popId = $props.id();
+	const anchorName = `--multiselect-anchor-${popId}`;
+
+	let query = $state('');
+	let open = $state(false);
+	let containerEl: HTMLElement | undefined = $state();
+	let popoverEl: HTMLElement | undefined = $state();
+	let inputEl: HTMLInputElement | undefined = $state();
+
+	let remoteResults = $state<SelectOption[] | null>(null);
+	let searching = $state(false);
+	const pickedLabels = new SvelteMap<string, string>();
+
+	let searchToken = 0;
+	$effect(() => {
+		if (!searchFn) return;
+		const q = query.trim();
+		if (!q) {
+			remoteResults = null;
+			searching = false;
+			return;
+		}
+		const token = ++searchToken;
+		searching = true;
+		const timer = setTimeout(() => {
+			searchFn(q).then((results) => {
+				if (token !== searchToken) return; // stale response, a newer query took over
+				remoteResults = results;
+				searching = false;
+			});
+		}, searchDebounceMs);
+		return () => clearTimeout(timer);
+	});
+
+	const filtered = $derived(
+		searchFn
+			? (remoteResults ?? options)
+			: query.trim()
+				? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))
+				: options
+	);
+
+	const selectedLabels = $derived(
+		value.map((v) => options.find((o) => o.value === v)?.label ?? pickedLabels.get(v) ?? v)
+	);
+	const buttonLabel = $derived(
+		value.length === 0 ? placeholder : strings.selectedCount(value.length)
+	);
+
+	function toggle(option: SelectOption) {
+		if (value.includes(option.value)) {
+			value = value.filter((v) => v !== option.value);
+		} else {
+			value = [...value, option.value];
+			pickedLabels.set(option.value, option.label);
+		}
+	}
+
+	function openPopover() {
+		open = true;
+		query = '';
+		popoverEl?.showPopover();
+	}
+
+	function clear() {
+		value = [];
+		pickedLabels.clear();
+		query = '';
+	}
+
+	function onToggle(e: Event) {
+		if ((e as ToggleEvent).newState === 'closed') {
+			open = false;
+			query = '';
+		}
+	}
+
+	// Escape can be pressed while an option button has focus (not just the
+	// text input), so this is wired at the container level rather than on
+	// the input alone — otherwise picking an option and then hitting Escape
+	// would leave the popover open with nothing listening for the key.
+	function onKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' && e.target === inputEl) {
+			// The trigger used to be a plain button, so Enter never submitted the
+			// surrounding form. Now that it's a text input, guard against that.
+			e.preventDefault();
+		} else if (e.key === 'Escape') {
+			// Also suppress the browser's native "revert to last value" behavior
+			// for text inputs on Escape, which would otherwise race our own
+			// close-and-restore-label update and blank the field.
+			e.preventDefault();
+			popoverEl?.hidePopover();
+		}
+	}
+
+	const hasSelection = $derived(value.length > 0);
+
+	function clearFromTrigger(e: MouseEvent) {
+		// Stop the click from also reaching the input underneath (they're
+		// overlapping siblings, not nested) so clearing doesn't focus/open the
+		// dropdown at the same time.
+		e.preventDefault();
+		e.stopPropagation();
+		clear();
+	}
+
+	// The trigger is a text input now, not a button, so it can't rely on the
+	// native `popovertarget` invoker exclusion to survive its own opening
+	// click (that relationship only applies to button-like elements — for a
+	// text input, the click that focuses it and opens the popover would
+	// immediately light-dismiss it again). `popover="manual"` opts out of
+	// that dismiss behavior entirely; this handler reimplements "close when
+	// focus leaves the widget" instead.
+	function onFocusOut(e: FocusEvent) {
+		const next = e.relatedTarget as Node | null;
+		if (!next || !containerEl?.contains(next)) {
+			popoverEl?.hidePopover();
+		}
+	}
 </script>
 
-<div class="relative w-full">
-  {#if name}
-    <input type="hidden" {name} value={JSON.stringify(value)} />
-  {/if}
-
-  <div class="relative">
-    <button
-      type="button"
-      class="select select-bordered w-full text-left font-normal"
-      class:select-error={!!error}
-      class:opacity-40={value.length === 0}
-      class:pr-8={hasSelection}
-      {disabled}
-      popovertarget={popId}
-      style="anchor-name:{anchorName}"
-      title={selectedLabels.join(', ')}
-    >
-      {buttonLabel}
-    </button>
-
-    {#if hasSelection && !disabled}
-      {@const Icon = icons.clear}
-      <Button
-        variant="ghost"
-        class="btn-xs btn-square btn-circle absolute top-1/2 right-6 -translate-y-1/2"
-        aria-label={strings.selectClear}
-        title={strings.selectClear}
-        onclick={clearFromTrigger}
-      >
-        <Icon class="size-3" />
-      </Button>
-    {/if}
-  </div>
-
-  <div
-    popover="auto"
-    id={popId}
-    bind:this={popoverEl}
-    style="position-anchor:{anchorName}; width:anchor-size(width); position-try-fallbacks:flip-block;"
-    class="dropdown mt-1 rounded-box border border-base-content/10 bg-base-100 shadow-lg"
-    ontoggle={onToggle}
-  >
-    <div class="p-2">
-      <input
-        type="text"
-        class="input input-bordered input-sm w-full"
-        placeholder={strings.selectSearch}
-        bind:value={query}
-        autocomplete="off"
-      />
-    </div>
-    <ul class="max-h-48 overflow-y-auto p-1">
-      <li>
-        <button
-          type="button"
-          class="w-full rounded-btn px-3 py-2 text-left text-sm text-base-content/40 hover:bg-base-200"
-          onclick={onSelectAll ?? clear}
-        >
-          {onSelectAll ? strings.selectAll : placeholder}
-        </button>
-      </li>
-      {#if searching}
-        <li class="px-3 py-2 text-sm text-base-content/40">{strings.selectSearching}</li>
-      {/if}
-      {#each filtered as option (option.value)}
-        {@const checked = value.includes(option.value)}
-        <li>
-          <button
-            type="button"
-            class="flex w-full items-center gap-2 rounded-btn px-3 py-2 text-left text-sm hover:bg-base-200"
-            class:bg-primary={checked}
-            class:text-primary-content={checked}
-            onclick={() => toggle(option)}
-          >
-            <input type="checkbox" class="checkbox checkbox-sm" {checked} tabindex="-1" readonly />
-            {option.label}
-          </button>
-        </li>
-      {/each}
-      {#if !searching && filtered.length === 0}
-        <li class="px-3 py-2 text-sm text-base-content/40">{strings.selectNoResults}</li>
-      {/if}
-    </ul>
-  </div>
+<!--
+  The keydown/focusout handlers here are event delegation for the input and
+  popover option buttons below, not interaction with this div itself — every
+  actually-interactive element inside already has correct native semantics.
+-->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div class="relative w-full" bind:this={containerEl} onfocusout={onFocusOut} onkeydown={onKeydown}>
+	{#if name}
+		<input type="hidden" {name} value={JSON.stringify(value)} />
+	{/if}
+
+	<div class="relative">
+		<input
+			bind:this={inputEl}
+			{id}
+			type="text"
+			class="input input-bordered w-full font-normal"
+			class:input-error={!!error}
+			class:opacity-40={value.length === 0 && !open}
+			class:pr-8={hasSelection}
+			{disabled}
+			{placeholder}
+			value={open ? query : buttonLabel}
+			oninput={(e) => (query = e.currentTarget.value)}
+			onfocus={openPopover}
+			style="anchor-name:{anchorName}"
+			title={selectedLabels.join(', ')}
+			autocomplete="off"
+		/>
+
+		{#if hasSelection && !disabled}
+			{@const Icon = icons.clear}
+			<Button
+				variant="ghost"
+				class="btn-xs btn-square btn-circle absolute top-1/2 right-6 -translate-y-1/2"
+				aria-label={strings.selectClear}
+				title={strings.selectClear}
+				onclick={clearFromTrigger}
+			>
+				<Icon class="size-3" />
+			</Button>
+		{/if}
+	</div>
+
+	<div
+		popover="manual"
+		id={popId}
+		bind:this={popoverEl}
+		style="position-anchor:{anchorName}; width:anchor-size(width); position-try-fallbacks:flip-block;"
+		class="dropdown mt-1 rounded-box border border-base-content/10 bg-base-100 shadow-lg"
+		ontoggle={onToggle}
+	>
+		<ul class="max-h-48 overflow-y-auto p-1">
+			<li>
+				<button
+					type="button"
+					class="w-full rounded-btn px-3 py-2 text-left text-sm text-base-content/40 hover:bg-base-200"
+					onclick={onSelectAll ?? clear}
+				>
+					{onSelectAll ? strings.selectAll : placeholder}
+				</button>
+			</li>
+			{#if searching}
+				<li class="px-3 py-2 text-sm text-base-content/40">{strings.selectSearching}</li>
+			{/if}
+			{#each filtered as option (option.value)}
+				{@const checked = value.includes(option.value)}
+				<li>
+					<button
+						type="button"
+						class="flex w-full items-center gap-2 rounded-btn px-3 py-2 text-left text-sm hover:bg-base-200"
+						class:bg-primary={checked}
+						class:text-primary-content={checked}
+						onclick={() => toggle(option)}
+					>
+						<input type="checkbox" class="checkbox checkbox-sm" {checked} tabindex="-1" readonly />
+						{option.label}
+					</button>
+				</li>
+			{/each}
+			{#if !searching && filtered.length === 0}
+				<li class="px-3 py-2 text-sm text-base-content/40">{strings.selectNoResults}</li>
+			{/if}
+		</ul>
+	</div>
 </div>

package/dist/components/form/MultiSelect.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { SearchResolver, SelectOption } from '../../types/attribute.js';
 type $$ComponentProps = {
     name?: string;
+    id?: string;
     value?: string[];
     options?: SelectOption[];
     search?: SearchResolver;

package/dist/components/form/PasswordInput.svelte

@@ -8,7 +8,7 @@
   let {
     name,
     id,
-    value = '',
+    value = $bindable(''),
     autocomplete,
     required = true,
     placeholder = '',
@@ -45,7 +45,7 @@
     {id}
     {required}
     {placeholder}
-    {value}
+    bind:value
     {autocomplete}
     type={visible ? 'text' : 'password'}
     class={['grow', inputClass]}

package/dist/components/form/PasswordInput.svelte.d.ts

@@ -11,6 +11,6 @@ type $$ComponentProps = {
     inputClass?: string;
     buttonClass?: string;
 };
-declare const PasswordInput: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const PasswordInput: import("svelte").Component<$$ComponentProps, {}, "value">;
 type PasswordInput = ReturnType<typeof PasswordInput>;
 export default PasswordInput;

package/dist/components/form/Select.svelte

@@ -1,162 +1,209 @@
 <script lang="ts">
-  import { getStrings } from '../../i18n/context.js';
-  import type { SearchResolver } from '../../types/attribute.js';
-
-  const strings = getStrings();
-
-  let {
-    name,
-    value = $bindable(''),
-    options = [],
-    search: searchFn,
-    searchDebounceMs = 300,
-    placeholder = strings.selectPlaceholder,
-    error = '',
-    disabled = false,
-  }: {
-    name?: string;
-    value?: string;
-    options?: { value: string; label: string }[];
-    search?: SearchResolver;
-    searchDebounceMs?: number;
-    placeholder?: string;
-    error?: string;
-    disabled?: boolean;
-  } = $props();
-
-  const popId = $props.id();
-  const anchorName = `--select-anchor-${popId}`;
-
-  let query = $state('');
-  let popoverEl: HTMLElement | undefined = $state();
-
-  // Options resolved by `searchFn` for the current query; null while no
-  // server search has run yet (e.g. box just opened, query still empty).
-  let remoteResults = $state<{ value: string; label: string }[] | null>(null);
-  let searching = $state(false);
-  // Label of whatever was last picked from `remoteResults`, kept around so the
-  // closed-state button can still show it even though it isn't in `options`.
-  let pickedLabel = $state<string | null>(null);
-
-  let searchToken = 0;
-  $effect(() => {
-    if (!searchFn) return;
-    const q = query.trim();
-    if (!q) {
-      remoteResults = null;
-      searching = false;
-      return;
-    }
-    const token = ++searchToken;
-    searching = true;
-    const timer = setTimeout(() => {
-      searchFn(q).then((results) => {
-        if (token !== searchToken) return; // stale response, a newer query took over
-        remoteResults = results;
-        searching = false;
-      });
-    }, searchDebounceMs);
-    return () => clearTimeout(timer);
-  });
-
-  const filtered = $derived(
-    searchFn
-      ? (remoteResults ?? options)
-      : query.trim()
-        ? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))
-        : options
-  );
-
-  const selectedLabel = $derived(
-    value === ''
-      ? placeholder
-      : (options.find((o) => o.value === value)?.label ?? pickedLabel ?? placeholder)
-  );
-
-  function pick(option: { value: string; label: string }) {
-    value = option.value;
-    pickedLabel = option.label;
-    query = '';
-    popoverEl?.hidePopover();
-  }
-
-  function clear() {
-    value = '';
-    pickedLabel = null;
-    query = '';
-    popoverEl?.hidePopover();
-  }
-
-  // Catches dismissal paths that don't go through pick()/clear() (outside
-  // click, Escape), so a stale search doesn't linger for next time it opens.
-  function onToggle(e: Event) {
-    if ((e as ToggleEvent).newState === 'closed') query = '';
-  }
+	import { getStrings } from '../../i18n/context.js';
+	import type { SearchResolver } from '../../types/attribute.js';
+
+	const strings = getStrings();
+
+	let {
+		name,
+		id,
+		value = $bindable(''),
+		options = [],
+		search: searchFn,
+		searchDebounceMs = 300,
+		placeholder = strings.selectPlaceholder,
+		error = '',
+		disabled = false
+	}: {
+		name?: string;
+		id?: string;
+		value?: string;
+		options?: { value: string; label: string }[];
+		search?: SearchResolver;
+		searchDebounceMs?: number;
+		placeholder?: string;
+		error?: string;
+		disabled?: boolean;
+	} = $props();
+
+	const popId = $props.id();
+	const anchorName = `--select-anchor-${popId}`;
+
+	let query = $state('');
+	let open = $state(false);
+	let containerEl: HTMLElement | undefined = $state();
+	let popoverEl: HTMLElement | undefined = $state();
+	let inputEl: HTMLInputElement | undefined = $state();
+
+	// Options resolved by `searchFn` for the current query; null while no
+	// server search has run yet (e.g. box just opened, query still empty).
+	let remoteResults = $state<{ value: string; label: string }[] | null>(null);
+	let searching = $state(false);
+	// Label of whatever was last picked from `remoteResults`, kept around so the
+	// closed-state input can still show it even though it isn't in `options`.
+	let pickedLabel = $state<string | null>(null);
+
+	let searchToken = 0;
+	$effect(() => {
+		if (!searchFn) return;
+		const q = query.trim();
+		if (!q) {
+			remoteResults = null;
+			searching = false;
+			return;
+		}
+		const token = ++searchToken;
+		searching = true;
+		const timer = setTimeout(() => {
+			searchFn(q).then((results) => {
+				if (token !== searchToken) return; // stale response, a newer query took over
+				remoteResults = results;
+				searching = false;
+			});
+		}, searchDebounceMs);
+		return () => clearTimeout(timer);
+	});
+
+	const filtered = $derived(
+		searchFn
+			? (remoteResults ?? options)
+			: query.trim()
+				? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))
+				: options
+	);
+
+	const selectedLabel = $derived(
+		value === '' ? '' : (options.find((o) => o.value === value)?.label ?? pickedLabel ?? '')
+	);
+
+	function openPopover() {
+		open = true;
+		query = '';
+		popoverEl?.showPopover();
+	}
+
+	function pick(option: { value: string; label: string }) {
+		value = option.value;
+		pickedLabel = option.label;
+		query = '';
+		popoverEl?.hidePopover();
+		inputEl?.blur();
+	}
+
+	function clear() {
+		value = '';
+		pickedLabel = null;
+		query = '';
+		popoverEl?.hidePopover();
+		inputEl?.blur();
+	}
+
+	// Catches dismissal paths that don't go through pick()/clear() (outside
+	// click, Escape), so a stale search doesn't linger for next time it opens.
+	function onToggle(e: Event) {
+		if ((e as ToggleEvent).newState === 'closed') {
+			open = false;
+			query = '';
+		}
+	}
+
+	// Escape can be pressed while an option button has focus (not just the
+	// text input), so this is wired at the container level rather than on
+	// the input alone — otherwise picking an option and then hitting Escape
+	// would leave the popover open with nothing listening for the key.
+	function onKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' && e.target === inputEl) {
+			// The trigger used to be a plain button, so Enter never submitted the
+			// surrounding form. Now that it's a text input, guard against that.
+			e.preventDefault();
+		} else if (e.key === 'Escape') {
+			// Also suppress the browser's native "revert to last value" behavior
+			// for text inputs on Escape, which would otherwise race our own
+			// close-and-restore-label update and blank the field.
+			e.preventDefault();
+			popoverEl?.hidePopover();
+		}
+	}
+
+	// The trigger is a text input now, not a button, so it can't rely on the
+	// native `popovertarget` invoker exclusion to survive its own opening
+	// click (that relationship only applies to button-like elements — for a
+	// text input, the click that focuses it and opens the popover would
+	// immediately light-dismiss it again). `popover="manual"` opts out of
+	// that dismiss behavior entirely; this handler reimplements "close when
+	// focus leaves the widget" instead.
+	function onFocusOut(e: FocusEvent) {
+		const next = e.relatedTarget as Node | null;
+		if (!next || !containerEl?.contains(next)) {
+			popoverEl?.hidePopover();
+		}
+	}
 </script>
 
-<div class="relative w-full">
-  {#if name}
-    <input type="hidden" {name} {value} />
-  {/if}
-
-  <button
-    type="button"
-    class="select select-bordered w-full text-left font-normal"
-    class:select-error={!!error}
-    class:opacity-40={!value}
-    {disabled}
-    popovertarget={popId}
-    style="anchor-name:{anchorName}"
-  >
-    {selectedLabel}
-  </button>
-
-  <div
-    popover="auto"
-    id={popId}
-    bind:this={popoverEl}
-    style="position-anchor:{anchorName}; width:anchor-size(width); position-try-fallbacks:flip-block;"
-    class="dropdown mt-1 rounded-box border border-base-content/10 bg-base-100 shadow-lg"
-    ontoggle={onToggle}
-  >
-    <div class="p-2">
-      <input
-        type="text"
-        class="input input-bordered input-sm w-full"
-        placeholder={strings.selectSearch}
-        bind:value={query}
-        autocomplete="off"
-      />
-    </div>
-    <ul class="max-h-48 overflow-y-auto p-1">
-      <li>
-        <button
-          type="button"
-          class="w-full rounded-btn px-3 py-2 text-left text-sm text-base-content/40 hover:bg-base-200"
-          onclick={clear}
-        >
-          {placeholder}
-        </button>
-      </li>
-      {#if searching}
-        <li class="px-3 py-2 text-sm text-base-content/40">{strings.selectSearching}</li>
-      {/if}
-      {#each filtered as option (option.value)}
-        <li>
-          <button
-            type="button"
-            class="w-full rounded-btn px-3 py-2 text-left text-sm hover:bg-base-200"
-            class:bg-primary={value === option.value}
-            class:text-primary-content={value === option.value}
-            onclick={() => pick(option)}
-          >
-            {option.label}
-          </button>
-        </li>
-      {/each}
-      {#if !searching && filtered.length === 0}
-        <li class="px-3 py-2 text-sm text-base-content/40">{strings.selectNoResults}</li>
-      {/if}
-    </ul>
-  </div>
+<!--
+  The keydown/focusout handlers here are event delegation for the input and
+  popover option buttons below, not interaction with this div itself — every
+  actually-interactive element inside already has correct native semantics.
+-->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div class="relative w-full" bind:this={containerEl} onfocusout={onFocusOut} onkeydown={onKeydown}>
+	{#if name}
+		<input type="hidden" {name} {value} />
+	{/if}
+
+	<input
+		bind:this={inputEl}
+		{id}
+		type="text"
+		class="input input-bordered w-full font-normal"
+		class:input-error={!!error}
+		{disabled}
+		{placeholder}
+		value={open ? query : selectedLabel}
+		oninput={(e) => (query = e.currentTarget.value)}
+		onfocus={openPopover}
+		style="anchor-name:{anchorName}"
+		autocomplete="off"
+	/>
+
+	<div
+		popover="manual"
+		id={popId}
+		bind:this={popoverEl}
+		style="position-anchor:{anchorName}; width:anchor-size(width); position-try-fallbacks:flip-block;"
+		class="dropdown mt-1 rounded-box border border-base-content/10 bg-base-100 shadow-lg"
+		ontoggle={onToggle}
+	>
+		<ul class="max-h-48 overflow-y-auto p-1">
+			<li>
+				<button
+					type="button"
+					class="w-full rounded-btn px-3 py-2 text-left text-sm text-base-content/40 hover:bg-base-200"
+					onclick={clear}
+				>
+					{placeholder}
+				</button>
+			</li>
+			{#if searching}
+				<li class="px-3 py-2 text-sm text-base-content/40">{strings.selectSearching}</li>
+			{/if}
+			{#each filtered as option (option.value)}
+				<li>
+					<button
+						type="button"
+						class="w-full rounded-btn px-3 py-2 text-left text-sm hover:bg-base-200"
+						class:bg-primary={value === option.value}
+						class:text-primary-content={value === option.value}
+						onclick={() => pick(option)}
+					>
+						{option.label}
+					</button>
+				</li>
+			{/each}
+			{#if !searching && filtered.length === 0}
+				<li class="px-3 py-2 text-sm text-base-content/40">{strings.selectNoResults}</li>
+			{/if}
+		</ul>
+	</div>
 </div>

package/dist/components/form/Select.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { SearchResolver } from '../../types/attribute.js';
 type $$ComponentProps = {
     name?: string;
+    id?: string;
     value?: string;
     options?: {
         value: string;

package/dist/components/table/Paginator.svelte

@@ -48,7 +48,7 @@
 	}
 
 	const pages = $derived(buildPages(page, totalPages));
-	const inputWidth = $derived(`${String(totalPages).length + 2}ch`);
+	const inputWidth = $derived(`${String(totalPages).length + 4}ch`);
 
 	function handlePageInput(e: KeyboardEvent) {
 		if (e.key !== 'Enter') return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runeforge",
-  "version": "0.0.47",
+  "version": "0.0.48",
   "description": "SvelteKit toolkit for building metadata-driven CRUD interfaces with tables, forms, and actions",
   "license": "MIT",
   "author": "Ezequiel Puerta",