Sistema de Diseño Multi-Marca con Data Attributes
Explora matrices completas de componentes con todos sus estados y variantes
Matriz completa de botones primarios con todas las variantes (fill, stroke, text) y estados (default, hover, active, focus, loading, disabled).
Matriz completa de botones primarios con todas las variantes (fill, stroke, text) y estados (default, hover, active, focus, loading, disabled)
Matriz completa de botones de error con todas las variantes (fill, stroke, text) y estados. Usa la paleta feedback-error para acciones destructivas.
Componente checkbox con efecto halo Material Design. Matriz completa 2×2 (unchecked/checked × enabled/disabled) con estados interactivos (hover, pressed, focus).
Componente radio button con efecto halo Material Design. Selección única entre opciones con estados interactivos (hover, pressed, focus) y variantes de tamaño.
Matriz completa de inputs con todos sus estados (default, hover, focus, disabled, success, error, warning), tamaños y tipos con Font Awesome icons.
Componente textarea con todos sus estados (default, hover, focus, active, disabled, success, error), tamaños y modifiers siguiendo el sistema de diseño.
Indicador de carga circular con 4 tipos (basic, integrated, icon, icon-text) y 4 estados de progreso (25%, 50%, 75%, 100%). Con gradiente verde y animación fluida.
Componente toggle/switch con todos sus estados (default, hover, pressed, focus, disabled, error), modos ON/OFF y con/sin texto siguiendo el sistema de diseño de Seguros Bolívar.
Vista rápida de múltiples componentes con selector de marca y tema en tiempo real. Ideal para explorar cómo se ven los componentes en diferentes marcas.
Selecciona una marca y tema para ver los cambios en tiempo real
Componentes simples construidos con CSS. Solo agregas clases y funcionan.
Los colores se adaptan automáticamente según la marca seleccionada.
Componentes de entrada construidos con CSS. Incluyen estados, validación y accesibilidad.
Los colores y estilos se adaptan automáticamente según la marca seleccionada.
Componentes de área de texto con contador de caracteres y auto-resize.
Incluye validación visual y estados adaptativos por marca.
Componentes de selección con estilos nativos y personalizados.
Incluye soporte para select simple, múltiple y con iconos.
Componentes de toggle/switch con estilos nativos y personalizados.
Incluye soporte para switch, checkbox-style y button-style.
Componentes de alerta tipo toast con estilos nativos y personalizados.
Incluye soporte para diferentes estados, posicionamiento y variantes visuales.
Los toasts se posicionan de forma fija en la pantalla. Aquí se muestran como ejemplos inline:
Contenedor para múltiples alertas toast con posicionamiento automático:
Componente complejo construido con Lit. Incluye lógica JavaScript, estilos encapsulados y
slots.
También se adapta automáticamente a los tokens de la marca seleccionada.
Este es un Web Component construido con Lit.
El modal usa automáticamente los tokens de diseño de la marca seleccionada. Los colores, tipografía y espaciado se ajustan en tiempo real.
📍 Marca actual:
Componente de notificaciones toast flotantes construido con Lit. Basado en alert.css con
posicionamiento dinámico.
Incluye auto-dismiss, diferentes posiciones, gestión automática de múltiples toast y se
adapta a los tokens de marca.
Los toast se pueden crear por JavaScript usando el ToastManager:
Los toast se adaptan automáticamente a la marca y tema seleccionados. Cambia la marca arriba para ver los cambios:
Marca actual:
Variables CSS: Los toast usan automáticamente
--sb-ui-color-* tokens