twntyx-css 1.0.0

package/llm/components/button.json

@@ -0,0 +1,290 @@
+{
+  "id": "button",
+  "name": "Button",
+  "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"
+  ],
+  "sourcePaths": [
+    "app/design-system/button/page.js",
+    "assets/styles/badge.css",
+    "assets/styles/button.css",
+    "assets/styles/card.css",
+    "assets/styles/chat.css",
+    "assets/styles/form-text-select.css",
+    "assets/styles/join.css",
+    "assets/styles/shared.css",
+    "assets/styles/table.css",
+    "assets/styles/toast.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "button",
+  "variants": [
+    {
+      "name": "button-primary",
+      "className": "button-primary",
+      "description": "Primary button style"
+    },
+    {
+      "name": "button-secondary",
+      "className": "button-secondary",
+      "description": "Secondary button style"
+    },
+    {
+      "name": "button-tertiary",
+      "className": "button-tertiary",
+      "description": "Tertiary button style"
+    },
+    {
+      "name": "button-plain",
+      "className": "button-plain",
+      "description": "Plain button style without background"
+    },
+    {
+      "name": "button-destructive",
+      "className": "button-destructive",
+      "description": "Destructive action button style"
+    },
+    {
+      "name": "button-discreet",
+      "className": "button-discreet",
+      "description": "Discreet button style with minimal visual impact"
+    },
+    {
+      "name": "button-menu",
+      "className": "button-menu",
+      "description": "Menu button style"
+    },
+    {
+      "name": "button-sso",
+      "className": "button-sso",
+      "description": "Single sign-on button style"
+    },
+    {
+      "name": "button-close",
+      "className": "button-close",
+      "description": "Close button style with X icon"
+    }
+  ],
+  "sizes": [
+    {
+      "name": "button-xs",
+      "className": "button-xs",
+      "description": "Extra small button size"
+    },
+    {
+      "name": "button-sm",
+      "className": "button-sm",
+      "description": "Small button size"
+    },
+    {
+      "name": "button-lg",
+      "className": "button-lg",
+      "description": "Large button size"
+    }
+  ],
+  "states": [
+    {
+      "name": "is-loading",
+      "className": "is-loading",
+      "description": "Shows loading spinner state"
+    },
+    {
+      "name": "is-charging",
+      "className": "is-charging",
+      "description": "Shows charging animation state"
+    },
+    {
+      "name": "is-charging-done",
+      "className": "is-charging-done",
+      "description": "Shows completed charging state"
+    }
+  ],
+  "structure": {
+    "rootElement": "button",
+    "requiredClasses": [
+      "button"
+    ],
+    "optionalClasses": [
+      "button-primary",
+      "button-secondary",
+      "button-tertiary",
+      "button-plain",
+      "button-destructive",
+      "button-discreet",
+      "button-menu",
+      "button-sso",
+      "button-close",
+      "button-xs",
+      "button-sm",
+      "button-lg",
+      "is-loading",
+      "is-charging",
+      "is-charging-done"
+    ],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class",
+      "type",
+      "disabled",
+      "aria-label",
+      "aria-pressed",
+      "data-feedback",
+      "data-feedback-icon"
+    ],
+    "required": [
+      "type"
+    ],
+    "dataAttributes": [
+      "data-feedback",
+      "data-feedback-icon"
+    ],
+    "roles": [],
+    "aria": [
+      "aria-label",
+      "aria-pressed"
+    ]
+  },
+  "a11y": {
+    "interactive": true,
+    "requiredRoles": [],
+    "requiredAria": [
+      "aria-label (required when icon-only)"
+    ],
+    "keyboardSupport": [
+      "Tab",
+      "Shift+Tab",
+      "Enter",
+      "Space"
+    ],
+    "focusBehavior": "Buttons must expose visible focus indicators and preserve native keyboard activation semantics."
+  },
+  "dos": [
+    "Use `button-primary` for the default call-to-action and `button-secondary` for secondary actions.",
+    "Provide `aria-label` whenever the button only renders an icon.",
+    "Use loading or charging states to prevent duplicate submissions while async actions run."
+  ],
+  "donts": [
+    "Do not put multiple primary buttons in the same compact action group.",
+    "Do not disable focus outlines on keyboard-accessible actions.",
+    "Do not use button classes on non-interactive containers."
+  ],
+  "tokenUsage": [
+    "background-attention-active",
+    "background-brand",
+    "background-brand-active",
+    "background-error",
+    "background-error-active",
+    "background-info",
+    "background-info-active",
+    "background-inverted",
+    "background-neutral",
+    "background-page",
+    "background-success",
+    "background-success-active",
+    "background-surface",
+    "background-surface-elevated",
+    "background-surface-sunken",
+    "background-warning",
+    "background-warning-active",
+    "brand-default",
+    "brand-moderate",
+    "brand-strong",
+    "core-black",
+    "core-green-100",
+    "core-green-200",
+    "core-green-50",
+    "core-green-700",
+    "core-green-800",
+    "core-green-900",
+    "core-orange-100",
+    "core-orange-700",
+    "core-red-100",
+    "core-red-700",
+    "core-ui-100",
+    "core-ui-200",
+    "core-ui-300",
+    "core-ui-400",
+    "core-ui-50",
+    "core-ui-600",
+    "core-ui-700",
+    "core-ui-800",
+    "core-ui-900",
+    "core-white",
+    "line-brand",
+    "line-default",
+    "line-error",
+    "line-focus",
+    "line-highlight",
+    "line-info",
+    "line-neutral",
+    "line-strong",
+    "line-success",
+    "line-warning",
+    "text-attention",
+    "text-brand",
+    "text-brand-active",
+    "text-brand-hover",
+    "text-default",
+    "text-disabled",
+    "text-error",
+    "text-info",
+    "text-inverted",
+    "text-link",
+    "text-link-hover",
+    "text-neutral",
+    "text-secondary",
+    "text-success",
+    "text-tertiary",
+    "text-warning"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/button.html",
+      "description": "Minimal canonical Button usage."
+    }
+  ],
+  "composition": {
+    "patterns": [
+      "feedback-and-status",
+      "surface-and-content"
+    ],
+    "relatedComponents": [
+      "toast",
+      "badge",
+      "button-feedback",
+      "link"
+    ],
+    "notes": [
+      "Pair destructive buttons with confirmation flow (modal or inline undo).",
+      "Use button feedback states for lightweight success/error messaging."
+    ]
+  },
+  "breakingChangePolicy": {
+    "classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
+    "a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
+  }
+}

package/llm/components/card-assessment.json

@@ -0,0 +1,93 @@
+{
+  "id": "card-assessment",
+  "name": "Investor fit card",
+  "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"
+  ],
+  "sourcePaths": [
+    "app/design-system/card-assessment/page.js"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "card-assessment",
+  "variants": [],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "card-assessment"
+    ],
+    "optionalClasses": [],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [
+      "status"
+    ],
+    "aria": [
+      "aria-label"
+    ]
+  },
+  "a11y": {
+    "interactive": false,
+    "requiredRoles": [
+      "status"
+    ],
+    "requiredAria": [
+      "aria-label"
+    ],
+    "keyboardSupport": [],
+    "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
+  },
+  "dos": [
+    "Apply the base class 'card-assessment' on the root element.",
+    "Use documented modifiers for visual variants instead of ad-hoc custom classes.",
+    "Keep semantic color usage aligned with token classes for light/dark support."
+  ],
+  "donts": [
+    "Do not combine conflicting state classes on the same element.",
+    "Do not rely on undocumented internal classes in production templates.",
+    "Do not remove required accessibility attributes when component is interactive."
+  ],
+  "tokenUsage": [],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/card-assessment.html",
+      "description": "Minimal canonical Investor fit card usage."
+    }
+  ],
+  "composition": {
+    "patterns": [],
+    "relatedComponents": [],
+    "notes": []
+  },
+  "breakingChangePolicy": {
+    "classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
+    "a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
+  }
+}

package/llm/components/card-test.json

@@ -0,0 +1,83 @@
+{
+  "id": "card-test",
+  "name": "Readiness card",
+  "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"
+  ],
+  "sourcePaths": [
+    "app/design-system/card-test/page.js"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "card-test",
+  "variants": [],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "card-test"
+    ],
+    "optionalClasses": [],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [],
+    "aria": []
+  },
+  "a11y": {
+    "interactive": false,
+    "requiredRoles": [],
+    "requiredAria": [],
+    "keyboardSupport": [],
+    "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
+  },
+  "dos": [
+    "Apply the base class 'card-test' on the root element.",
+    "Use documented modifiers for visual variants instead of ad-hoc custom classes.",
+    "Keep semantic color usage aligned with token classes for light/dark support."
+  ],
+  "donts": [
+    "Do not combine conflicting state classes on the same element.",
+    "Do not rely on undocumented internal classes in production templates.",
+    "Do not remove required accessibility attributes when component is interactive."
+  ],
+  "tokenUsage": [],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/card-test.html",
+      "description": "Minimal canonical Readiness card usage."
+    }
+  ],
+  "composition": {
+    "patterns": [],
+    "relatedComponents": [],
+    "notes": []
+  },
+  "breakingChangePolicy": {
+    "classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
+    "a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
+  }
+}

package/llm/components/card.json

@@ -0,0 +1,94 @@
+{
+  "id": "card",
+  "name": "Card",
+  "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"
+  ],
+  "sourcePaths": [
+    "app/design-system/card/page.js",
+    "assets/styles/card.css",
+    "assets/styles/drawer.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "card",
+  "variants": [
+    {
+      "name": "card-default",
+      "className": "card-default",
+      "description": "Default card style"
+    }
+  ],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "card"
+    ],
+    "optionalClasses": [
+      "card-default"
+    ],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [],
+    "aria": []
+  },
+  "a11y": {
+    "interactive": false,
+    "requiredRoles": [],
+    "requiredAria": [],
+    "keyboardSupport": [],
+    "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
+  },
+  "dos": [
+    "Apply the base class 'card' on the root element.",
+    "Use documented modifiers for visual variants instead of ad-hoc custom classes.",
+    "Keep semantic color usage aligned with token classes for light/dark support."
+  ],
+  "donts": [
+    "Do not combine conflicting state classes on the same element.",
+    "Do not rely on undocumented internal classes in production templates.",
+    "Do not remove required accessibility attributes when component is interactive."
+  ],
+  "tokenUsage": [
+    "background-surface",
+    "line-default",
+    "line-strong"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/card.html",
+      "description": "Minimal canonical Card usage."
+    }
+  ],
+  "composition": {
+    "patterns": [
+      "surface-and-content"
+    ],
+    "relatedComponents": [],
+    "notes": []
+  },
+  "breakingChangePolicy": {
+    "classContract": "Base class, documented modifiers, and state class names are semver-protected for consumer markup.",
+    "a11yContract": "Documented role and aria requirements are semver-protected for generated markup."
+  }
+}