# Scope Picker

A compact dropdown that lets users filter a chat or search by author or tag, firing a single event with the chosen scope.

<p class="kai-tag-sub">kai-scope-picker</p>

A lightweight filter dropdown for narrowing a conversation or search to a specific author or tag — drop it in a chat header and listen for one event.

## Preview

> **tip:** 
Use `<kai-scope-picker>` when your interface has multiple authors or content tags and users need to narrow a view. It fits naturally alongside `<kai-model-switcher>` in a chat header or above a conversation list. In SolidJS, compose `ChatScopePicker` directly for full reactivity.

## Usage

Set `availableAuthors` and `availableTags` in JavaScript (arrays can't be HTML attributes) and listen for `kai-scope-change`:

```html
<kai-scope-picker id="scope"></kai-scope-picker>

<script type="module">

  await customElements.whenDefined('kai-scope-picker');

  const el = document.getElementById('scope');

  el.availableAuthors = ['Alex Chen', 'Jordan Lee'];
  el.availableTags    = ['design', 'engineering'];

  el.addEventListener('kai-scope-change', (e) => {
    const { filters } = e.detail;
    console.log(filters ?? 'all');
  });
</script>
```

- **`current-label`** — HTML attribute controlling the trigger button text (default `'All Content'`). Update it after each `kai-scope-change` to reflect the active filter.
- **`kai-scope-change`** — `detail.filters` is `undefined` when "All Content" is selected, or `{ authors?: string[], tags?: string[] }` for a specific filter.
- Passing an empty array for either property hides that section entirely.

## Examples

### Authors and Tags

Both sections populated — the dropdown shows an **Authors** group and a **Tags** group below "All Content".

### Authors Only

Non-empty `availableAuthors`, empty `availableTags` — renders only the Authors section.

### Tags Only

Non-empty `availableTags`, empty `availableAuthors` — renders only the Tags section.

### Minimal (No Filters)

Both arrays empty — the dropdown shows only "All Content". Useful while options are loading asynchronously.

### Custom Trigger Label

Set `current-label` to reflect an already-active scope. Your app owns this state and updates the attribute on each `kai-scope-change`.

## Props

## Events

## Methods

## Composed from