141Dropzone & file row

The upload target: dashed border (the “nothing here yet” device) resolving to brand on hover, focus or drag-over; the real file input covers the zone. Uploaded files are mono terminal rows with a status chip.

Use it for

Video, thumbnail and attachment uploads
compact for the settings rail

Not for

Tiny “change avatar” spots — a plain outline button is enough

Zone

Drop the lesson video here, or browse mp4 · up to 4 GB · 16:9

markup

<label class="ns-dropzone" style="inline-size:100%">
  <i class="ph ph-upload-simple ns-dropzone__icon" aria-hidden="true"></i>
  <span>Drop the lesson video here, or browse</span>
  <span class="ns-dropzone__hint">mp4 · up to 4 GB · 16:9</span>
  <input type="file" accept="video/mp4">
</label>

File rows

02-lightning-navigation-v3.mp4 612 MB Processed

navigation-cheatsheet.pdf 1.2 MB Uploading

markup

<div style="inline-size:100%">
  <div class="ns-file">
    <i class="ph ph-file-video" aria-hidden="true"></i>
    <span class="ns-file__name">02-lightning-navigation-v3.mp4</span>
    <span class="ns-file__size">612 MB</span>
    <span class="ns-status ns-status--success">Processed</span>
    <button type="button" class="ns-btn ns-btn--quiet ns-btn--sm ns-btn--icon ns-file__remove" aria-label="Remove"><i class="ph ph-x" aria-hidden="true"></i></button>
  </div>
  <div class="ns-file">
    <i class="ph ph-file" aria-hidden="true"></i>
    <span class="ns-file__name">navigation-cheatsheet.pdf</span>
    <span class="ns-file__size">1.2 MB</span>
    <span class="ns-status ns-status--info">Uploading</span>
  </div>
</div>

Accessibility contract

The zone is a wrapping the real input — click, keyboard and screen reader all reach it
Drag state is data-state=“over”, styling only; drop is a convenience, never the only path