Добро пожаловать в KoliBri

«Стандарт доступного HTML»

KoliBri — это не дизайн-система в традиционном понимании. Скорее, мы расширяем стандарт HTML5 автономными, доступными веб-компонентами — новыми элементами HTML, которые работают независимо от любого дизайна или брендинга. Эти атомарные компоненты формируют фундамент, который любая библиотека дизайна, фреймворк или руководство по стилю могут повторно использовать и оформлять в соответствии со своими потребностями.

KoliBri расшифровывается как «библиотека компонентов для доступности» (component library for accessibility) и была выпущена как проект с открытым исходным кодом Федеральным центром информационных технологий (ITZBund) для повторного использования и дальнейшего развития.

Видение

Вместе мы делаем HTML доступным с помощью повторно используемых веб-компонентов, чтобы обеспечить удобство использования и доступность.

Миссия

Сам веб-стандарт HTML специфицирован очень «открыто», чтобы быть максимально долговечным и надежным. Поэтому часто случается так, что HTML-композиции оказываются недостаточно доступными, семантичными и валидными.

KoliBri основана непосредственно на веб-стандартах W3C (независимо от фреймворка) и является универсальной эталонной реализацией стандарта WCAG и BITV для обеспечения доступности, реализованной как уровень представления с поддержкой мульти-темизации. Здесь нет технической привязки и функциональности передачи данных. Это означает, что KoliBri одинаково хорошо подходит как для создания статических веб-сайтов, так и для динамических веб-приложений с различными корпоративными дизайнами и руководствами по стилю, что делает её очень интересной для open source.

Дорожная карта

KoliBri постоянно активно работает над улучшениями, новыми функциями и инновациями для последнего мажорного релиза. Параллельно поддерживается выбранный LTS-релиз в части исправления ошибок.

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

Установка

Установите пакеты с помощью pnpm:

pnpm install

Запустите сборку один раз, чтобы создать компоненты:

pnpm -r build

Быстрый старт

Установите тему по умолчанию и зарегистрируйте компоненты:

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);

Избегайте конфликтов CSS Custom Properties

Темы KoliBri предоставляют несколько CSS-переменных (custom properties), чтобы пользователи могли адаптировать внешний вид. Поскольку эти свойства остаются глобальными — даже внутри Shadow DOM — использование слишком большого их количества может привести к конфликтам с переменными, определенными на хост-странице.

Используйте кастомные свойства с пространством имен только для тех значений, которые должны быть переопределены извне. Для внутренних вычислений полагайтесь на переменные SASS вместо дополнительных CSS-свойств. Это сохраняет надежность компонентов и предотвращает неожиданные утечки стилей.

Сотрудничество и кооперация

Фокус KoliBri направлен на маленькие (атомарные), очень гибкие и высоко повторно используемые HTML-композиции (например, кнопки). Мы предлагаем доступную, семантичную и валидную стандартную реализацию таких компонентов, которые можно повторно использовать для любой более сложной HTML-структуры или компонента (молекулы, организма или шаблона). Именно в работе над этими атомарными компонентами мы должны сотрудничать и кооперироваться, чтобы объединить наши навыки и знания. Синергетический эффект от базовых компонентов позволяет вам больше сосредоточиться на предметном контенте.

Давайте сделаем KoliBri лучше и красочнее вместе!

Перейти к Документации

Участие в разработке

Отчеты об ошибках и пулл-реквесты приветствуются. Пожалуйста, ознакомьтесь с нашим руководством по участию перед началом работы.

SLSA/Происхождение

Мы стремимся к SLSA Build Level 3 для npm-пакетов, публикуемых из этого репозитория. Релизы собираются в GitHub Actions с использованием идентификации на основе OIDC и публикуются с подтверждением происхождения npm (--provenance), создавая проверяемые аттестации для опубликованных артефактов. См. воркфлоу публикации для ознакомления с этапами релиза и конфигурацией происхождения npm.

Пример проверки

# 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>

Ресурсы

• Начало работы

• Участие в разработке

• Кодекс поведения

• Известные проблемы

• Безопасность