# Componentes / Components

> The most-used web components and page sections, with the design of coss ui and Tailark (MIT), rebuilt in dependency-free HTML, CSS and JavaScript. Native elements first (button, dialog, details, select, popover, inputs) so screen readers and browser agents operate them directly. Part of MIRÓ Labs.

Site: https://componentes-lovat.vercel.app/
License: MIT. Design credit: coss ui and Origin UI (MIT, © coss.com); sections from Tailark (MIT, © Irung).

## How to use a component

1. Add https://componentes-lovat.vercel.app/tokens.css once (theme variables, dark theme via class `dark` on `<html>`).
2. Add the component's HTML, CSS and JS. If it lists `requires`, add those first.
3. Or fetch `/r/<name>.html`: tokens, dependencies and component in one file.
4. Classes start with `c-`. Scripts register under `window.Componentes` and self-initialize; call `Componentes.<name>.init(root)` after inserting markup. Toasts: `Componentes.toast(title, {description, type})`.

## Cómo elegir (reglas de MIRÓ Labs)

Cada pieza en components.json trae `contexto` (landing | herramienta | ambos), `densidad` (baja | media | alta), `tono` (sobria | editorial | lúdica), `cuando` y `cuando_no`.

1. Decide primero el contexto. Una landing convence; una herramienta sirve para trabajar. Las secciones (contexto `landing`) nunca van dentro de una herramienta; una herramienta se arma con la estructura de dashboard y componentes.
2. Una idea por pantalla: un solo protagonista arriba (el hero en una landing, el gráfico principal en un dashboard).
3. En dashboards, pocos componentes densos: hasta 4 tarjetas de métrica y 1 o 2 gráficos por vista. Lo demás, en otra vista o en un desplegable.
4. Una landing típica usa 5 a 7 secciones en este orden: barra de navegación, hero, logos, funciones, estadísticas o testimonios, precios, preguntas, llamado a la acción, footer. No uses todas.
5. Color: nunca escribas colores. Carga tokens.css y después un tema de Sanzo Wada (`https://sanzo-wada-chi.vercel.app/temas/NNN.css`) y pon su clase en `<html>`: `.wada-NNN` (acento, para herramientas) o `.wada-NNN-inmersivo` (la combinación es la página, para landings de autor). Para el tema oscuro agrega `dark`.
6. Sin degradados en la interfaz; como mucho, líneas finas paralelas. Esquinas redondeadas y sombras suaves sí.
7. Un solo momento animado por página (por ejemplo, la franja de logos en movimiento). El resto, quieto.
8. Nunca cifras ni textos inventados como si fueran reales: los ejemplos van marcados como ejemplos.
9. Tono: `sobria` para herramientas y formularios; `editorial` para landings. No mezcles más de un tono por página.
10. Entre piezas parecidas, sigue `cuando` y `cuando_no` (por ejemplo, radios para 2 a 6 opciones, select para 5 a 30).

## Machine-readable

- [components.json](https://componentes-lovat.vercel.app/components.json)
- `https://componentes-lovat.vercel.app/r/<name>.json`: record with file contents, ARIA roles, keyboard, credits
- `https://componentes-lovat.vercel.app/raw/<name>/<name>.(html|css|js)`

## Sections

- [Hero](https://componentes-lovat.vercel.app/c/hero.md): The first screen: announcement, headline, subtitle, two buttons and a product view.
- [Logo cloud](https://componentes-lovat.vercel.app/c/logos.md): “Trusted by” strip, static or scrolling.
- [Features](https://componentes-lovat.vercel.app/c/features.md): Headline, subtitle and three benefits with an illustration each.
- [Stats](https://componentes-lovat.vercel.app/c/stats.md): Four large figures with their labels.
- [Testimonials](https://componentes-lovat.vercel.app/c/testimonials.md): Three quotes with initials, name and role.
- [Pricing](https://componentes-lovat.vercel.app/c/pricing.md): Three plans in one card, with the middle one highlighted.
- [FAQ](https://componentes-lovat.vercel.app/c/faq.md): Two-column questions on the native accordion.
- [Call to action](https://componentes-lovat.vercel.app/c/cta.md): Closing band with a headline and two buttons.
- [Newsletter](https://componentes-lovat.vercel.app/c/newsletter.md): Email field and subscribe button, with validation.
- [Footer](https://componentes-lovat.vercel.app/c/footer.md): Brand, links in three columns, legal notice and social links.

## Dashboards

- [Dashboard layout](https://componentes-lovat.vercel.app/c/dashboard.md): Side navigation and content with metrics and a chart.
- [Stat card](https://componentes-lovat.vercel.app/c/stat-card.md): Figure, change and a small trend line.
- [Chart](https://componentes-lovat.vercel.app/c/chart.md): Line and bar charts with no dependencies; data lives in an HTML table.

## Actions

- [Button](https://componentes-lovat.vercel.app/c/button.md): Triggers an action. Primary, outline, secondary, ghost, destructive and link variants.

## Forms

- [Text field](https://componentes-lovat.vercel.app/c/text-field.md): Input and textarea with label, hint and error.
- [Checkbox](https://componentes-lovat.vercel.app/c/checkbox.md): coss ui checkboxes over a native checkbox. Includes “All” with a mixed state.
- [Radio](https://componentes-lovat.vercel.app/c/radio.md): Mutually exclusive options with coss ui's design over native radios.
- [Select](https://componentes-lovat.vercel.app/c/select.md): The browser's select with coss ui's look.
- [Switch](https://componentes-lovat.vercel.app/c/switch.md): Toggle for settings applied instantly.

## Navigation

- [Navigation bar](https://componentes-lovat.vercel.app/c/navbar.md): Header with logo, links and actions. On mobile, links move into a menu.
- [Breadcrumbs](https://componentes-lovat.vercel.app/c/breadcrumb.md): Shows where you are in the site.
- [Pagination](https://componentes-lovat.vercel.app/c/pagination.md): Links to result pages with previous and next.
- [Tabs](https://componentes-lovat.vercel.app/c/tabs.md): Switches views; the indicator slides under the active tab.

## Disclosure

- [Accordion](https://componentes-lovat.vercel.app/c/accordion.md): Sections that open and close. Works without JavaScript.
- [Dropdown menu](https://componentes-lovat.vercel.app/c/menu.md): List of actions opened from a button.
- [Tooltip](https://componentes-lovat.vercel.app/c/tooltip.md): Short label on hover or focus.

## Overlays

- [Dialog](https://componentes-lovat.vercel.app/c/dialog.md): Modal window for a short task or a confirmation.
- [Drawer](https://componentes-lovat.vercel.app/c/drawer.md): Side panel for filters, settings or details.

## Feedback

- [Alert](https://componentes-lovat.vercel.app/c/alert.md): In-page message: info, success, warning or error.
- [Toast](https://componentes-lovat.vercel.app/c/toast.md): Short message that stacks and spreads on hover.

## Data

- [Badge](https://componentes-lovat.vercel.app/c/badge.md): Short label for status, category or count.
- [Explorador de archivos](https://componentes-lovat.vercel.app/c/file-explorer.md): Selecciona, busca y lee archivos locales de texto/CSV.
- [Table](https://componentes-lovat.vercel.app/c/table.md): Table with column sorting and horizontal scroll on mobile.
- [Tabla de costeo](https://componentes-lovat.vercel.app/c/cost-table.md): Edición, selección, filtros y totales de partidas.
- [Card](https://componentes-lovat.vercel.app/c/card.md): Container with header, content and actions.

## Flows

- [Importar y revisar](https://componentes-lovat.vercel.app/c/flow-import.md): Seleccionar archivo → revisar contenido → descargar copia.
- [Preparar una cotización](https://componentes-lovat.vercel.app/c/flow-quote.md): Cliente → editar partidas y totales → exportar cotización JSON.
- [Referencia a exploración](https://componentes-lovat.vercel.app/c/flow-reference.md): Registrar fuente e intención → revisar → comparar tratamientos visuales.