Search Sources

Search component

<loquix-search-sources> covers the two things a user needs to know when a query fans out across several back ends: which sources are still working, and which one they are looking at now. One variant shows progress, the other shows filter chips.

loquix-search-sourcesprogress and filtersper-source status

Preview

Progress then filters Live component

The progress strip shows one source finished, one still running, and one failed. Below it, the filter chips with Docs selected.

Usage

import '@loquix/core/define/define-search-sources';

sources is an array, so assign it as a property.

const strip = document.querySelector('loquix-search-sources');

strip.sources = [
  { id: 'docs', name: 'Docs', icon: '📘', status: 'running' },
  { id: 'slack', name: 'Slack', icon: '💬', status: 'idle' },
];

strip.addEventListener('loquix-search-source-select', (event) => {
  filterResults(event.detail.sourceId);
});

Update status and count per source as each back end answers, and the strip reflects it without a re-render on your side.

The search source object

Field	Type	Required	Description
`id`	`string`	yes	Stable identifier, such as `docs` or `slack`.
`name`	`string`	yes	Display name.
`icon`	`string`	no	Small icon, emoji, or letter shown before the name.
`status`	`'idle' \| 'running' \| 'done' \| 'error'`	no	Per-source state during fan-out.
`count`	`number`	no	Number of results this source returned.
`duration`	`string`	no	Timing label, such as `240ms`.

Variants

Variant	Use it for
`progress`	While the query is running. Shows a spinner, a running total, and each source’s status.
`filters`	After results arrive. Shows selectable chips with per-source counts.

In filters mode, activeSource holds the selected chip; all means the All chip. Set showAll to false to drop that chip.

The All chip shows the sum of the per-source counts.

Properties

Property	Attribute	Type	Default	Description
`sources`	—	`SearchSource[]`	`[]`	The sources to render. Property-only.
`variant`	`variant`	`'progress' \| 'filters'`	`'progress'`	Display mode.
`activeSource`	`active-source`	`string`	`'all'`	Selected chip id in `filters` mode. Updated by the component when a chip is chosen.
`headline`	`headline`	`string`	localized	Headline override in `progress` mode.
`runningTotal`	`running-total`	`number`	—	Running result total in `progress` mode.
`showAll`	`show-all`	`boolean`	`true`	Whether to render the All chip in `filters` mode.
`label`	`label`	`string`	localized	Accessible label override.

Events

Event	Detail	Description
`loquix-search-source-select`	`{ sourceId, source }`	Fired when a filter chip is selected.

CSS parts

Part	Purpose
`container`	Outer wrapper.
`header`	Progress header row.
`spinner`	Overall progress spinner.
`count`	Running total, or a source’s result count.
`list`	Pill list.
`pill`	A single source pill or filter chip.
`icon`	Source icon.
`name`	Source name.