Attachment Chip

Configuration component

<loquix-attachment-chip> represents one file before or during upload. It combines file metadata, progress, errors, removal, and retry behavior in a compact surface.

loquix-attachment-chipupload-awareremovable

Preview

Attachment states Live component

Usage

import '@loquix/core/define/define-attachment-chip';

<loquix-attachment-chip
  attachment-id="file_42"
  filename="product-brief.pdf"
  filetype="application/pdf"
  size="245000"
  status="uploading"
  progress="65"
></loquix-attachment-chip>

Properties

Property	Attribute	Type	Default	Description
`filename`	`filename`	`string`	`''`	Display filename.
`filetype`	`filetype`	`string`	`''`	MIME type or extension shorthand used for the file icon.
`size`	`size`	`number`	`0`	File size in bytes.
`purpose`	`purpose`	`'style' \| 'subject' \| 'source'`	—	Semantic role of the attachment.
`removable`	`removable`	`boolean`	`true`	Shows the remove control.
`status`	`status`	`'pending' \| 'uploading' \| 'complete' \| 'error'`	`'complete'`	Upload or processing state.
`progress`	`progress`	`number`	`0`	Upload progress from 0 to 100.
`attachmentId`	`attachment-id`	`string`	`''`	Stable ID included in the event attachment.
`error`	`error`	`string`	`''`	Error tooltip text.
`maxFilenameLength`	`max-filename-length`	`number`	`0`	Character limit with extension-preserving truncation.
`noRetry`	`no-retry`	`boolean`	`false`	Hides Retry in the error state.
`preview`	`preview`	`string`	`''`	Thumbnail URL used instead of the inferred file icon.

Events

Event	Detail
`loquix-attachment-remove`	`{ attachment: Attachment }`
`loquix-attachment-retry`	`{ attachment: Attachment }`

chip.addEventListener('loquix-attachment-retry', (event) => {
  uploadAgain(event.detail.attachment.id);
});

Slots

Slot	Purpose
`icon`	Replaces both the preview image and inferred file icon.

CSS parts

Part	Purpose
`chip`	Outer attachment surface.
`icon`	Icon or preview area.
`remove`	Remove button.
`retry`	Retry button.
`error-tooltip`	Error detail popover.

Common CSS custom properties

Variable	Purpose
`--loquix-attachment-chip-bg`	Chip background.
`--loquix-attachment-chip-border-color`	Border color.
`--loquix-attachment-chip-border-radius`	Corner radius.
`--loquix-attachment-chip-color`	Text and icon color.
`--loquix-attachment-chip-progress-color`	Upload progress color.
`--loquix-attachment-chip-error-color`	Error state color.
`--loquix-attachment-chip-preview-size`	Thumbnail size.
`--loquix-attachment-chip-filename-max-width`	Maximum filename width.