v1.0.0 · MIT · cero dependencias de ejecución
Treinta y tres componentes accesibles, un conjunto finito de utilidades y tokens de diseño como contrato visual. Enlaza una hoja de estilo y ya estás construyendo: HTML plano, WordPress, Astro o cualquier empaquetador.
Cada clase, token, atributo y evento sigue el mismo contrato con prefijo, así que lo que aprendes en la primera página te sigue sirviendo en la última.
Los enlaces navegan, los botones actúan y los controles nativos hacen su trabajo. Los componentes de contenido no necesitan ni un script; los interactivos mejoran marcado que ya funciona y lo devuelven tal cual en destroy.
Pon --iv-color-primary o --iv-radius-md en cualquier ámbito y todos los componentes te siguen. Los temas claro, oscuro y del sistema vienen de serie y no necesitan JavaScript.
init idempotente, destroy limpio, eventos cancelables, patrones de teclado de la APG, sin observadores globales, sin eval e importaciones seguras al renderizar en el servidor.
CSS en capas y plano, una hoja por componente, módulos ES con exports reales, un IIFE con un solo global, tipos de TypeScript y los tokens en JSON.
<div class="iv-cluster">
<button class="iv-button iv-button--primary" type="button">Primary</button>
<button class="iv-button iv-button--secondary" type="button">Secondary</button>
<button class="iv-button iv-button--ghost" type="button">Ghost</button>
<button class="iv-button iv-button--danger" type="button">Danger</button>
<button class="iv-button" type="button">Neutral</button>
<a class="iv-button iv-button--secondary" href="#docs">Link as button</a>
</div><div class="iv-stack" style="max-width: 30rem">
<p class="iv-u-text-sm iv-u-text-muted iv-u-m-0">Demo fields with made-up values. Nothing is submitted; the CSS here needs no JavaScript.</p>
<div class="iv-field iv-field--float">
<input class="iv-input" id="fl-email" name="email" type="email" placeholder=" " autocomplete="email">
<label class="iv-label" for="fl-email">Work email</label>
</div>
<div class="iv-field iv-field--float">
<input class="iv-input" id="fl-company" name="company" type="text" placeholder=" " value="iNTERVOLUTIONS" autocomplete="organization">
<label class="iv-label" for="fl-company">Company</label>
</div>
<div class="iv-field iv-field--float">
<select class="iv-select" id="fl-plan" name="plan">
<option value="">Choose a plan</option>
<option value="starter">Starter</option>
<option value="team">Team</option>
<option value="enterprise">Enterprise</option>
</select>
<label class="iv-label" for="fl-plan">Plan</label>
</div>
<div class="iv-field iv-field--float">
<textarea class="iv-textarea" id="fl-notes" name="notes" placeholder=" "></textarea>
<label class="iv-label" for="fl-notes">Notes for the team</label>
</div>
<div class="iv-field">
<label class="iv-label" for="fg-site">Site address</label>
<div class="iv-input-group">
<span class="iv-input-group__addon">https://</span>
<input class="iv-input" id="fg-site" name="site" type="text" value="intervolutions" autocomplete="off">
<span class="iv-input-group__addon">.com</span>
</div>
</div>
<div class="iv-field">
<label class="iv-label" for="fg-key">API key</label>
<div class="iv-input-group">
<input class="iv-input" id="fg-key" name="key" type="text" value="iv_demo_8f2c" readonly autocomplete="off">
<button class="iv-input-group__addon iv-input-group__addon--button" type="button">Copy</button>
</div>
<p class="iv-field__help iv-u-m-0">Made-up key. The button is a demo: it copies nothing.</p>
</div>
</div><div class="iv-tabs" data-iv-component="tabs" data-iv-activation="automatic">
<div class="iv-tabs__list" aria-label="Plans">
<a class="iv-tabs__tab" href="#p-monthly" id="t-monthly">Monthly</a>
<a class="iv-tabs__tab" href="#p-yearly" id="t-yearly">Yearly</a>
<a class="iv-tabs__tab" href="#p-enterprise" id="t-enterprise">Enterprise</a>
</div>
<section class="iv-tabs__panel" id="p-monthly">
<h3 class="iv-tabs__heading">Monthly</h3>
<p>29 € per seat and month. Every feature of the yearly plan, billed at the end of each period and cancellable at any time.</p>
</section>
<section class="iv-tabs__panel" id="p-yearly">
<h3 class="iv-tabs__heading">Yearly</h3>
<p>24 € per seat and month, billed once a year. Includes two additional sandbox environments and priority support during business hours.</p>
</section>
<section class="iv-tabs__panel" id="p-enterprise">
<h3 class="iv-tabs__heading">Enterprise</h3>
<p>Custom pricing with a signed service level agreement, single sign-on and a named technical contact. Talk to sales to get a quote.</p>
</section>
</div>// data-iv-component="tabs"
{
activation: "automatic",
}<a class="iv-button iv-button--primary" href="#signup" data-iv-open="signup">Create account</a>
<dialog class="iv-dialog" id="signup" data-iv-component="dialog" data-iv-initial-focus="#signup-email" aria-labelledby="signup-title">
<form method="dialog" class="iv-dialog__panel">
<header class="iv-dialog__header">
<h2 class="iv-dialog__title" id="signup-title">Create account</h2>
<button class="iv-button iv-button--ghost iv-button--icon" type="button" data-iv-close aria-label="Close">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg>
</button>
</header>
<div class="iv-dialog__body iv-stack">
<p class="iv-u-m-0">Demo dialog. Nothing is sent anywhere.</p>
<div class="iv-field">
<label class="iv-label" for="signup-email">Work email</label>
<input class="iv-input" id="signup-email" type="email" autocomplete="email">
</div>
</div>
<footer class="iv-dialog__footer">
<a class="iv-button iv-button--ghost" href="#" data-iv-close>Cancel</a>
<button class="iv-button iv-button--primary" value="confirm">Continue</button>
</footer>
</form>
</dialog>// data-iv-component="dialog"
{
open: "signup",
initialFocus: "#signup-email",
close: true,
}<div class="iv-field" style="max-width: 22rem">
<div class="iv-combobox" data-iv-component="combobox">
<label class="iv-label" for="c-country">Country</label>
<input class="iv-input iv-combobox__input" id="c-country" name="country" type="text" list="c-country-options" autocomplete="off" aria-describedby="c-country-help">
<datalist id="c-country-options">
<option value="Austria"></option>
<option value="Croatia"></option>
<option value="Türkiye"></option>
<option value="Denmark"></option>
<option value="Spain"></option>
<option value="Finland"></option>
<option value="France"></option>
<option value="Germany"></option>
<option value="Ireland"></option>
<option value="Netherlands"></option>
<option value="Portugal"></option>
<option value="Sweden"></option>
</datalist>
</div>
<p class="iv-field__help iv-u-m-0" id="c-country-help">Works as a plain <code><datalist></code> without JavaScript; with JavaScript the suggestions become a filtered listbox.</p>
</div><section class="iv-carousel" data-iv-component="carousel" data-iv-effect="cinema" data-iv-autoplay="7000" aria-roledescription="carousel" aria-label="Photographs from Unsplash, used as a demo">
<div class="iv-carousel__viewport">
<ul class="iv-carousel__track">
<li class="iv-carousel__slide" id="cp-ridge">
<figure class="iv-carousel__media"><img src="/photos/p1015.jpg" width="1280" height="800" alt="A river winding between forested mountains under a pale sky" loading="lazy"></figure>
<div class="iv-carousel__scrim"></div>
<div class="iv-carousel__caption"><span class="iv-badge iv-badge--primary">Landscape</span><h3>The valley opens</h3><p>Photograph by Alexey Topolyanskiy on Unsplash. Cinema effect: a slow zoom on the active image, captions rising in.</p></div>
</li>
<li class="iv-carousel__slide" id="cp-shore">
<figure class="iv-carousel__media"><img src="/photos/p1036.jpg" width="1280" height="800" alt="Snow-covered peaks above a glacial lake" loading="lazy"></figure>
<div class="iv-carousel__scrim"></div>
<div class="iv-carousel__caption"><span class="iv-badge iv-badge--primary">Alpine</span><h3>Above the lake</h3><p>Photograph by Wolfgang Lutz on Unsplash. Autoplay pauses while you hover or focus the carousel.</p></div>
</li>
<li class="iv-carousel__slide" id="cp-sea">
<figure class="iv-carousel__media"><img src="/photos/p1050.jpg" width="1280" height="800" alt="Sea stacks rising over turquoise water" loading="lazy"></figure>
<div class="iv-carousel__scrim"></div>
<div class="iv-carousel__caption"><span class="iv-badge iv-badge--primary">Coast</span><h3>Out along the pier</h3><p>Photograph by Joseph Barrientos on Unsplash. Every image carries real alt text; the scrim keeps the caption readable.</p></div>
</li>
<li class="iv-carousel__slide" id="cp-forest">
<figure class="iv-carousel__media"><img src="/photos/p1080.jpg" width="1280" height="800" alt="Crates of strawberries on a market stall" loading="lazy"></figure>
<div class="iv-carousel__scrim"></div>
<div class="iv-carousel__caption"><span class="iv-badge iv-badge--primary">Forest</span><h3>Looking up</h3><p>Photograph by veeterzy on Unsplash. Under reduced motion the crossfade shortens and the zoom stops.</p></div>
</li>
</ul>
</div>
<nav class="iv-carousel__dots" aria-label="Slides">
<a href="#cp-ridge"><span class="iv-u-sr-only">The valley opens</span></a>
<a href="#cp-shore"><span class="iv-u-sr-only">Above the lake</span></a>
<a href="#cp-sea"><span class="iv-u-sr-only">Out along the pier</span></a>
<a href="#cp-forest"><span class="iv-u-sr-only">Looking up</span></a>
</nav>
<div class="iv-carousel__controls">
<button class="iv-button iv-carousel__prev" type="button" hidden><span class="iv-u-sr-only">Previous slide</span><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M15 5l-7 7 7 7"/></svg></button>
<button class="iv-button iv-carousel__next" type="button" hidden><span class="iv-u-sr-only">Next slide</span><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M9 5l7 7-7 7"/></svg></button>
<button class="iv-button iv-carousel__toggle" type="button" hidden>Pause</button>
</div>
</section>// data-iv-component="carousel"
{
effect: "cinema",
autoplay: 7000,
}Pon data-iv-theme en cualquier elemento y esa rama de la página cambia de tema. Las elecciones explícitas ganan a la preferencia del sistema, los ámbitos se anidan y nada necesita almacenamiento ni script.
<html data-iv-theme="system">
<section data-iv-theme="dark">
<aside data-iv-theme="light">…</aside>
</section>
</html>
Un estudio creativo: portada cinematográfica con parallax, marquesina, tarjetas de servicios apiladas, galería con visor y stepper de contacto.
Abrir la receta
Un panel de producto: megamenú, cajón, cifras con contador, tabla con filtro y orden, paleta de comandos y formulario validado.
Abrir la receta
Una revista editorial: la tipografía como protagonista, masonry de artículos, barra de lectura, notas en popovers e impresión cuidada.
Abrir la receta
Un catálogo y una compra que no compra nada: filtros ricos, carrusel de producto, stepper de compra, cajón de carrito y diálogo de confirmación.
Abrir la recetaInstálalo desde npm, o copia dist/ junto a tu página y enlaza una hoja de estilo y un módulo. Sin archivo de configuración, sin plugin y sin compilador. La plantilla inicial y las cuatro recetas son exactamente esto y nada más.
npm install @intervolutions/ivolt<html class="iv-root" data-iv-theme="system">
<link rel="stylesheet" href="ivolt/css/ivolt.min.css">
<script type="module" src="ivolt/js/auto.js"></script>v1.0.0 con licencia MIT. Qué es público, y cómo puede cambiar, está escrito en estabilidad. Los tamaños de arriba se miden sobre los archivos que se distribuyen, en tiempo de build.