Add <Search />: site-wide search as a command palette

[NullVoxPopuli-ai-agent]

The ⌘K for a kolay site. Built on <CommandPalette>, which shipped in ember-primitives 0.62.0.

import { Search } from 'kolay/components';

<template>
  <Search />
</template>

Nothing to index and nothing to configure. The docs() plugin already writes every page's title, headings, and prose into the compiled docs, so this is searcher rendered, the utility that shipped in #372 and until now had only the search page to be used by. Same for stripFormatting and highlightSearch, which produce and mark the excerpts.

What it is

<CommandPalette> filled in with kolay's index, inside a <Modal> so the trigger button can sit outside the dialog:

• the <dialog> handles the layer, the focus trap, and returning focus to whatever opened it
• aria-activedescendant handles the keyboard, so ↑/↓ move the selection while the caret stays where the reader is typing
• Enter clicks the active result, which is a real link, so the router navigates and ⌘-click still opens a new tab
• Esc, and a click outside, close it

Async throughout: a plain .md page's text is fetched on demand, and the palette re-activates the best result whenever the list changes underneath.

Arguments and blocks

@hotkey (default "mod+k", "" to disable), @minLength (3), @limit (20), @placeholder.

Both blocks are optional and replace a default. :trigger is yielded open and the modifier that returns focus to the trigger when the palette closes. :result is yielded the result and the query.

Styling

Default styles ship in kolay.css, which consumers already import. Colours are --kolay-search-* variables, so a host site sets values rather than restating layout. The docs app maps them to pico's in six lines.

The active result is [data-active="true"], set by the pointer and the keyboard alike. There is no :hover rule, deliberately: one selector for both inputs means they can never disagree about what Enter will do.

The palette's stylesheet also answers frameworks that style a bare dialog as a full-screen box around an <article> card. Pico is one. min-width: 100% outranks any width the palette sets, and centring the children squashes the input and the results.

Two fixes this needed

The addon typecheck. {{on}} did not typecheck anywhere in src/, which is why there was no way to write a trigger button by hand. Two tsconfig settings disagreed with what Glint needs: moduleResolution: node16 stopped Glint's module augmentations from attaching, so on stayed the bare Opaque<"modifier:on"> that ember-source declares; and types named @glint/ember-tsc, the tool's own API, rather than @glint/ember-tsc/types, the file carrying those augmentations. types also read ember-source out of docs-app/node_modules and now reads the addon's own copy. With the augmentations attached, one real error surfaced in typedoc/signature/component.gts, fixed in the same commit.

stripFormatting and inline HTML. An excerpt rendered press <kbd>K</kbd> verbatim. It drops inline HTML now, keeping the text it wrapped. Lowercase tag names only, so <Search /> written in prose survives.

The docs site

The header's search form is replaced by the palette, which deletes ~75 lines of form and scoped CSS. The /search page stays: the palette is for looking something up and leaving, the page is for a search worth linking to.

Verified

Suites: markdown-only 14/14, docs-app 97 (93 pass, 4 pre-existing skips), test:node 250/250, pnpm lint 21/21 including lint:published-types across node10, node16, and bundler.

Driven in a real browser on the docs app, light and dark: the trigger opens the dialog, the input is a focused combobox, typing gives ranked results with role="option" and highlighted query marks, ↓ moves aria-activedescendant and [data-active] together, and Enter navigates and closes the dialog.

🤖 Generated with Claude Code

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[vercel]

@NullVoxPopuli is attempting to deploy a commit to the universal-ember Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
kolay-docs-app	Ready	Preview	Aug 27, 2026 4:09pm

[NullVoxPopuli]

we need to explain esc to close, like the nvp.ui style. and we need search cancel buttons

[NullVoxPopuli-ai-agent]

Both done.

The footer carries what the listbox is doing on one side and press [Esc] to close on the other, using <Key> the way nvp.ui's menu does.

A clear button appears beside the input once there is something to clear, and hands the caret back to the input so the reader can carry on typing.

Verified with real key events: Esc closes the dialog and focus returns to the trigger, so the hint is accurate. Two tests added in markdown-only (16 pass).

[NullVoxPopuli-ai-agent]

Both fixed.

Closing with a mouse. You were right, there was no way. The footer hint is a button now: it reads Close beside the Esc chip, so it still names the key while being a target. The dialog also carries closedby="any", so a click outside dismisses it. Checked with real mouse events at the CDP level, not synthetic ones: both paths close it and return focus to the trigger.

Height. A modal <dialog> is anchored top and bottom, so an auto height fills the viewport instead of the content, then clamps at max-height. That is why it sat at 665px with an empty 549px results box inside it. Releasing the bottom anchor makes it content-sized. Measured: empty 122px, no matches 124px, three results 518px. The results box collapses to 0 rather than holding its padding open.

One thing this turned up: frameworks give buttons a bottom margin, and the close button had picked up 20px of it. Zeroed on all three buttons.

Two tests added, markdown-only is 17 pass.