コンポーネント
基礎
Lily UI の色や形の決め方をまとめたページ。やわらかさ、あたたかさ、親しみやすさを大切にしていて、色の名前はすべて日本の伝統色（和色）でそろえています。
カラー色に役割ごとの名前を付けて使い回すための仕組み（こうした名前付きの値をトークンと呼びます）。カラーコードを直接書く代わりに、primary・状態色・地・文字といった意味で色を指定します。ライトとダークのモードでは、同じ名前のまま色が切り替わります。
パレットカラートークンの素になっている、色相ごとの明るさ違い（50〜900）の一覧。
モーション要素の登場や退場、注目を引くためのアニメーションと、カーソルを重ねたときの反応や背景の装飾効果をまとめたもの。指定するだけで使えて、利用者が「画面の動きを減らす」設定にしているときは自動で止まります。
スケール余白・角丸・影・文字サイズに、あらかじめ用意した段階的な値。たとえば余白は 4px 刻みで統一していて、数値を直接書く代わりに名前で指定します。これで画面全体の間隔や大きさが自然にそろいます。
Motion Provider画面の動きの量（フル・控えめ・なし・自動）を管理する部品。決まった段階を <html> の data-motion 属性に反映し、OS の「視差効果を減らす」設定にも自動で従います。
Theme Override囲んだ範囲だけ、テーマの色を好みの色に置き換える部品。一部のトークンだけ、ダークモードだけ、という変え方もでき、文字と背景のコントラストが 7:1 を下回る組み合わせは開発中に警告されます。アプリ全体を変えるときは ThemeProvider に同じ指定をします。
Theme Providerライト・ダーク・OS 連動の表示モードを管理する部品。選んだモードを <html> の data-theme 属性に反映し、localStorage に保存して次回の表示にも引き継ぎます。アプリ全体のテーマ色の上書きもここで指定します。React と Vue 向けで、Web Components では属性と CSS 変数を直接使います。
レイアウト
ページを決まった位置までスクロールすると、中身を画面の上端や下端に貼り付けて追従させる部品。
Containerページの中身を中央に寄せ、最大幅をそろえるレイアウト。
Divider区切り線。横向きが既定で、縦線やラベル付きにもできます。
Footerページ下部の領域（contentinfo ランドマーク）。Navbar と対になる footer 要素で、横並びの行を自由に組み立てられます。中身は中央にそろい、リンクや著作権表示、複数の列などを置けます。
Grid行と列でレイアウトを組むグリッド。
Ratioiframe・動画・画像などの埋め込みの縦横比を保つ部品。
Scroll Area細いスクロールバーを備えたスクロール領域。ブラウザが違っても見た目をそろえます。
Splitterドラッグできる仕切りで区切った、大きさを変えられる 2 つの区画。仕切りはキーボードでも動かせます。
Stack一定の間隔で要素を並べる 1 次元のレイアウト。
Visually Hidden見た目には隠しつつ、スクリーンリーダーには読み上げさせる要素。focusable を指定するとキーボードフォーカス時に現れるので、スキップリンクに使えます。
タイポグラフィ
複数行のコードを表示するブロック。言語ラベルとワンクリックのコピー、行番号の表示に対応します。インラインのコードには Code を使います。
Kbd & Code文章の中でキーやショートカットを示す表記。
Linkリンク。背景との差をしっかり取った文字色を使い、キーボードで選んだときの囲み枠もはっきり見えます。
Markテキストの一部をセマンティックカラーで強調する mark 要素。色は装飾で、意味は文言で伝えます。warning・success・info・danger・primary の5種から選べます。
Text & Heading見出しや本文のテキストスタイル。
アクション
クリックで操作を実行する、基本のボタン。variant（見た目の種類）と status（色で表す意味）を組み合わせて使い分けます。
Button Group関連する複数のボタンを、ひとつのまとまりとして横に並べる部品。label でそのまとまりの目的を伝えられ、読み上げソフトにも一群として伝わります。
Close Button×印の閉じるボタン。読み上げ用のラベルを持たせています。
Copy Button押すと value の文字列をクリップボードにコピーし、チェックマークで成功を知らせるボタン。アイコンだけでも、label を添えて文字付きでも使えます。コピーが済むと、読み上げソフトにも「コピーしました」と伝わります。
Float Button画面の四隅に固定するフローティングボタン。FloatButtonGroup はスピードダイアル形式で複数のボタンをまとめ、トリガーの操作や Escape で開閉できます。
Toolbarボタンや操作をひとまとめにするツールバー。role="toolbar" を持ち、Tab では1か所に止まり、矢印キーで項目間を移動します。横と縦の向きに対応します。
データ表示
利用者やモノを表す小さな丸い画像。写真がないときは頭文字で代用でき、オンライン中などを示す小さな点も付けられます。
Badge件数や短いラベルを表す小さな印。「3」のような数や状態を、控えめに添えるのに使います。押して選べる小さなタグが欲しいときは Chip を使ってください。
Card中身をひとまとめに囲む、汎用の枠。ヘッダー・本文・フッターなどの部品を組み合わせて作ります。
Chipキーワードや絞り込み条件などを表す小さなタグ。clickable で押して選べるようにしたり、onRemove で削除ボタンを付けたりできます。
Countdown指定した日時までの残り時間を日・時・分・秒で示すタイマー。毎秒更新してゼロで止まり、onComplete で到達を知らせます。各セグメントにラベルを付け、色だけに頼りません。
Descriptionsキーと値を並べる定義リスト。dl をもとに横・縦のレイアウトと罫線付きの表示を選べます。Descriptions の中に DescriptionsItem を並べて使います。
List Group項目を縦に並べる一覧。ListGroup.Item を組み合わせて作ります。
Relative Time経過した時間や先の時刻を「3分前」「2時間後」のように表す time 要素。Intl.RelativeTimeFormat と Temporal で組み立て、live を指定するとタイマーで自動更新します。
Statラベル・値・増減をまとめた指標のタイル。増減は矢印と状態色で示します。
Tableデータを行と列で並べる表。見出し行や表のタイトルを正しく持たせ、読み上げソフトでもたどりやすく作っています。
Timeline履歴や活動を縦に並べる一覧。各項目は状態ドット・タイトル・時刻・説明を持てます。
メディア
複数の項目を切り替えて見せるスライドショー。自動送りは、カーソルを重ねている間やキーボードで操作している間は止まります。
Icon手持ちのアイコン画像（SVG など）のサイズと色を整えて表示する入れ物。Lily 自体にアイコンは入っていません。
Image画像の表示をまとめて受け持つ部品。表示位置に来てから読み込む遅延読み込み、ふわっと現れるフェードイン、縦横比の固定、読み込みに失敗したときの代替表示に対応します。
Watermark文字や画像を低い不透明度でタイル状に重ねる透かし。重ねた層は pointer-events なしで aria-hidden なので、下の中身の操作や読み上げを邪魔しません。
フォーム
ポップアップを出さず、月のカレンダーをそのまま置いて日付を選ぶ入力欄。日付はボタンになっていて、選んだ日を色で示します。
Cascader都道府県→市区町村のような階層を、列を横に並べて選ぶ部品。選ぶと次の列に下の階層が現れ、いちばん下まで進むと値が決まります。
Checkboxオンとオフを切り替える、ラベル付きのチェックボックス。
Color Picker色見本を並べて色を選ぶ部品。見本を押して選べて、必要ならブラウザ標準の色選びの画面も添えられます。
Combobox入力しながら候補を絞り込めるテキスト欄。上下キーで候補を選び、Enter で決定します。
Date Pickerカレンダーから日付を選ぶ入力欄。日付を直接打ち込めるテキスト欄と、キーボードで動かせるカレンダーを組み合わせています。
Date Range Picker開始日と終了日を、連動する 2 つの DatePicker で選ぶ部品。互いの選べる範囲を制限し合います。
Date Time Picker月カレンダーと時・分の選択を組み合わせて Temporal.PlainDateTime を選ぶ日時ピッカー。キーボードだけで操作でき、矢印キーで日を移動し、Enter で確定、Escape で閉じます。
Duration InputTemporal.Duration を値に持つ時間入力。時・分（必要なら秒）の数値フィールドとステッパーで構成し、フォームにそのまま組み込めます。
Fieldset関連するフォーム部品をまとめるグループ。ネイティブの fieldset と legend を使うので、disabled を指定すれば中の部品をまとめて無効化できます。説明文も添えられます。
File Uploadファイルをドラッグ＆ドロップで受け取り、選んだファイルの一覧も見せるアップロード欄。受け取り欄はキーボードからも開けます。
Floating Label入力欄を選んだり文字を打ち込んだりすると、ラベルがすっと上に移動する仕掛け。Input・Select・Textarea を 1 つ包んで使います。
Form Fieldラベル・補助の説明文・エラー文を、入力欄とひとまとめにする部品。読み上げソフトがどの欄の説明かを正しく読み取れるよう、内部のひも付けも自動で行います。
Input1 行のテキスト入力欄。FormField の中で使うと、ラベルや説明との結び付けを自動で受け取ります。
Input Group入力欄の前後に、単位や記号、ボタンなどを添えられる部品。
Month Picker12 か月のグリッドから Temporal.PlainYearMonth を選ぶ月ピッカー。前年・翌年に移動でき、矢印キーで月を動かし、Enter で確定、Escape で閉じます。
Number Input数値を入力する欄に、増減ボタンを付けた部品。上下キーでの増減もそのまま使えます。
Pin Inputコードやワンタイムパスワードを 1 文字ずつ入れる欄。入力すると自動で次の欄へ進みます。
Radioラジオグループの選択肢の 1 つ。name を共有してグループにまとめます。
Rangeつまみを動かして値を選ぶスライダー。FormField の中で使うと、ラベルとの結び付けを自動で受け取ります。
Range (Dual)価格帯などの範囲を、下限と上限の 2 つのつまみで選ぶスライダー。
Rating星で評価を付ける部品。標準では操作でき、矢印キーで星の数を増減できます。readOnly にすると評価の表示だけになります。
Segmented Control横に並んだ選択肢からひとつだけ選ぶ、トグル式の切り替え。矢印キーで選択肢を移動できます。
Selectブラウザ標準のプルダウン選択。選択肢が決まっているときに向きます。入力で絞り込みたいときは Combobox を使ってください。
Switchスライドしてオン・オフを切り替えるスイッチ。キーボードでも操作でき、状態は読み上げソフトにも正しく伝わります。
Tag Inputメールアドレスやキーワードを、タグとして複数まとめて入力できる欄。Enter か区切り文字で追加し、空欄で Backspace を押すと直前のタグを消します。
Textarea複数行のテキスト入力欄。FormField の中で使うと、ラベルや説明との結び付けを自動で受け取ります。
Time Picker時と分を選んで時刻を入れる入力欄。必要なら午前・午後の切り替えも加えられます。
Time Zone SelectIANA タイムゾーンを選ぶセレクト。候補は Intl.supportedValuesOf から作り、使えない環境では少数の固定リストに切り替えます。値は Temporal が扱う ID 文字列です。
Transfer2 つのリストの間で項目を移す部品。各行はラベル付きのチェックボックスになっています。
Tree Selectツリー構造からノードを選ぶセレクト。トリガーを押すとパネルが開き、矢印キーで移動し、Enter で選び、Escape で閉じます。
ナビゲーション
ページをある程度スクロールすると現れ、押すと一番上まで戻れるボタン。画面の隅に浮かぶように表示されます。
Breadcrumb「ホーム > 製品 > 詳細」のように、今いるページがサイトのどの位置にあるかを示す道しるべ（パンくずリスト）。末尾が現在のページです。
Menu操作の一覧を出すメニュー。開くボタンは持たず、単体で使います。矢印キーで項目を移動できます。
Navbarページ上部のナビゲーションバー。狭い画面では開閉ボタンの中に畳まれます。読み上げソフトにもナビゲーションとして正しく伝わります。
Paginationページ送り。現在のページがどこかを示し、最初や最後のページでは送りの矢印を押せなくします。読み上げソフトにも今のページが伝わります。
Stepper入力ウィザードや購入手続きなど、複数の手順の進み具合を示す部品。今どの手順にいるかが、読み上げソフトにも伝わります。
Tabs表示を切り替えるタブ。矢印キーでタブ間を移動でき、Home / End キーで端のタブへ一気に飛べます。
Treeフォルダのように階層をたどれるツリー表示。枝の開閉や、矢印キーでの移動ができます。
開閉
見出しを押すと下の中身が開閉する、折りたたみ式のメニュー。キーボードだけで操作でき、開いているか閉じているかは読み上げソフトにも正しく伝わります。
CollapseCollapse — animates showing/hiding content by height. Pair the toggling control with `aria-expanded` and `aria-controls` pointing at this element's `id`.
Presence中身を 1 つ、アニメーション付きで出し入れする仕組み。消えるときのアニメーションが終わるまで、中身を画面に残します。
フィードバック
状況を伝えるメッセージ。成功・警告・エラーなどを色とアイコンで示します。
Empty State一覧が空のとき、検索結果がないとき、エラーのときに置く案内。アイコン・見出し・説明・操作を中央にまとめて並べます。
Meter決まった範囲の中で、今どのくらいの量かを表すメーター。使用率やスコアなどに使います。作業の進み具合を示す Progress とは用途が異なります。
Progress作業の進み具合を示す進捗バー。今どこまで進んだかが、読み上げソフトにも数値で正しく伝わります。
Result処理の結果を伝えるブロック。成功・エラー・警告など7種の状態に対応し、アイコンと文言で意味を示すので色だけに頼りません。続けて操作ボタンも置けます。
Skeleton読み込み中に、中身が入る場所をぼんやり示す仮表示。文字・丸・四角の形を、淡く光るアニメーションで描きます。
Spinner読み込み中を示す、くるくる回るスピナー。色は周りの文字色を引き継ぎます。読み込み中であることが読み上げソフトにも伝わります。
Toast画面の隅にさっと出る通知。既定では自動で消えません。
オーバーレイ
取り消せない操作を確認するためのダイアログ。role="alertdialog" を持ち、背景クリックでは閉じません。確認かキャンセルの操作が必要で、Escape で閉じます。
Command Palette⌘K で開く、検索付きのコマンド一覧。入力で絞り込み、上下キーで移動して、Enter で実行します。
ContextMenu右クリックやキーボード（Shift+F10、メニューキー）でポインター位置に開くメニュー。矢印キーで項目を移動し、Enter で実行、Escape で閉じます。
Drawer画面の端から現れるパネル。種類は 3 つ。temporary（既定）は背景を覆って前面に開き、開いている間はキーボードの操作対象をパネルの中だけに収めます（Modal と同じ作りです）。persistent はページの中身と一緒に並び、開閉に合わせて隣の中身を左右に押し広げます。permanent は常に開いたままで、デスクトップのサイドバーなどに向いています。広い画面では permanent、狭い画面では temporary に切り替える使い方がよくあります。
Dropdownトリガーのボタンに紐づくメニュー。トリガーのいらない単体のメニューには Menu を使ってください。
HoverCardトリガーにカーソルを重ねるかフォーカスすると開くカード。補足情報を表示し、開くまで少し待ちます。フォーカスが外れるか Escape で閉じ、キーボードでも開けます。
Modal背景の上に重ねて開く小窓（ダイアログ）。開いている間はキーボードの操作対象が小窓の中だけに収まり、迷わず使えます。
Offcanvas画面の端からスライドして出てくるパネル。キーボード操作や読み上げへの対応は Modal と同じ作りです。
Popoverクリックで開く吹き出し型のパネル。タイトルと自由な中身を置けて、Escape キーや外側のクリックで閉じます。背景の操作はふさぎません。
Tooltipカーソルを重ねたりキーボードで選んだりすると出る、小さな補足ラベル。どの要素の説明かは読み上げソフトにも伝わります。