twntyx-css 1.0.0

package/llm/components/chat.json

@@ -0,0 +1,155 @@
+{
+  "id": "chat",
+  "name": "Chat",
+  "status": "stable",
+  "summary": "Chat component for displaying conversations between users or with AI assistants.",
+  "keywords": [
+    "ai chat",
+    "chat",
+    "chatbot",
+    "communication",
+    "conversation",
+    "messages"
+  ],
+  "sourcePaths": [
+    "app/design-system/chat/page.js",
+    "assets/styles/button.css",
+    "assets/styles/chat.css",
+    "assets/styles/form-text-select.css",
+    "assets/styles/panel.css",
+    "assets/styles/toast.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "chat",
+  "variants": [
+    {
+      "name": "chat-secondary",
+      "className": "chat-secondary",
+      "description": "Alternative styling for AI chat"
+    }
+  ],
+  "sizes": [],
+  "states": [
+    {
+      "name": "is-owner",
+      "className": "is-owner",
+      "description": "Indicates messages from the current user"
+    },
+    {
+      "name": "is-loading",
+      "className": "is-loading",
+      "description": "Loading state that reveals"
+    }
+  ],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "chat"
+    ],
+    "optionalClasses": [
+      "chat-secondary",
+      "is-owner",
+      "is-loading"
+    ],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class"
+    ],
+    "required": [],
+    "dataAttributes": [
+      "data-loading"
+    ],
+    "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 'chat' 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-info",
+    "background-info-active",
+    "background-inverted",
+    "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-ui-100",
+    "core-ui-50",
+    "core-ui-700",
+    "core-ui-800",
+    "core-ui-900",
+    "core-white",
+    "line-default",
+    "line-error",
+    "line-focus",
+    "line-highlight",
+    "line-info",
+    "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-secondary",
+    "text-success",
+    "text-tertiary",
+    "text-warning"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/chat.html",
+      "description": "Minimal canonical Chat 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/checkbox.json

@@ -0,0 +1,186 @@
+{
+  "id": "checkbox",
+  "name": "Checkbox",
+  "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"
+  ],
+  "sourcePaths": [
+    "app/design-system/checkbox/page.js",
+    "assets/styles/button.css",
+    "assets/styles/chat.css",
+    "assets/styles/field.css",
+    "assets/styles/form-checkbox-radio-toggle.css",
+    "assets/styles/form-shared.css",
+    "assets/styles/form-text-select.css",
+    "assets/styles/input-group.css",
+    "assets/styles/menu.css",
+    "assets/styles/pagination.css",
+    "assets/styles/shared.css",
+    "assets/styles/tab.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "checkbox",
+  "variants": [
+    {
+      "name": "input-line-through",
+      "className": "input-line-through",
+      "description": "Line through state"
+    },
+    {
+      "name": "checkbox-green",
+      "className": "checkbox-green",
+      "description": "Green variant"
+    }
+  ],
+  "sizes": [],
+  "states": [
+    {
+      "name": "is-error",
+      "className": "is-error",
+      "description": "Error message"
+    },
+    {
+      "name": "is-disabled",
+      "className": "is-disabled",
+      "description": "Disabled state"
+    },
+    {
+      "name": "is-checked",
+      "className": "is-checked",
+      "description": "Checked state"
+    }
+  ],
+  "structure": {
+    "rootElement": "input",
+    "requiredClasses": [
+      "checkbox"
+    ],
+    "optionalClasses": [
+      "input-line-through",
+      "checkbox-green",
+      "is-error",
+      "is-disabled",
+      "is-checked"
+    ],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class",
+      "id",
+      "tabindex"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [],
+    "aria": []
+  },
+  "a11y": {
+    "interactive": true,
+    "requiredRoles": [],
+    "requiredAria": [
+      "aria-label (when no visible label)"
+    ],
+    "keyboardSupport": [
+      "Tab",
+      "Shift+Tab",
+      "Enter",
+      "Space"
+    ],
+    "focusBehavior": "Visible focus state is required when the component is focusable or clickable."
+  },
+  "dos": [
+    "Apply the base class 'checkbox' 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-info",
+    "background-inverted",
+    "background-page",
+    "background-success",
+    "background-surface",
+    "background-surface-elevated",
+    "background-surface-sunken",
+    "background-warning",
+    "brand-default",
+    "brand-moderate",
+    "brand-strong",
+    "core-black",
+    "core-ui-100",
+    "core-ui-300",
+    "core-ui-400",
+    "core-ui-50",
+    "core-ui-500",
+    "core-ui-700",
+    "core-ui-800",
+    "core-ui-900",
+    "core-white",
+    "line-brand",
+    "line-default",
+    "line-error",
+    "line-focus",
+    "line-highlight",
+    "line-info",
+    "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-secondary",
+    "text-success",
+    "text-tertiary",
+    "text-warning"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/checkbox.html",
+      "description": "Minimal canonical Checkbox usage."
+    }
+  ],
+  "composition": {
+    "patterns": [
+      "form-field-composition"
+    ],
+    "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/checkmark.json

@@ -0,0 +1,175 @@
+{
+  "id": "checkmark",
+  "name": "Checkmark",
+  "status": "stable",
+  "summary": "Animated checkmark indicator for active and completion states.",
+  "keywords": [
+    "boolean",
+    "check",
+    "checkmark",
+    "complete",
+    "done",
+    "indicator",
+    "selection",
+    "state",
+    "status",
+    "success",
+    "tick"
+  ],
+  "sourcePaths": [
+    "app/design-system/checkmark/page.js",
+    "assets/styles/breadcrumb.css",
+    "assets/styles/button.css",
+    "assets/styles/chat.css",
+    "assets/styles/checkmark.css",
+    "assets/styles/command.css",
+    "assets/styles/form-text-select.css",
+    "assets/styles/menu.css",
+    "assets/styles/navbar.css",
+    "assets/styles/pagination.css",
+    "assets/styles/progress.css",
+    "assets/styles/steps.css",
+    "assets/styles/tab.css",
+    "assets/styles/table.css",
+    "assets/styles/toast.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "checkmark",
+  "variants": [
+    {
+      "name": "checkmark-invisible",
+      "className": "checkmark-invisible",
+      "description": "Keeps layout size while hiding the off state"
+    }
+  ],
+  "sizes": [
+    {
+      "name": "checkmark-sm",
+      "className": "checkmark-sm",
+      "description": "Small size variant"
+    },
+    {
+      "name": "checkmark-xs",
+      "className": "checkmark-xs",
+      "description": "Extra small size variant"
+    }
+  ],
+  "states": [
+    {
+      "name": "is-active",
+      "className": "is-active",
+      "description": "Activates the checkmark state"
+    }
+  ],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "checkmark"
+    ],
+    "optionalClasses": [
+      "checkmark-invisible",
+      "checkmark-sm",
+      "checkmark-xs",
+      "is-active"
+    ],
+    "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 'checkmark' 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-info",
+    "background-info-active",
+    "background-inverted",
+    "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-ui-100",
+    "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-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-active",
+    "text-link-hover",
+    "text-secondary",
+    "text-success",
+    "text-tertiary",
+    "text-warning"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/checkmark.html",
+      "description": "Minimal canonical Checkmark 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/collapsible.json

@@ -0,0 +1,100 @@
+{
+  "id": "collapsible",
+  "name": "Collapsible",
+  "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"
+  ],
+  "sourcePaths": [
+    "app/design-system/collapsible/page.js",
+    "assets/styles/collapsible.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "collapsible",
+  "variants": [
+    {
+      "name": "collapsible-has-arrow",
+      "className": "collapsible-has-arrow",
+      "description": "Adds a rotating arrow indicator to the header"
+    },
+    {
+      "name": "collapsible-card",
+      "className": "collapsible-card",
+      "description": "Styles the collapsible as a card with padding and borders"
+    }
+  ],
+  "sizes": [],
+  "states": [],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "collapsible"
+    ],
+    "optionalClasses": [
+      "collapsible-has-arrow",
+      "collapsible-card"
+    ],
+    "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 'collapsible' 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": [
+    "line-default",
+    "text-default",
+    "text-secondary",
+    "text-tertiary"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/collapsible.html",
+      "description": "Minimal canonical Collapsible 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/color-palette.json

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