File input

The zone is a <label for> and not a <div> with a click handler, which is what keeps this small: clicking it opens the picker with no script, it is announced as part of the control, and the <input> inside it is still the thing that focuses and submits.

That input is .sr-only, never display: none — a hidden file input is not focusable and drops out of the tab order, which is the trap this component has warned about since it was CSS-only. Removing a file is the part with no shortcut: input.files is a read-only live FileList with no remove() in any engine, so both accepting a drop and dropping a row go through a fresh DataTransfer whose files is assigned back. Thumbnails are URL.createObjectURL, and every one of them is revoked when its row goes — forgetting is a leak that only shows after somebody attaches a hundred photographs. data-file-max is a courtesy and not a control: the server has to check anyway.

Without the module this is the whole component, and it is complete: worn with .input, which owns the box, and adding exactly one thing — ::file-selector-button, the standard way to reach the button the browser draws inside the control.

That pseudo-element is what makes the old trick of hiding the input behind a <label class="btn"> unnecessary, and it was never a good trade: a hidden input is not focusable, so the control leaves the tab order and the file name the UA renders disappears, which is why every implementation of it ends up writing script to put both back.