File List

Preview

<esa-file-list id="files"></esa-file-list>

<script>
  el.files = [
    { name: 'nesting-bird-survey-2026.pdf', href: '#' },
    { name: 'weap-signin-2026-05.pdf', href: '#' },
  ];
</script>

Download & remove

Each row can carry a download action, a remove action, or both. The editor case uses removable with downloadable=false; a read-only display uses the default (download only).

<esa-file-list downloadable removable></esa-file-list>  <!-- both -->
<esa-file-list removable downloadable="false"></esa-file-list>  <!-- remove only -->

API

Events

Accessibility

• Each action button carries an explicit aria-label naming the file (e.g. “Download nesting-bird-survey.pdf”).
• File names truncate with ellipsis; the full name is available via the row title.
• Removing a row updates the local files array and emits remove; consumers persist the change.

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.