ClintchizandClaude Opus 5
5ce2771718
The scroll lock was mine, and it broke every page carrying a Drawer or Modal. Making dialog visibility testable, I replaced a size check with a data-show check -- but a Drawer animates open, so its panel cannot be hidden with data-show at all: display:none is not transitionable. Every closed Drawer therefore looked open, took the body scroll lock and never released it, and the page could not be scrolled. Both components publish data-open, which is the signal that actually means open, and that is what is read now. Stepper gains the wizard surface: showPanel renders each step body and shows only the active one, the same contract Tabs uses, and controls adds Back, Skip and Next, which becomes Finish on the last step. nextDisabled lets a form hold the step; the component never validates anything itself, since the page owns the form. Stepper also gets a single root. The panels and controls were siblings of the list, so the component had several roots and anything scoped to data-ui-component missed most of it. Tabs panels now slide in the direction of travel rather than fading upward. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
1325 lines
38 KiB
JSON
1325 lines
38 KiB
JSON
{
|
|
"generatedFrom": "packages/ui/component-reference.json",
|
|
"componentCount": 108,
|
|
"categoryCount": 11,
|
|
"totalDemoCount": 421,
|
|
"components": [
|
|
{
|
|
"name": "Accordion",
|
|
"mount": "Accordion",
|
|
"slug": "accordion",
|
|
"category": "base",
|
|
"purpose": "Theme-aware, responsive accordion component.",
|
|
"demoCount": 3,
|
|
"propCount": 17,
|
|
"slots": [],
|
|
"events": ["change", "open", "close"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "AdvancedDatePicker",
|
|
"mount": "AdvancedDatePicker",
|
|
"slug": "advanced-date-picker",
|
|
"category": "integrations",
|
|
"purpose": "Theme-aware, responsive advanced date picker component.",
|
|
"demoCount": 3,
|
|
"propCount": 7,
|
|
"slots": ["default"],
|
|
"events": ["input", "change", "open", "close", "clear"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "AdvancedRangeSlider",
|
|
"mount": "AdvancedRangeSlider",
|
|
"slug": "advanced-range-slider",
|
|
"category": "integrations",
|
|
"purpose": "Theme-aware, responsive advanced range slider component.",
|
|
"demoCount": 3,
|
|
"propCount": 7,
|
|
"slots": ["default"],
|
|
"events": ["input", "change", "start", "end"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "AdvancedSelect",
|
|
"mount": "AdvancedSelect",
|
|
"slug": "advanced-select",
|
|
"category": "advanced-forms",
|
|
"purpose": "Theme-aware, responsive advanced select component.",
|
|
"demoCount": 41,
|
|
"propCount": 51,
|
|
"slots": [],
|
|
"events": ["search", "select", "change", "clear", "open", "close", "load", "error"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Alert",
|
|
"mount": "Alert",
|
|
"slug": "alert",
|
|
"category": "base",
|
|
"purpose": "Theme-aware, responsive alert component.",
|
|
"demoCount": 3,
|
|
"propCount": 21,
|
|
"slots": [],
|
|
"events": ["dismiss", "action"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "AnnouncementBar",
|
|
"mount": "AnnouncementBar",
|
|
"slug": "announcement-bar",
|
|
"category": "marketing",
|
|
"purpose": "Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls.",
|
|
"demoCount": 3,
|
|
"propCount": 19,
|
|
"slots": [],
|
|
"events": ["dismiss"],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "AuthForm",
|
|
"mount": "AuthForm",
|
|
"slug": "auth-form",
|
|
"category": "core",
|
|
"purpose": "Reusable auth form component.",
|
|
"demoCount": 3,
|
|
"propCount": 13,
|
|
"slots": ["default"],
|
|
"events": ["submit", "change", "input", "focus", "blur"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "AuthSplitLayout",
|
|
"mount": "AuthSplitLayout",
|
|
"slug": "auth-split-layout",
|
|
"category": "core",
|
|
"purpose": "Reusable auth split layout component.",
|
|
"demoCount": 3,
|
|
"propCount": 8,
|
|
"slots": ["aside-extra", "form"],
|
|
"events": [],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Avatar",
|
|
"mount": "Avatar",
|
|
"slug": "avatar",
|
|
"category": "base",
|
|
"purpose": "Theme-aware, responsive avatar component.",
|
|
"demoCount": 3,
|
|
"propCount": 18,
|
|
"slots": [],
|
|
"events": ["load", "error", "click"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "AvatarGroup",
|
|
"mount": "AvatarGroup",
|
|
"slug": "avatar-group",
|
|
"category": "base",
|
|
"purpose": "Theme-aware, responsive avatar group component.",
|
|
"demoCount": 3,
|
|
"propCount": 12,
|
|
"slots": [],
|
|
"events": ["overflow"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "BackToTop",
|
|
"mount": "BackToTop",
|
|
"slug": "back-to-top",
|
|
"category": "navigation",
|
|
"purpose": "Provide a responsive floating control that returns long pages to the top and can show scroll progress.",
|
|
"demoCount": 3,
|
|
"propCount": 15,
|
|
"slots": [],
|
|
"events": [],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "Badge",
|
|
"mount": "Badge",
|
|
"slug": "badge",
|
|
"category": "base",
|
|
"purpose": "Theme-aware, responsive badge component.",
|
|
"demoCount": 3,
|
|
"propCount": 22,
|
|
"slots": [],
|
|
"events": ["dismiss"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Blockquote",
|
|
"mount": "Blockquote",
|
|
"slug": "blockquote",
|
|
"category": "base",
|
|
"purpose": "Theme-aware, responsive blockquote component.",
|
|
"demoCount": 3,
|
|
"propCount": 13,
|
|
"slots": ["default"],
|
|
"events": [],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Breadcrumb",
|
|
"mount": "Breadcrumb",
|
|
"slug": "breadcrumb",
|
|
"category": "navigation",
|
|
"purpose": "Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events.",
|
|
"demoCount": 3,
|
|
"propCount": 12,
|
|
"slots": [],
|
|
"events": ["select"],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "Button",
|
|
"mount": "Button",
|
|
"slug": "button",
|
|
"category": "base",
|
|
"purpose": "Theme-aware, responsive button component.",
|
|
"demoCount": 8,
|
|
"propCount": 25,
|
|
"slots": ["default"],
|
|
"events": ["click", "focus", "blur"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "ButtonGroup",
|
|
"mount": "ButtonGroup",
|
|
"slug": "button-group",
|
|
"category": "base",
|
|
"purpose": "Theme-aware, responsive button group component.",
|
|
"demoCount": 3,
|
|
"propCount": 13,
|
|
"slots": ["default"],
|
|
"events": ["click", "select", "change"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "CTASection",
|
|
"mount": "CTASection",
|
|
"slug": "ctasection",
|
|
"category": "marketing",
|
|
"purpose": "Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.",
|
|
"demoCount": 3,
|
|
"propCount": 25,
|
|
"slots": ["default", "actions", "visual", "footer"],
|
|
"events": [],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "Card",
|
|
"mount": "Card",
|
|
"slug": "card",
|
|
"category": "base",
|
|
"purpose": "Group related content in a responsive themed surface with title, description, content, and supporting slots.",
|
|
"demoCount": 3,
|
|
"propCount": 31,
|
|
"slots": ["default"],
|
|
"events": ["click", "action", "navigate", "dismiss", "load", "error"],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "Carousel",
|
|
"mount": "Carousel",
|
|
"slug": "carousel",
|
|
"category": "base",
|
|
"purpose": "Theme-aware, responsive carousel component.",
|
|
"demoCount": 3,
|
|
"propCount": 22,
|
|
"slots": ["default"],
|
|
"events": [
|
|
"initialize",
|
|
"change",
|
|
"previous",
|
|
"next",
|
|
"play",
|
|
"pause",
|
|
"reachStart",
|
|
"reachEnd",
|
|
"dragStart",
|
|
"dragEnd"
|
|
],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Chart",
|
|
"mount": "Chart",
|
|
"slug": "chart",
|
|
"category": "integrations",
|
|
"purpose": "Theme-aware, responsive chart component.",
|
|
"demoCount": 3,
|
|
"propCount": 7,
|
|
"slots": ["default"],
|
|
"events": ["select", "dataPointClick", "legendToggle"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "ChatBubble",
|
|
"mount": "ChatBubble",
|
|
"slug": "chat-bubble",
|
|
"category": "base",
|
|
"purpose": "Theme-aware, responsive chat bubble component.",
|
|
"demoCount": 3,
|
|
"propCount": 11,
|
|
"slots": ["default"],
|
|
"events": ["action", "messageClick", "avatarClick", "linkClick"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Checkbox",
|
|
"mount": "Checkbox",
|
|
"slug": "checkbox",
|
|
"category": "forms",
|
|
"purpose": "Theme-aware, responsive checkbox component.",
|
|
"demoCount": 3,
|
|
"propCount": 27,
|
|
"slots": ["default"],
|
|
"events": ["input", "change", "focus", "blur", "invalid"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Clipboard",
|
|
"mount": "Clipboard",
|
|
"slug": "clipboard",
|
|
"category": "integrations",
|
|
"purpose": "Theme-aware, responsive clipboard component.",
|
|
"demoCount": 3,
|
|
"propCount": 7,
|
|
"slots": ["default"],
|
|
"events": ["copy", "success", "error"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Collapse",
|
|
"mount": "Collapse",
|
|
"slug": "collapse",
|
|
"category": "base",
|
|
"purpose": "Theme-aware, responsive collapse component.",
|
|
"demoCount": 3,
|
|
"propCount": 8,
|
|
"slots": ["default"],
|
|
"events": ["toggle", "open", "close"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "ColorPicker",
|
|
"mount": "ColorPicker",
|
|
"slug": "color-picker",
|
|
"category": "forms",
|
|
"purpose": "Theme-aware, responsive color picker component.",
|
|
"demoCount": 3,
|
|
"propCount": 19,
|
|
"slots": [],
|
|
"events": ["input", "change", "focus", "blur"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Columns",
|
|
"mount": "Columns",
|
|
"slug": "columns",
|
|
"category": "layout",
|
|
"purpose": "Create responsive balanced content columns with configurable count, gap, density, and maximum width.",
|
|
"demoCount": 3,
|
|
"propCount": 6,
|
|
"slots": ["default"],
|
|
"events": [],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "ComboBox",
|
|
"mount": "ComboBox",
|
|
"slug": "combo-box",
|
|
"category": "advanced-forms",
|
|
"purpose": "Editable autocomplete combobox with local and remote suggestions.",
|
|
"demoCount": 21,
|
|
"propCount": 41,
|
|
"slots": [],
|
|
"events": ["search", "select", "change", "clear", "open", "close", "load", "error"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Confetti",
|
|
"mount": "Confetti",
|
|
"slug": "confetti",
|
|
"category": "integrations",
|
|
"purpose": "Theme-aware, responsive confetti component.",
|
|
"demoCount": 3,
|
|
"propCount": 7,
|
|
"slots": ["default"],
|
|
"events": ["start", "complete"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Container",
|
|
"mount": "Container",
|
|
"slug": "container",
|
|
"category": "layout",
|
|
"purpose": "Constrain and align page content with responsive gutters and compact, wide, or full width options.",
|
|
"demoCount": 3,
|
|
"propCount": 6,
|
|
"slots": ["default"],
|
|
"events": [],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "ContextMenu",
|
|
"mount": "ContextMenu",
|
|
"slug": "context-menu",
|
|
"category": "overlays",
|
|
"purpose": "Open an accessible keyboard-aware action menu from pointer or keyboard context interactions.",
|
|
"demoCount": 3,
|
|
"propCount": 18,
|
|
"slots": ["trigger", "header", "default", "footer"],
|
|
"events": ["open", "close", "select", "action"],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "CopyMarkup",
|
|
"mount": "CopyMarkup",
|
|
"slug": "copy-markup",
|
|
"category": "advanced-forms",
|
|
"purpose": "Theme-aware, responsive copy markup component.",
|
|
"demoCount": 3,
|
|
"propCount": 13,
|
|
"slots": [],
|
|
"events": ["copy", "success", "error"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "CustomScrollbar",
|
|
"mount": "CustomScrollbar",
|
|
"slug": "custom-scrollbar",
|
|
"category": "layout",
|
|
"purpose": "Theme-aware, responsive custom scrollbar component.",
|
|
"demoCount": 3,
|
|
"propCount": 6,
|
|
"slots": ["default"],
|
|
"events": ["scroll"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "DataMap",
|
|
"mount": "DataMap",
|
|
"slug": "data-map",
|
|
"category": "integrations",
|
|
"purpose": "Theme-aware, responsive data map component.",
|
|
"demoCount": 3,
|
|
"propCount": 7,
|
|
"slots": ["default"],
|
|
"events": ["select", "change"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "DataTable",
|
|
"mount": "DataTable",
|
|
"slug": "data-table",
|
|
"category": "tables",
|
|
"purpose": "Sortable, filterable, paginated data table with row selection.",
|
|
"demoCount": 9,
|
|
"propCount": 29,
|
|
"slots": ["default"],
|
|
"events": [
|
|
"sort",
|
|
"search",
|
|
"pageChange",
|
|
"select",
|
|
"change",
|
|
"rowClick",
|
|
"action",
|
|
"request"
|
|
],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "DatePicker",
|
|
"mount": "DatePicker",
|
|
"slug": "date-picker",
|
|
"category": "base",
|
|
"purpose": "Theme-aware, responsive date picker component.",
|
|
"demoCount": 3,
|
|
"propCount": 25,
|
|
"slots": [],
|
|
"events": ["input", "change", "open", "close", "focus", "blur", "invalid"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "DeviceFrame",
|
|
"mount": "DeviceFrame",
|
|
"slug": "device-frame",
|
|
"category": "base",
|
|
"purpose": "Theme-aware, responsive device frame component.",
|
|
"demoCount": 3,
|
|
"propCount": 14,
|
|
"slots": ["default"],
|
|
"events": ["change", "rotate"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Divider",
|
|
"mount": "Divider",
|
|
"slug": "divider",
|
|
"category": "layout",
|
|
"purpose": "Separate related horizontal or vertical content with optional labels, sizes, and semantic colors.",
|
|
"demoCount": 3,
|
|
"propCount": 5,
|
|
"slots": [],
|
|
"events": [],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "DragAndDrop",
|
|
"mount": "DragAndDrop",
|
|
"slug": "drag-and-drop",
|
|
"category": "integrations",
|
|
"purpose": "Theme-aware, responsive drag and drop component.",
|
|
"demoCount": 3,
|
|
"propCount": 7,
|
|
"slots": ["default"],
|
|
"events": ["dragStart", "dragEnd", "dragEnter", "dragLeave", "drop", "change"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Drawer",
|
|
"mount": "Drawer",
|
|
"slug": "drawer",
|
|
"category": "overlays",
|
|
"purpose": "Present responsive modal side or bottom content with focus management, backdrop behavior, slots, and close events.",
|
|
"demoCount": 3,
|
|
"propCount": 20,
|
|
"slots": ["trigger", "header", "default", "footer"],
|
|
"events": ["open", "close", "cancel"],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "Dropdown",
|
|
"mount": "Dropdown",
|
|
"slug": "dropdown",
|
|
"category": "overlays",
|
|
"purpose": "Open an accessible anchored menu with keyboard navigation, item selection, actions, and responsive placement.",
|
|
"demoCount": 3,
|
|
"propCount": 17,
|
|
"slots": ["trigger", "header", "default", "footer"],
|
|
"events": ["toggle", "open", "close", "select", "action"],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "FeatureCard",
|
|
"mount": "FeatureCard",
|
|
"slug": "feature-card",
|
|
"category": "marketing",
|
|
"purpose": "Present one linked feature or service with media, icon, badge, description, and action.",
|
|
"demoCount": 3,
|
|
"propCount": 28,
|
|
"slots": ["media", "icon", "default", "footer"],
|
|
"events": [],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "FeatureGrid",
|
|
"mount": "FeatureGrid",
|
|
"slug": "feature-grid",
|
|
"category": "layout",
|
|
"purpose": "Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.",
|
|
"demoCount": 3,
|
|
"propCount": 14,
|
|
"slots": ["default"],
|
|
"events": [],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "FeatureIconCard",
|
|
"mount": "FeatureIconCard",
|
|
"slug": "feature-icon-card",
|
|
"category": "marketing",
|
|
"purpose": "Present a compact feature or benefit with a styled icon, title, description, badge, and optional link.",
|
|
"demoCount": 3,
|
|
"propCount": 14,
|
|
"slots": ["default", "footer"],
|
|
"events": [],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "FileInput",
|
|
"mount": "FileInput",
|
|
"slug": "file-input",
|
|
"category": "forms",
|
|
"purpose": "Theme-aware, responsive file input component.",
|
|
"demoCount": 3,
|
|
"propCount": 21,
|
|
"slots": [],
|
|
"events": ["input", "change", "focus", "blur", "select", "clear", "invalid"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "FileUpload",
|
|
"mount": "FileUpload",
|
|
"slug": "file-upload",
|
|
"category": "integrations",
|
|
"purpose": "Theme-aware, responsive file upload component.",
|
|
"demoCount": 3,
|
|
"propCount": 7,
|
|
"slots": ["default"],
|
|
"events": ["select", "upload", "progress", "success", "error", "cancel", "remove"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "FileUploadProgress",
|
|
"mount": "FileUploadProgress",
|
|
"slug": "file-upload-progress",
|
|
"category": "base",
|
|
"purpose": "Theme-aware, responsive file upload progress component.",
|
|
"demoCount": 3,
|
|
"propCount": 13,
|
|
"slots": [],
|
|
"events": ["cancel", "retry", "complete"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Footer",
|
|
"mount": "Footer",
|
|
"slug": "footer",
|
|
"category": "layout",
|
|
"purpose": "Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.",
|
|
"demoCount": 3,
|
|
"propCount": 8,
|
|
"slots": ["pre-footer", "post-footer", "copyright-left", "copyright-right"],
|
|
"events": ["select", "action"],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "Grid",
|
|
"mount": "Grid",
|
|
"slug": "grid",
|
|
"category": "layout",
|
|
"purpose": "Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width.",
|
|
"demoCount": 3,
|
|
"propCount": 6,
|
|
"slots": ["default"],
|
|
"events": [],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "Hero",
|
|
"mount": "Hero",
|
|
"slug": "hero",
|
|
"category": "marketing",
|
|
"purpose": "Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel.",
|
|
"demoCount": 3,
|
|
"propCount": 38,
|
|
"slots": ["eyebrow", "actions", "trust", "default", "visual", "footer"],
|
|
"events": [],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "HeroActions",
|
|
"mount": "HeroActions",
|
|
"slug": "hero-actions",
|
|
"category": "marketing",
|
|
"purpose": "Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking.",
|
|
"demoCount": 3,
|
|
"propCount": 8,
|
|
"slots": ["default"],
|
|
"events": [],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "Image",
|
|
"mount": "Image",
|
|
"slug": "image",
|
|
"category": "layout",
|
|
"purpose": "Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment.",
|
|
"demoCount": 3,
|
|
"propCount": 9,
|
|
"slots": ["default"],
|
|
"events": [],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "Input",
|
|
"mount": "Input",
|
|
"slug": "input",
|
|
"category": "forms",
|
|
"purpose": "Theme-aware, responsive input component.",
|
|
"demoCount": 3,
|
|
"propCount": 28,
|
|
"slots": [],
|
|
"events": ["input", "change", "focus", "blur", "invalid", "keydown", "keyup"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "InputGroup",
|
|
"mount": "InputGroup",
|
|
"slug": "input-group",
|
|
"category": "forms",
|
|
"purpose": "Theme-aware, responsive input group component.",
|
|
"demoCount": 3,
|
|
"propCount": 23,
|
|
"slots": [],
|
|
"events": ["input", "change", "focus", "blur", "submit", "action"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "InputNumber",
|
|
"mount": "InputNumber",
|
|
"slug": "input-number",
|
|
"category": "advanced-forms",
|
|
"purpose": "Theme-aware, responsive input number component.",
|
|
"demoCount": 12,
|
|
"propCount": 40,
|
|
"slots": [],
|
|
"events": ["input", "change", "increment", "decrement"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Kbd",
|
|
"mount": "Kbd",
|
|
"slug": "kbd",
|
|
"category": "layout",
|
|
"purpose": "Theme-aware, responsive kbd component.",
|
|
"demoCount": 3,
|
|
"propCount": 4,
|
|
"slots": ["default"],
|
|
"events": [],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "LayoutSplitter",
|
|
"mount": "LayoutSplitter",
|
|
"slug": "layout-splitter",
|
|
"category": "layout",
|
|
"purpose": "Theme-aware, responsive layout splitter component.",
|
|
"demoCount": 3,
|
|
"propCount": 6,
|
|
"slots": ["default"],
|
|
"events": ["resizeStart", "resize", "resizeEnd"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "LegendIndicator",
|
|
"mount": "LegendIndicator",
|
|
"slug": "legend-indicator",
|
|
"category": "base",
|
|
"purpose": "Theme-aware, responsive legend indicator component.",
|
|
"demoCount": 3,
|
|
"propCount": 7,
|
|
"slots": ["default"],
|
|
"events": ["toggle", "select"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Link",
|
|
"mount": "Link",
|
|
"slug": "link",
|
|
"category": "layout",
|
|
"purpose": "Render an accessible internal or external link with target, relation, size, color, and public focus or click events.",
|
|
"demoCount": 3,
|
|
"propCount": 8,
|
|
"slots": ["default"],
|
|
"events": [],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "List",
|
|
"mount": "List",
|
|
"slug": "list",
|
|
"category": "base",
|
|
"purpose": "Present structured responsive linked or status items with icons, descriptions, actions, and selection events.",
|
|
"demoCount": 3,
|
|
"propCount": 7,
|
|
"slots": ["default"],
|
|
"events": [],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "ListGroup",
|
|
"mount": "ListGroup",
|
|
"slug": "list-group",
|
|
"category": "base",
|
|
"purpose": "Theme-aware, responsive list group component.",
|
|
"demoCount": 3,
|
|
"propCount": 7,
|
|
"slots": ["default"],
|
|
"events": ["select", "change"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Map",
|
|
"mount": "Map",
|
|
"slug": "map",
|
|
"category": "integrations",
|
|
"purpose": "Present responsive location information and markers with map-ready metadata and movement or marker events.",
|
|
"demoCount": 3,
|
|
"propCount": 7,
|
|
"slots": ["default"],
|
|
"events": [],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "MarketingSectionHeader",
|
|
"mount": "MarketingSectionHeader",
|
|
"slug": "marketing-section-header",
|
|
"category": "marketing",
|
|
"purpose": "Introduce marketing content with an eyebrow, title, description, and optional linked action.",
|
|
"demoCount": 3,
|
|
"propCount": 12,
|
|
"slots": ["icon", "actions", "default"],
|
|
"events": [],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "Marquee",
|
|
"mount": "Marquee",
|
|
"slug": "marquee",
|
|
"category": "base",
|
|
"purpose": "Continuously present responsive labels, partners, notices, or capabilities with pause and resume behavior.",
|
|
"demoCount": 3,
|
|
"propCount": 7,
|
|
"slots": ["default"],
|
|
"events": [],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "MegaMenu",
|
|
"mount": "MegaMenu",
|
|
"slug": "mega-menu",
|
|
"category": "navigation",
|
|
"purpose": "Theme-aware, responsive mega menu component.",
|
|
"demoCount": 2,
|
|
"propCount": 8,
|
|
"slots": ["default"],
|
|
"events": ["open", "close", "select"],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "MetricCard",
|
|
"mount": "MetricCard",
|
|
"slug": "metric-card",
|
|
"category": "data",
|
|
"purpose": "Display one operational metric with value, suffix, description, icon, trend, progress, and optional action.",
|
|
"demoCount": 3,
|
|
"propCount": 28,
|
|
"slots": ["default", "footer"],
|
|
"events": ["select", "action"],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "MetricGrid",
|
|
"mount": "MetricGrid",
|
|
"slug": "metric-grid",
|
|
"category": "data",
|
|
"purpose": "Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.",
|
|
"demoCount": 3,
|
|
"propCount": 13,
|
|
"slots": ["default"],
|
|
"events": ["select", "action"],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "Modal",
|
|
"mount": "Modal",
|
|
"slug": "modal",
|
|
"category": "overlays",
|
|
"purpose": "Present an accessible modal dialog with focus management, confirmation, cancellation, slots, and responsive sizing.",
|
|
"demoCount": 3,
|
|
"propCount": 29,
|
|
"slots": ["trigger", "header", "default", "footer"],
|
|
"events": ["open", "close", "cancel", "confirm"],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "Nav",
|
|
"mount": "Nav",
|
|
"slug": "nav",
|
|
"category": "navigation",
|
|
"purpose": "Theme-aware, responsive nav component.",
|
|
"demoCount": 3,
|
|
"propCount": 9,
|
|
"slots": ["default"],
|
|
"events": ["select"],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "Navbar",
|
|
"mount": "Navbar",
|
|
"slug": "navbar",
|
|
"category": "navigation",
|
|
"purpose": "Theme-aware, responsive navbar component.",
|
|
"demoCount": 3,
|
|
"propCount": 13,
|
|
"slots": ["topbar", "actions"],
|
|
"events": ["toggle", "open", "close", "select", "action"],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "PageHeader",
|
|
"mount": "PageHeader",
|
|
"slug": "page-header",
|
|
"category": "marketing",
|
|
"purpose": "Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions.",
|
|
"demoCount": 3,
|
|
"propCount": 25,
|
|
"slots": ["meta", "actions", "default"],
|
|
"events": [],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "Pagination",
|
|
"mount": "Pagination",
|
|
"slug": "pagination",
|
|
"category": "navigation",
|
|
"purpose": "Theme-aware, responsive pagination component.",
|
|
"demoCount": 3,
|
|
"propCount": 12,
|
|
"slots": ["default"],
|
|
"events": ["change", "previous", "next"],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "PinInput",
|
|
"mount": "PinInput",
|
|
"slug": "pin-input",
|
|
"category": "advanced-forms",
|
|
"purpose": "Secure multi-cell PIN and verification-code input with regex and paste support.",
|
|
"demoCount": 16,
|
|
"propCount": 26,
|
|
"slots": [],
|
|
"events": ["input", "change", "complete", "paste", "clear", "error"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Popover",
|
|
"mount": "Popover",
|
|
"slug": "popover",
|
|
"category": "overlays",
|
|
"purpose": "Display anchored supporting content with configurable trigger, placement, responsive sizing, and open or close events.",
|
|
"demoCount": 3,
|
|
"propCount": 23,
|
|
"slots": ["trigger", "header", "default", "footer"],
|
|
"events": ["toggle", "open", "close", "action"],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "PortalDashboard",
|
|
"mount": "PortalDashboard",
|
|
"slug": "portal-dashboard",
|
|
"category": "core",
|
|
"purpose": "Reusable portal dashboard component.",
|
|
"demoCount": 3,
|
|
"propCount": 14,
|
|
"slots": ["hero-action"],
|
|
"events": ["action", "navigate"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "PreferenceSwitcher",
|
|
"mount": "PreferenceSwitcher",
|
|
"slug": "preference-switcher",
|
|
"category": "core",
|
|
"purpose": "Reusable preference switcher component.",
|
|
"demoCount": 3,
|
|
"propCount": 9,
|
|
"slots": [],
|
|
"events": ["theme", "color", "language"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Progress",
|
|
"mount": "Progress",
|
|
"slug": "progress",
|
|
"category": "base",
|
|
"purpose": "Theme-aware, responsive progress component.",
|
|
"demoCount": 3,
|
|
"propCount": 7,
|
|
"slots": [],
|
|
"events": [],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "PublicPageShell",
|
|
"mount": "PublicPageShell",
|
|
"slug": "public-page-shell",
|
|
"category": "layout",
|
|
"purpose": "Provide the outer responsive structure, width, background, slots, overflow, and minimum-height behavior for public pages.",
|
|
"demoCount": 3,
|
|
"propCount": 10,
|
|
"slots": ["before", "default", "after"],
|
|
"events": [],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "Radio",
|
|
"mount": "Radio",
|
|
"slug": "radio",
|
|
"category": "forms",
|
|
"purpose": "Theme-aware, responsive radio component.",
|
|
"demoCount": 3,
|
|
"propCount": 25,
|
|
"slots": [],
|
|
"events": ["input", "change", "focus", "blur", "invalid"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "RangeSlider",
|
|
"mount": "RangeSlider",
|
|
"slug": "range-slider",
|
|
"category": "forms",
|
|
"purpose": "Theme-aware, responsive range slider component.",
|
|
"demoCount": 3,
|
|
"propCount": 26,
|
|
"slots": [],
|
|
"events": ["input", "change", "focus", "blur"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Rating",
|
|
"mount": "Rating",
|
|
"slug": "rating",
|
|
"category": "base",
|
|
"purpose": "Theme-aware, responsive rating component.",
|
|
"demoCount": 3,
|
|
"propCount": 7,
|
|
"slots": ["default"],
|
|
"events": ["input", "change"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Scrollspy",
|
|
"mount": "Scrollspy",
|
|
"slug": "scrollspy",
|
|
"category": "navigation",
|
|
"purpose": "Theme-aware, responsive scrollspy component.",
|
|
"demoCount": 2,
|
|
"propCount": 7,
|
|
"slots": ["default"],
|
|
"events": ["change"],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "SearchBox",
|
|
"mount": "SearchBox",
|
|
"slug": "search-box",
|
|
"category": "forms",
|
|
"purpose": "Provide an accessible responsive search field with labels, validation states, sizes, and input or change events.",
|
|
"demoCount": 3,
|
|
"propCount": 13,
|
|
"slots": [],
|
|
"events": [],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "Section",
|
|
"mount": "Section",
|
|
"slug": "section",
|
|
"category": "layout",
|
|
"purpose": "Create a responsive themed page section with controlled spacing, width, borders, and surface treatment.",
|
|
"demoCount": 3,
|
|
"propCount": 10,
|
|
"slots": ["default"],
|
|
"events": [],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "SectionHeader",
|
|
"mount": "SectionHeader",
|
|
"slug": "section-header",
|
|
"category": "layout",
|
|
"purpose": "Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.",
|
|
"demoCount": 3,
|
|
"propCount": 10,
|
|
"slots": ["icon", "default", "actions"],
|
|
"events": [],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "Select",
|
|
"mount": "Select",
|
|
"slug": "select",
|
|
"category": "forms",
|
|
"purpose": "Theme-aware, responsive select component.",
|
|
"demoCount": 3,
|
|
"propCount": 22,
|
|
"slots": [],
|
|
"events": ["input", "change", "focus", "blur", "open", "close", "invalid"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Sidebar",
|
|
"mount": "Sidebar",
|
|
"slug": "sidebar",
|
|
"category": "navigation",
|
|
"purpose": "Theme-aware, responsive sidebar component.",
|
|
"demoCount": 2,
|
|
"propCount": 8,
|
|
"slots": ["default", "drawer"],
|
|
"events": ["toggle", "open", "close", "select"],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "Skeleton",
|
|
"mount": "Skeleton",
|
|
"slug": "skeleton",
|
|
"category": "base",
|
|
"purpose": "Theme-aware, responsive skeleton component.",
|
|
"demoCount": 3,
|
|
"propCount": 5,
|
|
"slots": [],
|
|
"events": [],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Spinner",
|
|
"mount": "Spinner",
|
|
"slug": "spinner",
|
|
"category": "base",
|
|
"purpose": "Theme-aware, responsive spinner component.",
|
|
"demoCount": 3,
|
|
"propCount": 5,
|
|
"slots": [],
|
|
"events": [],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "SplitHero",
|
|
"mount": "SplitHero",
|
|
"slug": "split-hero",
|
|
"category": "marketing",
|
|
"purpose": "Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel.",
|
|
"demoCount": 3,
|
|
"propCount": 31,
|
|
"slots": ["default", "actions", "trust", "visual"],
|
|
"events": [],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "StatsBar",
|
|
"mount": "StatsBar",
|
|
"slug": "stats-bar",
|
|
"category": "data",
|
|
"purpose": "Present a compact responsive strip of key facts, counts, performance indicators, or trust signals.",
|
|
"demoCount": 3,
|
|
"propCount": 10,
|
|
"slots": [],
|
|
"events": [],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "Stepper",
|
|
"mount": "Stepper",
|
|
"slug": "stepper",
|
|
"category": "navigation",
|
|
"purpose": "Theme-aware, responsive stepper component.",
|
|
"demoCount": 5,
|
|
"propCount": 16,
|
|
"slots": ["step-{index}", "panel-{index}", "default"],
|
|
"events": ["change", "back", "next", "skip", "finish"],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "StrongPassword",
|
|
"mount": "StrongPassword",
|
|
"slug": "strong-password",
|
|
"category": "advanced-forms",
|
|
"purpose": "Theme-aware, responsive strong password component.",
|
|
"demoCount": 6,
|
|
"propCount": 27,
|
|
"slots": [],
|
|
"events": ["input", "change", "strength"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "StyledIcon",
|
|
"mount": "StyledIcon",
|
|
"slug": "styled-icon",
|
|
"category": "base",
|
|
"purpose": "Theme-aware, responsive styled icon component.",
|
|
"demoCount": 3,
|
|
"propCount": 7,
|
|
"slots": ["default"],
|
|
"events": [],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Switch",
|
|
"mount": "Switch",
|
|
"slug": "switch",
|
|
"category": "forms",
|
|
"purpose": "Theme-aware, responsive switch component.",
|
|
"demoCount": 3,
|
|
"propCount": 20,
|
|
"slots": [],
|
|
"events": ["input", "change", "focus", "blur"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Tabs",
|
|
"mount": "Tabs",
|
|
"slug": "tabs",
|
|
"category": "navigation",
|
|
"purpose": "Switch between related responsive content panels with horizontal or vertical orientation and selection events.",
|
|
"demoCount": 4,
|
|
"propCount": 9,
|
|
"slots": ["panel-{valueOf(item, index)}", "default"],
|
|
"events": ["change", "select"],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "TextLink",
|
|
"mount": "TextLink",
|
|
"slug": "text-link",
|
|
"category": "marketing",
|
|
"purpose": "Render an accessible text action with optional icon, arrow, underline, external state, and semantic styling.",
|
|
"demoCount": 3,
|
|
"propCount": 14,
|
|
"slots": [],
|
|
"events": ["click", "focus", "blur"],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "Textarea",
|
|
"mount": "Textarea",
|
|
"slug": "textarea",
|
|
"category": "forms",
|
|
"purpose": "Theme-aware, responsive textarea component.",
|
|
"demoCount": 3,
|
|
"propCount": 23,
|
|
"slots": [],
|
|
"events": ["input", "change", "focus", "blur", "invalid"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "TimePicker",
|
|
"mount": "TimePicker",
|
|
"slug": "time-picker",
|
|
"category": "forms",
|
|
"purpose": "Theme-aware, responsive time picker component.",
|
|
"demoCount": 3,
|
|
"propCount": 26,
|
|
"slots": [],
|
|
"events": ["input", "change", "focus", "blur", "open", "close", "invalid"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Timeline",
|
|
"mount": "Timeline",
|
|
"slug": "timeline",
|
|
"category": "base",
|
|
"purpose": "Present responsive chronological activity, milestones, or workflow status with rich item metadata.",
|
|
"demoCount": 3,
|
|
"propCount": 7,
|
|
"slots": ["default"],
|
|
"events": [],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "Toast",
|
|
"mount": "Toast",
|
|
"slug": "toast",
|
|
"category": "base",
|
|
"purpose": "Theme-aware, responsive toast component.",
|
|
"demoCount": 3,
|
|
"propCount": 7,
|
|
"slots": ["default"],
|
|
"events": ["dismiss", "action"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "ToastNotifications",
|
|
"mount": "ToastNotifications",
|
|
"slug": "toast-notifications",
|
|
"category": "integrations",
|
|
"purpose": "Theme-aware, responsive toast notifications component.",
|
|
"demoCount": 3,
|
|
"propCount": 7,
|
|
"slots": ["default"],
|
|
"events": ["add", "dismiss", "clear", "action"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Toaster",
|
|
"mount": "Toaster",
|
|
"slug": "toaster",
|
|
"category": "core",
|
|
"purpose": "Reusable toaster component.",
|
|
"demoCount": 1,
|
|
"propCount": 15,
|
|
"slots": [],
|
|
"events": ["show", "dismiss", "action"],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "ToggleCount",
|
|
"mount": "ToggleCount",
|
|
"slug": "toggle-count",
|
|
"category": "advanced-forms",
|
|
"purpose": "Theme-aware, responsive toggle count component.",
|
|
"demoCount": 3,
|
|
"propCount": 23,
|
|
"slots": [],
|
|
"events": ["change", "toggle"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "TogglePassword",
|
|
"mount": "TogglePassword",
|
|
"slug": "toggle-password",
|
|
"category": "advanced-forms",
|
|
"purpose": "Accessible password field with optional show and hide controls.",
|
|
"demoCount": 10,
|
|
"propCount": 24,
|
|
"slots": [],
|
|
"events": ["input", "change", "toggle"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Tooltip",
|
|
"mount": "Tooltip",
|
|
"slug": "tooltip",
|
|
"category": "overlays",
|
|
"purpose": "Show concise accessible contextual help on hover, focus, click, or controlled open state.",
|
|
"demoCount": 3,
|
|
"propCount": 17,
|
|
"slots": ["trigger", "default"],
|
|
"events": ["toggle", "open", "close"],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "TreeView",
|
|
"mount": "TreeView",
|
|
"slug": "tree-view",
|
|
"category": "base",
|
|
"purpose": "Theme-aware, responsive tree view component.",
|
|
"demoCount": 3,
|
|
"propCount": 7,
|
|
"slots": ["default"],
|
|
"events": ["select", "toggle", "expand", "collapse"],
|
|
"profiled": false
|
|
},
|
|
{
|
|
"name": "Typography",
|
|
"mount": "Typography",
|
|
"slug": "typography",
|
|
"category": "layout",
|
|
"purpose": "Apply consistent readable responsive typography, widths, columns, spacing, and editorial hierarchy.",
|
|
"demoCount": 3,
|
|
"propCount": 6,
|
|
"slots": ["default"],
|
|
"events": [],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"name": "WysiwygEditor",
|
|
"mount": "WysiwygEditor",
|
|
"slug": "wysiwyg-editor",
|
|
"category": "integrations",
|
|
"purpose": "Theme-aware, responsive wysiwyg editor component.",
|
|
"demoCount": 3,
|
|
"propCount": 7,
|
|
"slots": ["default"],
|
|
"events": ["input", "change", "focus", "blur"],
|
|
"profiled": false
|
|
}
|
|
]
|
|
}
|