Toolbar onValueChange called on init and multiple times on each change

[coryvirok]

Describe the bug

First off, thank you for this wonderful library!

I'm seeing the same behavior for the Toolbar component as in #73.

When using type="multiple", I'm seeing the Toolbar.Group onValueChange callback fired once upon init and multiple times on each change.

E.g.

<script lang="ts">
  import { Separator, Toolbar } from 'bits-ui'

  let text: string[] = []

  function onTextChange(value) {
    console.log('>>>>', value)
  }
</script>

<Toolbar.Root>
  <Toolbar.Group bind:value={text} onValueChange={onTextChange} type="multiple">
    <Toolbar.GroupItem value="bold">
      <BoldIcon />
    </Toolbar.GroupItem>
    <Toolbar.GroupItem value="italic">
      <ItalicIcon />
    </Toolbar.GroupItem>
    <Toolbar.GroupItem value="strikethrough">
      <StrikethroughIcon />
    </Toolbar.GroupItem>
  </Toolbar.Group>
</Toolbar.Root>

The Toolbar component, (and maybe others that accept type="multiple" might need a similar fix as this. Although the real issue seems like it's related to when the onValueChange callback is called since I'm seeing it called multiple times for 1 change.

https://github.com/huntabyte/bits-ui/pull/184/files#diff-1729c77e94aa549e7182aaca8513c234217d3026b2a7ed653e1a208ed2b35703R56

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-ylyzdx?file=src%2Froutes%2F%2Bpage.svelte

Logs

No response

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.3 - /usr/local/bin/pnpm
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.5.5 
    bits-ui: ^0.21.2 => 0.21.2 
    svelte: ^4.2.7 => 4.2.13

Severity

annoyance

[coryvirok]

Thank you for the quick turnaround!