Components

Progress

Progress reference for TicFrame components, covering usage, accessibility, responsive behavior, dark mode, RTL, source examples, and production guidance.

Requirements

Progress is implemented with semantic HTML, TicFrame classes, design tokens, responsive utilities, and documented data attributes. It does not require website-specific CSS.

Use the tf-* namespace consistently so the class validator can prove every visual dependency ships from TicFrame.

Usage Guidance

Start with the semantic element, add the matching TicFrame component or utility classes, and use data attributes only for behavior that TicFrame documents. Keep labels, headings, and landmarks visible to assistive technology.

Responsive

Mobile-first utilities such as md:tf-grid-cols-3 scale the layout.

Dark mode

Colors resolve through data-tf-theme and semantic tokens.

RTL

Logical spacing and direction-aware JS keep the component mirrored safely.

Live Example

HTML

<div class="tf-progress" role="progressbar" aria-label="Build progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="66"><div class="tf-progress-bar tf-w-2/3"></div></div>

Reference

Area	Contract
Classes	`tf-container`, `tf-card`, `tf-btn`, and feature-specific `tf-*` classes.
Accessibility	Keyboard access, visible focus, associated labels, ARIA only where native HTML needs support.
JavaScript	Automatic initialization through `TicFrame.init()` and the documented data API.
Tokens	`--tf-color-`, `--tf-space-`, `--tf-radius-`, and `--tf-shadow-`.