<!-- GENERATED by scripts/build-llms.mjs from llms/conversation.md — do not edit this file. -->

# `lr-suggestion-chips`

- **Import** `import '@aceshooting/lyra-ui/components/lr-suggestion-chips.js';` (stable tag alias; registers the tag)
- **Class** `LyraSuggestionChips`, also available unregistered from `@aceshooting/lyra-ui/components/conversation/suggestion-chips/suggestion-chips.class.js`
- **Family** `components/conversation/` — see `llms/index.md` for its siblings
- **Status** `stable` since `4.0.0` — see the maturity and deprecation policy in `llms/shared.md`
- **Release history** [CHANGELOG.md](../../CHANGELOG.md); family-wide breaking-change summaries: [llms-full.txt](../../llms-full.txt)
- **Deprecations** none
- **Optional peers** none
- **Themeable via** 6 parts, 4 custom properties — see this component's own `@csspart`/`@cssprop` list below
- **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md`

---

## `lr-suggestion-chips`

Starter prompts (empty thread) and follow-up suggestions (after a response) as a horizontally
scrollable chip row; activation hands the prompt to the host, which decides whether to compose it
into an input or send it directly. Never writes into a composer or sends anything itself.
Streaming-friendly: chips render through a keyed `repeat()` on `suggestionId`, so replacing
follow-ups mid-conversation preserves focus on any chip whose identifier survives; when the focused
identifier disappears, focus repairs to the nearest surviving occurrence without overriding a newer
external focus move.

**Properties:** `suggestions: readonly LyraChatSuggestion[] = []` (attribute: false) —
`LyraChatSuggestion { suggestionId: string; label: string; icon?: string; detail?: string; disabled?: boolean }`
(exported here). Identifiers must be nonempty and unique; invalid/later duplicates are omitted with
the first valid occurrence winning. The input is clone-owned, bounded, and frozen; reassign a new
array after changing the sequence or a row. `icon` is an optional
peer-neutral literal hint (for example, an emoji), rendered decoratively before the text, and
`detail` is an optional secondary line. `disabled` marks a suggestion non-actionable: its chip
renders a genuinely disabled `<button>` (no roving tab stop, no hover/press affordance), activating
it emits nothing, and arrow-key/Home/End roving navigation steps past it. Empty renders nothing at
all. `wrap: boolean = false`
(reflected) — wraps into multiple rows instead of a single horizontally scrollable line. `label?:
string` — accessible name for the group. Omitting it uses the localized `suggestionsLabel`; an
explicit empty string intentionally leaves the group unnamed.

**Events:** `lr-suggestion-select` — `detail: { suggestionId, label }`.

**CSS parts:** `base` (the labeled group), `row` (the flex container holding the chips, present in
both the wrapping and the scrolling layout), `chip` (each suggestion button), `chip-icon` (the
optional decorative literal icon), `chip-label` (the primary text), `chip-detail` (the secondary
line, only rendered when `detail` is set).

**Themeable custom properties:** `--lr-suggestion-chips-justify` (default `flex-start`) — main-axis
packing of the chip row. Use `center` to center the chips under centered empty-state text: it centers
every line, the wrapped final one included, which styling `::part(base)` as a centered flex container
cannot do (once the chips wrap, the row fills the available inline size and each line packs to the
start). `--lr-suggestion-chips-hover-bg` (default `var(--lr-color-brand-quiet)`) — a `chip`'s
background on hover. `--lr-suggestion-chips-hover-border` (default `var(--lr-color-brand)`) — a
`chip`'s border color on hover. All three are declared as `var()` fallbacks at the point of use, not
on `:host`. `--lr-suggestion-chips-disabled-opacity` (default `0.5`) — opacity of a chip whose
suggestion sets `disabled`. Plus shared tokens `--lr-space-xs/-m/-2xs`,
`--lr-color-border/-surface/-text/-text-quiet`, `--lr-radius-pill`, `--lr-font-size-xs`,
`--lr-focus-ring-width/-color/-offset`.

**Optional peer deps:** none.

Keyboard: roving tabindex across chips; ArrowLeft/ArrowRight (direction-aware) plus Home/End;
Enter/Space activate. Renders inside an internal `lr-scroller` (`orientation="horizontal"`,
`without-scrollbar`) unless `wrap` is set.

```html
<lr-suggestion-chips></lr-suggestion-chips>
<lr-chat-composer></lr-chat-composer>
<script type="module">
  const chips = document.querySelector("lr-suggestion-chips");
  const composer = document.querySelector("lr-chat-composer");
  chips.suggestions = followUps;
  chips.addEventListener("lr-suggestion-select", (e) => (composer.value = e.detail.label));
</script>
```