# Progress Bar Circle

Level: atom.

## Purpose

`Progress Bar Circle` presents one progress value in a compact, square area.
Use `none` for a pure indicator, `text` for a concise centered label, and
`icon` for a symbolic loading or reward state. It is not a replacement for a
multi-step progress control. Use `infinite` only when the amount completed
is unknown; use Linear when progress needs a horizontal track and surrounding
labels.

## Figma source and verified mapping

- Figma component set: [Progress Bar / Circle — `30604:179025`](https://www.figma.com/design/EO9tuCsqwuHL8cZ4Eb2psR/%F0%9F%9A%9B-WB-Logistics-UI-kit?node-id=30604-179025).
- Verified in `D-021` ([GitLab Issue](https://gitlab.com/polozovdaniel/logistics-2/-/work_items/22)).
- The published set covers 38 combinations of `size` (`128`, `96`, `64`, `48`,
  `32`), `preset` (`None`, `Text`, `Icon`), and thickness (`8`, `6`, `4`).
- Angular `content` maps to Figma `preset`; `size`, `thickness`, title text,
  description text, and the icon map to the corresponding center content.
- Figma resolves the ring and text through purple `#7F30E3`, neutral track
  `#E0E0EB`, and the published title/description typography. The current CSS
  resolves the same values through owned stroke, text, spacing, and typography
  tokens.

### Documented differences

- `progress`, `infinite`, ARIA naming, value clamping, and reduced motion are
  runtime behavior, not Figma component properties.
- Angular allows seven combinations not published in Figma: Text `48/8`, Text
  `32/{4,6,8}`, Icon `48/8`, and Icon `32/{6,8}`. They are implementation-only
  until design publishes matching variants; they do not expand Figma coverage.
- `description` is the local name for Figma `showText`; it is visible only at
  `128` and `96`, matching the published anatomy. Text content is unavailable
  at `32`.

## Anatomy and behavior

A track and arc use clamped 0–100 progress; non-finite input becomes zero. Infinite renders an animated fixed arc. Center content can be absent, text or an icon. Size 32 suppresses text, and description is displayed only for sizes 128/96. Title text is explicit content, not an automatically formatted percentage.

## Accessibility and content

The root has role progressbar. Determinate mode exposes min/max/current; infinite removes those values and sets aria-busy. Supply ariaLabel or ariaLabelledby even when center text is visible; ariaLabel takes precedence. There are no keyboard actions or completion outputs.

## Local component contract

This is the current owned contract for `component.progress-bar-circle`. Behavior above was checked
against the local implementation, template and focused tests listed below.
Historical migration evidence does not override these current sources.

### Public type values

`WblProgressBarCircleSize`: `128 | 96 | 64 | 48 | 32` as strings; `WblProgressBarCircleThickness`: `4 | 6 | 8` as numbers; `WblProgressBarCircleContent`: `none | text | icon`. progress is a number; accessible-name inputs are string|null.

### Classes and selectors

- `WblProgressBarCircleComponent` — `wbl-progress-bar-circle` (src/app/design-system/primitives/progress-bar-circle/progress-bar-circle.component.ts).

### Inputs

- `WblProgressBarCircleComponent.size = input<WblProgressBarCircleSize>('128')`
- `WblProgressBarCircleComponent.thickness = input<WblProgressBarCircleThickness>(8)`
- `WblProgressBarCircleComponent.progress = input(0)`
- `WblProgressBarCircleComponent.infinite = input(false)`
- `WblProgressBarCircleComponent.content = input<WblProgressBarCircleContent>('none')`
- `WblProgressBarCircleComponent.title = input(true)`
- `WblProgressBarCircleComponent.titleText = input('Title')`
- `WblProgressBarCircleComponent.description = input(true)`
- `WblProgressBarCircleComponent.descriptionText = input('Text')`
- `WblProgressBarCircleComponent.iconName = input<WblIconName>('gift')`
- `WblProgressBarCircleComponent.ariaLabel = input<string | null>(null)`
- `WblProgressBarCircleComponent.ariaLabelledby = input<string | null>(null)`

### Models

- None.

### Outputs

- None.

### Slots and projection markers

- The exact template has no Angular content-projection slot.

### Local evidence

- Behavior/template: `src/app/design-system/primitives/progress-bar-circle/progress-bar-circle.component.html` (reviewed in D-025, 2026-09-05).

- Code: `src/app/design-system/primitives/progress-bar-circle/progress-bar-circle.component.ts`.
- Focused test: `src/app/design-system/primitives/progress-bar-circle/progress-bar-circle.component.spec.ts`.
- Public export: `export * from './primitives/progress-bar-circle/progress-bar-circle.component';` in `src/app/design-system/index.ts`.
- Storybook: `storybook/stories/progress-bar-circle.stories.ts` (`Design System/Primitives/wbl-progress-bar-circle`).

## Figma status

The source above is the verified Figma owner for the 38 published Circle
variants. `figmaSidecar` remains absent: this task links status and behavior but
does not introduce a separate reusable Figma assembly contract.

## Provenance

The archived source-document copy is historical evidence only. The active
resolver is local code/test/export and the exact Storybook story above.