# `lr-branch-picker` - **Import** `import '@aceshooting/lyra-ui/components/lr-branch-picker.js';` (stable tag alias; registers the tag) - **Class** `LyraBranchPicker`, also available unregistered from `@aceshooting/lyra-ui/components/conversation/branch-picker/branch-picker.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, 0 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-branch-picker` The "‹ 2 / 5 ›" navigator across regenerated/edited variants of one message. Pure controlled: it never mutates its own `index` — the same contract `` already establishes for `page`. The host listens for `lr-branch-change`, swaps the displayed branch content, and applies the new `index` back. Renders nothing at all while `count < 2`, so a host can bind it unconditionally on every message regardless of whether that message actually has multiple branches yet. **Properties:** `index: number = 0` (reflected) and `count: number = 1` (reflected) — the current 0-based branch and the total branch count. `label: string = ''`. **Methods:** `focus(options?)` forwards to the currently enabled chevron (falling back to the first rendered chevron), `blur()` blurs both chevrons, `click()` activates that same enabled target, and `getToolbarActions()` returns the ordered logical actions used by an enclosing message toolbar. **Events:** `lr-branch-change` — a branch navigation was requested. `detail: { index }`, always a valid target (never past either bound); the consumer applies `index` after switching the displayed branch content. `lr-toolbar-actions-change` is the no-detail coordination event emitted when the provider's logical toolbar actions change availability or order. **CSS parts:** `base` (the group wrapper, `role="group"`), `previous-button`, `next-button`, `previous-glyph` and `next-glyph` (the chevron inside each button — target these to swap the arrow without restyling the button), and `position` (the visible "2 / 5" text).