@casinogate/ui 1.11.12 → 1.11.14

package/dist/assets/css/root.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {

package/dist/components/combobox/presets/async/combobox.async.svelte

@@ -1,12 +1,12 @@
-<script lang="ts" generics="TItem extends CommandItem">
-  import type { CommandCollection, CommandItem } from '../../../command/index.js';
-  import type { ComboboxAsyncProps } from '../../types.js';
+<script lang="ts" generics="TItem extends ComboboxItem">
+  import type { CommandCollection } from '../../../command/index.js';
+  import type { ComboboxAsyncProps, ComboboxItem } from '../../types.js';
 
   import { SELECTION_TYPE } from '../../../../internal/constants/selection-type.js';
   import { boolAttr } from '../../../../internal/utils/attrs.js';
   import { cn, noop } from '../../../../internal/utils/common.js';
-  import { Debounced, watch } from 'runed';
-  import { afterTick, boxWith, onMountEffect } from 'svelte-toolbelt';
+  import { watch } from 'runed';
+  import { afterTick, boxWith } from 'svelte-toolbelt';
   import type { Attachment } from 'svelte/attachments';
   import { cubicInOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
@@ -19,6 +19,7 @@
   import { useDisplayValue } from '../use-display-value.svelte.js';
   import { useGroupedItems } from '../use-grouped-items.svelte.js';
   import { useSelectedItems } from '../use-selected-items.svelte.js';
+  import { useAsyncComboboxData } from './use-async-combobox-data.svelte.js';
 
   let {
     open = $bindable(false),
@@ -44,48 +45,44 @@
     clearable = false,
 
     items = $bindable([]),
+    selectedItems = $bindable([]),
 
     maxContentHeight,
 
     loading: loadingSnippet,
     pageSize = 10,
     callback,
+    loadItems,
     loadImmediate = true,
+    debounceMs,
     searchDebounce = 300,
     dependsOn,
     clearOnDependencyChange = true,
+    onDependencyChange,
     onSelect = noop,
 
     ...restProps
   }: ComboboxAsyncProps<TItem> = $props();
 
-  const isMultiple = type === 'multiple';
+  const getDefaultValue = () => (type === SELECTION_TYPE.MULTIPLE ? [] : '');
+  const isMultiple = $derived.by(() => type === SELECTION_TYPE.MULTIPLE);
 
   // Initialize value based on type
   if (value === undefined) {
-    const defaultValue = type === SELECTION_TYPE.SINGLE ? '' : [];
-    value = defaultValue;
+    value = getDefaultValue();
   }
 
   watch.pre(
     () => value,
     () => {
       if (value !== undefined) return;
-      value = type === SELECTION_TYPE.SINGLE ? '' : [];
+      value = getDefaultValue();
     }
   );
 
-  // let items = $state<CommandItem[]>(initialItems);
-  let isLoading = $state(false);
-  let isSearching = $state(false);
-  let hasMore = $state(false);
-  let currentPage = $state(1);
-  let error = $state<string | null>(null);
-  let lastSearch = $state('');
-
   let listRef = $state<HTMLElement | null>(null);
 
-  const createCollection = (itemList: CommandItem[]): CommandCollection => {
+  const createCollection = (itemList: ComboboxItem[]): CommandCollection => {
     const groupOrderMap = new Map<string, number>();
     groups.forEach((g, index) => {
       groupOrderMap.set(g.value, g.order ?? index);
@@ -113,11 +110,13 @@
     value: boxWith(() => value!),
     collection: boxWith(() => collection),
     placeholder: boxWith(() => placeholder),
+    selectedItems: boxWith(() => selectedItems),
   });
 
-  const selectedItems = useSelectedItems({
+  const resolvedSelectedItems = useSelectedItems({
     value: boxWith(() => value!),
     collection: boxWith(() => collection),
+    selectedItems: boxWith(() => selectedItems),
   });
 
   const isSelected = (itemValue: string): boolean => {
@@ -125,6 +124,8 @@
     return value === itemValue;
   };
 
+  const getItemKey = (item: ComboboxItem) => item.key ?? item.value;
+
   const isPlaceholder = $derived.by(() => {
     if (Array.isArray(value)) return value.length === 0;
     return typeof value === 'string' && value.trim() === '';
@@ -132,109 +133,61 @@
 
   const hasResults = $derived(collection.size > 0);
 
-  const fetchData = async (page: number, search: string, append = false) => {
-    if (isLoading) return;
-
-    isLoading = true;
-    isSearching = !append;
-    error = null;
-
-    try {
-      const result = await callback({ page, pageSize, search });
-
-      if (append) {
-        items = [...items, ...result.items];
-      } else {
-        items = result.items;
-      }
-
-      currentPage = page;
-      hasMore = result.hasMore;
-      lastSearch = search;
-    } catch (err) {
-      error = err instanceof Error ? err.message : 'Failed to fetch data';
-    } finally {
-      isLoading = false;
-      isSearching = false;
+  const resolvedLoadItems = $derived.by(() => {
+    const loader = loadItems ?? callback;
+    if (!loader) {
+      throw new Error('Combobox.Async requires either loadItems or callback');
     }
-  };
 
-  // Debounced search handler
-  const debouncedSearchValue = new Debounced(() => searchValue, searchDebounce);
+    return loader;
+  });
 
-  const search = (search: string) => {
-    currentPage = 1;
-    fetchData(1, search, false);
-  };
+  const asyncData = useAsyncComboboxData<TItem>({
+    items: boxWith(
+      () => items,
+      (next) => {
+        items = next;
+      }
+    ),
+    loadItems: boxWith(() => resolvedLoadItems),
+    search: boxWith(
+      () => searchValue,
+      (next) => {
+        searchValue = next;
+      }
+    ),
+    pageSize: boxWith(() => pageSize),
+    debounceMs: boxWith(() => debounceMs ?? searchDebounce),
+    loadImmediate: boxWith(() => loadImmediate),
+    dependency: boxWith(() => dependsOn?.()),
+    onDependencyReset: (dependency) => {
+      onDependencyChange?.(dependency);
 
-  // Watch for search value changes
-  watch(
-    () => debouncedSearchValue.current,
-    () => {
-      search(debouncedSearchValue.current);
+      if (clearOnDependencyChange) {
+        value = isMultiple ? [] : '';
+        selectedItems = [];
+      }
     },
-    {
-      lazy: true,
-    }
-  );
+  });
+
+  const isLoading = $derived(asyncData.isLoading);
+  const isSearching = $derived(asyncData.isSearching);
+  const hasMore = $derived(asyncData.hasMore);
+  const error = $derived(asyncData.error);
 
-  // Fetch on first open
   watch(
     () => open,
     () => {
       if (!open) return;
+      if (items.length > 0 || isLoading || loadImmediate) return;
 
-      // If no items yet and not loading, fetch first page
-      if (items.length === 0 && !isLoading && !loadImmediate) {
-        fetchData(1, searchValue);
-        return;
-      }
-    }
-  );
-
-  // Fetch immediate data on mount
-  onMountEffect(() => {
-    if (loadImmediate) fetchData(1, searchValue);
-  });
-
-  // Reset page on unmount
-  $effect(() => {
-    return () => {
-      currentPage = 1;
-    };
-  });
-
-  // Watch for dependency changes and reset
-  let previousDependency = $state<unknown>(dependsOn?.());
-  watch(
-    () => dependsOn?.(),
-    (newValue) => {
-      if (previousDependency === undefined && newValue === undefined) return;
-      if (previousDependency === newValue) return;
-
-      previousDependency = newValue;
-
-      // Reset state
-      items = [];
-      currentPage = 1;
-      hasMore = true;
-      error = null;
-      searchValue = '';
-      lastSearch = '';
-
-      // Clear selected value if enabled
-      if (clearOnDependencyChange) {
-        value = isMultiple ? [] : '';
-      }
-
-      // Reload data
-      fetchData(1, '');
+      asyncData.reload(searchValue);
     }
   );
 
   const loadMore = () => {
     if (!isLoading && hasMore) {
-      fetchData(currentPage + 1, searchValue, true);
+      asyncData.loadMore();
     }
   };
 
@@ -256,8 +209,7 @@
   };
 
   const retry = () => {
-    error = null;
-    fetchData(currentPage, searchValue);
+    asyncData.retry();
   };
 
   const scrollToTop = () => {
@@ -268,24 +220,45 @@
       behavior: 'smooth',
     });
   };
-  function onSelectItem(item: CommandItem) {
+
+  const cacheSelectedItem = (item: TItem) => {
+    selectedItems = [...selectedItems.filter((selectedItem) => selectedItem.value !== item.value), item];
+  };
+
+  const removeSelectedItem = (itemValue: string) => {
+    selectedItems = selectedItems.filter((selectedItem) => selectedItem.value !== itemValue);
+  };
+
+  function onSelectItem(item: ComboboxItem) {
+    const typedItem = item as TItem;
+
     if (Array.isArray(value)) {
       let result = value;
       if (value.includes(item.value)) {
-        result = allowDeselect ? value.filter((v) => v !== item.value) : value;
+        if (allowDeselect) {
+          result = value.filter((v) => v !== item.value);
+          removeSelectedItem(item.value);
+        }
       } else {
         result = [...value, item.value];
+        cacheSelectedItem(typedItem);
       }
-      onSelect(result, item as TItem);
+      onSelect(result, typedItem);
       value = result;
     } else {
-      let result = value;
+      let result = typeof value === 'string' ? value : '';
       if (item.value === value) {
-        result = allowDeselect ? '' : value;
+        if (allowDeselect) {
+          result = '';
+          selectedItems = [];
+        } else {
+          cacheSelectedItem(typedItem);
+        }
       } else {
         result = item.value;
+        selectedItems = [typedItem];
       }
-      onSelect(result, item as TItem);
+      onSelect(result, typedItem);
       value = result;
     }
 
@@ -307,11 +280,15 @@
 {#snippet clearBtn()}
   {#if clearable && isNotEmpty}
     <button
+      aria-label="Clear selection"
       class="cgui:ms-auto cgui:text-icon-regular cgui:size-4 cgui:cursor-pointer cgui:flex cgui:items-center cgui:justify-center cgui:shrink-0"
       type="button"
       onclick={(event) => {
         event.stopPropagation();
-        value = isMultiple ? [] : '';
+        const nextValue = isMultiple ? [] : '';
+        value = nextValue;
+        selectedItems = [];
+        onSelect(nextValue, null);
       }}
     >
       <Icon.Cross class="cgui:ms-auto" width={16} height={16} />
@@ -323,13 +300,15 @@
   {@const triggerProps = {
     class: cn(comboboxTriggerVariants({ variant, size, rounded, fullWidth, class: triggerClass })),
     'data-placeholder': boolAttr(isPlaceholder),
+    'aria-expanded': open,
+    'aria-busy': isLoading,
   }}
   {#if labelSnippet}
     <PopoverPrimitive.Trigger {...triggerProps}>
       {@render labelSnippet({
         placeholder: displayValue.current,
         value: isMultiple ? (value as string[]) : (value as string),
-        selectedItems: selectedItems.current,
+        selectedItems: resolvedSelectedItems.current,
       })}
 
       {@render clearBtn()}
@@ -349,7 +328,7 @@
   {/if}
 {/snippet}
 
-{#snippet renderItem(item: CommandItem)}
+{#snippet renderItem(item: ComboboxItem)}
   {@const { value: itemValue, label, icon: Icon, shortcut, onSelect: _, ...restItem } = item}
   {@const itemAttrs = {
     value: itemValue,
@@ -388,8 +367,22 @@
   {/if}
 {/snippet}
 
+{#snippet renderEmpty()}
+  {#if typeof empty === 'string'}
+    <CommandPrimitive.Empty>{empty}</CommandPrimitive.Empty>
+  {:else if empty}
+    {@render empty({ props: {} })}
+  {:else}
+    <CommandPrimitive.Empty>No results found</CommandPrimitive.Empty>
+  {/if}
+{/snippet}
+
 {#snippet loadingSpinner()}
-  <div class="cgui:p-4 cgui:flex cgui:items-center cgui:h-full cgui:justify-center cgui:text-icon-default">
+  <div
+    role="status"
+    aria-live="polite"
+    class="cgui:p-4 cgui:flex cgui:items-center cgui:h-full cgui:justify-center cgui:text-icon-default"
+  >
     <Spinner />
   </div>
 {/snippet}
@@ -401,7 +394,7 @@
 {/snippet}
 
 {#snippet errorState()}
-  <div class="cgui:p-4 cgui:text-center cgui:text-body-2">
+  <div role="alert" class="cgui:p-4 cgui:text-center cgui:text-body-2">
     <p class="cgui:text-destructive cgui:mb-2">{error}</p>
     <button type="button" class="cgui:text-sm cgui:text-primary cgui:underline cgui:hover:no-underline" onclick={retry}>
       Try again
@@ -435,7 +428,7 @@
                     <CommandPrimitive.GroupHeading>{group?.label ?? groupKey}</CommandPrimitive.GroupHeading>
 
                     <CommandPrimitive.GroupItems>
-                      {#each groupItems as item (item.value)}
+                      {#each groupItems as item (getItemKey(item))}
                         {@render renderItem(item)}
                       {/each}
                     </CommandPrimitive.GroupItems>
@@ -446,7 +439,7 @@
                   </CommandPrimitive.Group>
                 {:else}
                   <CommandPrimitive.Group value="__ungrouped__">
-                    {#each groupItems as item (item.value)}
+                    {#each groupItems as item (getItemKey(item))}
                       {@render renderItem(item)}
                     {/each}
                   </CommandPrimitive.Group>
@@ -463,7 +456,7 @@
                 {@render loadingMore()}
               {/if}
             {:else}
-              <CommandPrimitive.Empty>No results found</CommandPrimitive.Empty>
+              {@render renderEmpty()}
             {/if}
           </CommandPrimitive.Viewport>
 

package/dist/components/combobox/presets/async/combobox.async.svelte.d.ts

@@ -1,26 +1,25 @@
-import type { CommandItem } from '../../../command/index.js';
-import type { ComboboxAsyncProps } from '../../types.js';
-declare function $$render<TItem extends CommandItem>(): {
+import type { ComboboxAsyncProps, ComboboxItem } from '../../types.js';
+declare function $$render<TItem extends ComboboxItem>(): {
     props: ComboboxAsyncProps<TItem>;
     exports: {};
-    bindings: "value" | "open" | "items" | "searchValue";
+    bindings: "value" | "open" | "items" | "searchValue" | "selectedItems";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<TItem extends CommandItem> {
+declare class __sveltets_Render<TItem extends ComboboxItem> {
     props(): ReturnType<typeof $$render<TItem>>['props'];
     events(): ReturnType<typeof $$render<TItem>>['events'];
     slots(): ReturnType<typeof $$render<TItem>>['slots'];
-    bindings(): "value" | "open" | "items" | "searchValue";
+    bindings(): "value" | "open" | "items" | "searchValue" | "selectedItems";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TItem extends CommandItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TItem>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TItem>['props']>, ReturnType<__sveltets_Render<TItem>['events']>, ReturnType<__sveltets_Render<TItem>['slots']>> & {
+    new <TItem extends ComboboxItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TItem>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TItem>['props']>, ReturnType<__sveltets_Render<TItem>['events']>, ReturnType<__sveltets_Render<TItem>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<TItem>['bindings']>;
     } & ReturnType<__sveltets_Render<TItem>['exports']>;
-    <TItem extends CommandItem>(internal: unknown, props: ReturnType<__sveltets_Render<TItem>['props']> & {}): ReturnType<__sveltets_Render<TItem>['exports']>;
+    <TItem extends ComboboxItem>(internal: unknown, props: ReturnType<__sveltets_Render<TItem>['props']> & {}): ReturnType<__sveltets_Render<TItem>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const Combobox: $$IsomorphicComponent;
-type Combobox<TItem extends CommandItem> = InstanceType<typeof Combobox<TItem>>;
+type Combobox<TItem extends ComboboxItem> = InstanceType<typeof Combobox<TItem>>;
 export default Combobox;

package/dist/components/combobox/presets/async/use-async-combobox-data.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { ComboboxAsyncLoader, ComboboxItem } from '../../types.js';
+import type { ReadableBoxedValues, WritableBoxedValues } from 'svelte-toolbelt';
+export declare const ASYNC_STATUS: {
+    readonly IDLE: "idle";
+    readonly LOADING: "loading";
+    readonly SEARCHING: "searching";
+    readonly LOADING_MORE: "loadingMore";
+    readonly ERROR: "error";
+};
+export type AsyncStatus = (typeof ASYNC_STATUS)[keyof typeof ASYNC_STATUS];
+type Options<TItem extends ComboboxItem> = WritableBoxedValues<{
+    items: TItem[];
+    search: string;
+}> & ReadableBoxedValues<{
+    loadItems: ComboboxAsyncLoader<TItem>;
+    pageSize: number;
+    debounceMs: number;
+    loadImmediate: boolean;
+    dependency: unknown;
+}> & {
+    onDependencyReset?: (value: unknown) => void;
+};
+export declare function useAsyncComboboxData<TItem extends ComboboxItem>(opts: Options<TItem>): {
+    readonly status: AsyncStatus;
+    readonly error: string | null;
+    readonly hasMore: boolean;
+    readonly currentPage: number;
+    readonly isLoading: boolean;
+    readonly isSearching: boolean;
+    readonly isLoadingMore: boolean;
+    reload: (search?: string) => Promise<void>;
+    loadMore: () => Promise<void>;
+    retry: () => Promise<void>;
+    abort: () => void;
+};
+export {};

package/dist/components/combobox/presets/async/use-async-combobox-data.svelte.js

@@ -0,0 +1,113 @@
+import { Debounced, watch } from 'runed';
+import { onMount } from 'svelte';
+export const ASYNC_STATUS = {
+    IDLE: 'idle',
+    LOADING: 'loading',
+    SEARCHING: 'searching',
+    LOADING_MORE: 'loadingMore',
+    ERROR: 'error',
+};
+export function useAsyncComboboxData(opts) {
+    let status = $state(ASYNC_STATUS.IDLE);
+    let error = $state(null);
+    let hasMore = $state(false);
+    let currentPage = $state(1);
+    let committedSearch = $state('');
+    let requestId = 0;
+    let controller = null;
+    const abortCurrent = () => {
+        requestId += 1;
+        controller?.abort();
+        controller = null;
+    };
+    const run = async (page, search, append = false) => {
+        if (append && (status === ASYNC_STATUS.LOADING_MORE || !hasMore))
+            return;
+        abortCurrent();
+        const id = requestId;
+        const localController = new AbortController();
+        controller = localController;
+        status = append
+            ? ASYNC_STATUS.LOADING_MORE
+            : opts.items.current.length > 0
+                ? ASYNC_STATUS.SEARCHING
+                : ASYNC_STATUS.LOADING;
+        error = null;
+        try {
+            const result = await opts.loadItems.current({
+                page,
+                pageSize: opts.pageSize.current,
+                search,
+                signal: localController.signal,
+                dependency: opts.dependency.current,
+            });
+            if (localController.signal.aborted || id !== requestId)
+                return;
+            opts.items.current = append ? [...opts.items.current, ...result.items] : result.items;
+            currentPage = page;
+            committedSearch = search;
+            hasMore = result.hasMore;
+            status = ASYNC_STATUS.IDLE;
+        }
+        catch (err) {
+            if (localController.signal.aborted || id !== requestId)
+                return;
+            error = err instanceof Error ? err.message : 'Failed to fetch data';
+            status = ASYNC_STATUS.ERROR;
+        }
+    };
+    const reload = (search = opts.search.current) => run(1, search, false);
+    const loadMore = () => run(currentPage + 1, committedSearch, true);
+    const retry = () => run(currentPage, committedSearch, currentPage > 1);
+    const debouncedSearch = new Debounced(() => opts.search.current, opts.debounceMs.current);
+    watch(() => debouncedSearch.current, (search) => {
+        reload(search);
+    }, { lazy: true });
+    let previousDependency = $state(opts.dependency.current);
+    watch(() => $state.snapshot(opts.dependency.current), (dependency) => {
+        if (Object.is(previousDependency, dependency))
+            return;
+        previousDependency = dependency;
+        abortCurrent();
+        opts.items.current = [];
+        opts.search.current = '';
+        opts.onDependencyReset?.(dependency);
+        error = null;
+        hasMore = false;
+        currentPage = 1;
+        committedSearch = '';
+        reload('');
+    }, { lazy: true });
+    onMount(() => {
+        if (opts.loadImmediate.current)
+            reload(opts.search.current);
+        return () => abortCurrent();
+    });
+    return {
+        get status() {
+            return status;
+        },
+        get error() {
+            return error;
+        },
+        get hasMore() {
+            return hasMore;
+        },
+        get currentPage() {
+            return currentPage;
+        },
+        get isLoading() {
+            return (status === ASYNC_STATUS.LOADING || status === ASYNC_STATUS.SEARCHING || status === ASYNC_STATUS.LOADING_MORE);
+        },
+        get isSearching() {
+            return status === ASYNC_STATUS.LOADING || status === ASYNC_STATUS.SEARCHING;
+        },
+        get isLoadingMore() {
+            return status === ASYNC_STATUS.LOADING_MORE;
+        },
+        reload,
+        loadMore,
+        retry,
+        abort: abortCurrent,
+    };
+}

package/dist/components/combobox/presets/root/combobox.svelte

@@ -6,12 +6,12 @@
   import { afterTick, boxWith } from 'svelte-toolbelt';
   import { cubicInOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
-  import { CommandPrimitive, type CommandItem } from '../../../command/index.js';
+  import { CommandPrimitive } from '../../../command/index.js';
   import { Icon, Icon as IconComponent } from '../../../icons/index.js';
   import { Kbd } from '../../../kbd/index.js';
   import { PopoverPrimitive } from '../../../popover/index.js';
   import { comboboxTriggerVariants } from '../../styles.js';
-  import type { ComboboxProps } from '../../types.js';
+  import type { ComboboxItem, ComboboxProps } from '../../types.js';
   import { useDisplayValue } from '../use-display-value.svelte.js';
   import { useGroupedItems } from '../use-grouped-items.svelte.js';
   import { useSelectedItems } from '../use-selected-items.svelte.js';
@@ -84,7 +84,7 @@
     return typeof value === 'string' && value.trim() !== '';
   });
 
-  function onSelectItem(item: CommandItem) {
+  function onSelectItem(item: ComboboxItem) {
     if (Array.isArray(value)) {
       let result = value;
       if (value.includes(item.value)) {
@@ -118,16 +118,21 @@
     if (Array.isArray(value)) return value.includes(itemValue);
     return value === itemValue;
   }
+
+  const getItemKey = (item: ComboboxItem) => item.key ?? item.value;
 </script>
 
 {#snippet clearBtn()}
   {#if clearable && isNotEmpty}
     <button
+      aria-label="Clear selection"
       class="cgui:ms-auto cgui:text-icon-regular cgui:size-4 cgui:cursor-pointer cgui:flex cgui:items-center cgui:justify-center cgui:shrink-0"
       type="button"
       onclick={(event) => {
         event.stopPropagation();
-        value = isMultiple ? [] : '';
+        const nextValue = isMultiple ? [] : '';
+        value = nextValue;
+        onSelect(nextValue, null);
       }}
     >
       <Icon.Cross class="cgui:ms-auto" width={16} height={16} />
@@ -166,7 +171,7 @@
   {/if}
 {/snippet}
 
-{#snippet renderItem(item: CommandItem)}
+{#snippet renderItem(item: ComboboxItem)}
   {@const { value: itemValue, label, icon: Icon, shortcut, onSelect: _, ...restItem } = item}
   {@const itemAttrs = {
     value: itemValue,
@@ -205,6 +210,16 @@
   {/if}
 {/snippet}
 
+{#snippet renderEmpty()}
+  {#if typeof empty === 'string'}
+    <CommandPrimitive.Empty>{empty}</CommandPrimitive.Empty>
+  {:else if empty}
+    {@render empty({ props: {} })}
+  {:else}
+    <CommandPrimitive.Empty>No results found</CommandPrimitive.Empty>
+  {/if}
+{/snippet}
+
 <PopoverPrimitive.Root bind:open {...restProps}>
   {@render renderTrigger()}
 
@@ -215,7 +230,7 @@
 
         <CommandPrimitive.List class="cgui:rounded-inherit" style={{ maxHeight: maxContentHeight }}>
           <CommandPrimitive.Viewport>
-            <CommandPrimitive.Empty>No results found</CommandPrimitive.Empty>
+            {@render renderEmpty()}
 
             {#each groupedItems.items.current as [groupKey, items] (groupKey || '__ungrouped__')}
               {#if groupKey}
@@ -224,7 +239,7 @@
                   <CommandPrimitive.GroupHeading>{group?.label ?? groupKey}</CommandPrimitive.GroupHeading>
 
                   <CommandPrimitive.GroupItems>
-                    {#each items as item (item.value)}
+                    {#each items as item (getItemKey(item))}
                       {@render renderItem(item)}
                     {/each}
                   </CommandPrimitive.GroupItems>
@@ -235,7 +250,7 @@
                 </CommandPrimitive.Group>
               {:else}
                 <CommandPrimitive.Group value="__ungrouped__">
-                  {#each items as item (item.value)}
+                  {#each items as item (getItemKey(item))}
                     {@render renderItem(item)}
                   {/each}
                 </CommandPrimitive.Group>

package/dist/components/combobox/presets/use-display-value.svelte.d.ts

@@ -1,9 +1,12 @@
 import type { CommandCollection } from '../../command/types.js';
-import { type ReadableBoxedValues } from 'svelte-toolbelt';
+import type { ComboboxItem } from '../types.js';
+import { type ReadableBox, type ReadableBoxedValues } from 'svelte-toolbelt';
 type Opts = ReadableBoxedValues<{
     value: string | string[];
     collection: CommandCollection;
     placeholder: string;
-}>;
-export declare const useDisplayValue: (opts: Opts) => import("svelte-toolbelt").ReadableBox<string>;
+}> & {
+    selectedItems?: ReadableBox<ComboboxItem[]>;
+};
+export declare const useDisplayValue: (opts: Opts) => ReadableBox<string>;
 export {};

package/dist/components/combobox/presets/use-display-value.svelte.js

@@ -2,14 +2,18 @@ import { boxWith } from 'svelte-toolbelt';
 export const useDisplayValue = (opts) => {
     const res = $derived.by(() => {
         const { value, collection, placeholder } = opts;
+        const findItem = (itemValue) => {
+            return (collection.current.items.find((item) => item.value === itemValue) ??
+                opts.selectedItems?.current.find((item) => item.value === itemValue));
+        };
         if (typeof value.current === 'string' && value.current.trim() !== '') {
-            const item = collection.current.items.find((i) => i.value === value.current);
+            const item = findItem(value.current);
             return item?.label ?? value.current;
         }
         if (Array.isArray(value.current) && value.current.length > 0) {
             return value.current
                 .map((v) => {
-                const item = collection.current.items.find((i) => i.value === v);
+                const item = findItem(v);
                 return item?.label ?? v;
             })
                 .join(', ');

package/dist/components/combobox/presets/use-selected-items.svelte.d.ts

@@ -1,8 +1,11 @@
-import type { CommandCollection, CommandItem } from '../../command/types.js';
-import { type ReadableBoxedValues } from 'svelte-toolbelt';
+import type { CommandCollection } from '../../command/types.js';
+import type { ComboboxItem } from '../types.js';
+import { type ReadableBox, type ReadableBoxedValues } from 'svelte-toolbelt';
 type Opts = ReadableBoxedValues<{
     value: string | string[];
     collection: CommandCollection;
-}>;
-export declare const useSelectedItems: (opts: Opts) => import("svelte-toolbelt").ReadableBox<CommandItem[]>;
+}> & {
+    selectedItems?: ReadableBox<ComboboxItem[]>;
+};
+export declare const useSelectedItems: (opts: Opts) => ReadableBox<import("../../command/types.js").CommandItem[]>;
 export {};

package/dist/components/combobox/presets/use-selected-items.svelte.js

@@ -2,14 +2,16 @@ import { boxWith } from 'svelte-toolbelt';
 export const useSelectedItems = (opts) => {
     const { value, collection } = opts;
     const res = $derived.by(() => {
+        const findItem = (itemValue) => {
+            return (collection.current.items.find((item) => item.value === itemValue) ??
+                opts.selectedItems?.current.find((item) => item.value === itemValue));
+        };
         if (typeof value.current === 'string' && value.current.trim() !== '') {
-            const item = collection.current.items.find((i) => i.value === value.current);
+            const item = findItem(value.current);
             return item ? [item] : [];
         }
         if (Array.isArray(value.current) && value.current.length > 0) {
-            return value.current
-                .map((v) => collection.current.items.find((i) => i.value === v))
-                .filter((i) => i !== undefined);
+            return value.current.map((v) => findItem(v)).filter((i) => i !== undefined);
         }
         return [];
     });

package/dist/components/combobox/types.d.ts

@@ -4,6 +4,9 @@ import type { CommandGroup, CommandItem, CommandProps } from '../command/index.j
 import type { PrimitivePopoverRootProps } from '../popover/types.js';
 import type { ComboboxTriggerVariantsProps } from './styles.js';
 export type ComboboxRootProps = PrimitivePopoverRootProps;
+export type ComboboxItem = CommandItem & {
+    key?: string | number;
+};
 /**
  * Base props shared by both single and multiple selection modes
  */
@@ -29,10 +32,10 @@ type ComboboxBaseProps = PrimitivePopoverRootProps & ComboboxTriggerVariantsProp
     label?: Snippet<[{
         placeholder: string;
         value: string | string[];
-        selectedItems: CommandItem[];
+        selectedItems: ComboboxItem[];
     }]>;
     /** Callback when selection changes */
-    onSelect?: (value: string | string[], item: CommandItem | null) => void;
+    onSelect?: (value: string | string[], item: ComboboxItem | null) => void;
 };
 type ComboboxSingleProps = ComboboxBaseProps & {
     type: typeof SELECTION_TYPE.SINGLE;
@@ -46,58 +49,63 @@ export type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;
 /**
  * Async Combobox Types
  */
-export type ComboboxAsyncCallbackParams = {
+export type ComboboxAsyncLoadParams = {
     page: number;
     pageSize: number;
     search: string;
+    signal: AbortSignal;
+    dependency?: unknown;
 };
-export type ComboboxAsyncCallbackResult<TItem extends CommandItem> = {
+export type ComboboxAsyncLoadResult<TItem extends ComboboxItem> = {
     items: TItem[];
     hasMore: boolean;
 };
-export type ComboboxAsyncCallback<TItem extends CommandItem = CommandItem> = (params: ComboboxAsyncCallbackParams) => Promise<ComboboxAsyncCallbackResult<TItem>>;
-type ComboboxAsyncBaseProps<TItem extends CommandItem> = Omit<ComboboxBaseProps, 'collection' | 'item' | 'onSelect'> & {
+export type ComboboxAsyncLoader<TItem extends ComboboxItem = ComboboxItem> = (params: ComboboxAsyncLoadParams) => Promise<ComboboxAsyncLoadResult<TItem>>;
+/** @deprecated Use ComboboxAsyncLoadParams instead. */
+export type ComboboxAsyncCallbackParams = ComboboxAsyncLoadParams;
+/** @deprecated Use ComboboxAsyncLoadResult instead. */
+export type ComboboxAsyncCallbackResult<TItem extends ComboboxItem> = ComboboxAsyncLoadResult<TItem>;
+/** @deprecated Use ComboboxAsyncLoader instead. */
+export type ComboboxAsyncCallback<TItem extends ComboboxItem = ComboboxItem> = ComboboxAsyncLoader<TItem>;
+type ComboboxAsyncLoadProp<TItem extends ComboboxItem> = {
+    /** Preferred async loader API */
+    loadItems: ComboboxAsyncLoader<TItem>;
+    callback?: never;
+} | {
+    /** @deprecated Use loadItems instead. Kept for backwards compatibility. */
+    callback: ComboboxAsyncLoader<TItem>;
+    loadItems?: never;
+};
+type ComboboxAsyncBaseProps<TItem extends ComboboxItem> = Omit<ComboboxBaseProps, 'collection' | 'item' | 'onSelect'> & ComboboxAsyncLoadProp<TItem> & {
     items?: TItem[];
+    /** Cache of selected item objects, useful when selected values are not in the currently loaded async page. */
+    selectedItems?: TItem[];
     item?: Snippet<[{
         item: TItem;
         props: Record<string, unknown>;
     }]>;
-    /** Callback when selection changes */
     onSelect?: (value: string | string[], item: TItem | null) => void;
-    /** Loading state renderer */
     loading?: Snippet;
-    /** Current page (default: 1) */
-    page?: number;
-    /** Page size for pagination (default: 20) */
     pageSize?: number;
-    /** Async data callback */
-    callback: ComboboxAsyncCallback<TItem>;
-    /** Load immediate data when combobox is mounted (default: true) */
     loadImmediate?: boolean;
-    /** Group definitions (for labels/ordering) */
     groups?: CommandGroup[];
-    /** Debounce delay for search in milliseconds (default: 300ms) */
+    /** Preferred name */
+    debounceMs?: number;
+    /** @deprecated Use debounceMs instead. */
     searchDebounce?: number;
-    /**
-     * Getter function for dependency tracking. When the returned value changes,
-     * the component will reset items, page to 1, clear selected value, and reload data.
-     * @example dependsOn={() => parentSelectValue}
-     */
     dependsOn?: () => unknown;
-    /**
-     * Whether to clear the selected value when dependsOn changes **(default: true)**
-     */
     clearOnDependencyChange?: boolean;
+    onDependencyChange?: (value: unknown) => void;
 };
-type ComboboxAsyncSingleProps<TItem extends CommandItem> = ComboboxAsyncBaseProps<TItem> & {
+type ComboboxAsyncSingleProps<TItem extends ComboboxItem> = ComboboxAsyncBaseProps<TItem> & {
     /** Selection mode (default: 'single') */
     type?: 'single';
     value?: string;
 };
-type ComboboxAsyncMultipleProps<TItem extends CommandItem> = ComboboxAsyncBaseProps<TItem> & {
+type ComboboxAsyncMultipleProps<TItem extends ComboboxItem> = ComboboxAsyncBaseProps<TItem> & {
     /** Selection mode */
     type: 'multiple';
     value?: string[];
 };
-export type ComboboxAsyncProps<TItem extends CommandItem> = ComboboxAsyncSingleProps<TItem> | ComboboxAsyncMultipleProps<TItem>;
+export type ComboboxAsyncProps<TItem extends ComboboxItem> = ComboboxAsyncSingleProps<TItem> | ComboboxAsyncMultipleProps<TItem>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casinogate/ui",
-  "version": "1.11.12",
+  "version": "1.11.14",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",