# Explorador de archivos / Explorador de archivos

> Selecciona, busca y lee archivos locales de texto/CSV.

Page: https://componentes-lovat.vercel.app/c/file-explorer/  
License: MIT · Design:   
Requires: tokens.css  
Context: herramienta · Density: media · Tone: sobria

## Files

- Tokens (once): https://componentes-lovat.vercel.app/tokens.css
- HTML: https://componentes-lovat.vercel.app/raw/file-explorer/file-explorer.html
- CSS: https://componentes-lovat.vercel.app/raw/file-explorer/file-explorer.css
- JS: https://componentes-lovat.vercel.app/raw/file-explorer/file-explorer.js
- Everything in one file: https://componentes-lovat.vercel.app/r/file-explorer.html

Dark theme: add class `dark` to `<html>`.

## When to use

- Selecciona, busca y lee archivos locales de texto/CSV.

## When not to use

- Examples do not connect accounts or save files to a server.

## Accessibility

Roles: region

| Keys | Action |
|---|---|
| Tab / Enter | Navigate and activate controls |

- Errors and results use role=status.

## Code

```html
<section class="work-card" aria-label="Explorador de archivos"><h2>Archivos de trabajo</h2><label>Añadir archivos de texto o CSV<input data-files type="file" accept=".txt,.md,.csv" multiple></label><label>Buscar archivo<input data-search type="search"></label><ul data-list></ul><pre data-content>Elige un archivo para leerlo aquí.</pre><p role="status" data-status></p></section>
```

```css
.work-card{width:min(720px,100%);padding:24px;box-sizing:border-box;border:1px solid var(--border);border-radius:12px;background:var(--background);color:var(--foreground);font:14px/1.5 var(--font-sans)}.work-card h2{font-size:24px;margin:0 0 8px}.work-card label{display:grid;gap:5px;margin:12px 0}.work-card input,.work-card textarea,.work-card button{font:inherit;border:1px solid var(--border);border-radius:6px;padding:8px;background:var(--background);color:var(--foreground)}.work-card button{cursor:pointer}.work-card button:disabled{opacity:.45}.work-card :focus-visible{outline:2px solid var(--foreground);outline-offset:2px}.work-card table{width:100%;border-collapse:collapse}.work-card td,.work-card th{padding:8px 4px;text-align:left;border-bottom:1px solid var(--border)}.work-card td input{width:100%;box-sizing:border-box;min-width:65px}.work-card .table-scroll{overflow:auto}.work-card .table-scroll table{min-width:460px}.work-card .actions{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.work-card [hidden]{display:none!important}.work-card pre{white-space:pre-wrap;max-height:240px;overflow:auto}.work-card .steps{color:var(--muted-foreground);font-size:12px}.work-card img{max-width:100%;max-height:200px;object-fit:contain}.work-card output{font-weight:600}.work-card .muted{color:var(--muted-foreground)}
```

```js
(()=>{document.querySelectorAll('[aria-label="Explorador de archivos"]').forEach(root=>{let files=[];const list=root.querySelector('[data-list]'),status=root.querySelector('[data-status]');function render(){list.replaceChildren();files.filter(f=>f.name.toLowerCase().includes(root.querySelector('[data-search]').value.toLowerCase())).forEach(f=>{const li=document.createElement('li'),b=document.createElement('button');b.textContent=f.name;b.onclick=async()=>{root.querySelector('[data-content]').textContent=await f.text();status.textContent=f.name+' · '+f.size+' bytes';};li.append(b);list.append(li);});}root.querySelector('[data-files]').onchange=e=>{files=[...e.target.files].filter(f=>f.size<=1000000&&/\.(txt|md|csv)$/i.test(f.name));status.textContent=files.length+' archivos disponibles. Máximo 1 MB por archivo de texto.';render();};root.querySelector('[data-search]').oninput=render;});})();
```

## Credits