{"version": "0.1.0a1", "stack": "Django / HTMX / Alpine", "components": [{"name": "Button", "slug": "button", "category": "Action", "status": "done", "reference": "https://kumo-ui.com/components/button/", "props": [{"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "variant", "type": "string", "default": "secondary", "description": "Variant; pass the documented value shown in the examples."}, {"name": "size", "type": "string", "default": "base", "description": "Size; pass the documented value shown in the examples."}, {"name": "shape", "type": "string", "default": "unset", "description": "Shape; pass the documented value shown in the examples."}, {"name": "type", "type": "string", "default": "button", "description": "Type; pass the documented value shown in the examples."}, {"name": "href", "type": "string", "default": "unset", "description": "Href; pass the documented value shown in the examples."}, {"name": "icon", "type": "string", "default": "unset", "description": "Icon; pass the documented value shown in the examples."}, {"name": "icon_after", "type": "string", "default": "unset", "description": "Icon after; pass the documented value shown in the examples."}, {"name": "loading", "type": "bool", "default": "False", "description": "Loading; pass the documented value shown in the examples."}, {"name": "disabled", "type": "bool", "default": "False", "description": "Disabled; pass the documented value shown in the examples."}, {"name": "name", "type": "string", "default": "unset", "description": "Name; pass the documented value shown in the examples."}, {"name": "value", "type": "string", "default": "unset", "description": "Value; pass the documented value shown in the examples."}, {"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "title", "type": "string", "default": "unset", "description": "Title; pass the documented value shown in the examples."}, {"name": "aria_label", "type": "string", "default": "unset", "description": "Aria label; pass the documented value shown in the examples."}, {"name": "aria_pressed", "type": "string", "default": "unset", "description": "Aria pressed; pass the documented value shown in the examples."}, {"name": "aria_expanded", "type": "string", "default": "unset", "description": "Aria expanded; pass the documented value shown in the examples."}, {"name": "aria_controls", "type": "string", "default": "unset", "description": "Aria controls; pass the documented value shown in the examples."}, {"name": "aria_haspopup", "type": "string", "default": "unset", "description": "Aria haspopup; pass the documented value shown in the examples."}, {"name": "hx_get", "type": "string", "default": "unset", "description": "Hx get; pass the documented value shown in the examples."}, {"name": "hx_post", "type": "string", "default": "unset", "description": "Hx post; pass the documented value shown in the examples."}, {"name": "hx_target", "type": "string", "default": "unset", "description": "Hx target; pass the documented value shown in the examples."}, {"name": "hx_swap", "type": "string", "default": "unset", "description": "Hx swap; pass the documented value shown in the examples."}, {"name": "hx_indicator", "type": "string", "default": "unset", "description": "Hx indicator; pass the documented value shown in the examples."}, {"name": "hx_confirm", "type": "string", "default": "unset", "description": "Hx confirm; pass the documented value shown in the examples."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Overview", "template": "button_overview"}, {"title": "Primary", "template": "button_primary", "section": "Variants"}, {"title": "Secondary", "template": "button_secondary", "section": "Variants"}, {"title": "Ghost", "template": "button_ghost", "section": "Variants"}, {"title": "Destructive", "template": "button_destructive", "section": "Variants"}, {"title": "Secondary destructive", "template": "button_secondary_destructive", "section": "Variants"}, {"title": "Outline", "template": "button_outline", "section": "Variants"}, {"title": "Sizes", "template": "button_sizes", "section": "Layout"}, {"title": "Leading icon", "template": "button_leading_icon", "section": "Layout"}, {"title": "Trailing icon", "template": "button_trailing_icon", "section": "Layout"}, {"title": "Shapes", "template": "button_shapes", "section": "Layout"}, {"title": "Loading", "template": "button_loading", "section": "States"}, {"title": "Disabled", "template": "button_disabled", "section": "States"}, {"title": "Interactive", "template": "button_interactive", "section": "States"}, {"title": "Title", "template": "button_title", "section": "States"}, {"title": "Links", "template": "button_links", "section": "Navigation"}, {"title": "Disabled link", "template": "button_disabled_link", "section": "Navigation"}, {"title": "Link with tooltip", "template": "audit_button_link_with_tooltip", "wide": true, "description": ""}]}, {"name": "Link", "slug": "link", "category": "Action", "status": "done", "reference": "https://kumo-ui.com/components/link/", "props": [{"name": "href", "type": "string", "default": "unset", "description": "Href; pass the documented value shown in the examples."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "variant", "type": "string", "default": "component-specific", "description": "Variant; pass the documented value shown in the examples."}, {"name": "external", "type": "string", "default": "unset", "description": "External; pass the documented value shown in the examples."}, {"name": "icon", "type": "string", "default": "unset", "description": "Icon; pass the documented value shown in the examples."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}], "examples": [{"title": "Inline", "template": "link_inline"}, {"title": "Current color", "template": "link_current_color"}, {"title": "Plain", "template": "link_plain"}, {"title": "External", "template": "link_external"}, {"title": "In text", "template": "link_in_text"}]}, {"name": "Input", "slug": "input", "category": "Input", "status": "done", "reference": "https://kumo-ui.com/components/input/", "props": [{"name": "name", "type": "string", "default": "unset", "description": "Name; pass the documented value shown in the examples."}, {"name": "value", "type": "string", "default": "unset", "description": "Value; pass the documented value shown in the examples."}, {"name": "type", "type": "string", "default": "text", "description": "Type; pass the documented value shown in the examples."}, {"name": "size", "type": "string", "default": "base", "description": "Size; pass the documented value shown in the examples."}, {"name": "variant", "type": "string", "default": "component-specific", "description": "Variant; pass the documented value shown in the examples."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "optional", "type": "bool", "default": "False", "description": "Optional; pass the documented value shown in the examples."}, {"name": "label_tooltip", "type": "string", "default": "unset", "description": "Label tooltip; pass the documented value shown in the examples."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "error", "type": "string", "default": "unset", "description": "Validation message; implies error styling and accessible error association."}, {"name": "required", "type": "bool", "default": "False", "description": "Required; pass the documented value shown in the examples."}, {"name": "disabled", "type": "bool", "default": "False", "description": "Disabled; pass the documented value shown in the examples."}, {"name": "readonly", "type": "bool", "default": "False", "description": "Readonly; pass the documented value shown in the examples."}, {"name": "placeholder", "type": "string", "default": "unset", "description": "Placeholder; pass the documented value shown in the examples."}, {"name": "autocomplete", "type": "string", "default": "unset", "description": "Autocomplete; pass the documented value shown in the examples."}, {"name": "inputmode", "type": "string", "default": "unset", "description": "Inputmode; pass the documented value shown in the examples."}, {"name": "pattern", "type": "string", "default": "unset", "description": "Pattern; pass the documented value shown in the examples."}, {"name": "min", "type": "number", "default": "0 (Slider/Meter)", "description": "Min; pass the documented value shown in the examples."}, {"name": "max", "type": "number", "default": "100 (Slider/Meter)", "description": "Max; pass the documented value shown in the examples."}, {"name": "step", "type": "number", "default": "1 (Slider)", "description": "Step; pass the documented value shown in the examples."}, {"name": "maxlength", "type": "string", "default": "unset", "description": "Maxlength; pass the documented value shown in the examples."}, {"name": "clearable", "type": "bool", "default": "False", "description": "Clearable; pass the documented value shown in the examples."}, {"name": "leading_icon", "type": "string", "default": "unset", "description": "Leading icon; pass the documented value shown in the examples."}, {"name": "trailing_icon", "type": "string", "default": "unset", "description": "Trailing icon; pass the documented value shown in the examples."}, {"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "field_class", "type": "string", "default": "unset", "description": "Field class; pass the documented value shown in the examples."}], "examples": [{"title": "Basic", "template": "input_basic", "wide": true}, {"title": "Label", "template": "input_label", "wide": true}, {"title": "Description", "template": "input_description", "wide": true}, {"title": "Required", "template": "input_required", "wide": true}, {"title": "Disabled", "template": "input_disabled", "wide": true}, {"title": "Read only", "template": "input_read_only", "wide": true}, {"title": "Error", "template": "input_error", "wide": true}, {"title": "Leading icon", "template": "input_leading_icon", "wide": true}, {"title": "Trailing icon", "template": "input_trailing_icon", "wide": true}, {"title": "Password", "template": "input_password", "wide": true}, {"title": "Number", "template": "input_number", "wide": true}, {"title": "Clearable", "template": "input_clearable", "wide": true}, {"title": "Small", "template": "input_small", "wide": true}, {"title": "Large", "template": "input_large", "wide": true}, {"title": "Extra small", "template": "input_extra_small", "wide": true}, {"title": "Optional field", "template": "audit_input_optional_field", "wide": true, "description": ""}, {"title": "Label tooltip", "template": "audit_input_label_tooltip", "wide": true, "description": ""}, {"title": "Bare error field", "template": "audit_input_bare_error_field", "wide": true, "description": ""}, {"title": "Password manager isolation", "template": "audit_input_password_manager_isolation", "wide": true, "description": ""}, {"title": "Controlled local input", "template": "audit_input_controlled_local_input", "wide": true, "description": ""}]}, {"name": "InputArea", "slug": "textarea", "category": "Input", "status": "done", "reference": "https://kumo-ui.com/components/input-area/", "props": [{"name": "name", "type": "string", "default": "unset", "description": "Name; pass the documented value shown in the examples."}, {"name": "value", "type": "string", "default": "unset", "description": "Value; pass the documented value shown in the examples."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "optional", "type": "bool", "default": "False", "description": "Optional; pass the documented value shown in the examples."}, {"name": "label_tooltip", "type": "string", "default": "unset", "description": "Label tooltip; pass the documented value shown in the examples."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "error", "type": "string", "default": "unset", "description": "Validation message; implies error styling and accessible error association."}, {"name": "required", "type": "bool", "default": "False", "description": "Required; pass the documented value shown in the examples."}, {"name": "disabled", "type": "bool", "default": "False", "description": "Disabled; pass the documented value shown in the examples."}, {"name": "readonly", "type": "bool", "default": "False", "description": "Readonly; pass the documented value shown in the examples."}, {"name": "rows", "type": "number", "default": "2", "description": "Rows; pass the documented value shown in the examples."}, {"name": "size", "type": "string", "default": "base", "description": "Size; pass the documented value shown in the examples."}, {"name": "placeholder", "type": "string", "default": "unset", "description": "Placeholder; pass the documented value shown in the examples."}, {"name": "maxlength", "type": "string", "default": "unset", "description": "Maxlength; pass the documented value shown in the examples."}, {"name": "auto_resize", "type": "bool", "default": "False", "description": "Auto resize; pass the documented value shown in the examples."}, {"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "field_class", "type": "string", "default": "unset", "description": "Field class; pass the documented value shown in the examples."}], "examples": [{"title": "Basic", "template": "textarea_basic", "wide": true}, {"title": "Description", "template": "textarea_description", "wide": true}, {"title": "Error", "template": "textarea_error", "wide": true}, {"title": "Disabled", "template": "textarea_disabled", "wide": true}, {"title": "Auto resize", "template": "textarea_auto_resize", "wide": true}, {"title": "Custom rows", "template": "audit_textarea_custom_rows", "wide": true, "description": ""}, {"title": "Sizes", "template": "audit_textarea_sizes", "wide": true, "description": ""}, {"title": "Optional field", "template": "audit_textarea_optional_field", "wide": true, "description": ""}, {"title": "Label tooltip", "template": "audit_textarea_label_tooltip", "wide": true, "description": ""}, {"title": "Bare input area", "template": "audit_textarea_bare_input_area", "wide": true, "description": ""}]}, {"name": "Checkbox", "slug": "checkbox", "category": "Input", "status": "done", "reference": "https://kumo-ui.com/components/checkbox/", "props": [{"name": "name", "type": "string", "default": "unset", "description": "Name; pass the documented value shown in the examples."}, {"name": "value", "type": "string", "default": "unset", "description": "Value; pass the documented value shown in the examples."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "checked", "type": "bool", "default": "False", "description": "Checked; pass the documented value shown in the examples."}, {"name": "indeterminate", "type": "bool", "default": "False", "description": "Indeterminate; pass the documented value shown in the examples."}, {"name": "required", "type": "bool", "default": "False", "description": "Required; pass the documented value shown in the examples."}, {"name": "disabled", "type": "bool", "default": "False", "description": "Disabled; pass the documented value shown in the examples."}, {"name": "error", "type": "string", "default": "unset", "description": "Validation message; implies error styling and accessible error association."}, {"name": "variant", "type": "string", "default": "component-specific", "description": "Variant; pass the documented value shown in the examples."}, {"name": "appearance", "type": "string", "default": "unset", "description": "Checkbox: card or default. Radio: default/card/segmented. Badge: filled/dot."}, {"name": "control_first", "type": "string", "default": "unset", "description": "Control first; pass the documented value shown in the examples."}, {"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Basic", "template": "checkbox_basic"}, {"title": "Checked", "template": "checkbox_checked"}, {"title": "Indeterminate", "template": "checkbox_indeterminate"}, {"title": "Disabled", "template": "checkbox_disabled"}, {"title": "Disabled checked", "template": "checkbox_disabled_checked"}, {"title": "Description", "template": "checkbox_description"}, {"title": "Required", "template": "checkbox_required"}, {"title": "Error", "template": "checkbox_error"}, {"title": "Group", "template": "checkbox_group"}, {"title": "Surface", "template": "checkbox_surface"}, {"title": "Label first", "template": "checkbox_label_first", "wide": true}, {"title": "Error variant", "template": "checkbox_error_variant", "wide": true}, {"title": "Hidden legend", "template": "checkbox_hidden_legend", "wide": true}, {"title": "Group with error", "template": "audit_checkbox_group_with_error", "wide": true, "description": ""}, {"title": "Card choices", "template": "audit_checkbox_card_choices", "wide": true, "description": ""}, {"title": "Horizontal card choices", "template": "audit_checkbox_horizontal_card_choices", "wide": true, "description": ""}, {"title": "Styled legend", "template": "audit_checkbox_styled_legend", "wide": true, "description": ""}, {"title": "Custom group legend", "template": "completion_checkbox_custom_group_legend", "wide": true}]}, {"name": "Radio", "slug": "radio", "category": "Input", "status": "done", "reference": "https://kumo-ui.com/components/radio/", "props": [{"name": "name", "type": "string", "default": "unset", "description": "Name; pass the documented value shown in the examples."}, {"name": "options", "type": "list[dict]", "default": "[]", "description": "Select: value/label/display_label/disabled/selected or groups with options. Combobox input: value/label/disabled/group/icon/description; button search also supports Select groups."}, {"name": "selected", "type": "string / number", "default": "unset", "description": "Initial server selection: one value, a list for multiple=True, or selected flags on native options."}, {"name": "legend", "type": "string", "default": "unset", "description": "Legend; pass the documented value shown in the examples."}, {"name": "legend_class", "type": "string", "default": "unset", "description": "Legend class; pass the documented value shown in the examples."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "error", "type": "string", "default": "unset", "description": "Validation message; implies error styling and accessible error association."}, {"name": "variant", "type": "string", "default": "component-specific", "description": "Variant; pass the documented value shown in the examples."}, {"name": "required", "type": "bool", "default": "False", "description": "Required; pass the documented value shown in the examples."}, {"name": "disabled", "type": "bool", "default": "False", "description": "Disabled; pass the documented value shown in the examples."}, {"name": "orientation", "type": "string", "default": "unset", "description": "Orientation; pass the documented value shown in the examples."}, {"name": "appearance", "type": "string", "default": "unset", "description": "Checkbox: card or default. Radio: default/card/segmented. Badge: filled/dot."}, {"name": "control_position", "type": "string", "default": "unset", "description": "Control position; pass the documented value shown in the examples."}, {"name": "hide_legend", "type": "bool", "default": "False", "description": "Hide legend; pass the documented value shown in the examples."}, {"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Vertical", "template": "radio_vertical"}, {"title": "Horizontal", "template": "radio_horizontal", "wide": true}, {"title": "Descriptions", "template": "radio_descriptions", "wide": true}, {"title": "Required", "template": "radio_required", "wide": true}, {"title": "Error", "template": "radio_error", "wide": true}, {"title": "Disabled option", "template": "radio_disabled_option", "wide": true}, {"title": "Segmented", "template": "radio_segmented", "wide": true}, {"title": "Disabled group", "template": "radio_disabled_group", "wide": true}, {"title": "Disabled segmented", "template": "radio_disabled_segmented", "wide": true}, {"title": "Hidden legend", "template": "radio_hidden_legend", "wide": true}, {"title": "Group description", "template": "radio_group_description", "wide": true}, {"title": "Trailing control", "template": "radio_trailing_control", "wide": true}, {"title": "Cards", "template": "radio_cards", "wide": true}, {"title": "Cards with trailing control", "template": "radio_cards_with_trailing_control", "wide": true}, {"title": "Horizontal cards", "template": "radio_horizontal_cards", "wide": true}, {"title": "Numeric values", "template": "radio_numeric_values", "wide": true}, {"title": "Rich labels", "template": "radio_rich_labels", "wide": true}, {"title": "Horizontal segmented", "template": "radio_horizontal_segmented", "wide": true}, {"title": "Controlled state", "template": "radio_controlled_state", "wide": true}, {"title": "Long labels and narrow layouts", "template": "completion_radio_long_labels_and_narrow_layouts", "wide": true}, {"title": "Custom legend styling", "template": "completion_radio_custom_legend_styling", "wide": true}]}, {"name": "Switch", "slug": "switch", "category": "Input", "status": "done", "reference": "https://kumo-ui.com/components/switch/", "props": [{"name": "name", "type": "string", "default": "unset", "description": "Name; pass the documented value shown in the examples."}, {"name": "value", "type": "string", "default": "unset", "description": "Value; pass the documented value shown in the examples."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "checked", "type": "bool", "default": "False", "description": "Checked; pass the documented value shown in the examples."}, {"name": "required", "type": "bool", "default": "False", "description": "Required; pass the documented value shown in the examples."}, {"name": "disabled", "type": "bool", "default": "False", "description": "Disabled; pass the documented value shown in the examples."}, {"name": "error", "type": "string", "default": "unset", "description": "Validation message; implies error styling and accessible error association."}, {"name": "size", "type": "string", "default": "base", "description": "Size; pass the documented value shown in the examples."}, {"name": "variant", "type": "string", "default": "component-specific", "description": "Variant; pass the documented value shown in the examples."}, {"name": "control_first", "type": "string", "default": "unset", "description": "Control first; pass the documented value shown in the examples."}, {"name": "transitioning", "type": "bool", "default": "False", "description": "Transitioning; pass the documented value shown in the examples."}, {"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Default", "template": "switch_default"}, {"title": "Checked", "template": "switch_checked"}, {"title": "Disabled", "template": "switch_disabled"}, {"title": "Disabled checked", "template": "switch_disabled_checked"}, {"title": "Small", "template": "switch_small"}, {"title": "Large", "template": "switch_large"}, {"title": "Label first", "template": "switch_label_first"}, {"title": "Description", "template": "switch_description"}, {"title": "Required", "template": "switch_required"}, {"title": "Error", "template": "switch_error", "wide": true}, {"title": "Pending", "template": "switch_pending", "wide": true}, {"title": "Controlled state", "template": "switch_controlled_state", "wide": true}, {"title": "Neutral variant and states", "template": "audit_switch_neutral_variant_and_states", "wide": true, "description": ""}, {"title": "Switch group", "template": "audit_switch_switch_group", "wide": true, "description": ""}, {"title": "Switch group hidden legend", "template": "audit_switch_switch_group_hidden_legend", "wide": true, "description": ""}, {"title": "Custom group legend", "template": "completion_switch_custom_group_legend", "wide": true}]}, {"name": "Select", "slug": "select", "category": "Input", "status": "partial", "reference": "https://kumo-ui.com/components/select/", "props": [{"name": "mode", "type": "string", "default": "custom", "description": "Select: custom Alpine popup by default; native explicitly requests the platform picker. Tabs has its own local/navigation contract."}, {"name": "name", "type": "string", "default": "unset", "description": "Name; pass the documented value shown in the examples."}, {"name": "options", "type": "list[dict]", "default": "[]", "description": "Select: value/label/display_label/disabled/selected or groups with options. Combobox input: value/label/disabled/group/icon/description; button search also supports Select groups."}, {"name": "selected", "type": "string", "default": "unset", "description": "Initial server selection: one value, a list for multiple=True, or selected flags on native options."}, {"name": "selected_values", "type": "list[dict]", "default": "unset", "description": "Selected values; pass the documented value shown in the examples."}, {"name": "placeholder", "type": "string", "default": "unset", "description": "Placeholder; pass the documented value shown in the examples."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "optional", "type": "bool", "default": "False", "description": "Optional; pass the documented value shown in the examples."}, {"name": "label_tooltip", "type": "string", "default": "unset", "description": "Label tooltip; pass the documented value shown in the examples."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "error", "type": "string", "default": "unset", "description": "Validation message; implies error styling and accessible error association."}, {"name": "required", "type": "bool", "default": "False", "description": "Required; pass the documented value shown in the examples."}, {"name": "disabled", "type": "bool", "default": "False", "description": "Disabled; pass the documented value shown in the examples."}, {"name": "multiple", "type": "bool", "default": "False", "description": "Multiple; pass the documented value shown in the examples."}, {"name": "visible_options", "type": "string", "default": "unset", "description": "Visible options; pass the documented value shown in the examples."}, {"name": "size", "type": "string", "default": "base", "description": "Size; pass the documented value shown in the examples."}, {"name": "variant", "type": "string", "default": "component-specific", "description": "Variant; pass the documented value shown in the examples."}, {"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "field_class", "type": "string", "default": "unset", "description": "Field class; pass the documented value shown in the examples."}, {"name": "side", "type": "string", "default": "bottom", "description": "Side; pass the documented value shown in the examples."}, {"name": "align", "type": "string", "default": "start", "description": "Align; pass the documented value shown in the examples."}, {"name": "side_offset", "type": "string", "default": "unset", "description": "Side offset; pass the documented value shown in the examples."}, {"name": "align_offset", "type": "string", "default": "unset", "description": "Align offset; pass the documented value shown in the examples."}, {"name": "loading", "type": "bool", "default": "False", "description": "Loading; pass the documented value shown in the examples."}, {"name": "align_selected", "type": "bool", "default": "False", "description": "Align selected; pass the documented value shown in the examples."}, {"name": "max_display_items", "type": "string", "default": "unset", "description": "Max display items; pass the documented value shown in the examples."}, {"name": "display_summary", "type": "string", "default": "unset", "description": "Display summary; pass the documented value shown in the examples."}, {"name": "searchable", "type": "bool", "default": "False", "description": "Select: show a search field inside the popup, with case- and accent-insensitive filtering."}, {"name": "search_placeholder", "type": "string", "default": "unset", "description": "Search placeholder; pass the documented value shown in the examples."}, {"name": "empty_message", "type": "string", "default": "unset", "description": "Empty message; pass the documented value shown in the examples."}, {"name": "trigger_variant", "type": "string", "default": "unset", "description": "Searchable button: default control styling or ghost."}], "examples": [{"title": "Basic", "template": "select_basic", "wide": true}, {"title": "Placeholder", "template": "select_placeholder", "wide": true}, {"title": "Label", "template": "select_label", "wide": true}, {"title": "Description", "template": "select_description", "wide": true}, {"title": "Selected value", "template": "select_selected_value", "wide": true}, {"title": "Required", "template": "select_required", "wide": true}, {"title": "Disabled", "template": "select_disabled", "wide": true}, {"title": "Error", "template": "select_error", "wide": true}, {"title": "Groups", "template": "select_groups", "wide": true}, {"title": "Small", "template": "select_small", "wide": true}, {"title": "Large", "template": "select_large", "wide": true}, {"title": "Plain options", "template": "select_plain_options", "wide": true}, {"title": "Native fallback", "template": "select_native", "wide": true}, {"title": "Placement", "template": "select_reference_placement", "wide": true}, {"title": "Custom value rendering", "template": "select_reference_language", "wide": true}, {"title": "Author with rich options", "template": "select_reference_author", "wide": true}, {"title": "Disabled items", "template": "select_reference_disabled", "wide": true}, {"title": "Groups with disabled options", "template": "select_reference_disabled_groups", "wide": true}, {"title": "Loading from server", "template": "select_reference_async", "wide": true}, {"title": "Custom popup", "template": "audit_select_custom_popup", "wide": true, "description": ""}, {"title": "Popup sizes", "template": "audit_select_popup_sizes", "wide": true, "description": ""}, {"title": "Top placement", "template": "audit_select_top_placement", "wide": true, "description": ""}, {"title": "Rich option rendering", "template": "audit_select_rich_option_rendering", "wide": true, "description": ""}, {"title": "Loading popup", "template": "audit_select_loading_popup", "wide": true, "description": ""}, {"title": "Multiple popup choices", "template": "audit_select_multiple_popup_choices", "wide": true, "description": ""}, {"title": "Grouped popup options", "template": "audit_select_grouped_popup_options", "wide": true, "description": ""}, {"title": "Long popup list", "template": "audit_select_long_popup_list", "wide": true, "description": ""}, {"title": "Popup validation and reset", "template": "completion_select_popup_validation_and_reset", "wide": true}, {"title": "Popup error", "template": "completion_select_popup_error", "wide": true}, {"title": "Popup without visible label", "template": "completion_select_popup_without_visible_label", "wide": true}, {"title": "Selected option alignment", "template": "completion_select_selected_option_alignment", "wide": true}, {"title": "Popup label tooltip", "template": "completion_select_label_tooltip", "wide": true}, {"title": "Popup in a clipped container", "template": "recommendation_select_clipped", "wide": true}]}, {"name": "Field", "slug": "field", "category": "Input", "status": "done", "reference": "https://kumo-ui.com/registry/", "props": [{"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "error", "type": "string", "default": "unset", "description": "Validation message; implies error styling and accessible error association."}, {"name": "required", "type": "bool", "default": "False", "description": "Required; pass the documented value shown in the examples."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Default", "template": "field_default", "wide": true}, {"title": "Required", "template": "field_required", "wide": true}, {"title": "Description", "template": "field_description", "wide": true}, {"title": "Tooltip", "template": "field_tooltip", "wide": true}, {"title": "Error", "template": "field_error", "wide": true}]}, {"name": "Label", "slug": "label", "category": "Form", "status": "done", "reference": "https://kumo-ui.com/components/label/", "props": [{"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "for_id", "type": "string", "default": "unset", "description": "For id; pass the documented value shown in the examples."}, {"name": "required", "type": "bool", "default": "False", "description": "Required; pass the documented value shown in the examples."}, {"name": "optional", "type": "bool", "default": "False", "description": "Optional; pass the documented value shown in the examples."}, {"name": "optional_label", "type": "string", "default": "unset", "description": "Optional label; pass the documented value shown in the examples."}, {"name": "required_label", "type": "string", "default": "unset", "description": "Required label; pass the documented value shown in the examples."}, {"name": "label_tooltip", "type": "string", "default": "unset", "description": "Label tooltip; pass the documented value shown in the examples."}, {"name": "tooltip_label", "type": "string", "default": "unset", "description": "Tooltip label; pass the documented value shown in the examples."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Default", "template": "label_default", "wide": true}, {"title": "Required", "template": "label_required", "wide": true}, {"title": "Description", "template": "label_description", "wide": true}, {"title": "Tooltip", "template": "label_tooltip", "wide": true}, {"title": "Error", "template": "label_error", "wide": true}, {"title": "Optional indicator", "template": "audit_label_optional_indicator", "wide": true, "description": ""}, {"title": "Rich label", "template": "audit_label_rich_label", "wide": true, "description": ""}, {"title": "Mixed form fields", "template": "audit_label_mixed_form_fields", "wide": true, "description": ""}]}, {"name": "Badge", "slug": "badge", "category": "Display", "status": "done", "reference": "https://kumo-ui.com/components/badge/", "props": [{"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "variant", "type": "string", "default": "component-specific", "description": "Variant; pass the documented value shown in the examples."}, {"name": "appearance", "type": "string", "default": "unset", "description": "Checkbox: card or default. Radio: default/card/segmented. Badge: filled/dot."}, {"name": "icon", "type": "string", "default": "unset", "description": "Icon; pass the documented value shown in the examples."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Primary", "template": "badge_primary"}, {"title": "Secondary", "template": "badge_secondary"}, {"title": "Success", "template": "badge_success"}, {"title": "Error", "template": "badge_error"}, {"title": "Warning", "template": "badge_warning"}, {"title": "Outline", "template": "badge_outline"}, {"title": "Dot appearance", "template": "badge_dot_appearance"}, {"title": "With icon", "template": "badge_with_icon"}, {"title": "Complete color variants", "template": "audit_badge_complete_color_variants", "wide": true, "description": ""}, {"title": "All dot states", "template": "audit_badge_all_dot_states", "wide": true, "description": ""}, {"title": "In a sentence", "template": "audit_badge_in_a_sentence", "wide": true, "description": ""}, {"title": "Linked badge", "template": "audit_badge_linked_badge", "wide": true, "description": ""}]}, {"name": "Banner", "slug": "banner", "category": "Feedback", "status": "done", "reference": "https://kumo-ui.com/components/banner/", "props": [{"name": "title", "type": "string", "default": "unset", "description": "Title; pass the documented value shown in the examples."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "text", "type": "string", "default": "unset", "description": "Text; pass the documented value shown in the examples."}, {"name": "variant", "type": "string", "default": "component-specific", "description": "Variant; pass the documented value shown in the examples."}, {"name": "size", "type": "string", "default": "base", "description": "Size; pass the documented value shown in the examples."}, {"name": "icon", "type": "string", "default": "unset", "description": "Icon; pass the documented value shown in the examples."}, {"name": "action", "type": "string / HTML slot", "default": "unset", "description": "Action; pass the documented value shown in the examples."}, {"name": "actions", "type": "list[dict]", "default": "unset", "description": "Actions; pass the documented value shown in the examples."}, {"name": "dismissible", "type": "bool", "default": "False", "description": "Dismissible; pass the documented value shown in the examples."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Information", "template": "banner_information", "wide": true}, {"title": "Warning", "template": "banner_warning", "wide": true}, {"title": "Error", "template": "banner_error", "wide": true}, {"title": "Secondary", "template": "banner_secondary", "wide": true}, {"title": "Dismissible", "template": "banner_dismissible", "wide": true}, {"title": "Small", "template": "banner_small", "wide": true}, {"title": "With action", "template": "banner_with_action", "wide": true}, {"title": "Success message", "template": "banner_success_message", "wide": true}, {"title": "Description only", "template": "banner_description_only", "wide": true}, {"title": "Title only", "template": "banner_title_only", "wide": true}, {"title": "With icon", "template": "banner_with_icon", "wide": true}, {"title": "Without dismissal", "template": "banner_without_dismissal", "wide": true}, {"title": "Compact warning", "template": "banner_compact_warning", "wide": true}, {"title": "Compact error", "template": "banner_compact_error", "wide": true}, {"title": "Long content", "template": "banner_long_content", "wide": true}, {"title": "Multiple trailing actions", "template": "audit_banner_multiple_trailing_actions", "wide": true, "description": ""}, {"title": "Compact with CTA", "template": "audit_banner_compact_with_cta", "wide": true, "description": ""}, {"title": "Custom content", "template": "audit_banner_custom_content", "wide": true, "description": ""}]}, {"name": "Surface", "slug": "card", "category": "Layout", "status": "done", "reference": "https://kumo-ui.com/registry/", "props": [{"name": "title", "type": "string", "default": "unset", "description": "Title; pass the documented value shown in the examples."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "padding", "type": "bool", "default": "True", "description": "Padding; pass the documented value shown in the examples."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Simple surface", "template": "card_simple_surface", "wide": true}, {"title": "Header", "template": "card_header", "wide": true}, {"title": "Description", "template": "card_description", "wide": true}]}, {"name": "Separator", "slug": "separator", "category": "Layout", "status": "done", "reference": "https://kumo-ui.com/registry/", "props": [{"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "orientation", "type": "string", "default": "unset", "description": "Orientation; pass the documented value shown in the examples."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Horizontal", "template": "separator_horizontal", "wide": true}, {"title": "Vertical", "template": "separator_vertical", "wide": true}, {"title": "Label", "template": "separator_label", "wide": true}]}, {"name": "Loader", "slug": "loader", "category": "Feedback", "status": "done", "reference": "https://kumo-ui.com/components/loader/", "props": [{"name": "size", "type": "sm | base | lg | positive number", "default": "base", "description": "Size; pass the documented value shown in the examples."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Default", "template": "loader_default"}, {"title": "Small", "template": "loader_small"}, {"title": "Large", "template": "loader_large"}, {"title": "Subtle", "template": "loader_subtle"}]}, {"name": "Skeleton", "slug": "skeleton", "category": "Feedback", "status": "done", "reference": "https://kumo-ui.com/components/skeleton-line/", "props": [{"name": "width", "type": "CSS length", "default": "unset", "description": "Width; pass the documented value shown in the examples."}, {"name": "height", "type": "CSS length", "default": "288 (Chart)", "description": "Height; pass the documented value shown in the examples."}, {"name": "rounded", "type": "string", "default": "unset", "description": "Rounded; pass the documented value shown in the examples."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Text line", "template": "skeleton_text_line", "wide": true}, {"title": "Card placeholder", "template": "skeleton_card_placeholder", "wide": true}, {"title": "Avatar placeholder", "template": "skeleton_avatar_placeholder", "wide": true}, {"title": "Custom widths and height", "template": "audit_skeleton_custom_widths_and_height", "wide": true, "description": ""}, {"title": "Block placeholder", "template": "audit_skeleton_block_placeholder", "wide": true, "description": ""}]}, {"name": "Empty", "slug": "empty", "category": "Display", "status": "done", "reference": "https://kumo-ui.com/components/empty/", "props": [{"name": "title", "type": "string", "default": "unset", "description": "Title; pass the documented value shown in the examples."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "command_line", "type": "string", "default": "unset", "description": "Command line; pass the documented value shown in the examples."}, {"name": "icon", "type": "string", "default": "unset", "description": "Icon; pass the documented value shown in the examples."}, {"name": "icon_size", "type": "number", "default": "unset", "description": "Icon size; pass the documented value shown in the examples."}, {"name": "hide_icon", "type": "bool", "default": "False", "description": "Hide icon; pass the documented value shown in the examples."}, {"name": "action", "type": "string / HTML slot", "default": "unset", "description": "Action; pass the documented value shown in the examples."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "size", "type": "string", "default": "base", "description": "Size; pass the documented value shown in the examples."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "No resources", "template": "empty_no_resources", "wide": true}, {"title": "Small", "template": "empty_small", "wide": true}, {"title": "With command", "template": "empty_with_command", "wide": true}, {"title": "With action", "template": "empty_with_action", "wide": true}, {"title": "Sizes", "template": "audit_empty_sizes", "wide": true, "description": ""}, {"title": "Minimal state", "template": "audit_empty_minimal_state", "wide": true, "description": ""}]}, {"name": "Text", "slug": "typography", "category": "Display", "status": "done", "reference": "https://kumo-ui.com/components/text/", "props": [{"name": "text", "type": "string", "default": "unset", "description": "Text; pass the documented value shown in the examples."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "variant", "type": "string", "default": "component-specific", "description": "Variant; pass the documented value shown in the examples."}, {"name": "level", "type": "number", "default": "unset", "description": "Level; pass the documented value shown in the examples."}, {"name": "size", "type": "string", "default": "base", "description": "Size; pass the documented value shown in the examples."}, {"name": "emphasized", "type": "bool", "default": "False", "description": "Emphasized; pass the documented value shown in the examples."}, {"name": "truncate", "type": "bool", "default": "False", "description": "Truncate; pass the documented value shown in the examples."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Body", "template": "typography_body", "wide": true}, {"title": "Headings", "template": "typography_headings", "wide": true}, {"title": "Secondary", "template": "typography_secondary", "wide": true}, {"title": "Inline monospace", "template": "typography_inline_monospace", "wide": true}, {"title": "Truncated text", "template": "audit_typography_truncated_text", "wide": true, "description": ""}]}, {"name": "ButtonGroup", "slug": "button-group", "category": "Action", "status": "done", "reference": "https://kumo-ui.com/components/button-group/", "props": [{"name": "orientation", "type": "string", "default": "horizontal", "description": "horizontal (default) or the wdj vertical extension. Set size and variant on each child control."}, {"name": "aria_label", "type": "string", "default": "unset", "description": "Aria label; pass the documented value shown in the examples."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}], "examples": [{"title": "Split button", "template": "audit_button_group_split_button", "description": "A primary action joined with a dropdown trigger for secondary actions."}, {"title": "Secondary", "template": "button_group_secondary", "description": "Match the variant on both controls to create one split button."}, {"title": "Sizes", "template": "audit_button_group_all_control_sizes", "description": "Match the size on both controls: small, base and large."}, {"title": "Button and link", "template": "button_group_attached_buttons", "wide": true, "description": "Related actions retain native button and link semantics, including a wrapped link."}, {"title": "Vertical", "template": "button_group_vertical", "wide": true, "description": "The wdj vertical extension joins the top and bottom corners of related actions."}]}, {"name": "ClipboardText", "slug": "clipboard-text", "category": "Action", "status": "done", "reference": "https://kumo-ui.com/components/clipboard-text/", "props": [{"name": "text", "type": "string", "default": "unset", "description": "Text; pass the documented value shown in the examples."}, {"name": "text_to_copy", "type": "string", "default": "unset", "description": "Text to copy; pass the documented value shown in the examples."}, {"name": "size", "type": "string", "default": "lg", "description": "Size; pass the documented value shown in the examples."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "tooltip", "type": "string", "default": "unset", "description": "Tooltip; pass the documented value shown in the examples."}, {"name": "toast", "type": "string", "default": "unset", "description": "Toast; pass the documented value shown in the examples."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Short value", "template": "clipboard_text_short_value"}, {"title": "Long value", "template": "clipboard_text_long_value"}, {"title": "Masked value", "template": "clipboard_text_masked_value"}, {"title": "Small", "template": "clipboard_text_small"}, {"title": "Large", "template": "clipboard_text_large"}, {"title": "Custom feedback", "template": "clipboard_text_custom_feedback"}, {"title": "Alternate copied value", "template": "audit_clipboard_text_alternate_copied_value", "wide": true, "description": ""}, {"title": "Tooltip label", "template": "audit_clipboard_text_tooltip_label", "wide": true, "description": ""}]}, {"name": "InlineCopyText", "slug": "inline-copy-text", "category": "Action", "status": "done", "reference": "https://kumo-ui.com/components/inline-copy-text/", "props": [{"name": "value", "type": "string", "default": "unset", "description": "Value; pass the documented value shown in the examples."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "size", "type": "string", "default": "sm", "description": "Size; pass the documented value shown in the examples."}, {"name": "mono", "type": "bool", "default": "True", "description": "Mono; pass the documented value shown in the examples."}, {"name": "variant", "type": "string", "default": "mono-secondary", "description": "Variant; pass the documented value shown in the examples."}, {"name": "tooltip", "type": "string", "default": "unset", "description": "Tooltip; pass the documented value shown in the examples."}, {"name": "toast", "type": "string", "default": "unset", "description": "Toast; pass the documented value shown in the examples."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Resource identifier", "template": "inline_copy_text_resource_identifier"}, {"title": "Custom feedback", "template": "inline_copy_text_custom_feedback"}, {"title": "Sizes", "template": "inline_copy_text_sizes"}, {"title": "Resource row", "template": "audit_inline_copy_text_resource_row", "wide": true, "description": ""}, {"title": "Rich label", "template": "audit_inline_copy_text_rich_label", "wide": true, "description": ""}]}, {"name": "SensitiveInput", "slug": "sensitive-input", "category": "Input", "status": "done", "reference": "https://kumo-ui.com/components/sensitive-input/", "props": [{"name": "name", "type": "string", "default": "unset", "description": "Name; pass the documented value shown in the examples."}, {"name": "value", "type": "string", "default": "unset", "description": "Value; pass the documented value shown in the examples."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "error", "type": "string", "default": "unset", "description": "Validation message; implies error styling and accessible error association."}, {"name": "placeholder", "type": "string", "default": "unset", "description": "Placeholder; pass the documented value shown in the examples."}, {"name": "size", "type": "string", "default": "base", "description": "Size; pass the documented value shown in the examples."}, {"name": "variant", "type": "string", "default": "component-specific", "description": "Variant; pass the documented value shown in the examples."}, {"name": "required", "type": "bool", "default": "False", "description": "Required; pass the documented value shown in the examples."}, {"name": "disabled", "type": "bool", "default": "False", "description": "Disabled; pass the documented value shown in the examples."}, {"name": "readonly", "type": "bool", "default": "False", "description": "Readonly; pass the documented value shown in the examples."}, {"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "API key", "template": "sensitive_input_api_key", "wide": true}, {"title": "Description", "template": "sensitive_input_description", "wide": true}, {"title": "Error", "template": "sensitive_input_error", "wide": true}, {"title": "Disabled", "template": "sensitive_input_disabled", "wide": true}, {"title": "All sizes", "template": "audit_sensitive_input_all_sizes", "wide": true, "description": ""}, {"title": "Controlled secret", "template": "audit_sensitive_input_controlled_secret", "wide": true, "description": ""}]}, {"name": "Code / CodeHighlighted", "slug": "code", "category": "Display", "status": "partial", "reference": "https://kumo-ui.com/components/code-highlighted/", "props": [{"name": "code", "type": "string", "default": "unset", "description": "Code; pass the documented value shown in the examples."}, {"name": "lang", "type": "string", "default": "unset", "description": "Lang; pass the documented value shown in the examples."}, {"name": "inline", "type": "bool", "default": "False", "description": "Inline; pass the documented value shown in the examples."}, {"name": "filename", "type": "string", "default": "unset", "description": "Filename; pass the documented value shown in the examples."}, {"name": "copyable", "type": "bool", "default": "True", "description": "Copyable; pass the documented value shown in the examples."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}, {"name": "highlighted.code", "type": "string / list", "default": "unset", "description": "Use code with wdj/components/code_highlighted.html. This is a separate template."}, {"name": "highlighted.lang", "type": "string / list", "default": "unset", "description": "Use lang with wdj/components/code_highlighted.html. This is a separate template."}, {"name": "highlighted.highlight_lines", "type": "string / list", "default": "unset", "description": "Use highlight_lines with wdj/components/code_highlighted.html. This is a separate template."}, {"name": "highlighted.line_numbers", "type": "bool", "default": "unset", "description": "Use line_numbers with wdj/components/code_highlighted.html. This is a separate template."}, {"name": "highlighted.plain", "type": "bool", "default": "unset", "description": "Use plain with wdj/components/code_highlighted.html. This is a separate template."}, {"name": "highlighted.filename", "type": "string / list", "default": "unset", "description": "Use filename with wdj/components/code_highlighted.html. This is a separate template."}, {"name": "highlighted.copyable", "type": "bool", "default": "unset", "description": "Use copyable with wdj/components/code_highlighted.html. This is a separate template."}, {"name": "highlighted.copy_label", "type": "string / list", "default": "unset", "description": "Use copy_label with wdj/components/code_highlighted.html. This is a separate template."}], "examples": [{"title": "Inline code", "template": "code_inline_code", "wide": true}, {"title": "Code block", "template": "code_code_block", "wide": true}, {"title": "Filename", "template": "code_filename", "wide": true}, {"title": "Without copy", "template": "code_without_copy", "wide": true}, {"title": "Basic highlighting", "template": "audit_code_basic_highlighting", "wide": true, "description": ""}, {"title": "TypeScript", "template": "audit_code_typescript", "wide": true, "description": ""}, {"title": "Shell commands", "template": "audit_code_shell_commands", "wide": true, "description": ""}, {"title": "JSON", "template": "audit_code_json", "wide": true, "description": ""}, {"title": "CSS", "template": "audit_code_css", "wide": true, "description": ""}, {"title": "Highlighted lines", "template": "audit_code_highlighted_lines", "wide": true, "description": ""}, {"title": "Line numbers", "template": "audit_code_line_numbers", "wide": true, "description": ""}, {"title": "Copy button", "template": "audit_code_copy_button", "wide": true, "description": ""}, {"title": "Plain code surface", "template": "audit_code_plain_code_surface", "wide": true, "description": ""}, {"title": "Full featured", "template": "audit_code_full_featured", "wide": true, "description": ""}, {"title": "Localized copy action", "template": "audit_code_localized_copy_action", "wide": true, "description": ""}, {"title": "Shared server highlighter", "template": "completion_code_shared_server_highlighter", "wide": true}, {"title": "Custom highlight color", "template": "completion_code_custom_highlight_color", "wide": true}, {"title": "Multiline grammar highlighting", "template": "recommendation_code_grammar", "wide": true}]}, {"name": "Collapsible", "slug": "collapsible", "category": "Display", "status": "done", "reference": "https://kumo-ui.com/components/collapsible/", "props": [{"name": "title", "type": "string", "default": "unset", "description": "Title; pass the documented value shown in the examples."}, {"name": "trigger", "type": "string / HTML slot", "default": "unset", "description": "Trigger; pass the documented value shown in the examples."}, {"name": "open", "type": "bool", "default": "False", "description": "Open; pass the documented value shown in the examples."}, {"name": "variant", "type": "string", "default": "component-specific", "description": "Variant; pass the documented value shown in the examples."}, {"name": "name", "type": "string", "default": "unset", "description": "Name; pass the documented value shown in the examples."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Default", "template": "collapsible_expanded", "wide": true}, {"title": "Closed", "template": "collapsible_closed", "wide": true}, {"title": "Card", "template": "collapsible_card", "wide": true}, {"title": "Flush", "template": "collapsible_flush", "wide": true}, {"title": "Nested disclosure", "template": "collapsible_nested", "wide": true}, {"title": "Rich content", "template": "collapsible_rich_content", "wide": true}, {"title": "Grouped sections", "template": "collapsible_grouped", "wide": true}, {"title": "Exclusive accordion", "template": "audit_collapsible_exclusive_accordion", "wide": true, "description": ""}, {"title": "Form state retained", "template": "audit_collapsible_form_state_retained", "wide": true, "description": ""}, {"title": "Custom summary", "template": "audit_collapsible_custom_summary", "wide": true, "description": ""}]}, {"name": "Meter", "slug": "meter", "category": "Display", "status": "done", "reference": "https://kumo-ui.com/components/meter/", "props": [{"name": "value", "type": "number", "default": "unset", "description": "Value; pass the documented value shown in the examples."}, {"name": "min", "type": "number", "default": "0 (Slider/Meter)", "description": "Min; pass the documented value shown in the examples."}, {"name": "max", "type": "number", "default": "100 (Slider/Meter)", "description": "Max; pass the documented value shown in the examples."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "show_value", "type": "bool", "default": "True", "description": "Show value; pass the documented value shown in the examples."}, {"name": "custom_value", "type": "string", "default": "unset", "description": "Custom value; pass the documented value shown in the examples."}, {"name": "variant", "type": "string", "default": "component-specific", "description": "Variant; pass the documented value shown in the examples."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Storage used", "template": "meter_storage_used", "wide": true}, {"title": "Custom value", "template": "meter_custom_value", "wide": true}, {"title": "Hidden value", "template": "meter_hidden_value", "wide": true}, {"title": "Quota reached", "template": "meter_quota_reached", "wide": true}, {"title": "Empty", "template": "meter_empty", "wide": true}, {"title": "Warning", "template": "meter_warning", "wide": true}]}, {"name": "InputGroup", "slug": "input-group", "category": "Input", "status": "done", "reference": "https://kumo-ui.com/components/input-group/", "props": [{"name": "aria_label", "type": "string", "default": "unset", "description": "Aria label; pass the documented value shown in the examples."}, {"name": "name", "type": "string", "default": "unset", "description": "Name; pass the documented value shown in the examples."}, {"name": "value", "type": "string", "default": "unset", "description": "Value; pass the documented value shown in the examples."}, {"name": "type", "type": "string", "default": "text", "description": "Type; pass the documented value shown in the examples."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "error", "type": "string", "default": "unset", "description": "Validation message; implies error styling and accessible error association."}, {"name": "prefix", "type": "string", "default": "unset", "description": "Prefix; pass the documented value shown in the examples."}, {"name": "suffix", "type": "string", "default": "unset", "description": "Suffix; pass the documented value shown in the examples."}, {"name": "prefix_icon", "type": "string", "default": "unset", "description": "Prefix icon; pass the documented value shown in the examples."}, {"name": "suffix_icon", "type": "string", "default": "unset", "description": "Suffix icon; pass the documented value shown in the examples."}, {"name": "placeholder", "type": "string", "default": "unset", "description": "Placeholder; pass the documented value shown in the examples."}, {"name": "size", "type": "string", "default": "base", "description": "Size; pass the documented value shown in the examples."}, {"name": "variant", "type": "string", "default": "component-specific", "description": "Variant; pass the documented value shown in the examples."}, {"name": "disabled", "type": "bool", "default": "False", "description": "Disabled; pass the documented value shown in the examples."}, {"name": "readonly", "type": "bool", "default": "False", "description": "Readonly; pass the documented value shown in the examples."}, {"name": "required", "type": "bool", "default": "False", "description": "Required; pass the documented value shown in the examples."}, {"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Suffix", "template": "input_group_suffix", "wide": true}, {"title": "Prefix", "template": "input_group_prefix", "wide": true}, {"title": "Both sides", "template": "input_group_both_sides", "wide": true}, {"title": "Leading icon", "template": "input_group_leading_icon", "wide": true}, {"title": "Trailing icon", "template": "input_group_trailing_icon", "wide": true}, {"title": "Error", "template": "input_group_error", "wide": true}, {"title": "Disabled", "template": "input_group_disabled", "wide": true}, {"title": "Small", "template": "input_group_small", "wide": true}, {"title": "Attached button", "template": "input_group_attached_button", "wide": true}, {"title": "Attached select", "template": "input_group_attached_select", "wide": true}, {"title": "Keyboard hint", "template": "audit_input_group_keyboard_hint", "wide": true, "description": ""}, {"title": "Loading indicator", "template": "audit_input_group_loading_indicator", "wide": true, "description": ""}, {"title": "Inline suffix", "template": "audit_input_group_inline_suffix", "wide": true, "description": ""}, {"title": "Tooltip action", "template": "audit_input_group_tooltip_action", "wide": true, "description": ""}]}, {"name": "LayerCard", "slug": "layer-card", "category": "Layout", "status": "done", "reference": "https://kumo-ui.com/components/layer-card/", "props": [{"name": "secondary", "type": "string", "default": "unset", "description": "Secondary; pass the documented value shown in the examples."}, {"name": "secondary_href", "type": "string", "default": "unset", "description": "Secondary href; pass the documented value shown in the examples."}, {"name": "secondary_action_label", "type": "string", "default": "unset", "description": "Secondary action label; pass the documented value shown in the examples."}, {"name": "title", "type": "string", "default": "unset", "description": "Title; pass the documented value shown in the examples."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "href", "type": "string", "default": "unset", "description": "Href; pass the documented value shown in the examples."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Layered surface", "template": "layer_card_layered_surface", "wide": true}, {"title": "Description", "template": "layer_card_description", "wide": true}, {"title": "Linked card", "template": "layer_card_linked_card", "wide": true}, {"title": "Surface card", "template": "audit_layer_card_surface_card", "wide": true, "description": ""}, {"title": "Multiple adjacent cards", "template": "audit_layer_card_multiple_adjacent_cards", "wide": true, "description": ""}, {"title": "Filter toolbar and small tabs", "template": "audit_layer_card_filter_toolbar_and_small_tabs", "wide": true, "description": ""}, {"title": "Test identifiers", "template": "audit_layer_card_test_identifiers", "wide": true, "description": ""}]}, {"name": "Grid", "slug": "grid", "category": "Layout", "status": "done", "reference": "https://kumo-ui.com/components/grid/", "props": [{"name": "variant", "type": "string", "default": "component-specific", "description": "Variant; pass the documented value shown in the examples."}, {"name": "gap", "type": "string", "default": "unset", "description": "Gap; pass the documented value shown in the examples."}, {"name": "tag", "type": "string", "default": "unset", "description": "Tag; pass the documented value shown in the examples."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Two columns", "template": "grid_two_columns", "wide": true}, {"title": "Three columns", "template": "grid_three_columns", "wide": true}, {"title": "Four columns", "template": "grid_four_columns", "wide": true}, {"title": "Asymmetric", "template": "grid_asymmetric", "wide": true}, {"title": "Responsive", "template": "grid_responsive", "wide": true}, {"title": "Gap choices", "template": "audit_grid_gap_choices", "wide": true, "description": ""}, {"title": "All responsive variants", "template": "audit_grid_all_responsive_variants", "wide": true, "description": ""}, {"title": "Mobile dividers", "template": "audit_grid_mobile_dividers", "wide": true, "description": ""}]}, {"name": "Sidebar", "slug": "sidebar", "category": "Navigation", "status": "done", "reference": "https://kumo-ui.com/components/sidebar/", "props": [{"name": "groups", "type": "list[dict]", "default": "unset", "description": "Sidebar: label/items groups; items support recursive children, id, value, href, view, icon, badge, active and open."}, {"name": "items", "type": "list[dict]", "default": "[]", "description": "Component-specific item dictionaries; see each rendered source example and integration context."}, {"name": "views", "type": "list[dict]", "default": "unset", "description": "Views; pass the documented value shown in the examples."}, {"name": "active_view", "type": "string", "default": "unset", "description": "Active view; pass the documented value shown in the examples."}, {"name": "aria_label", "type": "string", "default": "unset", "description": "Aria label; pass the documented value shown in the examples."}, {"name": "brand_label", "type": "string", "default": "unset", "description": "Brand label; pass the documented value shown in the examples."}, {"name": "brand_href", "type": "string", "default": "unset", "description": "Brand href; pass the documented value shown in the examples."}, {"name": "brand_initials", "type": "string", "default": "unset", "description": "Brand initials; pass the documented value shown in the examples."}, {"name": "brand_mark", "type": "string", "default": "unset", "description": "Brand mark; pass the documented value shown in the examples."}, {"name": "brand_slot", "type": "HTML slot", "default": "unset", "description": "Brand slot; pass the documented value shown in the examples."}, {"name": "header_slot", "type": "HTML slot", "default": "unset", "description": "Header slot; pass the documented value shown in the examples."}, {"name": "footer_slot", "type": "HTML slot", "default": "unset", "description": "Footer slot; pass the documented value shown in the examples."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "collapsible", "type": "string", "default": "icon", "description": "Collapsible; pass the documented value shown in the examples."}, {"name": "default_open", "type": "bool", "default": "True", "description": "Default open; pass the documented value shown in the examples."}, {"name": "peekable", "type": "bool", "default": "False", "description": "Peekable; pass the documented value shown in the examples."}, {"name": "resizable", "type": "bool", "default": "False", "description": "Resizable; pass the documented value shown in the examples."}, {"name": "contained", "type": "bool", "default": "False", "description": "Contained; pass the documented value shown in the examples."}, {"name": "default_width", "type": "number", "default": "240", "description": "Default width; pass the documented value shown in the examples."}, {"name": "min_width", "type": "number", "default": "180", "description": "Min width; pass the documented value shown in the examples."}, {"name": "max_width", "type": "number", "default": "420", "description": "Max width; pass the documented value shown in the examples."}, {"name": "side", "type": "string", "default": "component-specific", "description": "Side; pass the documented value shown in the examples."}, {"name": "loading", "type": "bool", "default": "False", "description": "Loading; pass the documented value shown in the examples."}, {"name": "persist_key", "type": "string", "default": "unset", "description": "Persist key; pass the documented value shown in the examples."}, {"name": "auto_scroll", "type": "bool", "default": "False", "description": "Auto scroll; pass the documented value shown in the examples."}, {"name": "full_screen_mobile", "type": "bool", "default": "False", "description": "Full screen mobile; pass the documented value shown in the examples."}, {"name": "show_header", "type": "bool", "default": "True", "description": "Show header; pass the documented value shown in the examples."}, {"name": "show_trigger", "type": "bool", "default": "True", "description": "Show trigger; pass the documented value shown in the examples."}, {"name": "view_controls", "type": "string", "default": "tabs", "description": "Sidebar: tabs (default) or header buttons for account/zone switching."}, {"name": "mobile_preview", "type": "bool", "default": "False", "description": "Sidebar: contain the mobile backdrop and focus trap within the example."}, {"name": "mobile_breakpoint", "type": "number", "default": "1024", "description": "Sidebar: enter drawer mode below this viewport width; default 1024px."}, {"name": "search_target", "type": "string", "default": "unset", "description": "Search target; pass the documented value shown in the examples."}, {"name": "search_label", "type": "string", "default": "unset", "description": "Search label; pass the documented value shown in the examples."}, {"name": "search_aria_label", "type": "string", "default": "unset", "description": "Search aria label; pass the documented value shown in the examples."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Basic", "template": "sidebar_basic", "wide": true, "description": "Reference groups with nested Compute / Workers & Pages navigation."}, {"title": "Grouped, collapsible rail", "template": "sidebar_groups", "description": "Labelled groups, icon-only collapse, hover-peek and drag-to-resize."}, {"title": "Sliding views", "template": "sidebar_views", "description": "Swap the nav body between views inside one panel footprint."}, {"title": "Nested items", "template": "sidebar_nested", "description": "Expandable sub-menus built on native <details>."}, {"title": "Static rail", "template": "sidebar_static_rail", "wide": true}, {"title": "Right side", "template": "sidebar_right_side", "wide": true}, {"title": "Loading", "template": "sidebar_loading", "wide": true}, {"title": "Initially collapsed", "template": "sidebar_initially_collapsed", "wide": true}, {"title": "Peek on hover", "template": "sidebar_peek_on_hover", "wide": true}, {"title": "Keyboard resizing", "template": "sidebar_keyboard_resizing", "wide": true}, {"title": "Wide rail", "template": "sidebar_wide_rail", "wide": true}, {"title": "Nested navigation", "template": "sidebar_nested_navigation", "wide": true}, {"title": "Settings view", "template": "sidebar_settings_view", "wide": true}, {"title": "Pinned footer", "template": "sidebar_pinned_footer", "wide": true}, {"title": "Full example", "template": "sidebar_full", "wide": true, "description": "Account/zone views, quick search, nested navigation, badges, resizing and collapse."}, {"title": "Mobile", "template": "sidebar_mobile", "wide": true, "description": "Mobile drawer preview with focus trapping, Escape and dismiss controls."}, {"title": "Full-screen mobile preview", "template": "sidebar_mobile_full", "wide": true, "description": "Adjust the phone width, open nested navigation and return with the breadcrumb controls."}, {"title": "Auto scroll to active item", "template": "completion_sidebar_auto_scroll_to_active_item", "wide": true}, {"title": "Scroll to item", "template": "completion_sidebar_scroll_to_item", "wide": true}, {"title": "Transition completion", "template": "completion_sidebar_transition_completion", "wide": true}, {"title": "Full-screen mobile", "template": "completion_sidebar_full_screen_mobile", "wide": true}]}, {"name": "Page header", "slug": "header", "category": "Blocks", "status": "done", "reference": "https://kumo-ui.com/blocks/page-header/", "props": [{"name": "title", "type": "string", "default": "unset", "description": "Title; pass the documented value shown in the examples."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "crumbs", "type": "list[dict]", "default": "unset", "description": "Breadcrumbs: label, optional href/icon/loading/copy/loading_label/copy_label. The final item is the current page. Phones retain the parent and current page with an ellipsis."}, {"name": "breadcrumbs", "type": "string", "default": "unset", "description": "Breadcrumbs; pass the documented value shown in the examples."}, {"name": "tabs", "type": "list[dict]", "default": "unset", "description": "Tabs; pass the documented value shown in the examples."}, {"name": "tab_mode", "type": "string", "default": "unset", "description": "Tab mode; pass the documented value shown in the examples."}, {"name": "default_tab", "type": "string", "default": "unset", "description": "Default tab; pass the documented value shown in the examples."}, {"name": "tabs_label", "type": "string", "default": "unset", "description": "Tabs label; pass the documented value shown in the examples."}, {"name": "actions", "type": "list[dict]", "default": "unset", "description": "Actions; pass the documented value shown in the examples."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "spacing", "type": "string", "default": "unset", "description": "Spacing; pass the documented value shown in the examples."}, {"name": "heading_level", "type": "number", "default": "unset", "description": "Heading level; pass the documented value shown in the examples."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Title", "template": "header_title", "wide": true}, {"title": "Description", "template": "header_description", "wide": true}, {"title": "Breadcrumbs", "template": "header_breadcrumbs", "wide": true}, {"title": "Breadcrumb icons", "template": "header_breadcrumb_icons", "wide": true}, {"title": "Tabs", "template": "header_tabs", "wide": true}, {"title": "Actions", "template": "header_actions", "wide": true}, {"title": "Compact spacing", "template": "header_compact_spacing", "wide": true}, {"title": "Complete header", "template": "header_complete_header", "wide": true}, {"title": "Hero navigation", "template": "header_hero_navigation", "wide": true}, {"title": "Actions without tabs", "template": "header_actions_only", "wide": true}, {"title": "Long navigation", "template": "header_long_navigation", "wide": true}, {"title": "Local selection and relaxed spacing", "template": "header_local_state", "wide": true}]}, {"name": "Breadcrumbs", "slug": "breadcrumbs", "category": "Navigation", "status": "done", "reference": "https://kumo-ui.com/components/breadcrumbs/", "props": [{"name": "crumbs", "type": "list[dict]", "default": "unset", "description": "Breadcrumbs: label, optional href/icon/loading/copy/loading_label/copy_label. The final item is the current page. Phones retain the parent and current page with an ellipsis."}, {"name": "size", "type": "string", "default": "base", "description": "Size; pass the documented value shown in the examples."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "separator", "type": "string", "default": "unset", "description": "Separator; pass the documented value shown in the examples."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Icons", "template": "breadcrumbs_icons", "wide": true}, {"title": "Basic", "template": "breadcrumbs_basic", "wide": true}, {"title": "Compact", "template": "breadcrumbs_compact", "wide": true}, {"title": "Custom separator", "template": "breadcrumbs_custom_separator", "wide": true}, {"title": "Loading state", "template": "audit_breadcrumbs_loading_state", "wide": true, "description": ""}, {"title": "Copy current item", "template": "audit_breadcrumbs_copy_current_item", "wide": true, "description": ""}, {"title": "Root only", "template": "audit_breadcrumbs_root_only", "wide": true, "description": ""}]}, {"name": "Tabs", "slug": "tabs", "category": "Navigation", "status": "done", "reference": "https://kumo-ui.com/components/tabs/", "props": [{"name": "items", "type": "list[dict]", "default": "[]", "description": "Local: key/label/content?/disabled?/icon?/badge?/attrs?. Navigation: label/href/active?/disabled?/hx_get?/hx_target?."}, {"name": "mode", "type": "navigation | local", "default": "navigation", "description": "Real URL/HTMX links or local Alpine tab buttons and panels."}, {"name": "variant", "type": "segmented | underline", "default": "segmented", "description": "Filled track with a sliding pill, or a moving underline."}, {"name": "size", "type": "base | sm", "default": "base", "description": "Segmented: 36/26px. Underline: 30/26px. Text: 14/12px."}, {"name": "id", "type": "string", "default": "generated", "description": "Unique local root ID; tab/panel IDs derive from it."}, {"name": "selected", "type": "string", "default": "first enabled", "description": "Initial local item key; navigation selection comes from items[].active."}, {"name": "activate_on_focus", "type": "bool", "default": "False", "description": "Local mode: activate on focus instead of requiring Enter/Space."}, {"name": "label", "type": "string", "default": "Tabs", "description": "Accessible label for the navigation or local tablist."}, {"name": "scroll_start_label / scroll_end_label", "type": "string", "default": "Scroll tabs left / right", "description": "Localized accessible names for segmented overflow controls."}, {"name": "class", "type": "string", "default": "", "description": "Additional literal root classes; width is constrained by the parent."}], "examples": [{"title": "Variants (default)", "template": "tabs", "wide": true}, {"title": "Segmented", "template": "tabs_segmented", "wide": true}, {"title": "Underline", "template": "tabs_underline", "wide": true}, {"title": "Small", "template": "tabs_small", "wide": true}, {"title": "Controlled", "template": "tabs_controlled", "wide": true}, {"title": "Many tabs", "template": "tabs_many", "wide": true}, {"title": "Horizontal overflow", "template": "tabs_horizontal_overflow", "wide": true}, {"title": "Dynamic tab count", "template": "tabs_dynamic_count", "wide": true}, {"title": "Icons and badges", "template": "tabs_icons_and_badges", "wide": true}, {"title": "Disabled tab", "template": "tabs_disabled_tab", "wide": true}, {"title": "HTMX content", "template": "tabs_htmx_content", "wide": true}, {"title": "URL state", "template": "tabs_url_state", "wide": true}, {"title": "Overflow", "template": "tabs_overflow", "wide": true}, {"title": "External link", "template": "tabs_external_link", "wide": true}, {"title": "Local panels (Alpine)", "template": "tabs_local_panels", "wide": true}, {"title": "Local rich content", "template": "tabs_local_rich_content", "wide": true}]}, {"name": "DropdownMenu", "slug": "dropdown", "category": "Overlay", "status": "done", "reference": "https://kumo-ui.com/components/dropdown/", "props": [{"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "trigger", "type": "string / HTML slot", "default": "unset", "description": "Trigger; pass the documented value shown in the examples."}, {"name": "icon", "type": "string", "default": "unset", "description": "Icon; pass the documented value shown in the examples."}, {"name": "items", "type": "list[dict]", "default": "[]", "description": "Component-specific item dictionaries; see each rendered source example and integration context."}, {"name": "align", "type": "string", "default": "start", "description": "Align; pass the documented value shown in the examples."}, {"name": "size", "type": "string", "default": "base", "description": "Size; pass the documented value shown in the examples."}, {"name": "variant", "type": "string", "default": "default", "description": "default, primary, secondary or ghost; match adjacent Button variants. Square triggers may use icon='ellipsis'."}, {"name": "shape", "type": "string", "default": "base", "description": "base (label and caret) or square (caret only); supply aria_label for the square trigger."}, {"name": "aria_label", "type": "string", "default": "unset", "description": "Aria label; pass the documented value shown in the examples."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Basic", "template": "dropdown_basic"}, {"title": "Icons", "template": "dropdown_icons"}, {"title": "Danger item", "template": "dropdown_danger_item"}, {"title": "End aligned", "template": "dropdown_end_aligned"}, {"title": "Disabled item", "template": "dropdown_disabled_item"}, {"title": "Small", "template": "dropdown_small"}, {"title": "Sections", "template": "dropdown_sections", "wide": true}, {"title": "Separators", "template": "dropdown_separators", "wide": true}, {"title": "Checkbox menu", "template": "audit_dropdown_checkbox_menu", "wide": true, "description": ""}, {"title": "Nested radio selection", "template": "audit_dropdown_nested_radio_selection", "wide": true, "description": ""}, {"title": "Navigation links", "template": "audit_dropdown_navigation_links", "wide": true, "description": ""}, {"title": "Scrolling long menu", "template": "audit_dropdown_scrolling_long_menu", "wide": true, "description": ""}, {"title": "Custom avatar trigger", "template": "audit_dropdown_custom_avatar_trigger", "wide": true, "description": ""}]}, {"name": "Pagination", "slug": "pagination", "category": "Navigation", "status": "done", "reference": "https://kumo-ui.com/components/pagination/", "props": [{"name": "page", "type": "int", "default": "1", "description": "Current page number (1-indexed)."}, {"name": "per_page", "type": "int", "default": "10", "description": "Number of items displayed per page."}, {"name": "total_count", "type": "int", "default": "None", "description": "Total number of items across all pages."}, {"name": "total_pages", "type": "int", "default": "None", "description": "Total number of pages (derived from total_count / per_page if omitted)."}, {"name": "has_next_page", "type": "bool", "default": "None", "description": "Whether another page exists when total count is unknown (cursor pagination)."}, {"name": "controls", "type": "\"full\" | \"simple\"", "default": "\"full\"", "description": "Controls mode: full (first, prev, input, next, last) or simple (prev, next)."}, {"name": "page_selector", "type": "\"input\" | \"dropdown\"", "default": "\"input\"", "description": "How page selector renders: text input or select dropdown."}, {"name": "text", "type": "str", "default": "None", "description": "Custom info string overriding \"Showing X-Y of Z\"."}, {"name": "page_sizes", "type": "list[int]", "default": "None", "description": "Available page size choices, e.g. [10, 20, 50] or [25, 50, 100, 250]."}, {"name": "page_size", "type": "int", "default": "25", "description": "Current selected page size."}, {"name": "page_size_label", "type": "str", "default": "\"Per page:\"", "description": "Label text displayed before the page size dropdown."}, {"name": "page_size_right", "type": "bool", "default": "False", "description": "Whether to place the page size selector on the right of controls."}, {"name": "labels", "type": "dict", "default": "{}", "description": "Aria labels for internationalization (first_page, previous_page, next_page, last_page, page_number, page_size, navigation)."}, {"name": "base_url", "type": "str", "default": "None", "description": "Base URL used to build anchor links for sequential navigation."}, {"name": "param", "type": "str", "default": "\"page\"", "description": "Query parameter name for current page."}, {"name": "hx_target", "type": "str", "default": "None", "description": "HTMX target CSS selector for fragment swaps."}, {"name": "hx_swap", "type": "str", "default": "\"outerHTML\"", "description": "HTMX swap strategy."}], "examples": [{"title": "Full Controls (Default)", "template": "pagination_full", "description": "The default pagination includes first, previous, page input, next, and last buttons."}, {"title": "Simple Controls", "template": "pagination_simple", "description": "Use controls=\"simple\" for a minimal pagination with only previous and next buttons."}, {"title": "Unknown Totals", "template": "pagination_unknown_total", "description": "Use has_next_page when the data source does not return a total count. Common for cursor-based APIs where calculating the total is expensive."}, {"title": "Mid-Page State", "template": "pagination_mid_page", "description": "Pagination in the middle of a dataset with all navigation enabled."}, {"title": "Large Dataset", "template": "pagination_large_dataset", "description": "Pagination handles large datasets with many pages."}, {"title": "Custom Text", "template": "pagination_custom_text", "description": "You can set custom pagination text."}, {"title": "Page Size Selector", "template": "pagination_page_size", "section": "Compound Components", "description": "Add a dropdown to let users select the number of items per page using compound subcomponents."}, {"title": "Custom Page Size Options", "template": "pagination_custom_page_size", "section": "Compound Components", "description": "Customize the available page size options with the options prop. Defaults to [25, 50, 100, 250]."}, {"title": "Custom Info Text", "template": "pagination_custom_info", "section": "Compound Components", "description": "Use custom text to format the page and item counts."}, {"title": "Custom Layout", "template": "pagination_custom_layout", "section": "Compound Components", "description": "Arrange components in any order. Here the page size selector is on the right."}, {"title": "Dropdown Page Selector", "template": "pagination_dropdown_selector", "section": "Compound Components", "description": "Use page_selector=\"dropdown\" to render a dropdown select instead of a text input for page navigation."}, {"title": "Internationalization", "template": "pagination_i18n", "description": "Use the labels prop to customize all UI strings for different locales. All labels default to English."}]}, {"name": "Toolbar", "slug": "toolbar", "category": "Action", "status": "done", "reference": "https://kumo-ui.com/components/toolbar/", "props": [{"name": "aria_label", "type": "string", "default": "unset", "description": "Aria label; pass the documented value shown in the examples."}, {"name": "size", "type": "string", "default": "base", "description": "Compatibility sizing for all explicit toolbar items: xs=20, sm=26, base=36, lg=40px. Prefer the default base size."}, {"name": "orientation", "type": "string", "default": "horizontal", "description": "horizontal or the wdj vertical extension; arrow navigation follows orientation and RTL direction."}, {"name": "loop_focus", "type": "bool", "default": "True", "description": "Loop focus; pass the documented value shown in the examples."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Wrap each Button/link, Input, InputGroup, Select or Combobox in toolbar_item.html to join its borders and keyboard focus order."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}, {"name": "item.grow", "type": "bool", "default": "False", "description": "toolbar_item.html: let an input or combobox fill the remaining toolbar width."}, {"name": "item.shape", "type": "string", "default": "base", "description": "toolbar_item.html: square for an icon-only cell. Give the child Button an empty label and a meaningful aria_label."}, {"name": "item.slot", "type": "HTML slot", "default": "unset", "description": "toolbar_item.html: one existing control, retaining its form name, options, HTMX and Alpine attributes."}, {"name": "item.class", "type": "string", "default": "\"\"", "description": "Additional literal classes on the toolbar item wrapper."}], "examples": [{"title": "Filter toolbar", "template": "toolbar_filter_toolbar", "wide": true}, {"title": "Select", "template": "audit_toolbar_composed_select", "wide": true}, {"title": "Combobox", "template": "audit_toolbar_composed_combobox", "wide": true}, {"title": "Input shorthand", "template": "toolbar_input_shorthand", "wide": true}, {"title": "Input group", "template": "audit_toolbar_composed_input_group", "wide": true}, {"title": "Deprecated sizing", "template": "toolbar_sizes", "wide": true}, {"title": "Button actions", "template": "toolbar_grouped_actions", "wide": true}, {"title": "Links", "template": "audit_toolbar_real_links", "wide": true}, {"title": "Accessible labels", "template": "toolbar_accessible_labels", "wide": true}, {"title": "Vertical", "template": "toolbar_vertical", "wide": true}, {"title": "Without focus wrapping", "template": "toolbar_no_loop", "wide": true}, {"title": "Disabled action", "template": "toolbar_disabled_action", "wide": true}, {"title": "Working filters", "template": "toolbar_working_filters", "wide": true}]}, {"name": "Table of contents", "slug": "table-of-contents", "category": "Navigation", "status": "done", "reference": "https://kumo-ui.com/components/table-of-contents/", "props": [{"name": "title", "type": "string", "default": "unset", "description": "Title; pass the documented value shown in the examples."}, {"name": "hide_title", "type": "bool", "default": "False", "description": "Hide title; pass the documented value shown in the examples."}, {"name": "items", "type": "list[dict]", "default": "[]", "description": "title (or label), optional href/active/children. Groups without href have plain labels; leaves without href render keyboard-accessible buttons. Children support the same recursive contract."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "scrollspy", "type": "bool", "default": "False", "description": "TableOfContents: track sections within this navigation only; disabled by default for presentational examples."}, {"name": "scroll_root", "type": "string", "default": "unset", "description": "Optional CSS selector for the scroll container. Omit to track the viewport."}, {"name": "scroll_offset", "type": "number", "default": "0", "description": "Activation and scrolling offset in pixels, default 0. Match a fixed header or scroll-container padding."}, {"name": "track_hash", "type": "bool", "default": "True", "description": "Read the initial hash/hashchange and update the fragment on navigation; default True. Set False for an isolated scroll example."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Basic", "template": "table_of_contents_basic"}, {"title": "Interactive", "template": "table_of_contents_interactive"}, {"title": "Groups", "template": "table_of_contents_groups"}, {"title": "Nested sections", "template": "table_of_contents_nested_sections"}, {"title": "Custom title", "template": "table_of_contents_custom_title"}, {"title": "Flat sections", "template": "table_of_contents_flat"}, {"title": "Active section", "template": "table_of_contents_active"}, {"title": "Long titles", "template": "table_of_contents_long"}, {"title": "Compact panel", "template": "table_of_contents_compact"}, {"title": "Custom links", "template": "table_of_contents_slot"}, {"title": "Without title", "template": "audit_table_of_contents_without_title", "wide": true, "description": ""}, {"title": "Live scroll tracking", "template": "audit_table_of_contents_live_scroll_tracking", "wide": true, "description": ""}]}, {"name": "CommandPalette", "slug": "command-palette", "category": "Navigation", "status": "done", "reference": "https://kumo-ui.com/components/command-palette/", "props": [{"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "placeholder", "type": "string", "default": "unset", "description": "Placeholder; pass the documented value shown in the examples."}, {"name": "groups", "type": "list[dict]", "default": "unset", "description": "Sidebar: label/items groups; items support recursive children, id, value, href, view, icon, badge, active and open."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "trigger_label", "type": "string", "default": "unset", "description": "Combobox without endpoint: enable the button trigger and search inside its popup. Calendar: calendar trigger text."}, {"name": "aria_label", "type": "string", "default": "unset", "description": "Aria label; pass the documented value shown in the examples."}, {"name": "autocomplete", "type": "string", "default": "unset", "description": "Autocomplete; pass the documented value shown in the examples."}, {"name": "loading", "type": "bool", "default": "False", "description": "Loading; pass the documented value shown in the examples."}, {"name": "loading_label", "type": "string", "default": "unset", "description": "Loading label; pass the documented value shown in the examples."}, {"name": "default_shortcut", "type": "bool", "default": "False", "description": "Default shortcut; pass the documented value shown in the examples."}, {"name": "show_count", "type": "bool", "default": "False", "description": "Show count; pass the documented value shown in the examples."}, {"name": "close_label", "type": "string", "default": "unset", "description": "Close label; pass the documented value shown in the examples."}, {"name": "empty_message", "type": "string", "default": "unset", "description": "Empty message; pass the documented value shown in the examples."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Grouped commands", "template": "command_palette_grouped_commands"}, {"title": "Search", "template": "command_palette_search"}, {"title": "Empty result", "template": "command_palette_empty_result"}, {"title": "Custom placeholder", "template": "command_palette_placeholder"}, {"title": "Custom content", "template": "command_palette_slot"}, {"title": "Loading results", "template": "completion_command_palette_loading_results", "wide": true}, {"title": "Result breadcrumbs", "template": "completion_command_palette_result_breadcrumbs", "wide": true}, {"title": "Browser autocomplete disabled", "template": "completion_command_palette_browser_autocomplete_disabled", "wide": true}]}, {"name": "Dialog", "slug": "dialog", "category": "Overlay", "status": "done", "reference": "https://kumo-ui.com/components/dialog/", "props": [{"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "title", "type": "string", "default": "unset", "description": "Title; pass the documented value shown in the examples."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "trigger", "type": "string / HTML slot", "default": "unset", "description": "Trigger; pass the documented value shown in the examples."}, {"name": "trigger_label", "type": "string", "default": "unset", "description": "Combobox without endpoint: enable the button trigger and search inside its popup. Calendar: calendar trigger text."}, {"name": "trigger_variant", "type": "string", "default": "unset", "description": "Searchable button: default control styling or ghost."}, {"name": "trigger_size", "type": "string", "default": "unset", "description": "Trigger size; pass the documented value shown in the examples."}, {"name": "size", "type": "string", "default": "base", "description": "Size; pass the documented value shown in the examples."}, {"name": "alert", "type": "bool", "default": "False", "description": "Alert; pass the documented value shown in the examples."}, {"name": "footer", "type": "string / HTML slot", "default": "unset", "description": "Footer; pass the documented value shown in the examples."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "close_on_backdrop", "type": "bool", "default": "True", "description": "Close on backdrop; pass the documented value shown in the examples."}, {"name": "dismiss_disabled", "type": "bool", "default": "False", "description": "Dismiss disabled; pass the documented value shown in the examples."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Basic", "template": "dialog_basic"}, {"title": "Form", "template": "dialog_form"}, {"title": "Description", "template": "dialog_description"}, {"title": "Large", "template": "dialog_large"}, {"title": "Scrolling body", "template": "dialog_scrolling_body"}, {"title": "Small", "template": "dialog_small", "wide": true}, {"title": "Extra large", "template": "dialog_extra_large", "wide": true}, {"title": "Confirmation", "template": "dialog_confirmation", "wide": true}, {"title": "Nested", "template": "dialog_nested", "wide": true}, {"title": "Select in dialog", "template": "audit_dialog_select_in_dialog", "wide": true, "description": ""}, {"title": "Combobox in dialog", "template": "audit_dialog_combobox_in_dialog", "wide": true, "description": ""}, {"title": "Dropdown in dialog", "template": "audit_dialog_dropdown_in_dialog", "wide": true, "description": ""}, {"title": "Alert dialog semantics", "template": "audit_dialog_alert_dialog_semantics", "wide": true, "description": ""}]}, {"name": "Drawer", "slug": "drawer", "category": "Overlay", "status": "partial", "reference": "https://kumo-ui.com/components/dialog/", "props": [{"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "title", "type": "string", "default": "unset", "description": "Title; pass the documented value shown in the examples."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "trigger", "type": "string / HTML slot", "default": "unset", "description": "Trigger; pass the documented value shown in the examples."}, {"name": "trigger_label", "type": "string", "default": "unset", "description": "Combobox without endpoint: enable the button trigger and search inside its popup. Calendar: calendar trigger text."}, {"name": "trigger_variant", "type": "string", "default": "unset", "description": "Searchable button: default control styling or ghost."}, {"name": "width", "type": "string", "default": "unset", "description": "Width; pass the documented value shown in the examples."}, {"name": "side", "type": "string", "default": "component-specific", "description": "Side; pass the documented value shown in the examples."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "footer", "type": "string / HTML slot", "default": "unset", "description": "Footer; pass the documented value shown in the examples."}, {"name": "close_on_backdrop", "type": "bool", "default": "True", "description": "Close on backdrop; pass the documented value shown in the examples."}, {"name": "dismiss_disabled", "type": "bool", "default": "False", "description": "Dismiss disabled; pass the documented value shown in the examples."}, {"name": "close_label", "type": "string", "default": "unset", "description": "Close label; pass the documented value shown in the examples."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Basic", "template": "drawer_basic"}, {"title": "Form", "template": "drawer_form"}, {"title": "Description", "template": "drawer_description"}, {"title": "Large", "template": "drawer_large"}, {"title": "Scrolling body", "template": "drawer_scrolling_body"}, {"title": "Left side", "template": "drawer_left_side"}, {"title": "Compact", "template": "drawer_compact", "wide": true}, {"title": "Wide", "template": "drawer_wide", "wide": true}, {"title": "Backdrop controlled", "template": "drawer_backdrop_controlled", "wide": true}, {"title": "Descriptive panel", "template": "drawer_descriptive_panel", "wide": true}, {"title": "Nested panel", "template": "drawer_nested_panel", "wide": true}, {"title": "Form actions", "template": "drawer_form_actions", "wide": true}, {"title": "Navigation panel", "template": "drawer_navigation_panel", "wide": true}, {"title": "Top and bottom panels", "template": "recommendation_drawer_edges", "wide": true}, {"title": "Dismissal disabled", "template": "recommendation_drawer_pending", "wide": true}]}, {"name": "Tooltip", "slug": "tooltip", "category": "Overlay", "status": "done", "reference": "https://kumo-ui.com/components/tooltip/", "props": [{"name": "content", "type": "string", "default": "unset", "description": "Content; pass the documented value shown in the examples."}, {"name": "trigger", "type": "string / HTML slot", "default": "unset", "description": "Trigger; pass the documented value shown in the examples."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "side", "type": "string", "default": "top", "description": "Side; pass the documented value shown in the examples."}, {"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "delay_ms", "type": "number", "default": "0", "description": "Delay ms; pass the documented value shown in the examples."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Top", "template": "tooltip_top"}, {"title": "Bottom", "template": "tooltip_bottom"}, {"title": "Left", "template": "tooltip_left"}, {"title": "Right", "template": "tooltip_right"}, {"title": "Icon button", "template": "tooltip_icon_button"}, {"title": "Disabled button", "template": "tooltip_disabled_button"}, {"title": "Grouped tooltips", "template": "audit_tooltip_grouped_tooltips", "wide": true, "description": ""}, {"title": "Long content", "template": "audit_tooltip_long_content", "wide": true, "description": ""}, {"title": "Delay control", "template": "audit_tooltip_delay_control", "wide": true, "description": ""}]}, {"name": "Popover", "slug": "popover", "category": "Overlay", "status": "done", "reference": "https://kumo-ui.com/components/popover/", "props": [{"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "trigger", "type": "string / HTML slot", "default": "unset", "description": "Trigger; pass the documented value shown in the examples."}, {"name": "trigger_label", "type": "string", "default": "unset", "description": "Combobox without endpoint: enable the button trigger and search inside its popup. Calendar: calendar trigger text."}, {"name": "title", "type": "string", "default": "unset", "description": "Title; pass the documented value shown in the examples."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "shape", "type": "string", "default": "unset", "description": "Shape; pass the documented value shown in the examples."}, {"name": "icon", "type": "string", "default": "unset", "description": "Icon; pass the documented value shown in the examples."}, {"name": "aria_label", "type": "string", "default": "unset", "description": "Aria label; pass the documented value shown in the examples."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "side", "type": "string", "default": "bottom", "description": "Side; pass the documented value shown in the examples."}, {"name": "align", "type": "string", "default": "start", "description": "Align; pass the documented value shown in the examples."}, {"name": "open_on_hover", "type": "bool", "default": "False", "description": "Open on hover; pass the documented value shown in the examples."}, {"name": "virtual_anchor", "type": "bool", "default": "False", "description": "Virtual anchor; pass the documented value shown in the examples."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Basic", "template": "popover_basic"}, {"title": "Form", "template": "popover_form"}, {"title": "Top", "template": "popover_top"}, {"title": "Start aligned", "template": "popover_start_aligned"}, {"title": "Centered", "template": "popover_centered"}, {"title": "End aligned", "template": "popover_end_aligned"}, {"title": "Scrollable content", "template": "audit_popover_scrollable_content", "wide": true, "description": ""}, {"title": "Explicit close button", "template": "audit_popover_explicit_close_button", "wide": true, "description": ""}, {"title": "Open on hover", "template": "audit_popover_open_on_hover", "wide": true, "description": ""}, {"title": "Pointer anchor", "template": "audit_popover_pointer_anchor", "wide": true, "description": ""}]}, {"name": "Toasty", "slug": "toast", "category": "Feedback", "status": "done", "reference": "https://kumo-ui.com/components/toast/", "props": [{"name": "title", "type": "string", "default": "unset", "description": "Title; pass the documented value shown in the examples."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "variant", "type": "string", "default": "component-specific", "description": "Variant; pass the documented value shown in the examples."}, {"name": "icon", "type": "string", "default": "unset", "description": "Icon; pass the documented value shown in the examples."}, {"name": "dismissible", "type": "bool", "default": "True", "description": "Dismissible; pass the documented value shown in the examples."}, {"name": "action", "type": "string / HTML slot", "default": "unset", "description": "Action; pass the documented value shown in the examples."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Default", "template": "toast_default"}, {"title": "Success", "template": "toast_success"}, {"title": "Warning", "template": "toast_warning"}, {"title": "Error", "template": "toast_error"}, {"title": "Information", "template": "toast_information"}, {"title": "Persistent", "template": "toast_persistent"}, {"title": "Description only", "template": "toast_description_only", "wide": false}, {"title": "With action", "template": "toast_with_action", "wide": false}, {"title": "Multiple toasts", "template": "toast_multiple", "wide": false}, {"title": "Update", "template": "toast_update", "wide": false}, {"title": "Promise", "template": "toast_promise", "wide": false}, {"title": "Non dismissible", "template": "toast_non_dismissible", "wide": false}]}, {"name": "Table", "slug": "table", "category": "Data", "status": "done", "reference": "https://kumo-ui.com/components/table/", "props": [{"name": "columns", "type": "list[dict]", "default": "unset", "description": "Flow: list of {nodes: [...]}; Table: key/label/width/align/sortable/mono/nowrap/hidden_label, optional sticky='left' or 'right'."}, {"name": "rows", "type": "list[dict]", "default": "unset", "description": "Cell values are escaped scalars or dictionaries: text/badge/sub/href/mono, or actions plus an accessible label for the row menu."}, {"name": "row_key", "type": "string", "default": "key", "description": "Table row identity field, default key. Missing values use the row number; supply stable identifiers for application selection across sorting/pagination. Zero is retained."}, {"name": "selectable", "type": "bool", "default": "False", "description": "Selectable; pass the documented value shown in the examples."}, {"name": "caption", "type": "string", "default": "unset", "description": "Caption; pass the documented value shown in the examples."}, {"name": "sort", "type": "string", "default": "unset", "description": "Sort; pass the documented value shown in the examples."}, {"name": "dir", "type": "string", "default": "unset", "description": "Dir; pass the documented value shown in the examples."}, {"name": "sort_param", "type": "string", "default": "unset", "description": "Sort param; pass the documented value shown in the examples."}, {"name": "dir_param", "type": "string", "default": "unset", "description": "Dir param; pass the documented value shown in the examples."}, {"name": "base_url", "type": "string", "default": "unset", "description": "Base url; pass the documented value shown in the examples."}, {"name": "base_query", "type": "string", "default": "unset", "description": "Base query; pass the documented value shown in the examples."}, {"name": "hx_target", "type": "string", "default": "unset", "description": "Hx target; pass the documented value shown in the examples."}, {"name": "hx_swap", "type": "string", "default": "unset", "description": "Hx swap; pass the documented value shown in the examples."}, {"name": "fixed", "type": "bool", "default": "False", "description": "Fixed; pass the documented value shown in the examples."}, {"name": "sticky_column", "type": "bool", "default": "False", "description": "Legacy Table shortcut: pin the first column to the left. Prefer explicit column.sticky for left/right edges."}, {"name": "sticky_header", "type": "bool", "default": "False", "description": "Pin Table headers to the top of a constrained scroll container; pass a height class such as max-h-64."}, {"name": "compact_header", "type": "bool", "default": "False", "description": "Compact header; pass the documented value shown in the examples."}, {"name": "resizable", "type": "bool", "default": "False", "description": "Resizable; pass the documented value shown in the examples."}, {"name": "empty_title", "type": "string", "default": "unset", "description": "Empty title; pass the documented value shown in the examples."}, {"name": "empty_description", "type": "string", "default": "unset", "description": "Empty description; pass the documented value shown in the examples."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Basic", "template": "table_basic", "wide": true}, {"title": "Sticky column", "template": "table_sticky_actions", "wide": true, "description": "The actions column stays pinned to the right during horizontal scrolling. Its opaque background follows each row, with a gradient along the inner edge."}, {"title": "Sticky columns on both sides", "template": "table_sticky_both_sides", "wide": true}, {"title": "Selection", "template": "table_selection", "wide": true}, {"title": "Empty", "template": "table_empty", "wide": true}, {"title": "Sortable", "template": "table_sortable", "wide": true}, {"title": "Responsive", "template": "table_responsive", "wide": true}, {"title": "Loading", "template": "table_loading", "wide": true}, {"title": "Live server table", "template": "table_live_server_table", "wide": true}, {"title": "Column alignment", "template": "table_column_alignment", "wide": true}, {"title": "Compact header", "template": "audit_table_compact_header", "wide": true, "description": ""}, {"title": "Fixed column widths", "template": "audit_table_fixed_column_widths", "wide": true, "description": ""}, {"title": "Sticky first column", "template": "audit_table_sticky_first_column", "wide": true, "description": ""}, {"title": "Initially selected row", "template": "audit_table_initially_selected_row", "wide": true, "description": ""}, {"title": "Compact and sticky", "template": "audit_table_compact_and_sticky", "wide": true, "description": ""}, {"title": "Resizable columns", "template": "completion_table_resizable_columns", "wide": true}]}, {"name": "DatePicker", "slug": "date-picker", "category": "Input", "status": "partial", "reference": "https://kumo-ui.com/components/date-picker/", "props": [{"name": "name", "type": "string", "default": "unset", "description": "Name; pass the documented value shown in the examples."}, {"name": "value", "type": "string", "default": "unset", "description": "Value; pass the documented value shown in the examples."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "error", "type": "string", "default": "unset", "description": "Validation message; implies error styling and accessible error association."}, {"name": "required", "type": "bool", "default": "False", "description": "Required; pass the documented value shown in the examples."}, {"name": "disabled", "type": "bool", "default": "False", "description": "Disabled; pass the documented value shown in the examples."}, {"name": "type", "type": "string", "default": "date", "description": "Type; pass the documented value shown in the examples."}, {"name": "min", "type": "ISO date / datetime string", "default": "unset", "description": "Inclusive date or datetime bound, using the same ISO format as value. Unavailable calendar days are disabled."}, {"name": "max", "type": "ISO date / datetime string", "default": "unset", "description": "Inclusive date or datetime bound, using the same ISO format as value. Unavailable calendar days are disabled."}, {"name": "size", "type": "string", "default": "base", "description": "Size; pass the documented value shown in the examples."}, {"name": "variant", "type": "string", "default": "component-specific", "description": "Variant; pass the documented value shown in the examples."}, {"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "display", "type": "string", "default": "popover", "description": "popover (default for dates, datetimes and ranges), calendar (inline), or explicit native. Time/month use native controls. Custom calendars never invoke the browser date popup."}, {"name": "calendar_mode", "type": "string", "default": "single", "description": "DatePicker calendar rendering: single (default), multiple, or range. DateRangePicker always selects a range."}, {"name": "locale", "type": "string", "default": "en", "description": "Intl locale for month headings, full date labels and weekdays; default en. Action labels are supplied separately."}, {"name": "week_starts_on", "type": "number", "default": "0", "description": "0=Sunday (default, matching Kumo) through 6=Saturday. Keyboard Home/End follow this setting."}, {"name": "number_of_months", "type": "number", "default": "1", "description": "Calendar month panels, bounded to 1-12; default 1. Panels wrap on small screens."}, {"name": "fixed_weeks", "type": "bool", "default": "False", "description": "Render six calendar rows. Default False renders only the weeks in the month, matching Kumo."}, {"name": "month", "type": "string", "default": "unset", "description": "Month; pass the documented value shown in the examples."}, {"name": "min_days", "type": "number", "default": "unset", "description": "Min days; pass the documented value shown in the examples."}, {"name": "max_days", "type": "number", "default": "unset", "description": "Max days; pass the documented value shown in the examples."}, {"name": "disabled_dates", "type": "string", "default": "unset", "description": "Disabled dates; pass the documented value shown in the examples."}, {"name": "presets", "type": "bool / list[dict]", "default": "unset", "description": "Presets; pass the documented value shown in the examples."}, {"name": "trigger_label", "type": "string", "default": "unset", "description": "Combobox without endpoint: enable the button trigger and search inside its popup. Calendar: calendar trigger text."}, {"name": "labels", "type": "dict", "default": "{}", "description": "Escaped text overrides: previous_month, next_month, open_calendar, calendar_label, navigation, selected_dates, time, invalid_date, unavailable, incomplete_range, single_date, range_length and blocked_range. trigger_label takes precedence over open_calendar."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}, {"name": "calendar.mode", "type": "string / list", "default": "unset", "description": "Use mode with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode."}, {"name": "calendar.month", "type": "string / list", "default": "unset", "description": "Use month with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode."}, {"name": "calendar.min_days", "type": "number", "default": "unset", "description": "Use min_days with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode."}, {"name": "calendar.max_days", "type": "number", "default": "unset", "description": "Use max_days with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode."}, {"name": "calendar.disabled_dates", "type": "string / list", "default": "unset", "description": "Use disabled_dates with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode."}, {"name": "calendar.presets", "type": "bool / list[dict]", "default": "unset", "description": "Use presets with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode."}, {"name": "calendar.display", "type": "string / list", "default": "unset", "description": "Use display with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode."}, {"name": "calendar.locale", "type": "string / list", "default": "unset", "description": "Use locale with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode."}, {"name": "calendar.week_starts_on", "type": "number", "default": "unset", "description": "Use week_starts_on with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode."}, {"name": "calendar.number_of_months", "type": "number", "default": "unset", "description": "Use number_of_months with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode."}, {"name": "calendar.fixed_weeks", "type": "bool", "default": "unset", "description": "Use fixed_weeks with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode."}, {"name": "calendar.labels", "type": "dict", "default": "unset", "description": "Escaped text overrides: previous_month, next_month, open_calendar, calendar_label, navigation, selected_dates, time, invalid_date, unavailable, incomplete_range, single_date, range_length and blocked_range. trigger_label takes precedence over open_calendar."}], "examples": [{"title": "Single date", "template": "date_picker_single_date", "wide": true}, {"title": "Date and time", "template": "date_picker_date_and_time", "wide": true}, {"title": "Boundaries", "template": "date_picker_boundaries", "wide": true}, {"title": "Disabled", "template": "date_picker_disabled", "wide": true}, {"title": "Error", "template": "date_picker_error", "wide": true}, {"title": "Time", "template": "date_picker_time", "wide": true}, {"title": "Month", "template": "date_picker_month", "wide": true}, {"title": "Required", "template": "date_picker_required", "wide": true}, {"title": "Single calendar", "template": "audit_date_picker_single_calendar", "wide": true, "description": ""}, {"title": "Multiple date selection", "template": "audit_date_picker_multiple_date_selection", "wide": true, "description": ""}, {"title": "Range calendar", "template": "audit_date_picker_range_calendar", "wide": true, "description": ""}, {"title": "Range length bounds", "template": "audit_date_picker_range_length_bounds", "wide": true, "description": ""}, {"title": "Unavailable dates", "template": "audit_date_picker_unavailable_dates", "wide": true, "description": ""}, {"title": "Calendar presets", "template": "audit_date_picker_calendar_presets", "wide": true, "description": ""}, {"title": "Calendar in popover", "template": "audit_date_picker_calendar_in_popover", "wide": true, "description": ""}, {"title": "Range in popover", "template": "audit_date_picker_range_in_popover", "wide": true, "description": ""}, {"title": "Localized popup calendar", "template": "recommendation_date_popup", "wide": true}, {"title": "Two month calendar", "template": "recommendation_date_months", "wide": true}]}, {"name": "DateRangePicker", "slug": "date-range-picker", "category": "Input", "status": "partial", "reference": "https://kumo-ui.com/components/date-picker/", "props": [{"name": "start_name", "type": "string", "default": "unset", "description": "Start name; pass the documented value shown in the examples."}, {"name": "end_name", "type": "string", "default": "unset", "description": "End name; pass the documented value shown in the examples."}, {"name": "start_value", "type": "number", "default": "unset", "description": "Start value; pass the documented value shown in the examples."}, {"name": "end_value", "type": "number", "default": "unset", "description": "End value; pass the documented value shown in the examples."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "error", "type": "string", "default": "unset", "description": "Validation message; implies error styling and accessible error association."}, {"name": "required", "type": "bool", "default": "False", "description": "Required; pass the documented value shown in the examples."}, {"name": "disabled", "type": "bool", "default": "False", "description": "Disabled; pass the documented value shown in the examples."}, {"name": "min", "type": "ISO date / datetime string", "default": "unset", "description": "Inclusive date or datetime bound, using the same ISO format as value. Unavailable calendar days are disabled."}, {"name": "max", "type": "ISO date / datetime string", "default": "unset", "description": "Inclusive date or datetime bound, using the same ISO format as value. Unavailable calendar days are disabled."}, {"name": "presets", "type": "bool / list[dict]", "default": "unset", "description": "Presets; pass the documented value shown in the examples."}, {"name": "size", "type": "string", "default": "base", "description": "Size; pass the documented value shown in the examples."}, {"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}, {"name": "display", "type": "string", "default": "popover", "description": "popover (default for dates, datetimes and ranges), calendar (inline), or explicit native. Time/month use native controls. Custom calendars never invoke the browser date popup."}, {"name": "locale", "type": "string", "default": "en", "description": "Intl locale for month headings, full date labels and weekdays; default en. Action labels are supplied separately."}, {"name": "week_starts_on", "type": "number", "default": "0", "description": "0=Sunday (default, matching Kumo) through 6=Saturday. Keyboard Home/End follow this setting."}, {"name": "number_of_months", "type": "number", "default": "1", "description": "Calendar month panels, bounded to 1-12; default 1. Panels wrap on small screens."}, {"name": "fixed_weeks", "type": "bool", "default": "False", "description": "Render six calendar rows. Default False renders only the weeks in the month, matching Kumo."}, {"name": "month", "type": "string", "default": "unset", "description": "Month; pass the documented value shown in the examples."}, {"name": "min_days", "type": "number", "default": "unset", "description": "Min days; pass the documented value shown in the examples."}, {"name": "max_days", "type": "number", "default": "unset", "description": "Max days; pass the documented value shown in the examples."}, {"name": "disabled_dates", "type": "string", "default": "unset", "description": "Disabled dates; pass the documented value shown in the examples."}, {"name": "trigger_label", "type": "string", "default": "unset", "description": "Combobox without endpoint: enable the button trigger and search inside its popup. Calendar: calendar trigger text."}, {"name": "labels", "type": "dict", "default": "{}", "description": "Escaped text overrides: previous_month, next_month, open_calendar, calendar_label, navigation, selected_dates, time, invalid_date, unavailable, incomplete_range, single_date, range_length and blocked_range. trigger_label takes precedence over open_calendar."}, {"name": "calendar.mode", "type": "string / list", "default": "unset", "description": "Use mode with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode."}, {"name": "calendar.month", "type": "string / list", "default": "unset", "description": "Use month with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode."}, {"name": "calendar.min_days", "type": "number", "default": "unset", "description": "Use min_days with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode."}, {"name": "calendar.max_days", "type": "number", "default": "unset", "description": "Use max_days with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode."}, {"name": "calendar.disabled_dates", "type": "string / list", "default": "unset", "description": "Use disabled_dates with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode."}, {"name": "calendar.presets", "type": "bool / list[dict]", "default": "unset", "description": "Use presets with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode."}, {"name": "calendar.display", "type": "string / list", "default": "unset", "description": "Use display with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode."}, {"name": "calendar.locale", "type": "string / list", "default": "unset", "description": "Use locale with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode."}, {"name": "calendar.week_starts_on", "type": "number", "default": "unset", "description": "Use week_starts_on with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode."}, {"name": "calendar.number_of_months", "type": "number", "default": "unset", "description": "Use number_of_months with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode."}, {"name": "calendar.fixed_weeks", "type": "bool", "default": "unset", "description": "Use fixed_weeks with wdj/components/calendar.html. Date fields forward calendar parameters; use calendar_mode for DatePicker mode."}, {"name": "calendar.labels", "type": "dict", "default": "unset", "description": "Escaped text overrides: previous_month, next_month, open_calendar, calendar_label, navigation, selected_dates, time, invalid_date, unavailable, incomplete_range, single_date, range_length and blocked_range. trigger_label takes precedence over open_calendar."}], "examples": [{"title": "Date range", "template": "date_range_picker_date_range", "wide": true}, {"title": "Presets", "template": "date_range_picker_presets", "wide": true}, {"title": "Boundaries", "template": "date_range_picker_boundaries", "wide": true}, {"title": "Disabled", "template": "date_range_picker_disabled", "wide": true}, {"title": "Error", "template": "date_range_picker_error", "wide": true}, {"title": "Range calendar and presets", "template": "audit_date_range_picker_range_calendar_and_presets", "wide": true, "description": ""}, {"title": "Popup with native range names", "template": "recommendation_range_popup", "wide": true}]}, {"name": "Combobox / Autocomplete", "slug": "combobox", "category": "Input", "status": "partial", "reference": "https://kumo-ui.com/components/combobox/", "props": [{"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "name", "type": "string", "default": "unset", "description": "Name; pass the documented value shown in the examples."}, {"name": "value", "type": "string", "default": "unset", "description": "Value; pass the documented value shown in the examples."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "aria_label", "type": "string", "default": "unset", "description": "Aria label; pass the documented value shown in the examples."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "error", "type": "string", "default": "unset", "description": "Validation message; implies error styling and accessible error association."}, {"name": "required", "type": "bool", "default": "False", "description": "Required; pass the documented value shown in the examples."}, {"name": "disabled", "type": "bool", "default": "False", "description": "Disabled; pass the documented value shown in the examples."}, {"name": "placeholder", "type": "string", "default": "unset", "description": "Placeholder; pass the documented value shown in the examples."}, {"name": "endpoint", "type": "string", "default": "unset", "description": "Application-owned server endpoint; dynamic HTMX fragments use no-store and Vary: HX-Request."}, {"name": "delay", "type": "string", "default": "300ms", "description": "Delay; pass the documented value shown in the examples."}, {"name": "min_chars", "type": "number", "default": "1", "description": "Min chars; pass the documented value shown in the examples."}, {"name": "options", "type": "list[dict]", "default": "[]", "description": "Select: value/label/display_label/disabled/selected or groups with options. Combobox input: value/label/disabled/group/icon/description; button search also supports Select groups."}, {"name": "multiple", "type": "bool", "default": "False", "description": "Multiple; pass the documented value shown in the examples."}, {"name": "selected_values", "type": "list[dict]", "default": "unset", "description": "Selected values; pass the documented value shown in the examples."}, {"name": "input_side", "type": "string", "default": "unset", "description": "Multiple Combobox: top (default) or right; right places the search beside chips and wraps on small screens."}, {"name": "size", "type": "string", "default": "base", "description": "Size; pass the documented value shown in the examples."}, {"name": "labels", "type": "dict", "default": "{}", "description": "Escaped text overrides: search_placeholder, list_label, empty_message, required_message, remove_label, clear_selection and show_options. Explicit placeholder takes precedence over search_placeholder; remote empty messages come from the endpoint."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "trigger_label", "type": "string", "default": "unset", "description": "Combobox without endpoint: enable the button trigger and search inside its popup. Calendar: calendar trigger text."}, {"name": "trigger_variant", "type": "string", "default": "unset", "description": "Searchable button: default control styling or ghost."}, {"name": "freeform", "type": "bool", "default": "False", "description": "Omit the dropdown trigger for an editable Autocomplete input. Filtering, keyboard selection and typed form values remain available."}, {"name": "field_class", "type": "string", "default": "unset", "description": "Field class; pass the documented value shown in the examples."}], "examples": [{"title": "Basic", "template": "combobox_fruits", "wide": true}, {"title": "Server search", "template": "combobox_server_search", "wide": true, "description": "Type a query, then use Arrow keys and Enter to choose a result."}, {"title": "Local filtering", "template": "combobox_local_filtering", "wide": true}, {"title": "Initial options", "template": "combobox_initial_options", "wide": true}, {"title": "Selected value", "template": "combobox_selected_value", "wide": true}, {"title": "Empty result", "template": "combobox_empty_result", "wide": true}, {"title": "Disabled", "template": "combobox_disabled", "wide": true}, {"title": "Error", "template": "combobox_error", "wide": true}, {"title": "Required", "template": "combobox_required", "wide": true}, {"title": "Multiple selection", "template": "combobox_multiple_selection", "wide": true}, {"title": "Description", "template": "combobox_description", "wide": true}, {"title": "Custom placeholder", "template": "combobox_custom_placeholder", "wide": true}, {"title": "Disabled options", "template": "combobox_disabled_options", "wide": true}, {"title": "Keyboard navigation", "template": "combobox_keyboard_navigation", "wide": true}, {"title": "Searchable item (inside)", "template": "combobox_search_inside"}, {"title": "Searchable select with placeholder", "template": "combobox_search_placeholder"}, {"title": "Custom trigger", "template": "combobox_search_custom"}, {"title": "Searchable popup groups", "template": "combobox_search_groups"}, {"title": "All sizes", "template": "audit_combobox_all_sizes", "wide": true, "description": ""}, {"title": "Grouped rich options", "template": "audit_combobox_grouped_rich_options", "wide": true, "description": ""}, {"title": "Controlled local value", "template": "audit_combobox_controlled_local_value", "wide": true, "description": ""}, {"title": "Required chips beside search", "template": "recommendation_combo_required", "wide": true}]}, {"name": "TagInput", "slug": "tag-input", "category": "Input", "status": "done", "reference": "https://kumo-ui.com/components/tag-input/", "props": [{"name": "name", "type": "string", "default": "unset", "description": "Name; pass the documented value shown in the examples."}, {"name": "value", "type": "list[str] / CSV", "default": "unset", "description": "Value; pass the documented value shown in the examples."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "error", "type": "string", "default": "unset", "description": "Validation message; implies error styling and accessible error association."}, {"name": "placeholder", "type": "string", "default": "unset", "description": "Placeholder; pass the documented value shown in the examples."}, {"name": "max_values", "type": "number", "default": "unset", "description": "Max values; pass the documented value shown in the examples."}, {"name": "disabled", "type": "bool", "default": "False", "description": "Disabled; pass the documented value shown in the examples."}, {"name": "readonly", "type": "bool", "default": "False", "description": "Readonly; pass the documented value shown in the examples."}, {"name": "list", "type": "string", "default": "unset", "description": "List; pass the documented value shown in the examples."}, {"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "labels", "type": "dict", "default": "unset", "description": "Labels; pass the documented value shown in the examples."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Default tags", "template": "tag_input_default_tags", "wide": true}, {"title": "Maximum tags", "template": "tag_input_maximum_tags", "wide": true}, {"title": "Read only", "template": "tag_input_read_only", "wide": true}, {"title": "Suggestions", "template": "tag_input_suggestions", "wide": true}, {"title": "Localized messages", "template": "audit_tag_input_localized_messages", "wide": true, "description": ""}]}, {"name": "Slider", "slug": "slider", "category": "Input", "status": "done", "reference": "https://kumo-ui.com/components/slider/", "props": [{"name": "name", "type": "string", "default": "unset", "description": "Name; pass the documented value shown in the examples."}, {"name": "value", "type": "number", "default": "unset", "description": "Value; pass the documented value shown in the examples."}, {"name": "min", "type": "number", "default": "0 (Slider/Meter)", "description": "Min; pass the documented value shown in the examples."}, {"name": "max", "type": "number", "default": "100 (Slider/Meter)", "description": "Max; pass the documented value shown in the examples."}, {"name": "step", "type": "number", "default": "1 (Slider)", "description": "Step; pass the documented value shown in the examples."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "error", "type": "string", "default": "unset", "description": "Validation message; implies error styling and accessible error association."}, {"name": "disabled", "type": "bool", "default": "False", "description": "Disabled; pass the documented value shown in the examples."}, {"name": "required", "type": "bool", "default": "False", "description": "Required; pass the documented value shown in the examples."}, {"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "show_value", "type": "bool", "default": "True", "description": "Show value; pass the documented value shown in the examples."}, {"name": "value_suffix", "type": "string", "default": "unset", "description": "Value suffix; pass the documented value shown in the examples."}, {"name": "range", "type": "bool", "default": "False", "description": "Range; pass the documented value shown in the examples."}, {"name": "start_value", "type": "number", "default": "unset", "description": "Start value; pass the documented value shown in the examples."}, {"name": "end_value", "type": "number", "default": "unset", "description": "End value; pass the documented value shown in the examples."}, {"name": "size", "type": "string", "default": "base", "description": "Size; pass the documented value shown in the examples."}, {"name": "format", "type": "string", "default": "unset", "description": "Slider value display: percent or currency; numeric values remain unchanged for form submission."}, {"name": "locale", "type": "string", "default": "unset", "description": "Intl locale for month headings, full date labels and weekdays; default en. Action labels are supplied separately."}, {"name": "currency", "type": "string", "default": "unset", "description": "Currency; pass the documented value shown in the examples."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Price range", "template": "slider_two_values"}, {"title": "Basic", "template": "slider_basic"}, {"title": "Steps", "template": "slider_steps", "wide": true}, {"title": "Disabled", "template": "slider_disabled", "wide": true}, {"title": "Minimum value", "template": "slider_minimum_value", "wide": true}, {"title": "Custom bounds", "template": "slider_custom_bounds", "wide": true}, {"title": "Hidden value", "template": "slider_hidden_value", "wide": true}, {"title": "Formatted percentage", "template": "audit_slider_formatted_percentage", "wide": true, "description": ""}, {"title": "Slider sizes", "template": "audit_slider_slider_sizes", "wide": true, "description": ""}, {"title": "Controlled brightness", "template": "audit_slider_controlled_brightness", "wide": true, "description": ""}]}, {"name": "Chart", "slug": "timeseries-chart", "category": "Data Visualization", "status": "done", "reference": "https://kumo-ui.com/charts/timeseries/", "props": [{"name": "option", "type": "dict", "default": "unset", "description": "Option; pass the documented value shown in the examples."}, {"name": "height", "type": "number", "default": "288 (Chart)", "description": "Height; pass the documented value shown in the examples."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "loading", "type": "bool", "default": "False", "description": "Loading; pass the documented value shown in the examples."}, {"name": "empty", "type": "bool", "default": "False", "description": "Empty; pass the documented value shown in the examples."}, {"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Line", "template": "chart_line", "wide": true}, {"title": "Area", "template": "chart_area", "wide": true}, {"title": "Stacked bars", "template": "chart_bar", "wide": true}, {"title": "Donut", "template": "chart_donut", "wide": true}, {"title": "Loading", "template": "chart_loading", "wide": true}, {"title": "Stepped line", "template": "chart_step", "wide": true}, {"title": "Stacked area", "template": "chart_stacked_area", "wide": true}, {"title": "Category axis", "template": "chart_category", "wide": true}, {"title": "Threshold", "template": "chart_threshold", "wide": true}, {"title": "Zoom", "template": "chart_zoom", "wide": true}, {"title": "Grouped bars", "template": "chart_grouped_bar", "wide": true}, {"title": "Horizontal bars", "template": "chart_horizontal", "wide": true}, {"title": "Pie", "template": "chart_pie", "wide": true}, {"title": "Legend", "template": "chart_legend", "wide": true}, {"title": "Nested donut", "template": "chart_nested", "wide": true}, {"title": "Empty", "template": "chart_empty", "wide": true}, {"title": "Straight line", "template": "chart_straight", "wide": true}, {"title": "Visible points", "template": "chart_points", "wide": true}, {"title": "Missing values", "template": "chart_gaps", "wide": true}, {"title": "Multiple lines", "template": "chart_multiple_lines", "wide": true}, {"title": "Capacity bounds", "template": "chart_bounds", "wide": true}, {"title": "Single bars", "template": "chart_single_bars", "wide": true}, {"title": "Zoom slider", "template": "chart_zoom_slider", "wide": true}, {"title": "Reference markers", "template": "completion_timeseries_chart_reference_markers", "wide": true}, {"title": "Formatted axes and tooltip", "template": "completion_timeseries_chart_formatted_axes_and_tooltip", "wide": true}, {"title": "Gradient fill", "template": "completion_timeseries_chart_gradient_fill", "wide": true}, {"title": "Incomplete interval", "template": "completion_timeseries_chart_incomplete_interval", "wide": true}, {"title": "Custom footer", "template": "completion_timeseries_chart_custom_footer", "wide": true}, {"title": "Crosshair cursor", "template": "completion_timeseries_chart_crosshair_cursor", "wide": true}, {"title": "Legend toggle and highlight", "template": "completion_timeseries_chart_legend_toggle_and_highlight", "wide": true}]}, {"name": "GlobeMap / ChoroplethMap / BubbleMap", "slug": "maps", "category": "Data Visualization", "status": "partial", "reference": "https://kumo-ui.com/charts/maps/", "props": [{"name": "data", "type": "dict", "default": "unset", "description": "Map state produced by wdj.maps.map_data(markers, values, kind='bubble|choropleth|globe')."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "rotation", "type": "string", "default": "unset", "description": "Globe initial longitude and latitude rotation, comma separated; default -10,-20."}, {"name": "draggable", "type": "bool", "default": "False", "description": "Draggable; pass the documented value shown in the examples."}, {"name": "auto_rotate", "type": "bool", "default": "False", "description": "Auto rotate; pass the documented value shown in the examples."}, {"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Bubble map", "template": "audit_maps_bubble_map", "wide": true, "description": ""}, {"title": "Country values", "template": "audit_maps_country_values", "wide": true, "description": ""}, {"title": "SVG globe", "template": "audit_maps_svg_globe", "wide": true, "description": ""}, {"title": "Interactive location details", "template": "audit_maps_interactive_location_details", "wide": true, "description": ""}, {"title": "Rotating globe", "template": "audit_maps_rotating_globe", "wide": true, "description": ""}, {"title": "Custom markers and details", "template": "recommendation_map_markers", "wide": true}]}, {"name": "Chart legend", "slug": "chart-legend", "category": "Data Visualization", "status": "done", "reference": "https://kumo-ui.com/charts/", "props": [{"name": "items", "type": "list[dict]", "default": "[]", "description": "Component-specific item dictionaries; see each rendered source example and integration context."}, {"name": "target", "type": "string", "default": "unset", "description": "Target; pass the documented value shown in the examples."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "compact", "type": "bool", "default": "False", "description": "Compact; pass the documented value shown in the examples."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Large legend items", "template": "completion_chart_legend_large_legend_items", "wide": true}, {"title": "Small legend items", "template": "completion_chart_legend_small_legend_items", "wide": true}, {"title": "Inactive and loading states", "template": "completion_chart_legend_inactive_and_loading_states", "wide": true}]}, {"name": "Custom charts", "slug": "custom-chart", "category": "Data Visualization", "status": "done", "reference": "https://kumo-ui.com/charts/custom/", "props": [{"name": "option", "type": "dict", "default": "unset", "description": "Option; pass the documented value shown in the examples."}, {"name": "height", "type": "number", "default": "288 (Chart)", "description": "Height; pass the documented value shown in the examples."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "loading", "type": "bool", "default": "False", "description": "Loading; pass the documented value shown in the examples."}, {"name": "empty", "type": "bool", "default": "False", "description": "Empty; pass the documented value shown in the examples."}, {"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Custom pie", "template": "audit_custom_chart_pie", "wide": true}, {"title": "HTML tooltip template", "template": "audit_custom_chart_tooltip", "wide": true}]}, {"name": "SettingsSection", "slug": "settings-section", "category": "Blocks", "status": "done", "reference": null, "props": [{"name": "title", "type": "string", "default": "unset", "description": "Title; pass the documented value shown in the examples."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "variant", "type": "string", "default": "component-specific", "description": "Variant; pass the documented value shown in the examples."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "footer", "type": "string / HTML slot", "default": "unset", "description": "Footer; pass the documented value shown in the examples."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Preferences form", "template": "settings_section_form", "wide": true}, {"title": "Access preferences", "template": "settings_section_access", "wide": true}, {"title": "Danger section", "template": "settings_section_danger", "wide": true}]}, {"name": "StatsGrid", "slug": "stats-grid", "category": "Blocks", "status": "done", "reference": null, "props": [{"name": "metrics", "type": "list[dict]", "default": "unset", "description": "Metrics; pass the documented value shown in the examples."}, {"name": "columns", "type": "number", "default": "unset", "description": "Flow: list of {nodes: [...]}; Table: key/label/width/align/sortable/mono/nowrap/hidden_label, optional sticky='left' or 'right'."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Overview metrics", "template": "stats_grid_overview", "wide": true}, {"title": "Two columns", "template": "stats_grid_two_columns", "wide": true}, {"title": "Empty and zero values", "template": "stats_grid_zero", "wide": true}]}, {"name": "FilterBar", "slug": "filter-bar", "category": "Blocks", "status": "done", "reference": null, "props": [{"name": "action", "type": "string / HTML slot", "default": "unset", "description": "Action; pass the documented value shown in the examples."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Search resources", "template": "filter_bar_search", "wide": true}, {"title": "Search and region", "template": "filter_bar_region", "wide": true}, {"title": "HTMX catalog search", "template": "filter_bar_htmx", "wide": true}]}, {"name": "DetailList", "slug": "detail-list", "category": "Blocks", "status": "done", "reference": null, "props": [{"name": "title", "type": "string", "default": "unset", "description": "Title; pass the documented value shown in the examples."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "items", "type": "list[dict]", "default": "[]", "description": "Component-specific item dictionaries; see each rendered source example and integration context."}, {"name": "columns", "type": "number", "default": "unset", "description": "Flow: list of {nodes: [...]}; Table: key/label/width/align/sortable/mono/nowrap/hidden_label, optional sticky='left' or 'right'."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Resource metadata", "template": "detail_list_resource", "wide": true}, {"title": "Two columns", "template": "detail_list_columns", "wide": true}, {"title": "Links and missing values", "template": "detail_list_links", "wide": true}]}, {"name": "ActionCard", "slug": "action-card", "category": "Blocks", "status": "done", "reference": null, "props": [{"name": "title", "type": "string", "default": "unset", "description": "Title; pass the documented value shown in the examples."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "icon", "type": "string", "default": "unset", "description": "Icon; pass the documented value shown in the examples."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Getting started", "template": "action_card_start", "wide": true}, {"title": "Resource actions", "template": "action_card_resource", "wide": true}, {"title": "Local checklist", "template": "action_card_checklist", "wide": true}]}, {"name": "MenuBar", "slug": "menu-bar", "category": "Navigation", "status": "done", "reference": "https://kumo-ui.com/registry/", "props": [{"name": "items", "type": "list[dict]", "default": "[]", "description": "Component-specific item dictionaries; see each rendered source example and integration context."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Default", "template": "menu_bar_default", "wide": true}, {"title": "Selected option", "template": "menu_bar_selected_option", "wide": true}, {"title": "Compact layout", "template": "menu_bar_compact_layout", "wide": true}]}, {"name": "Autocomplete", "slug": "autocomplete", "category": "Input", "status": "done", "reference": "https://kumo-ui.com/components/autocomplete/", "props": [{"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "name", "type": "string", "default": "unset", "description": "Name; pass the documented value shown in the examples."}, {"name": "value", "type": "string", "default": "unset", "description": "Value; pass the documented value shown in the examples."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "aria_label", "type": "string", "default": "unset", "description": "Aria label; pass the documented value shown in the examples."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "error", "type": "string", "default": "unset", "description": "Validation message; implies error styling and accessible error association."}, {"name": "required", "type": "bool", "default": "False", "description": "Required; pass the documented value shown in the examples."}, {"name": "disabled", "type": "bool", "default": "False", "description": "Disabled; pass the documented value shown in the examples."}, {"name": "placeholder", "type": "string", "default": "unset", "description": "Placeholder; pass the documented value shown in the examples."}, {"name": "endpoint", "type": "string", "default": "unset", "description": "Application-owned server endpoint; dynamic HTMX fragments use no-store and Vary: HX-Request."}, {"name": "delay", "type": "string", "default": "300ms", "description": "Delay; pass the documented value shown in the examples."}, {"name": "min_chars", "type": "number", "default": "1", "description": "Min chars; pass the documented value shown in the examples."}, {"name": "options", "type": "list[dict]", "default": "[]", "description": "Select: value/label/display_label/disabled/selected or groups with options. Combobox input: value/label/disabled/group/icon/description; button search also supports Select groups."}, {"name": "multiple", "type": "bool", "default": "False", "description": "Multiple; pass the documented value shown in the examples."}, {"name": "selected_values", "type": "list[dict]", "default": "unset", "description": "Selected values; pass the documented value shown in the examples."}, {"name": "input_side", "type": "string", "default": "unset", "description": "Multiple Combobox: top (default) or right; right places the search beside chips and wraps on small screens."}, {"name": "size", "type": "string", "default": "base", "description": "Size; pass the documented value shown in the examples."}, {"name": "labels", "type": "dict", "default": "{}", "description": "Escaped text overrides: search_placeholder, list_label, empty_message, required_message, remove_label, clear_selection and show_options. Explicit placeholder takes precedence over search_placeholder; remote empty messages come from the endpoint."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "trigger_label", "type": "string", "default": "unset", "description": "Combobox without endpoint: enable the button trigger and search inside its popup. Calendar: calendar trigger text."}, {"name": "trigger_variant", "type": "string", "default": "unset", "description": "Searchable button: default control styling or ghost."}, {"name": "freeform", "type": "bool", "default": "False", "description": "Omit the dropdown trigger for an editable Autocomplete input. Filtering, keyboard selection and typed form values remain available."}, {"name": "field_class", "type": "string", "default": "unset", "description": "Field class; pass the documented value shown in the examples."}], "examples": [{"title": "Basic", "template": "autocomplete_fruits", "wide": true}, {"title": "Server search", "template": "autocomplete_server_search", "wide": true, "description": "Type a query, then use Arrow keys and Enter to choose a result."}, {"title": "Local filtering", "template": "autocomplete_local_filtering", "wide": true}, {"title": "Initial options", "template": "autocomplete_initial_options", "wide": true}, {"title": "Selected value", "template": "autocomplete_selected_value", "wide": true}, {"title": "Empty result", "template": "autocomplete_empty_result", "wide": true}, {"title": "Disabled", "template": "autocomplete_disabled", "wide": true}, {"title": "Error", "template": "autocomplete_error", "wide": true}, {"title": "Required", "template": "autocomplete_required", "wide": true}, {"title": "Multiple selection", "template": "autocomplete_multiple_selection", "wide": true}, {"title": "Description", "template": "autocomplete_description", "wide": true}, {"title": "Custom placeholder", "template": "autocomplete_custom_placeholder", "wide": true}, {"title": "Disabled options", "template": "autocomplete_disabled_options", "wide": true}, {"title": "Keyboard navigation", "template": "autocomplete_keyboard_navigation", "wide": true}, {"title": "All sizes", "template": "audit_autocomplete_all_sizes", "wide": true, "description": ""}, {"title": "Grouped rich options", "template": "audit_autocomplete_grouped_rich_options", "wide": true, "description": ""}, {"title": "Controlled local value", "template": "audit_autocomplete_controlled_local_value", "wide": true, "description": ""}]}, {"name": "ResourceListPage", "slug": "resource-list", "category": "Blocks", "status": "done", "reference": "https://kumo-ui.com/blocks/resource-list/", "props": [{"name": "title", "type": "string", "default": "unset", "description": "Title; pass the documented value shown in the examples."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "icon", "type": "string", "default": "unset", "description": "Icon; pass the documented value shown in the examples."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "usage", "type": "string / HTML slot", "default": "unset", "description": "Usage; pass the documented value shown in the examples."}, {"name": "usage_code", "type": "string", "default": "unset", "description": "Usage code; pass the documented value shown in the examples."}, {"name": "usage_title", "type": "string", "default": "unset", "description": "Usage title; pass the documented value shown in the examples."}, {"name": "usage_lang", "type": "string", "default": "unset", "description": "Usage lang; pass the documented value shown in the examples."}, {"name": "additional_content", "type": "string / HTML slot", "default": "unset", "description": "Additional content; pass the documented value shown in the examples."}, {"name": "additional_title", "type": "string", "default": "unset", "description": "Additional title; pass the documented value shown in the examples."}, {"name": "additional_description", "type": "string", "default": "unset", "description": "Additional description; pass the documented value shown in the examples."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Basic", "template": "resource_list_basic", "wide": true}, {"title": "Quick start", "template": "resource_list_quick_start", "wide": true}, {"title": "Additional content", "template": "resource_list_additional_content", "wide": true}]}, {"name": "DeleteResource", "slug": "delete-resource", "category": "Blocks", "status": "done", "reference": "https://kumo-ui.com/blocks/delete-resource/", "props": [{"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "resource_type", "type": "string", "default": "unset", "description": "Resource type; pass the documented value shown in the examples."}, {"name": "resource_name", "type": "string", "default": "unset", "description": "Resource name; pass the documented value shown in the examples."}, {"name": "size", "type": "string", "default": "base", "description": "Size; pass the documented value shown in the examples."}, {"name": "case_sensitive", "type": "bool", "default": "False", "description": "Case sensitive; pass the documented value shown in the examples."}, {"name": "action", "type": "URL", "default": "unset", "description": "Action; pass the documented value shown in the examples."}, {"name": "csrf_token", "type": "string", "default": "unset", "description": "Pass csrf_token=csrf_token for DeleteResource POST integrations using include only; retain Django CSRF middleware."}, {"name": "hx_target", "type": "string", "default": "unset", "description": "Hx target; pass the documented value shown in the examples."}, {"name": "hx_swap", "type": "string", "default": "unset", "description": "Hx swap; pass the documented value shown in the examples."}, {"name": "deleting", "type": "bool", "default": "False", "description": "Deleting; pass the documented value shown in the examples."}, {"name": "error_message", "type": "string", "default": "unset", "description": "Error message; pass the documented value shown in the examples."}, {"name": "delete_button_text", "type": "string", "default": "unset", "description": "Delete button text; pass the documented value shown in the examples."}, {"name": "demo", "type": "bool", "default": "False", "description": "Demo; pass the documented value shown in the examples."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Zone confirmation", "template": "delete_resource_zone_confirmation"}, {"title": "Worker confirmation", "template": "delete_resource_worker_confirmation"}, {"title": "Server error", "template": "delete_resource_server_error"}, {"title": "Case insensitive", "template": "delete_resource_case_insensitive"}]}, {"name": "SankeyChart", "slug": "sankey-chart", "category": "Data Visualization", "status": "done", "reference": "https://kumo-ui.com/charts/sankey/", "props": [{"name": "option", "type": "dict", "default": "unset", "description": "Option; pass the documented value shown in the examples."}, {"name": "height", "type": "number", "default": "288 (Chart)", "description": "Height; pass the documented value shown in the examples."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "loading", "type": "bool", "default": "False", "description": "Loading; pass the documented value shown in the examples."}, {"name": "empty", "type": "bool", "default": "False", "description": "Empty; pass the documented value shown in the examples."}, {"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Basic", "template": "chart_sankey_basic", "wide": true}, {"title": "Traffic flow", "template": "chart_sankey_traffic", "wide": true}, {"title": "Vertical", "template": "chart_sankey_vertical", "wide": true}, {"title": "Wide nodes", "template": "chart_sankey_wide", "wide": true}, {"title": "Spaced nodes", "template": "chart_sankey_spaced", "wide": true}, {"title": "Subtle links", "template": "chart_sankey_subtle", "wide": true}, {"title": "Colored nodes", "template": "chart_sankey_colored", "wide": true}, {"title": "Without labels", "template": "chart_sankey_no_labels", "wide": true}, {"title": "Loading", "template": "chart_sankey_loading", "wide": true}, {"title": "Empty", "template": "chart_sankey_empty", "wide": true}, {"title": "Rich tooltip", "template": "completion_sankey_chart_rich_tooltip", "wide": true}, {"title": "Interactive node selection", "template": "completion_sankey_chart_interactive_node_selection", "wide": true}, {"title": "Drilldown", "template": "completion_sankey_chart_drilldown", "wide": true}, {"title": "Inline labels", "template": "completion_sankey_chart_inline_labels", "wide": true}]}, {"name": "Sparkline", "slug": "sparkline", "category": "Data Visualization", "status": "done", "reference": "https://kumo-ui.com/charts/timeseries/", "props": [{"name": "option", "type": "dict", "default": "unset", "description": "Option; pass the documented value shown in the examples."}, {"name": "height", "type": "number", "default": "288 (Chart)", "description": "Height; pass the documented value shown in the examples."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "loading", "type": "bool", "default": "False", "description": "Loading; pass the documented value shown in the examples."}, {"name": "empty", "type": "bool", "default": "False", "description": "Empty; pass the documented value shown in the examples."}, {"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Line", "template": "chart_sparkline_line", "wide": true}, {"title": "Area", "template": "chart_sparkline_area", "wide": true}, {"title": "Bars", "template": "chart_sparkline_bar", "wide": true}]}, {"name": "Flow", "slug": "flow", "category": "Layout", "status": "done", "reference": "https://kumo-ui.com/components/flow/", "props": [{"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "nodes", "type": "list[dict]", "default": "unset", "description": "Flow nodes: key, label, optional description/icon/disabled/href."}, {"name": "columns", "type": "list[dict]", "default": "unset", "description": "Flow: list of {nodes: [...]}; Table: key/label/width/align/sortable/mono/nowrap/hidden_label, optional sticky='left' or 'right'."}, {"name": "edges", "type": "list[dict]", "default": "unset", "description": "Flow connections: source/target keys, optional source_anchor/target_anchor (left/right/top/bottom)."}, {"name": "direction", "type": "string", "default": "unset", "description": "Direction; pass the documented value shown in the examples."}, {"name": "align", "type": "string", "default": "start", "description": "Align; pass the documented value shown in the examples."}, {"name": "label", "type": "string", "default": "unset", "description": "Visible accessible label. Supply an explicit aria-label via attrs when the control is bare."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Sequential flow", "template": "audit_flow_sequential_flow", "wide": true, "description": ""}, {"title": "Parallel branches", "template": "audit_flow_parallel_branches", "wide": true, "description": ""}, {"title": "Vertical flow", "template": "audit_flow_vertical_flow", "wide": true, "description": ""}, {"title": "Vertical parallel flow", "template": "audit_flow_vertical_parallel_flow", "wide": true, "description": ""}, {"title": "Custom node content", "template": "audit_flow_custom_node_content", "wide": true, "description": ""}, {"title": "Centered branches", "template": "audit_flow_centered_branches", "wide": true, "description": ""}, {"title": "Complex flow", "template": "audit_flow_complex_flow", "wide": true, "description": ""}, {"title": "Custom anchors", "template": "audit_flow_custom_anchors", "wide": true, "description": ""}, {"title": "Scrollable large diagram", "template": "audit_flow_scrollable_large_diagram", "wide": true, "description": ""}, {"title": "Disabled node", "template": "audit_flow_disabled_node", "wide": true, "description": ""}, {"title": "End aligned branches", "template": "audit_flow_end_aligned_branches", "wide": true, "description": ""}, {"title": "Nested branch lists", "template": "audit_flow_nested_branch_lists", "wide": true, "description": ""}, {"title": "Dot and tall nodes", "template": "completion_flow_dot_and_tall_nodes", "wide": true}]}, {"name": "LayerDialog", "slug": "layer-dialog", "category": "Overlay", "status": "done", "reference": "https://kumo-ui.com/components/layer-dialog/", "props": [{"name": "id", "type": "string", "default": "unset", "description": "Stable unique DOM ID; important for HTMX targets and focus restoration."}, {"name": "title", "type": "string", "default": "unset", "description": "Title; pass the documented value shown in the examples."}, {"name": "description", "type": "string", "default": "unset", "description": "Description; pass the documented value shown in the examples."}, {"name": "trigger_label", "type": "string", "default": "unset", "description": "Combobox without endpoint: enable the button trigger and search inside its popup. Calendar: calendar trigger text."}, {"name": "size", "type": "string", "default": "base", "description": "Size; pass the documented value shown in the examples."}, {"name": "placement", "type": "string", "default": "unset", "description": "Placement; pass the documented value shown in the examples."}, {"name": "alert", "type": "bool", "default": "False", "description": "Alert; pass the documented value shown in the examples."}, {"name": "slot", "type": "string / HTML slot", "default": "unset", "description": "Rich HTML supplied by the wdj_component block tag, rendered in an isolated context."}, {"name": "footer", "type": "string / HTML slot", "default": "unset", "description": "Footer; pass the documented value shown in the examples."}, {"name": "close_on_backdrop", "type": "bool", "default": "True", "description": "Close on backdrop; pass the documented value shown in the examples."}, {"name": "dismiss_disabled", "type": "bool", "default": "False", "description": "Dismiss disabled; pass the documented value shown in the examples."}, {"name": "close_label", "type": "string", "default": "unset", "description": "Close label; pass the documented value shown in the examples."}, {"name": "attrs", "type": "dict", "default": "{}", "description": "Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only."}, {"name": "class", "type": "string", "default": "\"\"", "description": "Class; pass the documented value shown in the examples."}], "examples": [{"title": "Informational dialog", "template": "audit_layer_dialog_informational_dialog", "wide": true, "description": ""}, {"title": "Standard action", "template": "audit_layer_dialog_standard_action", "wide": true, "description": ""}, {"title": "Alert confirmation", "template": "audit_layer_dialog_alert_confirmation", "wide": true, "description": ""}, {"title": "Small width", "template": "audit_layer_dialog_small_width", "wide": true, "description": ""}, {"title": "Large width", "template": "audit_layer_dialog_large_width", "wide": true, "description": ""}, {"title": "Top placement", "template": "audit_layer_dialog_top_placement", "wide": true, "description": ""}, {"title": "Scrolling body", "template": "audit_layer_dialog_scrolling_body", "wide": true, "description": ""}, {"title": "Native form", "template": "audit_layer_dialog_native_form", "wide": true, "description": ""}, {"title": "Search and pickers", "template": "audit_layer_dialog_search_and_pickers", "wide": true, "description": ""}, {"title": "Nested dialogs", "template": "audit_layer_dialog_nested_dialogs", "wide": true, "description": ""}, {"title": "Pending work", "template": "audit_layer_dialog_pending_work", "wide": true, "description": ""}, {"title": "Multiple primary actions", "template": "completion_layer_dialog_multiple_primary_actions", "wide": true}, {"title": "Localized dialog", "template": "completion_layer_dialog_localized_dialog", "wide": true}, {"title": "Dismissal cleanup", "template": "completion_layer_dialog_dismissal_cleanup", "wide": true}]}]}