Search widget

Spotlight-style search trigger. Click (or Cmd/Ctrl+K) opens a centered modal with an input; submit navigates to a Cobuntu page that handles the query (default /atlas?q=…, configurable).

Smaller scope than cart/auth/messages/notifications:

No auth required
No state to poll
No drawer or panel
Just a trigger + a modal + a redirect on submit

Install

<script src="/widgets/v1/search.js" async></script>
<div data-cobuntu-search></div>

Cmd/Ctrl+K opens the modal globally once the script is loaded — matches the keyboard shortcut Cobuntu pages already have.

Three levels of customization

Level 1 — CSS variables

Trigger: --cobuntu-bg, --cobuntu-color, --cobuntu-border, --cobuntu-radius, --cobuntu-padding, --cobuntu-font, --cobuntu-hover-color, --cobuntu-hover-bg.

Modal: --cobuntu-modal-bg, --cobuntu-modal-text, --cobuntu-modal-radius, --cobuntu-submit-bg, --cobuntu-submit-color.

Level 2 — data attributes

Attribute	Values	Default
`data-variant`	`icon` \| `button`	`icon`
`data-size`	`sm` \| `md` \| `lg`	`md`
`data-label`	string (aria-label)	`Search`
`data-button-label`	string (button variant)	`Search`
`data-placeholder`	string	`Search the community…`
`data-submit-label`	string	`Search`
`data-search-url`	URL path	`/atlas`
`data-search-param`	query param name	`q`

Example pointing search at a different surface:

<div data-cobuntu-search
     data-search-url="/marketplace"
     data-search-param="query"
     data-placeholder="Find products…">
</div>

Level 3 — render-yourself slot

<div data-cobuntu-search>
  <button data-cobuntu-action="open-search" class="my-search-button">
    <svg>…my own icon…</svg>
    <span>Search</span>
  </button>
</div>

Your button opens the same modal; modal styles still come from Level 1 CSS variables on the mount node.

Public JS API

window.CobuntuSearch = {
  open(): void,
  close(): void,
};

Useful for wiring a custom button (e.g. inside a hero section) to the same modal: onclick="window.CobuntuSearch.open()".

Versioning

v1 frozen. A future v2 may add inline results (instead of just navigating) once we have a generic search backend that doesn't require per-page registration. Will ship under /widgets/v2/search.js.

Notifications Nav