Search tool

The search trigger's presentation class and behavior hook are independent:mr-search-trigger styles it and data-mr-searchenables the enhancement.

Use exactly one of data-mr-search-static-url ordata-mr-search-dynamic-url. Generated search parts usemr-search* presentation classes and data-mr-search-parthooks.

Layer dependency

Search creates a native <dialog> registered asdata-mr-layer="modal" and opens/closes it through the shared Layer API. Layer owns modal lifecycle, Escape/request-close handling, trigger ownership, focus restoration, and light-dismiss compatibility. Search code owns only its query input, loading/data access, result rendering, result selection, status text, and cleanup of the generated search DOM after the Layer closes.

Search-specific CSS may still size and arrange the modal, while generic top-layer/backdrop mechanics come from the Layer primitive. Search remains enhancement-only; provide a normal search form or link when a no-JavaScript search path is required.

Static search

<button
  class="mr-search-trigger"
  data-mr-search
  data-mr-search-static-url="/markup-refine-lib/demo-internal/offline-search-index.json"
>
  Search
</button>

Dynamic search

<button
  class="mr-search-trigger"
  data-mr-search
  data-mr-search-dynamic-url="/api/search?q="
>
  Search
</button>

Lower-capability fallback

Search Tool is an enhancement. When search is essential, publish a normal search endpoint as a form or link as well; do not make the generated modal the only route.

<form action="/search" method="get">
  <label>Search <input name="q"></label>
  <button>Search</button>
</form>

Layer migration note

Existing data-mr-search triggers remain the public integration point. The generated dialog now delegates generic modal lifecycle to Layer core. Code that depended on the old generated dialog's private open/close implementation or manual trigger-focus restoration was never a stable extension point and should use Layer lifecycle events instead.