svelte-5-select 2.0.0 → 2.1.0

package/dist/no-styles/LoadingIcon.svelte

@@ -1,3 +1,9 @@
+<script lang="ts">
+    // Required even though empty: script-less components make svelte2tsx emit a
+    // legacy d.ts referencing `SvelteComponent` without importing it, which breaks
+    // consumers that type-check with skipLibCheck: false.
+</script>
+
 <svg class="loading" viewBox="25 25 50 50" aria-hidden="true" focusable="false">
     <circle
         class="circle_path"

package/dist/no-styles/LoadingIcon.svelte.d.ts

@@ -1,18 +1,5 @@
-export default LoadingIcon;
-type LoadingIcon = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const LoadingIcon: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
     (internal: unknown, props: {
@@ -24,3 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
+declare const LoadingIcon: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type LoadingIcon = InstanceType<typeof LoadingIcon>;
+export default LoadingIcon;

package/dist/no-styles/Select.svelte

@@ -20,16 +20,16 @@ Bind `value` (and optionally `justValue`, `filterText`, `listOpen`, `focused`).
         SelectValue,
         SelectClearValue,
         SelectErrorEvent,
-    } from '../types';
+    } from '../types.js';
     import { createFloatingActions } from 'svelte-floating-ui';
     import { useAriaHandlers } from '../aria-handlers.svelte';
 
-    import _filter from '../filter';
+    import _filter from '../filter.js';
 
     import ChevronIcon from './ChevronIcon.svelte';
     import ClearIcon from './ClearIcon.svelte';
     import LoadingIcon from './LoadingIcon.svelte';
-    import type { SelectItem } from '../types';
+    import type { SelectItem } from '../types.js';
     import type { HTMLInputAttributes } from 'svelte/elements';
     import { createSelectState } from '../select-state.svelte';
     import { useKeyboardNavigation } from '../keyboard-navigation.svelte';
@@ -43,7 +43,7 @@ Bind `value` (and optionally `justValue`, `filterText`, `listOpen`, `focused`).
         isItemSelectableCheck,
         normalizeItem,
         createGroupHeaderItem as _createGroupHeaderItem,
-    } from '../utils';
+    } from '../utils.js';
 
     const defaultItemFilter = (label: string, filterText: string, _option: SelectItem): boolean =>
         `${label}`.toLowerCase().includes(filterText?.toLowerCase());
@@ -118,6 +118,8 @@ Bind `value` (and optionally `justValue`, `filterText`, `listOpen`, `focused`).
         // ARIA props
         ariaLabel = undefined,
         ariaErrorMessage = undefined,
+        ariaActiveTag = (label: string) =>
+            `${label} is active. Press Backspace to remove, or left and right arrow keys to move between selected options.`,
         ariaClearSelectLabel = 'Clear selection',
         ariaRemoveItemLabel = (label: string) => `Remove ${label}`,
         ariaCleared = () => {
@@ -335,6 +337,15 @@ Bind `value` (and optionally `justValue`, `filterText`, `listOpen`, `focused`).
                 (consumer as (e: Event) => unknown)(e);
             };
         }
+        // aria-describedby composes the same way: the attribute takes a
+        // space-separated id list, so a consumer description must extend the
+        // selection description, not silently replace it (later-spread-wins
+        // dropped the selection from browse-mode reading).
+        const consumerDescribedby = inputAttributes?.['aria-describedby'];
+        const ownDescribedby = !multiple && value ? `selected-${_id}` : undefined;
+        if (consumerDescribedby && ownDescribedby) {
+            attrs['aria-describedby'] = `${ownDescribedby} ${consumerDescribedby}`;
+        }
         return attrs;
     });
     let prefloat = $state(true);
@@ -505,7 +516,7 @@ Bind `value` (and optionally `justValue`, `filterText`, `listOpen`, `focused`).
     );
     let ariaContext = $derived.by(() => {
         if (activeTagLabel !== undefined) {
-            return `${activeTagLabel} is active. Press Backspace to remove, or left and right arrow keys to move between selected options.`;
+            return ariaActiveTag(activeTagLabel);
         }
         // Tracked triggers: the list opening/closing, the result count changing
         // (filtering), and the loading flag. hoverItemIndex is deliberately read
@@ -561,6 +572,10 @@ Bind `value` (and optionally `justValue`, `filterText`, `listOpen`, `focused`).
     // triggers scrolling.
     function handleKeyDown(e: KeyboardEvent): void {
         keyboardNav.handleKeyDown(e);
+        // Mirror keyboardNav's IME gate: during composition the arrows move
+        // through the IME candidate window, not the list — the keyboard cursor
+        // stays put, so the list must not scroll either.
+        if (e.isComposing || e.keyCode === 229) return;
         const isTypeAhead = !searchable && e.key.length === 1;
         if (
             e.key === 'ArrowDown' ||
@@ -740,8 +755,13 @@ Bind `value` (and optionally `justValue`, `filterText`, `listOpen`, `focused`).
         const currentItemId = itemId;
         untrack(() => {
             if (warnedAboutMissingItemId || !currentItems?.length) return;
-            const missing = (currentItems as (Item | string)[]).some(
-                (item) => typeof item !== 'string' && getItemProperty(item, currentItemId) === undefined,
+            // String items are converted to `{ value, label, index }` rows, so
+            // any other `itemId` never exists on them — the same silent
+            // identity collapse the object-item check catches.
+            const missing = (currentItems as (Item | string)[]).some((item) =>
+                typeof item === 'string'
+                    ? !['value', 'label', 'index'].includes(currentItemId)
+                    : getItemProperty(item, currentItemId) === undefined,
             );
             if (!missing) return;
             warnedAboutMissingItemId = true;
@@ -754,6 +774,33 @@ Bind `value` (and optionally `justValue`, `filterText`, `listOpen`, `focused`).
         });
     });
 
+    // Dev-only: the same identity collapse can enter through `value` — partial
+    // objects that lack the itemId field (e.g. seeded from a form payload) all
+    // compare equal to each other and to nothing in `items`, so selection
+    // display and dedup misbehave while `items` itself passes the check above.
+    let warnedAboutValueMissingItemId = false;
+    $effect(() => {
+        if (!DEV) return;
+        const currentValue = value;
+        const currentItemId = itemId;
+        untrack(() => {
+            if (warnedAboutValueMissingItemId || currentValue == null) return;
+            const entries = Array.isArray(currentValue) ? currentValue : [currentValue];
+            // Raw strings are their own id, so only object entries can be missing it
+            const missing = (entries as (Item | string)[]).some(
+                (entry) => typeof entry !== 'string' && getItemProperty(entry, currentItemId) === undefined,
+            );
+            if (!missing) return;
+            warnedAboutValueMissingItemId = true;
+            console.warn(
+                `[svelte-select] Some \`value\` entries have no "${currentItemId}" field (the current ` +
+                    '`itemId`). Value entries are matched against items by that field, so entries ' +
+                    'without it cannot be recognized as selected, deduplicated, or validated. Pass ' +
+                    'value entries that carry the `itemId` field.',
+            );
+        });
+    });
+
     // Dev-only: warn once the input is mounted if it has no robust accessible
     // name. The placeholder is only a last-resort fallback that some screen
     // readers ignore, so an unnamed combobox is a real gap worth surfacing.
@@ -767,7 +814,13 @@ Bind `value` (and optionally `justValue`, `filterText`, `listOpen`, `focused`).
         ariaLabel;
         untrack(() => {
             if (!input) return;
-            const named = !!ariaLabel || !!input.getAttribute('aria-labelledby') || (input.labels?.length ?? 0) > 0;
+            // getAttribute over the props: an aria-label supplied through
+            // inputAttributes names the input just as well as the ariaLabel prop
+            const named =
+                !!ariaLabel ||
+                !!input.getAttribute('aria-label') ||
+                !!input.getAttribute('aria-labelledby') ||
+                (input.labels?.length ?? 0) > 0;
             if (!named) {
                 console.warn(
                     '[svelte-select] The Select input has no accessible name. Pass `ariaLabel`, ' +
@@ -801,6 +854,14 @@ Bind `value` (and optionally `justValue`, `filterText`, `listOpen`, `focused`).
                 listboxLabelledby = inputLabelledby;
                 return;
             }
+            // An aria-label supplied through inputAttributes names only the
+            // input; forward it so the listbox is named the same way the
+            // ariaLabel prop's is (accname precedence: labelledby above wins).
+            const inputAriaLabel = input.getAttribute('aria-label');
+            if (inputAriaLabel) {
+                listboxLabelText = inputAriaLabel;
+                return;
+            }
             const labelEl = input.labels?.[0];
             if (!labelEl) return;
             // An implicit wrapping <label> contains the component itself, so
@@ -867,13 +928,21 @@ Bind `value` (and optionally `justValue`, `filterText`, `listOpen`, `focused`).
                 groupValues.push(groupValue);
                 groups[groupValue] = [];
                 if (groupValue) {
-                    groups[groupValue].push(
-                        Object.assign(createGroupHeaderItem(groupValue, item as Item), {
-                            id: groupValue,
-                            groupHeader: true,
-                            selectable: groupHeaderSelectable,
-                        }),
-                    );
+                    const header = Object.assign(createGroupHeaderItem(groupValue, item as Item), {
+                        id: groupValue,
+                        groupHeader: true,
+                        selectable: groupHeaderSelectable,
+                    });
+                    // Headers are compared by `itemId` like any other row
+                    // (selection, hover, dedup): one lacking that field
+                    // compares equal to every other bare header, so selecting
+                    // one marked them all selected and made the rest
+                    // unselectable. Stamp the group value when the builder
+                    // didn't provide the field.
+                    if (getItemProperty(header, itemId) === undefined) {
+                        (header as SelectItem)[itemId] = groupValue;
+                    }
+                    groups[groupValue].push(header);
                 }
             }
 
@@ -1123,7 +1192,7 @@ Bind `value` (and optionally `justValue`, `filterText`, `listOpen`, `focused`).
                          The group's accessible name still resolves via aria-labelledby,
                          which follows hidden targets. Selectable headers are real options. -->
                     <div
-                        onmouseover={() => hoverManager.handleHover(i)}
+                        onmousemove={() => hoverManager.handleHover(i)}
                         onfocus={() => hoverManager.handleHover(i)}
                         onclick={(ev) => {
                             ev.stopPropagation();

package/dist/no-styles/Select.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { ItemLike, SelectProps, SelectRow } from '../types';
-import type { SelectItem } from '../types';
+import type { ItemLike, SelectProps, SelectRow } from '../types.js';
+import type { SelectItem } from '../types.js';
 declare function $$render<Item extends ItemLike = SelectItem, Multiple extends boolean = false>(): {
     props: SelectProps<Item, Multiple>;
     exports: {

package/dist/select-state.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ItemLike, SelectItem, SelectState } from './types';
+import type { ItemLike, SelectItem, SelectState } from './types.js';
 /**
  * The prop-backed part of the store: Select.svelte supplies live getter/setter
  * accessors over its `$props()` bindings and derived values, so reads stay

package/dist/styles/default.css

@@ -425,4 +425,23 @@ input:focus {
         outline: 2px dashed Highlight;
         outline-offset: -2px;
     }
+
+    /* The error state is conveyed only by an author border colour, which is
+       flattened to the standard border — border width + style survive the
+       forced palette, so a double border keeps the state visible. */
+    .svelte-select.error {
+        border: 3px double CanvasText;
+    }
+
+    /* Disabled is aria-disabled + readonly, not :disabled, so the UA never
+       applies its own GrayText treatment — do it explicitly. */
+    .disabled,
+    .disabled input,
+    .disabled input::placeholder {
+        color: GrayText;
+    }
+
+    .disabled {
+        border-color: GrayText;
+    }
 }

package/dist/tailwind.css

@@ -226,6 +226,25 @@
         outline: 2px dashed Highlight;
         outline-offset: -2px;
     }
+
+    /* The error state is conveyed only by an author border colour, which is
+       flattened to the standard border — border width + style survive the
+       forced palette, so a double border keeps the state visible. */
+    .svelte-select.error {
+        border: 3px double CanvasText;
+    }
+
+    /* Disabled is aria-disabled + readonly, not :disabled, so the UA never
+       applies its own GrayText treatment — do it explicitly. */
+    .svelte-select.disabled,
+    .svelte-select.disabled input,
+    .svelte-select.disabled input::placeholder {
+        color: GrayText;
+    }
+
+    .svelte-select.disabled {
+        border-color: GrayText;
+    }
 }
 
 .list-item {

package/dist/types.d.ts

@@ -345,7 +345,7 @@ export interface SelectProps<Item extends ItemLike = SelectItem, Multiple extend
     debounceWait?: number;
     /** Passed to floating-ui to position the list (placement, middleware, autoUpdate). */
     floatingConfig?: FloatingConfig;
-    /** Bindable. Index of the option under the keyboard cursor. */
+    /** Bindable. Index of the option under the keyboard cursor. @default 0 */
     hoverItemIndex?: number;
     /**
      * Extra attributes for the text input. Merged over the component's own ARIA
@@ -353,6 +353,9 @@ export interface SelectProps<Item extends ItemLike = SelectItem, Multiple extend
      * `oninput`/`onblur`/`onfocus`/`onkeydown` here composes with (runs after)
      * the component's own handler instead of replacing it, so filtering, focus
      * handling, and keyboard navigation keep working alongside yours.
+     * `value`, `placeholder`, and `style` are ignored — the input's value IS the
+     * filter text; use `bind:filterText`, the `placeholder` prop, and
+     * `inputStyles` instead.
      */
     inputAttributes?: HTMLInputAttributes;
     /** Size the list to the container's width. @default true */
@@ -396,16 +399,26 @@ export interface SelectProps<Item extends ItemLike = SelectItem, Multiple extend
     /**
      * Fetches options asynchronously. Runs on mount, on typing (debounced by
      * `debounceWait`), and whenever `loadOptionsDeps` or `disabled` changes.
-     * Opening or closing the list never fetches, with one exception: reopening
-     * with retained filter text whose load was cancelled on close (e.g. with
-     * `clearFilterTextOnBlur={false}`) refreshes the stale results immediately.
+     * Opening or closing the list never fetches by itself; beyond that, one rule
+     * holds: the open list never shows results stale for the visible text.
+     * Reopening refetches when the shown results don't match the retained filter
+     * text (`clearFilterTextOnBlur={false}`), when the text was wiped at close
+     * (Escape) over query-narrowed results, or after a failed load; emptying the
+     * text while the list stays open (deleting the query, or a selection with
+     * `closeListOnChange={false}`) refetches the baseline set in place.
      * Whatever it returns is what the list shows: results are not re-filtered by
      * `filterText`. Set `items` or this, not both.
      */
     loadOptions?: (filterText: string) => Promise<Item[] | string[]>;
+    /**
+     * Announced when the arrow-key tag cursor lands on a multi-select tag;
+     * receives that tag's label. The default explains the Backspace-to-remove
+     * and arrow-key mechanics — override it to localize them.
+     */
+    ariaActiveTag?: (label: string) => string;
     /** Announced when the selection is cleared. */
     ariaCleared?: () => string;
-    /** `aria-label` for the clear-all button. */
+    /** `aria-label` for the clear-all button. @default 'Clear selection' */
     ariaClearSelectLabel?: string;
     /** Announced when an open list has no results. Also rendered as the list's visible empty-state copy (unless `emptySnippet` replaces it), so overriding it localizes both. */
     ariaEmpty?: () => string;
@@ -427,7 +440,7 @@ export interface SelectProps<Item extends ItemLike = SelectItem, Multiple extend
     ariaListOpen?: (label: string, count: number) => string;
     /** Announced while an open list is still fetching options. Also rendered as the list's visible loading copy (unless `emptySnippet` replaces it), so overriding it localizes both. */
     ariaLoading?: () => string;
-    /** `aria-label` for each multi-select tag's remove button; receives the item's label. */
+    /** `aria-label` for each multi-select tag's remove button; receives the item's label. @default (label) => `Remove ${label}` */
     ariaRemoveItemLabel?: (label: string) => string;
     /** Announced when the selection changes; receives the selected labels, comma-joined. */
     ariaValues?: (values: string) => string;
@@ -447,10 +460,16 @@ export interface SelectProps<Item extends ItemLike = SelectItem, Multiple extend
      * Fires with the rendered list whenever it changes while open. Rows include any
      * synthesized group headers — narrow with `isGroupHeader`.
      */
-    onfilter?: (items: SelectRow<Item>[]) => void;
+    onfilter?: (items: SelectRow<NoInfer<Item>>[]) => void;
     /** Literal DOM `focus` passthrough from the text input. Fires after the component's own focus handling. */
     onfocus?: (e: FocusEvent) => void;
-    /** Fires with the index of the option under the keyboard/mouse cursor. */
+    /**
+     * Fires with the index of the option under the keyboard/mouse cursor.
+     * Naming note: by the camelCase-for-state-changes rule above this would be
+     * `onHoverItem` (it tracks the bindable `hoverItemIndex`), but it shipped
+     * lowercase in 2.0 and renaming is a breaking change — treat it as the one
+     * grandfathered exception, not a pattern to extend.
+     */
     onhoveritem?: (index: number) => void;
     /**
      * Fires with the options a `loadOptions` call resolved. When the loader
@@ -464,7 +483,7 @@ export interface SelectProps<Item extends ItemLike = SelectItem, Multiple extend
      * Fires alongside {@link SelectProps.onSelectionChange} when the user picks an
      * option, but receives just the item selected rather than the whole value.
      */
-    onselect?: (selection: Item) => void;
+    onselect?: (selection: NoInfer<Item>) => void;
     /**
      * Fires only when the user picks an option from the list — never on a clear, a
      * programmatic `bind:value` write, or a `loadOptionsDeps` invalidation. Use
@@ -483,6 +502,12 @@ export interface SelectProps<Item extends ItemLike = SelectItem, Multiple extend
      * an `oninput` that never fired per keystroke read as the DOM event it wasn't.)
      */
     onValueChange?: (value: SelectValue<Item, Multiple>) => void;
+    /** @deprecated Removed in v2.0 — renamed to {@link SelectProps.onValueChange} (same payload and firing rules). */
+    oninput?: never;
+    /** @deprecated Removed in v2.0 — renamed to {@link SelectProps.onSelectionChange} (same payload and firing rules). */
+    onchange?: never;
+    /** @deprecated Removed in v2.0 — renamed to {@link SelectProps.listStyles}. */
+    listStyle?: never;
     /** Replaces the chevron icon; the boolean is `listOpen`, so the icon can flip while open. Rendered only with `showChevron`. */
     chevronIconSnippet?: Snippet<[boolean]>;
     /** Replaces the icon inside the clear-all button (the button itself, its `ariaClearSelectLabel`, and its behavior stay). */
@@ -495,10 +520,11 @@ export interface SelectProps<Item extends ItemLike = SelectItem, Multiple extend
      * `<input type="hidden" name={...}>` (the default submits JSON-stringified
      * items, or bare ids with `useJustValue`).
      */
-    inputHiddenSnippet?: Snippet<[SelectValueProp<Item, Multiple> | undefined]>;
+    inputHiddenSnippet?: Snippet<[SelectValueProp<Item, Multiple>]>;
     /**
      * Renders one row of the list. Also renders synthesized group headers when
-     * `groupBy` is set — narrow with `isGroupHeader`.
+     * `groupBy` is set — narrow with `isGroupHeader`. The number is the row's
+     * index in the rendered (filtered, grouped) list.
      */
     itemSnippet?: Snippet<[SelectRow<Item>, number]>;
     /** Rendered inside the list after the options — e.g. a "load more" row or footer. */
@@ -525,8 +551,11 @@ export interface SelectProps<Item extends ItemLike = SelectItem, Multiple extend
      * submission while `required` and empty; receives the current value. An
      * override owns the constraint-validation behavior.
      */
-    requiredSnippet?: Snippet<[SelectValueProp<Item, Multiple> | undefined]>;
-    /** Receives one item at a time: the value in single mode, each tag in multiple mode. */
+    requiredSnippet?: Snippet<[SelectValueProp<Item, Multiple>]>;
+    /**
+     * Receives one item at a time: the value in single mode, each tag in multiple
+     * mode. The number is the tag's index in multiple mode and absent in single mode.
+     */
     selectionSnippet?: Snippet<[NoInfer<Item>, number?]>;
     /** Bindable, read-only: the container element, once mounted. */
     container?: HTMLDivElement;

package/dist/use-hover.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ItemLike, SelectItem, SelectState } from './types';
+import type { ItemLike, SelectItem, SelectState } from './types.js';
 export declare function useHover<Item extends ItemLike = SelectItem>(state: SelectState<Item>): {
     setHoverIndex: (increment: number) => void;
     isItemActive: (item: SelectItem) => boolean;

package/dist/use-hover.svelte.js

@@ -1,5 +1,5 @@
 import { untrack } from 'svelte';
-import { areItemsEqual, getItemProperty, isItemSelectableCheck, normalizeItem } from './utils';
+import { areItemsEqual, getItemProperty, isItemSelectableCheck, normalizeItem } from './utils.js';
 export function useHover(state) {
     function computeNextIndex(filteredItems, fromIndex, increment) {
         // Same predicate as click/Enter selection: arrow keys must be able to
@@ -82,10 +82,13 @@ export function useHover(state) {
         if (state.isScrolling)
             return;
         state.hoverItemIndex = i;
-        // Deliberately NOT commit-intent for Tab: browsers synthesize mouseover
-        // when the list renders under a stationary cursor, so hover alone can
-        // happen with zero user action. Intent comes from real pointer movement
-        // over the open list (the list's mousemove handler in Select.svelte).
+        // Driven by row mousemove (never mouseover): browsers synthesize
+        // mouseover when the list renders — or scrolls rows — under a
+        // stationary cursor, which is zero user action and used to yank both
+        // hover and aria-activedescendant off the keyboard cursor right after
+        // open. mousemove only fires for real pointer movement. Deliberately
+        // NOT commit-intent for Tab either; that is the list-level mousemove
+        // handler in Select.svelte.
     }
     let scrollEndFallback;
     function handleListScroll() {
@@ -133,6 +136,22 @@ export function useHover(state) {
             }
         });
     });
+    // A parent can write any number through bind:hoverItemIndex; internal
+    // writers are all range-safe. An out-of-range cursor silently kills
+    // Enter/Space/Tab (they read filteredItems[hoverItemIndex] → undefined)
+    // until the next arrow key, so correct it as soon as it lands. Only
+    // genuinely out-of-range values are touched: a pointer resting on a
+    // non-selectable row is a valid cursor position, which is why the
+    // keep-hover effect above reads the index untracked and must stay that way.
+    $effect(() => {
+        const idx = state.hoverItemIndex;
+        const inRange = idx >= 0 && idx < state.filteredItems.length;
+        untrack(() => {
+            if (!state.listOpen || state.filteredItems.length === 0 || inRange)
+                return;
+            checkHoverSelectable();
+        });
+    });
     // Reset hover to the first selectable item on filterText change
     $effect(() => {
         if (state.filterText) {

package/dist/use-load-options.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ItemLike, LoadOptionsActions, SelectItem, SelectState } from './types';
+import type { ItemLike, LoadOptionsActions, SelectItem, SelectState } from './types.js';
 export interface HandleLoadOptionsOptions {
     /**
      * Validate the selection against the loaded items (dependency-driven reloads):

package/dist/use-load-options.svelte.js

@@ -1,6 +1,6 @@
 import { untrack } from 'svelte';
 import { DEV } from 'esm-env';
-import { convertStringItemsToObjects, getItemProperty } from './utils';
+import { convertStringItemsToObjects, getItemProperty } from './utils.js';
 export function useLoadOptions(state, actions) {
     // Monotonic token so responses that resolve after a newer request started are discarded
     let requestSequence = 0;
@@ -182,6 +182,13 @@ export function useLoadOptions(state, actions) {
                     // A restored load has settled; the channel is spent
                     if (token === restoredToken)
                         restoredToken = 0;
+                    // The newest load has settled: nothing filter-driven is
+                    // pending anymore, so a later close must not "cancel" it —
+                    // pre-fix the stale flag let cancelPendingFilterLoad hand
+                    // currency back to a deps reload this load superseded,
+                    // whose late response then overwrote these fresher items
+                    if (token === requestSequence)
+                        latestLoadIsFilterDriven = false;
                     if (result && result.length > 0 && typeof result[0] === 'string') {
                         state.items = convertStringItemsToObjects(result);
                     }
@@ -207,6 +214,10 @@ export function useLoadOptions(state, actions) {
                         return; // superseded; the newer request manages state
                     if (token === restoredToken)
                         restoredToken = 0;
+                    // Settled (with an error) — same as the success path: the flag
+                    // must not outlive the load it describes
+                    if (token === requestSequence)
+                        latestLoadIsFilterDriven = false;
                     // Settled (with an error), so no longer live — a reopen may retry it
                     liveLoadFilterText = undefined;
                     console.error('loadOptions error:', err);
@@ -320,7 +331,25 @@ export function useLoadOptions(state, actions) {
             !disabled &&
             filterText !== loadedFilterText &&
             !loadIsLiveForText;
-        if (isFirstRun || depsChanged || disabledChanged || (filterTextChanged && filterText.length > 0)) {
+        // Filter text emptied in place while the list stays open — a selection
+        // wiped it (closeListOnChange={false}) or the user deleted the query —
+        // over results still narrowed by the old text. The same staleness rule
+        // as reopenedStale applies (results must reflect the current text; the
+        // '' re-fetch restores the baseline set), it just never crosses a
+        // close/open edge here. loadedFilterText distinguishes this from an
+        // armed-but-never-landed load, which the cancel branch below moots.
+        const emptiedWhileOpen = !isFirstRun &&
+            filterTextChanged &&
+            filterText.length === 0 &&
+            listOpen &&
+            prev.listOpen &&
+            !disabled &&
+            filterText !== loadedFilterText;
+        if (isFirstRun ||
+            depsChanged ||
+            disabledChanged ||
+            (filterTextChanged && filterText.length > 0) ||
+            emptiedWhileOpen) {
             untrack(() => handleLoadOptions(filterText, {
                 validateValue: depsChanged,
                 debounce: filterTextChanged && !depsChanged && !disabledChanged,

package/dist/use-value.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ItemLike, SelectItem, SelectState, ValueActions } from './types';
+import type { ItemLike, SelectItem, SelectState, ValueActions } from './types.js';
 export declare function useValue<Item extends ItemLike = SelectItem>(state: SelectState<Item>, actions: ValueActions): {
     itemSelected: (selection: SelectItem) => void;
     handleMultiItemClear: (i: number) => Promise<void>;

package/dist/use-value.svelte.js

@@ -1,5 +1,5 @@
 import { untrack } from 'svelte';
-import { getItemProperty, hasValueChanged } from './utils';
+import { getItemProperty, hasValueChanged } from './utils.js';
 export function useValue(state, actions) {
     // Tracked-read helper for the effects' trigger sections: reading length AND
     // every entry makes any in-place mutation of a bound array retrigger the
@@ -188,6 +188,12 @@ export function useValue(state, actions) {
             // Raw string entries key on the string itself: getItemProperty returns
             // undefined for non-objects, which would collapse all strings into one
             const id = typeof val === 'string' ? val : getItemProperty(val, itemId);
+            // An entry with no itemId field yields no evidence of duplication —
+            // collapsing every such entry into the first silently loses data on
+            // a config error (the dev warning in Select.svelte surfaces it).
+            // Only matching real ids may dedup.
+            if (id === undefined)
+                return true;
             if (seen.has(id))
                 return false;
             seen.add(id);
@@ -307,6 +313,12 @@ export function useValue(state, actions) {
         actions.onSelectionChange(state.value);
         actions.onselect(selection);
     }
+    // Run once synchronously at creation: effects never run during SSR, so
+    // without this pass the server HTML ships raw string entries — empty chip
+    // text, aria-label="Remove undefined", and a hidden form input carrying
+    // JSON.stringify('NY'). The effect below re-runs the same idempotent
+    // resolution on the client.
+    untrack(() => normalizeValue());
     // Normalize string values on every value change (not just the hasValue
     // flip — replacing one string with another must re-resolve), and again when
     // async items arrive so fallback entries upgrade to the real item

package/dist/utils.d.ts

@@ -1,4 +1,4 @@
-import type { ItemLike, SelectGroupHeader, SelectItem } from './types';
+import type { ItemLike, SelectGroupHeader, SelectItem } from './types.js';
 /**
  * Narrows a rendered list row to a synthesized group header (see the `groupBy` prop).
  * Rows that fail this guard are your own item type.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-5-select",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "publishConfig": {
     "access": "public"
   },
@@ -63,7 +63,11 @@
     "select",
     "dropdown",
     "component",
-    "select-component"
+    "select-component",
+    "combobox",
+    "autocomplete",
+    "typeahead",
+    "multiselect"
   ],
   "type": "module",
   "exports": {