WorkRoot/WRNexusJS

Fork 0

Files

T

Clintchiz cc98bccd6c

Quality / quality (ubuntu-latest) (push) Failing after 12m30s

Details

Quality / quality (windows-latest) (push) Canceled after 0s

Details

feat(ui): add DataTable and Toaster, drop the legacy Table, fix overlay dialogs

DataTable replaces the 20-line Table scaffold entirely: columns, sorting,
filtering, pagination, selection, bulk actions, comparison layout, sticky
first column, custom HTML cells, and a remote source driven by a `request`
output rather than a function prop (props travel as HTML attributes, so a
function arrives as its own source text).

Toaster replaces the hand-rolled status div: tone icons, actions, hover
pause/resume and a progress bar.

Overlays audit -- Modal and Drawer declared aria-modal="true" but nothing
ever moved focus into the panel, so the @keydown handler on their root
never ran and closeOnEscape did nothing. Focus, focus restore, a Tab trap
and a body scroll lock now live in the reactive runtime, shared by both.

ContextMenu placed pointer menus by subtracting a guessed 340x420 from the
viewport, which pushed every menu that was not that size away from the
pointer; it now positions at the pointer and lets the anchored clamp pull
it back once it can be measured.

The reactive runtime size budget moves 150k -> 175k to cover anchored
overlays, dialog behaviour, the toaster and the DataTable client half.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@

2026-08-07 14:57:17 +05:30

99 KiB

Raw Blame History

WRNexus UI component reference

This reference is generated from the 108 packaged .wrn component sources. Props marked required have no default; all others show their runtime default.

Advanced-forms

AdvancedSelect

Theme-aware, responsive advanced select component.

Mount: data-component="AdvancedSelect"
Props: size: string = "default", color: string = "primary", label: string = "Advanced Select", name: string = "", value: string = "", values: unknown[] = [], options: unknown[] = [], groups: unknown[] = [], placeholder: string = "Select an option", placeholderIcon: string = "", searchPlaceholder: string = "Search options…", multiple: boolean = false, searchable: boolean = true, defaultOpen: boolean = false, clearable: boolean = true, allowEmpty: boolean = true, tags: boolean = false, disabled: boolean = false, required: boolean = false, invalid: boolean = false, validationMessage: string = "", helpText: string = "", loading: boolean = false, loadingLabel: string = "Loading options…", emptyLabel: string = "No options found", selectedOptionsLabel: string = "Selected options", clearLabel: string = "Clear selection", createLabel: string = "Create", loadMoreLabel: string = "Load more", searchMode: string = "contains", searchFields: string = "label,description", minSearchLength: number = 0, searchResultLimit: number = 0, maxSelections: number = 0, showCounter: boolean = false, counterTemplate: string = "{selected} selected", optionTemplate: string = "default", selectedTemplate: string = "default", closeOnSelect: boolean = true, scrollToSelected: boolean = true, fixed: boolean = false, placement: string = "bottom", remote: boolean = false, remoteUrl: string = "", remoteQueryParam: string = "q", remoteDebounce: number = 250, remoteAutoLoad: boolean = true, infinite: boolean = false, hasMore: boolean = false, page: number = 1, class: string = ""
Slots: None
Outputs: search({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), select({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), clear({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), open({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), close({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), load({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)

ComboBox

Editable autocomplete combobox with local and remote suggestions.

Mount: data-component="ComboBox"
Props: size: string = "default", color: string = "primary", label: string = "ComboBox", name: string = "", value: string = "", options: unknown[] = [], groups: unknown[] = [], placeholder: string = "Search or select an option", searchPlaceholder: string = "Start typing…", clearable: boolean = true, allowCustomValue: boolean = false, disabled: boolean = false, required: boolean = false, invalid: boolean = false, validationMessage: string = "", helpText: string = "", loading: boolean = false, loadingLabel: string = "Loading suggestions…", emptyLabel: string = "No matching options", clearLabel: string = "Clear value", toggleLabel: string = "Toggle suggestions", searchMode: string = "contains", searchFields: string = "label,description", minSearchLength: number = 0, searchResultLimit: number = 0, optionTemplate: string = "default", defaultOpen: boolean = false, closeOnSelect: boolean = true, fixed: boolean = false, placement: string = "bottom", autocomplete: string = "off", remote: boolean = false, remoteUrl: string = "", remoteQueryParam: string = "q", remoteDebounce: number = 250, remoteAutoLoad: boolean = true, infinite: boolean = false, hasMore: boolean = false, page: number = 1, loadMoreLabel: string = "Load more", class: string = ""
Slots: None
Outputs: search({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), select({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), clear({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), open({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), close({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), load({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)

CopyMarkup

Theme-aware, responsive copy markup component.

Mount: data-component="CopyMarkup"
Props: size: string = "default", color: string = "primary", label: string = "Copy Markup", name: string = "", value: string = "", placeholder: string = "", type: string = "text", min: string = "", max: string = "", step: string = "", disabled: boolean = false, required: boolean = false, class: string = ""
Slots: None
Outputs: copy({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]), success({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)

InputNumber

Theme-aware, responsive input number component.

Mount: data-component="InputNumber"
Props: size: string = "default", color: string = "primary", variant: string = "default", class: string = "", id: string = "", name: string = "quantity", value: number = 0, min: string = "", max: string = "", step: number = 1, precision: string = "auto", label: string = "", description: string = "", helpText: string = "", error: string = "", invalid: boolean = false, prefix: string = "", suffix: string = "", placeholder: string = "", autocomplete: string = "off", inputMode: string = "decimal", ariaLabel: string = "", required: boolean = false, disabled: boolean = false, inputDisabled: boolean = false, buttonsDisabled: boolean = false, readonly: boolean = false, allowInput: boolean = true, keyboard: boolean = true, wheel: boolean = false, clamp: boolean = true, fullWidth: boolean = false, showButtons: boolean = true, showValidationMessage: boolean = true, decrementLabel: string = "Decrease value", incrementLabel: string = "Increase value", controlsLabel: string = "Quantity controls", requiredMessage: string = "A value is required.", minMessage: string = "Value is below the minimum.", maxMessage: string = "Value is above the maximum."
Slots: None
Outputs: input({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), increment({ value: number; previousValue?: number; sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), decrement({ value: number; previousValue?: number; sourceEvent?: Event; [key: string]: string | number | boolean | null | object })

PinInput

Secure multi-cell PIN and verification-code input with regex and paste support.

Mount: data-component="PinInput"
Props: size: string = "default", color: string = "primary", label: string = "Verification code", name: string = "pin", value: string = "", length: number = 4, pattern: string = "[0-9]", type: string = "text", inputMode: string = "numeric", placeholder: string = "○", autocomplete: string = "one-time-code", masked: boolean = false, disabled: boolean = false, readonly: boolean = false, required: boolean = false, autoFocus: boolean = false, autoSubmit: boolean = false, allowPaste: boolean = true, clearable: boolean = true, clearLabel: string = "Clear code", separator: string = "", groupSize: number = 0, helpText: string = "", invalid: boolean = false, validationMessage: string = "", class: string = ""
Slots: None
Outputs: input({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), complete({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), paste({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]), clear({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)

StrongPassword

Theme-aware, responsive strong password component.

Mount: data-component="StrongPassword"
Props: size: string = "default", color: string = "primary", label: string = "Password", name: string = "password", value: string = "", placeholder: string = "Create a strong password", autocomplete: string = "new-password", minLength: number = 8, specialCharactersSet: string = "!@#$%^&*()_+-=[]{}|;:,.<>?", requireLowercase: boolean = true, requireUppercase: boolean = true, requireNumber: boolean = true, requireSpecialCharacter: boolean = true, showRequirements: boolean = true, presentation: string = "inline", hintText: string = "Use a unique password you do not use elsewhere.", emptyLabel: string = "Enter a password", weakLabel: string = "Weak", fairLabel: string = "Fair", goodLabel: string = "Good", strongLabel: string = "Strong", disabled: boolean = false, readonly: boolean = false, required: boolean = false, invalid: boolean = false, validationMessage: string = "", class: string = ""
Slots: None
Outputs: input({ value: string; score: number; maximumScore: number; percent: number; level: string }), change({ value: string; score: number; maximumScore: number; percent: number; level: string }), strength({ value: string; score: number; maximumScore: number; percent: number; level: string })

ToggleCount

Theme-aware, responsive toggle count component.

Mount: data-component="ToggleCount"
Props: size: string = "default", color: string = "primary", variant: string = "segmented", class: string = "", name: string = "billing-cycle", value: string = "monthly", firstValue: string = "monthly", firstLabel: string = "Monthly", secondValue: string = "annual", secondLabel: string = "Annual", ariaLabel: string = "Billing frequency", items: unknown[] = [], currency: string = "$", suffix: string = "", firstValueKey: string = "monthly", secondValueKey: string = "annual", emptyValue: string = "—", align: string = "end", fullWidth: boolean = true, disabled: boolean = false, animate: boolean = true, animationDuration: number = 450, animationSteps: number = 18
Slots: None
Outputs: change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), toggle({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })

TogglePassword

Accessible password field with optional show and hide controls.

Mount: data-component="TogglePassword"
Props: size: string = "default", color: string = "primary", label: string = "Password", name: string = "password", value: string = "", placeholder: string = "Enter your password", autocomplete: string = "current-password", minlength: string = "", maxlength: string = "", pattern: string = "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}", fields: unknown[] = [], visible: boolean = false, toggleable: boolean = true, toggleMode: string = "button", checkboxLabel: string = "Show password", showLabel: string = "Show password", hideLabel: string = "Hide password", disabled: boolean = false, readonly: boolean = false, required: boolean = false, invalid: boolean = false, helpText: string = "", validationMessage: string = "", class: string = ""
Slots: None
Outputs: input({ name?: string; value: string | number | boolean | null | object; visible: boolean }), change({ name?: string; value: string | number | boolean | null | object; visible: boolean }), toggle({ visible: boolean })

Base

Accordion

Theme-aware, responsive accordion component.

Mount: data-component="Accordion"
Props: size: string = "default", color: string = "primary", variant: string = "default", class: string = "", id: string = "accordion", items: unknown[] = [], defaultOpen: unknown[] = [], multiple: boolean = false, alwaysOpen: boolean = false, disabled: boolean = false, indicator: string = "plus", indicatorPosition: string = "start", showIndicator: boolean = true, bordered: boolean = false, separated: boolean = false, flush: boolean = false, contentItalic: boolean = false
Slots: None
Outputs: change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), open({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), close({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })

Alert

Theme-aware, responsive alert component.

Mount: data-component="Alert"
Props: size: string = "default", color: string = "info", variant: string = "soft", class: string = "", radius: string = "md", shadow: string = "sm", title: string = "Alert", description: string = "", items: unknown[] = [], actions: unknown[] = [], showIcon: boolean = false, icon: string = "", dismissible: boolean = false, dismissLabel: string = "Dismiss alert", role: string = "alert", live: string = "polite", linkLabel: string = "", linkHref: string = "", actionLabel: string = "", actionHref: string = "", compact: boolean = false
Slots: None
Outputs: dismiss({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), action({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })

Avatar

Theme-aware, responsive avatar component.

Mount: data-component="Avatar"
Props: src: string = "", alt: string = "", initials: string = "", size: string = "md", color: string = "primary", variant: string = "solid", shape: string = "circle", status: string = "", statusLabel: string = "", statusPosition: string = "bottom", badge: string = "", badgeIcon: string = "", badgeLabel: string = "", tooltip: string = "", name: string = "", description: string = "", loading: string = "lazy", class: string = ""
Slots: None
Outputs: load({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string), click({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })

AvatarGroup

Theme-aware, responsive avatar group component.

Mount: data-component="AvatarGroup"
Props: items: unknown[] = [], size: string = "md", color: string = "primary", variant: string = "solid", shape: string = "circle", layout: string = "stack", maxVisible: number = 4, columns: number = 3, borderColor: string = "", showTooltips: boolean = true, overflowLabel: string = "Show remaining members", class: string = ""
Slots: None
Outputs: overflow({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])

Badge

Theme-aware, responsive badge component.

Mount: data-component="Badge"
Props: label: string = "Badge", size: string = "md", color: string = "primary", variant: string = "solid", shape: string = "pill", class: string = "", icon: string = "", iconPosition: string = "start", dot: boolean = false, dotOnly: boolean = false, dotLabel: string = "Status", animated: boolean = false, avatarSrc: string = "", avatarAlt: string = "", dismissible: boolean = false, dismissLabel: string = "Remove badge", truncate: boolean = false, maxWidth: string = "12rem", anchorLabel: string = "", anchorIcon: string = "", placement: string = "inline", anchorLabelText: string = "Badge anchor"
Slots: None
Outputs: dismiss({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })

Blockquote

Theme-aware, responsive blockquote component.

Mount: data-component="Blockquote"
Props: quote: string = "I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed.", citation: string = "", citationTitle: string = "", citationUrl: string = "", avatarSrc: string = "", avatarAlt: string = "", size: string = "md", color: string = "primary", align: string = "left", variant: string = "default", quoteMark: boolean = true, italic: boolean = true, class: string = ""
Slots: default
Outputs: None

Button

Theme-aware, responsive button component.

Mount: data-component="Button"
Props: label: string = "Button", loadingLabel: string = "Loading…", description: string = "", as: string = "", href: string = "", target: string = "", rel: string = "", type: string = "button", variant: string = "default", color: string = "primary", size: string = "default", disabled: boolean = false, loading: boolean = false, pill: boolean = false, fullWidth: boolean = false, icon: string = "", iconPosition: string = "start", ariaLabel: string = "", ariaPressed: string = "", ariaExpanded: string = "", ariaControls: string = "", title: string = "", autofocus: boolean = false, controlClass: string = "", class: string = ""
Slots: default
Outputs: click({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })

ButtonGroup

Theme-aware, responsive button group component.

Mount: data-component="ButtonGroup"
Props: items: unknown[] = [], value: string = "", size: string = "md", color: string = "primary", variant: string = "default", orientation: string = "horizontal", responsive: boolean = false, attached: boolean = true, selectable: boolean = false, toolbar: boolean = false, disabled: boolean = false, ariaLabel: string = "Button group", class: string = ""
Slots: default
Outputs: click({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), select({ value: string | number | boolean | null | object; previousValue: string | number | boolean | null | object; item: string | number | boolean | null | object; index: number }), change({ value: string | number | boolean | null | object; previousValue: string | number | boolean | null | object; item: string | number | boolean | null | object; index: number })

Card

Group related content in a responsive themed surface with title, description, content, and supporting slots.

Mount: data-component="Card"
Props: title: string = "Card title", subtitle: string = "", description: string = "", header: string = "", footer: string = "", imageSrc: string = "", imageAlt: string = "", imagePosition: string = "top", actionLabel: string = "", actionHref: string = "", headerActions: unknown[] = [], navigation: unknown[] = [], activeNav: string = "", mobileNavigation: boolean = false, alertTitle: string = "", alertDescription: string = "", empty: boolean = false, emptyTitle: string = "No data to show", emptyIcon: string = "icon-[lucide--inbox]", items: unknown[] = [], size: string = "md", color: string = "primary", variant: string = "default", layout: string = "vertical", align: string = "left", hover: string = "none", scrollable: boolean = false, maxHeight: string = "18rem", dismissible: boolean = false, ariaLabel: string = "", class: string = ""
Slots: default
Outputs: click({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), action({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), navigate({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), dismiss({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), load({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)

Carousel

Theme-aware, responsive carousel component.

Mount: data-component="Carousel"
Props: size: string = "default", color: string = "primary", title: string = "", description: string = "", items: unknown[] = [], activeIndex: number = 0, slidesPerView: number = 1, gap: string = "0.75rem", showPagination: boolean = false, isAutoPlay: boolean = false, autoplayInterval: number = 4000, isInfiniteLoop: boolean = false, isRTL: boolean = false, isCentered: boolean = false, isDraggable: boolean = false, isAutoHeight: boolean = false, isSnap: boolean = false, showCounter: boolean = false, thumbnails: string = "none", ariaLabel: string = "Content carousel", variant: string = "default", class: string = ""
Slots: default
Outputs: initialize({ index: number; count: number }), change({ index: number; previousIndex: number; item: string | number | boolean | null | object; reason: string | boolean }), previous({ index: number; previousIndex: number; item: string | number | boolean | null | object }), next({ index: number; previousIndex: number; item: string | number | boolean | null | object }), play({ index: number; interval: number }), pause({ index: number }), reachStart({ index: number }), reachEnd({ index: number }), dragStart({ index: number; x: null }), dragEnd({ index: number; distance: number })

ChatBubble

Theme-aware, responsive chat bubble component.

Mount: data-component="ChatBubble"
Props: size: string = "default", color: string = "primary", title: string = "", description: string = "", items: unknown[] = [], oneSided: boolean = false, showAvatars: boolean = false, showMetadata: boolean = false, ariaLabel: string = "Conversation", variant: string = "default", class: string = ""
Slots: default
Outputs: action({ action: boolean; item: string | number | boolean | null | object; index: number }), messageClick({ item: string | number | boolean | null | object; index: number; direction: string }), avatarClick({ item: string | number | boolean | null | object; index: number; direction: string }), linkClick({ link: string | number | boolean | null | object; item: string | number | boolean | null | object; index: number })

Collapse

Theme-aware, responsive collapse component.

Mount: data-component="Collapse"
Props: size: string = "default", color: string = "primary", items: unknown[] = [], multiple: boolean = false, mode: string = "panel", initialOpenIndexes: unknown[] = [], ariaLabel: string = "Collapsible content", class: string = ""
Slots: default
Outputs: toggle({ index: number; item: string | number | boolean | null | object; open: boolean; openIndexes: number[] }), open({ index: number; item: string | number | boolean | null | object }), close({ index: number; item: string | number | boolean | null | object })

DatePicker

Theme-aware, responsive date picker component.

Mount: data-component="DatePicker"
Props: size: string = "default", color: string = "primary", label: string = "Date Picker", id: string = "", name: string = "", value: string = "", placeholder: string = "", type: string = "date", locale: string = "en-US", firstDayOfWeek: number = 0, months: string = [{ label: "Jan", value: "01" }, { label: "Feb", value: "02" }, { label: "Mar", value: "03" }, { label: "Apr", value: "04" }, { label: "May", value: "05" }, { label: "Jun", value: "06" }, { label: "Jul", value: "07" }, { label: "Aug", value: "08" }, { label: "Sep", value: "09" }, { label: "Oct", value: "10" }, { label: "Nov", value: "11" }, { label: "Dec", value: "12" }], days: string = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31], years: string = [2024, 2025, 2026, 2027, 2028, 2029, 2030], min: string = "", max: string = "", step: string = "", helperText: string = "", cornerHint: string = "", error: string = "", variant: string = "normal", inline: boolean = false, readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: None
Outputs: input({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]), change({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]), open({ value: string; name: string; sourceEvent: Event }), close({ value: string; name: string; sourceEvent: Event }), focus({ value: string; name: string; sourceEvent: Event }), blur({ value: string; name: string; sourceEvent: Event }), invalid({ name: string; message: string; sourceEvent: Event })

DeviceFrame

Theme-aware, responsive device frame component.

Mount: data-component="DeviceFrame"
Props: size: string = "default", color: string = "primary", title: string = "Device Frame", description: string = "", items: unknown[] = [], variant: string = "default", device: string = "phone", orientation: string = "portrait", src: string = "", srcdoc: string = "", frameTitle: string = "Device preview", showToolbar: boolean = true, allow: string = "", class: string = ""
Slots: default
Outputs: change({ device: string; orientation: string; sourceEvent: Event }), rotate({ device: string; orientation: string; sourceEvent: Event })

FileUploadProgress

Theme-aware, responsive file upload progress component.

Mount: data-component="FileUploadProgress"
Props: size: string = "default", color: string = "primary", label: string = "Progress", value: number = 50, max: number = 100, showValue: boolean = true, fileName: string = "", fileSize: string = "", uploadedSize: string = "", status: string = "uploading", cancelLabel: string = "Cancel upload", retryLabel: string = "Retry upload", class: string = ""
Slots: None
Outputs: cancel({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]), retry({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]), complete({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])

LegendIndicator

Theme-aware, responsive legend indicator component.

Mount: data-component="LegendIndicator"
Props: size: string = "default", color: string = "primary", title: string = "Legend Indicator", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Outputs: toggle({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), select({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)

List

Present structured responsive linked or status items with icons, descriptions, actions, and selection events.

Mount: data-component="List"
Props: size: string = "default", color: string = "primary", title: string = "List", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Outputs: None

ListGroup

Theme-aware, responsive list group component.

Mount: data-component="ListGroup"
Props: size: string = "default", color: string = "primary", title: string = "List Group", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Outputs: select({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)

Marquee

Continuously present responsive labels, partners, notices, or capabilities with pause and resume behavior.

Mount: data-component="Marquee"
Props: size: string = "default", color: string = "primary", title: string = "Marquee", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Outputs: None

Progress

Theme-aware, responsive progress component.

Mount: data-component="Progress"
Props: size: string = "default", color: string = "primary", label: string = "Progress", value: number = 50, max: number = 100, showValue: boolean = true, class: string = ""
Slots: None
Outputs: None

Rating

Theme-aware, responsive rating component.

Mount: data-component="Rating"
Props: size: string = "default", color: string = "primary", title: string = "Rating", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Outputs: input({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)

Skeleton

Theme-aware, responsive skeleton component.

Mount: data-component="Skeleton"
Props: color: string = "primary", label: string = "Loading", size: string = "md", lines: number = 3, class: string = ""
Slots: None
Outputs: None

Spinner

Theme-aware, responsive spinner component.

Mount: data-component="Spinner"
Props: color: string = "primary", label: string = "Loading", size: string = "md", lines: number = 3, class: string = ""
Slots: None
Outputs: None

StyledIcon

Theme-aware, responsive styled icon component.

Mount: data-component="StyledIcon"
Props: size: string = "default", color: string = "primary", title: string = "Styled Icon", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Outputs: None

Timeline

Present responsive chronological activity, milestones, or workflow status with rich item metadata.

Mount: data-component="Timeline"
Props: size: string = "default", color: string = "primary", title: string = "Timeline", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Outputs: None

Toast

Theme-aware, responsive toast component.

Mount: data-component="Toast"
Props: size: string = "default", color: string = "primary", title: string = "Toast", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Outputs: dismiss({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), action({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })

TreeView

Theme-aware, responsive tree view component.

Mount: data-component="TreeView"
Props: size: string = "default", color: string = "primary", title: string = "Tree View", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Outputs: select({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), toggle({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), expand({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), collapse({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })

Core

AuthForm

Reusable auth form component.

Mount: data-component="AuthForm"
Props: size: string = "default", color: string = "primary", mode: string = "sign-in", action: string = "/api/auth/login", method: string = "post", title: string = "Sign in", description: string = "", returnTo: string = "", schema: string = "", showRemember: boolean = true, showName: boolean = true, submitLabel: string = "Continue", class: string = ""
Slots: default
Outputs: submit({ event: Event; mode: string; action: string }), change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), input({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })

AuthSplitLayout

Reusable auth split layout component.

Mount: data-component="AuthSplitLayout"
Props: size: string = "default", color: string = "primary", eyebrow: string = "Secure identity", title: string = "Welcome back", description: string = "", brand: string = "Police Management System", features: unknown[] = [], class: string = ""
Slots: aside-extra, form
Outputs: None

PortalDashboard

Reusable portal dashboard component.

Mount: data-component="PortalDashboard"
Props: size: string = "default", color: string = "primary", eyebrow: string = "Overview", eyebrowKey: string = "", title: string = "Dashboard", titleKey: string = "", description: string = "", descriptionKey: string = "", userName: string = "", metrics: unknown[] = [], actions: unknown[] = [], updates: unknown[] = [], tasks: unknown[] = [], class: string = ""
Slots: hero-action
Outputs: action({ item: string | number | boolean | null | object; value: string | number | boolean; index: number }), navigate({ item: string | number | boolean | null | object; value: string | number | boolean; index: number })

PreferenceSwitcher

Reusable preference switcher component.

Mount: data-component="PreferenceSwitcher"
Props: size: string = "default", color: string = "primary", themeLabel: string = "Theme", colorLabel: string = "Accent color", languageLabel: string = "Language", languages: string = [, colors: string = [, compact: boolean = true, class: string = ""
Slots: None
Outputs: theme({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]), color({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]), language({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])

Toaster

Reusable toaster component.

Mount: data-component="Toaster"
Props: color: string = "info", size: string = "default", position: string = "bottom-right", duration: number = 4500, max: number = 4, pauseOnHover: boolean = true, showIcon: boolean = true, successIcon: string = "", dangerIcon: string = "", warningIcon: string = "", infoIcon: string = "", closable: boolean = true, showProgress: boolean = true, closeLabel: string = "Dismiss notification", class: string = ""
Slots: None
Outputs: show({ id: number; message: string; tone: string }), dismiss({ id: number; reason: string }), action({ id: number; sourceEvent: Event })

Data

MetricCard

Display one operational metric with value, suffix, description, icon, trend, progress, and optional action.

Mount: data-component="MetricCard"
Props: label: string = "Metric", value: string = "0", description: string = "", icon: string = "", iconStyle: string = "soft", prefix: string = "", suffix: string = "", badge: string = "", trend: string = "", trendLabel: string = "", trendDirection: string = "neutral", progress: number = -1, progressLabel: string = "", href: string = "", target: string = "", rel: string = "", external: boolean = false, actionLabel: string = "", actionIcon: string = "", showArrow: boolean = true, selectable: boolean = false, disabled: boolean = false, size: string = "default", color: string = "primary", variant: string = "default", hover: string = "lift", align: string = "left", class: string = ""
Slots: default, footer
Outputs: select({ label: string; value: string; href: string; sourceEvent: Event }), action({ label: string; value: string; href: string; sourceEvent: Event })

MetricGrid

Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.

Mount: data-component="MetricGrid"
Props: items: unknown[] = [], columns: number = 4, tabletColumns: number = 2, mobileColumns: number = 1, gap: string = "md", equalHeight: boolean = true, dividers: boolean = false, size: string = "default", color: string = "primary", variant: string = "default", maxWidth: string = "full", minItemWidth: string = "", class: string = ""
Slots: default
Outputs: select({ item: string | number | boolean | null | object; itemIndex: number; sourceEvent: Event }), action({ item: string | number | boolean | null | object; itemIndex: number; sourceEvent: Event })

StatsBar

Present a compact responsive strip of key facts, counts, performance indicators, or trust signals.

Mount: data-component="StatsBar"
Props: items: unknown[] = [], columns: number = 4, compact: boolean = true, dividers: boolean = true, icons: boolean = true, size: string = "default", color: string = "primary", variant: string = "raised", maxWidth: string = "xl", class: string = ""
Slots: None
Outputs: None

Forms

Checkbox

Theme-aware, responsive checkbox component.

Mount: data-component="Checkbox"
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Checkbox", hiddenLabel: boolean = false, placeholder: string = "", variant: string = "normal", icon: string = "", iconPosition: string = "start", value: string = "on", values: unknown[] = [], options: unknown[] = [], checked: boolean = false, indeterminate: boolean = false, orientation: string = "vertical", card: boolean = false, rightAligned: boolean = false, list: boolean = false, helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: default
Outputs: input({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), invalid({ message?: string; value: string | number | boolean | null | object; sourceEvent?: Event; [key: string]: string | number | boolean | null | object })

ColorPicker

Theme-aware, responsive color picker component.

Mount: data-component="ColorPicker"
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Color", hiddenLabel: boolean = false, placeholder: string = "", value: string = "#2563eb", icon: string = "", iconPosition: string = "start", helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, variant: string = "normal", readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: None
Outputs: input({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })

FileInput

Theme-aware, responsive file input component.

Mount: data-component="FileInput"
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "File", hiddenLabel: boolean = false, placeholder: string = "Choose a file", value: string = "", icon: string = "icon-[lucide--upload]", iconPosition: string = "start", accept: string = "", multiple: boolean = false, helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, variant: string = "normal", readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: None
Outputs: input({ files: File[]; name: string; sourceEvent: Event }), change({ files: File[]; name: string; sourceEvent: Event }), focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), select({ files: File[]; name: string; sourceEvent: Event }), clear({ name: string; sourceEvent: Event }), invalid({ message?: string; value: string | number | boolean | null | object; sourceEvent?: Event; [key: string]: string | number | boolean | null | object })

Input

Theme-aware, responsive input component.

Mount: data-component="Input"
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Input", hiddenLabel: boolean = false, placeholder: string = "", value: string = "", type: string = "text", variant: string = "normal", icon: string = "", iconPosition: string = "start", helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, readonly: boolean = false, disabled: boolean = false, required: boolean = false, autocomplete: string = "", inputmode: string = "", minlength: string = "", maxlength: string = "", pattern: string = "", min: string = "", max: string = "", step: string = "", class: string = ""
Slots: None
Outputs: input({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]), change({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]), focus({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]), blur({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]), invalid({ value: string | number | boolean | null | object; name: string; message: string; sourceEvent: Event }), keydown({ key: string; value: string | number | boolean | null | object; name: string; sourceEvent: Event }), keyup({ key: string; value: string | number | boolean | null | object; name: string; sourceEvent: Event })

InputGroup

Theme-aware, responsive input group component.

Mount: data-component="InputGroup"
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Input group", hiddenLabel: boolean = false, value: string = "", placeholder: string = "", type: string = "text", startText: string = "", endText: string = "", icon: string = "", iconPosition: string = "start", actionLabel: string = "", helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, variant: string = "normal", readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: None
Outputs: input({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), submit({ value: string | number | boolean | null | object; name: string; sourceEvent: Event }), action({ name: string; sourceEvent: Event })

Radio

Theme-aware, responsive radio component.

Mount: data-component="Radio"
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Radio", hiddenLabel: boolean = false, placeholder: string = "", variant: string = "normal", icon: string = "", iconPosition: string = "start", value: string = "on", options: unknown[] = [], checked: boolean = false, orientation: string = "vertical", card: boolean = false, rightAligned: boolean = false, list: boolean = false, helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: None
Outputs: input({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), invalid({ message?: string; value: string | number | boolean | null | object; sourceEvent?: Event; [key: string]: string | number | boolean | null | object })

RangeSlider

Theme-aware, responsive range slider component.

Mount: data-component="RangeSlider"
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Range", hiddenLabel: boolean = false, placeholder: string = "", variant: string = "normal", icon: string = "", iconPosition: string = "start", value: number = 50, min: number = 0, max: number = 100, step: number = 1, showValue: boolean = true, showBounds: boolean = true, showSteps: boolean = false, marks: unknown[] = [], helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: None
Outputs: input(({ value: number; name: string; sourceEvent: Event }) | ({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])), change(({ value: number; name: string; sourceEvent: Event }) | ({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])), focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })

Provide an accessible responsive search field with labels, validation states, sizes, and input or change events.

Mount: data-component="SearchBox"
Props: size: string = "default", color: string = "primary", label: string = "Search Box", name: string = "", value: string = "", placeholder: string = "", type: string = "search", min: string = "", max: string = "", step: string = "", disabled: boolean = false, required: boolean = false, class: string = ""
Slots: None
Outputs: None

Select

Theme-aware, responsive select component.

Mount: data-component="Select"
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Select", hiddenLabel: boolean = false, value: string = "", values: unknown[] = [], options: unknown[] = [], placeholder: string = "Select an option", variant: string = "normal", icon: string = "", iconPosition: string = "start", helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, multiple: boolean = false, readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: None
Outputs: input({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), open({ name: string; sourceEvent: Event }), close({ name: string; sourceEvent: Event }), invalid({ name: string; message: string; sourceEvent: Event })

Switch

Theme-aware, responsive switch component.

Mount: data-component="Switch"
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Switch", hiddenLabel: boolean = false, placeholder: string = "", variant: string = "normal", icon: string = "", iconPosition: string = "start", value: string = "on", checked: boolean = false, helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: None
Outputs: input({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })

Textarea

Theme-aware, responsive textarea component.

Mount: data-component="Textarea"
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Textarea", hiddenLabel: boolean = false, placeholder: string = "", value: string = "", variant: string = "normal", icon: string = "", iconPosition: string = "start", helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, rows: number = 5, resize: string = "vertical", readonly: boolean = false, disabled: boolean = false, required: boolean = false, minlength: string = "", maxlength: string = "", class: string = ""
Slots: None
Outputs: input({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), invalid({ value: string | number | boolean | null | object; name: string; message: string; sourceEvent: Event })

TimePicker

Theme-aware, responsive time picker component.

Mount: data-component="TimePicker"
Props: size: string = "default", color: string = "primary", id: string = "", name: string = "", label: string = "Time", hiddenLabel: boolean = false, value: string = "", placeholder: string = "", variant: string = "normal", icon: string = "icon-[lucide--clock-3]", iconPosition: string = "end", helperText: string = "", cornerHint: string = "", error: string = "", inline: boolean = false, min: string = "", max: string = "", step: string = "", format: string = "24", minuteStep: number = 5, hours: string = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"], minutes: string = ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"], readonly: boolean = false, disabled: boolean = false, required: boolean = false, class: string = ""
Slots: None
Outputs: input({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]), change({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]), focus({ value: string; name: string; sourceEvent: Event }), blur({ value: string; name: string; sourceEvent: Event }), open({ value: string; name: string; sourceEvent: Event }), close({ value: string; name: string; sourceEvent: Event }), invalid({ name: string; message: string; sourceEvent: Event })

Integrations

AdvancedDatePicker

Theme-aware, responsive advanced date picker component.

Mount: data-component="AdvancedDatePicker"
Props: size: string = "default", color: string = "primary", title: string = "Advanced Date Picker", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Outputs: input({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), open({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), close({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), clear({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)

AdvancedRangeSlider

Theme-aware, responsive advanced range slider component.

Mount: data-component="AdvancedRangeSlider"
Props: size: string = "default", color: string = "primary", title: string = "Advanced Range Slider", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Outputs: input({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), start({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), end({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })

Chart

Theme-aware, responsive chart component.

Mount: data-component="Chart"
Props: size: string = "default", color: string = "primary", title: string = "Chart", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Outputs: select({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), dataPointClick({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]), legendToggle({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])

Clipboard

Theme-aware, responsive clipboard component.

Mount: data-component="Clipboard"
Props: size: string = "default", color: string = "primary", title: string = "Clipboard", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Outputs: copy({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]), success({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)

Confetti

Theme-aware, responsive confetti component.

Mount: data-component="Confetti"
Props: size: string = "default", color: string = "primary", title: string = "Confetti", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Outputs: start({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), complete({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })

DataMap

Theme-aware, responsive data map component.

Mount: data-component="DataMap"
Props: size: string = "default", color: string = "primary", title: string = "Data Map", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Outputs: select({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)

DragAndDrop

Theme-aware, responsive drag and drop component.

Mount: data-component="DragAndDrop"
Props: size: string = "default", color: string = "primary", title: string = "Drag And Drop", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Outputs: dragStart({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), dragEnd({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), dragEnter({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), dragLeave({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), drop({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)

FileUpload

Theme-aware, responsive file upload component.

Mount: data-component="FileUpload"
Props: size: string = "default", color: string = "primary", title: string = "File Upload", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Outputs: select({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), upload({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), progress({ progress: number; [key: string]: string | number | boolean | null | object } | number), success({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string), cancel({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), remove({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })

Map

Present responsive location information and markers with map-ready metadata and movement or marker events.

Mount: data-component="Map"
Props: size: string = "default", color: string = "primary", title: string = "Map", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Outputs: None

ToastNotifications

Theme-aware, responsive toast notifications component.

Mount: data-component="ToastNotifications"
Props: size: string = "default", color: string = "primary", title: string = "Toast Notifications", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Outputs: add({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]), dismiss({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), clear({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), action({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })

WysiwygEditor

Theme-aware, responsive wysiwyg editor component.

Mount: data-component="WysiwygEditor"
Props: size: string = "default", color: string = "primary", title: string = "Wysiwyg Editor", description: string = "", items: unknown[] = [], variant: string = "default", class: string = ""
Slots: default
Outputs: input({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })

Layout

Columns

Create responsive balanced content columns with configurable count, gap, density, and maximum width.

Mount: data-component="Columns"
Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", class: string = ""
Slots: default
Outputs: None

Container

Constrain and align page content with responsive gutters and compact, wide, or full width options.

Mount: data-component="Container"
Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", class: string = ""
Slots: default
Outputs: None

CustomScrollbar

Theme-aware, responsive custom scrollbar component.

Mount: data-component="CustomScrollbar"
Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", class: string = ""
Slots: default
Outputs: scroll({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])

Divider

Separate related horizontal or vertical content with optional labels, sizes, and semantic colors.

Mount: data-component="Divider"
Props: size: string = "default", color: string = "primary", label: string = "", orientation: string = "horizontal", class: string = ""
Slots: None
Outputs: None

FeatureGrid

Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.

Mount: data-component="FeatureGrid"
Props: size: string = "default", color: string = "primary", items: unknown[] = [], columns: number = 3, tabletColumns: number = 2, mobileColumns: number = 1, gap: string = "md", minItemWidth: string = "", equalHeight: boolean = true, align: string = "stretch", maxWidth: string = "full", variant: string = "default", label: string = "Features", class: string = ""
Slots: default
Outputs: None

Footer

Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.

Mount: data-component="Footer"
Props: size: string = "default", color: string = "primary", label: string = "Footer navigation", items: unknown[] = [], columns: number = 3, maxWidth: string = "compact", copyright: string = "", class: string = ""
Slots: pre-footer, post-footer, copyright-left, copyright-right
Outputs: select({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), action({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })

Grid

Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width.

Mount: data-component="Grid"
Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", class: string = ""
Slots: default
Outputs: None

Image

Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment.

Mount: data-component="Image"
Props: size: string = "default", color: string = "primary", src: string = "", alt: string = "", width: string = "", height: string = "", loading: string = "lazy", rounded: boolean = false, class: string = ""
Slots: default
Outputs: None

Kbd

Theme-aware, responsive kbd component.

Mount: data-component="Kbd"
Props: size: string = "default", color: string = "primary", label: string = "⌘ K", class: string = ""
Slots: default
Outputs: None

LayoutSplitter

Theme-aware, responsive layout splitter component.

Mount: data-component="LayoutSplitter"
Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", class: string = ""
Slots: default
Outputs: resizeStart({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]), resize({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]), resizeEnd({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])

Link

Render an accessible internal or external link with target, relation, size, color, and public focus or click events.

Mount: data-component="Link"
Props: size: string = "default", color: string = "primary", label: string = "Link", href: string = "#", target: string = "", rel: string = "", external: boolean = false, class: string = ""
Slots: default
Outputs: None

PublicPageShell

Provide the outer responsive structure, width, background, slots, overflow, and minimum-height behavior for public pages.

Mount: data-component="PublicPageShell"
Props: maxWidth: string = "full", fullWidth: boolean = true, headerOffset: string = "none", background: string = "default", overflow: string = "clip", minHeight: string = "screen", size: string = "default", color: string = "primary", variant: string = "default", class: string = ""
Slots: before, default, after
Outputs: None

Section

Create a responsive themed page section with controlled spacing, width, borders, and surface treatment.

Mount: data-component="Section"
Props: id: string = "", size: string = "default", color: string = "primary", variant: string = "default", spacing: string = "lg", maxWidth: string = "xl", fullWidth: boolean = false, borderTop: boolean = false, borderBottom: boolean = false, class: string = ""
Slots: default
Outputs: None

SectionHeader

Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.

Mount: data-component="SectionHeader"
Props: id: string = "", eyebrow: string = "", title: string = "", description: string = "", align: string = "left", size: string = "default", color: string = "primary", headingLevel: number = 2, maxWidth: string = "3xl", class: string = ""
Slots: icon, default, actions
Outputs: None

Typography

Apply consistent readable responsive typography, widths, columns, spacing, and editorial hierarchy.

Mount: data-component="Typography"
Props: size: string = "default", color: string = "primary", columns: number = 2, gap: string = "md", maxWidth: string = "xl", class: string = ""
Slots: default
Outputs: None

Marketing

AnnouncementBar

Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls.

Mount: data-component="AnnouncementBar"
Props: badge: string = "", badgeIcon: string = "", message: string = "Announcement", description: string = "", icon: string = "icon-[lucide--megaphone]", actionLabel: string = "", actionHref: string = "", actionIcon: string = "", dismissible: boolean = false, dismissLabel: string = "Dismiss announcement", sticky: boolean = false, compact: boolean = false, size: string = "default", width: string = "default", color: string = "primary", variant: string = "soft", role: string = "status", live: string = "polite", class: string = ""
Slots: None
Outputs: dismiss({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })

CTASection

Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.

Mount: data-component="CTASection"
Props: eyebrow: string = "", title: string = "Ready to get started?", description: string = "", icon: string = "", align: string = "center", size: string = "default", color: string = "primary", variant: string = "solid", primaryLabel: string = "Get started", primaryHref: string = "#", primaryIcon: string = "", secondaryLabel: string = "", secondaryHref: string = "", secondaryIcon: string = "", backgroundImage: string = "", visualImage: string = "", visualAlt: string = "", visualIcon: string = "", visualTitle: string = "", visualDescription: string = "", visualItems: unknown[] = [], visualPosition: string = "right", maxWidth: string = "xl", fullBleed: boolean = false, class: string = ""
Slots: default, actions, visual, footer
Outputs: None

FeatureCard

Present one linked feature or service with media, icon, badge, description, and action.

Mount: data-component="FeatureCard"
Props: icon: string = "", iconStyle: string = "soft", iconSize: string = "default", eyebrow: string = "", title: string = "Feature", description: string = "", image: string = "", imageAlt: string = "", imagePosition: string = "top", imageAspect: string = "wide", imageLoading: string = "lazy", href: string = "", target: string = "", rel: string = "", external: boolean = false, actionLabel: string = "Learn more", actionIcon: string = "", showArrow: boolean = true, stretchedLink: boolean = true, badge: string = "", badgeColor: string = "primary", size: string = "default", color: string = "primary", variant: string = "default", hover: string = "lift", align: string = "left", disabled: boolean = false, class: string = ""
Slots: media, icon, default, footer
Outputs: None

FeatureIconCard

Present a compact feature or benefit with a styled icon, title, description, badge, and optional link.

Mount: data-component="FeatureIconCard"
Props: icon: string = "icon-[lucide--sparkles]", iconSize: string = "md", iconVariant: string = "soft", title: string = "Feature", description: string = "", href: string = "", actionLabel: string = "Explore", badge: string = "", size: string = "default", color: string = "primary", variant: string = "default", align: string = "left", hover: string = "lift", class: string = ""
Slots: default, footer
Outputs: None

Hero

Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel.

Mount: data-component="Hero"
Props: eyebrow: string = "", eyebrowIcon: string = "", icon: string = "", title: string = "Build something remarkable", highlight: string = "", description: string = "", align: string = "left", size: string = "default", color: string = "primary", variant: string = "default", layout: string = "split", visualPosition: string = "right", visualStyle: string = "plain", showDecorations: boolean = true, fullBleed: boolean = true, visualEyebrow: string = "", visualTitle: string = "", visualDescription: string = "", visualIcon: string = "", visualImage: string = "", visualAlt: string = "", visualItems: unknown[] = [], primaryLabel: string = "", primaryHref: string = "", primaryIcon: string = "", primaryTarget: string = "", secondaryLabel: string = "", secondaryHref: string = "", secondaryIcon: string = "", secondaryTarget: string = "", tertiaryLabel: string = "", tertiaryHref: string = "", tertiaryIcon: string = "", tertiaryTarget: string = "", badges: unknown[] = [], trustItems: unknown[] = [], maxWidth: string = "xl", class: string = ""
Slots: eyebrow, actions, trust, default, visual, footer
Outputs: None

HeroActions

Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking.

Mount: data-component="HeroActions"
Props: actions: unknown[] = [], align: string = "left", orientation: string = "horizontal", stackOnMobile: boolean = true, fullWidthMobile: boolean = true, size: string = "default", color: string = "primary", class: string = ""
Slots: default
Outputs: None

MarketingSectionHeader

Introduce marketing content with an eyebrow, title, description, and optional linked action.

Mount: data-component="MarketingSectionHeader"
Props: id: string = "", eyebrow: string = "", title: string = "", description: string = "", align: string = "split", size: string = "default", color: string = "primary", actionLabel: string = "", actionHref: string = "", actionIcon: string = "", actionExternal: boolean = false, class: string = ""
Slots: icon, actions, default
Outputs: None

PageHeader

Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions.

Mount: data-component="PageHeader"
Props: eyebrow: string = "", title: string = "", description: string = "", icon: string = "", id: string = "page-title", align: string = "left", centered: boolean = false, compact: boolean = false, size: string = "default", maxWidth: string = "xl", showBreadcrumbs: boolean = false, breadcrumbs: unknown[] = [], breadcrumbParent: string = "", breadcrumbParentHref: string = "", breadcrumbCurrent: string = "", primaryLabel: string = "", primaryHref: string = "", primaryIcon: string = "", secondaryLabel: string = "", secondaryHref: string = "", secondaryIcon: string = "", color: string = "primary", variant: string = "default", borderBottom: boolean = true, class: string = ""
Slots: meta, actions, default
Outputs: None

SplitHero

Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel.

Mount: data-component="SplitHero"
Props: eyebrow: string = "", eyebrowIcon: string = "icon-[lucide--sparkles]", title: string = "A better digital experience", highlight: string = "", description: string = "", primaryLabel: string = "", primaryHref: string = "", primaryIcon: string = "", secondaryLabel: string = "", secondaryHref: string = "", secondaryIcon: string = "", visualPosition: string = "right", reverse: boolean = false, ratio: string = "balanced", align: string = "left", size: string = "default", color: string = "primary", variant: string = "default", maxWidth: string = "xl", fullBleed: boolean = true, backgroundImage: string = "", visualImage: string = "", visualAlt: string = "", visualIcon: string = "", visualEyebrow: string = "", visualTitle: string = "", visualDescription: string = "", visualItems: unknown[] = [], visualStyle: string = "panel", trustItems: unknown[] = [], class: string = ""
Slots: default, actions, trust, visual
Outputs: None

TextLink

Render an accessible text action with optional icon, arrow, underline, external state, and semantic styling.

Mount: data-component="TextLink"
Props: label: string = "Learn more", href: string = "#", target: string = "", rel: string = "", external: boolean = false, icon: string = "", iconPosition: string = "start", showArrow: boolean = true, underline: boolean = false, size: string = "default", color: string = "primary", variant: string = "default", disabled: boolean = false, class: string = ""
Slots: None
Outputs: click({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })

BackToTop

Provide a responsive floating control that returns long pages to the top and can show scroll progress.

Mount: data-component="BackToTop"
Props: threshold: number = 500, label: string = "Back to top", ariaLabel: string = "Scroll back to top", icon: string = "icon-[lucide--arrow-up]", position: string = "right", offset: string = "md", behavior: string = "smooth", showProgress: boolean = false, showLabel: boolean = false, alwaysVisible: boolean = false, size: string = "default", color: string = "primary", variant: string = "solid", shape: string = "round", class: string = ""
Slots: None
Outputs: None

Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events.

Mount: data-component="Breadcrumb"
Props: label: string = "Breadcrumb", items: unknown[] = [], active: string = "", separator: string = "chevron", showHome: boolean = false, homeLabel: string = "Home", homeHref: string = "/", homeIcon: string = "icon-[lucide--house]", size: string = "default", color: string = "primary", variant: string = "minimal", class: string = ""
Slots: None
Outputs: select({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)

MegaMenu

Theme-aware, responsive mega menu component.

Mount: data-component="MegaMenu"
Props: size: string = "default", color: string = "primary", label: string = "Mega Menu", items: unknown[] = [], active: string = "", orientation: string = "horizontal", class: string = ""
Slots: default
Outputs: open({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), close({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), select({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)

Nav

Theme-aware, responsive nav component.

Mount: data-component="Nav"
Props: size: string = "default", color: string = "primary", label: string = "Nav", items: unknown[] = [], active: string = "", orientation: string = "horizontal", class: string = ""
Slots: default
Outputs: select({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)

Theme-aware, responsive navbar component.

Mount: data-component="Navbar"
Props: size: string = "default", color: string = "primary", label: string = "Primary navigation", topbarLabel: string = "Utility navigation", brand: Record<string, unknown> = {}, items: unknown[] = [], actions: unknown[] = [], active: string = "", sticky: boolean = false, openOnHover: boolean = false, maxWidth: string = "full", mobileLabel: string = "Toggle navigation", class: string = ""
Slots: topbar, actions
Outputs: toggle({ open: boolean }), open({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), close({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), select({ item: string | number | boolean | null | object; value: string | number | boolean; level: string }), action({ item: string | number | boolean | null | object; value: string | number | boolean })

Pagination

Theme-aware, responsive pagination component.

Mount: data-component="Pagination"
Props: size: string = "default", color: string = "primary", label: string = "Pagination", items: unknown[] = [], active: string = "", orientation: string = "horizontal", class: string = ""
Slots: default
Outputs: change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), previous({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), next({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })

Scrollspy

Theme-aware, responsive scrollspy component.

Mount: data-component="Scrollspy"
Props: size: string = "default", color: string = "primary", label: string = "Scrollspy", items: unknown[] = [], active: string = "", orientation: string = "horizontal", class: string = ""
Slots: default
Outputs: change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)

Sidebar

Theme-aware, responsive sidebar component.

Mount: data-component="Sidebar"
Props: size: string = "default", color: string = "primary", label: string = "Sidebar", items: unknown[] = [], active: string = "", orientation: string = "horizontal", mobileLabel: string = "Open navigation", class: string = ""
Slots: default
Outputs: toggle({ open: boolean }), open({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), close({ source: string }), select({ item: string | number | boolean | null | object; value: string | number | boolean; level: string })

Stepper

Theme-aware, responsive stepper component.

Mount: data-component="Stepper"
Props: size: string = "default", color: string = "primary", label: string = "Stepper", items: unknown[] = [], active: string = "", orientation: string = "horizontal", class: string = ""
Slots: default
Outputs: change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null), previous({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), next({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object }), complete({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })

Tabs

Switch between related responsive content panels with horizontal or vertical orientation and selection events.

Mount: data-component="Tabs"
Props: size: string = "default", color: string = "primary", label: string = "Tabs", items: unknown[] = [], active: string = "", orientation: string = "horizontal", class: string = ""
Slots: default
Outputs: None

Overlays

ContextMenu

Open an accessible keyboard-aware action menu from pointer or keyboard context interactions.

Mount: data-component="ContextMenu"
Props: items: unknown[] = [], open: boolean = false, defaultOpen: boolean = false, trigger: string = "contextmenu", placement: string = "pointer", align: string = "start", size: string = "default", color: string = "primary", variant: string = "raised", title: string = "", description: string = "", label: string = "Context menu", closeOnSelect: boolean = true, closeOnOutside: boolean = true, disabled: boolean = false, minWidth: string = "14rem", maxWidth: string = "20rem", class: string = ""
Slots: trigger, header, default, footer
Outputs: open({ x: number; y: number; trigger: string; sourceEvent: Event }), close({ reason: string; sourceEvent: Event }), select({ item: string | number | boolean | null | object; itemIndex: number; value: string | number | boolean; sourceEvent: Event }), action({ item: string | number | boolean | null | object; itemIndex: number; value: string | number | boolean; sourceEvent: Event })

Drawer

Present responsive modal side or bottom content with focus management, backdrop behavior, slots, and close events.

Mount: data-component="Drawer"
Props: open: boolean = false, defaultOpen: boolean = false, placement: string = "right", size: string = "md", color: string = "primary", variant: string = "default", title: string = "Drawer", description: string = "", icon: string = "", label: string = "Drawer", closeLabel: string = "Close drawer", showClose: boolean = true, closeOnBackdrop: boolean = true, closeOnEscape: boolean = true, duration: number = 260, overlay: boolean = true, scrollable: boolean = true, triggerLabel: string = "", triggerIcon: string = "", class: string = ""
Slots: trigger, header, default, footer
Outputs: open({ placement: string; sourceEvent: Event }), close({ reason: string; placement: string; sourceEvent: Event }), cancel({ placement: string; sourceEvent: Event })

Open an accessible anchored menu with keyboard navigation, item selection, actions, and responsive placement.

Mount: data-component="Dropdown"
Props: items: unknown[] = [], open: boolean = false, defaultOpen: boolean = false, label: string = "Open menu", icon: string = "", showChevron: boolean = true, menuLabel: string = "Dropdown menu", placement: string = "bottom-start", width: string = "md", size: string = "default", color: string = "primary", variant: string = "raised", closeOnSelect: boolean = true, closeOnOutside: boolean = true, disabled: boolean = false, emptyLabel: string = "No menu items", class: string = ""
Slots: trigger, header, default, footer
Outputs: toggle({ open: boolean; sourceEvent: Event; reason?: object }), open({ sourceEvent: Event }), close({ reason: string; sourceEvent: Event }), select({ item: string | number | boolean | null | object; itemIndex: number; value: string | number | boolean; sourceEvent: Event }), action({ item: string | number | boolean | null | object; itemIndex: number; value: string | number | boolean; sourceEvent: Event })

Present an accessible modal dialog with focus management, confirmation, cancellation, slots, and responsive sizing.

Mount: data-component="Modal"
Props: open: boolean = false, defaultOpen: boolean = false, title: string = "Modal", description: string = "", icon: string = "", label: string = "Modal dialog", size: string = "md", placement: string = "center", color: string = "primary", variant: string = "default", showClose: boolean = true, closeLabel: string = "Close modal", closeOnBackdrop: boolean = true, closeOnEscape: boolean = true, closeOnCancel: boolean = true, closeOnConfirm: boolean = false, showFooter: boolean = true, cancelLabel: string = "Cancel", cancelIcon: string = "", confirmLabel: string = "Confirm", confirmIcon: string = "", confirmDisabled: boolean = false, confirmLoading: boolean = false, destructive: boolean = false, triggerLabel: string = "", triggerIcon: string = "", scrollable: boolean = true, scrollBehavior: string = "inside", class: string = ""
Slots: trigger, header, default, footer
Outputs: open({ sourceEvent: Event }), close({ reason: string; sourceEvent: Event }), cancel({ sourceEvent: Event }), confirm({ sourceEvent: Event })

Display anchored supporting content with configurable trigger, placement, responsive sizing, and open or close events.

Mount: data-component="Popover"
Props: open: boolean = false, defaultOpen: boolean = false, triggerLabel: string = "Open popover", triggerIcon: string = "", title: string = "", description: string = "", icon: string = "", placement: string = "bottom-start", width: string = "md", size: string = "default", color: string = "primary", variant: string = "raised", showArrow: boolean = true, showClose: boolean = false, closeLabel: string = "Close popover", closeOnOutside: boolean = true, closeOnEscape: boolean = true, actionLabel: string = "", actionHref: string = "", actionIcon: string = "", closeOnAction: boolean = true, disabled: boolean = false, class: string = ""
Slots: trigger, header, default, footer
Outputs: toggle({ open: boolean; sourceEvent: Event; reason?: object }), open({ sourceEvent: Event }), close({ reason: string; sourceEvent: Event }), action({ href: string; sourceEvent: Event })

Show concise accessible contextual help on hover, focus, click, or controlled open state.

Mount: data-component="Tooltip"
Props: id: string = "", open: boolean = false, defaultOpen: boolean = false, title: string = "", description: string = "", content: string = "Tooltip", trigger: string = "hover", placement: string = "top", size: string = "default", color: string = "primary", variant: string = "dark", maxWidth: string = "18rem", offset: number = 10, showArrow: boolean = true, interactive: boolean = false, disabled: boolean = false, class: string = ""
Slots: trigger, default
Outputs: toggle({ open: boolean; reason: string; sourceEvent: Event }), open({ reason: string; sourceEvent: Event }), close({ reason: string; sourceEvent: Event })

Tables

DataTable

Sortable, filterable, paginated data table with row selection.

Mount: data-component="DataTable"
Props: color: string = "primary", size: string = "default", columns: unknown[] = [], rows: unknown[] = [], rowKey: string = "id", remote: boolean = false, loadingLabel: string = "Loading", errorLabel: string = "Could not load this data", retryLabel: string = "Try again", caption: string = "", description: string = "", searchable: boolean = true, searchPlaceholder: string = "Search", paginated: boolean = true, pageSize: number = 10, paginationStyle: string = "compact", pageSizes: number[] = [10, 25, 50], selectable: boolean = false, actions: unknown[] = [], striped: boolean = true, bordered: boolean = true, gridlines: string = "rows", density: string = "default", emptyLabel: string = "No records to show", noResultsLabel: string = "No records match your search", clearSearchLabel: string = "Clear search", stickyFirstColumn: boolean = false, layout: string = "rows", class: string = ""
Slots: default
Outputs: sort({ key: string; direction: string }), search({ query: string }), pageChange({ page: number; pageSize: number }), select({ selected: Array<string | number>; all: boolean }), change({ page: number; pageSize: number; total: number; query: string; sortKey: string; sortDirection: string }), rowClick({ row: object; sourceEvent: Event }), action({ id: string; selected: Array<string | number>; rows: object[]; sourceEvent: Event }), request({ instanceId: number; page: number; pageSize: number; sortKey: string; sortDirection: string; query: string })

99 KiB Raw Blame History