Search bar

The search bar component (.search-bar) is a thin layout wrapper around a .input-based search field and an adjacent submit button, typically used as a page-level or toolbar search form. It doesn't introduce its own visual style beyond spacing — the field is a regular .input and the button is a regular .btn.

<form class="search-bar" role="search" method="get">
  <label class="input search-bar-field">
    <span class="input-leading" aria-hidden="true">⌕</span>
    <input class="input-el" type="search" name="q" placeholder="Search…" aria-label="Search">
    <button type="button" class="input-clear action-clear" aria-label="Clear search" hidden>✕</button>
  </label>
  <button type="submit" class="btn btn-primary search-bar-submit">
    <span class="btn-label">Search</span>
  </button>
</form>