carbon-components-svelte

Carbon Components Svelteは、IBMが維持するオープンソースのデザインシステムであるCarbon Design Systemを実装したSvelteフレームワーク向けコンポーネントライブラリです。READMEによると、入力フォームからデータテーブルまで90以上のコンポーネント、5つの組み込みテーマ（ライト2種、ダーク3種）、props、イベント、スロットをカバーする完全な型定義のTypeScript APIを提供し、キーボードおよびスクリーンリーダー対応によるWCAG 2.1 AAアクセシビリティを目指しています。 スタイリングは、プリコンパイル済みのCSSとして読み込むか、フラッグシップのcarbon-componentsパッケージからSCSSを直接インポートすることで適用できます。後者は未使用のコンポーネントスタイルを削除できるため、よりパフォーマンスが高いルートであるとREADMEに記載されています。提供されるテーマスタイルシートは、white（デフォルトのライト）、g10（ライト）、g80、g90、g100（ダーク）の5種類に加え、CSSカスタムプロパティを使用してこれら5つすべてを保持するall.cssバンドルがあります。動的なテーマ変更は、all.cssをインポートし、マークアップまたはスクリプトからhtml要素にtheme属性を設定することで行われます。また、リアクティブな切り替えが可能なThemeコンポーネントも用意されています。 コンポーネントはSvelteのscriptブロック内でパッケージからインポートされ、コンポーネントAPIの詳細についてはプロジェクトのドキュメントサイトを参照するよう案内されています。 より広いエコシステムには、sizeプロパティで選択可能な4つのサイズ（16、20、24、32ピクセル）で2,700以上のアイコンを備えたCarbon Icons Svelte、空の状態やオンボーディング、ヒーローセクション、機能コールアウト向けに設計されデフォルトで64ピクセルの1,500以上のイラスト的ピクトグラムを備えたCarbon Pictograms Svelte、25以上のd3ベースのチャートを備えたCarbon Charts Svelte、およびオプションの開発依存関係として説明されているCarbon Preprocess Svelteが含まれます。 Carbon Preprocess Svelteは2つの最適化を提供します。optimizeImportsは、components、icons、pictogramsパッケージからのバレルインポートをソースSvelteファイルのパスに書き換えるSvelteプリプロセッサであり、IDEのタイプアヘッドを維持しつつ、開発および本番環境のコンパイル時間を短縮できるとされています。optimizeCssは、ビルド時に未使用のCarbonスタイルを削除するViteおよびRollupプラグインです。READMEでは、ビルド後のスタイルシートが約606kBから約53kBに削減される例が示されており、ライブラリのバージョン0.85.0以降が必要であると記されています。Vite、SvelteKit、Rollup、Webpack用の設定スニペットが提供されており、リポジトリにはそれぞれの例プロジェクトが含まれています。 TypeScriptの定義はsveldを使用して生成されています。ドキュメントはLLMフレンドリーなプレーンテキストでも公開されており、各エントリがコンポーネントごとのMarkdownドキュメントにリンクしているllms.txtコンポーネントインデックスと、全ドキュメントを含むllms-full.txtファイルがあり、URLに.mdを付けることで任意のコンポーネントのMarkdownドキュメントを利用可能です。 プロジェクトはApache 2.0ライセンスの下で提供されており、貢献ガイドラインと変更履歴が記載されています。READMEでは、本パッケージがCI環境で非識別化および匿名化されたメトリクスデータを収集するためにIBM Telemetryを使用していること、依存関係としてインストールすることがその収集への同意となることが開示されており、オプトアウト方法と収集データの詳細についてはIBMのドキュメントを参照するよう案内しています。