# `lr-embedding-explorer` - **Import** `import '@aceshooting/lyra-ui/components/lr-embedding-explorer.js';` (stable tag alias; registers the tag) - **Class** `LyraEmbeddingExplorer`, also available unregistered from `@aceshooting/lyra-ui/components/retrieval/embedding-explorer/embedding-explorer.class.js` - **Family** `components/retrieval/` — see `llms/index.md` for its siblings - **Status** `stable` since `6.2.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** 8 parts, 10 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-embedding-explorer` Dependency-free accessible 2D embedding projection viewer. Coordinates are projected by the host; the component only normalizes them into SVG, colors optional clusters, and emits selection events. **Properties:** `points: EmbeddingPoint[] = []` (attribute: false), where each point is `{ id, x, y, label?, sourceId?, cluster? }`; `selectedPointId: string = ''` (attribute `selected-point-id`); `height: string = '360px'` (any CSS length valid for `block-size`, including `auto` for `viewBox`-derived aspect-ratio sizing; applied on the host as `--lr-embedding-explorer-height`, and a value the browser cannot parse falls back to `auto`); `accessibleLabel: string | null = null` (attribute `aria-label`). As a JS-only property with no host attribute, it names the plot. An authored host `aria-label` governs the plot name too (including an explicitly empty value), so a competing internal generic label is not exposed. Non-finite coordinates are omitted. Blank point ids and later duplicates are also omitted first-wins before empty state, roving focus, selection, rendering, or events. Pointer and programmatic focus synchronize the single roving tab stop, and every point keeps at least a 24×24 CSS px pointer target at narrow allocations without enlarging its marker. Optional cluster membership is exposed as each option's description and in a visible text legend, so the grouping never depends on color alone. **Events:** `lr-point-select` (`{ point }`), activated by click or Enter/Space. **CSS parts:** `base`, `plot`, `point`, `legend`, `legend-item`, `legend-swatch`, `legend-label`, `empty`. **Themeable custom properties:** `--lr-embedding-explorer-selected-stroke` (default `var(--lr-color-brand)`) — stroke color of the selected point; `--lr-embedding-explorer-height` (default `360px`) — the `block-size` of `[part="plot"]`, set on the host from `height`. A consumer's own `::part(plot) { block-size: ... }` rule still overrides it, and the narrow-allocation `min-block-size` floor still raises it. Unspecified clusters cycle through the canonical `--lr-color-chart-1`, `--lr-color-chart-2`, `--lr-color-chart-3`, `--lr-color-chart-4`, `--lr-color-chart-5`, `--lr-color-chart-6`, `--lr-color-chart-7`, and `--lr-color-chart-8` palette, including its dark and forced-color values. Plus shared tokens.