ライブラリ
コンポーネントカタログ
Stimeo UI は Rails 向けのヘッドレス Stimulus UI フレームワークです。各コンポーネントは挙動（ARIA 状態、キーボード操作、フォーカス管理）のみを提供し、見た目はこの Playground 側の CSS が担います。
サイドバー、または下のカードからコンポーネントを選ぶと、ライブデモ、マークアップ、キーボード操作を確認できます。
タグでカタログを絞り込みます。複数のタグを組み合わせると、すべてに該当するコンポーネントだけを表示します。
Rails / Turbo 連携
WAI-ARIA APG パターン
-
チェックボックス
ネイティブのチェックボックスに、3-state の親子連動（すべて選択）と change イベントを追加する。
-
ラジオグループ
カスタムラジオの単一選択。aria-checked、ロービング tabindex、矢印での選択移動を担う。
-
スイッチ
aria-checked だけで状態を表す、アクセシブルなオン/オフ切り替えボタン。
-
トグルグループ
aria-pressed・単一/複数選択・Toolbar 風ロービングを備えたトグルボタン群。
-
レーティング
順序尺度の星評価。aria-checked・ロービング tabindex・クランプ矢印・プレビュー・クリアを担う。
-
リストボックス
候補リストを開いて 1 件選ぶセレクト。activedescendant で候補を辿る。
-
コンボボックス
絞り込み可能なリスト（list autocomplete）付きのテキスト入力。キーボード操作にフル対応。
-
複数選択
候補を絞り込みつつ複数選択し、選択済みを削除可能なチップで表示するコンボボックス。
-
OTP 入力
自動フォーカス移動、Backspace戻り、ペースト文字分配に対応した、アクセシブルなワンタイムパスワード / PIN 入力フィールド。
-
入力マスク
固定パターンで入力欄を整形し、キャレット位置を保つ。
-
数値入力
スピンボタン。step 刻みの増減・範囲クランプ・端でのボタン無効化を担う。
-
金額入力
桁区切りを自動付与しつつ、送信用には正規化済みの数値を保持する金額入力。
-
カラーピッカー
チャンネル別スライダーと 16 進入力が双方向に同期する。
-
スライダー
キーボード操作とドラッグに対応した、単一つまみのレンジスライダー。
-
レンジスライダー
下限・上限の 2 つのつまみが相互に制約し合うレンジスライダー。
-
自動拡張テキストエリア
内容に合わせて textarea の高さを拡張し、minRows〜maxRows でクランプする。
-
タグ入力
自由入力チップ。Enter / 区切り文字でタグを追加・削除する。
-
カレンダー
WAI-ARIA APG の Date Picker Dialog パターンに準拠した、キーボード操作可能なカレンダーグリッド。
-
期間選択カレンダー
calendar 派生の、プレビューとプリセットに対応した 2 点の期間選択カレンダー。
-
時刻選択
時 / 分 / AM / PM のセグメント（spinbutton）で 24 時間表記の値を合成する時刻入力。
-
相対時間表示
絶対時刻を「3分前」のように表示し、Intl で自動更新する。
-
ローカル時刻表示
UTC のタイムスタンプを閲覧者のロケール/TZ の絶対時刻に Intl で整形する。
-
タイマー / カウントダウン
目標時刻までの残り時間を日/時/分/秒スロットに刻み、一時停止 / 再開できる。
-
フォームフィールド
コントロールと説明・エラーを aria-describedby / aria-invalid / aria-errormessage で関連付ける。
-
フォームバリデーション
ネイティブ制約検証のオーケストレーション。検証タイミング・送信ブロック・フォーカス・メッセージ配線を統率します。
-
文字数カウンタ
残り / 使用文字数を表示し、超過状態をフック化。polite に読み上げる。
-
パスワード表示切替
パスワード入力の表示 / 非表示を、フォーカスを保ったまま切り替える。
-
パスワード強度メーター
軽量なヒューリスティックでパスワード強度を算定し、メーターとラベルを駆動する。
-
インライン編集
その場編集。クリック / F2 で編集、Enter で保存、Escape で取消。
-
依存フィールド
トリガーとなるコントロールの値に応じて領域を表示/非表示・有効/無効化する。
-
動的フィールド行
fields_for の明細行をテンプレートから追加・削除する Headless 版 cocoon。
-
ファイルドロップゾーン
クリック / キーボード / ドラッグ&ドロップでファイルを選び、画像をプレビューする。
-
Direct Upload の進捗
ActiveStorage Direct Upload の進捗をファイル別に表示し、aria と status で通知する。
-
自動送信フォーム
input/change をデバウンスし、Turbo でフォームを送信する（送信ボタン不要）。
-
二重送信防止
送信時に送信ボタンを無効化して二重送信を防ぎ、完了で復帰する。
-
編集中離脱ガード
フォームの変更を検知し、未保存のまま離脱しようとしたら警告する（unload＋Turbo 遷移）。
-
入力の永続化
フォームの値を localStorage に保存し、リロードや Turbo 遷移をまたいで復元する。
-
アスペクト比
比率を CSS カスタムプロパティとして供給し、利用側スタイルが比率を保つ。
-
セパレータ
APG Separator の意味付け。任意で値を持つフォーカス可能版も提供。
-
アバター
ユーザー画像を表示し、読み込みに失敗したらフォールバックへ切り替える。
-
リサイザブル
WAI-ARIA APG の Splitter パターンに準拠し、PointerCapture を用いた頑強なドラッグ操作とキーボード調節が可能なペイン分割システム。
-
メーソンリー
高さの異なるカードを最短列へ敷き詰めつつ、DOM 順を保つ。
-
サイドバー
レスポンシブな折りたたみサイドバー。ブレークポイント未満ではモーダルなオフキャンバスに変化するインラインのレール。
-
スクロール領域
ネイティブなスクロール領域にキーボード到達性とスクロール状態フックを足す。
-
カルーセル
一時停止できる自動再生と、ロービングするスライドピッカーのタブリストを備えたスライドショー。
-
データグリッド
テーブルに列ソート・行選択・ロービングによるセル移動を付与する。
-
一括選択バー
行チェックボックスとスティッキーな一括操作バーを連動し、件数を読み上げる。
-
フィルター
アクティブなファセットタグの集合で、コレクションの項目を表示/非表示する。
-
スピナー
ライブリージョン・aria-busy・ちらつき防止タイマーで読み込み表示を切り替える。
-
スケルトン切り替え制御
プレースホルダを実コンテンツに差し替え、aria-busy とちらつき防止の最小表示時間を担う。
-
プログレスバー
progressbar の ARIA 値属性を同期し、割合をバー描画用に公開する。
-
メーター
meter の ARIA 値属性を同期し、しきい値で区分する。
-
フレーム読込状態
turbo-frame の読込中に skeleton 表示＋aria-busy を制御し、操作抑止とフォーカス退避を行う。
-
空状態の監視
リストが空になったら空表示を出し、1 件でも入ったら隠す。
-
アナウンサー
スクリーンリーダー通知のための polite/assertive ライブリージョン共有基盤。
-
トースト
アクセシブルな通知キュー。WAI-ARIA ライブ領域、最大数制限、ホバー/フォーカスによるタイマー一時停止。
-
フラッシュ橋渡し
Rails の flash をライブリージョン通知＋自動消去＋スタック表示へ橋渡し。
-
ネットワークステータス
オンライン / オフラインを検知し、変化時にライブリージョンのバナーを切り替える。
-
ディスミッシブル
バナーやお知らせを、フォーカスを宙に浮かせずに閉じる。
-
クリップボード
テキストをコピーし、完了をライブリージョンで通知する。
-
テーマ切替
light/dark/system の選択を永続化し、ルートへ適用する。
-
挿入要素の強調
挿入された要素に一時フックを付け、CSS で一瞬強調/フェードイン後に自動解除。
-
無操作検知
一定時間操作が無ければ idle（任意で事前に prompt）、再操作で active を発火。
-
ビューポート侵入で遅延ロード
<turbo-frame> をビューポート接近時（またはフォーカス到達時）まで遅延ロード。
-
プレビュー中の揮発要素ガード
Turbo がキャッシュのプレビューを表示している間だけ、揮発要素を隠す/プレースホルダ化。
-
キャッシュ前リセット
turbo:before-cache で一時的な UI を初期化し、戻る復元を綺麗に保つ。
選択したタグに該当するコンポーネントはありません。