Fix Select and Select.ItemLabel composition

[shairez]

Currently the styled Select doesn't allow doing

const Item = component$<PropsOf<typeof HeadlessSelect.Item>>(({ ...props }) => {
  return (
    <HeadlessSelect.Item
      {...props}
      class={cn(
        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
        props.class,
      )}
    >
      <HeadlessSelect.ItemLabel>
        <Slot />
      </HeadlessSelect.ItemLabel>
      <span class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
        <HeadlessSelect.ItemIndicator>
          <LuCheck class="h-4 w-4" />
        </HeadlessSelect.ItemIndicator>
      </span>
    </HeadlessSelect.Item>
  );
});

to consume it like that in the styled kit:

    <Select.Root>
      <Select.Label>Logged in users</Select.Label>
      <Select.Trigger>
        <Select.DisplayText placeholder="Select an option" />
      </Select.Trigger>
      <Select.Popover>
        <Select.Listbox>
          {users.map((user) => (
            <Select.Item key={user}></Select.Item>
          ))}
        </Select.Listbox>
      </Select.Popover>
    </Select.Root>

For that we would need to transform the Headless Select.Item component into an inlined component, which means we would have to make the Select.Item expose a selectItemLabel prop...

Edit:

Might be easier in V2.