Combobox (autocomplete v3) doesn't support generic values

[DJMogens]

Current Behavior

The combobox currently only takes the prop

(property) ComboboxProps.data?: {
    label: string;
    value: string;
}[] | undefined

So passing anything else than a string would result in type error.

In my case i am getting this error:
Type '{ label: string; value: DocumentReference<Range, DocumentData>; }[]' is not assignable to type '{ label: string; value: string; }[]'.

Expected Behavior

The Autocomplete in v2 could take a generic type Value in value, which was much more useful

export interface AutocompleteOption<Value = unknown, Meta = unknown> {
	/** Provide a unique display label per option. Supports HTML. */
	label: string;
	/** Provide a unique option value. */
	value: Value;
	/** Provide a comma separated list of keywords. */
	keywords?: string;
	/** Pass arbitrary data per option. */
	meta?: Meta;
}

Steps To Reproduce

Create data for the combobox with any other Value:

<script lang="ts">
  import { Combobox } from '@skeletonlabs/skeleton-svelte';

  interface ComboxData {
    label: string;
    value: number;
  }

  const comboboxData: ComboxData[] = [
    { label: 'United States', value: 2 },
    { label: 'Germany', value: 3 },
    { label: 'Japan', value: 4 }
  ];

  let selectedCountry = $state(['US']);
</script>

<Combobox data={comboboxData} bind:value={selectedCountry} label="Select Country" placeholder="Select..." />

Link to Reproduction / Stackblitz

No response

More Information

No response

[endigo9740]

@DJMogens I understand wanting to draw comparison to Skeleton v2, but that's not relevant in this case. A major part of Skeleton v3 is that we're rebuilding all components from the ground up using a system called Zag.js. This means we get all the benefits that Zag provides out of the box - new features, improved a11y, etc. But it does mean that in some cases we are limited to how their their primitives function.

In the case of Combobox, values only support strings:
https://zagjs.com/components/react/combobox#setting-the-initial-value

I'd understand if this is not desirable, but keep in mind we're providing all four forms of Popovers as temporary solutions for Svelte users until we can complete and launch Floating UI Svelte. At which point users will have full control over how popovers are generated.
https://next.skeleton.dev/docs/integrations/popover/svelte/

Progress has resumed on Floating UI Svelte, however, we do not have an ETA for launch. If the Skeleton component does not fulfill your needs, then you will need to review options for implementing your own alternative.

Optionally, I will mention that Zag.js is open source. They will take contributions if you wish to submit a PR upstream with improvements to this component. If this is a frustration you're having, others may have a well.

For now, I don't think this is a change we can implement, so I'm going to close this issue. But please do reach out here or on Discord if you have any follow up questions.