# Progress Bar Linear

Level: atom.

## Purpose

`Progress Bar Linear` communicates determinate or in-progress work when the
available width is wider than its height. Use a segmented variant only when
the product scenario needs visible steps; it remains one progress value rather
than eight independently addressable states.

## Figma source and verified mapping

- Figma component set: [Progress Bar / Linear — `30686:176160`](https://www.figma.com/design/EO9tuCsqwuHL8cZ4Eb2psR/%F0%9F%9A%9B-WB-Logistics-UI-kit?node-id=30686-176160).
- Verified in `D-021` ([GitLab Issue](https://gitlab.com/polozovdaniel/logistics-2/-/work_items/22)).
- The published set covers 12 combinations: `size` `L`/`M`/`S` × `segmented`
  on/off × `square` on/off. `topLabels` and `bottomLabels` describe the
  surrounding label blocks.
- `WblProgressBarLinearComponent.size`, `segmented`, and `square` map directly
  to those Figma properties. `progress` supplies the real value instead of the
  static Figma demonstration fill.
- Figma uses `text icon/secondary`, `text icon/accent`, `content/noFilled`,
  `100`, and `200`; the implementation resolves them through the matching
  owned color and spacing tokens.

### Documented differences

- Figma shows both label blocks enabled by default; the Angular component keeps
  `topLabels` and `bottomLabels` off by default. Consumers that need the Figma
  showcase must opt in to both inputs.
- `infinite`, individual label visibility, clamping, ARIA naming, and reduced
  motion are runtime behavior. They are intentionally not counted as published
  Figma variants.
- The current Figma track uses radius `XL` while the implementation uses the
  existing pill token `--radius-xxl`; at 4/8/12px heights both render as a
  fully rounded track. This is a documented visual-equivalence decision, not a
  new token mapping.

## Anatomy and behavior

Determinate progress is clamped to 0–100; non-finite input becomes zero. Infinite animates a fixed 40% fill. Segmented mode always renders eight segments; square changes the shape. Top start/end and bottom start/middle/end label groups have per-label visibility controls. Labels are provided text and are not derived from progress.

## Accessibility and content

The track, rather than the outer wrapper, owns role progressbar and its accessible name. Set ariaLabel or ariaLabelledby; visible surrounding labels are not automatically associated. Infinite removes numeric ARIA values and sets aria-busy. There are no interactive segments, outputs or automatic completion announcements.

## Local component contract

This is the current owned contract for `component.progress-bar-linear`. 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

`WblProgressBarLinearSize`: `L | M | S`. progress is a number; segmented/square/infinite and label-visibility inputs are booleans. Accessible-name inputs are string|null.

### Classes and selectors

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

### Inputs

- `WblProgressBarLinearComponent.size = input<WblProgressBarLinearSize>('L')`
- `WblProgressBarLinearComponent.progress = input(0)`
- `WblProgressBarLinearComponent.infinite = input(false)`
- `WblProgressBarLinearComponent.segmented = input(false)`
- `WblProgressBarLinearComponent.square = input(false)`
- `WblProgressBarLinearComponent.topLabels = input(false)`
- `WblProgressBarLinearComponent.topStartLabelVisible = input(true)`
- `WblProgressBarLinearComponent.topStartLabel = input('LabelLeft')`
- `WblProgressBarLinearComponent.topEndLabelVisible = input(true)`
- `WblProgressBarLinearComponent.topEndLabel = input('LabelRight')`
- `WblProgressBarLinearComponent.bottomLabels = input(false)`
- `WblProgressBarLinearComponent.bottomStartLabelVisible = input(true)`
- `WblProgressBarLinearComponent.bottomStartLabel = input('BottomLeft')`
- `WblProgressBarLinearComponent.bottomLabelMiddleVisible = input(true)`
- `WblProgressBarLinearComponent.bottomLabelMiddle = input('BottomMid')`
- `WblProgressBarLinearComponent.bottomEndLabelVisible = input(true)`
- `WblProgressBarLinearComponent.bottomEndLabel = input('BottomRight')`
- `WblProgressBarLinearComponent.ariaLabel = input<string | null>(null)`
- `WblProgressBarLinearComponent.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-linear/progress-bar-linear.component.html` (reviewed in D-025, 2026-09-05).

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

## Figma status

The source above is the verified Figma owner for the published Linear 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.