<button data-slot="dialog-trigger" onclick="onSearchBarClick(event)"
    class="inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-secondary/80 px-4 py-2 has-[&gt;svg]:px-3 bg-surface text-surface-foreground/60 dark:bg-card relative h-8 w-full justify-start pl-2.5 font-normal shadow-none sm:pr-12 md:w-40 lg:w-56 xl:w-64"
    type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-«R66plb»" data-state="closed">
    <span class="text-muted-foreground hidden lg:inline-flex">Search documentation...</span>
    <span class="text-muted-foreground inline-flex lg:hidden">Search...</span>
    <div class="absolute top-1.5 right-1.5 hidden gap-1 sm:flex">
        <kbd
            class="bg-background text-muted-foreground pointer-events-none flex h-5 items-center justify-center gap-1 rounded border px-1 font-sans text-[0.7rem] font-medium select-none [&amp;_svg:not([class*='size-'])]:size-3">Ctrl</kbd><kbd
            class="bg-background text-muted-foreground pointer-events-none flex h-5 items-center justify-center gap-1 rounded border px-1 font-sans text-[0.7rem] font-medium select-none [&amp;_svg:not([class*='size-'])]:size-3 aspect-square">K</kbd>
    </div>
</button>
<dialog id="search-dialog" onclick="onSearchDialogClick(event)"
    class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-background rounded-lg shadow-lg border overflow-hidden p-0">
    <div class="w-lg gap-4">
        <div class="flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground">
            <div data-slot="command-input-wrapper" class="flex h-9 items-center gap-2 border-b px-3"><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="lucide lucide-search size-4 shrink-0 opacity-50">
                    <circle cx="11" cy="11" r="8"></circle>
                    <path d="m21 21-4.3-4.3"></path>
                </svg>
                <input data-slot="command-input"
                    class="placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
                    placeholder="Search documentation..." cmdk-input="" autocomplete="off" autocorrect="off"
                    spellcheck="false" aria-autocomplete="list" role="combobox" aria-expanded="true"
                    aria-controls="radix-«r1t6»" aria-labelledby="radix-«r1t7»" id="radix-«r1t8»" type="text" value=""
                    aria-activedescendant="radix-«r1th»" oninput="onInputHandler(event)">
            </div>
        </div>
        <div id="mkdocs-search-results">
            <!-- search results go there -->
        </div>
    </div>
</dialog>
<script>
    document.removeEventListener("keydown", searchShortcutHandler);
    document.addEventListener("keydown", searchShortcutHandler);
</script>