ClintchizandClaude Opus 5
52660cbb8e
Scrollspy replaces a scaffold that rendered bare anchors. The runtime observes the sections the links point at and writes the marker straight onto the links: an IntersectionObserver callback fires long after the client function that registered it returned, so a state write there would be dropped. Navbar and Breadcrumb both emitted aria-current="" for every inactive link. That is not a valid value -- the attribute takes a token or must be absent -- so every link claimed a state it did not have. Breadcrumb had it too, despite being the strongest component in the group. Navbar also takes roving arrow-key focus across its menu bar. 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": 419,
|
|
"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": false
|
|
},
|
|
{
|
|
"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": 3,
|
|
"propCount": 8,
|
|
"slots": ["step-{index}", "default"],
|
|
"events": ["change"],
|
|
"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
|
|
}
|
|
]
|
|
}
|