{ "$schema": "https://ingcreators.com/hypermedia-components/api/manifest-schema-v1", "name": "@hypermedia-components/core", "version": "0.4.0", "docsBase": "https://ingcreators.com/hypermedia-components/", "components": [ { "block": "hc-accordion", "parts": [ "content", "icon", "item", "trigger" ], "dataAttributes": [], "attributeValues": {}, "cssVars": [ "--hc-accordion-content-fg", "--hc-accordion-content-padding-block-end", "--hc-accordion-content-transition-duration", "--hc-accordion-icon-size", "--hc-accordion-icon-transition-duration", "--hc-accordion-item-border-color", "--hc-accordion-trigger-fg", "--hc-accordion-trigger-font-weight", "--hc-accordion-trigger-gap", "--hc-accordion-trigger-hover-fg", "--hc-accordion-trigger-padding-x", "--hc-accordion-trigger-padding-y", "--hc-color-focus-ring" ], "containers": [], "staticSafe": true, "tokensGroup": "accordion", "behavior": null, "docsPath": "components/accordion" }, { "block": "hc-alert", "parts": [ "body", "error", "errors", "title" ], "dataAttributes": [ "data-distributed", "data-hc-field-errors", "data-summary", "data-variant" ], "attributeValues": { "data-distributed": [ "all", "true" ], "data-summary": [ "auto" ], "data-variant": [ "error", "success", "warning" ] }, "cssVars": [ "--hc-alert-border-width", "--hc-alert-error-bg", "--hc-alert-error-border", "--hc-alert-error-fg", "--hc-alert-gap", "--hc-alert-info-bg", "--hc-alert-info-border", "--hc-alert-info-fg", "--hc-alert-padding-block", "--hc-alert-padding-inline", "--hc-alert-radius", "--hc-alert-success-bg", "--hc-alert-success-border", "--hc-alert-success-fg", "--hc-alert-title-weight", "--hc-alert-warning-bg", "--hc-alert-warning-border", "--hc-alert-warning-fg" ], "containers": [], "staticSafe": true, "tokensGroup": "alert", "behavior": null, "docsPath": "components/alert" }, { "block": "hc-anchored", "parts": [], "dataAttributes": [ "data-align", "data-arrow", "data-side" ], "attributeValues": { "data-align": [ "end", "start" ], "data-side": [ "bottom", "left", "right", "top" ] }, "cssVars": [ "--hc-anchored-arrow-border", "--hc-anchored-arrow-size", "--hc-anchored-offset" ], "containers": [], "staticSafe": true, "tokensGroup": null, "behavior": null, "docsPath": "components/anchored" }, { "block": "hc-aspect", "parts": [], "dataAttributes": [ "data-fit", "data-ratio" ], "attributeValues": { "data-fit": [ "contain" ], "data-ratio": [ "1/1", "16/9", "2/1", "21/9", "3/2", "4/3", "9/16" ] }, "cssVars": [ "--hc-aspect-ratio" ], "containers": [], "staticSafe": true, "tokensGroup": null, "behavior": null, "docsPath": "components/aspect" }, { "block": "hc-attachment", "parts": [ "icon", "name", "progress", "remove", "size" ], "dataAttributes": [ "data-state" ], "attributeValues": { "data-state": [ "error", "uploading" ] }, "cssVars": [ "--hc-attachment-bg", "--hc-attachment-border", "--hc-attachment-error-bg", "--hc-attachment-error-border", "--hc-attachment-gap", "--hc-attachment-icon-size", "--hc-attachment-name-fg", "--hc-attachment-padding-block", "--hc-attachment-padding-inline", "--hc-attachment-radius", "--hc-attachment-size-fg", "--hc-color-focus-ring", "--hc-color-muted-bg", "--hc-font-size-sm" ], "containers": [], "staticSafe": true, "tokensGroup": "attachment", "behavior": null, "docsPath": "components/attachment" }, { "block": "hc-avatar", "parts": [ "fallback", "image" ], "dataAttributes": [ "data-shape", "data-size", "data-state" ], "attributeValues": { "data-shape": [ "square" ], "data-size": [ "lg", "sm", "xl", "xs" ], "data-state": [ "error", "loaded", "pending" ] }, "cssVars": [ "--hc-avatar-bg", "--hc-avatar-fg", "--hc-avatar-font-size", "--hc-avatar-font-weight", "--hc-avatar-lg-font-size", "--hc-avatar-lg-size", "--hc-avatar-radius", "--hc-avatar-size", "--hc-avatar-sm-font-size", "--hc-avatar-sm-size", "--hc-avatar-square-radius", "--hc-avatar-xl-font-size", "--hc-avatar-xl-size", "--hc-avatar-xs-font-size", "--hc-avatar-xs-size", "--hc-color-bg" ], "containers": [], "staticSafe": true, "tokensGroup": "avatar", "behavior": "installAvatar", "docsPath": "components/avatar" }, { "block": "hc-badge", "parts": [], "dataAttributes": [ "data-variant" ], "attributeValues": { "data-variant": [ "error", "info", "success", "warning" ] }, "cssVars": [ "--hc-badge-default-bg", "--hc-badge-default-border", "--hc-badge-default-fg", "--hc-badge-error-bg", "--hc-badge-error-border", "--hc-badge-error-fg", "--hc-badge-font-size", "--hc-badge-font-weight", "--hc-badge-info-bg", "--hc-badge-info-border", "--hc-badge-info-fg", "--hc-badge-padding-x", "--hc-badge-padding-y", "--hc-badge-radius", "--hc-badge-success-bg", "--hc-badge-success-border", "--hc-badge-success-fg", "--hc-badge-warning-bg", "--hc-badge-warning-border", "--hc-badge-warning-fg", "--hc-space-1" ], "containers": [], "staticSafe": true, "tokensGroup": "badge", "behavior": null, "docsPath": "components/badge" }, { "block": "hc-breadcrumb", "parts": [ "current", "ellipsis", "item", "link", "list" ], "dataAttributes": [], "attributeValues": {}, "cssVars": [ "--hc-breadcrumb-current-fg", "--hc-breadcrumb-current-font-weight", "--hc-breadcrumb-font-size", "--hc-breadcrumb-gap", "--hc-breadcrumb-link-fg", "--hc-breadcrumb-link-hover-fg", "--hc-breadcrumb-separator", "--hc-breadcrumb-separator-fg", "--hc-color-focus-ring" ], "containers": [], "staticSafe": true, "tokensGroup": "breadcrumb", "behavior": null, "docsPath": "components/breadcrumb" }, { "block": "hc-button", "parts": [], "dataAttributes": [ "data-loading", "data-size", "data-variant" ], "attributeValues": { "data-loading": [ "true" ], "data-size": [ "lg", "sm" ], "data-variant": [ "error", "ghost", "primary", "secondary" ] }, "cssVars": [ "--hc-button-default-bg", "--hc-button-default-border", "--hc-button-default-fg", "--hc-button-default-hover-bg", "--hc-button-error-bg", "--hc-button-error-border", "--hc-button-error-fg", "--hc-button-error-hover-bg", "--hc-button-error-hover-border", "--hc-button-font-size", "--hc-button-font-weight", "--hc-button-ghost-bg", "--hc-button-ghost-border", "--hc-button-ghost-fg", "--hc-button-ghost-hover-bg", "--hc-button-height", "--hc-button-lg-font-size", "--hc-button-lg-height", "--hc-button-lg-padding-x", "--hc-button-padding-x", "--hc-button-primary-bg", "--hc-button-primary-border", "--hc-button-primary-fg", "--hc-button-primary-hover-bg", "--hc-button-primary-hover-border", "--hc-button-radius", "--hc-button-secondary-bg", "--hc-button-secondary-border", "--hc-button-secondary-fg", "--hc-button-secondary-hover-bg", "--hc-button-secondary-hover-border", "--hc-button-sm-font-size", "--hc-button-sm-height", "--hc-button-sm-padding-x", "--hc-color-focus-ring", "--hc-opacity-disabled", "--hc-space-2" ], "containers": [], "staticSafe": true, "tokensGroup": "button", "behavior": null, "docsPath": "components/button" }, { "block": "hc-button-group", "parts": [], "dataAttributes": [ "data-orientation" ], "attributeValues": { "data-orientation": [ "vertical" ] }, "cssVars": [ "--hc-button-radius" ], "containers": [], "staticSafe": true, "tokensGroup": null, "behavior": null, "docsPath": "components/button-group" }, { "block": "hc-calendar", "parts": [ "day", "grid", "header", "month-select", "monthnav", "nav", "title", "year-select" ], "dataAttributes": [ "data-hc-static", "data-in-range", "data-outside", "data-range-end", "data-range-preview", "data-range-preview-end", "data-range-start", "data-today" ], "attributeValues": {}, "cssVars": [ "--hc-calendar-bg", "--hc-calendar-border", "--hc-calendar-day-disabled-fg", "--hc-calendar-day-fg", "--hc-calendar-day-font-size", "--hc-calendar-day-hover-bg", "--hc-calendar-day-outside-fg", "--hc-calendar-day-radius", "--hc-calendar-day-range-bg", "--hc-calendar-day-range-preview-bg", "--hc-calendar-day-selected-bg", "--hc-calendar-day-selected-fg", "--hc-calendar-day-size", "--hc-calendar-day-today-border", "--hc-calendar-fg", "--hc-calendar-nav-fg", "--hc-calendar-nav-hover-bg", "--hc-calendar-nav-radius", "--hc-calendar-nav-size", "--hc-calendar-padding", "--hc-calendar-radius", "--hc-calendar-title-font-size", "--hc-calendar-title-font-weight", "--hc-calendar-weekday-fg", "--hc-calendar-weekday-font-size", "--hc-calendar-weekday-font-weight", "--hc-color-focus-ring", "--hc-space-1" ], "containers": [], "staticSafe": false, "tokensGroup": "calendar", "behavior": "installCalendar", "docsPath": "components/calendar" }, { "block": "hc-card", "parts": [ "body", "footer", "header" ], "dataAttributes": [], "attributeValues": {}, "cssVars": [ "--hc-card-bg", "--hc-card-border", "--hc-card-fg", "--hc-card-header-border", "--hc-card-padding", "--hc-card-radius", "--hc-font-weight-semibold" ], "containers": [ "body", "footer" ], "staticSafe": true, "tokensGroup": "card", "behavior": null, "docsPath": "components/card" }, { "block": "hc-carousel", "parts": [ "dot", "dots", "next", "prev", "slide", "viewport" ], "dataAttributes": [], "attributeValues": {}, "cssVars": [ "--hc-carousel-control-bg", "--hc-carousel-control-border", "--hc-carousel-control-fg", "--hc-carousel-control-offset", "--hc-carousel-control-size", "--hc-carousel-dot-active-color", "--hc-carousel-dot-color", "--hc-carousel-dot-gap", "--hc-carousel-dot-size", "--hc-carousel-dots-margin", "--hc-carousel-gap", "--hc-carousel-slide-size", "--hc-color-focus-ring", "--hc-opacity-disabled" ], "containers": [], "staticSafe": false, "tokensGroup": "carousel", "behavior": "installCarousel", "docsPath": "components/carousel" }, { "block": "hc-chart", "parts": [ "plot" ], "dataAttributes": [], "attributeValues": {}, "cssVars": [ "--hc-chart-axis", "--hc-chart-font-size", "--hc-chart-grid" ], "containers": [], "staticSafe": false, "tokensGroup": "chart", "behavior": "installChart", "docsPath": "components/chart" }, { "block": "hc-chat", "parts": [ "body", "jump", "list", "message", "meta" ], "dataAttributes": [ "data-role", "data-state", "data-stuck" ], "attributeValues": { "data-role": [ "assistant", "system", "user" ], "data-state": [ "error", "streaming" ], "data-stuck": [ "false" ] }, "cssVars": [ "--hc-chat-assistant-bg", "--hc-chat-assistant-fg", "--hc-chat-bubble-max-inline", "--hc-chat-bubble-padding-block", "--hc-chat-bubble-padding-inline", "--hc-chat-bubble-radius", "--hc-chat-caret-color", "--hc-chat-error-bg", "--hc-chat-error-fg", "--hc-chat-gap", "--hc-chat-meta-fg", "--hc-chat-system-fg", "--hc-chat-user-bg", "--hc-chat-user-fg", "--hc-color-focus-ring", "--hc-color-link-hover", "--hc-color-link-visited", "--hc-font-size-sm", "--hc-space-1" ], "containers": [], "staticSafe": true, "tokensGroup": "chat", "behavior": "installChatScroll", "docsPath": "components/chat" }, { "block": "hc-checkbox", "parts": [], "dataAttributes": [ "data-size", "data-variant" ], "attributeValues": { "data-size": [ "lg", "sm" ], "data-variant": [ "error", "success", "warning" ] }, "cssVars": [ "--hc-checkbox-bg", "--hc-checkbox-border", "--hc-checkbox-border-width", "--hc-checkbox-checked-bg", "--hc-checkbox-checked-border", "--hc-checkbox-disabled-bg", "--hc-checkbox-error-border", "--hc-checkbox-error-checked-bg", "--hc-checkbox-error-checked-border", "--hc-checkbox-label-gap", "--hc-checkbox-lg-size", "--hc-checkbox-radius", "--hc-checkbox-size", "--hc-checkbox-sm-size", "--hc-checkbox-success-checked-bg", "--hc-checkbox-success-checked-border", "--hc-checkbox-warning-checked-bg", "--hc-checkbox-warning-checked-border", "--hc-color-error", "--hc-color-focus-ring", "--hc-opacity-disabled" ], "containers": [], "staticSafe": true, "tokensGroup": "checkbox", "behavior": null, "docsPath": "components/checkbox" }, { "block": "hc-chip", "parts": [], "dataAttributes": [], "attributeValues": {}, "cssVars": [ "--hc-chip-bg", "--hc-chip-border", "--hc-chip-fg", "--hc-chip-font-size", "--hc-chip-gap", "--hc-chip-padding-x", "--hc-chip-padding-y", "--hc-chip-radius", "--hc-space-1" ], "containers": [], "staticSafe": true, "tokensGroup": "chip", "behavior": null, "docsPath": "components/chip" }, { "block": "hc-code", "parts": [ "gutter", "highlight", "input", "line", "swatch", "tok" ], "dataAttributes": [ "data-editable", "data-gutter", "data-mode", "data-state", "data-tok", "data-wrap" ], "attributeValues": { "data-gutter": [ "line-numbers" ], "data-mode": [ "diff" ], "data-state": [ "added", "context", "covered", "missed", "removed" ], "data-tok": [ "attribute", "comment", "identifier", "keyword", "meta", "number", "operator", "property", "string", "tag" ], "data-wrap": [ "on" ] }, "cssVars": [ "--hc-code-added-bg", "--hc-code-added-marker", "--hc-code-bg", "--hc-code-border", "--hc-code-context-fg", "--hc-code-fg", "--hc-code-focus-border", "--hc-code-font-family", "--hc-code-font-size", "--hc-code-gutter-fg", "--hc-code-gutter-gap", "--hc-code-gutter-width", "--hc-code-input-min-height", "--hc-code-line-height", "--hc-code-num-width", "--hc-code-padding-block", "--hc-code-padding-inline", "--hc-code-radius", "--hc-code-removed-bg", "--hc-code-removed-marker", "--hc-code-tok-attribute", "--hc-code-tok-comment", "--hc-code-tok-identifier", "--hc-code-tok-keyword", "--hc-code-tok-meta", "--hc-code-tok-number", "--hc-code-tok-operator", "--hc-code-tok-property", "--hc-code-tok-string", "--hc-code-tok-tag" ], "containers": [], "staticSafe": false, "tokensGroup": "code", "behavior": "installCodeEditor", "docsPath": "components/code" }, { "block": "hc-collapsible", "parts": [ "content", "icon", "trigger" ], "dataAttributes": [], "attributeValues": {}, "cssVars": [ "--hc-collapsible-content-fg", "--hc-collapsible-content-padding-block-start", "--hc-collapsible-content-transition-duration", "--hc-collapsible-icon-size", "--hc-collapsible-icon-transition-duration", "--hc-collapsible-trigger-fg", "--hc-collapsible-trigger-font-weight", "--hc-collapsible-trigger-gap", "--hc-collapsible-trigger-hover-fg", "--hc-collapsible-trigger-padding-x", "--hc-collapsible-trigger-padding-y", "--hc-color-focus-ring" ], "containers": [ "content" ], "staticSafe": true, "tokensGroup": "collapsible", "behavior": null, "docsPath": "components/collapsible" }, { "block": "hc-combobox", "parts": [ "create", "empty", "error", "listbox", "loading", "option" ], "dataAttributes": [ "data-active" ], "attributeValues": { "data-active": [ "true" ] }, "cssVars": [ "--hc-color-action-primary-bg", "--hc-color-error", "--hc-combobox-empty-fg", "--hc-combobox-listbox-bg", "--hc-combobox-listbox-border", "--hc-combobox-listbox-fg", "--hc-combobox-listbox-max-height", "--hc-combobox-listbox-min-width", "--hc-combobox-listbox-offset", "--hc-combobox-listbox-padding-block", "--hc-combobox-listbox-radius", "--hc-combobox-option-active-bg", "--hc-combobox-option-disabled-fg", "--hc-combobox-option-fg", "--hc-combobox-option-font-size", "--hc-combobox-option-hover-bg", "--hc-combobox-option-padding-x", "--hc-combobox-option-padding-y", "--hc-combobox-option-selected-bg", "--hc-combobox-option-selected-fg", "--hc-font-weight-semibold", "--hc-shadow-lg" ], "containers": [], "staticSafe": true, "tokensGroup": "combobox", "behavior": "installCombobox", "docsPath": "components/combobox" }, { "block": "hc-command", "parts": [ "empty", "group", "group-heading", "input", "item", "list", "shortcut" ], "dataAttributes": [ "data-active" ], "attributeValues": { "data-active": [ "true" ] }, "cssVars": [ "--hc-command-backdrop", "--hc-command-bg", "--hc-command-border", "--hc-command-dialog-offset", "--hc-command-dialog-width", "--hc-command-empty-fg", "--hc-command-empty-padding-y", "--hc-command-fg", "--hc-command-heading-fg", "--hc-command-heading-font-size", "--hc-command-heading-font-weight", "--hc-command-heading-padding-y", "--hc-command-input-font-size", "--hc-command-input-height", "--hc-command-input-padding-x", "--hc-command-item-active-bg", "--hc-command-item-active-fg", "--hc-command-item-disabled-fg", "--hc-command-item-fg", "--hc-command-item-font-size", "--hc-command-item-gap", "--hc-command-item-hover-bg", "--hc-command-item-padding-x", "--hc-command-item-padding-y", "--hc-command-list-max-height", "--hc-command-list-padding-block", "--hc-command-placeholder-fg", "--hc-command-radius", "--hc-command-shortcut-fg", "--hc-command-shortcut-font-size", "--hc-command-shortcut-padding-x", "--hc-shadow-lg" ], "containers": [], "staticSafe": true, "tokensGroup": "command", "behavior": "installCommand", "docsPath": "components/command" }, { "block": "hc-context-menu", "parts": [], "dataAttributes": [ "data-hc-context-menu" ], "attributeValues": {}, "cssVars": [], "containers": [], "staticSafe": true, "tokensGroup": null, "behavior": "installContextMenu", "docsPath": "components/context-menu" }, { "block": "hc-datagrid", "parts": [ "body", "cell", "detail", "detail-row", "error", "error-row", "foot", "grouprow", "head", "headcell", "record", "resizer", "row", "scroll", "table", "toggle", "tooltip", "truncate" ], "dataAttributes": [ "data-active", "data-alt", "data-attention", "data-current", "data-editable", "data-editing", "data-frozen", "data-frozen-edge", "data-frozen-end", "data-frozen-end-edge", "data-group-level", "data-hc-datagrid-toggle", "data-hc-editable-hint", "data-highlight", "data-in-range", "data-invalid", "data-numeric", "data-orientation", "data-pending", "data-resized", "data-sort-index", "data-sortable", "data-tone" ], "attributeValues": { "data-attention": [ "error", "warning" ], "data-group-level": [ "2", "3" ], "data-hc-editable-hint": [ "editable", "readonly" ], "data-orientation": [ "sideways", "vertical" ], "data-tone": [ "error", "info", "success", "warning" ] }, "cssVars": [ "--hc-color-action-primary-bg", "--hc-color-focus-ring", "--hc-color-status-error-bg", "--hc-color-status-error-border", "--hc-color-status-error-fg", "--hc-color-status-warning-bg", "--hc-color-status-warning-border", "--hc-color-status-warning-fg", "--hc-color-text-muted", "--hc-control-radius", "--hc-datagrid-attention-bar", "--hc-datagrid-attention-color", "--hc-datagrid-attention-error-bg", "--hc-datagrid-attention-warning-bg", "--hc-datagrid-bg", "--hc-datagrid-border", "--hc-datagrid-cell-padding-x", "--hc-datagrid-cell-padding-y", "--hc-datagrid-cell-tint", "--hc-datagrid-current-bg", "--hc-datagrid-current-fg", "--hc-datagrid-fg", "--hc-datagrid-foot-1-h", "--hc-datagrid-foot-line", "--hc-datagrid-foot-shadow", "--hc-datagrid-freeze-end-shadow", "--hc-datagrid-freeze-line", "--hc-datagrid-freeze-shadow", "--hc-datagrid-frozen-bg", "--hc-datagrid-head-1-h", "--hc-datagrid-head-2-h", "--hc-datagrid-head-bg", "--hc-datagrid-head-fg", "--hc-datagrid-head-writing-mode", "--hc-datagrid-highlight-bg", "--hc-datagrid-indent", "--hc-datagrid-left", "--hc-datagrid-max-height", "--hc-datagrid-right", "--hc-datagrid-row-alt-bg", "--hc-datagrid-row-hover-bg", "--hc-datagrid-selected-bg", "--hc-datagrid-subrow-border", "--hc-datagrid-tone-error-bg", "--hc-datagrid-tone-error-fg", "--hc-datagrid-tone-info-bg", "--hc-datagrid-tone-info-fg", "--hc-datagrid-tone-success-bg", "--hc-datagrid-tone-success-fg", "--hc-datagrid-tone-warning-bg", "--hc-datagrid-tone-warning-fg", "--hc-datagrid-truncate-max", "--hc-font-size-sm", "--hc-font-weight-semibold", "--hc-shadow-edge", "--hc-shadow-lg", "--hc-tooltip-bg", "--hc-tooltip-fg", "--hc-tooltip-font-size", "--hc-tooltip-max-width", "--hc-tooltip-padding-x", "--hc-tooltip-padding-y", "--hc-tooltip-radius" ], "containers": [], "staticSafe": true, "tokensGroup": "datagrid", "behavior": "installDatagrid", "docsPath": "components/datagrid" }, { "block": "hc-datepicker", "parts": [], "dataAttributes": [ "data-size", "data-variant" ], "attributeValues": { "data-size": [ "lg", "sm" ], "data-variant": [ "error", "success", "warning" ] }, "cssVars": [ "--hc-color-error", "--hc-color-focus-ring", "--hc-datepicker-bg", "--hc-datepicker-border", "--hc-datepicker-disabled-bg", "--hc-datepicker-error-border", "--hc-datepicker-fg", "--hc-datepicker-focus-border", "--hc-datepicker-font-size", "--hc-datepicker-height", "--hc-datepicker-icon-size", "--hc-datepicker-lg-font-size", "--hc-datepicker-lg-height", "--hc-datepicker-lg-padding-x", "--hc-datepicker-padding-x", "--hc-datepicker-radius", "--hc-datepicker-sm-font-size", "--hc-datepicker-sm-height", "--hc-datepicker-sm-padding-x", "--hc-datepicker-success-border", "--hc-datepicker-warning-border", "--hc-opacity-disabled", "--hc-space-2" ], "containers": [], "staticSafe": true, "tokensGroup": "datepicker", "behavior": null, "docsPath": "components/datepicker" }, { "block": "hc-dialog", "parts": [ "body", "footer", "header", "title" ], "dataAttributes": [], "attributeValues": {}, "cssVars": [ "--hc-dialog-backdrop", "--hc-dialog-bg", "--hc-dialog-border", "--hc-dialog-duration", "--hc-dialog-fg", "--hc-dialog-gap", "--hc-dialog-max-width", "--hc-dialog-padding", "--hc-dialog-radius", "--hc-font-size-lg", "--hc-font-weight-semibold", "--hc-motion-easing-enter", "--hc-motion-easing-exit", "--hc-shadow-overlay", "--hc-space-4" ], "containers": [ "body", "footer" ], "staticSafe": true, "tokensGroup": "dialog", "behavior": "installCloseDialog", "docsPath": "components/dialog" }, { "block": "hc-drawer", "parts": [ "body", "footer", "header", "title" ], "dataAttributes": [ "data-side" ], "attributeValues": { "data-side": [ "bottom", "left", "top" ] }, "cssVars": [ "--hc-drawer-backdrop", "--hc-drawer-bg", "--hc-drawer-border", "--hc-drawer-duration", "--hc-drawer-fg", "--hc-drawer-gap", "--hc-drawer-padding", "--hc-drawer-side-max-width", "--hc-drawer-vert-max-height", "--hc-font-size-lg", "--hc-font-weight-semibold", "--hc-motion-easing-standard", "--hc-shadow-overlay" ], "containers": [ "body", "footer" ], "staticSafe": true, "tokensGroup": "drawer", "behavior": "installDrawer", "docsPath": "components/drawer" }, { "block": "hc-dropzone", "parts": [ "body", "files", "hint", "input" ], "dataAttributes": [ "data-dragover", "data-size" ], "attributeValues": { "data-size": [ "sm" ] }, "cssVars": [ "--hc-color-focus-ring", "--hc-dropzone-bg", "--hc-dropzone-border", "--hc-dropzone-dragover-bg", "--hc-dropzone-dragover-border", "--hc-dropzone-error-border", "--hc-dropzone-fg", "--hc-dropzone-hint", "--hc-dropzone-padding-x", "--hc-dropzone-padding-y", "--hc-dropzone-radius", "--hc-space-1", "--hc-space-3" ], "containers": [], "staticSafe": true, "tokensGroup": "dropzone", "behavior": "installDropzone", "docsPath": "components/dropzone" }, { "block": "hc-empty", "parts": [ "actions", "description", "media", "title" ], "dataAttributes": [], "attributeValues": {}, "cssVars": [ "--hc-empty-actions-margin", "--hc-empty-description-fg", "--hc-empty-description-font-size", "--hc-empty-description-margin", "--hc-empty-description-max-width", "--hc-empty-media-fg", "--hc-empty-media-margin", "--hc-empty-media-size", "--hc-empty-padding", "--hc-empty-title-fg", "--hc-empty-title-font-size", "--hc-empty-title-font-weight", "--hc-space-2" ], "containers": [], "staticSafe": true, "tokensGroup": "empty", "behavior": null, "docsPath": "components/empty" }, { "block": "hc-field", "parts": [ "error", "hint", "label", "legend", "message" ], "dataAttributes": [ "data-applied", "data-invalid" ], "attributeValues": { "data-invalid": [ "true" ] }, "cssVars": [ "--hc-color-error", "--hc-field-applied-marker-color", "--hc-field-applied-marker-size", "--hc-field-gap", "--hc-field-invalid-message-color", "--hc-field-label-color", "--hc-field-label-font-size", "--hc-field-label-weight", "--hc-field-message-color", "--hc-field-message-font-size", "--hc-field-required-color", "--hc-input-error-border" ], "containers": [], "staticSafe": true, "tokensGroup": "field", "behavior": null, "docsPath": "components/field" }, { "block": "hc-filterbar", "parts": [ "chip", "clear", "item", "label", "list", "op", "remove", "value" ], "dataAttributes": [], "attributeValues": {}, "cssVars": [ "--hc-color-focus-ring", "--hc-filterbar-bg", "--hc-filterbar-border", "--hc-filterbar-fg", "--hc-filterbar-font-size", "--hc-filterbar-gap", "--hc-filterbar-hover-bg", "--hc-filterbar-op-fg", "--hc-filterbar-padding-x", "--hc-filterbar-padding-y", "--hc-filterbar-radius", "--hc-filterbar-value-max", "--hc-font-weight-medium", "--hc-space-1" ], "containers": [], "staticSafe": true, "tokensGroup": "filterbar", "behavior": null, "docsPath": "components/filterbar" }, { "block": "hc-hovercard", "parts": [ "body", "footer", "header", "subtitle", "title" ], "dataAttributes": [], "attributeValues": {}, "cssVars": [ "--hc-hovercard-bg", "--hc-hovercard-border", "--hc-hovercard-fg", "--hc-hovercard-gap", "--hc-hovercard-max-width", "--hc-hovercard-offset", "--hc-hovercard-padding", "--hc-hovercard-radius", "--hc-hovercard-subtitle-fg", "--hc-hovercard-subtitle-size", "--hc-hovercard-title-weight", "--hc-shadow-lg" ], "containers": [ "body" ], "staticSafe": true, "tokensGroup": "hovercard", "behavior": "installHovercard", "docsPath": "components/hovercard" }, { "block": "hc-input", "parts": [], "dataAttributes": [ "data-numeric", "data-size", "data-variant" ], "attributeValues": { "data-size": [ "lg", "sm" ], "data-variant": [ "error", "success", "warning" ] }, "cssVars": [ "--hc-color-error", "--hc-color-focus-ring", "--hc-input-bg", "--hc-input-border", "--hc-input-disabled-bg", "--hc-input-error-border", "--hc-input-fg", "--hc-input-focus-border", "--hc-input-font-size", "--hc-input-height", "--hc-input-lg-font-size", "--hc-input-lg-height", "--hc-input-lg-padding-x", "--hc-input-padding-x", "--hc-input-placeholder", "--hc-input-radius", "--hc-input-sm-font-size", "--hc-input-sm-height", "--hc-input-sm-padding-x", "--hc-input-success-border", "--hc-input-warning-border", "--hc-opacity-disabled", "--hc-space-2" ], "containers": [], "staticSafe": true, "tokensGroup": "input", "behavior": null, "docsPath": "components/input" }, { "block": "hc-input-group", "parts": [], "dataAttributes": [ "data-quiet" ], "attributeValues": {}, "cssVars": [ "--hc-color-error", "--hc-color-focus-ring", "--hc-font-size-sm", "--hc-input-group-addon-bg", "--hc-input-group-addon-fg", "--hc-input-group-addon-padding-x", "--hc-input-group-bg", "--hc-input-group-border", "--hc-input-group-divider", "--hc-input-group-fg", "--hc-input-group-focus-border", "--hc-input-group-radius", "--hc-space-1" ], "containers": [], "staticSafe": true, "tokensGroup": "input-group", "behavior": "installPasswordToggle", "docsPath": "components/input-group" }, { "block": "hc-inputotp", "parts": [ "input", "separator", "slot" ], "dataAttributes": [ "data-active", "data-empty", "data-invalid", "data-variant" ], "attributeValues": { "data-variant": [ "error", "success", "warning" ] }, "cssVars": [ "--hc-inputotp-active-border", "--hc-inputotp-bg", "--hc-inputotp-border", "--hc-inputotp-caret-color", "--hc-inputotp-disabled-bg", "--hc-inputotp-disabled-fg", "--hc-inputotp-error-border", "--hc-inputotp-fg", "--hc-inputotp-font-size", "--hc-inputotp-font-weight", "--hc-inputotp-gap", "--hc-inputotp-radius", "--hc-inputotp-separator", "--hc-inputotp-slot-size", "--hc-inputotp-success-border", "--hc-inputotp-warning-border" ], "containers": [], "staticSafe": true, "tokensGroup": "inputotp", "behavior": "installInputOtp", "docsPath": "components/inputotp" }, { "block": "hc-item", "parts": [ "actions", "content", "description", "media", "title" ], "dataAttributes": [ "data-selectable", "data-selected", "data-variant" ], "attributeValues": { "data-variant": [ "error" ] }, "cssVars": [ "--hc-color-error", "--hc-color-focus-ring", "--hc-item-description-fg", "--hc-item-description-font-size", "--hc-item-fg", "--hc-item-gap", "--hc-item-hover-bg", "--hc-item-media-fg", "--hc-item-media-size", "--hc-item-padding-x", "--hc-item-padding-y", "--hc-item-radius", "--hc-item-selected-bg", "--hc-item-selected-fg", "--hc-item-title-fg", "--hc-item-title-font-weight", "--hc-opacity-disabled", "--hc-space-2" ], "containers": [], "staticSafe": true, "tokensGroup": "item", "behavior": null, "docsPath": "components/item" }, { "block": "hc-kbd", "parts": [], "dataAttributes": [ "data-size" ], "attributeValues": { "data-size": [ "lg", "sm" ] }, "cssVars": [ "--hc-color-text-muted", "--hc-kbd-bg", "--hc-kbd-border", "--hc-kbd-fg", "--hc-kbd-font", "--hc-kbd-font-size", "--hc-kbd-font-weight", "--hc-kbd-lg-font-size", "--hc-kbd-min-width", "--hc-kbd-padding-x", "--hc-kbd-padding-y", "--hc-kbd-radius", "--hc-kbd-sm-font-size", "--hc-space-1" ], "containers": [], "staticSafe": true, "tokensGroup": "kbd", "behavior": null, "docsPath": "components/kbd" }, { "block": "hc-menu", "parts": [ "item", "label", "separator" ], "dataAttributes": [ "data-submenu", "data-variant" ], "attributeValues": { "data-variant": [ "error" ] }, "cssVars": [ "--hc-menu-bg", "--hc-menu-border", "--hc-menu-fg", "--hc-menu-item-disabled-fg", "--hc-menu-item-error-fg", "--hc-menu-item-fg", "--hc-menu-item-focus-bg", "--hc-menu-item-font-size", "--hc-menu-item-gap", "--hc-menu-item-hover-bg", "--hc-menu-item-indicator-size", "--hc-menu-item-padding-x", "--hc-menu-item-padding-y", "--hc-menu-label-fg", "--hc-menu-label-font-size", "--hc-menu-label-font-weight", "--hc-menu-label-padding-x", "--hc-menu-label-padding-y", "--hc-menu-max-width", "--hc-menu-min-width", "--hc-menu-offset", "--hc-menu-padding-block", "--hc-menu-radius", "--hc-menu-separator-color", "--hc-menu-separator-margin-y", "--hc-shadow-lg" ], "containers": [], "staticSafe": true, "tokensGroup": "menu", "behavior": "installMenu", "docsPath": "components/menu" }, { "block": "hc-menubar", "parts": [ "item" ], "dataAttributes": [], "attributeValues": {}, "cssVars": [ "--hc-color-focus-ring", "--hc-menubar-bg", "--hc-menubar-border", "--hc-menubar-gap", "--hc-menubar-item-fg", "--hc-menubar-item-hover-bg", "--hc-menubar-item-padding-x", "--hc-menubar-item-padding-y", "--hc-menubar-item-radius", "--hc-menubar-padding-x", "--hc-menubar-padding-y", "--hc-menubar-radius" ], "containers": [], "staticSafe": true, "tokensGroup": "menubar", "behavior": "installMenubar", "docsPath": "components/menubar" }, { "block": "hc-meter", "parts": [], "dataAttributes": [ "data-size" ], "attributeValues": { "data-size": [ "lg", "sm" ] }, "cssVars": [ "--hc-meter-bg", "--hc-meter-critical-fill", "--hc-meter-height", "--hc-meter-lg-height", "--hc-meter-optimum-fill", "--hc-meter-radius", "--hc-meter-sm-height", "--hc-meter-suboptimum-fill" ], "containers": [], "staticSafe": true, "tokensGroup": "meter", "behavior": null, "docsPath": "components/meter" }, { "block": "hc-multicombobox", "parts": [ "control", "create", "empty", "input", "listbox", "option", "tag", "tag-remove", "tags" ], "dataAttributes": [ "data-active" ], "attributeValues": { "data-active": [ "true" ] }, "cssVars": [ "--hc-color-action-primary-bg", "--hc-font-weight-semibold", "--hc-multicombobox-control-gap", "--hc-multicombobox-control-min-height", "--hc-multicombobox-control-padding-x", "--hc-multicombobox-control-padding-y", "--hc-multicombobox-empty-fg", "--hc-multicombobox-input-fg", "--hc-multicombobox-input-min-width", "--hc-multicombobox-listbox-bg", "--hc-multicombobox-listbox-border", "--hc-multicombobox-listbox-fg", "--hc-multicombobox-listbox-max-height", "--hc-multicombobox-listbox-min-width", "--hc-multicombobox-listbox-offset", "--hc-multicombobox-listbox-padding-block", "--hc-multicombobox-listbox-radius", "--hc-multicombobox-option-active-bg", "--hc-multicombobox-option-check-color", "--hc-multicombobox-option-disabled-fg", "--hc-multicombobox-option-fg", "--hc-multicombobox-option-font-size", "--hc-multicombobox-option-hover-bg", "--hc-multicombobox-option-indicator-size", "--hc-multicombobox-option-padding-x", "--hc-multicombobox-option-padding-y", "--hc-multicombobox-tag-bg", "--hc-multicombobox-tag-border", "--hc-multicombobox-tag-fg", "--hc-multicombobox-tag-font-size", "--hc-multicombobox-tag-gap", "--hc-multicombobox-tag-padding-x", "--hc-multicombobox-tag-padding-y", "--hc-multicombobox-tag-radius", "--hc-multicombobox-tag-remove-fg", "--hc-multicombobox-tag-remove-hover-fg", "--hc-shadow-lg" ], "containers": [], "staticSafe": true, "tokensGroup": "multicombobox", "behavior": "installMulticombobox", "docsPath": "components/multicombobox" }, { "block": "hc-navmenu", "parts": [ "item", "link", "list", "panel", "trigger" ], "dataAttributes": [], "attributeValues": {}, "cssVars": [ "--hc-color-focus-ring", "--hc-navmenu-gap", "--hc-navmenu-link-fg", "--hc-navmenu-link-hover-bg", "--hc-navmenu-link-padding-x", "--hc-navmenu-link-padding-y", "--hc-navmenu-link-radius", "--hc-navmenu-panel-bg", "--hc-navmenu-panel-border", "--hc-navmenu-panel-fg", "--hc-navmenu-panel-min-width", "--hc-navmenu-panel-offset", "--hc-navmenu-panel-padding", "--hc-navmenu-panel-radius", "--hc-navmenu-trigger-fg", "--hc-navmenu-trigger-hover-bg", "--hc-navmenu-trigger-padding-x", "--hc-navmenu-trigger-padding-y", "--hc-navmenu-trigger-radius", "--hc-shadow-lg", "--hc-space-1" ], "containers": [], "staticSafe": true, "tokensGroup": "navmenu", "behavior": "installNavmenu", "docsPath": "components/navmenu" }, { "block": "hc-pagination", "parts": [ "item" ], "dataAttributes": [], "attributeValues": {}, "cssVars": [ "--hc-color-focus-ring", "--hc-pagination-bg", "--hc-pagination-border", "--hc-pagination-current-bg", "--hc-pagination-current-border", "--hc-pagination-current-fg", "--hc-pagination-disabled-fg", "--hc-pagination-fg", "--hc-pagination-font-size", "--hc-pagination-font-weight", "--hc-pagination-gap", "--hc-pagination-hover-bg", "--hc-pagination-item-size", "--hc-pagination-padding-x", "--hc-pagination-radius" ], "containers": [], "staticSafe": true, "tokensGroup": "pagination", "behavior": null, "docsPath": "components/pagination" }, { "block": "hc-popover", "parts": [ "body", "footer" ], "dataAttributes": [ "data-side" ], "attributeValues": {}, "cssVars": [ "--hc-popover-bg", "--hc-popover-body-gap", "--hc-popover-border", "--hc-popover-fg", "--hc-popover-footer-gap", "--hc-popover-max-width", "--hc-popover-min-width", "--hc-popover-offset", "--hc-popover-padding", "--hc-popover-radius", "--hc-shadow-lg" ], "containers": [ "" ], "staticSafe": true, "tokensGroup": "popover", "behavior": "installPopover", "docsPath": "components/popover" }, { "block": "hc-progress", "parts": [], "dataAttributes": [ "data-size", "data-variant" ], "attributeValues": { "data-size": [ "lg", "sm" ], "data-variant": [ "error", "success", "warning" ] }, "cssVars": [ "--hc-progress-bg", "--hc-progress-error-fill", "--hc-progress-fill", "--hc-progress-height", "--hc-progress-indeterminate-duration", "--hc-progress-lg-height", "--hc-progress-radius", "--hc-progress-sm-height", "--hc-progress-success-fill", "--hc-progress-transition-duration", "--hc-progress-warning-fill" ], "containers": [], "staticSafe": true, "tokensGroup": "progress", "behavior": null, "docsPath": "components/progress" }, { "block": "hc-radio", "parts": [], "dataAttributes": [ "data-size", "data-variant" ], "attributeValues": { "data-size": [ "lg", "sm" ], "data-variant": [ "error", "success", "warning" ] }, "cssVars": [ "--hc-color-error", "--hc-color-focus-ring", "--hc-opacity-disabled", "--hc-radio-bg", "--hc-radio-border", "--hc-radio-border-width", "--hc-radio-checked-bg", "--hc-radio-checked-border", "--hc-radio-disabled-bg", "--hc-radio-error-border", "--hc-radio-error-checked-bg", "--hc-radio-error-checked-border", "--hc-radio-label-gap", "--hc-radio-lg-size", "--hc-radio-size", "--hc-radio-sm-size", "--hc-radio-success-checked-bg", "--hc-radio-success-checked-border", "--hc-radio-warning-checked-bg", "--hc-radio-warning-checked-border" ], "containers": [], "staticSafe": true, "tokensGroup": "radio", "behavior": null, "docsPath": "components/radio" }, { "block": "hc-range", "parts": [ "input" ], "dataAttributes": [], "attributeValues": {}, "cssVars": [ "--hc-color-focus-ring", "--hc-range-high", "--hc-range-low", "--hc-slider-fill", "--hc-slider-radius", "--hc-slider-thumb-bg", "--hc-slider-thumb-border", "--hc-slider-thumb-size", "--hc-slider-track-bg", "--hc-slider-track-height" ], "containers": [], "staticSafe": true, "tokensGroup": null, "behavior": "installRange", "docsPath": "components/range" }, { "block": "hc-rating", "parts": [ "input", "star" ], "dataAttributes": [ "data-filled", "data-readonly", "data-size" ], "attributeValues": { "data-size": [ "lg", "sm" ] }, "cssVars": [ "--hc-color-focus-ring", "--hc-rating-color", "--hc-rating-filled-color", "--hc-rating-gap", "--hc-rating-lg-size", "--hc-rating-size", "--hc-rating-sm-size", "--hc-rating-transition-duration" ], "containers": [], "staticSafe": true, "tokensGroup": "rating", "behavior": null, "docsPath": "components/rating" }, { "block": "hc-scroll-area", "parts": [], "dataAttributes": [ "data-orientation", "data-shadows" ], "attributeValues": { "data-orientation": [ "both", "horizontal" ] }, "cssVars": [ "--hc-color-surface", "--hc-scroll-area-bg", "--hc-scroll-area-shadow", "--hc-scroll-area-shadow-cover", "--hc-scroll-area-shadow-size", "--hc-scroll-area-thumb", "--hc-scroll-area-thumb-hover", "--hc-scroll-area-track" ], "containers": [], "staticSafe": true, "tokensGroup": "scroll-area", "behavior": null, "docsPath": "components/scroll-area" }, { "block": "hc-select", "parts": [], "dataAttributes": [ "data-size", "data-variant" ], "attributeValues": { "data-size": [ "lg", "sm" ], "data-variant": [ "error", "success", "warning" ] }, "cssVars": [ "--hc-color-error", "--hc-color-focus-ring", "--hc-opacity-disabled", "--hc-select-bg", "--hc-select-border", "--hc-select-chevron-size", "--hc-select-disabled-bg", "--hc-select-error-border", "--hc-select-fg", "--hc-select-focus-border", "--hc-select-font-size", "--hc-select-height", "--hc-select-lg-font-size", "--hc-select-lg-height", "--hc-select-lg-padding-x", "--hc-select-padding-x", "--hc-select-radius", "--hc-select-sm-font-size", "--hc-select-sm-height", "--hc-select-sm-padding-x", "--hc-select-success-border", "--hc-select-warning-border", "--hc-space-2" ], "containers": [], "staticSafe": true, "tokensGroup": "select", "behavior": null, "docsPath": "components/select" }, { "block": "hc-separator", "parts": [ "label" ], "dataAttributes": [ "data-orientation" ], "attributeValues": { "data-orientation": [ "horizontal", "vertical" ] }, "cssVars": [ "--hc-separator-color", "--hc-separator-label-fg", "--hc-separator-label-font-size", "--hc-separator-label-gap", "--hc-separator-size", "--hc-separator-spacing" ], "containers": [], "staticSafe": true, "tokensGroup": "separator", "behavior": null, "docsPath": "components/separator" }, { "block": "hc-shell", "parts": [ "aside", "collapse-icon", "footer", "header", "label", "main", "sidebar", "toggle" ], "dataAttributes": [ "data-hc-shell-collapse", "data-layout", "data-sidebar", "data-sidebar-collapsed" ], "attributeValues": { "data-layout": [ "sidebar-first" ], "data-sidebar": [ "open" ] }, "cssVars": [ "--hc-color-bg", "--hc-color-border", "--hc-color-overlay", "--hc-color-surface", "--hc-color-text", "--hc-shell-aside-width", "--hc-shell-pad", "--hc-shell-sidebar-collapsed-width", "--hc-shell-sidebar-width", "--hc-space-3", "--hc-space-4" ], "containers": [ "main" ], "staticSafe": true, "tokensGroup": null, "behavior": "installShell", "docsPath": "components/shell" }, { "block": "hc-skeleton", "parts": [], "dataAttributes": [ "data-animation", "data-shape" ], "attributeValues": { "data-animation": [ "none", "pulse", "wave" ], "data-shape": [ "circle", "text" ] }, "cssVars": [ "--hc-skeleton-bg", "--hc-skeleton-highlight", "--hc-skeleton-pulse-duration", "--hc-skeleton-radius", "--hc-skeleton-text-height", "--hc-skeleton-text-radius", "--hc-skeleton-wave-duration" ], "containers": [], "staticSafe": true, "tokensGroup": "skeleton", "behavior": null, "docsPath": "components/skeleton" }, { "block": "hc-slider", "parts": [], "dataAttributes": [ "data-orientation", "data-size", "data-variant" ], "attributeValues": { "data-orientation": [ "vertical" ], "data-size": [ "lg", "sm" ], "data-variant": [ "error", "success", "warning" ] }, "cssVars": [ "--hc-color-focus-ring", "--hc-opacity-disabled", "--hc-slider-disabled-fill", "--hc-slider-error-fill", "--hc-slider-error-thumb-border", "--hc-slider-fill", "--hc-slider-fill-current", "--hc-slider-fill-dir", "--hc-slider-length", "--hc-slider-lg-thumb-size", "--hc-slider-lg-track-height", "--hc-slider-radius", "--hc-slider-sm-thumb-size", "--hc-slider-sm-track-height", "--hc-slider-success-fill", "--hc-slider-success-thumb-border", "--hc-slider-thumb-bg", "--hc-slider-thumb-border", "--hc-slider-thumb-size", "--hc-slider-track-bg", "--hc-slider-track-height", "--hc-slider-value", "--hc-slider-warning-fill", "--hc-slider-warning-thumb-border" ], "containers": [], "staticSafe": true, "tokensGroup": "slider", "behavior": "installSlider", "docsPath": "components/slider" }, { "block": "hc-sparkline", "parts": [ "area", "line", "svg" ], "dataAttributes": [ "data-variant" ], "attributeValues": { "data-variant": [ "error", "success", "warning" ] }, "cssVars": [ "--hc-sparkline-area-opacity", "--hc-sparkline-color", "--hc-sparkline-error", "--hc-sparkline-height", "--hc-sparkline-stroke-width", "--hc-sparkline-success", "--hc-sparkline-warning", "--hc-sparkline-width" ], "containers": [], "staticSafe": true, "tokensGroup": "sparkline", "behavior": "installSparkline", "docsPath": "components/sparkline" }, { "block": "hc-spinner", "parts": [], "dataAttributes": [ "data-size", "data-variant" ], "attributeValues": { "data-size": [ "lg", "sm" ], "data-variant": [ "error", "primary", "success", "warning" ] }, "cssVars": [ "--hc-spinner-border-width", "--hc-spinner-duration", "--hc-spinner-error-color", "--hc-spinner-indicator-color", "--hc-spinner-lg-size", "--hc-spinner-primary-color", "--hc-spinner-reduced-duration", "--hc-spinner-size", "--hc-spinner-sm-size", "--hc-spinner-success-color", "--hc-spinner-track-color", "--hc-spinner-warning-color" ], "containers": [], "staticSafe": true, "tokensGroup": "spinner", "behavior": null, "docsPath": "components/spinner" }, { "block": "hc-splitter", "parts": [ "handle", "panel" ], "dataAttributes": [ "data-collapsed", "data-orientation" ], "attributeValues": { "data-orientation": [ "vertical" ] }, "cssVars": [ "--hc-color-focus-ring", "--hc-splitter-grip-active-color", "--hc-splitter-grip-color", "--hc-splitter-grip-length", "--hc-splitter-grip-thickness", "--hc-splitter-handle-bg", "--hc-splitter-handle-hover-bg", "--hc-splitter-handle-size", "--hc-splitter-pos" ], "containers": [], "staticSafe": true, "tokensGroup": "splitter", "behavior": "installSplitter", "docsPath": "components/splitter" }, { "block": "hc-stepper", "parts": [ "label", "marker", "step" ], "dataAttributes": [ "data-size", "data-state" ], "attributeValues": { "data-size": [ "sm" ], "data-state": [ "complete" ] }, "cssVars": [ "--hc-color-text", "--hc-font-size-sm", "--hc-stepper-complete-bg", "--hc-stepper-complete-fg", "--hc-stepper-connector", "--hc-stepper-current-bg", "--hc-stepper-current-fg", "--hc-stepper-gap", "--hc-stepper-label", "--hc-stepper-marker-bg", "--hc-stepper-marker-fg", "--hc-stepper-marker-size" ], "containers": [], "staticSafe": true, "tokensGroup": "stepper", "behavior": null, "docsPath": "components/stepper" }, { "block": "hc-switch", "parts": [], "dataAttributes": [ "data-size", "data-variant" ], "attributeValues": { "data-size": [ "lg", "sm" ], "data-variant": [ "error", "success", "warning" ] }, "cssVars": [ "--hc-color-focus-ring", "--hc-opacity-disabled", "--hc-shadow-sm", "--hc-switch-bg", "--hc-switch-border", "--hc-switch-border-width", "--hc-switch-checked-bg", "--hc-switch-checked-border", "--hc-switch-disabled-bg", "--hc-switch-error-checked-bg", "--hc-switch-height", "--hc-switch-label-gap", "--hc-switch-lg-height", "--hc-switch-lg-thumb-size", "--hc-switch-lg-width", "--hc-switch-padding", "--hc-switch-sm-height", "--hc-switch-sm-thumb-size", "--hc-switch-sm-width", "--hc-switch-success-checked-bg", "--hc-switch-thumb-bg", "--hc-switch-thumb-size", "--hc-switch-warning-checked-bg", "--hc-switch-width" ], "containers": [], "staticSafe": true, "tokensGroup": "switch", "behavior": null, "docsPath": "components/switch" }, { "block": "hc-table", "parts": [], "dataAttributes": [ "data-density", "data-numeric", "data-tone", "data-variant" ], "attributeValues": { "data-density": [ "compact" ], "data-tone": [ "error", "info", "success", "warning" ], "data-variant": [ "kv" ] }, "cssVars": [ "--hc-color-status-error-bg", "--hc-color-status-error-fg", "--hc-color-status-info-bg", "--hc-color-status-info-fg", "--hc-color-status-success-bg", "--hc-color-status-success-fg", "--hc-color-status-warning-bg", "--hc-color-status-warning-fg", "--hc-space-1", "--hc-table-border", "--hc-table-cell-padding-x", "--hc-table-cell-padding-y", "--hc-table-fg", "--hc-table-font-size", "--hc-table-header-bg", "--hc-table-header-fg", "--hc-table-header-weight", "--hc-table-kv-key-fg", "--hc-table-kv-key-width", "--hc-table-row-hover-bg" ], "containers": [], "staticSafe": true, "tokensGroup": "table", "behavior": null, "docsPath": "components/table" }, { "block": "hc-tabs", "parts": [ "list", "panel", "scroll", "tab" ], "dataAttributes": [ "data-dir", "data-hc-static", "data-orientation", "data-overflow", "data-size", "data-variant" ], "attributeValues": { "data-dir": [ "end", "start" ], "data-orientation": [ "vertical" ], "data-overflow": [ "scroll" ], "data-size": [ "lg", "sm" ], "data-variant": [ "pill" ] }, "cssVars": [ "--hc-color-focus-ring", "--hc-color-muted-bg", "--hc-color-surface", "--hc-opacity-disabled", "--hc-shadow-edge", "--hc-space-3", "--hc-tabs-lg-tab-font-size", "--hc-tabs-lg-tab-height", "--hc-tabs-lg-tab-padding-x", "--hc-tabs-list-border", "--hc-tabs-list-gap", "--hc-tabs-panel-focus-ring", "--hc-tabs-panel-padding-y", "--hc-tabs-pill-active-bg", "--hc-tabs-pill-active-fg", "--hc-tabs-scroll-size", "--hc-tabs-sm-tab-font-size", "--hc-tabs-sm-tab-height", "--hc-tabs-sm-tab-padding-x", "--hc-tabs-tab-active-fg", "--hc-tabs-tab-disabled-fg", "--hc-tabs-tab-fg", "--hc-tabs-tab-font-size", "--hc-tabs-tab-font-weight", "--hc-tabs-tab-height", "--hc-tabs-tab-hover-bg", "--hc-tabs-tab-hover-fg", "--hc-tabs-tab-indicator", "--hc-tabs-tab-indicator-size", "--hc-tabs-tab-padding-x", "--hc-tabs-tab-radius" ], "containers": [], "staticSafe": true, "tokensGroup": "tabs", "behavior": "installTabs", "docsPath": "components/tabs" }, { "block": "hc-timeline", "parts": [ "content", "description", "item", "marker", "time", "title" ], "dataAttributes": [ "data-variant" ], "attributeValues": { "data-variant": [ "error", "info", "success", "warning" ] }, "cssVars": [ "--hc-timeline-description-fg", "--hc-timeline-description-font-size", "--hc-timeline-error-bg", "--hc-timeline-gap", "--hc-timeline-info-bg", "--hc-timeline-item-gap", "--hc-timeline-line-color", "--hc-timeline-line-size", "--hc-timeline-marker-bg", "--hc-timeline-marker-border", "--hc-timeline-marker-border-size", "--hc-timeline-marker-fg", "--hc-timeline-marker-size", "--hc-timeline-status-fg", "--hc-timeline-success-bg", "--hc-timeline-time-fg", "--hc-timeline-time-font-size", "--hc-timeline-title-fg", "--hc-timeline-title-font-weight", "--hc-timeline-warning-bg" ], "containers": [], "staticSafe": true, "tokensGroup": "timeline", "behavior": null, "docsPath": "components/timeline" }, { "block": "hc-toast", "parts": [ "action", "body", "close", "title" ], "dataAttributes": [ "data-position", "data-variant" ], "attributeValues": { "data-position": [ "-center", "-left", "-right", "bottom-", "top-" ], "data-variant": [ "error", "success", "warning" ] }, "cssVars": [ "--hc-color-focus-ring", "--hc-font-weight-semibold", "--hc-motion-easing-standard", "--hc-shadow-md", "--hc-toast-duration", "--hc-toast-error-bg", "--hc-toast-error-border", "--hc-toast-error-fg", "--hc-toast-gap", "--hc-toast-info-bg", "--hc-toast-info-border", "--hc-toast-info-fg", "--hc-toast-max-width", "--hc-toast-min-width", "--hc-toast-padding-x", "--hc-toast-padding-y", "--hc-toast-radius", "--hc-toast-region-gap", "--hc-toast-region-inset", "--hc-toast-success-bg", "--hc-toast-success-border", "--hc-toast-success-fg", "--hc-toast-warning-bg", "--hc-toast-warning-border", "--hc-toast-warning-fg" ], "containers": [], "staticSafe": true, "tokensGroup": "toast", "behavior": "installToast", "docsPath": "components/toast" }, { "block": "hc-toc", "parts": [ "link", "list" ], "dataAttributes": [ "data-active" ], "attributeValues": {}, "cssVars": [ "--hc-color-focus-ring", "--hc-toc-active-fg", "--hc-toc-active-font-weight", "--hc-toc-active-marker", "--hc-toc-font-size", "--hc-toc-gap", "--hc-toc-indent", "--hc-toc-link-fg", "--hc-toc-link-hover-fg" ], "containers": [], "staticSafe": true, "tokensGroup": "toc", "behavior": "installSpy", "docsPath": "components/toc" }, { "block": "hc-toggle-group", "parts": [], "dataAttributes": [ "data-size" ], "attributeValues": { "data-size": [ "lg", "sm" ] }, "cssVars": [ "--hc-color-focus-ring", "--hc-toggle-bg", "--hc-toggle-border", "--hc-toggle-disabled-bg", "--hc-toggle-disabled-fg", "--hc-toggle-fg", "--hc-toggle-font-size", "--hc-toggle-font-weight", "--hc-toggle-height", "--hc-toggle-hover-bg", "--hc-toggle-hover-fg", "--hc-toggle-lg-font-size", "--hc-toggle-lg-height", "--hc-toggle-lg-padding-x", "--hc-toggle-on-bg", "--hc-toggle-on-border", "--hc-toggle-on-fg", "--hc-toggle-padding-x", "--hc-toggle-radius", "--hc-toggle-sm-font-size", "--hc-toggle-sm-height", "--hc-toggle-sm-padding-x" ], "containers": [], "staticSafe": true, "tokensGroup": null, "behavior": "installToggleGroup", "docsPath": "components/toggle-group" }, { "block": "hc-toolbar", "parts": [], "dataAttributes": [ "data-hc-spacer" ], "attributeValues": { "data-hc-spacer": [ "true" ] }, "cssVars": [ "--hc-toolbar-bg", "--hc-toolbar-border", "--hc-toolbar-gap", "--hc-toolbar-padding-x", "--hc-toolbar-padding-y", "--hc-toolbar-radius", "--hc-toolbar-separator" ], "containers": [], "staticSafe": true, "tokensGroup": "toolbar", "behavior": "installToolbar", "docsPath": "components/toolbar" }, { "block": "hc-tooltip", "parts": [], "dataAttributes": [], "attributeValues": {}, "cssVars": [ "--hc-tooltip-bg", "--hc-tooltip-fg", "--hc-tooltip-font-size", "--hc-tooltip-max-width", "--hc-tooltip-offset", "--hc-tooltip-padding-x", "--hc-tooltip-padding-y", "--hc-tooltip-radius" ], "containers": [], "staticSafe": true, "tokensGroup": "tooltip", "behavior": "installTooltip", "docsPath": "components/tooltip" }, { "block": "hc-transfer", "parts": [ "arrow", "controls", "count", "list", "pane", "title" ], "dataAttributes": [], "attributeValues": {}, "cssVars": [ "--hc-transfer-controls-gap", "--hc-transfer-count-fg", "--hc-transfer-gap", "--hc-transfer-list-max-height", "--hc-transfer-list-padding", "--hc-transfer-pane-bg", "--hc-transfer-pane-border", "--hc-transfer-pane-radius", "--hc-transfer-title-font-weight", "--hc-transfer-title-padding-x", "--hc-transfer-title-padding-y" ], "containers": [], "staticSafe": true, "tokensGroup": "transfer", "behavior": null, "docsPath": "components/transfer" }, { "block": "hc-tree", "parts": [ "group", "item", "label", "row", "toggle" ], "dataAttributes": [ "data-size" ], "attributeValues": { "data-size": [ "sm" ] }, "cssVars": [ "--hc-color-focus-ring", "--hc-font-size-sm", "--hc-space-1", "--hc-tree-current-bg", "--hc-tree-current-fg", "--hc-tree-fg", "--hc-tree-guide", "--hc-tree-hover-bg", "--hc-tree-indent", "--hc-tree-row-padding-x", "--hc-tree-row-padding-y", "--hc-tree-row-radius", "--hc-tree-toggle-size" ], "containers": [], "staticSafe": true, "tokensGroup": "tree", "behavior": "installTree", "docsPath": "components/tree" } ], "utilities": [ { "class": "hc-cluster", "container": true }, { "class": "hc-container", "container": true }, { "class": "hc-fill", "container": false }, { "class": "hc-grid", "container": true }, { "class": "hc-hidden", "container": false }, { "class": "hc-icon", "container": false }, { "class": "hc-numeric", "container": false }, { "class": "hc-sidebar", "container": true }, { "class": "hc-spacer", "container": false }, { "class": "hc-sr-only", "container": false }, { "class": "hc-stack", "container": true }, { "class": "hc-status", "container": false } ], "behaviors": [ { "name": "installAvatar", "autoInit": true }, { "name": "installCalendar", "autoInit": true }, { "name": "installCarousel", "autoInit": true }, { "name": "installChart", "autoInit": false }, { "name": "installChatScroll", "autoInit": true }, { "name": "installCloseDialog", "autoInit": true }, { "name": "installClosePopover", "autoInit": true }, { "name": "installCodeEditor", "autoInit": true }, { "name": "installCombobox", "autoInit": true }, { "name": "installCommand", "autoInit": true }, { "name": "installConfirm", "autoInit": true }, { "name": "installContextMenu", "autoInit": true }, { "name": "installCopy", "autoInit": true }, { "name": "installCsrfHeader", "autoInit": true }, { "name": "installDatagrid", "autoInit": true }, { "name": "installDatagridActions", "autoInit": true }, { "name": "installDirtyGuard", "autoInit": true }, { "name": "installDrawer", "autoInit": true }, { "name": "installDropzone", "autoInit": true }, { "name": "installFieldErrors", "autoInit": true }, { "name": "installFormat", "autoInit": true }, { "name": "installHovercard", "autoInit": true }, { "name": "installInputOtp", "autoInit": true }, { "name": "installMask", "autoInit": true }, { "name": "installMenu", "autoInit": true }, { "name": "installMenubar", "autoInit": true }, { "name": "installMultiValue", "autoInit": true }, { "name": "installMulticombobox", "autoInit": true }, { "name": "installNavCurrent", "autoInit": true }, { "name": "installNavmenu", "autoInit": true }, { "name": "installNetworkRetry", "autoInit": true }, { "name": "installNormalize", "autoInit": true }, { "name": "installPasswordToggle", "autoInit": true }, { "name": "installPopover", "autoInit": true }, { "name": "installRange", "autoInit": true }, { "name": "installRangeValue", "autoInit": true }, { "name": "installRemoteDialog", "autoInit": true }, { "name": "installRowLink", "autoInit": true }, { "name": "installSessionExpiry", "autoInit": true }, { "name": "installShell", "autoInit": true }, { "name": "installShowWhen", "autoInit": true }, { "name": "installSlider", "autoInit": true }, { "name": "installSortList", "autoInit": true }, { "name": "installSortable", "autoInit": true }, { "name": "installSparkline", "autoInit": true }, { "name": "installSplitter", "autoInit": true }, { "name": "installSpy", "autoInit": true }, { "name": "installSseDispatch", "autoInit": true }, { "name": "installTabs", "autoInit": true }, { "name": "installThemeToggle", "autoInit": true }, { "name": "installTime", "autoInit": true }, { "name": "installToast", "autoInit": true }, { "name": "installToggleGroup", "autoInit": true }, { "name": "installToolbar", "autoInit": true }, { "name": "installTooltip", "autoInit": true }, { "name": "installTree", "autoInit": true }, { "name": "installUploadProgress", "autoInit": true }, { "name": "installValidation", "autoInit": true } ], "events": [ { "name": "hc:avatarstatechange", "modules": [ "avatar" ] }, { "name": "hc:calendarchange", "modules": [ "calendar" ] }, { "name": "hc:calendarrangechange", "modules": [ "calendar" ] }, { "name": "hc:carouselchange", "modules": [ "carousel" ] }, { "name": "hc:comboboxselect", "modules": [ "combobox", "datagrid" ] }, { "name": "hc:commandselect", "modules": [ "command" ] }, { "name": "hc:confirmed", "modules": [ "confirm" ] }, { "name": "hc:copied", "modules": [ "copy" ] }, { "name": "hc:datagridcollapse", "modules": [ "datagrid" ] }, { "name": "hc:datagridcolumnresize", "modules": [ "datagrid" ] }, { "name": "hc:datagridcopy", "modules": [ "datagrid" ] }, { "name": "hc:datagriddetailload", "modules": [ "datagrid" ] }, { "name": "hc:datagridedit", "modules": [ "datagrid" ] }, { "name": "hc:datagridexpand", "modules": [ "datagrid" ] }, { "name": "hc:datagridgrouptoggle", "modules": [ "datagrid" ] }, { "name": "hc:datagridselectionchange", "modules": [ "datagrid", "datagrid-actions" ] }, { "name": "hc:datagridsort", "modules": [ "datagrid" ] }, { "name": "hc:datagridtreeload", "modules": [ "datagrid" ] }, { "name": "hc:datagridtreetoggle", "modules": [ "datagrid" ] }, { "name": "hc:dirtychange", "modules": [ "dirty-guard" ] }, { "name": "hc:menuselect", "modules": [ "menu-core" ] }, { "name": "hc:multicomboboxchange", "modules": [ "multicombobox" ] }, { "name": "hc:otpchange", "modules": [ "inputotp" ] }, { "name": "hc:otpcomplete", "modules": [ "inputotp" ] }, { "name": "hc:rangechange", "modules": [ "range" ] }, { "name": "hc:sessionrenewed", "modules": [ "session-expiry" ] }, { "name": "hc:sortchange", "modules": [ "sortable" ] }, { "name": "hc:splitterchange", "modules": [ "splitter" ] }, { "name": "hc:tabactivated", "modules": [ "tabs" ] }, { "name": "hc:themechange", "modules": [ "theme-toggle" ] }, { "name": "hc:toast", "modules": [ "toast" ] }, { "name": "hc:togglegroupchange", "modules": [ "toggle-group" ] }, { "name": "hc:treeexpand", "modules": [ "tree" ] } ], "recipes": [ { "name": "async-job", "purpose": "run work that outlives a request — CSV exports, PDF rendering, batch imports — behind one polling contract: 202 + a job card that polls itself until a terminal state.", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/async-job", "contractPath": "recipes/async-job/contract.md" }, { "name": "autosave", "purpose": "debounced draft autosave for long forms — a request-owning div posts the whole form as a draft while the user types, and a restore banner offers the draft back after a crash or navigation; zero new JavaScript.", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/autosave", "contractPath": "recipes/autosave/contract.md" }, { "name": "cascading-select", "purpose": "hierarchical selection (country → prefecture → city, category", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/cascading-select", "contractPath": "recipes/cascading-select/contract.md" }, { "name": "chart", "purpose": "render a chart from a server-sent **semantic data table**. The", "needsBehavior": "installChart", "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/chart", "contractPath": "recipes/chart/contract.md" }, { "name": "chat-messages", "purpose": "chat as a server round trip — the transcript is server-rendered history, the composer is a plain form, and one POST appends both the user's message and the assistant's aria-busy placeholder that streaming-response later fills.", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/chat-messages", "contractPath": "recipes/chat-messages/contract.md" }, { "name": "conditional-fields", "purpose": "hide the fields the chosen mode does not read, declaratively —", "needsBehavior": "installShowWhen", "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/conditional-fields", "contractPath": "recipes/conditional-fields/contract.md" }, { "name": "confirm-action", "purpose": "confirm with the user before sending an htmx request or", "needsBehavior": "installConfirm", "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/confirm-action", "contractPath": "recipes/confirm-action/contract.md" }, { "name": "copy", "purpose": "copy a read-only value (share URL, token, generated snippet) to the clipboard.", "needsBehavior": "installCopy", "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/copy", "contractPath": "recipes/copy/contract.md" }, { "name": "csv-import", "purpose": "bulk CSV in, two phases with no surprises — upload parses and validates without importing, the response is a validation report (summary + real error table + tokened confirm form), and committing the token executes exactly what was validated.", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/csv-import", "contractPath": "recipes/csv-import/contract.md" }, { "name": "data-region", "purpose": "a named region the server can re-render on demand. Other parts of the page invalidate it by dispatching a domain event.", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/data-region", "contractPath": "recipes/data-region/contract.md" }, { "name": "datagrid-bulk-actions", "purpose": "run one action against many datagrid rows at once — select with", "needsBehavior": "installDatagridActions", "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/datagrid-bulk-actions", "contractPath": "recipes/datagrid-bulk-actions/contract.md" }, { "name": "datagrid-bulk-errors", "purpose": "bulk-action failures at scale. Makes the **execution semantics** explicit (best-effort vs atomic), reports failures **grouped by reason** instead of by toast, and links every named row back to the grid.", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/datagrid-bulk-errors", "contractPath": "recipes/datagrid-bulk-errors/contract.md" }, { "name": "datagrid-columns", "purpose": "a column chooser for hc-datagrid — a popover form of `cols=` checkboxes GETs the grid URL, and the server re-renders the grid with exactly those columns and the chooser with matching checked states.", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/datagrid-columns", "contractPath": "recipes/datagrid-columns/contract.md" }, { "name": "datagrid-edit-conflict", "purpose": "the 409 wire for datagrid inline editing — optimistic locking per row. A stale version re-renders the record as a conflict presentation (theirs in the cells, yours in the message, overwrite/discard actions); the row is the merge UI.", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/datagrid-edit-conflict", "contractPath": "recipes/datagrid-edit-conflict/contract.md" }, { "name": "datagrid-edit-errors", "purpose": "the 422 wire for datagrid inline editing — the optimistic commit's feedback loop. Each row is its own record `` (the swap unit), so a rejection re-renders row + error message atomically and the next success removes the error just as atomically.", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/datagrid-edit-errors", "contractPath": "recipes/datagrid-edit-errors/contract.md" }, { "name": "datagrid-filter", "purpose": "per-column filter entry for hc-datagrid — a filter-popover off a header cell's filter button GETs the grid URL with namespaced `f-` params, and the server re-renders the grid filtered, the trigger marked `data-filtered`, and the form's checked states matching.", "needsBehavior": "installMultiValue", "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/datagrid-filter", "contractPath": "recipes/datagrid-filter/contract.md" }, { "name": "datagrid-infinite", "purpose": "revealed-sentinel cursor paging for feeds and long lists — the tbody's last row fetches the next batch when scrolled into view and replaces itself with the rows plus the next sentinel, or the end-of-list marker.", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/datagrid-infinite", "contractPath": "recipes/datagrid-infinite/contract.md" }, { "name": "datagrid-pager", "purpose": "paginate an `hc-datagrid` from the server with htmx. The grid is", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/datagrid-pager", "contractPath": "recipes/datagrid-pager/contract.md" }, { "name": "datagrid-prefs", "purpose": "per-user column preferences (widths, order) persisted the hypermedia way — the behavior mirrors resize commits into hidden inputs, htmx autosaves them, and the server renders the remembered state back on later loads.", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/datagrid-prefs", "contractPath": "recipes/datagrid-prefs/contract.md" }, { "name": "datagrid-snapshot-pager", "purpose": "freeze a work queue's membership at search time — the form carries every hit's row key, paging re-fetches those rows in that order, and processed rows stay visible as processed instead of shifting page boundaries under the user.", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/datagrid-snapshot-pager", "contractPath": "recipes/datagrid-snapshot-pager/contract.md" }, { "name": "datagrid-sort", "purpose": "the sort set as a control — a toolbar button that says what the current sort *is* and opens an ordered, reorderable list of keys (including keys on columns that are not on screen). Header clicks stay the fast path; the wire is unchanged (`?sort=-ship,order`), so a saved view captures the sort like any other condition.", "needsBehavior": "installSortList", "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/datagrid-sort", "contractPath": "recipes/datagrid-sort/contract.md" }, { "name": "datagrid-tree", "purpose": "hierarchy as lazy hypermedia inside hc-datagrid — rows carry `aria-level`, an expandable row fires `hc:datagridtreeload` once on first expand, and the server answers the child `` batch inserted right after it (`afterend`).", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/datagrid-tree", "contractPath": "recipes/datagrid-tree/contract.md" }, { "name": "edit-conflict", "purpose": "optimistic locking for edit forms — a hidden version rides every save, a stale save answers 409 with a conflict dialog offering overwrite / reload, and no custom JavaScript is involved.", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/edit-conflict", "contractPath": "recipes/edit-conflict/contract.md" }, { "name": "field-errors", "purpose": "render server-side validation errors next to the form fields", "needsBehavior": "installFieldErrors", "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/field-errors", "contractPath": "recipes/field-errors/contract.md" }, { "name": "file-upload", "purpose": "multipart file upload with a live progress bar — htmx owns the", "needsBehavior": "installUploadProgress", "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/file-upload", "contractPath": "recipes/file-upload/contract.md" }, { "name": "filter-popover", "purpose": "a popover that holds a filter form. Submitting the form sends an htmx request and closes the popover.", "needsBehavior": "installClosePopover", "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/filter-popover", "contractPath": "recipes/filter-popover/contract.md" }, { "name": "idempotency-key", "purpose": "server-side duplicate-submit defence — every rendered form carries a one-time key, and the server answers a replayed key with the original response, never with an error.", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/idempotency-key", "contractPath": "recipes/idempotency-key/contract.md" }, { "name": "inline-edit", "purpose": "toggle a cell between a display rendering and an editable", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/inline-edit", "contractPath": "recipes/inline-edit/contract.md" }, { "name": "lazy-panel", "purpose": "defer a region's content fetch until the user actually", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/lazy-panel", "contractPath": "recipes/lazy-panel/contract.md" }, { "name": "lazy-tree", "purpose": "a tree whose deep branches are not rendered up front. A lazy", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/lazy-tree", "contractPath": "recipes/lazy-tree/contract.md" }, { "name": "line-items", "purpose": "edit an order/quote/invoice detail table — N rows in one form — where the server owns all arithmetic and every structural change (add, remove, recalculate) is the same whole-form round trip.", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/line-items", "contractPath": "recipes/line-items/contract.md" }, { "name": "live-search", "purpose": "send a search request as the user types and swap the results.", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/live-search", "contractPath": "recipes/live-search/contract.md" }, { "name": "multi-step-form", "purpose": "the hypermedia wizard — the server owns the current step and a", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/multi-step-form", "contractPath": "recipes/multi-step-form/contract.md" }, { "name": "mutating-form", "purpose": "the canonical composition for a form that mutates server state", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/mutating-form", "contractPath": "recipes/mutating-form/contract.md" }, { "name": "network-retry", "purpose": "surface the request that got no answer at all — offline, a dropped socket, a declared timeout — with a working Retry. This is the one error with no server response to narrate with, so unusually for a recipe, the contract here is a *client* contract.", "needsBehavior": "installNetworkRetry", "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/network-retry", "contractPath": "recipes/network-retry/contract.md" }, { "name": "postal-address", "purpose": "postal-code → address autofill — a masked postal input triggers one lookup GET; the server fills the address inputs out of band and reports through a polite hint slot.", "needsBehavior": "installMask", "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/postal-address", "contractPath": "recipes/postal-address/contract.md" }, { "name": "reference-lookup", "purpose": "the master-reference field (customer, item, cost centre): direct code entry for users who know the code, a search dialog for those who don't, and one truth for what the field holds — a hidden id plus a visible code.", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/reference-lookup", "contractPath": "recipes/reference-lookup/contract.md" }, { "name": "remote-dialog", "purpose": "open a dialog whose contents are fetched from the server.", "needsBehavior": "installRemoteDialog", "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/remote-dialog", "contractPath": "recipes/remote-dialog/contract.md" }, { "name": "request-action", "purpose": "trigger a server request from a button and swap the response into a target.", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/request-action", "contractPath": "recipes/request-action/contract.md" }, { "name": "result-cap", "purpose": "bound what one search may return — cap+1 detection, \"cap+\" counts, and a persistent truncation banner (or a hard reject) instead of an unbounded result set.", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/result-cap", "contractPath": "recipes/result-cap/contract.md" }, { "name": "row-detail", "purpose": "open the record a row is about, work on it, and come back to the same list — with the same conditions, the same sort, the same page, and the row you left from still under the cursor.", "needsBehavior": "installRowLink", "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/row-detail", "contractPath": "recipes/row-detail/contract.md" }, { "name": "saved-views", "purpose": "named filter sets — the current search's querystring saved under a name; save/delete re-render the server-owned views strip, applying is a plain GET link, and the server fills the filter controls so a view is never opaque.", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/saved-views", "contractPath": "recipes/saved-views/contract.md" }, { "name": "session-expiry", "purpose": "session expiry without lost work — a 401 turns any interrupted action into a login dialog, and signing in replays the interrupted request through installSessionExpiry.", "needsBehavior": "installSessionExpiry", "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/session-expiry", "contractPath": "recipes/session-expiry/contract.md" }, { "name": "sortable", "purpose": "reorder a server-owned list with pointer or keyboard, persisting the new order in one htmx request — the behavior only moves DOM nodes.", "needsBehavior": "installSortable", "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/sortable", "contractPath": "recipes/sortable/contract.md" }, { "name": "sse-toast", "purpose": "server-pushed notifications (and other page events) over", "needsBehavior": "installSseDispatch", "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/sse-toast", "contractPath": "recipes/sse-toast/contract.md" }, { "name": "sse-updates", "purpose": "server-pushed fragment updates over Server-Sent Events — a", "needsBehavior": "installSseDispatch", "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/sse-updates", "contractPath": "recipes/sse-updates/contract.md" }, { "name": "streaming-response", "purpose": "the SSE reply contract — the assistant placeholder appended by chat-messages owns its own stream connection; chunk events append server-rendered HTML into its body while aria-busy defers the announcement, and done/error swap the complete final message over it.", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/streaming-response", "contractPath": "recipes/streaming-response/contract.md" }, { "name": "toast", "purpose": "surface a short, time-limited notification triggered by the server", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/toast", "contractPath": "recipes/toast/contract.md" }, { "name": "transfer", "purpose": "a dual listbox (assign / unassign members, permissions,", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/transfer", "contractPath": "recipes/transfer/contract.md" }, { "name": "undo-delete", "purpose": "undo instead of confirm — delete executes immediately, the", "needsBehavior": "installConfirm", "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/undo-delete", "contractPath": "recipes/undo-delete/contract.md" }, { "name": "unread-badge", "purpose": "the notification count in app chrome — server-owned, poll-freshened, corrected out-of-band by the user's own actions, and honest at zero.", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/unread-badge", "contractPath": "recipes/unread-badge/contract.md" }, { "name": "unsaved-changes", "purpose": "an unsaved-changes guard for forms — data-dirty state + hc:dirtychange, a tab-close prompt, a boosted-navigation confirm, and clean-on-save, with zero wiring beyond one attribute.", "needsBehavior": "installDirtyGuard", "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/unsaved-changes", "contractPath": "recipes/unsaved-changes/contract.md" }, { "name": "workflow-actions", "purpose": "drive a record's lifecycle (draft → submitted → approved / returned / withdrawn) from a server-rendered actions region — the action set IS the state, transitions collide loudly, and the stepper is the same truth in picture form.", "needsBehavior": null, "files": [ "recipe.html", "expanded.html", "contract.md", "checks.json" ], "docsPath": "recipes/workflow-actions", "contractPath": "recipes/workflow-actions/contract.md" } ], "macros": [ { "tag": "hc-confirm-action", "attributes": [ "action", "cancel-label", "confirm-label", "disabled-elt", "indicator", "message", "method", "swap", "target", "title", "variant" ] }, { "tag": "hc-live-search", "attributes": [ "action", "aria-label", "delay", "input-id", "label", "name", "placeholder", "submit-label", "swap", "target" ] } ], "i18nKeys": [ "calendar.label", "calendar.month", "calendar.nextMonth", "calendar.prevMonth", "calendar.year", "combobox.create", "combobox.empty", "combobox.error", "combobox.loading", "confirm.cancel", "confirm.confirm", "confirm.message", "confirm.title", "copy.ok", "datagrid.selected", "dirtyguard.leave", "fieldErrors.unknown", "multicombobox.create", "multicombobox.empty", "multicombobox.remove", "networkRetry.failed", "networkRetry.retry", "shell.collapseNav", "shell.toggleNav", "sortable.cancel", "sortable.dropped", "sortable.grabbed", "sortable.handle", "sortable.moved", "splitter.resize", "themeToggle.label", "toast.dismiss", "toast.label" ], "exports": [ ".", "./a11y.css", "./behaviors", "./behaviors/min", "./css", "./css/*", "./css/core", "./css/core/min", "./css/min", "./css/print", "./css/utilities", "./custom-elements.json", "./email-artifacts/*", "./email-transform", "./email/*", "./htmx.css", "./i18n", "./locales/*", "./macros", "./macros/min", "./manifest.json", "./min", "./oklch", "./theme.css", "./token-transform", "./tokens.*.css", "./tokens.css", "./tokens/*" ] }