# `lr-progress-bar` - **Import** `import '@aceshooting/lyra-ui/components/lr-progress-bar.js';` (stable tag alias; registers the tag) - **Class** `LyraProgressBar`, also available unregistered from `@aceshooting/lyra-ui/components/overlays/progress/progress-bar.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, 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-progress-bar` A determinate or indeterminate progress bar with an independently visible label and optional formatted percentage. **Properties:** `value` (reflected), `max`, `indeterminate`, `variant`, `showValue` (`show-value`), and `label` (mapped accessible-name property), plus `accessibleLabel` (`accessible-label`) — the retained Lyra compatibility spelling for this component. It is not a library-wide attribute: spinner, rating, and tooltip expose their explicit host name through `aria-label`. Host `aria-label` has highest precedence here too. Also `size: LyraSize = 'm'` (reflected) — `'2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'small' | 'medium' | 'large'`. Track/indicator thickness tier, on the shared six-step ladder: `0.25rem` (`2xs`), `0.375rem` (`xs`), `0.625rem` (`s`/`small`), `1rem` (`m`/`medium`, unchanged from before this property existed), `1.25rem` (`l`/`large`), `1.5rem` (`xl`) — each value feeds `--lr-progress-track-height`'s private default. An explicit `--lr-progress-track-height` (or the upstream `--track-height`/`--height` aliases) still wins over every tier. The rendered progressbar exposes `aria-valuemin`, `aria-valuemax`, and `aria-valuenow` when determinate. Slotted label content is always visible and names the progressbar unless an explicit label overrides it; `show-value` controls only whether the locale-formatted percentage is appended. Live label mutations and reassignment stay synchronized through nested forwarding slots. Hidden, inert, CSS-hidden and `aria-hidden` branches do not name the role; a visible descendant can restore text suppressed only by an ancestor's `visibility:hidden|collapse`. Host `aria-label` precedence is presence-based, so an explicitly empty value remains empty rather than invoking a fallback. **Slots:** default — label content; `label` — compatibility alias for the default slot. **CSS parts:** `base` and `progress-bar` are aliases on the same progressbar; `track`, `indicator`, `label`. **Themeable custom properties:** `--lr-progress-track-height` (default `var(--lr-progress-height, var(--_lr-progress-track-height))`; `--lr-progress-height` is the legacy fallback, and the private `--_lr-progress-track-height` is the `size` property's own tier value, `1rem` at the `m` default, unchanged), `--lr-progress-track-color` (default `var(--lr-color-brand-quiet)`), `--lr-progress-indicator-color` (default `var(--lr-progress-indicator-variant-color)`), and `--lr-progress-label-color` (default `var(--lr-color-text)`). Upstream aliases are `--height` and `--track-height`, plus `--track-color`, `--indicator-color`, and `--label-color`. `--lr-progress-indicator-variant-color` is the palette slot the active `variant` feeds: it resolves to that variant's loud fill from the shared semantic grid (`var(--lr-color-fill-loud)`), falling back to `var(--lr-color-brand)` on an element that has not updated yet. It sits _inside_ `--lr-progress-indicator-color` and the upstream `--indicator-color` alias in the fallback chain, so setting either of those still wins outright and the indicator renders exactly as it did before `variant` support existed. Set the variant-color slot instead when you want to retheme one semantic tone while leaving the rest of the grid alone. **Additional API surface:** - `--lr-progress-duration` — Indeterminate sweep timing. Default: `var(--lr-transition-ambient)`.