<!-- 
  Component: command.html
  Configurable State: themeColor ('primary'|'secondary'|'destructive'), size ('sm'|'md'|'lg'), isOpen (boolean)
  Usage: Bind styles dynamically using hx-class="{ 'bg-primary': themeColor === 'primary' }" or hx-style="{ width: size === 'lg' ? '100%' : 'auto' }"
-->
<div hx-ext="reactive" hx-state="{ themeColor: \'primary\', size: \'md\', isOpen: false }"  class="flex flex-col overflow-hidden rounded-md bg-popover text-popover-foreground border border-border shadow-md">
  <input class="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground px-4 border-b border-border" placeholder="{placeholder}" hx-post="{search_url}" hx-trigger="input changed delay:200ms" hx-target="#cmd-results" />
  <div id="cmd-results" class="max-h-[300px] overflow-y-auto p-2">
    {initial_results}
  </div>
</div>