ビヘイビア
キットは 64 個の小さなビヘイビアを出荷しています。すべて冪等で
アンインストーラを返し、installChart() ただ 1 つの例外を除いて、
ゼロ設定の @hypermedia-components/core/behaviors エントリが
自動インストールします(htmx でスワップされた内容も拾います)。
個別 import が必要になるのは、選択的にバンドルするときだけです。
// Everything at once (what the CDN bundle does):import '@hypermedia-components/core/behaviors';
// Or pick and choose:import { installTabs, installToast } from '@hypermedia-components/core';installTabs();installToast();2 つの列の意味を先に定義しておきます。属性列は、ビヘイビアへの
オプトインや設定のためにページ作者(またはサーバーのフラグメント)が
書くマークアップです — ビヘイビア自身が実行時に書き込む状態属性
(data-active、aria-invalid など)ではありません。設定項目の多い
コンポーネント連動ビヘイビアは重要なものだけを載せ(「…」)、完全な
一覧は「担当」列でリンクするページにあります。イベント列は
ビヘイビアが dispatch する hc:* イベントです(「—」はなし)。
アクションとフォーム
Section titled “アクションとフォーム”| ビヘイビア | 担当 | 属性 | イベント | 自動 |
|---|---|---|---|---|
installValidation() |
フィールドのネイティブ検証の配線(blur/submit 検証、メッセージスロット)。 | ネイティブ制約属性(required、pattern など) |
— | ✓ |
installFieldErrors() |
サーバー駆動のインラインエラー — field-errors レシピの 422 フラグメント契約。 | data-hc-field-errors、data-field、data-message-key(サーバーが書く) |
— | ✓ |
installShowWhen() |
条件付きフィールド表示 — conditional-fields レシピ。 | data-hc-show-when、data-hc-show-switch、data-hc-show-src |
— | ✓ |
installFormat() |
数値のグループ表示とワイヤ上の生値 — 入力。 | data-hc-format、data-decimals、data-locale |
— | ✓ |
installNormalize() |
確定時の IME 全角/かな正規化 — 入力。 | data-hc-normalize |
— | ✓ |
installMask() |
宣言的な固定形式マスク(postal-jp、#/a/A/* パターン) — 入力。 |
data-hc-mask、data-hc-mask-submit |
— | ✓ |
installSubmitOnChange() |
コントロール自体がアクションであるとき、change(または値で指定した event、例: hc:otpcomplete)でフォームを送信 — スイッチ、OTP 入力。htmx がすでに change でフォームを駆動していれば除外。 |
data-hc-submit-on-change |
— | ✓ |
installSubmitOnEnter() |
Enter で送信、Shift+Enter で改行、IME 確定の Enter は無視 — chat-messages レシピのコンポーザ。 | data-hc-submit-on-enter |
— | ✓ |
installCount() |
上限つきフィールドの横の文字数カウント — 入力: maxlength かソフトリミットからの used / max、near / over 状態、ライブ出力は入力停止後に更新。 |
data-hc-count、data-hc-count-max |
— | ✓ |
installSelectAll() |
チェックリストのマスターチェックボックス — チェックボックス: 有効なメンバーをすべて設定し、checked / クリア / indeterminate として鏡写しにする。 | data-hc-select-all |
— | ✓ |
installMultiValue() |
1 つのコントロールから複数値をワイヤへ — 貼り付けた識別子の一覧が繰り返しパラメータになる(input)。 | data-hc-multi(lines / commas) |
— | ✓ |
installRangeValue() |
コントロール 2 つを 1 つの範囲パラメータへ — 日付の期間が f-ship=A..B として送られる(datagrid-filter)。 |
data-hc-range、data-hc-range-from、data-hc-range-to |
— | ✓ |
installSortList() |
ソートコントロールの順序付きキーを 1 パラメータへ — sort=-ship,order(datagrid-sort)。 |
data-hc-sort-list、data-hc-sort-key、data-hc-sort-dir-prefix |
— | ✓ |
installRowLink() |
Enter で行が指すレコードを開く — 同一性の列のリンク(row-detail)。 | data-hc-row-link |
— | ✓ |
installDirtyGuard() |
未保存変更ガード — unsaved-changes レシピ。 | data-hc-dirty-guard(状態: data-dirty) |
hc:dirtychange |
✓ |
installSessionExpiry() |
401 → ログインダイアログ → リクエスト再実行 — session-expiry レシピ。 | data-hc-session-expiry |
hc:sessionrenewed を消費 |
✓ |
installNetworkRetry() |
応答が来ない失敗(オフライン / タイムアウト)→ 動く再試行ボタン付きアラート — network-retry レシピ。 | data-hc-network-retry(+ -message / -label 上書き) |
htmx:sendError / htmx:timeout を購読 |
✓ |
installTime() |
クライアント側の <time> ローカライズ(相対 / 絶対) — i18n。 |
data-hc-time、data-hc-time-style |
— | ✓ |
installSortable() |
ポインタ + キーボードのリスト並べ替え — sortable レシピ。 | data-hc-sortable、data-hc-sortable-handle、data-hc-sortable-id |
hc:sortchange |
✓ |
installCombobox() |
コンボボックスのキーボード・フィルタ・ARIA。 | data-remote、data-allow-create、data-value、… |
hc:comboboxselect |
✓ |
installMulticombobox() |
マルチコンボボックスのタグ・キーボード・ARIA。 | data-name、data-allow-create、data-value、… |
hc:multicomboboxchange |
✓ |
installInputOtp() |
Input OTP のスロット単位編集。 | data-length、data-pattern、data-groups |
hc:otpchange、hc:otpcomplete |
✓ |
installPasswordToggle() |
インプットグループのパスワード表示切替。 | data-hc-password-toggle、data-hc-label-show / data-hc-label-hide |
— | ✓ |
installSlider() |
スライダーの塗り + 値出力の同期。 | — | — | ✓ |
installRange() |
レンジのデュアルサムのクランプ + 塗り。 | — | hc:rangechange |
✓ |
installCalendar() |
カレンダーのグリッド・キーボード・選択。 | data-value、data-min / data-max、data-mode、… |
hc:calendarchange、hc:calendarrangechange |
✓ |
installDropzone() |
ドロップゾーンのドラッグオーバー状態 + ファイル一覧。 | — | — | ✓ |
installUploadProgress() |
htmx のアップロードイベントで <progress> を駆動 — file-upload レシピ。 |
data-hc-upload-progress |
— | ✓ |
installCodeEditor() |
編集可能なコードフィールド: ガター、ライブハイライト(data-lang)。 |
data-editable、data-gutter、data-lang |
— | ✓ |
ナビゲーションとコマンド
Section titled “ナビゲーションとコマンド”| ビヘイビア | 担当 | 属性 | イベント | 自動 |
|---|---|---|---|---|
installTabs() |
タブのローミングフォーカス + パネル切替。 | data-activation、data-orientation、data-overflow |
hc:tabactivated |
✓ |
installToggleGroup() |
トグルグループの単一 / 複数選択 + ローミングフォーカス。 | data-type、data-value、data-name |
hc:togglegroupchange |
✓ |
installToolbar() |
ツールバーの単一 Tab ストップ + 矢印キーナビゲーション(APG パターン)。 | role="toolbar"、aria-orientation |
— | ✓ |
installMenu() |
メニューのキーボードパターン・アンカー・ARIA。 | popover + popovertarget(トリガー) |
hc:menuselect |
✓ |
installMenubar() |
メニューバーのメニュー間矢印キー。 | role="menubar"、popovertarget |
hc:menuselect(配下のメニューから) |
✓ |
installNavmenu() |
ナビゲーションメニューのパネル。 | data-hc-navmenu-trigger、aria-controls |
— | ✓ |
installContextMenu() |
コンテキストメニューの右クリック起動。 | data-hc-context-menu |
hc:menuselect |
✓ |
installCommand() |
コマンドのフィルタ・ランキング・キーボード。 | data-hotkey、data-filter、data-value |
hc:commandselect |
✓ |
installTree() |
ツリーの ARIA ロール + 開閉。 | aria-expanded(ブランチ宣言)、data-hx-get(遅延読み込み) |
hc:treeexpand |
✓ |
installSpy() |
目次のスクロールスパイ(aria-current 追跡)。 |
data-hc-spy |
— | ✓ |
installNavCurrent() |
boost ナビゲーション後の現在リンクのマーキング(シェル)。 | data-hc-nav-current |
— | ✓ |
installShell() |
シェルのサイドバー折りたたみ + 永続化。 | data-hc-shell-toggle、data-collapsible、data-persist、… |
— | ✓ |
オーバーレイとフィードバック
Section titled “オーバーレイとフィードバック”| ビヘイビア | 担当 | 属性 | イベント | 自動 |
|---|---|---|---|---|
installPopover() |
ポップオーバーのアンカー + 配置フォールバック。 | data-side、data-align、data-arrow |
— | ✓ |
installTooltip() |
ツールチップの表示制御 + アンカー。 | aria-describedby(トリガー)、data-side、data-align |
— | ✓ |
installHovercard() |
ホバーカードの意図判定ディレイ + アンカー。 | aria-describedby(トリガー)、data-side、data-align |
— | ✓ |
installDrawer() |
ドロワーのドラッグ解散。 | data-side |
— | ✓ |
installToast() |
トーストリージョン: hc:toast イベント、スタッキング、id による更新、アクション。 |
data-hc-toast-region、data-position、data-limit |
hc:toast(待ち受け) |
✓ |
installConfirm() |
共有確認ダイアログ — confirm-action レシピ(data-hc-confirm)。 |
data-hc-confirm、data-hc-confirm-title、data-hc-confirm-variant、… |
hc:confirmed |
✓ |
installRemoteDialog() |
サーバーレンダリングのダイアログ — remote-dialog レシピ。 | data-hc-remote-dialog-root |
— | ✓ |
installCloseDialog() |
htmx リクエスト成功後のダイアログクローズ(data-hc-close-dialog-on-success)。 |
data-hc-close-dialog-on-success |
— | ✓ |
installClosePopover() |
そのポップオーバー版(data-hc-close-popover-on-success)— filter-popover レシピを参照。 |
data-hc-close-popover-on-success |
— | ✓ |
| ビヘイビア | 担当 | 属性 | イベント | 自動 |
|---|---|---|---|---|
installDatagrid() |
データグリッドのキーボードグリッド、ソート / リサイズ / 編集 / 詳細のイベント。 | data-sortable、data-editable、data-resizable、data-frozen、… |
hc:datagridsort、hc:datagridselectionchange、…(全 7 個 — ページ参照) |
✓ |
installDatagridActions() |
データグリッドの選択アクションバー — datagrid-bulk-actions レシピ。 | data-hc-datagrid-actions、data-hc-datagrid-count |
— | ✓ |
installCarousel() |
カルーセルのアクティブ追跡・ドット・キーボード。 | data-autoplay、data-hc-carousel-prev / -next / -dots |
hc:carouselchange |
✓ |
installSplitter() |
スプリッターのドラッグ + キーボードリサイズ + 永続化。 | data-orientation、data-value、data-persist、… |
hc:splitterchange |
✓ |
installAvatar() |
アバターの画像エラー → イニシャルフォールバック。 | data-delay |
hc:avatarstatechange |
✓ |
installSparkline() |
スパークラインの data-values からの描画。 |
data-values、data-area、data-min / data-max |
— | ✓ |
installChatScroll() |
チャットトランスクリプトの最下部追従(読者が上へスクロールしている間は追従を停止)。 | — | — | ✓ |
installChart() |
チャートの Observable Plot による描画。 | data-hc-chart、data-mark、… |
— | オプトイン — @observablehq/plot ピア依存が必要。バンドルには含まれません。 |
プラットフォームの糊
Section titled “プラットフォームの糊”| ビヘイビア | 担当 | 属性 | イベント | 自動 |
|---|---|---|---|---|
installCopy() |
クリップボードボタン(data-hc-copy)— copy レシピ。 |
data-hc-copy、data-hc-copy-text、data-hc-copy-ok |
hc:copied |
✓ |
installPrint() |
インラインスクリプトなしで window.print() を呼ぶ Print ボタン — 印刷。 |
data-hc-print |
— | ✓ |
installInvokerCommands() |
Baseline 2025 より下のエンジン向けの、commandfor + command="show-modal" / "close" の feature-detected フォールバック — ダイアログ、ブラウザサポート。ネイティブ対応のエンジンでは何もインストールしない。 |
commandfor、command |
— | ✓ |
installThemeToggle() |
ライト / ダーク切替ボタン(テーマ)。 | data-hc-theme-toggle、data-persist |
hc:themechange |
✓ |
installCsrfHeader() |
meta[name="csrf-token"] から全 htmx リクエストへ CSRF ヘッダーを付与(htmx ガイド)。 |
meta[name="csrf-token"] + data-header |
— | ✓ |
installSseDispatch() |
SSE メッセージを DOM イベントへ橋渡し — sse-updates / sse-toast レシピ。 | data-hc-sse-dispatch、data-sse-swap |
data-sse-swap に列挙した名前 |
✓ |
- インストール → ビヘイビア — バンドル、冪等性、アンインストール。
- 基礎 — すべてのビヘイビアが従う規約。