# File Uploader Card — Figma Assembly Rules

<!-- figma-assembly.v2
{ "schemaVersion":"figma-assembly.v2", "id":"component.file-upload-card", "level":"molecule", "kind":"published", "aliases":["🟠 🚛 File Uploader Card","File Uploader Card","wbl-file-uploader-card"], "uxSpec":"specs/ux/components/molecules/wbl-file-uploader-card.md", "inventoryTarget":"file-upload-card", "componentKeys":["dd9869467bc9afed2e8fa97c32b5fb848484f899"], "dependencies":["component.icon"], "optionalDependencies":[], "coveredBy":[] }
-->

Status: active Figma assembly contract.

## Scope

Use the published File Uploader Card master only for the compact empty image
upload target. It owns the 120 × 108px drop surface, the optional supporting
text, and its empty-card visual states. It does not own loaded-file content.

## Source evidence

- Published component set
  [`1589:9995`](https://www.figma.com/design/EO9tuCsqwuHL8cZ4Eb2psR/%F0%9F%9A%9B-WB-Logistics-UI-kit?node-id=1589-9995),
  key `dd9869467bc9afed2e8fa97c32b5fb848484f899`, verified through Figma
  metadata, design context, and variable definitions on 2026-09-02.
- The master exposes `Show text`, `State`, and `Filled`; `Filled` currently has
  the sole allowed value `No`.
- The required nested instance is `Icon/plus` (24px), represented by
  `component.icon`.
- `File Card` `4854:78239` is deliberately excluded: it is the separate
  `component.file` master, not a nested dependency or a variant of this one.

## Required assembly

- Rule ID: `file-upload-card.published` — place a File Uploader Card instance; do not recreate the surface with a
  locally drawn frame.
- Rule ID: `file-upload-card.empty-target` — keep `Filled=No`. A preview, filename, document icon, or file size needs a
  different component boundary; none is a hidden property of this master.
- Toggle only `Show text` and select one of the published `State` values:
  `Default`, `Hover`, `Drag-and-drop`, `Disabled`, `Focused`, `Error`,
  `Error Hover`, or `Error Focus`.
- Preserve the required `Icon/plus` instance and its 24px wrapper. Do not draw
  a replacement glyph or swap an approximate icon.

## Tokens and state rules

- Default uses white `bg/level 1 base`, a 1px dashed `stroke/secondary` border,
  `radius/L`, and `text icon/secondary` for supporting text.
- Hover and disabled use `bg/level2`; disabled switches the border to solid and
  the icon/text to `text icon/tertiary`.
- Drag-and-drop uses `bg/level2` with a 2px `stroke/accent` border.
- Focused keeps the inner dashed surface and adds a 4px `bg/accent sec` outer
  focus treatment.
- Error uses a 2px `text icon/danger` border; error hover uses `bg/level2`.
  Error focus adds a 4px `content bg/red` outer treatment.
- Supporting text uses the description role: ALS Hauss VF, 13px / 17px,
  regular weight, with an 8px gap below the surface.

## Verification checklist

- The instance resolves to component key
  `dd9869467bc9afed2e8fa97c32b5fb848484f899`.
- `Filled` remains `No`, and `Show text` plus the selected state match the
  intended empty-card composition.
- `Icon/plus` is an actual published Icon instance at 24px.
- Size, radius, spacing, semantic colours, stroke widths, and focus/error
  treatments remain variable-bound with no local colour overrides.
- No File Card, generic document, filename, file-size, or multi-file UI is
  presented as an instance or variant of this master.