KoliBriへようこそ

「アクセシブルなHTML標準」

KoliBriは、従来の意味でのデザインシステムではありません。私たちはHTML5標準を、自己完結型でアクセシブルなWebコンポーネント（デザインやブランディングから独立して機能する新しいHTML要素）で拡張しています。これらのアトミックなコンポーネントは、あらゆるデザインライブラリ、フレームワーク、スタイルガイドが再利用し、ニーズに合わせてテーマ設定できる基盤を形成します。

KoliBriは「component library for accessibility（アクセシビリティのためのコンポーネントライブラリ）」の略であり、再利用と継続的な開発のためにInformationstechnikzentrum Bund (ITZBund)によってオープンソースとして公開されました。

ビジョン

私たちは共に、再利用可能なWebコンポーネントを使用してHTMLをアクセシブルにし、ユーザビリティとアクセシビリティを確保します。

Related MCP server: ECL MCP Server

ミッション

HTML Web標準自体は、可能な限り長持ちし堅牢であるために、非常に「オープン」に仕様が定められています。そのため、HTMLの構成が必ずしも容易にアクセシブルで、セマンティックで、妥当であるとは限らないという状況がしばしば発生します。

KoliBriはW3CのWeb標準（フレームワークに依存しない）に直接基づいており、アクセシビリティに関するWCAG標準およびBITVの汎用的なリファレンス実装であり、マルチテーマ対応のプレゼンテーション層として実装されています。技術的なリファレンスやデータ転送機能はありません。つまり、KoliBriは静的なWebサイトの実現だけでなく、異なるコーポレートデザインやスタイルガイドを持つ動的な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内であってもグローバルなままであるため、多用するとホストページで定義された変数と競合する可能性があります。

外部からオーバーライドする必要がある値に対してのみ、名前空間付きのカスタムプロパティを使用してください。 内部計算には、追加のCSSプロパティではなくSASS変数を使用してください。 これにより、コンポーネントの堅牢性が保たれ、予期しないスタイルの漏洩を防ぐことができます。

コラボレーションと協力

KoliBriの焦点は、小さく（アトミック）、非常に柔軟で、高度に再利用可能なHTML構成（例：ボタン）にあります。私たちは、より高次のHTML構造やコンポーネント（分子、有機体、テンプレート）に再利用できる、アクセシブルでセマンティックかつ妥当な標準実装を提供します。 これらのアトミックなコンポーネントこそ、私たちがスキルと知識を組み合わせてコラボレーションし、協力すべき場所です。基本コンポーネントによる相乗効果により、主題固有のコンテンツにより集中できるようになります。

KoliBriを一緒により良く、よりカラフルにしましょう！

ドキュメントへ進む

貢献

バグ報告やプルリクエストを歓迎します。始める前に貢献ガイドをお読みください。

SLSA/Provenance

私たちは、このリポジトリから公開されるnpmパッケージに対してSLSA Build Level 3を目指しています。リリースはGitHub ActionsでOIDCベースのIDを使用してビルドされ、npmのProvenance（--provenance）と共に公開され、公開されたアーティファクトに対して検証可能な証明書を生成します。リリース手順とnpmのProvenance設定については、公開ワークフローを参照してください。

検証例

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

リソース

• はじめに

• 貢献

• 行動規範

• 既知の問題

• セキュリティ