{# Inner markup for Alpine `pvCombo` — wrap in x-data="pvCombo({...})". #}
<div class="relative">
    <input type="text"
           x-ref="input"
           x-model="query"
           :readonly="readonly"
           :placeholder="placeholder"
           @focus="onFocus()"
           @input.debounce.150ms="onInput()"
           @keydown.arrow-down.prevent="moveCursor(1)"
           @keydown.arrow-up.prevent="moveCursor(-1)"
           @keydown.enter.prevent="onEnter()"
           @change.stop
           autocomplete="off"
           :class="inputClass()">

    <button type="button"
            x-show="value && allowClear && !readonly"
            @click.stop="clearSelection()"
            aria-label="Clear"
            class="absolute right-1.5 top-1/2 -translate-y-1/2 p-0.5 rounded
                   text-body-subtle hover:text-fg-danger hover:bg-danger-soft">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor"
             viewBox="0 0 24 24" stroke-width="2.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
        </svg>
    </button>
</div>

<p x-show="hint" x-text="hint" class="text-2xs text-body-subtle mt-1"></p>

{# Fixed to viewport so the list stacks above sibling inputs/rows. #}
<div x-show="open" x-cloak x-transition.opacity.duration.100ms
     :style="dropdownStyle()"
     class="bg-neutral-primary border border-default rounded-md shadow-lg text-sm">
    <template x-if="visibleOptions.length === 0">
        <div class="px-3 py-2 text-xs text-body-subtle">No matches.</div>
    </template>
    <ul x-show="visibleOptions.length > 0" role="listbox">
        <template x-for="item in visibleOptions" :key="'pv-' + uid + '-' + item.value">
            <li role="option"
                @click="pick(item)"
                @mousemove="cursor = i"
                :class="i === cursor
                        ? 'bg-brand-softer text-fg-brand'
                        : 'text-body hover:bg-neutral-secondary'"
                class="px-3 py-2 cursor-pointer flex items-center justify-between gap-2">
                <span class="min-w-0">
                    <span class="block truncate" x-text="item.label"></span>
                    <span class="block text-2xs text-body-subtle truncate"
                          x-show="item.value && item.value !== item.label"
                          x-text="item.value"></span>
                </span>
                <span x-show="String(item.value) === String(value)"
                      class="text-2xs text-fg-brand font-medium shrink-0">selected</span>
            </li>
        </template>
    </ul>
</div>