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.
• Verified in D-021 (GitLab Issue).
• 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.