Lily を選ぶ理由

あなたのデザインから始める

あなたのチームは、製品がどう見えるべきかをすでに知っています。Lily はまさにそこから始まります。 正しく仕上げるのが本当に難しく、やり直すと高くつく部分、つまり正しいセマンティック要素、ARIA の状態、キーボード操作の約束事、フォーカス管理を提供し、 見た目に関する判断はすべてあなたに委ねます。あなたの CSS が、初日からデザインシステムの見た目になります。

すべてのコンポーネントが安定したクラスフックと純粋な構造を備えているため、アップグレードを重ねてもスタイルはあなたのものであり続け、 その下にあるアクセシビリティもバージョンを越えて機能し続けます。

Lily が約束すること

• デフォルトでアクセシブル。 すべてのコンポーネントが WCAG 2.2 AAA を目標にしています。 パターンは WAI-ARIA オーサリングプラクティスに従い、すべてのインタラクティブなコンポーネントは文書化された約束事に沿ってキーボードで操作でき、 サンプルアプリは axe-core のクリーンなベースラインを保っています。
• 構造として多言語化に対応。 ユーザー向けのすべての文字列（ラベル、エラー、アナウンス）は、 フレームワークを問わず名前が安定したプロパティなので、翻訳が自然に流れ込みます。RTL や双方向テキストは dir を引き継ぎます。ロケールに依存するコンポーネントは、必ずロケールを明示的なプロパティとして受け取ります。
• 1 つのカタログ、8 つのフレームワーク。 同じ 571 個のコンポーネント （ネイティブ Web Components としては 536 個）が、HTML、Svelte、React、Vue、Angular、Blazor、Nunjucks、Web Components で、 同じクラスフックとプロパティ規約で提供されます。あなたの CSS とチームの知識は、スタックをまたいで活かせます。
• CSS の方式を問わない。 コンポーネントのルートごとに、安定したケバブケースのクラスが 1 つあります。 セマンティック CSS、Tailwind のユーティリティ、CSS-in-JS、57 種類のすぐに使えるテーマのどれでも、Lily は受け入れ、静かに身を引きます。
• 永久に無料、条件はあなた次第。 BSD、MIT、Apache-2.0、GPL-2.0、GPL-3.0 から選べるオープンソースです。 有料プランも、席数ライセンスも、テレメトリーもありません。

大切なところに深みを

ありふれたボタンやダイアログにとどまらず、このカタログは多くのものより先まで広がっています。

• 公共部門のパターン。 NHS UK、GOV.UK、USWDS、ONS のデザインシステムを調査した、 エラーサマリー、警告コールアウト、サマリーリスト、フェーズバナー、スキップリンクなど。
• 140 種類の国別個人識別子コンポーネント。 50 か国以上の医療、国民 ID、税、パスポートの識別子を扱い、 それぞれが形式と検証アルゴリズムを文書化しています。
• 編集向けとスクロールテリング向けの基本部品。 Reuters Graphics から取り入れた、記事レイアウト、スクローラー、タイムライン、タイルマップ。
• ピッカーヘルパー。 1 つの操作を端から端まで担う小さなパッケージ群です。テーマ切り替え（実行時のスタイルシート読み込み付き）、 言語、文字サイズ、モーションの軽減、検索、ページリンク、共有、日時入力があります。 それぞれがポップアップを開くヘッドレスのアイコンボタンで（ネイティブの <select> ではありません）、 永続化と SSR への対応が組み込まれています。

公共部門向けのテーマを、最初から

Lily には、そのクラスフックを直接対象とする、独立した 57 種類のリファレンステーマが付属します。 NHS England、NHS Scotland、NHS Wales（それぞれ患者向けと実務者向け）、GOV.UK、USWDS、Adobe Spectrum と Mozilla Protocol に着想を得た配色、 そして汎用のライトテーマとダークテーマ群です。スタイルシートを 1 つリンクするだけで、行政水準の見た目になります。 theme-picker ヘルパーは、それらを実行時に切り替えます。

Lily との比較

私たちは、他のデザインシステムとの正直なコンポーネント単位の 比較を公開しています。スタイル付きとヘッドレス、商用と公共部門を含みます。 他のライブラリのほうがあなたに合っているなら、この比較がそれを示します。Lily はそれらすべてから学び、着想の源を公開で明記しています。

誰が作っているのか

Lily は、協力、助言、フィードバックを歓迎する、若く独立したオープンソースプロジェクトです。経緯と着想の源は 概要をご覧ください。仕様、テスト、ロードマップ、監査ツールに至るまで、すべてが github.com/LilyDesignSystem で公開されています。

Lily の成長を支える

Lily が役に立ったなら、いちばん価値のある支援は次のとおりです。

• スターを付けて広める。 メインのリポジトリにスターを付け、同僚に カタログを見せてください。認知は、若いプロジェクトにとって最も乏しい資源です。
• 何かを作って教える。 うまくいったこと、もっと滑らかにできることなど、実際の利用報告は、何よりもロードマップを形作ります。
• アクセシビリティを監査する。 サンプルアプリでのスクリーンリーダー検証（VoiceOver、NVDA、JAWS）は貴重です。見つけたことを報告してください。
• テーマや翻訳を提供する。 どちらも単独で完結し、範囲がはっきりした、最初の貢献にぴったりのものです。
• 見つけたことを、最小限の再現手順とともに共有する。 GitHub リポジトリで、またはメールで joel@joelparkerhenderson.com まで。