Command

<div data-slot="command"
  x-data="{
    search: '',
    match(text) { return text.toLowerCase().includes(this.search.trim().toLowerCase()) },
    all() { return [...this.$refs.list.querySelectorAll('[data-slot=command-item]')] },
    found() { return this.all().filter(i => this.match(i.textContent)) },
    items() { return this.all().filter(i => i.offsetParent !== null) },
    move(step) {
      const items = this.items(), at = items.indexOf(document.activeElement);
      const next = items[at + step] || items[step > 0 ? 0 : items.length - 1];
      if (next) next.focus();
    },
  }"
  x-on:keydown.down.prevent="move(1)" x-on:keydown.up.prevent="move(-1)"
  {{ attributes.cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground") }}>{{ slot }}</div>

<div data-slot="command-input-wrapper" class="flex h-9 items-center gap-2 border-b px-3">
  <svg class="size-4 shrink-0 opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
  <input type="text" autocomplete="off" x-model="search" x-on:keydown.enter.prevent="found()[0] && found()[0].click()" data-slot="command-input" {{ attributes.cn("flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50") }} />
</div>

<div role="listbox" data-slot="command-list" x-ref="list" {{ attributes.cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto") }}>{{ slot }}</div>

<div data-slot="command-empty" x-show="search && !found().length" x-cloak {{ attributes.cn("py-6 text-center text-sm") }}>{{ slot }}</div>

@props({'heading': ''})
<div role="group" data-slot="command-group" x-show="[...$el.querySelectorAll('[data-slot=command-item]')].some(i => match(i.textContent))" {{ attributes.cn("overflow-hidden p-1 text-foreground") }}>
  <div data-slot="command-group-heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">{{ heading }}</div>
  {{ slot }}
</div>

@props({'href': None})
<a role="option" data-slot="command-item" @if(href)href="{{ href }}"@endif tabindex="0" x-show="match($el.textContent)" {{ attributes.cn("relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground") }}>{{ slot }}</a>

<div role="separator" data-slot="command-separator" x-show="!search" {{ attributes.cn("-mx-1 h-px bg-border") }}></div>

<span data-slot="command-shortcut" {{ attributes.cn("ml-auto text-xs tracking-widest text-muted-foreground") }}>{{ slot }}</span>