Chucao — el sistema de diseño de devsChile

Acordeón de apertura única; cada ítem es un botón accesible con panel role="region" (contenido por slot panel-<value>). Emite chChange.

<ch-accordion id="demo-accordion"></ch-accordion>

Mensaje de estado en bloque, con tres variantes. warning se anuncia con role="alert"; default y positive usan role="status". Definir dismiss-label agrega un botón de cierre que emite chDismiss.

<ch-alert>Los cambios se guardan solos mientras editas.</ch-alert>
<ch-alert variant="positive">Componente publicado en el CDN.</ch-alert>
<ch-alert variant="warning">No pudimos conectar con el servidor.</ch-alert>
<ch-alert id="demo-alert" dismiss-label="Descartar aviso">Este aviso se puede cerrar.</ch-alert>

Etiqueta de estado compacta con tres variantes.

<ch-badge>comunidad</ch-badge>
<ch-badge variant="positive">Disponible</ch-badge>
<ch-badge variant="warning">placeholder</ch-badge>

Botón accesible con variantes primary/secondary/ghost/danger, tamaños sm/md/lg, estado loading con ch-spinner y render como enlace con href. Emite chClick.

<ch-button id="demo-button">Primario</ch-button>
<ch-button variant="secondary">Secundario</ch-button>
<ch-button variant="ghost">Ghost</ch-button>
<ch-button variant="danger">Eliminar</ch-button>
<ch-button size="sm">Pequeño</ch-button>
<ch-button size="lg">Grande</ch-button>
<ch-button loading>Guardando</ch-button>
<ch-button variant="secondary" href="https://devschile.cl" target="_blank">Ver sitio</ch-button>
<ch-button variant="ghost" label="Agregar"><span slot="start">+</span>Agregar</ch-button>

Contenedor de superficie con blur, borde y una línea de acento en hover.

<ch-card>
  <h4>🔗 Links de la semana</h4>
  <p>Pasa el mouse — el borde y una línea de acento aparecen en hover.</p>
  <ch-button variant="secondary">Ver más</ch-button>
</ch-card>

Casilla de verificación con label asociada, estado checked, estados hint/errorMessage y evento chChange.

<ch-checkbox label="Acepto los términos"></ch-checkbox>
<ch-checkbox id="demo-checkbox" label="Recibir novedades" checked></ch-checkbox>
<ch-checkbox label="Deshabilitado" disabled></ch-checkbox>

Separador horizontal (por defecto) o vertical con aria-orientation.

<ch-card>
  <p>Bloque superior</p>
  <ch-divider></ch-divider>
  <p>Bloque inferior</p>
  <div class="ch-flex ch-gap-sm" style="height: 3.5rem">
    <span>Izquierda</span>
    <ch-divider orientation="vertical"></ch-divider>
    <span>Derecha</span>
  </div>
</ch-card>

Panel lateral deslizante sobre el <dialog> nativo, abierto con showModal(): el navegador se encarga del foco, del cierre con Escape y del backdrop, y la página de fondo queda bloqueada. Se ancla a side (start/end/top/bottom) y expone slots header, default y footer. Emite chOpen y chClose.

<ch-button id="demo-drawer-trigger">Abrir panel</ch-button>
<ch-drawer id="demo-drawer" label="Filtros" close-label="Cerrar panel"><h4 slot="header">Filtros</h4><p>Panel lateral para navegación, edición o detalles rápidos.</p><div slot="footer"><ch-button variant="ghost">Cancelar</ch-button><ch-button>Aplicar</ch-button></div></ch-drawer>
<ch-button id="demo-drawer-start-trigger" variant="secondary">Abrir desde start</ch-button>
<ch-drawer id="demo-drawer-start" label="Navegación" side="start" close-label="Cerrar panel"><h4 slot="header">Navegación</h4><p>Se desliza desde el borde inicial.</p></ch-drawer>

Emoji inline desde el CDN de devsChile. Mapea nombres y alias a través de emoji-map.json y prueba extensiones (.png, .gif, .jpg, .svg) automáticamente. Tamaños: sm, md, lg, xl.

<ch-emoji name="huemul-love" size="xl"></ch-emoji>
<ch-emoji name="heart" size="lg"></ch-emoji>
<ch-emoji name="hypnotoad" size="lg"></ch-emoji>
<ch-emoji name="lmao" size="md"></ch-emoji>
<ch-emoji name="loading" size="sm"></ch-emoji>

Campo de texto con label asociado vía id/for. Emite chInput (cada tecla) y chChange (al confirmar).

<ch-input id="demo-input" label="Correo" type="email" placeholder="tu@email.com"></ch-input>
<ch-input label="Contraseña" type="password" placeholder="••••••••" hint="Mínimo 8 caracteres"></ch-input>
<ch-input label="Usuario" invalid errorMessage="Este campo es obligatorio"></ch-input>

Enlace accesible con variantes default/muted y estado disabled. Emite chClick.

<ch-link id="demo-link" href="#componentes">Ir a componentes</ch-link>
<ch-link href="https://github.com/devschile/chucao" target="_blank">GitHub ↗</ch-link>
<ch-link variant="muted">Enlace atenuado</ch-link>
<ch-link disabled>Deshabilitado</ch-link>

Diálogo modal sobre el <dialog> nativo, abierto con showModal(): el navegador se encarga del foco, de marcar el resto de la página como inerte, del cierre con Escape y del backdrop. Se cierra además al hacer clic fuera del diálogo. Admite size (sm/md/lg) para el ancho máximo, ajustable también con la custom property --ch-modal-width. Emite chOpen y chClose.

<ch-button id="demo-modal-trigger">Abrir diálogo</ch-button>
<ch-button id="demo-modal-lg-trigger" variant="secondary">Abrir ancho (lg)</ch-button>
<ch-modal id="demo-modal" label="Confirmar publicación" close-label="Cerrar diálogo"><h4 slot="heading">¿Publicar al CDN?</h4><p>Se publicará la versión actual de la librería. La acción no se puede deshacer.</p></ch-modal>
<ch-modal id="demo-modal-lg" size="lg" label="Nueva transacción" close-label="Cerrar diálogo"><h4 slot="heading">Nueva transacción</h4><p>Con <code>size="lg"</code> el diálogo llega a 48rem, suficiente para un formulario en dos columnas.</p></ch-modal>

Grupo de selección única; las opciones se pasan por options. Emite chChange con el valor elegido.

<ch-radio id="demo-radio" label="Elige un tema"></ch-radio>

Control segmentado para alternar entre pocas opciones mutuamente excluyentes. Las opciones se pasan por options; admite size (sm/md) y participa de formularios con name/value. Emite chChange con el valor elegido.

<ch-segmented-control id="demo-segmented" label="Tipo de movimiento"></ch-segmented-control>

Select estilizado; las opciones se pasan por la prop options. Emite chChange.

<ch-select id="demo-select" label="País" placeholder="Elige un país"></ch-select>

Indicador de carga en tres tamaños; hereda el color del texto que lo rodea. Con label se anuncia como role="status", sin él queda decorativo.

<ch-spinner size="sm" label="Cargando"></ch-spinner>
<ch-spinner label="Cargando"></ch-spinner>
<ch-spinner size="lg" label="Cargando"></ch-spinner>
<ch-spinner style="color: var(--accent)" label="Cargando"></ch-spinner>
<ch-button variant="primary" loading>Guardando</ch-button>

Interruptor on/off accesible (role="switch") con label asociada. Emite chChange.

<ch-switch label="Modo oscuro" checked></ch-switch>
<ch-switch id="demo-switch" label="Notificaciones"></ch-switch>
<ch-switch label="Deshabilitado" disabled></ch-switch>

Pestañas accesibles (WAI-ARIA) con navegación por flechas; las opciones van por tabs y el panel activo recibe contenido por slot panel-<value>. Emite chChange.

<ch-tabs id="demo-tabs" label="Secciones"></ch-tabs>

Área de texto con label asociada. Emite chInput (cada tecla) y chChange (al confirmar).

<ch-textarea id="demo-textarea" label="Mensaje" placeholder="Escribe aquí..." rows="4"></ch-textarea>

Texto de ayuda que aparece al pasar el mouse y al enfocar con el teclado, con cuatro posiciones. El disparador y el texto van por slot (trigger y content) para que queden en el mismo árbol: así el aria-describedby resuelve y el texto llega a los lectores de pantalla. El disparador debe ser un elemento nativo enfocable.

<ch-tooltip><button class="demo-tooltip-trigger" type="button" slot="trigger">Arriba</button><span slot="content">Se publica al CDN</span></ch-tooltip>
<ch-tooltip placement="bottom"><button class="demo-tooltip-trigger" type="button" slot="trigger">Abajo</button><span slot="content">Se publica al CDN</span></ch-tooltip>
<ch-tooltip placement="left"><button class="demo-tooltip-trigger" type="button" slot="trigger">Izquierda</button><span slot="content">Se publica al CDN</span></ch-tooltip>
<ch-tooltip placement="right"><button class="demo-tooltip-trigger" type="button" slot="trigger">Derecha</button><span slot="content">Se publica al CDN</span></ch-tooltip>