file-input — a picker that reads like one

Two trigger postures over one visually hidden native input: the default drop zone (dashed 1px — the dash is reserved for drop targets and invalid shells, so the drag-over swap to --primary can never read as an error) and the compact button trigger. The zone's hint line is composed honestly from the field's own contract (accept: image/* · max: 3 files · single file) and a hint prop overrides it. The gate is the honesty kernel: the platform picker filters by accept itself, but DROPS bypass it — so drops are re-checked, and violating files never enter the bound File[]; they surface through the error line and the optional onreject callback. maxFiles reports overflow without truncating the array.

ONE accessible control: the visible trigger IS the picker for tabs and assistive tech — the native input is clipped, tabindex="-1", aria-hidden (measured: Enter on the trigger reaches the platform filechooser; the native input is absent from the tab order). Both postures are real drop targets — an enter-depth counter defeats child-element flicker and dataTransfer.types is checked so only file drags arm the pose (measured: an image and a .txt dropped together on an accept="image/*" zone bind the png and reject the txt). Selected files render as ant-style rows in one bordered box — square thumb (a live object-URL preview for images, revoked on remove, on unmount, AND on external splices of the bound array; zero-dependency kind glyphs for everything else) | ellipsized name with a title tooltip | size | remove × — with a remove-all tail on multi-file lists.

The paint: density is this family's deepest axis — the root aliases the closed control contract (--jx-file-* seams over the hit/icon/text/inset ladders) and the zone, rows, thumbs and voices all step with the rung (measured in the axis table). Theme splits by emission form: the zone's typed border and ground freeze at the :root pole while the well shadow, the drag ink and the row hairlines flip. The InputGroup hardening law applies (min-width 0 on every flex child, max-width 100% shells, ellipsized names) — 390px hosts survive unbroken filenames. Geometry is logical-property-only, so dir="rtl" mirrors the rows with zero branches. Kinship: input (the shell/label/error law), input-group (the hardening law), press-button (the press poses).

<script lang="ts">
  import FileInput from '@ui/file-input.svelte';
</script>

<div class="grid gap-5 min-[760px]:grid-cols-3">
  <FileInput label="xs rows" density="xs" multiple bind:files={multiFiles} />
  <FileInput label="default rows" density="default" multiple bind:files={multiFiles} />
  <FileInput label="lg rows" density="lg" multiple bind:files={multiFiles} />
</div>

Every row is keyboard-operable: the × carries aria-label="remove NAME" and the family's inset focus law; removal presses back into the page. The whole control is logical-property-only, so dir="rtl" mirrors thumbs, names and buttons with zero branches.