twntyx-css 1.0.0

package/llm/components/avatar.json

@@ -0,0 +1,149 @@
+{
+  "id": "avatar",
+  "name": "Avatar",
+  "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"
+  ],
+  "sourcePaths": [
+    "app/design-system/avatar/page.js",
+    "assets/styles/avatar.css",
+    "assets/styles/button.css",
+    "assets/styles/chart-stacked.css",
+    "assets/styles/chat.css",
+    "assets/styles/menu.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "avatar",
+  "variants": [
+    {
+      "name": "online",
+      "className": "online",
+      "description": "Shows a green dot as online indicator"
+    },
+    {
+      "name": "offline",
+      "className": "offline",
+      "description": "Shows a gray dot as offline indicator"
+    },
+    {
+      "name": "placeholder",
+      "className": "placeholder",
+      "description": "Shows letters as avatar placeholder"
+    }
+  ],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "avatar"
+    ],
+    "optionalClasses": [
+      "online",
+      "offline",
+      "placeholder"
+    ],
+    "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 'avatar' 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-brand",
+    "background-brand-active",
+    "background-error",
+    "background-error-active",
+    "background-inverted",
+    "background-neutral",
+    "background-neutral-active",
+    "background-page",
+    "background-success-active",
+    "background-surface",
+    "background-surface-elevated",
+    "background-surface-sunken",
+    "brand-default",
+    "brand-strong",
+    "core-black",
+    "core-green-100",
+    "core-green-300",
+    "core-ui-100",
+    "core-ui-400",
+    "core-ui-800",
+    "core-white",
+    "line-brand",
+    "line-default",
+    "line-error",
+    "line-strong",
+    "line-subtle",
+    "text-attention",
+    "text-brand",
+    "text-brand-active",
+    "text-brand-hover",
+    "text-default",
+    "text-disabled",
+    "text-error",
+    "text-inverted",
+    "text-link",
+    "text-link-hover",
+    "text-secondary",
+    "text-success",
+    "text-tertiary"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/avatar.html",
+      "description": "Minimal canonical Avatar 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."
+  }
+}

package/llm/components/badge.json

@@ -0,0 +1,263 @@
+{
+  "id": "badge",
+  "name": "Badge",
+  "status": "stable",
+  "summary": "Small status indicators and labels.",
+  "keywords": [
+    "badge",
+    "chip",
+    "counter",
+    "dot",
+    "flag",
+    "highlight",
+    "indicator",
+    "label",
+    "marker",
+    "notification",
+    "pill",
+    "status",
+    "tag"
+  ],
+  "sourcePaths": [
+    "app/design-system/badge/page.js",
+    "assets/styles/badge.css",
+    "assets/styles/button.css",
+    "assets/styles/contest.css",
+    "assets/styles/form-text-select.css",
+    "assets/styles/shared.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "badge",
+  "variants": [
+    {
+      "name": "badge-placeholder",
+      "className": "badge-placeholder",
+      "description": "Placeholder badge style"
+    },
+    {
+      "name": "badge-neutral",
+      "className": "badge-neutral",
+      "description": "Neutral badge style"
+    },
+    {
+      "name": "badge-success",
+      "className": "badge-success",
+      "description": "Success badge style"
+    },
+    {
+      "name": "badge-error",
+      "className": "badge-error",
+      "description": "Error badge style"
+    },
+    {
+      "name": "badge-warning",
+      "className": "badge-warning",
+      "description": "Warning badge style"
+    },
+    {
+      "name": "badge-info",
+      "className": "badge-info",
+      "description": "Info badge style"
+    },
+    {
+      "name": "badge-attention",
+      "className": "badge-attention",
+      "description": "Attention badge style"
+    },
+    {
+      "name": "badge-brand",
+      "className": "badge-brand",
+      "description": "Brand badge style"
+    },
+    {
+      "name": "badge-filled",
+      "className": "badge-filled",
+      "description": "Filled badge style variant"
+    },
+    {
+      "name": "badge-interactive",
+      "className": "badge-interactive",
+      "description": "Interactive/clickable badge style"
+    },
+    {
+      "name": "badge-status-undefined",
+      "className": "badge-status-undefined",
+      "description": "Status badge - no data"
+    },
+    {
+      "name": "badge-status-verylow",
+      "className": "badge-status-verylow",
+      "description": "Status badge - very low"
+    },
+    {
+      "name": "badge-status-low",
+      "className": "badge-status-low",
+      "description": "Status badge - low"
+    },
+    {
+      "name": "badge-status-high",
+      "className": "badge-status-high",
+      "description": "Status badge - high"
+    },
+    {
+      "name": "badge-status-veryhigh",
+      "className": "badge-status-veryhigh",
+      "description": "Status badge - very high"
+    }
+  ],
+  "sizes": [
+    {
+      "name": "badge-sm",
+      "className": "badge-sm",
+      "description": "Small badge size"
+    },
+    {
+      "name": "badge-lg",
+      "className": "badge-lg",
+      "description": "Large badge size"
+    },
+    {
+      "name": "badge-status-medium",
+      "className": "badge-status-medium",
+      "description": "Status badge - medium"
+    }
+  ],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "badge"
+    ],
+    "optionalClasses": [
+      "badge-placeholder",
+      "badge-neutral",
+      "badge-success",
+      "badge-error",
+      "badge-warning",
+      "badge-info",
+      "badge-attention",
+      "badge-brand",
+      "badge-filled",
+      "badge-interactive",
+      "badge-status-undefined",
+      "badge-status-verylow",
+      "badge-status-low",
+      "badge-status-high",
+      "badge-status-veryhigh",
+      "badge-sm",
+      "badge-lg",
+      "badge-status-medium"
+    ],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [
+      "status"
+    ],
+    "aria": []
+  },
+  "a11y": {
+    "interactive": false,
+    "requiredRoles": [
+      "status"
+    ],
+    "requiredAria": [],
+    "keyboardSupport": [],
+    "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
+  },
+  "dos": [
+    "Apply the base class 'badge' 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-attention-active",
+    "background-brand",
+    "background-brand-active",
+    "background-error",
+    "background-info",
+    "background-inverted",
+    "background-neutral",
+    "background-success",
+    "background-surface",
+    "background-surface-elevated",
+    "background-surface-sunken",
+    "background-warning",
+    "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-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-neutral",
+    "text-secondary",
+    "text-success",
+    "text-tertiary",
+    "text-warning"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/badge.html",
+      "description": "Minimal canonical Badge 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."
+  }
+}

package/llm/components/banner-marketplace.json

@@ -0,0 +1,81 @@
+{
+  "id": "banner-marketplace",
+  "name": "Funding banner",
+  "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"
+  ],
+  "sourcePaths": [
+    "app/design-system/banner-marketplace/page.js"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "banner-marketplace",
+  "variants": [],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "banner-marketplace"
+    ],
+    "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 'banner-marketplace' 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/banner-marketplace.html",
+      "description": "Minimal canonical Funding banner 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/banner.json

@@ -0,0 +1,120 @@
+{
+  "id": "banner",
+  "name": "Banner",
+  "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"
+  ],
+  "sourcePaths": [
+    "app/design-system/banner/page.js",
+    "assets/styles/banner.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "banner",
+  "variants": [
+    {
+      "name": "banner-info",
+      "className": "banner-info",
+      "description": "Info variant styling"
+    },
+    {
+      "name": "banner-success",
+      "className": "banner-success",
+      "description": "Success variant styling"
+    },
+    {
+      "name": "banner-error",
+      "className": "banner-error",
+      "description": "Error variant styling"
+    },
+    {
+      "name": "banner-attention",
+      "className": "banner-attention",
+      "description": "Attention variant styling"
+    }
+  ],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "banner"
+    ],
+    "optionalClasses": [
+      "banner-info",
+      "banner-success",
+      "banner-error",
+      "banner-attention"
+    ],
+    "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 'banner' 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": [
+    "core-black",
+    "core-white",
+    "text-attention",
+    "text-error",
+    "text-info",
+    "text-secondary",
+    "text-success",
+    "text-warning"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/banner.html",
+      "description": "Minimal canonical Banner usage."
+    }
+  ],
+  "composition": {
+    "patterns": [
+      "feedback-and-status"
+    ],
+    "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."
+  }
+}