# `lr-qr-code` - **Import** `import '@aceshooting/lyra-ui/components/lr-qr-code.js';` (stable tag alias; registers the tag) - **Class** `LyraQrCode`, also available unregistered from `@aceshooting/lyra-ui/components/media/qr-code/qr-code.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) - **Deprecated part** `base` since `8.2.3`; use part `::part(qr-code)`; removal not before `10.0.0` — The qr-code part names the rendered code wrapper explicitly; base remains on that same node during the compatibility window. That version is a policy floor, not a plan: `wa-qr-code` still publishes `base` as a deprecated part and `sl-qr-code` still publishes it as its only, undeprecated part, so this alias stays for as long as either upstream ships it. - **Optional peers** `qrcode` — see `llms/peers.md` - **Themeable via** 6 parts, 2 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-qr-code` Renders `value` as a QR code using the optional `qrcode` peer dependency. **Properties:** `value`, `label`, `size` (clamped to `1`–`2048` CSS px), `radius` (clamped to `0`–`0.5`), and `errorCorrection` (`error-correction`, `L`/`M`/`Q`/`H`, default `H`). Standard host `color` and `background-color` control paint; optional `--lr-qr-code-fill` and `--lr-qr-code-background` aliases override those host styles, while the permanent upstream parity properties `fill` and `background` remain the highest-precedence paint inputs. `image` accepts a safe media URL for a centered overlay, `imageBackground` (`image-background`) paints its coverage box, `imageCoverage` (`image-coverage`, default `0.5`) controls that box as a fraction of the canvas side, and `imagePadding` (`image-padding`, default `0`) pads the image within it. Image geometry is finite-number guarded and clamped; supplying a valid image forces error correction to `H` so the covered modules remain recoverable. Unsafe image URLs are ignored and a failed image load leaves the base QR symbol intact. Peer output is validated and cloned into an owned finite QR matrix before paint; malformed or hostile module shapes fail closed to the localized error state. The host is the single image-semantic owner; its accessible name uses host `aria-label`, then `label`, then `value`, and it publishes `aria-busy="true"`/`"false"`. The stable public `canvas: HTMLCanvasElement` is presentational and remains the same live node through empty/loading/ready/error, reconnect, and adoption (hidden outside ready). Empty values render an empty state. `generate(): void` synchronously starts re-encoding the current value. `refreshTheme(): void` redraws cached modules for consumer-owned token changes; ordinary ancestor theme and color-scheme changes redraw automatically. Async peer and image results are generation-guarded, including across disconnect/reconnect. `LyraQrCode.preload(): Promise` is a static optional-peer warm-up that starts the shared `qrcode` import without encoding a value; it resolves to `false` when the peer is unavailable. When `IntersectionObserver` is available, painting waits for a valid intersecting entry and resumes whenever the code re-enters view. If the API is unavailable, its constructor fails, or `observe()` throws, rendering proceeds immediately. Invalid resolved paint colors fall back to the documented safe fill/background without changing the QR's loading or error state: foreground becomes black, background becomes transparent, and `imageBackground` becomes the resolved QR background. At ordinary sizes the backing store is a fixed `2×` the CSS size, independent of device pixel ratio. It degrades uniformly only to stay within 4,096 pixels per dimension and 8,388,608 total pixels. Modules span the full canvas with no injected quiet zone; add host padding when a scanner or physical output needs one. **CSS parts:** `base` and `qr-code` are aliases on the same outer wrapper; `canvas`, `empty`, `loading`, and `error`. **CSS custom properties:** `--lr-qr-code-fill` and `--lr-qr-code-background`. `error` is ordinary localized visible text, not a shadow live region. A missing peer or encode failure appends the localized message to the document's pre-mounted `[data-lr-live-region="assertive"]` sink; identical retries append distinct children, and sink ownership is released/reacquired across disconnect or document adoption. Meaningful post-mount loading transitions use the corresponding polite light-DOM sink; initial mount remains silent.