"Select" component is still using the old syntax

[haoshuai-mis]

I updated bits-ui to the latest 0.22.0 version. However, I noticed I still cannot use the new syntax mentioned here. My VS Code also shows errors for the new syntax, but the old syntax still works.

The new syntax I use:

<Select.Root type="multiple" bind:value>
  <Select.Trigger
    class="inline-flex h-input w-[296px] select-none items-center rounded-9px border border-border-input bg-background px-[11px] text-sm transition-colors placeholder:text-foreground-alt/50"
    aria-label="Select a theme"
  >
    <Select.Value placeholder="Select a fruit" /> 
    <DownArrow />
  </Select.Trigger>
  <Select.Portal>
    <Select.Content
      class="max-h-96 w-[var(--bits-select-anchor-width)] min-w-[var(--bits-select-anchor-width)] rounded-xl border border-muted bg-background px-1 py-3 shadow-popover outline-none"
      sideOffset={10}
    >
      <Select.Viewport class="p-1">
        {#each options as theme, i (i + theme.value)}
          <Select.Item
            class="flex h-10 w-full select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm capitalize outline-none duration-75 data-[highlighted]:bg-muted"
            value={theme.value}
            label={theme.label}
          >
            {#snippet children({ selected })}
              {theme.label}
            {/snippet}
          </Select.Item>
        {/each}
      </Select.Viewport>
    </Select.Content>
  </Select.Portal>
</Select.Root>

The old syntax that works:

<Select.Root multiple bind:selected={value}>
	<Select.Trigger
    class={`p-2 flex w-[300px] h-12 rounded-md items-center justify-between border-1`}
    aria-label="Select a fruit"
  >
		<Select.Value placeholder="Select a fruit" /> 
    <DownArrow />
	</Select.Trigger>
 
	<Select.Content
    class="border-1 border-gray-300"
  >
    {#each options as option, i (i + option.value)}
      <Select.Item
        class="p-2 flex h-10 w-full select-none items-center rounded-md hover:bg-gray-100"
        value={option.value}
        label={option.label}
      >
        {option.label}
      </Select.Item>
    {/each}

	</Select.Content>
</Select.Root>

[shyakadavis]

@haoshuai-mis

The "new" syntax is for svelte 5 & bits-ui@next.

You need to upgrade to the those versions of each if you wish to use the new syntax.

[haoshuai-mis]

Thank you! I am not aware that we need to install the bits-ui@next library. I will use the old version now until the new version is stable.