# `lr-highlight-layer` - **Import** `import '@aceshooting/lyra-ui/components/lr-highlight-layer.js';` (stable tag alias; registers the tag) - **Class** `LyraHighlightLayer`, also available unregistered from `@aceshooting/lyra-ui/components/viewers/highlight-layer/highlight-layer.class.js` - **Family** `components/viewers/` — 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) - **Deprecations** none - **Optional peers** none - **Themeable via** 5 parts, 11 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-highlight-layer` A presentational overlay that paints highlight rectangles (percent-of-box coordinates) over positioned content and owns their activation, active/flash styling, and keyboard access. `items` order is the caller's own reading order; the layer does not re-sort geometrically. Fills its nearest positioned ancestor. **Properties:** `items: HighlightLayerItem[] = []` (attribute: false), with IDs trimmed and required to be nonempty and the first item retained when IDs repeat; `activeHighlightId: string | null = null` (attribute `active-highlight-id`), and `interactive: boolean = true` (reflected) — gates click/keyboard activation. A rectangle is eligible only when `x`/`y`/`width`/`height` are finite numbers and both dimensions are nonnegative; an item with a missing/non-array `rects` collection and each invalid rectangle are omitted from paint, focus, and activation. When `interactive=false`, the base is `aria-hidden` pure paint with no group role, accessible name, or controls. If every rectangle is invalid, no shadow subtree is rendered. **Methods:** `flash(id)` briefly re-triggers the flash styling for an already-rendered rect (e.g. a re-click of the same source citation). **Events:** `lr-highlight-activate` — a rect was activated (click, or Enter/Space while focused). `detail: { highlightId }`. **CSS parts:** `base` (the absolutely-positioned overlay, inset 0), `rect` (one visual highlight rectangle; carries `data-tone`/`data-active`/`data-flash` state attributes), and `rect-target` (transparent activation geometry with a minimum pointer/focus area independent of the visual rectangle). When more than one logical highlight would create overlapping minimum hit areas, the individual targets are replaced by `highlight-actions` (a non-overlapping action list) containing one `highlight-action` button per rendered highlight. **Themeable custom properties:** `--lr-highlight-layer-accent-background`, `--lr-highlight-layer-accent-outline`, `--lr-highlight-layer-success-background`, `--lr-highlight-layer-success-outline`, `--lr-highlight-layer-warning-background`, `--lr-highlight-layer-warning-outline`, `--lr-highlight-layer-danger-background`, `--lr-highlight-layer-danger-outline`, `--lr-highlight-layer-neutral-background`, and `--lr-highlight-layer-neutral-outline` control each tone independently, defaulting to the corresponding Lyra quiet background and foreground tokens. `--lr-highlight-layer-flash-background` controls the temporary flash state (default `--lr-color-brand`).