Bienvenido a KoliBri

"El estándar HTML accesible"

KoliBri no es un sistema de diseño en el sentido tradicional. Más bien, extendemos el estándar HTML5 con Web Components accesibles y autónomos: nuevos elementos HTML que funcionan independientemente de cualquier diseño o marca. Estos componentes atómicos forman una base que cualquier biblioteca de diseño, framework o guía de estilo puede reutilizar y adaptar según sus necesidades.

KoliBri significa "component library for accessibility" (biblioteca de componentes para la accesibilidad) y fue publicado como código abierto por el Informationstechnikzentrum Bund (ITZBund) para su reutilización y desarrollo continuo.

Visión

Juntos hacemos que HTML sea accesible utilizando componentes web reutilizables para garantizar la usabilidad y la accesibilidad.

Misión

El estándar web HTML está especificado de forma muy "abierta" para ser lo más duradero y robusto posible. Por ello, a menudo ocurre que las composiciones HTML no son fácilmente accesibles, semánticas ni válidas.

KoliBri se basa directamente en los estándares web del W3C (agnóstico al framework), y es una implementación de referencia genérica del estándar WCAG y de la BITV para la accesibilidad, implementada como una capa de presentación capaz de soportar múltiples temas. No existe una referencia técnica ni una funcionalidad de transferencia de datos. Esto significa que KoliBri es igualmente reutilizable para la realización de sitios web estáticos como para aplicaciones web dinámicas con diferentes diseños corporativos y guías de estilo, por lo que resulta muy interesante para el código abierto.

Hoja de ruta

KoliBri trabaja siempre activamente en mejoras, nuevas funciones e innovaciones orientadas al futuro para la última versión principal. Paralelamente, se mantiene una versión LTS seleccionada con respecto a las correcciones de errores.

gantt
    title LTS & STS
    dateFormat YYYY-MM-DD

    0.x Initial implementation :, 2020-07-01, 17M
    1.x (LTS)                  :, 2021-12-01, 3y
    2.x (LTS)                  :,  2023-12-01, 3y
    3.x (STS)                  :crit , 2024-12-01, 15M
    4.x (LTS)                  :, 2025-12-01, 3y
    5.x (STS)                  :crit , 2026-12-01, 15M
    6.x (LTS)                  :, 2027-12-01, 3y

Instalación

Instale los paquetes con pnpm:

pnpm install

Ejecute la compilación una vez para generar los componentes:

pnpm -r build

Inicio rápido

Instale el tema predeterminado y registre los componentes:

pnpm add @public-ui/components @public-ui/theme-default

import { register } from '@public-ui/components';
import { defineCustomElements } from '@public-ui/components/loader';
import { DEFAULT } from '@public-ui/theme-default';

register(DEFAULT, defineCustomElements);

Evitar colisiones de propiedades personalizadas CSS

Los temas de KoliBri exponen algunas propiedades personalizadas CSS para que los usuarios puedan adaptar el aspecto visual. Debido a que estas propiedades siguen siendo globales (incluso dentro de un Shadow DOM), el uso excesivo de ellas puede entrar en conflicto con las variables definidas en la página host.

Utilice propiedades personalizadas con espacios de nombres solo para los valores que deban sobrescribirse desde el exterior. Para los cálculos internos, confíe en las variables SASS en lugar de en propiedades CSS adicionales. Esto mantiene los componentes robustos y evita fugas de estilo inesperadas.

Colaboración y cooperación

El enfoque de KoliBri está en composiciones HTML pequeñas (atómicas), muy flexibles y altamente reutilizables (por ejemplo, botones). Ofrecemos una implementación estándar accesible, semántica y válida de dichos componentes que puede reutilizarse para cualquier estructura o componente HTML de nivel superior (molécula, organismo o plantilla).

Estos componentes atómicos son donde debemos colaborar y cooperar para combinar nuestras habilidades y conocimientos. Los efectos de sinergia en los componentes básicos le permiten centrarse más en el contenido específico del tema.

¡Hagamos que KoliBri sea mejor y más colorido juntos!

Continuar a la Documentación…

Contribución

Los informes de errores y las solicitudes de extracción (pull requests) son bienvenidos. Por favor, lea nuestra guía de contribución antes de empezar.

SLSA/Procedencia

Apostamos por el Nivel 3 de compilación SLSA para los paquetes npm publicados desde este repositorio. Las versiones se compilan en GitHub Actions con identidad basada en OIDC y se publican con procedencia npm (--provenance), produciendo atestaciones verificables para los artefactos publicados. Consulte el flujo de trabajo de publicación para conocer los pasos de lanzamiento y la configuración de procedencia de npm.

Ejemplo de verificación

# Inspect provenance metadata for a published package
pnpm view @public-ui/components dist.provenance

# (Optional) Verify signatures/provenance if your npm client supports it
pnpm audit signatures --package=@public-ui/components@<version>

Recursos

• Empezar

• Contribución

• Código de conducta

• Problemas conocidos

• Seguridad