twntyx-css 1.0.0

package/llm/components/text-input.json

@@ -0,0 +1,275 @@
+{
+  "id": "text-input",
+  "name": "Text input",
+  "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"
+  ],
+  "sourcePaths": [
+    "app/design-system/text-input/page.js",
+    "assets/styles/breadcrumb.css",
+    "assets/styles/button.css",
+    "assets/styles/chat.css",
+    "assets/styles/checkmark.css",
+    "assets/styles/command.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/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": "input-text",
+  "variants": [
+    {
+      "name": "input-divide",
+      "className": "input-divide",
+      "description": "Adds divider between input and addons"
+    },
+    {
+      "name": "input-chevron",
+      "className": "input-chevron",
+      "description": "Adds animated chevron to input"
+    },
+    {
+      "name": "input-required",
+      "className": "input-required",
+      "description": "Adds required indicator to label"
+    },
+    {
+      "name": "input-ghost",
+      "className": "input-ghost",
+      "description": "Removes borders and background"
+    },
+    {
+      "name": "input-rounded-none",
+      "className": "input-rounded-none",
+      "description": "Removes border radius"
+    },
+    {
+      "name": "input-rounded-full",
+      "className": "input-rounded-full",
+      "description": "Fully rounded corners (default)"
+    }
+  ],
+  "sizes": [
+    {
+      "name": "input-xs",
+      "className": "input-xs",
+      "description": "Extra small size variant"
+    },
+    {
+      "name": "input-sm",
+      "className": "input-sm",
+      "description": "Small size variant"
+    },
+    {
+      "name": "input-lg",
+      "className": "input-lg",
+      "description": "Large size variant"
+    },
+    {
+      "name": "input-rounded-sm",
+      "className": "input-rounded-sm",
+      "description": "Small border radius (2px)"
+    },
+    {
+      "name": "input-rounded-md",
+      "className": "input-rounded-md",
+      "description": "Medium border radius (6px)"
+    },
+    {
+      "name": "input-rounded-lg",
+      "className": "input-rounded-lg",
+      "description": "Large border radius (8px)"
+    }
+  ],
+  "states": [
+    {
+      "name": "is-loading",
+      "className": "is-loading",
+      "description": "Shows loading spinner"
+    },
+    {
+      "name": "is-active",
+      "className": "is-active",
+      "description": "Active/focused state"
+    }
+  ],
+  "structure": {
+    "rootElement": "input",
+    "requiredClasses": [
+      "input-text"
+    ],
+    "optionalClasses": [
+      "input-divide",
+      "input-chevron",
+      "input-required",
+      "input-ghost",
+      "input-rounded-none",
+      "input-rounded-full",
+      "input-xs",
+      "input-sm",
+      "input-lg",
+      "input-rounded-sm",
+      "input-rounded-md",
+      "input-rounded-lg",
+      "is-loading",
+      "is-active"
+    ],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class",
+      "type",
+      "id",
+      "name",
+      "value",
+      "placeholder",
+      "disabled",
+      "required",
+      "aria-invalid",
+      "aria-describedby",
+      "aria-label"
+    ],
+    "required": [
+      "type"
+    ],
+    "dataAttributes": [],
+    "roles": [],
+    "aria": [
+      "aria-invalid",
+      "aria-describedby",
+      "aria-label"
+    ]
+  },
+  "a11y": {
+    "interactive": true,
+    "requiredRoles": [],
+    "requiredAria": [
+      "aria-label (when no visible label)",
+      "aria-describedby (when helper/error text exists)"
+    ],
+    "keyboardSupport": [
+      "Tab",
+      "Shift+Tab",
+      "Enter"
+    ],
+    "focusBehavior": "Inputs must keep a visible focus state and expose validation state through text and aria-invalid."
+  },
+  "dos": [
+    "Pair text inputs with `.field` and `.input-label` for consistent label and helper placement.",
+    "Use semantic status colors and helper copy together for validation feedback.",
+    "Keep placeholder copy as an example, not as the primary label."
+  ],
+  "donts": [
+    "Do not use placeholder text as the only form label.",
+    "Do not hide error text when `aria-invalid` is set.",
+    "Do not apply destructive styles to neutral data entry states."
+  ],
+  "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-500",
+    "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/text-input.html",
+      "description": "Minimal canonical Text input usage."
+    }
+  ],
+  "composition": {
+    "patterns": [
+      "form-field-composition"
+    ],
+    "relatedComponents": [
+      "field",
+      "textarea",
+      "select-input"
+    ],
+    "notes": [
+      "Use shared field layout wrappers to keep spacing and validation rhythm consistent across forms."
+    ]
+  },
+  "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/textarea.json

@@ -0,0 +1,183 @@
+{
+  "id": "textarea",
+  "name": "Textarea",
+  "status": "stable",
+  "summary": "Textarea component for multiline text input.",
+  "keywords": [
+    "box",
+    "content",
+    "edit",
+    "entry",
+    "field",
+    "form",
+    "input",
+    "multiline",
+    "paragraph",
+    "text area",
+    "textarea",
+    "type",
+    "write"
+  ],
+  "sourcePaths": [
+    "app/design-system/textarea/page.js",
+    "assets/styles/chat.css",
+    "assets/styles/field.css",
+    "assets/styles/form-checkbox-radio-toggle.css",
+    "assets/styles/form-text-select.css",
+    "assets/styles/input-group.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "input-textarea",
+  "variants": [
+    {
+      "name": "input-resize-none",
+      "className": "input-resize-none",
+      "description": "Disables textarea resizing"
+    },
+    {
+      "name": "input-resize-y",
+      "className": "input-resize-y",
+      "description": "Allows vertical resizing only"
+    },
+    {
+      "name": "input-resize-x",
+      "className": "input-resize-x",
+      "description": "Allows horizontal resizing only"
+    },
+    {
+      "name": "input-autosize",
+      "className": "input-autosize",
+      "description": "Automatically adjusts height to content"
+    }
+  ],
+  "sizes": [
+    {
+      "name": "input-xs",
+      "className": "input-xs",
+      "description": "Extra small size variant"
+    },
+    {
+      "name": "input-sm",
+      "className": "input-sm",
+      "description": "Small size variant"
+    },
+    {
+      "name": "input-lg",
+      "className": "input-lg",
+      "description": "Large size variant"
+    }
+  ],
+  "states": [],
+  "structure": {
+    "rootElement": "input",
+    "requiredClasses": [
+      "input-textarea"
+    ],
+    "optionalClasses": [
+      "input-resize-none",
+      "input-resize-y",
+      "input-resize-x",
+      "input-autosize",
+      "input-xs",
+      "input-sm",
+      "input-lg"
+    ],
+    "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 'input-textarea' 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-error",
+    "background-info",
+    "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-default",
+    "line-error",
+    "line-focus",
+    "line-highlight",
+    "line-info",
+    "line-strong",
+    "line-success",
+    "line-warning",
+    "text-default",
+    "text-disabled",
+    "text-error",
+    "text-info",
+    "text-link",
+    "text-link-hover",
+    "text-secondary",
+    "text-success",
+    "text-tertiary",
+    "text-warning"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/textarea.html",
+      "description": "Minimal canonical Textarea 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/timeline.json

@@ -0,0 +1,142 @@
+{
+  "id": "timeline",
+  "name": "Timeline",
+  "status": "stable",
+  "summary": "Timeline pattern for visualizing ordered events, milestones, and process history.",
+  "keywords": [
+    "activity",
+    "events",
+    "history",
+    "progress",
+    "sequence",
+    "timeline"
+  ],
+  "sourcePaths": [
+    "app/design-system/timeline/page.js",
+    "assets/styles/breadcrumb.css",
+    "assets/styles/timeline.css"
+  ],
+  "apiModel": "html-class",
+  "baseClass": "timeline",
+  "variants": [
+    {
+      "name": "timeline-default",
+      "className": "timeline-default",
+      "description": "Default vertical timeline with compact dot markers."
+    },
+    {
+      "name": "timeline-vertical",
+      "className": "timeline-vertical",
+      "description": "Vertical timeline with larger icon markers and chips."
+    },
+    {
+      "name": "timeline-stepper",
+      "className": "timeline-stepper",
+      "description": "Responsive stepper timeline (stacked on mobile, row on sm+)."
+    },
+    {
+      "name": "timeline-activity",
+      "className": "timeline-activity",
+      "description": "Activity log timeline with avatar markers and card entries."
+    }
+  ],
+  "sizes": [],
+  "states": [
+    {
+      "name": "is-current",
+      "className": "is-current",
+      "description": "Marks an item as current with brand marker and connector."
+    },
+    {
+      "name": "is-complete",
+      "className": "is-complete",
+      "description": "Marks an item as complete with success marker and connector."
+    }
+  ],
+  "structure": {
+    "rootElement": "div",
+    "requiredClasses": [
+      "timeline"
+    ],
+    "optionalClasses": [
+      "timeline-default",
+      "timeline-vertical",
+      "timeline-stepper",
+      "timeline-activity",
+      "is-current",
+      "is-complete"
+    ],
+    "requiredChildren": [],
+    "optionalChildren": []
+  },
+  "attributes": {
+    "allowed": [
+      "class"
+    ],
+    "required": [],
+    "dataAttributes": [],
+    "roles": [
+      "status"
+    ],
+    "aria": [
+      "aria-hidden"
+    ]
+  },
+  "a11y": {
+    "interactive": false,
+    "requiredRoles": [
+      "status"
+    ],
+    "requiredAria": [
+      "aria-hidden"
+    ],
+    "keyboardSupport": [],
+    "focusBehavior": "No keyboard interaction is required unless nested interactive children are introduced."
+  },
+  "dos": [
+    "Apply the base class 'timeline' 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-page",
+    "background-success",
+    "background-surface-elevated",
+    "line-brand",
+    "line-brand-active",
+    "line-default",
+    "line-highlight",
+    "line-success",
+    "text-brand",
+    "text-default",
+    "text-inverted",
+    "text-link",
+    "text-link-active",
+    "text-link-hover",
+    "text-success",
+    "text-tertiary"
+  ],
+  "examples": [
+    {
+      "id": "canonical",
+      "file": "examples/timeline.html",
+      "description": "Minimal canonical Timeline 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."
+  }
+}