# `lr-image-comparer` - **Import** `import '@aceshooting/lyra-ui/components/lr-image-comparer.js';` (stable tag alias; registers the tag) - **Class** `LyraImageComparer`, also available unregistered from `@aceshooting/lyra-ui/components/media/image-comparer/image-comparer.class.js` - **Family** `components/media/` — 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** 7 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-image-comparer` Before/after comparison surface with two named slots and a keyboard-accessible native range handle. **Properties:** - `position: number = 50` (attribute `position`, reflected) — divider position from 0 to 100 - `orientation: 'horizontal'|'vertical' = 'horizontal'` (attribute `orientation`, reflected) - `accessibleLabel: string | null` (attribute `aria-label`) — accessible name for the comparison and its range handle - `beforeLabel`/`afterLabel` — fallback text for empty named slots **Events:** exactly one owner-realm, bubbling/composed native `input` (`Event`) after every live range update, and exactly one owner-realm native `change` (`Event`) after a gesture commits. `focus`/`blur` are relayed exactly once as owner-realm native `FocusEvent`s preserving `relatedTarget`; a dirty keyboard edit commits its `change` before `blur`. Arrow handling is explicit so browser engines cannot disagree: in horizontal orientation, Left/Right follows the mirrored inline axis (and Up/Down increases/decreases); in vertical orientation, Up/Left decreases toward the physical top and Down/Right increases toward the physical bottom, independent of document direction. Home/End select 0/100 and PageUp/PageDown move by 10. Only a primary left-button pointer may begin a drag. **Methods:** `focus(options?)`, `blur()`, and `click()` forward to the internal range handle. **Slots:** `before`, `after`, and `handle` (decorative content inside the visible drag handle). The flattened `handle` subtree is always inert and hidden from assistive technology, so even an accidentally interactive slotted descendant cannot become a second focus target; the native range remains the sole interaction surface. **CSS parts:** `base` and `comparison` are aliases on the same comparison viewport; `before`, `after`, `divider`, `handle` (the full interaction wrapper), and `input` (the transparent native range input). **CSS custom properties:** `--lr-image-comparer-divider-width` (default `var(--divider-width, var(--lr-size-1px))`) controls the dividing line's thickness, and `--lr-image-comparer-handle-size` (default `var(--handle-size, var(--lr-icon-button-size))`) sizes the visible handle in both axes. Those namespaced names are the ones to override: the bare Shoelace-compat `--divider-width`/`--handle-size` are retained as their fallback source, but an unprefixed custom property inherits, so setting one high up the tree silently retunes every other element below that reads a property of the same generic name. The `dragging` CSS custom state is present only while a pointer gesture is active and is cleared on pointer cancellation, blur, or disconnect. ```html ↔ ``` ---