File Upload

The .pl-c-file-upload is a drag-and-drop zone wrapping a native <input type="file">. The input is visually hidden; the zone is the click target. Uses :has() for drag-over and disabled states.

Semantic HTML

<label class="pl-c-file-upload">
  <input type="file" class="pl-c-file-upload__input" multiple />
  <span class="pl-c-file-upload__zone">
    <svg class="pl-c-file-upload__icon">...</svg>
    <span class="pl-c-file-upload__text">
      <strong>Drag files here</strong> or click to browse
    </span>
  </span>
</label>

Class contract