WorkRoot/WRNexusJS

Fork 0

Files

T

ClintchizandClaude Opus 5 c7ab605e85

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

Details

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

Details

feat(ui): migrate the page and section components, add the layout tour

Section, SectionHeader and PublicPageShell move onto wire-* classes with
local style blocks, variants as data attributes. SectionHeader loses 38
utility lines, and Section stops spending one line per variant and colour
pairing: tinted and solid now select on two attributes. PageHeader was already
on the convention and only needed the audit.

examples/basic-app/app/pages/layout.wrn composes the whole set into one page.

Building it surfaced a library-wide bug. Ten custom properties were referenced
by components and defined by nothing: --wire-color-focus, --wire-color-surface-soft,
--wire-color-on-danger, --wire-color-surface-subtle and the input-* family,
plus hover and contrast for every semantic colour except primary and
secondary. An undefined custom property does not warn, it resolves to nothing,
so focus rings drew with no colour and every soft surface rendered
transparent -- 27 components referenced surface-soft alone. They are derived
in the theme now, and a test checks every token a component references against
the rendered theme CSS rather than the source, since most are generated.

The semantic spread also had to move ahead of the primary and secondary
entries so the palette keeps winning for those two.

Known and unresolved: LayoutSplitter emits its sizeChange output and the
component does fire it, but a parent binding on the tag is not invoked. The
tour page therefore points at the handle aria-valuenow rather than wiring a
handler that would never update. Outputs work elsewhere, so this is narrower
than an outputs-are-broken problem and needs its own investigation.

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

2026-08-08 15:50:33 +05:30

97 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", centered: boolean = true, class: string = ""
Slots: default
Outputs: None

CustomScrollbar

Theme-aware, responsive custom scrollbar component.

Mount: data-component="CustomScrollbar"
Props: color: string = "primary", size: string = "default", axis: string = "vertical", thickness: number = 8, maxHeight: string = "20rem", radius: string = "999px", class: string = ""
Slots: default
Outputs: None

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", variant: string = "solid", 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", minItemWidth: string = "", 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", fit: string = "cover", 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: color: string = "primary", size: number = 50, orientation: string = "horizontal", minSize: number = 15, step: number = 5, label: string = "Resize panels", class: string = ""
Slots: start, end, default
Outputs: sizeChange({ size: number })

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 = "", underline: string = "hover", 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: color: string = "primary", size: string = "default", label: string = "Menu", icon: string = "", columns: unknown[] = [], footer: string = "", defaultOpen: boolean = false, class: string = ""
Slots: default
Outputs: open({ sourceEvent: Event }), close({ reason: string }), select({ item: object; value: string })

Nav

Theme-aware, responsive nav component.

Mount: data-component="Nav"
Props: color: string = "primary", size: string = "default", items: unknown[] = [], active: string = "", orientation: string = "horizontal", label: string = "Main", collapsible: boolean = true, toggleLabel: string = "Menu", class: string = ""
Slots: default
Outputs: select({ item: object; value: string })

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: color: string = "primary", size: string = "default", page: number = 1, pageSize: number = 10, total: number = 0, variant: string = "compact", siblingCount: number = 1, showSummary: boolean = true, label: string = "Pagination", previousLabel: string = "Previous", nextLabel: string = "Next", class: string = ""
Slots: default
Outputs: change({ page: number; pageSize: number }), previous({ page: number }), next({ page: number })

Scrollspy

Theme-aware, responsive scrollspy component.

Mount: data-component="Scrollspy"
Props: color: string = "primary", size: string = "default", items: unknown[] = [], active: string = "", label: string = "On this page", heading: string = "", class: string = ""
Slots: default
Outputs: change({ href: string; label: string })

Sidebar

Theme-aware, responsive sidebar component.

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

Stepper

Theme-aware, responsive stepper component.

Mount: data-component="Stepper"
Props: color: string = "primary", size: string = "default", steps: unknown[] = [], active: number = 0, orientation: string = "horizontal", clickable: boolean = false, label: string = "Progress", showPanel: boolean = false, controls: boolean = false, allowSkip: boolean = false, nextDisabled: boolean = false, backLabel: string = "Back", nextLabel: string = "Next", skipLabel: string = "Skip", finishLabel: string = "Finish", class: string = ""
Slots: step-{index}, panel-{index}, default
Outputs: change({ index: number; step: object }), back({ index: number; step: object }), next({ index: number; step: object }), skip({ index: number; step: object }), finish({ index: number; step: object })

Tabs

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

Mount: data-component="Tabs"
Props: color: string = "primary", size: string = "default", items: unknown[] = [], active: string = "", orientation: string = "horizontal", mode: string = "client", param: string = "tab", label: string = "Tabs", class: string = ""
Slots: panel-{valueOf(item, index)}, default
Outputs: change({ value: string; item: object; index: number }), select({ value: string; item: object; index: number })

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 })

97 KiB Raw Blame History