# `lr-document-compare` - **Import** `import '@aceshooting/lyra-ui/components/lr-document-compare.js';` (stable tag alias; registers the tag) - **Class** `LyraDocumentCompare`, also available unregistered from `@aceshooting/lyra-ui/components/viewers/document-compare/document-compare.class.js` - **Family** `components/viewers/` — see `llms/index.md` for its siblings - **Status** `stable` since `4.1.0` — see the maturity and deprecation policy in `llms/shared.md` - **Release history** [CHANGELOG.md](../../CHANGELOG.md) - **Deprecations** none - **Optional peers** `shiki` — see `llms/peers.md` - **Themeable via** 7 parts, 1 custom property — see this component's own `@csspart`/`@cssprop` list below - **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md` --- ## `lr-document-compare` Comparison surface for two document versions, using `lr-diff-view` for textual diffs and `lr-document-preview` for side-by-side rendered content. A nonempty host `aria-label` makes the host the sole named semantic owner. With an explicitly empty host label, the shadow comparison group keeps `role="group"` and an empty name; when the attribute is absent, it uses the localized comparison label. Dynamic host-label changes update that ownership. **Properties:** - `oldVersion?: DocumentCompareVersion`, `newVersion?: DocumentCompareVersion` (attribute: false) — the before/after inputs. `DocumentCompareVersion` extends `DocumentRef` (`id`, `name`, `mimeType?`, `uri?`, `version?`) with `text?: string` for diff mode and `highlights?: LyraHighlight[]` for its own preview pane. Each assignment becomes a frozen snapshot: own string `id` and `name` are required or that pane is unset; valid string optional fields are retained and other values are omitted. Its highlights use the shared snapshot too, so mutation requires reassignment. - `view: 'diff' | 'side-by-side' = 'diff'` (reflected) — one inline text diff or two rendered preview panes. Invalid property or attribute values normalize to `diff` and repair the reflected attribute. - `diffLayout: 'unified' | 'split' = 'unified'` (attribute `diff-layout`, reflected) — forwarded to `lr-diff-view` in diff mode. Invalid property or attribute values normalize to `unified` and repair the reflected attribute. - `copyable: boolean = false` — forwards the diff copy action. - `language: string = ''`, `languages?: Record` (the latter attribute: false) — optional syntax highlighting forwarded to the diff. A runtime non-string `language` is treated as `''` without coercion. - `syncScroll: boolean = true` (attribute `sync-scroll`) — proportionally mirrors either side-by-side pane's scroll fraction to the other. The true-default converter accepts the literal `sync-scroll="false"`. - `anchor: LyraAnchor | string | null = null` (attribute: false) — sends the same target to both preview panes; repeated assignment of the same value still re-runs. - `maxHeight: string = ''` (attribute `max-height`) — a CSS length (e.g. `"30rem"`) that overrides `--lr-document-compare-pane-max-height` declaratively, giving each `view="side-by-side"` pane its maximum block size before it scrolls internally. The value is sanitized as a CSS length, so an invalid one is ignored and the token default applies; the unset default `''` also defers to the token, so setting nothing preserves existing behaviour. **Exported types:** `DocumentCompareVersion`; `LyraDocumentCompareView = 'diff' | 'side-by-side'`; `DocumentComparePaneSide = 'old' | 'new'`. **Synchronized anchors:** activating a region highlight whose normalized id exists in the opposite preview's trimmed, nonempty, first-wins highlight projection scrolls that pane to its corresponding highlight, while the original `lr-highlight-activate` continues bubbling unchanged. The shared `anchor` property drives both panes. In diff mode, split columns already share one scroll container. **Events:** `lr-copy` fires only after clipboard fulfillment (`detail: { ok: true, text }`). A clipboard failure bubbles `lr-error` plus `lr-copy-error` (`detail: { ok: false, text, reason, error }`) unchanged from `lr-diff-view`. Also emits `lr-download` (`detail: { src, filename }`), `lr-highlight-activate` (`detail: { highlightId }`), and `lr-render-error` (`detail: { error }`). **Slots:** none. **CSS parts:** `base`, `diff`, `panes`, `pane-old`, `pane-new`, `pane-header`, `pane-empty`. **Themeable custom properties:** `--lr-document-compare-pane-max-height` (default `var(--lr-size-24rem)`) — maximum block size of a `side-by-side` pane before it scrolls internally.