Skip to content

Behaviors

The kit ships 44 small behaviors. All of them are idempotent, return an uninstaller, and — with the single exception of installChart() — are auto-installed by the zero-config @hypermedia-components/core/behaviors entry, which also picks up content swapped in by htmx. Import them individually only when you bundle selectively.

// 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();

Actions & forms

Behavior	Powers	Auto-init
`installValidation()`	Native-validation wiring for fields (blur/submit validation, message slots).	✓
`installFieldErrors()`	Server-driven inline errors — the field-errors recipe’s 422 fragment contract.	✓
`installCombobox()`	Combobox keyboard, filtering, ARIA.	✓
`installMulticombobox()`	Multicombobox tags, keyboard, ARIA.	✓
`installInputOtp()`	Input OTP per-slot editing.	✓
`installPasswordToggle()`	The input-group password reveal.	✓
`installSlider()`	Slider fill + value output sync.	✓
`installRange()`	Range dual-thumb clamping + fill.	✓
`installCalendar()`	Calendar grid, keyboard, selection.	✓
`installDropzone()`	Dropzone drag-over state + file list.	✓
`installUploadProgress()`	Driving a `<progress>` from htmx upload events — the file-upload recipe.	✓
`installCodeEditor()`	The editable code field: gutter, live highlight (`data-lang`).	✓

Behavior	Powers	Auto-init
`installTabs()`	Tabs roving focus + panel switching.	✓
`installMenu()`	Menu keyboard pattern, anchoring, ARIA.	✓
`installMenubar()`	Menubar across-menu arrow keys.	✓
`installNavmenu()`	Navigation menu panels.	✓
`installContextMenu()`	Context menu right-click opening.	✓
`installCommand()`	Command filtering + ranking + keyboard.	✓
`installTree()`	Tree ARIA roles + expand/collapse.	✓
`installSpy()`	TOC scrollspy (`aria-current` tracking).	✓
`installNavCurrent()`	Marking the current nav link after boosted navigations (shell).	✓
`installShell()`	Shell sidebar collapse + persistence.	✓

Overlays & feedback

Behavior	Powers	Auto-init
`installPopover()`	Popover anchoring + placement fallback.	✓
`installTooltip()`	Tooltip show/hide + anchoring.	✓
`installHovercard()`	Hovercard intent delays + anchoring.	✓
`installDrawer()`	Drawer drag-to-dismiss.	✓
`installToast()`	Toast region: `hc:toast` events, stacking, update-by-id, actions.	✓
`installConfirm()`	The shared confirm dialog — confirm-action recipe (`data-hc-confirm`).	✓
`installRemoteDialog()`	Server-rendered dialogs — the remote-dialog recipe.	✓
`installCloseDialog()`	Closing a dialog after a successful htmx request (`data-hc-close-dialog-on-success`).	✓
`installClosePopover()`	The popover equivalent (`data-hc-close-popover-on-success`) — see the filter-popover recipe.	✓

Data display

Behavior	Powers	Auto-init
`installDatagrid()`	Datagrid keyboard grid, sort/resize/edit/detail events.	✓
`installDatagridActions()`	The datagrid selection actions bar — datagrid-bulk-actions recipe.	✓
`installCarousel()`	Carousel active tracking, dots, keyboard.	✓
`installSplitter()`	Splitter drag + keyboard resize + persistence.	✓
`installAvatar()`	Avatar image-error → initials fallback.	✓
`installSparkline()`	Sparkline drawing from `data-values`.	✓
`installChart()`	Chart rendering via Observable Plot.	Opt-in — needs the `@observablehq/plot` peer; never bundled.

Platform glue

Behavior	Powers	Auto-init
`installCopy()`	Clipboard buttons (`data-hc-copy`) — the copy recipe.	✓
`installThemeToggle()`	The light/dark toggle button (theming).	✓
`installCsrfHeader()`	Adding the CSRF header from `meta[name="csrf-token"]` to every htmx request (htmx guide).	✓
`installSseDispatch()`	Bridging SSE messages into DOM events — the sse-updates / sse-toast recipes.	✓

Installation → Behaviors — bundles, idempotency, uninstalling.
Fundamentals — the conventions every behavior follows.