Componentes V5 · Sprint P1

11 componentes nuevos del Sprint V5 (mayo 2026): tabs, accordion, stepper, empty, skeleton, hero, code, avatar, breadcrumb, más CSS canónico para modal y toast. Filosofía Swiss × CIS — bordes finos, ink monocromo, tokens.

01·Tabs

Tab navigation horizontal con underline (default), pill chips o boxed. Soporta data-active o aria-selected. Count badge inside.

default · underline

variant="pill"

variant="bordered"

<div class="cis-tabs">
  <ul class="cis-tabs__list" role="tablist">
    <li><button class="cis-tab" role="tab" aria-selected="true">
      Overview
    </button></li>
    <li><button class="cis-tab" role="tab">
      Servicios <span class="cis-tab__count">12</span>
    </button></li>
  </ul>
  <div class="cis-tabs__panel">Contenido del tab activo</div>
  <div class="cis-tabs__panel" hidden>Otro panel</div>
</div>

Variantes

• data-variant="pill|bordered" · estilos alternativos del list.
• data-density="compact" · padding y font reducidos.
• aria-selected="true" o data-active en el tab activo.
• .cis-tab__count · badge numerico con color accent cuando active.
• .cis-tabs__panel[hidden] · oculta paneles inactivos.

02·Accordion

Disclosure con <details> nativo (sin JS) o componente custom con aria-expanded. Chevron rota 90° al abrir.

default · <details> nativo

variant="bordered"

<div class="cis-accordion">
  <details class="cis-accordion__item">
    <summary class="cis-accordion__trigger">
      <svg class="cis-accordion__icon" .../>
      <span class="cis-accordion__title">Pregunta</span>
      <span class="cis-accordion__meta">3 min</span>
    </summary>
    <div class="cis-accordion__panel">Respuesta</div>
  </details>
</div>

Variantes

• data-variant="bordered|ghost" · bordered con radius, ghost sin divisores.
• data-density="compact" · padding reducido.
• Usá <details open> para item abierto por default.
• .cis-accordion__meta · texto monospace al final del trigger.

03·Stepper

Progreso multi-step con estados upcoming, current, complete. Connector entre indicadores. En mobile colapsa a indicador "Paso N de M".

horizontal

vertical

<ol class="cis-stepper">
  <li class="cis-stepper__step" data-state="complete">
    <span class="cis-stepper__indicator">
      <span class="cis-stepper__number">01</span>
    </span>
    <div class="cis-stepper__body">
      <div class="cis-stepper__label">Cuenta</div>
      <div class="cis-stepper__description">Datos básicos</div>
    </div>
  </li>
  <li class="cis-stepper__step" data-state="current">...</li>
  <li class="cis-stepper__step" data-state="upcoming">...</li>
</ol>

Variantes

• data-orientation="horizontal|vertical" · default horizontal.
• data-state="upcoming|current|complete" · cambia indicador y connector.
• Step complete reemplaza el número con un check (CSS pseudo).
• Step current tiene fill accent + ring soft.
• En max-width: 600px, body desaparece y se muestra __mobile.

04·Empty

Empty state centrado para listas vacías o búsquedas sin resultados. Variants compact (inline en dropdowns) y hero (full page).

default

variant="compact"

variant="hero"

<div class="cis-empty">
  <span class="cis-empty__icon"><svg ...></svg></span>
  <h3 class="cis-empty__headline">Sin resultados</h3>
  <p class="cis-empty__description">Texto descriptivo...</p>
  <div class="cis-empty__actions">
    <button class="cis-empty__cta">Acción</button>
  </div>
</div>

Variantes

• data-variant="compact" · inline para dropdowns/list rows.
• data-variant="hero" · oversized para páginas full.
• .cis-empty__cta · botón ink primary, hover -> primary-hover.

05·Skeleton

Loading placeholders con shimmer animation. Variants text · line · circle · rect. data-lines para multi-línea.

variants

data-lines="3" (multi-line text)

composición de card

<span class="cis-skeleton" data-variant="circle"></span>
<span class="cis-skeleton" data-variant="text" style="width: 60%;"></span>
<span class="cis-skeleton" data-variant="rect" style="height: 80px;"></span>
<span class="cis-skeleton" data-lines="3"></span>

Variantes

• data-variant="text|line|circle|rect" · default text.
• data-lines="2|3|4|5" · render multi-line con box-shadow trick.
• @keyframes cis-skeleton-shimmer · 1.5s linear infinite.
• prefers-reduced-motion elimina shimmer y deja background sólido.

06·Hero

Encabezado de landing/sección con eyebrow + headline + lead. Variants split, centered, compact, bordered.

default · stacked

variant="centered"

variant="compact"

<section class="cis-hero" data-variant="centered">
  <div class="cis-hero__inner">
    <p class="cis-hero__eyebrow" data-accent>Beta abierta</p>
    <h1 class="cis-hero__headline">Análisis sin fricción.</h1>
    <p class="cis-hero__lead">Conectá tus fuentes en minutos.</p>
    <div class="cis-hero__actions">
      <a class="cis-hero__cta" data-variant="primary">Empezar</a>
      <a class="cis-hero__cta">Documentación</a>
    </div>
  </div>
</section>

Variantes

• data-variant="split" · grid 7fr 5fr (texto + media).
• data-variant="centered" · texto centrado, sin media.
• data-variant="compact" · padding y font reducidos para sub-pages.
• data-variant="bordered" · top + bottom rule.
• __cta[data-variant="primary|accent"] · ink fill o brand fill.

07·Code

Inline cis-code para chips dentro de párrafos, y cis-code-block para bloques con lang chip + copy button + line numbers.

inline

block

jsconst tabs = document.querySelector('cis-tabs');
tabs.setTabs([
  { id: 'overview', label: 'Overview' },
  { id: 'services', label: 'Services', count: 12 },
]);
tabs.addEventListener('cis:tab:change', e => {
  console.log(e.detail.tab);
});

block · line numbers

html<div class="cis-empty">  <span class="cis-empty__icon">...</span>  <h3 class="cis-empty__headline">Sin resultados</h3>  <p class="cis-empty__description">...</p></div>

variant="terminal"

npm install @cis/style
npm run build
added 142 packages in 8s

<p>Ejecutá <code class="cis-code">npm run build</code>.</p>

<pre class="cis-code-block" data-line-numbers>
  <span class="cis-code-block__lang">js</span>
  <code>
    <span class="cis-code-line">const x = 1;</span>
    <span class="cis-code-line" data-highlight>const y = 2;</span>
  </code>
</pre>

Variantes

• .cis-code · inline mono chip con bg ink-100.
• .cis-code-block · pre con padding md, overflow-x auto.
• __lang · chip top-right con lenguaje (HTML, CSS, JS, etc).
• __copy · button absoluto que aparece on-hover (JS pendiente).
• data-line-numbers · counter CSS automático.
• .cis-code-line[data-highlight] · línea destacada con border accent.
• data-variant="terminal" · dark forzado, prompt prefix.

08·Avatar

Avatares circulares o cuadrados, con img o initials fallback. Status dot configurable. cis-avatar-group para stack overlap.

sizes

variants

status dot

cis-avatar-group · overlap stack

<span class="cis-avatar" data-size="lg" data-variant="ink">
  <span class="cis-avatar__initials">MI</span>
  <span class="cis-avatar__status" data-status="online"></span>
</span>

<div class="cis-avatar-group">
  <span class="cis-avatar">...</span>
  <span class="cis-avatar">...</span>
  <span class="cis-avatar cis-avatar-group__more">
    <span class="cis-avatar__initials">+5</span>
  </span>
</div>

Variantes

• data-size="xs|sm|md|lg|xl" · 20/28/32/40/56 px.
• data-shape="circle|square" · default circle, square con radius-md.
• data-variant="accent|ink" · fill accent o ink monocromo.
• __status[data-status="online|busy|away|offline"] · dot bottom-right.
• cis-avatar-group · stack con margin-left negativo + border 2px en bg.

09·Breadcrumb

Navegación de migas de pan con separadores chevron o slash. Último item con aria-current="page". Truncation responsive opcional.

default · chevron separator

variant="mono" · slash separator

variant="bordered" · chip-style

<ol class="cis-breadcrumb">
  <li class="cis-breadcrumb__item"><a href="/">Inicio</a></li>
  <li class="cis-breadcrumb__separator">
    <svg ...chevron-right.../>
  </li>
  <li class="cis-breadcrumb__item"><a href="/p">Productos</a></li>
  <li class="cis-breadcrumb__separator">...</li>
  <li class="cis-breadcrumb__item" aria-current="page">
    <a href="" class="cis-breadcrumb__link">Detalle</a>
  </li>
</ol>

Variantes

• data-variant="mono" · JetBrains, slash via pseudo, font-size xs.
• data-variant="bordered" · cada link envuelto en chip 1px.
• aria-current="page" · último item, color text + weight 500, no link.
• data-mobile-collapse en items intermedios para colapsar <600px.

10·Modal

CSS canónico para <cis-modal>. Backdrop con blur, panel centrado, animation fade-in 200ms. Variants size sm/md/lg/xl.

preview estático (sin overlay full-screen)

tamaños

<!-- Standalone HTML markup -->
<div class="cis-modal" data-open data-size="md">
  <div class="cis-modal__overlay"></div>
  <div class="cis-modal__panel">
    <header class="cis-modal__header">
      <h3 class="cis-modal__title">Confirmar</h3>
      <button class="cis-modal__close" aria-label="Cerrar">×</button>
    </header>
    <div class="cis-modal__body">Cuerpo del diálogo.</div>
    <footer class="cis-modal__footer">
      <button class="btn">Cancelar</button>
      <button class="btn btn-primary">Confirmar</button>
    </footer>
  </div>
</div>

<!-- O como web component -->
<cis-modal id="m" modal-title="Título" size="md">
  <p>Contenido</p>
  <div slot="footer">
    <button class="btn btn-primary">OK</button>
  </div>
</cis-modal>

Variantes

• data-size="sm|md|lg|xl" · 420/560/760/960 px max-width.
• data-variant="dialog" · sin border en header, look conversacional.
• data-variant="full" · full-screen, sin border ni radius.
• data-open o open · activa el display flex + animation.
• Backdrop con backdrop-filter: blur(4px).
• Mobile (<480px): full-screen automático.

11·Toast

Stack de notifications fixed bottom-right (default). Variants info · success · warning · error con border-left 3px en color semantic.

preview estático

<!-- Stack standalone -->
<div class="cis-toast-stack" data-position="bottom-right">
  <div class="cis-toast" data-variant="success">
    <span class="cis-toast__icon">✓</span>
    <div class="cis-toast__content">
      <span class="cis-toast__title">Guardado</span>
      <span class="cis-toast__message">Cambios persistidos.</span>
    </div>
    <button class="cis-toast__close">×</button>
  </div>
</div>

<!-- O via web component + event-driven -->
<cis-toast></cis-toast>
<script>
  document.dispatchEvent(new CustomEvent('cis:toast', {
    detail: { message: 'Hecho', type: 'success' }
  }));
</script>

Variantes

• data-variant="info|success|warning|error" · cambia el color del border-left e icon.
• .cis-toast-stack[data-position="top-right|bottom-left|top-center|..."].
• .cis-toast__title · weight semibold; __message debajo más muted.
• .cis-toast__action · botón inline tipo link en el color del variant.
• animation: cis-toast-slide-in 250ms ease.