.bunt-select.dropdown(:class="dropdownClasses", v-resize-observer="generateOutline")
// inline the input, use css from input component
.bunt-input.dense(ref="searchContainer", :class="{focused: open, 'floating-label': rawSearch.length != 0 || !isValueEmpty, invalid, disabled}", :style="{'--label-gap': floatingLabelWidth}")
.label-input-container
label(:for="name") {{label}}
.icon.mdi(v-if="icon", :class="[iconClass]")
input(type="text", ref="search", :name="name", v-model="rawSearch", :disabled="disabled",
@keydown.delete="maybeDeleteValue",
@keyup.esc="onEscape",
@keydown.up.prevent="typeAheadUp",
@keydown.down.prevent="typeAheadDown",
@keyup.enter.prevent="typeAheadSelect",
@blur="onBlur",
@focus="onFocus",
:placeholder="searchPlaceholder",
autocomplete="off")
i.open-indicator.mdi.mdi-menu-down(ref="openIndicator", role="presentation", @mousedown.prevent.stop="", @click.prevent.stop="toggleDropdown")
svg.outline(ref="outline")
path(:d="outlineStroke")
.hint(v-if="hintIsHtml", v-html="hintText")
.hint(v-else) {{ hintText }}
teleport(v-if="open", :to="buntTeleportTarget")
.bunt-select-dropdown-menu(ref="dropdownMenu", :class="[dropdownClass]", :style="{ 'max-height': maxHeight, 'width': width+'px' }", @mousedown.prevent.stop="")
slot(name="result-header")
.scrollable-menu(v-scrollbar.y="{_preventMousedown: true}")
ul
li(v-for="option, index in filteredOptions", :key="index", :class="{ active: isOptionSelected(option), highlight: index === typeAheadPointer }", @mouseover="typeAheadPointer = index", @click.prevent.stop="select(option)")
slot(:option="option")
| {{ getOptionLabel(option) }}
li.divider(transition="fade", v-if="!filteredOptions.length")
li.text-center(transition="fade" v-if="!filteredOptions.length")
slot(name="no-options") Sorry, no matching options.