コンポーネントカタログ（Core）

• ダイアログ

  アクセシブルなモーダルダイアログ。フォーカストラップ・背景スクロールロック・Esc で閉じる。

  • Core
  • Dialog (Modal)

• 警告ダイアログ

  割り込みの確認モーダル。バックドロップでは閉じず、confirm/cancel を発火する。

  • Core
  • Alert & Message Dialog

• 確認ダイアログ橋渡し

  Turbo のネイティブ confirm() をアクセシブルな警告ダイアログに置き換える。

  • Core
  • Alert & Message Dialog
  • Rails / Turbo

• ドロワー

  画面端からスライドインするモーダルパネル。data-state 同期と遷移後の hidden。

  • Core
  • Dialog (Modal)

• コマンドパレット

  アクセシブルなコマンドランチャー。ダイアログとコンボボックスを融合し、仮想フォーカス・矢印移動・フォーカストラップ・インライン検索に対応。

  • Core
  • Dialog (Modal)
  • Combobox

• ドロップダウン

  ボタンのクリックで開閉する開示（disclosure）。ARIA 状態・キーボード・外側クリックを制御します。

  • Core
  • Disclosure

• ポップオーバー

  トリガーで開閉する非モーダルの浮遊パネル。フォーカス移動と dismiss を肩代わりする。

  • Core

• ツールチップ

  ホバー／フォーカスで出る補足。表示・非表示の遅延、hoverable な橋渡し、Escape 消去を担う。

  • Core
  • Tooltip

• ホバーカード

  ホバー／フォーカスで開くリッチな補助カード。開閉の遅延と hoverable な橋渡しを担う。

  • Core

• メニューボタン

  コマンドを roving フォーカスで操作する本格的な role=menu ウィジェット。disclosure の dropdown とは別物。

  • Core
  • Menu Button

• コンテキストメニュー

  ポインタ位置に開く右クリックメニュー。ロービングフォーカスとキーボード操作を担う。

  • Core
  • Menu

• メニューバー

  アプリのメニューバー。トップ項目をロービングし各 role=menu を開く。型先読み対応。

  • Core
  • Menubar

• ナビゲーションメニュー

  Disclosure ナビ。リンク集のサブパネルを単一オープン。role=menu は使わない。

  • Core
  • Disclosure

• あふれ項目の退避メニュー

  ツールバーの収まらない項目をその他メニューへ退避（優先度低い順）し、空きが戻れば復帰。

  • Core
  • Menu Button

• ツールバー

  単一のタブストップとして、矢印キーで移動できるコントロール群。

  • Core
  • Toolbar

• コラプシブル

  単一の領域をその場でインラインに開閉するディスクロージャ。

  • Core
  • Disclosure

• アコーディオン

  独立して開閉できる折りたたみセクション。ヘッダ間のフォーカス移動にも対応。

  • Core
  • Accordion

• 続きを読む

  CSS の行クランプを切り替え、収まっているときはトグルを隠す。

  • Core
  • Disclosure

• タブ

  automatic activation・roving tabindex・矢印キー移動を備えたタブ切り替え。

  • Core
  • Tabs

• パンくずリスト

  幅が足りないとき中間項目を開示ボタンへ折りたたむパンくずリスト。

  • Core
  • Breadcrumb

• ページネーション

  現在ページ管理・aria-current 同期・境界での前後ボタン無効化を担うページ送り。

  • Core

• スクロールスパイ

  IntersectionObserver を利用した高効率な交差監視と、ページ上端の最寄セクションを優先判定する目次（TOC）同期システム。

  • Core

• ツリービュー

  単一選択のツリー。キーボードで移動・展開 / 折りたたみ・型先読みする。

  • Core
  • Tree View

• ステッパー

  導出した状態・aria-current・linear 制約を備えたウィザードのステップ操作。

  • Core

• ステップインジケータ

  導出した状態と進捗割合の CSS 変数を備えた、読み取り専用の進行状況表示。

  • Core

• チェックボックス

  ネイティブのチェックボックスに、3-state の親子連動（すべて選択）と change イベントを追加する。

  • Core
  • Checkbox

• ラジオグループ

  カスタムラジオの単一選択。aria-checked、ロービング tabindex、矢印での選択移動を担う。

  • Core
  • Radio Group

• スイッチ

  aria-checked だけで状態を表す、アクセシブルなオン/オフ切り替えボタン。

  • Core
  • Switch

• トグルグループ

  aria-pressed・単一/複数選択・Toolbar 風ロービングを備えたトグルボタン群。

  • Core
  • Toolbar

• レーティング

  順序尺度の星評価。aria-checked・ロービング tabindex・クランプ矢印・プレビュー・クリアを担う。

  • Core
  • Radio Group

• リストボックス

  候補リストを開いて 1 件選ぶセレクト。activedescendant で候補を辿る。

  • Core
  • Listbox

• コンボボックス

  絞り込み可能なリスト（list autocomplete）付きのテキスト入力。キーボード操作にフル対応。

  • Core
  • Combobox

• 複数選択

  候補を絞り込みつつ複数選択し、選択済みを削除可能なチップで表示するコンボボックス。

  • Core
  • Combobox

• OTP 入力

  自動フォーカス移動、Backspace戻り、ペースト文字分配に対応した、アクセシブルなワンタイムパスワード / PIN 入力フィールド。

  • Core

• 入力マスク

  固定パターンで入力欄を整形し、キャレット位置を保つ。

  • Core

• 数値入力

  スピンボタン。step 刻みの増減・範囲クランプ・端でのボタン無効化を担う。

  • Core
  • Spinbutton

• 金額入力

  桁区切りを自動付与しつつ、送信用には正規化済みの数値を保持する金額入力。

  • Core

• カラーピッカー

  チャンネル別スライダーと 16 進入力が双方向に同期する。

  • Core

• スライダー

  キーボード操作とドラッグに対応した、単一つまみのレンジスライダー。

  • Core
  • Slider

• レンジスライダー

  下限・上限の 2 つのつまみが相互に制約し合うレンジスライダー。

  • Core
  • Slider (Multi-Thumb)

• 自動拡張テキストエリア

  内容に合わせて textarea の高さを拡張し、minRows〜maxRows でクランプする。

  • Core

• タグ入力

  自由入力チップ。Enter / 区切り文字でタグを追加・削除する。

  • Core

• カレンダー

  WAI-ARIA APG の Date Picker Dialog パターンに準拠した、キーボード操作可能なカレンダーグリッド。

  • Core
  • Date Picker Dialog

• 期間選択カレンダー

  calendar 派生の、プレビューとプリセットに対応した 2 点の期間選択カレンダー。

  • Core
  • Date Picker Dialog

• 時刻選択

  時 / 分 / AM / PM のセグメント（spinbutton）で 24 時間表記の値を合成する時刻入力。

  • Core
  • Spinbutton

• 相対時間表示

  絶対時刻を「3分前」のように表示し、Intl で自動更新する。

  • Core

• ローカル時刻表示

  UTC のタイムスタンプを閲覧者のロケール/TZ の絶対時刻に Intl で整形する。

  • Core

• タイマー / カウントダウン

  目標時刻までの残り時間を日/時/分/秒スロットに刻み、一時停止 / 再開できる。

  • Core

• フォームフィールド

  コントロールと説明・エラーを aria-describedby / aria-invalid / aria-errormessage で関連付ける。

  • Core

• フォームバリデーション

  ネイティブ制約検証のオーケストレーション。検証タイミング・送信ブロック・フォーカス・メッセージ配線を統率します。

  • Core

• 文字数カウンタ

  残り / 使用文字数を表示し、超過状態をフック化。polite に読み上げる。

  • Core

• パスワード表示切替

  パスワード入力の表示 / 非表示を、フォーカスを保ったまま切り替える。

  • Core

• パスワード強度メーター

  軽量なヒューリスティックでパスワード強度を算定し、メーターとラベルを駆動する。

  • Core
  • Meter

• インライン編集

  その場編集。クリック / F2 で編集、Enter で保存、Escape で取消。

  • Core

• 依存フィールド

  トリガーとなるコントロールの値に応じて領域を表示/非表示・有効/無効化する。

  • Core

• 動的フィールド行

  fields_for の明細行をテンプレートから追加・削除する Headless 版 cocoon。

  • Core
  • Rails / Turbo

• ファイルドロップゾーン

  クリック / キーボード / ドラッグ&ドロップでファイルを選び、画像をプレビューする。

  • Core

• ダイレクトアップロードの進捗

  ActiveStorage のダイレクトアップロードの進捗をファイル別に表示し、aria と status で通知する。

  • Core
  • Rails / Turbo

• 自動送信フォーム

  input/change をデバウンスし、Turbo でフォームを送信する（送信ボタン不要）。

  • Core
  • Rails / Turbo

• 二重送信防止

  送信時に送信ボタンを無効化して二重送信を防ぎ、完了で復帰する。

  • Core

• 編集中離脱ガード

  フォームの変更を検知し、未保存のまま離脱しようとしたら警告する（unload＋Turbo 遷移）。

  • Core
  • Rails / Turbo

• 入力の永続化

  フォームの値を localStorage に保存し、リロードや Turbo 遷移をまたいで復元する。

  • Core
  • Rails / Turbo

• 楽観的 UI

  即時適用・成功なら維持・失敗なら正確にロールバックする、Turbo フォームの楽観的 UI。

  • Core
  • Rails / Turbo

• アスペクト比

  比率を CSS カスタムプロパティとして供給し、利用側スタイルが比率を保つ。

  • Core

• セパレータ

  APG Separator の意味付け。任意で値を持つフォーカス可能版も提供。

  • Core

• アバター

  ユーザー画像を表示し、読み込みに失敗したらフォールバックへ切り替える。

  • Core

• リサイザブル

  WAI-ARIA APG の Splitter パターンに準拠し、PointerCapture を用いた頑強なドラッグ操作とキーボード調節が可能なペイン分割システム。

  • Core
  • Window Splitter

• メーソンリー

  高さの異なるカードを最短列へ敷き詰めつつ、DOM 順を保つ。

  • Core

• サイドバー

  レスポンシブな折りたたみサイドバー。ブレークポイント未満ではモーダルなオフキャンバスに変化するインラインのレール。

  • Core
  • Dialog (Modal)

• スクロール領域

  ネイティブなスクロール領域にキーボード到達性とスクロール状態フックを足す。

  • Core

• カルーセル

  一時停止できる自動再生と、ロービングするスライドピッカーのタブリストを備えたスライドショー。

  • Core
  • Carousel

• データグリッド

  テーブルに列ソート・行選択・ロービングによるセル移動を付与する。

  • Core
  • Grid

• 一括選択バー

  行チェックボックスとスティッキーな一括操作バーを連動し、件数を読み上げる。

  • Core

• フィルター

  アクティブなファセットタグの集合で、コレクションの項目を表示/非表示する。

  • Core

• 単一リストの並べ替え

  キーボードとスクリーンリーダーで本当に操作できる、単一リストの並べ替え。

  • Core

• オーバーフロー表示

  残りのスクロール余地を検知し、data-overflow-start / data-overflow-end で公開する。

  • Core

• スクロール表示切替

  スクロール量や方向に応じて要素を出し入れする（トップへ戻る・隠れるヘッダ）。

  • Core

• 追従状態検知

  position: sticky 要素が貼り付いたかを検知し、data-stuck で公開する。

  • Core

• 最下部追従

  追加された内容にスクロール領域を自動追従 — ただしユーザーが上にスクロール中は追従しない。

  • Core

• スクロール位置の保持

  内部スクロール領域の位置を Turbo 遷移をまたいで保存・復元する。

  • Core
  • Rails / Turbo

• 読了プログレス

  記事をどこまで読み進めたかを CSS カスタムプロパティで公開する。

  • Core

• スマート追従ヘッダ

  下スクロールで隠れ、上スクロールで現れるヘッダ（フォーカス到達では必ず表示）。

  • Core

• カウントアップ

  マークアップに書かれた最終値まで、数値をアニメーションで増やしていく。定番は「見えたら開始」。

  • Core

• スピナー

  ライブリージョン・aria-busy・ちらつき防止タイマーで読み込み表示を切り替える。

  • Core

• スケルトン切り替え制御

  プレースホルダを実コンテンツに差し替え、aria-busy とちらつき防止の最小表示時間を担う。

  • Core

• プログレスバー

  progressbar の ARIA 値属性を同期し、割合をバー描画用に公開する。

  • Core

• メーター

  meter の ARIA 値属性を同期し、しきい値で区分する。

  • Core
  • Meter

• フレーム読込状態

  turbo-frame の読込中に skeleton 表示＋aria-busy を制御し、操作抑止とフォーカス退避を行う。

  • Core
  • Rails / Turbo

• 空状態の監視

  リストが空になったら空表示を出し、1 件でも入ったら隠す。

  • Core

• アナウンサー

  スクリーンリーダー通知のための polite/assertive ライブリージョン共有基盤。

  • Core

• トースト

  アクセシブルな通知キュー。WAI-ARIA ライブ領域、最大数制限、ホバー/フォーカスによるタイマー一時停止。

  • Core

• フラッシュ橋渡し

  Rails の flash をライブリージョン通知＋自動消去＋スタック表示へ橋渡し。

  • Core
  • Rails / Turbo

• ネットワークステータス

  オンライン / オフラインを検知し、変化時にライブリージョンのバナーを切り替える。

  • Core

• ディスミッシブル

  バナーやお知らせを、フォーカスを宙に浮かせずに閉じる。

  • Core

• クリップボード

  テキストをコピーし、完了をライブリージョンで通知する。

  • Core

• テーマ切替

  light/dark/system の選択を永続化し、ルートへ適用する。

  • Core

• 挿入要素の強調

  挿入された要素に一時フックを付け、CSS で一瞬強調/フェードイン後に自動解除。

  • Core

• 無操作検知

  一定時間操作が無ければ idle（任意で事前に prompt）、再操作で active を発火。

  • Core

• ビューポート侵入で遅延ロード

  <turbo-frame> をビューポート接近時（またはフォーカス到達時）まで遅延ロード。

  • Core
  • Rails / Turbo

• プレビュー中の揮発要素ガード

  Turbo がキャッシュのプレビューを表示している間だけ、揮発要素を隠す/プレースホルダ化。

  • Core
  • Rails / Turbo

• キャッシュ前リセット

  turbo:before-cache で一時的な UI を初期化し、戻る復元を綺麗に保つ。

  • Core
  • Rails / Turbo

• アンカー配置ユーティリティ

  floating 要素を anchor に配置し、画面端では flip/shift で回避する。

  • Core

• ロービングタブインデックス

  item 群を単一の Tab 停止にし、矢印キーで移動する。

  • Core

• ポインタドラッグ

  正規化されたドラッグライフサイクル（start / move / end / cancel）とキーボード代替を提供する基盤プリミティブ。

  • Core

• ビューポート交差

  IntersectionObserver を宣言的に扱い、可視状態をイベントと CSS フックへ変換する基盤プリミティブ。

  • Core

• フォーカス管理ユーティリティ

  任意の領域に使えるフォーカス境界 — Tab 循環・初期フォーカス・復帰。

  • Core

• 要素の移送

  connect で要素を別の DOM 位置（例: body 直下）へ移送し、disconnect で後始末する。

  • Core

• 共有トランジション基盤

  表示/非表示の enter/leave クラスを段階適用し、transitionend か安全タイマで完了検知。

  • Core

このカテゴリのデモは、この Playground の Rails 側で Action Cable を有効にして動いています。アダプタは async（Redis 不要 — 単一 puma プロセスなのでタブ間の broadcast がそのまま成立）、マウントは Rails 既定の /cable、接続は匿名です。サーバ側は受けた信号を部屋へ流し直すだけの薄いチャンネル 3 本（TypingChannel / PresenceChannel / LikesChannel）で、ページ共有の WebSocket 1 本を setCableConsumer で各コントローラに渡しています。

• 入力中インジケータ

  Action Cable で届く「X が入力中…」— ほぼゼロ JS のリアルタイム表示。

  • Core

• 在室表示

  Action Cable の在室ロスター — サーバ側の状態はゼロ。

  • Core

• ライブカウンタ

  開いている全タブで同時に動くカウンタ — HTML と broadcast 1 本だけ。

  • Core