File Item

A file item represents a single file in a list. It shows the file name, size, status, and contextual actions such as download, delete, cancel, retry, or dismiss.

The bottom upload indicator is provided by catnip-progress, composed in its bar-only presentation. File Item owns the file-specific percentage and state; Progress owns the reusable bar and progress semantics.

Overview

The catnip-file-item component renders one row per file. Use it anywhere you need to display files — attached documents, upload progress, download lists, or validation feedback — not only inside a file input.

Common patterns:

• Read-only file list: Show uploaded or attached files (status="ready"). Set showDownload and showDelete to false when the row has no actions.
• Upload flow: Show progress and errors while files are being added (inProgress, warning, danger).
• Future file input: A parent file input can compose multiple file items below its drop zone.

Statuses

Status	Purpose	Actions
ready	File is available	Download, delete (showDownload / showDelete can hide them)
inProgress	Upload is running. Metadata shows uploading-progress next to the percentage.	Cancel
done	Upload just completed	Download, delete (showDownload / showDelete can hide them)
warning	Non-critical validation issue	Retry, dismiss
danger	Upload or validation failed	Retry, dismiss

Sizes

• m (default): Compact row for dense lists.
• l: Taller row with larger typography and action targets.

Live example

Accessibility

• The root uses role="group" with aria-label set to the file name.
• Action buttons expose descriptive aria-label values. Download and delete labels include the file name for context.
• The composed catnip-progress uses native progress semantics while uploading or complete. The duplicate visual percentage in File Item metadata is hidden from assistive technology.