twntyx-css 1.0.0

package/llm/index.json

@@ -0,0 +1,1615 @@
+{
+  "llmSchemaVersion": "1.0.0",
+  "designSystemVersion": "1.0.0",
+  "packageName": "twntyx-css",
+  "apiModel": "html-class",
+  "sourceFingerprint": "7e17140f9f9bd46722b67daac0578dfe19eed83d9e2a0cffa1585850bde1f505",
+  "files": {
+    "schema": "schema.json",
+    "tokens": "tokens.json",
+    "patterns": "patterns.json",
+    "rules": "rules.json",
+    "componentsDir": "components",
+    "examplesDir": "examples",
+    "llms": "llms.txt"
+  },
+  "components": [
+    {
+      "id": "ai-background",
+      "name": "Background",
+      "file": "components/ai-background.json",
+      "status": "stable",
+      "summary": "AI background is a twntyX branded background for AI experiences with animated gradients.",
+      "keywords": [
+        "agent",
+        "ai",
+        "ai background",
+        "ai-background",
+        "background",
+        "background blur",
+        "blur",
+        "blur background",
+        "chat",
+        "gpt",
+        "llama",
+        "llm",
+        "openai",
+        "twntyX"
+      ]
+    },
+    {
+      "id": "ai-orb",
+      "name": "Orb",
+      "file": "components/ai-orb.json",
+      "status": "stable",
+      "summary": "Ambient AI orb with layered conic gradients and soft glow.",
+      "keywords": [
+        "ai",
+        "ai orb",
+        "ai-orb",
+        "ambient",
+        "animation",
+        "background",
+        "glow",
+        "orb",
+        "sphere"
+      ]
+    },
+    {
+      "id": "ai-perl",
+      "name": "Perl",
+      "file": "components/ai-perl.json",
+      "status": "stable",
+      "summary": "Animated AI loader with circular glow ring and letter pulse.",
+      "keywords": [
+        "ai",
+        "ai perl",
+        "ai-perl",
+        "animation",
+        "generating",
+        "loading",
+        "overlay",
+        "perl",
+        "spinner"
+      ]
+    },
+    {
+      "id": "all-components",
+      "name": "All components",
+      "file": "components/all-components.json",
+      "status": "stable",
+      "summary": "Overview of all available components with live examples.",
+      "keywords": [
+        "all components",
+        "all-components",
+        "catalog",
+        "collection",
+        "components",
+        "demo",
+        "docs",
+        "documentation",
+        "elements",
+        "examples",
+        "gallery",
+        "guide",
+        "index",
+        "interface",
+        "library",
+        "list",
+        "overview",
+        "preview",
+        "reference",
+        "sample",
+        "showcase",
+        "ui"
+      ]
+    },
+    {
+      "id": "animation-references",
+      "name": "Animation references",
+      "file": "components/animation-references.json",
+      "status": "stable",
+      "summary": "Browse and preview all available CSS animations from the design system. Includes entrance, exit, and infinite loop animations with live previews and copy-to-clipboard functionality.",
+      "keywords": [
+        "animation",
+        "animation references",
+        "animation-references",
+        "bounce",
+        "css animation",
+        "effect",
+        "entrance",
+        "exit",
+        "fade",
+        "float",
+        "keyframes",
+        "motion",
+        "rotate",
+        "scale",
+        "slide",
+        "transition"
+      ]
+    },
+    {
+      "id": "avatar",
+      "name": "Avatar",
+      "file": "components/avatar.json",
+      "status": "stable",
+      "summary": "Avatar component for displaying user profile images with various styles and states.",
+      "keywords": [
+        "account",
+        "avatar",
+        "face",
+        "headshot",
+        "icon",
+        "identity",
+        "image",
+        "person",
+        "photo",
+        "picture",
+        "portrait",
+        "profile",
+        "thumbnail",
+        "user"
+      ]
+    },
+    {
+      "id": "badge",
+      "name": "Badge",
+      "file": "components/badge.json",
+      "status": "stable",
+      "summary": "Small status indicators and labels.",
+      "keywords": [
+        "badge",
+        "chip",
+        "counter",
+        "dot",
+        "flag",
+        "highlight",
+        "indicator",
+        "label",
+        "marker",
+        "notification",
+        "pill",
+        "status",
+        "tag"
+      ]
+    },
+    {
+      "id": "banner",
+      "name": "Banner",
+      "file": "components/banner.json",
+      "status": "stable",
+      "summary": "Informative banners to display important messages and actions.",
+      "keywords": [
+        "alert",
+        "announcement",
+        "banner",
+        "bar",
+        "callout",
+        "error",
+        "info",
+        "message",
+        "notice",
+        "notification",
+        "strip",
+        "success",
+        "toast",
+        "warning"
+      ]
+    },
+    {
+      "id": "banner-marketplace",
+      "name": "Funding banner",
+      "file": "components/banner-marketplace.json",
+      "status": "preview",
+      "summary": "A marketing banner component designed for promoting fundraising workflows and investor outreach actions.",
+      "keywords": [
+        "advertisement",
+        "alert",
+        "announcement",
+        "banner",
+        "banner marketplace",
+        "banner-marketplace",
+        "capital raise",
+        "fundraising",
+        "investor",
+        "marketing",
+        "message",
+        "notification",
+        "promotion"
+      ]
+    },
+    {
+      "id": "breadcrumb",
+      "name": "Breadcrumb",
+      "file": "components/breadcrumb.json",
+      "status": "stable",
+      "summary": "Breadcrumb navigation for showing the user's current location and path hierarchy.",
+      "keywords": [
+        "breadcrumb",
+        "current page",
+        "hierarchy",
+        "location",
+        "navigation",
+        "path",
+        "trail"
+      ]
+    },
+    {
+      "id": "button",
+      "name": "Button",
+      "file": "components/button.json",
+      "status": "stable",
+      "summary": "Interactive button component with various styles and sizes.",
+      "keywords": [
+        "action",
+        "button",
+        "cancel",
+        "click",
+        "close",
+        "confirm",
+        "cta",
+        "delete",
+        "disabled",
+        "edit",
+        "enabled",
+        "focus",
+        "hover",
+        "interactive",
+        "pressed",
+        "primary",
+        "save",
+        "secondary",
+        "submit"
+      ]
+    },
+    {
+      "id": "button-container",
+      "name": "Button container",
+      "file": "components/button-container.json",
+      "status": "stable",
+      "summary": "Button container styles for claim effects and highlighted button surfaces.",
+      "keywords": [
+        "button",
+        "button container",
+        "button-container",
+        "claim",
+        "container",
+        "effect",
+        "glow",
+        "highlight",
+        "ring",
+        "surface",
+        "wrapper"
+      ]
+    },
+    {
+      "id": "button-feedback",
+      "name": "Button feedback",
+      "file": "components/button-feedback.json",
+      "status": "stable",
+      "summary": "Button feedback patterns for inline messages and status tooltips.",
+      "keywords": [
+        "attention",
+        "button",
+        "button feedback",
+        "button-feedback",
+        "error",
+        "feedback",
+        "message",
+        "status",
+        "success",
+        "tooltip"
+      ]
+    },
+    {
+      "id": "card",
+      "name": "Card",
+      "file": "components/card.json",
+      "status": "stable",
+      "summary": "Card is used to display content in a container with a border and padding.",
+      "keywords": [
+        "block",
+        "box",
+        "card",
+        "container",
+        "content",
+        "layout",
+        "panel",
+        "section",
+        "surface",
+        "wrapper"
+      ]
+    },
+    {
+      "id": "card-assessment",
+      "name": "Investor fit card",
+      "file": "components/card-assessment.json",
+      "status": "preview",
+      "summary": "A versatile card component for displaying investor-fit insights, outreach criteria, and funding-readiness signals.",
+      "keywords": [
+        "card",
+        "card assessment",
+        "card-assessment",
+        "criteria",
+        "evaluation",
+        "feedback",
+        "fundraising",
+        "investor",
+        "investor fit",
+        "outreach",
+        "pipeline",
+        "pitch call",
+        "profile",
+        "progress",
+        "readiness",
+        "results",
+        "review"
+      ]
+    },
+    {
+      "id": "card-test",
+      "name": "Readiness card",
+      "file": "components/card-test.json",
+      "status": "preview",
+      "summary": "A versatile card component for tracking fundraising readiness steps and milestone completion.",
+      "keywords": [
+        "card",
+        "card test",
+        "card-test",
+        "checklist",
+        "due diligence",
+        "evaluation",
+        "feedback",
+        "fundraising",
+        "go-to-market",
+        "investor",
+        "pitch deck",
+        "profile",
+        "progress",
+        "readiness",
+        "results"
+      ]
+    },
+    {
+      "id": "chat",
+      "name": "Chat",
+      "file": "components/chat.json",
+      "status": "stable",
+      "summary": "Chat component for displaying conversations between users or with AI assistants.",
+      "keywords": [
+        "ai chat",
+        "chat",
+        "chatbot",
+        "communication",
+        "conversation",
+        "messages"
+      ]
+    },
+    {
+      "id": "checkbox",
+      "name": "Checkbox",
+      "file": "components/checkbox.json",
+      "status": "stable",
+      "summary": "Checkbox input component for multiple selection and boolean states.",
+      "keywords": [
+        "boolean",
+        "box",
+        "check",
+        "checkbox",
+        "control",
+        "field",
+        "form",
+        "input",
+        "multiple",
+        "option",
+        "selection",
+        "switch",
+        "tick",
+        "toggle"
+      ]
+    },
+    {
+      "id": "checkmark",
+      "name": "Checkmark",
+      "file": "components/checkmark.json",
+      "status": "stable",
+      "summary": "Animated checkmark indicator for active and completion states.",
+      "keywords": [
+        "boolean",
+        "check",
+        "checkmark",
+        "complete",
+        "done",
+        "indicator",
+        "selection",
+        "state",
+        "status",
+        "success",
+        "tick"
+      ]
+    },
+    {
+      "id": "collapsible",
+      "name": "Collapsible",
+      "file": "components/collapsible.json",
+      "status": "stable",
+      "summary": "Expandable and collapsible content container with smooth animations and optional headers.",
+      "keywords": [
+        "accordion",
+        "collapse",
+        "collapsible",
+        "disclosure",
+        "drawer",
+        "expand",
+        "fold",
+        "hide",
+        "section",
+        "show",
+        "toggle",
+        "unfold"
+      ]
+    },
+    {
+      "id": "color-palette",
+      "name": "Color palette",
+      "file": "components/color-palette.json",
+      "status": "stable",
+      "summary": "Explore our comprehensive color system featuring semantic color tokens, brand colors, and design variables that ensure consistent and accessible interfaces across light and dark themes.",
+      "keywords": [
+        "brand colors",
+        "color palette",
+        "color system",
+        "color tokens",
+        "color variables",
+        "color-palette",
+        "colors",
+        "design tokens",
+        "palette",
+        "semantic colors",
+        "theme"
+      ]
+    },
+    {
+      "id": "color-usage",
+      "name": "Color usage",
+      "file": "components/color-usage.json",
+      "status": "stable",
+      "summary": "Learn how to effectively apply our color system through detailed guidelines, accessibility requirements, and best practices for creating visually cohesive and WCAG-compliant interfaces.",
+      "keywords": [
+        "accessibility",
+        "best practices",
+        "color combinations",
+        "color guidelines",
+        "color hierarchy",
+        "color usage",
+        "color-usage",
+        "colors",
+        "contrast",
+        "theme",
+        "usage"
+      ]
+    },
+    {
+      "id": "combobox",
+      "name": "Combobox",
+      "file": "components/combobox.json",
+      "status": "stable",
+      "summary": "Combobox pattern for searchable selection with keyboard-friendly option lists.",
+      "keywords": [
+        "autocomplete",
+        "combobox",
+        "filter options",
+        "search select",
+        "typeahead"
+      ]
+    },
+    {
+      "id": "command-palette",
+      "name": "Command palette",
+      "file": "components/command-palette.json",
+      "status": "stable",
+      "summary": "Searchable command palette pattern for fast navigation and actions.",
+      "keywords": [
+        "command",
+        "command palette",
+        "command-palette",
+        "menu",
+        "palette",
+        "quick actions",
+        "search",
+        "shortcuts",
+        "spotlight"
+      ]
+    },
+    {
+      "id": "countdown",
+      "name": "Countdown",
+      "file": "components/countdown.json",
+      "status": "stable",
+      "summary": "Animated countdown timer with various display options.",
+      "keywords": [
+        "alert",
+        "clock",
+        "countdown",
+        "counter",
+        "deadline",
+        "duration",
+        "reminder",
+        "stopwatch",
+        "time",
+        "timer"
+      ]
+    },
+    {
+      "id": "datepicker",
+      "name": "Datepicker",
+      "file": "components/datepicker.json",
+      "status": "stable",
+      "summary": "Calendar component for selecting single dates or date ranges with an intuitive interface.",
+      "keywords": [
+        "calendar",
+        "date",
+        "date picker",
+        "date range",
+        "date selection",
+        "datepicker",
+        "range",
+        "time"
+      ]
+    },
+    {
+      "id": "divider",
+      "name": "Divider",
+      "file": "components/divider.json",
+      "status": "stable",
+      "summary": "Divider component to separate content with an optional label.",
+      "keywords": [
+        "border",
+        "break",
+        "divider",
+        "division",
+        "horizontal",
+        "hr",
+        "line",
+        "rule",
+        "separator",
+        "spacer",
+        "split"
+      ]
+    },
+    {
+      "id": "empty-state",
+      "name": "Empty state",
+      "file": "components/empty-state.json",
+      "status": "stable",
+      "summary": "Empty state patterns to communicate no-content situations and guide next actions.",
+      "keywords": [
+        "blank state",
+        "empty state",
+        "empty-state",
+        "no data",
+        "placeholder",
+        "zero state"
+      ]
+    },
+    {
+      "id": "field",
+      "name": "Field",
+      "file": "components/field.json",
+      "status": "stable",
+      "summary": "Field composition pattern that pairs labels, helper text, and validation messages with controls.",
+      "keywords": [
+        "error",
+        "field",
+        "form field",
+        "helper text",
+        "label",
+        "validation"
+      ]
+    },
+    {
+      "id": "fieldset",
+      "name": "Fieldset",
+      "file": "components/fieldset.json",
+      "status": "stable",
+      "summary": "Fieldset pattern for grouping related controls with a semantic legend.",
+      "keywords": [
+        "fieldset",
+        "form group",
+        "group",
+        "legend",
+        "options"
+      ]
+    },
+    {
+      "id": "file-upload",
+      "name": "File upload",
+      "file": "components/file-upload.json",
+      "status": "stable",
+      "summary": "File upload components for single and multiple files with drag and drop support.",
+      "keywords": [
+        "attachment",
+        "browse",
+        "document",
+        "drag and drop",
+        "dropzone",
+        "file",
+        "file upload",
+        "file-upload",
+        "form",
+        "import",
+        "input",
+        "select",
+        "transfer",
+        "upload",
+        "uploader"
+      ]
+    },
+    {
+      "id": "form-example",
+      "name": "Form example",
+      "file": "components/form-example.json",
+      "status": "preview",
+      "summary": "Complete form example using all form components.",
+      "keywords": [
+        "complete",
+        "components",
+        "demo",
+        "example",
+        "fields",
+        "form",
+        "form example",
+        "form-example",
+        "inputs",
+        "interactive",
+        "showcase",
+        "submission",
+        "template",
+        "validation"
+      ]
+    },
+    {
+      "id": "getting-started",
+      "name": "Getting Started",
+      "file": "components/getting-started.json",
+      "status": "preview",
+      "summary": "Documentation and contract metadata for Getting Started in the twntyX design system.",
+      "keywords": [
+        "getting started",
+        "getting-started"
+      ]
+    },
+    {
+      "id": "icons-reference",
+      "name": "Icons reference",
+      "file": "components/icons-reference.json",
+      "status": "stable",
+      "summary": "Collection of icons used throughout the application, twntyX uses [Google's Material Symbols and Icons](https://fonts.google.com/icons), which provides us with an extensive icon library with over 2,500 glyphs",
+      "keywords": [
+        "assets",
+        "collection",
+        "glyphs",
+        "icons",
+        "icons reference",
+        "icons-reference",
+        "interface elements",
+        "material symbols",
+        "pictograms",
+        "visual indicators"
+      ]
+    },
+    {
+      "id": "illustrations-library",
+      "name": "Illustrations library",
+      "file": "components/illustrations-library.json",
+      "status": "stable",
+      "summary": "Browse our collection of custom illustrations and visual elements used to enhance the user experience and reinforce our brand identity across the application. The source assets located in [Figma](https://www.figma.com/design/1zI7ewgpqCGoxrPpiu6w2R/Product-illustrations?m=auto&t=LU9WIUq52kD6qdO8-1) *(Marketing / Assets)*, which can also be downloaded as a [.fig file](/figma/Product_illustrations.fig).",
+      "keywords": [
+        "artwork",
+        "assets",
+        "brand assets",
+        "decorative graphics",
+        "graphics",
+        "illustrations",
+        "illustrations library",
+        "illustrations-library",
+        "images",
+        "visual elements"
+      ]
+    },
+    {
+      "id": "input-group",
+      "name": "Input group",
+      "file": "components/input-group.json",
+      "status": "stable",
+      "summary": "Input group pattern for combining controls with prefixes, suffixes, and inline actions.",
+      "keywords": [
+        "addon",
+        "composed input",
+        "input group",
+        "input-group",
+        "prefix",
+        "suffix"
+      ]
+    },
+    {
+      "id": "introduction",
+      "name": "Introduction",
+      "file": "components/introduction.json",
+      "status": "stable",
+      "summary": "The **twntyX CSS Framework** is a comprehensive design system that empowers developers to rapidly build consistent, accessible, and brand-aligned user interfaces. Check out our [getting started guide](/design-system/getting-started) or explore our [components](/design-system/button).",
+      "keywords": [
+        "introduction",
+        "luigUI",
+        "overview"
+      ]
+    },
+    {
+      "id": "join",
+      "name": "Join",
+      "file": "components/join.json",
+      "status": "stable",
+      "summary": "Join component for grouping multiple items together with consistent styling.",
+      "keywords": [
+        "button group",
+        "container",
+        "group",
+        "input group",
+        "join"
+      ]
+    },
+    {
+      "id": "kbd",
+      "name": "Kbd",
+      "file": "components/kbd.json",
+      "status": "stable",
+      "summary": "Display keyboard shortcuts and key combinations.",
+      "keywords": [
+        "command",
+        "control",
+        "hotkey",
+        "hotkeys",
+        "input",
+        "kbd",
+        "key",
+        "keybind",
+        "keybinding",
+        "keyboard",
+        "keypress",
+        "keys",
+        "shortcut"
+      ]
+    },
+    {
+      "id": "key-value",
+      "name": "Key-value",
+      "file": "components/key-value.json",
+      "status": "stable",
+      "summary": "Key-value layout for compact metadata, account details, and structured summaries.",
+      "keywords": [
+        "definition list",
+        "details",
+        "key value",
+        "key-value",
+        "label value",
+        "metadata"
+      ]
+    },
+    {
+      "id": "link",
+      "name": "Link",
+      "file": "components/link.json",
+      "status": "stable",
+      "summary": "Accessible link component for navigating between pages or external resources, with support for different visual styles, states and behaviors.",
+      "keywords": [
+        "a11y",
+        "accessibility",
+        "anchor",
+        "button link",
+        "external link",
+        "href",
+        "hyperlink",
+        "internal link",
+        "link",
+        "navigation",
+        "routing",
+        "text link",
+        "url"
+      ]
+    },
+    {
+      "id": "loader",
+      "name": "Loader",
+      "file": "components/loader.json",
+      "status": "stable",
+      "summary": "Loading indicators and spinners to show content loading states.",
+      "keywords": [
+        "animation",
+        "busy",
+        "indicator",
+        "loader",
+        "loading",
+        "processing",
+        "progress",
+        "spinner",
+        "status",
+        "wait"
+      ]
+    },
+    {
+      "id": "logotype",
+      "name": "Logotype",
+      "file": "components/logotype.json",
+      "status": "stable",
+      "summary": "Logotype component for displaying the brand logo.",
+      "keywords": [
+        "brand",
+        "branding",
+        "identity",
+        "logo",
+        "logotype",
+        "visual"
+      ]
+    },
+    {
+      "id": "menu",
+      "name": "Menu",
+      "file": "components/menu.json",
+      "status": "stable",
+      "summary": "Menu is used to display a list of links vertically or horizontally.",
+      "keywords": [
+        "choices",
+        "dropdown",
+        "horizontal",
+        "items",
+        "links",
+        "list",
+        "menu",
+        "nav",
+        "navbar",
+        "navigation",
+        "options",
+        "select",
+        "ui",
+        "vertical"
+      ]
+    },
+    {
+      "id": "modal",
+      "name": "Modal",
+      "file": "components/modal.json",
+      "status": "stable",
+      "summary": "Modal dialogs for displaying content that requires attention or user input.",
+      "keywords": [
+        "alert",
+        "attention",
+        "content",
+        "dialog",
+        "focus",
+        "form",
+        "interaction",
+        "layer",
+        "lightbox",
+        "message",
+        "modal",
+        "notification",
+        "overlay",
+        "panel",
+        "popup",
+        "screen",
+        "window"
+      ]
+    },
+    {
+      "id": "navbar",
+      "name": "Navbar",
+      "file": "components/navbar.json",
+      "status": "stable",
+      "summary": "Navbar layout pattern for top-level product navigation and actions.",
+      "keywords": [
+        "header",
+        "nav",
+        "navbar",
+        "navigation bar",
+        "site navigation",
+        "top bar"
+      ]
+    },
+    {
+      "id": "pagination",
+      "name": "Pagination",
+      "file": "components/pagination.json",
+      "status": "stable",
+      "summary": "Pagination component for navigating through multiple pages of content.",
+      "keywords": [
+        "entries",
+        "items",
+        "list",
+        "navigation",
+        "next",
+        "numbers",
+        "pager",
+        "pages",
+        "pagination",
+        "previous",
+        "records",
+        "results",
+        "table"
+      ]
+    },
+    {
+      "id": "pie-chart",
+      "name": "Pie chart",
+      "file": "components/pie-chart.json",
+      "status": "stable",
+      "summary": "Pie chart used to visualize data in a circular format.",
+      "keywords": [
+        "analytics",
+        "chart",
+        "circle",
+        "comparison",
+        "data visualization",
+        "dataset",
+        "distribution",
+        "graph",
+        "parts",
+        "percentage",
+        "pie",
+        "pie chart",
+        "pie-chart",
+        "probability",
+        "proportion",
+        "ratio",
+        "sector",
+        "segment",
+        "slice",
+        "statistics",
+        "visualization",
+        "whole"
+      ]
+    },
+    {
+      "id": "popover",
+      "name": "Popover",
+      "file": "components/popover.json",
+      "status": "stable",
+      "summary": "Native HTML popovers for overlays, panels, and menus using browser-managed focus, keyboard support, and no custom JavaScript.",
+      "keywords": [
+        "menu",
+        "native html",
+        "off-canvas",
+        "overlay",
+        "panel",
+        "popover",
+        "popoverTarget",
+        "popoverTargetaction",
+        "popup",
+        "tooltip"
+      ]
+    },
+    {
+      "id": "progress-bullet",
+      "name": "Bullet progress",
+      "file": "components/progress-bullet.json",
+      "status": "stable",
+      "summary": "Bullet progress indicator for displaying completion steps.",
+      "keywords": [
+        "bullet",
+        "checkpoint",
+        "completion",
+        "dots",
+        "indicator",
+        "journey",
+        "marker",
+        "milestone",
+        "navigation",
+        "path",
+        "phase",
+        "point",
+        "progress",
+        "progress bullet",
+        "progress-bullet",
+        "sequence",
+        "stage",
+        "stepper",
+        "steps",
+        "tracker",
+        "wizard"
+      ]
+    },
+    {
+      "id": "progress-linear",
+      "name": "Linear progress",
+      "file": "components/progress-linear.json",
+      "status": "stable",
+      "summary": "Linear progress bar for displaying completion percentages.",
+      "keywords": [
+        "advancement",
+        "amount",
+        "bar",
+        "completion",
+        "degree",
+        "gauge",
+        "indicator",
+        "level",
+        "linear",
+        "loading",
+        "measurement",
+        "meter",
+        "percentage",
+        "progress",
+        "progress linear",
+        "progress-linear",
+        "progression",
+        "quantity",
+        "rate",
+        "status",
+        "tracker"
+      ]
+    },
+    {
+      "id": "progress-radial",
+      "name": "Radial progress",
+      "file": "components/progress-radial.json",
+      "status": "stable",
+      "summary": "Radial progress indicator for displaying completion percentages.",
+      "keywords": [
+        "chart",
+        "circle",
+        "circular",
+        "completion",
+        "dial",
+        "gauge",
+        "indicator",
+        "loading",
+        "meter",
+        "percentage",
+        "progress",
+        "progress radial",
+        "progress-radial",
+        "radial",
+        "round",
+        "spinner",
+        "status"
+      ]
+    },
+    {
+      "id": "radio",
+      "name": "Radio",
+      "file": "components/radio.json",
+      "status": "stable",
+      "summary": "Radio input component for single selection from multiple options.",
+      "keywords": [
+        "button",
+        "choose",
+        "control",
+        "exclusive",
+        "field",
+        "form",
+        "input",
+        "option",
+        "radio",
+        "select",
+        "selection",
+        "single choice"
+      ]
+    },
+    {
+      "id": "range-slider",
+      "name": "Range slider",
+      "file": "components/range-slider.json",
+      "status": "stable",
+      "summary": "Range slider component for selecting numeric values.",
+      "keywords": [
+        "adjust",
+        "control",
+        "drag",
+        "form",
+        "input",
+        "max",
+        "min",
+        "number",
+        "numeric",
+        "range",
+        "range slider",
+        "range-slider",
+        "scale",
+        "slide",
+        "slider",
+        "value"
+      ]
+    },
+    {
+      "id": "scrollbar",
+      "name": "Scrollbar",
+      "file": "components/scrollbar.json",
+      "status": "stable",
+      "summary": "Alternative scrollbar designs for the browser's scrollbar.",
+      "keywords": [
+        "bar",
+        "container",
+        "custom scrollbar",
+        "overflow",
+        "pane",
+        "scroll",
+        "scroll styling",
+        "scrollbar",
+        "scroller",
+        "scrolling",
+        "thumb",
+        "track",
+        "viewport"
+      ]
+    },
+    {
+      "id": "select-input",
+      "name": "Select input",
+      "file": "components/select-input.json",
+      "status": "stable",
+      "summary": "Select input component for choosing from predefined options.",
+      "keywords": [
+        "choice",
+        "choose",
+        "combobox",
+        "dropdown",
+        "field",
+        "form",
+        "input",
+        "list",
+        "menu",
+        "options",
+        "picker",
+        "select",
+        "select input",
+        "select-input",
+        "selection"
+      ]
+    },
+    {
+      "id": "shadows",
+      "name": "Shadows",
+      "file": "components/shadows.json",
+      "status": "stable",
+      "summary": "Layered shadow system for adding depth and elevation to elements.",
+      "keywords": [
+        "blur",
+        "box-shadow",
+        "depth",
+        "dimension",
+        "drop",
+        "effect",
+        "elevation",
+        "layer",
+        "shade",
+        "shadows",
+        "spread",
+        "stack"
+      ]
+    },
+    {
+      "id": "skeleton",
+      "name": "Skeleton",
+      "file": "components/skeleton.json",
+      "status": "stable",
+      "summary": "Skeleton loaders provide visual placeholders for content while it loads, improving perceived performance.",
+      "keywords": [
+        "animation",
+        "fallback",
+        "loader",
+        "loading",
+        "placeholder",
+        "preview",
+        "progress",
+        "pulse",
+        "shimmer",
+        "skeleton",
+        "suspense",
+        "wait",
+        "wave"
+      ]
+    },
+    {
+      "id": "stacked-chart",
+      "name": "Stacked chart",
+      "file": "components/stacked-chart.json",
+      "status": "stable",
+      "summary": "Stacked chart component used to visualize and compare scores or performance metrics across multiple individuals or groups.",
+      "keywords": [
+        "analytics",
+        "benchmark",
+        "chart",
+        "comparison",
+        "data visualization",
+        "distribution",
+        "evaluation",
+        "graph",
+        "group",
+        "individual",
+        "investor score",
+        "measurement",
+        "metrics",
+        "performance",
+        "ranking",
+        "results",
+        "score",
+        "stacked",
+        "stacked chart",
+        "stacked-chart",
+        "statistics",
+        "visualization"
+      ]
+    },
+    {
+      "id": "state",
+      "name": "State",
+      "file": "components/state.json",
+      "status": "stable",
+      "summary": "State feedback for displaying temporary messages and feedback.",
+      "keywords": [
+        "alert",
+        "banner",
+        "error",
+        "feedback",
+        "indicator",
+        "info",
+        "message",
+        "notification",
+        "response",
+        "state",
+        "status",
+        "success",
+        "toast",
+        "update",
+        "warning"
+      ]
+    },
+    {
+      "id": "stepper",
+      "name": "Stepper",
+      "file": "components/stepper.json",
+      "status": "stable",
+      "summary": "Animated number stepper for displaying percentage values.",
+      "keywords": [
+        "control",
+        "count",
+        "counter",
+        "decrement",
+        "increment",
+        "input",
+        "number",
+        "numeric",
+        "percentage",
+        "progress",
+        "stepper",
+        "value"
+      ]
+    },
+    {
+      "id": "steps",
+      "name": "Steps",
+      "file": "components/steps.json",
+      "status": "stable",
+      "summary": "Step-by-step navigation component for multi-step processes.",
+      "keywords": [
+        "flow",
+        "guide",
+        "journey",
+        "navigation",
+        "path",
+        "phases",
+        "process",
+        "progress",
+        "sequence",
+        "stages",
+        "stepper",
+        "steps",
+        "wizard"
+      ]
+    },
+    {
+      "id": "surface",
+      "name": "Surface",
+      "file": "components/surface.json",
+      "status": "stable",
+      "summary": "Surface components for creating consistent container styles with backgrounds and borders.",
+      "keywords": [
+        "area",
+        "background",
+        "block",
+        "border",
+        "box",
+        "card",
+        "container",
+        "panel",
+        "region",
+        "section",
+        "surface",
+        "wrapper"
+      ]
+    },
+    {
+      "id": "table",
+      "name": "Table",
+      "file": "components/table.json",
+      "status": "stable",
+      "summary": "Table component for displaying data in a grid layout with various styling options and features.",
+      "keywords": [
+        "cell",
+        "column",
+        "content",
+        "data",
+        "display",
+        "filter",
+        "grid",
+        "header",
+        "list",
+        "pagination",
+        "row",
+        "sort",
+        "spreadsheet",
+        "table"
+      ]
+    },
+    {
+      "id": "tabs",
+      "name": "Tabs",
+      "file": "components/tabs.json",
+      "status": "stable",
+      "summary": "Tab component for switching between different views.",
+      "keywords": [
+        "content",
+        "interface",
+        "menu",
+        "navigation",
+        "panels",
+        "panes",
+        "sections",
+        "switch",
+        "tabpanel",
+        "tabs",
+        "toggle",
+        "views"
+      ]
+    },
+    {
+      "id": "template-ai",
+      "name": "Fundraising AI components",
+      "file": "components/template-ai.json",
+      "status": "preview",
+      "summary": "Explore AI components tailored to fundraising workflows.",
+      "keywords": [
+        "agent",
+        "ai",
+        "alva",
+        "chat",
+        "fundraising AI",
+        "gpt",
+        "llama",
+        "llm",
+        "openai",
+        "template ai",
+        "template-ai",
+        "twntyX"
+      ]
+    },
+    {
+      "id": "template-login",
+      "name": "Login components",
+      "file": "components/template-login.json",
+      "status": "preview",
+      "summary": "Explore various authentication components including login and password setup templates.",
+      "keywords": [
+        "auth",
+        "authentication",
+        "google",
+        "login",
+        "microsoft",
+        "oauth",
+        "password",
+        "sign in",
+        "single sign on",
+        "sso",
+        "template login",
+        "template-login"
+      ]
+    },
+    {
+      "id": "template-stats",
+      "name": "Stats template",
+      "file": "components/template-stats.json",
+      "status": "preview",
+      "summary": "Tailwind-first stats template for composing metric cards directly in markup without component-specific classes.",
+      "keywords": [
+        "dashboard",
+        "kpi",
+        "metrics",
+        "stats",
+        "tailwind",
+        "template",
+        "template stats",
+        "template-stats"
+      ]
+    },
+    {
+      "id": "text-input",
+      "name": "Text input",
+      "file": "components/text-input.json",
+      "status": "stable",
+      "summary": "Text input component for single line text input.",
+      "keywords": [
+        "box",
+        "edit",
+        "entry",
+        "field",
+        "form",
+        "input",
+        "line",
+        "single",
+        "text",
+        "text field",
+        "text input",
+        "text-input",
+        "textbox",
+        "type",
+        "write"
+      ]
+    },
+    {
+      "id": "textarea",
+      "name": "Textarea",
+      "file": "components/textarea.json",
+      "status": "stable",
+      "summary": "Textarea component for multiline text input.",
+      "keywords": [
+        "box",
+        "content",
+        "edit",
+        "entry",
+        "field",
+        "form",
+        "input",
+        "multiline",
+        "paragraph",
+        "text area",
+        "textarea",
+        "type",
+        "write"
+      ]
+    },
+    {
+      "id": "timeline",
+      "name": "Timeline",
+      "file": "components/timeline.json",
+      "status": "stable",
+      "summary": "Timeline pattern for visualizing ordered events, milestones, and process history.",
+      "keywords": [
+        "activity",
+        "events",
+        "history",
+        "progress",
+        "sequence",
+        "timeline"
+      ]
+    },
+    {
+      "id": "toast",
+      "name": "Toast",
+      "file": "components/toast.json",
+      "status": "stable",
+      "summary": "Toast notifications for displaying temporary messages and feedback.",
+      "keywords": [
+        "alert",
+        "banner",
+        "error",
+        "feedback",
+        "flash",
+        "indicator",
+        "info",
+        "message",
+        "notice",
+        "notification",
+        "popup",
+        "response",
+        "status",
+        "success",
+        "temporary",
+        "toast",
+        "update",
+        "warning"
+      ]
+    },
+    {
+      "id": "toggle",
+      "name": "Toggle",
+      "file": "components/toggle.json",
+      "status": "stable",
+      "summary": "Toggle switch component for boolean states.",
+      "keywords": [
+        "boolean",
+        "button",
+        "checkbox",
+        "control",
+        "flip",
+        "form",
+        "input",
+        "off",
+        "on",
+        "selection",
+        "state",
+        "switch",
+        "toggle"
+      ]
+    },
+    {
+      "id": "tool-svg-to-base64",
+      "name": "SVG to Base64",
+      "file": "components/tool-svg-to-base64.json",
+      "status": "experimental",
+      "summary": "Upload an SVG and convert it into a URL-encoded `data:image/svg+xml` string for direct usage in CSS or markup.",
+      "keywords": [
+        "asset",
+        "base64",
+        "convert",
+        "data url",
+        "encoder",
+        "svg",
+        "tool",
+        "tool svg to base64",
+        "tool-svg-to-base64",
+        "upload"
+      ]
+    },
+    {
+      "id": "tool-svg-to-icon-data",
+      "name": "SVG to Icon Data",
+      "file": "components/tool-svg-to-icon-data.json",
+      "status": "experimental",
+      "summary": "Upload an SVG to generate a `dataIcons` entry with `name`, `keywords`, and `elements` ready to paste into the design system.",
+      "keywords": [
+        "converter",
+        "dataicons",
+        "elements",
+        "generator",
+        "icon",
+        "path",
+        "svg",
+        "tool",
+        "tool svg to icon data",
+        "tool-svg-to-icon-data",
+        "upload"
+      ]
+    },
+    {
+      "id": "tooltip",
+      "name": "Tooltip",
+      "file": "components/tooltip.json",
+      "status": "stable",
+      "summary": "Tooltip patterns for supplemental contextual information on interactive elements.",
+      "keywords": [
+        "description",
+        "helper text",
+        "hint",
+        "hover",
+        "overlay",
+        "tooltip"
+      ]
+    }
+  ],
+  "queryBehavior": {
+    "lookupPriority": [
+      "id",
+      "name",
+      "keywords"
+    ],
+    "unsupportedComponent": {
+      "code": "UNSUPPORTED_COMPONENT",
+      "message": "The requested component is not part of this design-system contract. Use index.json to find the nearest supported component.",
+      "suggestedActions": [
+        "Search index.components by keywords.",
+        "Fallback to the closest stable component.",
+        "Return no code when a safe mapping is not available."
+      ]
+    }
+  }
+}