ClintchizandClaude Opus 5
c7ab605e85
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>
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": 7,
|
|
"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": 2,
|
|
"propCount": 7,
|
|
"slots": ["default"],
|
|
"events": [],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"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": 6,
|
|
"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": 7,
|
|
"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": 10,
|
|
"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": 2,
|
|
"propCount": 7,
|
|
"slots": ["start", "end", "default"],
|
|
"events": ["sizeChange"],
|
|
"profiled": true
|
|
},
|
|
{
|
|
"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": 9,
|
|
"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
|
|
}
|
|
]
|
|
}
|