欢迎使用 KoliBri

“可访问的 HTML 标准”

KoliBri 不是传统意义上的设计系统。相反，我们通过自包含、可访问的 Web 组件扩展了 HTML5 标准——这些新的 HTML 元素独立于任何设计或品牌运作。这些原子组件构成了一个基础，任何设计库、框架或样式指南都可以根据需要重用并为其设置主题。

KoliBri 代表“可访问性组件库”（Component Library for Accessibility），由 联邦信息技术中心 (ITZBund) 作为开源项目发布，供重用和持续开发。

愿景

我们共同通过可重用的 Web 组件使 HTML 变得可访问，以确保可用性和可访问性。

使命

HTML Web 标准 本身定义得非常“开放”，以尽可能保持长久和稳健。因此，HTML 组合往往难以做到易于访问、语义化和有效。

KoliBri 直接基于 W3C 的 Web 标准（与框架无关），是 WCAG 标准 和 BITV 可访问性标准的通用参考实现，并作为支持多主题的表示层实现。它不包含技术参考或数据传输功能。这意味着 KoliBri 同样适用于实现静态网站以及具有不同企业设计和样式指南的动态 Web 应用程序，因此对于开源领域非常有意义。

路线图

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 自定义属性冲突

KoliBri 主题公开了一些 CSS 自定义属性，以便使用者可以调整外观和感觉。由于这些属性保持全局性（即使在 Shadow DOM 内部），使用过多可能会与宿主页面上定义的变量冲突。

仅对必须从外部覆盖的值使用命名空间自定义属性。对于内部计算，请依赖 SASS 变量而不是额外的 CSS 属性。这可以保持组件的稳健性并防止意外的样式泄漏。

协作与合作

KoliBri 的重点在于小型（原子级）、非常灵活且高度可重用的 HTML 组合（例如按钮）。我们提供此类组件的可访问、语义化和有效的标准实现，这些组件可用于任何更高级别的 HTML 结构或组件（分子、有机体或模板）。 这些原子组件正是我们应该协作和合作以结合我们的技能和知识的地方。基础组件上的协同效应使您可以更专注于特定主题的内容。

让我们一起让 KoliBri 变得更好、更加丰富多彩！

继续 前往 文档…

贡献

欢迎提交错误报告和拉取请求。在开始之前，请阅读我们的 贡献指南。

SLSA/来源

我们致力于为从该存储库发布的 npm 包实现 SLSA 构建级别 3。版本在 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>

资源

• 开始使用

• 贡献

• 行为准则

• 已知问题

• 安全