ビヘイビア

キットは 58 個の小さなビヘイビアを出荷しています。すべて冪等でアンインストーラを返し、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:* イベントです(「—」はなし)。

アクションとフォーム

ビヘイビア	担当	属性	イベント	自動
`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`	—	✓
`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`	—	✓

ナビゲーションとコマンド

ビヘイビア	担当	属性	イベント	自動
`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`、…	—	✓

オーバーレイとフィードバック

ビヘイビア	担当	属性	イベント	自動
`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` ピア依存が必要。バンドルには含まれません。

プラットフォームの糊

ビヘイビア	担当	属性	イベント	自動
`installCopy()`	クリップボードボタン(`data-hc-copy`)— copy レシピ。	`data-hc-copy`、`data-hc-copy-text`、`data-hc-copy-ok`	`hc:copied`	✓
`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` に列挙した名前	✓

関連

インストール → ビヘイビア — バンドル、冪等性、アンインストール。
基礎 — すべてのビヘイビアが従う規約。