# `lr-progress-ring` - **Import** `import '@aceshooting/lyra-ui/components/lr-progress-ring.js';` (stable tag alias; registers the tag) - **Class** `LyraProgressRing`, also available unregistered from `@aceshooting/lyra-ui/components/overlays/progress/progress-ring.class.js` - **Family** `components/overlays/` — 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** 5 parts, 14 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-progress-ring` A circular progress indicator with the same value contract as `lr-progress-bar`. **Properties:** `value: number = 0` (reflected), `max: number = 100`, `indeterminate: boolean = false` (reflected), `variant: LyraProgressVariant = 'brand'` (reflected, added in 9.0.0 — matches sibling `lr-progress-bar`'s semantic-palette vocabulary: `neutral`/`brand`/`success`/`warning`/`danger`), `showValue: boolean = false` (attribute `show-value`), `label: string = ''` (the mapped accessible-name property), and `accessibleLabel: string = ''` (attribute `accessible-label`; a Lyra compatibility accessible-name spelling retained by this progress component, while several sibling components use `aria-label` directly). Also `size: LyraSize = 'm'` (reflected) — `'2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'small' | 'medium' | 'large'`. Outer diameter tier, on the shared six-step ladder: `1.25rem` (`2xs`), `1.75rem` (`xs`), `2.25rem` (`s`/`small`), `2.5rem` (`m`/`medium`, unchanged from before this property existed), `3rem` (`l`/`large`), `3.5rem` (`xl`) — each value feeds `--lr-progress-ring-size`'s private default. An explicit `--lr-progress-ring-size` (or the upstream `--size` alias) still wins over every tier. Matching sibling `lr-progress-bar`'s own `size`, this ladder scales exactly one dimension — `--lr-progress-ring-track-width`/`--lr-progress-ring-indicator-width` and the center label's font size are untouched by it. Host `aria-label` takes precedence; otherwise the name falls back to `label`, `accessibleLabel`, the visible default- or `label`-slot text when supplied, then the localized "Progress". Non-finite/out-of-range `value`/`max` are normalized (`max <= 0` falls back to `100`, `value` clamps to `[0, max]`) rather than producing NaN geometry. **Slots:** default — replaces the built-in center label, which otherwise renders the rounded percentage **only when `show-value` is set** (and nothing at all while `indeterminate`); `label` — named alias for center content, matching `lr-progress-bar`. **Breaking in 10.0.0:** a determinate ring used to render its percentage unconditionally, with no way to suppress it short of slotting replacement content. It now gains `showValue`/`show-value` defaulting to `false`, exactly matching `lr-progress-bar` — which is what "the same value contract as `lr-progress-bar`" above has always claimed but did not deliver. Add `show-value` to keep the percentage. `aria-valuetext` still carries it regardless, mirroring `lr-progress-bar`'s own independence there, so the accessible value is unaffected. Its accessible text uses the same visibility filtering, forwarding-slot mutation/reassignment tracking, and explicit-empty host-label precedence as `lr-progress-bar`. **Live members:** `indicator: SVGCircleElement | null` returns the rendered indicator circle (or `null` before rendering). `indicatorOffset: number` returns the normalized stroke offset used for that circle, including the indeterminate value. The indicator node remains stable across ordinary value updates and reconnection while the offset updates live. **CSS parts:** `base` and `progress-ring` are aliases on the same progressbar; `track`, `indicator`, `label`. **Themeable custom properties:** `--lr-progress-ring-size` (default `var(--size, var(--_lr-progress-ring-size))`; `--size` is the upstream alias, and the private `--_lr-progress-ring-size` is the `size` property's own tier value, `2.5rem` at the `m` default, unchanged — the ring's inline and block size), `--lr-progress-ring-track-width` (default `var(--lr-theme-progress-ring-track-width, var(--lr-size-4px))` — a dedicated, opt-in theme hook, set on `:root` or any ancestor to retune this ring specifically; it stays unset, and `4px` applies, whether or not `theme.css` is imported, unlike the widely-shared `--lr-theme-border-width-thick` this used to bridge directly, which `theme.css` declares at `3px`), `--lr-progress-ring-track-color` (default `var(--lr-color-brand-quiet)`), `--lr-progress-ring-indicator-width` (defaulting to the track width), `--lr-progress-ring-indicator-color` (default `var(--lr-progress-ring-indicator-variant-color)`, so the active `variant` supplies the color), `--lr-progress-ring-indicator-variant-color` (added in 9.0.0, same override precedence as `lr-progress-bar`'s `--lr-progress-indicator-variant-color` — the palette slot `variant` resolves into), `--lr-progress-ring-indicator-transition-duration` (default `var(--lr-transition-base)`), and `--lr-progress-duration` (default `var(--lr-transition-ambient)` — the indeterminate spin period, the same token and the same default as `lr-progress-bar`'s sweep, so it flattens under `prefers-reduced-motion: reduce` with the rest of the ambient motion). Upstream aliases are `--size`, `--track-width`, `--track-color`, `--indicator-width`, `--indicator-color`, and `--indicator-transition-duration`.