Binding to select makes "value" entire KV object, instead of "value" property

[zicho]

Describe the bug

I am trying to bind the selected object (a KV pair) to a store. However, it seems that the store value gets the entire KV pair as it's value instead of the "value" property of the KV item.

So for example.

// store.ts
import { readable, writable, get } from 'svelte/store';

export type TSelectable = { value: string; label: string; }

export const items = readable<TSelectable[]>(
  [
    { value: 'one', label: 'One' },
    { value: 'two', label: 'Two' },
    { value: 'three', label: 'Three' },
  ]
);

export const selectedItem = writable<TSelectable>(get(items)[0]);

// +page.svelte
<script lang="ts">
import * as Select from '$lib/components/ui/select/index.js';
import { items, selectedItem } from '$lib/store';

$:{
    // on load, prints 'one', but after change, it prints the value as the entire KV object 
    console.dir($selectedItem.value) 
}
</script>

<Select.Root bind:selected={$selectedItem}>

See repro below

Reproduction

https://github.com/zicho/shadcn-svelte-select-issue-repro

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
    Memory: 22.04 GB / 39.37 GB
  Binaries:
    Node: 21.7.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (125.0.2535.92)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.5.10
    bits-ui: ^0.21.10 => 0.21.10
    lucide-svelte: ^0.390.0 => 0.390.0
    svelte: ^4.2.7 => 4.2.18

Severity

annoyance