A combobox with a custom trigger icon

<!--
  Оригинал условно рендерит "голый" `ComboboxPrimitive.Trigger` (Base UI,
  без обёрточных классов `cn-combobox-trigger`) с иконкой
  `ChevronsUpDownIcon` вместо стандартного шеврона, когда значение не
  выбрано. Здесь — тот же приём инлайнового `<svg>`, что и везде (путь
  lucide "chevrons-up-down"), внутри простого контейнера с тем же
  `data-slot`, без интерактивности (кейс проверяет только закрытое поле
  ввода, реальный toggle-триггер здесь не задействован).

  `:show-clear="!!value"`: у Base UI `Combobox.Clear` скрывает себя, пока
  значение пусто (`visible = selectedValue != null`, см. исходник пакета).
  У reka-ui `ComboboxCancel` такой видимостной логики нет — кнопка рендерится
  всегда, пока `showClear` истинно. Порт (`ComboboxInput.vue`) переносит
  `showClear` как есть (простой `v-if`), поэтому видимость по значению
  воспроизведена здесь, на уровне блока, а не в примитиве.
-->
<script setup lang="ts">
import { ref } from "vue"
import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "@/components/ui/combobox"
import { Field } from "@/components/ui/field"

const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]
const value = ref<string | null>(null)
</script>

<template>
  <Field class="max-w-xs">
    <Combobox
      :model-value="value"
      @update:model-value="(v) => (value = v as string | null)"
    >
      <ComboboxInput
        placeholder="Select framework"
        :show-trigger="false"
        :show-clear="!!value"
      >
        <span v-if="!value" data-slot="combobox-trigger">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="text-muted-foreground pointer-events-none size-4"
          >
            <path d="m7 15 5 5 5-5" />
            <path d="m7 9 5-5 5 5" />
          </svg>
        </span>
      </ComboboxInput>
      <ComboboxContent>
        <ComboboxEmpty>No items found.</ComboboxEmpty>
        <ComboboxList>
          <ComboboxItem v-for="item in frameworks" :key="item" :value="item">
            {{ item }}
          </ComboboxItem>
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  </Field>
</template>